@tcn/ui 0.6.0 → 0.8.0

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

@@ -1 +1 @@
-{"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, 'tcn-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,YAAY;AAAA,MACtD,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, 'tcn-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,YAAY;AAAA,MACtD,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_list.js

@@ -14,6 +14,8 @@ import "../../utils/click_away_listener.js";
 import { FocusRedirect as fe } from "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
+import "../../utils/dnd/context.js";
+import "../../draggable.module-BgelQsuJ.js";
 import { SuggestionItem as ge } from "./suggestion_item.js";
 import { Option as U } from "../options/option.js";
 import "../../actions/button/base_button/base_button.js";
@@ -24,7 +26,7 @@ import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import { Popper as me } from "../../overlay/popper/legacy/popper.js";
 import '../../suggestion_list.css';const we = "_suggestion-list_711fb17", be = "_input_a0df060", A = { "suggestion-list": we, input: be }, I = 50, xe = 50;
-function je({
+function Ze({
   value: D = "",
   scrollToValue: g,
   anchorElement: l,
@@ -252,6 +254,6 @@ function je({
   );
 }
 export {
-  je as SuggestionList
+  Ze as SuggestionList
 };
 //# sourceMappingURL=suggestion_list.js.map

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 { 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/legacy/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    obfuscate: 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 &&\n                onOptionSelect(\n                  optionValue,\n                  label,\n                  isSuggestion,\n                  option?.props.obfuscate ?? false\n                );\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 &&\n              onOptionSelect(\n                optionProps.value,\n                optionProps.label,\n                true,\n                optionProps.obfuscate ?? false\n              );\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      const obfuscate = props.obfuscate ?? false;\n\n      // Obfuscated options can only be searched by label or keywords, not by value\n      if (obfuscate) {\n        return label.includes(searchValue) || keywords.some(k => k.includes(searchValue));\n      }\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'], 'tcn-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, 'tcn-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\n            padding=\"8px\"\n            className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}\n          >\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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"}
+{"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/legacy/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    obfuscate: 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 &&\n                onOptionSelect(\n                  optionValue,\n                  label,\n                  isSuggestion,\n                  option?.props.obfuscate ?? false\n                );\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 &&\n              onOptionSelect(\n                optionProps.value,\n                optionProps.label,\n                true,\n                optionProps.obfuscate ?? false\n              );\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      const obfuscate = props.obfuscate ?? false;\n\n      // Obfuscated options can only be searched by label or keywords, not by value\n      if (obfuscate) {\n        return label.includes(searchValue) || keywords.some(k => k.includes(searchValue));\n      }\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'], 'tcn-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, 'tcn-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\n            padding=\"8px\"\n            className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}\n          >\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;wGAcMA,IAAc,IACdC,KAAa;AAyBZ,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,EAAoB,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,IAAQ1B,GAAQ,MAAM,SAAStB,GAC/BiD,KAAc3B,GAAQ,MAAM,SAAStB;AAE3C,kCAAsB,MAAM;AAC1B,cAAAI,KACEA;AAAA,gBACE6C;AAAA,gBACAD;AAAA,gBACAD;AAAA,gBACAzB,GAAQ,MAAM,aAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAED;AAAA,UACF;AAEA,gBAAM4B,IADiBhB,EAAeP,CAAY,EACf;AAGnC,cAAIuB,EAAY;AACd;AAGF,gCAAsB,MAAM;AAC1B,YAAA9C,KACEA;AAAA,cACE8C,EAAY;AAAA,cACZA,EAAY;AAAA,cACZ;AAAA,cACAA,EAAY,aAAa;AAAA,YAAA;AAAA,UAE/B,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;AAI1B,aAHkBY,EAAM,aAAa,KAI5BoC,EAAM,SAASS,CAAW,KAAKF,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAASC,CAAW,CAAC,IAIhFT,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,GAAqB,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,EAAKC,EAAO,iBAAiB,GAAG,qBAAqB;AAAA,UAEhE,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,EAAKC,EAAO,OAAO,kCAAkC;AAAA,gBAC/D,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;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAWL,EAAKC,EAAO,YAAY,GAAG,gCAAgC;AAAA,gBAEtE,UAAA,gBAAAb,EAACkB,MAAU,UAAAxE,EAAA,CAAoB;AAAA,cAAA;AAAA,YAAA;AAAA,8BAGlCyE,IAAA,EAA8C,YAAYlB,GAAA,GAAvC1B,EAAe,SAAS,CAA2B;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzE;AAAA,EAAA;AAGN;"}

package/dist/inputs/switch/switch.js

@@ -5,42 +5,44 @@ import "../../utils/focus_redirect.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 "../../utils/dnd/context.js";
 import { clsx as o } from "clsx";
+import "../../draggable.module-BgelQsuJ.js";
 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({
+import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf6748b", C = "_switch-icon_d615789", i = { "switch-wrapper": g, switch: j, "switch-icon": C }, M = R.forwardRef(function({
   checked: s,
-  backgroundColor: i,
+  backgroundColor: e,
   style: f,
   className: u,
   inputRef: d,
   omitIcons: w = !1,
   onChange: n,
   ...t
-}, h) {
-  const [m, a] = k(!1), p = B(null), b = y(d, p), r = {};
+}, m) {
+  const [h, r] = k(!1), p = B(null), b = y(d, p), a = {};
   function _(c) {
-    t.onBlur && t.onBlur(c), a(!1);
+    t.onBlur && t.onBlur(c), r(!1);
   }
   function I(c) {
-    t.onFocus && t.onFocus(c), a(!0);
+    t.onFocus && t.onFocus(c), r(!0);
   }
-  i != null && (r["--accent-color"] = i);
+  e != null && (a["--accent-color"] = e);
   const x = s ? S : N;
   return /* @__PURE__ */ F(
     "div",
     {
-      ref: h,
-      "data-focused": m,
+      ref: m,
+      "data-focused": h,
       "data-is-checked": !!s,
       "data-is-disabled": t.disabled || !1,
       "data-width": "fixed",
-      className: o(e["switch-wrapper"], u, "tcn-switch-wrapper"),
+      className: o(i["switch-wrapper"], u, "tcn-switch-wrapper"),
       children: [
         !w && /* @__PURE__ */ l(
           x,
           {
-            className: o(e["switch-icon"], "tcn-switch-icon"),
+            className: o(i["switch-icon"], "tcn-switch-icon"),
             "data-is-checked": s
           }
         ),
@@ -49,10 +51,10 @@ import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf67
           {
             ref: b,
             type: "checkbox",
-            className: o(e.switch, "tcn-switch"),
+            className: o(i.switch, "tcn-switch"),
             onBlur: _,
             onFocus: I,
-            style: { ...f, ...r },
+            style: { ...f, ...a },
             checked: s,
             "data-is-disabled": t.disabled || !1,
             onChange: (c) => {
@@ -66,6 +68,6 @@ import '../../switch.css';const g = "_switch-wrapper_db1838e", j = "_switch_bf67
   );
 });
 export {
-  K as Switch
+  M as Switch
 };
 //# sourceMappingURL=switch.js.map

package/dist/inputs/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../src/inputs/switch/switch.tsx"],"sourcesContent":["import React, { useRef, useState, HTMLAttributes, ChangeEvent } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './switch.module.css';\nimport { CheckIcon } from '@tcn/icons/check_icon.js';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\n\nexport interface SwitchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  checked?: boolean;\n  backgroundColor?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  onChange?: (value: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  omitIcons?: boolean;\n}\n\nexport const Switch = React.forwardRef(function Switch(\n  {\n    checked,\n    backgroundColor: onColor,\n    style,\n    className,\n    inputRef,\n    omitIcons = false,\n    onChange,\n    ...props\n  }: SwitchProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [isFocused, setIsFocused] = useState(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const forkedInputRef = useForkRef(inputRef, internalInputRef);\n  const customStyles: any = {};\n\n  function blur(event: React.FocusEvent<HTMLInputElement>) {\n    props.onBlur && props.onBlur(event);\n    setIsFocused(false);\n  }\n\n  function focus(event: React.FocusEvent<HTMLInputElement>) {\n    props.onFocus && props.onFocus(event);\n    setIsFocused(true);\n  }\n\n  if (onColor != null) {\n    customStyles['--accent-color'] = onColor;\n  }\n\n  const Icon = checked ? CheckIcon : CrossIcon;\n\n  return (\n    <div\n      ref={ref}\n      data-focused={isFocused}\n      data-is-checked={Boolean(checked)}\n      data-is-disabled={props.disabled || false}\n      data-width=\"fixed\"\n      className={clsx(styles['switch-wrapper'], className, 'tcn-switch-wrapper')}\n    >\n      {!omitIcons && (\n        <Icon\n          className={clsx(styles['switch-icon'], 'tcn-switch-icon')}\n          data-is-checked={checked}\n        />\n      )}\n      <input\n        ref={forkedInputRef}\n        type=\"checkbox\"\n        className={clsx(styles.switch, 'tcn-switch')}\n        onBlur={blur}\n        onFocus={focus}\n        style={{ ...style, ...customStyles }}\n        checked={checked}\n        data-is-disabled={props.disabled || false}\n        onChange={e => {\n          onChange && onChange(Boolean(e.currentTarget.checked), e);\n        }}\n        {...props}\n      />\n    </div>\n  );\n});\n"],"names":["Switch","React","checked","onColor","style","className","inputRef","omitIcons","onChange","props","ref","isFocused","setIsFocused","useState","internalInputRef","useRef","forkedInputRef","useForkRef","customStyles","blur","event","focus","Icon","CheckIcon","CrossIcon","jsxs","clsx","styles","jsx","e"],"mappings":";;;;;;;;;;kJAgBaA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,SAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAmBC,EAAgC,IAAI,GACvDC,IAAiBC,EAAWX,GAAUQ,CAAgB,GACtDI,IAAoB,CAAA;AAE1B,WAASC,EAAKC,GAA2C;AACvD,IAAAX,EAAM,UAAUA,EAAM,OAAOW,CAAK,GAClCR,EAAa,EAAK;AAAA,EACpB;AAEA,WAASS,EAAMD,GAA2C;AACxD,IAAAX,EAAM,WAAWA,EAAM,QAAQW,CAAK,GACpCR,EAAa,EAAI;AAAA,EACnB;AAEA,EAAIT,KAAW,SACbe,EAAa,gBAAgB,IAAIf;AAGnC,QAAMmB,IAAOpB,IAAUqB,IAAYC;AAEnC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,gBAAcC;AAAA,MACd,mBAAiB,EAAQT;AAAA,MACzB,oBAAkBO,EAAM,YAAY;AAAA,MACpC,cAAW;AAAA,MACX,WAAWiB,EAAKC,EAAO,gBAAgB,GAAGtB,GAAW,oBAAoB;AAAA,MAExE,UAAA;AAAA,QAAA,CAACE,KACA,gBAAAqB;AAAA,UAACN;AAAA,UAAA;AAAA,YACC,WAAWI,EAAKC,EAAO,aAAa,GAAG,iBAAiB;AAAA,YACxD,mBAAiBzB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB,gBAAA0B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKZ;AAAA,YACL,MAAK;AAAA,YACL,WAAWU,EAAKC,EAAO,QAAQ,YAAY;AAAA,YAC3C,QAAQR;AAAA,YACR,SAASE;AAAA,YACT,OAAO,EAAE,GAAGjB,GAAO,GAAGc,EAAA;AAAA,YACtB,SAAAhB;AAAA,YACA,oBAAkBO,EAAM,YAAY;AAAA,YACpC,UAAU,CAAAoB,MAAK;AACb,cAAArB,KAAYA,EAAS,EAAQqB,EAAE,cAAc,SAAUA,CAAC;AAAA,YAC1D;AAAA,YACC,GAAGpB;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"switch.js","sources":["../../../src/inputs/switch/switch.tsx"],"sourcesContent":["import React, { useRef, useState, HTMLAttributes, ChangeEvent } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './switch.module.css';\nimport { CheckIcon } from '@tcn/icons/check_icon.js';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\n\nexport interface SwitchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  checked?: boolean;\n  backgroundColor?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  onChange?: (value: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  omitIcons?: boolean;\n}\n\nexport const Switch = React.forwardRef(function Switch(\n  {\n    checked,\n    backgroundColor: onColor,\n    style,\n    className,\n    inputRef,\n    omitIcons = false,\n    onChange,\n    ...props\n  }: SwitchProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [isFocused, setIsFocused] = useState(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const forkedInputRef = useForkRef(inputRef, internalInputRef);\n  const customStyles: any = {};\n\n  function blur(event: React.FocusEvent<HTMLInputElement>) {\n    props.onBlur && props.onBlur(event);\n    setIsFocused(false);\n  }\n\n  function focus(event: React.FocusEvent<HTMLInputElement>) {\n    props.onFocus && props.onFocus(event);\n    setIsFocused(true);\n  }\n\n  if (onColor != null) {\n    customStyles['--accent-color'] = onColor;\n  }\n\n  const Icon = checked ? CheckIcon : CrossIcon;\n\n  return (\n    <div\n      ref={ref}\n      data-focused={isFocused}\n      data-is-checked={Boolean(checked)}\n      data-is-disabled={props.disabled || false}\n      data-width=\"fixed\"\n      className={clsx(styles['switch-wrapper'], className, 'tcn-switch-wrapper')}\n    >\n      {!omitIcons && (\n        <Icon\n          className={clsx(styles['switch-icon'], 'tcn-switch-icon')}\n          data-is-checked={checked}\n        />\n      )}\n      <input\n        ref={forkedInputRef}\n        type=\"checkbox\"\n        className={clsx(styles.switch, 'tcn-switch')}\n        onBlur={blur}\n        onFocus={focus}\n        style={{ ...style, ...customStyles }}\n        checked={checked}\n        data-is-disabled={props.disabled || false}\n        onChange={e => {\n          onChange && onChange(Boolean(e.currentTarget.checked), e);\n        }}\n        {...props}\n      />\n    </div>\n  );\n});\n"],"names":["Switch","React","checked","onColor","style","className","inputRef","omitIcons","onChange","props","ref","isFocused","setIsFocused","useState","internalInputRef","useRef","forkedInputRef","useForkRef","customStyles","blur","event","focus","Icon","CheckIcon","CrossIcon","jsxs","clsx","styles","jsx","e"],"mappings":";;;;;;;;;;;;kJAgBaA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,SAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAmBC,EAAgC,IAAI,GACvDC,IAAiBC,EAAWX,GAAUQ,CAAgB,GACtDI,IAAoB,CAAA;AAE1B,WAASC,EAAKC,GAA2C;AACvD,IAAAX,EAAM,UAAUA,EAAM,OAAOW,CAAK,GAClCR,EAAa,EAAK;AAAA,EACpB;AAEA,WAASS,EAAMD,GAA2C;AACxD,IAAAX,EAAM,WAAWA,EAAM,QAAQW,CAAK,GACpCR,EAAa,EAAI;AAAA,EACnB;AAEA,EAAIT,KAAW,SACbe,EAAa,gBAAgB,IAAIf;AAGnC,QAAMmB,IAAOpB,IAAUqB,IAAYC;AAEnC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,gBAAcC;AAAA,MACd,mBAAiB,EAAQT;AAAA,MACzB,oBAAkBO,EAAM,YAAY;AAAA,MACpC,cAAW;AAAA,MACX,WAAWiB,EAAKC,EAAO,gBAAgB,GAAGtB,GAAW,oBAAoB;AAAA,MAExE,UAAA;AAAA,QAAA,CAACE,KACA,gBAAAqB;AAAA,UAACN;AAAA,UAAA;AAAA,YACC,WAAWI,EAAKC,EAAO,aAAa,GAAG,iBAAiB;AAAA,YACxD,mBAAiBzB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB,gBAAA0B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKZ;AAAA,YACL,MAAK;AAAA,YACL,WAAWU,EAAKC,EAAO,QAAQ,YAAY;AAAA,YAC3C,QAAQR;AAAA,YACR,SAASE;AAAA,YACT,OAAO,EAAE,GAAGjB,GAAO,GAAGc,EAAA;AAAA,YACtB,SAAAhB;AAAA,YACA,oBAAkBO,EAAM,YAAY;AAAA,YACpC,UAAU,CAAAoB,MAAK;AACb,cAAArB,KAAYA,EAAS,EAAQqB,EAAE,cAAc,SAAUA,CAAC;AAAA,YAC1D;AAAA,YACC,GAAGpB;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/unit_input/unit_input.js

@@ -1,27 +1,29 @@
-import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import y, { useRef as k } from "react";
-import { clsx as o } from "clsx";
+import { clsx as l } from "clsx";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as E } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
+import "../../utils/dnd/context.js";
+import "../../draggable.module-BgelQsuJ.js";
 import { HStack as V } from "../../stacks/h_stack.js";
 import { Input as h } from "../input/input.js";
 import { Select as v } from "../select/select.js";
 import { ZStack as w } from "../../stacks/z_stack.js";
 import '../../unit_input.css';const H = "_unit-input_4bd8bc8", j = "_unit-input-flex-box_8db2f9b", F = "_unit-input-number_c95f85a", U = "_unit-input-select_1bbbad9", s = { "unit-input": H, "unit-input-flex-box": j, "unit-input-number": F, "unit-input-select": U };
-function A(c) {
-  return c.replace(/[^.\d-]/g, "").replace(/(?!^)-/g, "").replace(/(\..*?)\.+/g, "$1");
+function A(p) {
+  return p.replace(/[^.\d-]/g, "").replace(/(?!^)-/g, "").replace(/(\..*?)\.+/g, "$1");
 }
-const O = y.forwardRef(function({
+const W = y.forwardRef(function({
   value: B,
   unit: r,
   children: d,
   onChange: t,
   inputRef: b,
   unitRef: x,
-  disabled: p,
+  disabled: c,
   ...R
 }, N) {
   const a = k(null), S = E(b, a);
@@ -42,17 +44,17 @@ const O = y.forwardRef(function({
     V,
     {
       ref: N,
-      className: o(s["unit-input"], "tcn-unit-input"),
+      className: l(s["unit-input"], "tcn-unit-input"),
       height: "auto",
       ...R,
       children: [
-        /* @__PURE__ */ l(w, { width: "flex", children: /* @__PURE__ */ l(
+        /* @__PURE__ */ o(w, { width: "flex", children: /* @__PURE__ */ o(
           h,
           {
-            className: o(s["unit-input-number"], "tcn-unit-input-number"),
+            className: l(s["unit-input-number"], "tcn-unit-input-number"),
             ref: S,
             onChange: _,
-            disabled: p,
+            disabled: c,
             style: {
               borderEndEndRadius: 0,
               borderStartEndRadius: 0,
@@ -60,15 +62,15 @@ const O = y.forwardRef(function({
             }
           }
         ) }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           v,
           {
-            className: o(s["unit-input-select"], "tcn-unit-input-select"),
+            className: l(s["unit-input-select"], "tcn-unit-input-select"),
             ref: x,
             width: "auto",
             value: r,
             onChange: I,
-            disabled: p,
+            disabled: c,
             style: { borderStartStartRadius: 0, borderEndStartRadius: 0 },
             children: d
           }
@@ -78,6 +80,6 @@ const O = y.forwardRef(function({
   );
 });
 export {
-  O as UnitInput
+  W as UnitInput
 };
 //# sourceMappingURL=unit_input.js.map

package/dist/inputs/unit_input/unit_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"unit_input.js","sources":["../../../src/inputs/unit_input/unit_input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport { Input } from '../input/input.js';\nimport { Select } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport styles from './unit_input.module.css';\n\nimport { ZStack } from '../../stacks/z_stack.js';\n\nfunction getDisplayValue(value: string) {\n  return value\n    .replace(/[^.\\d-]/g, '') // Remove invalid characters\n    .replace(/(?!^)-/g, '') // Ensure `-` only at the start\n    .replace(/(\\..*?)\\.+/g, '$1'); // Allow only one dot\n}\n\nexport interface UnitInputProps extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: number | null;\n  unit?: string;\n  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n  onChange?: (value: number | null, unit: string) => void;\n  inputRef?: React.Ref<HTMLInputElement>;\n  unitRef?: React.Ref<HTMLButtonElement>;\n  disabled?: boolean;\n}\n\nexport const UnitInput = React.forwardRef(function UnitInput(\n  {\n    value,\n    unit,\n    children,\n    onChange,\n    inputRef,\n    unitRef,\n    disabled,\n    ...props\n  }: UnitInputProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const internalInputRef = useRef<HTMLInputElement>(null);\n  const forkedInputRef = useForkRef(inputRef, internalInputRef);\n\n  function valueHandler(value: string, event?: React.ChangeEvent<HTMLInputElement>) {\n    if (event == null) {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const cursorPosition = input.selectionStart || 0;\n    const displayValue = getDisplayValue(value);\n    const potentialValue = Number(displayValue);\n\n    input.value = displayValue;\n\n    if (displayValue.length < value.length) {\n      input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);\n    }\n\n    if (displayValue === '') {\n      onChange && onChange(null, unit || '');\n    } else if (!isNaN(potentialValue)) {\n      onChange && onChange(potentialValue, unit || '');\n    }\n  }\n\n  function unitHandler(unit: string) {\n    const input = internalInputRef.current;\n    if (input == null) {\n      return;\n    }\n\n    const potentialValue = Number(input.value);\n    if (isNaN(potentialValue)) {\n      onChange && onChange(null, unit);\n    } else {\n      onChange && onChange(potentialValue, unit);\n    }\n  }\n\n  return (\n    <HStack\n      ref={ref}\n      className={clsx(styles['unit-input'], 'tcn-unit-input')}\n      height=\"auto\"\n      {...props}\n    >\n      <ZStack width=\"flex\">\n        <Input\n          className={clsx(styles['unit-input-number'], 'tcn-unit-input-number')}\n          ref={forkedInputRef}\n          onChange={valueHandler}\n          disabled={disabled}\n          style={{\n            borderEndEndRadius: 0,\n            borderStartEndRadius: 0,\n            textAlign: 'start',\n          }}\n        />\n      </ZStack>\n      <Select\n        className={clsx(styles['unit-input-select'], 'tcn-unit-input-select')}\n        ref={unitRef}\n        width=\"auto\"\n        value={unit}\n        onChange={unitHandler}\n        disabled={disabled}\n        style={{ borderStartStartRadius: 0, borderEndStartRadius: 0 }}\n      >\n        {children}\n      </Select>\n    </HStack>\n  );\n});\n"],"names":["getDisplayValue","value","UnitInput","React","unit","children","onChange","inputRef","unitRef","disabled","props","ref","internalInputRef","useRef","forkedInputRef","useForkRef","valueHandler","event","input","cursorPosition","displayValue","potentialValue","unitHandler","jsxs","HStack","clsx","styles","jsx","ZStack","Input","Select"],"mappings":";;;;;;;;;;;;;AAWA,SAASA,EAAgBC,GAAe;AACtC,SAAOA,EACJ,QAAQ,YAAY,EAAE,EACtB,QAAQ,WAAW,EAAE,EACrB,QAAQ,eAAe,IAAI;AAChC;AAYO,MAAMC,IAAYC,EAAM,WAAW,SACxC;AAAA,EACE,OAAAF;AAAA,EACA,MAAAG;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAmBC,EAAyB,IAAI,GAChDC,IAAiBC,EAAWR,GAAUK,CAAgB;AAE5D,WAASI,EAAaf,GAAegB,GAA6C;AAChF,QAAIA,KAAS;AACX;AAGF,UAAMC,IAAQD,EAAM,eACdE,IAAiBD,EAAM,kBAAkB,GACzCE,IAAepB,EAAgBC,CAAK,GACpCoB,IAAiB,OAAOD,CAAY;AAE1C,IAAAF,EAAM,QAAQE,GAEVA,EAAa,SAASnB,EAAM,UAC9BiB,EAAM,kBAAkBC,IAAiB,GAAGA,IAAiB,CAAC,GAG5DC,MAAiB,KACnBd,KAAYA,EAAS,MAAMF,KAAQ,EAAE,IAC3B,MAAMiB,CAAc,KAC9Bf,KAAYA,EAASe,GAAgBjB,KAAQ,EAAE;AAAA,EAEnD;AAEA,WAASkB,EAAYlB,GAAc;AACjC,UAAMc,IAAQN,EAAiB;AAC/B,QAAIM,KAAS;AACX;AAGF,UAAMG,IAAiB,OAAOH,EAAM,KAAK;AACzC,IAAI,MAAMG,CAAc,IACtBf,KAAYA,EAAS,MAAMF,CAAI,IAE/BE,KAAYA,EAASe,GAAgBjB,CAAI;AAAA,EAE7C;AAEA,SACE,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWc,EAAKC,EAAO,YAAY,GAAG,gBAAgB;AAAA,MACtD,QAAO;AAAA,MACN,GAAGhB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAiB,EAACC,GAAA,EAAO,OAAM,QACZ,UAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWJ,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,YACpE,KAAKZ;AAAA,YACL,UAAUE;AAAA,YACV,UAAAP;AAAA,YACA,OAAO;AAAA,cACL,oBAAoB;AAAA,cACpB,sBAAsB;AAAA,cACtB,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAkB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAWL,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,YACpE,KAAKlB;AAAA,YACL,OAAM;AAAA,YACN,OAAOJ;AAAA,YACP,UAAUkB;AAAA,YACV,UAAAb;AAAA,YACA,OAAO,EAAE,wBAAwB,GAAG,sBAAsB,EAAA;AAAA,YAEzD,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"unit_input.js","sources":["../../../src/inputs/unit_input/unit_input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport { Input } from '../input/input.js';\nimport { Select } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport styles from './unit_input.module.css';\n\nimport { ZStack } from '../../stacks/z_stack.js';\n\nfunction getDisplayValue(value: string) {\n  return value\n    .replace(/[^.\\d-]/g, '') // Remove invalid characters\n    .replace(/(?!^)-/g, '') // Ensure `-` only at the start\n    .replace(/(\\..*?)\\.+/g, '$1'); // Allow only one dot\n}\n\nexport interface UnitInputProps extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: number | null;\n  unit?: string;\n  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n  onChange?: (value: number | null, unit: string) => void;\n  inputRef?: React.Ref<HTMLInputElement>;\n  unitRef?: React.Ref<HTMLButtonElement>;\n  disabled?: boolean;\n}\n\nexport const UnitInput = React.forwardRef(function UnitInput(\n  {\n    value,\n    unit,\n    children,\n    onChange,\n    inputRef,\n    unitRef,\n    disabled,\n    ...props\n  }: UnitInputProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const internalInputRef = useRef<HTMLInputElement>(null);\n  const forkedInputRef = useForkRef(inputRef, internalInputRef);\n\n  function valueHandler(value: string, event?: React.ChangeEvent<HTMLInputElement>) {\n    if (event == null) {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const cursorPosition = input.selectionStart || 0;\n    const displayValue = getDisplayValue(value);\n    const potentialValue = Number(displayValue);\n\n    input.value = displayValue;\n\n    if (displayValue.length < value.length) {\n      input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);\n    }\n\n    if (displayValue === '') {\n      onChange && onChange(null, unit || '');\n    } else if (!isNaN(potentialValue)) {\n      onChange && onChange(potentialValue, unit || '');\n    }\n  }\n\n  function unitHandler(unit: string) {\n    const input = internalInputRef.current;\n    if (input == null) {\n      return;\n    }\n\n    const potentialValue = Number(input.value);\n    if (isNaN(potentialValue)) {\n      onChange && onChange(null, unit);\n    } else {\n      onChange && onChange(potentialValue, unit);\n    }\n  }\n\n  return (\n    <HStack\n      ref={ref}\n      className={clsx(styles['unit-input'], 'tcn-unit-input')}\n      height=\"auto\"\n      {...props}\n    >\n      <ZStack width=\"flex\">\n        <Input\n          className={clsx(styles['unit-input-number'], 'tcn-unit-input-number')}\n          ref={forkedInputRef}\n          onChange={valueHandler}\n          disabled={disabled}\n          style={{\n            borderEndEndRadius: 0,\n            borderStartEndRadius: 0,\n            textAlign: 'start',\n          }}\n        />\n      </ZStack>\n      <Select\n        className={clsx(styles['unit-input-select'], 'tcn-unit-input-select')}\n        ref={unitRef}\n        width=\"auto\"\n        value={unit}\n        onChange={unitHandler}\n        disabled={disabled}\n        style={{ borderStartStartRadius: 0, borderEndStartRadius: 0 }}\n      >\n        {children}\n      </Select>\n    </HStack>\n  );\n});\n"],"names":["getDisplayValue","value","UnitInput","React","unit","children","onChange","inputRef","unitRef","disabled","props","ref","internalInputRef","useRef","forkedInputRef","useForkRef","valueHandler","event","input","cursorPosition","displayValue","potentialValue","unitHandler","jsxs","HStack","clsx","styles","jsx","ZStack","Input","Select"],"mappings":";;;;;;;;;;;;;;;AAWA,SAASA,EAAgBC,GAAe;AACtC,SAAOA,EACJ,QAAQ,YAAY,EAAE,EACtB,QAAQ,WAAW,EAAE,EACrB,QAAQ,eAAe,IAAI;AAChC;AAYO,MAAMC,IAAYC,EAAM,WAAW,SACxC;AAAA,EACE,OAAAF;AAAA,EACA,MAAAG;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAmBC,EAAyB,IAAI,GAChDC,IAAiBC,EAAWR,GAAUK,CAAgB;AAE5D,WAASI,EAAaf,GAAegB,GAA6C;AAChF,QAAIA,KAAS;AACX;AAGF,UAAMC,IAAQD,EAAM,eACdE,IAAiBD,EAAM,kBAAkB,GACzCE,IAAepB,EAAgBC,CAAK,GACpCoB,IAAiB,OAAOD,CAAY;AAE1C,IAAAF,EAAM,QAAQE,GAEVA,EAAa,SAASnB,EAAM,UAC9BiB,EAAM,kBAAkBC,IAAiB,GAAGA,IAAiB,CAAC,GAG5DC,MAAiB,KACnBd,KAAYA,EAAS,MAAMF,KAAQ,EAAE,IAC3B,MAAMiB,CAAc,KAC9Bf,KAAYA,EAASe,GAAgBjB,KAAQ,EAAE;AAAA,EAEnD;AAEA,WAASkB,EAAYlB,GAAc;AACjC,UAAMc,IAAQN,EAAiB;AAC/B,QAAIM,KAAS;AACX;AAGF,UAAMG,IAAiB,OAAOH,EAAM,KAAK;AACzC,IAAI,MAAMG,CAAc,IACtBf,KAAYA,EAAS,MAAMF,CAAI,IAE/BE,KAAYA,EAASe,GAAgBjB,CAAI;AAAA,EAE7C;AAEA,SACE,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWc,EAAKC,EAAO,YAAY,GAAG,gBAAgB;AAAA,MACtD,QAAO;AAAA,MACN,GAAGhB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAiB,EAACC,GAAA,EAAO,OAAM,QACZ,UAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWJ,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,YACpE,KAAKZ;AAAA,YACL,UAAUE;AAAA,YACV,UAAAP;AAAA,YACA,OAAO;AAAA,cACL,oBAAoB;AAAA,cACpB,sBAAsB;AAAA,cACtB,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAkB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAWL,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,YACpE,KAAKlB;AAAA,YACL,OAAM;AAAA,YACN,OAAOJ;AAAA,YACP,UAAUkB;AAAA,YACV,UAAAb;AAAA,YACA,OAAO,EAAE,wBAAwB,GAAG,sBAAsB,EAAA;AAAA,YAEzD,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/navigation/tabs/primitives/tabs_list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs_list.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AAExC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAYzD,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,4IAcnB,CAAC"}
+{"version":3,"file":"tabs_list.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AA+BxC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CA2BzD,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,4IAcnB,CAAC"}

package/dist/navigation/tabs/primitives/tabs_list.js

@@ -1,29 +1,69 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { HStack as n } from "../../../stacks/h_stack.js";
-import e from "clsx";
-import { Toggle as f } from "../../../actions/toggle/toggle.js";
-const T = ({
-  children: t,
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m, useCallback as f } from "react";
+import { HStack as u } from "../../../stacks/h_stack.js";
+import l from "clsx";
+import { Toggle as b } from "../../../actions/toggle/toggle.js";
+const g = (e) => {
+  const r = Array.from(e.currentTarget.querySelectorAll(':scope > [role="tab"]')), o = e.currentTarget.querySelector(":focus"), a = o ? r.indexOf(o) : -1;
+  if (a === -1) return;
+  let t = 0;
+  switch (e.key) {
+    case "ArrowRight":
+      t = (a + 1) % r.length;
+      break;
+    case "ArrowLeft":
+      t = (a - 1 + r.length) % r.length;
+      break;
+    case "Home":
+      t = 0;
+      break;
+    case "End":
+      t = r.length - 1;
+      break;
+    default:
+      return;
+  }
+  e.preventDefault(), e.stopPropagation(), r[t].focus();
+}, x = ({
+  children: e,
   className: r,
-  role: m = "tablist",
-  as: o = "menu",
-  ...a
-}) => /* @__PURE__ */ s(n, { as: o, role: m, className: e("tcn-tabs-list", r), ...a, children: t }), g = c(
-  ({ children: t, className: r, role: m = "tab", selected: o = !1, ...a }, i) => /* @__PURE__ */ s(
-    f,
+  role: o = "tablist",
+  as: a = "menu",
+  onKeyDown: t,
+  ...s
+}) => {
+  const i = f(
+    (c) => {
+      g(c), t && t(c);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ n(
+    u,
     {
-      ref: i,
-      role: m,
-      className: e(r, "tcn-interactive", "tcn-tab-item"),
-      selected: o,
-      ...a,
-      children: t
+      onKeyDown: i,
+      as: a,
+      role: o,
+      className: l("tcn-tabs-list", r),
+      ...s,
+      children: e
+    }
+  );
+}, w = m(
+  ({ children: e, className: r, role: o = "tab", selected: a = !1, ...t }, s) => /* @__PURE__ */ n(
+    b,
+    {
+      ref: s,
+      role: o,
+      className: l(r, "tcn-interactive", "tcn-tab-item"),
+      selected: a,
+      ...t,
+      children: e
     }
   )
 );
 export {
-  g as TabItem,
-  T as TabsList
+  w as TabItem,
+  x as TabsList
 };
 //# sourceMappingURL=tabs_list.js.map

package/dist/navigation/tabs/primitives/tabs_list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, type FC, type PropsWithChildren } from 'react';\nimport { type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\nimport { Toggle } from '../../../actions/toggle/toggle.js';\n\nexport type TabsListProps = HStackProps;\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  ...props\n}) => {\n  return (\n    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <Toggle\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        selected={selected}\n        {...props}\n      >\n        {children}\n      </Toggle>\n    );\n  }\n);\n"],"names":["TabsList","children","className","role","as","props","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","Toggle"],"mappings":";;;;;AAQO,MAAMA,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,GAAGC;AACL,MAEI,gBAAAC,EAACC,GAAA,EAAO,IAAAH,GAAQ,MAAAD,GAAY,WAAWK,EAAK,iBAAiBN,CAAS,GAAI,GAAGG,GAC1E,UAAAJ,EAAA,CACH,GAQSQ,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAT,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAQ,IAAW,IAAO,GAAGN,EAAA,GAASO,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAT;AAAA,MACA,WAAWK,EAAKN,GAAW,mBAAmB,cAAc;AAAA,MAC5D,UAAAS;AAAA,MACC,GAAGN;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, useCallback, type FC, type PropsWithChildren } from 'react';\nimport { type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\nimport { Toggle } from '../../../actions/toggle/toggle.js';\n\nexport type TabsListProps = HStackProps;\n\nconst navigateTabs = (event: React.KeyboardEvent<HTMLDivElement>) => {\n  const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role=\"tab\"]'));\n  const currentTab = event.currentTarget.querySelector(':focus');\n  const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;\n  if (currentIndex === -1) return; // Exit if the focused element is not a tab\n  let newIndex = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n      newIndex = (currentIndex + 1) % tabs.length;\n      break;\n    case 'ArrowLeft':\n      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      break;\n    case 'Home':\n      newIndex = 0;\n      break;\n    case 'End':\n      newIndex = tabs.length - 1;\n      break;\n    default:\n      return; // Exit if the key is not recognized\n  }\n\n  event.preventDefault();\n  event.stopPropagation();\n  tabs[newIndex]['focus']();\n};\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  onKeyDown,\n  ...props\n}) => {\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      navigateTabs(event);\n      onKeyDown && onKeyDown(event);\n    },\n    [onKeyDown]\n  );\n\n  return (\n    <HStack\n      onKeyDown={handleKeyDown}\n      as={as}\n      role={role}\n      className={clsx('tcn-tabs-list', className)}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <Toggle\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        selected={selected}\n        {...props}\n      >\n        {children}\n      </Toggle>\n    );\n  }\n);\n"],"names":["navigateTabs","event","tabs","currentTab","currentIndex","newIndex","TabsList","children","className","role","as","onKeyDown","props","handleKeyDown","useCallback","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","Toggle"],"mappings":";;;;;AAQA,MAAMA,IAAe,CAACC,MAA+C;AACnE,QAAMC,IAAO,MAAM,KAAKD,EAAM,cAAc,iBAAiB,uBAAuB,CAAC,GAC/EE,IAAaF,EAAM,cAAc,cAAc,QAAQ,GACvDG,IAAeD,IAAaD,EAAK,QAAQC,CAAU,IAAI;AAC7D,MAAIC,MAAiB,GAAI;AACzB,MAAIC,IAAW;AAEf,UAAQJ,EAAM,KAAA;AAAA,IACZ,KAAK;AACH,MAAAI,KAAYD,IAAe,KAAKF,EAAK;AACrC;AAAA,IACF,KAAK;AACH,MAAAG,KAAYD,IAAe,IAAIF,EAAK,UAAUA,EAAK;AACnD;AAAA,IACF,KAAK;AACH,MAAAG,IAAW;AACX;AAAA,IACF,KAAK;AACH,MAAAA,IAAWH,EAAK,SAAS;AACzB;AAAA,IACF;AACE;AAAA,EAAA;AAGJ,EAAAD,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNC,EAAKG,CAAQ,EAAE,MAAO;AACxB,GAEaC,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpB,CAACb,MAA+C;AAC9C,MAAAD,EAAaC,CAAK,GAClBU,KAAaA,EAAUV,CAAK;AAAA,IAC9B;AAAA,IACA,CAACU,CAAS;AAAA,EAAA;AAGZ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,IAAAH;AAAA,MACA,MAAAD;AAAA,MACA,WAAWQ,EAAK,iBAAiBT,CAAS;AAAA,MACzC,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,GAMaW,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAZ,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAW,IAAW,IAAO,GAAGR,EAAA,GAASS,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAZ;AAAA,MACA,WAAWQ,EAAKT,GAAW,mBAAmB,cAAc;AAAA,MAC5D,UAAAY;AAAA,MACC,GAAGR;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/navigation/tabs/state/link/tab_link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab_link.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK3E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,CAAC,EAC9C,eAAe;CAAG;AAEtB,eAAO,MAAM,OAAO,4IA8BnB,CAAC"}
+{"version":3,"file":"tab_link.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK3E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,CAAC,EAC9C,eAAe;CAAG;AAEtB,eAAO,MAAM,OAAO,4IAiCnB,CAAC"}

package/dist/navigation/tabs/state/link/tab_link.js

@@ -1,36 +1,42 @@
-import { jsx as W } from "react/jsx-runtime";
-import { forwardRef as b, useCallback as x } from "react";
+import { jsx as k } from "react/jsx-runtime";
+import { forwardRef as x, useCallback as W } from "react";
 import { TabItem as l } from "../../primitives/tabs_list.js";
 import "../../../../utils/click_away_listener.js";
 import "../../../../utils/focus_redirect.js";
 import "../../../../utils/scroll_away_listener.js";
-import { useForkRef as T } from "../../../../utils/hooks/use_fork_ref.js";
+import { useForkRef as I } from "../../../../utils/hooks/use_fork_ref.js";
 import "../../../../utils/hooks/use_resize_observer.js";
-import { useTabs as u } from "../context.js";
+import "../../../../utils/dnd/context.js";
+import "clsx";
+import "../../../../draggable.module-BgelQsuJ.js";
+import { useTabs as T } from "../context.js";
 import { useTabLink as C } from "./use_tab_link.js";
-const z = b(
-  ({ children: r, value: o, onClick: i, minWidth: m, maxWidth: e, ...n }, s) => {
-    const { ref: a, isMatch: c } = C(o), t = u(), p = T(a, s), f = x(
-      (k) => {
-        t.onChange?.(o), i?.(k);
+const D = x(
+  ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: e, id: M, ...a }, p) => {
+    const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, p), d = W(
+      (b) => {
+        i.onChange?.(t), o?.(b);
       },
-      [t, o, i]
-    ), d = t.minItemWidth ?? m, h = t.maxItemWidth ?? e;
-    return /* @__PURE__ */ W(
+      [i, t, o]
+    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? e;
+    return /* @__PURE__ */ k(
       l,
       {
-        ref: p,
-        selected: c,
-        onClick: f,
-        minWidth: d,
+        ref: c,
+        selected: r,
+        onClick: d,
+        minWidth: f,
         maxWidth: h,
-        ...n,
-        children: r
+        id: `tab-${t}`,
+        "aria-controls": `tabpanel-${t}`,
+        tabIndex: r ? 0 : -1,
+        ...a,
+        children: m
       }
     );
   }
 );
 export {
-  z as TabLink
+  D as TabLink
 };
 //# sourceMappingURL=tab_link.js.map

package/dist/navigation/tabs/state/link/tab_link.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAiB;AAC5E,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWR,CAAK,GAChDS,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWT,CAAK,GACtBC,IAAUc,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOT,GAAOC,CAAO;AAAA,IAAA,GAGlBe,IAAeP,EAAM,gBAAgBP,GACrCe,IAAeR,EAAM,gBAAgBN;AAE3C,WACE,gBAAAe;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACT,GAAGb;AAAA,QAEH,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        id={`tab-${value}`}\n        aria-controls={`tabpanel-${value}`}\n        tabIndex={isMatch ? 0 : -1}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","id","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAiB;AAChF,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWT,CAAK,GAChDU,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWV,CAAK,GACtBC,IAAUe,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOV,GAAOC,CAAO;AAAA,IAAA,GAGlBgB,IAAeP,EAAM,gBAAgBR,GACrCgB,IAAeR,EAAM,gBAAgBP;AAE3C,WACE,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACV,IAAI,OAAOlB,CAAK;AAAA,QAChB,iBAAe,YAAYA,CAAK;AAAA,QAChC,UAAUQ,IAAU,IAAI;AAAA,QACvB,GAAGH;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/navigation/tabs/state/link/use_tab_link.js

@@ -1,13 +1,13 @@
-import { useLayoutEffect as o } from "react";
+import { useLayoutEffect as n } from "react";
 import { useTabs as s } from "../context.js";
-import { useTrackActiveItemRectangle as a } from "../../../../utils/css_utils.js";
-function m(c) {
-  const e = s(), r = e.value === c, { ref: i, rectangle: t } = a(r);
-  return o(() => {
-    t && e.setActiveTrigger(t);
-  }, [t, e.setActiveTrigger]), { ref: i, isMatch: r };
+import { useTrackActiveItemRectangle as u } from "../../../../utils/css_utils.js";
+function g(c) {
+  const { setActiveTrigger: t, value: o } = s(), r = o === c, { ref: i, rectangle: e } = u(r);
+  return n(() => {
+    e && t(e);
+  }, [e, t]), { ref: i, isMatch: r };
 }
 export {
-  m as useTabLink
+  g as useTabLink
 };
 //# sourceMappingURL=use_tab_link.js.map

package/dist/navigation/tabs/state/link/use_tab_link.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/use_tab_link.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { useTabs } from '../context.js';\nimport { useTrackActiveItemRectangle } from '../../../../utils/css_utils.js';\n\nexport function useTabLink(value: string) {\n  const state = useTabs();\n  const isMatch = state.value === value;\n  const { ref, rectangle } = useTrackActiveItemRectangle(isMatch);\n\n  useLayoutEffect(() => {\n    if (rectangle) {\n      state.setActiveTrigger(rectangle);\n    }\n  }, [rectangle, state.setActiveTrigger]);\n\n  return { ref, isMatch };\n}\n"],"names":["useTabLink","value","state","useTabs","isMatch","ref","rectangle","useTrackActiveItemRectangle","useLayoutEffect"],"mappings":";;;AAIO,SAASA,EAAWC,GAAe;AACxC,QAAMC,IAAQC,EAAA,GACRC,IAAUF,EAAM,UAAUD,GAC1B,EAAE,KAAAI,GAAK,WAAAC,MAAcC,EAA4BH,CAAO;AAE9D,SAAAI,EAAgB,MAAM;AACpB,IAAIF,KACFJ,EAAM,iBAAiBI,CAAS;AAAA,EAEpC,GAAG,CAACA,GAAWJ,EAAM,gBAAgB,CAAC,GAE/B,EAAE,KAAAG,GAAK,SAAAD,EAAA;AAChB;"}
+{"version":3,"file":"use_tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/use_tab_link.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { useTabs } from '../context.js';\nimport { useTrackActiveItemRectangle } from '../../../../utils/css_utils.js';\n\nexport function useTabLink(value: string) {\n  const { setActiveTrigger, value: currentValue } = useTabs();\n  const isMatch = currentValue === value;\n  const { ref, rectangle } = useTrackActiveItemRectangle(isMatch);\n\n  useLayoutEffect(() => {\n    if (rectangle) {\n      setActiveTrigger(rectangle);\n    }\n  }, [rectangle, setActiveTrigger]);\n\n  return { ref, isMatch };\n}\n"],"names":["useTabLink","value","setActiveTrigger","currentValue","useTabs","isMatch","ref","rectangle","useTrackActiveItemRectangle","useLayoutEffect"],"mappings":";;;AAIO,SAASA,EAAWC,GAAe;AACxC,QAAM,EAAE,kBAAAC,GAAkB,OAAOC,EAAA,IAAiBC,EAAA,GAC5CC,IAAUF,MAAiBF,GAC3B,EAAE,KAAAK,GAAK,WAAAC,MAAcC,EAA4BH,CAAO;AAE9D,SAAAI,EAAgB,MAAM;AACpB,IAAIF,KACFL,EAAiBK,CAAS;AAAA,EAE9B,GAAG,CAACA,GAAWL,CAAgB,CAAC,GAEzB,EAAE,KAAAI,GAAK,SAAAD,EAAA;AAChB;"}

package/dist/navigation/tabs/state/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAI/C,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAa/C,CAAC"}