@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/tabs/Tabs.js

@@ -9,7 +9,6 @@ function TabsRoot(props) {
         'variant'
     ]);
     return createComponent(Tabs.Root, mergeProps({
-        "data-slot": "tabs-root",
         get ["data-variant"] () {
             return memo(()=>'vertical' === local.orientation)() ? 'default' : local.variant ?? 'default';
         },
@@ -19,7 +18,9 @@ function TabsRoot(props) {
         get orientation () {
             return local.orientation;
         }
-    }, others));
+    }, others, {
+        "data-slot": "tabs-root"
+    }));
 }
 function TabsRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -29,7 +30,6 @@ function TabsRootProvider(props) {
     ]);
     const orientation = ()=>local.value().getRootProps()['data-orientation'];
     return createComponent(Tabs.RootProvider, mergeProps({
-        "data-slot": "tabs-root-provider",
         get ["data-variant"] () {
             return memo(()=>'vertical' === orientation())() ? 'default' : local.variant ?? 'default';
         },
@@ -39,51 +39,57 @@ function TabsRootProvider(props) {
         get value () {
             return local.value;
         }
-    }, others));
+    }, others, {
+        "data-slot": "tabs-root-provider"
+    }));
 }
 function TabsList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tabs.List, mergeProps({
-        "data-slot": "tabs-list",
         get ["class"] () {
             return cn('relative z-0 inline-flex w-fit max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 group-data-[orientation=horizontal]/tabs:overflow-x-auto group-data-[orientation=vertical]/tabs:w-48 group-data-[orientation=vertical]/tabs:min-w-48 group-data-[orientation=vertical]/tabs:flex-col group-data-[variant=line]/tabs:w-full group-data-[variant=line]/tabs:rounded-none group-data-[variant=line]/tabs:border-x-0 group-data-[variant=line]/tabs:border-t-0 group-data-[variant=line]/tabs:bg-transparent group-data-[variant=line]/tabs:px-0 group-data-[orientation=vertical]/tabs:max-[30rem]:w-2/5 group-data-[orientation=vertical]/tabs:max-[30rem]:min-w-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tabs-list"
+    }));
 }
 function TabsTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tabs.Trigger, mergeProps({
-        "data-slot": "tabs-trigger",
         get ["class"] () {
             return cn("relative z-1 inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-md border-0 bg-transparent px-2.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground no-underline outline-0 transition-[color,opacity] duration-200 ease-in-out select-none focus-visible:before:pointer-events-none focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:rounded-[inherit] focus-visible:before:outline-1 focus-visible:before:outline-ring focus-visible:before:content-[''] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-selected:text-foreground motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:hover:text-foreground", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tabs-trigger"
+    }));
 }
 function TabsIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tabs.Indicator, mergeProps({
-        "data-slot": "tabs-indicator",
         get ["class"] () {
             return cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tabs-indicator"
+    }));
 }
 function TabsContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Tabs.Content, mergeProps({
-        "data-slot": "tabs-content",
         get ["class"] () {
             return cn("box-border min-w-0 flex-1 rounded-lg border border-border bg-background p-4 text-sm leading-5 text-foreground outline-0 focus-visible:rounded-[inherit] focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tabs-content"
+    }));
 }
 const Tabs_Tabs = Object.assign(TabsRoot, {
     Root: TabsRoot,

package/dist/components/tabs/Tabs.jsx

@@ -7,7 +7,7 @@ function TabsRoot(props) {
         'orientation',
         'variant'
     ]);
-    return <Tabs.Root data-slot="tabs-root" data-variant={'vertical' === local.orientation ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} orientation={local.orientation} {...others}/>;
+    return <Tabs.Root data-variant={'vertical' === local.orientation ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} orientation={local.orientation} {...others} data-slot="tabs-root"/>;
 }
 function TabsRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -16,31 +16,31 @@ function TabsRootProvider(props) {
         'variant'
     ]);
     const orientation = ()=>local.value().getRootProps()['data-orientation'];
