@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/tour/Tour.js

@@ -44,11 +44,12 @@ function TourBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Tour.Backdrop, mergeProps({
-                "data-slot": "tour-backdrop",
                 get ["class"] () {
                     return 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', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "tour-backdrop"
+            }));
         }
     });
 }
@@ -59,11 +60,12 @@ function TourSpotlight(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Tour.Spotlight, mergeProps({
-                "data-slot": "tour-spotlight",
                 get ["class"] () {
                     return cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "tour-spotlight"
+            }));
         }
     });
 }
@@ -74,11 +76,12 @@ function TourPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Tour.Positioner, mergeProps({
-                "data-slot": "tour-positioner",
                 get ["class"] () {
-                    return 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', local.class);
+                    return 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', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "tour-positioner"
+            }));
         }
     });
 }
@@ -87,11 +90,12 @@ function TourContent(props) {
         'class'
     ]);
     return createComponent(Tour.Content, mergeProps({
-        "data-slot": "tour-content",
         get ["class"] () {
             return 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', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-content"
+    }));
 }
 function TourArrow(props) {
     const [local, others] = splitProps(props, [
@@ -100,11 +104,11 @@ function TourArrow(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Tour.Arrow, mergeProps({
-        "data-slot": "tour-arrow",
         get ["class"] () {
             return cn('!size-2.5', local.class);
         }
     }, others, {
+        "data-slot": "tour-arrow",
         get children () {
             return resolvedChildren() ?? createComponent(TourArrowTip, {});
         }
@@ -115,55 +119,60 @@ function TourArrowTip(props) {
         'class'
     ]);
     return createComponent(Tour.ArrowTip, mergeProps({
-        "data-slot": "tour-arrow-tip",
         get ["class"] () {
             return cn('border-t border-l border-border !bg-popover', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-arrow-tip"
+    }));
 }
 function TourTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tour.Title, mergeProps({
-        "data-slot": "tour-title",
         get ["class"] () {
             return cn('pe-6 text-md leading-6 font-semibold text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-title"
+    }));
 }
 function TourDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tour.Description, mergeProps({
-        "data-slot": "tour-description",
         get ["class"] () {
             return cn('text-sm leading-5 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-description"
+    }));
 }
 function TourProgressText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tour.ProgressText, mergeProps({
-        "data-slot": "tour-progress-text",
         get ["class"] () {
             return cn('order-1 mt-2 text-xs leading-4 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-progress-text"
+    }));
 }
 function TourBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "tour-body",
         get ["class"] () {
             return cn('flex min-h-0 flex-col gap-1 overflow-auto', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-body"
+    }));
 }
 function TourCloseTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -174,11 +183,12 @@ function TourCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tour-close-trigger",
         get ["class"] () {
             return cn(!local.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', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-close-trigger"
+    }));
 }
 function TourCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -211,11 +221,12 @@ function TourControl(props) {
         'class'
     ]);
     return createComponent(Tour.Control, mergeProps({
-        "data-slot": "tour-control",
         get ["class"] () {
             return cn('order-2 mt-3 flex flex-wrap justify-end gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-control"
+    }));
 }
 function TourActionTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -226,11 +237,12 @@ function TourActionTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tour-action-trigger",
         get ["class"] () {
             return cn(!local.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", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tour-action-trigger"
+    }));
 }
 const TourActions = Tour.Actions;
 function TourActionList(props) {

package/dist/components/tour/Tour.jsx

@@ -24,7 +24,7 @@ function TourBackdrop(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Tour.Backdrop data-slot="tour-backdrop" class={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', local.class)} {...others}/>
+      <Tour.Backdrop class={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', local.class)} {...others} data-slot="tour-backdrop"/>
     </OverlayPortal>;
 }
 function TourSpotlight(props) {
@@ -32,7 +32,7 @@ function TourSpotlight(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Tour.Spotlight data-slot="tour-spotlight" class={cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class)} {...others}/>
+      <Tour.Spotlight class={cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class)} {...others} data-slot="tour-spotlight"/>
     </OverlayPortal>;
 }
 function TourPositioner(props) {
@@ -40,14 +40,14 @@ function TourPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Tour.Positioner data-slot="tour-positioner" class={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', local.class)} {...others}/>
+      <Tour.Positioner class={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', local.class)} {...others} data-slot="tour-positioner"/>
     </OverlayPortal>;
 }
 function TourContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tour.Content data-slot="tour-content" class={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', local.class)} {...others}/>;
+    return <Tour.Content class={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', local.class)} {...others} data-slot="tour-content"/>;
 }
 function TourArrow(props) {
     const [local, others] = splitProps(props, [
@@ -55,7 +55,7 @@ function TourArrow(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Tour.Arrow data-slot="tour-arrow" class={cn('!size-2.5', local.class)} {...others}>
+    return <Tour.Arrow class={cn('!size-2.5', local.class)} {...others} data-slot="tour-arrow">
       {resolvedChildren() ?? <TourArrowTip/>}
     </Tour.Arrow>;
 }
@@ -63,38 +63,38 @@ function TourArrowTip(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tour.ArrowTip data-slot="tour-arrow-tip" class={cn('border-t border-l border-border !bg-popover', local.class)} {...others}/>;
+    return <Tour.ArrowTip class={cn('border-t border-l border-border !bg-popover', local.class)} {...others} data-slot="tour-arrow-tip"/>;
 }
 function TourTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tour.Title data-slot="tour-title" class={cn('pe-6 text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others}/>;
+    return <Tour.Title class={cn('pe-6 text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others} data-slot="tour-title"/>;
 }
 function TourDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tour.Description data-slot="tour-description" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <Tour.Description class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="tour-description"/>;
 }
 function TourProgressText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tour.ProgressText data-slot="tour-progress-text" class={cn('order-1 mt-2 text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+    return <Tour.ProgressText class={cn('order-1 mt-2 text-xs leading-4 text-muted-foreground', local.class)} {...others} data-slot="tour-progress-text"/>;
 }
 function TourBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="tour-body" class={cn('flex min-h-0 flex-col gap-1 overflow-auto', local.class)} {...others}/>;
+    return <ark.div class={cn('flex min-h-0 flex-col gap-1 overflow-auto', local.class)} {...others} data-slot="tour-body"/>;
 }
 function TourCloseTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Tour.CloseTrigger asChild={local.asChild} data-slot="tour-close-trigger" class={cn(!local.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', local.class)} {...others}/>;
+    return <Tour.CloseTrigger asChild={local.asChild} class={cn(!local.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', local.class)} {...others} data-slot="tour-close-trigger"/>;
 }
 function TourCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -112,14 +112,14 @@ function TourControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tour.Control data-slot="tour-control" class={cn('order-2 mt-3 flex flex-wrap justify-end gap-2', local.class)} {...others}/>;
+    return <Tour.Control class={cn('order-2 mt-3 flex flex-wrap justify-end gap-2', local.class)} {...others} data-slot="tour-control"/>;
 }
 function TourActionTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Tour.ActionTrigger asChild={local.asChild} data-slot="tour-action-trigger" class={cn(!local.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", local.class)} {...others}/>;
+    return <Tour.ActionTrigger asChild={local.asChild} class={cn(!local.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", local.class)} {...others} data-slot="tour-action-trigger"/>;
 }
 const TourActions = Tour.Actions;
 function TourActionList(props) {

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

@@ -14,11 +14,11 @@ const TreeView_TreeViewRoot = function(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tree-view-root",
         get ["class"] () {
             return cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "tree-view-root",
         get children () {
             return local.children;
         }
@@ -34,11 +34,11 @@ const TreeView_TreeViewRootProvider = function(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tree-view-root-provider",
         get ["class"] () {
             return cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "tree-view-root-provider",
         get children () {
             return local.children;
         }
@@ -49,44 +49,48 @@ function TreeViewLabel(props) {
         'class'
     ]);
     return createComponent(TreeView.Label, mergeProps({
-        "data-slot": "tree-view-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-label"
+    }));
 }
 function TreeViewTree(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.Tree, mergeProps({
-        "data-slot": "tree-view-tree",
         get ["class"] () {
             return cn('flex min-w-0 flex-col gap-1 text-sm leading-5 text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-tree"
+    }));
 }
 function TreeViewBranch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.Branch, mergeProps({
-        "data-slot": "tree-view-branch",
         get ["class"] () {
             return cn('relative flex min-w-0 flex-col gap-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-branch"
+    }));
 }
 function TreeViewBranchControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.BranchControl, mergeProps({
-        "data-slot": "tree-view-branch-control",
         get ["class"] () {
             return 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", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-branch-control"
+    }));
 }
 function TreeViewBranchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -95,11 +99,11 @@ function TreeViewBranchTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(TreeView.BranchTrigger, mergeProps({
-        "data-slot": "tree-view-branch-trigger",
         get ["class"] () {
             return 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', local.class);
         }
     }, others, {
+        "data-slot": "tree-view-branch-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(ChevronRightIcon, {});
         }
@@ -112,11 +116,11 @@ function TreeViewBranchIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(TreeView.BranchIndicator, mergeProps({
-        "data-slot": "tree-view-branch-indicator",
         get ["class"] () {
             return 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', local.class);
         }
     }, others, {
+        "data-slot": "tree-view-branch-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(ChevronRightIcon, {});
         }
@@ -127,55 +131,60 @@ function TreeViewBranchText(props) {
         'class'
     ]);
     return createComponent(TreeView.BranchText, mergeProps({
-        "data-slot": "tree-view-branch-text",
         get ["class"] () {
             return cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-branch-text"
+    }));
 }
 function TreeViewBranchContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.BranchContent, mergeProps({
-        "data-slot": "tree-view-branch-content",
         get ["class"] () {
             return 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', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-branch-content"
+    }));
 }
 function TreeViewBranchIndentGuide(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.BranchIndentGuide, mergeProps({
-        "data-slot": "tree-view-branch-indent-guide",
         get ["class"] () {
             return cn('pointer-events-none absolute inset-y-0 start-[calc(1rem+((var(--depth,1)-1)*1rem))] z-1 w-px bg-border', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-branch-indent-guide"
+    }));
 }
 function TreeViewItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.Item, mergeProps({
-        "data-slot": "tree-view-item",
         get ["class"] () {
             return 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", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-item"
+    }));
 }
 function TreeViewItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TreeView.ItemText, mergeProps({
-        "data-slot": "tree-view-item-text",
         get ["class"] () {
             return cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-item-text"
+    }));
 }
 function TreeViewItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -184,11 +193,11 @@ function TreeViewItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(TreeView.ItemIndicator, mergeProps({
-        "data-slot": "tree-view-item-indicator",
         get ["class"] () {
             return cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5', local.class);
         }
     }, others, {
+        "data-slot": "tree-view-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -199,11 +208,12 @@ function TreeViewNodeCheckbox(props) {
         'class'
     ]);
     return createComponent(TreeView.NodeCheckbox, mergeProps({
-        "data-slot": "tree-view-node-checkbox",
         get ["class"] () {
             return 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', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-node-checkbox"
+    }));
 }
 function TreeViewNodeCheckboxIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -218,11 +228,11 @@ function TreeViewNodeCheckboxIndicator(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tree-view-node-checkbox-indicator",
         get ["class"] () {
             return cn('inline-flex items-center justify-center', local.class);
         }
     }, others, {
+        "data-slot": "tree-view-node-checkbox-indicator",
         get children () {
             return createComponent(TreeView.NodeCheckboxIndicator, {
                 get fallback () {
@@ -243,11 +253,12 @@ function TreeViewNodeRenameInput(props) {
         'class'
     ]);
     return createComponent(TreeView.NodeRenameInput, mergeProps({
-        "data-slot": "tree-view-node-rename-input",
         get ["class"] () {
             return 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', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tree-view-node-rename-input"
+    }));
 }
 const TreeViewNodeProvider = TreeView.NodeProvider;
 function TreeViewNodeContent(props) {