@moduix/solid 1.0.0

package/dist/components/slider/Slider.js

@@ -0,0 +1,203 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Slider, useSlider, useSliderContext } from "@ark-ui/solid/slider";
+import { clsx } from "clsx";
+import { Index, splitProps } from "solid-js";
+import Slider_module from "./Slider.module.js";
+function SliderRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'defaultValue',
+        'readOnly',
+        'value'
+    ]);
+    return createComponent(Slider.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get defaultValue () {
+            return local.defaultValue;
+        },
+        get value () {
+            return local.value;
+        },
+        "data-slot": "slider-root",
+        get ["data-readonly"] () {
+            return local.readOnly ? '' : void 0;
+        },
+        get ["class"] () {
+            return clsx(Slider_module.root, local.class);
+        },
+        get readOnly () {
+            return local.readOnly;
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SliderRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'value'
+    ]);
+    return createComponent(Slider.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get value () {
+            return local.value;
+        },
+        "data-slot": "slider-root-provider",
+        get ["class"] () {
+            return clsx(Slider_module.root, local.class);
+        }
+    }, others));
+}
+function SliderLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.Label, mergeProps({
+        "data-slot": "slider-label",
+        get ["class"] () {
+            return clsx(Slider_module.label, local.class);
+        }
+    }, others));
+}
+function SliderValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.ValueText, mergeProps({
+        "data-slot": "slider-value-text",
+        get ["class"] () {
+            return clsx(Slider_module.valueText, local.class);
+        }
+    }, others));
+}
+function SliderControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.Control, mergeProps({
+        "data-slot": "slider-control",
+        get ["class"] () {
+            return clsx(Slider_module.control, local.class);
+        }
+    }, others));
+}
+function SliderTrack(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.Track, mergeProps({
+        "data-slot": "slider-track",
+        get ["class"] () {
+            return clsx(Slider_module.track, local.class);
+        }
+    }, others));
+}
+function SliderRange(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.Range, mergeProps({
+        "data-slot": "slider-range",
+        get ["class"] () {
+            return clsx(Slider_module.range, local.class);
+        }
+    }, others));
+}
+function SliderThumb(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(Slider.Thumb, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "slider-thumb",
+        get ["class"] () {
+            return clsx(Slider_module.thumb, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SliderThumbs(props) {
+    const slider = useSliderContext();
+    return createComponent(Index, {
+        get each () {
+            return slider().value;
+        },
+        children: (_, index)=>createComponent(SliderThumb, {
+                index: index,
+                get ["class"] () {
+                    return props.class;
+                },
+                get children () {
+                    return createComponent(Slider.HiddenInput, {});
+                }
+            })
+    });
+}
+function SliderMarkerGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.MarkerGroup, mergeProps({
+        "data-slot": "slider-marker-group",
+        get ["class"] () {
+            return clsx(Slider_module.markerGroup, local.class);
+        }
+    }, others));
+}
+function SliderMarker(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.Marker, mergeProps({
+        "data-slot": "slider-marker",
+        get ["class"] () {
+            return clsx(Slider_module.marker, local.class);
+        }
+    }, others));
+}
+function SliderDraggingIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Slider.DraggingIndicator, mergeProps({
+        "data-slot": "slider-dragging-indicator",
+        get ["class"] () {
+            return clsx(Slider_module.draggingIndicator, local.class);
+        }
+    }, others));
+}
+const Slider_Slider = Object.assign(SliderRoot, {
+    Root: SliderRoot,
+    RootProvider: SliderRootProvider,
+    Context: Slider.Context,
+    useSlider: useSlider,
+    useSliderContext: useSliderContext,
+    Label: SliderLabel,
+    ValueText: SliderValueText,
+    Control: SliderControl,
+    HiddenInput: Slider.HiddenInput,
+    Track: SliderTrack,
+    Range: SliderRange,
+    Thumb: SliderThumb,
+    Thumbs: SliderThumbs,
+    MarkerGroup: SliderMarkerGroup,
+    Marker: SliderMarker,
+    DraggingIndicator: SliderDraggingIndicator
+});
+export { Slider_Slider as Slider, useSlider, useSliderContext };

