@proyecto-viviana/solid-stately 0.6.0-rc.0 → 0.6.0-rc.1

package/src/color/createColorSliderState.ts

@@ -65,6 +65,8 @@ export interface ColorSliderState {
   readonly maxValue: number;
   /** Whether the slider is disabled. */
   readonly isDisabled: boolean;
+  /** The channel number a native form reset restores. */
+  readonly defaultThumbValue: number;
 
   /** Get the current channel value. */
   getThumbValue(): number;
@@ -125,6 +127,22 @@ export function createColorSliderState(
     }
   }
 
+  // Form reset restores the first defaultValue's channel, or the first
+  // controlled color's channel when that default was omitted. An explicit
+  // null default falls through.
+  const initialOptions = getOptions();
+  const resetColor = (color: Color | string) => {
+    const normalized = normalizeColor(color);
+    return initialOptions.colorSpace ? normalized.toFormat(initialOptions.colorSpace) : normalized;
+  };
+  const initialDefault = initialOptions.defaultValue
+    ? resetColor(initialOptions.defaultValue)
+    : undefined;
+  const firstColor =
+    initialOptions.value !== undefined ? resetColor(initialOptions.value) : undefined;
+  const defaultColor = initialDefault ?? firstColor ?? resetColor("#ff0000");
+  const defaultThumbValue = defaultColor.getChannelValue(initialOptions.channel);
+
   // Controlled vs uncontrolled value
   const value = createMemo(() => {
     const opts = getOptions();
@@ -241,12 +259,16 @@ export function createColorSliderState(
     }
   };
 
-  // Get display color (alpha = 1)
+  // Hue paints a pure color. Alpha keeps its alpha. Other channels paint opaque.
   const getDisplayColor = () => {
     const v = value();
-    if (channel() === "hue") {
+    const current = channel();
+    if (current === "hue") {
       return normalizeColor(`hsl(${v.getChannelValue("hue")}, 100%, 50%)`);
     }
+    if (current === "alpha") {
+      return v;
+    }
     return v.withChannelValue("alpha", 1);
   };
 
@@ -286,6 +308,7 @@ export function createColorSliderState(
     get isDisabled() {
       return isDisabled();
     },
+    defaultThumbValue,
     getThumbValue,
     getThumbMinValue,
     getThumbMaxValue,

package/src/color/createColorWheelState.ts

@@ -86,7 +86,13 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
     return value.toFormat(value.getColorSpace() === "hsb" ? "hsb" : "hsl");
   };
 
-  const initialValue = normalizeWheelValue(getOptions().defaultValue ?? defaultColor);
+  // Pin useColorWheelState returns the first controlled color as defaultValue
+  // so a native form reset restores that hue. The built-in red is only used
+  // when the wheel is uncontrolled and no defaultValue was passed.
+  const firstOptions = getOptions();
+  const controlledInitial =
+    firstOptions.value !== undefined ? normalizeWheelValue(firstOptions.value) : undefined;
+  const initialValue = normalizeWheelValue(firstOptions.defaultValue ?? defaultColor);
   const [internalValue, setInternalValue] = createInternalSignal<Color>(initialValue);
   const [isDragging, setIsDragging] = createInternalSignal(false);
   let valueRef = initialValue;
@@ -147,9 +153,7 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
   const degToRad = (deg: number) => (deg * Math.PI) / 180;
 
   const cartesianToAngle = (x: number, y: number, radius: number) => {
-    const clampedX = Math.max(-radius, Math.min(radius, x));
-    const clampedY = Math.max(-radius, Math.min(radius, y));
-    return mod(radToDeg(Math.atan2(clampedY, clampedX)), 360);
+    return mod(radToDeg(Math.atan2(y / radius, x / radius)), 360);
   };
 
   const angleToCartesian = (angle: number, radius: number) => ({
@@ -235,7 +239,7 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
       return value();
     },
     get defaultValue() {
-      return initialValue;
+      return controlledInitial ?? initialValue;
     },
     get isDragging() {
       return isDragging();