-    return <Tabs.RootProvider data-slot="tabs-root-provider" data-variant={'vertical' === orientation() ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} value={local.value} {...others}/>;
+    return <Tabs.RootProvider data-variant={'vertical' === orientation() ? 'default' : local.variant ?? 'default'} class={cn('group/tabs box-border flex w-full min-w-0 flex-col gap-3 text-foreground data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-stretch', local.class)} value={local.value} {...others} data-slot="tabs-root-provider"/>;
 }
 function TabsList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tabs.List data-slot="tabs-list" class={cn('relative z-0 inline-flex w-fit max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 group-data-[orientation=horizontal]/tabs:overflow-x-auto group-data-[orientation=vertical]/tabs:w-48 group-data-[orientation=vertical]/tabs:min-w-48 group-data-[orientation=vertical]/tabs:flex-col group-data-[variant=line]/tabs:w-full group-data-[variant=line]/tabs:rounded-none group-data-[variant=line]/tabs:border-x-0 group-data-[variant=line]/tabs:border-t-0 group-data-[variant=line]/tabs:bg-transparent group-data-[variant=line]/tabs:px-0 group-data-[orientation=vertical]/tabs:max-[30rem]:w-2/5 group-data-[orientation=vertical]/tabs:max-[30rem]:min-w-0', local.class)} {...others}/>;
+    return <Tabs.List class={cn('relative z-0 inline-flex w-fit max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 group-data-[orientation=horizontal]/tabs:overflow-x-auto group-data-[orientation=vertical]/tabs:w-48 group-data-[orientation=vertical]/tabs:min-w-48 group-data-[orientation=vertical]/tabs:flex-col group-data-[variant=line]/tabs:w-full group-data-[variant=line]/tabs:rounded-none group-data-[variant=line]/tabs:border-x-0 group-data-[variant=line]/tabs:border-t-0 group-data-[variant=line]/tabs:bg-transparent group-data-[variant=line]/tabs:px-0 group-data-[orientation=vertical]/tabs:max-[30rem]:w-2/5 group-data-[orientation=vertical]/tabs:max-[30rem]:min-w-0', local.class)} {...others} data-slot="tabs-list"/>;
 }
 function TabsTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tabs.Trigger data-slot="tabs-trigger" class={cn("relative z-1 inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-md border-0 bg-transparent px-2.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground no-underline outline-0 transition-[color,opacity] duration-200 ease-in-out select-none focus-visible:before:pointer-events-none focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:rounded-[inherit] focus-visible:before:outline-1 focus-visible:before:outline-ring focus-visible:before:content-[''] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-selected:text-foreground motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:hover:text-foreground", local.class)} {...others}/>;
