@tipp/ui 1.4.11 → 1.4.13

package/dist/molecules/navigation.js

@@ -1,65 +1,65 @@
 import {
   Navigation
-} from "../chunk-F44BXTHN.js";
+} from "../chunk-OCINOC2X.js";
 import "../chunk-KTVZ4KLX.js";
+import "../chunk-MOAXPZLZ.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
 import "../chunk-CYYWMYE7.js";
+import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-3JRNKBMN.js";
-import "../chunk-HYITAA4J.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-5X3BCQPR.js";
+import "../chunk-HCTV6GJG.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
-import "../chunk-YO3BQW6S.js";
+import "../chunk-UC627KGO.js";
+import "../chunk-4WFMOFN2.js";
+import "../chunk-WKFZ5MMN.js";
+import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
-import "../chunk-DJN2IEY6.js";
+import "../chunk-QDZS4B6A.js";
+import "../chunk-52MVZ6AN.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
-import "../chunk-O3T3TM3V.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-BDVTRPXG.js";
-import "../chunk-UC627KGO.js";
-import "../chunk-4WFMOFN2.js";
-import "../chunk-WKFZ5MMN.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-52MVZ6AN.js";
+import "../chunk-3SSSCLJ5.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-U7JPP7WJ.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
-import "../chunk-MIMJ7LON.js";
-import "../chunk-IQEEPHOY.js";
-import "../chunk-LHCDPZ5E.js";
-import "../chunk-66C4U3BG.js";
+import "../chunk-FWNTKFWE.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
-import "../chunk-3SSSCLJ5.js";
-import "../chunk-EWD4AO5N.js";
-import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   Navigation

