@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/ColorEditor.tsx

@@ -5,7 +5,7 @@
  * into a complete color editing UI. Pure composition — no new ARIA hooks needed.
  */
 
-import { type JSX, createSignal, For, Show, splitProps, createMemo } from 'solid-js'
+import { type JSX, createSignal, For, Show, splitProps, createMemo } from "solid-js";
 import {
   ColorPicker,
   ColorArea,
@@ -16,47 +16,39 @@ import {
   ColorSliderThumb,
   ColorField,
   ColorFieldInput,
-} from './Color'
-import { getColorChannels } from '@proyecto-viviana/solid-stately'
-import type { Color, ColorChannel, ColorSpace } from '@proyecto-viviana/solid-stately'
+} from "./Color";
+import { getColorChannels } from "@proyecto-viviana/solid-stately";
+import type { Color, ColorChannel, ColorSpace } from "@proyecto-viviana/solid-stately";
 
-// ============================================
-// TYPES
-// ============================================
-
-export type ColorEditorColorSpace = 'rgb' | 'hsl' | 'hsb'
+export type ColorEditorColorSpace = "rgb" | "hsl" | "hsb";
 
 export interface ColorEditorRenderProps {
-  colorSpace: ColorEditorColorSpace | 'hex'
+  colorSpace: ColorEditorColorSpace | "hex";
 }
 
 export interface ColorEditorProps {
   /** The current color value (controlled). */
-  value?: Color | string
+  value?: Color | string;
   /** The default color value (uncontrolled). */
-  defaultValue?: Color | string
+  defaultValue?: Color | string;
   /** Handler called when the color changes. */
-  onChange?: (color: Color) => void
+  onChange?: (color: Color) => void;
   /** Whether to hide the alpha channel. */
-  hideAlphaChannel?: boolean
+  hideAlphaChannel?: boolean;
   /** The initial color space. @default 'hex' */
-  colorSpace?: ColorEditorColorSpace | 'hex'
+  colorSpace?: ColorEditorColorSpace | "hex";
   /** Handler called when the color space changes. */
-  onColorSpaceChange?: (colorSpace: ColorEditorColorSpace | 'hex') => void
+  onColorSpaceChange?: (colorSpace: ColorEditorColorSpace | "hex") => void;
   /** The CSS class name. */
-  class?: string | ((renderProps: ColorEditorRenderProps) => string)
+  class?: string | ((renderProps: ColorEditorRenderProps) => string);
   /** The inline style. */
-  style?: JSX.CSSProperties
+  style?: JSX.CSSProperties;
   /** Children override. If provided, replaces the default layout. */
-  children?: JSX.Element
+  children?: JSX.Element;
   /** Whether the editor is disabled. */
-  isDisabled?: boolean
+  isDisabled?: boolean;
 }
 
-// ============================================
-// COMPONENT
-// ============================================
-
 /**
  * ColorEditor provides a default UI for editing colors.
  *
@@ -65,63 +57,76 @@ export interface ColorEditorProps {
  */
 export function ColorEditor(props: ColorEditorProps): JSX.Element {
   const [local] = splitProps(props, [
-    'value',
-    'defaultValue',
-    'onChange',
-    'hideAlphaChannel',
-    'colorSpace',
-    'onColorSpaceChange',
-    'class',
-    'style',
-    'children',
-    'isDisabled',
-  ])
-
-  const [activeSpace, setActiveSpace] = createSignal<ColorEditorColorSpace | 'hex'>(
-    local.colorSpace ?? 'hex'
-  )
-
-  const handleSpaceChange = (space: ColorEditorColorSpace | 'hex') => {
-    setActiveSpace(space)
-    local.onColorSpaceChange?.(space)
-  }
+    "value",
+    "defaultValue",
+    "onChange",
+    "hideAlphaChannel",
+    "colorSpace",
+    "onColorSpaceChange",
+    "class",
+    "style",
+    "children",
+    "isDisabled",
+  ]);
+
+  const [activeSpace, setActiveSpace] = createSignal<ColorEditorColorSpace | "hex">(
+    local.colorSpace ?? "hex",
+  );
+
+  const handleSpaceChange = (space: ColorEditorColorSpace | "hex") => {
+    setActiveSpace(space);
+    local.onColorSpaceChange?.(space);
+  };
 
   const channels = createMemo<ColorChannel[]>(() => {
-    const space = activeSpace()
-    if (space === 'hex') return []
-    return getColorChannels(space as ColorSpace)
-  })
+    const space = activeSpace();
+    if (space === "hex") return [];
+    return getColorChannels(space as ColorSpace);
+  });
 
   const resolvedClass = () => {
-    if (typeof local.class === 'function') {
-      return local.class({ colorSpace: activeSpace() })
+    if (typeof local.class === "function") {
+      return local.class({ colorSpace: activeSpace() });
     }
-    return local.class ?? ''
-  }
+    return local.class ?? "";
+  };
 
