@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/bleed/Bleed.js

@@ -3,7 +3,7 @@ import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-const bleedVariants = cva('m-0 box-border', {
+const bleedVariants = cva('', {
     variants: {
         inline: {
             none: null,

package/dist/components/bleed/Bleed.jsx

@@ -2,7 +2,7 @@ import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
-const bleedVariants = cva('m-0 box-border', {
+const bleedVariants = cva('', {
     variants: {
         inline: {
             none: null,

package/dist/components/button/Button.js

@@ -1,10 +1,9 @@
 import { createComponent, memo, mergeProps } from "solid-js/web";
-import { useFocusVisible } from "@ark-ui/solid";
 import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium no-underline outline-0 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-loading:cursor-progress motion-reduce:transition-none motion-safe:[&:not([data-variant='link']):active]:translate-y-px [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-2 [&:focus[data-focus-visible]]:outline-ring [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", {
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium no-underline outline-0 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-loading:cursor-progress motion-reduce:transition-none motion-safe:[&:not([data-variant='link']):active]:translate-y-px focus-visible:-outline-offset-1 focus-visible:outline-2 focus-visible:outline-ring [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", {
     variants: {
         variant: {
             default: 'border-primary bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,black)]',
@@ -39,7 +38,6 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
 });
 const ArkButton = ark.button;
 function ButtonRoot(props) {
-    const focusVisible = useFocusVisible();
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
@@ -104,9 +102,6 @@ function ButtonRoot(props) {
         get ["data-disabled"] () {
             return isDisabled() ? '' : void 0;
         },
-        get ["data-focus-visible"] () {
-            return focusVisible() ? '' : void 0;
-        },
         get ["data-loading"] () {
             return local.loading ? '' : void 0;
         },

package/dist/components/button/Button.jsx

@@ -1,9 +1,8 @@
-import { useFocusVisible } from "@ark-ui/solid";
 import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
-const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium no-underline outline-0 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-loading:cursor-progress motion-reduce:transition-none motion-safe:[&:not([data-variant='link']):active]:translate-y-px [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-2 [&:focus[data-focus-visible]]:outline-ring [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", {
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium no-underline outline-0 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-loading:cursor-progress motion-reduce:transition-none motion-safe:[&:not([data-variant='link']):active]:translate-y-px focus-visible:-outline-offset-1 focus-visible:outline-2 focus-visible:outline-ring [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", {
     variants: {
         variant: {
             default: 'border-primary bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,black)]',
@@ -38,7 +37,6 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
 });
 const ArkButton = ark.button;
 function ButtonRoot(props) {
-    const focusVisible = useFocusVisible();
     const [local, others] = splitProps(props, [
         'asChild',
         'class',
@@ -64,7 +62,7 @@ function ButtonRoot(props) {
         }
         local.onClickCapture?.(event);
     };
-    return <ArkButton asChild={local.asChild} {...others} type={local.asChild ? local.type : local.type ?? 'button'} disabled={local.asChild ? void 0 : isDisabled()} aria-busy={local.loading ? true : local['aria-busy']} aria-disabled={isDisabled() ? true : local['aria-disabled']} oncapture:click={handleClickCapture} onClick={local.onClick} data-scope={local['data-scope'] ?? 'button'} data-part={local['data-part'] ?? 'root'} data-slot={local['data-slot'] ?? 'button-root'} data-variant={local.variant ?? 'default'} data-size={local.size ?? 'md'} data-disabled={isDisabled() ? '' : void 0} data-focus-visible={focusVisible() ? '' : void 0} data-loading={local.loading ? '' : void 0} class={cn(buttonVariants({
+    return <ArkButton asChild={local.asChild} {...others} type={local.asChild ? local.type : local.type ?? 'button'} disabled={local.asChild ? void 0 : isDisabled()} aria-busy={local.loading ? true : local['aria-busy']} aria-disabled={isDisabled() ? true : local['aria-disabled']} oncapture:click={handleClickCapture} onClick={local.onClick} data-scope={local['data-scope'] ?? 'button'} data-part={local['data-part'] ?? 'root'} data-slot={local['data-slot'] ?? 'button-root'} data-variant={local.variant ?? 'default'} data-size={local.size ?? 'md'} data-disabled={isDisabled() ? '' : void 0} data-loading={local.loading ? '' : void 0} class={cn(buttonVariants({
         variant: local.variant,
         size: local.size
     }), local.class)}/>;

package/dist/components/card/Card.js

@@ -3,7 +3,7 @@ import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
+const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,summary,audio[controls],video[controls],iframe,[contenteditable=true],[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,summary,audio[controls],video[controls],iframe,[contenteditable=true],[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
     variants: {
         variant: {
             elevated: 'border-0 bg-card shadow-md',
@@ -26,21 +26,22 @@ function CardRoot(props) {
         get asChild () {
             return local.asChild;
         },
+        get ["class"] () {
+            return cn(cardRootVariants({
+                variant: local.variant
+            }), local.class);
+        }
+    }, others, {
         "data-scope": "card",
         "data-part": "root",
-        "data-slot": "card-root",
         get ["data-size"] () {
             return local.size ?? 'md';
         },
         get ["data-variant"] () {
             return local.variant ?? 'outline';
         },
-        get ["class"] () {
-            return cn(cardRootVariants({
-                variant: local.variant
-            }), local.class);
-        }
-    }, others));
+        "data-slot": "card-root"
+    }));
 }
 function CardHeader(props) {
     const [local, others] = splitProps(props, [
@@ -51,13 +52,14 @@ function CardHeader(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "header",
-        "data-slot": "card-header",
         get ["class"] () {
             return cn('grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1 px-6 pt-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pt-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "header",
+        "data-slot": "card-header"
+    }));
 }
 function CardBody(props) {
     const [local, others] = splitProps(props, [
@@ -68,13 +70,14 @@ function CardBody(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "body",
-        "data-slot": "card-body",
         get ["class"] () {
             return cn('min-w-0 px-6 pt-4 pb-6 text-sm wrap-anywhere text-muted-foreground group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 first:pt-6 group-data-[size=lg]/card:first:pt-8 group-data-[size=sm]/card:first:pt-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "body",
+        "data-slot": "card-body"
+    }));
 }
 function CardMedia(props) {
     const [local, others] = splitProps(props, [
@@ -85,13 +88,14 @@ function CardMedia(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "media",
-        "data-slot": "card-media",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden rounded-ss-[inherit] rounded-se-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:w-full [&>picture]:block [&>picture>img]:w-full', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "media",
+        "data-slot": "card-media"
+    }));
 }
 function CardBackground(props) {
     const [local, others] = splitProps(props, [
@@ -102,13 +106,14 @@ function CardBackground(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "background",
-        "data-slot": "card-background",
         get ["class"] () {
             return cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:size-full [&>:is(img,picture,video,canvas,svg,iframe)]:object-cover [&>picture]:block [&>picture>img]:size-full [&>picture>img]:object-cover', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "background",
+        "data-slot": "card-background"
+    }));
 }
 function CardFooter(props) {
     const [local, others] = splitProps(props, [
@@ -119,13 +124,14 @@ function CardFooter(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "footer",
-        "data-slot": "card-footer",
         get ["class"] () {
             return cn('flex min-w-0 flex-wrap items-center gap-2 px-6 pb-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "footer",
+        "data-slot": "card-footer"
+    }));
 }
 function CardTitle(props) {
     const [local, others] = splitProps(props, [
@@ -136,13 +142,14 @@ function CardTitle(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "title",
-        "data-slot": "card-title",
         get ["class"] () {
             return cn('col-start-1 min-w-0 text-lg font-semibold wrap-anywhere group-data-[size=lg]/card:text-xl group-data-[size=sm]/card:text-md', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "title",
+        "data-slot": "card-title"
+    }));
 }
 function CardDescription(props) {
     const [local, others] = splitProps(props, [
@@ -153,13 +160,14 @@ function CardDescription(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "description",
-        "data-slot": "card-description",
         get ["class"] () {
             return cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "description",
+        "data-slot": "card-description"
+    }));
 }
 function CardAction(props) {
     const [local, others] = splitProps(props, [
@@ -170,13 +178,14 @@ function CardAction(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "action",
-        "data-slot": "card-action",
         get ["class"] () {
             return cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "action",
+        "data-slot": "card-action"
+    }));
 }
 function CardLink(props) {
     const [local, others] = splitProps(props, [
@@ -187,13 +196,14 @@ function CardLink(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-scope": "card",
-        "data-part": "link",
-        "data-slot": "card-link",
         get ["class"] () {
             return cn('static text-inherit no-underline after:absolute after:inset-0 after:z-0 after:rounded-lg focus-visible:outline-0 focus-visible:after:outline-2 focus-visible:after:outline-offset-1 focus-visible:after:outline-ring', local.class);
         }
-    }, others));
+    }, others, {
+        "data-scope": "card",
+        "data-part": "link",
+        "data-slot": "card-link"
+    }));
 }
 const Card = Object.assign(CardRoot, {
     Root: CardRoot,

package/dist/components/card/Card.jsx

@@ -2,7 +2,7 @@ import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
-const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
+const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,summary,audio[controls],video[controls],iframe,[contenteditable=true],[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,summary,audio[controls],video[controls],iframe,[contenteditable=true],[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
     variants: {
         variant: {
             elevated: 'border-0 bg-card shadow-md',
@@ -21,72 +21,72 @@ function CardRoot(props) {
         'size',
         'variant'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="root" data-slot="card-root" data-size={local.size ?? 'md'} data-variant={local.variant ?? 'outline'} class={cn(cardRootVariants({
+    return <ark.div asChild={local.asChild} class={cn(cardRootVariants({
         variant: local.variant
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-scope="card" data-part="root" data-size={local.size ?? 'md'} data-variant={local.variant ?? 'outline'} data-slot="card-root"/>;
 }
 function CardHeader(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="header" data-slot="card-header" class={cn('grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1 px-6 pt-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pt-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={cn('grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1 px-6 pt-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pt-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4', local.class)} {...others} data-scope="card" data-part="header" data-slot="card-header"/>;
 }
 function CardBody(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="body" data-slot="card-body" class={cn('min-w-0 px-6 pt-4 pb-6 text-sm wrap-anywhere text-muted-foreground group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 first:pt-6 group-data-[size=lg]/card:first:pt-8 group-data-[size=sm]/card:first:pt-4', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={cn('min-w-0 px-6 pt-4 pb-6 text-sm wrap-anywhere text-muted-foreground group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 first:pt-6 group-data-[size=lg]/card:first:pt-8 group-data-[size=sm]/card:first:pt-4', local.class)} {...others} data-scope="card" data-part="body" data-slot="card-body"/>;
 }
 function CardMedia(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="media" data-slot="card-media" class={cn('min-w-0 overflow-hidden rounded-ss-[inherit] rounded-se-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:w-full [&>picture]:block [&>picture>img]:w-full', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={cn('min-w-0 overflow-hidden rounded-ss-[inherit] rounded-se-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:w-full [&>picture]:block [&>picture>img]:w-full', local.class)} {...others} data-scope="card" data-part="media" data-slot="card-media"/>;
 }
 function CardBackground(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="background" data-slot="card-background" class={cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:size-full [&>:is(img,picture,video,canvas,svg,iframe)]:object-cover [&>picture]:block [&>picture>img]:size-full [&>picture>img]:object-cover', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:size-full [&>:is(img,picture,video,canvas,svg,iframe)]:object-cover [&>picture]:block [&>picture>img]:size-full [&>picture>img]:object-cover', local.class)} {...others} data-scope="card" data-part="background" data-slot="card-background"/>;
 }
 function CardFooter(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="footer" data-slot="card-footer" class={cn('flex min-w-0 flex-wrap items-center gap-2 px-6 pb-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={cn('flex min-w-0 flex-wrap items-center gap-2 px-6 pb-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4', local.class)} {...others} data-scope="card" data-part="footer" data-slot="card-footer"/>;
 }
 function CardTitle(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.h3 asChild={local.asChild} data-scope="card" data-part="title" data-slot="card-title" class={cn('col-start-1 min-w-0 text-lg font-semibold wrap-anywhere group-data-[size=lg]/card:text-xl group-data-[size=sm]/card:text-md', local.class)} {...others}/>;
+    return <ark.h3 asChild={local.asChild} class={cn('col-start-1 min-w-0 text-lg font-semibold wrap-anywhere group-data-[size=lg]/card:text-xl group-data-[size=sm]/card:text-md', local.class)} {...others} data-scope="card" data-part="title" data-slot="card-title"/>;
 }
 function CardDescription(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.p asChild={local.asChild} data-scope="card" data-part="description" data-slot="card-description" class={cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', local.class)} {...others}/>;
+    return <ark.p asChild={local.asChild} class={cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', local.class)} {...others} data-scope="card" data-part="description" data-slot="card-description"/>;
 }
 function CardAction(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.div asChild={local.asChild} data-scope="card" data-part="action" data-slot="card-action" class={cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', local.class)} {...others}/>;
+    return <ark.div asChild={local.asChild} class={cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', local.class)} {...others} data-scope="card" data-part="action" data-slot="card-action"/>;
 }
 function CardLink(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <ark.a asChild={local.asChild} data-scope="card" data-part="link" data-slot="card-link" class={cn('static text-inherit no-underline after:absolute after:inset-0 after:z-0 after:rounded-lg focus-visible:outline-0 focus-visible:after:outline-2 focus-visible:after:outline-offset-1 focus-visible:after:outline-ring', local.class)} {...others}/>;
+    return <ark.a asChild={local.asChild} class={cn('static text-inherit no-underline after:absolute after:inset-0 after:z-0 after:rounded-lg focus-visible:outline-0 focus-visible:after:outline-2 focus-visible:after:outline-offset-1 focus-visible:after:outline-ring', local.class)} {...others} data-scope="card" data-part="link" data-slot="card-link"/>;
 }
 const Card = Object.assign(CardRoot, {
     Root: CardRoot,

package/dist/components/carousel/Carousel.d.ts

@@ -9,7 +9,7 @@ declare function CarouselPrevTrigger(props: ComponentProps<typeof CarouselPrimit
 declare function CarouselNextTrigger(props: ComponentProps<typeof CarouselPrimitive.NextTrigger>): import("solid-js").JSX.Element;
 declare function CarouselIndicatorGroup(props: ComponentProps<typeof CarouselPrimitive.IndicatorGroup>): import("solid-js").JSX.Element;
 declare function CarouselIndicator(props: ComponentProps<typeof CarouselPrimitive.Indicator>): import("solid-js").JSX.Element;
-type CarouselIndicatorsProps = ComponentProps<typeof CarouselPrimitive.IndicatorGroup> & {
+type CarouselIndicatorsProps = Omit<ComponentProps<typeof CarouselPrimitive.IndicatorGroup>, 'asChild' | 'children'> & {
     indicatorClassName?: string;
 };
 declare function CarouselIndicators(props: CarouselIndicatorsProps): import("solid-js").JSX.Element;

package/dist/components/carousel/Carousel.js

@@ -9,55 +9,60 @@ function CarouselRoot(props) {
         'class'
     ]);
     return createComponent(Carousel.Root, mergeProps({
-        "data-slot": "carousel-root",
         get ["class"] () {
             return cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-root"
+    }));
 }
 function CarouselRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.RootProvider, mergeProps({
-        "data-slot": "carousel-root-provider",
         get ["class"] () {
             return cn('group/carousel flex w-full min-w-0 flex-col gap-3 data-[orientation=vertical]:h-96 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-root-provider"
+    }));
 }
 function CarouselControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.Control, mergeProps({
-        "data-slot": "carousel-control",
         get ["class"] () {
             return cn('flex min-w-0 items-center gap-3 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-control"
+    }));
 }
 function CarouselItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.ItemGroup, mergeProps({
-        "data-slot": "carousel-item-group",
         get ["class"] () {
             return cn('flex min-h-0 min-w-0 flex-1 [scrollbar-width:none] overscroll-x-contain overscroll-y-auto scroll-smooth rounded-xl outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring data-dragging:cursor-grabbing data-dragging:select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:overscroll-x-auto data-[orientation=vertical]:overscroll-y-contain motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-item-group"
+    }));
 }
 function CarouselItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.Item, mergeProps({
-        "data-slot": "carousel-item",
         get ["class"] () {
             return cn('box-border min-h-0 min-w-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-item"
+    }));
 }
 function CarouselPrevTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -70,11 +75,11 @@ function CarouselPrevTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "carousel-prev-trigger",
         get ["class"] () {
             return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
         }
     }, others, {
+        "data-slot": "carousel-prev-trigger",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$ = _tmpl$();
@@ -97,11 +102,11 @@ function CarouselNextTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "carousel-next-trigger",
         get ["class"] () {
             return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
         }
     }, others, {
+        "data-slot": "carousel-next-trigger",
         get children () {
             return resolvedChildren() ?? (()=>{
                 var _el$2 = _tmpl$();
@@ -118,27 +123,28 @@ function CarouselIndicatorGroup(props) {
         'class'
     ]);
     return createComponent(Carousel.IndicatorGroup, mergeProps({
-        "data-slot": "carousel-indicator-group",
         get ["class"] () {
             return cn('flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-indicator-group"
+    }));
 }
 function CarouselIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.Indicator, mergeProps({
-        "data-slot": "carousel-indicator",
         get ["class"] () {
             return cn('focus-visible:outline-offset-0.5 size-2 cursor-pointer rounded-full border-0 bg-muted p-0 opacity-90 transition-[width,height,background-color,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-current:w-6 data-current:bg-primary data-current:opacity-100 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-not-allowed data-readonly:opacity-50 data-[orientation=vertical]:data-current:h-6 data-[orientation=vertical]:data-current:w-2 motion-reduce:transition-none forced-colors:bg-[ButtonText] forced-colors:data-current:bg-[Highlight] [&:not(:disabled):not([data-disabled]):not([data-readonly]):not([data-current]):hover]:bg-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-indicator"
+    }));
 }
 function CarouselIndicators(props) {
     const [local, others] = splitProps(props, [
         'class',
-        'children',
         'indicatorClassName'
     ]);
     return createComponent(Carousel.Context, {
@@ -170,34 +176,37 @@ function CarouselAutoplayTrigger(props) {
         'class'
     ]);
     return createComponent(Carousel.AutoplayTrigger, mergeProps({
-        "data-slot": "carousel-autoplay-trigger",
         get ["class"] () {
             return cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-autoplay-trigger"
+    }));
 }
 function CarouselAutoplayIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.AutoplayIndicator, mergeProps({
-        "data-slot": "carousel-autoplay-indicator",
         get ["class"] () {
             return cn('inline-flex min-w-4 items-center justify-center text-xs font-medium uppercase', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-autoplay-indicator"
+    }));
 }
 function CarouselProgressText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Carousel.ProgressText, mergeProps({
-        "data-slot": "carousel-progress-text",
         dir: "ltr",
         get ["class"] () {
             return cn('text-sm text-muted-foreground tabular-nums [unicode-bidi:isolate]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "carousel-progress-text"
+    }));
 }
 const Carousel_Carousel = Object.assign(CarouselRoot, {
     Root: CarouselRoot,