package/dist/components/slider/Slider.jsx

@@ -0,0 +1,110 @@
+import { Slider, useSlider, useSliderContext } from "@ark-ui/solid/slider";
+import { clsx } from "clsx";
+import { Index, splitProps } from "solid-js";
+import Slider_module from "./Slider.module.jsx";
+function SliderRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'defaultValue',
+        'readOnly',
+        'value'
+    ]);
+    return <Slider.Root asChild={local.asChild} defaultValue={local.defaultValue} value={local.value} data-slot="slider-root" data-readonly={local.readOnly ? '' : void 0} class={clsx(Slider_module.root, local.class)} readOnly={local.readOnly} {...others}>
+      {local.children}
+    </Slider.Root>;
+}
+function SliderRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'value'
+    ]);
+    return <Slider.RootProvider asChild={local.asChild} value={local.value} data-slot="slider-root-provider" class={clsx(Slider_module.root, local.class)} {...others}/>;
+}
+function SliderLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.Label data-slot="slider-label" class={clsx(Slider_module.label, local.class)} {...others}/>;
+}
+function SliderValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.ValueText data-slot="slider-value-text" class={clsx(Slider_module.valueText, local.class)} {...others}/>;
+}
+function SliderControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.Control data-slot="slider-control" class={clsx(Slider_module.control, local.class)} {...others}/>;
+}
+function SliderTrack(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.Track data-slot="slider-track" class={clsx(Slider_module.track, local.class)} {...others}/>;
+}
+function SliderRange(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.Range data-slot="slider-range" class={clsx(Slider_module.range, local.class)} {...others}/>;
+}
+function SliderThumb(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <Slider.Thumb asChild={local.asChild} data-slot="slider-thumb" class={clsx(Slider_module.thumb, local.class)} {...others}>
+      {local.children}
+    </Slider.Thumb>;
+}
+function SliderThumbs(props) {
+    const slider = useSliderContext();
+    return <Index each={slider().value}>
+      {(_, index)=><SliderThumb index={index} class={props.class}>
+          <Slider.HiddenInput/>
+        </SliderThumb>}
+    </Index>;
+}
+function SliderMarkerGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.MarkerGroup data-slot="slider-marker-group" class={clsx(Slider_module.markerGroup, local.class)} {...others}/>;
+}
+function SliderMarker(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.Marker data-slot="slider-marker" class={clsx(Slider_module.marker, local.class)} {...others}/>;
+}
+function SliderDraggingIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Slider.DraggingIndicator data-slot="slider-dragging-indicator" class={clsx(Slider_module.draggingIndicator, local.class)} {...others}/>;
+}
+const Slider_Slider = Object.assign(SliderRoot, {
+    Root: SliderRoot,
+    RootProvider: SliderRootProvider,
+    Context: Slider.Context,
+    useSlider: useSlider,
+    useSliderContext: useSliderContext,
+    Label: SliderLabel,
+    ValueText: SliderValueText,
+    Control: SliderControl,
+    HiddenInput: Slider.HiddenInput,
+    Track: SliderTrack,
+    Range: SliderRange,
+    Thumb: SliderThumb,
+    Thumbs: SliderThumbs,
+    MarkerGroup: SliderMarkerGroup,
+    Marker: SliderMarker,
+    DraggingIndicator: SliderDraggingIndicator
+});
+export { Slider_Slider as Slider, useSlider, useSliderContext };

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

@@ -0,0 +1,14 @@
+import "./Slider_module.css";
+const Slider_module = {
+    root: "root-dI3Ye4",
+    label: "label-cCfbP0",
+    valueText: "valueText-qR8bCh",
+    control: "control-GAKJM5",
+    markerGroup: "markerGroup-LGDl6p",
+    track: "track-sx0K_D",
+    range: "range-DYKNW4",
+    thumb: "thumb-dktwnB",
+    draggingIndicator: "draggingIndicator-wUdzng",
+    marker: "marker-RkqZdP"
+};
+export default Slider_module;

