@moduix/react 2.5.1 → 2.7.0

package/dist/components/input-group/InputGroup.js

@@ -3,7 +3,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { Button } from "../button/index.js";
 import { Input } from "../input/index.js";
 import InputGroup_module from "./InputGroup.module.js";
@@ -18,7 +17,7 @@ const InputGroup_InputGroupRoot = /*#__PURE__*/ forwardRef(function({ children,
             "data-part": "root",
             "data-slot": "input-group-root",
             "data-size": size,
-            className: clsx(InputGroup_module.root, normalizeClassName(className)),
+            className: clsx(InputGroup_module.root, className),
             children: children
         })
     });
@@ -27,7 +26,7 @@ const InputGroup_InputGroupInput = /*#__PURE__*/ forwardRef(function({ className
     const groupSize = useContext(InputGroupSizeContext);
     return /*#__PURE__*/ jsx(Input, {
         ref: ref,
-        className: clsx(InputGroup_module.input, normalizeClassName(className)),
+        className: clsx(InputGroup_module.input, className),
         size: size ?? groupSize,
         ...props
     });
@@ -39,7 +38,7 @@ const InputGroup_InputGroupAddon = /*#__PURE__*/ forwardRef(function({ className
         "data-scope": "input-group",
         "data-part": "addon",
         "data-slot": "input-group-addon",
-        className: clsx(InputGroup_module.addon, normalizeClassName(className))
+        className: clsx(InputGroup_module.addon, className)
     });
 });
 const InputGroup_InputGroupText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -49,7 +48,7 @@ const InputGroup_InputGroupText = /*#__PURE__*/ forwardRef(function({ className,
         "data-scope": "input-group",
         "data-part": "text",
         "data-slot": "input-group-text",
-        className: clsx(InputGroup_module.text, normalizeClassName(className))
+        className: clsx(InputGroup_module.text, className)
     });
 });
 const InputGroup_InputGroupButton = /*#__PURE__*/ forwardRef(function({ className, variant = 'ghost', size, type = 'button', ...props }, ref) {
@@ -58,7 +57,7 @@ const InputGroup_InputGroupButton = /*#__PURE__*/ forwardRef(function({ classNam
         ref: ref,
         ...props,
         "data-slot": "input-group-button",
-        className: clsx(InputGroup_module.button, normalizeClassName(className)),
+        className: clsx(InputGroup_module.button, className),
         variant: variant,
         size: size ?? groupSize,
         type: type

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

@@ -4,12 +4,11 @@ import { JsonTreeView, useJsonTreeView } from "@ark-ui/react/json-tree-view";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { ChevronRightIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import JsonTreeView_module from "./JsonTreeView.module.js";
 const JsonTreeView_JsonTreeViewRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(JsonTreeView.Root, {
         ref: ref,
-        className: clsx(JsonTreeView_module.root, normalizeClassName(className)),
+        className: clsx(JsonTreeView_module.root, className),
         ...props,
         "data-slot": "json-tree-view-root"
     });
@@ -17,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: clsx(JsonTreeView_module.root, normalizeClassName(className)),
+        className: clsx(JsonTreeView_module.root, className),
         ...props,
         "data-slot": "json-tree-view-root-provider"
     });
@@ -28,7 +27,7 @@ const JsonTreeView_JsonTreeViewTree = /*#__PURE__*/ forwardRef(function({ arrow,
         arrow: arrow ?? /*#__PURE__*/ jsx(ChevronRightIcon, {
             "aria-hidden": "true"
         }),
-        className: clsx(JsonTreeView_module.tree, normalizeClassName(className)),
+        className: clsx(JsonTreeView_module.tree, className),
         ...props,
         "data-slot": "json-tree-view-tree"
     });

package/dist/components/json-tree-view/JsonTreeView_module.css

@@ -23,6 +23,7 @@
   }
 
   .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]) {
+    z-index: 0;
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -34,28 +35,43 @@
     color: inherit;
     cursor: pointer;
     font: inherit;
-    outline: var(--moduix-border-width-sm) solid transparent;
-    outline-offset: calc(var(--moduix-border-width-sm) * -1);
     text-align: start;
-    transition: background-color var(--moduix-transition-default),
-      outline-color var(--moduix-transition-default);
+    transition: color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
     -webkit-user-select: none;
     user-select: none;
     background-color: #0000;
     border: 0;
-    padding-inline-start: calc(var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem));
+    outline: none;
+    padding-inline-start: calc(var(--moduix-spacing-1) + var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem));
     padding-inline-end: var(--moduix-spacing-1);
     display: flex;
+    position: relative;
+  }
+
+  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):before {
+    z-index: -1;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--moduix-border-width-sm) transparent;
+    content: "";
+    pointer-events: none;
+    transition: background-color var(--moduix-transition-default),
+        box-shadow var(--moduix-transition-default);
+    background-color: #0000;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--moduix-spacing-1) + ((var(--depth, 1) - 1) * 1rem));
+    inset-inline-end: 0;
   }
 
