@moduix/react-tailwind 1.1.0 → 2.0.0

package/dist/components/accordion/Accordion.js

@@ -57,10 +57,10 @@ const Accordion_AccordionItemContent = /*#__PURE__*/ forwardRef(function({ class
 const Accordion_AccordionItemBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "accordion",
-        "data-part": "item-body",
         className: cn('grid min-w-0 gap-3 p-3', className),
         ...props,
+        "data-scope": "accordion",
+        "data-part": "item-body",
         "data-slot": "accordion-item-body"
     });
 });

package/dist/components/alert/Alert.js

@@ -20,13 +20,13 @@ const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className,
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         role: role,
-        "data-scope": "alert",
-        "data-part": "root",
-        "data-status": status,
         className: cn(alertVariants({
             status
         }), className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "root",
+        "data-status": status,
         "data-slot": "alert-root",
         children: children
     });
@@ -34,51 +34,51 @@ const Alert_AlertRoot = /*#__PURE__*/ forwardRef(function({ children, className,
 const Alert_AlertIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "indicator",
         "aria-hidden": "true",
         className: 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', className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "indicator",
         "data-slot": "alert-indicator"
     });
 });
 const Alert_AlertContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "content",
         className: cn('grid min-w-0 flex-1 gap-1', className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "content",
         "data-slot": "alert-content"
     });
 });
 const Alert_AlertTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.p, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "title",
         className: cn('m-0 min-w-0 text-sm font-semibold [overflow-wrap:anywhere]', className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "title",
         "data-slot": "alert-title"
     });
 });
 const Alert_AlertDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "description",
         className: cn('min-w-0 text-sm [overflow-wrap:anywhere] text-muted-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0', className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "description",
         "data-slot": "alert-description"
     });
 });
 const Alert_AlertActions = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "alert",
-        "data-part": "actions",
         className: cn('mt-2 flex flex-wrap gap-2', className),
         ...props,
+        "data-scope": "alert",
+        "data-part": "actions",
         "data-slot": "alert-actions"
     });
 });

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

@@ -31,19 +31,25 @@ const AngleSlider_AngleSliderRootProvider = /*#__PURE__*/ forwardRef(function({
 const AngleSlider_AngleSliderControl = /*#__PURE__*/ forwardRef(function({ className, onPointerDown, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Control, {
         ref: ref,
-        className: 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", className),
+        className: cn("relative box-border aspect-square w-32 min-w-0 cursor-pointer rounded-full outline-0 select-none [--angle-slider-fill:var(--color-primary)] before:absolute before:inset-0 before:rounded-full before:bg-[conic-gradient(from_0deg,var(--angle-slider-fill)_var(--angle,0deg),var(--color-muted)_var(--angle,0deg))] before:[mask-image:radial-gradient(closest-side,transparent_calc(100%-0.5rem-1px),#000_calc(100%-0.5rem))] before:content-[''] after:absolute after:top-1 after:left-1/2 after:z-1 after:size-2 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-[var(--angle-slider-fill)] after:content-[''] data-disabled:cursor-default data-invalid:[--angle-slider-fill:var(--color-destructive)] data-readonly:cursor-default", className),
+        ...props,
         onPointerDown: (event)=>{
             onPointerDown?.(event);
-            event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
+            if (event.defaultPrevented || 0 !== event.button) return;
+            if (event.currentTarget.matches('[data-disabled], [data-readonly]')) return;
+            event.preventDefault();
+            event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.focus({
+                preventScroll: true,
+                focusVisible: false
+            });
         },
-        ...props,
         "data-slot": "angle-slider-control"
     });
 });
 const AngleSlider_AngleSliderThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Thumb, {
         ref: ref,
-        className: 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]", className),
+        className: cn("absolute inset-y-0 left-1/2 z-2 w-0 outline-0 before:absolute before:top-1 before:left-0 before:box-border before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-border before:bg-background before:shadow-sm before:transition-[border-color,background-color,box-shadow] before:duration-200 before:ease-in-out before: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 motion-reduce:before:transition-none [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:border-ring [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:shadow-md [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:ring-1 [[data-slot=angle-slider-control]:active:not([data-disabled]):not([data-readonly])_&]:before:ring-ring", className),
         ...props,
         "data-slot": "angle-slider-thumb"
     });
@@ -59,7 +65,7 @@ const AngleSlider_AngleSliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ c
 const AngleSlider_AngleSliderMarker = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.Marker, {
         ref: ref,
-        className: 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", className),
+        className: cn("absolute inset-0 before:absolute before:top-1 before:left-1/2 before:h-2 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", className),
         ...props,
         "data-slot": "angle-slider-marker"
     });
