@pathscale/ui 0.0.162 → 0.0.163

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.js

@@ -0,0 +1,476 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+let cspAllowsInlineStyles = null;
+const checkCspAllowsInlineStyles = ()=>{
+    if (null !== cspAllowsInlineStyles) return cspAllowsInlineStyles;
+    if ("undefined" == typeof window) return true;
+    try {
+        const testEl = document.createElement("div");
+        testEl.style.setProperty("--csp-test", "1");
+        document.body.appendChild(testEl);
+        const computed = getComputedStyle(testEl).getPropertyValue("--csp-test");
+        document.body.removeChild(testEl);
+        cspAllowsInlineStyles = "1" === computed;
+    } catch  {
+        cspAllowsInlineStyles = false;
+    }
+    if (!cspAllowsInlineStyles) console.info("[hueShift] CSP blocks inline styles - hue customization disabled");
+    return cspAllowsInlineStyles;
+};
+const MIN_CHROMA_SCALE = 0.3;
+function hslHueToOklchHue(hslHue) {
+    const h = (hslHue % 360 + 360) % 360;
+    const controlPoints = [
+        [
+            0,
+            29
+        ],
+        [
+            30,
+            55
+        ],
+        [
+            60,
+            100
+        ],
+        [
+            120,
+            145
+        ],
+        [
+            180,
+            195
+        ],
+        [
+            240,
+            265
+        ],
+        [
+            300,
+            330
+        ],
+        [
+            360,
+            389
+        ]
+    ];
+    for(let i = 0; i < controlPoints.length - 1; i++){
+        const [h1, o1] = controlPoints[i];
+        const [h2, o2] = controlPoints[i + 1];
+        if (h >= h1 && h <= h2) {
+            const t = (h - h1) / (h2 - h1);
+            const oklchHue = o1 + t * (o2 - o1);
+            return (oklchHue % 360 + 360) % 360;
+        }
+    }
+    return h;
+}
+const PRIMARY_SETTINGS = {
+    light: {
+        "--color-primary": {
+            l: 45,
+            c: 0.2
+        },
+        "--color-primary-content": {
+            l: 98,
+            c: 0.02
+        }
+    },
+    dark: {
+        "--color-primary": {
+            l: 58,
+            c: 0.233
+        },
+        "--color-primary-content": {
+            l: 96,
+            c: 0.018
+        }
+    }
+};
+const HARMONY_OFFSETS = {
+    secondary: 108,
+    accent: -94
+};
+const HARMONY_SETTINGS = {
+    light: {
+        "--color-secondary": {
+            l: 68,
+            c: 0.162
+        },
+        "--color-secondary-content": {
+            l: 98,
+            c: 0.026
+        },
+        "--color-accent": {
+            l: 60,
+            c: 0.118
+        },
+        "--color-accent-content": {
+            l: 98,
+            c: 0.014
+        }
+    },
+    dark: {
+        "--color-secondary": {
+            l: 63,
+            c: 0.237
+        },
+        "--color-secondary-content": {
+            l: 97,
+            c: 0.013
+        },
+        "--color-accent": {
+            l: 70,
+            c: 0.14
+        },
+        "--color-accent-content": {
+            l: 98,
+            c: 0.014
+        }
+    }
+};
+const SEMANTIC_BASE_HUES = {
+    success: 140,
+    warning: 55,
+    error: 10,
+    info: 220
+};
+const SEMANTIC_TINT_FACTOR = 0.12;
+const SEMANTIC_SETTINGS = {
+    light: {
+        "--color-success": {
+            l: 72,
+            c: 0.219
+        },
+        "--color-success-content": {
+            l: 98,
+            c: 0.018
+        },
+        "--color-warning": {
+            l: 70,
+            c: 0.213
+        },
+        "--color-warning-content": {
+            l: 98,
+            c: 0.016
+        },
+        "--color-error": {
+            l: 65,
+            c: 0.241
+        },
+        "--color-error-content": {
+            l: 97,
+            c: 0.014
+        },
+        "--color-info": {
+            l: 68,
+            c: 0.169
+        },
+        "--color-info-content": {
+            l: 97,
+            c: 0.013
+        }
+    },
+    dark: {
+        "--color-success": {
+            l: 76,
+            c: 0.233
+        },
+        "--color-success-content": {
+            l: 98,
+            c: 0.031
+        },
+        "--color-warning": {
+            l: 79,
+            c: 0.184
+        },
+        "--color-warning-content": {
+            l: 98,
+            c: 0.026
+        },
+        "--color-error": {
+            l: 64,
+            c: 0.246
+        },
+        "--color-error-content": {
+            l: 96,
+            c: 0.015
+        },
+        "--color-info": {
+            l: 71,
+            c: 0.143
+        },
+        "--color-info-content": {
+            l: 98,
+            c: 0.019
+        }
+    }
+};
+const NF_ACCENT_SETTINGS = {
+    light: {
+        "--nf-accent": {
+            l: 45,
+            c: 0.2
+        },
+        "--nf-on-accent": {
+            l: 98,
+            c: 0.02
+        }
+    },
+    dark: {
+        "--nf-accent": {
+            l: 58,
+            c: 0.233
+        },
+        "--nf-on-accent": {
+            l: 96,
+            c: 0.018
+        }
+    }
+};
+const BASE_COLORS = {
+    light: {
+        "--color-base-100": {
+            l: 98,
+            c: 0.001,
+            h: 106.423
+        },
+        "--color-base-200": {
+            l: 97,
+            c: 0.001,
+            h: 106.424
+        },
+        "--color-base-300": {
+            l: 92,
+            c: 0.003,
+            h: 48.717
+        }
+    },
+    dark: {
+        "--color-base-100": {
+            l: 13,
+            c: 0.028,
+            h: 261.692
+        },
+        "--color-base-200": {
+            l: 21,
+            c: 0.034,
+            h: 264.665
+        },
+        "--color-base-300": {
+            l: 27,
+            c: 0.033,
+            h: 256.848
+        }
+    }
+};
+const BASE_CHROMA_BOOST = 0.025;
+const GRADIENT_COLORS = {
+    light: {
+        "--gradient-start": {
+            h: 347,
+            s: 47,
+            l: 93
+        },
+        "--gradient-end": {
+            h: 199,
+            s: 45,
+            l: 93
+        }
+    },
+    dark: {
+        "--gradient-start": {
+            h: 261,
+            s: 38,
+            l: 15
+        },
+        "--gradient-end": {
+            h: 220,
+            s: 54,
+            l: 8
+        }
+    }
+};
+function toOklch(l, c, h) {
+    const normalizedH = (h % 360 + 360) % 360;
+    return `oklch(${l}% ${c} ${normalizedH})`;
+}
+function hslToHex(h, s, l) {
+    const normalizedH = (h % 360 + 360) % 360;
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+    const x = c * (1 - Math.abs(normalizedH / 60 % 2 - 1));
+    const m = lNorm - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (normalizedH < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    } else if (normalizedH < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    } else if (normalizedH < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    } else if (normalizedH < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    } else if (normalizedH < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    } else {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    const toHex = (n)=>{
+        const hex = Math.round((n + m) * 255).toString(16);
+        return 1 === hex.length ? "0" + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function getTintedHue(baseHue, targetHue) {
+    let diff = targetHue - baseHue;
+    if (diff > 180) diff -= 360;
+    if (diff < -180) diff += 360;
+    return baseHue + diff * SEMANTIC_TINT_FACTOR;
+}
+function getResolvedTheme() {
+    const dataTheme = document.documentElement.getAttribute("data-theme");
+    if ("dark" === dataTheme) return "dark";
+    if ("light" === dataTheme) return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyHueShift(targetHue, saturation = 100) {
+    if (!checkCspAllowsInlineStyles()) return;
+    const root = document.documentElement;
+    const oklchHue = hslHueToOklchHue(targetHue);
+    const chromaScale = MIN_CHROMA_SCALE + saturation / 100 * (1 - MIN_CHROMA_SCALE);
+    const resolvedTheme = getResolvedTheme();
+    const primarySettings = PRIMARY_SETTINGS[resolvedTheme];
+    for (const [varName, settings] of Object.entries(primarySettings)){
+        const scaledChroma = settings.c * chromaScale;
+        root.style.setProperty(varName, toOklch(settings.l, scaledChroma, oklchHue));
+    }
+    const harmonySettings = HARMONY_SETTINGS[resolvedTheme];
+    for (const [varName, settings] of Object.entries(harmonySettings)){
+        let hue = oklchHue;
+        if (varName.includes("secondary")) hue = oklchHue + HARMONY_OFFSETS.secondary;
+        else if (varName.includes("accent")) hue = oklchHue + HARMONY_OFFSETS.accent;
+        const scaledChroma = settings.c * chromaScale;
+        root.style.setProperty(varName, toOklch(settings.l, scaledChroma, hue));
+    }
+    const semanticSettings = SEMANTIC_SETTINGS[resolvedTheme];
+    for (const [varName, settings] of Object.entries(semanticSettings)){
+        let baseHue = 0;
+        if (varName.includes("success")) baseHue = SEMANTIC_BASE_HUES.success;
+        else if (varName.includes("warning")) baseHue = SEMANTIC_BASE_HUES.warning;
+        else if (varName.includes("error")) baseHue = SEMANTIC_BASE_HUES.error;
+        else if (varName.includes("info")) baseHue = SEMANTIC_BASE_HUES.info;
+        const tintedHue = getTintedHue(baseHue, oklchHue);
+        const semanticChromaScale = MIN_CHROMA_SCALE + (1 - MIN_CHROMA_SCALE) * Math.sqrt(saturation / 100);
+        const scaledChroma = settings.c * semanticChromaScale;
+        root.style.setProperty(varName, toOklch(settings.l, scaledChroma, tintedHue));
+    }
+    const gradients = GRADIENT_COLORS[resolvedTheme];
+    for (const [varName, color] of Object.entries(gradients)){
+        const scaledSat = color.s * (saturation / 100);
+        const shifted = hslToHex(targetHue + (varName.includes("end") ? 40 : 0), scaledSat, color.l);
+        root.style.setProperty(varName, shifted);
+    }
+    const baseColors = BASE_COLORS[resolvedTheme];
+    for (const [varName, color] of Object.entries(baseColors)){
+        const baseChroma = Math.max(color.c, BASE_CHROMA_BOOST);
+        const scaledChroma = baseChroma * chromaScale;
+        const shifted = toOklch(color.l, scaledChroma, oklchHue);
+        root.style.setProperty(varName, shifted);
+    }
+    const nfAccentSettings = NF_ACCENT_SETTINGS[resolvedTheme];
+    for (const [varName, settings] of Object.entries(nfAccentSettings)){
+        const scaledChroma = settings.c * chromaScale;
+        root.style.setProperty(varName, toOklch(settings.l, scaledChroma, oklchHue));
+    }
+}
+function resetHueShift() {
+    if (!checkCspAllowsInlineStyles()) return;
+    const root = document.documentElement;
+    for (const varName of Object.keys(PRIMARY_SETTINGS.light))root.style.removeProperty(varName);
+    for (const varName of Object.keys(HARMONY_SETTINGS.light))root.style.removeProperty(varName);
+    for (const varName of Object.keys(SEMANTIC_SETTINGS.light))root.style.removeProperty(varName);
+    for (const varName of Object.keys(GRADIENT_COLORS.light))root.style.removeProperty(varName);
+    for (const varName of Object.keys(BASE_COLORS.light))root.style.removeProperty(varName);
+    for (const varName of Object.keys(NF_ACCENT_SETTINGS.light))root.style.removeProperty(varName);
+}
+function createHueShiftStore(storagePrefix) {
+    const STORAGE_KEY = `${storagePrefix}_hue_shift`;
+    const STORAGE_KEY_SAT = `${storagePrefix}_hue_saturation`;
+    const getInitialHueShift = ()=>{
+        if ("undefined" == typeof window) return null;
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (null !== saved) {
+            const parsed = parseFloat(saved);
+            if (!isNaN(parsed)) return parsed;
+        }
+        return null;
+    };
+    const getInitialSaturation = ()=>{
+        if ("undefined" == typeof window) return 100;
+        const saved = localStorage.getItem(STORAGE_KEY_SAT);
+        if (null !== saved) {
+            const parsed = parseFloat(saved);
+            if (!isNaN(parsed)) return parsed;
+        }
+        return 100;
+    };
+    const [hueShift, setHueShiftInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitialHueShift());
+    const [hueSaturation, setHueSaturationInternal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(getInitialSaturation());
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const shift = hueShift();
+        const sat = hueSaturation();
+        if ("undefined" == typeof window) return;
+        if (null === shift) {
+            localStorage.removeItem(STORAGE_KEY);
+            localStorage.removeItem(STORAGE_KEY_SAT);
+            resetHueShift();
+        } else {
+            localStorage.setItem(STORAGE_KEY, String(shift));
+            localStorage.setItem(STORAGE_KEY_SAT, String(sat));
+            applyHueShift(shift, sat);
+        }
+    });
+    if ("undefined" != typeof window) {
+        const observer = new MutationObserver((mutations)=>{
+            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
+                const shift = hueShift();
+                const sat = hueSaturation();
+                if (null !== shift) requestAnimationFrame(()=>applyHueShift(shift, sat));
+            }
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                "data-theme"
+            ]
+        });
+    }
+    const setHueShift = (hue, saturation = 100)=>{
+        setHueShiftInternal(hue);
+        setHueSaturationInternal(saturation);
+    };
+    return {
+        hueShift,
+        hueSaturation,
+        setHueShift,
+        isAvailable: ()=>checkCspAllowsInlineStyles()
+    };
+}
+let defaultStore = null;
+function getDefaultHueShiftStore() {
+    if (!defaultStore) defaultStore = createHueShiftStore("theme");
+    return defaultStore;
+}
+export { createHueShiftStore, getDefaultHueShiftStore, resetHueShift };

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

@@ -0,0 +1,7 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_js_a066b646__ from "./ThemeColorPicker.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
+var __webpack_exports__ThemeColorPicker = __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_js_a066b646__["default"];
+var __webpack_exports__createHueShiftStore = __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore;
+var __webpack_exports__getDefaultHueShiftStore = __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.getDefaultHueShiftStore;
+var __webpack_exports__resetHueShift = __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.resetHueShift;
+export { __webpack_exports__ThemeColorPicker as ThemeColorPicker, __webpack_exports__createHueShiftStore as createHueShiftStore, __webpack_exports__getDefaultHueShiftStore as getDefaultHueShiftStore, __webpack_exports__resetHueShift as resetHueShift };

package/dist/components/timeline/Timeline.d.ts

@@ -1,3 +1,4 @@
+import "./timeline.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type TimelineProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLUListElement> & {

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,42 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./timeline.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)("<ul>");
+const Timeline_Timeline = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "vertical",
+        "horizontal",
+        "responsive",
+        "snap",
+        "compact",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("timeline", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "timeline-vertical": local.vertical,
+        "timeline-horizontal": local.horizontal,
+        "timeline-vertical lg:timeline-horizontal": local.responsive,
+        "timeline-snap-icon": local.snap,
+        "timeline-compact": local.compact
+    }), local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes,
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const Timeline = Timeline_Timeline;
+export { Timeline as default };