@mage-ui/components 1.0.168 → 1.0.169

package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts

@@ -2,11 +2,12 @@ import { DropdownValue } from "../DropdownContextProvider.mjs";
 import { ComboboxTargetProps } from "../combobox/ComboboxTarget.mjs";
 import { ComboboxProps } from "../combobox/Combobox.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region src/components/controls/dropdown/autocomplete/Autocomplete.d.ts
 type AutocompleteProps = Omit<ComboboxProps, 'options' | 'classNames'> & {
   name: string;
-  description?: string;
+  description?: ReactNode;
   error?: string;
   url?: string;
   fetcher: (params: {

package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,WAAA;EACA,KAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,QAAA;EAAA,YAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAmB1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,WAAA,GAAc,SAAA;EACd,KAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,QAAA;EAAA,YAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAmB1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  'options' | 'classNames'\n> & {\n  name: string;\n  description?: string;\n  error?: string;\n  url?: string;\n  fetcher: (params: {\n    url?: string;\n    query: string;\n  }) => Promise<DropdownValue[]>;\n  threshold?: number;\n  debounce?: number;\n  query?: string;\n  classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n    };\n  };\n};\n\nexport const Autocomplete = ({\n  name,\n  label,\n  required,\n  autoComplete,\n  description,\n  error,\n  placeholder,\n  creatable,\n  url,\n  fetcher,\n  query = '',\n  debounce = 500,\n  threshold = 3,\n  clearButtonText,\n  createText,\n  emptyText = 'No hay resultados',\n  classNames,\n  ...props\n}: AutocompleteProps) => {\n  const [searchValue, setSearchValue] = useState(query);\n  const [isTyping, setIsTyping] = useState(false);\n\n  const { data, isFetching } = useQuery<DropdownValue[]>({\n    queryKey: [name, url, searchValue],\n    queryFn: () => {\n      return fetcher({\n        url,\n        query: searchValue,\n      });\n    },\n    initialData: [],\n    enabled: searchValue.length >= threshold,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setSearchValue(value);\n    setIsTyping(false);\n  }, debounce);\n\n  const handleSearch = (value: string) => {\n    setIsTyping(true);\n    debounced(value);\n  };\n\n  const {\n    creatable: creatableClassNames,\n    empty: emptyClassNames,\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n    targetClassNames || {};\n\n  const targetProps = {\n    placeholder,\n    label,\n    required,\n    autoComplete,\n    description,\n    error,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n      root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n      label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n      error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n      input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n      section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n      required:\n        restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton:\n          clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n        root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            autocompleteClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            autocompleteClearButtonIconRawRoot(),\n        },\n      },\n    },\n  };\n\n  const emptyProps = {\n    emptyText,\n    classNames: {\n      empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n    },\n  };\n\n  const creatableProps = {\n    creatable: creatable ?? false,\n    createText,\n    classNames: creatableClassNames,\n  };\n\n  return (\n    <Dropdown\n      shouldFilter={false}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n        root: dropdownClassNames?.root ?? autocompleteRoot(),\n        options: dropdownClassNames?.options ?? autocompleteOptions(),\n        option: dropdownClassNames?.option ?? autocompleteOption(),\n        empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            autocompleteScrollAreaAutosize(),\n        },\n      }}\n      target={\n        <AutocompleteTarget\n          debounced={handleSearch}\n          isLoading={isFetching || isTyping}\n          threshold={threshold}\n          showEmpty={emptyText !== undefined}\n          {...targetProps}\n        />\n      }\n      options={data}\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={emptyProps}\n        creatableProps={creatableProps}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"i/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,WACA,eACA,cACA,QACA,cACA,YACA,MACA,UACA,QAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,EAAM,CAC/C,CAAC,EAAU,GAAe,EAAS,GAAM,CAEzC,CAAE,OAAM,cAAe,EAA0B,CACrD,SAAU,CAAC,EAAM,EAAK,EAAY,CAClC,YACS,EAAQ,CACb,MACA,MAAO,EACR,CAAC,CAEJ,YAAa,EAAE,CACf,QAAS,EAAY,QAAU,EAChC,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAe,EAAM,CACrB,EAAY,GAAM,EACjB,EAAS,CAEN,EAAgB,GAAkB,CACtC,EAAY,GAAK,CACjB,EAAU,EAAM,EAGZ,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,GACR,WAAY,GACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,IAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,WACA,eACA,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,IAAuB,CACpE,KAAM,GAAsB,MAAQ,GAA2B,CAC/D,MAAO,GAAsB,OAAS,GAA4B,CAClE,YACE,GAAsB,aAAe,IAAkC,CACzE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,SACE,GAAsB,UAAY,GAA+B,CACpE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAyB,CACjE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAAgC,CAClC,KACE,GAAuB,SAAS,MAChC,IAAoC,CACvC,CACF,CACF,CACF,CAEK,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,GAAmB,CACrD,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,EACb,CAED,OACE,EAAC,EAAD,CACE,aAAc,GACd,WAAY,CACV,SAAU,GAAoB,UAAY,GAAc,CACxD,KAAM,GAAoB,MAAQ,GAAkB,CACpD,QAAS,GAAoB,SAAW,GAAqB,CAC7D,OAAQ,GAAoB,QAAU,GAAoB,CAC1D,MAAO,GAAiB,OAAS,GAAmB,CACpD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,IAAsB,4BACtB,IAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAD,CACE,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,GACJ,CAAA,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
+{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  'options' | 'classNames'\n> & {\n  name: string;\n  description?: ReactNode;\n  error?: string;\n  url?: string;\n  fetcher: (params: {\n    url?: string;\n    query: string;\n  }) => Promise<DropdownValue[]>;\n  threshold?: number;\n  debounce?: number;\n  query?: string;\n  classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n    };\n  };\n};\n\nexport const Autocomplete = ({\n  name,\n  label,\n  required,\n  autoComplete,\n  description,\n  error,\n  placeholder,\n  creatable,\n  url,\n  fetcher,\n  query = '',\n  debounce = 500,\n  threshold = 3,\n  clearButtonText,\n  createText,\n  emptyText = 'No hay resultados',\n  classNames,\n  ...props\n}: AutocompleteProps) => {\n  const [searchValue, setSearchValue] = useState(query);\n  const [isTyping, setIsTyping] = useState(false);\n\n  const { data, isFetching } = useQuery<DropdownValue[]>({\n    queryKey: [name, url, searchValue],\n    queryFn: () => {\n      return fetcher({\n        url,\n        query: searchValue,\n      });\n    },\n    initialData: [],\n    enabled: searchValue.length >= threshold,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setSearchValue(value);\n    setIsTyping(false);\n  }, debounce);\n\n  const handleSearch = (value: string) => {\n    setIsTyping(true);\n    debounced(value);\n  };\n\n  const {\n    creatable: creatableClassNames,\n    empty: emptyClassNames,\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n    targetClassNames || {};\n\n  const targetProps = {\n    placeholder,\n    label,\n    required,\n    autoComplete,\n    description,\n    error,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n      root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n      label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n      error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n      input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n      section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n      required:\n        restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton:\n          clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n        root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            autocompleteClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            autocompleteClearButtonIconRawRoot(),\n        },\n      },\n    },\n  };\n\n  const emptyProps = {\n    emptyText,\n    classNames: {\n      empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n    },\n  };\n\n  const creatableProps = {\n    creatable: creatable ?? false,\n    createText,\n    classNames: creatableClassNames,\n  };\n\n  return (\n    <Dropdown\n      shouldFilter={false}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n        root: dropdownClassNames?.root ?? autocompleteRoot(),\n        options: dropdownClassNames?.options ?? autocompleteOptions(),\n        option: dropdownClassNames?.option ?? autocompleteOption(),\n        empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            autocompleteScrollAreaAutosize(),\n        },\n      }}\n      target={\n        <AutocompleteTarget\n          debounced={handleSearch}\n          isLoading={isFetching || isTyping}\n          threshold={threshold}\n          showEmpty={emptyText !== undefined}\n          {...targetProps}\n        />\n      }\n      options={data}\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={emptyProps}\n        creatableProps={creatableProps}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"i/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,WACA,eACA,cACA,QACA,cACA,YACA,MACA,UACA,QAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,EAAM,CAC/C,CAAC,EAAU,GAAe,EAAS,GAAM,CAEzC,CAAE,OAAM,cAAe,EAA0B,CACrD,SAAU,CAAC,EAAM,EAAK,EAAY,CAClC,YACS,EAAQ,CACb,MACA,MAAO,EACR,CAAC,CAEJ,YAAa,EAAE,CACf,QAAS,EAAY,QAAU,EAChC,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAe,EAAM,CACrB,EAAY,GAAM,EACjB,EAAS,CAEN,EAAgB,GAAkB,CACtC,EAAY,GAAK,CACjB,EAAU,EAAM,EAGZ,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,GACR,WAAY,GACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,IAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,WACA,eACA,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,IAAuB,CACpE,KAAM,GAAsB,MAAQ,GAA2B,CAC/D,MAAO,GAAsB,OAAS,GAA4B,CAClE,YACE,GAAsB,aAAe,IAAkC,CACzE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,SACE,GAAsB,UAAY,GAA+B,CACpE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAyB,CACjE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAAgC,CAClC,KACE,GAAuB,SAAS,MAChC,IAAoC,CACvC,CACF,CACF,CACF,CAEK,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,GAAmB,CACrD,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,EACb,CAED,OACE,EAAC,EAAD,CACE,aAAc,GACd,WAAY,CACV,SAAU,GAAoB,UAAY,GAAc,CACxD,KAAM,GAAoB,MAAQ,GAAkB,CACpD,QAAS,GAAoB,SAAW,GAAqB,CAC7D,OAAQ,GAAoB,QAAU,GAAoB,CAC1D,MAAO,GAAiB,OAAS,GAAmB,CACpD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,IAAsB,4BACtB,IAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAD,CACE,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,GACJ,CAAA,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}