package/dist/molecules/stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/stepper.tsx","../../src/atoms/flex.tsx","../../src/atoms/avatar.tsx","../../src/icon.ts","../../src/atoms/typo.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n  active: boolean;\n  completed: boolean;\n  index: number;\n}\n\nconst StepContext = createContext<StepState>({\n  active: false,\n  completed: false,\n  index: 0,\n});\n\ninterface StepperProps {\n  // 활성화된 스텝 인덱스. 0부터 시작\n  activeStep?: number;\n  children?: React.ReactElement | React.ReactElement[];\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  /** icon과 children의 배치 방향. 기본 값 vertical */\n  direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n  const {\n    activeStep = 0,\n    children,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\n\n  return (\n    <Flex\n      gap=\"3\"\n      style={{\n        width,\n        minWidth,\n        maxWidth,\n      }}\n    >\n      {Children.map(children, (child, index) => {\n        return (\n          <StepContext.Provider\n            value={{\n              active: index === activeStep,\n              completed: index < activeStep,\n              index,\n              direction,\n            }}\n          >\n            {child}\n          </StepContext.Provider>\n        );\n      })}\n    </Flex>\n  );\n}\n\ninterface StepProps {\n  children?: React.ReactNode;\n  /** 아이콘 커스텀 필요시 사용 */\n  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const {\n    active,\n    completed,\n    index,\n    direction = 'vertical',\n  } = useContext(StepContext);\n\n  const connector =\n    index > 0 ? (\n      <Separator\n        style={{\n          width: `calc(100% - 40px)`,\n          position: 'absolute',\n          top: 16,\n          right: `calc(50% + 26px)`,\n        }}\n      />\n    ) : null;\n\n  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n    if (active) {\n      return ActiveStep;\n    }\n    if (completed) {\n      return CompleteStep;\n    }\n    return IncompleteStep;\n  }, [completed, active]);\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      gap=\"4\"\n      position=\"relative\"\n      style={{ flex: 1 }}\n    >\n      {connector}\n      <InnerStep Icon={Icon}>{children}</InnerStep>\n    </Flex>\n  );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active } = useContext(StepContext);\n  const background = 'var(--accent-a4)';\n  const border = '1px solid var(--accent-7)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<CheckIcon fill={color} height={16} width={16} />}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            border,\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--gray-5)';\n  const color = 'var(--gray-a11)';\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" style={{ color }} variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--accent-10)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={\n            <Typo style={{ color }} weight=\"bold\">\n              {index + 1}\n            </Typo>\n          }\n          radius=\"full\"\n          size=\"medium\"\n          style={{ background }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import {\n  Avatar as RadixAvatar,\n  type AvatarProps as RadixAvatarProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type AvatarProps = Omit<RadixAvatarProps, 'size'> & {\n  size?: 'small' | 'medium' | 'large' | 'full';\n};\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n  (props: AvatarProps, ref): React.ReactElement => {\n    const { children, size, variant = 'soft', ...rest } = props;\n    const radixSize = useMemo<RadixAvatarProps['size']>(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        case 'full':\n          return '4';\n        default:\n          return size;\n      }\n    }, [size]);\n\n    return (\n      <RadixAvatar {...rest} ref={ref} size={radixSize} variant={variant}>\n        {children}\n      </RadixAvatar>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n} from '@radix-ui/react-icons';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","import_themes","RadixAvatar","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/molecules/stepper.tsx","../../src/atoms/flex.tsx","../../src/atoms/avatar.tsx","../../src/icon.ts","../../src/atoms/typo.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n  active: boolean;\n  completed: boolean;\n  index: number;\n}\n\nconst StepContext = createContext<StepState>({\n  active: false,\n  completed: false,\n  index: 0,\n});\n\ninterface StepperProps {\n  // 활성화된 스텝 인덱스. 0부터 시작\n  activeStep?: number;\n  children?: React.ReactElement | React.ReactElement[];\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  /** icon과 children의 배치 방향. 기본 값 vertical */\n  direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n  const {\n    activeStep = 0,\n    children,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\n\n  return (\n    <Flex\n      gap=\"3\"\n      style={{\n        width,\n        minWidth,\n        maxWidth,\n      }}\n    >\n      {Children.map(children, (child, index) => {\n        return (\n          <StepContext.Provider\n            value={{\n              active: index === activeStep,\n              completed: index < activeStep,\n              index,\n              direction,\n            }}\n          >\n            {child}\n          </StepContext.Provider>\n        );\n      })}\n    </Flex>\n  );\n}\n\ninterface StepProps {\n  children?: React.ReactNode;\n  /** 아이콘 커스텀 필요시 사용 */\n  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const {\n    active,\n    completed,\n    index,\n    direction = 'vertical',\n  } = useContext(StepContext);\n\n  const connector =\n    index > 0 ? (\n      <Separator\n        style={{\n          width: `calc(100% - 40px)`,\n          position: 'absolute',\n          top: 16,\n          right: `calc(50% + 26px)`,\n        }}\n      />\n    ) : null;\n\n  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n    if (active) {\n      return ActiveStep;\n    }\n    if (completed) {\n      return CompleteStep;\n    }\n    return IncompleteStep;\n  }, [completed, active]);\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      gap=\"4\"\n      position=\"relative\"\n      style={{ flex: 1 }}\n    >\n      {connector}\n      <InnerStep Icon={Icon}>{children}</InnerStep>\n    </Flex>\n  );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active } = useContext(StepContext);\n  const background = 'var(--accent-a4)';\n  const border = '1px solid var(--accent-7)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<CheckIcon fill={color} height={16} width={16} />}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            border,\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--gray-5)';\n  const color = 'var(--gray-a11)';\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" style={{ color }} variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--accent-10)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={\n            <Typo style={{ color }} weight=\"bold\">\n              {index + 1}\n            </Typo>\n          }\n          radius=\"full\"\n          size=\"medium\"\n          style={{ background }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import {\n  Avatar as RadixAvatar,\n  type AvatarProps as RadixAvatarProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type AvatarProps = Omit<RadixAvatarProps, 'size'> & {\n  size?: 'small' | 'medium' | 'large' | 'full';\n};\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n  (props: AvatarProps, ref): React.ReactElement => {\n    const { children, size, variant = 'soft', ...rest } = props;\n    const radixSize = useMemo<RadixAvatarProps['size']>(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        case 'full':\n          return '4';\n        default:\n          return size;\n      }\n    }, [size]);\n\n    return (\n      <RadixAvatar {...rest} ref={ref} size={radixSize} variant={variant}>\n        {children}\n      </RadixAvatar>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n  CheckCircledIcon,\n} from '@radix-ui/react-icons';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_themes","import_themes","RadixAvatar","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime"]}

package/dist/molecules/stepper.js

@@ -1,10 +1,10 @@
 import {
   Stepper
-} from "../chunk-Y3L7BYDF.js";
-import "../chunk-25HMMI7R.js";
+} from "../chunk-U4J2ORGT.js";
 import "../chunk-52MVZ6AN.js";
