@pathscale/ui 1.2.1 → 1.2.3

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

@@ -1 +1,2 @@
-export { default, type SelectProps } from "./Select";
+export { default } from "./Select";
+export type { SelectProps, SelectRootProps, SelectPlacement, SelectValueType, SelectVariant, SelectSelectionMode, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, SelectListboxProps, SelectOptionProps, } from "./Select";

package/dist/components/separator/Separator.classes.d.ts

@@ -0,0 +1,12 @@
+export declare const CLASSES: {
+    readonly base: "separator";
+    readonly orientation: {
+        readonly horizontal: "separator--horizontal";
+        readonly vertical: "separator--vertical";
+    };
+    readonly variant: {
+        readonly default: "separator--default";
+        readonly secondary: "separator--secondary";
+        readonly tertiary: "separator--tertiary";
+    };
+};

package/dist/components/separator/Separator.classes.js

@@ -0,0 +1,13 @@
+const CLASSES = {
+    base: "separator",
+    orientation: {
+        horizontal: "separator--horizontal",
+        vertical: "separator--vertical"
+    },
+    variant: {
+        default: "separator--default",
+        secondary: "separator--secondary",
+        tertiary: "separator--tertiary"
+    }
+};
+export { CLASSES };

package/dist/components/separator/Separator.css

@@ -0,0 +1,35 @@
+@layer components {
+  .separator {
+    display: block;
+    flex-shrink: 0;
+    border-radius: 0.25rem;
+
+    --separator-color: var(--color-separator, var(--color-base-300));
+
+    background-color: var(--separator-color);
+  }
+
+  .separator--horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  .separator--vertical {
+    width: 1px;
+    height: auto;
+    min-height: 0.5rem;
+    align-self: stretch;
+  }
+
+  .separator--default {
+    --separator-color: var(--color-separator, var(--color-base-300));
+  }
+
+  .separator--secondary {
+    --separator-color: var(--color-separator-secondary, var(--color-base-300));
+  }
+
+  .separator--tertiary {
+    --separator-color: var(--color-separator-tertiary, var(--color-base-200));
+  }
+}

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,12 @@
+import "./Separator.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorVariant = "default" | "secondary" | "tertiary";
+export type SeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    orientation?: SeparatorOrientation;
+    variant?: SeparatorVariant;
+};
+declare const Separator: Component<SeparatorProps>;
+export default Separator;
+export { Separator };

package/dist/components/separator/Separator.js

@@ -0,0 +1,49 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Separator.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__Separator_classes_js_876f4d4e__ from "./Separator.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Separator_Separator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "orientation",
+        "variant",
+        "role"
+    ]);
+    const orientation = ()=>local.orientation ?? "horizontal";
+    const variant = ()=>local.variant ?? "default";
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get role () {
+                return local.role ?? "separator";
+            },
+            get ["aria-orientation"] () {
+                return orientation();
+            },
+            "data-slot": "separator",
+            get ["data-orientation"] () {
+                return orientation();
+            },
+            get ["data-variant"] () {
+                return variant();
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Separator_classes_js_876f4d4e__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Separator_classes_js_876f4d4e__.CLASSES.orientation[orientation()], __WEBPACK_EXTERNAL_MODULE__Separator_classes_js_876f4d4e__.CLASSES.variant[variant()], local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const Separator = Separator_Separator;
+export { Separator_Separator as Separator, Separator as default };

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

@@ -0,0 +1 @@
+export { default, Separator, type SeparatorProps, type SeparatorOrientation, type SeparatorVariant, } from "./Separator";

package/dist/components/separator/index.js

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Separator_js_c4a9d2eb__ from "./Separator.js";
+var __webpack_exports__Separator = __WEBPACK_EXTERNAL_MODULE__Separator_js_c4a9d2eb__.Separator;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Separator_js_c4a9d2eb__["default"];
+export { __webpack_exports__Separator as Separator, __webpack_exports__default as default };

package/dist/components/size-picker/SizePicker.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "inline-flex gap-1";
+};

package/dist/components/size-picker/SizePicker.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "inline-flex gap-1"
+};
+export { CLASSES };

