@moduix/react-tailwind 1.0.0 → 1.1.0

package/dist/components/date-picker/DatePicker.js

@@ -16,7 +16,6 @@ const DatePicker_DatePickerRoot = /*#__PURE__*/ forwardRef(function({ className,
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(DatePicker.Root, {
             ref: ref,
-            "data-slot": "date-picker-root",
             className: cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", className),
             disabled: disabled ?? field?.disabled ?? fieldset?.disabled,
             invalid: invalid ?? field?.invalid ?? fieldset?.invalid,
@@ -24,7 +23,8 @@ const DatePicker_DatePickerRoot = /*#__PURE__*/ forwardRef(function({ className,
             readOnly: readOnly ?? field?.readOnly,
             required: required ?? field?.required,
             unmountOnExit: unmountOnExit,
-            ...props
+            ...props,
+            "data-slot": "date-picker-root"
         })
     });
 });
@@ -34,28 +34,28 @@ const DatePicker_DatePickerRootProvider = /*#__PURE__*/ forwardRef(function({ cl
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(DatePicker.RootProvider, {
             ref: ref,
-            "data-slot": "date-picker-root-provider",
             className: cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
-            ...props
+            ...props,
+            "data-slot": "date-picker-root-provider"
         })
     });
 });
 const DatePicker_DatePickerLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.Label, {
         ref: ref,
-        "data-slot": "date-picker-label",
         className: cn('inline-flex items-center text-sm leading-5 font-medium text-foreground select-none', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-label"
     });
 });
 const DatePicker_DatePickerControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.Control, {
         ref: ref,
-        "data-slot": "date-picker-control",
         className: cn('group/date-picker-control relative flex w-full min-w-0 items-center gap-2 text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-control"
     });
 });
 const DatePicker_DatePickerField = /*#__PURE__*/ forwardRef(function({ clearLabel, clearTriggerProps, inputProps, placeholder, triggerLabel, triggerProps, ...props }, ref) {
@@ -122,18 +122,18 @@ const DatePicker_DatePickerRangeField = /*#__PURE__*/ forwardRef(function({ clea
 const DatePicker_DatePickerInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.Input, {
         ref: ref,
-        "data-slot": "date-picker-input",
         className: cn("readonly:cursor-default h-control-md w-full min-w-30 flex-1 rounded-md border border-border bg-background ps-3.5 pe-17 text-md leading-6 text-current outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out group-has-[input[data-index='1']]/date-picker:pe-3.5 group-data-focus/date-picker-control:border-ring group-data-focus/date-picker-control:outline-ring placeholder:text-muted-foreground focus:border-ring focus:outline-ring disabled:cursor-default aria-invalid:border-destructive aria-invalid:outline-destructive data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[index='1']:pe-17 motion-reduce:transition-none", 'py-1', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-input"
     });
 });
 const DatePicker_DatePickerTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.Trigger, {
         ref: ref,
-        "data-slot": "date-picker-trigger",
         asChild: asChild,
         className: cn(!asChild && 'absolute end-2 top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
         ...props,
+        "data-slot": "date-picker-trigger",
         children: children ?? /*#__PURE__*/ jsx(CalendarIcon, {})
     });
 });
@@ -141,7 +141,6 @@ const DatePicker_DatePickerClearTrigger = /*#__PURE__*/ forwardRef(function({ as
     return /*#__PURE__*/ jsx(DatePicker.ClearTrigger, {
         ref: ref,
         asChild: true,
-        "data-slot": "date-picker-clear-trigger",
         className: cn('absolute end-[2.125rem] top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
         ...asChild && void 0 !== ariaLabel ? {
             'aria-label': ariaLabel
@@ -150,6 +149,7 @@ const DatePicker_DatePickerClearTrigger = /*#__PURE__*/ forwardRef(function({ as
             'aria-labelledby': ariaLabelledBy
         } : {},
         ...props,
+        "data-slot": "date-picker-clear-trigger",
         children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             ...void 0 === ariaLabel ? {} : {
                 'aria-label': ariaLabel
@@ -166,71 +166,71 @@ const DatePicker_DatePickerPositioner = /*#__PURE__*/ forwardRef(function({ clas
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(DatePicker.Positioner, {
             ref: ref,
-            "data-slot": "date-picker-positioner",
             className: cn('z-[var(--z-index)] outline-0', className),
-            ...props
+            ...props,
+            "data-slot": "date-picker-positioner"
         })
     });
 });
 const DatePicker_DatePickerContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.Content, {
         ref: ref,
-        "data-slot": "date-picker-content",
         className: cn('z-[calc(60+var(--layer-index,0))] w-75 max-w-[min(calc(100vw-2rem),var(--available-width))] min-w-[min(18.75rem,var(--available-width))] origin-[var(--transform-origin)] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-0 data-inline:min-w-72 data-inline:shadow-none data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-content"
     });
 });
 const DatePicker_DatePickerView = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.View, {
         ref: ref,
-        "data-slot": "date-picker-view",
         className: cn('grid gap-3', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-view"
     });
 });
 const DatePicker_DatePickerViewControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.ViewControl, {
         ref: ref,
-        "data-slot": "date-picker-view-control",
         className: cn('flex min-w-0 items-center justify-between gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-view-control"
     });
 });
 const DatePicker_DatePickerPrevTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.PrevTrigger, {
         ref: ref,
-        "data-slot": "date-picker-prev-trigger",
         asChild: asChild,
         className: cn(!asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
         ...props,
+        "data-slot": "date-picker-prev-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
     });
 });
 const DatePicker_DatePickerNextTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.NextTrigger, {
         ref: ref,
-        "data-slot": "date-picker-next-trigger",
         asChild: asChild,
         className: cn(!asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
         ...props,
+        "data-slot": "date-picker-next-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
 });
 const DatePicker_DatePickerRangeText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.RangeText, {
         ref: ref,
-        "data-slot": "date-picker-range-text",
         className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-range-text"
     });
 });
 const DatePicker_DatePickerViewTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.ViewTrigger, {
         ref: ref,
-        "data-slot": "date-picker-view-trigger",
         asChild: asChild,
         className: cn(!asChild && 'inline-flex min-h-control-sm min-w-0 flex-1 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent px-2 text-sm leading-5 font-medium text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
         ...props,
+        "data-slot": "date-picker-view-trigger",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(DatePicker_DatePickerRangeText, {}),
@@ -242,73 +242,73 @@ const DatePicker_DatePickerViewTrigger = /*#__PURE__*/ forwardRef(function({ asC
 const DatePicker_DatePickerTable = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.Table, {
         ref: ref,
-        "data-slot": "date-picker-table",
         className: cn('w-full table-fixed border-separate border-spacing-0.5', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-table"
     });
 });
 const DatePicker_DatePickerTableHead = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.TableHead, {
         ref: ref,
-        "data-slot": "date-picker-table-head",
         className: className,
-        ...props
+        ...props,
+        "data-slot": "date-picker-table-head"
     });
 });
 const DatePicker_DatePickerTableBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.TableBody, {
         ref: ref,
-        "data-slot": "date-picker-table-body",
         className: className,
-        ...props
+        ...props,
+        "data-slot": "date-picker-table-body"
     });
 });
 const DatePicker_DatePickerTableRow = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.TableRow, {
         ref: ref,
-        "data-slot": "date-picker-table-row",
         className: className,
-        ...props
+        ...props,
+        "data-slot": "date-picker-table-row"
     });
 });
 const DatePicker_DatePickerTableHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.TableHeader, {
         ref: ref,
-        "data-slot": "date-picker-table-header",
         className: cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-table-header"
     });
 });
 const DatePicker_DatePickerWeekNumberHeaderCell = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.WeekNumberHeaderCell, {
         ref: ref,
-        "data-slot": "date-picker-week-number-header-cell",
         className: cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-week-number-header-cell"
     });
 });
 const DatePicker_DatePickerWeekNumberCell = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.WeekNumberCell, {
         ref: ref,
-        "data-slot": "date-picker-week-number-cell",
         className: cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-week-number-cell"
     });
 });
 const DatePicker_DatePickerTableCell = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.TableCell, {
         ref: ref,
-        "data-slot": "date-picker-table-cell",
         className: cn('h-control-sm w-control-sm p-0 text-center', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-table-cell"
     });
 });
 const DatePicker_DatePickerTableCellTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.TableCellTrigger, {
         ref: ref,
-        "data-slot": "date-picker-table-cell-trigger",
         className: cn('inline-flex h-control-sm w-full min-w-control-sm cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-in-hover-range:bg-muted data-in-hover-range:text-foreground data-in-range:bg-muted data-in-range:text-foreground data-outside-range:text-muted-foreground data-selected:bg-primary data-selected:text-primary-foreground data-today:border-ring data-unavailable:text-muted-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:text-accent-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-table-cell-trigger"
     });
 });
 const DatePicker_DatePickerDayTable = /*#__PURE__*/ forwardRef(function({ offset, showHeader = true, showWeekNumbers = false, ...props }, ref) {
@@ -363,34 +363,34 @@ const DatePicker_DatePickerDayTable = /*#__PURE__*/ forwardRef(function({ offset
 const DatePicker_DatePickerMonthSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.MonthSelect, {
         ref: ref,
-        "data-slot": "date-picker-month-select",
         className: cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-month-select"
     });
 });
 const DatePicker_DatePickerYearSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.YearSelect, {
         ref: ref,
-        "data-slot": "date-picker-year-select",
         className: cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-year-select"
     });
 });
 const DatePicker_DatePickerPresetTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.PresetTrigger, {
         ref: ref,
-        "data-slot": "date-picker-preset-trigger",
         asChild: asChild,
         className: cn(!asChild && 'inline-flex min-h-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-muted px-2 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-selected:bg-primary data-selected:text-primary-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-preset-trigger"
     });
 });
 const DatePicker_DatePickerValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(DatePicker.ValueText, {
         ref: ref,
-        "data-slot": "date-picker-value-text",
         className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
-        ...props
+        ...props,
+        "data-slot": "date-picker-value-text"
     });
 });
 const DatePicker_DatePicker = Object.assign(DatePicker_DatePickerRoot, {

package/dist/components/dialog/Dialog.js

@@ -33,18 +33,18 @@ const Dialog_DialogTrigger = /*#__PURE__*/ forwardRef(function({ asChild, classN
     return /*#__PURE__*/ jsx(Dialog.Trigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "dialog-trigger",
         className: cn(!asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "dialog-trigger"
     });
 });
 const Dialog_DialogBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
             ref: ref,
-            "data-slot": "dialog-backdrop",
             className: cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', className),
-            ...props
+            ...props,
+            "data-slot": "dialog-backdrop"
         })
     });
 });