-import "../chunk-66C4U3BG.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-3SSSCLJ5.js";
+import "../chunk-FWNTKFWE.js";
 import "../chunk-N552FDTV.js";
 export {
   Stepper

package/dist/molecules/tag-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/tag-selector.tsx","../../src/atoms/popover.tsx","../../src/atoms/flex.tsx","../../src/atoms/button.tsx","../../src/utils/convert-button-size.ts","../../src/atoms/badge.tsx","../../src/icon.ts","../../src/atoms/scroll-area.tsx","../../src/atoms/grid.tsx","../../src/atoms/typo.tsx","../../src/atoms/auto-sizing-input.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronRightIcon,\n  Cross1Icon,\n  MagnifyingGlassIcon,\n} from '@radix-ui/react-icons';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport type { BadgeProps } from '../atoms/badge';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\nimport type { TypoProps } from '../atoms';\nimport { AutoSizingInput, Typo } from '../atoms';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n  style?: React.CSSProperties;\n  size?: 'large' | 'medium' | 'small';\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n    onChange,\n    size = 'medium',\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n  const [focus, setFocus] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const closeRef = useRef<ReturnType<typeof setTimeout>>();\n\n  const onFocus = useCallback(() => {\n    clearTimeout(closeRef.current);\n    setFocus(true);\n    setOpen(true);\n  }, []);\n\n  const onBlur = useCallback(() => {\n    closeRef.current = setTimeout(() => {\n      setFocus(false);\n      setOpen(false);\n      setTimeout(() => {\n        setValue('');\n      }, 100);\n    }, 300);\n  }, []);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          setValue('');\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex]?.id);\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  const placeholderVisible = useMemo(() => {\n    if (selectedItem.length) return false;\n    if (value) return false;\n    if (focus) return false;\n    return true;\n  }, [focus, selectedItem.length, value]);\n\n  useEffect(() => {\n    onChange?.(selected);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...selected].sort().join(',')]);\n\n  useEffect(() => {\n    setSelected(props.selected || []);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...(props.selected || [])].sort().join(',')]);\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  const badgeSize = useMemo<BadgeProps['size']>(() => {\n    switch (size) {\n      case 'large':\n        return 'large';\n      case 'medium':\n      case 'small':\n      default:\n        return 'small';\n    }\n  }, [size]);\n\n  const placeholderVariant = useMemo<TypoProps['variant']>(() => {\n    switch (size) {\n      case 'large':\n        return 'subtitle';\n      case 'medium':\n      default:\n        return 'body';\n    }\n  }, [size]);\n\n  return (\n    <Popover.Root open={Boolean(filteredOptions.length) && open}>\n      <Popover.Trigger>\n        <Grid\n          align=\"center\"\n          className={`tag-selector ${focus ? 'focused' : ''} ${size}`}\n          columns=\"1fr auto\"\n          gap=\"1\"\n          onClick={() => fieldRef.current?.focus()}\n        >\n          <Flex\n            align=\"center\"\n            gap=\"1\"\n            maxWidth=\"100%\"\n            overflow=\"hidden\"\n            wrap=\"wrap\"\n          >\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id} size={badgeSize}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n            {placeholderVisible ? (\n              <Typo color=\"gray\" variant={placeholderVariant}>\n                {placeholder}\n              </Typo>\n            ) : null}\n            <AutoSizingInput\n              onBlur={onBlur}\n              onChange={onChangeValue}\n              onFocus={onFocus}\n              onKeyDown={handleKeyDown}\n              ref={fieldRef}\n              value={value}\n            />\n          </Flex>\n          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n","export { Popover } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import React, { forwardRef, useMemo } from 'react';\nimport { Button as RadixButton } from '@radix-ui/themes';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactElement => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const mergedStyle = useMemo<ButtonProps['style']>(() => {\n      const baseStyle = {\n        background: variant === 'transparent' ? 'transparent' : undefined,\n        fontWeight: 400,\n      };\n      return { ...baseStyle, ...style };\n    }, [style, variant]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    return (\n      <RadixButton\n        style={mergedStyle}\n        variant={radixVariant}\n        {...restProps}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n","import {\n  Badge as RadixBadge,\n  type BadgeProps as RadixBadgeProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n  color?: 'error' | 'accent' | 'neutral' | 'success';\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (props: BadgeProps, ref): React.ReactElement => {\n    const { size = 'small', color = 'accent', ...rest } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        default:\n          return '1';\n      }\n    }, [size]);\n\n    const radixColor = useMemo(() => {\n      switch (color) {\n        case 'error':\n          return 'red';\n        case 'neutral':\n          return 'gray';\n        case 'success':\n          return 'green';\n        case 'accent':\n        default:\n          return undefined;\n      }\n    }, [color]);\n\n    return (\n      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n} from '@radix-ui/react-icons';\n","export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';\n","export { Grid, type GridProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type { DetailedHTMLProps } from 'react';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface AutoSizingInputProps\n  extends DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  > {\n  value?: string;\n  onChangeValue?: (value: string) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const AutoSizingInput = forwardRef<\n  HTMLInputElement,\n  AutoSizingInputProps\n>(\n  (\n    { value: _value, onChangeValue, onChange, ...rest },\n    ref\n  ): React.ReactNode => {\n    const [value, setValue] = useState(_value);\n    const [width, setWidth] = useState(0);\n    const span = useRef<HTMLSpanElement>(null);\n\n    useEffect(() => {\n      span.current && setWidth(span.current.offsetWidth);\n    }, [value]);\n\n    const changeHandler = useCallback<\n      React.ChangeEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        onChange?.(evt);\n        setValue(evt.target.value);\n      },\n      [onChange]\n    );\n\n    useEffect(() => {\n      setValue(_value || '');\n    }, [_value]);\n\n    useEffect(() => {\n      onChangeValue?.(value || '');\n    }, [value, onChangeValue]);\n\n    return (\n      <div className=\"auto-sizing-input wrapper\" style={{ width: width + 24 }}>\n        <input onChange={changeHandler} ref={ref} value={value} {...rest} />\n        <span aria-hidden=\"true\" ref={span}>\n          {value}\n        </span>\n      </div>\n    );\n  }\n);\n\nAutoSizingInput.displayName = 'AutoSizingInput';\n"],"mappings":"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","names":["import_react","import_react_icons","import_themes","import_themes","RadixButton","import_themes","import_react","import_jsx_runtime","RadixBadge","import_themes","import_themes","import_themes","import_react","import_jsx_runtime","RadixText","import_react","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/molecules/tag-selector.tsx","../../src/atoms/popover.tsx","../../src/atoms/flex.tsx","../../src/atoms/button.tsx","../../src/utils/convert-button-size.ts","../../src/atoms/badge.tsx","../../src/icon.ts","../../src/atoms/scroll-area.tsx","../../src/atoms/grid.tsx","../../src/atoms/typo.tsx","../../src/atoms/auto-sizing-input.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronRightIcon,\n  Cross1Icon,\n  MagnifyingGlassIcon,\n} from '@radix-ui/react-icons';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport type { BadgeProps } from '../atoms/badge';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\nimport type { TypoProps } from '../atoms';\nimport { AutoSizingInput, Typo } from '../atoms';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n  style?: React.CSSProperties;\n  size?: 'large' | 'medium' | 'small';\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n    onChange,\n    size = 'medium',\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n  const [focus, setFocus] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const closeRef = useRef<ReturnType<typeof setTimeout>>();\n\n  const onFocus = useCallback(() => {\n    clearTimeout(closeRef.current);\n    setFocus(true);\n    setOpen(true);\n  }, []);\n\n  const onBlur = useCallback(() => {\n    closeRef.current = setTimeout(() => {\n      setFocus(false);\n      setOpen(false);\n      setTimeout(() => {\n        setValue('');\n      }, 100);\n    }, 300);\n  }, []);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          setValue('');\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex]?.id);\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  const placeholderVisible = useMemo(() => {\n    if (selectedItem.length) return false;\n    if (value) return false;\n    if (focus) return false;\n    return true;\n  }, [focus, selectedItem.length, value]);\n\n  useEffect(() => {\n    onChange?.(selected);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...selected].sort().join(',')]);\n\n  useEffect(() => {\n    setSelected(props.selected || []);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- 주소값 변경 방지\n  }, [[...(props.selected || [])].sort().join(',')]);\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  const badgeSize = useMemo<BadgeProps['size']>(() => {\n    switch (size) {\n      case 'large':\n        return 'large';\n      case 'medium':\n      case 'small':\n      default:\n        return 'small';\n    }\n  }, [size]);\n\n  const placeholderVariant = useMemo<TypoProps['variant']>(() => {\n    switch (size) {\n      case 'large':\n        return 'subtitle';\n      case 'medium':\n      default:\n        return 'body';\n    }\n  }, [size]);\n\n  return (\n    <Popover.Root open={Boolean(filteredOptions.length) && open}>\n      <Popover.Trigger>\n        <Grid\n          align=\"center\"\n          className={`tag-selector ${focus ? 'focused' : ''} ${size}`}\n          columns=\"1fr auto\"\n          gap=\"1\"\n          onClick={() => fieldRef.current?.focus()}\n        >\n          <Flex\n            align=\"center\"\n            gap=\"1\"\n            maxWidth=\"100%\"\n            overflow=\"hidden\"\n            wrap=\"wrap\"\n          >\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id} size={badgeSize}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n            {placeholderVisible ? (\n              <Typo color=\"gray\" variant={placeholderVariant}>\n                {placeholder}\n              </Typo>\n            ) : null}\n            <AutoSizingInput\n              onBlur={onBlur}\n              onChange={onChangeValue}\n              onFocus={onFocus}\n              onKeyDown={handleKeyDown}\n              ref={fieldRef}\n              value={value}\n            />\n          </Flex>\n          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n","export { Popover } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import React, { forwardRef, useMemo } from 'react';\nimport { Button as RadixButton } from '@radix-ui/themes';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactElement => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const mergedStyle = useMemo<ButtonProps['style']>(() => {\n      const baseStyle = {\n        background: variant === 'transparent' ? 'transparent' : undefined,\n        fontWeight: 400,\n      };\n      return { ...baseStyle, ...style };\n    }, [style, variant]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    return (\n      <RadixButton\n        style={mergedStyle}\n        variant={radixVariant}\n        {...restProps}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n","import {\n  Badge as RadixBadge,\n  type BadgeProps as RadixBadgeProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n  color?: 'error' | 'accent' | 'neutral' | 'success';\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (props: BadgeProps, ref): React.ReactElement => {\n    const { size = 'small', color = 'accent', ...rest } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n        default:\n          return '1';\n      }\n    }, [size]);\n\n    const radixColor = useMemo(() => {\n      switch (color) {\n        case 'error':\n          return 'red';\n        case 'neutral':\n          return 'gray';\n        case 'success':\n          return 'green';\n        case 'accent':\n        default:\n          return undefined;\n      }\n    }, [color]);\n\n    return (\n      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n  CheckCircledIcon,\n} from '@radix-ui/react-icons';\n","export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';\n","export { Grid, type GridProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactElement => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n      switch (variant) {\n        case 'caption':\n          return '1';\n        case 'subtitle':\n          return '3';\n        case 'body':\n        default:\n          return '2';\n      }\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type { DetailedHTMLProps } from 'react';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface AutoSizingInputProps\n  extends DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  > {\n  value?: string;\n  onChangeValue?: (value: string) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const AutoSizingInput = forwardRef<\n  HTMLInputElement,\n  AutoSizingInputProps\n>(\n  (\n    { value: _value, onChangeValue, onChange, ...rest },\n    ref\n  ): React.ReactNode => {\n    const [value, setValue] = useState(_value);\n    const [width, setWidth] = useState(0);\n    const span = useRef<HTMLSpanElement>(null);\n\n    useEffect(() => {\n      span.current && setWidth(span.current.offsetWidth);\n    }, [value]);\n\n    const changeHandler = useCallback<\n      React.ChangeEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        onChange?.(evt);\n        setValue(evt.target.value);\n      },\n      [onChange]\n    );\n\n    useEffect(() => {\n      setValue(_value || '');\n    }, [_value]);\n\n    useEffect(() => {\n      onChangeValue?.(value || '');\n    }, [value, onChangeValue]);\n\n    return (\n      <div className=\"auto-sizing-input wrapper\" style={{ width: width + 24 }}>\n        <input onChange={changeHandler} ref={ref} value={value} {...rest} />\n        <span aria-hidden=\"true\" ref={span}>\n          {value}\n        </span>\n      </div>\n    );\n  }\n);\n\nAutoSizingInput.displayName = 'AutoSizingInput';\n"],"mappings":"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","names":["import_react","import_react_icons","import_themes","import_themes","RadixButton","import_themes","import_react","import_jsx_runtime","RadixBadge","import_themes","import_themes","import_themes","import_react","import_jsx_runtime","RadixText","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/molecules/tag-selector.js

@@ -1,65 +1,65 @@
 import {
   TagSelector
-} from "../chunk-2E772Q7M.js";
+} from "../chunk-66QBRZEL.js";
 import "../chunk-KTVZ4KLX.js";
