@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/number-input/NumberInput.jsx

@@ -9,7 +9,7 @@ function NumberInputRoot(props) {
         'class',
         'value'
     ]);
-    return <NumberInput.Root asChild={local.asChild} value={local.value} data-slot="number-input-root" class={cn('group/number-input flex w-auto max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others}>
+    return <NumberInput.Root asChild={local.asChild} value={local.value} class={cn('group/number-input flex w-auto max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others} data-slot="number-input-root">
       {local.children}
     </NumberInput.Root>;
 }
@@ -20,7 +20,7 @@ function NumberInputRootProvider(props) {
         'class',
         'value'
     ]);
-    return <NumberInput.RootProvider asChild={local.asChild} value={local.value} data-slot="number-input-root-provider" class={cn('group/number-input flex w-auto max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others}>
+    return <NumberInput.RootProvider asChild={local.asChild} value={local.value} class={cn('group/number-input flex w-auto max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others} data-slot="number-input-root-provider">
       {local.children}
     </NumberInput.RootProvider>;
 }
@@ -28,19 +28,19 @@ function NumberInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NumberInput.Label data-slot="number-input-label" class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others}/>;
+    return <NumberInput.Label class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others} data-slot="number-input-label"/>;
 }
 function NumberInputScrubber(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NumberInput.Scrubber data-slot="number-input-scrubber" class={cn('inline-flex cursor-ew-resize items-center gap-2 text-foreground select-none data-disabled:cursor-default', local.class)} {...others}/>;
+    return <NumberInput.Scrubber class={cn('inline-flex cursor-ew-resize items-center gap-2 text-foreground select-none data-disabled:cursor-default', local.class)} {...others} data-slot="number-input-scrubber"/>;
 }
 function NumberInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NumberInput.Control data-slot="number-input-control" class={cn('inline-flex items-stretch', local.class)} {...others}/>;
+    return <NumberInput.Control class={cn('inline-flex items-stretch', local.class)} {...others} data-slot="number-input-control"/>;
 }
 function NumberInputDecrementTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -48,7 +48,7 @@ function NumberInputDecrementTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <NumberInput.DecrementTrigger data-slot="number-input-decrement-trigger" class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+    return <NumberInput.DecrementTrigger class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="number-input-decrement-trigger">
       {resolvedChildren() ?? <MinusIcon/>}
     </NumberInput.DecrementTrigger>;
 }