-  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected] {
+  :is(.root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):not([data-disabled]):hover, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-selected]):before {
     background-color: color-mix(in oklab,
-        var(--moduix-color-accent) 72%,
-        var(--moduix-color-background));
+          var(--moduix-color-accent) 72%,
+          var(--moduix-color-background));
   }
 
-  .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):focus-visible, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-focus] {
-    outline-color: var(--moduix-color-ring);
+  :is(.root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"]):focus-visible, .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-focus]):before {
+    box-shadow: inset 0 0 0 var(--moduix-border-width-sm) var(--moduix-color-ring);
   }
 
   .root-jp1ege :where([data-scope="json-tree-view"][data-part="branch-control"], [data-scope="json-tree-view"][data-part="item"])[data-disabled] {

package/dist/components/kbd/Kbd.js

@@ -2,27 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Kbd_module from "./Kbd.module.js";
 const Kbd_KbdRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.kbd, {
         ref: ref,
+        ...props,
         "data-scope": "kbd",
         "data-part": "root",
-        "data-slot": "kbd-root",
-        className: clsx(Kbd_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Kbd_module.root, className),
+        "data-slot": "kbd-root"
     });
 });
 const Kbd_KbdGroupPart = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
+        ...props,
         role: "group",
         "data-scope": "kbd",
         "data-part": "group",
-        "data-slot": "kbd-group",
-        className: clsx(Kbd_module.group, normalizeClassName(className)),
-        ...props
+        className: clsx(Kbd_module.group, className),
+        "data-slot": "kbd-group"
     });
 });
 const Kbd = Object.assign(Kbd_KbdRoot, {

package/dist/components/lightbox/Lightbox.d.ts

@@ -1,6 +1,6 @@
 import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/react/dialog';
 import type { ComponentProps, RefObject } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
 type LightboxImageSelectDetails = {
     alt?: string;
     element: HTMLImageElement;

package/dist/components/lightbox/Lightbox.js

@@ -4,7 +4,6 @@ import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
 import Lightbox_module from "./Lightbox.module.js";
@@ -53,18 +52,18 @@ function LightboxRootProvider({ lazyMount = true, portalled, portalRef, unmountO
 const Lightbox_LightboxTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Trigger, {
         ref: ref,
-        "data-slot": "lightbox-trigger",
-        className: clsx(Lightbox_module.trigger, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.trigger, className),
+        ...props,
+        "data-slot": "lightbox-trigger"
     });
 });
 const Lightbox_LightboxBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
             ref: ref,
-            "data-slot": "lightbox-backdrop",
-            className: clsx(Lightbox_module.backdrop, normalizeClassName(className)),
-            ...props
+            className: clsx(Lightbox_module.backdrop, className),
+            ...props,
+            "data-slot": "lightbox-backdrop"
         })
     });
 });
