Add OKLAB and OKLCH to color-picker

.changeset/oklab-and-oklch-suppport.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/color-picker": minor
+---
+
+Add OKLAB and OKLCH color support

e2e/color-picker.e2e.ts

@@ -79,12 +79,10 @@ test.describe("color-picker", () => {
     await I.clickTrigger()
     await I.seeColorPicker()
     await I.seeAreaThumbIsFocused()
-
-    await I.pressKey("Tab")
-    await I.seeChannelThumbIsFocused("hue")
-
-    await I.pressKey("Tab")
-    await I.seeChannelThumbIsFocused("alpha")
+    for (const channel of ["hue", "saturation", "lightness", "alpha"] as const) {
+      await I.pressKey("Tab")
+      await I.seeChannelThumbIsFocused(channel)
+    }
   })
 
   test("[swatch] should set value on click swatch", async () => {

examples/next-ts/hooks/use-controls.tsx

@@ -18,7 +18,7 @@ export function useControls<T extends ControlRecord>(config: T) {
     ui: () => (
       <div className="controls-container">
         {Object.keys(config).map((key) => {
-          const { type, label = key, options, placeholder, min, max } = (config[key] ?? {}) as any
+          const { type, label = key, options, placeholder, min, max, forceValue } = (config[key] ?? {}) as any
           const value = deepGet(state, key)
           switch (type) {
             case "boolean":
@@ -67,7 +67,7 @@ export function useControls<T extends ControlRecord>(config: T) {
                       setState(key, e.target.value)
                     }}
                   >
-                    <option>-----</option>
+                    {!forceValue && <option>-----</option>}
                     {options.map((option) => (
                       <option key={option} value={option}>
                         {option}

examples/next-ts/pages/color-picker/basic.tsx

@@ -3,7 +3,6 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import { colorPickerControls } from "@zag-js/shared"
 import serialize from "form-serialize"
 import { useId } from "react"
-import { Show } from "../../components/show"
 import { StateVisualizer } from "../../components/state-visualizer"
 import { Toolbar } from "../../components/toolbar"
 import { useControls } from "../../hooks/use-controls"
@@ -30,16 +29,14 @@ export default function Page() {
   const service = useMachine(colorPicker.machine, {
     id: useId(),
     name: "color",
-    format: "hsla",
+    defaultFormat: "hsla",
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
     ...controls.context,
   })
-
   const api = colorPicker.connect(service, normalizeProps)
-
   return (
     <>
-      <main className="color-picker">
+      <main className="color-picker" style={{ direction: service.computed("rtl") ? "rtl" : "ltr" }}>
         <form
           onChange={(e) => {
             console.log("change:", serialize(e.currentTarget, { hash: true }))
@@ -67,44 +64,119 @@ export default function Page() {
                     <div {...api.getAreaBackgroundProps()} />
                     <div {...api.getAreaThumbProps()} />
                   </div>
-
-                  <div {...api.getChannelSliderProps({ channel: "hue" })}>
-                    <div {...api.getChannelSliderTrackProps({ channel: "hue" })} />
-                    <div {...api.getChannelSliderThumbProps({ channel: "hue" })} />
-                  </div>
+                  {api.format.startsWith("rgb") && (
+                    <>
+                      <div {...api.getChannelSliderProps({ channel: "red" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "red" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "red" })} />
+                      </div>
+                      <div {...api.getChannelSliderProps({ channel: "green" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "green" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "green" })} />
+                      </div>
+                      <div {...api.getChannelSliderProps({ channel: "blue" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "blue" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "blue" })} />
+                      </div>
+                    </>
+                  )}
+                  {api.format.startsWith("okl") && (
+                    <div {...api.getChannelSliderProps({ channel: "lightness" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "lightness" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "lightness" })} />
+                    </div>
+                  )}
+                  {api.format === "oklab" && (
+                    <>
+                      <div {...api.getChannelSliderProps({ channel: "a" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "a" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "a" })} />
+                      </div>
+                      <div {...api.getChannelSliderProps({ channel: "b" })}>
+                        <div {...api.getChannelSliderTrackProps({ channel: "b" })} />
+                        <div {...api.getChannelSliderThumbProps({ channel: "b" })} />
+                      </div>
+                    </>
+                  )}
+                  {api.format === "oklch" && (
+                    <div {...api.getChannelSliderProps({ channel: "chroma" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "chroma" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "chroma" })} />
+                    </div>
+                  )}
+                  {api.format !== "rgba" && api.format !== "oklab" && (
+                    <div {...api.getChannelSliderProps({ channel: "hue" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "hue" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "hue" })} />
+                    </div>
+                  )}
+                  {api.format.includes("s") && (
+                    <div {...api.getChannelSliderProps({ channel: "saturation" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "saturation" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "saturation" })} />
+                    </div>
+                  )}
+                  {api.format.startsWith("hsl") && (
+                    <div {...api.getChannelSliderProps({ channel: "lightness" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "lightness" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "lightness" })} />
+                    </div>
+                  )}
+                  {api.format.startsWith("hsb") && (
+                    <div {...api.getChannelSliderProps({ channel: "brightness" })}>
+                      <div {...api.getChannelSliderTrackProps({ channel: "brightness" })} />
+                      <div {...api.getChannelSliderThumbProps({ channel: "brightness" })} />
+                    </div>
+                  )}
 
                   <div {...api.getChannelSliderProps({ channel: "alpha" })}>
                     <div {...api.getTransparencyGridProps({ size: "12px" })} />
                     <div {...api.getChannelSliderTrackProps({ channel: "alpha" })} />
                     <div {...api.getChannelSliderThumbProps({ channel: "alpha" })} />
                   </div>
 
-                  <Show when={api.format.startsWith("hsl")}>
+                  {api.format.startsWith("hsl") && (
                     <div style={{ display: "flex", width: "100%" }}>
                       <span>H</span> <input {...api.getChannelInputProps({ channel: "hue" })} />
                       <span>S</span> <input {...api.getChannelInputProps({ channel: "saturation" })} />
                       <span>L</span> <input {...api.getChannelInputProps({ channel: "lightness" })} />
                       <span>A</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
                     </div>
-                  </Show>
+                  )}
 
-                  <Show when={api.format.startsWith("rgb")}>
+                  {api.format.startsWith("rgb") && (
                     <div style={{ display: "flex", width: "100%" }}>
                       <span>R</span> <input {...api.getChannelInputProps({ channel: "red" })} />
                       <span>G</span> <input {...api.getChannelInputProps({ channel: "green" })} />
                       <span>B</span> <input {...api.getChannelInputProps({ channel: "blue" })} />
                       <span>A</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
                     </div>
-                  </Show>
+                  )}
 
-                  <Show when={api.format.startsWith("hsb")}>
+                  {api.format.startsWith("hsb") && (
                     <div style={{ display: "flex", width: "100%" }}>
                       <span>H</span> <input {...api.getChannelInputProps({ channel: "hue" })} />
                       <span>S</span> <input {...api.getChannelInputProps({ channel: "saturation" })} />
                       <span>B</span> <input {...api.getChannelInputProps({ channel: "brightness" })} />
                       <span>A</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
                     </div>
-                  </Show>
+                  )}
+                  {api.format === "oklab" && (
+                    <div style={{ display: "flex", width: "100%" }}>
+                      <span>L</span> <input {...api.getChannelInputProps({ channel: "lightness" })} />
+                      <span>A</span> <input {...api.getChannelInputProps({ channel: "a" })} />
+                      <span>B</span> <input {...api.getChannelInputProps({ channel: "b" })} />
+                      <span>Alpha</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
+                    </div>
+                  )}
+                  {api.format === "oklch" && (
+                    <div style={{ display: "flex", width: "100%" }}>
+                      <span>L</span> <input {...api.getChannelInputProps({ channel: "lightness" })} />
+                      <span>C</span> <input {...api.getChannelInputProps({ channel: "chroma" })} />
+                      <span>H</span> <input {...api.getChannelInputProps({ channel: "hue" })} />
+                      <span>Alpha</span> <input {...api.getChannelInputProps({ channel: "alpha" })} />
+                    </div>
+                  )}
 
                   <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
                     <div style={{ position: "relative" }}>

examples/nuxt-ts/app/components/Controls.vue

@@ -7,58 +7,38 @@ defineProps<{ control: any }>()
     <div v-for="(value, key) in control.config" :key="key">
       <template v-if="value.type === 'boolean'">
         <div class="checkbox">
-          <input
-            :data-testid="key"
-            :id="value.label || key"
-            type="checkbox"
-            :checked="control.getState(key)"
-            @input="
-              (e) => {
-                control.setState(key, (e.target as HTMLInputElement).checked)
-              }
-            "
-          />
+          <input :data-testid="key" :id="value.label || key" type="checkbox" :checked="control.getState(key)" @input="
+            (e) => {
+              control.setState(key, (e.target as HTMLInputElement).checked)
+            }
+          " />
           <label :for="value.label || key">{{ value.label || key }}</label>
         </div>
       </template>
       <template v-if="value.type === 'string'">
         <div class="text">
           <label style="margin-right: 10px">{{ value.label || key }}</label>
-          <input
-            :data-testid="key"
-            type="text"
-            :placeholder="value.placeholder"
-            :value="control.getState(key)"
+          <input :data-testid="key" type="text" :placeholder="value.placeholder" :value="control.getState(key)"
             @keydown.enter="
               (event) => {
                 control.setState(key, (event.target as HTMLInputElement).value)
               }
-            "
-          />
+            " />
         </div>
       </template>
       <template v-if="value.type === 'select'">
         <div class="text">
           <label :for="value.label || key" style="margin-right: 10px">
             {{ value.label || key }}
           </label>
-          <select
-            :data-testid="key"
-            :id="value.label || key"
-            :value="control.getState(key)"
-            @change="
-              (e) => {
-                control.setState(key, (e.target as HTMLSelectElement).value)
-              }
-            "
-          >
-            <option>-----</option>
-            <option
-              v-for="option in value.options"
-              :key="option"
-              :value="option"
-              :selected="control.getState(key) === option"
-            >
+          <select :data-testid="key" :id="value.label || key" :value="control.getState(key)" @change="
+            (e) => {
+              control.setState(key, (e.target as HTMLSelectElement).value)
+            }
+          ">
+            <option v-if="!value.forceValue">-----</option>
+            <option v-for="option in value.options" :key="option" :value="option"
+              :selected="control.getState(key) === option">
               {{ option }}
             </option>
           </select>
@@ -69,20 +49,13 @@ defineProps<{ control: any }>()
           <label :for="value.label || key" style="margin-right: 10px">
             {{ value.label || key }}
           </label>
-          <input
-            :data-testid="key"
-            :id="value.label || key"
-            type="number"
-            :min="value.min"
-            :max="value.max"
-            :value="control.getState(key)"
-            @keydown.enter="
+          <input :data-testid="key" :id="value.label || key" type="number" :min="value.min" :max="value.max"
+            :value="control.getState(key)" @keydown.enter="
               (e) => {
                 const val = parseFloat((e.target as HTMLInputElement).value)
                 control.setState(key, isNaN(val) ? 0 : val)
               }
-            "
-          />
+            " />
         </div>
       </template>
     </div>