@moduix/react-tailwind 1.0.0 → 1.1.0

package/dist/components/slider/Slider.js

@@ -6,67 +6,67 @@ import { cn } from "../../internal/cn.js";
 const Slider_SliderRoot = /*#__PURE__*/ forwardRef(function({ className, readOnly, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Root, {
         ref: ref,
-        "data-slot": "slider-root",
         "data-readonly": readOnly ? '' : void 0,
         className: cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", className),
         readOnly: readOnly,
-        ...props
+        ...props,
+        "data-slot": "slider-root"
     });
 });
 const Slider_SliderRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.RootProvider, {
         ref: ref,
-        "data-slot": "slider-root-provider",
         className: cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", className),
-        ...props
+        ...props,
+        "data-slot": "slider-root-provider"
     });
 });
 const Slider_SliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Label, {
         ref: ref,
-        "data-slot": "slider-label",
         className: cn('text-sm leading-5 font-normal text-foreground select-none group-data-[orientation=vertical]:[grid-area:label]', className),
-        ...props
+        ...props,
+        "data-slot": "slider-label"
     });
 });
 const Slider_SliderValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.ValueText, {
         ref: ref,
-        "data-slot": "slider-value-text",
         className: cn('text-right text-sm leading-5 font-normal text-foreground group-data-[orientation=vertical]:justify-self-end group-data-[orientation=vertical]:[grid-area:value]', className),
-        ...props
+        ...props,
+        "data-slot": "slider-value-text"
     });
 });
 const Slider_SliderControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Control, {
         ref: ref,
-        "data-slot": "slider-control",
         className: cn('relative flex min-h-5 w-full cursor-pointer touch-none items-center select-none group-data-readonly:cursor-default group-data-[orientation=vertical]:[grid-area:control] data-disabled:cursor-default data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-5 data-[orientation=vertical]:flex-col', className),
-        ...props
+        ...props,
+        "data-slot": "slider-control"
     });
 });
 const Slider_SliderTrack = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Track, {
         ref: ref,
-        "data-slot": "slider-track",
         className: cn('h-1.5 w-full flex-1 overflow-hidden rounded-full bg-muted ring-1 ring-border select-none ring-inset data-invalid:ring-destructive data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5', className),
-        ...props
+        ...props,
+        "data-slot": "slider-track"
     });
 });
 const Slider_SliderRange = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Range, {
         ref: ref,
-        "data-slot": "slider-range",
         className: cn('h-full rounded-[inherit] bg-primary data-invalid:bg-destructive data-[orientation=vertical]:w-full', className),
-        ...props
+        ...props,
+        "data-slot": "slider-range"
     });
 });
 const Slider_SliderThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Thumb, {
         ref: ref,
-        "data-slot": "slider-thumb",
         className: cn('box-border flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-background shadow-sm outline-0 transition-[border-color,background-color,box-shadow] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring data-disabled:pointer-events-none data-dragging:border-ring data-dragging:shadow-md data-dragging:ring-1 data-dragging:ring-ring data-invalid:border-destructive data-invalid:focus-visible:ring-destructive motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "slider-thumb"
     });
 });
 function SliderThumbs({ className }) {
@@ -80,25 +80,25 @@ function SliderThumbs({ className }) {
 const Slider_SliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.MarkerGroup, {
         ref: ref,
-        "data-slot": "slider-marker-group",
         className: cn('mt-2 flex justify-between group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:flex-col group-data-[orientation=vertical]:[grid-area:markers]', className),
-        ...props
+        ...props,
+        "data-slot": "slider-marker-group"
     });
 });
 const Slider_SliderMarker = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Marker, {
         ref: ref,
-        "data-slot": "slider-marker",
         className: cn("relative text-xs leading-4 text-muted-foreground before:absolute before:start-1/2 before:-top-2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border before:content-[''] data-[orientation=vertical]:before:-start-2 data-[orientation=vertical]:before:top-1/2 data-[orientation=vertical]:before:-translate-y-1/2 data-[state=at-value]:before:bg-primary group-data-invalid:data-[state=at-value]:before:bg-destructive data-[state=under-value]:before:bg-primary group-data-invalid:data-[state=under-value]:before:bg-destructive", className),
-        ...props
+        ...props,
+        "data-slot": "slider-marker"
     });
 });
 const Slider_SliderDraggingIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.DraggingIndicator, {
         ref: ref,
-        "data-slot": "slider-dragging-indicator",
         className: cn('pointer-events-none -top-8 rounded-sm bg-foreground px-2 py-1 text-xs leading-none font-medium whitespace-nowrap text-background', className),
-        ...props
+        ...props,
+        "data-slot": "slider-dragging-indicator"
     });
 });
 const Slider_Slider = Object.assign(Slider_SliderRoot, {

package/dist/components/split-button/SplitButton.d.ts

@@ -1,6 +1,6 @@
+import { Menu as MenuPrimitive } from '@ark-ui/react/menu';
 import type { ComponentProps, ReactNode } from 'react';
 import { Button } from '../button/index.js';
-import { Menu } from '../menu/index.js';
 type ButtonProps = ComponentProps<typeof Button>;
 type SplitButtonVariant = Exclude<NonNullable<ButtonProps['variant']>, 'link'>;
 type SplitButtonSize = Exclude<NonNullable<ButtonProps['size']>, 'icon-sm' | 'icon-md' | 'icon-lg'>;
@@ -8,11 +8,11 @@ type SplitButtonActionProps = Omit<ButtonProps, 'size' | 'variant'> & {
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 };
-type SplitButtonTriggerProps = Omit<ComponentProps<typeof Menu.Trigger>, 'asChild'> & {
+type SplitButtonTriggerProps = Omit<ComponentProps<typeof MenuPrimitive.Trigger>, 'asChild'> & {
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 };
-declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<import("@ark-ui/react/menu").MenuRootProps & import("../../internal/overlayPortal.js").OverlayPortalProps, "children"> & {
+declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.RootProps & import("../../internal/overlayPortal.js").OverlayPortalProps, "children"> & {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     children?: ReactNode;
@@ -20,7 +20,7 @@ declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<import
     size?: SplitButtonSize;
     variant?: SplitButtonVariant;
 } & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<import("@ark-ui/react/menu").MenuRootProps & import("../../internal/overlayPortal.js").OverlayPortalProps, "children"> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.RootProps & import("../../internal/overlayPortal.js").OverlayPortalProps, "children"> & {
         'aria-label'?: string;
         'aria-labelledby'?: string;
         children?: ReactNode;
@@ -30,7 +30,7 @@ declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<import
     } & import("react").RefAttributes<HTMLDivElement>>;
     Action: import("react").ForwardRefExoticComponent<Omit<SplitButtonActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Trigger: import("react").ForwardRefExoticComponent<Omit<SplitButtonTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@ark-ui/react/menu").MenuPositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@ark-ui/react/menu").MenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 export { SplitButton };

package/dist/components/split-button/SplitButton.js

@@ -1,11 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { Menu } from "@ark-ui/react/menu";
 import { cva } from "class-variance-authority";
 import { createContext, forwardRef, useContext } from "react";
 import { cn } from "../../internal/cn.js";
 import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal } from "../../internal/overlayPortal.js";
 import { Button } from "../button/index.js";
-import { Menu } from "../menu/index.js";
+import { Menu as index_js_Menu } from "../menu/index.js";
 const splitButtonTriggerVariants = cva("relative min-w-0 -ms-px rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
     variants: {
         size: {
@@ -41,7 +43,7 @@ const SplitButton_SplitButtonRoot = /*#__PURE__*/ forwardRef(function({ children
             size,
             variant
         },
-        children: /*#__PURE__*/ jsx(Menu.Root, {
+        children: /*#__PURE__*/ jsx(index_js_Menu.Root, {
             positioning: {
                 placement: 'bottom-end',
                 gutter: 4,
@@ -66,11 +68,11 @@ const SplitButton_SplitButtonAction = /*#__PURE__*/ forwardRef(function({ classN
     const context = useSplitButtonContext('SplitButton.Action');
     return /*#__PURE__*/ jsx(Button, {
         ref: ref,
-        "data-slot": "split-button-action",
         size: size ?? context.size,
         variant: variant ?? context.variant,
         className: cn('rounded-e-none', className),
-        ...props
+        ...props,
+        "data-slot": "split-button-action"
     });
 });
 const SplitButton_SplitButtonTrigger = /*#__PURE__*/ forwardRef(function({ children, className, size, variant, 'aria-label': ariaLabel, ...props }, ref) {
@@ -81,13 +83,13 @@ const SplitButton_SplitButtonTrigger = /*#__PURE__*/ forwardRef(function({ child
     return /*#__PURE__*/ jsx(Menu.Trigger, {
         ref: ref,
         asChild: true,
-        "data-slot": "split-button-trigger",
         "aria-label": isIconOnly ? ariaLabel ?? 'More actions' : ariaLabel,
         className: cn(splitButtonTriggerVariants({
             size: resolvedSize,
             variant: resolvedVariant
         }), className),
         ...props,
+        "data-slot": "split-button-trigger",
         children: /*#__PURE__*/ jsx(Button, {
             size: resolvedSize,
             variant: resolvedVariant,
@@ -96,21 +98,23 @@ const SplitButton_SplitButtonTrigger = /*#__PURE__*/ forwardRef(function({ child
     });
 });
 const SplitButton_SplitButtonPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(Menu.Positioner, {
-        ref: ref,
-        "data-slot": "split-button-positioner",
-        className: className,
-        ...props
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Menu.Positioner, {
+            ref: ref,
+            className: cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', className),
+            ...props,
+            "data-slot": "split-button-positioner"
+        })
     });
 });
 const SplitButton_SplitButtonContent = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Content, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "split-button-content",
-        className: className,
+        className: cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] 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,
-        children: asChild ? children : /*#__PURE__*/ jsx(Menu.Viewport, {
+        "data-slot": "split-button-content",
+        children: asChild ? children : /*#__PURE__*/ jsx(index_js_Menu.Viewport, {
             children: children
         })
     });

package/dist/components/splitter/Splitter.js

@@ -6,52 +6,52 @@ import { cn } from "../../internal/cn.js";
 const Splitter_SplitterRoot = /*#__PURE__*/ forwardRef(function({ className, style, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.Root, {
         ref: ref,
-        "data-slot": "splitter-root",
         className: cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', className),
         style: {
             width: void 0,
             height: void 0,
             ...style
         },
-        ...props
+        ...props,
+        "data-slot": "splitter-root"
     });
 });
 const Splitter_SplitterRootProvider = /*#__PURE__*/ forwardRef(function({ className, style, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.RootProvider, {
         ref: ref,
-        "data-slot": "splitter-root-provider",
         className: cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', className),
         style: {
             width: void 0,
             height: void 0,
             ...style
         },
-        ...props
+        ...props,
+        "data-slot": "splitter-root-provider"
     });
 });
 const Splitter_SplitterPanel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.Panel, {
         ref: ref,
-        "data-slot": "splitter-panel",
         className: cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', className),
-        ...props
+        ...props,
+        "data-slot": "splitter-panel"
     });
 });
 const Splitter_SplitterResizeTriggerIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.ResizeTriggerIndicator, {
         ref: ref,
-        "data-slot": "splitter-resize-trigger-indicator",
         className: cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', className),
-        ...props
+        ...props,
+        "data-slot": "splitter-resize-trigger-indicator"
     });
 });
 const Splitter_SplitterResizeTrigger = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.ResizeTrigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "splitter-resize-trigger",
         className: cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", className),
         ...props,
+        "data-slot": "splitter-resize-trigger",
         children: void 0 !== children || asChild ? children : /*#__PURE__*/ jsx(Splitter_SplitterResizeTriggerIndicator, {})
     });
 });

package/dist/components/steps/Steps.js

@@ -7,99 +7,99 @@ import { CheckIcon } from "../../internal/icons/ui/index.js";
 const Steps_StepsRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.Root, {
         ref: ref,
-        "data-slot": "steps-root",
         className: cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', className),
-        ...props
+        ...props,
+        "data-slot": "steps-root"
     });
 });
 const Steps_StepsRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.RootProvider, {
         ref: ref,
-        "data-slot": "steps-root-provider",
         className: cn('box-border flex w-full max-w-[52rem] min-w-0 text-foreground data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-4 data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-6 max-[40rem]:data-[orientation=vertical]:flex-col max-[40rem]:data-[orientation=vertical]:gap-4', className),
-        ...props
+        ...props,
+        "data-slot": "steps-root-provider"
     });
 });
 const Steps_StepsList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.List, {
         ref: ref,
-        "data-slot": "steps-list",
         className: cn('flex w-full min-w-0 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:w-fit data-[orientation=vertical]:flex-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-4 max-[40rem]:data-[orientation=horizontal]:[scrollbar-width:thin] max-[40rem]:data-[orientation=horizontal]:overflow-x-auto', className),
-        ...props
+        ...props,
+        "data-slot": "steps-list"
     });
 });
 const Steps_StepsItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.Item, {
         ref: ref,
-        "data-slot": "steps-item",
         className: cn('group/steps-item relative flex min-w-0 flex-1 items-center gap-3 last:flex-none data-[orientation=vertical]:min-h-16 data-[orientation=vertical]:flex-none data-[orientation=vertical]:items-start max-[40rem]:data-[orientation=horizontal]:flex-none', className),
-        ...props
+        ...props,
+        "data-slot": "steps-item"
     });
 });
 const Steps_StepsTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.Trigger, {
         ref: ref,
-        "data-slot": "steps-trigger",
         className: cn('group/steps-trigger relative z-1 inline-flex min-w-0 cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent p-0 text-left text-inherit no-underline outline-none select-none [font:inherit] focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:items-start', className),
-        ...props
+        ...props,
+        "data-slot": "steps-trigger"
     });
 });
 const Steps_StepsIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     const item = useStepsItemContext();
     return /*#__PURE__*/ jsx(Steps.Indicator, {
         ref: ref,
-        "data-slot": "steps-indicator",
         className: cn('box-border inline-flex size-8 flex-none items-center justify-center rounded-full border border-border bg-background text-sm leading-none font-semibold text-muted-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out data-complete:border-foreground data-complete:bg-foreground data-complete:text-background data-current:border-foreground data-current:bg-background data-current:text-foreground motion-reduce:transition-none [&_svg]:size-3.5 [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:border-foreground [@media(hover:hover)]:group-hover/steps-trigger:data-incomplete:text-foreground', className),
         ...props,
+        "data-slot": "steps-indicator",
         children: children ?? (item.completed ? /*#__PURE__*/ jsx(CheckIcon, {}) : item.index + 1)
     });
 });
 const Steps_StepsSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.Separator, {
         ref: ref,
-        "data-slot": "steps-separator",
         className: cn('pointer-events-none mx-2 h-px min-w-8 flex-auto bg-border group-last/steps-item:hidden data-complete:bg-foreground data-[orientation=vertical]:absolute data-[orientation=vertical]:start-[15.5px] data-[orientation=vertical]:top-10 data-[orientation=vertical]:-bottom-4 data-[orientation=vertical]:m-0 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:min-w-0', className),
-        ...props
+        ...props,
+        "data-slot": "steps-separator"
     });
 });
 const Steps_StepsContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.Content, {
         ref: ref,
-        "data-slot": "steps-content",
         className: cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-sm leading-5 text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", className),
-        ...props
+        ...props,
+        "data-slot": "steps-content"
     });
 });
 const Steps_StepsCompletedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.CompletedContent, {
         ref: ref,
-        "data-slot": "steps-completed-content",
         className: cn("box-border grid min-h-40 min-w-0 place-items-center rounded-md bg-muted px-4 py-4 text-center text-sm leading-5 font-medium text-foreground outline-none focus-visible:outline-1 focus-visible:-outline-offset-2 focus-visible:outline-ring data-[orientation=vertical]:flex-auto [&[hidden]:not([hidden='until-found'])]:hidden", className),
-        ...props
+        ...props,
+        "data-slot": "steps-completed-content"
     });
 });
 const Steps_StepsPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.PrevTrigger, {
         ref: ref,
-        "data-slot": "steps-prev-trigger",
         className: cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "steps-prev-trigger"
     });
 });
 const Steps_StepsNextTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.NextTrigger, {
         ref: ref,
-        "data-slot": "steps-next-trigger",
         className: cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "steps-next-trigger"
     });
 });
 const Steps_StepsProgress = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.Progress, {
         ref: ref,
-        "data-slot": "steps-progress",
         className: cn("relative block h-0.5 w-full overflow-hidden rounded-full bg-border before:absolute before:inset-y-0 before:start-0 before:w-[var(--percent,0%)] before:rounded-[inherit] before:bg-foreground before:transition-[width] before:duration-200 before:ease-in-out before:content-[''] motion-reduce:before:transition-none", className),
-        ...props
+        ...props,
+        "data-slot": "steps-progress"
     });
 });
 const Steps_Steps = Object.assign(Steps_StepsRoot, {

package/dist/components/swap/Swap.js

@@ -6,27 +6,27 @@ import { cn } from "../../internal/cn.js";
 const Swap_SwapRoot = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Swap.Root, {
         ref: ref,
-        "data-slot": "swap-root",
         "data-animation": animation,
         className: cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", className),
-        ...props
+        ...props,
+        "data-slot": "swap-root"
     });
 });
 const Swap_SwapRootProvider = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Swap.RootProvider, {
         ref: ref,
-        "data-slot": "swap-root-provider",
         "data-animation": animation,
         className: cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", className),
-        ...props
+        ...props,
+        "data-slot": "swap-root-provider"
     });
 });
 const Swap_SwapIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Swap.Indicator, {
         ref: ref,
-        "data-slot": "swap-indicator",
         className: cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
-        ...props
+        ...props,
+        "data-slot": "swap-indicator"
     });
 });
 const Swap_Swap = Object.assign(Swap_SwapRoot, {

package/dist/components/switch/Switch.js

@@ -6,44 +6,44 @@ import { cn } from "../../internal/cn.js";
 const Switch_SwitchRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.Root, {
         ref: ref,
-        "data-slot": "switch-root",
         "data-size": size,
         className: cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
-        ...props
+        ...props,
+        "data-slot": "switch-root"
     });
 });
 const Switch_SwitchRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.RootProvider, {
         ref: ref,
-        "data-slot": "switch-root-provider",
         "data-size": size,
         className: cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
-        ...props
+        ...props,
+        "data-slot": "switch-root-provider"
     });
 });
 const Switch_SwitchControl = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.Control, {
         ref: ref,
-        "data-slot": "switch-control",
         className: cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", className),
         ...props,
+        "data-slot": "switch-control",
         children: children ?? /*#__PURE__*/ jsx(Switch_SwitchThumb, {})
     });
 });
 const Switch_SwitchThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.Thumb, {
         ref: ref,
-        "data-slot": "switch-thumb",
         className: cn('inline-flex size-5 translate-x-0 items-center justify-center rounded-full border-transparent bg-background text-muted shadow-sm transition-[translate,background-color,color] duration-200 ease-in-out group-data-[size=lg]/switch:size-control-xs group-data-[size=sm]/switch:size-4 group-data-[size=xl]/switch:size-7 group-data-[size=xs]/switch:size-3 data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary group-data-[size=lg]/switch:data-[state=checked]:translate-x-[22px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=xl]/switch:data-[state=checked]:translate-x-[26px] group-data-[size=xs]/switch:data-[state=checked]:translate-x-[10px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[18px] group-data-[size=lg]/switch:rtl:data-[state=checked]:-translate-x-[22px] group-data-[size=sm]/switch:rtl:data-[state=checked]:-translate-x-[14px] group-data-[size=xl]/switch:rtl:data-[state=checked]:-translate-x-[26px] group-data-[size=xs]/switch:rtl:data-[state=checked]:-translate-x-[10px] [&>svg]:block [&>svg]:size-[65%] [&>svg]:shrink-0', className),
-        ...props
+        ...props,
+        "data-slot": "switch-thumb"
     });
 });
 const Switch_SwitchLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.Label, {
         ref: ref,
-        "data-slot": "switch-label",
         className: cn('text-sm leading-5 font-medium text-foreground select-none', className),
-        ...props
+        ...props,
+        "data-slot": "switch-label"
     });
 });
 const Switch_Switch = Object.assign(Switch_SwitchRoot, {