@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/text-field/TextField.css

@@ -0,0 +1,33 @@
+@layer components {
+  .text-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .text-field[data-invalid="true"] [data-slot="description"],
+  .text-field[aria-invalid="true"] [data-slot="description"] {
+    display: none;
+  }
+
+  .text-field [data-slot="description"] {
+    padding-inline: 0.25rem;
+  }
+
+  .text-field--full-width {
+    width: 100%;
+  }
+
+  .text-field--full-width [data-slot="input"],
+  .text-field--full-width [data-slot="textarea"],
+  .text-field--full-width [data-slot="input-group"],
+  .text-field--full-width [data-slot="date-input-group"] {
+    width: 100%;
+  }
+
+  .text-field--primary {
+  }
+
+  .text-field--secondary {
+  }
+}

package/dist/components/text-field/TextField.d.ts

@@ -0,0 +1,34 @@
+import "./TextField.css";
+import { type Accessor, type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type TextFieldVariant = "primary" | "secondary";
+export type TextFieldRenderProps = {
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+};
+export type TextFieldContextValue = {
+    variant: Accessor<TextFieldVariant>;
+    fullWidth: Accessor<boolean>;
+    isInvalid: Accessor<boolean>;
+    isDisabled: Accessor<boolean>;
+    isRequired: Accessor<boolean>;
+};
+export declare const TextFieldContext: import("solid-js").Context<TextFieldContextValue | undefined>;
+export type TextFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: TextFieldRenderProps) => JSX.Element);
+    variant?: TextFieldVariant;
+    fullWidth?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isRequired?: boolean;
+};
+declare const TextFieldRoot: Component<TextFieldRootProps>;
+declare const TextField: Component<TextFieldRootProps> & {
+    Root: Component<TextFieldRootProps>;
+};
+declare const useTextFieldContext: () => TextFieldContextValue | undefined;
+export default TextField;
+export { TextField, TextFieldRoot, useTextFieldContext };
+export type { TextFieldRootProps as TextFieldProps };

package/dist/components/text-field/TextField.js

@@ -0,0 +1,82 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./TextField.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__TextField_classes_js_47141c07__ from "./TextField.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TextFieldContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const TextFieldRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant",
+        "fullWidth",
+        "isInvalid",
+        "isDisabled",
+        "disabled",
+        "isRequired"
+    ]);
+    const variant = ()=>local.variant ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isRequired = ()=>Boolean(local.isRequired);
+    const renderChildren = ()=>{
+        if ("function" == typeof local.children) return local.children({
+            isInvalid: isInvalid(),
+            isDisabled: isDisabled(),
+            isRequired: isRequired()
+        });
+        return local.children;
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TextFieldContext.Provider, {
+        value: {
+            variant,
+            fullWidth,
+            isInvalid,
+            isDisabled,
+            isRequired
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__TextField_classes_js_47141c07__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__TextField_classes_js_47141c07__.CLASSES.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__TextField_classes_js_47141c07__.CLASSES.flag.fullWidth, local.class, local.className);
+                },
+                "data-slot": "textfield",
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-required"] () {
+                    return isRequired() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, renderChildren);
+            return _el$;
+        }
+    });
+};
+const TextField = Object.assign(TextFieldRoot, {
+    Root: TextFieldRoot
+});
+const useTextFieldContext = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TextFieldContext);
+const text_field_TextField = TextField;
+export { TextField, TextFieldContext, TextFieldRoot, text_field_TextField as default, useTextFieldContext };

package/dist/components/text-field/index.d.ts

@@ -0,0 +1 @@
+export { default, TextField, TextFieldRoot, TextFieldContext, useTextFieldContext, type TextFieldProps, type TextFieldRootProps, type TextFieldVariant, type TextFieldRenderProps, type TextFieldContextValue, } from "./TextField";

package/dist/components/text-field/index.js

@@ -0,0 +1,7 @@
+import * as __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__ from "./TextField.js";
+var __webpack_exports__TextField = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.TextField;
+var __webpack_exports__TextFieldContext = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.TextFieldContext;
+var __webpack_exports__TextFieldRoot = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.TextFieldRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__["default"];
+var __webpack_exports__useTextFieldContext = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.useTextFieldContext;
+export { __webpack_exports__TextField as TextField, __webpack_exports__TextFieldContext as TextFieldContext, __webpack_exports__TextFieldRoot as TextFieldRoot, __webpack_exports__default as default, __webpack_exports__useTextFieldContext as useTextFieldContext };

package/dist/components/textarea/Textarea.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "";
+};

package/dist/components/textarea/Textarea.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: ""
+};
+export { CLASSES };

