@tcn/ui 0.12.3 → 0.12.5

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  initialSearchValue?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  open?: boolean;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  width?: string;\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  restoreFocus?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n}\n\nexport function SuggestionList({\n  value = '',\n  initialSearchValue: searchValue,\n  scrollToValue,\n  anchorElement,\n  open = false,\n  width = 'auto',\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  restoreFocus = true,\n  verticalAnchor = 'top',\n  verticalOrigin = 'top',\n  verticalOffset = -4,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = React.useMemo(\n    () =>\n      Children.toArray(children).filter(\n        (child): child is React.ReactElement<OptionProps> =>\n          isValidElement(child) && child.type === Option\n      ),\n    [children]\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 KeyDownRegistered = useRef(false);\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    () => []\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (!KeyDownRegistered.current) {\n      return;\n    }\n    KeyDownRegistered.current = false;\n\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    KeyDownRegistered.current = true;\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  const getMatchedOptions = React.useCallback(\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 (\n            label.includes(searchValue) || keywords.some(k => k.includes(searchValue))\n          );\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    [suggestions, haveValueAsOption]\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 (!open) {\n      return;\n    }\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, [open]);\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  useLayoutEffect(() => {\n    setInternalValue(searchValue ?? '');\n  }, [searchValue]);\n\n  useLayoutEffect(() => {\n    const newMatches = getMatchedOptions(internalValue, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n  }, [getMatchedOptions, internalValue]);\n\n  return (\n    <Popper\n      open={open}\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor}\n      horizontalOrigin={horizontalOrigin}\n      horizontalOffset={horizontalOffset}\n      restoreFocus={restoreFocus}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width={width}\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\n                key=\"show-more\"\n                marginBlock=\"8px\"\n                hierarchy=\"tertiary\"\n                onClick={handleShowMore}\n              >\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","searchValue","scrollToValue","anchorElement","open","width","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","restoreFocus","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","props","suggestions","React","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","KeyDownRegistered","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","getMatchedOptions","results","keywords","k","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  initialSearchValue?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  open?: boolean;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  width?: string;\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  restoreFocus?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n}\n\nexport function SuggestionList({\n  value = '',\n  initialSearchValue: searchValue,\n  scrollToValue,\n  anchorElement,\n  open = false,\n  width = 'auto',\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  restoreFocus = true,\n  verticalAnchor = 'top',\n  verticalOrigin = 'top',\n  verticalOffset = -4,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = React.useMemo(\n    () =>\n      Children.toArray(children).filter(\n        (child): child is React.ReactElement<OptionProps> =>\n          isValidElement(child) && child.type === Option\n      ),\n    [children]\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 KeyDownRegistered = useRef(false);\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    () => []\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (!KeyDownRegistered.current) {\n      return;\n    }\n    KeyDownRegistered.current = false;\n\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    KeyDownRegistered.current = true;\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  const getMatchedOptions = React.useCallback(\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 (\n            label.includes(searchValue) || keywords.some(k => k.includes(searchValue))\n          );\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    [suggestions, haveValueAsOption]\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 (!open) {\n      return;\n    }\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, [open]);\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  useLayoutEffect(() => {\n    setInternalValue(searchValue ?? '');\n  }, [searchValue]);\n\n  useLayoutEffect(() => {\n    const newMatches = getMatchedOptions(internalValue, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n  }, [getMatchedOptions, internalValue]);\n\n  return (\n    <Popper\n      open={open}\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor}\n      horizontalOrigin={horizontalOrigin}\n      horizontalOffset={horizontalOffset}\n      restoreFocus={restoreFocus}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width={width}\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\n                key=\"show-more\"\n                marginBlock=\"8px\"\n                hierarchy=\"tertiary\"\n                onClick={handleShowMore}\n              >\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","searchValue","scrollToValue","anchorElement","open","width","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","restoreFocus","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","props","suggestions","React","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","KeyDownRegistered","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","getMatchedOptions","results","keywords","k","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;AAmCZ,SAASC,GAAe;AAAA,EAC7B,OAAAC,IAAQ;AAAA,EACR,oBAAoBC;AAAA,EACpB,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,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,cAAAC,IAAe;AAAA,EACf,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,KAAiB;AAAA,EACjB,gBAAAC,KAAiB;AAAA,EACjB,kBAAAC,KAAmB;AAAA,EACnB,kBAAAC,KAAmB;AAAA,EACnB,kBAAAC,KAAmB;AAAA,EACnB,GAAGC;AACL,GAAwB;AAEtB,QAAMC,IAAcC,EAAM;AAAA,IACxB,MACEC,GAAS,QAAQnB,CAAQ,EAAE;AAAA,MACzB,CAACoB,MACCC,GAAeD,CAAK,KAAKA,EAAM,SAASE;AAAA,IAAA;AAAA,IAE9C,CAACtB,CAAQ;AAAA,EAAA,GAGL,CAACuB,GAAeC,EAAgB,IAAIC,EAAS,MAAM;AACvD,QAAI7B,KAAiB,MAAM;AACzB,YAAM8B,IAAQT,EAAY,UAAU,OAAUU,EAAO,MAAM,UAAU/B,CAAa;AAClF,UAAI8B,MAAU;AACZ,eAAOA;AAAA,IAEX;AACA,WAAO;AAAA,EACT,CAAC,GAEKE,IAAoBC,EAAO,EAAE,GAC7BC,IAAoBD,EAAO,EAAK,GAChC,CAACE,IAAYC,CAAa,IAAIP,EAASlC,CAAW,GAClD,CAAC0C,GAAcC,CAAe,IAAIT,EAASF,CAAa,GACxD,CAACY,GAAeC,CAAgB,IAAIX,EAAS/B,CAAK,GAClD2C,IAAmBR,EAAgC,IAAI,GACvD,CAACS,IAAoBC,EAAqB,IAAId,EAASR,EAAY,MAAM,GACzE,CAACuB,GAAgBC,CAAiB,IAAIhB;AAAA,IAC1C,MAAM,CAAA;AAAA,EAAC,GAEH,CAACiB,IAAkBC,EAAmB,IAAIlB,EAAA,GAC1C,CAACmB,IAAmBC,EAAoB,IAAIpB,EAAA;AAElD,WAASqB,GAAYC,GAA8C;AACjE,QAAI,CAACjB,EAAkB;AACrB;AAEF,IAAAA,EAAkB,UAAU;AAE5B,UAAMkB,IAAMD,EAAM,KACZE,IAAQF,EAAM,eAEdG,IAAatB,EAAkB,UAAUoB;AAK/C,QAJApB,EAAkB,UAAU,IAIxBsB;AACF,cAAQF,GAAA;AAAA,QACN,KAAK,SAAS;AACZ,cAAIR,EAAeP,CAAY,KAAK,MAAM;AACxC,kBAAMvC,IAAQa,IAAkB0C,EAAM,MAAM,KAAA,IAASA,EAAM;AAE3D,gBAAIvD,MAAU;AACZ;AAGF,kBAAMyD,IAAiBzD,EAAM,kBAAA,GACvBiC,IAASV,EAAY;AAAA,cACzB,CAAAU,MACEA,EAAO,MAAM,MAAM,wBAAwBwB,KAC1CxB,EAAO,MAAM,SAAS,QACrBA,EAAO,MAAM,MAAM,wBAAwBwB;AAAA,YAAA,GAG3CC,IAAezB,KAAU,MACzB0B,IAAQ1B,GAAQ,MAAM,SAASjC,GAC/B4D,IAAc3B,GAAQ,MAAM,SAASjC;AAE3C,kCAAsB,MAAM;AAC1B,cAAAO,KACEA;AAAA,gBACEqD;AAAA,gBACAD;AAAA,gBACAD;AAAA,gBACAzB,GAAQ,MAAM,aAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAED;AAAA,UACF;AAEA,gBAAM4B,IADiBf,EAAeP,CAAY,EACf;AAGnC,cAAIsB,EAAY;AACd;AAGF,gCAAsB,MAAM;AAC1B,YAAAtD,KACEA;AAAA,cACEsD,EAAY;AAAA,cACZA,EAAY;AAAA,cACZ;AAAA,cACAA,EAAY,aAAa;AAAA,YAAA;AAAA,UAE/B,CAAC;AACD;AAAA,QACF;AAAA,QACA,KAAK,UAAU;AACb,UAAApD,KAAWA,EAAQ8C,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AACxE;AAAA,QACF;AAAA,MAAA;AAIJ,IAAA5C,KAAWA,EAAQ0C,CAAK;AAAA,EAC1B;AAEA,WAASS,GAAcT,GAA8C;AACnE,UAAMC,IAAMD,EAAM;AAIlB,YAHAnB,EAAkB,UAAUoB,GAC5BlB,EAAkB,UAAU,IAEpBkB,GAAA;AAAA,MACN,KAAK,aAAa;AAChB,YAAIS,IAAWxB,IAAe;AAG9B,eACEwB,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,UAAAA;AAGF,YAAIA,MAAajB,EAAe,QAAQ;AAGtC,eADAiB,IAAW,GAETA,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAajB,EAAe,WAC9BiB,IAAW;AAAA,QAEf;AAEA,QAAAvB,EAAgBuB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,YAAIW,IAAO;AACX,QAAIX,EAAM,aACRW,IAAO;AAET,YAAID,IAAWxB,IAAeyB;AAE9B,YAAIA,IAAO;AACT,iBACED,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAAA;AAGF,iBAAOA,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAIJ,YAAIA,MAAajB,EAAe,QAAQ;AAGtC,eADAiB,IAAW,GAETA,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAajB,EAAe,WAC9BiB,IAAW;AAAA,QAEf,WAAWA,KAAY,IAAI;AAGzB,eADAA,IAAWjB,EAAe,SAAS,GAC5BiB,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAvB,EAAgBuB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,YAAIU,IAAWxB,IAAe;AAG9B,eAAOwB,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,UAAAA;AAGF,YAAIA,MAAa,IAAI;AAGnB,eADAA,IAAWjB,EAAe,SAAS,GAC5BiB,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAvB,EAAgBuB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IAAA;AAEF,IAAAzC,KAAaA,EAAUyC,CAAK;AAAA,EAC9B;AAEA,QAAMY,IAAoBzC,EAAM;AAAA,IAC9B,SAA2BxB,GAAeqC,GAAoB;AAC5D,YAAM6B,IAAU3C,EAAY,OAAO,CAAAU,MAAU;AAC3C,cAAMX,IAAQW,EAAO,OACf0B,IAAQ,OAAOrC,EAAM,KAAK,EAAE,kBAAA,GAC5B6C,IAAW7C,EAAM,UAAU,IAAI,OAAK8C,EAAE,kBAAA,CAAmB,KAAK,CAAA,GAC9DR,IAAc,OAAOtC,EAAM,KAAK,EAAE,kBAAA,GAClCrB,IAAcD,EAAM,kBAAA;AAI1B,eAHkBsB,EAAM,aAAa,KAKjCqC,EAAM,SAAS1D,CAAW,KAAKkE,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAASnE,CAAW,CAAC,IAK3E0D,EAAM,SAAS1D,CAAW,KAC1BkE,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAASnE,CAAW,CAAC,KAC1C2D,EAAY,SAAS3D,CAAW;AAAA,MAEpC,CAAC;AAED,aACEa,KACAd,EAAM,KAAA,EAAO,SAAS,KACtB,CAACkE,EAAQ,KAAK,CAAAG,MAAKA,EAAE,MAAM,UAAUrE,CAAK,KAE1CkE,EAAQ;AAAA,QACN,gBAAAI,EAAC1C,GAAA,EAAmB,OAAO5B,GAAO,OAAOA,GAAO,UAAU,CAACA,CAAK,GAC7D,UAAAA,EAAAA,GADS,OAEZ;AAAA,MAAA,GAIJ6C,GAAsBqB,EAAQ,MAAM,GAC7BA,EAAQ,MAAM,GAAG7B,CAAU;AAAA,IACpC;AAAA,IACA,CAACd,GAAaT,CAAiB;AAAA,EAAA;AAGjC,WAASyD,KAAa;AACpB,UAAMhB,IAAQZ,EAAiB;AAC/B,IACEY,GAAM,MAAA;AAAA,EAEV;AAEA,WAASiB,KAAiB;AACxB,UAAMjB,IAAQZ,EAAiB;AAC/B,IAAIY,KAAS,QACX9C,KAAWA,EAAQ8C,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AAAA,EAE5E;AAEA,WAASkB,GAAapB,GAA4C;AAChE,UAAME,IAAQF,EAAM;AAEpB,IAAAf,EAAczC,CAAW,GACzB6C,EAAiBW,EAAM,OAAO,KAAK;AAEnC,UAAMqB,IAAaT,EAAkBV,EAAM,OAAO1D,CAAW;AAC7D,IAAAkD,EAAkB2B,CAAU,GAE5BhE,KAAYA,EAAS2C,EAAM,OAAO,KAAK;AAAA,EACzC;AAEA,WAASsB,KAAiB;AACxB,UAAMC,IAAgBvC,KAAavC;AACnC,IAAAwC,EAAcsC,CAAa;AAC3B,UAAMF,IAAaT,EAAkBxB,GAAemC,CAAa;AACjE,IAAA7B,EAAkB2B,CAAU;AAAA,EAC9B;AAEA,SAAAG,EAAgB,MAAM;AACpB,UAAMtB,IAAQZ,EAAiB;AAE/B,IAAKvC,MAIDmD,KAAS,QAAQA,EAAM,MAAM,SAAS,IACxCA,EAAM,OAAA,IAENA,GAAM,MAAA;AAAA,EAEV,GAAG,CAACnD,CAAI,CAAC,GAETyE,EAAgB,MAAM;AACpB,QAAI1E,KAAiB,MAAM;AACzB,YAAM2E,IAAO3E,EAAc,sBAAA;AAC3B,MAAA8C,GAAoB,GAAG6B,EAAK,KAAK,IAAI,GACrC3B,GAAqB,GAAG2B,EAAK,MAAM,IAAI,GAEnCnC,EAAiB,WAAW,QAAQxC,aAAyB,qBAC/DwC,EAAiB,QAAQ,QAAQxC,EAAc,OAC/CwC,EAAiB,QAAQ,iBAAiBxC,EAAc,gBACxDwC,EAAiB,QAAQ,eAAexC,EAAc;AAAA,IAE1D;AAAA,EACF,GAAG,CAACA,CAAa,CAAC,GAElB0E,EAAgB,MAAM;AACpB,QAAI3E,KAAiB,MAAM;AACzB,YAAM8B,IAAQc,EAAe;AAAA,QAC3B,CAAAb,MAAUA,EAAO,MAAM,UAAU/B;AAAA,MAAA;AAEnC,MAAA4B,GAAiBE,CAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAACc,GAAgB5C,CAAa,CAAC,GAElC2E,EAAgB,MAAM;AACpB,IAAArC,EAAgBC,MAAkB,KAAKZ,IAAgB,EAAE;AAAA,EAC3D,GAAG,CAACY,GAAeZ,CAAa,CAAC,GAEjCgD,EAAgB,MAAM;AACpB,IAAAnC,EAAiBzC,KAAe,EAAE;AAAA,EACpC,GAAG,CAACA,CAAW,CAAC,GAEhB4E,EAAgB,MAAM;AACpB,UAAMH,IAAaT,EAAkBxB,GAAe5C,CAAW;AAC/D,IAAAkD,EAAkB2B,CAAU;AAAA,EAC9B,GAAG,CAACT,GAAmBxB,CAAa,CAAC,GAGnC,gBAAA6B;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,MAAA3E;AAAA,MACA,eAAAD;AAAA,MACA,SAASqE;AAAA,MACT,gBAAAxD;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,cAAAN;AAAA,MAEA,UAAA,gBAAAiE;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ/B,EAAiB;AAAA,UACpC,WAAU;AAAA,UACV,UAAUF;AAAA,UACV,OAAA3C;AAAA,UACA,QAAO;AAAA,UACP,WAAW6E,EAAKC,EAAO,iBAAiB,GAAG,qBAAqB;AAAA,UAEhE,UAAA;AAAA,YAAA,gBAAAb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK3B;AAAA,gBAEL,OAAOF;AAAA,gBACP,SAASW;AAAA,gBACT,WAAWU;AAAA,gBACX,UAAUW;AAAA,gBACV,WAAWS,EAAKC,EAAO,OAAO,kCAAkC;AAAA,gBAC/D,GAAG7D;AAAA,cAAA;AAAA,cANC;AAAA,YAAA;AAAA,8BAQN2D,GAAA,EACE,UAAA;AAAA,cAAAnC,EAAe,IAAI,CAACb,GAAQD,MAC3B,gBAAAsC;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBAEC,QAAAnD;AAAA,kBACA,YAAYD,MAAUH,KAAiBY,MAAkB;AAAA,kBACzD,WAAWT,MAAUO;AAAA,kBACrB,SAAShC;AAAA,gBAAA;AAAA,gBAJJyB;AAAA,cAAA,CAMR;AAAA,cACAY,KAAqBE,EAAe,UACnC,gBAAAwB,EAAAe,IAAA,EACE,UAAA,gBAAAf;AAAA,gBAACgB;AAAA,gBAAA;AAAA,kBAEC,aAAY;AAAA,kBACZ,WAAU;AAAA,kBACV,SAASX;AAAA,kBACV,UAAA;AAAA,gBAAA;AAAA,gBAJK;AAAA,cAAA,EAMN,CACF;AAAA,YAAA,GAEJ;AAAA,YACC7B,EAAe,WAAW,KACzB,gBAAAwB;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAWL,EAAKC,EAAO,YAAY,GAAG,gCAAgC;AAAA,gBAEtE,UAAA,gBAAAb,EAACkB,MAAU,UAAAhF,EAAA,CAAoB;AAAA,cAAA;AAAA,YAAA;AAAA,8BAGlCiF,IAAA,EAA8C,YAAYlB,GAAA,GAAvCzB,EAAe,SAAS,CAA2B;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzE;AAAA,EAAA;AAGN;"}

package/dist/layouts/group/group.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { BoxProps } from '../../stacks/index.js';
+export type GroupProps = BoxProps;
+export declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=group.d.ts.map

package/dist/layouts/group/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/layouts/group/group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;AAElC,eAAO,MAAM,KAAK,gFAchB,CAAC"}

package/dist/layouts/group/group.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import s from "react";
+import { clsx as c } from "clsx";
+import { Box as u } from "../../stacks/box/box.js";
+import "../../stacks/h_collapsible_box.js";
+import "../../stacks/h_stack.js";
+import "../../stacks/spacer.js";
+import "../../stacks/v_collapsible_box.js";
+import "../../stacks/v_stack.js";
+import "../../stacks/z_stack.js";
+import '../../group.css';const f = "_group_7b9338c", n = { group: f }, w = s.forwardRef(function({ children: o, className: r, as: t = "span", ...p }, m) {
+  return /* @__PURE__ */ i(
+    u,
+    {
+      ref: m,
+      as: t,
+      className: c(r, n.group, "tcn-group"),
+      ...p,
+      children: o
+    }
+  );
+});
+export {
+  w as Group
+};
+//# sourceMappingURL=group.js.map

package/dist/layouts/group/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sources":["../../../src/layouts/group/group.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/index.js';\n\nimport styles from './group.module.css';\n\nexport type GroupProps = BoxProps;\n\nexport const Group = React.forwardRef<HTMLElement, GroupProps>(function Group(\n  { children, className, as = 'span', ...props }: GroupProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      as={as}\n      className={clsx(className, styles['group'], 'tcn-group')}\n      {...props}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"names":["Group","React","children","className","as","props","ref","jsx","Box","clsx","styles"],"mappings":";;;;;;;;;;8CAQaA,IAAQC,EAAM,WAAoC,SAC7D,EAAE,UAAAC,GAAU,WAAAC,GAAW,IAAAC,IAAK,QAAQ,GAAGC,EAAA,GACvCC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAAF;AAAA,MACA,WAAWK,EAAKN,GAAWO,EAAO,OAAU,WAAW;AAAA,MACtD,GAAGL;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/index.d.ts

@@ -11,6 +11,8 @@ export { VBody, type VBodyProps } from './body/v_body.js';
 export { Footer, type FooterProps } from './footer/footer.js';
 export { Header, type HeaderProps } from './header/header.js';
 export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
+export { Group, type GroupProps } from './group/group.js';
+export { Bar, type BarProps } from './bar/bar.js';
 export { Row } from './row/row.js';
 export { Section } from './section/section.js';
 export { Heading, type HeadingOwnProps } from './section/heading.js';

package/dist/layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,uCAAuC,CAAC"}

package/dist/layouts/index.js

@@ -5,49 +5,53 @@ import { Item as i } from "./list/item.js";
 import { List as a } from "./list/list.js";
 import { SidebarEnd as S } from "./sidebar_end/sidebar_end.js";
 import { SidebarStart as n } from "./sidebar_start/sidebar_start.js";
-import { Scaffold as B } from "./scaffold/scaffold.js";
+import { Scaffold as y } from "./scaffold/scaffold.js";
 import { HBody as R } from "./body/h_body.js";
 import { VBody as s } from "./body/v_body.js";
-import { Footer as v } from "./footer/footer.js";
-import { Header as F } from "./header/header.js";
-import { UtilityBar as g } from "./utility_bar/utility_bar.js";
-import { Row as u } from "./row/row.js";
-import { Section as C } from "./section/section.js";
-import { Heading as G } from "./section/heading.js";
-import { Responsive as L } from "./responsive/responsive.js";
-import { Breakpoint as h } from "./responsive/breakpoint.js";
-import { TBody as q, TD as z, TFoot as A, TH as J, THead as K, TR as M, TTable as N } from "./table/table.js";
-import { Rail as P } from "./rail/rail.js";
-import { Side as W } from "./rail/side/side.js";
-import { UtilityStrip as Y } from "./rail/utility_strip/utility_strip.js";
+import { Footer as u } from "./footer/footer.js";
+import { Header as D } from "./header/header.js";
+import { UtilityBar as G } from "./utility_bar/utility_bar.js";
+import { Group as g } from "./group/group.js";
+import { Bar as w } from "./bar/bar.js";
+import { Row as E } from "./row/row.js";
+import { Section as L } from "./section/section.js";
+import { Heading as h } from "./section/heading.js";
+import { Responsive as q } from "./responsive/responsive.js";
+import { Breakpoint as A } from "./responsive/breakpoint.js";
+import { TBody as K, TD as M, TFoot as N, TH as O, THead as P, TR as Q, TTable as W } from "./table/table.js";
+import { Rail as Y } from "./rail/rail.js";
+import { Side as _ } from "./rail/side/side.js";
+import { UtilityStrip as oo } from "./rail/utility_strip/utility_strip.js";
 export {
-  h as Breakpoint,
+  w as Bar,
+  A as Breakpoint,
   e as Column,
   p as Divider,
-  v as Footer,
+  u as Footer,
   m as Grid,
+  g as Group,
   R as HBody,
-  F as Header,
-  G as Heading,
+  D as Header,
+  h as Heading,
   i as Item,
   a as List,
-  P as Rail,
-  L as Responsive,
-  u as Row,
-  B as Scaffold,
-  C as Section,
-  W as Side,
+  Y as Rail,
+  q as Responsive,
+  E as Row,
+  y as Scaffold,
+  L as Section,
+  _ as Side,
   S as SidebarEnd,
   n as SidebarStart,
-  q as TBody,
-  z as TD,
-  A as TFoot,
-  J as TH,
-  K as THead,
-  M as TR,
-  N as TTable,
-  g as UtilityBar,
-  Y as UtilityStrip,
+  K as TBody,
+  M as TD,
+  N as TFoot,
+  O as TH,
+  P as THead,
+  Q as TR,
+  W as TTable,
+  G as UtilityBar,
+  oo as UtilityStrip,
   s as VBody
 };
 //# sourceMappingURL=index.js.map

package/dist/layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/overlay/frame/frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOnE,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,QAAQ,EACN,oBAAoB,GACpB,qBAAqB,GACrB,mBAAmB,GACnB,sBAAsB,CACzB,GACC,aAAa,CAAC;AAEhB,eAAO,MAAM,KAAK,8MAiChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFA6FvB,CAAC"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,QAAQ,EACN,oBAAoB,GACpB,qBAAqB,GACrB,mBAAmB,GACnB,sBAAsB,CACzB,GACC,aAAa,CAAC;AAEhB,eAAO,MAAM,KAAK,8MAqChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFAkEvB,CAAC"}

package/dist/overlay/frame/frame.js

@@ -1,7 +1,7 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { clsx as O } from "clsx";
-import y, { useCallback as _ } from "react";
-import { flushSync as l } from "react-dom";
+import h, { useCallback as _ } from "react";
+import { flushSync as R } from "react-dom";
 import { Box as k } from "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
 import "../../stacks/h_stack.js";
@@ -11,89 +11,83 @@ import "../../stacks/v_stack.js";
 import { ZStack as w } from "../../stacks/z_stack.js";
 import { useDragContainer as z } from "../../utils/dnd/context.js";
 import { Draggable as C } from "../../utils/dnd/draggable/draggable.js";
-import { Portal as B } from "../portal/portal.js";
-import '../../frame.css';const N = "_frame-dialog_2a77c1d", S = { "frame-dialog": N }, Q = y.forwardRef(function({
-  children: c,
-  isOpen: d = !1,
-  draggable: n = !0,
-  veil: h = !1,
+import { Portal as P } from "../portal/portal.js";
+import '../../frame.css';const B = "_frame-dialog_2a77c1d", N = { "frame-dialog": B }, J = h.forwardRef(function({
+  children: f,
+  isOpen: c = !1,
+  draggable: i = !0,
+  veil: a = !1,
   resizable: t = !0,
-  className: s,
-  ...a
-}, p) {
-  return d ? /* @__PURE__ */ m(B, { children: /* @__PURE__ */ m(w, { width: "100%", height: "100%", "data-is-veil": h, className: "tcn-frame-veil", children: /* @__PURE__ */ m(C, { draggable: n, children: /* @__PURE__ */ m(
-    b,
+  className: o,
+  ...n
+}, l) {
+  return c ? /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(w, { width: "100%", height: "100%", "data-is-veil": a, className: "tcn-frame-veil", children: /* @__PURE__ */ e(C, { draggable: i, children: /* @__PURE__ */ e(
+    S,
     {
-      className: s,
-      ref: p,
+      className: o,
+      ref: l,
       enableResizeOnLeft: t,
       enableResizeOnRight: t,
       enableResizeOnTop: t,
       enableResizeOnBottom: t,
-      draggable: n,
-      ...a,
-      children: c
+      draggable: i,
+      ...n,
+      children: f
     }
   ) }) }) }) : null;
-}), b = y.forwardRef(
+}), S = h.forwardRef(
   function({
-    as: c = "div",
-    role: d = "dialog",
-    children: n,
-    className: h,
+    as: f = "div",
+    role: c = "dialog",
+    children: i,
+    className: a,
     draggable: t,
-    onWidthResize: s,
-    onHeightResize: a,
-    ...p
-  }, P) {
-    const r = z(), g = y.useCallback(
-      (u, e, x, i, f) => {
-        t && (f || (e === "right" && l(() => {
-          r.setPosition((o) => ({
-            x: o.x + i / 2,
-            y: o.y
+    onWidthResize: o,
+    onHeightResize: n,
+    ...l
+  }, D) {
+    const m = z(), p = h.useCallback(
+      (r) => {
+        if (!t || r.currentDelta === 0) return;
+        const u = r.origin === "right" ? 1 : -1, g = r.currentDelta / 2 * u;
+        R(() => {
+          m.setPosition((s) => ({
+            x: s.x + g,
+            y: s.y
           }));
-        }), e === "left" && l(() => {
-          r.setPosition((o) => ({
-            x: o.x - i / 2,
-            y: o.y
-          }));
-        }), s?.(u, e, x, i, f)));
+        }), o?.(r);
       },
-      [s, r, t]
+      [o, m, t]
     ), F = _(
-      (u, e, x, i, f) => {
-        t && (f || (e === "bottom" && l(() => {
-          r.setPosition((o) => ({
-            x: o.x,
-            y: o.y + i / 2
-          }));
-        }), e === "top" && l(() => {
-          r.setPosition((o) => ({
-            x: o.x,
-            y: o.y - i / 2
+      (r) => {
+        if (!t || r.currentDelta === 0) return;
+        const u = r.origin === "bottom" ? 1 : -1, s = r.currentDelta / 2 * u;
+        R(() => {
+          m.setPosition((d) => ({
+            x: d.x,
+            y: d.y + s
           }));
-        }), a?.(u, e, x, i, f)));
+        }), n?.(r);
       },
-      [a, r, t]
+      [n, m, t]
     );
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ e(
       k,
       {
-        className: O(S["frame-dialog"], "tcn-frame-dialog", h),
-        ref: P,
-        onWidthResize: g,
+        className: O(N["frame-dialog"], "tcn-frame-dialog", a),
+        ref: D,
+        onWidthResize: p,
         onHeightResize: F,
-        as: c,
-        role: d,
-        ...p,
-        children: n
+        as: f,
+        role: c,
+        ...l,
+        children: i
       }
     );
   }
 );
 export {
-  Q as Frame,
-  b as FrameDialog
+  J as Frame,
+  S as FrameDialog
 };
 //# sourceMappingURL=frame.js.map

package/dist/overlay/frame/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport { Box, ZStack, type BoxProps } from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/dnd/context.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './frame.module.css';\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = Omit<\n  BoxProps,\n  | 'enableResizeOnLeft'\n  | 'enableResizeOnRight'\n  | 'enableResizeOnTop'\n  | 'enableResizeOnBottom'\n> &\n  FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnLeft={resizable}\n            enableResizeOnRight={resizable}\n            enableResizeOnTop={resizable}\n            enableResizeOnBottom={resizable}\n            draggable={draggable}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n\n    const handleWidthResize = React.useCallback(\n      (\n        width: number,\n        origin: 'left' | 'right',\n        totalDelta: number,\n        currentDelta: number,\n        atLimit: boolean\n      ) => {\n        if (!draggable) return;\n        if (atLimit) return;\n        if (origin === 'right') {\n          flushSync(() => {\n            drag.setPosition(prev => ({\n              x: prev.x + currentDelta / 2,\n              y: prev.y,\n            }));\n          });\n        }\n        if (origin === 'left') {\n          flushSync(() => {\n            drag.setPosition(prev => ({\n              x: prev.x - currentDelta / 2,\n              y: prev.y,\n            }));\n          });\n        }\n\n        onWidthResize?.(width, origin, totalDelta, currentDelta, atLimit);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (\n        height: number,\n        origin: 'top' | 'bottom',\n        totalDelta: number,\n        currentDelta: number,\n        atLimit: boolean\n      ) => {\n        if (!draggable) return;\n        if (atLimit) return;\n        if (origin === 'bottom') {\n          flushSync(() => {\n            drag.setPosition(prev => ({\n              x: prev.x,\n              y: prev.y + currentDelta / 2,\n            }));\n          });\n        }\n        if (origin === 'top') {\n          flushSync(() => {\n            drag.setPosition(prev => ({\n              x: prev.x,\n              y: prev.y - currentDelta / 2,\n            }));\n          });\n        }\n        onHeightResize?.(height, origin, totalDelta, currentDelta, atLimit);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Box\n        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}\n        ref={ref}\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        as={as}\n        role={role}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","drag","useDragContainer","handleWidthResize","width","origin","totalDelta","currentDelta","atLimit","flushSync","prev","handleHeightResize","useCallback","height","Box","clsx","styles"],"mappings":";;;;;;;;;;;;;;8DA0BaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SAAKN,IAEH,gBAAAO,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcP,GAAM,WAAU,kBAC/D,UAAA,gBAAAK,EAACG,KAAU,WAAAT,GACT,UAAA,gBAAAM;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,KAAAE;AAAA,MACA,oBAAoBH;AAAA,MACpB,qBAAqBA;AAAA,MACrB,mBAAmBA;AAAA,MACnB,sBAAsBA;AAAA,MACtB,WAAAF;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IAnBkB;AAqBtB,CAAC,GAGYY,IAAcb,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,IAAAc,IAAK;AAAA,IACL,MAAAC,IAAO;AAAA,IACP,UAAAd;AAAA,IACA,WAAAK;AAAA,IACA,WAAAH;AAAA,IACA,eAAAa;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,GAELC,GACA;AACA,UAAMU,IAAOC,EAAA,GAEPC,IAAoBpB,EAAM;AAAA,MAC9B,CACEqB,GACAC,GACAC,GACAC,GACAC,MACG;AACH,QAAKtB,MACDsB,MACAH,MAAW,WACbI,EAAU,MAAM;AACd,UAAAR,EAAK,YAAY,CAAAS,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIH,IAAe;AAAA,YAC3B,GAAGG,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAECL,MAAW,UACbI,EAAU,MAAM;AACd,UAAAR,EAAK,YAAY,CAAAS,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIH,IAAe;AAAA,YAC3B,GAAGG,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAGHX,IAAgBK,GAAOC,GAAQC,GAAYC,GAAcC,CAAO;AAAA,MAClE;AAAA,MACA,CAACT,GAAeE,GAAMf,CAAS;AAAA,IAAA,GAG3ByB,IAAqBC;AAAA,MACzB,CACEC,GACAR,GACAC,GACAC,GACAC,MACG;AACH,QAAKtB,MACDsB,MACAH,MAAW,YACbI,EAAU,MAAM;AACd,UAAAR,EAAK,YAAY,CAAAS,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIH,IAAe;AAAA,UAAA,EAC3B;AAAA,QACJ,CAAC,GAECF,MAAW,SACbI,EAAU,MAAM;AACd,UAAAR,EAAK,YAAY,CAAAS,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIH,IAAe;AAAA,UAAA,EAC3B;AAAA,QACJ,CAAC,GAEHP,IAAiBa,GAAQR,GAAQC,GAAYC,GAAcC,CAAO;AAAA,MACpE;AAAA,MACA,CAACR,GAAgBC,GAAMf,CAAS;AAAA,IAAA;AAGlC,WACE,gBAAAM;AAAA,MAACsB;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,cAAc,GAAG,oBAAoB3B,CAAS;AAAA,QACrE,KAAAE;AAAA,QACA,eAAeY;AAAA,QACf,gBAAgBQ;AAAA,QAChB,IAAAd;AAAA,QACA,MAAAC;AAAA,QACC,GAAGR;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/dnd/context.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './frame.module.css';\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = Omit<\n  BoxProps,\n  | 'enableResizeOnLeft'\n  | 'enableResizeOnRight'\n  | 'enableResizeOnTop'\n  | 'enableResizeOnBottom'\n> &\n  FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnLeft={resizable}\n            enableResizeOnRight={resizable}\n            enableResizeOnTop={resizable}\n            enableResizeOnBottom={resizable}\n            // TODO: check to see if these should be enabled, and if so - if left/right should be disabled.\n            // Could add a \"directional\" prop and use that in conjunction with enableResizeOnStart/End and deprecate enableResizeOnLeft/Right.\n            // enableResizeOnStart={resizable}\n            // enableResizeOnEnd={resizable}\n            draggable={draggable}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'right' ? 1 : -1;\n        const dx = (payload.currentDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const half = payload.currentDelta / 2;\n        const dy = half * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Box\n        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}\n        ref={ref}\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        as={as}\n        role={role}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","drag","useDragContainer","handleWidthResize","payload","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","Box","clsx","styles"],"mappings":";;;;;;;;;;;;;;8DAgCaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SAAKN,IAEH,gBAAAO,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcP,GAAM,WAAU,kBAC/D,UAAA,gBAAAK,EAACG,KAAU,WAAAT,GACT,UAAA,gBAAAM;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAAP;AAAA,MACA,KAAAE;AAAA,MACA,oBAAoBH;AAAA,MACpB,qBAAqBA;AAAA,MACrB,mBAAmBA;AAAA,MACnB,sBAAsBA;AAAA,MAKtB,WAAAF;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IAvBkB;AAyBtB,CAAC,GAGYY,IAAcb,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,IAAAc,IAAK;AAAA,IACL,MAAAC,IAAO;AAAA,IACP,UAAAd;AAAA,IACA,WAAAK;AAAA,IACA,WAAAH;AAAA,IACA,eAAAa;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,GAELC,GACA;AACA,UAAMU,IAAOC,EAAA,GAEPC,IAAoBpB,EAAM;AAAA,MAC9B,CAACqB,MAAkC;AAEjC,YADI,CAAClB,KACDkB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,UAAU,IAAI,IACxCE,IAAMF,EAAQ,eAAe,IAAKC;AACxC,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIF;AAAA,YACZ,GAAGE,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAEDT,IAAgBK,CAAO;AAAA,MACzB;AAAA,MACA,CAACL,GAAeE,GAAMf,CAAS;AAAA,IAAA,GAG3BuB,IAAqBC;AAAA,MACzB,CAACN,MAAmC;AAElC,YADI,CAAClB,KACDkB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,WAAW,IAAI,IAEzCO,IADOP,EAAQ,eAAe,IAClBC;AAClB,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIG;AAAA,UAAA,EACZ;AAAA,QACJ,CAAC,GACDX,IAAiBI,CAAO;AAAA,MAC1B;AAAA,MACA,CAACJ,GAAgBC,GAAMf,CAAS;AAAA,IAAA;AAGlC,WACE,gBAAAM;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,cAAc,GAAG,oBAAoBzB,CAAS;AAAA,QACrE,KAAAE;AAAA,QACA,eAAeY;AAAA,QACf,gBAAgBM;AAAA,QAChB,IAAAZ;AAAA,QACA,MAAAC;AAAA,QACC,GAAGR;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/select_group.css

@@ -1 +1 @@
-@layer tcn-system{:where(._select-group_c24986f){--button-background: var(--surface-color, transparent);border-radius:4px}:where(._select-group-option_28f4dfd){background-color:var(--button-background);z-index:1}:where(._select-group-divider_b5b865b){display:none}:where(._select-group-option_28f4dfd:not(:first-child)){margin-left:-1px}:where(._select-group-option_28f4dfd:is(:focus,:focus-visible,:hover,:active)){z-index:2}:where(._select-group-option_28f4dfd:not(:first-child)),:where(._select-group-option_28f4dfd:not(:last-child)){border-radius:0}:where(._select-group-option_28f4dfd:last-child){border-end-end-radius:4px;border-start-end-radius:4px}:where(._select-group-option_28f4dfd:first-child){border-start-start-radius:4px;border-end-start-radius:4px}:where(._select-group-option_28f4dfd:last-child){border-inline-start-width:0}:where(._select-group-option_28f4dfd:first-child){border-inline-end-width:0}:where(._select-group-option_28f4dfd:only-child){border-inline-end-width:1px;border-inline-start-width:1px}:where(._select-group_c24986f[data-size=sm]){--button-height: calc(22px * var(--scalar, 1))}:where(._select-group_c24986f[data-size=md]){--button-height: calc(26px * var(--scalar, 1))}:where(._select-group_c24986f[data-size=lg]){--button-height: calc(32px * var(--scalar, 1))}:where(._select-group-option_28f4dfd[data-is-disabled=true]){z-index:0}}
+@layer tcn-system{:where(._select-group_9481949){--button-background: var(--surface-color, transparent);border-radius:4px}:where(._select-group-option_d8658c7){background-color:var(--button-background);z-index:1}:where(._select-group-divider_802bff5){display:none}:where(._select-group-option_d8658c7:not(:first-child)){margin-left:-1px}:where(._select-group-option_d8658c7:is(:focus,:focus-visible,:hover,:active)){z-index:2}:where(._select-group-option_d8658c7:not(:first-child)),:where(._select-group-option_d8658c7:not(:last-child)){border-radius:0}:where(._select-group-option_d8658c7:last-child){border-end-end-radius:4px;border-start-end-radius:4px}:where(._select-group-option_d8658c7:first-child){border-start-start-radius:4px;border-end-start-radius:4px}:where(._select-group-option_d8658c7:last-child){border-inline-start-width:0}:where(._select-group-option_d8658c7:first-child){border-inline-end-width:0}:where(._select-group-option_d8658c7:only-child){border-inline-end-width:1px;border-inline-start-width:1px}:where(._select-group_9481949[data-size=sm]){--button-height: calc(22px * var(--scalar, 1))}:where(._select-group_9481949[data-size=md]){--button-height: calc(26px * var(--scalar, 1))}:where(._select-group_9481949[data-size=lg]){--button-height: calc(32px * var(--scalar, 1))}:where(._select-group-option_d8658c7[data-is-disabled=true]){z-index:0}}

package/dist/stacks/box/box.d.ts

@@ -1,5 +1,6 @@
 import { default as React, CSSProperties, HTMLAttributes } from 'react';
 import { HandleProps } from './handle_props.js';
+import { OnHeightResize, OnHeightResizeEnd, OnWidthResize, OnWidthResizeEnd } from './types.js';
 export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
     as?: string;
     style?: React.CSSProperties;
@@ -33,10 +34,10 @@ export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttri
     enableResizeOnRight?: boolean;
     horizontalHandleProps?: HandleProps;
     verticalHandleProps?: HandleProps;
-    onWidthResize?: (width: number, origin: 'left' | 'right', totalDelta: number, currentDelta: number, atLimit: boolean) => void;
-    onHeightResize?: (height: number, origin: 'top' | 'bottom', totalDelta: number, currentDelta: number, atLimit: boolean) => void;
-    onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;
-    onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
+    onWidthResize?: OnWidthResize;
+    onHeightResize?: OnHeightResize;
+    onWidthResizeEnd?: OnWidthResizeEnd;
+    onHeightResizeEnd?: OnHeightResizeEnd;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=box.d.ts.map

package/dist/stacks/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/box.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,cAAc,EAAU,MAAM,OAAO,CAAC;AAOrE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,iBAAiB,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,eAAO,MAAM,GAAG,2FAsKd,CAAC"}

package/dist/stacks/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from '../stack.module.css';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { HandleProps } from './handle_props.js';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\n\nexport interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: (\n    width: number,\n    origin: 'left' | 'right',\n    totalDelta: number,\n    currentDelta: number,\n    atLimit: boolean\n  ) => void;\n  onHeightResize?: (\n    height: number,\n    origin: 'top' | 'bottom',\n    totalDelta: number,\n    currentDelta: number,\n    atLimit: boolean\n  ) => void;\n  onWidthResizeEnd?: (width: number, origin: 'left' | 'right') => void;\n  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'tcn-box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from '../stack.module.css';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { HandleProps } from './handle_props.js';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport type {\n  OnHeightResize,\n  OnHeightResizeEnd,\n  OnWidthResize,\n  OnWidthResizeEnd,\n} from './types.js';\n\nexport interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: OnWidthResize;\n  onHeightResize?: OnHeightResize;\n  onWidthResizeEnd?: OnWidthResizeEnd;\n  onHeightResizeEnd?: OnHeightResizeEnd;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'tcn-box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}

package/dist/stacks/box/detect_resize_bounds.d.ts

@@ -0,0 +1,15 @@
+type ConstraintAxis = 'width' | 'height';
+export type DetectResizeBoundsParams = {
+    element: HTMLElement;
+    axis: ConstraintAxis;
+    nextSize: number;
+    epsilon?: number;
+};
+export type DetectResizeBoundsResult = {
+    hitMin: boolean;
+    hitMax: boolean;
+    clamped: boolean;
+};
+export declare function detectResizeBounds({ element, axis, nextSize, epsilon, }: DetectResizeBoundsParams): DetectResizeBoundsResult;
+export {};
+//# sourceMappingURL=detect_resize_bounds.d.ts.map

package/dist/stacks/box/detect_resize_bounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detect_resize_bounds.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/detect_resize_bounds.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAgCF,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,OAAa,GACd,EAAE,wBAAwB,GAAG,wBAAwB,CAiCrD"}