@moduix/react-tailwind 1.1.0 → 2.0.0

package/dist/components/pagination/Pagination.js

@@ -22,7 +22,7 @@ const Pagination_PaginationRootProvider = /*#__PURE__*/ forwardRef(function({ cl
 const Pagination_PaginationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.Item, {
         ref: ref,
-        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', className),
+        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-2 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', 'data-selected:border-foreground data-selected:bg-foreground data-selected:text-background [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:data-selected:hover:bg-foreground', '[&_svg]:size-4 [&_svg]:shrink-0', className),
         ...props,
         "data-slot": "pagination-item"
     });
@@ -30,7 +30,7 @@ const Pagination_PaginationItem = /*#__PURE__*/ forwardRef(function({ className,
 const Pagination_PaginationEllipsis = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.Ellipsis, {
         ref: ref,
-        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium text-muted-foreground tabular-nums select-none', className),
+        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium text-muted-foreground tabular-nums select-none', className),
         ...props,
         "data-slot": "pagination-ellipsis",
         children: children ?? (!props.asChild && '...')
@@ -50,7 +50,7 @@ function EdgeIcon({ side }) {
 const Pagination_PaginationPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.PrevTrigger, {
         ref: ref,
-        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
+        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == children || false === children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
         ...props,
         "data-slot": "pagination-prev-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(ChevronLeftIcon, {}))
@@ -59,7 +59,7 @@ const Pagination_PaginationPrevTrigger = /*#__PURE__*/ forwardRef(function({ cla
 const Pagination_PaginationNextTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.NextTrigger, {
         ref: ref,
-        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
+        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == children || false === children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
         ...props,
         "data-slot": "pagination-next-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(ChevronRightIcon, {}))
@@ -68,7 +68,7 @@ const Pagination_PaginationNextTrigger = /*#__PURE__*/ forwardRef(function({ cla
 const Pagination_PaginationFirstTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.FirstTrigger, {
         ref: ref,
-        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
+        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == children || false === children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
         ...props,
         "data-slot": "pagination-first-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(EdgeIcon, {
@@ -79,7 +79,7 @@ const Pagination_PaginationFirstTrigger = /*#__PURE__*/ forwardRef(function({ cl
 const Pagination_PaginationLastTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Pagination.LastTrigger, {
         ref: ref,
-        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm leading-5 font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', null == children && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
+        className: cn('inline-flex h-control-md min-w-control-md items-center justify-center rounded-md text-sm font-medium tabular-nums', 'cursor-pointer gap-2 border border-border bg-background px-3 whitespace-nowrap text-foreground no-underline select-none', 'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', (null == children || false === children) && 'w-control-md p-0 rtl:[&_svg]:-scale-x-100', className),
         ...props,
         "data-slot": "pagination-last-trigger",
         children: children ?? (!props.asChild && /*#__PURE__*/ jsx(EdgeIcon, {

package/dist/components/password-input/PasswordInput.js

@@ -22,7 +22,7 @@ const PasswordInput_PasswordInputRootProvider = /*#__PURE__*/ forwardRef(functio
 const PasswordInput_PasswordInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(PasswordInput.Label, {
         ref: ref,
-        className: cn('inline-flex items-center gap-1 text-sm leading-5 font-medium text-foreground', className),
+        className: cn('inline-flex items-center gap-1 text-sm font-medium text-foreground', className),
         ...props,
         "data-slot": "password-input-label"
     });
@@ -38,7 +38,7 @@ const PasswordInput_PasswordInputControl = /*#__PURE__*/ forwardRef(function({ c
 const PasswordInput_PasswordInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(PasswordInput.Input, {
         ref: ref,
-        className: cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md leading-6 text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', className),
+        className: cn('min-h-0 min-w-0 flex-auto bg-transparent px-3 py-1 text-md text-foreground outline-0 transition-opacity duration-200 ease-in-out placeholder:text-muted-foreground disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none', className),
         ...props,
         "data-slot": "password-input-input"
     });

package/dist/components/pin-input/PinInput.js

@@ -25,7 +25,7 @@ const PinInput_PinInputRootProvider = /*#__PURE__*/ forwardRef(function({ classN
 const PinInput_PinInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(PinInput.Label, {
         ref: ref,
-        className: cn('text-sm leading-5 font-medium text-foreground', className),
+        className: cn('text-sm font-medium text-foreground', className),
         ...props,
         "data-slot": "pin-input-label"
     });
@@ -41,7 +41,7 @@ const PinInput_PinInputControl = /*#__PURE__*/ forwardRef(function({ className,
 const PinInput_PinInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(PinInput.Input, {
         ref: ref,
-        className: cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg leading-7 font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', className),
+        className: cn('size-control-md flex-none rounded-md border border-border bg-background px-0 py-0 text-center text-lg font-medium text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none data-disabled:pointer-events-none data-invalid:border-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', className),
         ...props,
         "data-slot": "pin-input-input"
     });

package/dist/components/popover/Popover.d.ts

@@ -1,8 +1,8 @@
 import { Popover as PopoverPrimitive, usePopover, usePopoverContext } from '@ark-ui/react/popover';
 import type { ComponentProps } from 'react';
 import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
-type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
-type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & {
+export type PopoverRootProps = ComponentProps<typeof PopoverPrimitive.Root> & OverlayPortalProps;
+export type PopoverRootProviderProps = ComponentProps<typeof PopoverPrimitive.RootProvider> & {
     portalRef?: OverlayPortalProps['portalRef'];
 };
 declare function PopoverRoot({ lazyMount, modal, portalled, portalRef, unmountOnExit, ...props }: PopoverRootProps): import("react").JSX.Element;

package/dist/components/popover/Popover.js

@@ -45,7 +45,7 @@ const Popover_PopoverTrigger = /*#__PURE__*/ forwardRef(function({ asChild, clas
     return /*#__PURE__*/ jsx(Popover.Trigger, {
         ref: ref,
         asChild: asChild,
-        className: cn(!asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] 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:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
+        className: cn(!asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md text-foreground outline-0 transition-[background-color,border-color,color] 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:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=open]:not-data-[value]:bg-accent data-[current]:data-[state=open]:bg-accent motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
         ...props,
         "data-slot": "popover-trigger"
     });
@@ -79,7 +79,7 @@ const Popover_PopoverContent = /*#__PURE__*/ forwardRef(function({ className, ..
 const Popover_PopoverArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Popover.Arrow, {
         ref: ref,
-        className: cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', className),
+        className: cn('[--arrow-background:var(--color-popover)] [--arrow-size:var(--spacing-2_5)]', className),
         ...props,
         "data-slot": "popover-arrow",
         children: children ?? /*#__PURE__*/ jsx(Popover_PopoverArrowTip, {})
@@ -96,7 +96,7 @@ const Popover_PopoverArrowTip = /*#__PURE__*/ forwardRef(function({ className, .
 const Popover_PopoverTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Popover.Title, {
         ref: ref,
-        className: cn('text-md leading-6 font-semibold text-popover-foreground', className),
+        className: cn('text-md font-semibold text-popover-foreground', className),
         ...props,
         "data-slot": "popover-title"
     });
@@ -104,7 +104,7 @@ const Popover_PopoverTitle = /*#__PURE__*/ forwardRef(function({ className, ...p
 const Popover_PopoverDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Popover.Description, {
         ref: ref,
-        className: cn('text-sm leading-5 text-muted-foreground', className),
+        className: cn('text-sm text-muted-foreground', className),
         ...props,
         "data-slot": "popover-description"
     });
@@ -113,7 +113,7 @@ const Popover_PopoverCloseTrigger = /*#__PURE__*/ forwardRef(function({ asChild,
     return /*#__PURE__*/ jsx(Popover.CloseTrigger, {
         ref: ref,
         asChild: asChild,
-        className: cn(!asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-0 transition-[background-color,border-color,color] 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:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
+        className: cn(!asChild && 'box-border inline-flex min-h-control-md cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3.5 py-1 text-md text-foreground outline-0 transition-[background-color,border-color,color] 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:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', className),
         ...props,
         "data-slot": "popover-close-trigger"
     });
@@ -134,7 +134,7 @@ const Popover_PopoverCloseIcon = /*#__PURE__*/ forwardRef(function({ className,
 const Popover_PopoverHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        className: cn('grid gap-1 group-has-[>[data-slot=popover-close-icon]]/popover-content:pe-10', className),
+        className: cn('grid gap-1 group-has-[[data-slot=popover-close-icon]]/popover-content:pe-10', className),
         ...props,
         "data-slot": "popover-header"
     });

package/dist/components/progress-circular/ProgressCircular.js

@@ -22,7 +22,7 @@ const ProgressCircular_ProgressCircularRootProvider = /*#__PURE__*/ forwardRef(f
 const ProgressCircular_ProgressCircularLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Progress.Label, {
         ref: ref,
-        className: cn('max-w-full min-w-0 text-center text-sm font-regular [overflow-wrap:anywhere]', className),
+        className: cn('max-w-full min-w-0 text-center text-sm font-regular wrap-anywhere', className),
         ...props,
         "data-slot": "progress-circular-label"
     });
@@ -30,7 +30,7 @@ const ProgressCircular_ProgressCircularLabel = /*#__PURE__*/ forwardRef(function
 const ProgressCircular_ProgressCircularValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Progress.ValueText, {
         ref: ref,
-        className: cn('max-w-full min-w-0 text-center text-sm font-medium [overflow-wrap:anywhere]', className),
+        className: cn('max-w-full min-w-0 text-center text-sm font-medium wrap-anywhere', className),
         ...props,
         "data-slot": "progress-circular-value-text"
     });
@@ -54,7 +54,7 @@ const ProgressCircular_ProgressCircularCircleTrack = /*#__PURE__*/ forwardRef(fu
 const ProgressCircular_ProgressCircularCircleRange = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Progress.CircleRange, {
         ref: ref,
-        className: cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-[moduix-spin_1.4s_linear_infinite] data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', className),
+        className: cn('origin-center stroke-primary transition-[stroke-dashoffset] duration-200 ease-in-out [stroke-linecap:round] [transform-box:fill-box] data-[state=indeterminate]:animate-moduix-progress-circular-indeterminate data-[state=indeterminate]:[stroke-dasharray:1_200] motion-reduce:transition-none motion-reduce:data-[state=indeterminate]:animate-none motion-reduce:data-[state=indeterminate]:[stroke-dasharray:20_200]', className),
         ...props,
         "data-slot": "progress-circular-circle-range"
     });

package/dist/components/qr-code/QrCode.js

@@ -46,7 +46,7 @@ const QrCode_QrCodeOverlay = /*#__PURE__*/ forwardRef(function({ className, ...p
 const QrCode_QrCodeDownloadTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(QrCode.DownloadTrigger, {
         ref: ref,
-        className: cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] 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:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', className),
+        className: cn('box-border inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm font-medium whitespace-nowrap text-foreground transition-[border-color,background-color,color,opacity,box-shadow,transform] 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:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', className),
         ...props,
         "data-slot": "qr-code-download-trigger"
     });

package/dist/components/radio-group/RadioGroup.js

@@ -68,11 +68,11 @@ const RadioGroup_RadioGroupOption = /*#__PURE__*/ forwardRef(function({ children
 const RadioGroup_RadioGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.ItemControl, {
         ref: ref,
-        "data-size": size,
         className: cn(radioGroupItemControlVariants({
             size
         }), className),
         ...props,
+        "data-size": size,
         "data-slot": "radio-group-item-control"
     });
 });
@@ -87,7 +87,7 @@ const RadioGroup_RadioGroupItemText = /*#__PURE__*/ forwardRef(function({ classN
 const RadioGroup_RadioGroupIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.Indicator, {
         ref: ref,
-        className: cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] transition-[var(--transition-property,translate)] duration-200 ease-in-out motion-reduce:transition-none', className),
+        className: cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] [--transition-duration:var(--moduix-duration-normal)]', className),
         ...props,
         "data-slot": "radio-group-indicator"
     });

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

@@ -7,18 +7,18 @@ import { RatingStarIcon } from "../../internal/icons/ui/index.js";
 const RatingGroup_RatingGroupRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Root, {
         ref: ref,
-        "data-size": size,
         className: cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', className),
         ...props,
+        "data-size": size,
         "data-slot": "rating-group-root"
     });
 });
 const RatingGroup_RatingGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.RootProvider, {
         ref: ref,
-        "data-size": size,
         className: cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', className),
         ...props,
+        "data-size": size,
         "data-slot": "rating-group-root-provider"
     });
 });
@@ -41,7 +41,7 @@ const RatingGroup_RatingGroupControl = /*#__PURE__*/ forwardRef(function({ class
 const RatingGroup_RatingGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Item, {
         ref: ref,
-        className: 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', className),
+        className: 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', className),
         ...props,
         "data-slot": "rating-group-item"
     });
@@ -50,10 +50,10 @@ const RatingGroup_RatingGroupItemIndicator = /*#__PURE__*/ forwardRef(function({
     const { half, highlighted } = useRatingGroupItemContext();
     return /*#__PURE__*/ jsx("span", {
         ref: ref,
+        className: 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', className),
+        ...props,
         "data-half": half ? '' : void 0,
         "data-highlighted": highlighted ? '' : void 0,
-        className: 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', className),
-        ...props,
         "data-slot": "rating-group-item-indicator",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [

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

@@ -28,7 +28,7 @@ const ScrollArea_ScrollAreaViewport = /*#__PURE__*/ forwardRef(function({ classN
         ref: ref,
         ...props,
         "data-slot": "scroll-area-viewport",
-        className: 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', className)
+        className: 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', className)
     });
 });
 const ScrollArea_ScrollAreaContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -44,7 +44,7 @@ const ScrollArea_ScrollAreaScrollbar = /*#__PURE__*/ forwardRef(function({ class
         ref: ref,
         ...props,
         "data-slot": "scroll-area-scrollbar",
-        className: 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", className)
+        className: 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", className)
     });
 });
 const ScrollArea_ScrollAreaThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {

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

@@ -12,6 +12,7 @@ function SegmentGroup_useSegmentGroup(props) {
     const field = useFieldContext();
     const fieldset = useFieldsetContext();
     return useSegmentGroup({
+        orientation: 'horizontal',
         disabled: field?.disabled ?? fieldset?.disabled,
         invalid: field?.invalid ?? fieldset?.invalid,
         readOnly: field?.readOnly,
@@ -61,7 +62,7 @@ const SegmentGroup_SegmentGroupLabel = /*#__PURE__*/ forwardRef(function({ class
 const SegmentGroup_SegmentGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.Item, {
         ref: ref,
-        className: 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', className),
+        className: 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', className),
         ...props,
         "data-slot": "segment-group-item"
     });

package/dist/components/select/Select.js

@@ -59,7 +59,7 @@ const Select_SelectTrigger = /*#__PURE__*/ forwardRef(function({ asChild, classN
     return /*#__PURE__*/ jsx(Select.Trigger, {
         ref: ref,
         asChild: asChild,
-        className: cn(!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', className),
+        className: cn(!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', className),
         ...props,
         "data-slot": "select-trigger"
     });
@@ -91,7 +91,7 @@ const Select_SelectClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, c
 const Select_SelectIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Select.Indicator, {
         ref: ref,
-        className: 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', className),
+        className: 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', className),
         ...props,
         "data-slot": "select-indicator",
         children: children ?? /*#__PURE__*/ jsx(ChevronUpDownIcon, {})
@@ -111,7 +111,6 @@ const Select_SelectField = /*#__PURE__*/ forwardRef(function({ clearLabel, indic
                 "aria-label": clearLabel
             }),
             /*#__PURE__*/ jsx(Select_SelectIndicator, {
-                className: "absolute end-2 top-1/2 -translate-y-1/2",
                 children: indicator
             })
         ]
@@ -130,7 +129,7 @@ const Select_SelectPositioner = /*#__PURE__*/ forwardRef(function({ className, .
 const Select_SelectContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Select.Content, {
         ref: ref,
-        className: 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', className),
+        className: 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', className),
         ...props,
         "data-slot": "select-content"
     });

package/dist/components/separator/Separator.js

@@ -3,7 +3,7 @@ import { ark } from "@ark-ui/react/factory";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 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',