@moduix/react-tailwind 1.0.0 → 1.1.0

package/dist/components/accordion/Accordion.js

@@ -8,50 +8,50 @@ import { PlusIcon } from "../../internal/icons/ui/index.js";
 const Accordion_AccordionRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Accordion.Root, {
         ref: ref,
-        "data-slot": "accordion-root",
         className: cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', className),
-        ...props
+        ...props,
+        "data-slot": "accordion-root"
     });
 });
 const Accordion_AccordionRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Accordion.RootProvider, {
         ref: ref,
-        "data-slot": "accordion-root-provider",
         className: cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', className),
-        ...props
+        ...props,
+        "data-slot": "accordion-root-provider"
     });
 });
 const Accordion_AccordionItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Accordion.Item, {
         ref: ref,
-        "data-slot": "accordion-item",
         className: cn("[overflow-anchor:none] data-[orientation=horizontal]:flex [&[data-orientation='horizontal']:not(:last-child)]:border-e [&[data-orientation='horizontal']:not(:last-child)]:border-border [&[data-orientation='vertical']:not(:last-child)]:border-b [&[data-orientation='vertical']:not(:last-child)]:border-border", className),
-        ...props
+        ...props,
+        "data-slot": "accordion-item"
     });
 });
 const Accordion_AccordionItemTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Accordion.ItemTrigger, {
         ref: ref,
-        "data-slot": "accordion-item-trigger",
         className: cn('flex w-full cursor-pointer items-center justify-between gap-4 bg-muted px-3 py-2 text-start text-md outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[orientation=horizontal]:h-full data-[orientation=horizontal]:w-10 data-[orientation=horizontal]:justify-center data-[orientation=horizontal]:[writing-mode:sideways-lr] motion-reduce:transition-none [&:not([data-disabled]):active]:bg-accent [&:not([data-disabled]):hover]:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "accordion-item-trigger"
     });
 });
 const Accordion_AccordionItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Accordion.ItemIndicator, {
         ref: ref,
-        "data-slot": "accordion-item-indicator",
         className: cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-[state=open]:scale-110 data-[state=open]:rotate-45 motion-reduce:transition-none [&_svg]:size-full', className),
         ...props,
+        "data-slot": "accordion-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(PlusIcon, {})
     });
 });
 const Accordion_AccordionItemContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Accordion.ItemContent, {
         ref: ref,
-        "data-slot": "accordion-item-content",
         className: cn("overflow-hidden text-md text-muted-foreground data-[state=closed]:data-[orientation=horizontal]:animate-moduix-accordion-closed-horizontal data-[state=closed]:data-[orientation=vertical]:animate-moduix-accordion-closed data-[state=open]:data-[orientation=horizontal]:animate-moduix-accordion-open-horizontal data-[state=open]:data-[orientation=vertical]:animate-moduix-accordion-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] data-[orientation=horizontal]:[&>*]:w-64 [&[hidden]:not([hidden='until-found'])]:hidden", className),
-        ...props
+        ...props,
+        "data-slot": "accordion-item-content"
     });
 });
 const Accordion_AccordionItemBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -59,9 +59,9 @@ const Accordion_AccordionItemBody = /*#__PURE__*/ forwardRef(function({ classNam
         ref: ref,
         "data-scope": "accordion",
         "data-part": "item-body",
-        "data-slot": "accordion-item-body",
         className: cn('grid min-w-0 gap-3 p-3', className),
-        ...props
+        ...props,
+        "data-slot": "accordion-item-body"
     });
 });
 const Accordion_Accordion = Object.assign(Accordion_AccordionRoot, {

package/dist/components/alert/Alert.js

@@ -19,15 +19,15 @@ const alertVariants = cva('group/alert box-border flex w-full min-w-0 items-star
 const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className, role, status = 'info', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        role: role ?? ('error' === status ? 'alert' : 'status'),
+        role: role,
         "data-scope": "alert",
         "data-part": "root",
-        "data-slot": "alert-root",
         "data-status": status,
         className: cn(alertVariants({
             status
         }), className),
         ...props,
+        "data-slot": "alert-root",
         children: children
     });
 });