package/dist/components/controls/dropdown/combobox/Combobox.d.mts

@@ -7,7 +7,8 @@ import { ReactNode } from "react";
 
 //#region src/components/controls/dropdown/combobox/Combobox.d.ts
 type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> & {
-  label?: string;
+  label?: ReactNode;
+  description?: ReactNode;
   placeholder?: string;
   creatable?: boolean;
   createText?: string;
@@ -29,6 +30,7 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
 };
 declare const Combobox: ({
   label,
+  description,
   placeholder,
   required,
   autoComplete,

package/dist/components/controls/dropdown/combobox/Combobox.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":";;;;;;;;KAuCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA,GAAa,aAAA;IACX,SAAA,GAAY,4BAAA;IACZ,KAAA,GAAQ,wBAAA;IACR,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,QAAA;EAAY,KAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAatB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":";;;;;;;;KAuCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EAGA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA,GAAa,aAAA;IACX,SAAA,GAAY,4BAAA;IACZ,KAAA,GAAQ,wBAAA;IACR,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,QAAA;EAAY,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GActB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropdown/combobox/Combobox.mjs

@@ -1,2 +1,2 @@
-import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"./ComboboxOptions.mjs";import{ComboboxTarget as n}from"./ComboboxTarget.mjs";import{combobox as r,comboboxChevron as i,comboboxChevronIcon as a,comboboxChevronIconRoot as o,comboboxChevronRoot as s,comboboxClearButton as c,comboboxClearButtonIcon as l,comboboxClearButtonIconRaw as u,comboboxClearButtonIconRawRoot as d,comboboxClearButtonRoot as ee,comboboxEmpty as f,comboboxOption as p,comboboxOptionCreateIcon as m,comboboxOptionCreateIconIconRaw as h,comboboxOptionCreateIconIconRawRoot as g,comboboxOptionCreateIconRoot as _,comboboxOptions as v,comboboxRoot as y,comboboxScrollAreaAutosize as b,comboboxTextInput as x,comboboxTextInputDescription as S,comboboxTextInputError as C,comboboxTextInputInput as w,comboboxTextInputLabel as T,comboboxTextInputRequired as E,comboboxTextInputRoot as D,comboboxTextInputSection as O,comboboxTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,placeholder:M,required:N,autoComplete:P,creatable:te,createText:F,clearButtonText:I,emptyText:L=`No results`,startSlot:R,error:z,classNames:B,...V})=>{let{creatable:H,empty:U,target:W,scrollArea:G,...K}=B||{},{clearButton:q,chevron:J,...Y}=W||{},X={placeholder:M,label:j,required:N,autoComplete:P,error:z,startSlot:R,classNames:{dropdownTextInput:Y?.dropdownTextInput??x(),root:Y?.root??D(),label:Y?.label??T(),description:Y?.description??S(),error:Y?.error??C(),wrapper:Y?.wrapper??k(),input:Y?.input??w(),section:Y?.section??O(),required:Y?.required??E()},clearButtonProps:{label:I,classNames:{clearButton:q?.clearButton??c(),root:q?.root??ee(),icon:q?.icon??l(),iconRaw:{iconRaw:q?.iconRaw?.iconRaw??u(),root:q?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:J?.chevron??i(),root:J?.root??s(),open:{iconRaw:J?.open?.iconRaw??a(),root:J?.open?.root??o()},close:{iconRaw:J?.close?.iconRaw??a(),root:J?.close?.root??o()}}}},Z=K?.dropdown??r(),Q=K?.root??y(),ne=K?.options??v(),re=K?.option??p(),$=U?.empty??f(),ie=K?.search,ae={emptyText:L,classNames:{empty:U?.empty??$}},oe={creatable:te??!1,createText:F,classNames:{create:H?.create,createIcon:{createIcon:H?.createIcon?.createIcon??m(),root:H?.createIcon?.root??_(),iconRaw:{iconRaw:H?.createIcon?.iconRaw?.iconRaw??h(),root:H?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:Z,root:Q,options:ne,option:re,empty:$,search:ie},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:G?.dropdownScrollAreaAutosize??b()}},target:A(n,{...X}),...V,children:A(t,{emptyProps:ae,creatableProps:oe})})};export{j as Combobox};
+import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"./ComboboxOptions.mjs";import{ComboboxTarget as n}from"./ComboboxTarget.mjs";import{combobox as r,comboboxChevron as i,comboboxChevronIcon as a,comboboxChevronIconRoot as o,comboboxChevronRoot as s,comboboxClearButton as c,comboboxClearButtonIcon as l,comboboxClearButtonIconRaw as u,comboboxClearButtonIconRawRoot as d,comboboxClearButtonRoot as ee,comboboxEmpty as f,comboboxOption as p,comboboxOptionCreateIcon as m,comboboxOptionCreateIconIconRaw as h,comboboxOptionCreateIconIconRawRoot as g,comboboxOptionCreateIconRoot as _,comboboxOptions as v,comboboxRoot as y,comboboxScrollAreaAutosize as b,comboboxTextInput as x,comboboxTextInputDescription as S,comboboxTextInputError as C,comboboxTextInputInput as w,comboboxTextInputLabel as T,comboboxTextInputRequired as E,comboboxTextInputRoot as D,comboboxTextInputSection as O,comboboxTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,description:M,placeholder:N,required:P,autoComplete:te,creatable:F,createText:I,clearButtonText:L,emptyText:R=`No results`,startSlot:z,error:B,classNames:V,...H})=>{let{creatable:U,empty:W,target:G,scrollArea:K,...q}=V||{},{clearButton:J,chevron:Y,...X}=G||{},Z={placeholder:N,label:j,description:M,required:P,autoComplete:te,error:B,startSlot:z,classNames:{dropdownTextInput:X?.dropdownTextInput??x(),root:X?.root??D(),label:X?.label??T(),description:X?.description??S(),error:X?.error??C(),wrapper:X?.wrapper??k(),input:X?.input??w(),section:X?.section??O(),required:X?.required??E()},clearButtonProps:{label:L,classNames:{clearButton:J?.clearButton??c(),root:J?.root??ee(),icon:J?.icon??l(),iconRaw:{iconRaw:J?.iconRaw?.iconRaw??u(),root:J?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:Y?.chevron??i(),root:Y?.root??s(),open:{iconRaw:Y?.open?.iconRaw??a(),root:Y?.open?.root??o()},close:{iconRaw:Y?.close?.iconRaw??a(),root:Y?.close?.root??o()}}}},Q=q?.dropdown??r(),ne=q?.root??y(),re=q?.options??v(),ie=q?.option??p(),$=W?.empty??f(),ae=q?.search,oe={emptyText:R,classNames:{empty:W?.empty??$}},se={creatable:F??!1,createText:I,classNames:{create:U?.create,createIcon:{createIcon:U?.createIcon?.createIcon??m(),root:U?.createIcon?.root??_(),iconRaw:{iconRaw:U?.createIcon?.iconRaw?.iconRaw??h(),root:U?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:Q,root:ne,options:re,option:ie,empty:$,search:ae},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:K?.dropdownScrollAreaAutosize??b()}},target:A(n,{...Z}),...H,children:A(t,{emptyProps:oe,creatableProps:se})})};export{j as Combobox};
 //# sourceMappingURL=Combobox.mjs.map