@@ -72,42 +71,42 @@ const Lightbox_LightboxPositioner = /*#__PURE__*/ forwardRef(function({ classNam
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Positioner, {
             ref: ref,
-            "data-slot": "lightbox-positioner",
-            className: clsx(Lightbox_module.positioner, normalizeClassName(className)),
-            ...props
+            className: clsx(Lightbox_module.positioner, className),
+            ...props,
+            "data-slot": "lightbox-positioner"
         })
     });
 });
 const Lightbox_LightboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
-        "data-slot": "lightbox-content",
-        className: clsx(Lightbox_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.content, className),
+        ...props,
+        "data-slot": "lightbox-content"
     });
 });
 const Lightbox_LightboxTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Title, {
         ref: ref,
-        "data-slot": "lightbox-title",
-        className: clsx(Lightbox_module.title, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.title, className),
+        ...props,
+        "data-slot": "lightbox-title"
     });
 });
 const Lightbox_LightboxDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Description, {
         ref: ref,
-        "data-slot": "lightbox-description",
-        className: clsx(Lightbox_module.description, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.description, className),
+        ...props,
+        "data-slot": "lightbox-description"
     });
 });
 const Lightbox_LightboxCloseTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
         ref: ref,
-        "data-slot": "lightbox-close-trigger",
-        className: normalizeClassName(className),
-        ...props
+        className: className,
+        ...props,
+        "data-slot": "lightbox-close-trigger"
     });
 });
 const Lightbox_LightboxCloseIcon = /*#__PURE__*/ forwardRef(function({ className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
@@ -120,7 +119,7 @@ const Lightbox_LightboxCloseIcon = /*#__PURE__*/ forwardRef(function({ className
             "data-slot": "lightbox-close-icon",
             "data-state": dialog.open ? 'open' : 'closed',
             "aria-label": ariaLabel,
-            className: clsx(Lightbox_module.closeIcon, normalizeClassName(className)),
+            className: clsx(Lightbox_module.closeIcon, className),
             children: children
         })
     });
@@ -133,43 +132,43 @@ const Lightbox_LightboxImage = /*#__PURE__*/ forwardRef(function({ className, cl
     };
     return /*#__PURE__*/ jsx("img", {
         ref: ref,
-        "data-slot": "lightbox-image",
-        "data-close-on-click": closeOnClick ? '' : void 0,
-        className: clsx(Lightbox_module.image, normalizeClassName(className)),
+        className: clsx(Lightbox_module.image, className),
         onClick: handleClick,
-        ...props
+        ...props,
+        "data-close-on-click": closeOnClick ? '' : void 0,
+        "data-slot": "lightbox-image"
     });
 });
 const Lightbox_LightboxGallery = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-gallery",
-        className: clsx(Lightbox_module.gallery, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.gallery, className),
+        ...props,
+        "data-slot": "lightbox-gallery"
     });
 });
 const Lightbox_LightboxHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-header",
-        className: clsx(Lightbox_module.header, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.header, className),
+        ...props,
+        "data-slot": "lightbox-header"
     });
 });
 const Lightbox_LightboxBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-body",
-        className: clsx(Lightbox_module.body, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.body, className),
+        ...props,
+        "data-slot": "lightbox-body"
     });
 });
 const Lightbox_LightboxFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "lightbox-footer",
