@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/select/Select.js

@@ -28,7 +28,6 @@ const Select_SelectRoot = function(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "select-root",
                 get ["class"] () {
                     return cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
                 },
@@ -39,6 +38,7 @@ const Select_SelectRoot = function(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "select-root",
                 get children () {
                     return local.children;
                 }
@@ -68,7 +68,6 @@ const Select_SelectRootProvider = function(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "select-root-provider",
                 get ["class"] () {
                     return cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
                 },
@@ -79,6 +78,7 @@ const Select_SelectRootProvider = function(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "select-root-provider",
                 get children () {
                     return local.children;
                 }
@@ -91,22 +91,24 @@ function SelectLabel(props) {
         'class'
     ]);
     return createComponent(Select.Label, mergeProps({
-        "data-slot": "select-label",
         get ["class"] () {
             return cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-label"
+    }));
 }
 function SelectControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.Control, mergeProps({
-        "data-slot": "select-control",
         get ["class"] () {
             return cn('group/select-control relative flex w-full min-w-0 items-center text-foreground data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-control"
+    }));
 }
 function SelectTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -117,22 +119,24 @@ function SelectTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "select-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'peer/select-trigger relative inline-flex h-control-md w-full min-w-0 cursor-pointer items-center justify-start rounded-md border border-border bg-background px-3.5 pe-[2.875rem] text-start text-inherit outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out select-none [font:inherit] group-has-[>[data-slot=select-clear-trigger]:not([hidden])]/select-control:pe-[4.25rem] group-data-invalid/select-control:border-destructive group-data-invalid/select-control:outline-destructive focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-trigger"
+    }));
 }
 function SelectValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.ValueText, mergeProps({
-        "data-slot": "select-value-text",
         get ["class"] () {
             return cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-value-text"
+    }));
 }
 function SelectClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -153,11 +157,11 @@ function SelectClearTrigger(props) {
         get ["aria-labelledby"] () {
             return local['aria-labelledby'];
         },
-        "data-slot": "select-clear-trigger",
         get ["class"] () {
             return cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
         }
     }, others, {
+        "data-slot": "select-clear-trigger",
         get children () {
             return local.children;
         }
@@ -177,11 +181,12 @@ function SelectClearTrigger(props) {
                 }
             }));
         },
-        "data-slot": "select-clear-trigger",
         get ["class"] () {
             return cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-clear-trigger"
+    }));
 }
 function SelectIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -190,11 +195,11 @@ function SelectIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Select.Indicator, mergeProps({
-        "data-slot": "select-indicator",
         get ["class"] () {
             return cn('pointer-events-none inline-flex size-control-xs shrink-0 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:bg-muted peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:text-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4', local.class);
         }
     }, others, {
+        "data-slot": "select-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(ChevronUpDownIcon, {});
         }
@@ -240,11 +245,12 @@ function SelectPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Select.Positioner, mergeProps({
-                "data-slot": "select-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "select-positioner"
+            }));
         }
     });
 }