@@ -36,10 +36,10 @@ const Alert_AlertIndicator = /*#__PURE__*/ forwardRef(function({ className, ...p
         ref: ref,
         "data-scope": "alert",
         "data-part": "indicator",
-        "data-slot": "alert-indicator",
         "aria-hidden": "true",
         className: cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', className),
-        ...props
+        ...props,
+        "data-slot": "alert-indicator"
     });
 });
 const Alert_AlertContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -47,9 +47,9 @@ const Alert_AlertContent = /*#__PURE__*/ forwardRef(function({ className, ...pro
         ref: ref,
         "data-scope": "alert",
         "data-part": "content",
-        "data-slot": "alert-content",
         className: cn('grid min-w-0 flex-1 gap-1', className),
-        ...props
+        ...props,
+        "data-slot": "alert-content"
     });
 });
 const Alert_AlertTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -57,9 +57,9 @@ const Alert_AlertTitle = /*#__PURE__*/ forwardRef(function({ className, ...props
         ref: ref,
         "data-scope": "alert",
         "data-part": "title",
-        "data-slot": "alert-title",
         className: cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', className),
-        ...props
+        ...props,
+        "data-slot": "alert-title"
     });
 });
 const Alert_AlertDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -67,9 +67,9 @@ const Alert_AlertDescription = /*#__PURE__*/ forwardRef(function({ className, ..
         ref: ref,
         "data-scope": "alert",
         "data-part": "description",
-        "data-slot": "alert-description",
         className: cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', className),
-        ...props
+        ...props,
+        "data-slot": "alert-description"
     });
 });
 const Alert_AlertActions = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -77,9 +77,9 @@ const Alert_AlertActions = /*#__PURE__*/ forwardRef(function({ className, ...pro
         ref: ref,
         "data-scope": "alert",
         "data-part": "actions",
-        "data-slot": "alert-actions",
         className: cn('mt-2 flex flex-wrap gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "alert-actions"
     });
 });
 const Alert = Object.assign(Alert_AlertRoot, {

package/dist/components/angle-slider/AngleSlider.js

@@ -6,62 +6,62 @@ import { cn } from "../../internal/cn.js";
 const AngleSlider_AngleSliderRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Root, {
         ref: ref,
-        "data-slot": "angle-slider-root",
         className: cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "angle-slider-root"
     });
 });
 const AngleSlider_AngleSliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Label, {
         ref: ref,
-        "data-slot": "angle-slider-label",
         className: cn('text-center text-sm font-medium text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "angle-slider-label"
     });
 });
 const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({ className, value, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.RootProvider, {
         ref: ref,
-        "data-slot": "angle-slider-root-provider",
         className: cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', className),
         value: value,
-        ...props
+        ...props,
+        "data-slot": "angle-slider-root-provider"
     });
 });
 const AngleSlider_AngleSliderControl = /*#__PURE__*/ forwardRef(function({ className, onPointerDown, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Control, {
         ref: ref,
-        "data-slot": "angle-slider-control",
         className: cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", className),
         onPointerDown: (event)=>{
             onPointerDown?.(event);
             event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
         },
-        ...props
+        ...props,
+        "data-slot": "angle-slider-control"
     });
 });
 const AngleSlider_AngleSliderThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Thumb, {
         ref: ref,
-        "data-slot": "angle-slider-thumb",
         className: cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", className),
-        ...props
+        ...props,
+        "data-slot": "angle-slider-thumb"
     });
 });
 const AngleSlider_AngleSliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.MarkerGroup, {
         ref: ref,
-        "data-slot": "angle-slider-marker-group",
         className: cn('pointer-events-none absolute inset-0 z-1', className),
-        ...props
+        ...props,
+        "data-slot": "angle-slider-marker-group"
     });
 });
 const AngleSlider_AngleSliderMarker = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Marker, {
         ref: ref,
-        "data-slot": "angle-slider-marker",
         className: cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", className),
-        ...props
+        ...props,
+        "data-slot": "angle-slider-marker"
     });
 });
 function AngleSliderMarks({ values, ...props }) {
@@ -84,9 +84,9 @@ function AngleSliderDial({ children, ...props }) {
 const AngleSlider_AngleSliderValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.ValueText, {
         ref: ref,
-        "data-slot": "angle-slider-value-text",
         className: cn('text-center text-sm font-medium text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "angle-slider-value-text"
     });
 });
 const AngleSlider_AngleSlider = Object.assign(AngleSlider_AngleSliderRoot, {

package/dist/components/avatar/Avatar.js

@@ -20,39 +20,39 @@ const avatarVariants = cva('relative inline-flex shrink-0 items-center justify-c
 const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.Root, {
         ref: ref,
-        "data-slot": "avatar-root",
         "data-size": size,
         className: cn(avatarVariants({
             size
         }), className),
-        ...props
+        ...props,
+        "data-slot": "avatar-root"
     });
 });
 const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.RootProvider, {
         ref: ref,
-        "data-slot": "avatar-root-provider",
         "data-size": size,
         className: cn(avatarVariants({
             size
         }), className),
-        ...props
+        ...props,
+        "data-slot": "avatar-root-provider"
     });
 });
 const Avatar_AvatarImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.Image, {
         ref: ref,
-        "data-slot": "avatar-image",
         className: cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', className),
-        ...props
+        ...props,
+        "data-slot": "avatar-image"
     });
 });
 const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.Fallback, {
         ref: ref,
-        "data-slot": "avatar-fallback",
         className: cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', className),
         ...props,
+        "data-slot": "avatar-fallback",
         children: children
     });
 });