+    return <Tabs.Trigger class={cn("relative z-1 inline-flex h-8 cursor-pointer items-center justify-center gap-2 rounded-md border-0 bg-transparent px-2.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground no-underline outline-0 transition-[color,opacity] duration-200 ease-in-out select-none focus-visible:before:pointer-events-none focus-visible:before:absolute focus-visible:before:inset-0 focus-visible:before:rounded-[inherit] focus-visible:before:outline-1 focus-visible:before:outline-ring focus-visible:before:content-[''] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-selected:text-foreground motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:hover:text-foreground", local.class)} {...others} data-slot="tabs-trigger"/>;
 }
 function TabsIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tabs.Indicator data-slot="tabs-indicator" class={cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Tabs.Indicator class={cn('pointer-events-none absolute top-1/2 left-[var(--left,0)] z-0 h-8 w-[var(--width,0)] -translate-y-1/2 rounded-md bg-background shadow-sm transition-[var(--transition-property,translate)] duration-200 ease-in-out group-data-[orientation=vertical]/tabs:top-[var(--top,0)] group-data-[orientation=vertical]/tabs:left-1/2 group-data-[orientation=vertical]/tabs:h-[var(--height,0)] group-data-[orientation=vertical]/tabs:w-[calc(100%-0.5rem)] group-data-[orientation=vertical]/tabs:-translate-x-1/2 group-data-[orientation=vertical]/tabs:translate-y-0 group-data-[variant=line]/tabs:top-auto group-data-[variant=line]/tabs:bottom-0 group-data-[variant=line]/tabs:h-0.5 group-data-[variant=line]/tabs:[translate:none] group-data-[variant=line]/tabs:rounded-full group-data-[variant=line]/tabs:bg-foreground group-data-[variant=line]/tabs:shadow-none motion-reduce:transition-none', local.class)} {...others} data-slot="tabs-indicator"/>;
 }
 function TabsContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Tabs.Content data-slot="tabs-content" class={cn("box-border min-w-0 flex-1 rounded-lg border border-border bg-background p-4 text-sm leading-5 text-foreground outline-0 focus-visible:rounded-[inherit] focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+    return <Tabs.Content class={cn("box-border min-w-0 flex-1 rounded-lg border border-border bg-background p-4 text-sm leading-5 text-foreground outline-0 focus-visible:rounded-[inherit] focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others} data-slot="tabs-content"/>;
 }
 const Tabs_Tabs = Object.assign(TabsRoot, {
     Root: TabsRoot,

package/dist/components/tags-input/TagsInput.js

@@ -14,11 +14,11 @@ function TagsInputRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tags-input-root",
         get ["class"] () {
             return cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "tags-input-root",
         get children () {
             return local.children;
         }
@@ -34,11 +34,11 @@ function TagsInputRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tags-input-root-provider",
         get ["class"] () {
             return cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "tags-input-root-provider",
         get children () {
             return local.children;
         }
@@ -49,55 +49,60 @@ function TagsInputLabel(props) {
         'class'
     ]);
     return createComponent(TagsInput.Label, mergeProps({
-        "data-slot": "tags-input-label",
         get ["class"] () {
             return cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-label"
+    }));
 }
 function TagsInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TagsInput.Control, mergeProps({
-        "data-slot": "tags-input-control",
         get ["class"] () {
             return cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-control"
+    }));
 }
 function TagsInputItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TagsInput.Item, mergeProps({
-        "data-slot": "tags-input-item",
         get ["class"] () {
             return cn('contents', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-item"
+    }));
 }
 function TagsInputItemPreview(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TagsInput.ItemPreview, mergeProps({
-        "data-slot": "tags-input-item-preview",
         get ["class"] () {
             return cn('inline-flex min-h-control-xs max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-xs leading-4 font-medium text-secondary-foreground transition-[border-color,background-color,color,box-shadow] duration-200 ease-in-out data-disabled:opacity-50 data-highlighted:ring-1 data-highlighted:ring-ring motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-item-preview"
+    }));
 }
 function TagsInputItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TagsInput.ItemText, mergeProps({
-        "data-slot": "tags-input-item-text",
         get ["class"] () {
             return cn('min-w-0 truncate', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-item-text"
+    }));
 }
 function TagsInputItemDeleteTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -106,11 +111,11 @@ function TagsInputItemDeleteTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(TagsInput.ItemDeleteTrigger, mergeProps({
-        "data-slot": "tags-input-item-delete-trigger",
         get ["class"] () {
             return cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', local.class);
         }
     }, others, {
+        "data-slot": "tags-input-item-delete-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(CloseIcon, {});
         }
@@ -121,22 +126,24 @@ function TagsInputItemInput(props) {
         'class'
     ]);
     return createComponent(TagsInput.ItemInput, mergeProps({
-        "data-slot": "tags-input-item-input",
         get ["class"] () {
             return cn('h-control-xs min-w-28 shrink grow-0 basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:cursor-default', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-item-input"
+    }));
 }
 function TagsInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(TagsInput.Input, mergeProps({
-        "data-slot": "tags-input-input",
         get ["class"] () {
             return cn('h-control-xs min-w-28 shrink grow basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:hidden data-readonly:cursor-default', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-input"
+    }));
 }
 function TagsInputClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -153,7 +160,6 @@ function TagsInputClearTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "tags-input-clear-trigger",
         get ["class"] () {
             return cn('ms-auto shrink-0 self-center data-readonly:hidden', local.class);
         },
@@ -164,6 +170,7 @@ function TagsInputClearTrigger(props) {
             return local['aria-labelledby'];
         }
     }, others, {
+        "data-slot": "tags-input-clear-trigger",
         get children () {
             return local.children;
         }
@@ -183,11 +190,12 @@ function TagsInputClearTrigger(props) {
                     return resolvedChildren();
                 }
             })),
-        "data-slot": "tags-input-clear-trigger",
         get ["class"] () {
             return cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "tags-input-clear-trigger"
+    }));
 }
 const TagsInputContext = TagsInput.Context;
 function TagsInputItems() {

package/dist/components/tags-input/TagsInput.jsx

@@ -9,7 +9,7 @@ function TagsInputRoot(props) {
         'children',
         'class'
     ]);
-    return <TagsInput.Root asChild={local.asChild} data-slot="tags-input-root" class={cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <TagsInput.Root asChild={local.asChild} class={cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="tags-input-root">
       {local.children}
     </TagsInput.Root>;
 }
@@ -19,7 +19,7 @@ function TagsInputRootProvider(props) {
         'children',
         'class'
     ]);