@@ -253,66 +259,72 @@ function SelectContent(props) {
         'class'
     ]);
     return createComponent(Select.Content, mergeProps({
-        "data-slot": "select-content",
         get ["class"] () {
             return cn('z-[calc(60+var(--layer-index,0))] flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-content"
+    }));
 }
 function SelectList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.List, mergeProps({
-        "data-slot": "select-list",
         get ["class"] () {
             return cn('flex min-h-0 scroll-py-1 flex-col overflow-y-auto overscroll-contain outline-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-list"
+    }));
 }
 function SelectItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.ItemGroup, mergeProps({
-        "data-slot": "select-item-group",
         get ["class"] () {
             return cn('flex flex-col [&+&]:mt-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item-group"
+    }));
 }
 function SelectItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.ItemGroupLabel, mergeProps({
-        "data-slot": "select-item-group-label",
         get ["class"] () {
             return cn('px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item-group-label"
+    }));
 }
 function SelectItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.Item, mergeProps({
-        "data-slot": "select-item",
         get ["class"] () {
             return cn('relative mx-1 flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item"
+    }));
 }
 function SelectItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Select.ItemText, mergeProps({
-        "data-slot": "select-item-text",
         get ["class"] () {
             return cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item-text"
+    }));
 }
 function SelectItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -321,11 +333,11 @@ function SelectItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Select.ItemIndicator, mergeProps({
-        "data-slot": "select-item-indicator",
         get ["class"] () {
             return cn('inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3', local.class);
         }
     }, others, {
+        "data-slot": "select-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -336,33 +348,36 @@ function SelectItemTextContent(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "select-item-text-content",
         get ["class"] () {
             return cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item-text-content"
+    }));
 }
 function SelectItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "select-item-text-icon",
         get ["class"] () {
             return cn('inline-flex size-4 shrink-0 items-center justify-center', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item-text-icon"
+    }));
 }
 function SelectItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "select-item-text-label",
         get ["class"] () {
             return cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "select-item-text-label"
+    }));
 }
 const Select_Select = Object.assign(Select_SelectRoot, {
     Root: Select_SelectRoot,

package/dist/components/select/Select.jsx

@@ -16,7 +16,7 @@ const Select_SelectRoot = function(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <Select.Root asChild={local.asChild} data-slot="select-root" class={cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <Select.Root asChild={local.asChild} class={cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="select-root">
         {local.children}
       </Select.Root>
     </OverlayPortalProvider>;
@@ -32,7 +32,7 @@ const Select_SelectRootProvider = function(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <Select.RootProvider asChild={local.asChild} data-slot="select-root-provider" class={cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <Select.RootProvider asChild={local.asChild} class={cn('flex w-56 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="select-root-provider">
         {local.children}
       </Select.RootProvider>
     </OverlayPortalProvider>;
@@ -41,26 +41,26 @@ function SelectLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.Label data-slot="select-label" class={cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class)} {...others}/>;
+    return <Select.Label class={cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class)} {...others} data-slot="select-label"/>;
 }
 function SelectControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.Control data-slot="select-control" class={cn('group/select-control relative flex w-full min-w-0 items-center text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <Select.Control class={cn('group/select-control relative flex w-full min-w-0 items-center text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="select-control"/>;
 }
 function SelectTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Select.Trigger asChild={local.asChild} data-slot="select-trigger" class={cn(!local.asChild && 'peer/select-trigger relative inline-flex h-control-md w-full min-w-0 cursor-pointer items-center justify-start rounded-md border border-border bg-background px-3.5 pe-[2.875rem] text-start text-inherit outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out select-none [font:inherit] group-has-[>[data-slot=select-clear-trigger]:not([hidden])]/select-control:pe-[4.25rem] group-data-invalid/select-control:border-destructive group-data-invalid/select-control:outline-destructive focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others}/>;
+    return <Select.Trigger asChild={local.asChild} class={cn(!local.asChild && 'peer/select-trigger relative inline-flex h-control-md w-full min-w-0 cursor-pointer items-center justify-start rounded-md border border-border bg-background px-3.5 pe-[2.875rem] text-start text-inherit outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out select-none [font:inherit] group-has-[>[data-slot=select-clear-trigger]:not([hidden])]/select-control:pe-[4.25rem] group-data-invalid/select-control:border-destructive group-data-invalid/select-control:outline-destructive focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others} data-slot="select-trigger"/>;
 }
 function SelectValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.ValueText data-slot="select-value-text" class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <Select.ValueText class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="select-value-text"/>;
 }
 function SelectClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -71,7 +71,7 @@ function SelectClearTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    if (local.asChild) return <Select.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="select-clear-trigger" class={cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class)} {...others}>
+    if (local.asChild) return <Select.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class)} {...others} data-slot="select-clear-trigger">
         {local.children}
       </Select.ClearTrigger>;
     return <Select.ClearTrigger asChild={(triggerProps)=>{
@@ -79,7 +79,7 @@ function SelectClearTrigger(props) {
         return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear selection' : void 0)} aria-labelledby={local['aria-labelledby']}>
             {resolvedChildren()}
           </CloseButton.Root>;
-    }} data-slot="select-clear-trigger" class={cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class)} {...others}/>;
+    }} class={cn('pointer-events-auto absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', local.class)} {...others} data-slot="select-clear-trigger"/>;
 }
 function SelectIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -87,7 +87,7 @@ function SelectIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Select.Indicator data-slot="select-indicator" class={cn('pointer-events-none inline-flex size-control-xs shrink-0 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:bg-muted peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:text-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4', local.class)} {...others}>
+    return <Select.Indicator class={cn('pointer-events-none inline-flex size-control-xs shrink-0 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:bg-muted peer-[:not([disabled]):not([data-disabled]):hover]/select-trigger:text-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4', local.class)} {...others} data-slot="select-indicator">
       {resolvedChildren() ?? <ChevronUpDownIcon/>}
     </Select.Indicator>;
 }
@@ -112,44 +112,44 @@ function SelectPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Select.Positioner data-slot="select-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+      <Select.Positioner class={cn('z-[var(--z-index)] outline-0', local.class)} {...others} data-slot="select-positioner"/>
     </OverlayPortal>;
 }
 function SelectContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.Content data-slot="select-content" class={cn('z-[calc(60+var(--layer-index,0))] flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others}/>;
+    return <Select.Content class={cn('z-[calc(60+var(--layer-index,0))] flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others} data-slot="select-content"/>;
 }
 function SelectList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.List data-slot="select-list" class={cn('flex min-h-0 scroll-py-1 flex-col overflow-y-auto overscroll-contain outline-0', local.class)} {...others}/>;
+    return <Select.List class={cn('flex min-h-0 scroll-py-1 flex-col overflow-y-auto overscroll-contain outline-0', local.class)} {...others} data-slot="select-list"/>;
 }
 function SelectItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.ItemGroup data-slot="select-item-group" class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others}/>;
+    return <Select.ItemGroup class={cn('flex flex-col [&+&]:mt-2', local.class)} {...others} data-slot="select-item-group"/>;
 }
 function SelectItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.ItemGroupLabel data-slot="select-item-group-label" class={cn('px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class)} {...others}/>;
+    return <Select.ItemGroupLabel class={cn('px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class)} {...others} data-slot="select-item-group-label"/>;
 }
 function SelectItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.Item data-slot="select-item" class={cn('relative mx-1 flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground', local.class)} {...others}/>;
+    return <Select.Item class={cn('relative mx-1 flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground', local.class)} {...others} data-slot="select-item"/>;
 }
 function SelectItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Select.ItemText data-slot="select-item-text" class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <Select.ItemText class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="select-item-text"/>;
 }
 function SelectItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -157,7 +157,7 @@ function SelectItemIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Select.ItemIndicator data-slot="select-item-indicator" class={cn('inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3', local.class)} {...others}>
+    return <Select.ItemIndicator class={cn('inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3', local.class)} {...others} data-slot="select-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </Select.ItemIndicator>;
 }
@@ -165,19 +165,19 @@ function SelectItemTextContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="select-item-text-content" class={cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class)} {...others}/>;
+    return <ark.span class={cn('inline-flex max-w-full min-w-0 items-center gap-2 align-top', local.class)} {...others} data-slot="select-item-text-content"/>;
 }
 function SelectItemTextIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="select-item-text-icon" class={cn('inline-flex size-4 shrink-0 items-center justify-center', local.class)} {...others}/>;
+    return <ark.span class={cn('inline-flex size-4 shrink-0 items-center justify-center', local.class)} {...others} data-slot="select-item-text-icon"/>;
 }
 function SelectItemTextLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="select-item-text-label" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <ark.span class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="select-item-text-label"/>;
 }
 const Select_Select = Object.assign(Select_SelectRoot, {
     Root: Select_SelectRoot,