@@ -52,43 +52,43 @@ const Dialog_DialogPositioner = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Positioner, {
             ref: ref,
-            "data-slot": "dialog-positioner",
             className: cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid [scrollbar-gutter:stable_both-edges] place-items-center overflow-y-auto overscroll-contain p-4', className),
-            ...props
+            ...props,
+            "data-slot": "dialog-positioner"
         })
     });
 });
 const Dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
-        "data-slot": "dialog-content",
         className: cn("relative max-h-[calc(100dvh-2rem)] w-[min(28rem,calc(100vw-2rem))] max-w-full origin-top rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-0 transition-[scale,translate] duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] data-[has-nested]:[translate:0_calc(2.5rem*var(--nested-layer-count,0))] data-[has-nested]:[scale:calc(1-0.05*var(--nested-layer-count,0))] data-[has-nested]:after:opacity-100 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none", className),
-        ...props
+        ...props,
+        "data-slot": "dialog-content"
     });
 });
 const Dialog_DialogTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Title, {
         ref: ref,
-        "data-slot": "dialog-title",
         className: cn('text-lg font-semibold text-popover-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "dialog-title"
     });
 });
 const Dialog_DialogDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Description, {
         ref: ref,
-        "data-slot": "dialog-description",
         className: cn('text-md text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "dialog-description"
     });
 });
 const Dialog_DialogCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "dialog-close-trigger",
         className: cn(!asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "dialog-close-trigger"
     });
 });
 const Dialog_DialogCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