+import "../chunk-MOAXPZLZ.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
 import "../chunk-CYYWMYE7.js";
+import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
-import "../chunk-JPIZP2PZ.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-3JRNKBMN.js";
-import "../chunk-HYITAA4J.js";
+import "../chunk-O3T3TM3V.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-SIM6HKVI.js";
-import "../chunk-5X3BCQPR.js";
+import "../chunk-HCTV6GJG.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
-import "../chunk-YO3BQW6S.js";
+import "../chunk-UC627KGO.js";
+import "../chunk-4WFMOFN2.js";
+import "../chunk-WKFZ5MMN.js";
+import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
-import "../chunk-DJN2IEY6.js";
+import "../chunk-QDZS4B6A.js";
+import "../chunk-52MVZ6AN.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-2CVXGGI5.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HK224ADT.js";
-import "../chunk-O3T3TM3V.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-LZJR77Q2.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-BDVTRPXG.js";
-import "../chunk-UC627KGO.js";
-import "../chunk-4WFMOFN2.js";
-import "../chunk-WKFZ5MMN.js";
-import "../chunk-ACVANQJ4.js";
-import "../chunk-52MVZ6AN.js";
+import "../chunk-3SSSCLJ5.js";
+import "../chunk-EWD4AO5N.js";
+import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-U7JPP7WJ.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-ZD7MNMED.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-UVKNLJDZ.js";
-import "../chunk-MIMJ7LON.js";
-import "../chunk-IQEEPHOY.js";
-import "../chunk-LHCDPZ5E.js";
-import "../chunk-66C4U3BG.js";
+import "../chunk-FWNTKFWE.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-YJCCE5WP.js";
-import "../chunk-3SSSCLJ5.js";
-import "../chunk-EWD4AO5N.js";
-import "../chunk-YGL6SWKN.js";
 import "../chunk-N552FDTV.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "private": false,
   "sideEffects": false,
   "type": "module",