package/dist/components/size-picker/SizePicker.js

@@ -4,7 +4,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-m
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__sizeStore_js_308b1735__ from "./sizeStore.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=radiogroup>");
+import * as __WEBPACK_EXTERNAL_MODULE__SizePicker_classes_js_e21f4008__ from "./SizePicker.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const PRESETS = [
     "M",
     "L",
@@ -25,16 +26,16 @@ const SizePicker_SizePicker = (props)=>{
         store().setSize(preset);
         local.onSizeChange?.(preset);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("inline-flex gap-1", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SizePicker_classes_js_e21f4008__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(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)({
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             },
+            role: "radiogroup",
             get ["aria-label"] () {
                 return local["aria-label"] ?? "Change text size";
             }

package/dist/components/skeleton/Skeleton.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "skeleton";
+    readonly animation: {
+        readonly shimmer: "skeleton--shimmer";
+        readonly pulse: "skeleton--pulse";
+        readonly none: "skeleton--none";
+    };
+};

package/dist/components/skeleton/Skeleton.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "skeleton",
+    animation: {
+        shimmer: "skeleton--shimmer",
+        pulse: "skeleton--pulse",
+        none: "skeleton--none"
+    }
+};
+export { CLASSES };

package/dist/components/skeleton/Skeleton.js

@@ -2,12 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Skeleton.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__Skeleton_classes_js_44948e04__ from "./Skeleton.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const ANIMATION_CLASS_MAP = {
-    shimmer: "skeleton--shimmer",
-    pulse: "skeleton--pulse",
-    none: "skeleton--none"
-};
 const Skeleton = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