package/dist/components/controls/dropdown/combobox/Combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  combobox,\n  comboboxChevron,\n  comboboxChevronIcon,\n  comboboxChevronIconRoot,\n  comboboxChevronRoot,\n  comboboxClearButton,\n  comboboxClearButtonIcon,\n  comboboxClearButtonIconRaw,\n  comboboxClearButtonIconRawRoot,\n  comboboxClearButtonRoot,\n  comboboxEmpty,\n  comboboxOption,\n  comboboxOptionCreateIcon,\n  comboboxOptionCreateIconIconRaw,\n  comboboxOptionCreateIconIconRawRoot,\n  comboboxOptionCreateIconRoot,\n  comboboxOptions,\n  comboboxRoot,\n  comboboxScrollAreaAutosize,\n  comboboxTextInput,\n  comboboxTextInputDescription,\n  comboboxTextInputError,\n  comboboxTextInputInput,\n  comboboxTextInputLabel,\n  comboboxTextInputRequired,\n  comboboxTextInputRoot,\n  comboboxTextInputSection,\n  comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport type { ComboboxCreatableOptionProps } from './ComboboxCreatableOption';\nimport type { ComboboxEmptyOptionProps } from './ComboboxEmptyOption';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { ComboboxTarget, type ComboboxTargetProps } from './ComboboxTarget';\n\nexport type ComboboxProps = Omit<\n  DropdownProps,\n  'classNames' | 'target' | 'children'\n> & {\n  label?: string;\n  placeholder?: string;\n  creatable?: boolean;\n  createText?: string;\n  emptyText?: string;\n  clearButtonText?: string;\n  startSlot?: ReactNode;\n  error?: string;\n  required?: boolean;\n  autoComplete?: string;\n  classNames?: DropdownProps['classNames'] & {\n    creatable?: ComboboxCreatableOptionProps['classNames'];\n    empty?: ComboboxEmptyOptionProps['classNames'];\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n      chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n    };\n    scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n  };\n};\n\nexport const Combobox = ({\n  label,\n  placeholder,\n  required,\n  autoComplete,\n  creatable,\n  createText,\n  clearButtonText,\n  emptyText = 'No results',\n  startSlot,\n  error,\n  classNames,\n  ...props\n}: ComboboxProps) => {\n  const {\n    creatable: creatableClassNames,\n    empty: emptyClassNames,\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const {\n    clearButton: clearButtonClassNames,\n    chevron: chevronClassNames,\n    ...restTargetClassNames\n  } = targetClassNames || {};\n\n  const targetProps = {\n    placeholder,\n    label,\n    required,\n    autoComplete,\n    error,\n    startSlot,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? comboboxTextInput(),\n      root: restTargetClassNames?.root ?? comboboxTextInputRoot(),\n      label: restTargetClassNames?.label ?? comboboxTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? comboboxTextInputDescription(),\n      error: restTargetClassNames?.error ?? comboboxTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? comboboxTextInputWrapper(),\n      input: restTargetClassNames?.input ?? comboboxTextInputInput(),\n      section: restTargetClassNames?.section ?? comboboxTextInputSection(),\n      required: restTargetClassNames?.required ?? comboboxTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton:\n          clearButtonClassNames?.clearButton ?? comboboxClearButton(),\n        root: clearButtonClassNames?.root ?? comboboxClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? comboboxClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            comboboxClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            comboboxClearButtonIconRawRoot(),\n        },\n      },\n    },\n    chevronProps: {\n      classNames: {\n        chevron: chevronClassNames?.chevron ?? comboboxChevron(),\n        root: chevronClassNames?.root ?? comboboxChevronRoot(),\n        open: {\n          iconRaw: chevronClassNames?.open?.iconRaw ?? comboboxChevronIcon(),\n          root: chevronClassNames?.open?.root ?? comboboxChevronIconRoot(),\n        },\n        close: {\n          iconRaw: chevronClassNames?.close?.iconRaw ?? comboboxChevronIcon(),\n          root: chevronClassNames?.close?.root ?? comboboxChevronIconRoot(),\n        },\n      },\n    },\n  };\n\n  const dropdownClassName = dropdownClassNames?.dropdown ?? combobox();\n  const rootClassName = dropdownClassNames?.root ?? comboboxRoot();\n  const optionsClassName = dropdownClassNames?.options ?? comboboxOptions();\n  const optionClassName = dropdownClassNames?.option ?? comboboxOption();\n  const emptyClassName = emptyClassNames?.empty ?? comboboxEmpty();\n  const searchClassName = dropdownClassNames?.search;\n\n  const emptyProps = {\n    emptyText,\n    classNames: {\n      empty: emptyClassNames?.empty ?? emptyClassName,\n    },\n  };\n\n  const creatableProps = {\n    creatable: creatable ?? false,\n    createText,\n    classNames: {\n      create: creatableClassNames?.create,\n      createIcon: {\n        createIcon:\n          creatableClassNames?.createIcon?.createIcon ??\n          comboboxOptionCreateIcon(),\n        root:\n          creatableClassNames?.createIcon?.root ??\n          comboboxOptionCreateIconRoot(),\n        iconRaw: {\n          iconRaw:\n            creatableClassNames?.createIcon?.iconRaw?.iconRaw ??\n            comboboxOptionCreateIconIconRaw(),\n          root:\n            creatableClassNames?.createIcon?.iconRaw?.root ??\n            comboboxOptionCreateIconIconRawRoot(),\n        },\n      },\n    },\n  };\n\n  return (\n    <Dropdown\n      classNames={{\n        dropdown: dropdownClassName,\n        root: rootClassName,\n        options: optionsClassName,\n        option: optionClassName,\n        empty: emptyClassName,\n        search: searchClassName,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            comboboxScrollAreaAutosize(),\n        },\n      }}\n      target={<ComboboxTarget {...targetProps} />}\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={emptyProps}\n        creatableProps={creatableProps}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"s/BAkEA,MAAa,GAAY,CACvB,QACA,cACA,WACA,eACA,aACA,aACA,kBACA,YAAY,aACZ,YACA,QACA,aACA,GAAG,KACgB,CACnB,GAAM,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CAEpB,EAAc,CAClB,cACA,QACA,WACA,eACA,QACA,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAmB,CAChE,KAAM,GAAsB,MAAQ,GAAuB,CAC3D,MAAO,GAAsB,OAAS,GAAwB,CAC9D,YACE,GAAsB,aAAe,GAA8B,CACrE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,SAAU,GAAsB,UAAY,GAA2B,CACxE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAqB,CAC7D,KAAM,GAAuB,MAAQ,IAAyB,CAC9D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA4B,CAC9B,KACE,GAAuB,SAAS,MAChC,GAAgC,CACnC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAiB,CACxD,KAAM,GAAmB,MAAQ,GAAqB,CACtD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAqB,CAClE,KAAM,GAAmB,MAAM,MAAQ,GAAyB,CACjE,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAqB,CACnE,KAAM,GAAmB,OAAO,MAAQ,GAAyB,CAClE,CACF,CACF,CACF,CAEK,EAAoB,GAAoB,UAAY,GAAU,CAC9D,EAAgB,GAAoB,MAAQ,GAAc,CAC1D,GAAmB,GAAoB,SAAW,GAAiB,CACnE,GAAkB,GAAoB,QAAU,GAAgB,CAChE,EAAiB,GAAiB,OAAS,GAAe,CAC1D,GAAkB,GAAoB,OAEtC,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,IAAa,GACxB,aACA,WAAY,CACV,OAAQ,GAAqB,OAC7B,WAAY,CACV,WACE,GAAqB,YAAY,YACjC,GAA0B,CAC5B,KACE,GAAqB,YAAY,MACjC,GAA8B,CAChC,QAAS,CACP,QACE,GAAqB,YAAY,SAAS,SAC1C,GAAiC,CACnC,KACE,GAAqB,YAAY,SAAS,MAC1C,GAAqC,CACxC,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,WAAY,CACV,SAAU,EACV,KAAM,EACN,QAAS,GACT,OAAQ,GACR,MAAO,EACP,OAAQ,GACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
+{"version":3,"file":"Combobox.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  combobox,\n  comboboxChevron,\n  comboboxChevronIcon,\n  comboboxChevronIconRoot,\n  comboboxChevronRoot,\n  comboboxClearButton,\n  comboboxClearButtonIcon,\n  comboboxClearButtonIconRaw,\n  comboboxClearButtonIconRawRoot,\n  comboboxClearButtonRoot,\n  comboboxEmpty,\n  comboboxOption,\n  comboboxOptionCreateIcon,\n  comboboxOptionCreateIconIconRaw,\n  comboboxOptionCreateIconIconRawRoot,\n  comboboxOptionCreateIconRoot,\n  comboboxOptions,\n  comboboxRoot,\n  comboboxScrollAreaAutosize,\n  comboboxTextInput,\n  comboboxTextInputDescription,\n  comboboxTextInputError,\n  comboboxTextInputInput,\n  comboboxTextInputLabel,\n  comboboxTextInputRequired,\n  comboboxTextInputRoot,\n  comboboxTextInputSection,\n  comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport type { ComboboxCreatableOptionProps } from './ComboboxCreatableOption';\nimport type { ComboboxEmptyOptionProps } from './ComboboxEmptyOption';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { ComboboxTarget, type ComboboxTargetProps } from './ComboboxTarget';\n\nexport type ComboboxProps = Omit<\n  DropdownProps,\n  'classNames' | 'target' | 'children'\n> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  placeholder?: string;\n  creatable?: boolean;\n  createText?: string;\n  emptyText?: string;\n  clearButtonText?: string;\n  startSlot?: ReactNode;\n  error?: string;\n  required?: boolean;\n  autoComplete?: string;\n  classNames?: DropdownProps['classNames'] & {\n    creatable?: ComboboxCreatableOptionProps['classNames'];\n    empty?: ComboboxEmptyOptionProps['classNames'];\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n      chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n    };\n    scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n  };\n};\n\nexport const Combobox = ({\n  label,\n  description,\n  placeholder,\n  required,\n  autoComplete,\n  creatable,\n  createText,\n  clearButtonText,\n  emptyText = 'No results',\n  startSlot,\n  error,\n  classNames,\n  ...props\n}: ComboboxProps) => {\n  const {\n    creatable: creatableClassNames,\n    empty: emptyClassNames,\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const {\n    clearButton: clearButtonClassNames,\n    chevron: chevronClassNames,\n    ...restTargetClassNames\n  } = targetClassNames || {};\n\n  const targetProps = {\n    placeholder,\n    label,\n    description,\n    required,\n    autoComplete,\n    error,\n    startSlot,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? comboboxTextInput(),\n      root: restTargetClassNames?.root ?? comboboxTextInputRoot(),\n      label: restTargetClassNames?.label ?? comboboxTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? comboboxTextInputDescription(),\n      error: restTargetClassNames?.error ?? comboboxTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? comboboxTextInputWrapper(),\n      input: restTargetClassNames?.input ?? comboboxTextInputInput(),\n      section: restTargetClassNames?.section ?? comboboxTextInputSection(),\n      required: restTargetClassNames?.required ?? comboboxTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton:\n          clearButtonClassNames?.clearButton ?? comboboxClearButton(),\n        root: clearButtonClassNames?.root ?? comboboxClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? comboboxClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            comboboxClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            comboboxClearButtonIconRawRoot(),\n        },\n      },\n    },\n    chevronProps: {\n      classNames: {\n        chevron: chevronClassNames?.chevron ?? comboboxChevron(),\n        root: chevronClassNames?.root ?? comboboxChevronRoot(),\n        open: {\n          iconRaw: chevronClassNames?.open?.iconRaw ?? comboboxChevronIcon(),\n          root: chevronClassNames?.open?.root ?? comboboxChevronIconRoot(),\n        },\n        close: {\n          iconRaw: chevronClassNames?.close?.iconRaw ?? comboboxChevronIcon(),\n          root: chevronClassNames?.close?.root ?? comboboxChevronIconRoot(),\n        },\n      },\n    },\n  };\n\n  const dropdownClassName = dropdownClassNames?.dropdown ?? combobox();\n  const rootClassName = dropdownClassNames?.root ?? comboboxRoot();\n  const optionsClassName = dropdownClassNames?.options ?? comboboxOptions();\n  const optionClassName = dropdownClassNames?.option ?? comboboxOption();\n  const emptyClassName = emptyClassNames?.empty ?? comboboxEmpty();\n  const searchClassName = dropdownClassNames?.search;\n\n  const emptyProps = {\n    emptyText,\n    classNames: {\n      empty: emptyClassNames?.empty ?? emptyClassName,\n    },\n  };\n\n  const creatableProps = {\n    creatable: creatable ?? false,\n    createText,\n    classNames: {\n      create: creatableClassNames?.create,\n      createIcon: {\n        createIcon:\n          creatableClassNames?.createIcon?.createIcon ??\n          comboboxOptionCreateIcon(),\n        root:\n          creatableClassNames?.createIcon?.root ??\n          comboboxOptionCreateIconRoot(),\n        iconRaw: {\n          iconRaw:\n            creatableClassNames?.createIcon?.iconRaw?.iconRaw ??\n            comboboxOptionCreateIconIconRaw(),\n          root:\n            creatableClassNames?.createIcon?.iconRaw?.root ??\n            comboboxOptionCreateIconIconRawRoot(),\n        },\n      },\n    },\n  };\n\n  return (\n    <Dropdown\n      classNames={{\n        dropdown: dropdownClassName,\n        root: rootClassName,\n        options: optionsClassName,\n        option: optionClassName,\n        empty: emptyClassName,\n        search: searchClassName,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            comboboxScrollAreaAutosize(),\n        },\n      }}\n      target={<ComboboxTarget {...targetProps} />}\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={emptyProps}\n        creatableProps={creatableProps}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"s/BAmEA,MAAa,GAAY,CACvB,QACA,cACA,cACA,WACA,gBACA,YACA,aACA,kBACA,YAAY,aACZ,YACA,QACA,aACA,GAAG,KACgB,CACnB,GAAM,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CAEpB,EAAc,CAClB,cACA,QACA,cACA,WACA,gBACA,QACA,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAmB,CAChE,KAAM,GAAsB,MAAQ,GAAuB,CAC3D,MAAO,GAAsB,OAAS,GAAwB,CAC9D,YACE,GAAsB,aAAe,GAA8B,CACrE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,SAAU,GAAsB,UAAY,GAA2B,CACxE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAqB,CAC7D,KAAM,GAAuB,MAAQ,IAAyB,CAC9D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA4B,CAC9B,KACE,GAAuB,SAAS,MAChC,GAAgC,CACnC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAiB,CACxD,KAAM,GAAmB,MAAQ,GAAqB,CACtD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAqB,CAClE,KAAM,GAAmB,MAAM,MAAQ,GAAyB,CACjE,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAqB,CACnE,KAAM,GAAmB,OAAO,MAAQ,GAAyB,CAClE,CACF,CACF,CACF,CAEK,EAAoB,GAAoB,UAAY,GAAU,CAC9D,GAAgB,GAAoB,MAAQ,GAAc,CAC1D,GAAmB,GAAoB,SAAW,GAAiB,CACnE,GAAkB,GAAoB,QAAU,GAAgB,CAChE,EAAiB,GAAiB,OAAS,GAAe,CAC1D,GAAkB,GAAoB,OAEtC,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,CACV,OAAQ,GAAqB,OAC7B,WAAY,CACV,WACE,GAAqB,YAAY,YACjC,GAA0B,CAC5B,KACE,GAAqB,YAAY,MACjC,GAA8B,CAChC,QAAS,CACP,QACE,GAAqB,YAAY,SAAS,SAC1C,GAAiC,CACnC,KACE,GAAqB,YAAY,SAAS,MAC1C,GAAqC,CACxC,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,WAAY,CACV,SAAU,EACV,KAAM,GACN,QAAS,GACT,OAAQ,GACR,MAAO,EACP,OAAQ,GACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}

