@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/popover/Popover.js

@@ -84,11 +84,12 @@ function PopoverAnchor(props) {
         'class'
     ]);
     return createComponent(Popover.Anchor, mergeProps({
-        "data-slot": "popover-anchor",
         get ["class"] () {
             return local.class;
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-anchor"
+    }));
 }
 function PopoverTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -99,22 +100,24 @@ function PopoverTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "popover-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-trigger"
+    }));
 }
 function PopoverIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Popover.Indicator, mergeProps({
-        "data-slot": "popover-indicator",
         get ["class"] () {
             return local.class;
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-indicator"
+    }));
 }
 function PopoverPositioner(props) {
     const [local, others] = splitProps(props, [
@@ -123,11 +126,12 @@ function PopoverPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Popover.Positioner, mergeProps({
-                "data-slot": "popover-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "popover-positioner"
+            }));
         }
     });
 }
@@ -136,11 +140,12 @@ function PopoverContent(props) {
         'class'
     ]);
     return createComponent(Popover.Content, mergeProps({
-        "data-slot": "popover-content",
         get ["class"] () {
             return cn('group/popover-content relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(28rem,var(--available-width))] min-w-[min(16rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md bg-popover p-4 wrap-anywhere text-popover-foreground shadow-lg outline-1 outline-border has-[>[data-slot=popover-body]]:flex has-[>[data-slot=popover-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=popover-body]]:[&>[data-slot=popover-body]]:overflow-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-content"
+    }));
 }
 function PopoverArrow(props) {
     const [local, others] = splitProps(props, [
@@ -149,11 +154,11 @@ function PopoverArrow(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Popover.Arrow, mergeProps({
-        "data-slot": "popover-arrow",
         get ["class"] () {
             return cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class);
         }
     }, others, {
+        "data-slot": "popover-arrow",
         get children () {
             return resolvedChildren() ?? createComponent(PopoverArrowTip, {});
         }
@@ -164,33 +169,36 @@ function PopoverArrowTip(props) {
         'class'
     ]);
     return createComponent(Popover.ArrowTip, mergeProps({
-        "data-slot": "popover-arrow-tip",
         get ["class"] () {
             return cn('border-t border-l border-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-arrow-tip"
+    }));
 }
 function PopoverTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Popover.Title, mergeProps({
-        "data-slot": "popover-title",
         get ["class"] () {
             return cn('text-md leading-6 font-semibold text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-title"
+    }));
 }
 function PopoverDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Popover.Description, mergeProps({
-        "data-slot": "popover-description",
         get ["class"] () {
             return cn('text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-description"
+    }));
 }
 function PopoverCloseTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -201,11 +209,12 @@ function PopoverCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "popover-close-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-close-trigger"
+    }));
 }
 function PopoverCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -238,33 +247,36 @@ function PopoverHeader(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "popover-header",
         get ["class"] () {
             return cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-header"
+    }));
 }
 function PopoverBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "popover-body",
         get ["class"] () {
             return cn('min-h-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-body"
+    }));
 }
 function PopoverFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "popover-footer",
         get ["class"] () {
             return cn('mt-3 flex items-center justify-end gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "popover-footer"
+    }));
 }
 const Popover_Popover = Object.assign(PopoverRoot, {
     Root: PopoverRoot,

package/dist/components/popover/Popover.jsx

@@ -39,34 +39,34 @@ function PopoverAnchor(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Anchor data-slot="popover-anchor" class={local.class} {...others}/>;
+    return <Popover.Anchor class={local.class} {...others} data-slot="popover-anchor"/>;
 }
 function PopoverTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Popover.Trigger asChild={local.asChild} data-slot="popover-trigger" class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Popover.Trigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="popover-trigger"/>;
 }
 function PopoverIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Indicator data-slot="popover-indicator" class={local.class} {...others}/>;
+    return <Popover.Indicator class={local.class} {...others} data-slot="popover-indicator"/>;
 }
 function PopoverPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Popover.Positioner data-slot="popover-positioner" class={cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', local.class)} {...others}/>
+      <Popover.Positioner class={cn('z-[var(--z-index,var(--moduix-z-popup))] max-w-[var(--available-width)] outline-0', local.class)} {...others} data-slot="popover-positioner"/>
     </OverlayPortal>;
 }
 function PopoverContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Content data-slot="popover-content" class={cn('group/popover-content relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(28rem,var(--available-width))] min-w-[min(16rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md bg-popover p-4 wrap-anywhere text-popover-foreground shadow-lg outline-1 outline-border has-[>[data-slot=popover-body]]:flex has-[>[data-slot=popover-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=popover-body]]:[&>[data-slot=popover-body]]:overflow-auto', local.class)} {...others}/>;