@@ -77,6 +83,7 @@ function AngleSliderDial({ children, ...props }) {
         ...props,
         children: [
             children,
+            /*#__PURE__*/ jsx(AngleSlider_AngleSliderValueText, {}),
             /*#__PURE__*/ jsx(AngleSlider_AngleSliderThumb, {})
         ]
     });
@@ -84,7 +91,7 @@ function AngleSliderDial({ children, ...props }) {
 const AngleSlider_AngleSliderValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(AngleSlider.ValueText, {
         ref: ref,
-        className: cn('text-center text-sm font-medium text-foreground', className),
+        className: cn('absolute inset-0 z-1 grid place-items-center text-center text-lg font-medium text-foreground tabular-nums', className),
         ...props,
         "data-slot": "angle-slider-value-text"
     });

package/dist/components/avatar/Avatar.js

@@ -31,11 +31,11 @@ const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, .
 const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.RootProvider, {
         ref: ref,
-        "data-size": size,
         className: cn(avatarVariants({
             size
         }), className),
         ...props,
+        "data-size": size,
         "data-slot": "avatar-root-provider"
     });
 });

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,7 @@
 import type { HTMLArkProps } from '@ark-ui/react/factory';
-import type { Key, ReactNode } from 'react';
-type BreadcrumbsPathItem = {
-    href?: string;
-    key?: Key;
+import type { ReactNode } from 'react';
+type BreadcrumbsPathLink = {
+    href: string;
     label: ReactNode;
 };
 declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
@@ -11,7 +10,8 @@ declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import
     Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
     Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLAnchorElement>>;
     Path: import("react").ForwardRefExoticComponent<Omit<HTMLArkProps<"ol">, "asChild" | "children"> & {
-        items: readonly BreadcrumbsPathItem[];
+        links: readonly BreadcrumbsPathLink[];
+        page: ReactNode;
         separator?: ReactNode;
     } & import("react").RefAttributes<HTMLOListElement>>;
     Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -46,28 +46,30 @@ const Breadcrumbs_BreadcrumbsPage = /*#__PURE__*/ forwardRef(function({ classNam
         className: cn('block max-w-full min-w-0 truncate px-1 font-medium text-foreground', className)
     });
 });