-    return <TagsInput.RootProvider asChild={local.asChild} data-slot="tags-input-root-provider" class={cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <TagsInput.RootProvider asChild={local.asChild} class={cn('flex w-full max-w-96 flex-col gap-1 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="tags-input-root-provider">
       {local.children}
     </TagsInput.RootProvider>;
 }
@@ -27,31 +27,31 @@ function TagsInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.Label data-slot="tags-input-label" class={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <TagsInput.Label class={cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="tags-input-label"/>;
 }
 function TagsInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.Control data-slot="tags-input-control" class={cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others}/>;
+    return <TagsInput.Control class={cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others} data-slot="tags-input-control"/>;
 }
 function TagsInputItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.Item data-slot="tags-input-item" class={cn('contents', local.class)} {...others}/>;
+    return <TagsInput.Item class={cn('contents', local.class)} {...others} data-slot="tags-input-item"/>;
 }
 function TagsInputItemPreview(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.ItemPreview data-slot="tags-input-item-preview" class={cn('inline-flex min-h-control-xs max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-xs leading-4 font-medium text-secondary-foreground transition-[border-color,background-color,color,box-shadow] duration-200 ease-in-out data-disabled:opacity-50 data-highlighted:ring-1 data-highlighted:ring-ring motion-reduce:transition-none', local.class)} {...others}/>;
+    return <TagsInput.ItemPreview class={cn('inline-flex min-h-control-xs max-w-full min-w-0 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-xs leading-4 font-medium text-secondary-foreground transition-[border-color,background-color,color,box-shadow] duration-200 ease-in-out data-disabled:opacity-50 data-highlighted:ring-1 data-highlighted:ring-ring motion-reduce:transition-none', local.class)} {...others} data-slot="tags-input-item-preview"/>;
 }
 function TagsInputItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.ItemText data-slot="tags-input-item-text" class={cn('min-w-0 truncate', local.class)} {...others}/>;
+    return <TagsInput.ItemText class={cn('min-w-0 truncate', local.class)} {...others} data-slot="tags-input-item-text"/>;
 }
 function TagsInputItemDeleteTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -59,7 +59,7 @@ function TagsInputItemDeleteTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <TagsInput.ItemDeleteTrigger data-slot="tags-input-item-delete-trigger" class={cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', local.class)} {...others}>
+    return <TagsInput.ItemDeleteTrigger class={cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', local.class)} {...others} data-slot="tags-input-item-delete-trigger">
       {resolvedChildren() ?? <CloseIcon/>}
     </TagsInput.ItemDeleteTrigger>;
 }
@@ -67,13 +67,13 @@ function TagsInputItemInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.ItemInput data-slot="tags-input-item-input" class={cn('h-control-xs min-w-28 shrink grow-0 basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:cursor-default', local.class)} {...others}/>;
+    return <TagsInput.ItemInput class={cn('h-control-xs min-w-28 shrink grow-0 basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:cursor-default', local.class)} {...others} data-slot="tags-input-item-input"/>;
 }
 function TagsInputInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.Input data-slot="tags-input-input" class={cn('h-control-xs min-w-28 shrink grow basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:hidden data-readonly:cursor-default', local.class)} {...others}/>;
+    return <TagsInput.Input class={cn('h-control-xs min-w-28 shrink grow basis-28 border-0 bg-transparent px-1 text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground read-only:cursor-default data-readonly:hidden data-readonly:cursor-default', local.class)} {...others} data-slot="tags-input-input"/>;
 }
 function TagsInputClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -86,12 +86,12 @@ function TagsInputClearTrigger(props) {
     const tagsInput = useTagsInputContext();
     const resolvedChildren = children(()=>local.children);
     const clearTriggerLabel = ()=>tagsInput().getClearTriggerProps()['aria-label'];
-    if (local.asChild) return <TagsInput.ClearTrigger asChild={local.asChild} data-slot="tags-input-clear-trigger" class={cn('ms-auto shrink-0 self-center data-readonly:hidden', local.class)} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} {...others}>
+    if (local.asChild) return <TagsInput.ClearTrigger asChild={local.asChild} class={cn('ms-auto shrink-0 self-center data-readonly:hidden', local.class)} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} {...others} data-slot="tags-input-clear-trigger">
         {local.children}
       </TagsInput.ClearTrigger>;
     return <TagsInput.ClearTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} aria-label={local['aria-label'] ?? clearTriggerLabel()} aria-labelledby={local['aria-labelledby']} data-part="clear-trigger" data-scope="tags-input" data-slot="tags-input-clear-trigger">
           {resolvedChildren()}
