@jakubmazanec/ui 0.1.0 → 0.1.1-next.80f405d

package/build/components/Listbox.js

@@ -75,10 +75,10 @@ export const Listbox = forwardRef(
       throw new Error("Combobox accepts only either `items` prop, or children!");
     }
     let filteredItems = query ? items?.filter(
-      (item) => item.label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+      (item) => item.label.toLowerCase().replaceAll(/\s+/g, "").includes(query.toLowerCase().replaceAll(/\s+/g, ""))
     ) : items;
     let filteredChildren = query ? Children.toArray(children).filter((child) => {
-      if (typeof child === "object" && "props" in child && typeof child.props === "object" && typeof child.props.children === "string" && child.props.children.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))) {
+      if (typeof child === "object" && "props" in child && typeof child.props === "object" && typeof child.props.children === "string" && child.props.children.toLowerCase().replaceAll(/\s+/g, "").includes(query.toLowerCase().replaceAll(/\s+/g, ""))) {
         return true;
       }
       return false;
@@ -101,8 +101,8 @@ export const Listbox = forwardRef(
         HeadlessListboxButton,
         {
           className: theme.root("relative", className),
-          "data-multiple": multiple ? true : null,
           "data-component": "listbox",
+          "data-multiple": multiple ? true : null,
           children: ({ value: selectedValue }) => {
             if (!items && !multiple) {
               let selectedItem2;
@@ -196,8 +196,8 @@ export const Listbox = forwardRef(
       /* @__PURE__ */ jsxs(
         HeadlessListboxOptions,
         {
-          className: theme.options(),
           anchor: "bottom start",
+          className: theme.options(),
           onKeyDown: handleTab,
           children: [
             showFilter ? /* @__PURE__ */ jsx("div", { className: theme.filter(), children: /* @__PURE__ */ jsx(Input, { ref: inputRef, showClearButton: true, value: query, onInput: handleQueryChange }) }) : null,

package/build/components/Listbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Listbox.tsx"],
-  "sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {\n  Listbox as HeadlessListbox,\n  ListboxButton as HeadlessListboxButton,\n  ListboxOptions as HeadlessListboxOptions,\n  type ListboxProps as HeadlessListboxProps,\n} from '@headlessui/react';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {forwardRef, useFormId} from './internals.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useListboxTheme = createComponentTheme('Listbox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'label', 'icon', 'options', 'filter'],\n});\n\nconst LISTBOX_ELEMENT = Fragment;\n\nexport type ListboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ListboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useListboxTheme> &\n    ComponentPropsWithoutRef<T> &\n    (\n      | {\n          as?: T | undefined;\n          value?: V | undefined;\n          defaultValue?: V | undefined;\n          multiple?: false | undefined;\n          hideSelected?: never; // must be here so the type of props is correct\n          items?: Array<ListboxItem<V>> | undefined;\n          placeholder?: string;\n          name?: string | undefined;\n          className?: string | undefined;\n          showFilter?: boolean | undefined;\n          onChange?: (selectedValue: V) => void;\n        }\n      | {\n          as?: T | undefined;\n          value?: V[] | undefined;\n          defaultValue?: V[] | undefined;\n          multiple: true;\n          hideSelected?:\n            | {\n                limit: number;\n                message?: string | undefined;\n              }\n            | undefined;\n          items?: Array<ListboxItem<V>> | undefined;\n          placeholder?: string;\n          name?: string | undefined;\n          className?: string | undefined;\n          showFilter?: boolean | undefined;\n          onChange?: (selectedValue: V[]) => void;\n        }\n    )\n>;\n\nexport const Listbox = forwardRef(\n  <T extends ElementType = typeof LISTBOX_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      invalid = false,\n      as = LISTBOX_ELEMENT as unknown as T,\n      value,\n      defaultValue,\n      multiple,\n      hideSelected,\n      items,\n      placeholder,\n      name,\n      className,\n      showFilter,\n      onChange,\n      children,\n      ...rest\n    }: ListboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useListboxTheme({disabled, invalid});\n    let formId = useFormId();\n    let field = useField();\n    let fieldName = useFieldName();\n    let [query, setQuery] = useState('');\n    let inputRef = useRef<HTMLElement>(null);\n\n    let handleChange = useCallback(\n      (selectedValue: V) => {\n        onChange?.(selectedValue as V & V[]);\n      },\n      [onChange],\n    );\n\n    // hacky solution so the user is able to focus inout used for filtering\n    let handleTab = useCallback(\n      (event: KeyboardEvent) => {\n        if (!showFilter) {\n          return;\n        }\n\n        if (event.key === 'Tab' && document.activeElement !== inputRef.current) {\n          event.preventDefault();\n          inputRef.current?.focus();\n        }\n      },\n      [showFilter],\n    );\n\n    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value);\n    }, []);\n\n    if (items && children) {\n      throw new Error('Combobox accepts only either `items` prop, or children!');\n    }\n\n    let filteredItems =\n      query ?\n        items?.filter((item) =>\n          item.label\n            .toLowerCase()\n            .replace(/\\s+/g, '')\n            .includes(query.toLowerCase().replace(/\\s+/g, '')),\n        )\n      : items;\n    let filteredChildren =\n      query ?\n        Children.toArray(children).filter((child) => {\n          if (\n            typeof child === 'object' &&\n            'props' in child &&\n            typeof child.props === 'object' &&\n            typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n            (child.props as {children: string}).children\n              .toLowerCase()\n              .replace(/\\s+/g, '')\n              .includes(query.toLowerCase().replace(/\\s+/g, ''))\n          ) {\n            return true;\n          }\n\n          return false;\n        })\n      : children;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessListboxProps<any, any> = {\n      as,\n      ref,\n      name: field?.name ?? fieldName ?? name,\n      value: value ?? null,\n      defaultValue,\n      multiple,\n      disabled,\n      invalid,\n      form: formId,\n      onChange: handleChange,\n      ...rest,\n    };\n\n    return (\n      <HeadlessListbox {...props}>\n        <HeadlessListboxButton\n          className={theme.root('relative', className)}\n          data-multiple={multiple ? true : null}\n          data-component=\"listbox\"\n        >\n          {({value: selectedValue}) => {\n            if (!items && !multiple) {\n              let selectedItem: ReactNode;\n\n              Children.forEach(filteredChildren, (child) => {\n                if (!child) {\n                  return;\n                }\n\n                if (\n                  typeof child === 'object' &&\n                  'props' in child &&\n                  typeof child.props === 'object' &&\n                  (child.props as Record<string, unknown>).value === selectedValue\n                ) {\n                  selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n                }\n              });\n\n              return (\n                <>\n                  <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                    {selectedItem ?? placeholder ?? null}\n                  </span>\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            } else if (!items && multiple) {\n              let itemsHidden = false;\n              let selectedItems: ReactNode[] = [];\n\n              Children.forEach(filteredChildren, (child) => {\n                if (!child) {\n                  return;\n                }\n\n                if (\n                  typeof child === 'object' &&\n                  'props' in child &&\n                  typeof child.props === 'object' &&\n                  (selectedValue as unknown[]).includes(\n                    (child.props as Record<string, unknown>).value,\n                  )\n                ) {\n                  selectedItems.push(\n                    (child.props as Record<string, unknown>).children as ReactNode,\n                  );\n                }\n              });\n\n              if (hideSelected && selectedItems.length > hideSelected.limit) {\n                selectedItems = selectedItems.slice(0, hideSelected.limit);\n                itemsHidden = true;\n              }\n\n              return (\n                <>\n                  {selectedItems.length ?\n                    selectedItems.map((selectedItem, index) => (\n                      <span\n                        // eslint-disable-next-line react/no-array-index-key -- needed\n                        key={index}\n                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                      >\n                        {selectedItem}\n                      </span>\n                    ))\n                  : (placeholder ?? null)}\n                  {itemsHidden ?\n                    <span\n                      data-ellipsis\n                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                    >\n                      {hideSelected?.message ?? '\u2026'}\n                    </span>\n                  : null}\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            } else if (items && multiple) {\n              let itemsHidden = false;\n              let selectedItems =\n                filteredItems?.filter((item) =>\n                  (selectedValue as unknown[] | undefined)?.includes(item.value),\n                ) ?? [];\n\n              if (hideSelected && selectedItems.length > hideSelected.limit) {\n                selectedItems = selectedItems.slice(0, hideSelected.limit);\n                itemsHidden = true;\n              }\n\n              return (\n                <>\n                  {selectedItems.length ?\n                    selectedItems.map((selectedItem, index) => (\n                      <span\n                        // eslint-disable-next-line react/no-array-index-key -- needed\n                        key={index}\n                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                      >\n                        {selectedItem.label}\n                      </span>\n                    ))\n                  : (placeholder ?? null)}\n                  {itemsHidden ?\n                    <span\n                      data-ellipsis\n                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                    >\n                      {hideSelected?.message ?? '\u2026'}\n                    </span>\n                  : null}\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            }\n\n            let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n            return (\n              <>\n                <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                  {selectedItem?.label ?? placeholder ?? null}\n                </span>\n                <span className={theme.icon('absolute')}>\n                  <Icon name=\"ChevronUpDown\" />\n                </span>\n              </>\n            );\n          }}\n        </HeadlessListboxButton>\n        <HeadlessListboxOptions\n          className={theme.options()}\n          anchor=\"bottom start\"\n          onKeyDown={handleTab}\n        >\n          {showFilter ?\n            <div className={theme.filter()}>\n              <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n            </div>\n          : null}\n          {items ?\n            filteredItems?.map((item) => (\n              <ListboxOption key={item.label} value={item.value}>\n                {item.label}\n              </ListboxOption>\n            ))\n          : filteredChildren}\n        </HeadlessListboxOptions>\n      </HeadlessListbox>\n    );\n  },\n);\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n  classNames: {\n    root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n    label: 'flex gap-x-2',\n    icon: 'text-neutral-500 size-5 top-1.5 right-1.5 cursor-pointer',\n    options:\n      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n    filter: '[&>[data-component=input]]:rounded',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        label: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n        filter: '',\n      },\n      false: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n      false: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n    },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Listbox as HeadlessListbox,\n  ListboxButton as HeadlessListboxButton,\n  ListboxOptions as HeadlessListboxOptions,\n  type ListboxProps as HeadlessListboxProps,\n} from '@headlessui/react';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {forwardRef, useFormId} from './internals.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useListboxTheme = createComponentTheme('Listbox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'label', 'icon', 'options', 'filter'],\n});\n\nconst LISTBOX_ELEMENT = Fragment;\n\nexport type ListboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ListboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useListboxTheme> &\n    ComponentPropsWithoutRef<T> &\n    (\n      | {\n          as?: T | undefined;\n          value?: V[] | undefined;\n          defaultValue?: V[] | undefined;\n          multiple: true;\n          hideSelected?:\n            | {\n                limit: number;\n                message?: string | undefined;\n              }\n            | undefined;\n          items?: Array<ListboxItem<V>> | undefined;\n          placeholder?: string;\n          name?: string | undefined;\n          className?: string | undefined;\n          showFilter?: boolean | undefined;\n          onChange?: (selectedValue: V[]) => void;\n        }\n      | {\n          as?: T | undefined;\n          value?: V | undefined;\n          defaultValue?: V | undefined;\n          multiple?: false | undefined;\n          hideSelected?: never; // must be here so the type of props is correct\n          items?: Array<ListboxItem<V>> | undefined;\n          placeholder?: string;\n          name?: string | undefined;\n          className?: string | undefined;\n          showFilter?: boolean | undefined;\n          onChange?: (selectedValue: V) => void;\n        }\n    )\n>;\n\nexport const Listbox = forwardRef(\n  <T extends ElementType = typeof LISTBOX_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      invalid = false,\n      as = LISTBOX_ELEMENT as unknown as T,\n      value,\n      defaultValue,\n      multiple,\n      hideSelected,\n      items,\n      placeholder,\n      name,\n      className,\n      showFilter,\n      onChange,\n      children,\n      ...rest\n    }: ListboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useListboxTheme({disabled, invalid});\n    let formId = useFormId();\n    let field = useField();\n    let fieldName = useFieldName();\n    let [query, setQuery] = useState('');\n    let inputRef = useRef<HTMLElement>(null);\n\n    let handleChange = useCallback(\n      (selectedValue: V) => {\n        onChange?.(selectedValue as V & V[]);\n      },\n      [onChange],\n    );\n\n    // hacky solution so the user is able to focus inout used for filtering\n    let handleTab = useCallback(\n      (event: KeyboardEvent) => {\n        if (!showFilter) {\n          return;\n        }\n\n        if (event.key === 'Tab' && document.activeElement !== inputRef.current) {\n          event.preventDefault();\n          inputRef.current?.focus();\n        }\n      },\n      [showFilter],\n    );\n\n    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value);\n    }, []);\n\n    if (items && children) {\n      throw new Error('Combobox accepts only either `items` prop, or children!');\n    }\n\n    let filteredItems =\n      query ?\n        items?.filter((item) =>\n          item.label\n            .toLowerCase()\n            .replaceAll(/\\s+/g, '')\n            .includes(query.toLowerCase().replaceAll(/\\s+/g, '')),\n        )\n      : items;\n    let filteredChildren =\n      query ?\n        Children.toArray(children).filter((child) => {\n          if (\n            typeof child === 'object' &&\n            'props' in child &&\n            typeof child.props === 'object' &&\n            typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n            (child.props as {children: string}).children\n              .toLowerCase()\n              .replaceAll(/\\s+/g, '')\n              .includes(query.toLowerCase().replaceAll(/\\s+/g, ''))\n          ) {\n            return true;\n          }\n\n          return false;\n        })\n      : children;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessListboxProps<any, any> = {\n      as,\n      ref,\n      name: field?.name ?? fieldName ?? name,\n      value: value ?? null,\n      defaultValue,\n      multiple,\n      disabled,\n      invalid,\n      form: formId,\n      onChange: handleChange,\n      ...rest,\n    };\n\n    return (\n      <HeadlessListbox {...props}>\n        <HeadlessListboxButton\n          className={theme.root('relative', className)}\n          data-component=\"listbox\"\n          data-multiple={multiple ? true : null}\n        >\n          {({value: selectedValue}) => {\n            if (!items && !multiple) {\n              let selectedItem: ReactNode;\n\n              Children.forEach(filteredChildren, (child) => {\n                if (!child) {\n                  return;\n                }\n\n                if (\n                  typeof child === 'object' &&\n                  'props' in child &&\n                  typeof child.props === 'object' &&\n                  (child.props as Record<string, unknown>).value === selectedValue\n                ) {\n                  selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n                }\n              });\n\n              return (\n                <>\n                  <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                    {selectedItem ?? placeholder ?? null}\n                  </span>\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            } else if (!items && multiple) {\n              let itemsHidden = false;\n              let selectedItems: ReactNode[] = [];\n\n              Children.forEach(filteredChildren, (child) => {\n                if (!child) {\n                  return;\n                }\n\n                if (\n                  typeof child === 'object' &&\n                  'props' in child &&\n                  typeof child.props === 'object' &&\n                  (selectedValue as unknown[]).includes(\n                    (child.props as Record<string, unknown>).value,\n                  )\n                ) {\n                  selectedItems.push(\n                    (child.props as Record<string, unknown>).children as ReactNode,\n                  );\n                }\n              });\n\n              if (hideSelected && selectedItems.length > hideSelected.limit) {\n                selectedItems = selectedItems.slice(0, hideSelected.limit);\n                itemsHidden = true;\n              }\n\n              return (\n                <>\n                  {selectedItems.length ?\n                    selectedItems.map((selectedItem, index) => (\n                      <span\n                        // eslint-disable-next-line react/no-array-index-key -- needed\n                        key={index}\n                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                      >\n                        {selectedItem}\n                      </span>\n                    ))\n                  : (placeholder ?? null)}\n                  {itemsHidden ?\n                    <span\n                      data-ellipsis\n                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                    >\n                      {hideSelected?.message ?? '\u2026'}\n                    </span>\n                  : null}\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            } else if (items && multiple) {\n              let itemsHidden = false;\n              let selectedItems =\n                filteredItems?.filter((item) =>\n                  (selectedValue as unknown[] | undefined)?.includes(item.value),\n                ) ?? [];\n\n              if (hideSelected && selectedItems.length > hideSelected.limit) {\n                selectedItems = selectedItems.slice(0, hideSelected.limit);\n                itemsHidden = true;\n              }\n\n              return (\n                <>\n                  {selectedItems.length ?\n                    selectedItems.map((selectedItem, index) => (\n                      <span\n                        // eslint-disable-next-line react/no-array-index-key -- needed\n                        key={index}\n                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                      >\n                        {selectedItem.label}\n                      </span>\n                    ))\n                  : (placeholder ?? null)}\n                  {itemsHidden ?\n                    <span\n                      data-ellipsis\n                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                    >\n                      {hideSelected?.message ?? '\u2026'}\n                    </span>\n                  : null}\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            }\n\n            let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n            return (\n              <>\n                <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                  {selectedItem?.label ?? placeholder ?? null}\n                </span>\n                <span className={theme.icon('absolute')}>\n                  <Icon name=\"ChevronUpDown\" />\n                </span>\n              </>\n            );\n          }}\n        </HeadlessListboxButton>\n        <HeadlessListboxOptions\n          anchor=\"bottom start\"\n          className={theme.options()}\n          onKeyDown={handleTab}\n        >\n          {showFilter ?\n            <div className={theme.filter()}>\n              <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n            </div>\n          : null}\n          {items ?\n            filteredItems?.map((item) => (\n              <ListboxOption key={item.label} value={item.value}>\n                {item.label}\n              </ListboxOption>\n            ))\n          : filteredChildren}\n        </HeadlessListboxOptions>\n      </HeadlessListbox>\n    );\n  },\n);\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n  classNames: {\n    root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n    label: 'flex gap-x-2',\n    icon: 'text-neutral-500 size-5 top-1.5 right-1.5 cursor-pointer',\n    options:\n      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n    filter: '[&>[data-component=input]]:rounded',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        label: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n        filter: '',\n      },\n      false: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n      false: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
   "names": ["Fragment", "selectedItem"]
 }

package/build/components/ListboxOption.d.ts

@@ -1,11 +1,6 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useListboxOptionTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => {
-    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useListboxOptionTheme: {
     componentThemeName: "ListboxOption";
     themeDefinition: {
         readonly variants: {
@@ -13,7 +8,12 @@ export declare const useListboxOptionTheme: ((themeProps: {
         };
         readonly elements: ["root", "icon"];
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => {
+    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type ListboxOptionProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useListboxOptionTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     value: V;

package/build/components/Menu.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuTheme: {
     componentThemeName: "Menu";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/MenuButton.d.ts

@@ -1,15 +1,15 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuButtonTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuButtonTheme: {
     componentThemeName: "MenuButton";
     themeDefinition: {
         readonly variants: {
             readonly disabled: [true, false];
         };
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuButtonProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuButtonTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/MenuHeading.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuHeadingTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuHeadingTheme: {
     componentThemeName: "MenuHeading";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuHeadingProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuHeadingTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/MenuItem.d.ts

@@ -1,15 +1,15 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuItemTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuItemTheme: {
     componentThemeName: "MenuItem";
     themeDefinition: {
         readonly variants: {
             readonly disabled: [true, false];
         };
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuItemProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuItemTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/MenuItems.d.ts

@@ -1,10 +1,10 @@
 import { type MenuItemsProps as HeadlessMenuItemsProps } from '@headlessui/react';
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuItemsTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuItemsTheme: {
     componentThemeName: "MenuItems";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuItemsProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuItemsTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     anchor?: HeadlessMenuItemsProps['anchor'] | undefined;

package/build/components/MenuSection.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuSectionTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuSectionTheme: {
     componentThemeName: "MenuSection";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuSectionProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuSectionTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/MenuSeparator.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useMenuSeparatorTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useMenuSeparatorTheme: {
     componentThemeName: "MenuSeparator";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type MenuSeparatorProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuSeparatorTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Popover.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const usePopoverTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const usePopoverTheme: {
     componentThemeName: "Popover";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type PopoverProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof usePopoverTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/PopoverBackdrop.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const usePopoverBackdropTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const usePopoverBackdropTheme: {
     componentThemeName: "PopoverBackdrop";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type PopoverBackdropProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof usePopoverBackdropTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/PopoverButton.d.ts

@@ -1,15 +1,15 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const usePopoverButtonTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const usePopoverButtonTheme: {
     componentThemeName: "PopoverButton";
     themeDefinition: {
         readonly variants: {
             readonly disabled: [true, false];
         };
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type PopoverButtonProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof usePopoverButtonTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     autoFocus?: boolean | undefined;

package/build/components/PopoverGroup.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const usePopoverGroupTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const usePopoverGroupTheme: {
     componentThemeName: "PopoverGroup";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type PopoverGroupProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof usePopoverGroupTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/PopoverPanel.d.ts

@@ -1,10 +1,10 @@
 import { type PopoverPanelProps as HeadlessPopoverPanelProps } from '@headlessui/react';
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const usePopoverPanelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const usePopoverPanelTheme: {
     componentThemeName: "PopoverPanel";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type PopoverPanelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof usePopoverPanelTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     static?: boolean | undefined;

package/build/components/Radio.d.ts

@@ -1,11 +1,6 @@
 import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useRadioTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => {
-    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useRadioTheme: {
     componentThemeName: "Radio";
     themeDefinition: {
         readonly variants: {
@@ -13,7 +8,12 @@ export declare const useRadioTheme: ((themeProps: {
         };
         readonly elements: ["root", "icon"];
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => {
+    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type RadioProps<T extends ElementType, V extends boolean | number | string> = ComponentProps<typeof useRadioTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     value: V;

package/build/components/Radio.js

@@ -33,7 +33,7 @@ export const Radio = forwardRef(
       "data-component": "radio",
       ...rest
     };
-    return /* @__PURE__ */ jsx(HeadlessRadio, { ...props, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", xmlSpace: "preserve", children: /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" }) }) }) }) });
+    return /* @__PURE__ */ jsx(HeadlessRadio, { ...props, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", children: /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", fill: "currentColor", r: "4" }) }) }) }) });
   }
 );
 export const radioTheme = {

package/build/components/Radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Radio.tsx"],
-  "sourcesContent": ["import {Radio as HeadlessRadio, type RadioProps as HeadlessRadioProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type Ref} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef} from './internals.js';\n\nexport const useRadioTheme = createComponentTheme('Radio', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'icon'],\n});\n\nconst RADIO_ELEMENT = 'span';\n\nexport type RadioProps<T extends ElementType, V extends boolean | number | string> = ComponentProps<\n  typeof useRadioTheme\n> &\n  ComponentPropsWithoutRef<T> & {\n    as?: T | undefined;\n    value: V;\n    autoFocus?: boolean | undefined;\n    className?: string;\n  };\n\nexport const Radio = forwardRef(\n  <T extends ElementType = typeof RADIO_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      as = RADIO_ELEMENT as T,\n      value,\n      autoFocus,\n      className,\n      ...rest\n    }: RadioProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useRadioTheme({disabled});\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessRadioProps<any, V> = {\n      as,\n      ref,\n      value,\n      disabled,\n      autoFocus,\n      className: theme.root('relative', className),\n      'data-component': 'radio',\n      ...rest,\n    };\n\n    return (\n      <HeadlessRadio {...props}>\n        <span className={theme.icon()}>\n          <Icon>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" xmlSpace=\"preserve\">\n              <circle cx=\"10\" cy=\"10\" r=\"4\" fill=\"currentColor\" />\n            </svg>\n          </Icon>\n        </span>\n      </HeadlessRadio>\n    );\n  },\n);\n\nexport const radioTheme: ComponentTheme<typeof useRadioTheme> = {\n  classNames: {\n    root: 'group/radio inline-block size-5',\n    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        icon: 'opacity-0',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
-  "mappings": ";AA6Dc;AA7Dd,SAAQ,SAAS,qBAA2D;AAG5E;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AAElB,aAAM,gBAAgB,qBAAqB,SAAS;AAAA,EACzD,UAAU;AAAA,IACR,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AAAA,EACA,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,gBAAgB;AAYf,aAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,cAAc,EAAC,SAAQ,CAAC;AAGpC,QAAI,QAAoC;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,MAC3C,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,oBAAC,iBAAe,GAAG,OACjB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QACC,8BAAC,SAAI,OAAM,8BAA6B,SAAQ,aAAY,UAAS,YACnE,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe,GACpD,GACF,GACF,GACF;AAAA,EAEJ;AACF;AAEO,aAAM,aAAmD;AAAA,EAC9D,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {Radio as HeadlessRadio, type RadioProps as HeadlessRadioProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type Ref} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef} from './internals.js';\n\nexport const useRadioTheme = createComponentTheme('Radio', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'icon'],\n});\n\nconst RADIO_ELEMENT = 'span';\n\nexport type RadioProps<T extends ElementType, V extends boolean | number | string> = ComponentProps<\n  typeof useRadioTheme\n> &\n  ComponentPropsWithoutRef<T> & {\n    as?: T | undefined;\n    value: V;\n    autoFocus?: boolean | undefined;\n    className?: string;\n  };\n\nexport const Radio = forwardRef(\n  <T extends ElementType = typeof RADIO_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      as = RADIO_ELEMENT as T,\n      value,\n      autoFocus,\n      className,\n      ...rest\n    }: RadioProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useRadioTheme({disabled});\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessRadioProps<any, V> = {\n      as,\n      ref,\n      value,\n      disabled,\n      autoFocus,\n      className: theme.root('relative', className),\n      'data-component': 'radio',\n      ...rest,\n    };\n\n    return (\n      <HeadlessRadio {...props}>\n        <span className={theme.icon()}>\n          <Icon>\n            <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\" xmlSpace=\"preserve\">\n              <circle cx=\"10\" cy=\"10\" fill=\"currentColor\" r=\"4\" />\n            </svg>\n          </Icon>\n        </span>\n      </HeadlessRadio>\n    );\n  },\n);\n\nexport const radioTheme: ComponentTheme<typeof useRadioTheme> = {\n  classNames: {\n    root: 'group/radio inline-block size-5',\n    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        icon: 'opacity-0',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": ";AA6Dc;AA7Dd,SAAQ,SAAS,qBAA2D;AAG5E;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AAElB,aAAM,gBAAgB,qBAAqB,SAAS;AAAA,EACzD,UAAU;AAAA,IACR,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AAAA,EACA,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,gBAAgB;AAYf,aAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,cAAc,EAAC,SAAQ,CAAC;AAGpC,QAAI,QAAoC;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,MAC3C,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,oBAAC,iBAAe,GAAG,OACjB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QACC,8BAAC,SAAI,SAAQ,aAAY,OAAM,8BAA6B,UAAS,YACnE,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,MAAK,gBAAe,GAAE,KAAI,GACpD,GACF,GACF,GACF;AAAA,EAEJ;AACF;AAEO,aAAM,aAAmD;AAAA,EAC9D,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/RadioField.d.ts

@@ -1,9 +1,9 @@
 import { type PropsWithChildren } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useRadioFieldTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useRadioFieldTheme: {
     componentThemeName: "RadioField";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type RadioFieldProps = PropsWithChildren<ComponentProps<typeof useRadioFieldTheme> & {
     className?: string;
 }>;

package/build/components/RadioGroup.d.ts

@@ -1,16 +1,16 @@
 import { type FieldMetadata, type FieldName } from '@conform-to/react';
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useRadioGroupTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useRadioGroupTheme: {
     componentThemeName: "RadioGroup";
     themeDefinition: {
         readonly variants: {
             readonly disabled: [true, false];
         };
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type RadioGroupProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useRadioGroupTheme> & ComponentPropsWithoutRef<T> & ({
     as?: T | undefined;
     value?: V | undefined;

package/build/components/Spinner.d.ts

@@ -1,10 +1,5 @@
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useSpinnerTheme: ((themeProps: {
-    readonly size: "small" | "medium" | "large" | "surface";
-}) => {
-    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useSpinnerTheme: {
     componentThemeName: "Spinner";
     themeDefinition: {
         readonly variants: {
@@ -12,7 +7,12 @@ export declare const useSpinnerTheme: ((themeProps: {
         };
         readonly elements: ["root", "icon"];
     };
-};
+} & ((themeProps: {
+    readonly size: "small" | "medium" | "large" | "surface";
+}) => {
+    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type SpinnerProps = ComponentProps<typeof useSpinnerTheme> & {
     className?: string;
 };

package/build/components/Table.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableTheme: {
     componentThemeName: "Table";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string | undefined;

package/build/components/TableBody.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableBodyTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableBodyTheme: {
     componentThemeName: "TableBody";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableBodyProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableBodyTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/TableCaption.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableCaptionTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableCaptionTheme: {
     componentThemeName: "TableCaption";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableCaptionProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableCaptionTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/TableCell.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableCellTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableCellTheme: {
     componentThemeName: "TableCell";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableCellProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableCellTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/TableFoot.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableFootTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableFootTheme: {
     componentThemeName: "TableFoot";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableFootProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableFootTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/TableHead.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableHeadTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableHeadTheme: {
     componentThemeName: "TableHead";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableHeadProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableHeadTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/TableHeader.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableHeaderTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableHeaderTheme: {
     componentThemeName: "TableHeader";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableHeaderProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableHeaderTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/TableRow.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTableRowTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTableRowTheme: {
     componentThemeName: "TableRow";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TableRowProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTableRowTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Text.d.ts

@@ -1,15 +1,15 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useTextTheme: ((themeProps: {
-    readonly size: "small" | "medium" | "large";
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useTextTheme: {
     componentThemeName: "Text";
     themeDefinition: {
         readonly variants: {
             readonly size: ["small", "medium", "large"];
         };
     };
-};
+} & ((themeProps: {
+    readonly size: "small" | "medium" | "large";
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type TextProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useTextTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;