package/dist/components/slider/Slider.module.jsx

@@ -0,0 +1,14 @@
+import "./Slider_module.css";
+const Slider_module = {
+    root: "root-dI3Ye4",
+    label: "label-cCfbP0",
+    valueText: "valueText-qR8bCh",
+    control: "control-GAKJM5",
+    markerGroup: "markerGroup-LGDl6p",
+    track: "track-sx0K_D",
+    range: "range-DYKNW4",
+    thumb: "thumb-dktwnB",
+    draggingIndicator: "draggingIndicator-wUdzng",
+    marker: "marker-RkqZdP"
+};
+export default Slider_module;

package/dist/components/slider/Slider_module.css

@@ -0,0 +1,226 @@
+@layer moduix.components {
+  .root-dI3Ye4 {
+    box-sizing: border-box;
+    gap: var(--moduix-slider-gap, var(--moduix-spacing-2));
+    width: var(--moduix-slider-width, 12rem);
+    max-inline-size: 100%;
+    color: var(--moduix-slider-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] {
+    column-gap: var(--moduix-slider-marker-group-margin-inline-start, var(--moduix-spacing-2));
+    width: var(--moduix-slider-width-vertical, max-content);
+    height: var(--moduix-slider-height, 12rem);
+    grid-template: "label value"
+                   "control markers" minmax(0, 1fr)
+                   / auto max-content;
+    align-items: center;
+    display: grid;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .label-cCfbP0 {
+    grid-area: label;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .valueText-qR8bCh {
+    grid-area: value;
+    justify-self: end;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .control-GAKJM5 {
+    grid-area: control;
+  }
+
+  .root-dI3Ye4[data-orientation="vertical"] .markerGroup-LGDl6p {
+    grid-area: markers;
+  }
+
+  .root-dI3Ye4[data-disabled] {
+    opacity: var(--moduix-slider-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .label-cCfbP0 {
+    color: var(--moduix-slider-label-color, var(--moduix-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-slider-label-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-slider-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .valueText-qR8bCh {
+    color: var(--moduix-slider-value-text-color, var(--moduix-slider-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-slider-value-text-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-slider-value-text-font-weight, var(--moduix-weight-regular));
+    line-height: var(--moduix-slider-value-text-line-height, var(--moduix-line-height-text-sm));
+    text-align: right;
+  }
+
+  .control-GAKJM5 {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--moduix-slider-control-size, var(--moduix-spacing-5));
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+
+  .control-GAKJM5[data-orientation="vertical"] {
+    width: var(--moduix-slider-control-size, var(--moduix-spacing-5));
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .control-GAKJM5[data-disabled], .root-dI3Ye4[data-readonly] .control-GAKJM5 {
+    cursor: default;
+  }
+
+  .track-sx0K_D {
+    width: 100%;
+    height: var(--moduix-slider-track-size, var(--moduix-spacing-1-5));
+    border-radius: var(--moduix-slider-track-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-slider-track-bg, var(--moduix-color-muted));
+    box-shadow: inset 0 0 0 var(--moduix-slider-track-border-width, var(--moduix-border-width-sm))
+      var(--moduix-slider-track-border-color, var(--moduix-color-border));
+    -webkit-user-select: none;
+    user-select: none;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .track-sx0K_D[data-orientation="vertical"] {
+    width: var(--moduix-slider-track-size, var(--moduix-spacing-1-5));
+    height: 100%;
+  }
+
+  .track-sx0K_D[data-invalid] {
+    box-shadow: inset 0 0 0 var(--moduix-slider-track-border-width, var(--moduix-border-width-sm))
+        var(--moduix-slider-track-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .range-DYKNW4 {
+    border-radius: var(--moduix-slider-range-radius, inherit);
+    background-color: var(--moduix-slider-range-bg, var(--moduix-color-primary));
+    height: 100%;
+  }
+
+  .range-DYKNW4[data-orientation="vertical"] {
+    width: 100%;
+  }
+
+  .range-DYKNW4[data-invalid] {
+    background-color: var(--moduix-slider-range-bg-invalid, var(--moduix-color-destructive));
+  }
+
+  .thumb-dktwnB {
+    box-sizing: border-box;
+    width: var(--moduix-slider-thumb-size, var(--moduix-spacing-4));
+    height: var(--moduix-slider-thumb-size, var(--moduix-spacing-4));
+    border: var(--moduix-slider-thumb-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-slider-thumb-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-slider-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-slider-thumb-bg, var(--moduix-color-background));
+    box-shadow: var(--moduix-slider-thumb-shadow, var(--moduix-shadow-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    transition: border-color var(--moduix-slider-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-slider-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-slider-transition, var(--moduix-transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .thumb-dktwnB[data-dragging] {
+    border-color: var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+          var(--moduix-slider-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-slider-thumb-shadow-dragging, var(--moduix-shadow-md));
+  }
+
+  .thumb-dktwnB:focus-visible {
+    border-color: var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+        var(--moduix-slider-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .thumb-dktwnB[data-disabled] {
+    pointer-events: none;
+  }
+
+  .thumb-dktwnB[data-invalid] {
+    border-color: var(--moduix-slider-thumb-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .thumb-dktwnB[data-invalid]:focus-visible {
+    box-shadow: 0 0 0 var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))
+          var(--moduix-slider-thumb-focus-ring-color-invalid, var(--moduix-slider-thumb-border-color-invalid, var(--moduix-color-destructive)));
+  }
+
+  .draggingIndicator-wUdzng {
+    top: calc(-1 * var(--moduix-spacing-8));
+    padding: var(--moduix-spacing-1) var(--moduix-spacing-2);
+    border-radius: var(--moduix-slider-dragging-indicator-radius, var(--moduix-radius-sm));
+    background-color: var(--moduix-slider-dragging-indicator-bg, var(--moduix-color-foreground));
+    color: var(--moduix-slider-dragging-indicator-color, var(--moduix-color-background));
+    font-size: var(--moduix-slider-dragging-indicator-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-slider-dragging-indicator-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-slider-dragging-indicator-line-height, 1);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .markerGroup-LGDl6p {
+    justify-content: space-between;
+    margin-block-start: var(--moduix-slider-marker-group-margin-top, var(--moduix-spacing-2));
+    display: flex;
+  }
+
+  .markerGroup-LGDl6p[data-orientation="vertical"] {
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+  }
+
+  .marker-RkqZdP {
+    color: var(--moduix-slider-marker-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-slider-marker-font-size, var(--moduix-text-xs));
+    line-height: var(--moduix-slider-marker-line-height, var(--moduix-line-height-text-xs));
+    position: relative;
+  }
+
+  .marker-RkqZdP:before {
+    width: var(--moduix-slider-marker-dot-size, var(--moduix-spacing-1));
+    height: var(--moduix-slider-marker-dot-size, var(--moduix-spacing-1));
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-slider-marker-dot-bg, var(--moduix-color-border));
+    content: "";
+    position: absolute;
+    inset-block-start: calc(-1 * var(--moduix-spacing-2));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .marker-RkqZdP:is([data-state="under-value"], [data-state="at-value"]):before {
+    background-color: var(--moduix-slider-marker-dot-bg-active, var(--moduix-slider-range-bg, var(--moduix-color-primary)));
+  }
+
+  .root-dI3Ye4[data-invalid] .marker-RkqZdP:is([data-state="under-value"], [data-state="at-value"]):before {
+    background-color: var(--moduix-slider-marker-dot-bg-active-invalid, var(--moduix-slider-range-bg-invalid, var(--moduix-color-destructive)));
+  }
+
+  .marker-RkqZdP[data-orientation="vertical"]:before {
+    inset-block-start: 50%;
+    inset-inline-start: calc(-1 * var(--moduix-spacing-2));
+    transform: translate(-50%, -50%);
+  }
+}
+

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

@@ -0,0 +1 @@
+export * from './Slider.js';

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export * from "./Slider.js";

package/dist/components/slider/index.jsx

@@ -0,0 +1 @@
+export * from "./Slider.jsx";

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

@@ -0,0 +1,10 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type SpinnerProps = HTMLArkProps<'span'> & {
+    size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    decorative?: boolean;
+};
+declare function SpinnerRoot(props: SpinnerProps): import("solid-js").JSX.Element;
+declare const Spinner: typeof SpinnerRoot & {
+    Root: typeof SpinnerRoot;
+};
+export { Spinner };

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,60 @@
+import { className, createComponent, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Spinner_module from "./Spinner.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-scope=spinner data-part=indicator data-slot=spinner-indicator aria-hidden=true>"), _tmpl$2 = /*#__PURE__*/ template("<span data-scope=spinner data-part=ring data-slot=spinner-ring>");
+function SpinnerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'decorative',
+        'aria-label',
+        'aria-labelledby',
+        'size'
+    ]);
+    const decorative = ()=>local.decorative ?? false;
+    const accessibleLabel = ()=>decorative() ? void 0 : local['aria-label'] ?? (local['aria-labelledby'] ? void 0 : 'Loading');
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "spinner",
+        "data-part": "root",
+        "data-slot": "spinner-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get role () {
+            return memo(()=>!!(decorative() && !local.asChild))() ? 'presentation' : decorative() ? void 0 : 'status';
+        },
+        get ["aria-hidden"] () {
+            return decorative() && !local.asChild ? true : void 0;
+        },
+        get ["aria-label"] () {
+            return accessibleLabel();
+        },
+        get ["aria-labelledby"] () {
+            return memo(()=>!!decorative())() ? void 0 : local['aria-labelledby'];
+        },
+        get ["class"] () {
+            return clsx(Spinner_module.root, local.class);
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            insert(_el$, ()=>local.children ?? (()=>{
+                    var _el$2 = _tmpl$2();
+                    effect(()=>className(_el$2, Spinner_module.ring));
+                    return _el$2;
+                })());
+            effect(()=>className(_el$, Spinner_module.indicator));
+            return _el$;
+        }
+    }));
+}
+const Spinner = Object.assign(SpinnerRoot, {
+    Root: SpinnerRoot
+});
+export { Spinner };

package/dist/components/spinner/Spinner.jsx

@@ -0,0 +1,26 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Spinner_module from "./Spinner.module.jsx";
+function SpinnerRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'decorative',
+        'aria-label',
+        'aria-labelledby',
+        'size'
+    ]);
+    const decorative = ()=>local.decorative ?? false;
+    const accessibleLabel = ()=>decorative() ? void 0 : local['aria-label'] ?? (local['aria-labelledby'] ? void 0 : 'Loading');
+    return <ark.span asChild={local.asChild} {...others} data-scope="spinner" data-part="root" data-slot="spinner-root" data-size={local.size ?? 'md'} role={decorative() && !local.asChild ? 'presentation' : decorative() ? void 0 : 'status'} aria-hidden={decorative() && !local.asChild ? true : void 0} aria-label={accessibleLabel()} aria-labelledby={decorative() ? void 0 : local['aria-labelledby']} class={clsx(Spinner_module.root, local.class)}>
+      <span data-scope="spinner" data-part="indicator" data-slot="spinner-indicator" class={Spinner_module.indicator} aria-hidden="true">
+        {local.children ?? <span data-scope="spinner" data-part="ring" data-slot="spinner-ring" class={Spinner_module.ring}/>}
+      </span>
+    </ark.span>;
+}
+const Spinner = Object.assign(SpinnerRoot, {
+    Root: SpinnerRoot
+});
+export { Spinner };

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

@@ -0,0 +1,7 @@
+import "./Spinner_module.css";
+const Spinner_module = {
+    root: "root-nmONyX",
+    indicator: "indicator-Oef4O8",
+    ring: "ring-STi4_I"
+};
+export default Spinner_module;