@tcn/ui 0.0.2 → 0.0.4

package/dist/inputs/phone_number_input/phone_number_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input.js","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"sourcesContent":["import { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  Children,\n  isValidElement,\n} from 'react';\nimport { SlimButton } from '../../actions/index.js';\nimport { Select } from '../select/select.js';\nimport { MaskInput } from '../mask_input/mask_input.js';\nimport {\n  CountryPhoneInformation,\n  countriesPhoneInformation,\n} from './countries_phone_information.js';\nimport styles from './phone_number_input.module.css';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { stripNonNumericAfterCountryCode } from './utils.js';\n\nconst countryList = countriesPhoneInformation.map(i => ({\n  name: i.name,\n  selectedLabel: i.prefix,\n  optionLabel: `${i.prefix} (${i.code}) ${i.unicodeFlag}`,\n  value: i.code,\n  keywords: i.keywords,\n}));\n\ncountryList.sort((a, b) => parseInt(a.value) - parseInt(b.value));\n\nconst countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();\nconst countryCodeMap: Map<string, CountryPhoneInformation> = new Map();\ncountriesPhoneInformation.forEach(i => {\n  countryCodeMap.set(i.code, i);\n  if (countryPrefixMap.has(i.prefix)) {\n    countryPrefixMap.get(i.prefix)?.push(i);\n  } else {\n    countryPrefixMap.set(i.prefix, [i]);\n  }\n});\n\nfunction createCountryOptions(allowedCountryCodes?: string[]) {\n  if (allowedCountryCodes != null) {\n    const allowedMap: Record<string, boolean> = {};\n    allowedCountryCodes.forEach(c => {\n      allowedMap[c] = true;\n    });\n    return countryList\n      .filter(c => Boolean(allowedMap[c.value]))\n      .map(i => {\n        return (\n          <Option\n            key={i.value}\n            value={i.value}\n            label={i.selectedLabel}\n            keywords={i.keywords}\n          >\n            {i.optionLabel}\n          </Option>\n        );\n      });\n  } else {\n    return countryList.map(i => {\n      return (\n        <Option\n          key={i.value}\n          value={i.value}\n          label={i.selectedLabel}\n          keywords={i.keywords}\n        >\n          {i.optionLabel}\n        </Option>\n      );\n    });\n  }\n}\n\nfunction getCountryCodeFromValue(\n  value: string,\n  previousCountry: string,\n  defaultCountry: string\n) {\n  for (let x = 5; x > 1; x--) {\n    const prefix = value.slice(0, x);\n    const countriesInformation = countryPrefixMap.get(prefix);\n\n    if (countriesInformation != null) {\n      const countryInformation = countriesInformation.find(\n        c => c.code === previousCountry\n      );\n\n      if (countryInformation != null) {\n        return countryInformation;\n      } else {\n        return countriesInformation[0];\n      }\n    }\n  }\n\n  return (countryCodeMap.get(defaultCountry.toUpperCase()) ||\n    countryCodeMap.get('US')) as CountryPhoneInformation;\n}\n\nexport interface PhoneNumberInputProps\n  extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: string;\n  defaultCountry?: string;\n  onChange?: (value: string) => void;\n  countrySelectRef?: React.Ref<HTMLButtonElement>;\n  phoneNumberInputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  allowedCountryCodes?: string[];\n  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n}\n\nexport const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(\n  {\n    value = '',\n    defaultCountry = 'US',\n    onChange,\n    countrySelectRef: countryRef,\n    phoneNumberInputRef: numberRef,\n    disabled = false,\n    allowedCountryCodes,\n    children,\n    ...props\n  }: PhoneNumberInputProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const lastOutputValueRef = useRef(value);\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);\n  const countryInformation = getCountryCodeFromValue(\n    value,\n    selectedCountry,\n    defaultCountry\n  );\n  const [phoneNumber, setPhoneNumber] = useState(() => {\n    const phoneNumber = value.split(countryInformation.prefix)[1];\n\n    return phoneNumber == null ? '' : stripNonNumericAfterCountryCode(phoneNumber);\n  });\n\n  // Extract valid Option components from children\n  const phoneBookOptions = useMemo(() => {\n    return Children.toArray(children).filter(\n      (child): child is React.ReactElement<OptionProps> =>\n        isValidElement(child) && child.type === Option\n    );\n  }, [children]);\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n  const [countryCode, setCountryCode] = useState(countryInformation.code);\n  const [currentMasks, setCurrentMasks] = useState([\n    ...countriesPhoneInformation[0].masks,\n  ]);\n\n  const countryOptions = useMemo(() => {\n    return createCountryOptions(allowedCountryCodes);\n  }, [allowedCountryCodes]);\n\n  function changeCountry(countryCodeValue: string) {\n    const countryInformation = countryCodeMap.get(countryCodeValue);\n\n    if (countryInformation == null) {\n      return;\n    }\n\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n\n    if (phoneNumber == null) {\n      return;\n    }\n\n    const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;\n    lastOutputValueRef.current = value;\n    onChange && onChange(value);\n  }\n\n  useLayoutEffect(() => {\n    const countryInformation = getCountryCodeFromValue(\n      value,\n      selectedCountry,\n      defaultCountry\n    );\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n  }, [value, selectedCountry, defaultCountry]);\n\n  function transformValue(newPhoneNumber: string) {\n    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;\n    const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);\n    const outputValue = countryPrefix + lineNumber;\n\n    lastOutputValueRef.current = outputValue;\n    phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);\n    onChange && onChange(outputValue);\n  }\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    // Update the phone number with the selected value\n    updatePhoneNumber(value);\n    closePhoneBook();\n  }\n\n  function preparePasteValue(value: string) {\n    if (value.startsWith('+')) {\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setPhoneNumber(phoneNumber);\n\n      return phoneNumber;\n    }\n\n    return value;\n  }\n\n  const updatePhoneNumber = useCallback(\n    (value: string) => {\n      const oldValue = lastOutputValueRef.current;\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n      setSelectedCountry(countryInformation.code);\n\n      if (oldValue !== value) {\n        setPhoneNumber(phoneNumber);\n        onChange && onChange(value);\n      }\n    },\n    [defaultCountry, selectedCountry, onChange]\n  );\n\n  useLayoutEffect(() => {\n    updatePhoneNumber(value);\n  }, [value, updatePhoneNumber]);\n\n  return (\n    <HStack\n      ref={ref}\n      className={classNames(styles['phone-number-input'], 'phone-number-input')}\n      height=\"auto\"\n      {...props}\n    >\n      <Select\n        className={classNames(\n          styles['phone-number-input-select'],\n          'phone-number-input-select'\n        )}\n        ref={countryRef}\n        width=\"auto\"\n        value={countryCode}\n        onChange={changeCountry}\n        disabled={disabled}\n        data-is-disabled={disabled}\n      >\n        {countryOptions}\n      </Select>\n      <HStack width=\"flex\" className={styles['phone-number-input-container']}>\n        <MaskInput\n          ref={numberRef}\n          value={phoneNumber}\n          mask={currentMasks}\n          onChange={transformValue}\n          disabled={disabled}\n          data-is-disabled={disabled}\n          data-has-phone-book={showPhoneBook}\n          className={classNames(styles['phone-number-input'], 'phone-number-input')}\n          preparePasteValue={preparePasteValue}\n        />\n      </HStack>\n      {showPhoneBook && (\n        <>\n          <SlimButton\n            disabled={disabled}\n            className={classNames(\n              styles['phone-number-input-phone-book'],\n              'phone-number-input-phone-book'\n            )}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </SlimButton>\n\n          {isPhoneBookOpen && (\n            <SuggestionList\n              anchorElement={phoneBookElement}\n              onOptionSelect={handlePhoneBookOptionSelect}\n              onClose={closePhoneBook}\n              noSuggestionMessage=\"No phone numbers found\"\n            >\n              {phoneBookOptions}\n            </SuggestionList>\n          )}\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["countryList","countriesPhoneInformation","i","a","b","countryPrefixMap","countryCodeMap","createCountryOptions","allowedCountryCodes","allowedMap","c","jsx","Option","getCountryCodeFromValue","value","previousCountry","defaultCountry","x","prefix","countriesInformation","countryInformation","PhoneNumberInput","React","onChange","countryRef","numberRef","disabled","children","props","ref","lastOutputValueRef","useRef","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","selectedCountry","setSelectedCountry","phoneNumber","setPhoneNumber","stripNonNumericAfterCountryCode","phoneBookOptions","useMemo","Children","child","isValidElement","showPhoneBook","countryCode","setCountryCode","currentMasks","setCurrentMasks","countryOptions","changeCountry","countryCodeValue","useLayoutEffect","transformValue","newPhoneNumber","countryPrefix","lineNumber","outputValue","togglePhoneBook","closePhoneBook","handlePhoneBookOptionSelect","updatePhoneNumber","preparePasteValue","useCallback","oldValue","jsxs","HStack","classNames","styles","Select","MaskInput","Fragment","SlimButton","NotebookIcon","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"phone_number_input.js","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"sourcesContent":["import { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React, {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  Children,\n  isValidElement,\n} from 'react';\nimport { SlimButton } from '../../actions/index.js';\nimport { Select } from '../select/select.js';\nimport { MaskInput } from '../mask_input/mask_input.js';\nimport {\n  CountryPhoneInformation,\n  countriesPhoneInformation,\n} from './countries_phone_information.js';\nimport styles from './phone_number_input.module.css';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { stripNonNumericAfterCountryCode } from './utils.js';\n\nconst countryList = countriesPhoneInformation.map(i => ({\n  name: i.name,\n  selectedLabel: i.prefix,\n  optionLabel: `${i.prefix} (${i.code}) ${i.unicodeFlag}`,\n  value: i.code,\n  keywords: i.keywords,\n}));\n\ncountryList.sort((a, b) => parseInt(a.value) - parseInt(b.value));\n\nconst countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();\nconst countryCodeMap: Map<string, CountryPhoneInformation> = new Map();\ncountriesPhoneInformation.forEach(i => {\n  countryCodeMap.set(i.code, i);\n  if (countryPrefixMap.has(i.prefix)) {\n    countryPrefixMap.get(i.prefix)?.push(i);\n  } else {\n    countryPrefixMap.set(i.prefix, [i]);\n  }\n});\n\nfunction createCountryOptions(allowedCountryCodes?: string[]) {\n  if (allowedCountryCodes != null) {\n    const allowedMap: Record<string, boolean> = {};\n    allowedCountryCodes.forEach(c => {\n      allowedMap[c] = true;\n    });\n    return countryList\n      .filter(c => Boolean(allowedMap[c.value]))\n      .map(i => {\n        return (\n          <Option\n            key={i.value}\n            value={i.value}\n            label={i.selectedLabel}\n            keywords={i.keywords}\n          >\n            {i.optionLabel}\n          </Option>\n        );\n      });\n  } else {\n    return countryList.map(i => {\n      return (\n        <Option\n          key={i.value}\n          value={i.value}\n          label={i.selectedLabel}\n          keywords={i.keywords}\n        >\n          {i.optionLabel}\n        </Option>\n      );\n    });\n  }\n}\n\nfunction getCountryCodeFromValue(\n  value: string,\n  previousCountry: string,\n  defaultCountry: string\n) {\n  for (let x = 5; x > 1; x--) {\n    const prefix = value.slice(0, x);\n    const countriesInformation = countryPrefixMap.get(prefix);\n\n    if (countriesInformation != null) {\n      const countryInformation = countriesInformation.find(\n        c => c.code === previousCountry\n      );\n\n      if (countryInformation != null) {\n        return countryInformation;\n      } else {\n        return countriesInformation[0];\n      }\n    }\n  }\n\n  return (countryCodeMap.get(defaultCountry.toUpperCase()) ||\n    countryCodeMap.get('US')) as CountryPhoneInformation;\n}\n\nexport interface PhoneNumberInputProps\n  extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: string;\n  defaultCountry?: string;\n  onChange?: (value: string) => void;\n  countrySelectRef?: React.Ref<HTMLButtonElement>;\n  phoneNumberInputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  allowedCountryCodes?: string[];\n  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n}\n\nexport const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(\n  {\n    value = '',\n    defaultCountry = 'US',\n    onChange,\n    countrySelectRef: countryRef,\n    phoneNumberInputRef: numberRef,\n    disabled = false,\n    allowedCountryCodes,\n    children,\n    ...props\n  }: PhoneNumberInputProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const lastOutputValueRef = useRef(value);\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);\n  const countryInformation = getCountryCodeFromValue(\n    value,\n    selectedCountry,\n    defaultCountry\n  );\n  const [phoneNumber, setPhoneNumber] = useState(() => {\n    const phoneNumber = value.split(countryInformation.prefix)[1];\n\n    return phoneNumber == null ? '' : stripNonNumericAfterCountryCode(phoneNumber);\n  });\n\n  // Extract valid Option components from children\n  const phoneBookOptions = useMemo(() => {\n    return Children.toArray(children).filter(\n      (child): child is React.ReactElement<OptionProps> =>\n        isValidElement(child) && child.type === Option\n    );\n  }, [children]);\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n  const [countryCode, setCountryCode] = useState(countryInformation.code);\n  const [currentMasks, setCurrentMasks] = useState([\n    ...countriesPhoneInformation[0].masks,\n  ]);\n\n  const countryOptions = useMemo(() => {\n    return createCountryOptions(allowedCountryCodes);\n  }, [allowedCountryCodes]);\n\n  function changeCountry(countryCodeValue: string) {\n    const countryInformation = countryCodeMap.get(countryCodeValue);\n\n    if (countryInformation == null) {\n      return;\n    }\n\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n\n    if (phoneNumber == null) {\n      return;\n    }\n\n    const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;\n    lastOutputValueRef.current = value;\n    onChange && onChange(value);\n  }\n\n  useLayoutEffect(() => {\n    const countryInformation = getCountryCodeFromValue(\n      value,\n      selectedCountry,\n      defaultCountry\n    );\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n  }, [value, selectedCountry, defaultCountry]);\n\n  function transformValue(newPhoneNumber: string) {\n    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;\n    const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);\n    const outputValue = countryPrefix + lineNumber;\n\n    lastOutputValueRef.current = outputValue;\n    phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);\n    onChange && onChange(outputValue);\n  }\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    // Update the phone number with the selected value\n    updatePhoneNumber(value);\n    closePhoneBook();\n  }\n\n  function preparePasteValue(value: string) {\n    if (value.startsWith('+')) {\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setPhoneNumber(phoneNumber);\n\n      return phoneNumber;\n    }\n\n    return value;\n  }\n\n  const updatePhoneNumber = useCallback(\n    (value: string) => {\n      const oldValue = lastOutputValueRef.current;\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n      setSelectedCountry(countryInformation.code);\n\n      if (oldValue !== value) {\n        setPhoneNumber(phoneNumber);\n        onChange && onChange(value);\n      }\n    },\n    [defaultCountry, selectedCountry, onChange]\n  );\n\n  useLayoutEffect(() => {\n    updatePhoneNumber(value);\n  }, [value, updatePhoneNumber]);\n\n  return (\n    <HStack\n      ref={ref}\n      className={clsx(styles['phone-number-input'], 'phone-number-input')}\n      height=\"auto\"\n      {...props}\n    >\n      <Select\n        className={clsx(styles['phone-number-input-select'], 'phone-number-input-select')}\n        ref={countryRef}\n        width=\"auto\"\n        value={countryCode}\n        onChange={changeCountry}\n        disabled={disabled}\n        data-is-disabled={disabled}\n      >\n        {countryOptions}\n      </Select>\n      <HStack width=\"flex\" className={clsx(styles['phone-number-input-container'])}>\n        <MaskInput\n          ref={numberRef}\n          value={phoneNumber}\n          mask={currentMasks}\n          onChange={transformValue}\n          disabled={disabled}\n          data-is-disabled={disabled}\n          data-has-phone-book={showPhoneBook}\n          className={clsx(styles['phone-number-input'], 'phone-number-input')}\n          preparePasteValue={preparePasteValue}\n        />\n      </HStack>\n      {showPhoneBook && (\n        <>\n          <SlimButton\n            disabled={disabled}\n            className={clsx(\n              styles['phone-number-input-phone-book'],\n              'phone-number-input-phone-book'\n            )}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </SlimButton>\n\n          {isPhoneBookOpen && (\n            <SuggestionList\n              anchorElement={phoneBookElement}\n              onOptionSelect={handlePhoneBookOptionSelect}\n              onClose={closePhoneBook}\n              noSuggestionMessage=\"No phone numbers found\"\n            >\n              {phoneBookOptions}\n            </SuggestionList>\n          )}\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["countryList","countriesPhoneInformation","i","a","b","countryPrefixMap","countryCodeMap","createCountryOptions","allowedCountryCodes","allowedMap","c","jsx","Option","getCountryCodeFromValue","value","previousCountry","defaultCountry","x","prefix","countriesInformation","countryInformation","PhoneNumberInput","React","onChange","countryRef","numberRef","disabled","children","props","ref","lastOutputValueRef","useRef","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","selectedCountry","setSelectedCountry","phoneNumber","setPhoneNumber","stripNonNumericAfterCountryCode","phoneBookOptions","useMemo","Children","child","isValidElement","showPhoneBook","countryCode","setCountryCode","currentMasks","setCurrentMasks","countryOptions","changeCountry","countryCodeValue","useLayoutEffect","transformValue","newPhoneNumber","countryPrefix","lineNumber","outputValue","togglePhoneBook","closePhoneBook","handlePhoneBookOptionSelect","updatePhoneNumber","preparePasteValue","useCallback","oldValue","jsxs","HStack","clsx","styles","Select","MaskInput","Fragment","SlimButton","NotebookIcon","SuggestionList"],"mappings":"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"}

package/dist/inputs/radio/radio.js

@@ -1,22 +1,22 @@
 import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import h from "classnames";
-import x from "react";
+import { clsx as x } from "clsx";
+import h from "react";
 import { HStack as p } from "../../stacks/h_stack.js";
 import '../../radio.css';const y = "_radio_ce5c4e1", R = { radio: y };
 let g = 0;
-function k(a) {
-  return a ?? `radio-${g++}`;
+function k(o) {
+  return o ?? `radio-${g++}`;
 }
-const j = x.forwardRef(function({
+const C = h.forwardRef(function({
   name: l,
   id: s,
-  label: t,
+  label: a,
   className: c,
   checked: r,
   backgroundColor: u,
   value: m,
   onChange: e,
-  ...o
+  ...t
 }, f) {
   const d = k(s);
   return /* @__PURE__ */ b(p, { inline: !0, width: "auto", children: [
@@ -24,7 +24,7 @@ const j = x.forwardRef(function({
       "input",
       {
         ref: f,
-        className: h(c, R.radio, "radio"),
+        className: x(c, R.radio, "radio"),
         type: "radio",
         id: d,
         name: l,
@@ -32,26 +32,26 @@ const j = x.forwardRef(function({
         style: { backgroundColor: u },
         checked: r,
         "data-checked": r,
-        "data-is-disabled": o.disabled,
+        "data-is-disabled": t.disabled,
         "data-width": "fixed",
         onChange: (i) => {
           e && e(i.currentTarget.value, i);
         },
-        ...o
+        ...t
       }
     ),
-    t && /* @__PURE__ */ n(
+    a && /* @__PURE__ */ n(
       "label",
       {
         className: "radio-label",
-        style: { pointerEvents: o.disabled ? "none" : "auto" },
+        style: { pointerEvents: t.disabled ? "none" : "auto" },
         htmlFor: d,
-        children: t
+        children: a
       }
     )
   ] });
 });
 export {
-  j as Radio
+  C as Radio
 };
 //# sourceMappingURL=radio.js.map

package/dist/inputs/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../src/inputs/radio/radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './radio.module.css';\nimport { HStack } from '../../stacks/h_stack.js';\n\nlet idIndex = 0;\n\nfunction resolveId(id?: string | null) {\n  return id == null ? `radio-${idIndex++}` : id;\n}\n\nexport interface RadioProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  name: string;\n  id: string;\n  value: string;\n  checked?: boolean;\n  label?: string;\n  backgroundColor?: string;\n  disabled?: boolean;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Radio = React.forwardRef(function Radio(\n  {\n    name,\n    id,\n    label,\n    className,\n    checked,\n    backgroundColor: color,\n    value,\n    onChange,\n    ...props\n  }: RadioProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const finalId = resolveId(id);\n  return (\n    <HStack inline width=\"auto\">\n      <input\n        ref={ref}\n        className={classnames(className, styles.radio, 'radio')}\n        type=\"radio\"\n        id={finalId}\n        name={name}\n        value={value}\n        style={{ backgroundColor: color }}\n        checked={checked}\n        data-checked={checked}\n        data-is-disabled={props.disabled}\n        data-width=\"fixed\"\n        onChange={e => {\n          onChange && onChange(e.currentTarget.value, e);\n        }}\n        {...props}\n      />\n      {label && (\n        <label\n          className=\"radio-label\"\n          style={{ pointerEvents: props.disabled ? 'none' : 'auto' }}\n          htmlFor={finalId}\n        >\n          {label}\n        </label>\n      )}\n    </HStack>\n  );\n});\n"],"names":["idIndex","resolveId","id","Radio","React","name","label","className","checked","color","value","onChange","props","ref","finalId","jsxs","HStack","jsx","classnames","styles","e"],"mappings":";;;;;AAKA,IAAIA,IAAU;AAEd,SAASC,EAAUC,GAAoB;AACrC,SAAOA,KAAa,SAASF,GAAS;AACxC;AAaO,MAAMG,IAAQC,EAAM,WAAW,SACpC;AAAA,EACE,MAAAC;AAAA,EACA,IAAAH;AAAA,EACA,OAAAI;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUb,EAAUC,CAAE;AAC5B,SACE,gBAAAa,EAACC,GAAA,EAAO,QAAM,IAAC,OAAM,QACnB,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK,EAAWX,GAAWY,EAAO,OAAO,OAAO;AAAA,QACtD,MAAK;AAAA,QACL,IAAIL;AAAA,QACJ,MAAAT;AAAA,QACA,OAAAK;AAAA,QACA,OAAO,EAAE,iBAAiBD,EAAA;AAAA,QAC1B,SAAAD;AAAA,QACA,gBAAcA;AAAA,QACd,oBAAkBI,EAAM;AAAA,QACxB,cAAW;AAAA,QACX,UAAU,CAAAQ,MAAK;AACb,UAAAT,KAAYA,EAASS,EAAE,cAAc,OAAOA,CAAC;AAAA,QAC/C;AAAA,QACC,GAAGR;AAAA,MAAA;AAAA,IAAA;AAAA,IAELN,KACC,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,eAAeL,EAAM,WAAW,SAAS,OAAA;AAAA,QAClD,SAASE;AAAA,QAER,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"radio.js","sources":["../../../src/inputs/radio/radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './radio.module.css';\nimport { HStack } from '../../stacks/h_stack.js';\n\nlet idIndex = 0;\n\nfunction resolveId(id?: string | null) {\n  return id == null ? `radio-${idIndex++}` : id;\n}\n\nexport interface RadioProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  name: string;\n  id: string;\n  value: string;\n  checked?: boolean;\n  label?: string;\n  backgroundColor?: string;\n  disabled?: boolean;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Radio = React.forwardRef(function Radio(\n  {\n    name,\n    id,\n    label,\n    className,\n    checked,\n    backgroundColor: color,\n    value,\n    onChange,\n    ...props\n  }: RadioProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const finalId = resolveId(id);\n  return (\n    <HStack inline width=\"auto\">\n      <input\n        ref={ref}\n        className={clsx(className, styles.radio, 'radio')}\n        type=\"radio\"\n        id={finalId}\n        name={name}\n        value={value}\n        style={{ backgroundColor: color }}\n        checked={checked}\n        data-checked={checked}\n        data-is-disabled={props.disabled}\n        data-width=\"fixed\"\n        onChange={e => {\n          onChange && onChange(e.currentTarget.value, e);\n        }}\n        {...props}\n      />\n      {label && (\n        <label\n          className=\"radio-label\"\n          style={{ pointerEvents: props.disabled ? 'none' : 'auto' }}\n          htmlFor={finalId}\n        >\n          {label}\n        </label>\n      )}\n    </HStack>\n  );\n});\n"],"names":["idIndex","resolveId","id","Radio","React","name","label","className","checked","color","value","onChange","props","ref","finalId","jsxs","HStack","jsx","clsx","styles","e"],"mappings":";;;;;AAKA,IAAIA,IAAU;AAEd,SAASC,EAAUC,GAAoB;AACrC,SAAOA,KAAa,SAASF,GAAS;AACxC;AAaO,MAAMG,IAAQC,EAAM,WAAW,SACpC;AAAA,EACE,MAAAC;AAAA,EACA,IAAAH;AAAA,EACA,OAAAI;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUb,EAAUC,CAAE;AAC5B,SACE,gBAAAa,EAACC,GAAA,EAAO,QAAM,IAAC,OAAM,QACnB,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK,EAAKX,GAAWY,EAAO,OAAO,OAAO;AAAA,QAChD,MAAK;AAAA,QACL,IAAIL;AAAA,QACJ,MAAAT;AAAA,QACA,OAAAK;AAAA,QACA,OAAO,EAAE,iBAAiBD,EAAA;AAAA,QAC1B,SAAAD;AAAA,QACA,gBAAcA;AAAA,QACd,oBAAkBI,EAAM;AAAA,QACxB,cAAW;AAAA,QACX,UAAU,CAAAQ,MAAK;AACb,UAAAT,KAAYA,EAASS,EAAE,cAAc,OAAOA,CAAC;AAAA,QAC/C;AAAA,QACC,GAAGR;AAAA,MAAA;AAAA,IAAA;AAAA,IAELN,KACC,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,eAAeL,EAAM,WAAW,SAAS,OAAA;AAAA,QAClD,SAASE;AAAA,QAER,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}

package/dist/inputs/select/select.js

@@ -5,7 +5,7 @@ import "../../utils/scroll_away_listener.js";
 import w, { useRef as c, useState as L } from "react";
 import { useForkRef as H } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import J from "classnames";
+import { clsx as J } from "clsx";
 import { SuggestionList as Q } from "../suggestions/suggestion_list.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
@@ -23,30 +23,30 @@ const pe = w.forwardRef(function({
   onKeyUp: f,
   value: m,
   placeholder: _ = "-- Select --",
-  noOptionMatchedMessage: C,
-  trimCustomInput: E = !1,
-  className: T,
+  noOptionMatchedMessage: x,
+  trimCustomInput: C = !1,
+  className: E,
   onMouseDown: p,
   onMouseUp: d,
   onChange: g,
-  ...x
+  ...T
 }, D) {
   const K = w.Children.toArray(
     t
-  ), l = c(""), M = c(!1), h = c(!1), [N, S] = L(null), i = c(null), [y, b] = L(!1), j = H(D, i), R = Z(K, m || ""), k = R == null ? _ || "" : R.props.label;
+  ), l = c(""), M = c(!1), h = c(!1), [j, S] = L(null), i = c(null), [y, b] = L(!1), q = H(D, i), R = Z(K, m || ""), k = R == null ? _ || "" : R.props.label;
   function A() {
     b(!0);
   }
   function o() {
     b(!1);
   }
-  function q() {
+  function B() {
     const e = i.current;
     e != null && requestAnimationFrame(() => {
       e.focus();
     }), o();
   }
-  function B(e, s, r) {
+  function N(e, s, r) {
     const F = i.current;
     F != null && requestAnimationFrame(() => {
       r && g && g(e), F.focus();
@@ -73,10 +73,10 @@ const pe = w.forwardRef(function({
     /* @__PURE__ */ u(
       W,
       {
-        ref: j,
-        className: J(T, "select", O.select),
+        ref: q,
+        className: J(E, "select", O.select),
         width: "100%",
-        ...x,
+        ...T,
         hAlign: "start",
         value: k,
         onKeyDown: U,
@@ -89,13 +89,13 @@ const pe = w.forwardRef(function({
     y && /* @__PURE__ */ u(
       Q,
       {
-        anchorElement: N,
-        onClose: q,
+        anchorElement: j,
+        onClose: B,
         value: "",
         scrollToValue: m || "",
-        trimCustomInput: E,
-        onOptionSelect: B,
-        noSuggestionMessage: C,
+        trimCustomInput: C,
+        onOptionSelect: N,
+        noSuggestionMessage: x,
         children: t
       }
     )

package/dist/inputs/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={classNames(className, 'select', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={styles.selectedLabel}>{selectedLabel}</span>\n      </Button>\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={''}\n          scrollToValue={value || ''}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","classNames","styles","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'select', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={styles.selectedLabel}>{selectedLabel}</span>\n      </Button>\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={''}\n          scrollToValue={value || ''}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":";;;;;;;;;;;;;;;;AAQA,SAASA,EAAoBC,GAA4CC,GAAe;AACtF,SAAOD,EAAQ,KAAK,CAAAE,MAAUA,EAAO,MAAM,UAAUD,CAAK;AAC5D;AAYO,MAAME,KAASC,EAAM,WAAW,SACrC;AAAA,EACE,UAAAC,IAAW,CAAA;AAAA,EACX,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAN;AAAA,EACA,aAAAO,IAAc;AAAA,EACd,wBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAeb,EAAM,SAAS;AAAA,IAClCC;AAAA,EAAA,GAEIa,IAAoBC,EAAO,EAAE,GAC7BC,IAAsBD,EAAO,EAAK,GAClCE,IAAeF,EAAO,EAAK,GAC3B,CAACG,GAAeC,CAAgB,IAAIC,EAAmC,IAAI,GAC3EC,IAAoBN,EAAiC,IAAI,GACzD,CAACO,GAAmBC,CAAoB,IAAIH,EAAS,EAAK,GAC1DI,IAAYC,EAAWb,GAAKS,CAAiB,GAC7CK,IAAiB/B,EAAoBkB,GAAchB,KAAS,EAAE,GAC9D8B,IACJD,KAAkB,OAAOtB,KAAe,KAAKsB,EAAe,MAAM;AAEpE,WAASE,IAAkB;AACzB,IAAAL,EAAqB,EAAI;AAAA,EAC3B;AAEA,WAASM,IAAmB;AAC1B,IAAAN,EAAqB,EAAK;AAAA,EAC5B;AAEA,WAASO,IAAc;AACrB,UAAMC,IAASV,EAAkB;AAEjC,IAAIU,KAAU,QACZ,sBAAsB,MAAM;AAC1B,MAAAA,EAAO,MAAA;AAAA,IACT,CAAC,GAGHF,EAAA;AAAA,EACF;AAEA,WAASG,EAAgBnC,GAAeoC,GAAuBC,GAAuB;AACpF,UAAMH,IAASV,EAAkB;AAEjC,IAAIU,KAAU,QACZ,sBAAsB,MAAM;AAC1B,MAAIG,KACFxB,KAAYA,EAASb,CAAK,GAE5BkC,EAAO,MAAA;AAAA,IACT,CAAC,GAGHF,EAAA;AAAA,EACF;AAEA,WAASM,EAAcC,GAA+C;AACpE,UAAMC,IAAMD,EAAM;AAClB,IAAAtB,EAAkB,UAAUuB,GAC5BnC,KAAaA,EAAUkC,CAAK;AAAA,EAC9B;AAEA,WAASE,EAAYF,GAA+C;AAClE,IAAAjB,EAAiBiB,EAAM,aAAa;AACpC,UAAMG,IAAazB,EAAkB,UAAUsB,EAAM;AAErD,IAAAtB,EAAkB,UAAU;AAC5B,UAAMuB,IAAMD,EAAM;AAElB,IAAIG,MAAcF,MAAQ,WAAWA,MAAQ,SACvCf,IACFO,EAAA,IAEAD,EAAA,IAIJzB,KAAWA,EAAQiC,CAAK;AAAA,EAC1B;AAEA,WAASI,EAAeJ,GAA4C;AAClE,IAAAjB,EAAiBiB,EAAM,aAAa,GACpCpB,EAAoB,UAAU,SAAS,kBAAkBoB,EAAM,eAC/D5B,KAAeA,EAAY4B,CAAK;AAAA,EAClC;AAEA,WAASK,EAAcL,GAA4C;AACjE,IAAInB,EAAa,YACfA,EAAa,UAAU,IACvBY,EAAA,IAGFD,EAAA,GACAnB,KAAaA,EAAU2B,CAAK;AAAA,EAC9B;AAEA,SACE,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKrB;AAAA,QACL,WAAWsB,EAAKvC,GAAW,UAAUwC,EAAO,MAAM;AAAA,QAClD,OAAM;AAAA,QACL,GAAGpC;AAAA,QACJ,QAAO;AAAA,QACP,OAAOgB;AAAA,QACP,WAAWQ;AAAA,QACX,SAASG;AAAA,QACT,aAAaE;AAAA,QACb,WAAWC;AAAA,QAEX,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWG,EAAO,eAAgB,UAAApB,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAEvDL,KACC,gBAAAsB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAA9B;AAAA,QACA,SAASY;AAAA,QACT,OAAO;AAAA,QACP,eAAejC,KAAS;AAAA,QACxB,iBAAAS;AAAA,QACA,gBAAgB0B;AAAA,QAChB,qBAAqB3B;AAAA,QAEpB,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}

package/dist/inputs/slider/slider.js

@@ -1,15 +1,15 @@
 import { jsx as p } from "react/jsx-runtime";
-import m from "classnames";
+import { clsx as m } from "clsx";
 import g, { useRef as v, useLayoutEffect as y } from "react";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as R } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, x = g.forwardRef(function({ style: i, className: l, width: u, min: r = 0, max: t = 100, onChange: o, ...n }, c) {
-  const a = v(null), d = R(c, a);
+import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, N = g.forwardRef(function({ style: l, className: a, width: u, min: r = 0, max: t = 100, onChange: o, ...n }, c) {
+  const i = v(null), d = R(c, i);
   return y(() => {
-    const e = a.current;
+    const e = i.current;
     if (e == null) return;
     const s = () => {
       const f = (parseFloat(e.value) - r) / (t - r) * 100;
@@ -22,7 +22,7 @@ import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, x = g.
     "input",
     {
       type: "range",
-      className: m(l, b.slider, "slider"),
+      className: m(a, b.slider, "slider"),
       "data-is-disabled": n.disabled || !1,
       ref: d,
       onChange: (e) => {
@@ -32,11 +32,11 @@ import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, x = g.
       min: String(r),
       max: String(t),
       "data-width": "100%",
-      style: { width: u, ...i }
+      style: { width: u, ...l }
     }
   );
 });
 export {
-  x as Slider
+  N as Slider
 };
 //# sourceMappingURL=slider.js.map

package/dist/inputs/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={classnames(className, styles.slider, 'slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","classnames","styles"],"mappings":";;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAWhB,GAAWiB,EAAO,QAAQ,QAAQ;AAAA,MACxD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}
+{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={clsx(className, styles.slider, 'slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","clsx","styles"],"mappings":";;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAKhB,GAAWiB,EAAO,QAAQ,QAAQ;AAAA,MAClD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}

package/dist/inputs/suggestions/suggestion_item.js

@@ -1,7 +1,7 @@
 import { jsx as u } from "react/jsx-runtime";
-import a from "classnames";
+import { clsx as a } from "clsx";
 import { useRef as c, useEffect as i } from "react";
-import '../../suggestion_item.css';const m = "_suggestion-item_6b60309", b = { "suggestion-item": m };
+import '../../suggestion_item.css';const b = "_suggestion-item_6b60309", f = { "suggestion-item": b };
 function p({
   isFocused: e,
   isSelected: n,
@@ -20,7 +20,7 @@ function p({
     {
       tabIndex: -1,
       ref: o,
-      className: a(b["suggestion-item"], "suggestion-item"),
+      className: a(f["suggestion-item"], "suggestion-item"),
       "data-is-selected": n,
       "data-is-focused": e,
       "data-disabled": r,

package/dist/inputs/suggestions/suggestion_item.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_item.js","sources":["../../../src/inputs/suggestions/suggestion_item.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { useEffect, useRef } from 'react';\nimport styles from './suggestion_item.module.css';\n\nexport interface SuggestionItemProps {\n  isFocused: boolean;\n  isSelected: boolean;\n  option: React.ReactElement;\n  onClick?: (value: string, label: string, isSuggestion: boolean) => void;\n}\n\nexport function SuggestionItem({\n  isFocused,\n  isSelected,\n  option,\n  onClick,\n}: SuggestionItemProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const isDisabled = option.props.disabled;\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isSelected && button != null) {\n      button.scrollIntoView({ block: 'start' });\n    }\n  }, [isSelected]);\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isFocused && button != null) {\n      button.scrollIntoView({ block: 'center' });\n    }\n  }, [isFocused]);\n\n  return (\n    <button\n      tabIndex={-1}\n      ref={buttonRef}\n      className={classNames(styles['suggestion-item'], 'suggestion-item')}\n      data-is-selected={isSelected}\n      data-is-focused={isFocused}\n      data-disabled={isDisabled}\n      disabled={isDisabled}\n      onClick={() => {\n        if (!isDisabled && onClick) {\n          onClick(option.props.value, option.props.label, true);\n        }\n      }}\n    >\n      {option}\n    </button>\n  );\n}\n"],"names":["SuggestionItem","isFocused","isSelected","option","onClick","buttonRef","useRef","isDisabled","useEffect","button","jsx","classNames","styles"],"mappings":";;;;AAWO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,GAAwB;AACtB,QAAMC,IAAYC,EAAiC,IAAI,GACjDC,IAAaJ,EAAO,MAAM;AAEhC,SAAAK,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIH,KAAcO,KAAU,QAC1BA,EAAO,eAAe,EAAE,OAAO,QAAA,CAAS;AAAA,EAE5C,GAAG,CAACP,CAAU,CAAC,GAEfM,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIJ,KAAaQ,KAAU,QACzBA,EAAO,eAAe,EAAE,OAAO,SAAA,CAAU;AAAA,EAE7C,GAAG,CAACR,CAAS,CAAC,GAGZ,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKL;AAAA,MACL,WAAWM,EAAWC,EAAO,iBAAiB,GAAG,iBAAiB;AAAA,MAClE,oBAAkBV;AAAA,MAClB,mBAAiBD;AAAA,MACjB,iBAAeM;AAAA,MACf,UAAUA;AAAA,MACV,SAAS,MAAM;AACb,QAAI,CAACA,KAAcH,KACjBA,EAAQD,EAAO,MAAM,OAAOA,EAAO,MAAM,OAAO,EAAI;AAAA,MAExD;AAAA,MAEC,UAAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"suggestion_item.js","sources":["../../../src/inputs/suggestions/suggestion_item.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport styles from './suggestion_item.module.css';\n\nexport interface SuggestionItemProps {\n  isFocused: boolean;\n  isSelected: boolean;\n  option: React.ReactElement;\n  onClick?: (value: string, label: string, isSuggestion: boolean) => void;\n}\n\nexport function SuggestionItem({\n  isFocused,\n  isSelected,\n  option,\n  onClick,\n}: SuggestionItemProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const isDisabled = option.props.disabled;\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isSelected && button != null) {\n      button.scrollIntoView({ block: 'start' });\n    }\n  }, [isSelected]);\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isFocused && button != null) {\n      button.scrollIntoView({ block: 'center' });\n    }\n  }, [isFocused]);\n\n  return (\n    <button\n      tabIndex={-1}\n      ref={buttonRef}\n      className={clsx(styles['suggestion-item'], 'suggestion-item')}\n      data-is-selected={isSelected}\n      data-is-focused={isFocused}\n      data-disabled={isDisabled}\n      disabled={isDisabled}\n      onClick={() => {\n        if (!isDisabled && onClick) {\n          onClick(option.props.value, option.props.label, true);\n        }\n      }}\n    >\n      {option}\n    </button>\n  );\n}\n"],"names":["SuggestionItem","isFocused","isSelected","option","onClick","buttonRef","useRef","isDisabled","useEffect","button","jsx","clsx","styles"],"mappings":";;;;AAWO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,GAAwB;AACtB,QAAMC,IAAYC,EAAiC,IAAI,GACjDC,IAAaJ,EAAO,MAAM;AAEhC,SAAAK,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIH,KAAcO,KAAU,QAC1BA,EAAO,eAAe,EAAE,OAAO,QAAA,CAAS;AAAA,EAE5C,GAAG,CAACP,CAAU,CAAC,GAEfM,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIJ,KAAaQ,KAAU,QACzBA,EAAO,eAAe,EAAE,OAAO,SAAA,CAAU;AAAA,EAE7C,GAAG,CAACR,CAAS,CAAC,GAGZ,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKL;AAAA,MACL,WAAWM,EAAKC,EAAO,iBAAiB,GAAG,iBAAiB;AAAA,MAC5D,oBAAkBV;AAAA,MAClB,mBAAiBD;AAAA,MACjB,iBAAeM;AAAA,MACf,UAAUA;AAAA,MACV,SAAS,MAAM;AACb,QAAI,CAACA,KAAcH,KACjBA,EAAQD,EAAO,MAAM,OAAOA,EAAO,MAAM,OAAO,EAAI;AAAA,MAExD;AAAA,MAEC,UAAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,13 +1,13 @@
-import { jsx as o, jsxs as N, Fragment as ce } from "react/jsx-runtime";
+import { jsx as o, jsxs as E, Fragment as ce } from "react/jsx-runtime";
 import { BodyText as ae } from "../../typography/body_text/body_text.js";
-import E from "classnames";
+import { clsx as K } from "clsx";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import "../../headline.module-BiwHBtGf.js";
 import "../../subheadline.module-C-v7zMkQ.js";
 import "../../title.module-B16de2jd.js";
-import { VStack as K } from "../../stacks/v_stack.js";
+import { VStack as N } from "../../stacks/v_stack.js";
 import { ZStack as ue } from "../../stacks/z_stack.js";
 import { Children as pe, isValidElement as de, useState as c, useRef as O, useLayoutEffect as S } from "react";
 import { FocusRedirect as fe } from "../../utils/focus_redirect.js";
@@ -190,15 +190,15 @@ function je({
       verticalAnchor: "top",
       verticalOrigin: "top",
       verticalOffset: -4,
-      children: /* @__PURE__ */ N(
-        K,
+      children: /* @__PURE__ */ E(
+        N,
         {
           minHeight: `calc(${Q}, 8px)`,
           maxHeight: "300px",
           minWidth: G,
           width: "auto",
           hAlign: "start",
-          className: E(R["suggestion-list"], "suggestion-list"),
+          className: K(R["suggestion-list"], "suggestion-list"),
           children: [
             /* @__PURE__ */ o(
               "input",
@@ -208,12 +208,12 @@ function je({
                 onKeyUp: ee,
                 onKeyDown: te,
                 onChange: ie,
-                className: E(R.input, "suggestion-list-search-input"),
+                className: K(R.input, "suggestion-list-search-input"),
                 ...$
               },
               -1
             ),
-            /* @__PURE__ */ N(K, { children: [
+            /* @__PURE__ */ E(N, { children: [
               n.map((e, i) => /* @__PURE__ */ o(
                 ge,
                 {

package/dist/inputs/suggestions/suggestion_list.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport classNames from 'classnames';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  value?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  onOptionSelect?: (\n    value: string,\n    label: string | undefined,\n    isSuggestion: boolean\n  ) => void;\n  noSuggestionMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n  haveValueAsOption?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n}\n\nexport function SuggestionList({\n  value = '',\n  scrollToValue,\n  anchorElement,\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = Children.toArray(children).filter(\n    (child): child is React.ReactElement<OptionProps> =>\n      isValidElement(child) && child.type === Option\n  );\n\n  const [selectedIndex, setSelectedIndex] = useState(() => {\n    if (scrollToValue != null) {\n      const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n      if (index !== -1) {\n        return index;\n      }\n    }\n    return -1;\n  });\n\n  const keyPressedDownRef = useRef('');\n  const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n    () => getMatchedOptions(value, MAX_RESULTS)\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    const input = event.currentTarget;\n\n    const isSameKey = (keyPressedDownRef.current = key);\n    keyPressedDownRef.current = '';\n\n    // Enter and Escape remove the popover, so we want to handle this on keyup.\n    // This prevents from another element from getting the key events.\n    if (isSameKey) {\n      switch (key) {\n        case 'Enter': {\n          if (matchedOptions[focusedIndex] == null) {\n            const value = trimCustomInput ? input.value.trim() : input.value;\n\n            if (value === '') {\n              return;\n            }\n\n            const lowercaseValue = value.toLocaleLowerCase();\n            const option = suggestions.find(\n              option =>\n                option.props.value.toLocaleLowerCase() === lowercaseValue ||\n                (option.props.label != null &&\n                  option.props.label.toLocaleLowerCase() === lowercaseValue)\n            );\n\n            const isSuggestion = option != null;\n            const label = option?.props.label || value;\n            const optionValue = option?.props.value || value;\n\n            requestAnimationFrame(() => {\n              onOptionSelect && onOptionSelect(optionValue, label, isSuggestion);\n            });\n\n            break;\n          }\n          const selectedOption = matchedOptions[focusedIndex];\n          const optionProps = selectedOption.props;\n\n          // Don't select disabled options\n          if (optionProps.disabled) {\n            break;\n          }\n\n          requestAnimationFrame(() => {\n            onOptionSelect && onOptionSelect(optionProps.value, optionProps.label, true);\n          });\n          break;\n        }\n        case 'Escape': {\n          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n          break;\n        }\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n\n    // We handle these key events on keydown to be responsive navigation.\n    switch (key) {\n      case 'ArrowDown': {\n        let newIndex = focusedIndex + 1;\n\n        // Skip disabled options\n        while (\n          newIndex < matchedOptions.length &&\n          matchedOptions[newIndex]?.props.disabled\n        ) {\n          newIndex++;\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'Tab': {\n        let step = 1;\n        if (event.shiftKey) {\n          step = -1;\n        }\n        let newIndex = focusedIndex + step;\n        // Skip disabled options\n        if (step > 0) {\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n        } else {\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        } else if (newIndex <= -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'ArrowUp': {\n        let newIndex = focusedIndex - 1;\n\n        // Skip disabled options\n        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n          newIndex--;\n        }\n\n        if (newIndex === -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n    }\n    onKeyDown && onKeyDown(event);\n  }\n\n  function getMatchedOptions(value: string, maxResults: number) {\n    const results = suggestions.filter(option => {\n      const props = option.props;\n      const label = String(props.label).toLocaleLowerCase();\n      const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n      const optionValue = String(props.value).toLocaleLowerCase();\n      const searchValue = value.toLocaleLowerCase();\n\n      return (\n        label.includes(searchValue) ||\n        keywords.some(k => k.includes(searchValue)) ||\n        optionValue.includes(searchValue)\n      );\n    });\n\n    if (\n      haveValueAsOption &&\n      value.trim().length > 0 &&\n      !results.some(r => r.props.value === value)\n    ) {\n      results.unshift(\n        <Option key=\"value\" value={value} label={value} keywords={[value]}>\n          {value}\n        </Option>\n      );\n    }\n\n    setTotalMatchedLength(results.length);\n    return results.slice(0, maxResults);\n  }\n\n  function focusInput() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      input.focus();\n    }\n  }\n\n  function handleUseClose() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n    }\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n\n    setMaxResults(MAX_RESULTS);\n    setInternalValue(event.target.value);\n\n    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n\n    onChange && onChange(event.target.value);\n  }\n\n  function handleShowMore() {\n    const newMaxResults = maxResults + BATCH_SIZE;\n    setMaxResults(newMaxResults);\n    const newMatches = getMatchedOptions(internalValue, newMaxResults);\n    setMatchedOptions(newMatches);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef.current;\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorElement != null) {\n      const rect = anchorElement.getBoundingClientRect();\n      setSuggestionsWidth(`${rect.width}px`);\n      setSuggestionsHeight(`${rect.height}px`);\n\n      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n        internalInputRef.current.value = anchorElement.value;\n        internalInputRef.current.selectionStart = anchorElement.selectionStart;\n        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n      }\n    }\n  }, [anchorElement]);\n\n  useLayoutEffect(() => {\n    if (scrollToValue != null) {\n      const index = matchedOptions.findIndex(\n        option => option.props.value === scrollToValue\n      );\n      setSelectedIndex(index);\n    }\n  }, [matchedOptions, scrollToValue]);\n\n  useLayoutEffect(() => {\n    setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n  }, [internalValue, selectedIndex]);\n\n  return (\n    <Popper\n      open\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor=\"top\"\n      verticalOrigin=\"top\"\n      verticalOffset={-4}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width=\"auto\"\n        hAlign=\"start\"\n        className={classNames(styles['suggestion-list'], 'suggestion-list')}\n      >\n        <input\n          ref={internalInputRef}\n          key={-1}\n          value={internalValue}\n          onKeyUp={handleKeyUp}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          className={classNames(styles.input, 'suggestion-list-search-input')}\n          {...props}\n        />\n        <VStack>\n          {matchedOptions.map((option, index) => (\n            <SuggestionItem\n              key={index}\n              option={option}\n              isSelected={index === selectedIndex && internalValue !== ''}\n              isFocused={index === focusedIndex}\n              onClick={onOptionSelect}\n            />\n          ))}\n          {totalMatchedLength > matchedOptions.length && (\n            <>\n              <Button marginBlock=\"8px\" hierarchy=\"tertiary\" onClick={handleShowMore}>\n                Show More\n              </Button>\n            </>\n          )}\n        </VStack>\n        {matchedOptions.length === 0 && (\n          <ZStack padding=\"8px\" className={styles['no-results']}>\n            <BodyText>{noSuggestionMessage}</BodyText>\n          </ZStack>\n        )}\n        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n      </VStack>\n    </Popper>\n  );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","scrollToValue","anchorElement","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","props","suggestions","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","getMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","results","keywords","k","searchValue","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","classNames","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;wGAcMA,IAAc,IACdC,KAAa;AAwBZ,SAASC,GAAe;AAAA,EAC7B,OAAAC,IAAQ;AAAA,EACR,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC,IAAoB;AAAA,EACpB,GAAGC;AACL,GAAwB;AAEtB,QAAMC,IAAcC,GAAS,QAAQX,CAAQ,EAAE;AAAA,IAC7C,CAACY,MACCC,GAAeD,CAAK,KAAKA,EAAM,SAASE;AAAA,EAAA,GAGtC,CAACC,GAAeC,CAAgB,IAAIC,EAAS,MAAM;AACvD,QAAInB,KAAiB,MAAM;AACzB,YAAMoB,IAAQR,EAAY,UAAU,OAAUS,EAAO,MAAM,UAAUrB,CAAa;AAClF,UAAIoB,MAAU;AACZ,eAAOA;AAAA,IAEX;AACA,WAAO;AAAA,EACT,CAAC,GAEKE,IAAoBC,EAAO,EAAE,GAC7B,CAACC,GAAYC,CAAa,IAAIN,EAASvB,CAAW,GAClD,CAAC8B,GAAcC,CAAe,IAAIR,EAASF,CAAa,GACxD,CAACW,GAAeC,CAAgB,IAAIV,EAASpB,CAAK,GAClD+B,IAAmBP,EAAgC,IAAI,GACvD,CAACQ,GAAoBC,CAAqB,IAAIb,EAASP,EAAY,MAAM,GACzE,CAACqB,GAAgBC,CAAiB,IAAIf;AAAA,IAC1C,MAAMgB,EAAkBpC,GAAOH,CAAW;AAAA,EAAA,GAEtC,CAACwC,GAAkBC,CAAmB,IAAIlB,EAAA,GAC1C,CAACmB,GAAmBC,CAAoB,IAAIpB,EAAA;AAElD,WAASqB,GAAYC,GAA8C;AACjE,UAAMC,IAAMD,EAAM,KACZE,IAAQF,EAAM,eAEdG,IAAatB,EAAkB,UAAUoB;AAK/C,QAJApB,EAAkB,UAAU,IAIxBsB;AACF,cAAQF,GAAA;AAAA,QACN,KAAK,SAAS;AACZ,cAAIT,EAAeP,CAAY,KAAK,MAAM;AACxC,kBAAM3B,IAAQU,IAAkBkC,EAAM,MAAM,KAAA,IAASA,EAAM;AAE3D,gBAAI5C,MAAU;AACZ;AAGF,kBAAM8C,IAAiB9C,EAAM,kBAAA,GACvBsB,IAAST,EAAY;AAAA,cACzB,CAAAS,MACEA,EAAO,MAAM,MAAM,wBAAwBwB,KAC1CxB,EAAO,MAAM,SAAS,QACrBA,EAAO,MAAM,MAAM,wBAAwBwB;AAAA,YAAA,GAG3CC,IAAezB,KAAU,MACzB0B,KAAQ1B,GAAQ,MAAM,SAAStB,GAC/BiD,KAAc3B,GAAQ,MAAM,SAAStB;AAE3C,kCAAsB,MAAM;AAC1B,cAAAI,KAAkBA,EAAe6C,IAAaD,IAAOD,CAAY;AAAA,YACnE,CAAC;AAED;AAAA,UACF;AAEA,gBAAMG,IADiBhB,EAAeP,CAAY,EACf;AAGnC,cAAIuB,EAAY;AACd;AAGF,gCAAsB,MAAM;AAC1B,YAAA9C,KAAkBA,EAAe8C,EAAY,OAAOA,EAAY,OAAO,EAAI;AAAA,UAC7E,CAAC;AACD;AAAA,QACF;AAAA,QACA,KAAK,UAAU;AACb,UAAA5C,KAAWA,EAAQsC,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AACxE;AAAA,QACF;AAAA,MAAA;AAIJ,IAAApC,KAAWA,EAAQkC,CAAK;AAAA,EAC1B;AAEA,WAASS,GAAcT,GAA8C;AACnE,UAAMC,IAAMD,EAAM;AAIlB,YAHAnB,EAAkB,UAAUoB,GAGpBA,GAAA;AAAA,MACN,KAAK,aAAa;AAChB,YAAIS,IAAWzB,IAAe;AAG9B,eACEyB,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,UAAAA;AAGF,YAAIA,MAAalB,EAAe,QAAQ;AAGtC,eADAkB,IAAW,GAETA,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAalB,EAAe,WAC9BkB,IAAW;AAAA,QAEf;AAEA,QAAAxB,EAAgBwB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,YAAIW,IAAO;AACX,QAAIX,EAAM,aACRW,IAAO;AAET,YAAID,IAAWzB,IAAe0B;AAE9B,YAAIA,IAAO;AACT,iBACED,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAAA;AAGF,iBAAOA,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAIJ,YAAIA,MAAalB,EAAe,QAAQ;AAGtC,eADAkB,IAAW,GAETA,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAalB,EAAe,WAC9BkB,IAAW;AAAA,QAEf,WAAWA,KAAY,IAAI;AAGzB,eADAA,IAAWlB,EAAe,SAAS,GAC5BkB,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAxB,EAAgBwB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,YAAIU,IAAWzB,IAAe;AAG9B,eAAOyB,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,UAAAA;AAGF,YAAIA,MAAa,IAAI;AAGnB,eADAA,IAAWlB,EAAe,SAAS,GAC5BkB,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAxB,EAAgBwB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IAAA;AAEF,IAAAjC,KAAaA,EAAUiC,CAAK;AAAA,EAC9B;AAEA,WAASN,EAAkBpC,GAAeyB,GAAoB;AAC5D,UAAM6B,IAAUzC,EAAY,OAAO,CAAAS,MAAU;AAC3C,YAAMV,IAAQU,EAAO,OACf0B,IAAQ,OAAOpC,EAAM,KAAK,EAAE,kBAAA,GAC5B2C,IAAW3C,EAAM,UAAU,IAAI,OAAK4C,EAAE,kBAAA,CAAmB,KAAK,CAAA,GAC9DP,IAAc,OAAOrC,EAAM,KAAK,EAAE,kBAAA,GAClC6C,IAAczD,EAAM,kBAAA;AAE1B,aACEgD,EAAM,SAASS,CAAW,KAC1BF,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAASC,CAAW,CAAC,KAC1CR,EAAY,SAASQ,CAAW;AAAA,IAEpC,CAAC;AAED,WACE9C,KACAX,EAAM,KAAA,EAAO,SAAS,KACtB,CAACsD,EAAQ,KAAK,CAAAI,MAAKA,EAAE,MAAM,UAAU1D,CAAK,KAE1CsD,EAAQ;AAAA,MACN,gBAAAK,EAAC1C,GAAA,EAAmB,OAAOjB,GAAO,OAAOA,GAAO,UAAU,CAACA,CAAK,GAC7D,UAAAA,EAAAA,GADS,OAEZ;AAAA,IAAA,GAIJiC,EAAsBqB,EAAQ,MAAM,GAC7BA,EAAQ,MAAM,GAAG7B,CAAU;AAAA,EACpC;AAEA,WAASmC,KAAa;AACpB,UAAMhB,IAAQb,EAAiB;AAC/B,IACEa,GAAM,MAAA;AAAA,EAEV;AAEA,WAASiB,KAAiB;AACxB,UAAMjB,IAAQb,EAAiB;AAC/B,IAAIa,KAAS,QACXtC,KAAWA,EAAQsC,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AAAA,EAE5E;AAEA,WAASkB,GAAapB,GAA4C;AAChE,UAAME,IAAQF,EAAM;AAEpB,IAAAhB,EAAc7B,CAAW,GACzBiC,EAAiBY,EAAM,OAAO,KAAK;AAEnC,UAAMqB,IAAa3B,EAAkBQ,EAAM,OAAO/C,CAAW;AAC7D,IAAAsC,EAAkB4B,CAAU,GAE5BxD,KAAYA,EAASmC,EAAM,OAAO,KAAK;AAAA,EACzC;AAEA,WAASsB,KAAiB;AACxB,UAAMC,IAAgBxC,IAAa3B;AACnC,IAAA4B,EAAcuC,CAAa;AAC3B,UAAMF,IAAa3B,EAAkBP,GAAeoC,CAAa;AACjE,IAAA9B,EAAkB4B,CAAU;AAAA,EAC9B;AAEA,SAAAG,EAAgB,MAAM;AACpB,UAAMtB,IAAQb,EAAiB;AAE/B,IAAIa,KAAS,QAAQA,EAAM,MAAM,SAAS,IACxCA,EAAM,OAAA,IAENA,GAAM,MAAA;AAAA,EAEV,GAAG,CAAA,CAAE,GAELsB,EAAgB,MAAM;AACpB,QAAIhE,KAAiB,MAAM;AACzB,YAAMiE,IAAOjE,EAAc,sBAAA;AAC3B,MAAAoC,EAAoB,GAAG6B,EAAK,KAAK,IAAI,GACrC3B,EAAqB,GAAG2B,EAAK,MAAM,IAAI,GAEnCpC,EAAiB,WAAW,QAAQ7B,aAAyB,qBAC/D6B,EAAiB,QAAQ,QAAQ7B,EAAc,OAC/C6B,EAAiB,QAAQ,iBAAiB7B,EAAc,gBACxD6B,EAAiB,QAAQ,eAAe7B,EAAc;AAAA,IAE1D;AAAA,EACF,GAAG,CAACA,CAAa,CAAC,GAElBgE,EAAgB,MAAM;AACpB,QAAIjE,KAAiB,MAAM;AACzB,YAAMoB,IAAQa,EAAe;AAAA,QAC3B,CAAAZ,MAAUA,EAAO,MAAM,UAAUrB;AAAA,MAAA;AAEnC,MAAAkB,EAAiBE,CAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAACa,GAAgBjC,CAAa,CAAC,GAElCiE,EAAgB,MAAM;AACpB,IAAAtC,EAAgBC,MAAkB,KAAKX,IAAgB,EAAE;AAAA,EAC3D,GAAG,CAACW,GAAeX,CAAa,CAAC,GAG/B,gBAAAyC;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MACJ,eAAAlE;AAAA,MACA,SAAS2D;AAAA,MACT,gBAAe;AAAA,MACf,gBAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,UAAA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ/B,CAAiB;AAAA,UACpC,WAAU;AAAA,UACV,UAAUF;AAAA,UACV,OAAM;AAAA,UACN,QAAO;AAAA,UACP,WAAWkC,EAAWC,EAAO,iBAAiB,GAAG,iBAAiB;AAAA,UAElE,UAAA;AAAA,YAAA,gBAAAb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK5B;AAAA,gBAEL,OAAOF;AAAA,gBACP,SAASY;AAAA,gBACT,WAAWU;AAAA,gBACX,UAAUW;AAAA,gBACV,WAAWS,EAAWC,EAAO,OAAO,8BAA8B;AAAA,gBACjE,GAAG5D;AAAA,cAAA;AAAA,cANC;AAAA,YAAA;AAAA,8BAQN0D,GAAA,EACE,UAAA;AAAA,cAAApC,EAAe,IAAI,CAACZ,GAAQD,MAC3B,gBAAAsC;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBAEC,QAAAnD;AAAA,kBACA,YAAYD,MAAUH,KAAiBW,MAAkB;AAAA,kBACzD,WAAWR,MAAUM;AAAA,kBACrB,SAASvB;AAAA,gBAAA;AAAA,gBAJJiB;AAAA,cAAA,CAMR;AAAA,cACAW,IAAqBE,EAAe,UACnC,gBAAAyB,EAAAe,IAAA,EACE,UAAA,gBAAAf,EAACgB,IAAA,EAAO,aAAY,OAAM,WAAU,YAAW,SAASX,IAAgB,uBAExE,EAAA,CACF;AAAA,YAAA,GAEJ;AAAA,YACC9B,EAAe,WAAW,KACzB,gBAAAyB,EAACiB,MAAO,SAAQ,OAAM,WAAWJ,EAAO,YAAY,GAClD,UAAA,gBAAAb,EAACkB,IAAA,EAAU,aAAoB,GACjC;AAAA,8BAEDC,IAAA,EAA8C,YAAYlB,GAAA,GAAvC1B,EAAe,SAAS,CAA2B;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzE;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  value?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  onOptionSelect?: (\n    value: string,\n    label: string | undefined,\n    isSuggestion: boolean\n  ) => void;\n  noSuggestionMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n  haveValueAsOption?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n}\n\nexport function SuggestionList({\n  value = '',\n  scrollToValue,\n  anchorElement,\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = Children.toArray(children).filter(\n    (child): child is React.ReactElement<OptionProps> =>\n      isValidElement(child) && child.type === Option\n  );\n\n  const [selectedIndex, setSelectedIndex] = useState(() => {\n    if (scrollToValue != null) {\n      const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n      if (index !== -1) {\n        return index;\n      }\n    }\n    return -1;\n  });\n\n  const keyPressedDownRef = useRef('');\n  const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n    () => getMatchedOptions(value, MAX_RESULTS)\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    const input = event.currentTarget;\n\n    const isSameKey = (keyPressedDownRef.current = key);\n    keyPressedDownRef.current = '';\n\n    // Enter and Escape remove the popover, so we want to handle this on keyup.\n    // This prevents from another element from getting the key events.\n    if (isSameKey) {\n      switch (key) {\n        case 'Enter': {\n          if (matchedOptions[focusedIndex] == null) {\n            const value = trimCustomInput ? input.value.trim() : input.value;\n\n            if (value === '') {\n              return;\n            }\n\n            const lowercaseValue = value.toLocaleLowerCase();\n            const option = suggestions.find(\n              option =>\n                option.props.value.toLocaleLowerCase() === lowercaseValue ||\n                (option.props.label != null &&\n                  option.props.label.toLocaleLowerCase() === lowercaseValue)\n            );\n\n            const isSuggestion = option != null;\n            const label = option?.props.label || value;\n            const optionValue = option?.props.value || value;\n\n            requestAnimationFrame(() => {\n              onOptionSelect && onOptionSelect(optionValue, label, isSuggestion);\n            });\n\n            break;\n          }\n          const selectedOption = matchedOptions[focusedIndex];\n          const optionProps = selectedOption.props;\n\n          // Don't select disabled options\n          if (optionProps.disabled) {\n            break;\n          }\n\n          requestAnimationFrame(() => {\n            onOptionSelect && onOptionSelect(optionProps.value, optionProps.label, true);\n          });\n          break;\n        }\n        case 'Escape': {\n          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n          break;\n        }\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n\n    // We handle these key events on keydown to be responsive navigation.\n    switch (key) {\n      case 'ArrowDown': {\n        let newIndex = focusedIndex + 1;\n\n        // Skip disabled options\n        while (\n          newIndex < matchedOptions.length &&\n          matchedOptions[newIndex]?.props.disabled\n        ) {\n          newIndex++;\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'Tab': {\n        let step = 1;\n        if (event.shiftKey) {\n          step = -1;\n        }\n        let newIndex = focusedIndex + step;\n        // Skip disabled options\n        if (step > 0) {\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n        } else {\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        } else if (newIndex <= -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'ArrowUp': {\n        let newIndex = focusedIndex - 1;\n\n        // Skip disabled options\n        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n          newIndex--;\n        }\n\n        if (newIndex === -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n    }\n    onKeyDown && onKeyDown(event);\n  }\n\n  function getMatchedOptions(value: string, maxResults: number) {\n    const results = suggestions.filter(option => {\n      const props = option.props;\n      const label = String(props.label).toLocaleLowerCase();\n      const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n      const optionValue = String(props.value).toLocaleLowerCase();\n      const searchValue = value.toLocaleLowerCase();\n\n      return (\n        label.includes(searchValue) ||\n        keywords.some(k => k.includes(searchValue)) ||\n        optionValue.includes(searchValue)\n      );\n    });\n\n    if (\n      haveValueAsOption &&\n      value.trim().length > 0 &&\n      !results.some(r => r.props.value === value)\n    ) {\n      results.unshift(\n        <Option key=\"value\" value={value} label={value} keywords={[value]}>\n          {value}\n        </Option>\n      );\n    }\n\n    setTotalMatchedLength(results.length);\n    return results.slice(0, maxResults);\n  }\n\n  function focusInput() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      input.focus();\n    }\n  }\n\n  function handleUseClose() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n    }\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n\n    setMaxResults(MAX_RESULTS);\n    setInternalValue(event.target.value);\n\n    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n\n    onChange && onChange(event.target.value);\n  }\n\n  function handleShowMore() {\n    const newMaxResults = maxResults + BATCH_SIZE;\n    setMaxResults(newMaxResults);\n    const newMatches = getMatchedOptions(internalValue, newMaxResults);\n    setMatchedOptions(newMatches);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef.current;\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorElement != null) {\n      const rect = anchorElement.getBoundingClientRect();\n      setSuggestionsWidth(`${rect.width}px`);\n      setSuggestionsHeight(`${rect.height}px`);\n\n      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n        internalInputRef.current.value = anchorElement.value;\n        internalInputRef.current.selectionStart = anchorElement.selectionStart;\n        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n      }\n    }\n  }, [anchorElement]);\n\n  useLayoutEffect(() => {\n    if (scrollToValue != null) {\n      const index = matchedOptions.findIndex(\n        option => option.props.value === scrollToValue\n      );\n      setSelectedIndex(index);\n    }\n  }, [matchedOptions, scrollToValue]);\n\n  useLayoutEffect(() => {\n    setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n  }, [internalValue, selectedIndex]);\n\n  return (\n    <Popper\n      open\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor=\"top\"\n      verticalOrigin=\"top\"\n      verticalOffset={-4}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width=\"auto\"\n        hAlign=\"start\"\n        className={clsx(styles['suggestion-list'], 'suggestion-list')}\n      >\n        <input\n          ref={internalInputRef}\n          key={-1}\n          value={internalValue}\n          onKeyUp={handleKeyUp}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          className={clsx(styles.input, 'suggestion-list-search-input')}\n          {...props}\n        />\n        <VStack>\n          {matchedOptions.map((option, index) => (\n            <SuggestionItem\n              key={index}\n              option={option}\n              isSelected={index === selectedIndex && internalValue !== ''}\n              isFocused={index === focusedIndex}\n              onClick={onOptionSelect}\n            />\n          ))}\n          {totalMatchedLength > matchedOptions.length && (\n            <>\n              <Button marginBlock=\"8px\" hierarchy=\"tertiary\" onClick={handleShowMore}>\n                Show More\n              </Button>\n            </>\n          )}\n        </VStack>\n        {matchedOptions.length === 0 && (\n          <ZStack padding=\"8px\" className={styles['no-results']}>\n            <BodyText>{noSuggestionMessage}</BodyText>\n          </ZStack>\n        )}\n        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n      </VStack>\n    </Popper>\n  );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","scrollToValue","anchorElement","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","props","suggestions","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","getMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","results","keywords","k","searchValue","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":"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"}

package/dist/inputs/switch/switch.js

@@ -1,33 +1,33 @@
-import { jsxs as R, jsx as l } from "react/jsx-runtime";
-import k, { useState as x, useRef as B } from "react";
+import { jsxs as F, jsx as l } from "react/jsx-runtime";
+import R, { useState as k, useRef as B } from "react";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as y } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import o from "classnames";
-import { CheckIcon as N } from "@tcn/icons/check_icon.js";
-import { CrossIcon as S } from "@tcn/icons/cross_icon.js";
-import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf6748b", C = "_switch-icon_d615789", e = { "switch-wrapper": g, switch: j, "switch-icon": C }, K = k.forwardRef(function({
+import { clsx as o } from "clsx";
+import { CheckIcon as S } from "@tcn/icons/check_icon.js";
+import { CrossIcon as N } from "@tcn/icons/cross_icon.js";
+import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf6748b", C = "_switch-icon_d615789", e = { "switch-wrapper": g, switch: j, "switch-icon": C }, K = R.forwardRef(function({
   checked: c,
   backgroundColor: i,
   style: f,
   className: u,
   inputRef: d,
   omitIcons: w = !1,
-  onChange: a,
+  onChange: n,
   ...t
 }, h) {
-  const [m, n] = x(!1), p = B(null), b = y(d, p), r = {};
+  const [m, a] = k(!1), p = B(null), b = y(d, p), r = {};
   function I(s) {
-    t.onBlur && t.onBlur(s), n(!1);
+    t.onBlur && t.onBlur(s), a(!1);
   }
   function _(s) {
-    t.onFocus && t.onFocus(s), n(!0);
+    t.onFocus && t.onFocus(s), a(!0);
   }
   i != null && (r["--accent-color"] = i);
-  const F = c ? N : S;
-  return /* @__PURE__ */ R(
+  const x = c ? S : N;
+  return /* @__PURE__ */ F(
     "div",
     {
       ref: h,
@@ -38,7 +38,7 @@ import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf67
       className: o(e["switch-wrapper"], u, "switch-wrapper"),
       children: [
         !w && /* @__PURE__ */ l(
-          F,
+          x,
           {
             className: o(e["switch-icon"], "switch-icon"),
             "data-is-checked": c
@@ -56,7 +56,7 @@ import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf67
             checked: c,
             "data-is-disabled": t.disabled || !1,
             onChange: (s) => {
-              a && a(!!s.currentTarget.checked, s);
+              n && n(!!s.currentTarget.checked, s);
             },
             ...t
           }