package/dist/components/textarea/Textarea.d.ts

@@ -1,15 +1,10 @@
-import "./textarea.css";
-import { type JSX } from "solid-js";
-import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
-type TextareaBaseProps = {
-    color?: ComponentColor;
-    size?: ComponentSize;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-    resize?: "none" | "x" | "y" | "both";
+import { type Component } from "solid-js";
+import { TextArea, TextAreaRoot, type TextAreaProps as BaseTextAreaProps, type TextAreaRootProps as BaseTextAreaRootProps, type TextAreaVariant as BaseTextAreaVariant } from "../text-area";
+export type TextareaVariant = BaseTextAreaVariant;
+export type TextareaRootProps = BaseTextAreaRootProps;
+export type TextareaProps = BaseTextAreaProps;
+declare const Textarea: Component<BaseTextAreaProps> & {
+    Root: Component<BaseTextAreaProps>;
 };
-export type TextareaProps = TextareaBaseProps & IComponentBaseProps & Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaBaseProps>;
-declare const Textarea: (props: TextareaProps) => JSX.Element;
 export default Textarea;
+export { Textarea, TextArea, TextAreaRoot };

package/dist/components/textarea/Textarea.js

@@ -1,53 +1,21 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./textarea.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
-const Textarea = (props)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__ from "../text-area/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Textarea_classes_js_3c5029bc__ from "./Textarea.classes.js";
+const TextareaRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "color",
-        "size",
-        "dataTheme",
         "class",
-        "className",
-        "style",
-        "resize"
+        "className"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("textarea", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "textarea-xl": "xl" === local.size,
-            "textarea-lg": "lg" === local.size,
-            "textarea-md": "md" === local.size,
-            "textarea-sm": "sm" === local.size,
-            "textarea-xs": "xs" === local.size,
-            "textarea-primary": "primary" === local.color,
-            "textarea-secondary": "secondary" === local.color,
-            "textarea-accent": "accent" === local.color,
-            "textarea-ghost": "ghost" === local.color,
-            "textarea-info": "info" === local.color,
-            "textarea-success": "success" === local.color,
-            "textarea-warning": "warning" === local.color,
-            "textarea-error": "error" === local.color,
-            "resize-y": "y" === local.resize,
-            "resize-x": "x" === local.resize,
-            "resize-none": "none" === local.resize,
-            "resize-both": "both" === local.resize
-        }));
-    return (()=>{
-        var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$;
-    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__.TextAreaRoot, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Textarea_classes_js_3c5029bc__.CLASSES.base, local.class, local.className)
+        })));
 };
+const Textarea = Object.assign(TextareaRoot, {
+    Root: TextareaRoot
+});
 const textarea_Textarea = Textarea;
-export { textarea_Textarea as default };
+var __webpack_exports__TextArea = __WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__.TextArea;
+var __webpack_exports__TextAreaRoot = __WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__.TextAreaRoot;
+export { Textarea, textarea_Textarea as default, __webpack_exports__TextArea as TextArea, __webpack_exports__TextAreaRoot as TextAreaRoot };

package/dist/components/textarea/index.d.ts

@@ -1 +1,2 @@
-export { default, type TextareaProps } from "./Textarea";
+export { default as Textarea } from "./Textarea";
+export { default, TextArea, TextAreaRoot, type TextareaProps as TextAreaProps, type TextareaRootProps as TextAreaRootProps, type TextareaVariant as TextAreaVariant, } from "./Textarea";

package/dist/components/textarea/index.js

@@ -1,3 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__ from "./Textarea.js";
+var __webpack_exports__TextArea = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__.TextArea;
+var __webpack_exports__TextAreaRoot = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__.TextAreaRoot;
+var __webpack_exports__Textarea = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__["default"];
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__["default"];
-export { __webpack_exports__default as default };
+export { __webpack_exports__TextArea as TextArea, __webpack_exports__TextAreaRoot as TextAreaRoot, __webpack_exports__Textarea as Textarea, __webpack_exports__default as default };

package/dist/components/theme-color-picker/ThemeColorPicker.classes.d.ts

@@ -0,0 +1,12 @@
+export declare const CLASSES: {
+    readonly base: "relative";
+    readonly iconActive: "text-primary";
+    readonly popover: "absolute z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm";
+    readonly popoverAlignStart: "left-0";
+    readonly popoverAlignEnd: "right-0";
+    readonly row: "flex items-center gap-3";
+    readonly wheelWrap: "flex justify-center";
+    readonly wheelCustom: "color-wheel-custom";
+    readonly grayscaleList: "flex flex-col gap-1.5";
+    readonly swatchButton: "h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110";
+};