-        className: clsx(Lightbox_module.footer, normalizeClassName(className)),
-        ...props
+        className: clsx(Lightbox_module.footer, className),
+        ...props,
+        "data-slot": "lightbox-footer"
     });
 });
 function LightboxBind({ onImageSelect, selector, rootRef, rootSelector }) {

package/dist/components/lightbox/Lightbox_module.css

@@ -44,7 +44,6 @@
   .content-N4c6Zm {
     box-sizing: border-box;
     gap: var(--moduix-lightbox-content-gap, var(--moduix-spacing-3));
-    width: -moz-fit-content;
     width: fit-content;
     max-width: min(var(--moduix-lightbox-content-max-width, 80vw),
       calc(100vw - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
@@ -153,7 +152,6 @@
 
   .gallery-d_JY9F [data-slot="carousel-indicator-group"] {
     flex-wrap: wrap;
-    width: -moz-fit-content;
     width: fit-content;
     max-width: 100%;
     margin-inline: auto;

package/dist/components/list/List.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import List_module from "./List.module.js";
 const List_ListRoot = /*#__PURE__*/ forwardRef(function({ as, asChild, className, gap = 'sm', marker, role, size = 'md', tone = 'default', ...props }, ref) {
     const markerValue = marker ?? 'auto';
@@ -17,7 +16,7 @@ const List_ListRoot = /*#__PURE__*/ forwardRef(function({ as, asChild, className
         'data-marker': markerValue,
         'data-size': size,
         'data-tone': tone,
-        className: clsx(List_module.root, normalizeClassName(className))
+        className: clsx(List_module.root, className)
     };
     if ('ol' === as) return /*#__PURE__*/ jsx(ark.ol, {
         ref: ref,
@@ -36,7 +35,7 @@ const List_ListItem = /*#__PURE__*/ forwardRef(function({ asChild, className, ..
         "data-scope": "list",
         "data-part": "item",
         "data-slot": "list-item",
-        className: normalizeClassName(className)
+        className: className
     });
 });
 const List = Object.assign(List_ListRoot, {

package/dist/components/listbox/Listbox.d.ts

@@ -1,13 +1,13 @@
-import { Listbox as ListboxPrimitive, useListbox, useListboxContext, useListboxItemContext } from '@ark-ui/react/listbox';
+import { Listbox as ListboxPrimitive, type ListboxRootComponent, type ListboxRootProviderComponent, useListbox, useListboxContext, useListboxItemContext } from '@ark-ui/react/listbox';
 import type { ComponentProps } from 'react';
 declare function ListboxFilter({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare const Listbox: ListboxPrimitive.RootComponent & {
-    Root: ListboxPrimitive.RootComponent;
-    RootProvider: ListboxPrimitive.RootProviderComponent;
+declare const Listbox: ListboxRootComponent & {
+    Root: ListboxRootComponent;
+    RootProvider: ListboxRootProviderComponent;
     Label: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     Input: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
     Filter: typeof ListboxFilter;
-    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Empty: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemGroup: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/listbox/Listbox.js

@@ -5,46 +5,45 @@ import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CheckIcon, SearchIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { CloseButton } from "../close-button/index.js";
 import Listbox_module from "./Listbox.module.js";
 const Listbox_ListboxRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Root, {
         ref: ref,
-        "data-slot": "listbox-root",
-        className: clsx(Listbox_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.root, className),
+        ...props,
+        "data-slot": "listbox-root"
     });
 });
 const Listbox_ListboxRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.RootProvider, {
         ref: ref,
-        "data-slot": "listbox-root-provider",
-        className: clsx(Listbox_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.root, className),
+        ...props,
+        "data-slot": "listbox-root-provider"
     });
 });
 const Listbox_ListboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Label, {
         ref: ref,
-        "data-slot": "listbox-label",
-        className: clsx(Listbox_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.label, className),
+        ...props,
+        "data-slot": "listbox-label"
     });
 });
 const Listbox_ListboxInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Input, {
         ref: ref,
-        "data-slot": "listbox-input",
-        className: clsx(Listbox_module.input, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.input, className),
+        ...props,
+        "data-slot": "listbox-input"
     });
 });
 function ListboxFilter({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs("div", {
-        "data-slot": "listbox-filter",
-        className: clsx(Listbox_module.filter, normalizeClassName(className)),
+        className: clsx(Listbox_module.filter, className),
         ...props,
+        "data-slot": "listbox-filter",
         children: [
             /*#__PURE__*/ jsx(SearchIcon, {
                 "data-slot": "listbox-filter-icon",
@@ -55,108 +54,103 @@ function ListboxFilter({ className, children, ...props }) {
     });
 }
 const Listbox_ListboxClearTrigger = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel = 'Clear search', className, children, type = 'button', ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.button, {
+    return /*#__PURE__*/ jsx(CloseButton.Root, {
         ref: ref,
-        asChild: true,
-        "data-slot": "listbox-clear-trigger",
         type: type,
         "aria-label": ariaLabel,
-        className: clsx(Listbox_module.clearTrigger, normalizeClassName(className)),
+        className: clsx(Listbox_module.clearTrigger, className),
         ...props,
-        children: /*#__PURE__*/ jsx(CloseButton.Root, {
-            "aria-label": ariaLabel,
-            type: type,
-            children: children
-        })
+        "data-slot": "listbox-clear-trigger",
+        children: children
     });
 });
 const Listbox_ListboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Content, {
         ref: ref,
-        "data-slot": "listbox-content",
-        className: clsx(Listbox_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.content, className),
+        ...props,
+        "data-slot": "listbox-content"
     });
 });
 const Listbox_ListboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Empty, {
         ref: ref,
-        "data-slot": "listbox-empty",
-        className: clsx(Listbox_module.empty, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.empty, className),
+        ...props,
+        "data-slot": "listbox-empty"
     });
 });
 const Listbox_ListboxItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemGroup, {
         ref: ref,
-        "data-slot": "listbox-item-group",
-        className: clsx(Listbox_module.itemGroup, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.itemGroup, className),
+        ...props,
+        "data-slot": "listbox-item-group"
     });
 });
 const Listbox_ListboxItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemGroupLabel, {
         ref: ref,
-        "data-slot": "listbox-item-group-label",
-        className: clsx(Listbox_module.itemGroupLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.itemGroupLabel, className),
+        ...props,
+        "data-slot": "listbox-item-group-label"
     });
 });
 const Listbox_ListboxItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.Item, {
         ref: ref,
-        "data-slot": "listbox-item",
-        className: clsx(Listbox_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.item, className),
+        ...props,
+        "data-slot": "listbox-item"
     });
 });
 const Listbox_ListboxItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemText, {
         ref: ref,
-        "data-slot": "listbox-item-text",
-        className: clsx(Listbox_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.itemText, className),
+        ...props,
+        "data-slot": "listbox-item-text"
     });
 });
 const Listbox_ListboxItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ItemIndicator, {
         ref: ref,
-        "data-slot": "listbox-item-indicator",
-        className: clsx(Listbox_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Listbox_module.itemIndicator, className),
         ...props,
+        "data-slot": "listbox-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
 const Listbox_ListboxValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Listbox.ValueText, {
         ref: ref,
-        "data-slot": "listbox-value-text",
-        className: clsx(Listbox_module.valueText, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.valueText, className),
+        ...props,
+        "data-slot": "listbox-value-text"
     });
 });
 const Listbox_ListboxItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "listbox-item-text-content",