-const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ items, separator, ...props }, ref) {
-    return /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsList, {
+const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ links, page, separator, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(Breadcrumbs_BreadcrumbsList, {
         ref: ref,
         ...props,
-        children: items.map((item, index)=>{
-            const isLastItem = index === items.length - 1;
-            return /*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
-                        children: isLastItem ? /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsPage, {
-                            children: item.label
-                        }) : /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsLink, {
-                            href: item.href,
-                            children: item.label
+        children: [
+            links.map((link, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
+                            children: /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsLink, {
+                                href: link.href,
+                                children: link.label
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsSeparator, {
+                            children: separator
                         })
-                    }),
-                    isLastItem ? null : /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsSeparator, {
-                        children: separator
-                    })
-                ]
-            }, item.key ?? index);
-        })
+                    ]
+                }, index)),
+            /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
+                children: /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsPage, {
+                    children: page
+                })
+            })
+        ]
     });
 });
 const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {

package/dist/components/carousel/Carousel.js

@@ -47,7 +47,7 @@ const Carousel_CarouselItem = /*#__PURE__*/ forwardRef(function({ className, ...
 const Carousel_CarouselPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.PrevTrigger, {
         ref: ref,
-        className: cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', className),
+        className: cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', className),
         ...props,
         "data-slot": "carousel-prev-trigger",
         children: children ?? /*#__PURE__*/ jsx("span", {
@@ -61,7 +61,7 @@ const Carousel_CarouselPrevTrigger = /*#__PURE__*/ forwardRef(function({ classNa
 const Carousel_CarouselNextTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.NextTrigger, {
         ref: ref,
-        className: cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', className),
+        className: cn('focus-visible:outline-offset-0.5 inline-flex size-control-md shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', className),
         ...props,
         "data-slot": "carousel-next-trigger",
         children: children ?? /*#__PURE__*/ jsx("span", {
@@ -104,7 +104,7 @@ const Carousel_CarouselIndicators = /*#__PURE__*/ forwardRef(function({ classNam
 const Carousel_CarouselAutoplayTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Carousel.AutoplayTrigger, {
         ref: ref,
-        className: cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-foreground data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-foreground [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', className),
+        className: cn('focus-visible:outline-offset-0.5 inline-flex size-control-md min-w-12 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-0 transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:border-ring data-pressed:bg-accent data-pressed:text-accent-foreground motion-reduce:transition-none [&_svg]:size-4 [&:not(:disabled):not([data-disabled]):hover]:border-ring [&:not(:disabled):not([data-disabled]):hover]:bg-accent [&:not(:disabled):not([data-disabled]):hover]:text-accent-foreground [&:not(:disabled):not([data-disabled]):hover]:shadow-md', className),
         ...props,
         "data-slot": "carousel-autoplay-trigger"
     });

package/dist/components/command-palette/CommandPalette.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 import { ark } from "@ark-ui/react/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/react/hotkeys";
 import { forwardRef, useEffect } from "react";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/index.js";

package/dist/components/drawer/Drawer.js

@@ -72,9 +72,9 @@ const Drawer_DrawerContent = /*#__PURE__*/ forwardRef(function({ className, vari
     const rootVariant = useContext(DrawerVariantContext);
     return /*#__PURE__*/ jsx(Drawer.Content, {
         ref: ref,
-        "data-variant": variant ?? rootVariant,
         className: cn("group/drawer relative box-border flex h-full max-h-[80dvh] w-full max-w-[100vw] origin-bottom [translate:0_0] [scale:1] flex-col overscroll-contain rounded-t-xl rounded-b-none border border-border bg-popover px-6 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] text-popover-foreground shadow-lg outline-0 [transition:transform_calc(var(--drawer-swipe-strength,1)*450ms)_cubic-bezier(0,0,0.2,1),scale_450ms_cubic-bezier(0.32,0.72,0,1),translate_450ms_cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-control-xl after:bg-inherit after:content-[''] data-dragging:select-none data-nested-drawer-swiping:[transition-duration:0s] data-[nested-drawer-open]:[scale:calc(1-0.05*var(--nested-drawers,0))] data-[state=closed]:animate-moduix-drawer-content-out-down data-[state=open]:animate-moduix-drawer-content-in-down data-[state=open]:data-swiping:[transition-duration:0s] data-[swipe-direction=down]:data-[nested-drawer-open]:[translate:0_calc(-1*40px*var(--nested-drawers,0))] data-[swipe-direction=left]:h-full data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:rounded-s-none data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:p-6 data-[swipe-direction=left]:after:inset-x-auto data-[swipe-direction=left]:after:inset-y-0 data-[swipe-direction=left]:after:top-0 data-[swipe-direction=left]:after:right-full data-[swipe-direction=left]:after:h-auto data-[swipe-direction=left]:after:w-control-xl data-[swipe-direction=left]:data-[nested-drawer-open]:[translate:calc(40px*var(--nested-drawers,0))_0] data-[swipe-direction=left]:data-[state=closed]:animate-moduix-drawer-content-out-left data-[swipe-direction=left]:data-[state=open]:animate-moduix-drawer-content-in-left data-[swipe-direction=right]:h-full data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:w-[min(22rem,calc(100vw-2rem))] data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:rounded-e-none data-[swipe-direction=right]:p-6 data-[swipe-direction=right]:after:inset-x-auto data-[swipe-direction=right]:after:inset-y-0 data-[swipe-direction=right]:after:top-0 data-[swipe-direction=right]:after:left-full data-[swipe-direction=right]:after:h-auto data-[swipe-direction=right]:after:w-control-xl data-[swipe-direction=right]:data-[nested-drawer-open]:[translate:calc(-1*40px*var(--nested-drawers,0))_0] data-[swipe-direction=right]:data-[state=closed]:animate-moduix-drawer-content-out-right data-[swipe-direction=right]:data-[state=open]:animate-moduix-drawer-content-in-right data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:rounded-t-none data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(1rem+env(safe-area-inset-top,0px))] data-[swipe-direction=up]:pb-4 data-[swipe-direction=up]:after:top-auto data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=up]:data-[nested-drawer-open]:[translate:0_calc(40px*var(--nested-drawers,0))] data-[swipe-direction=up]:data-[state=closed]:animate-moduix-drawer-content-out-up data-[swipe-direction=up]:data-[state=open]:animate-moduix-drawer-content-in-up data-[variant=island]:rounded-xl data-[variant=island]:after:hidden motion-reduce:[transition-duration:1ms] motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]", className),
         ...props,
+        "data-variant": variant ?? rootVariant,
         "data-slot": "drawer-content"
     });
 });

package/dist/components/highlight/Highlight.js

@@ -7,7 +7,7 @@ function HighlightRoot({ className, ...props }) {
         "data-scope": "highlight",
         "data-part": "root",
         "data-slot": "highlight-root",
-        className: cn('rounded-xs bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-accent))] [box-decoration-break:clone] px-1 py-px font-medium text-foreground no-underline shadow-none [-webkit-box-decoration-break:clone]', className)
+        className: cn('rounded-xs bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-accent))] box-decoration-clone px-1 py-px font-medium text-foreground no-underline shadow-none', className)
     });
 }
 const Highlight_Highlight = Object.assign(HighlightRoot, {

package/dist/components/json-tree-view/JsonTreeView.js

@@ -4,10 +4,11 @@ import { JsonTreeView, useJsonTreeView } from "@ark-ui/react/json-tree-view";
 import { forwardRef } from "react";
 import { cn } from "../../internal/cn.js";
 import { ChevronRightIcon } from "../../internal/icons/ui/index.js";
+const rootClassName = "box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,var(--color-chart-5)_72%,var(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,var(--color-chart-5)_72%,var(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,var(--color-chart-1)_72%,var(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,var(--color-chart-3)_78%,var(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,var(--color-chart-4)_74%,var(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,var(--color-chart-5)_72%,var(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,var(--color-chart-3)_78%,var(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,var(--color-success)_78%,var(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control'],&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible,&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled],&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled],&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus],&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected],&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,var(--color-accent)_72%,var(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,var(--color-muted-foreground)_42%,var(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover,&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,var(--color-accent)_72%,var(--color-background))]";
 const JsonTreeView_JsonTreeViewRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(JsonTreeView.Root, {
         ref: ref,
-        className: cn("box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,theme(--color-chart-1)_72%,theme(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,theme(--color-chart-4)_74%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,theme(--color-success)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,theme(--color-muted-foreground)_42%,theme(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))]", className),
+        className: cn(rootClassName, className),
         ...props,
         "data-slot": "json-tree-view-root"
     });
@@ -15,7 +16,7 @@ const JsonTreeView_JsonTreeViewRoot = /*#__PURE__*/ forwardRef(function({ classN
 const JsonTreeView_JsonTreeViewRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(JsonTreeView.RootProvider, {
         ref: ref,
-        className: cn("box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,theme(--color-chart-1)_72%,theme(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,theme(--color-chart-4)_74%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,theme(--color-success)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,theme(--color-muted-foreground)_42%,theme(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))]", className),
+        className: cn(rootClassName, className),
         ...props,
         "data-slot": "json-tree-view-root-provider"
     });

package/dist/components/menu/Menu.d.ts

@@ -14,6 +14,8 @@ type MenuRadioItemProps = ComponentProps<typeof MenuPrimitive.RadioItem> & {
 };
 type MenuRootProps = ComponentProps<typeof MenuPrimitive.Root> & OverlayPortalProps;
 type MenuRootProviderProps = ComponentProps<typeof MenuPrimitive.RootProvider> & OverlayPortalProps;
+declare const menuPositionerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const menuContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare function MenuRoot({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: MenuRootProps): import("react").JSX.Element;
 declare function MenuRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: MenuRootProviderProps): import("react").JSX.Element;
 declare function MenuTriggerIcon({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
@@ -48,4 +50,4 @@ declare const Menu: typeof MenuRoot & {
     ItemShortcut: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
     ItemContext: (props: MenuPrimitive.ItemContextProps) => import("react").ReactNode;
 };
-export { Menu, useMenu, useMenuContext, useMenuItemContext };
+export { Menu, menuContentVariants, menuPositionerVariants, useMenu, useMenuContext, useMenuItemContext, };

package/dist/components/menu/Menu.js

@@ -28,6 +28,8 @@ const menuItemStyles = cva("relative z-0 min-h-control-sm cursor-default rounded
         tone: 'default'
     }
 });
+const menuPositionerVariants = cva('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0');
+const menuContentVariants = cva('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]');
 function MenuRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
         portalled: portalled,
@@ -89,7 +91,7 @@ const Menu_MenuPositioner = /*#__PURE__*/ forwardRef(function({ className, ...pr
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Menu.Positioner, {
             ref: ref,
-            className: cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', className),
+            className: cn(menuPositionerVariants(), className),
             ...props,
             "data-slot": "menu-positioner"
         })
@@ -99,7 +101,7 @@ const Menu_MenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className,
     return /*#__PURE__*/ jsx(Menu.Content, {
         ref: ref,
         asChild: asChild,
-        className: cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        className: cn(menuContentVariants(), className),
         ...props,
         "data-slot": "menu-content",
         children: children
@@ -108,10 +110,10 @@ const Menu_MenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className,
 const Menu_MenuViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "menu",
-        "data-part": "viewport",
         className: cn('flex max-h-[min(24rem,var(--available-height,100dvh))] flex-col overflow-auto', className),
         ...props,
+        "data-scope": "menu",
+        "data-part": "viewport",
         "data-slot": "menu-viewport"
     });
 });
@@ -135,12 +137,12 @@ const Menu_MenuArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...prop
 const Menu_MenuItem = /*#__PURE__*/ forwardRef(function({ className, tone = 'default', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Item, {
         ref: ref,
-        "data-tone": tone,
         className: cn(menuItemStyles({
             layout: 'item',
             tone
         }), className),
         ...props,
+        "data-tone": tone,
         "data-slot": "menu-item"
     });
 });
@@ -197,24 +199,24 @@ const Menu_MenuRadioItemGroup = /*#__PURE__*/ forwardRef(function({ className, .
 const Menu_MenuRadioItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.RadioItem, {
         ref: ref,
-        "data-indicator-position": indicator,
         className: cn(menuItemStyles({
             layout: 'indicatorItem',
             indicator
         }), className),
         ...props,
+        "data-indicator-position": indicator,
         "data-slot": "menu-radio-item"
     });
 });
 const Menu_MenuCheckboxItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.CheckboxItem, {
         ref: ref,
-        "data-indicator-position": indicator,
         className: cn(menuItemStyles({
             layout: 'indicatorItem',
             indicator
         }), className),
         ...props,
+        "data-indicator-position": indicator,
         "data-slot": "menu-checkbox-item"
     });
 });
@@ -297,4 +299,4 @@ const Menu_Menu = Object.assign(MenuRoot, {
     ItemShortcut: Menu_MenuItemShortcut,
     ItemContext: Menu.ItemContext
 });
-export { Menu_Menu as Menu, useMenu, useMenuContext, useMenuItemContext };
+export { Menu_Menu as Menu, menuContentVariants, menuPositionerVariants, useMenu, useMenuContext, useMenuItemContext };

package/dist/components/native-select/NativeSelect.js

@@ -16,6 +16,8 @@ const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ classN
             /*#__PURE__*/ jsx(Field.Select, {
                 ...props,
                 ref: ref,
+                "data-scope": "field",
+                "data-part": "select",
                 "data-slot": "native-select-root",
                 multiple: multiple,
                 size: size,

package/dist/components/number-input/NumberInput.js

@@ -47,7 +47,7 @@ const NumberInput_NumberInputControl = /*#__PURE__*/ forwardRef(function({ class
 const NumberInput_NumberInputDecrementTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(NumberInput.DecrementTrigger, {
         ref: ref,
-        className: cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', className),
+        className: cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-s-md border border-e-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', className),
         ...props,
         "data-slot": "number-input-decrement-trigger",
         children: children ?? /*#__PURE__*/ jsx(MinusIcon, {})
@@ -56,7 +56,7 @@ const NumberInput_NumberInputDecrementTrigger = /*#__PURE__*/ forwardRef(functio
 const NumberInput_NumberInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(NumberInput.Input, {
         ref: ref,
-        className: cn('h-control-md w-24 rounded-none border-x-0 border-y border-border border-x-current bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-focus:z-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', className),
+        className: cn('h-control-md w-24 rounded-none border-x-0 border-y border-border bg-background px-3 py-1 text-center text-md leading-6 text-foreground tabular-nums outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out group-data-invalid/number-input:border-t-destructive group-data-invalid/number-input:border-b-destructive focus-visible:z-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive data-invalid:border-t-destructive data-invalid:border-b-destructive data-invalid:focus-visible:outline-destructive motion-reduce:transition-none', className),
         ...props,
         "data-slot": "number-input-input"
     });
@@ -64,7 +64,7 @@ const NumberInput_NumberInputInput = /*#__PURE__*/ forwardRef(function({ classNa
 const NumberInput_NumberInputIncrementTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(NumberInput.IncrementTrigger, {
         ref: ref,
-        className: cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none data-focus:z-1 data-focus:outline-1 data-focus:-outline-offset-1 data-focus:outline-ring group-data-invalid/number-input:data-focus:outline-destructive data-invalid:border-destructive data-invalid:focus-visible:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', className),
+        className: cn('box-border inline-flex size-control-md min-w-control-md cursor-pointer items-center justify-center rounded-e-md border border-s-0 border-border bg-background p-0 text-foreground outline-0 transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none group-data-invalid/number-input:border-destructive focus-visible:z-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring group-data-invalid/number-input:focus-visible:outline-destructive active:bg-accent disabled:pointer-events-none data-disabled:pointer-events-none motion-reduce:transition-none [&>svg]:size-3.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', className),
         ...props,
         "data-slot": "number-input-increment-trigger",
         children: children ?? /*#__PURE__*/ jsx(PlusIcon, {})