@pathscale/ui 1.2.1 → 1.2.3

package/dist/components/color-slider/ColorSlider.js

@@ -0,0 +1,187 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ColorSlider.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__ColorSlider_classes_js_0a74b5c9__ from "./ColorSlider.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div>");
+const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+const normalizeValue = (type, value)=>{
+    if ("alpha" === type) return clamp(value, 0, 1);
+    return clamp(value, 0, 360);
+};
+const toPercent = (type, value)=>{
+    if ("alpha" === type) return 100 * clamp(value, 0, 1);
+    return clamp(value, 0, 360) / 360 * 100;
+};
+const fromPercent = (type, percent)=>{
+    const clamped = clamp(percent, 0, 100);
+    if ("alpha" === type) return clamped / 100;
+    return clamped / 100 * 360;
+};
+const ColorSlider = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "value",
+        "defaultValue",
+        "onChange",
+        "type",
+        "isDisabled",
+        "style",
+        "dataTheme",
+        "aria-label"
+    ]);
+    const sliderType = ()=>local.type ?? "hue";
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    const initialValue = ()=>{
+        const fallback = "alpha" === sliderType() ? 1 : 0;
+        return normalizeValue(sliderType(), local.value ?? local.defaultValue ?? fallback);
+    };
+    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialValue());
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const isControlled = ()=>void 0 !== local.value;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const nextType = sliderType();
+        const nextValue = local.value;
+        if (void 0 === nextValue) {
+            if (!isControlled()) setInternalValue((current)=>normalizeValue(nextType, current));
+            return;
+        }
+        setInternalValue(normalizeValue(nextType, nextValue));
+    });
+    const currentValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (isControlled()) return normalizeValue(sliderType(), local.value ?? internalValue());
+        return normalizeValue(sliderType(), internalValue());
+    });
+    const emitChange = (next)=>{
+        const normalized = normalizeValue(sliderType(), next);
+        if (!isControlled()) setInternalValue(normalized);
+        local.onChange?.(normalized);
+    };
+    const updateFromPointer = (clientX)=>{
+        if (!sliderRef || isDisabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        if (rect.width <= 0) return;
+        const percent = (clientX - rect.left) / rect.width * 100;
+        emitChange(fromPercent(sliderType(), percent));
+    };
+    const handlePointerDown = (event)=>{
+        if (isDisabled()) return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setIsDragging(true);
+        updateFromPointer(event.clientX);
+    };
+    const handlePointerMove = (event)=>{
+        if (!isDragging()) return;
+        updateFromPointer(event.clientX);
+    };
+    const handlePointerUp = (event)=>{
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        setIsDragging(false);
+    };
+    const handleLostPointerCapture = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (event)=>{
+        if (isDisabled()) return;
+        const key = event.key;
+        const isDecrease = "ArrowLeft" === key || "ArrowDown" === key;
+        const isIncrease = "ArrowRight" === key || "ArrowUp" === key;
+        if (!isDecrease && !isIncrease) return;
+        event.preventDefault();
+        const step = "alpha" === sliderType() ? event.shiftKey ? 0.1 : 0.01 : event.shiftKey ? 10 : 1;
+        const direction = isIncrease ? 1 : -1;
+        emitChange(currentValue() + direction * step);
+    };
+    const percent = ()=>toPercent(sliderType(), currentValue());
+    const sliderStyle = ()=>{
+        const userStyle = local.style;
+        if ("hue" === sliderType()) return {
+            "--color-slider-track-background": "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
+            "--color-slider-thumb-color": `hsl(${currentValue()} 100% 50%)`,
+            ...userStyle
+        };
+        return {
+            "--color-slider-track-background": "linear-gradient(to right, transparent, var(--color-slider-alpha-color, #000000)), repeating-conic-gradient(#cfd3da 0% 25%, #f3f4f6 0% 50%) 50% / 0.5rem 0.5rem",
+            "--color-slider-thumb-color": "var(--color-slider-alpha-color, #000000)",
+            ...userStyle
+        };
+    };
+    const valueText = ()=>{
+        if ("alpha" === sliderType()) return `Opacity ${Math.round(100 * currentValue())}%`;
+        return `Hue ${Math.round(currentValue())} degrees`;
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        var _ref$ = sliderRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.base, "alpha" === sliderType() && __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.flag.alpha, isDragging() && __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.flag.dragging, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "color-slider",
+            get ["data-type"] () {
+                return sliderType();
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            role: "slider",
+            get tabIndex () {
+                return isDisabled() ? -1 : 0;
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] ?? ("alpha" === sliderType() ? "Alpha" : "Hue");
+            },
+            get ["aria-valuemin"] () {
+                return "alpha" === sliderType() ? 0 : 0;
+            },
+            get ["aria-valuemax"] () {
+                return "alpha" === sliderType() ? 1 : 360;
+            },
+            get ["aria-valuenow"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"alpha" === sliderType())() ? Number(currentValue().toFixed(2)) : Math.round(currentValue());
+            },
+            get ["aria-valuetext"] () {
+                return valueText();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get style () {
+                return sliderStyle();
+            },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onLostPointerCapture: handleLostPointerCapture,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.slot.track
+            }), {
+            "data-slot": "color-slider-track"
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.slot.thumb
+            }), {
+            "data-slot": "color-slider-thumb",
+            get ["data-dragging"] () {
+                return isDragging() ? "true" : "false";
+            },
+            get style () {
+                return {
+                    left: `${percent()}%`,
+                    "background-color": "var(--color-slider-thumb-color)"
+                };
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const color_slider_ColorSlider = ColorSlider;
+export { color_slider_ColorSlider as default };

package/dist/components/color-slider/index.d.ts

@@ -0,0 +1,3 @@
+import ColorSlider from "./ColorSlider";
+export type { ColorSliderProps, ColorSliderType } from "./ColorSlider";
+export default ColorSlider;

package/dist/components/color-slider/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSlider_js_db0865cb__ from "./ColorSlider.js";
+const color_slider = __WEBPACK_EXTERNAL_MODULE__ColorSlider_js_db0865cb__["default"];
+export { color_slider as default };

package/dist/components/color-swatch/ColorSwatch.classes.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    readonly base: "color-swatch";
+    readonly shape: {
+        readonly circle: "color-swatch--circle";
+        readonly square: "color-swatch--square";
+    };
+    readonly size: {
+        readonly xs: "color-swatch--xs";
+        readonly sm: "color-swatch--sm";
+        readonly md: "color-swatch--md";
+        readonly lg: "color-swatch--lg";
+        readonly xl: "color-swatch--xl";
+    };
+};

package/dist/components/color-swatch/ColorSwatch.classes.js

@@ -0,0 +1,15 @@
+const CLASSES = {
+    base: "color-swatch",
+    shape: {
+        circle: "color-swatch--circle",
+        square: "color-swatch--square"
+    },
+    size: {
+        xs: "color-swatch--xs",
+        sm: "color-swatch--sm",
+        md: "color-swatch--md",
+        lg: "color-swatch--lg",
+        xl: "color-swatch--xl"
+    }
+};
+export { CLASSES };

package/dist/components/color-swatch/ColorSwatch.css

@@ -0,0 +1,84 @@
+@layer components {
+  .color-swatch {
+    position: relative;
+    box-sizing: border-box;
+    width: 2rem;
+    height: 2rem;
+    flex-shrink: 0;
+    cursor: pointer;
+    background:
+      linear-gradient(var(--color-swatch-current), var(--color-swatch-current)),
+      repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 1rem 1rem;
+    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+    transition:
+      transform 140ms ease,
+      box-shadow 140ms ease,
+      opacity 140ms ease;
+    outline: none;
+  }
+
+  .color-swatch:hover:not([data-disabled="true"]) {
+    transform: scale(1.03);
+  }
+
+  .color-swatch[data-selected="true"] {
+    box-shadow:
+      0 0 0 2px var(--color-base-100),
+      0 0 0 4px var(--color-accent),
+      inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+  }
+
+  .color-swatch:focus-visible,
+  .color-swatch[data-focus-visible="true"] {
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent),
+      inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+  }
+
+  .color-swatch[data-selected="true"]:focus-visible,
+  .color-swatch[data-selected="true"][data-focus-visible="true"] {
+    box-shadow:
+      0 0 0 2px var(--color-base-100),
+      0 0 0 4px var(--color-accent),
+      0 0 0 7px color-mix(in oklab, var(--color-accent) 24%, transparent),
+      inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+  }
+
+  .color-swatch[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  .color-swatch--circle {
+    border-radius: 9999px;
+  }
+
+  .color-swatch--square {
+    border-radius: 0.5rem;
+  }
+
+  .color-swatch--xs {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .color-swatch--sm {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .color-swatch--md {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .color-swatch--lg {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .color-swatch--xl {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}

package/dist/components/color-swatch/ColorSwatch.d.ts

@@ -0,0 +1,17 @@
+import "./ColorSwatch.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ColorSwatchShape = "circle" | "square";
+export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type ColorSwatchProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onSelect"> & IComponentBaseProps & {
+    color: string;
+    colorName?: string;
+    shape?: ColorSwatchShape;
+    size?: ColorSwatchSize;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    onSelect?: (color: string) => void;
+    onChange?: (color: string) => void;
+};
+declare const ColorSwatch: Component<ColorSwatchProps>;
+export default ColorSwatch;

package/dist/components/color-swatch/ColorSwatch.js

@@ -0,0 +1,133 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ColorSwatch.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__color_swatch_picker_ColorSwatchPicker_js_8e90244a__ from "../color-swatch-picker/ColorSwatchPicker.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__ from "./ColorSwatch.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const ColorSwatch = (props)=>{
+    const picker = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__.ColorSwatchPickerContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "color",
+        "colorName",
+        "shape",
+        "size",
+        "isSelected",
+        "isDisabled",
+        "disabled",
+        "onSelect",
+        "onChange",
+        "onClick",
+        "onKeyDown",
+        "style",
+        "dataTheme",
+        "aria-label",
+        "role",
+        "tabIndex"
+    ]);
+    const isInsidePicker = ()=>Boolean(picker);
+    const hasPickerSelection = ()=>picker ? void 0 !== picker.value() : false;
+    const shape = ()=>local.shape ?? "circle";
+    const size = ()=>local.size ?? "md";
+    const isDisabled = ()=>{
+        const localDisabled = Boolean(local.isDisabled) || Boolean(local.disabled);
+        const pickerDisabled = picker ? picker.isDisabled() : false;
+        return localDisabled || pickerDisabled;
+    };
+    const isSelected = ()=>{
+        if (void 0 !== local.isSelected) return Boolean(local.isSelected);
+        if (!picker) return false;
+        return picker.value() === local.color;
+    };
+    const emitSelection = ()=>{
+        local.onSelect?.(local.color);
+        local.onChange?.(local.color);
+        picker?.select(local.color);
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented || isDisabled()) return;
+        emitSelection();
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented || isDisabled()) return;
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            emitSelection();
+        }
+    };
+    const style = ()=>{
+        const userStyle = local.style;
+        return {
+            "--color-swatch-current": local.color,
+            ...userStyle
+        };
+    };
+    const tabIndex = ()=>{
+        if (void 0 !== local.tabIndex) return local.tabIndex;
+        if (!isInsidePicker()) return;
+        if (!hasPickerSelection()) return 0;
+        return isSelected() ? 0 : -1;
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "button",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.shape[shape()], __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.size[size()], local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "color-swatch",
+            get ["data-color-value"] () {
+                return local.color;
+            },
+            get ["data-picker-item"] () {
+                return isInsidePicker() ? "true" : "false";
+            },
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            get role () {
+                return local.role ?? (isInsidePicker() ? "radio" : "option");
+            },
+            get tabIndex () {
+                return tabIndex();
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] ?? local.colorName ?? `Color ${local.color}`;
+            },
+            get ["aria-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["aria-checked"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isInsidePicker())() ? isSelected() ? "true" : "false" : void 0;
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get style () {
+                return style();
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }), false, false);
+        return _el$;
+    })();
+};
+const color_swatch_ColorSwatch = ColorSwatch;
+export { color_swatch_ColorSwatch as default };

