@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/file-upload/FileUpload.js

@@ -15,11 +15,11 @@ function FileUploadRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "file-upload-root",
         get ["class"] () {
             return cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "file-upload-root",
         get children () {
             return local.children;
         }
@@ -35,11 +35,11 @@ function FileUploadRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "file-upload-root-provider",
         get ["class"] () {
             return cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "file-upload-root-provider",
         get children () {
             return local.children;
         }
@@ -50,22 +50,24 @@ function FileUploadLabel(props) {
         'class'
     ]);
     return createComponent(FileUpload.Label, mergeProps({
-        "data-slot": "file-upload-label",
         get ["class"] () {
             return cn('text-sm font-medium text-foreground data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-label"
+    }));
 }
 function FileUploadDropzone(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileUpload.Dropzone, mergeProps({
-        "data-slot": "file-upload-dropzone",
         get ["class"] () {
             return cn('box-border grid min-h-32 w-full place-items-center gap-3 rounded-md border border-dashed border-border bg-background p-5 text-center text-muted-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-dragging:border-primary data-dragging:bg-accent data-dragging:text-foreground data-invalid:border-destructive data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&[role=button]:not([data-disabled],[data-readonly])]:cursor-pointer', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-dropzone"
+    }));
 }
 function FileUploadDropzoneIcon(props) {
     const [local, others] = splitProps(props, [
@@ -75,11 +77,11 @@ function FileUploadDropzoneIcon(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(ark.span, mergeProps({
         "aria-hidden": "true",
-        "data-slot": "file-upload-dropzone-icon",
         get ["class"] () {
             return cn('box-border inline-flex size-10 items-center justify-center rounded-full border border-border bg-muted text-foreground [&>svg]:size-4', local.class);
         }
     }, others, {
+        "data-slot": "file-upload-dropzone-icon",
         get children () {
             return resolvedChildren() ?? createComponent(UploadIcon, {});
         }
@@ -90,66 +92,72 @@ function FileUploadTrigger(props) {
         'class'
     ]);
     return createComponent(FileUpload.Trigger, mergeProps({
-        "data-slot": "file-upload-trigger",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-primary bg-primary px-4 text-sm leading-5 font-medium whitespace-nowrap text-primary-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default data-disabled:pointer-events-none data-disabled:cursor-default data-invalid:border-destructive data-readonly:pointer-events-none data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-trigger"
+    }));
 }
 function FileUploadItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileUpload.ItemGroup, mergeProps({
-        "data-slot": "file-upload-item-group",
         get ["class"] () {
             return cn('flex w-full flex-wrap items-start gap-2 empty:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item-group"
+    }));
 }
 function FileUploadItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileUpload.Item, mergeProps({
-        "data-slot": "file-upload-item",
         get ["class"] () {
             return cn('group/item box-border grid min-h-control-md shrink-0 grow basis-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 rounded-md border border-border bg-background px-3 py-2 text-foreground has-[[data-slot=file-upload-item-preview-image]]:min-h-0 has-[[data-slot=file-upload-item-preview-image]]:max-w-40 has-[[data-slot=file-upload-item-preview-image]]:grow-0 has-[[data-slot=file-upload-item-preview-image]]:grid-cols-[minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview-image]]:grid-rows-[auto_auto_auto] has-[[data-slot=file-upload-item-preview-image]]:items-start has-[[data-slot=file-upload-item-preview]]:min-h-control-xl has-[[data-slot=file-upload-item-preview]]:grid-cols-[auto_minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview]]:py-2 data-disabled:opacity-50 data-[type=rejected]:border-destructive', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item"
+    }));
 }
 function FileUploadItemPreview(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileUpload.ItemPreview, mergeProps({
-        "data-slot": "file-upload-item-preview",
         get ["class"] () {
             return cn('col-start-1 row-span-2 row-start-1 inline-flex size-10 items-center justify-center overflow-hidden rounded-sm bg-muted text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-span-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:aspect-square group-has-[[data-slot=file-upload-item-preview-image]]/item:h-auto group-has-[[data-slot=file-upload-item-preview-image]]/item:w-full', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item-preview"
+    }));
 }
 function FileUploadItemPreviewImage(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileUpload.ItemPreviewImage, mergeProps({
-        "data-slot": "file-upload-item-preview-image",
         get ["class"] () {
             return cn('size-full object-cover', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item-preview-image"
+    }));
 }
 function FileUploadItemPreviewIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileIcon, mergeProps({
-        "data-slot": "file-upload-item-preview-icon",
         get ["class"] () {
             return cn('size-4', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item-preview-icon"
+    }));
 }
 function getFileTypeLabel(file) {
     const extension = file.name.split('.').pop();
@@ -163,22 +171,24 @@ function FileUploadItemName(props) {
         'class'
     ]);
     return createComponent(FileUpload.ItemName, mergeProps({
-        "data-slot": "file-upload-item-name",
         get ["class"] () {
             return cn('col-start-1 line-clamp-1 min-w-0 text-sm leading-5 font-medium group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-end group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item-name"
+    }));
 }
 function FileUploadItemSizeText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FileUpload.ItemSizeText, mergeProps({
-        "data-slot": "file-upload-item-size-text",
         get ["class"] () {
             return cn('text-xs leading-4 text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-item-size-text"
+    }));
 }
 function FileUploadItemMetadata(props) {
     const [local, others] = splitProps(props, [
@@ -186,11 +196,11 @@ function FileUploadItemMetadata(props) {
         'file'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "file-upload-item-metadata",
         get ["class"] () {
             return cn("col-start-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2 [&>[data-slot='file-upload-item-size-text']::before]:me-1 [&>[data-slot='file-upload-item-size-text']::before]:content-['·']", local.class);
         }
     }, others, {
+        "data-slot": "file-upload-item-metadata",
         get children () {
             return [
                 createComponent(ark.span, {
@@ -210,11 +220,11 @@ function FileUploadItemDeleteTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(FileUpload.ItemDeleteTrigger, mergeProps({
-        "data-slot": "file-upload-item-delete-trigger",
         get ["class"] () {
             return cn('col-start-2 row-start-1 box-border inline-flex size-control-sm shrink-0 cursor-pointer appearance-none items-center justify-center justify-self-end rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-center group-has-[[data-slot=file-upload-item-preview]]/item:col-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:row-span-2 group-has-[[data-slot=file-upload-item-preview]]/item:row-start-1 group-has-[[data-slot=file-upload-item-size-text]]/item:row-span-2 group-has-[[data-slot=file-upload-item-size-text]]/item:row-start-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-readonly:pointer-events-none data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class);
         }
     }, others, {
+        "data-slot": "file-upload-item-delete-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(TrashIcon, {});
         }
@@ -268,7 +278,6 @@ function FileUploadClearTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "file-upload-clear-trigger",
         get ["class"] () {
             return triggerClass();
         },
@@ -279,6 +288,7 @@ function FileUploadClearTrigger(props) {
             return local['aria-labelledby'];
         }
     }, others, {
+        "data-slot": "file-upload-clear-trigger",
         get children () {
             return resolvedChildren();
         }
@@ -295,11 +305,12 @@ function FileUploadClearTrigger(props) {
                     return resolvedChildren() ?? createComponent(CloseIcon, {});
                 }
             })),
-        "data-slot": "file-upload-clear-trigger",
         get ["class"] () {
             return triggerClass();
         }
-    }, others));
+    }, others, {
+        "data-slot": "file-upload-clear-trigger"
+    }));
 }
 const FileUpload_FileUpload = Object.assign(FileUploadRoot, {
     Root: FileUploadRoot,

package/dist/components/file-upload/FileUpload.jsx

@@ -10,7 +10,7 @@ function FileUploadRoot(props) {
         'children',
         'class'
     ]);
-    return <FileUpload.Root asChild={local.asChild} data-slot="file-upload-root" class={cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class)} {...others}>
+    return <FileUpload.Root asChild={local.asChild} class={cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class)} {...others} data-slot="file-upload-root">
       {local.children}
     </FileUpload.Root>;
 }
@@ -20,7 +20,7 @@ function FileUploadRootProvider(props) {
         'children',
         'class'
     ]);
-    return <FileUpload.RootProvider asChild={local.asChild} data-slot="file-upload-root-provider" class={cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class)} {...others}>
+    return <FileUpload.RootProvider asChild={local.asChild} class={cn('box-border flex w-full max-w-md flex-col items-start gap-3 text-foreground', local.class)} {...others} data-slot="file-upload-root-provider">
       {local.children}
     </FileUpload.RootProvider>;
 }
@@ -28,13 +28,13 @@ function FileUploadLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.Label data-slot="file-upload-label" class={cn('text-sm font-medium text-foreground data-disabled:opacity-50', local.class)} {...others}/>;
+    return <FileUpload.Label class={cn('text-sm font-medium text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="file-upload-label"/>;
 }
 function FileUploadDropzone(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.Dropzone data-slot="file-upload-dropzone" class={cn('box-border grid min-h-32 w-full place-items-center gap-3 rounded-md border border-dashed border-border bg-background p-5 text-center text-muted-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-dragging:border-primary data-dragging:bg-accent data-dragging:text-foreground data-invalid:border-destructive data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&[role=button]:not([data-disabled],[data-readonly])]:cursor-pointer', local.class)} {...others}/>;
+    return <FileUpload.Dropzone class={cn('box-border grid min-h-32 w-full place-items-center gap-3 rounded-md border border-dashed border-border bg-background p-5 text-center text-muted-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-dragging:border-primary data-dragging:bg-accent data-dragging:text-foreground data-invalid:border-destructive data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&[role=button]:not([data-disabled],[data-readonly])]:cursor-pointer', local.class)} {...others} data-slot="file-upload-dropzone"/>;
 }
 function FileUploadDropzoneIcon(props) {
     const [local, others] = splitProps(props, [
@@ -42,7 +42,7 @@ function FileUploadDropzoneIcon(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ark.span aria-hidden="true" data-slot="file-upload-dropzone-icon" class={cn('box-border inline-flex size-10 items-center justify-center rounded-full border border-border bg-muted text-foreground [&>svg]:size-4', local.class)} {...others}>
+    return <ark.span aria-hidden="true" class={cn('box-border inline-flex size-10 items-center justify-center rounded-full border border-border bg-muted text-foreground [&>svg]:size-4', local.class)} {...others} data-slot="file-upload-dropzone-icon">
       {resolvedChildren() ?? <UploadIcon/>}
     </ark.span>;
 }
@@ -50,37 +50,37 @@ function FileUploadTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.Trigger data-slot="file-upload-trigger" class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-primary bg-primary px-4 text-sm leading-5 font-medium whitespace-nowrap text-primary-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default data-disabled:pointer-events-none data-disabled:cursor-default data-invalid:border-destructive data-readonly:pointer-events-none data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-foreground', local.class)} {...others}/>;
+    return <FileUpload.Trigger class={cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-primary bg-primary px-4 text-sm leading-5 font-medium whitespace-nowrap text-primary-foreground transition-[border-color,background-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default data-disabled:pointer-events-none data-disabled:cursor-default data-invalid:border-destructive data-readonly:pointer-events-none data-readonly:cursor-default motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-foreground', local.class)} {...others} data-slot="file-upload-trigger"/>;
 }
 function FileUploadItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.ItemGroup data-slot="file-upload-item-group" class={cn('flex w-full flex-wrap items-start gap-2 empty:hidden', local.class)} {...others}/>;
+    return <FileUpload.ItemGroup class={cn('flex w-full flex-wrap items-start gap-2 empty:hidden', local.class)} {...others} data-slot="file-upload-item-group"/>;
 }
 function FileUploadItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.Item data-slot="file-upload-item" class={cn('group/item box-border grid min-h-control-md shrink-0 grow basis-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 rounded-md border border-border bg-background px-3 py-2 text-foreground has-[[data-slot=file-upload-item-preview-image]]:min-h-0 has-[[data-slot=file-upload-item-preview-image]]:max-w-40 has-[[data-slot=file-upload-item-preview-image]]:grow-0 has-[[data-slot=file-upload-item-preview-image]]:grid-cols-[minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview-image]]:grid-rows-[auto_auto_auto] has-[[data-slot=file-upload-item-preview-image]]:items-start has-[[data-slot=file-upload-item-preview]]:min-h-control-xl has-[[data-slot=file-upload-item-preview]]:grid-cols-[auto_minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview]]:py-2 data-disabled:opacity-50 data-[type=rejected]:border-destructive', local.class)} {...others}/>;
+    return <FileUpload.Item class={cn('group/item box-border grid min-h-control-md shrink-0 grow basis-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 rounded-md border border-border bg-background px-3 py-2 text-foreground has-[[data-slot=file-upload-item-preview-image]]:min-h-0 has-[[data-slot=file-upload-item-preview-image]]:max-w-40 has-[[data-slot=file-upload-item-preview-image]]:grow-0 has-[[data-slot=file-upload-item-preview-image]]:grid-cols-[minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview-image]]:grid-rows-[auto_auto_auto] has-[[data-slot=file-upload-item-preview-image]]:items-start has-[[data-slot=file-upload-item-preview]]:min-h-control-xl has-[[data-slot=file-upload-item-preview]]:grid-cols-[auto_minmax(0,1fr)_auto] has-[[data-slot=file-upload-item-preview]]:py-2 data-disabled:opacity-50 data-[type=rejected]:border-destructive', local.class)} {...others} data-slot="file-upload-item"/>;
 }
 function FileUploadItemPreview(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.ItemPreview data-slot="file-upload-item-preview" class={cn('col-start-1 row-span-2 row-start-1 inline-flex size-10 items-center justify-center overflow-hidden rounded-sm bg-muted text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-span-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:aspect-square group-has-[[data-slot=file-upload-item-preview-image]]/item:h-auto group-has-[[data-slot=file-upload-item-preview-image]]/item:w-full', local.class)} {...others}/>;
+    return <FileUpload.ItemPreview class={cn('col-start-1 row-span-2 row-start-1 inline-flex size-10 items-center justify-center overflow-hidden rounded-sm bg-muted text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-span-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:aspect-square group-has-[[data-slot=file-upload-item-preview-image]]/item:h-auto group-has-[[data-slot=file-upload-item-preview-image]]/item:w-full', local.class)} {...others} data-slot="file-upload-item-preview"/>;
 }
 function FileUploadItemPreviewImage(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.ItemPreviewImage data-slot="file-upload-item-preview-image" class={cn('size-full object-cover', local.class)} {...others}/>;
+    return <FileUpload.ItemPreviewImage class={cn('size-full object-cover', local.class)} {...others} data-slot="file-upload-item-preview-image"/>;
 }
 function FileUploadItemPreviewIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileIcon data-slot="file-upload-item-preview-icon" class={cn('size-4', local.class)} {...others}/>;
+    return <FileIcon class={cn('size-4', local.class)} {...others} data-slot="file-upload-item-preview-icon"/>;
 }
 function getFileTypeLabel(file) {
     const extension = file.name.split('.').pop();
@@ -93,20 +93,20 @@ function FileUploadItemName(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.ItemName data-slot="file-upload-item-name" class={cn('col-start-1 line-clamp-1 min-w-0 text-sm leading-5 font-medium group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-end group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2', local.class)} {...others}/>;
+    return <FileUpload.ItemName class={cn('col-start-1 line-clamp-1 min-w-0 text-sm leading-5 font-medium group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-end group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2', local.class)} {...others} data-slot="file-upload-item-name"/>;
 }
 function FileUploadItemSizeText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <FileUpload.ItemSizeText data-slot="file-upload-item-size-text" class={cn('text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+    return <FileUpload.ItemSizeText class={cn('text-xs leading-4 text-muted-foreground', local.class)} {...others} data-slot="file-upload-item-size-text"/>;
 }
 function FileUploadItemMetadata(props) {
     const [local, others] = splitProps(props, [
         'class',
         'file'
     ]);
-    return <ark.div data-slot="file-upload-item-metadata" class={cn("col-start-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2 [&>[data-slot='file-upload-item-size-text']::before]:me-1 [&>[data-slot='file-upload-item-size-text']::before]:content-['·']", local.class)} {...others}>
+    return <ark.div class={cn("col-start-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-1 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:col-start-2 [&>[data-slot='file-upload-item-size-text']::before]:me-1 [&>[data-slot='file-upload-item-size-text']::before]:content-['·']", local.class)} {...others} data-slot="file-upload-item-metadata">
       <ark.span>{getFileTypeLabel(local.file)}</ark.span>
       <FileUploadItemSizeText/>
     </ark.div>;
@@ -117,7 +117,7 @@ function FileUploadItemDeleteTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <FileUpload.ItemDeleteTrigger data-slot="file-upload-item-delete-trigger" class={cn('col-start-2 row-start-1 box-border inline-flex size-control-sm shrink-0 cursor-pointer appearance-none items-center justify-center justify-self-end rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-center group-has-[[data-slot=file-upload-item-preview]]/item:col-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:row-span-2 group-has-[[data-slot=file-upload-item-preview]]/item:row-start-1 group-has-[[data-slot=file-upload-item-size-text]]/item:row-span-2 group-has-[[data-slot=file-upload-item-size-text]]/item:row-start-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-readonly:pointer-events-none data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class)} {...others}>
+    return <FileUpload.ItemDeleteTrigger class={cn('col-start-2 row-start-1 box-border inline-flex size-control-sm shrink-0 cursor-pointer appearance-none items-center justify-center justify-self-end rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out group-has-[[data-slot=file-upload-item-preview-image]]/item:col-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:row-start-2 group-has-[[data-slot=file-upload-item-preview-image]]/item:self-center group-has-[[data-slot=file-upload-item-preview]]/item:col-start-3 group-has-[[data-slot=file-upload-item-preview]]/item:row-span-2 group-has-[[data-slot=file-upload-item-preview]]/item:row-start-1 group-has-[[data-slot=file-upload-item-size-text]]/item:row-span-2 group-has-[[data-slot=file-upload-item-size-text]]/item:row-start-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-readonly:pointer-events-none data-readonly:cursor-default data-readonly:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-readonly]):hover]:text-foreground', local.class)} {...others} data-slot="file-upload-item-delete-trigger">
       {resolvedChildren() ?? <TrashIcon/>}
     </FileUpload.ItemDeleteTrigger>;
 }
@@ -147,12 +147,12 @@ function FileUploadClearTrigger(props) {
     const resolvedChildren = children(()=>local.children);
     const clearLabel = ()=>local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Clear files' : void 0);
     const triggerClass = ()=>cn('size-control-sm self-start rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:pointer-events-none data-readonly:opacity-50 [&>svg]:size-4', null != local.children && 'w-auto gap-2 px-2 text-sm leading-5', local.class);
-    if (local.asChild) return <FileUpload.ClearTrigger asChild={local.asChild} data-slot="file-upload-clear-trigger" class={triggerClass()} aria-label={clearLabel()} aria-labelledby={local['aria-labelledby']} {...others}>
+    if (local.asChild) return <FileUpload.ClearTrigger asChild={local.asChild} class={triggerClass()} aria-label={clearLabel()} aria-labelledby={local['aria-labelledby']} {...others} data-slot="file-upload-clear-trigger">
         {resolvedChildren()}
       </FileUpload.ClearTrigger>;
     return <FileUpload.ClearTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} aria-label={clearLabel()} aria-labelledby={local['aria-labelledby']}>
           {resolvedChildren() ?? <CloseIcon/>}
-        </CloseButton.Root>} data-slot="file-upload-clear-trigger" class={triggerClass()} {...others}/>;
+        </CloseButton.Root>} class={triggerClass()} {...others} data-slot="file-upload-clear-trigger"/>;
 }
 const FileUpload_FileUpload = Object.assign(FileUploadRoot, {
     Root: FileUploadRoot,

package/dist/components/floating-panel/FloatingPanel.js

@@ -6,7 +6,7 @@ import { cn } from "../../internal/cn.js";
 import { GripIcon, MaximizeIcon, MinusIcon, RestoreIcon } from "../../internal/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
-var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden=true data-slot=floating-panel-drag-indicator>");
+var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden=true>");
 const DEFAULT_CLOSE_BUTTON_LABEL = 'Close panel';
 const resizeTriggerAxes = [
     'n',
@@ -97,11 +97,12 @@ function FloatingPanelTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "floating-panel-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-trigger"
+    }));
 }
 function FloatingPanelPositioner(props) {
     const [local, others] = splitProps(props, [
@@ -110,11 +111,12 @@ function FloatingPanelPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(FloatingPanel.Positioner, mergeProps({
-                "data-slot": "floating-panel-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "floating-panel-positioner"
+            }));
         }
     });
 }
@@ -123,55 +125,60 @@ function FloatingPanelContent(props) {
         'class'
     ]);
     return createComponent(FloatingPanel.Content, mergeProps({
-        "data-slot": "floating-panel-content",
         get ["class"] () {
             return cn('relative box-border flex min-h-40 min-w-64 origin-[var(--transform-origin)] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg outline-0 data-behind:opacity-[0.55] data-minimized:min-h-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": "floating-panel-content"
+    }));
 }
 function FloatingPanelDragTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FloatingPanel.DragTrigger, mergeProps({
-        "data-slot": "floating-panel-drag-trigger",
         get ["class"] () {
             return cn('block', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-drag-trigger"
+    }));
 }
 function FloatingPanelHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FloatingPanel.Header, mergeProps({
-        "data-slot": "floating-panel-header",
         get ["class"] () {
             return cn('box-border flex min-h-control-xl cursor-grab items-center justify-between gap-3 border-b border-border bg-muted px-3 py-2 select-none data-[dragging]:cursor-grabbing data-[minimized]:border-b-transparent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-header"
+    }));
 }
 function FloatingPanelTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FloatingPanel.Title, mergeProps({
-        "data-slot": "floating-panel-title",
         get ["class"] () {
             return cn('inline-flex min-w-0 items-center gap-2 text-sm font-semibold text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-title"
+    }));
 }
 function FloatingPanelControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(FloatingPanel.Control, mergeProps({
-        "data-slot": "floating-panel-control",
         get ["class"] () {
             return cn('inline-flex flex-none items-center gap-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-control"
+    }));
 }
 function FloatingPanelStageTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -190,7 +197,6 @@ function FloatingPanelStageTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "floating-panel-stage-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class);
         },
@@ -198,6 +204,7 @@ function FloatingPanelStageTrigger(props) {
             return local.stage;
         }
     }, others, {
+        "data-slot": "floating-panel-stage-trigger",
         get children () {
             return [
                 memo(()=>resolvedChildren()),
@@ -217,11 +224,12 @@ function FloatingPanelCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "floating-panel-close-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'box-border inline-flex size-control-sm cursor-pointer items-center justify-center rounded-sm border border-border bg-background text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring active:bg-accent disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:size-4 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-close-trigger"
+    }));
 }
 function FloatingPanelCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -254,11 +262,12 @@ function FloatingPanelBody(props) {
         'class'
     ]);
     return createComponent(FloatingPanel.Body, mergeProps({
-        "data-slot": "floating-panel-body",
         get ["class"] () {
             return cn('min-h-0 flex-auto overflow-auto p-4 text-sm text-popover-foreground data-minimized:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-body"
+    }));
 }
 function FloatingPanelFooter(props) {
     const [local, others] = splitProps(props, [
@@ -280,11 +289,12 @@ function FloatingPanelResizeTrigger(props) {
         'class'
     ]);
     return createComponent(FloatingPanel.ResizeTrigger, mergeProps({
-        "data-slot": "floating-panel-resize-trigger",
         get ["class"] () {
             return cn('absolute data-disabled:pointer-events-none data-[axis=e]:inset-y-3 data-[axis=e]:-right-1 data-[axis=e]:w-2 data-[axis=n]:inset-x-3 data-[axis=n]:-top-1 data-[axis=n]:h-2 data-[axis=ne]:-top-1.5 data-[axis=ne]:-right-1.5 data-[axis=ne]:size-3 data-[axis=nw]:-top-1.5 data-[axis=nw]:-left-1.5 data-[axis=nw]:size-3 data-[axis=s]:inset-x-3 data-[axis=s]:-bottom-1 data-[axis=s]:h-2 data-[axis=se]:-right-1.5 data-[axis=se]:-bottom-1.5 data-[axis=se]:size-3 data-[axis=sw]:-bottom-1.5 data-[axis=sw]:-left-1.5 data-[axis=sw]:size-3 data-[axis=w]:inset-y-3 data-[axis=w]:-left-1 data-[axis=w]:w-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "floating-panel-resize-trigger"
+    }));
 }
 function FloatingPanelResizeTriggerGroup(props) {
     return createComponent(For, {
@@ -308,7 +318,9 @@ function FloatingPanelDragIndicator(props) {
             get ["class"] () {
                 return cn('inline-flex flex-none items-center justify-center text-muted-foreground [&>svg]:size-4', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "floating-panel-drag-indicator"
+        }), false, true);
         insert(_el$, ()=>resolvedChildren() ?? createComponent(GripIcon, {}));
         return _el$;
     })();