@pathscale/ui 1.1.56 → 1.1.57

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

package/dist/components/spinner/Spinner.classes.js

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

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

@@ -0,0 +1,14 @@
+import "./Spinner.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpinnerColor = "current" | "accent" | "success" | "warning" | "danger";
+export type SpinnerVariant = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
+export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    variant?: SpinnerVariant;
+    label?: string;
+};
+declare const Spinner: Component<SpinnerProps>;
+export default Spinner;

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,60 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Spinner.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__Spinner_classes_js_ffa4756a__ from "./Spinner.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const SpinnerSVG = ()=>{
+    const id = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "id", `spinner-grad1-${id}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", `spinner-grad2-${id}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "fill", `url(#spinner-grad1-${id})`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", `url(#spinner-grad2-${id})`);
+        return _el$;
+    })();
+};
+const Spinner = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "size",
+        "color",
+        "variant",
+        "label",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const size = ()=>local.size ?? "md";
+    const color = ()=>local.color ?? "current";
+    const variant = ()=>local.variant ?? "spinner";
+    return (()=>{
+        var _el$8 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "status",
+            get ["aria-label"] () {
+                return local.label ?? "Loading";
+            },
+            "aria-busy": "true",
+            "aria-live": "polite",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.size[size()], __WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.color[color()], __WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.variant[variant()], local.class, local.className);
+            },
+            "data-slot": "spinner",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"spinner" === variant());
+            return ()=>_c$() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SpinnerSVG, {}) : void 0;
+        })());
+        return _el$8;
+    })();
+};
+const spinner_Spinner = Spinner;
+export { spinner_Spinner as default };

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

@@ -0,0 +1 @@
+export { default, default as Spinner, default as Loading, type SpinnerProps, type SpinnerSize, type SpinnerColor, type SpinnerVariant, } from "./Spinner";

package/dist/components/spinner/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__ from "./Spinner.js";
+var __webpack_exports__Loading = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
+var __webpack_exports__Spinner = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
+export { __webpack_exports__Loading as Loading, __webpack_exports__Spinner as Spinner, __webpack_exports__default as default };

package/dist/components/surface/Surface.classes.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    readonly base: "surface";
+    readonly variant: {
+        readonly default: "surface--default";
+        readonly secondary: "surface--secondary";
+        readonly tertiary: "surface--tertiary";
+        readonly transparent: "surface--transparent";
+    };
+};

package/dist/components/surface/Surface.classes.js

@@ -0,0 +1,10 @@
+const CLASSES = {
+    base: "surface",
+    variant: {
+        default: "surface--default",
+        secondary: "surface--secondary",
+        tertiary: "surface--tertiary",
+        transparent: "surface--transparent"
+    }
+};
+export { CLASSES };

package/dist/components/surface/Surface.css

@@ -0,0 +1,37 @@
+@layer components {
+  .surface {
+    position: relative;
+    --surface-bg: var(--color-surface, var(--color-base-100));
+    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
+    --surface-border: transparent;
+    --surface-radius: var(--radius-box, 0.75rem);
+    background-color: var(--surface-bg);
+    color: var(--surface-fg);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--surface-radius);
+  }
+
+  .surface--transparent {
+    --surface-bg: transparent;
+    --surface-fg: var(--color-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--default {
+    --surface-bg: var(--color-surface, var(--color-base-100));
+    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--secondary {
+    --surface-bg: var(--color-surface-secondary, var(--color-base-200));
+    --surface-fg: var(--color-surface-secondary-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--tertiary {
+    --surface-bg: var(--color-surface-tertiary, var(--color-base-300));
+    --surface-fg: var(--color-surface-tertiary-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+}

package/dist/components/surface/Surface.d.ts

@@ -0,0 +1,12 @@
+import "./Surface.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SurfaceVariant = "default" | "secondary" | "tertiary" | "transparent";
+export type SurfaceVariants = {
+    variant?: SurfaceVariant;
+};
+export type SurfaceProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & SurfaceVariants & {
+    children?: JSX.Element;
+};
+export declare function Surface(props: SurfaceProps): JSX.Element;
+export default Surface;