-        className: clsx(Listbox_module.itemTextContent, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.itemTextContent, className),
+        ...props,
+        "data-slot": "listbox-item-text-content"
     });
 });
 const Listbox_ListboxItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "listbox-item-text-icon",
-        className: clsx(Listbox_module.itemTextIcon, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.itemTextIcon, className),
+        ...props,
+        "data-slot": "listbox-item-text-icon"
     });
 });
 const Listbox_ListboxItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "listbox-item-text-label",
-        className: clsx(Listbox_module.itemTextLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(Listbox_module.itemTextLabel, className),
+        ...props,
+        "data-slot": "listbox-item-text-label"
     });
 });
 const Listbox_Listbox = Object.assign(Listbox_ListboxRoot, {

package/dist/components/listbox/Listbox.module.js

@@ -12,10 +12,10 @@ const Listbox_module = {
     itemGroupLabel: "itemGroupLabel-t4Kb1i",
     item: "item-zgaYnD",
     itemText: "itemText-UXCIHm",
+    itemTextLabel: "itemTextLabel-gzLhrK",
     itemIndicator: "itemIndicator-YmTj_0",
     valueText: "valueText-KG_jWI",
     itemTextContent: "itemTextContent-fUHU0Z",
-    itemTextIcon: "itemTextIcon-A8XN6K",
-    itemTextLabel: "itemTextLabel-gzLhrK"
+    itemTextIcon: "itemTextIcon-A8XN6K"
 };
 export default Listbox_module;