@moduix/solid-tailwind 1.1.0 → 2.0.0

package/dist/components/rating-group/RatingGroup.js

@@ -15,13 +15,13 @@ function RatingGroupRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
         "data-slot": "rating-group-root",
         get children () {
             return local.children;
@@ -39,13 +39,13 @@ function RatingGroupRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        get ["data-size"] () {
-            return local.size ?? 'md';
-        },
         get ["class"] () {
             return cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class);
         }
     }, others, {
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
         "data-slot": "rating-group-root-provider",
         get children () {
             return local.children;
@@ -82,7 +82,7 @@ function RatingGroupItem(props) {
     ]);
     return createComponent(RatingGroup.Item, mergeProps({
         get ["class"] () {
-            return cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-disabled:cursor-default data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-readonly:cursor-default', local.class);
+            return cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none', local.class);
         }
     }, others, {
         "data-slot": "rating-group-item"
@@ -98,16 +98,16 @@ function RatingGroupItemIndicator(props) {
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps({
+            get ["class"] () {
+                return cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out motion-reduce:[&>svg]:transition-none', local.class);
+            }
+        }, others, {
             get ["data-half"] () {
                 return item().half ? '' : void 0;
             },
             get ["data-highlighted"] () {
                 return item().highlighted ? '' : void 0;
             },
-            get ["class"] () {
-                return cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out', local.class);
-            }
-        }, others, {
             "data-slot": "rating-group-item-indicator"
         }), false, true);
         insert(_el$, ()=>resolvedChildren() ?? [

package/dist/components/rating-group/RatingGroup.jsx

@@ -9,7 +9,7 @@ function RatingGroupRoot(props) {
         'class',
         'size'
     ]);
-    return <RatingGroup.Root asChild={local.asChild} data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others} data-slot="rating-group-root">
+    return <RatingGroup.Root asChild={local.asChild} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others} data-size={local.size ?? 'md'} data-slot="rating-group-root">
       {local.children}
     </RatingGroup.Root>;
 }
@@ -20,7 +20,7 @@ function RatingGroupRootProvider(props) {
         'class',
         'size'
     ]);
-    return <RatingGroup.RootProvider asChild={local.asChild} data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others} data-slot="rating-group-root-provider">
+    return <RatingGroup.RootProvider asChild={local.asChild} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others} data-size={local.size ?? 'md'} data-slot="rating-group-root-provider">
       {local.children}
     </RatingGroup.RootProvider>;
 }