package/dist/components/color-swatch/index.d.ts

@@ -0,0 +1,3 @@
+import ColorSwatch from "./ColorSwatch";
+export type { ColorSwatchProps, ColorSwatchShape, ColorSwatchSize } from "./ColorSwatch";
+export default ColorSwatch;

package/dist/components/color-swatch/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatch_js_d7c5f616__ from "./ColorSwatch.js";
+const color_swatch = __WEBPACK_EXTERNAL_MODULE__ColorSwatch_js_d7c5f616__["default"];
+export { color_swatch as default };

package/dist/components/color-swatch-picker/ColorSwatchPicker.classes.d.ts

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

package/dist/components/color-swatch-picker/ColorSwatchPicker.classes.js

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

package/dist/components/color-swatch-picker/ColorSwatchPicker.css

@@ -0,0 +1,12 @@
+@layer components {
+  .color-swatch-picker {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .color-swatch-picker[data-disabled="true"] {
+    opacity: 0.7;
+  }
+}

package/dist/components/color-swatch-picker/ColorSwatchPicker.d.ts

@@ -0,0 +1,18 @@
+import "./ColorSwatchPicker.css";
+import { type Accessor, type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ColorSwatchPickerContextValue = {
+    value: Accessor<string | undefined>;
+    isDisabled: Accessor<boolean>;
+    select: (value: string) => void;
+};
+export declare const ColorSwatchPickerContext: import("solid-js").Context<ColorSwatchPickerContextValue | undefined>;
+export type ColorSwatchPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & IComponentBaseProps & {
+    children: JSX.Element;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const ColorSwatchPicker: Component<ColorSwatchPickerProps>;
+export { ColorSwatchPicker as default, ColorSwatchPicker };

package/dist/components/color-swatch-picker/ColorSwatchPicker.js

@@ -0,0 +1,109 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ColorSwatchPicker.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__ColorSwatchPicker_classes_js_3ef482a8__ from "./ColorSwatchPicker.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const ColorSwatchPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const ColorSwatchPicker = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "children",
+        "value",
+        "defaultValue",
+        "onChange",
+        "isDisabled",
+        "dataTheme",
+        "role",
+        "onKeyDown"
+    ]);
+    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultValue);
+    let rootRef;
+    const isControlled = ()=>void 0 !== local.value;
+    const currentValue = ()=>isControlled() ? local.value : internalValue();
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    const setValue = (next)=>{
+        if (isDisabled()) return;
+        if (!isControlled()) setInternalValue(next);
+        local.onChange?.(next);
+    };
+    const getEnabledItems = ()=>{
+        if (!rootRef) return [];
+        return Array.from(rootRef.querySelectorAll('[data-picker-item="true"][data-disabled="false"]'));
+    };
+    const findFocusedOrSelectedIndex = (items)=>{
+        if (!items.length) return -1;
+        const active = document.activeElement;
+        const focusedIndex = items.findIndex((item)=>item === active);
+        if (focusedIndex >= 0) return focusedIndex;
+        const selected = currentValue();
+        if (!selected) return 0;
+        const selectedIndex = items.findIndex((item)=>item.dataset.colorValue === selected);
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented || isDisabled()) return;
+        const key = event.key;
+        const moveNext = "ArrowRight" === key || "ArrowDown" === key;
+        const movePrev = "ArrowLeft" === key || "ArrowUp" === key;
+        const moveFirst = "Home" === key;
+        const moveLast = "End" === key;
+        if (!moveNext && !movePrev && !moveFirst && !moveLast) return;
+        const items = getEnabledItems();
+        if (!items.length) return;
+        event.preventDefault();
+        const currentIndex = findFocusedOrSelectedIndex(items);
+        let nextIndex = currentIndex;
+        if (moveFirst) nextIndex = 0;
+        else if (moveLast) nextIndex = items.length - 1;
+        else if (moveNext) nextIndex = (currentIndex + 1 + items.length) % items.length;
+        else if (movePrev) nextIndex = (currentIndex - 1 + items.length) % items.length;
+        const nextItem = items[nextIndex];
+        if (!nextItem) return;
+        nextItem.focus();
+        const nextColor = nextItem.dataset.colorValue;
+        if (nextColor) setValue(nextColor);
+    };
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+            value: currentValue,
+            isDisabled,
+            select: setValue
+        }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorSwatchPickerContext.Provider, {
+        get value () {
+            return context();
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            var _ref$ = rootRef;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__.CLASSES.base, local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "color-swatch-picker",
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get role () {
+                    return local.role ?? "radiogroup";
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                onKeyDown: handleKeyDown
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+export { ColorSwatchPicker, ColorSwatchPickerContext, ColorSwatchPicker as default };

package/dist/components/color-swatch-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default, ColorSwatchPicker } from "./ColorSwatchPicker";
+export type { ColorSwatchPickerProps, ColorSwatchPickerContextValue } from "./ColorSwatchPicker";
+export { ColorSwatchPickerContext } from "./ColorSwatchPicker";

package/dist/components/color-swatch-picker/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__ from "./ColorSwatchPicker.js";
+var __webpack_exports__ColorSwatchPicker = __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__.ColorSwatchPicker;
+var __webpack_exports__ColorSwatchPickerContext = __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__.ColorSwatchPickerContext;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_js_02e27c6a__["default"];
+export { __webpack_exports__ColorSwatchPicker as ColorSwatchPicker, __webpack_exports__ColorSwatchPickerContext as ColorSwatchPickerContext, __webpack_exports__default as default };