+    return <Popover.Content class={cn('group/popover-content relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(28rem,var(--available-width))] min-w-[min(16rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md bg-popover p-4 wrap-anywhere text-popover-foreground shadow-lg outline-1 outline-border has-[>[data-slot=popover-body]]:flex has-[>[data-slot=popover-body]]:flex-col data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none has-[>[data-slot=popover-body]]:[&>[data-slot=popover-body]]:overflow-auto', local.class)} {...others} data-slot="popover-content"/>;
 }
 function PopoverArrow(props) {
     const [local, others] = splitProps(props, [
@@ -74,7 +74,7 @@ function PopoverArrow(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Popover.Arrow data-slot="popover-arrow" class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class)} {...others}>
+    return <Popover.Arrow class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class)} {...others} data-slot="popover-arrow">
       {resolvedChildren() ?? <PopoverArrowTip/>}
     </Popover.Arrow>;
 }
@@ -82,26 +82,26 @@ function PopoverArrowTip(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.ArrowTip data-slot="popover-arrow-tip" class={cn('border-t border-l border-border', local.class)} {...others}/>;
+    return <Popover.ArrowTip class={cn('border-t border-l border-border', local.class)} {...others} data-slot="popover-arrow-tip"/>;
 }
 function PopoverTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Title data-slot="popover-title" class={cn('text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others}/>;
+    return <Popover.Title class={cn('text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others} data-slot="popover-title"/>;
 }
 function PopoverDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Popover.Description data-slot="popover-description" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <Popover.Description class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="popover-description"/>;
 }
 function PopoverCloseTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Popover.CloseTrigger asChild={local.asChild} data-slot="popover-close-trigger" class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Popover.CloseTrigger asChild={local.asChild} class={cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="popover-close-trigger"/>;
 }
 function PopoverCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -119,19 +119,19 @@ function PopoverHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="popover-header" class={cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', local.class)} {...others}/>;
+    return <ark.div class={cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', local.class)} {...others} data-slot="popover-header"/>;
 }
 function PopoverBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="popover-body" class={cn('min-h-0', local.class)} {...others}/>;
+    return <ark.div class={cn('min-h-0', local.class)} {...others} data-slot="popover-body"/>;
 }
 function PopoverFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="popover-footer" class={cn('mt-3 flex items-center justify-end gap-2', local.class)} {...others}/>;
+    return <ark.div class={cn('mt-3 flex items-center justify-end gap-2', local.class)} {...others} data-slot="popover-footer"/>;
 }
 const Popover_Popover = Object.assign(PopoverRoot, {
     Root: PopoverRoot,

package/dist/components/progress-circular/ProgressCircular.js

@@ -12,11 +12,11 @@ function ProgressCircularRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-root",
         get ["class"] () {
             return cn('inline-grid w-max max-w-full min-w-0 justify-items-center gap-2 text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "progress-circular-root",
         get children () {
             return local.children;
         }
@@ -32,11 +32,11 @@ function ProgressCircularRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-root-provider",
         get ["class"] () {
             return cn('inline-grid w-max max-w-full min-w-0 justify-items-center gap-2 text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "progress-circular-root-provider",
         get children () {
             return local.children;
         }
@@ -51,11 +51,12 @@ function ProgressCircularLabel(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-label",
         get ["class"] () {
             return cn('max-w-full min-w-0 text-center text-sm font-regular [overflow-wrap:anywhere]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-circular-label"
+    }));
 }
 function ProgressCircularValueText(props) {
     const [local, others] = splitProps(props, [
@@ -66,11 +67,12 @@ function ProgressCircularValueText(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-value-text",
         get ["class"] () {
             return cn('max-w-full min-w-0 text-center text-sm font-medium [overflow-wrap:anywhere]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-circular-value-text"
+    }));
 }
 function ProgressCircularCircle(props) {
     const [local, others] = splitProps(props, [
@@ -82,11 +84,11 @@ function ProgressCircularCircle(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-circle",
         get ["class"] () {
             return cn('block overflow-visible [--size:var(--spacing-control-xl)] [--thickness:0.4rem]', local.class);
         }
     }, others, {
+        "data-slot": "progress-circular-circle",
         get children () {
             return local.children;
         }
@@ -101,11 +103,12 @@ function ProgressCircularCircleTrack(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-circle-track",
         get ["class"] () {
             return cn('stroke-muted', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-circular-circle-track"
+    }));
 }
 function ProgressCircularCircleRange(props) {
     const [local, others] = splitProps(props, [
@@ -116,11 +119,12 @@ function ProgressCircularCircleRange(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-circle-range",
         get ["class"] () {
             return cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-[moduix-spin_1.4s_linear_infinite] data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-circular-circle-range"
+    }));
 }
 function ProgressCircularRing(props) {
     return createComponent(ProgressCircularCircle, mergeProps(props, {
@@ -141,11 +145,12 @@ function ProgressCircularView(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-circular-view",
         get ["class"] () {
             return cn('contents', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-circular-view"
+    }));
 }
 const ProgressCircular = Object.assign(ProgressCircularRoot, {
     Root: ProgressCircularRoot,

package/dist/components/progress-circular/ProgressCircular.jsx

@@ -7,7 +7,7 @@ function ProgressCircularRoot(props) {
         'children',
         'class'
     ]);
-    return <Progress.Root asChild={local.asChild} data-slot="progress-circular-root" class={cn('inline-grid w-max max-w-full min-w-0 justify-items-center gap-2 text-foreground', local.class)} {...others}>
+    return <Progress.Root asChild={local.asChild} class={cn('inline-grid w-max max-w-full min-w-0 justify-items-center gap-2 text-foreground', local.class)} {...others} data-slot="progress-circular-root">
       {local.children}
     </Progress.Root>;
 }
@@ -17,7 +17,7 @@ function ProgressCircularRootProvider(props) {
         'children',
         'class'
     ]);
-    return <Progress.RootProvider asChild={local.asChild} data-slot="progress-circular-root-provider" class={cn('inline-grid w-max max-w-full min-w-0 justify-items-center gap-2 text-foreground', local.class)} {...others}>
+    return <Progress.RootProvider asChild={local.asChild} class={cn('inline-grid w-max max-w-full min-w-0 justify-items-center gap-2 text-foreground', local.class)} {...others} data-slot="progress-circular-root-provider">
       {local.children}
     </Progress.RootProvider>;
 }
@@ -26,14 +26,14 @@ function ProgressCircularLabel(props) {
         'asChild',
         'class'
     ]);
-    return <Progress.Label asChild={local.asChild} data-slot="progress-circular-label" class={cn('max-w-full min-w-0 text-center text-sm font-regular [overflow-wrap:anywhere]', local.class)} {...others}/>;
+    return <Progress.Label asChild={local.asChild} class={cn('max-w-full min-w-0 text-center text-sm font-regular [overflow-wrap:anywhere]', local.class)} {...others} data-slot="progress-circular-label"/>;
 }
 function ProgressCircularValueText(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.ValueText asChild={local.asChild} data-slot="progress-circular-value-text" class={cn('max-w-full min-w-0 text-center text-sm font-medium [overflow-wrap:anywhere]', local.class)} {...others}/>;
+    return <Progress.ValueText asChild={local.asChild} class={cn('max-w-full min-w-0 text-center text-sm font-medium [overflow-wrap:anywhere]', local.class)} {...others} data-slot="progress-circular-value-text"/>;
 }
 function ProgressCircularCircle(props) {
     const [local, others] = splitProps(props, [
@@ -41,7 +41,7 @@ function ProgressCircularCircle(props) {
         'children',
         'class'
     ]);
-    return <Progress.Circle asChild={local.asChild} data-slot="progress-circular-circle" class={cn('block overflow-visible [--size:var(--spacing-control-xl)] [--thickness:0.4rem]', local.class)} {...others}>
+    return <Progress.Circle asChild={local.asChild} class={cn('block overflow-visible [--size:var(--spacing-control-xl)] [--thickness:0.4rem]', local.class)} {...others} data-slot="progress-circular-circle">
       {local.children}
     </Progress.Circle>;
 }
@@ -50,14 +50,14 @@ function ProgressCircularCircleTrack(props) {
         'asChild',
         'class'
     ]);
-    return <Progress.CircleTrack asChild={local.asChild} data-slot="progress-circular-circle-track" class={cn('stroke-muted', local.class)} {...others}/>;
+    return <Progress.CircleTrack asChild={local.asChild} class={cn('stroke-muted', local.class)} {...others} data-slot="progress-circular-circle-track"/>;
 }
 function ProgressCircularCircleRange(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.CircleRange asChild={local.asChild} data-slot="progress-circular-circle-range" class={cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-[moduix-spin_1.4s_linear_infinite] data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class)} {...others}/>;
+    return <Progress.CircleRange asChild={local.asChild} class={cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-[moduix-spin_1.4s_linear_infinite] data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', local.class)} {...others} data-slot="progress-circular-circle-range"/>;
 }
 function ProgressCircularRing(props) {
     return <ProgressCircularCircle {...props}>
@@ -70,7 +70,7 @@ function ProgressCircularView(props) {
         'asChild',
         'class'
     ]);
-    return <Progress.View asChild={local.asChild} data-slot="progress-circular-view" class={cn('contents', local.class)} {...others}/>;
+    return <Progress.View asChild={local.asChild} class={cn('contents', local.class)} {...others} data-slot="progress-circular-view"/>;
 }
 const ProgressCircular = Object.assign(ProgressCircularRoot, {
     Root: ProgressCircularRoot,

package/dist/components/progress-linear/ProgressLinear.js

@@ -12,11 +12,11 @@ function ProgressLinearRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-root",
         get ["class"] () {
             return cn('box-border grid w-48 max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 text-foreground data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)]', local.class);
         }
     }, others, {
+        "data-slot": "progress-linear-root",
         get children () {
             return local.children;
         }
@@ -32,11 +32,11 @@ function ProgressLinearRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-root-provider",
         get ["class"] () {
             return cn('box-border grid w-48 max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 text-foreground data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)]', local.class);
         }
     }, others, {
+        "data-slot": "progress-linear-root-provider",
         get children () {
             return local.children;
         }
@@ -51,11 +51,12 @@ function ProgressLinearLabel(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-label",
         get ["class"] () {
             return cn('min-w-0 text-sm leading-5 font-normal [overflow-wrap:anywhere] text-current', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-linear-label"
+    }));
 }
 function ProgressLinearValueText(props) {
     const [local, others] = splitProps(props, [
@@ -66,11 +67,12 @@ function ProgressLinearValueText(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-value-text",
         get ["class"] () {
             return cn('min-w-0 justify-self-end text-end text-sm leading-5 font-normal [overflow-wrap:anywhere] text-current', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-linear-value-text"
+    }));
 }
 function ProgressLinearTrack(props) {
     const [local, others] = splitProps(props, [
@@ -81,11 +83,12 @@ function ProgressLinearTrack(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-track",
         get ["class"] () {
             return cn('col-span-full box-border block h-2 w-full overflow-hidden rounded-full bg-muted ring-1 ring-border ring-inset data-[orientation=vertical]:flex data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:items-end data-[orientation=vertical]:justify-self-center', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-linear-track"
+    }));
 }
 function ProgressLinearRange(props) {
     const [local, others] = splitProps(props, [
@@ -96,11 +99,12 @@ function ProgressLinearRange(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-range",
         get ["class"] () {
             return cn('block h-full rounded-[inherit] bg-primary transition-[width,height] duration-200 ease-in-out data-[orientation=vertical]:w-full data-[state=indeterminate]:w-[35%] data-[state=indeterminate]:animate-moduix-progress-linear-indeterminate data-[state=indeterminate]:data-[orientation=vertical]:h-[35%] data-[state=indeterminate]:data-[orientation=vertical]:animate-moduix-progress-linear-indeterminate-vertical motion-reduce:data-[state=indeterminate]:translate-x-0 motion-reduce:data-[state=indeterminate]:translate-y-0 motion-reduce:data-[state=indeterminate]:animate-none rtl:data-[state=indeterminate]:data-[orientation=horizontal]:[animation-direction:reverse]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-linear-range"
+    }));
 }
 function ProgressLinearView(props) {
     const [local, others] = splitProps(props, [
@@ -111,11 +115,12 @@ function ProgressLinearView(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "progress-linear-view",
         get ["class"] () {
             return cn('contents', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "progress-linear-view"
+    }));
 }
 const ProgressLinear = Object.assign(ProgressLinearRoot, {
     Root: ProgressLinearRoot,

package/dist/components/progress-linear/ProgressLinear.jsx

@@ -7,7 +7,7 @@ function ProgressLinearRoot(props) {
         'children',
         'class'
     ]);
-    return <Progress.Root asChild={local.asChild} data-slot="progress-linear-root" class={cn('box-border grid w-48 max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 text-foreground data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)]', local.class)} {...others}>
+    return <Progress.Root asChild={local.asChild} class={cn('box-border grid w-48 max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 text-foreground data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)]', local.class)} {...others} data-slot="progress-linear-root">
       {local.children}
     </Progress.Root>;
 }
@@ -17,7 +17,7 @@ function ProgressLinearRootProvider(props) {
         'children',
         'class'
     ]);
-    return <Progress.RootProvider asChild={local.asChild} data-slot="progress-linear-root-provider" class={cn('box-border grid w-48 max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 text-foreground data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)]', local.class)} {...others}>
+    return <Progress.RootProvider asChild={local.asChild} class={cn('box-border grid w-48 max-w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2 text-foreground data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)]', local.class)} {...others} data-slot="progress-linear-root-provider">
       {local.children}
     </Progress.RootProvider>;
 }
@@ -26,35 +26,35 @@ function ProgressLinearLabel(props) {
         'asChild',
         'class'
     ]);
-    return <Progress.Label asChild={local.asChild} data-slot="progress-linear-label" class={cn('min-w-0 text-sm leading-5 font-normal [overflow-wrap:anywhere] text-current', local.class)} {...others}/>;
+    return <Progress.Label asChild={local.asChild} class={cn('min-w-0 text-sm leading-5 font-normal [overflow-wrap:anywhere] text-current', local.class)} {...others} data-slot="progress-linear-label"/>;
 }
 function ProgressLinearValueText(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.ValueText asChild={local.asChild} data-slot="progress-linear-value-text" class={cn('min-w-0 justify-self-end text-end text-sm leading-5 font-normal [overflow-wrap:anywhere] text-current', local.class)} {...others}/>;
+    return <Progress.ValueText asChild={local.asChild} class={cn('min-w-0 justify-self-end text-end text-sm leading-5 font-normal [overflow-wrap:anywhere] text-current', local.class)} {...others} data-slot="progress-linear-value-text"/>;
 }
 function ProgressLinearTrack(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.Track asChild={local.asChild} data-slot="progress-linear-track" class={cn('col-span-full box-border block h-2 w-full overflow-hidden rounded-full bg-muted ring-1 ring-border ring-inset data-[orientation=vertical]:flex data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:items-end data-[orientation=vertical]:justify-self-center', local.class)} {...others}/>;
+    return <Progress.Track asChild={local.asChild} class={cn('col-span-full box-border block h-2 w-full overflow-hidden rounded-full bg-muted ring-1 ring-border ring-inset data-[orientation=vertical]:flex data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:items-end data-[orientation=vertical]:justify-self-center', local.class)} {...others} data-slot="progress-linear-track"/>;
 }
 function ProgressLinearRange(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.Range asChild={local.asChild} data-slot="progress-linear-range" class={cn('block h-full rounded-[inherit] bg-primary transition-[width,height] duration-200 ease-in-out data-[orientation=vertical]:w-full data-[state=indeterminate]:w-[35%] data-[state=indeterminate]:animate-moduix-progress-linear-indeterminate data-[state=indeterminate]:data-[orientation=vertical]:h-[35%] data-[state=indeterminate]:data-[orientation=vertical]:animate-moduix-progress-linear-indeterminate-vertical motion-reduce:data-[state=indeterminate]:translate-x-0 motion-reduce:data-[state=indeterminate]:translate-y-0 motion-reduce:data-[state=indeterminate]:animate-none rtl:data-[state=indeterminate]:data-[orientation=horizontal]:[animation-direction:reverse]', local.class)} {...others}/>;
+    return <Progress.Range asChild={local.asChild} class={cn('block h-full rounded-[inherit] bg-primary transition-[width,height] duration-200 ease-in-out data-[orientation=vertical]:w-full data-[state=indeterminate]:w-[35%] data-[state=indeterminate]:animate-moduix-progress-linear-indeterminate data-[state=indeterminate]:data-[orientation=vertical]:h-[35%] data-[state=indeterminate]:data-[orientation=vertical]:animate-moduix-progress-linear-indeterminate-vertical motion-reduce:data-[state=indeterminate]:translate-x-0 motion-reduce:data-[state=indeterminate]:translate-y-0 motion-reduce:data-[state=indeterminate]:animate-none rtl:data-[state=indeterminate]:data-[orientation=horizontal]:[animation-direction:reverse]', local.class)} {...others} data-slot="progress-linear-range"/>;
 }
 function ProgressLinearView(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Progress.View asChild={local.asChild} data-slot="progress-linear-view" class={cn('contents', local.class)} {...others}/>;
+    return <Progress.View asChild={local.asChild} class={cn('contents', local.class)} {...others} data-slot="progress-linear-view"/>;
 }
 const ProgressLinear = Object.assign(ProgressLinearRoot, {
     Root: ProgressLinearRoot,