-  // If children are provided, render them instead of the default layout
   if (local.children) {
     return (
       <div class={resolvedClass()} style={local.style}>
-        <ColorPicker value={local.value} defaultValue={local.defaultValue} onChange={local.onChange}>
+        <ColorPicker
+          value={local.value}
+          defaultValue={local.defaultValue}
+          onChange={local.onChange}
+        >
           {() => local.children}
         </ColorPicker>
       </div>
-    )
+    );
   }
 
-  // Determine ColorArea channels based on active color space
   const areaChannels = createMemo(() => {
-    const space = activeSpace()
-    if (space === 'hsb' || space === 'hex') {
-      return { x: 'saturation' as ColorChannel, y: 'brightness' as ColorChannel, colorSpace: 'hsb' as ColorSpace }
+    const space = activeSpace();
+    if (space === "hsb" || space === "hex") {
+      return {
+        x: "saturation" as ColorChannel,
+        y: "brightness" as ColorChannel,
+        colorSpace: "hsb" as ColorSpace,
+      };
     }
-    if (space === 'hsl') {
-      return { x: 'saturation' as ColorChannel, y: 'lightness' as ColorChannel, colorSpace: 'hsl' as ColorSpace }
+    if (space === "hsl") {
+      return {
+        x: "saturation" as ColorChannel,
+        y: "lightness" as ColorChannel,
+        colorSpace: "hsl" as ColorSpace,
+      };
     }
-    // rgb: use green and blue on area
-    return { x: 'green' as ColorChannel, y: 'blue' as ColorChannel, colorSpace: 'rgb' as ColorSpace }
-  })
+    return {
+      x: "green" as ColorChannel,
+      y: "blue" as ColorChannel,
+      colorSpace: "rgb" as ColorSpace,
+    };
+  });
 
   return (
     <div
@@ -132,100 +137,77 @@ export function ColorEditor(props: ColorEditorProps): JSX.Element {
       <ColorPicker value={local.value} defaultValue={local.defaultValue} onChange={local.onChange}>
         {() => (
           <>
-          {/* Top row: ColorArea + vertical sliders */}
-          <div class="solidaria-ColorEditor-top">
-            <ColorArea
-              xChannel={areaChannels().x}
-              yChannel={areaChannels().y}
-              isDisabled={local.isDisabled}
-            >
-              {() => (
-                <>
-                  <ColorAreaGradient />
-                  <ColorAreaThumb />
-                </>
-              )}
-            </ColorArea>
-
-            <ColorSlider
-              channel="hue"
-              isDisabled={local.isDisabled}
-              aria-label="Hue"
-            >
-              {() => (
-                <ColorSliderTrack>
-                  {() => <ColorSliderThumb />}
-                </ColorSliderTrack>
-              )}
-            </ColorSlider>
-
-            <Show when={!local.hideAlphaChannel}>
-              <ColorSlider
-                channel="alpha"
+            <div class="solidaria-ColorEditor-top">
+              <ColorArea
+                xChannel={areaChannels().x}
+                yChannel={areaChannels().y}
                 isDisabled={local.isDisabled}
-                aria-label="Alpha"
               >
                 {() => (
-                  <ColorSliderTrack>
-                    {() => <ColorSliderThumb />}
-                  </ColorSliderTrack>
+                  <>
+                    <ColorAreaGradient />
+                    <ColorAreaThumb />
+                  </>
                 )}
+              </ColorArea>
+
+              <ColorSlider channel="hue" isDisabled={local.isDisabled} aria-label="Hue">
+                {() => <ColorSliderTrack>{() => <ColorSliderThumb />}</ColorSliderTrack>}
               </ColorSlider>
-            </Show>
-          </div>
-
-          {/* Bottom row: color space selector + channel fields */}
-          <div class="solidaria-ColorEditor-bottom">
-            <select
-              value={activeSpace()}
-              onChange={(e) => handleSpaceChange(e.currentTarget.value as ColorEditorColorSpace | 'hex')}
-              disabled={local.isDisabled}
-              aria-label="Color format"
-              class="solidaria-ColorEditor-format"
-            >
-              <option value="hex">Hex</option>
-              <option value="rgb">RGB</option>
-              <option value="hsl">HSL</option>
-              <option value="hsb">HSB</option>
-            </select>
-
-            <Show
-              when={activeSpace() !== 'hex'}
-              fallback={
-                <ColorField
-                  isDisabled={local.isDisabled}
-                  aria-label="Hex color"
-                >
-                  {() => <ColorFieldInput />}
-                </ColorField>
-              }
-            >
-              <For each={channels()}>
-                {(channel) => (
-                  <ColorField
-                    channel={channel}
-                    isDisabled={local.isDisabled}
-                    aria-label={channel}
-                  >
+
+              <Show when={!local.hideAlphaChannel}>
+                <ColorSlider channel="alpha" isDisabled={local.isDisabled} aria-label="Alpha">
+                  {() => <ColorSliderTrack>{() => <ColorSliderThumb />}</ColorSliderTrack>}
+                </ColorSlider>
+              </Show>
+            </div>
+
+            <div class="solidaria-ColorEditor-bottom">
+              <select
+                value={activeSpace()}
+                onChange={(e) =>
+                  handleSpaceChange(e.currentTarget.value as ColorEditorColorSpace | "hex")
+                }
+                disabled={local.isDisabled}
+                aria-label="Color format"
+                class="solidaria-ColorEditor-format"
+              >
+                <option value="hex">Hex</option>
+                <option value="rgb">RGB</option>
+                <option value="hsl">HSL</option>
+                <option value="hsb">HSB</option>
+              </select>
+
+              <Show
+                when={activeSpace() !== "hex"}
+                fallback={
+                  <ColorField isDisabled={local.isDisabled} aria-label="Hex color">
                     {() => <ColorFieldInput />}
                   </ColorField>
-                )}
-              </For>
-            </Show>
-
-            <Show when={!local.hideAlphaChannel && activeSpace() !== 'hex'}>
-              <ColorField
-                channel="alpha"
-                isDisabled={local.isDisabled}
-                aria-label="Alpha"
+                }
               >
-                {() => <ColorFieldInput />}
-              </ColorField>
-            </Show>
-          </div>
-        </>
+                <For each={channels()}>
+                  {(channel) => (
+                    <ColorField
+                      channel={channel}
+                      isDisabled={local.isDisabled}
+                      aria-label={channel}
+                    >
+                      {() => <ColorFieldInput />}
+                    </ColorField>
+                  )}
+                </For>
+              </Show>
+
+              <Show when={!local.hideAlphaChannel && activeSpace() !== "hex"}>
+                <ColorField channel="alpha" isDisabled={local.isDisabled} aria-label="Alpha">
+                  {() => <ColorFieldInput />}
+                </ColorField>
+              </Show>
+            </div>
+          </>
         )}
       </ColorPicker>
     </div>
-  )
+  );
 }