@pathscale/ui 1.1.54 → 1.1.56

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

@@ -1,10 +1,15 @@
-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>;
+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";
 };
+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,21 +1,53 @@
 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__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)=>{
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
+const Textarea = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "color",
+        "size",
+        "dataTheme",
         "class",
-        "className"
+        "className",
+        "style",
+        "resize"
     ]);
-    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 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$;
+    })();
 };
-const Textarea = Object.assign(TextareaRoot, {
-    Root: TextareaRoot
-});
 const textarea_Textarea = Textarea;
-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 };
+export { textarea_Textarea as default };

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

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

package/dist/components/textarea/index.js

@@ -1,6 +1,3 @@
 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__TextArea as TextArea, __webpack_exports__TextAreaRoot as TextAreaRoot, __webpack_exports__Textarea as Textarea, __webpack_exports__default as default };
+export { __webpack_exports__default as default };

package/dist/components/textarea/textarea.css

@@ -0,0 +1,191 @@
+@layer components {
+  .textarea {
+      border: var(--border) solid #0000;
+      min-height: calc(0.25rem * 20);
+      flex-shrink: 1;
+      appearance: none;
+      border-radius: var(--radius-field);
+      background-color: var(--color-base-100);
+      padding-block: calc(0.25rem * 2);
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      padding-inline-start: 0.75rem;
+      padding-inline-end: 0.75rem;
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+      touch-action: manipulation;
+      border-color: var(--input-color);
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --input-color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .textarea textarea {
+      appearance: none;
+      background-color: transparent;
+      border: none;
+    }
+
+  .textarea textarea:focus,
+    .textarea textarea:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .textarea textarea:focus,
+    .textarea textarea:focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .textarea:focus,
+    .textarea:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea:focus,
+    .textarea:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+    .textarea:focus,
+    .textarea:focus-within {
+      --font-size: 1rem;
+    }
+    }
+    }
+
+  .textarea:has(> textarea[disabled]),
+    .textarea:is(:disabled, [disabled]) {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea:has(> textarea[disabled]),
+    .textarea:is(:disabled, [disabled]) {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .textarea:has(> textarea[disabled])::placeholder,
+    .textarea:is(:disabled, [disabled])::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .textarea:has(> textarea[disabled])::placeholder,
+    .textarea:is(:disabled, [disabled])::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .textarea:has(> textarea[disabled]) > textarea[disabled] {
+      cursor: not-allowed;
+    }
+
+  .textarea-ghost {
+      background-color: transparent;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .textarea-ghost:focus,
+    .textarea-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .textarea-lg {
+      font-size: max(var(--font-size, 1.125rem), 1.125rem);
+    }
+
+  .textarea-md {
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+    }
+
+  .textarea-sm {
+      font-size: max(var(--font-size, 0.75rem), 0.75rem);
+    }
+
+  .textarea-xl {
+      font-size: max(var(--font-size, 1.375rem), 1.375rem);
+    }
+
+  .textarea-xs {
+      font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
+    }
+
+  .textarea-accent,
+    .textarea-accent:focus,
+    .textarea-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .textarea-error,
+    .textarea-error:focus,
+    .textarea-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .textarea-info,
+    .textarea-info:focus,
+    .textarea-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .textarea-neutral,
+    .textarea-neutral:focus,
+    .textarea-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .textarea-primary,
+    .textarea-primary:focus,
+    .textarea-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .textarea-secondary,
+    .textarea-secondary:focus,
+    .textarea-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .textarea-success,
+    .textarea-success:focus,
+    .textarea-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .textarea-warning,
+    .textarea-warning:focus,
+    .textarea-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}

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

@@ -2,14 +2,12 @@ import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export interface ThemeColorPickerProps extends IComponentBaseProps {
     /**
-     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
+     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_hue_shift")
      * @default "theme"
      */
     storagePrefix?: string;
     /**
-     * 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.
+     * Callback when color changes
      */
     onColorChange?: (hue: number | null, saturation: number) => void;
     /**

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

@@ -1,16 +1,16 @@
 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__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_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__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";
-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);
+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);
 }
 const ThemeColorPicker_ThemeColorPicker = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -27,54 +27,55 @@ 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__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);
+    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);
             local.onColorChange?.(null, 100);
             return;
         }
-        store.setThemeColor(color.hex);
-        local.onColorChange?.(color.hsl.h, color.hsl.s);
+        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);
     };
     const GRAYSCALE_SWATCHES = [
         {
             label: "White",
-            hex: "#fafafa",
-            theme: "dark"
+            lightness: 10
         },
         {
             label: "Light gray",
-            hex: "#d4d4d4",
-            theme: "dark"
+            lightness: 5
         },
         {
             label: "Gray",
-            hex: "#737373",
-            theme: "dark"
+            lightness: 0
         },
         {
             label: "Dark gray",
-            hex: "#404040",
-            theme: "light"
+            lightness: -5
         },
         {
             label: "Charcoal",
-            hex: "#262626",
-            theme: "light"
+            lightness: -10
         },
         {
             label: "Black",
-            hex: "#0a0a0a",
-            theme: "light"
+            lightness: -15
         }
     ];
-    const handleGrayscale = (swatch)=>{
-        local.onThemeSwitch?.(swatch.theme);
-        store.setThemeColor(swatch.hex);
+    const handleGrayscale = (lightnessOffset)=>{
+        store().setHueShift(0, 0, lightnessOffset);
         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;
@@ -105,19 +106,20 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
             onChange: handleColorChange,
             onFormatChange: ()=>{}
         });
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.base, local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
     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$2();
+            var _el$ = _tmpl$3();
+            _el$.$$keydown = handleKeyDown;
             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)(()=>({
-                    class: classes()
-                }), {
-                onKeyDown: handleKeyDown,
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return classes();
+                },
                 get style () {
                     return local.style;
                 }
@@ -134,13 +136,14 @@ 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"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                    return local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
                         name: "icon-[mdi--palette]",
                         width: 16,
-                        height: 16
-                    }, ()=>({
-                            class: null !== store.themeColor() ? __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.iconActive : void 0
-                        })));
+                        height: 16,
+                        get ["class"] () {
+                            return null !== store().hueShift() ? "text-primary" : 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, {
@@ -149,44 +152,36 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                 },
                 get children () {
                     var _el$2 = _tmpl$2();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                            class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover
-                        })), 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, {
+                    (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, {
                         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__.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$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__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
                                 each: GRAYSCALE_SWATCHES,
-                                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);
+                                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
+                                        });
                                         return _el$6;
                                     })()
                             }));
@@ -201,4 +196,8 @@ 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 {
-    /** 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;
+    hueShift: () => number | null;
+    hueSaturation: () => number;
+    hueLightness: () => number;
+    setHueShift: (hue: number | null, saturation?: number, lightness?: number) => void;
     isAvailable: () => boolean;
 }
 /**
- * Creates a theme color store with configurable storage prefix.
- * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
+ * Creates a hue shift store with configurable storage prefix.
+ * @param storagePrefix - Prefix for localStorage keys (e.g., "myapp" becomes "myapp_hue_shift")
  */
 export declare function createHueShiftStore(storagePrefix: string): HueShiftStore;
 export declare function getDefaultHueShiftStore(): HueShiftStore;