@jakubmazanec/ui 0.1.0 → 0.1.1-unstable.528161f

package/build/components/Button.d.ts

@@ -1,11 +1,7 @@
 import { type ButtonProps as HeadlessButtonProps } from '@headlessui/react';
 import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useButtonTheme: ((themeProps: {
-    readonly variant: "text" | "solid" | "outline" | "invisible";
-    readonly size: "small" | "medium" | "large";
-    readonly disabled: boolean;
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useButtonTheme: {
     componentThemeName: "Button";
     themeDefinition: {
         readonly variants: {
@@ -14,7 +10,11 @@ export declare const useButtonTheme: ((themeProps: {
             readonly disabled: [true, false];
         };
     };
-};
+} & ((themeProps: {
+    readonly variant: "text" | "solid" | "outline" | "invisible";
+    readonly size: "small" | "medium" | "large";
+    readonly disabled: boolean;
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & Omit<ComponentPropsWithoutRef<T>, 'type'> & {
     as?: T | undefined;
     submit?: boolean | undefined;

package/build/components/Card.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 useCardTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useCardTheme: {
     componentThemeName: "Card";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<T> & PropsWithChildren<{
     as?: T | undefined;
     className?: string;

package/build/components/Checkbox.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 useCheckboxTheme: ((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 useCheckboxTheme: {
     componentThemeName: "Checkbox";
     themeDefinition: {
         readonly variants: {
@@ -13,7 +8,12 @@ export declare const useCheckboxTheme: ((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 CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
     as?: T | undefined;
     checked?: boolean | undefined;

package/build/components/CheckboxField.d.ts

@@ -1,10 +1,10 @@
 import { type FieldMetadata, type FieldName } from '@conform-to/react';
 import { type PropsWithChildren } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useCheckboxFieldTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useCheckboxFieldTheme: {
     componentThemeName: "CheckboxField";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useCheckboxFieldTheme> & ({
     className?: string | undefined;
     field?: FieldMetadata<any, any> | undefined;

package/build/components/Combobox.d.ts

@@ -1,14 +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 useComboboxTheme: ((themeProps: {
-    readonly disabled: boolean;
-    readonly invalid: boolean;
-}) => {
-    input: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    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;
-    options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useComboboxTheme: {
     componentThemeName: "Combobox";
     themeDefinition: {
         readonly variants: {
@@ -17,16 +9,24 @@ export declare const useComboboxTheme: ((themeProps: {
         };
         readonly elements: ["root", "input", "icon", "options"];
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+}) => {
+    input: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    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;
+    options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type ComboboxItem<V> = {
     value: V;
     label: string;
 };
 export type ComboboxProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useComboboxTheme> & ComponentPropsWithoutRef<T> & ({
     as?: T | undefined;
-    value?: V | undefined;
-    defaultValue?: V | undefined;
-    multiple?: false | undefined;
+    value?: V[] | undefined;
+    defaultValue?: V[] | undefined;
+    multiple: true;
     items?: Array<ComboboxItem<V>> | undefined;
     placeholder?: string;
     immediate?: boolean | undefined;
@@ -34,12 +34,12 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
     customValue?: boolean | undefined;
     name?: string | undefined;
     className?: string;
-    onChange?: (selectedValue: V | undefined) => void;
+    onChange?: (selectedValue: V[] | undefined) => void;
 } | {
     as?: T | undefined;
-    value?: V[] | undefined;
-    defaultValue?: V[] | undefined;
-    multiple: true;
+    value?: V | undefined;
+    defaultValue?: V | undefined;
+    multiple?: false | undefined;
     items?: Array<ComboboxItem<V>> | undefined;
     placeholder?: string;
     immediate?: boolean | undefined;
@@ -47,7 +47,7 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
     customValue?: boolean | undefined;
     name?: string | undefined;
     className?: string;
-    onChange?: (selectedValue: V[] | undefined) => void;
+    onChange?: (selectedValue: V | undefined) => void;
 })>;
 export declare const Combobox: <T extends ElementType = import("react").ExoticComponent<{
     children?: import("react").ReactNode | undefined;

package/build/components/Combobox.js

@@ -86,10 +86,10 @@ export const Combobox = 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;
@@ -118,19 +118,19 @@ export const Combobox = forwardRef(
           HeadlessComboboxInput,
           {
             className: theme.input(null, className),
-            size: 1,
             displayValue,
+            size: 1,
             onChange: handleQueryChange
           }
         ),
         /* @__PURE__ */ jsx(HeadlessComboboxButton, { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) })
       ] }),
-      virtual && filteredItems ? /* @__PURE__ */ jsx(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: ({ option }) => /* @__PURE__ */ jsx(ComboboxOption, { value: option, children: items?.find((item) => item.value === option)?.label }) }) : null,
-      !virtual && filteredItems ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: [
+      virtual && filteredItems ? /* @__PURE__ */ jsx(HeadlessComboboxOptions, { anchor: "bottom start", className: theme.options(), children: ({ option }) => /* @__PURE__ */ jsx(ComboboxOption, { value: option, children: items?.find((item) => item.value === option)?.label }) }) : null,
+      !virtual && filteredItems ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { anchor: "bottom start", className: theme.options(), children: [
         customValue && query.length ? /* @__PURE__ */ jsx(ComboboxOption, { value: query, children: query }, query) : null,
         filteredItems.map((item) => /* @__PURE__ */ jsx(ComboboxOption, { value: item.value, children: item.label }, String(item.value)))
       ] }) : null,
-      !filteredItems && Array.isArray(filteredChildren) ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: [
+      !filteredItems && Array.isArray(filteredChildren) ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { anchor: "bottom start", className: theme.options(), children: [
         customValue && query.length ? /* @__PURE__ */ jsx(ComboboxOption, { value: query, children: query }) : null,
         filteredChildren
       ] }) : null

package/build/components/Combobox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Combobox.tsx"],
-  "sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {\n  Combobox as HeadlessCombobox,\n  ComboboxButton as HeadlessComboboxButton,\n  ComboboxInput as HeadlessComboboxInput,\n  ComboboxOptions as HeadlessComboboxOptions,\n  type ComboboxProps as HeadlessComboboxProps,\n} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {ComboboxOption} from './ComboboxOption.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef, useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useComboboxTheme = createComponentTheme('Combobox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'input', 'icon', 'options'],\n});\n\nconst COMBOBOX_ELEMENT = Fragment;\n\nexport type ComboboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ComboboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useComboboxTheme> &\n    ComponentPropsWithoutRef<T> &\n    (\n      | {\n          as?: T | undefined;\n          value?: V | undefined;\n          defaultValue?: V | undefined;\n          multiple?: false | undefined;\n          items?: Array<ComboboxItem<V>> | undefined;\n          placeholder?: string;\n          immediate?: boolean | undefined;\n          virtual?: boolean | undefined;\n          customValue?: boolean | undefined;\n          name?: string | undefined;\n          className?: string;\n          onChange?: (selectedValue: V | undefined) => void;\n        }\n      | {\n          as?: T | undefined;\n          value?: V[] | undefined;\n          defaultValue?: V[] | undefined;\n          multiple: true;\n          items?: Array<ComboboxItem<V>> | undefined;\n          placeholder?: string;\n          immediate?: boolean | undefined;\n          virtual?: boolean | undefined;\n          customValue?: boolean | undefined;\n          name?: string | undefined;\n          className?: string;\n          onChange?: (selectedValue: V[] | undefined) => void;\n        }\n    )\n>;\n\nexport const Combobox = forwardRef(\n  <T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      invalid = false,\n      as = COMBOBOX_ELEMENT as unknown as T,\n      value,\n      defaultValue,\n      multiple,\n      items,\n      placeholder,\n      immediate = true,\n      virtual = false,\n      customValue = false,\n      name,\n      className,\n      onChange,\n      children,\n      ...rest\n    }: ComboboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useComboboxTheme({disabled, invalid});\n    let formId = useFormId();\n    let field = useField();\n    let fieldName = useFieldName();\n    let [query, setQuery] = useState('');\n\n    let handleChange = useCallback(\n      (selectedValue: V | null) => {\n        if (selectedValue) {\n          onChange?.(selectedValue as V & V[]);\n        }\n\n        if (selectedValue === null) {\n          onChange?.(undefined);\n        }\n      },\n      [onChange],\n    );\n\n    let displayValue = useCallback(\n      (option: string) => {\n        if (items) {\n          let selectedItem = items.find((item) => item.value === option);\n\n          if (selectedItem) {\n            return selectedItem.label;\n          }\n        }\n\n        return option;\n      },\n      [items],\n    );\n\n    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value);\n    }, []);\n\n    if (virtual && !items) {\n      throw new Error('Combobox requires `items` prop in virtual scrolling mode!');\n    }\n\n    if (virtual && customValue) {\n      throw new Error(\"Combobox doesn't support `customValue` prop in virtual scrolling mode!\");\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 as number | string}`\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    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessComboboxProps<any, any, any> = {\n      as,\n      ref,\n      name: field?.name ?? fieldName ?? name,\n      value: value ?? null,\n      defaultValue,\n      multiple,\n      disabled,\n      immediate,\n      form: formId,\n      onChange: handleChange,\n      ...rest,\n    };\n\n    if (virtual) {\n      props.virtual = {\n        options: filteredItems?.map((item) => item.value) ?? [],\n      };\n    }\n\n    return (\n      <HeadlessCombobox {...props}>\n        <div className={theme.root('relative', className)} data-component=\"combobox\">\n          <HeadlessComboboxInput\n            className={theme.input(null, className)}\n            size={1} // so the input default width without styling is small\n            displayValue={displayValue}\n            onChange={handleQueryChange}\n          />\n          <HeadlessComboboxButton className={theme.icon('absolute')}>\n            <Icon>\n              <ChevronDownIcon />\n            </Icon>\n          </HeadlessComboboxButton>\n        </div>\n\n        {virtual && filteredItems ?\n          <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n            {({option}: {option: V}) => (\n              <ComboboxOption value={option}>\n                {items?.find((item) => item.value === option)?.label}\n              </ComboboxOption>\n            )}\n          </HeadlessComboboxOptions>\n        : null}\n\n        {!virtual && filteredItems ?\n          <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n            {customValue && query.length ?\n              <ComboboxOption key={query} value={query}>\n                {query}\n              </ComboboxOption>\n            : null}\n            {filteredItems.map((item) => (\n              <ComboboxOption key={String(item.value)} value={item.value}>\n                {item.label}\n              </ComboboxOption>\n            ))}\n          </HeadlessComboboxOptions>\n        : null}\n\n        {!filteredItems && Array.isArray(filteredChildren) ?\n          <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n            {customValue && query.length ?\n              <ComboboxOption value={query}>{query}</ComboboxOption>\n            : null}\n            {filteredChildren}\n          </HeadlessComboboxOptions>\n        : null}\n      </HeadlessCombobox>\n    );\n  },\n);\n\nexport const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {\n  classNames: {\n    root: 'w-full min-w-32',\n    input:\n      'flex w-full 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    icon: 'text-neutral-500 size-5 top-2 right-2 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(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Combobox as HeadlessCombobox,\n  ComboboxButton as HeadlessComboboxButton,\n  ComboboxInput as HeadlessComboboxInput,\n  ComboboxOptions as HeadlessComboboxOptions,\n  type ComboboxProps as HeadlessComboboxProps,\n} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {ComboboxOption} from './ComboboxOption.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef, useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useComboboxTheme = createComponentTheme('Combobox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'input', 'icon', 'options'],\n});\n\nconst COMBOBOX_ELEMENT = Fragment;\n\nexport type ComboboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ComboboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useComboboxTheme> &\n    ComponentPropsWithoutRef<T> &\n    (\n      | {\n          as?: T | undefined;\n          value?: V[] | undefined;\n          defaultValue?: V[] | undefined;\n          multiple: true;\n          items?: Array<ComboboxItem<V>> | undefined;\n          placeholder?: string;\n          immediate?: boolean | undefined;\n          virtual?: boolean | undefined;\n          customValue?: boolean | undefined;\n          name?: string | undefined;\n          className?: string;\n          onChange?: (selectedValue: V[] | undefined) => void;\n        }\n      | {\n          as?: T | undefined;\n          value?: V | undefined;\n          defaultValue?: V | undefined;\n          multiple?: false | undefined;\n          items?: Array<ComboboxItem<V>> | undefined;\n          placeholder?: string;\n          immediate?: boolean | undefined;\n          virtual?: boolean | undefined;\n          customValue?: boolean | undefined;\n          name?: string | undefined;\n          className?: string;\n          onChange?: (selectedValue: V | undefined) => void;\n        }\n    )\n>;\n\nexport const Combobox = forwardRef(\n  <T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      invalid = false,\n      as = COMBOBOX_ELEMENT as unknown as T,\n      value,\n      defaultValue,\n      multiple,\n      items,\n      placeholder,\n      immediate = true,\n      virtual = false,\n      customValue = false,\n      name,\n      className,\n      onChange,\n      children,\n      ...rest\n    }: ComboboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useComboboxTheme({disabled, invalid});\n    let formId = useFormId();\n    let field = useField();\n    let fieldName = useFieldName();\n    let [query, setQuery] = useState('');\n\n    let handleChange = useCallback(\n      (selectedValue: V | null) => {\n        if (selectedValue) {\n          onChange?.(selectedValue as V & V[]);\n        }\n\n        if (selectedValue === null) {\n          onChange?.(undefined);\n        }\n      },\n      [onChange],\n    );\n\n    let displayValue = useCallback(\n      (option: string) => {\n        if (items) {\n          let selectedItem = items.find((item) => item.value === option);\n\n          if (selectedItem) {\n            return selectedItem.label;\n          }\n        }\n\n        return option;\n      },\n      [items],\n    );\n\n    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value);\n    }, []);\n\n    if (virtual && !items) {\n      throw new Error('Combobox requires `items` prop in virtual scrolling mode!');\n    }\n\n    if (virtual && customValue) {\n      throw new Error(\"Combobox doesn't support `customValue` prop in virtual scrolling mode!\");\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 as number | string}`\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    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessComboboxProps<any, any, any> = {\n      as,\n      ref,\n      name: field?.name ?? fieldName ?? name,\n      value: value ?? null,\n      defaultValue,\n      multiple,\n      disabled,\n      immediate,\n      form: formId,\n      onChange: handleChange,\n      ...rest,\n    };\n\n    if (virtual) {\n      props.virtual = {\n        options: filteredItems?.map((item) => item.value) ?? [],\n      };\n    }\n\n    return (\n      <HeadlessCombobox {...props}>\n        <div className={theme.root('relative', className)} data-component=\"combobox\">\n          <HeadlessComboboxInput\n            className={theme.input(null, className)}\n            displayValue={displayValue}\n            size={1} // so the input default width without styling is small\n            onChange={handleQueryChange}\n          />\n          <HeadlessComboboxButton className={theme.icon('absolute')}>\n            <Icon>\n              <ChevronDownIcon />\n            </Icon>\n          </HeadlessComboboxButton>\n        </div>\n\n        {virtual && filteredItems ?\n          <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n            {({option}: {option: V}) => (\n              <ComboboxOption value={option}>\n                {items?.find((item) => item.value === option)?.label}\n              </ComboboxOption>\n            )}\n          </HeadlessComboboxOptions>\n        : null}\n\n        {!virtual && filteredItems ?\n          <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n            {customValue && query.length ?\n              <ComboboxOption key={query} value={query}>\n                {query}\n              </ComboboxOption>\n            : null}\n            {filteredItems.map((item) => (\n              <ComboboxOption key={String(item.value)} value={item.value}>\n                {item.label}\n              </ComboboxOption>\n            ))}\n          </HeadlessComboboxOptions>\n        : null}\n\n        {!filteredItems && Array.isArray(filteredChildren) ?\n          <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n            {customValue && query.length ?\n              <ComboboxOption value={query}>{query}</ComboboxOption>\n            : null}\n            {filteredChildren}\n          </HeadlessComboboxOptions>\n        : null}\n      </HeadlessCombobox>\n    );\n  },\n);\n\nexport const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {\n  classNames: {\n    root: 'w-full min-w-32',\n    input:\n      'flex w-full 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    icon: 'text-neutral-500 size-5 top-2 right-2 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(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build/components/ComboboxOption.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 useComboboxOptionTheme: ((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 useComboboxOptionTheme: {
     componentThemeName: "ComboboxOption";
     themeDefinition: {
         readonly variants: {
@@ -13,7 +8,12 @@ export declare const useComboboxOptionTheme: ((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 ComboboxOptionProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useComboboxOptionTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     value: V;

package/build/components/Container.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 useContainerTheme: ((themeProps: {
-    readonly spacing: "small" | "medium" | "large" | "extra-small";
-    readonly direction: "row" | "column";
-    readonly justify: "center" | "normal" | "spaced";
-    readonly align: "center" | "normal";
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useContainerTheme: {
     componentThemeName: "Container";
     themeDefinition: {
         readonly variants: {
@@ -15,7 +10,12 @@ export declare const useContainerTheme: ((themeProps: {
             readonly align: ["normal", "center"];
         };
     };
-};
+} & ((themeProps: {
+    readonly spacing: "small" | "medium" | "large" | "extra-small";
+    readonly direction: "row" | "column";
+    readonly justify: "center" | "normal" | "spaced";
+    readonly align: "center" | "normal";
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type ContainerProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useContainerTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Description.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 useDescriptionTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useDescriptionTheme: {
     componentThemeName: "Description";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type DescriptionProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDescriptionTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string | undefined;

package/build/components/Dialog.d.ts

@@ -1,14 +1,14 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useDialogTheme: (() => {
-    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    backdrop: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useDialogTheme: {
     componentThemeName: "Dialog";
     themeDefinition: {
         readonly elements: ["root", "backdrop"];
     };
-};
+} & (() => {
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    backdrop: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type DialogProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     open: boolean;

package/build/components/DialogPanel.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 useDialogPanelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useDialogPanelTheme: {
     componentThemeName: "DialogPanel";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type DialogPanelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogPanelTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/DialogTitle.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 useDialogTitleTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useDialogTitleTheme: {
     componentThemeName: "DialogTitle";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type DialogTitleProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogTitleTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Error.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 useErrorTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useErrorTheme: {
     componentThemeName: "Error";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type ErrorProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useErrorTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Field.d.ts

@@ -1,10 +1,10 @@
 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 useFieldTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useFieldTheme: {
     componentThemeName: "Field";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type FieldProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useFieldTheme> & ComponentPropsWithoutRef<T> & ({
     as?: T | undefined;
     className?: string | undefined;

package/build/components/Fieldset.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 useFieldsetTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useFieldsetTheme: {
     componentThemeName: "Fieldset";
     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 FieldsetProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useFieldsetTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string | undefined;

package/build/components/Form.d.ts

@@ -1,10 +1,10 @@
 import { type FormMetadata } 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 useFormTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useFormTheme: {
     componentThemeName: "Form";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type FormProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useFormTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Icon.d.ts

@@ -1,9 +1,6 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useIconTheme: ((themeProps: {
-    readonly size: "small" | "medium" | "large";
-    readonly variant: "default" | "light";
-}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useIconTheme: {
     componentThemeName: "Icon";
     themeDefinition: {
         readonly variants: {
@@ -11,7 +8,10 @@ export declare const useIconTheme: ((themeProps: {
             readonly variant: ["default", "light"];
         };
     };
-};
+} & ((themeProps: {
+    readonly size: "small" | "medium" | "large";
+    readonly variant: "default" | "light";
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type IconProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useIconTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     name?: string | undefined;

package/build/components/Input.d.ts

@@ -1,13 +1,6 @@
 import { type ComponentPropsWithoutRef, type ComponentType, type ElementType, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useInputTheme: ((themeProps: {
-    readonly disabled: boolean;
-}) => {
-    input: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    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;
-    clearButton: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useInputTheme: {
     componentThemeName: "Input";
     themeDefinition: {
         readonly variants: {
@@ -15,7 +8,14 @@ export declare const useInputTheme: ((themeProps: {
         };
         readonly elements: ["root", "input", "icon", "clearButton"];
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+}) => {
+    input: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    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;
+    clearButton: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type InputProps<T extends ElementType> = ComponentProps<typeof useInputTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     name?: string | undefined;

package/build/components/Label.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 useLabelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useLabelTheme: {
     componentThemeName: "Label";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type LabelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useLabelTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string;

package/build/components/Legend.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 useLegendTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+export declare const useLegendTheme: {
     componentThemeName: "Legend";
     themeDefinition: undefined;
-};
+} & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
 export type LegendProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useLegendTheme> & ComponentPropsWithoutRef<T> & {
     as?: T | undefined;
     className?: string | undefined;

package/build/components/Listbox.d.ts

@@ -1,15 +1,6 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
-export declare const useListboxTheme: ((themeProps: {
-    readonly disabled: boolean;
-    readonly invalid: boolean;
-}) => {
-    filter: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    label: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    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;
-    options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-}) & {
+export declare const useListboxTheme: {
     componentThemeName: "Listbox";
     themeDefinition: {
         readonly variants: {
@@ -18,24 +9,21 @@ export declare const useListboxTheme: ((themeProps: {
         };
         readonly elements: ["root", "label", "icon", "options", "filter"];
     };
-};
+} & ((themeProps: {
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+}) => {
+    filter: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    label: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    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;
+    options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+});
 export type ListboxItem<V> = {
     value: V;
     label: string;
 };
 export type ListboxProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useListboxTheme> & ComponentPropsWithoutRef<T> & ({
-    as?: T | undefined;
-    value?: V | undefined;
-    defaultValue?: V | undefined;
-    multiple?: false | undefined;
-    hideSelected?: never;
-    items?: Array<ListboxItem<V>> | undefined;
-    placeholder?: string;
-    name?: string | undefined;
-    className?: string | undefined;
-    showFilter?: boolean | undefined;
-    onChange?: (selectedValue: V) => void;
-} | {
     as?: T | undefined;
     value?: V[] | undefined;
     defaultValue?: V[] | undefined;
@@ -50,6 +38,18 @@ export type ListboxProps<T extends ElementType, V extends boolean | number | str
     className?: string | undefined;
     showFilter?: boolean | undefined;
     onChange?: (selectedValue: V[]) => void;
+} | {
+    as?: T | undefined;
+    value?: V | undefined;
+    defaultValue?: V | undefined;
+    multiple?: false | undefined;
+    hideSelected?: never;
+    items?: Array<ListboxItem<V>> | undefined;
+    placeholder?: string;
+    name?: string | undefined;
+    className?: string | undefined;
+    showFilter?: boolean | undefined;
+    onChange?: (selectedValue: V) => void;
 })>;
 export declare const Listbox: <T extends ElementType = import("react").ExoticComponent<{
     children?: ReactNode | undefined;