package/dist/components/controls/dropdown/select/Select.d.mts

@@ -6,7 +6,8 @@ import { ReactNode } from "react";
 
 //#region src/components/controls/dropdown/select/Select.d.ts
 type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
-  label?: string;
+  label?: ReactNode;
+  description?: ReactNode;
   placeholder?: string;
   clearable?: boolean;
   clearButtonText?: string;
@@ -29,6 +30,7 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
 };
 declare const Select: ({
   label,
+  description,
   placeholder,
   required,
   autoComplete,

package/dist/components/controls/dropdown/select/Select.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"mappings":";;;;;;;KAsCY,WAAA,GAAc,IAAA,CACxB,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAgBpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"mappings":";;;;;;;KAsCY,WAAA,GAAc,IAAA,CACxB,aAAA;EAGA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAiBpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropdown/select/Select.mjs

@@ -1,2 +1,2 @@
-import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as ee}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as n}from"./SelectSearch.mjs";import{select as r,selectChevron as i,selectChevronIcon as a,selectChevronIconRoot as o,selectChevronRoot as s,selectClearButton as c,selectClearButtonIcon as l,selectClearButtonIconRaw as u,selectClearButtonIconRawRoot as d,selectClearButtonRoot as f,selectEmpty as p,selectOption as m,selectOptions as h,selectRoot as g,selectScrollAreaAutosize as _,selectSearchInput as v,selectSearchSection as y,selectSearchWrapper as b,selectTextInput as x,selectTextInputDescription as S,selectTextInputError as C,selectTextInputInput as w,selectTextInputLabel as T,selectTextInputRequired as E,selectTextInputRoot as D,selectTextInputSection as O,selectTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,placeholder:M,required:N,autoComplete:P,clearable:F=!1,clearButtonText:I,emptyText:L,searchable:R,searchPlaceholder:z,searchStartSlot:B,searchClassNames:V,startSlot:H,error:U,classNames:W,...G})=>{let{target:K,scrollArea:q,...J}=W||{},{clearButton:Y,chevron:X,...Z}=K||{},Q=L??(R?`No results`:void 0),$={placeholder:M,label:j,required:N,autoComplete:P,error:U,clearable:F,readOnly:!0,closeOnBlur:!R,startSlot:H,displayQuery:!1,classNames:{dropdownTextInput:Z?.dropdownTextInput??x(),root:Z?.root??D(),label:Z?.label??T(),description:Z?.description??S(),error:Z?.error??C(),wrapper:Z?.wrapper??k(),input:Z?.input??w(),section:Z?.section??O(),required:Z?.required??E()},clearButtonProps:{label:I,classNames:{clearButton:Y?.clearButton??c(),root:Y?.root??f(),icon:Y?.icon??l(),iconRaw:{iconRaw:Y?.iconRaw?.iconRaw??u(),root:Y?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:X?.chevron??i(),root:X?.root??s(),open:{iconRaw:X?.open?.iconRaw??a(),root:X?.open?.root??o()},close:{iconRaw:X?.close?.iconRaw??a(),root:X?.close?.root??o()}}}};return A(e,{"data-searchable":R,classNames:{dropdown:J?.dropdown??r(),root:J?.root??g(),options:J?.options??h(),option:J?.option??m(),empty:J?.empty??p(),search:J?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:q?.dropdownScrollAreaAutosize??_()}},target:A(ee,{...$}),dropdownTopSlot:R&&A(n,{searchPlaceholder:z,startSlot:B,classNames:{input:V?.input??v(),wrapper:V?.wrapper??b(),section:V?.section??y()}}),...G,children:A(t,{emptyProps:{emptyText:Q,classNames:{empty:J?.empty??p()}},creatableProps:{creatable:!1}})})};export{j as Select};
+import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as ee}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as n}from"./SelectSearch.mjs";import{select as r,selectChevron as i,selectChevronIcon as a,selectChevronIconRoot as o,selectChevronRoot as s,selectClearButton as c,selectClearButtonIcon as l,selectClearButtonIconRaw as u,selectClearButtonIconRawRoot as d,selectClearButtonRoot as f,selectEmpty as p,selectOption as m,selectOptions as h,selectRoot as g,selectScrollAreaAutosize as _,selectSearchInput as v,selectSearchSection as y,selectSearchWrapper as b,selectTextInput as x,selectTextInputDescription as S,selectTextInputError as C,selectTextInputInput as w,selectTextInputLabel as T,selectTextInputRequired as E,selectTextInputRoot as D,selectTextInputSection as O,selectTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,description:M,placeholder:N,required:P,autoComplete:F,clearable:I=!1,clearButtonText:L,emptyText:R,searchable:z,searchPlaceholder:B,searchStartSlot:V,searchClassNames:H,startSlot:U,error:W,classNames:G,...K})=>{let{target:q,scrollArea:J,...Y}=G||{},{clearButton:X,chevron:Z,...Q}=q||{},$=R??(z?`No results`:void 0),te={placeholder:N,label:j,description:M,required:P,autoComplete:F,error:W,clearable:I,readOnly:!0,closeOnBlur:!z,startSlot:U,displayQuery:!1,classNames:{dropdownTextInput:Q?.dropdownTextInput??x(),root:Q?.root??D(),label:Q?.label??T(),description:Q?.description??S(),error:Q?.error??C(),wrapper:Q?.wrapper??k(),input:Q?.input??w(),section:Q?.section??O(),required:Q?.required??E()},clearButtonProps:{label:L,classNames:{clearButton:X?.clearButton??c(),root:X?.root??f(),icon:X?.icon??l(),iconRaw:{iconRaw:X?.iconRaw?.iconRaw??u(),root:X?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:Z?.chevron??i(),root:Z?.root??s(),open:{iconRaw:Z?.open?.iconRaw??a(),root:Z?.open?.root??o()},close:{iconRaw:Z?.close?.iconRaw??a(),root:Z?.close?.root??o()}}}};return A(e,{"data-searchable":z,classNames:{dropdown:Y?.dropdown??r(),root:Y?.root??g(),options:Y?.options??h(),option:Y?.option??m(),empty:Y?.empty??p(),search:Y?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:J?.dropdownScrollAreaAutosize??_()}},target:A(ee,{...te}),dropdownTopSlot:z&&A(n,{searchPlaceholder:B,startSlot:V,classNames:{input:H?.input??v(),wrapper:H?.wrapper??b(),section:H?.section??y()}}),...K,children:A(t,{emptyProps:{emptyText:$,classNames:{empty:Y?.empty??p()}},creatableProps:{creatable:!1}})})};export{j as Select};
 //# sourceMappingURL=Select.mjs.map