package/src/atoms/index.ts

@@ -52,5 +52,5 @@ export * from './field-error-wrapper';
 export * from './ellipsis-tooltip';
 export * from './drawer';
 export * from './toast';
-export * from './form';
+export * from '../molecules/form';
 export * from './auto-sizing-input';

package/src/icon.ts

@@ -33,4 +33,5 @@ export {
   RowsIcon,
   Share1Icon,
   ClipboardCopyIcon,
+  CheckCircledIcon,
 } from '@radix-ui/react-icons';

package/src/molecules/form.tsx

@@ -0,0 +1,122 @@
+import * as RadixForm from '@radix-ui/react-form';
+import { createContext, forwardRef, useContext } from 'react';
+import type { HeadingProps } from '@radix-ui/themes';
+import { Heading } from '../atoms/heading';
+import { Typo } from '../atoms/typo';
+
+const Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <RadixForm.Root
+        {...rest}
+        className={`FormRoot ${className || ''}`}
+        ref={ref}
+      >
+        {children}
+      </RadixForm.Root>
+    );
+  }
+);
+
+Root.displayName = 'FORM_ROOT';
+
+type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };
+
+const FieldContext = createContext<FormFieldProps>({
+  name: '',
+});
+
+const Field = forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <RadixForm.Field
+        {...rest}
+        className={`FormField ${className || ''}`}
+        ref={ref}
+      >
+        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>
+      </RadixForm.Field>
+    );
+  }
+);
+Field.displayName = 'FORM_FIELD';
+
+type LabelProps = RadixForm.FormLabelProps & {
+  /** label의 타입을 지정  */
+  variant?: 'title' | 'body';
+};
+
+function HeadingLabel(props: HeadingProps): React.ReactElement {
+  return (
+    <Heading variant="heading5" {...props}>
+      {props.children}
+    </Heading>
+  );
+}
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ children, className, variant = 'body', ...rest }, ref) => {
+    const Comp = variant === 'title' ? HeadingLabel : Typo;
+    const fieldProps = useContext(FieldContext);
+    return (
+      <RadixForm.Label
+        {...rest}
+        asChild
+        className={`FormLabel ${className || ''}`}
+        ref={ref}
+      >
+        <Comp>
+          {children}
+          {fieldProps.required ? (
+            <Typo as="span" color="tomato">
+              {` *`}
+            </Typo>
+          ) : null}
+        </Comp>
+      </RadixForm.Label>
+    );
+  }
+);
+Label.displayName = 'FORM_Label';
+
+const Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <RadixForm.Message
+        {...rest}
+        asChild
+        className={`FormMessage ${className || ''}`}
+        ref={ref}
+      >
+        <Typo color="red">{children}</Typo>
+      </RadixForm.Message>
+    );
+  }
+);
+Message.displayName = 'FORM_Message';
+
+type ControlProps = Omit<RadixForm.FormControlProps, 'required'>;
+const Control = forwardRef<HTMLInputElement, ControlProps>(
+  ({ className, ...rest }, ref) => {
+    const fieldProps = useContext(FieldContext);
+    return (
+      <RadixForm.Control
+        {...rest}
+        className={`FormControl ${className || ''}`}
+        ref={ref}
+        required={fieldProps.required}
+      />
+    );
+  }
+);
+Control.displayName = 'FORM_Control';
+
+export const Form = {
+  Root,
+  Field,
+  Label,
+  Message,
+  ValidityState,
+  Control: RadixForm.Control,
+  Submit: RadixForm.Submit,
+};

package/src/atoms/form.tsx

@@ -1,72 +0,0 @@
-import * as RadixForm from '@radix-ui/react-form';
-import { forwardRef } from 'react';
-
-const Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Root
-        {...rest}
-        className={`FormRoot ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Root>
-    );
-  }
-);
-
-Root.displayName = 'FORM_ROOT';
-
-const Field = forwardRef<HTMLDivElement, RadixForm.FormFieldProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Field
-        {...rest}
-        className={`FormField ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Field>
-    );
-  }
-);
-Field.displayName = 'FORM_FIELD';
-
-const Label = forwardRef<HTMLLabelElement, RadixForm.FormLabelProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Label
-        {...rest}
-        className={`FormLabel ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Label>
-    );
-  }
-);
-Label.displayName = 'FORM_Label';
-
-const Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <RadixForm.Message
-        {...rest}
-        className={`FormMessage ${className || ''}`}
-        ref={ref}
-      >
-        {children}
-      </RadixForm.Message>
-    );
-  }
-);
-Message.displayName = 'FORM_Message';
-
-export const Form = {
-  Root,
-  Field,
-  Label,
-  Message,
-  Control: RadixForm.Control,
-  Submit: RadixForm.Submit,
-};