@pathscale/ui 1.2.1 → 1.2.2

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: "fixed z-50 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: "fixed z-50 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,19 +1,45 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
+import { type OverlayPlacement } from "../_shared/overlayPosition";
+export type ThemeColorPickerAlign = "start" | "end";
+export type ThemeColorPickerPlacement = OverlayPlacement;
 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;
+    /**
+     * Callback to switch light/dark theme (triggered by grayscale selection)
+     */
+    onThemeSwitch?: (theme: "light" | "dark") => void;
     /**
      * 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;
+    /**
+     * Preferred popover placement.
+     * @default "bottom"
+     */
+    placement?: ThemeColorPickerPlacement;
+    /**
+     * Automatically flip the popover when there is insufficient viewport space.
+     * @default true
+     */
+    autoFlip?: boolean;
     /**
      * Custom button content (defaults to palette icon)
      */

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

@@ -1,36 +1,27 @@
 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__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__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.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="absolute right-0 mt-2 p-6 bg-base-100 rounded-lg shadow-xl border border-base-300 z-50">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-function hueToColorValue(hue, sat) {
-    const h = hue ?? 0;
-    const s = null === hue ? 0 : sat;
-    return {
-        rgb: {
-            r: 255,
-            g: 255,
-            b: 255,
-            a: 1
-        },
-        hsl: {
-            h,
-            s,
-            l: 50,
-            a: 1
-        },
-        hex: "#ffffff"
-    };
+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, [
         "storagePrefix",
         "onColorChange",
+        "onThemeSwitch",
         "aria-label",
+        "align",
+        "placement",
+        "autoFlip",
         "children",
         "class",
         "className",
@@ -39,24 +30,64 @@ 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 [containerRef, setContainerRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [popoverRef, setPopoverRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    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 hue = color.hsl.h;
-        const saturation = color.hsl.s;
-        if (saturation < 10 && color.hsl.l > 90) {
-            store().setHueShift(null);
+        const { s, l } = color.hsl;
+        if (s < 10 && l > 90) {
+            store.setThemeColor(null);
             local.onColorChange?.(null, 100);
-        } else {
-            store().setHueShift(hue, saturation);
-            local.onColorChange?.(hue, saturation);
+            return;
         }
+        store.setThemeColor(color.hex);
+        local.onColorChange?.(color.hsl.h, color.hsl.s);
+    };
+    const GRAYSCALE_SWATCHES = [
+        {
+            label: "White",
+            hex: "#fafafa",
+            theme: "dark"
+        },
+        {
+            label: "Light gray",
+            hex: "#d4d4d4",
+            theme: "dark"
+        },
+        {
+            label: "Gray",
+            hex: "#737373",
+            theme: "dark"
+        },
+        {
+            label: "Dark gray",
+            hex: "#404040",
+            theme: "light"
+        },
+        {
+            label: "Charcoal",
+            hex: "#262626",
+            theme: "light"
+        },
+        {
+            label: "Black",
+            hex: "#0a0a0a",
+            theme: "light"
+        }
+    ];
+    const handleGrayscale = (swatch)=>{
+        local.onThemeSwitch?.(swatch.theme);
+        store.setThemeColor(swatch.hex);
+        local.onColorChange?.(null, 0);
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!isOpen()) return;
         const handleClickOutside = (e)=>{
-            if (containerRef && !containerRef.contains(e.target)) setIsOpen(false);
+            const target = e.target;
+            if (containerRef()?.contains(target)) return;
+            if (popoverRef()?.contains(target)) return;
+            setIsOpen(false);
         };
         const timer = setTimeout(()=>{
             document.addEventListener("click", handleClickOutside);
@@ -82,20 +113,29 @@ 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 = ()=>__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover;
+    const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
+        open: isOpen,
+        triggerRef: containerRef,
+        overlayRef: popoverRef,
+        placement: ()=>local.placement ?? "bottom",
+        offset: ()=>8,
+        autoFlip: ()=>local.autoFlip ?? true,
+        align: ()=>"start" === local.align ? "start" : "end"
+    });
+    const popoverStyle = ()=>overlayPosition.style();
     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();
-            _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)({
-                get ["class"] () {
-                    return classes();
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setContainerRef, _el$);
+            (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;
                 }
@@ -103,6 +143,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
                 type: "button",
                 size: "sm",
+                variant: "ghost",
                 onClick: ()=>setIsOpen(!isOpen()),
                 get ["aria-label"] () {
                     return local["aria-label"] ?? "Change theme color";
@@ -111,14 +152,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, {
@@ -126,18 +166,64 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
                     return isOpen();
                 },
                 get children () {
-                    var _el$2 = _tmpl$();
-                    (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();
-                        },
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
                         get children () {
-                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorWheelFlower, {
-                                class: "color-wheel-custom"
-                            });
+                            var _el$2 = _tmpl$2();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setPopoverRef, _el$2);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: popoverClasses()
+                                }), {
+                                get ["data-placement"] () {
+                                    return overlayPosition.placement();
+                                },
+                                get style () {
+                                    return popoverStyle();
+                                }
+                            }), 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__.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)=>(()=>{
+                                                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;
+                                            })()
+                                    }));
+                                    return _el$3;
+                                }
+                            }));
+                            return _el$2;
                         }
-                    }));
-                    return _el$2;
+                    });
                 }
             }), null);
             return _el$;
@@ -145,7 +231,4 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
     });
 };
 const ThemeColorPicker = ThemeColorPicker_ThemeColorPicker;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "keydown"
-]);
 export { ThemeColorPicker as default };