package/dist/components/controls/dropdown/select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  select,\n  selectChevron,\n  selectChevronIcon,\n  selectChevronIconRoot,\n  selectChevronRoot,\n  selectClearButton,\n  selectClearButtonIcon,\n  selectClearButtonIconRaw,\n  selectClearButtonIconRawRoot,\n  selectClearButtonRoot,\n  selectEmpty,\n  selectOption,\n  selectOptions,\n  selectRoot,\n  selectScrollAreaAutosize,\n  selectSearchInput,\n  selectSearchSection,\n  selectSearchWrapper,\n  selectTextInput,\n  selectTextInputDescription,\n  selectTextInputError,\n  selectTextInputInput,\n  selectTextInputLabel,\n  selectTextInputRequired,\n  selectTextInputRoot,\n  selectTextInputSection,\n  selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n  DropdownProps,\n  'children' | 'classNames' | 'target'\n> & {\n  label?: string;\n  placeholder?: string;\n  clearable?: boolean;\n  clearButtonText?: string;\n  emptyText?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchStartSlot?: ReactNode;\n  searchClassNames?: SelectSearchClassNames;\n  startSlot?: ReactNode;\n  error?: string;\n  required?: boolean;\n  autoComplete?: string;\n  classNames?: DropdownProps['classNames'] & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n      chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n    };\n    scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n  };\n};\n\nexport const Select = ({\n  label,\n  placeholder,\n  required,\n  autoComplete,\n  clearable = false,\n  clearButtonText,\n  emptyText,\n  searchable,\n  searchPlaceholder,\n  searchStartSlot,\n  searchClassNames,\n  startSlot,\n  error,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const {\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const {\n    clearButton: clearButtonClassNames,\n    chevron: chevronClassNames,\n    ...restTargetClassNames\n  } = targetClassNames || {};\n  const resolvedEmptyText =\n    emptyText ?? (searchable ? 'No results' : undefined);\n\n  const targetProps = {\n    placeholder,\n    label,\n    required,\n    autoComplete,\n    error,\n    clearable,\n    readOnly: true,\n    closeOnBlur: !searchable,\n    startSlot,\n    displayQuery: false,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n      root: restTargetClassNames?.root ?? selectTextInputRoot(),\n      label: restTargetClassNames?.label ?? selectTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? selectTextInputDescription(),\n      error: restTargetClassNames?.error ?? selectTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n      input: restTargetClassNames?.input ?? selectTextInputInput(),\n      section: restTargetClassNames?.section ?? selectTextInputSection(),\n      required: restTargetClassNames?.required ?? selectTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n        root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            selectClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            selectClearButtonIconRawRoot(),\n        },\n      },\n    },\n    chevronProps: {\n      classNames: {\n        chevron: chevronClassNames?.chevron ?? selectChevron(),\n        root: chevronClassNames?.root ?? selectChevronRoot(),\n        open: {\n          iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n        },\n        close: {\n          iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n        },\n      },\n    },\n  };\n\n  return (\n    <Dropdown\n      data-searchable={searchable}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? select(),\n        root: dropdownClassNames?.root ?? selectRoot(),\n        options: dropdownClassNames?.options ?? selectOptions(),\n        option: dropdownClassNames?.option ?? selectOption(),\n        empty: dropdownClassNames?.empty ?? selectEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            selectScrollAreaAutosize(),\n        },\n      }}\n      target={<ComboboxTarget {...targetProps} />}\n      dropdownTopSlot={\n        searchable && (\n          <SelectSearch\n            searchPlaceholder={searchPlaceholder}\n            startSlot={searchStartSlot}\n            classNames={{\n              input: searchClassNames?.input ?? selectSearchInput(),\n              wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n              section: searchClassNames?.section ?? selectSearchSection(),\n            }}\n          />\n        )\n      }\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={{\n          emptyText: resolvedEmptyText,\n          classNames: {\n            empty: dropdownClassNames?.empty ?? selectEmpty(),\n          },\n        }}\n        creatableProps={{\n          creatable: false,\n        }}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"u8BAkEA,MAAa,GAAU,CACrB,QACA,cACA,WACA,eACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,QACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,WACA,eACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,aAAc,GACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,GAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}
+{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  select,\n  selectChevron,\n  selectChevronIcon,\n  selectChevronIconRoot,\n  selectChevronRoot,\n  selectClearButton,\n  selectClearButtonIcon,\n  selectClearButtonIconRaw,\n  selectClearButtonIconRawRoot,\n  selectClearButtonRoot,\n  selectEmpty,\n  selectOption,\n  selectOptions,\n  selectRoot,\n  selectScrollAreaAutosize,\n  selectSearchInput,\n  selectSearchSection,\n  selectSearchWrapper,\n  selectTextInput,\n  selectTextInputDescription,\n  selectTextInputError,\n  selectTextInputInput,\n  selectTextInputLabel,\n  selectTextInputRequired,\n  selectTextInputRoot,\n  selectTextInputSection,\n  selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n  DropdownProps,\n  'children' | 'classNames' | 'target'\n> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  placeholder?: string;\n  clearable?: boolean;\n  clearButtonText?: string;\n  emptyText?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchStartSlot?: ReactNode;\n  searchClassNames?: SelectSearchClassNames;\n  startSlot?: ReactNode;\n  error?: string;\n  required?: boolean;\n  autoComplete?: string;\n  classNames?: DropdownProps['classNames'] & {\n    target?: ComboboxTargetProps['classNames'] & {\n      clearButton?: NonNullable<\n        ComboboxTargetProps['clearButtonProps']\n      >['classNames'];\n      chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n    };\n    scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n  };\n};\n\nexport const Select = ({\n  label,\n  description,\n  placeholder,\n  required,\n  autoComplete,\n  clearable = false,\n  clearButtonText,\n  emptyText,\n  searchable,\n  searchPlaceholder,\n  searchStartSlot,\n  searchClassNames,\n  startSlot,\n  error,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const {\n    target: targetClassNames,\n    scrollArea: scrollAreaClassNames,\n    ...dropdownClassNames\n  } = classNames || {};\n\n  const {\n    clearButton: clearButtonClassNames,\n    chevron: chevronClassNames,\n    ...restTargetClassNames\n  } = targetClassNames || {};\n  const resolvedEmptyText =\n    emptyText ?? (searchable ? 'No results' : undefined);\n\n  const targetProps = {\n    placeholder,\n    label,\n    description,\n    required,\n    autoComplete,\n    error,\n    clearable,\n    readOnly: true,\n    closeOnBlur: !searchable,\n    startSlot,\n    displayQuery: false,\n    classNames: {\n      dropdownTextInput:\n        restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n      root: restTargetClassNames?.root ?? selectTextInputRoot(),\n      label: restTargetClassNames?.label ?? selectTextInputLabel(),\n      description:\n        restTargetClassNames?.description ?? selectTextInputDescription(),\n      error: restTargetClassNames?.error ?? selectTextInputError(),\n      wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n      input: restTargetClassNames?.input ?? selectTextInputInput(),\n      section: restTargetClassNames?.section ?? selectTextInputSection(),\n      required: restTargetClassNames?.required ?? selectTextInputRequired(),\n    },\n    clearButtonProps: {\n      label: clearButtonText,\n      classNames: {\n        clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n        root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n        icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n        iconRaw: {\n          iconRaw:\n            clearButtonClassNames?.iconRaw?.iconRaw ??\n            selectClearButtonIconRaw(),\n          root:\n            clearButtonClassNames?.iconRaw?.root ??\n            selectClearButtonIconRawRoot(),\n        },\n      },\n    },\n    chevronProps: {\n      classNames: {\n        chevron: chevronClassNames?.chevron ?? selectChevron(),\n        root: chevronClassNames?.root ?? selectChevronRoot(),\n        open: {\n          iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n        },\n        close: {\n          iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n          root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n        },\n      },\n    },\n  };\n\n  return (\n    <Dropdown\n      data-searchable={searchable}\n      classNames={{\n        dropdown: dropdownClassNames?.dropdown ?? select(),\n        root: dropdownClassNames?.root ?? selectRoot(),\n        options: dropdownClassNames?.options ?? selectOptions(),\n        option: dropdownClassNames?.option ?? selectOption(),\n        empty: dropdownClassNames?.empty ?? selectEmpty(),\n        search: dropdownClassNames?.search,\n      }}\n      scrollAreaProps={{\n        classNames: {\n          dropdownScrollAreaAutosize:\n            scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n            selectScrollAreaAutosize(),\n        },\n      }}\n      target={<ComboboxTarget {...targetProps} />}\n      dropdownTopSlot={\n        searchable && (\n          <SelectSearch\n            searchPlaceholder={searchPlaceholder}\n            startSlot={searchStartSlot}\n            classNames={{\n              input: searchClassNames?.input ?? selectSearchInput(),\n              wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n              section: searchClassNames?.section ?? selectSearchSection(),\n            }}\n          />\n        )\n      }\n      {...props}\n    >\n      <ComboboxOptions\n        emptyProps={{\n          emptyText: resolvedEmptyText,\n          classNames: {\n            empty: dropdownClassNames?.empty ?? selectEmpty(),\n          },\n        }}\n        creatableProps={{\n          creatable: false,\n        }}\n      />\n    </Dropdown>\n  );\n};\n"],"mappings":"u8BAmEA,MAAa,GAAU,CACrB,QACA,cACA,cACA,WACA,eACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,QACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,GAAc,CAClB,cACA,QACA,cACA,WACA,eACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,aAAc,GACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,GAAD,CAAgB,GAAI,GAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.168",
+  "version": "1.0.169",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.21.4",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.168",
+    "@mage-ui/preset": "1.0.169",
     "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {