{"version":3,"file":"select-multiple-value.cjs","sources":["../../../components/select/select-multiple-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { Chip } from '../chip';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ninterface SelectMultipleValueProps {\n  data: ItemType[];\n}\n\n/*\n * Approximate width calculation based on font size\n * Average character width is roughly 0.6 times the font size\n */\nconst calculateTextWidth = (text: string, fontSize: number = 11): number => {\n  const avgCharWidth = fontSize * 0.6;\n  return text.length * avgCharWidth;\n};\n\nexport const SelectMultipleValue = ({\n  data = []\n}: SelectMultipleValueProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setContainerWidth(entry.contentRect.width - 70);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current || data.length === 0) return;\n\n    const chipWidths: number[] = data.map(item => {\n      const text =\n        typeof item.children === 'string' ? item.children : item.value;\n      const iconWidth = item.leadingIcon ? 16 : 0;\n      return calculateTextWidth(text) + 8 + iconWidth;\n    });\n\n    let totalWidth = 0;\n    let count = 0;\n\n    if (data.length > 0) {\n      count = 1;\n      totalWidth = chipWidths[0];\n    }\n\n    for (let i = 1; i < data.length; i++) {\n      const newWidth = totalWidth + chipWidths[i];\n      if (newWidth <= containerWidth) {\n        count++;\n        totalWidth = newWidth;\n      } else {\n        break;\n      }\n    }\n\n    setVisibleCount(count);\n  }, [data, containerWidth]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(styles.valueContent)}\n      data-slot='select-value'\n    >\n      {data.slice(0, visibleCount).map(item => (\n        <Chip key={item.value} leadingIcon={item.leadingIcon}>\n          {typeof item.children === 'string' ? item.children : item.value}\n        </Chip>\n      ))}\n      {data.length > visibleCount && (\n        <Text data-slot='select-value-overflow'>\n          +{data.length - visibleCount}\n        </Text>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAaA;;;AAGG;AACH;AACE;AACA;AACF;AAEa;AAGX;AACA;;;;;AAME;AACE;;;AAGF;AAEA;AACA;;;;;;;AASE;;AAEF;;;AAKA;;AAEE;;AAGF;;AAEE;AACE;;;;;;;;AAQN;AAEA;AAkBF;;"}