package/dist/components/bleed/Bleed.js

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

package/dist/components/card/Card.js

@@ -4,7 +4,7 @@ import { ark } from "@ark-ui/react/factory";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 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',
@@ -19,105 +19,105 @@ const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col r
 const Card_CardRoot = /*#__PURE__*/ forwardRef(function({ className, size, variant, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: cn(cardRootVariants({
+            variant
+        }), className),
+        ...props,
         "data-scope": "card",
         "data-part": "root",
-        "data-slot": "card-root",
         "data-size": size ?? 'md',
         "data-variant": variant ?? 'outline',
-        className: cn(cardRootVariants({
-            variant
-        }), className),
-        ...props
+        "data-slot": "card-root"
     });
 });
 const Card_CardHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "header",
-        "data-slot": "card-header",
-        className: 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', className),
-        ...props
+        "data-slot": "card-header"
     });
 });
 const Card_CardBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "body",
-        "data-slot": "card-body",
-        className: 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', className),
-        ...props
+        "data-slot": "card-body"
     });
 });
 const Card_CardMedia = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "media",
-        "data-slot": "card-media",
-        className: 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', className),
-        ...props
+        "data-slot": "card-media"
     });
 });
 const Card_CardBackground = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "background",
-        "data-slot": "card-background",
-        className: 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', className),
-        ...props
+        "data-slot": "card-background"
     });
 });
 const Card_CardFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "footer",
-        "data-slot": "card-footer",
-        className: 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', className),
-        ...props
+        "data-slot": "card-footer"
     });
 });
 const Card_CardTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.h3, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "title",
-        "data-slot": "card-title",
-        className: 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', className),
-        ...props
+        "data-slot": "card-title"
     });
 });
 const Card_CardDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.p, {
         ref: ref,
+        className: cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', className),
+        ...props,
         "data-scope": "card",
         "data-part": "description",
-        "data-slot": "card-description",
-        className: cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', className),
-        ...props
+        "data-slot": "card-description"
     });
 });
 const Card_CardAction = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
+        className: cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', className),
+        ...props,
         "data-scope": "card",
         "data-part": "action",