@@ -107,25 +107,25 @@ const Dialog_DialogCloseIcon = /*#__PURE__*/ forwardRef(function({ className, ch
 const Dialog_DialogHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "dialog-header",
         className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='dialog-close-trigger']]:col-start-2 [&>[data-slot='dialog-close-trigger']]:justify-self-end [&>[data-slot='dialog-description']]:col-span-2 [&>[data-slot='dialog-title']]:col-start-1", className),
-        ...props
+        ...props,
+        "data-slot": "dialog-header"
     });
 });
 const Dialog_DialogBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "dialog-body",
         className: cn('mt-4 text-md text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "dialog-body"
     });
 });
 const Dialog_DialogFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "dialog-footer",
         className: cn('mt-6 flex justify-end gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "dialog-footer"
     });
 });
 const Dialog_Dialog = Object.assign(DialogRoot, {

package/dist/components/drawer/Drawer.js

@@ -43,18 +43,18 @@ const Drawer_DrawerTrigger = /*#__PURE__*/ forwardRef(function({ asChild, classN
     return /*#__PURE__*/ jsx(Drawer.Trigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "drawer-trigger",
         className: cn(!asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-trigger"
     });
 });
 const Drawer_DrawerBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Drawer.Backdrop, {
             ref: ref,
-            "data-slot": "drawer-backdrop",
             className: cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] min-h-dvh bg-overlay backdrop-blur-xs [transition:opacity_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out,backdrop-filter_calc(var(--drawer-swipe-strength,1)*450ms)_ease-out] data-[state=closed]:animate-moduix-drawer-backdrop-out data-[state=open]:animate-moduix-drawer-backdrop-in data-[state=open]:data-swiping:[transition-duration:0s] motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] [&[hidden]:has(~[data-slot=drawer-positioner]:not([hidden]))]:block', className),
-            ...props
+            ...props,
+            "data-slot": "drawer-backdrop"
         })
     });
 });