@@ -56,7 +56,7 @@ function NumberInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NumberInput.Input data-slot="number-input-input" class={cn('h-control-md w-24 rounded-none border-x-0 border-y border-border border-x-current bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-focus:z-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class)} {...others}/>;
+    return <NumberInput.Input class={cn('h-control-md w-24 rounded-none border-x-0 border-y border-border border-x-current bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-focus:z-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="number-input-input"/>;
 }
 function NumberInputIncrementTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -64,7 +64,7 @@ function NumberInputIncrementTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <NumberInput.IncrementTrigger data-slot="number-input-increment-trigger" class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}>
+    return <NumberInput.IncrementTrigger class={cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="number-input-increment-trigger">
       {resolvedChildren() ?? <PlusIcon/>}
     </NumberInput.IncrementTrigger>;
 }
@@ -72,7 +72,7 @@ function NumberInputValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <NumberInput.ValueText data-slot="number-input-value-text" class={cn('text-sm leading-5 text-muted-foreground tabular-nums', local.class)} {...others}/>;
+    return <NumberInput.ValueText class={cn('text-sm leading-5 text-muted-foreground tabular-nums', local.class)} {...others} data-slot="number-input-value-text"/>;
 }
 function NumberInputField(props) {
     return <NumberInputControl {...props}>

package/dist/components/pagination/Pagination.js

@@ -14,11 +14,11 @@ function PaginationRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-root",
         get ["class"] () {
             return cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "pagination-root",
         get children () {
             return local.children;
         }
@@ -34,11 +34,11 @@ function PaginationRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-root-provider",
         get ["class"] () {
             return cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "pagination-root-provider",
         get children () {
             return local.children;
         }
@@ -53,11 +53,12 @@ function PaginationItem(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-item",
         get ["class"] () {
             return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "pagination-item"
+    }));
 }
 function PaginationEllipsis(props) {
     const [local, others] = splitProps(props, [
@@ -70,11 +71,11 @@ function PaginationEllipsis(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-ellipsis",
         get ["class"] () {
             return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class);
         }
     }, others, {
+        "data-slot": "pagination-ellipsis",
         get children () {
             return resolvedChildren() ?? (!local.asChild && '...');
         }
@@ -105,11 +106,11 @@ function PaginationPrevTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-prev-trigger",
         get ["class"] () {
             return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
+        "data-slot": "pagination-prev-trigger",
         get children () {
             return resolvedChildren() ?? (!local.asChild && createComponent(ChevronLeftIcon, {}));
         }
@@ -126,11 +127,11 @@ function PaginationNextTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-next-trigger",
         get ["class"] () {
             return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
+        "data-slot": "pagination-next-trigger",
         get children () {
             return resolvedChildren() ?? (!local.asChild && createComponent(ChevronRightIcon, {}));
         }
@@ -147,11 +148,11 @@ function PaginationFirstTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-first-trigger",
         get ["class"] () {
             return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
+        "data-slot": "pagination-first-trigger",
         get children () {
             return resolvedChildren() ?? (!local.asChild && createComponent(EdgeIcon, {
                 side: "left"
@@ -170,11 +171,11 @@ function PaginationLastTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pagination-last-trigger",
         get ["class"] () {
             return cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class);
         }
     }, others, {
+        "data-slot": "pagination-last-trigger",
         get children () {
             return resolvedChildren() ?? (!local.asChild && createComponent(EdgeIcon, {
                 side: "right"

package/dist/components/pagination/Pagination.jsx

@@ -8,7 +8,7 @@ function PaginationRoot(props) {
         'children',
         'class'
     ]);
-    return <Pagination.Root asChild={local.asChild} data-slot="pagination-root" class={cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class)} {...others}>
+    return <Pagination.Root asChild={local.asChild} class={cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class)} {...others} data-slot="pagination-root">
       {local.children}
     </Pagination.Root>;
 }
@@ -18,7 +18,7 @@ function PaginationRootProvider(props) {
         'children',
         'class'
     ]);
-    return <Pagination.RootProvider asChild={local.asChild} data-slot="pagination-root-provider" class={cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class)} {...others}>
+    return <Pagination.RootProvider asChild={local.asChild} class={cn('inline-flex max-w-full items-center gap-1 overflow-x-auto text-foreground', local.class)} {...others} data-slot="pagination-root-provider">
       {local.children}
     </Pagination.RootProvider>;
 }
@@ -27,7 +27,7 @@ function PaginationItem(props) {
         'asChild',
         'class'
     ]);
-    return <Pagination.Item asChild={local.asChild} data-slot="pagination-item" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+    return <Pagination.Item asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="pagination-item"/>;
 }
 function PaginationEllipsis(props) {
     const [local, others] = splitProps(props, [
@@ -36,7 +36,7 @@ function PaginationEllipsis(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.Ellipsis asChild={local.asChild} data-slot="pagination-ellipsis" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class)} {...others}>
+    return <Pagination.Ellipsis asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', local.class)} {...others} data-slot="pagination-ellipsis">
       {resolvedChildren() ?? (!local.asChild && '...')}
     </Pagination.Ellipsis>;
 }
@@ -53,7 +53,7 @@ function PaginationPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.PrevTrigger asChild={local.asChild} data-slot="pagination-prev-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+    return <Pagination.PrevTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-prev-trigger">
       {resolvedChildren() ?? (!local.asChild && <ChevronLeftIcon/>)}
     </Pagination.PrevTrigger>;
 }
@@ -64,7 +64,7 @@ function PaginationNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.NextTrigger asChild={local.asChild} data-slot="pagination-next-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+    return <Pagination.NextTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-next-trigger">
       {resolvedChildren() ?? (!local.asChild && <ChevronRightIcon/>)}
     </Pagination.NextTrigger>;
 }
@@ -75,7 +75,7 @@ function PaginationFirstTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.FirstTrigger asChild={local.asChild} data-slot="pagination-first-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+    return <Pagination.FirstTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-first-trigger">
       {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="left"/>)}
     </Pagination.FirstTrigger>;
 }
@@ -86,7 +86,7 @@ function PaginationLastTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Pagination.LastTrigger asChild={local.asChild} data-slot="pagination-last-trigger" class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others}>
+    return <Pagination.LastTrigger asChild={local.asChild} class={cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == local.children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', local.class)} {...others} data-slot="pagination-last-trigger">
       {resolvedChildren() ?? (!local.asChild && <EdgeIcon side="right"/>)}
     </Pagination.LastTrigger>;
 }

package/dist/components/password-input/PasswordInput.js

@@ -8,44 +8,48 @@ function PasswordInputRoot(props) {
         'class'
     ]);
     return createComponent(PasswordInput.Root, mergeProps({
-        "data-slot": "password-input-root",
         get ["class"] () {
             return cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "password-input-root"
+    }));
 }
 function PasswordInputRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(PasswordInput.RootProvider, mergeProps({
-        "data-slot": "password-input-root-provider",
         get ["class"] () {
             return cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "password-input-root-provider"
+    }));
 }
 function PasswordInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(PasswordInput.Label, mergeProps({
-        "data-slot": "password-input-label",
         get ["class"] () {
             return cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "password-input-label"
+    }));
 }
 function PasswordInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(PasswordInput.Control, mergeProps({
-        "data-slot": "password-input-control",
         get ["class"] () {
             return cn('flex min-h-control-md w-full items-center rounded-md border border-border bg-background pr-2 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "password-input-control"
+    }));
 }
 function PasswordInputInput(props) {
     const [local, others] = splitProps(props, [
@@ -80,11 +84,12 @@ function PasswordInputVisibilityTrigger(props) {
         'class'
     ]);
     return createComponent(PasswordInput.VisibilityTrigger, mergeProps({
-        "data-slot": "password-input-visibility-trigger",
         get ["class"] () {
             return cn('group/password-input-trigger inline-flex size-control-sm min-w-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "password-input-visibility-trigger"
+    }));
 }
 function PasswordInputIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -94,7 +99,6 @@ function PasswordInputIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(PasswordInput.Indicator, mergeProps({
-        "data-slot": "password-input-indicator",
         get ["class"] () {
             return cn("inline-flex items-center justify-center rounded-sm p-1 transition-[background-color,color] duration-200 ease-in-out group-hover/password-input-trigger:bg-muted group-focus-visible/password-input-trigger:bg-muted group-data-[disabled]/password-input-trigger:bg-transparent group-data-[readonly]/password-input-trigger:bg-transparent motion-reduce:transition-none [&>svg:not([class*='size-'])]:size-4", local.class);
         },
@@ -102,6 +106,7 @@ function PasswordInputIndicator(props) {
             return local.fallback ?? createComponent(EyeClosedIcon, {});
         }
     }, others, {
+        "data-slot": "password-input-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(EyeIcon, {});
         }

package/dist/components/password-input/PasswordInput.jsx

@@ -6,25 +6,25 @@ function PasswordInputRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PasswordInput.Root data-slot="password-input-root" class={cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <PasswordInput.Root class={cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="password-input-root"/>;
 }
 function PasswordInputRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PasswordInput.RootProvider data-slot="password-input-root-provider" class={cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <PasswordInput.RootProvider class={cn('flex w-full max-w-none flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="password-input-root-provider"/>;
 }
 function PasswordInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PasswordInput.Label data-slot="password-input-label" class={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class)} {...others}/>;
+    return <PasswordInput.Label class={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', local.class)} {...others} data-slot="password-input-label"/>;
 }
 function PasswordInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PasswordInput.Control data-slot="password-input-control" class={cn('flex min-h-control-md w-full items-center rounded-md border border-border bg-background pr-2 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others}/>;
+    return <PasswordInput.Control class={cn('flex min-h-control-md w-full items-center rounded-md border border-border bg-background pr-2 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others} data-slot="password-input-control"/>;
 }
 function PasswordInputInput(props) {
     const [local, others] = splitProps(props, [
@@ -48,7 +48,7 @@ function PasswordInputVisibilityTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PasswordInput.VisibilityTrigger data-slot="password-input-visibility-trigger" class={cn('group/password-input-trigger inline-flex size-control-sm min-w-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class)} {...others}/>;
+    return <PasswordInput.VisibilityTrigger class={cn('group/password-input-trigger inline-flex size-control-sm min-w-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class)} {...others} data-slot="password-input-visibility-trigger"/>;
 }
 function PasswordInputIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -57,7 +57,7 @@ function PasswordInputIndicator(props) {
         'fallback'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <PasswordInput.Indicator data-slot="password-input-indicator" class={cn("inline-flex items-center justify-center rounded-sm p-1 transition-[background-color,color] duration-200 ease-in-out group-hover/password-input-trigger:bg-muted group-focus-visible/password-input-trigger:bg-muted group-data-[disabled]/password-input-trigger:bg-transparent group-data-[readonly]/password-input-trigger:bg-transparent motion-reduce:transition-none [&>svg:not([class*='size-'])]:size-4", local.class)} fallback={local.fallback ?? <EyeClosedIcon/>} {...others}>
+    return <PasswordInput.Indicator class={cn("inline-flex items-center justify-center rounded-sm p-1 transition-[background-color,color] duration-200 ease-in-out group-hover/password-input-trigger:bg-muted group-focus-visible/password-input-trigger:bg-muted group-data-[disabled]/password-input-trigger:bg-transparent group-data-[readonly]/password-input-trigger:bg-transparent motion-reduce:transition-none [&>svg:not([class*='size-'])]:size-4", local.class)} fallback={local.fallback ?? <EyeClosedIcon/>} {...others} data-slot="password-input-indicator">
       {resolvedChildren() ?? <EyeIcon/>}
     </PasswordInput.Indicator>;
 }

package/dist/components/pin-input/PinInput.js

@@ -3,7 +3,7 @@ import { PinInput, usePinInput, usePinInputContext } from "@ark-ui/solid/pin-inp
 import { For, children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { SeparatorMarkIcon } from "../../internal/icons/ui/Icons.js";
-var _tmpl$ = /*#__PURE__*/ template("<span data-slot=pin-input-separator>");
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 function PinInputRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -22,11 +22,11 @@ function PinInputRoot(props) {
         get placeholder () {
             return local.placeholder ?? '';
         },
-        "data-slot": "pin-input-root",
         get ["class"] () {
             return cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "pin-input-root",
         get children () {
             return local.children;
         }
@@ -42,11 +42,11 @@ function PinInputRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "pin-input-root-provider",
         get ["class"] () {
             return cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "pin-input-root-provider",
         get children () {
             return local.children;
         }
@@ -57,33 +57,36 @@ function PinInputLabel(props) {
         'class'
     ]);
     return createComponent(PinInput.Label, mergeProps({
-        "data-slot": "pin-input-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "pin-input-label"
+    }));
 }
 function PinInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(PinInput.Control, mergeProps({
-        "data-slot": "pin-input-control",
         get ["class"] () {
             return cn('inline-flex items-center gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "pin-input-control"
+    }));
 }
 function PinInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(PinInput.Input, mergeProps({
-        "data-slot": "pin-input-input",
         get ["class"] () {
             return cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "pin-input-input"
+    }));
 }
 function PinInputInputs(props) {
     const pinInput = usePinInputContext();
@@ -119,7 +122,9 @@ function PinInputSeparator(props) {
             get ["class"] () {
                 return cn('pointer-events-none inline-flex size-4 flex-none items-center justify-center leading-none text-muted-foreground [&>svg]:size-full [&>svg]:flex-none', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "pin-input-separator"
+        }), false, true);
         insert(_el$, ()=>resolvedChildren() ?? createComponent(SeparatorMarkIcon, {}));
         return _el$;
     })();

package/dist/components/pin-input/PinInput.jsx

@@ -10,7 +10,7 @@ function PinInputRoot(props) {
         'count',
         'placeholder'
     ]);
-    return <PinInput.Root asChild={local.asChild} count={local.count} placeholder={local.placeholder ?? ''} data-slot="pin-input-root" class={cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class)} {...others}>
+    return <PinInput.Root asChild={local.asChild} count={local.count} placeholder={local.placeholder ?? ''} class={cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class)} {...others} data-slot="pin-input-root">
       {local.children}
     </PinInput.Root>;
 }
@@ -20,7 +20,7 @@ function PinInputRootProvider(props) {
         'children',
         'class'
     ]);
-    return <PinInput.RootProvider asChild={local.asChild} data-slot="pin-input-root-provider" class={cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class)} {...others}>
+    return <PinInput.RootProvider asChild={local.asChild} class={cn('inline-flex w-auto max-w-none flex-col items-start gap-2 data-disabled:opacity-50', local.class)} {...others} data-slot="pin-input-root-provider">
       {local.children}
     </PinInput.RootProvider>;
 }
@@ -28,19 +28,19 @@ function PinInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PinInput.Label data-slot="pin-input-label" class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others}/>;
+    return <PinInput.Label class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others} data-slot="pin-input-label"/>;
 }
 function PinInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PinInput.Control data-slot="pin-input-control" class={cn('inline-flex items-center gap-2', local.class)} {...others}/>;
+    return <PinInput.Control class={cn('inline-flex items-center gap-2', local.class)} {...others} data-slot="pin-input-control"/>;
 }
 function PinInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <PinInput.Input data-slot="pin-input-input" class={cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} {...others}/>;
+    return <PinInput.Input class={cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="pin-input-input"/>;
 }
 function PinInputInputs(props) {
     const pinInput = usePinInputContext();
@@ -56,7 +56,7 @@ function PinInputSeparator(props) {
         'role'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <span data-slot="pin-input-separator" aria-hidden={local['aria-hidden'] ?? true} role={local.role ?? 'presentation'} class={cn('pointer-events-none inline-flex size-4 flex-none items-center justify-center leading-none text-muted-foreground [&>svg]:size-full [&>svg]:flex-none', local.class)} {...others}>
+    return <span aria-hidden={local['aria-hidden'] ?? true} role={local.role ?? 'presentation'} class={cn('pointer-events-none inline-flex size-4 flex-none items-center justify-center leading-none text-muted-foreground [&>svg]:size-full [&>svg]:flex-none', local.class)} {...others} data-slot="pin-input-separator">
       {resolvedChildren() ?? <SeparatorMarkIcon/>}
     </span>;
 }