@moduix/react-tailwind 1.0.0 → 1.1.0

package/dist/components/tooltip/Tooltip.js

@@ -29,10 +29,10 @@ function TooltipRootProvider({ lazyMount = true, portalled, portalRef, unmountOn
 const Tooltip_TooltipTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tooltip.Trigger, {
         ref: ref,
-        "data-slot": "tooltip-trigger",
         asChild: asChild,
         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-sm leading-5 text-foreground outline-0 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 active:bg-accent disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "tooltip-trigger"
     });
 });
 const Tooltip_TooltipDisabledTrigger = /*#__PURE__*/ forwardRef(function({ className, tabIndex = 0, ...props }, ref) {
@@ -40,10 +40,10 @@ const Tooltip_TooltipDisabledTrigger = /*#__PURE__*/ forwardRef(function({ class
         asChild: true,
         children: /*#__PURE__*/ jsx("span", {
             ref: ref,
-            "data-slot": "tooltip-disabled-trigger",
             tabIndex: tabIndex,
             className: cn('inline-flex cursor-not-allowed [&>:disabled]:pointer-events-none [&>[data-disabled]]:pointer-events-none', className),
-            ...props
+            ...props,
+            "data-slot": "tooltip-disabled-trigger"
         })
     });
 });
@@ -51,18 +51,18 @@ const Tooltip_TooltipPositioner = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Tooltip.Positioner, {
             ref: ref,
-            "data-slot": "tooltip-positioner",
             className: cn('z-[var(--z-index)] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', className),
-            ...props
+            ...props,
+            "data-slot": "tooltip-positioner"
         })
     });
 });
 const Tooltip_TooltipContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tooltip.Content, {
         ref: ref,
-        "data-slot": "tooltip-content",
         className: cn('relative z-60 max-h-[min(24rem,var(--available-height,100dvh))] max-w-[min(20rem,var(--available-width))] origin-[var(--transform-origin)] overflow-visible rounded-md border border-border bg-popover px-2 py-1 text-center text-sm leading-5 wrap-anywhere text-popover-foreground shadow-md data-instant:animate-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', className),
-        ...props
+        ...props,
+        "data-slot": "tooltip-content"
     });
 });
 const Tooltip_TooltipBody = /*#__PURE__*/ forwardRef(function(props, ref) {
@@ -76,18 +76,18 @@ const Tooltip_TooltipBody = /*#__PURE__*/ forwardRef(function(props, ref) {
 const Tooltip_TooltipArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tooltip.Arrow, {
         ref: ref,
-        "data-slot": "tooltip-arrow",
         className: cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', className),
         ...props,
+        "data-slot": "tooltip-arrow",
         children: children ?? /*#__PURE__*/ jsx(Tooltip_TooltipArrowTip, {})
     });
 });
 const Tooltip_TooltipArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tooltip.ArrowTip, {
         ref: ref,
-        "data-slot": "tooltip-arrow-tip",
         className: cn('border-t border-l border-border', className),
-        ...props
+        ...props,
+        "data-slot": "tooltip-arrow-tip"
     });
 });
 const Tooltip_Tooltip = Object.assign(TooltipRoot, {

package/dist/components/tour/Tour.js

@@ -22,9 +22,9 @@ const Tour_TourBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...prop
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Tour.Backdrop, {
             ref: ref,
-            "data-slot": "tour-backdrop",
             className: cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] bg-overlay backdrop-blur-xs 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": "tour-backdrop"
         })
     });
 });
@@ -32,9 +32,9 @@ const Tour_TourSpotlight = /*#__PURE__*/ forwardRef(function({ className, ...pro
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Tour.Spotlight, {
             ref: ref,
-            "data-slot": "tour-spotlight",
             className: cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', className),
-            ...props
+            ...props,
+            "data-slot": "tour-spotlight"
         })
     });
 });