@@ -62,9 +62,9 @@ const Drawer_DrawerPositioner = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Drawer.Positioner, {
             ref: ref,
-            "data-slot": "drawer-positioner",
             className: cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] box-border flex items-end justify-center overflow-hidden overscroll-contain p-0 has-[>[data-slot=drawer-content][data-variant=island]]:pt-[max(1rem,env(safe-area-inset-top,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pr-[max(1rem,env(safe-area-inset-right,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pb-[max(1rem,env(safe-area-inset-bottom,0px))] has-[>[data-slot=drawer-content][data-variant=island]]:pl-[max(1rem,env(safe-area-inset-left,0px))] data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end data-[swipe-direction=up]:items-start [&:not([hidden])_[data-slot=drawer-content][hidden]]:flex', className),
-            ...props
+            ...props,
+            "data-slot": "drawer-positioner"
         })
     });
 });
@@ -72,51 +72,51 @@ const Drawer_DrawerContent = /*#__PURE__*/ forwardRef(function({ className, vari
     const rootVariant = useContext(DrawerVariantContext);
     return /*#__PURE__*/ jsx(Drawer.Content, {
         ref: ref,
-        "data-slot": "drawer-content",
         "data-variant": variant ?? rootVariant,
         className: cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", className),
-        ...props
+        ...props,
+        "data-slot": "drawer-content"
     });
 });
 const Drawer_DrawerGrabber = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.Grabber, {
         ref: ref,
-        "data-slot": "drawer-grabber",
         className: cn('group/grabber flex w-full shrink-0 cursor-grab items-center justify-center pb-1 select-none group-data-[swipe-direction=left]/drawer:hidden group-data-[swipe-direction=right]/drawer:hidden active:cursor-grabbing', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-grabber"
     });
 });
 const Drawer_DrawerGrabberIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.GrabberIndicator, {
         ref: ref,
-        "data-slot": "drawer-grabber-indicator",
         className: cn('h-1 w-12 rounded-full bg-muted-foreground opacity-[0.45] transition-[background-color,opacity] duration-200 ease-in-out motion-reduce:transition-none [@media(hover:hover)]:group-hover/grabber:opacity-70', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-grabber-indicator"
     });
 });
 const Drawer_DrawerTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.Title, {
         ref: ref,
-        "data-slot": "drawer-title",
         className: cn('text-lg font-semibold text-popover-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-title"
     });
 });
 const Drawer_DrawerDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.Description, {
         ref: ref,
-        "data-slot": "drawer-description",
         className: cn('text-md leading-6 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-description"
     });
 });
 const Drawer_DrawerCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.CloseTrigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "drawer-close-trigger",
         className: cn(!asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-close-trigger"
     });
 });
 const Drawer_DrawerCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
