@moduix/solid-tailwind 1.0.0 → 1.1.1

package/dist/components/accordion/Accordion.js

@@ -9,44 +9,48 @@ function AccordionRoot(props) {
         'class'
     ]);
     return createComponent(Accordion.Root, mergeProps({
-        "data-slot": "accordion-root",
         get ["class"] () {
             return cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "accordion-root"
+    }));
 }
 function AccordionRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Accordion.RootProvider, mergeProps({
-        "data-slot": "accordion-root-provider",
         get ["class"] () {
             return cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "accordion-root-provider"
+    }));
 }
 function AccordionItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Accordion.Item, mergeProps({
-        "data-slot": "accordion-item",
         get ["class"] () {
             return cn("[overflow-anchor:none] data-[orientation=horizontal]:flex [&[data-orientation='horizontal']:not(:last-child)]:border-e [&[data-orientation='horizontal']:not(:last-child)]:border-border [&[data-orientation='vertical']:not(:last-child)]:border-b [&[data-orientation='vertical']:not(:last-child)]:border-border", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "accordion-item"
+    }));
 }
 function AccordionItemTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Accordion.ItemTrigger, mergeProps({
-        "data-slot": "accordion-item-trigger",
         get ["class"] () {
             return cn('flex w-full cursor-pointer items-center justify-between gap-4 bg-muted px-3 py-2 text-start text-md outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[orientation=horizontal]:h-full data-[orientation=horizontal]:w-10 data-[orientation=horizontal]:justify-center data-[orientation=horizontal]:[writing-mode:sideways-lr] motion-reduce:transition-none [&:not([data-disabled]):active]:bg-accent [&:not([data-disabled]):hover]:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "accordion-item-trigger"
+    }));
 }
 function AccordionItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -55,11 +59,11 @@ function AccordionItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Accordion.ItemIndicator, mergeProps({
-        "data-slot": "accordion-item-indicator",
         get ["class"] () {
             return cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-[state=open]:scale-110 data-[state=open]:rotate-45 motion-reduce:transition-none [&_svg]:size-full', local.class);
         }
     }, others, {
+        "data-slot": "accordion-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(PlusIcon, {});
         }
@@ -70,11 +74,12 @@ function AccordionItemContent(props) {
         'class'
     ]);
     return createComponent(Accordion.ItemContent, mergeProps({
-        "data-slot": "accordion-item-content",
         get ["class"] () {
             return cn("overflow-hidden text-md text-muted-foreground data-[state=closed]:data-[orientation=horizontal]:animate-moduix-accordion-closed-horizontal data-[state=closed]:data-[orientation=vertical]:animate-moduix-accordion-closed data-[state=open]:data-[orientation=horizontal]:animate-moduix-accordion-open-horizontal data-[state=open]:data-[orientation=vertical]:animate-moduix-accordion-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] data-[orientation=horizontal]:[&>*]:w-64 [&[hidden]:not([hidden='until-found'])]:hidden", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "accordion-item-content"
+    }));
 }
 function AccordionItemBody(props) {
     const [local, others] = splitProps(props, [
@@ -83,11 +88,12 @@ function AccordionItemBody(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "accordion",
         "data-part": "item-body",
-        "data-slot": "accordion-item-body",
         get ["class"] () {
             return cn('grid min-w-0 gap-3 p-3', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "accordion-item-body"
+    }));
 }
 const Accordion_Accordion = Object.assign(AccordionRoot, {
     Root: AccordionRoot,

package/dist/components/accordion/Accordion.jsx

@@ -7,25 +7,25 @@ function AccordionRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Accordion.Root data-slot="accordion-root" class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', local.class)} {...others}/>;
+    return <Accordion.Root class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', local.class)} {...others} data-slot="accordion-root"/>;
 }
 function AccordionRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Accordion.RootProvider data-slot="accordion-root-provider" class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', local.class)} {...others}/>;
+    return <Accordion.RootProvider class={cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground data-[orientation=horizontal]:h-80 data-[orientation=horizontal]:max-h-full data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-row', local.class)} {...others} data-slot="accordion-root-provider"/>;
 }
 function AccordionItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Accordion.Item data-slot="accordion-item" class={cn("[overflow-anchor:none] data-[orientation=horizontal]:flex [&[data-orientation='horizontal']:not(:last-child)]:border-e [&[data-orientation='horizontal']:not(:last-child)]:border-border [&[data-orientation='vertical']:not(:last-child)]:border-b [&[data-orientation='vertical']:not(:last-child)]:border-border", local.class)} {...others}/>;
+    return <Accordion.Item class={cn("[overflow-anchor:none] data-[orientation=horizontal]:flex [&[data-orientation='horizontal']:not(:last-child)]:border-e [&[data-orientation='horizontal']:not(:last-child)]:border-border [&[data-orientation='vertical']:not(:last-child)]:border-b [&[data-orientation='vertical']:not(:last-child)]:border-border", local.class)} {...others} data-slot="accordion-item"/>;
 }
 function AccordionItemTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Accordion.ItemTrigger data-slot="accordion-item-trigger" class={cn('flex w-full cursor-pointer items-center justify-between gap-4 bg-muted px-3 py-2 text-start text-md outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[orientation=horizontal]:h-full data-[orientation=horizontal]:w-10 data-[orientation=horizontal]:justify-center data-[orientation=horizontal]:[writing-mode:sideways-lr] motion-reduce:transition-none [&:not([data-disabled]):active]:bg-accent [&:not([data-disabled]):hover]:bg-accent', local.class)} {...others}/>;
+    return <Accordion.ItemTrigger class={cn('flex w-full cursor-pointer items-center justify-between gap-4 bg-muted px-3 py-2 text-start text-md outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[orientation=horizontal]:h-full data-[orientation=horizontal]:w-10 data-[orientation=horizontal]:justify-center data-[orientation=horizontal]:[writing-mode:sideways-lr] motion-reduce:transition-none [&:not([data-disabled]):active]:bg-accent [&:not([data-disabled]):hover]:bg-accent', local.class)} {...others} data-slot="accordion-item-trigger"/>;
 }
 function AccordionItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -33,7 +33,7 @@ function AccordionItemIndicator(props) {
         'children'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Accordion.ItemIndicator data-slot="accordion-item-indicator" class={cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-[state=open]:scale-110 data-[state=open]:rotate-45 motion-reduce:transition-none [&_svg]:size-full', local.class)} {...others}>
+    return <Accordion.ItemIndicator class={cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-[state=open]:scale-110 data-[state=open]:rotate-45 motion-reduce:transition-none [&_svg]:size-full', local.class)} {...others} data-slot="accordion-item-indicator">
       {resolvedChildren() ?? <PlusIcon/>}
     </Accordion.ItemIndicator>;
 }
@@ -41,13 +41,13 @@ function AccordionItemContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Accordion.ItemContent data-slot="accordion-item-content" class={cn("overflow-hidden text-md text-muted-foreground data-[state=closed]:data-[orientation=horizontal]:animate-moduix-accordion-closed-horizontal data-[state=closed]:data-[orientation=vertical]:animate-moduix-accordion-closed data-[state=open]:data-[orientation=horizontal]:animate-moduix-accordion-open-horizontal data-[state=open]:data-[orientation=vertical]:animate-moduix-accordion-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] data-[orientation=horizontal]:[&>*]:w-64 [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others}/>;
+    return <Accordion.ItemContent class={cn("overflow-hidden text-md text-muted-foreground data-[state=closed]:data-[orientation=horizontal]:animate-moduix-accordion-closed-horizontal data-[state=closed]:data-[orientation=vertical]:animate-moduix-accordion-closed data-[state=open]:data-[orientation=horizontal]:animate-moduix-accordion-open-horizontal data-[state=open]:data-[orientation=vertical]:animate-moduix-accordion-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms] data-[orientation=horizontal]:[&>*]:w-64 [&[hidden]:not([hidden='until-found'])]:hidden", local.class)} {...others} data-slot="accordion-item-content"/>;
 }
 function AccordionItemBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="accordion" data-part="item-body" data-slot="accordion-item-body" class={cn('grid min-w-0 gap-3 p-3', local.class)} {...others}/>;
+    return <ark.div data-scope="accordion" data-part="item-body" class={cn('grid min-w-0 gap-3 p-3', local.class)} {...others} data-slot="accordion-item-body"/>;
 }
 const Accordion_Accordion = Object.assign(AccordionRoot, {
     Root: AccordionRoot,

package/dist/components/alert/Alert.js

@@ -24,11 +24,10 @@ function AlertRoot(props) {
     ]);
     return createComponent(ark.div, mergeProps({
         get role () {
-            return local.role ?? ('error' === local.status ? 'alert' : 'status');
+            return local.role;
         },
         "data-scope": "alert",
         "data-part": "root",
-        "data-slot": "alert-root",
         get ["data-status"] () {
             return local.status ?? 'info';
         },
@@ -37,7 +36,9 @@ function AlertRoot(props) {
                 status: local.status
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "alert-root"
+    }));
 }
 function AlertIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -46,12 +47,13 @@ function AlertIndicator(props) {
     return createComponent(ark.span, mergeProps({
         "data-scope": "alert",
         "data-part": "indicator",
-        "data-slot": "alert-indicator",
         "aria-hidden": "true",
         get ["class"] () {
             return cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "alert-indicator"
+    }));
 }
 function AlertContent(props) {
     const [local, others] = splitProps(props, [
@@ -60,11 +62,12 @@ function AlertContent(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "alert",
         "data-part": "content",
-        "data-slot": "alert-content",
         get ["class"] () {
             return cn('grid min-w-0 flex-1 gap-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "alert-content"
+    }));
 }
 function AlertTitle(props) {
     const [local, others] = splitProps(props, [
@@ -73,11 +76,12 @@ function AlertTitle(props) {
     return createComponent(ark.p, mergeProps({
         "data-scope": "alert",
         "data-part": "title",
-        "data-slot": "alert-title",
         get ["class"] () {
             return cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "alert-title"
+    }));
 }
 function AlertDescription(props) {
     const [local, others] = splitProps(props, [
@@ -86,11 +90,12 @@ function AlertDescription(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "alert",
         "data-part": "description",
-        "data-slot": "alert-description",
         get ["class"] () {
             return cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "alert-description"
+    }));
 }
 function AlertActions(props) {
     const [local, others] = splitProps(props, [
@@ -99,11 +104,12 @@ function AlertActions(props) {
     return createComponent(ark.div, mergeProps({
         "data-scope": "alert",
         "data-part": "actions",
-        "data-slot": "alert-actions",
         get ["class"] () {
             return cn('mt-2 flex flex-wrap gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "alert-actions"
+    }));
 }
 const Alert = Object.assign(AlertRoot, {
     Root: AlertRoot,

package/dist/components/alert/Alert.jsx

@@ -21,39 +21,39 @@ function AlertRoot(props) {
         'role',
         'status'
     ]);
-    return <ark.div role={local.role ?? ('error' === local.status ? 'alert' : 'status')} data-scope="alert" data-part="root" data-slot="alert-root" data-status={local.status ?? 'info'} class={cn(alertVariants({
+    return <ark.div role={local.role} data-scope="alert" data-part="root" data-status={local.status ?? 'info'} class={cn(alertVariants({
         status: local.status
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="alert-root"/>;
 }
 function AlertIndicator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-scope="alert" data-part="indicator" data-slot="alert-indicator" aria-hidden="true" class={cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+    return <ark.span data-scope="alert" data-part="indicator" aria-hidden="true" class={cn('mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[status=error]/alert:text-destructive group-data-[status=success]/alert:text-success group-data-[status=warning]/alert:text-warning [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="alert-indicator"/>;
 }
 function AlertContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="alert" data-part="content" data-slot="alert-content" class={cn('grid min-w-0 flex-1 gap-1', local.class)} {...others}/>;
+    return <ark.div data-scope="alert" data-part="content" class={cn('grid min-w-0 flex-1 gap-1', local.class)} {...others} data-slot="alert-content"/>;
 }
 function AlertTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.p data-scope="alert" data-part="title" data-slot="alert-title" class={cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', local.class)} {...others}/>;
+    return <ark.p data-scope="alert" data-part="title" class={cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', local.class)} {...others} data-slot="alert-title"/>;
 }
 function AlertDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="alert" data-part="description" data-slot="alert-description" class={cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', local.class)} {...others}/>;
+    return <ark.div data-scope="alert" data-part="description" class={cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', local.class)} {...others} data-slot="alert-description"/>;
 }
 function AlertActions(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-scope="alert" data-part="actions" data-slot="alert-actions" class={cn('mt-2 flex flex-wrap gap-2', local.class)} {...others}/>;
+    return <ark.div data-scope="alert" data-part="actions" class={cn('mt-2 flex flex-wrap gap-2', local.class)} {...others} data-slot="alert-actions"/>;
 }
 const Alert = Object.assign(AlertRoot, {
     Root: AlertRoot,

package/dist/components/angle-slider/AngleSlider.d.ts

@@ -1,11 +1,8 @@
-import { AngleSlider as AngleSliderPrimitive, useAngleSliderContext, type UseAngleSliderProps, type UseAngleSliderReturn } from '@ark-ui/solid/angle-slider';
+import { AngleSlider as AngleSliderPrimitive, useAngleSlider, useAngleSliderContext } from '@ark-ui/solid/angle-slider';
 import type { ComponentProps, JSX } from 'solid-js';
 declare function AngleSliderRoot(props: ComponentProps<typeof AngleSliderPrimitive.Root>): JSX.Element;
 declare function AngleSliderLabel(props: ComponentProps<typeof AngleSliderPrimitive.Label>): JSX.Element;
-type AngleSliderRootProviderProps = ComponentProps<typeof AngleSliderPrimitive.RootProvider> & {
-    form?: string;
-};
-declare function AngleSliderRootProvider(props: AngleSliderRootProviderProps): JSX.Element;
+declare function AngleSliderRootProvider(props: ComponentProps<typeof AngleSliderPrimitive.RootProvider>): JSX.Element;
 declare function AngleSliderControl(props: ComponentProps<typeof AngleSliderPrimitive.Control>): JSX.Element;
 declare function AngleSliderThumb(props: ComponentProps<typeof AngleSliderPrimitive.Thumb>): JSX.Element;
 declare function AngleSliderMarkerGroup(props: ComponentProps<typeof AngleSliderPrimitive.MarkerGroup>): JSX.Element;
@@ -33,5 +30,4 @@ declare const AngleSlider: typeof AngleSliderRoot & {
     Marks: typeof AngleSliderMarks;
     ValueText: typeof AngleSliderValueText;
 };
-declare const useAngleSlider: (props?: UseAngleSliderProps | (() => UseAngleSliderProps)) => UseAngleSliderReturn;
 export { AngleSlider, useAngleSlider, useAngleSliderContext };

package/dist/components/angle-slider/AngleSlider.js

@@ -12,11 +12,11 @@ function AngleSliderRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "angle-slider-root",
         get ["class"] () {
             return cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "angle-slider-root",
         get children () {
             return local.children;
         }
@@ -27,11 +27,12 @@ function AngleSliderLabel(props) {
         'class'
     ]);
     return createComponent(AngleSlider.Label, mergeProps({
-        "data-slot": "angle-slider-label",
         get ["class"] () {
             return cn('text-center text-sm font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "angle-slider-label"
+    }));
 }
 function AngleSliderRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -47,11 +48,11 @@ function AngleSliderRootProvider(props) {
         get value () {
             return local.value;
         },
-        "data-slot": "angle-slider-root-provider",
         get ["class"] () {
             return cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "angle-slider-root-provider",
         get children () {
             return local.children;
         }
@@ -63,7 +64,6 @@ function AngleSliderControl(props) {
         'onPointerDown'
     ]);
     return createComponent(AngleSlider.Control, mergeProps({
-        "data-slot": "angle-slider-control",
         get ["class"] () {
             return cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class);
         },
@@ -71,40 +71,45 @@ function AngleSliderControl(props) {
             local.onPointerDown?.(event);
             event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
         }
-    }, others));
+    }, others, {
+        "data-slot": "angle-slider-control"
+    }));
 }
 function AngleSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(AngleSlider.Thumb, mergeProps({
-        "data-slot": "angle-slider-thumb",
         get ["class"] () {
             return cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "angle-slider-thumb"
+    }));
 }
 function AngleSliderMarkerGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(AngleSlider.MarkerGroup, mergeProps({
-        "data-slot": "angle-slider-marker-group",
         get ["class"] () {
             return cn('pointer-events-none absolute inset-0 z-1', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "angle-slider-marker-group"
+    }));
 }
 function AngleSliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(AngleSlider.Marker, mergeProps({
-        "data-slot": "angle-slider-marker",
         get ["class"] () {
             return cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "angle-slider-marker"
+    }));
 }
 function AngleSliderMarks(props) {
     const [local, others] = splitProps(props, [
@@ -141,11 +146,12 @@ function AngleSliderValueText(props) {
         'class'
     ]);
     return createComponent(AngleSlider.ValueText, mergeProps({
-        "data-slot": "angle-slider-value-text",
         get ["class"] () {
             return cn('text-center text-sm font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "angle-slider-value-text"
+    }));
 }
 const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
     Root: AngleSliderRoot,
@@ -161,5 +167,4 @@ const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
     Marks: AngleSliderMarks,
     ValueText: AngleSliderValueText
 });
-const AngleSlider_useAngleSlider = useAngleSlider;
-export { AngleSlider_AngleSlider as AngleSlider, AngleSlider_useAngleSlider as useAngleSlider, useAngleSliderContext };
+export { AngleSlider_AngleSlider as AngleSlider, useAngleSlider, useAngleSliderContext };

package/dist/components/angle-slider/AngleSlider.jsx

@@ -7,7 +7,7 @@ function AngleSliderRoot(props) {
         'children',
         'class'
     ]);
-    return <AngleSlider.Root asChild={local.asChild} data-slot="angle-slider-root" class={cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <AngleSlider.Root asChild={local.asChild} class={cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="angle-slider-root">
       {local.children}
     </AngleSlider.Root>;
 }
@@ -15,7 +15,7 @@ function AngleSliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.Label data-slot="angle-slider-label" class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others}/>;
+    return <AngleSlider.Label class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others} data-slot="angle-slider-label"/>;
 }
 function AngleSliderRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -24,7 +24,7 @@ function AngleSliderRootProvider(props) {
         'class',
         'value'
     ]);
-    return <AngleSlider.RootProvider asChild={local.asChild} value={local.value} data-slot="angle-slider-root-provider" class={cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <AngleSlider.RootProvider asChild={local.asChild} value={local.value} class={cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="angle-slider-root-provider">
       {local.children}
     </AngleSlider.RootProvider>;
 }
@@ -33,28 +33,28 @@ function AngleSliderControl(props) {
         'class',
         'onPointerDown'
     ]);
-    return <AngleSlider.Control data-slot="angle-slider-control" class={cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class)} onPointerDown={(event)=>{
+    return <AngleSlider.Control class={cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class)} onPointerDown={(event)=>{
         local.onPointerDown?.(event);
         event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
-    }} {...others}/>;
+    }} {...others} data-slot="angle-slider-control"/>;
 }
 function AngleSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.Thumb data-slot="angle-slider-thumb" class={cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class)} {...others}/>;
+    return <AngleSlider.Thumb class={cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class)} {...others} data-slot="angle-slider-thumb"/>;
 }
 function AngleSliderMarkerGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.MarkerGroup data-slot="angle-slider-marker-group" class={cn('pointer-events-none absolute inset-0 z-1', local.class)} {...others}/>;
+    return <AngleSlider.MarkerGroup class={cn('pointer-events-none absolute inset-0 z-1', local.class)} {...others} data-slot="angle-slider-marker-group"/>;
 }
 function AngleSliderMarker(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.Marker data-slot="angle-slider-marker" class={cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class)} {...others}/>;
+    return <AngleSlider.Marker class={cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class)} {...others} data-slot="angle-slider-marker"/>;
 }
 function AngleSliderMarks(props) {
     const [local, others] = splitProps(props, [
@@ -77,7 +77,7 @@ function AngleSliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <AngleSlider.ValueText data-slot="angle-slider-value-text" class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others}/>;
+    return <AngleSlider.ValueText class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others} data-slot="angle-slider-value-text"/>;
 }
 const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
     Root: AngleSliderRoot,
@@ -93,5 +93,4 @@ const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
     Marks: AngleSliderMarks,
     ValueText: AngleSliderValueText
 });
-const AngleSlider_useAngleSlider = useAngleSlider;
-export { AngleSlider_AngleSlider as AngleSlider, AngleSlider_useAngleSlider as useAngleSlider, useAngleSliderContext };
+export { AngleSlider_AngleSlider as AngleSlider, useAngleSlider, useAngleSliderContext };

package/dist/components/avatar/Avatar.js

@@ -23,7 +23,6 @@ function AvatarRoot(props) {
         'size'
     ]);
     return createComponent(Avatar.Root, mergeProps({
-        "data-slot": "avatar-root",
         get ["data-size"] () {
             return local.size;
         },
@@ -32,7 +31,9 @@ function AvatarRoot(props) {
                 size: local.size
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "avatar-root"
+    }));
 }
 function AvatarRootProvider(props) {
     const [local, others] = splitProps(props, [
@@ -40,7 +41,6 @@ function AvatarRootProvider(props) {
         'size'
     ]);
     return createComponent(Avatar.RootProvider, mergeProps({
-        "data-slot": "avatar-root-provider",
         get ["data-size"] () {
             return local.size;
         },
@@ -49,18 +49,21 @@ function AvatarRootProvider(props) {
                 size: local.size
             }), local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "avatar-root-provider"
+    }));
 }
 function AvatarImage(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Avatar.Image, mergeProps({
-        "data-slot": "avatar-image",
         get ["class"] () {
             return cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "avatar-image"
+    }));
 }
 function AvatarFallback(props) {
     const [local, others] = splitProps(props, [
@@ -68,11 +71,11 @@ function AvatarFallback(props) {
         'class'
     ]);
     return createComponent(Avatar.Fallback, mergeProps({
-        "data-slot": "avatar-fallback",
         get ["class"] () {
             return cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', local.class);
         }
     }, others, {
+        "data-slot": "avatar-fallback",
         get children () {
             return local.children;
         }

package/dist/components/avatar/Avatar.jsx

@@ -21,31 +21,31 @@ function AvatarRoot(props) {
         'class',
         'size'
     ]);
-    return <Avatar.Root data-slot="avatar-root" data-size={local.size} class={cn(avatarVariants({
+    return <Avatar.Root data-size={local.size} class={cn(avatarVariants({
         size: local.size
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="avatar-root"/>;
 }
 function AvatarRootProvider(props) {
     const [local, others] = splitProps(props, [
         'class',
         'size'
     ]);
-    return <Avatar.RootProvider data-slot="avatar-root-provider" data-size={local.size} class={cn(avatarVariants({
+    return <Avatar.RootProvider data-size={local.size} class={cn(avatarVariants({
         size: local.size
-    }), local.class)} {...others}/>;
+    }), local.class)} {...others} data-slot="avatar-root-provider"/>;
 }
 function AvatarImage(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Avatar.Image data-slot="avatar-image" class={cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', local.class)} {...others}/>;
+    return <Avatar.Image class={cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', local.class)} {...others} data-slot="avatar-image"/>;
 }
 function AvatarFallback(props) {
     const [local, others] = splitProps(props, [
         'children',
         'class'
     ]);
-    return <Avatar.Fallback data-slot="avatar-fallback" class={cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', local.class)} {...others}>
+    return <Avatar.Fallback class={cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', local.class)} {...others} data-slot="avatar-fallback">
       {local.children}
     </Avatar.Fallback>;
 }