-        "data-slot": "card-action",
-        className: cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', className),
-        ...props
+        "data-slot": "card-action"
     });
 });
 const Card_CardLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.a, {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-scope": "card",
         "data-part": "link",
-        "data-slot": "card-link",
-        className: 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', className),
-        ...props
+        "data-slot": "card-link"
     });
 });
 const Card = Object.assign(Card_CardRoot, {

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

@@ -10,7 +10,7 @@ declare const Carousel: import("react").ForwardRefExoticComponent<Omit<CarouselP
     NextTrigger: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     IndicatorGroup: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Indicator: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.IndicatorProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Indicators: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement> & {
+    Indicators: import("react").ForwardRefExoticComponent<Omit<Omit<CarouselPrimitive.IndicatorGroupProps & import("react").RefAttributes<HTMLDivElement>, "asChild" | "children"> & {
         indicatorClassName?: string;
     }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     AutoplayTrigger: import("react").ForwardRefExoticComponent<Omit<CarouselPrimitive.AutoplayTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/carousel/Carousel.js

@@ -7,49 +7,49 @@ import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons/ui/index
 const Carousel_CarouselRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.Root, {
         ref: ref,
-        "data-slot": "carousel-root",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-root"
     });
 });
 const Carousel_CarouselRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.RootProvider, {
         ref: ref,
-        "data-slot": "carousel-root-provider",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-root-provider"
     });
 });
 const Carousel_CarouselControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.Control, {
         ref: ref,
-        "data-slot": "carousel-control",
         className: cn('flex min-w-0 items-center gap-3 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-control"
     });
 });
 const Carousel_CarouselItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.ItemGroup, {
         ref: ref,
-        "data-slot": "carousel-item-group",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-item-group"
     });
 });
 const Carousel_CarouselItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.Item, {
         ref: ref,
-        "data-slot": "carousel-item",
         className: cn('box-border min-h-0 min-w-0', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-item"
     });
 });
 const Carousel_CarouselPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.PrevTrigger, {
         ref: ref,
-        "data-slot": "carousel-prev-trigger",
         className: 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', className),
         ...props,
+        "data-slot": "carousel-prev-trigger",
         children: children ?? /*#__PURE__*/ jsx("span", {
             className: "inline-flex items-center justify-center",
             children: /*#__PURE__*/ jsx(ChevronLeftIcon, {
@@ -61,9 +61,9 @@ const Carousel_CarouselPrevTrigger = /*#__PURE__*/ forwardRef(function({ classNa
 const Carousel_CarouselNextTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.NextTrigger, {
         ref: ref,
-        "data-slot": "carousel-next-trigger",
         className: 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', className),
         ...props,
+        "data-slot": "carousel-next-trigger",
         children: children ?? /*#__PURE__*/ jsx("span", {
             className: "inline-flex items-center justify-center",
             children: /*#__PURE__*/ jsx(ChevronRightIcon, {
@@ -75,17 +75,17 @@ const Carousel_CarouselNextTrigger = /*#__PURE__*/ forwardRef(function({ classNa
 const Carousel_CarouselIndicatorGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.IndicatorGroup, {
         ref: ref,
-        "data-slot": "carousel-indicator-group",
         className: cn('flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-indicator-group"
     });
 });
 const Carousel_CarouselIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.Indicator, {
         ref: ref,
-        "data-slot": "carousel-indicator",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-indicator"
     });
 });
 const Carousel_CarouselIndicators = /*#__PURE__*/ forwardRef(function({ className, indicatorClassName, ...props }, ref) {
@@ -104,26 +104,26 @@ const Carousel_CarouselIndicators = /*#__PURE__*/ forwardRef(function({ classNam
 const Carousel_CarouselAutoplayTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.AutoplayTrigger, {
         ref: ref,
-        "data-slot": "carousel-autoplay-trigger",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-autoplay-trigger"
     });
 });
 const Carousel_CarouselAutoplayIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.AutoplayIndicator, {
         ref: ref,
-        "data-slot": "carousel-autoplay-indicator",
         className: cn('inline-flex min-w-4 items-center justify-center text-xs font-medium uppercase', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-autoplay-indicator"
     });
 });
 const Carousel_CarouselProgressText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.ProgressText, {
         ref: ref,
-        "data-slot": "carousel-progress-text",
         dir: "ltr",
         className: cn('text-sm text-muted-foreground tabular-nums [unicode-bidi:isolate]', className),
-        ...props
+        ...props,
+        "data-slot": "carousel-progress-text"
     });
 });
 const Carousel_Carousel = Object.assign(Carousel_CarouselRoot, {