@@ -42,76 +42,76 @@ const Tour_TourPositioner = /*#__PURE__*/ forwardRef(function({ className, ...pr
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Tour.Positioner, {
             ref: ref,
-            "data-slot": "tour-positioner",
-            className: cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0 data-[type=dialog]:fixed data-[type=dialog]:inset-0 data-[type=dialog]:grid data-[type=dialog]:place-items-center data-[type=dialog]:overflow-y-auto data-[type=dialog]:overscroll-contain data-[type=dialog]:p-4 data-[type=floating]:fixed data-[type=floating]:max-h-[calc(100dvh-3rem)] data-[type=floating]:max-w-[calc(100vw-3rem)] data-[type=floating]:data-[placement=bottom]:start-1/2 data-[type=floating]:data-[placement=bottom]:bottom-6 data-[type=floating]:data-[placement=bottom]:-translate-x-1/2 data-[type=floating]:data-[placement=bottom-end]:end-6 data-[type=floating]:data-[placement=bottom-end]:bottom-6 data-[type=floating]:data-[placement=bottom-start]:start-6 data-[type=floating]:data-[placement=bottom-start]:bottom-6 data-[type=floating]:data-[placement=center]:inset-1/2 data-[type=floating]:data-[placement=center]:-translate-x-1/2 data-[type=floating]:data-[placement=center]:-translate-y-1/2 data-[type=floating]:data-[placement=left]:start-6 data-[type=floating]:data-[placement=left]:top-1/2 data-[type=floating]:data-[placement=left]:-translate-y-1/2 data-[type=floating]:data-[placement=left-end]:start-6 data-[type=floating]:data-[placement=left-end]:bottom-6 data-[type=floating]:data-[placement=left-start]:start-6 data-[type=floating]:data-[placement=left-start]:top-6 data-[type=floating]:data-[placement=right]:end-6 data-[type=floating]:data-[placement=right]:top-1/2 data-[type=floating]:data-[placement=right]:-translate-y-1/2 data-[type=floating]:data-[placement=right-end]:end-6 data-[type=floating]:data-[placement=right-end]:bottom-6 data-[type=floating]:data-[placement=right-start]:end-6 data-[type=floating]:data-[placement=right-start]:top-6 data-[type=floating]:data-[placement=top]:start-1/2 data-[type=floating]:data-[placement=top]:top-6 data-[type=floating]:data-[placement=top]:-translate-x-1/2 data-[type=floating]:data-[placement=top-end]:end-6 data-[type=floating]:data-[placement=top-end]:top-6 data-[type=floating]:data-[placement=top-start]:start-6 data-[type=floating]:data-[placement=top-start]:top-6', className),
-            ...props
+            className: cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0 [--tour-z-index:var(--moduix-tour-z-index,var(--moduix-z-modal))] data-[type=dialog]:fixed data-[type=dialog]:inset-0 data-[type=dialog]:grid data-[type=dialog]:place-items-center data-[type=dialog]:overflow-y-auto data-[type=dialog]:overscroll-contain data-[type=dialog]:p-4 data-[type=floating]:fixed data-[type=floating]:max-h-[calc(100dvh-3rem)] data-[type=floating]:max-w-[calc(100vw-3rem)] data-[type=floating]:data-[placement=bottom]:start-1/2 data-[type=floating]:data-[placement=bottom]:bottom-6 data-[type=floating]:data-[placement=bottom]:-translate-x-1/2 data-[type=floating]:data-[placement=bottom-end]:end-6 data-[type=floating]:data-[placement=bottom-end]:bottom-6 data-[type=floating]:data-[placement=bottom-start]:start-6 data-[type=floating]:data-[placement=bottom-start]:bottom-6 data-[type=floating]:data-[placement=center]:inset-1/2 data-[type=floating]:data-[placement=center]:-translate-x-1/2 data-[type=floating]:data-[placement=center]:-translate-y-1/2 data-[type=floating]:data-[placement=left]:start-6 data-[type=floating]:data-[placement=left]:top-1/2 data-[type=floating]:data-[placement=left]:-translate-y-1/2 data-[type=floating]:data-[placement=left-end]:start-6 data-[type=floating]:data-[placement=left-end]:bottom-6 data-[type=floating]:data-[placement=left-start]:start-6 data-[type=floating]:data-[placement=left-start]:top-6 data-[type=floating]:data-[placement=right]:end-6 data-[type=floating]:data-[placement=right]:top-1/2 data-[type=floating]:data-[placement=right]:-translate-y-1/2 data-[type=floating]:data-[placement=right-end]:end-6 data-[type=floating]:data-[placement=right-end]:bottom-6 data-[type=floating]:data-[placement=right-start]:end-6 data-[type=floating]:data-[placement=right-start]:top-6 data-[type=floating]:data-[placement=top]:start-1/2 data-[type=floating]:data-[placement=top]:top-6 data-[type=floating]:data-[placement=top]:-translate-x-1/2 data-[type=floating]:data-[placement=top-end]:end-6 data-[type=floating]:data-[placement=top-end]:top-6 data-[type=floating]:data-[placement=top-start]:start-6 data-[type=floating]:data-[placement=top-start]:top-6', className),
+            ...props,
+            "data-slot": "tour-positioner"
         })
     });
 });
 const Tour_TourContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.Content, {
         ref: ref,
-        "data-slot": "tour-content",
         className: cn('relative z-60 flex max-h-[min(24rem,var(--available-height,100dvh))] w-80 max-w-[min(calc(100vw-2rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col gap-1 overflow-visible rounded-lg border border-border bg-popover p-5 text-popover-foreground shadow-lg outline-0 has-[>[data-slot=tour-body]]:grid has-[>[data-slot=tour-body]]:grid-rows-[minmax(0,1fr)_auto] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open data-[type=dialog]:w-[min(26rem,calc(100vw-2rem))] data-[type=floating]:w-[min(22rem,calc(100vw-2rem))] motion-reduce:animate-none', className),
-        ...props
+        ...props,
+        "data-slot": "tour-content"
     });
 });
 const Tour_TourArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.Arrow, {
         ref: ref,
-        "data-slot": "tour-arrow",
         className: cn('!size-2.5', className),
         ...props,
+        "data-slot": "tour-arrow",
         children: children ?? /*#__PURE__*/ jsx(Tour_TourArrowTip, {})
     });
 });
 const Tour_TourArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.ArrowTip, {
         ref: ref,
-        "data-slot": "tour-arrow-tip",
         className: cn('border-t border-l border-border !bg-popover', className),
-        ...props
+        ...props,
+        "data-slot": "tour-arrow-tip"
     });
 });
 const Tour_TourTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.Title, {
         ref: ref,
-        "data-slot": "tour-title",
         className: cn('pe-6 text-md leading-6 font-semibold text-popover-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "tour-title"
     });
 });
 const Tour_TourDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.Description, {
         ref: ref,
-        "data-slot": "tour-description",
         className: cn('text-sm leading-5 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "tour-description"
     });
 });
 const Tour_TourProgressText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.ProgressText, {
         ref: ref,
-        "data-slot": "tour-progress-text",
         className: cn('order-1 mt-2 text-xs leading-4 text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "tour-progress-text"
     });
 });
 const Tour_TourBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "tour-body",
         className: cn('flex min-h-0 flex-col gap-1 overflow-auto', className),