-        </CloseButton.Root>} data-slot="tags-input-clear-trigger" class={cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} {...others}/>;
+        </CloseButton.Root>} class={cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} {...others} data-slot="tags-input-clear-trigger"/>;
 }
 const TagsInputContext = TagsInput.Context;
 function TagsInputItems() {

package/dist/components/timer/Timer.js

@@ -7,77 +7,84 @@ function TimerRoot(props) {
         'class'
     ]);
     return createComponent(Timer.Root, mergeProps({
-        "data-slot": "timer-root",
         get ["class"] () {
             return cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-root"
+    }));
 }
 function TimerRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Timer.RootProvider, mergeProps({
-        "data-slot": "timer-root-provider",
         get ["class"] () {
             return cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-root-provider"
+    }));
 }
 function TimerArea(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Timer.Area, mergeProps({
-        "data-slot": "timer-area",
         get ["class"] () {
             return cn('inline-flex max-w-full min-w-0 flex-wrap items-baseline justify-center gap-1 text-2xl leading-5 font-semibold tracking-normal tabular-nums', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-area"
+    }));
 }
 function TimerItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Timer.Item, mergeProps({
-        "data-slot": "timer-item",
         get ["class"] () {
             return cn('min-w-[2ch] text-center', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-item"
+    }));
 }
 function TimerSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Timer.Separator, mergeProps({
-        "data-slot": "timer-separator",
         get ["class"] () {
             return cn('text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-separator"
+    }));
 }
 function TimerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Timer.Control, mergeProps({
-        "data-slot": "timer-control",
         get ["class"] () {
             return cn('inline-flex flex-wrap items-center gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-control"
+    }));
 }
 function TimerActionTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Timer.ActionTrigger, mergeProps({
-        "data-slot": "timer-action-trigger",
         get ["class"] () {
             return cn('inline-flex min-h-control-md cursor-pointer appearance-none 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 transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "timer-action-trigger"
+    }));
 }
 const defaultTimerSegmentTypes = [
     'hours',

package/dist/components/timer/Timer.jsx

@@ -5,43 +5,43 @@ function TimerRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.Root data-slot="timer-root" class={cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class)} {...others}/>;
+    return <Timer.Root class={cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class)} {...others} data-slot="timer-root"/>;
 }
 function TimerRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.RootProvider data-slot="timer-root-provider" class={cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class)} {...others}/>;
+    return <Timer.RootProvider class={cn('inline-grid w-max max-w-full place-items-center gap-3 text-foreground', local.class)} {...others} data-slot="timer-root-provider"/>;
 }
 function TimerArea(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.Area data-slot="timer-area" class={cn('inline-flex max-w-full min-w-0 flex-wrap items-baseline justify-center gap-1 text-2xl leading-5 font-semibold tracking-normal tabular-nums', local.class)} {...others}/>;
+    return <Timer.Area class={cn('inline-flex max-w-full min-w-0 flex-wrap items-baseline justify-center gap-1 text-2xl leading-5 font-semibold tracking-normal tabular-nums', local.class)} {...others} data-slot="timer-area"/>;
 }
 function TimerItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.Item data-slot="timer-item" class={cn('min-w-[2ch] text-center', local.class)} {...others}/>;
+    return <Timer.Item class={cn('min-w-[2ch] text-center', local.class)} {...others} data-slot="timer-item"/>;
 }
 function TimerSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.Separator data-slot="timer-separator" class={cn('text-muted-foreground', local.class)} {...others}/>;
+    return <Timer.Separator class={cn('text-muted-foreground', local.class)} {...others} data-slot="timer-separator"/>;
 }
 function TimerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.Control data-slot="timer-control" class={cn('inline-flex flex-wrap items-center gap-2', local.class)} {...others}/>;
+    return <Timer.Control class={cn('inline-flex flex-wrap items-center gap-2', local.class)} {...others} data-slot="timer-control"/>;
 }
 function TimerActionTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.ActionTrigger data-slot="timer-action-trigger" class={cn('inline-flex min-h-control-md cursor-pointer appearance-none 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 transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Timer.ActionTrigger class={cn('inline-flex min-h-control-md cursor-pointer appearance-none 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 transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="timer-action-trigger"/>;
 }
 const defaultTimerSegmentTypes = [
     'hours',