@pathscale/ui 0.1.1 → 1.2.1

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

@@ -0,0 +1,23 @@
+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_hue_shift")
+     * @default "theme"
+     */
+    storagePrefix?: string;
+    /**
+     * Callback when color changes
+     */
+    onColorChange?: (hue: number | null, saturation: number) => void;
+    /**
+     * ARIA label for the button
+     */
+    "aria-label"?: string;
+    /**
+     * Custom button content (defaults to palette icon)
+     */
+    children?: JSX.Element;
+}
+declare const ThemeColorPicker: Component<ThemeColorPickerProps>;
+export default ThemeColorPicker;

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

@@ -0,0 +1,151 @@
+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__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="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"
+    };
+}
+const ThemeColorPicker_ThemeColorPicker = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "storagePrefix",
+        "onColorChange",
+        "aria-label",
+        "children",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    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 handleColorChange = (color)=>{
+        const hue = color.hsl.h;
+        const saturation = color.hsl.s;
+        if (saturation < 10 && color.hsl.l > 90) {
+            store().setHueShift(null);
+            local.onColorChange?.(null, 100);
+        } else {
+            store().setHueShift(hue, saturation);
+            local.onColorChange?.(hue, saturation);
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!isOpen()) return;
+        const handleClickOutside = (e)=>{
+            if (containerRef && !containerRef.contains(e.target)) setIsOpen(false);
+        };
+        const timer = setTimeout(()=>{
+            document.addEventListener("click", handleClickOutside);
+        }, 0);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            clearTimeout(timer);
+            document.removeEventListener("click", handleClickOutside);
+        });
+    });
+    const handleKeyDown = (e)=>{
+        if ("Escape" === e.key && isOpen()) setIsOpen(false);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const timer = setTimeout(()=>{
+            setFeatureAvailable(true);
+        }, 0);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>clearTimeout(timer));
+    });
+    const contextValue = ()=>({
+            color: colorValue,
+            format: ()=>"hsl",
+            disabled: ()=>false,
+            onChange: handleColorChange,
+            onFormatChange: ()=>{}
+        });
+    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();
+            _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();
+                },
+                get style () {
+                    return local.style;
+                }
+            }, others), false, true);
+            (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",
+                onClick: ()=>setIsOpen(!isOpen()),
+                get ["aria-label"] () {
+                    return local["aria-label"] ?? "Change theme color";
+                },
+                get ["aria-expanded"] () {
+                    return isOpen();
+                },
+                get children () {
+                    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,
+                        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, {
+                get when () {
+                    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();
+                        },
+                        get children () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorWheelFlower, {
+                                class: "color-wheel-custom"
+                            });
+                        }
+                    }));
+                    return _el$2;
+                }
+            }), null);
+            return _el$;
+        }
+    });
+};
+const ThemeColorPicker = ThemeColorPicker_ThemeColorPicker;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "keydown"
+]);
+export { ThemeColorPicker as default };

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

@@ -0,0 +1,14 @@
+declare function resetHueShift(): void;
+export interface HueShiftStore {
+    hueShift: () => number | null;
+    hueSaturation: () => number;
+    setHueShift: (hue: number | null, saturation?: number) => 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")
+ */
+export declare function createHueShiftStore(storagePrefix: string): HueShiftStore;
+export declare function getDefaultHueShiftStore(): HueShiftStore;
+export { resetHueShift };