-        ...props
+        ...props,
+        "data-slot": "tour-body"
     });
 });
 const Tour_TourCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.CloseTrigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "tour-close-trigger",
         className: cn(!asChild && 'absolute end-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md leading-none text-muted-foreground outline-0 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&>svg]:size-3 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "tour-close-trigger"
     });
 });
 const Tour_TourCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
@@ -130,18 +130,18 @@ const Tour_TourCloseIcon = /*#__PURE__*/ forwardRef(function({ className, childr
 const Tour_TourControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.Control, {
         ref: ref,
-        "data-slot": "tour-control",
         className: cn('order-2 mt-3 flex flex-wrap justify-end gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "tour-control"
     });
 });
 const Tour_TourActionTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Tour.ActionTrigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "tour-action-trigger",
         className: cn(!asChild && "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 font-medium whitespace-nowrap text-foreground no-underline outline-0 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 data-[type=close]:border-primary data-[type=close]:bg-primary data-[type=close]:text-primary-foreground data-[type=next]:border-primary data-[type=next]:bg-primary data-[type=next]:text-primary-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:is([data-type='next'],[data-type='close']):not(:disabled):not([data-disabled]):hover]:border-[color-mix(in_oklab,var(--color-primary),black_12%)] [@media(hover:hover)]:[&:is([data-type='next'],[data-type='close']):not(:disabled):not([data-disabled]):hover]:bg-[color-mix(in_oklab,var(--color-primary),black_12%)] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent", className),
-        ...props
+        ...props,
+        "data-slot": "tour-action-trigger"
     });
 });
 const TourActions = Tour.Actions;

package/dist/components/tree-view/TreeView.js