@@ -19,10 +15,9 @@ const Skeleton = (props)=>{
     const animation = ()=>local.animationType ?? "shimmer";
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("skeleton", ANIMATION_CLASS_MAP[animation()], local.class, local.className);
-            },
+        (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__Skeleton_classes_js_44948e04__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Skeleton_classes_js_44948e04__.CLASSES.animation[animation()], local.class, local.className)
+            }), {
             "data-slot": "skeleton",
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/slider/Slider.classes.d.ts

@@ -0,0 +1,13 @@
+export declare const CLASSES: {
+    readonly base: "slider";
+    readonly label: "slider__label";
+    readonly output: "slider__output";
+    readonly track: "slider__track";
+    readonly fill: "slider__fill";
+    readonly thumb: "slider__thumb";
+    readonly size: {
+        readonly sm: "slider--sm";
+        readonly md: "slider--md";
+        readonly lg: "slider--lg";
+    };
+};

package/dist/components/slider/Slider.classes.js

@@ -0,0 +1,14 @@
+const CLASSES = {
+    base: "slider",
+    label: "slider__label",
+    output: "slider__output",
+    track: "slider__track",
+    fill: "slider__fill",
+    thumb: "slider__thumb",
+    size: {
+        sm: "slider--sm",
+        md: "slider--md",
+        lg: "slider--lg"
+    }
+};
+export { CLASSES };

package/dist/components/slider/Slider.css

@@ -0,0 +1,122 @@
+@layer components {
+  .slider {
+    display: grid;
+    width: 100%;
+    gap: 0.25rem;
+    grid-template-areas:
+      "label output"
+      "track track";
+    grid-template-columns: 1fr auto;
+
+    --slider-thumb-w: 1.5rem;
+    --slider-thumb-h: 1rem;
+    --slider-h: 1.25rem;
+    /* Inset padding = (track height - thumb height) / 2 */
+    --slider-pad: calc((var(--slider-h) - var(--slider-thumb-h)) / 2);
+    --slider-track-bg: var(--color-default);
+    --slider-fill-bg: var(--color-accent);
+    --slider-thumb-bg: var(--color-accent-foreground, white);
+  }
+
+  .slider__label {
+    grid-area: label;
+    width: fit-content;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .slider__output {
+    grid-area: output;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .slider__track {
+    grid-area: track;
+    position: relative;
+    height: var(--slider-h);
+    border-radius: 9999px;
+    background-color: var(--slider-track-bg);
+    cursor: pointer;
+  }
+
+  .slider__fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-radius: 9999px;
+    pointer-events: none;
+    background-color: var(--slider-fill-bg);
+  }
+
+  .slider__thumb {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    border-radius: 9999px;
+    background-color: var(--slider-thumb-bg);
+    cursor: grab;
+    width: var(--slider-thumb-w);
+    height: var(--slider-thumb-h);
+    transform: translate(-50%, -50%);
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+    transition:
+      transform 250ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .slider__thumb[data-dragging="true"] {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+
+  .slider__thumb[data-focus-visible="true"] {
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06);
+  }
+
+  .slider__thumb[data-disabled="true"] {
+    cursor: default;
+  }
+
+  .slider[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .slider[data-disabled="true"] .slider__label {
+    opacity: 1;
+  }
+
+  .slider[data-disabled="true"] .slider__track {
+    cursor: not-allowed;
+  }
+
+  .slider--sm {
+    --slider-thumb-w: 1.125rem;
+    --slider-thumb-h: 0.625rem;
+    --slider-h: 1rem;
+  }
+
+  .slider--sm .slider__label,
+  .slider--sm .slider__output {
+    font-size: 0.75rem;
+  }
+
+  .slider--md {
+    /* Default size */
+  }
+
+  .slider--lg {
+    --slider-thumb-w: 1.75rem;
+    --slider-thumb-h: 1.25rem;
+    --slider-h: 1.5rem;
+  }
+}

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,22 @@
+import "./Slider.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SliderSize = "sm" | "md" | "lg";
+type SliderBaseProps = {
+    label?: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    formatValue?: (value: number) => string;
+    size?: SliderSize;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export type SliderProps = SliderBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderBaseProps>;
+declare const Slider: Component<SliderProps>;
+export default Slider;

package/dist/components/slider/Slider.js

@@ -0,0 +1,225 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Slider.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__Slider_classes_js_33bccb6b__ from "./Slider.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div></div><div>");
+function clamp(val, min, max) {
+    return Math.min(Math.max(val, min), max);
+}
+function snapToStep(val, min, max, step) {
+    const snapped = Math.round((val - min) / step) * step + min;
+    return clamp(snapped, min, max);
+}
+const Slider = (props)=>{
+    let trackRef;
+    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "label",
+        "value",
+        "onChange",
+        "min",
+        "max",
+        "step",
+        "disabled",
+        "formatValue",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const min = ()=>local.min ?? 0;
+    const max = ()=>local.max ?? 100;
+    const step = ()=>local.step ?? 1;
+    const size = ()=>local.size ?? "md";
+    const isDisabled = ()=>Boolean(local.disabled);
+    const labelId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const [dragging, setDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [focusVisible, setFocusVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const fraction = ()=>{
+        const range = max() - min();
+        if (range <= 0) return 0;
+        return (local.value - min()) / range;
+    };
+    const formattedValue = ()=>local.formatValue ? local.formatValue(local.value) : String(local.value);
+    const thumbLeft = ()=>{
+        const f = fraction();
+        return `calc(${f} * 100% + (0.5 - ${f}) * var(--slider-thumb-w) + ${1 - 2 * f} * var(--slider-pad))`;
+    };
+    const fillWidth = ()=>{
+        const f = fraction();
+        return `calc(${f} * 100% + ${1 - f} * var(--slider-thumb-w) + ${2 - 2 * f} * var(--slider-pad))`;
+    };
+    const getValueFromPosition = (clientX)=>{
+        if (!trackRef) return local.value;
+        const rect = trackRef.getBoundingClientRect();
+        const frac = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const raw = min() + frac * (max() - min());
+        return snapToStep(raw, min(), max(), step());
+    };
+    const handlePointerDown = (e)=>{
+        if (isDisabled()) return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(true);
+        const val = getValueFromPosition(e.clientX);
+        if (val !== local.value) local.onChange(val);
+    };
+    const handlePointerMove = (e)=>{
+        if (!dragging()) return;
+        const val = getValueFromPosition(e.clientX);
+        if (val !== local.value) local.onChange(val);
+    };
+    const handlePointerUp = ()=>{
+        setDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (isDisabled()) return;
+        let newVal = local.value;
+        const s = step();
+        const bigStep = (max() - min()) / 10;
+        switch(e.key){
+            case "ArrowRight":
+            case "ArrowUp":
+                newVal = clamp(local.value + s, min(), max());
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                newVal = clamp(local.value - s, min(), max());
+                break;
+            case "PageUp":
+                newVal = clamp(local.value + bigStep, min(), max());
+                break;
+            case "PageDown":
+                newVal = clamp(local.value - bigStep, min(), max());
+                break;
+            case "Home":
+                newVal = min();
+                break;
+            case "End":
+                newVal = max();
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (newVal !== local.value) local.onChange(snapToStep(newVal, min(), max(), s));
+    };
+    const handleFocus = ()=>setFocusVisible(true);
+    const handleBlur = ()=>setFocusVisible(false);
+    return (()=>{
+        var _el$ = _tmpl$2(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.size[size()], local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "slider",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            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 local.label;
+            },
+            get children () {
+                return [
+                    (()=>{
+                        var _el$2 = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "id", labelId);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.label
+                            }), {
+                            "data-slot": "label"
+                        }), false, true);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.label);
+                        return _el$2;
+                    })(),
+                    (()=>{
+                        var _el$3 = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.output
+                            }), {
+                            "data-slot": "slider-output",
+                            "aria-live": "polite"
+                        }), false, true);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, formattedValue);
+                        return _el$3;
+                    })()
+                ];
+            }
+        }), _el$4);
+        var _ref$ = trackRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : trackRef = _el$4;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.track
+            }), {
+            "data-slot": "slider-track",
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.fill
+            }), {
+            "data-slot": "slider-fill",
+            get style () {
+                return {
+                    width: fillWidth()
+                };
+            }
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Slider_classes_js_33bccb6b__.CLASSES.thumb
+            }), {
+            "data-slot": "slider-thumb",
+            get ["data-dragging"] () {
+                return dragging() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-focus-visible"] () {
+                return focusVisible() ? "true" : "false";
+            },
+            get style () {
+                return {
+                    left: thumbLeft()
+                };
+            },
+            role: "slider",
+            get tabIndex () {
+                return isDisabled() ? -1 : 0;
+            },
+            get ["aria-valuemin"] () {
+                return min();
+            },
+            get ["aria-valuemax"] () {
+                return max();
+            },
+            get ["aria-valuenow"] () {
+                return local.value;
+            },
+            get ["aria-valuetext"] () {
+                return formattedValue();
+            },
+            get ["aria-labelledby"] () {
+                return local.label ? labelId : void 0;
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+            onBlur: handleBlur
+        }), false, false);
+        return _el$;
+    })();
+};
+const slider_Slider = Slider;
+export { slider_Slider as default };

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

@@ -0,0 +1,2 @@
+export { default } from "./Slider";
+export type { SliderProps, SliderSize } from "./Slider";

package/dist/components/slider/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Slider_js_a9067410__ from "./Slider.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Slider_js_a9067410__["default"];
+export { __webpack_exports__default as default };

package/dist/components/spinner/Spinner.classes.d.ts

@@ -0,0 +1,25 @@
+export declare const CLASSES: {
+    readonly base: "spinner";
+    readonly size: {
+        readonly xs: "spinner--xs";
+        readonly sm: "spinner--sm";
+        readonly md: "";
+        readonly lg: "spinner--lg";
+        readonly xl: "spinner--xl";
+    };
+    readonly color: {
+        readonly current: "spinner--current";
+        readonly accent: "spinner--accent";
+        readonly success: "spinner--success";
+        readonly warning: "spinner--warning";
+        readonly danger: "spinner--danger";
+    };
+    readonly variant: {
+        readonly spinner: "spinner--spinner";
+        readonly dots: "spinner--dots";
+        readonly ring: "spinner--ring";
+        readonly ball: "spinner--ball";
+        readonly bars: "spinner--bars";
+        readonly infinity: "spinner--infinity";
+    };
+};