@@ -40,7 +40,7 @@ function RatingGroupItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <RatingGroup.Item class={cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-disabled:cursor-default data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-readonly:cursor-default', local.class)} {...others} data-slot="rating-group-item"/>;
+    return <RatingGroup.Item class={cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-readonly:cursor-default motion-reduce:transition-none', local.class)} {...others} data-slot="rating-group-item"/>;
 }
 function RatingGroupItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -49,7 +49,7 @@ function RatingGroupItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     const item = useRatingGroupItemContext();
-    return <span data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} class={cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out', local.class)} {...others} data-slot="rating-group-item-indicator">
+    return <span class={cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out motion-reduce:[&>svg]:transition-none', local.class)} {...others} data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} data-slot="rating-group-item-indicator">
       {resolvedChildren() ?? <>
           <RatingStarIcon data-slot="rating-group-item-indicator-bg" class="absolute inset-0 size-full flex-none fill-transparent stroke-current text-muted-foreground"/>
           <RatingStarIcon data-slot="rating-group-item-indicator-fg" class={cn('absolute inset-0 size-full flex-none fill-current stroke-current text-primary [clip-path:inset(0_0_0_0)]', item().half && '[clip-path:inset(0_50%_0_0)] rtl:[clip-path:inset(0_0_0_50%)]', !item().highlighted && '[clip-path:inset(0_100%_0_0)]')}/>

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -24,7 +24,7 @@ declare const ScrollArea: typeof ScrollAreaRoot & {
     Scrollbar: typeof ScrollAreaScrollbar;
     Thumb: typeof ScrollAreaThumb;
     Corner: typeof ScrollAreaCorner;
-    useScrollArea: (props?: import("@ark-ui/solid").UseScrollAreaProps) => import("@ark-ui/solid").UseScrollAreaReturn;
+    useScrollArea: (props?: import("@ark-ui/solid/scroll-area").UseScrollAreaProps) => import("@ark-ui/solid/scroll-area").UseScrollAreaReturn;
 };
 export { ScrollArea, useScrollArea, useScrollAreaContext };
 export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps };

package/dist/components/scroll-area/ScrollArea.js

@@ -47,7 +47,7 @@ function ScrollAreaViewport(props) {
     return createComponent(ScrollArea.Viewport, mergeProps(others, {
         "data-slot": "scroll-area-viewport",
         get ["class"] () {
-            return cn('h-full min-h-0 w-full min-w-0 [scrollbar-width:none] rounded-md bg-transparent outline-0 group-data-[fade]/scroll-area:[mask-image:linear-gradient(to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,0px))),transparent_100%)] group-data-[fade]/scroll-area:mask-no-repeat focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring forced-colors:mask-none forced-colors:focus-visible:outline-[Highlight] [&::-webkit-scrollbar]:hidden', local.class);
+            return cn('h-full min-h-0 w-full min-w-0 [scrollbar-width:none] rounded-md bg-transparent outline-0 group-data-[fade]/scroll-area:not-forced-colors:[mask-image:linear-gradient(to_bottom,transparent_0,black_min(var(--spacing-10),var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(var(--spacing-10),var(--scroll-area-overflow-y-end,0px))),transparent_100%)] group-data-[fade]/scroll-area:not-forced-colors:mask-no-repeat focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight] [&::-webkit-scrollbar]:hidden', local.class);
         }
     }));
 }
@@ -69,7 +69,7 @@ function ScrollAreaScrollbar(props) {
     return createComponent(ScrollArea.Scrollbar, mergeProps(others, {
         "data-slot": "scroll-area-scrollbar",
         get ["class"] () {
-            return cn("pointer-events-none absolute hidden touch-none justify-center rounded-md bg-transparent opacity-0 transition-[opacity,width,height] duration-200 ease-in-out select-none group-data-[variant=always]/scroll-area:pointer-events-auto group-data-[variant=always]/scroll-area:opacity-100 before:absolute before:content-[''] data-dragging:pointer-events-auto data-hover:pointer-events-auto data-hover:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:start-0 data-[orientation=horizontal]:end-[var(--corner-width,0px)] data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-1/2 data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:translate-y-1/2 data-[orientation=horizontal]:hover:h-1.5 data-[orientation=horizontal]:data-dragging:h-1.5 data-[orientation=horizontal]:data-overflow-x:flex data-[orientation=vertical]:end-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-[var(--corner-height,0px)] data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=vertical]:hover:w-1.5 data-[orientation=vertical]:data-dragging:w-1.5 data-[orientation=vertical]:data-overflow-y:flex motion-reduce:transition-none", local.class);
+            return cn("pointer-events-none absolute hidden touch-none justify-center rounded-md bg-transparent opacity-0 transition-[opacity,width,height] duration-[200ms,150ms,150ms] ease-in-out select-none group-data-[variant=always]/scroll-area:pointer-events-auto group-data-[variant=always]/scroll-area:opacity-100 before:absolute before:content-[''] data-dragging:pointer-events-auto data-hover:pointer-events-auto data-hover:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:start-0 data-[orientation=horizontal]:end-[var(--corner-width,0px)] data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-1/2 data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:translate-y-1/2 data-[orientation=horizontal]:hover:h-1.5 data-[orientation=horizontal]:data-dragging:h-1.5 data-[orientation=horizontal]:data-overflow-x:flex data-[orientation=vertical]:end-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-[var(--corner-height,0px)] data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=vertical]:hover:w-1.5 data-[orientation=vertical]:data-dragging:w-1.5 data-[orientation=vertical]:data-overflow-y:flex motion-reduce:transition-none", local.class);
         }
     }));
 }

package/dist/components/scroll-area/ScrollArea.jsx

@@ -21,7 +21,7 @@ function ScrollAreaViewport(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ScrollArea.Viewport {...others} data-slot="scroll-area-viewport" class={cn('h-full min-h-0 w-full min-w-0 [scrollbar-width:none] rounded-md bg-transparent outline-0 group-data-[fade]/scroll-area:[mask-image:linear-gradient(to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,0px))),transparent_100%)] group-data-[fade]/scroll-area:mask-no-repeat focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring forced-colors:mask-none forced-colors:focus-visible:outline-[Highlight] [&::-webkit-scrollbar]:hidden', local.class)}/>;
+    return <ScrollArea.Viewport {...others} data-slot="scroll-area-viewport" class={cn('h-full min-h-0 w-full min-w-0 [scrollbar-width:none] rounded-md bg-transparent outline-0 group-data-[fade]/scroll-area:not-forced-colors:[mask-image:linear-gradient(to_bottom,transparent_0,black_min(var(--spacing-10),var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(var(--spacing-10),var(--scroll-area-overflow-y-end,0px))),transparent_100%)] group-data-[fade]/scroll-area:not-forced-colors:mask-no-repeat focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight] [&::-webkit-scrollbar]:hidden', local.class)}/>;
 }
 function ScrollAreaContent(props) {
     const [local, others] = splitProps(props, [
@@ -33,7 +33,7 @@ function ScrollAreaScrollbar(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ScrollArea.Scrollbar {...others} data-slot="scroll-area-scrollbar" class={cn("pointer-events-none absolute hidden touch-none justify-center rounded-md bg-transparent opacity-0 transition-[opacity,width,height] duration-200 ease-in-out select-none group-data-[variant=always]/scroll-area:pointer-events-auto group-data-[variant=always]/scroll-area:opacity-100 before:absolute before:content-[''] data-dragging:pointer-events-auto data-hover:pointer-events-auto data-hover:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:start-0 data-[orientation=horizontal]:end-[var(--corner-width,0px)] data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-1/2 data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:translate-y-1/2 data-[orientation=horizontal]:hover:h-1.5 data-[orientation=horizontal]:data-dragging:h-1.5 data-[orientation=horizontal]:data-overflow-x:flex data-[orientation=vertical]:end-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-[var(--corner-height,0px)] data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=vertical]:hover:w-1.5 data-[orientation=vertical]:data-dragging:w-1.5 data-[orientation=vertical]:data-overflow-y:flex motion-reduce:transition-none", local.class)}/>;
+    return <ScrollArea.Scrollbar {...others} data-slot="scroll-area-scrollbar" class={cn("pointer-events-none absolute hidden touch-none justify-center rounded-md bg-transparent opacity-0 transition-[opacity,width,height] duration-[200ms,150ms,150ms] ease-in-out select-none group-data-[variant=always]/scroll-area:pointer-events-auto group-data-[variant=always]/scroll-area:opacity-100 before:absolute before:content-[''] data-dragging:pointer-events-auto data-hover:pointer-events-auto data-hover:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:start-0 data-[orientation=horizontal]:end-[var(--corner-width,0px)] data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-1/2 data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:translate-y-1/2 data-[orientation=horizontal]:hover:h-1.5 data-[orientation=horizontal]:data-dragging:h-1.5 data-[orientation=horizontal]:data-overflow-x:flex data-[orientation=vertical]:end-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-[var(--corner-height,0px)] data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=vertical]:hover:w-1.5 data-[orientation=vertical]:data-dragging:w-1.5 data-[orientation=vertical]:data-overflow-y:flex motion-reduce:transition-none", local.class)}/>;
 }
 function ScrollAreaThumb(props) {
     const [local, others] = splitProps(props, [

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -6,7 +6,7 @@ type SegmentGroupOption = {
     label: JSX.Element;
     disabled?: boolean;
 };
-declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/solid").UseSegmentGroupReturn;
+declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/solid/segment-group").UseSegmentGroupReturn;
 declare function SegmentGroupRoot(props: ComponentProps<typeof SegmentGroupPrimitive.Root>): JSX.Element;
 declare function SegmentGroupRootProvider(props: ComponentProps<typeof SegmentGroupPrimitive.RootProvider>): JSX.Element;
 declare function SegmentGroupLabel(props: ComponentProps<typeof SegmentGroupPrimitive.Label>): JSX.Element;

package/dist/components/segment-group/SegmentGroup.js

@@ -13,6 +13,7 @@ function SegmentGroup_useSegmentGroup(props) {
     return useSegmentGroup(()=>{
         const machineProps = 'function' == typeof props ? props() : props;
         return omitUndefined({
+            orientation: 'horizontal',
             disabled: field?.()?.disabled ?? fieldset?.()?.disabled,
             invalid: field?.()?.invalid ?? fieldset?.()?.invalid,
             readOnly: field?.()?.readOnly,
@@ -111,7 +112,7 @@ function SegmentGroupItem(props) {
             return local.asChild;
         },
         get ["class"] () {
-            return cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class);
+            return cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class);
         }
     }, others, {
         "data-slot": "segment-group-item",

package/dist/components/segment-group/SegmentGroup.jsx

@@ -12,6 +12,7 @@ function SegmentGroup_useSegmentGroup(props) {
     return useSegmentGroup(()=>{
         const machineProps = 'function' == typeof props ? props() : props;
         return omitUndefined({
+            orientation: 'horizontal',
             disabled: field?.()?.disabled ?? fieldset?.()?.disabled,
             invalid: field?.()?.invalid ?? fieldset?.()?.invalid,
             readOnly: field?.()?.readOnly,
@@ -76,7 +77,7 @@ function SegmentGroupItem(props) {
         'children',
         'class'
     ]);
-    return <SegmentGroup.Item asChild={local.asChild} class={cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="segment-group-item">
+    return <SegmentGroup.Item asChild={local.asChild} class={cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="segment-group-item">
       {local.children}
     </SegmentGroup.Item>;
 }

package/dist/components/select/Select.js

@@ -120,7 +120,7 @@ function SelectTrigger(props) {
             return local.asChild;
         },
         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);
+            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] not-data-[placeholder-shown]: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"
@@ -138,6 +138,7 @@ function SelectValueText(props) {
         "data-slot": "select-value-text"
     }));
 }
+const clearTriggerClassName = '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';
 function SelectClearTrigger(props) {
     const [local, others] = splitProps(props, [
         'aria-label',
@@ -158,7 +159,7 @@ function SelectClearTrigger(props) {
             return local['aria-labelledby'];
         },
         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);
+            return cn(clearTriggerClassName, local.class);
         }
     }, others, {
         "data-slot": "select-clear-trigger",
@@ -182,7 +183,7 @@ function SelectClearTrigger(props) {
             }));
         },
         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);
+            return cn(clearTriggerClassName, local.class);
         }
     }, others, {
         "data-slot": "select-clear-trigger"
@@ -196,7 +197,7 @@ function SelectIndicator(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(Select.Indicator, mergeProps({
         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);
+            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 [&:is([data-slot=select-control]>*)]:absolute [&:is([data-slot=select-control]>*)]:end-2 [&:is([data-slot=select-control]>*)]:top-1/2 [&:is([data-slot=select-control]>*)]:-translate-y-1/2 [&>svg]:block [&>svg]:size-4', local.class);
         }
     }, others, {
         "data-slot": "select-indicator",
@@ -229,7 +230,6 @@ function SelectField(props) {
                         }
                     })),
                 createComponent(SelectIndicator, {
-                    class: "absolute end-2 top-1/2 -translate-y-1/2",
                     get children () {
                         return local.indicator;
                     }
@@ -260,7 +260,7 @@ function SelectContent(props) {
     ]);
     return createComponent(Select.Content, mergeProps({
         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);
+            return cn('z-[calc(var(--moduix-z-popup)+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"

package/dist/components/select/Select.jsx

@@ -54,7 +54,7 @@ function SelectTrigger(props) {
         'asChild',
         'class'
     ]);
-    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"/>;
+    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] not-data-[placeholder-shown]: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, [
@@ -62,6 +62,7 @@ function SelectValueText(props) {
     ]);
     return <Select.ValueText class={cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="select-value-text"/>;
 }
+const clearTriggerClassName = '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';
 function SelectClearTrigger(props) {
     const [local, others] = splitProps(props, [
         'aria-label',
@@ -71,7 +72,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']} 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">
+    if (local.asChild) return <Select.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn(clearTriggerClassName, local.class)} {...others} data-slot="select-clear-trigger">
         {local.children}
       </Select.ClearTrigger>;
     return <Select.ClearTrigger asChild={(triggerProps)=>{
@@ -79,7 +80,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>;
-    }} 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"/>;
+    }} class={cn(clearTriggerClassName, local.class)} {...others} data-slot="select-clear-trigger"/>;
 }
 function SelectIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -87,7 +88,7 @@ function SelectIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    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">
+    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 [&:is([data-slot=select-control]>*)]:absolute [&:is([data-slot=select-control]>*)]:end-2 [&:is([data-slot=select-control]>*)]:top-1/2 [&:is([data-slot=select-control]>*)]:-translate-y-1/2 [&>svg]:block [&>svg]:size-4', local.class)} {...others} data-slot="select-indicator">
       {resolvedChildren() ?? <ChevronUpDownIcon/>}
     </Select.Indicator>;
 }
@@ -102,9 +103,7 @@ function SelectField(props) {
         <SelectValueText placeholder={local.placeholder}/>
       </SelectTrigger>
       {local.clearLabel && <SelectClearTrigger aria-label={local.clearLabel}/>}
-      <SelectIndicator class="absolute end-2 top-1/2 -translate-y-1/2">
-        {local.indicator}
-      </SelectIndicator>
+      <SelectIndicator>{local.indicator}</SelectIndicator>
     </SelectControl>;
 }
 function SelectPositioner(props) {
@@ -119,7 +118,7 @@ function SelectContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    return <Select.Content class={cn('z-[calc(var(--moduix-z-popup)+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, [

package/dist/components/separator/Separator.js

@@ -3,7 +3,7 @@ import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-const separatorVariants = cva('block shrink-0 border-border', {
+const separatorVariants = cva('block shrink-0 m-0 border-border', {
     variants: {
         orientation: {
             horizontal: 'h-0 w-full',

package/dist/components/separator/Separator.jsx

@@ -2,7 +2,7 @@ import { ark } from "@ark-ui/solid/factory";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
-const separatorVariants = cva('block shrink-0 border-border', {
+const separatorVariants = cva('block shrink-0 m-0 border-border', {
     variants: {
         orientation: {
             horizontal: 'h-0 w-full',