@@ -7,141 +7,141 @@ import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/i
 const TreeView_TreeViewRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Root, {
         ref: ref,
-        "data-slot": "tree-view-root",
         className: cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-root"
     });
 });
 const TreeView_TreeViewRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.RootProvider, {
         ref: ref,
-        "data-slot": "tree-view-root-provider",
         className: cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-root-provider"
     });
 });
 const TreeView_TreeViewLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Label, {
         ref: ref,
-        "data-slot": "tree-view-label",
         className: cn('text-sm leading-5 font-medium text-foreground select-none', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-label"
     });
 });
 const TreeView_TreeViewTree = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Tree, {
         ref: ref,
-        "data-slot": "tree-view-tree",
         className: cn('flex min-w-0 flex-col gap-1 text-sm leading-5 text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-tree"
     });
 });
 const TreeView_TreeViewBranch = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Branch, {
         ref: ref,
-        "data-slot": "tree-view-branch",
         className: cn('relative flex min-w-0 flex-col gap-1', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-branch"
     });
 });
 const TreeView_TreeViewBranchControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchControl, {
         ref: ref,
-        "data-slot": "tree-view-branch-control",
         className: cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-branch-control"
     });
 });
 const TreeView_TreeViewBranchTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchTrigger, {
         ref: ref,
-        "data-slot": "tree-view-branch-trigger",
         className: cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', className),
         ...props,
+        "data-slot": "tree-view-branch-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
 });
 const TreeView_TreeViewBranchIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchIndicator, {
         ref: ref,
-        "data-slot": "tree-view-branch-indicator",
         className: cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', className),
         ...props,
+        "data-slot": "tree-view-branch-indicator",
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
     });
 });
 const TreeView_TreeViewBranchText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchText, {
         ref: ref,
-        "data-slot": "tree-view-branch-text",
         className: cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-branch-text"
     });
 });
 const TreeView_TreeViewBranchContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchContent, {
         ref: ref,
-        "data-slot": "tree-view-branch-content",
         className: cn('relative flex min-w-0 flex-col gap-1 overflow-hidden data-[state=closed]:animate-[moduix-collapsible-content-closed_150ms_ease-out] data-[state=open]:animate-[moduix-collapsible-content-open_150ms_ease-out] motion-reduce:animate-none', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-branch-content"
     });
 });
 const TreeView_TreeViewBranchIndentGuide = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.BranchIndentGuide, {
         ref: ref,
-        "data-slot": "tree-view-branch-indent-guide",
         className: cn('pointer-events-none absolute inset-y-0 start-[calc(1rem+((var(--depth,1)-1)*1rem))] z-1 w-px bg-border', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-branch-indent-guide"
     });
 });
 const TreeView_TreeViewItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.Item, {
         ref: ref,
-        "data-slot": "tree-view-item",
         className: cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(1rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-item"
     });
 });
 const TreeView_TreeViewItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.ItemText, {
         ref: ref,
-        "data-slot": "tree-view-item-text",
         className: cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-item-text"
     });
 });
 const TreeView_TreeViewItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.ItemIndicator, {
         ref: ref,
-        "data-slot": "tree-view-item-indicator",
         className: cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5', className),
         ...props,
+        "data-slot": "tree-view-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
 const TreeView_TreeViewNodeCheckbox = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.NodeCheckbox, {
         ref: ref,
-        "data-slot": "tree-view-node-checkbox",
         className: cn('inline-flex size-4 shrink-0 items-center justify-center rounded-xs border border-border bg-background text-primary-foreground outline-1 outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary motion-reduce:transition-none [&_svg]:size-3', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-node-checkbox"
     });
 });
 function TreeViewNodeCheckboxIndicator({ className, children, indeterminate, ...props }) {
     return /*#__PURE__*/ jsx(TreeView.NodeCheckboxIndicator, {
-        "data-slot": "tree-view-node-checkbox-indicator",
         className: cn('inline-flex items-center justify-center', className),
         indeterminate: indeterminate ?? /*#__PURE__*/ jsx(IndeterminateIcon, {}),
         ...props,
+        "data-slot": "tree-view-node-checkbox-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 }
 const TreeView_TreeViewNodeRenameInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(TreeView.NodeRenameInput, {
         ref: ref,
-        "data-slot": "tree-view-node-rename-input",
         className: cn('box-border min-w-0 flex-1 rounded-xs border border-ring bg-background px-1 py-0 text-foreground outline-1 -outline-offset-1 outline-transparent [font:inherit] focus-visible:outline-ring', className),
-        ...props
+        ...props,
+        "data-slot": "tree-view-node-rename-input"
     });
 });
 const TreeViewNodeProvider = TreeView.NodeProvider;

package/dist/styles/animations.css

@@ -124,44 +124,44 @@
 @keyframes moduix-accordion-item-content-open {
   from {
     height: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
   to {
     height: var(--height);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
 }
 
 @keyframes moduix-accordion-item-content-closed {
   from {
     height: var(--height);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
   to {
     height: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
 }
 
 @keyframes moduix-accordion-item-content-open-horizontal {
   from {
     width: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
   to {
     width: var(--width);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
 }
 
 @keyframes moduix-accordion-item-content-closed-horizontal {
   from {
     width: var(--width);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
   to {
     width: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduix/react-tailwind",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Tailwind CSS implementation of the moduix React component system, built on Ark UI primitives.",
   "keywords": [
     "accessible",