@pathscale/ui 0.1.1 → 1.2.0

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

@@ -0,0 +1,492 @@
+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
+        },
+        "--color-nf-accent": {
+            l: 45,
+            c: 0.2
+        },
+        "--color-nf-on-accent": {
+            l: 98,
+            c: 0.02
+        }
+    },
+    dark: {
+        "--nf-accent": {
+            l: 58,
+            c: 0.233
+        },
+        "--nf-on-accent": {
+            l: 96,
+            c: 0.018
+        },
+        "--color-nf-accent": {
+            l: 58,
+            c: 0.233
+        },
+        "--color-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.d.ts

@@ -0,0 +1,3 @@
+export { default as ThemeColorPicker } from "./ThemeColorPicker";
+export type { ThemeColorPickerProps } from "./ThemeColorPicker";
+export { createHueShiftStore, getDefaultHueShiftStore, resetHueShift, type HueShiftStore, } from "./hueShift";

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,6 +1,7 @@
+import "./timeline.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-type TimelineProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLUListElement> & {
+export type TimelineProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLUListElement> & {
     vertical?: boolean;
     horizontal?: boolean;
     responsive?: boolean;

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 };

package/dist/components/timeline/TimelineEnd.js

@@ -0,0 +1,28 @@
+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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TimelineEnd = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "box",
+        "class",
+        "style"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("timeline-end", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "timeline-box": local.box ?? true
+    }), local.class);
+    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 style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const timeline_TimelineEnd = TimelineEnd;
+export { timeline_TimelineEnd as default };

package/dist/components/timeline/TimelineItem.js

@@ -0,0 +1,47 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<hr>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>");
+const TimelineItem = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "connect",
+        "startClassName",
+        "endClassName",
+        "class",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return local.class;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (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 "both" === local.connect || "start" === local.connect;
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, local.startClassName));
+                return _el$2;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children, 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 "both" === local.connect || "end" === local.connect;
+            },
+            get children () {
+                var _el$3 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, local.endClassName));
+                return _el$3;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const timeline_TimelineItem = TimelineItem;
+export { timeline_TimelineItem as default };

package/dist/components/timeline/TimelineMiddle.js

@@ -0,0 +1,25 @@
+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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor class="w-5 h-5"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"clip-rule=evenodd>');
+const TimelineMiddle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "style",
+        "children"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("timeline-middle", local.class);
+    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 style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? _tmpl$2());
+        return _el$;
+    })();
+};
+const timeline_TimelineMiddle = TimelineMiddle;
+export { timeline_TimelineMiddle as default };

package/dist/components/timeline/TimelineStart.js

@@ -0,0 +1,28 @@
+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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TimelineStart = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "box",
+        "class",
+        "style"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("timeline-start", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "timeline-box": local.box
+    }), local.class);
+    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 style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const timeline_TimelineStart = TimelineStart;
+export { timeline_TimelineStart as default };

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

@@ -1,4 +1,4 @@
-export { default as Timeline } from "./Timeline";
+export { default as Timeline, type TimelineProps } from "./Timeline";
 export { default as TimelineItem } from "./TimelineItem";
 export { default as TimelineStart } from "./TimelineStart";
 export { default as TimelineMiddle } from "./TimelineMiddle";