package/dist/components/theme-color-picker/ThemeColorPicker.classes.js

@@ -0,0 +1,13 @@
+const CLASSES = {
+    base: "relative",
+    iconActive: "text-primary",
+    popover: "absolute z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm",
+    popoverAlignStart: "left-0",
+    popoverAlignEnd: "right-0",
+    row: "flex items-center gap-3",
+    wheelWrap: "flex justify-center",
+    wheelCustom: "color-wheel-custom",
+    grayscaleList: "flex flex-col gap-1.5",
+    swatchButton: "h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110"
+};
+export { CLASSES };

package/dist/components/theme-color-picker/ThemeColorPicker.d.ts

@@ -1,13 +1,16 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
+export type ThemeColorPickerAlign = "start" | "end";
 export interface ThemeColorPickerProps extends IComponentBaseProps {
     /**
-     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_hue_shift")
+     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
      * @default "theme"
      */
     storagePrefix?: string;
     /**
-     * Callback when color changes
+     * Callback when color changes. Passes the hex string (or null on reset).
+     * Kept with legacy `(hue, saturation)` signature for backward compatibility -
+     * hue is derived from the picked hex, saturation is forwarded as-is.
      */
     onColorChange?: (hue: number | null, saturation: number) => void;
     /**
@@ -18,6 +21,13 @@ export interface ThemeColorPickerProps extends IComponentBaseProps {
      * ARIA label for the button
      */
     "aria-label"?: string;
+    /**
+     * Popover alignment relative to the trigger.
+     * "end" aligns the popover to the trigger's right edge (opens leftward).
+     * "start" aligns it to the trigger's left edge (opens rightward).
+     * @default "end"
+     */
+    align?: ThemeColorPickerAlign;
     /**
      * Custom button content (defaults to palette icon)
      */

package/dist/components/theme-color-picker/ThemeColorPicker.js

@@ -1,16 +1,17 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__ from "../colorpicker/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__ from "../color-wheel-flower/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
 import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-3"><div class="flex justify-center"></div><div class="flex flex-col gap-1.5">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110">');
-function hueToColorValue(hue, sat) {
-    if (null === hue) return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(0, 0, 100, 1);
-    return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(hue, sat, 50, 1);
+import * as __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__ from "./ThemeColorPicker.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>");
+function hexToColorValue(hex) {
+    if (null === hex) return (0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.createColorFromHsl)(0, 0, 100, 1);
+    return (0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.parseColor)(hex) ?? (0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.createColorFromHsl)(0, 0, 100, 1);
 }
 const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -18,6 +19,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
         "onColorChange",
         "onThemeSwitch",
         "aria-label",
+        "align",
         "children",
         "class",
         "className",
@@ -27,55 +29,54 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const [featureAvailable, setFeatureAvailable] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
     let containerRef;
-    const store = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore)(local.storagePrefix ?? "theme"));
-    const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hueToColorValue(store().hueShift(), store().hueSaturation()));
-    const setThemeColor = (hue, saturation)=>{
-        if (null === hue) {
-            store().setHueShift(null);
+    const store = (0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore)(local.storagePrefix ?? "theme");
+    const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hexToColorValue(store.themeColor()));
+    const handleColorChange = (color)=>{
+        const { s, l } = color.hsl;
+        if (s < 10 && l > 90) {
+            store.setThemeColor(null);
             local.onColorChange?.(null, 100);
             return;
         }
-        const normalizedHue = (hue % 360 + 360) % 360;
-        const normalizedSaturation = Math.max(0, Math.min(100, saturation));
-        store().setHueShift(normalizedHue, normalizedSaturation);
-        local.onColorChange?.(normalizedHue, normalizedSaturation);
-    };
-    const handleColorChange = (color)=>{
-        const { h, s, l } = color.hsl;
-        if (s < 10 && l > 90) return void setThemeColor(null, 100);
-        setThemeColor(h, s);
+        store.setThemeColor(color.hex);
+        local.onColorChange?.(color.hsl.h, color.hsl.s);
     };
     const GRAYSCALE_SWATCHES = [
         {
             label: "White",
-            lightness: 10
+            hex: "#fafafa",
+            theme: "dark"
         },
         {
             label: "Light gray",
-            lightness: 5
+            hex: "#d4d4d4",
+            theme: "dark"
         },
         {
             label: "Gray",
-            lightness: 0
+            hex: "#737373",
+            theme: "dark"
         },
         {
             label: "Dark gray",
-            lightness: -5
+            hex: "#404040",
+            theme: "light"
         },
         {
             label: "Charcoal",
-            lightness: -10
+            hex: "#262626",
+            theme: "light"
         },
         {
             label: "Black",
-            lightness: -15
+            hex: "#0a0a0a",
+            theme: "light"
         }
     ];
-    const handleGrayscale = (lightnessOffset)=>{
-        store().setHueShift(0, 0, lightnessOffset);
+    const handleGrayscale = (swatch)=>{
+        local.onThemeSwitch?.(swatch.theme);
+        store.setThemeColor(swatch.hex);
         local.onColorChange?.(null, 0);
-        if (lightnessOffset >= 5) local.onThemeSwitch?.("light");
-        else if (lightnessOffset <= -10) local.onThemeSwitch?.("dark");
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;
@@ -106,20 +107,20 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
             onChange: handleColorChange,
             onFormatChange: ()=>{}
         });
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.base, local.class, local.className);
+    const popoverClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover, "start" === local.align ? __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popoverAlignStart : __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popoverAlignEnd);
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
         get when () {
             return featureAvailable();
         },
         get children () {
-            var _el$ = _tmpl$3();
-            _el$.$$keydown = handleKeyDown;
+            var _el$ = _tmpl$2();
             var _ref$ = containerRef;
             "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                get ["class"] () {
-                    return classes();
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                    class: classes()
+                }), {
+                onKeyDown: handleKeyDown,
                 get style () {
                     return local.style;
                 }
@@ -136,14 +137,13 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                     return isOpen();
                 },
                 get children () {
-                    return local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                    return local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
                         name: "icon-[mdi--palette]",
                         width: 16,
-                        height: 16,
-                        get ["class"] () {
-                            return null !== store().hueShift() ? "text-primary" : void 0;
-                        }
-                    });
+                        height: 16
+                    }, ()=>({
+                            class: null !== store.themeColor() ? __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.iconActive : void 0
+                        })));
                 }
             }), null);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -152,36 +152,44 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                 },
                 get children () {
                     var _el$2 = _tmpl$2();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorPickerContext.Provider, {
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: popoverClasses()
+                        })), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorPickerContext.Provider, {
                         get value () {
                             return contextValue();
                         },
                         get children () {
                             var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorWheelFlower, {
-                                class: "color-wheel-custom"
-                            }));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.row
+                                })), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelWrap
+                                })), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorWheelFlower, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelCustom
+                                }))));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.grayscaleList
+                                })), false, true);
                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
                                 each: GRAYSCALE_SWATCHES,