@@ -135,46 +135,46 @@ const Drawer_DrawerCloseIcon = /*#__PURE__*/ forwardRef(function({ className, ch
 const Drawer_DrawerSwipeArea = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.SwipeArea, {
         ref: ref,
-        "data-slot": "drawer-swipe-area",
         className: cn('fixed z-50 touch-none data-disabled:pointer-events-none data-[swipe-direction=down]:start-0 data-[swipe-direction=down]:end-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-10 data-[swipe-direction=left]:end-0 data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:bottom-0 data-[swipe-direction=left]:w-10 data-[swipe-direction=right]:start-0 data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:bottom-0 data-[swipe-direction=right]:w-10 data-[swipe-direction=up]:start-0 data-[swipe-direction=up]:end-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-10', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-swipe-area"
     });
 });
 const Drawer_DrawerIndent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.Indent, {
         ref: ref,
-        "data-slot": "drawer-indent",
         className: cn('relative origin-top [translate:0_0] [scale:1] transition-[transform,border-radius] duration-[450ms] ease-spring data-active:[translate:0_calc(8px*(1-var(--drawer-swipe-progress,0)))] data-active:[scale:calc(0.97+(1-0.97)*var(--drawer-swipe-progress,0))] data-active:rounded-t-lg data-active:rounded-b-none motion-reduce:[transition-duration:1ms]', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-indent"
     });
 });
 const Drawer_DrawerIndentBackground = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Drawer.IndentBackground, {
         ref: ref,
-        "data-slot": "drawer-indent-background",
         className: cn('pointer-events-none absolute inset-0 bg-foreground opacity-0 transition-opacity duration-[450ms] ease-spring data-active:opacity-[calc(1-var(--drawer-swipe-progress,0))] motion-reduce:[transition-duration:1ms]', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-indent-background"
     });
 });
 function DrawerHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx(ark.div, {
-        "data-slot": "drawer-header",
         className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='drawer-close-icon']]:col-start-2 [&>[data-slot='drawer-close-icon']]:justify-self-end [&>[data-slot='drawer-close-trigger']]:col-start-2 [&>[data-slot='drawer-close-trigger']]:justify-self-end [&>[data-slot='drawer-description']]:col-span-2 [&>[data-slot='drawer-title']]:col-start-1", className),
-        ...props
+        ...props,
+        "data-slot": "drawer-header"
     });
 }
 function DrawerBody({ className, ...props }) {
     return /*#__PURE__*/ jsx(ark.div, {
-        "data-slot": "drawer-body",
         className: cn('mt-4 min-h-0 overflow-y-auto text-md leading-6 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-body"
     });
 }
 function DrawerFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx(ark.div, {
-        "data-slot": "drawer-footer",
         className: cn('mt-6 flex justify-end gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "drawer-footer"
     });
 }
 const Drawer_Drawer = Object.assign(DrawerRoot, {