-                                children: (g, i)=>(()=>{
-                                        var _el$6 = _tmpl$4();
-                                        _el$6.$$click = ()=>handleGrayscale(g.lightness);
-                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                                            var _v$ = `oklch(${[
-                                                95,
-                                                80,
-                                                60,
-                                                40,
-                                                25,
-                                                5
-                                            ][i()]}% 0 0)`, _v$2 = g.label;
-                                            _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$6.style.setProperty("background-color", _v$) : _el$6.style.removeProperty("background-color"));
-                                            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-label", _p$.t = _v$2);
-                                            return _p$;
-                                        }, {
-                                            e: void 0,
-                                            t: void 0
-                                        });
+                                children: (g)=>(()=>{
+                                        var _el$6 = _tmpl$3();
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                                class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.swatchButton
+                                            }), {
+                                            get style () {
+                                                return {
+                                                    "background-color": `${g.hex}`
+                                                };
+                                            },
+                                            get ["aria-label"] () {
+                                                return g.label;
+                                            },
+                                            onClick: ()=>handleGrayscale(g)
+                                        }), false, false);
                                         return _el$6;
                                     })()
                             }));
@@ -196,8 +204,4 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     });
 };
 const ThemeColorPicker = ThemeColorPicker_ThemeColorPicker;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "keydown",
-    "click"
-]);
 export { ThemeColorPicker as default };

package/dist/components/theme-color-picker/hueShift.d.ts

@@ -1,14 +1,14 @@
 declare function resetHueShift(): void;
 export interface HueShiftStore {
-    hueShift: () => number | null;
-    hueSaturation: () => number;
-    hueLightness: () => number;
-    setHueShift: (hue: number | null, saturation?: number, lightness?: number) => void;
+    /** Current theme color as a hex string, or null when no override is active. */
+    themeColor: () => string | null;
+    /** Set (or clear with null) the theme color. Hex strings only. */
+    setThemeColor: (color: string | null) => void;
     isAvailable: () => boolean;
 }
 /**
- * Creates a hue shift store with configurable storage prefix.
- * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_hue_shift")
+ * Creates a theme color store with configurable storage prefix.
+ * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
  */
 export declare function createHueShiftStore(storagePrefix: string): HueShiftStore;
 export declare function getDefaultHueShiftStore(): HueShiftStore;