@nurimedia/react-ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/AlertDialog/index.cjs +1 -0
  2. package/dist/AlertDialog/index.cjs.map +1 -1
  3. package/dist/AlertDialog/index.js +2 -0
  4. package/dist/AlertDialog/index.js.map +1 -1
  5. package/dist/Button/index.cjs +1 -0
  6. package/dist/Button/index.cjs.map +1 -1
  7. package/dist/Button/index.js +2 -0
  8. package/dist/Button/index.js.map +1 -1
  9. package/dist/Checkbox/index.cjs +1 -0
  10. package/dist/Checkbox/index.cjs.map +1 -1
  11. package/dist/Checkbox/index.js +2 -0
  12. package/dist/Checkbox/index.js.map +1 -1
  13. package/dist/Input/index.cjs +1 -0
  14. package/dist/Input/index.cjs.map +1 -1
  15. package/dist/Input/index.js +2 -0
  16. package/dist/Input/index.js.map +1 -1
  17. package/dist/Modal/index.cjs +1 -0
  18. package/dist/Modal/index.cjs.map +1 -1
  19. package/dist/Modal/index.js +2 -0
  20. package/dist/Modal/index.js.map +1 -1
  21. package/dist/Radio/index.cjs +1 -0
  22. package/dist/Radio/index.cjs.map +1 -1
  23. package/dist/Radio/index.js +2 -0
  24. package/dist/Radio/index.js.map +1 -1
  25. package/dist/Select/index.cjs +1 -0
  26. package/dist/Select/index.cjs.map +1 -1
  27. package/dist/Select/index.js +2 -0
  28. package/dist/Select/index.js.map +1 -1
  29. package/dist/Switch/index.cjs +1 -0
  30. package/dist/Switch/index.cjs.map +1 -1
  31. package/dist/Switch/index.js +2 -0
  32. package/dist/Switch/index.js.map +1 -1
  33. package/dist/Textarea/index.cjs +1 -0
  34. package/dist/Textarea/index.cjs.map +1 -1
  35. package/dist/Textarea/index.js +2 -0
  36. package/dist/Textarea/index.js.map +1 -1
  37. package/dist/Toast/index.cjs +1 -0
  38. package/dist/Toast/index.cjs.map +1 -1
  39. package/dist/Toast/index.js +2 -0
  40. package/dist/Toast/index.js.map +1 -1
  41. package/dist/Tooltip/index.cjs +1 -0
  42. package/dist/Tooltip/index.cjs.map +1 -1
  43. package/dist/Tooltip/index.js +2 -0
  44. package/dist/Tooltip/index.js.map +1 -1
  45. package/dist/index.cjs +1 -0
  46. package/dist/index.cjs.map +1 -1
  47. package/dist/index.js +2 -0
  48. package/dist/index.js.map +1 -1
  49. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Radio/Radio.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface RadioGroupProps {\n children: ReactNode;\n /** 선택된 값 (제어형). */\n value?: string;\n /** 초기 값 (비제어형). */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** 배치 방향 — 키보드 화살표 탐색 방향에도 반영됨. @default 'vertical' */\n orientation?: 'vertical' | 'horizontal';\n disabled?: boolean;\n /** 폼 전송용 name. */\n name?: string;\n required?: boolean;\n className?: string;\n /** 그룹의 접근 가능한 이름 (시각 제목이 없을 때 필수). */\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n}\n\n/**\n * 라디오 그룹. Radix RadioGroup 기반 — 화살표 키 그룹 탐색·단일 선택·폼 참여 자동.\n * 그룹에 `aria-label`(또는 aria-labelledby)을 지정한다.\n *\n * @example\n * <RadioGroup aria-label=\"정렬\" value={sort} onValueChange={setSort}>\n * <Radio value=\"latest\" label=\"최신순\" />\n * <Radio value=\"edited\" label=\"수정순\" />\n * </RadioGroup>\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n { children, orientation = 'vertical', className, ...rest },\n ref,\n) {\n return (\n <RadixRadioGroup.Root\n ref={ref}\n orientation={orientation}\n className={cx('nuri-radio-group', `nuri-radio-group--${orientation}`, className)}\n {...rest}\n >\n {children}\n </RadixRadioGroup.Root>\n );\n});\n\nexport interface RadioProps {\n /** 이 항목이 나타내는 값. */\n value: string;\n /** 라벨 (컨트롤 우측). 없으면 `aria-label` 필수. */\n label?: ReactNode;\n disabled?: boolean;\n id?: string;\n className?: string;\n 'aria-label'?: string;\n}\n\n/** 라디오 항목 — 반드시 RadioGroup 안에서 사용. */\nexport const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(\n { value, label, disabled = false, id: idProp, className, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-radio-${reactId}`;\n\n return (\n <div className={cx('nuri-radio', className)}>\n <RadixRadioGroup.Item\n ref={ref}\n id={id}\n value={value}\n disabled={disabled}\n className=\"nuri-radio__control\"\n {...rest}\n >\n <RadixRadioGroup.Indicator className=\"nuri-radio__indicator\" />\n </RadixRadioGroup.Item>\n {label != null && (\n <label htmlFor={id} className=\"nuri-radio__label\">\n {label}\n </label>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,YAAY,qBAAqB;AACjC,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADoCI,cA+BA,YA/BA;AALG,IAAM,aAAa,WAA4C,SAASA,YAC7E,EAAE,UAAU,cAAc,YAAY,WAAW,GAAG,KAAK,GACzD,KACA;AACA,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,oBAAoB,qBAAqB,WAAW,IAAI,SAAS;AAAA,MAC9E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAcM,IAAM,QAAQ,WAA0C,SAASC,OACtE,EAAE,OAAO,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GACjE,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,cAAc,OAAO;AAE1C,SACE,qBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GACxC;AAAA;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAiB,2BAAhB,EAA0B,WAAU,yBAAwB;AAAA;AAAA,IAC/D;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,qBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["RadioGroup","Radio"]}
1
+ {"version":3,"sources":["../../src/Radio/Radio.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface RadioGroupProps {\n children: ReactNode;\n /** 선택된 값 (제어형). */\n value?: string;\n /** 초기 값 (비제어형). */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** 배치 방향 — 키보드 화살표 탐색 방향에도 반영됨. @default 'vertical' */\n orientation?: 'vertical' | 'horizontal';\n disabled?: boolean;\n /** 폼 전송용 name. */\n name?: string;\n required?: boolean;\n className?: string;\n /** 그룹의 접근 가능한 이름 (시각 제목이 없을 때 필수). */\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n}\n\n/**\n * 라디오 그룹. Radix RadioGroup 기반 — 화살표 키 그룹 탐색·단일 선택·폼 참여 자동.\n * 그룹에 `aria-label`(또는 aria-labelledby)을 지정한다.\n *\n * @example\n * <RadioGroup aria-label=\"정렬\" value={sort} onValueChange={setSort}>\n * <Radio value=\"latest\" label=\"최신순\" />\n * <Radio value=\"edited\" label=\"수정순\" />\n * </RadioGroup>\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n { children, orientation = 'vertical', className, ...rest },\n ref,\n) {\n return (\n <RadixRadioGroup.Root\n ref={ref}\n orientation={orientation}\n className={cx('nuri-radio-group', `nuri-radio-group--${orientation}`, className)}\n {...rest}\n >\n {children}\n </RadixRadioGroup.Root>\n );\n});\n\nexport interface RadioProps {\n /** 이 항목이 나타내는 값. */\n value: string;\n /** 라벨 (컨트롤 우측). 없으면 `aria-label` 필수. */\n label?: ReactNode;\n disabled?: boolean;\n id?: string;\n className?: string;\n 'aria-label'?: string;\n}\n\n/** 라디오 항목 — 반드시 RadioGroup 안에서 사용. */\nexport const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(\n { value, label, disabled = false, id: idProp, className, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-radio-${reactId}`;\n\n return (\n <div className={cx('nuri-radio', className)}>\n <RadixRadioGroup.Item\n ref={ref}\n id={id}\n value={value}\n disabled={disabled}\n className=\"nuri-radio__control\"\n {...rest}\n >\n <RadixRadioGroup.Indicator className=\"nuri-radio__indicator\" />\n </RadixRadioGroup.Item>\n {label != null && (\n <label htmlFor={id} className=\"nuri-radio__label\">\n {label}\n </label>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;AAEA,OAAO;AACP,YAAY,qBAAqB;AACjC,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADoCI,cA+BA,YA/BA;AALG,IAAM,aAAa,WAA4C,SAASA,YAC7E,EAAE,UAAU,cAAc,YAAY,WAAW,GAAG,KAAK,GACzD,KACA;AACA,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,oBAAoB,qBAAqB,WAAW,IAAI,SAAS;AAAA,MAC9E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAcM,IAAM,QAAQ,WAA0C,SAASC,OACtE,EAAE,OAAO,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GACjE,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,cAAc,OAAO;AAE1C,SACE,qBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GACxC;AAAA;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAiB,2BAAhB,EAA0B,WAAU,yBAAwB;AAAA;AAAA,IAC/D;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,qBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["RadioGroup","Radio"]}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Select/index.ts","../../src/Select/Select.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Select } from './Select.js';\nexport type { SelectProps, SelectOption } from './Select.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface SelectOption {\n value: string;\n label: ReactNode;\n disabled?: boolean;\n}\n\nexport interface SelectProps {\n /** 선택지 목록. */\n options: SelectOption[];\n /**\n * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).\n * @default 'md'\n */\n size?: Size;\n /** 값이 없을 때 트리거에 표시할 문구. */\n placeholder?: ReactNode;\n /** 선택된 값 (제어형). */\n value?: string;\n /** 초기 값 (비제어형). */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** 열림 상태 제어 (선택). */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */\n name?: string;\n required?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 트리거에 추가할 className. */\n className?: string;\n /** 시각 라벨이 없을 때 접근 가능한 이름. */\n 'aria-label'?: string;\n}\n\n/** 디자인 시스템의 8px 삼각 캐럿 (열림 시 CSS로 회전). */\nconst CaretIcon = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M1.1 2.5h5.8L4 5.9z\" fill=\"currentColor\" />\n </svg>\n);\n\n/**\n * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·\n * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.\n *\n * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.\n *\n * @example\n * <Select\n * aria-label=\"정렬\"\n * placeholder=\"정렬 선택\"\n * options={[\n * { value: 'latest', label: '최신순' },\n * { value: 'edited', label: '수정순' },\n * ]}\n * onValueChange={setSort}\n * />\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n size = 'md',\n placeholder,\n value,\n defaultValue,\n onValueChange,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n block = false,\n name,\n required,\n container,\n className,\n 'aria-label': ariaLabel,\n },\n ref,\n) {\n return (\n <RadixSelect.Root\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disabled={disabled}\n name={name}\n required={required}\n >\n <RadixSelect.Trigger\n ref={ref}\n aria-label={ariaLabel}\n className={cx(\n 'nuri-select__trigger',\n `nuri-select__trigger--${size}`,\n block && 'nuri-select__trigger--block',\n className,\n )}\n >\n <span className=\"nuri-select__value\">\n <RadixSelect.Value placeholder={placeholder} />\n </span>\n <RadixSelect.Icon className=\"nuri-select__caret\">\n <CaretIcon />\n </RadixSelect.Icon>\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal container={container}>\n <RadixSelect.Content className=\"nuri-select__content\" position=\"popper\" sideOffset={6}>\n <RadixSelect.Viewport className=\"nuri-select__viewport\">\n {options.map((option) => (\n <RadixSelect.Item\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className=\"nuri-select__item\"\n >\n <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,kBAA6B;AAC7B,mBAA2B;;;ACApB,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD8CI;AAFJ,IAAM,YAAY,MAChB,4CAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,eAAY,QAClE,sDAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe,GACpD;AAoBK,IAAM,aAAS,yBAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAa;AAAA,UAAZ;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,yBAAyB,IAAI;AAAA,cAC7B,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YAEA;AAAA,0DAAC,UAAK,WAAU,sBACd,sDAAa,mBAAZ,EAAkB,aAA0B,GAC/C;AAAA,cACA,4CAAa,kBAAZ,EAAiB,WAAU,sBAC1B,sDAAC,aAAU,GACb;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,4CAAa,oBAAZ,EAAmB,WAClB,sDAAa,qBAAZ,EAAoB,WAAU,wBAAuB,UAAS,UAAS,YAAY,GAClF,sDAAa,sBAAZ,EAAqB,WAAU,yBAC7B,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAa;AAAA,UAAZ;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,WAAU;AAAA,YAEV,sDAAa,sBAAZ,EAAsB,iBAAO,OAAM;AAAA;AAAA,UAL/B,OAAO;AAAA,QAMd,CACD,GACH,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}
1
+ {"version":3,"sources":["../../src/Select/index.ts","../../src/Select/Select.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Select } from './Select.js';\nexport type { SelectProps, SelectOption } from './Select.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface SelectOption {\n value: string;\n label: ReactNode;\n disabled?: boolean;\n}\n\nexport interface SelectProps {\n /** 선택지 목록. */\n options: SelectOption[];\n /**\n * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).\n * @default 'md'\n */\n size?: Size;\n /** 값이 없을 때 트리거에 표시할 문구. */\n placeholder?: ReactNode;\n /** 선택된 값 (제어형). */\n value?: string;\n /** 초기 값 (비제어형). */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** 열림 상태 제어 (선택). */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */\n name?: string;\n required?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 트리거에 추가할 className. */\n className?: string;\n /** 시각 라벨이 없을 때 접근 가능한 이름. */\n 'aria-label'?: string;\n}\n\n/** 디자인 시스템의 8px 삼각 캐럿 (열림 시 CSS로 회전). */\nconst CaretIcon = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M1.1 2.5h5.8L4 5.9z\" fill=\"currentColor\" />\n </svg>\n);\n\n/**\n * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·\n * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.\n *\n * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.\n *\n * @example\n * <Select\n * aria-label=\"정렬\"\n * placeholder=\"정렬 선택\"\n * options={[\n * { value: 'latest', label: '최신순' },\n * { value: 'edited', label: '수정순' },\n * ]}\n * onValueChange={setSort}\n * />\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n size = 'md',\n placeholder,\n value,\n defaultValue,\n onValueChange,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n block = false,\n name,\n required,\n container,\n className,\n 'aria-label': ariaLabel,\n },\n ref,\n) {\n return (\n <RadixSelect.Root\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disabled={disabled}\n name={name}\n required={required}\n >\n <RadixSelect.Trigger\n ref={ref}\n aria-label={ariaLabel}\n className={cx(\n 'nuri-select__trigger',\n `nuri-select__trigger--${size}`,\n block && 'nuri-select__trigger--block',\n className,\n )}\n >\n <span className=\"nuri-select__value\">\n <RadixSelect.Value placeholder={placeholder} />\n </span>\n <RadixSelect.Icon className=\"nuri-select__caret\">\n <CaretIcon />\n </RadixSelect.Icon>\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal container={container}>\n <RadixSelect.Content className=\"nuri-select__content\" position=\"popper\" sideOffset={6}>\n <RadixSelect.Viewport className=\"nuri-select__viewport\">\n {options.map((option) => (\n <RadixSelect.Item\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className=\"nuri-select__item\"\n >\n <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,kBAA6B;AAC7B,mBAA2B;;;ACApB,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD8CI;AAFJ,IAAM,YAAY,MAChB,4CAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,eAAY,QAClE,sDAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe,GACpD;AAoBK,IAAM,aAAS,yBAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAa;AAAA,UAAZ;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,yBAAyB,IAAI;AAAA,cAC7B,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YAEA;AAAA,0DAAC,UAAK,WAAU,sBACd,sDAAa,mBAAZ,EAAkB,aAA0B,GAC/C;AAAA,cACA,4CAAa,kBAAZ,EAAiB,WAAU,sBAC1B,sDAAC,aAAU,GACb;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,4CAAa,oBAAZ,EAAmB,WAClB,sDAAa,qBAAZ,EAAoB,WAAU,wBAAuB,UAAS,UAAS,YAAY,GAClF,sDAAa,sBAAZ,EAAqB,WAAU,yBAC7B,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAa;AAAA,UAAZ;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,WAAU;AAAA,YAEV,sDAAa,sBAAZ,EAAsB,iBAAO,OAAM;AAAA;AAAA,UAL/B,OAAO;AAAA,QAMd,CACD,GACH,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  // src/Select/Select.tsx
2
4
  import "./styles.css";
3
5
  import * as RadixSelect from "@radix-ui/react-select";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Select/Select.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface SelectOption {\n value: string;\n label: ReactNode;\n disabled?: boolean;\n}\n\nexport interface SelectProps {\n /** 선택지 목록. */\n options: SelectOption[];\n /**\n * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).\n * @default 'md'\n */\n size?: Size;\n /** 값이 없을 때 트리거에 표시할 문구. */\n placeholder?: ReactNode;\n /** 선택된 값 (제어형). */\n value?: string;\n /** 초기 값 (비제어형). */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** 열림 상태 제어 (선택). */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */\n name?: string;\n required?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 트리거에 추가할 className. */\n className?: string;\n /** 시각 라벨이 없을 때 접근 가능한 이름. */\n 'aria-label'?: string;\n}\n\n/** 디자인 시스템의 8px 삼각 캐럿 (열림 시 CSS로 회전). */\nconst CaretIcon = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M1.1 2.5h5.8L4 5.9z\" fill=\"currentColor\" />\n </svg>\n);\n\n/**\n * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·\n * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.\n *\n * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.\n *\n * @example\n * <Select\n * aria-label=\"정렬\"\n * placeholder=\"정렬 선택\"\n * options={[\n * { value: 'latest', label: '최신순' },\n * { value: 'edited', label: '수정순' },\n * ]}\n * onValueChange={setSort}\n * />\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n size = 'md',\n placeholder,\n value,\n defaultValue,\n onValueChange,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n block = false,\n name,\n required,\n container,\n className,\n 'aria-label': ariaLabel,\n },\n ref,\n) {\n return (\n <RadixSelect.Root\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disabled={disabled}\n name={name}\n required={required}\n >\n <RadixSelect.Trigger\n ref={ref}\n aria-label={ariaLabel}\n className={cx(\n 'nuri-select__trigger',\n `nuri-select__trigger--${size}`,\n block && 'nuri-select__trigger--block',\n className,\n )}\n >\n <span className=\"nuri-select__value\">\n <RadixSelect.Value placeholder={placeholder} />\n </span>\n <RadixSelect.Icon className=\"nuri-select__caret\">\n <CaretIcon />\n </RadixSelect.Icon>\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal container={container}>\n <RadixSelect.Content className=\"nuri-select__content\" position=\"popper\" sideOffset={6}>\n <RadixSelect.Viewport className=\"nuri-select__viewport\">\n {options.map((option) => (\n <RadixSelect.Item\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className=\"nuri-select__item\"\n >\n <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,YAAY,iBAAiB;AAC7B,SAAS,kBAAkB;;;ACApB,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD8CI,cAsDE,YAtDF;AAFJ,IAAM,YAAY,MAChB,oBAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,eAAY,QAClE,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe,GACpD;AAoBK,IAAM,SAAS,WAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAa;AAAA,UAAZ;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,yBAAyB,IAAI;AAAA,cAC7B,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YAEA;AAAA,kCAAC,UAAK,WAAU,sBACd,8BAAa,mBAAZ,EAAkB,aAA0B,GAC/C;AAAA,cACA,oBAAa,kBAAZ,EAAiB,WAAU,sBAC1B,8BAAC,aAAU,GACb;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,oBAAa,oBAAZ,EAAmB,WAClB,8BAAa,qBAAZ,EAAoB,WAAU,wBAAuB,UAAS,UAAS,YAAY,GAClF,8BAAa,sBAAZ,EAAqB,WAAU,yBAC7B,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAa;AAAA,UAAZ;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,WAAU;AAAA,YAEV,8BAAa,sBAAZ,EAAsB,iBAAO,OAAM;AAAA;AAAA,UAL/B,OAAO;AAAA,QAMd,CACD,GACH,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}
1
+ {"version":3,"sources":["../../src/Select/Select.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface SelectOption {\n value: string;\n label: ReactNode;\n disabled?: boolean;\n}\n\nexport interface SelectProps {\n /** 선택지 목록. */\n options: SelectOption[];\n /**\n * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).\n * @default 'md'\n */\n size?: Size;\n /** 값이 없을 때 트리거에 표시할 문구. */\n placeholder?: ReactNode;\n /** 선택된 값 (제어형). */\n value?: string;\n /** 초기 값 (비제어형). */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** 열림 상태 제어 (선택). */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */\n name?: string;\n required?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 트리거에 추가할 className. */\n className?: string;\n /** 시각 라벨이 없을 때 접근 가능한 이름. */\n 'aria-label'?: string;\n}\n\n/** 디자인 시스템의 8px 삼각 캐럿 (열림 시 CSS로 회전). */\nconst CaretIcon = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M1.1 2.5h5.8L4 5.9z\" fill=\"currentColor\" />\n </svg>\n);\n\n/**\n * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·\n * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.\n *\n * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.\n *\n * @example\n * <Select\n * aria-label=\"정렬\"\n * placeholder=\"정렬 선택\"\n * options={[\n * { value: 'latest', label: '최신순' },\n * { value: 'edited', label: '수정순' },\n * ]}\n * onValueChange={setSort}\n * />\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n size = 'md',\n placeholder,\n value,\n defaultValue,\n onValueChange,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n block = false,\n name,\n required,\n container,\n className,\n 'aria-label': ariaLabel,\n },\n ref,\n) {\n return (\n <RadixSelect.Root\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disabled={disabled}\n name={name}\n required={required}\n >\n <RadixSelect.Trigger\n ref={ref}\n aria-label={ariaLabel}\n className={cx(\n 'nuri-select__trigger',\n `nuri-select__trigger--${size}`,\n block && 'nuri-select__trigger--block',\n className,\n )}\n >\n <span className=\"nuri-select__value\">\n <RadixSelect.Value placeholder={placeholder} />\n </span>\n <RadixSelect.Icon className=\"nuri-select__caret\">\n <CaretIcon />\n </RadixSelect.Icon>\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal container={container}>\n <RadixSelect.Content className=\"nuri-select__content\" position=\"popper\" sideOffset={6}>\n <RadixSelect.Viewport className=\"nuri-select__viewport\">\n {options.map((option) => (\n <RadixSelect.Item\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className=\"nuri-select__item\"\n >\n <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;AAEA,OAAO;AACP,YAAY,iBAAiB;AAC7B,SAAS,kBAAkB;;;ACApB,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD8CI,cAsDE,YAtDF;AAFJ,IAAM,YAAY,MAChB,oBAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,eAAY,QAClE,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe,GACpD;AAoBK,IAAM,SAAS,WAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAa;AAAA,UAAZ;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,yBAAyB,IAAI;AAAA,cAC7B,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YAEA;AAAA,kCAAC,UAAK,WAAU,sBACd,8BAAa,mBAAZ,EAAkB,aAA0B,GAC/C;AAAA,cACA,oBAAa,kBAAZ,EAAiB,WAAU,sBAC1B,8BAAC,aAAU,GACb;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,oBAAa,oBAAZ,EAAmB,WAClB,8BAAa,qBAAZ,EAAoB,WAAU,wBAAuB,UAAS,UAAS,YAAY,GAClF,8BAAa,sBAAZ,EAAqB,WAAU,yBAC7B,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAa;AAAA,UAAZ;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,WAAU;AAAA,YAEV,8BAAa,sBAAZ,EAAsB,iBAAO,OAAM;AAAA;AAAA,UAL/B,OAAO;AAAA,QAMd,CACD,GACH,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Switch/index.ts","../../src/Switch/Switch.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Switch } from './Switch.js';\nexport type { SwitchProps } from './Switch.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface SwitchProps {\n /**\n * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,\n * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.\n */\n label?: ReactNode;\n /** 켜짐 상태 (제어형). */\n checked?: boolean;\n /** 초기 상태 (비제어형). */\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n disabled?: boolean;\n /** 폼 전송용 name. */\n name?: string;\n /** 폼 전송 시 값. @default 'on' */\n value?: string;\n required?: boolean;\n id?: string;\n className?: string;\n 'aria-label'?: string;\n}\n\n/**\n * 스위치(토글). Radix Switch 기반 — `role=\"switch\"`·Space/Enter 토글·폼 참여 자동.\n * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).\n *\n * @example\n * <Switch label=\"알림 받기\" checked={on} onCheckedChange={setOn} />\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n { label, disabled = false, id: idProp, className, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-switch-${reactId}`;\n\n return (\n <div className={cx('nuri-switch', className)}>\n <RadixSwitch.Root\n ref={ref}\n id={id}\n className=\"nuri-switch__control\"\n disabled={disabled}\n {...rest}\n >\n <RadixSwitch.Thumb className=\"nuri-switch__thumb\" />\n </RadixSwitch.Root>\n {label != null && (\n <label htmlFor={id} className=\"nuri-switch__label\">\n {label}\n </label>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,kBAA6B;AAC7B,mBAAkC;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuCI;AARG,IAAM,aAAS,yBAA2C,SAASA,QACxE,EAAE,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GAC1D,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,eAAe,OAAO;AAE3C,SACE,6CAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA;AAAA,MAAa;AAAA,MAAZ;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEJ,sDAAa,mBAAZ,EAAkB,WAAU,sBAAqB;AAAA;AAAA,IACpD;AAAA,IACC,SAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAU,sBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Switch"]}
1
+ {"version":3,"sources":["../../src/Switch/index.ts","../../src/Switch/Switch.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Switch } from './Switch.js';\nexport type { SwitchProps } from './Switch.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface SwitchProps {\n /**\n * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,\n * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.\n */\n label?: ReactNode;\n /** 켜짐 상태 (제어형). */\n checked?: boolean;\n /** 초기 상태 (비제어형). */\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n disabled?: boolean;\n /** 폼 전송용 name. */\n name?: string;\n /** 폼 전송 시 값. @default 'on' */\n value?: string;\n required?: boolean;\n id?: string;\n className?: string;\n 'aria-label'?: string;\n}\n\n/**\n * 스위치(토글). Radix Switch 기반 — `role=\"switch\"`·Space/Enter 토글·폼 참여 자동.\n * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).\n *\n * @example\n * <Switch label=\"알림 받기\" checked={on} onCheckedChange={setOn} />\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n { label, disabled = false, id: idProp, className, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-switch-${reactId}`;\n\n return (\n <div className={cx('nuri-switch', className)}>\n <RadixSwitch.Root\n ref={ref}\n id={id}\n className=\"nuri-switch__control\"\n disabled={disabled}\n {...rest}\n >\n <RadixSwitch.Thumb className=\"nuri-switch__thumb\" />\n </RadixSwitch.Root>\n {label != null && (\n <label htmlFor={id} className=\"nuri-switch__label\">\n {label}\n </label>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,kBAA6B;AAC7B,mBAAkC;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuCI;AARG,IAAM,aAAS,yBAA2C,SAASA,QACxE,EAAE,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GAC1D,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,eAAe,OAAO;AAE3C,SACE,6CAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA;AAAA,MAAa;AAAA,MAAZ;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEJ,sDAAa,mBAAZ,EAAkB,WAAU,sBAAqB;AAAA;AAAA,IACpD;AAAA,IACC,SAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAU,sBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Switch"]}
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  // src/Switch/Switch.tsx
2
4
  import "./styles.css";
3
5
  import * as RadixSwitch from "@radix-ui/react-switch";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Switch/Switch.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface SwitchProps {\n /**\n * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,\n * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.\n */\n label?: ReactNode;\n /** 켜짐 상태 (제어형). */\n checked?: boolean;\n /** 초기 상태 (비제어형). */\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n disabled?: boolean;\n /** 폼 전송용 name. */\n name?: string;\n /** 폼 전송 시 값. @default 'on' */\n value?: string;\n required?: boolean;\n id?: string;\n className?: string;\n 'aria-label'?: string;\n}\n\n/**\n * 스위치(토글). Radix Switch 기반 — `role=\"switch\"`·Space/Enter 토글·폼 참여 자동.\n * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).\n *\n * @example\n * <Switch label=\"알림 받기\" checked={on} onCheckedChange={setOn} />\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n { label, disabled = false, id: idProp, className, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-switch-${reactId}`;\n\n return (\n <div className={cx('nuri-switch', className)}>\n <RadixSwitch.Root\n ref={ref}\n id={id}\n className=\"nuri-switch__control\"\n disabled={disabled}\n {...rest}\n >\n <RadixSwitch.Thumb className=\"nuri-switch__thumb\" />\n </RadixSwitch.Root>\n {label != null && (\n <label htmlFor={id} className=\"nuri-switch__label\">\n {label}\n </label>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,YAAY,iBAAiB;AAC7B,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuCI,SAQI,KARJ;AARG,IAAM,SAAS,WAA2C,SAASA,QACxE,EAAE,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GAC1D,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,eAAe,OAAO;AAE3C,SACE,qBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA;AAAA,MAAa;AAAA,MAAZ;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAa,mBAAZ,EAAkB,WAAU,sBAAqB;AAAA;AAAA,IACpD;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,sBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Switch"]}
1
+ {"version":3,"sources":["../../src/Switch/Switch.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface SwitchProps {\n /**\n * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,\n * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.\n */\n label?: ReactNode;\n /** 켜짐 상태 (제어형). */\n checked?: boolean;\n /** 초기 상태 (비제어형). */\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n disabled?: boolean;\n /** 폼 전송용 name. */\n name?: string;\n /** 폼 전송 시 값. @default 'on' */\n value?: string;\n required?: boolean;\n id?: string;\n className?: string;\n 'aria-label'?: string;\n}\n\n/**\n * 스위치(토글). Radix Switch 기반 — `role=\"switch\"`·Space/Enter 토글·폼 참여 자동.\n * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).\n *\n * @example\n * <Switch label=\"알림 받기\" checked={on} onCheckedChange={setOn} />\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n { label, disabled = false, id: idProp, className, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-switch-${reactId}`;\n\n return (\n <div className={cx('nuri-switch', className)}>\n <RadixSwitch.Root\n ref={ref}\n id={id}\n className=\"nuri-switch__control\"\n disabled={disabled}\n {...rest}\n >\n <RadixSwitch.Thumb className=\"nuri-switch__thumb\" />\n </RadixSwitch.Root>\n {label != null && (\n <label htmlFor={id} className=\"nuri-switch__label\">\n {label}\n </label>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;AAEA,OAAO;AACP,YAAY,iBAAiB;AAC7B,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuCI,SAQI,KARJ;AARG,IAAM,SAAS,WAA2C,SAASA,QACxE,EAAE,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GAC1D,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,eAAe,OAAO;AAE3C,SACE,qBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA;AAAA,MAAa;AAAA,MAAZ;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAa,mBAAZ,EAAkB,WAAU,sBAAqB;AAAA;AAAA,IACpD;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,sBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Switch"]}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Textarea/index.ts","../../src/Textarea/Textarea.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Textarea } from './Textarea.js';\nexport type { TextareaProps } from './Textarea.js';\n","'use client';\n\nimport './styles.css';\nimport { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';\nimport type { ChangeEvent, TextareaHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n /**\n * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.\n */\n label?: ReactNode;\n /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */\n hideLabel?: boolean;\n /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n description?: ReactNode;\n /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n invalid?: boolean;\n /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n errorMessage?: ReactNode;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /**\n * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.\n * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).\n * @default 'vertical'\n */\n resize?: 'vertical' | 'none';\n /**\n * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,\n * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.\n * @default false\n */\n autosize?: boolean;\n /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */\n maxRows?: number;\n}\n\n/**\n * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와\n * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.\n * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.\n *\n * @example\n * <Textarea label=\"문의 내용\" rows={5} block />\n *\n * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤\n * <Textarea label=\"댓글\" autosize rows={3} maxRows={8} />\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n {\n label,\n hideLabel = false,\n description,\n invalid = false,\n errorMessage,\n block = false,\n resize = 'vertical',\n autosize = false,\n maxRows,\n rows = 3,\n disabled = false,\n className,\n id: idProp,\n value,\n onChange,\n 'aria-describedby': ariaDescribedby,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-textarea-${reactId}`;\n const messageId = `${id}-message`;\n\n const innerRef = useRef<HTMLTextAreaElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLTextAreaElement | null) => {\n innerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n // autosize: height를 내용(scrollHeight)에 맞추되 maxRows 상한에서 클램프.\n const fitHeight = useCallback(() => {\n const el = innerRef.current;\n if (!el) return;\n const cs = getComputedStyle(el);\n const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n const lineHeight = parseFloat(cs.lineHeight);\n // maxRows → px 상한 (line-height 계산 불가 환경에서는 무제한)\n const maxHeight =\n maxRows != null && !Number.isNaN(lineHeight)\n ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders\n : Infinity;\n\n el.style.height = 'auto'; // 줄어드는 경우도 반영되도록 초기화 후 측정\n const contentHeight = el.scrollHeight + borders; // scrollHeight는 border 미포함(border-box 보정)\n const next = Math.min(contentHeight, maxHeight);\n if (!Number.isNaN(next)) el.style.height = `${next}px`;\n el.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';\n }, [maxRows]);\n\n // 마운트·제어형 value 변경·autosize 토글 시 재계산\n useLayoutEffect(() => {\n if (autosize) fitHeight();\n }, [autosize, fitHeight, value]);\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n if (autosize) fitHeight(); // 비제어형 입력에도 반응\n };\n\n // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄. (Input과 동일)\n const message = invalid && errorMessage != null ? errorMessage : description;\n const hasMessage = message != null;\n const describedBy =\n cx(hasMessage ? messageId : undefined, ariaDescribedby as string | undefined) || undefined;\n\n return (\n <div className={cx('nuri-textarea', block && 'nuri-textarea--block', className)}>\n {label != null && (\n <label htmlFor={id} className={cx('nuri-textarea__label', hideLabel && 'nuri-sr-only')}>\n {label}\n </label>\n )}\n\n <textarea\n ref={setRefs}\n id={id}\n rows={rows}\n value={value}\n onChange={handleChange}\n className={cx(\n 'nuri-textarea__control',\n invalid && 'nuri-textarea__control--invalid',\n (resize === 'none' || autosize) && 'nuri-textarea__control--resize-none',\n )}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-describedby={describedBy}\n {...rest}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cx('nuri-textarea__message', invalid && 'nuri-textarea__message--error')}\n >\n {message}\n </p>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,mBAAwE;;;ACCjE,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADqHI;AAzEG,IAAM,eAAW,yBAA+C,SAASA,UAC9E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAC7C,QAAM,YAAY,GAAG,EAAE;AAEvB,QAAM,eAAW,qBAAmC,IAAI;AACxD,QAAM,cAAU;AAAA,IACd,CAAC,SAAqC;AACpC,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAGA,QAAM,gBAAY,0BAAY,MAAM;AAClC,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,UAAM,UAAU,WAAW,GAAG,cAAc,IAAI,WAAW,GAAG,iBAAiB;AAC/E,UAAM,aAAa,WAAW,GAAG,UAAU;AAE3C,UAAM,YACJ,WAAW,QAAQ,CAAC,OAAO,MAAM,UAAU,IACvC,UAAU,aAAa,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,aAAa,IAAI,UAClF;AAEN,OAAG,MAAM,SAAS;AAClB,UAAM,gBAAgB,GAAG,eAAe;AACxC,UAAM,OAAO,KAAK,IAAI,eAAe,SAAS;AAC9C,QAAI,CAAC,OAAO,MAAM,IAAI,EAAG,IAAG,MAAM,SAAS,GAAG,IAAI;AAClD,OAAG,MAAM,YAAY,gBAAgB,YAAY,SAAS;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAGZ,oCAAgB,MAAM;AACpB,QAAI,SAAU,WAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,WAAW,KAAK,CAAC;AAE/B,QAAM,eAAe,CAAC,MAAwC;AAC5D,eAAW,CAAC;AACZ,QAAI,SAAU,WAAU;AAAA,EAC1B;AAGA,QAAM,UAAU,WAAW,gBAAgB,OAAO,eAAe;AACjE,QAAM,aAAa,WAAW;AAC9B,QAAM,cACJ,GAAG,aAAa,YAAY,QAAW,eAAqC,KAAK;AAEnF,SACE,6CAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,wBAAwB,SAAS,GAC3E;AAAA,aAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAW,GAAG,wBAAwB,aAAa,cAAc,GAClF,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,WACV,WAAW,UAAU,aAAa;AAAA,QACrC;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,0BAA0B,WAAW,+BAA+B;AAAA,QAEjF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Textarea"]}
1
+ {"version":3,"sources":["../../src/Textarea/index.ts","../../src/Textarea/Textarea.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Textarea } from './Textarea.js';\nexport type { TextareaProps } from './Textarea.js';\n","'use client';\n\nimport './styles.css';\nimport { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';\nimport type { ChangeEvent, TextareaHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n /**\n * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.\n */\n label?: ReactNode;\n /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */\n hideLabel?: boolean;\n /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n description?: ReactNode;\n /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n invalid?: boolean;\n /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n errorMessage?: ReactNode;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /**\n * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.\n * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).\n * @default 'vertical'\n */\n resize?: 'vertical' | 'none';\n /**\n * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,\n * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.\n * @default false\n */\n autosize?: boolean;\n /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */\n maxRows?: number;\n}\n\n/**\n * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와\n * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.\n * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.\n *\n * @example\n * <Textarea label=\"문의 내용\" rows={5} block />\n *\n * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤\n * <Textarea label=\"댓글\" autosize rows={3} maxRows={8} />\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n {\n label,\n hideLabel = false,\n description,\n invalid = false,\n errorMessage,\n block = false,\n resize = 'vertical',\n autosize = false,\n maxRows,\n rows = 3,\n disabled = false,\n className,\n id: idProp,\n value,\n onChange,\n 'aria-describedby': ariaDescribedby,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-textarea-${reactId}`;\n const messageId = `${id}-message`;\n\n const innerRef = useRef<HTMLTextAreaElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLTextAreaElement | null) => {\n innerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n // autosize: height를 내용(scrollHeight)에 맞추되 maxRows 상한에서 클램프.\n const fitHeight = useCallback(() => {\n const el = innerRef.current;\n if (!el) return;\n const cs = getComputedStyle(el);\n const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n const lineHeight = parseFloat(cs.lineHeight);\n // maxRows → px 상한 (line-height 계산 불가 환경에서는 무제한)\n const maxHeight =\n maxRows != null && !Number.isNaN(lineHeight)\n ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders\n : Infinity;\n\n el.style.height = 'auto'; // 줄어드는 경우도 반영되도록 초기화 후 측정\n const contentHeight = el.scrollHeight + borders; // scrollHeight는 border 미포함(border-box 보정)\n const next = Math.min(contentHeight, maxHeight);\n if (!Number.isNaN(next)) el.style.height = `${next}px`;\n el.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';\n }, [maxRows]);\n\n // 마운트·제어형 value 변경·autosize 토글 시 재계산\n useLayoutEffect(() => {\n if (autosize) fitHeight();\n }, [autosize, fitHeight, value]);\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n if (autosize) fitHeight(); // 비제어형 입력에도 반응\n };\n\n // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄. (Input과 동일)\n const message = invalid && errorMessage != null ? errorMessage : description;\n const hasMessage = message != null;\n const describedBy =\n cx(hasMessage ? messageId : undefined, ariaDescribedby as string | undefined) || undefined;\n\n return (\n <div className={cx('nuri-textarea', block && 'nuri-textarea--block', className)}>\n {label != null && (\n <label htmlFor={id} className={cx('nuri-textarea__label', hideLabel && 'nuri-sr-only')}>\n {label}\n </label>\n )}\n\n <textarea\n ref={setRefs}\n id={id}\n rows={rows}\n value={value}\n onChange={handleChange}\n className={cx(\n 'nuri-textarea__control',\n invalid && 'nuri-textarea__control--invalid',\n (resize === 'none' || autosize) && 'nuri-textarea__control--resize-none',\n )}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-describedby={describedBy}\n {...rest}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cx('nuri-textarea__message', invalid && 'nuri-textarea__message--error')}\n >\n {message}\n </p>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,mBAAwE;;;ACCjE,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADqHI;AAzEG,IAAM,eAAW,yBAA+C,SAASA,UAC9E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAC7C,QAAM,YAAY,GAAG,EAAE;AAEvB,QAAM,eAAW,qBAAmC,IAAI;AACxD,QAAM,cAAU;AAAA,IACd,CAAC,SAAqC;AACpC,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAGA,QAAM,gBAAY,0BAAY,MAAM;AAClC,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,UAAM,UAAU,WAAW,GAAG,cAAc,IAAI,WAAW,GAAG,iBAAiB;AAC/E,UAAM,aAAa,WAAW,GAAG,UAAU;AAE3C,UAAM,YACJ,WAAW,QAAQ,CAAC,OAAO,MAAM,UAAU,IACvC,UAAU,aAAa,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,aAAa,IAAI,UAClF;AAEN,OAAG,MAAM,SAAS;AAClB,UAAM,gBAAgB,GAAG,eAAe;AACxC,UAAM,OAAO,KAAK,IAAI,eAAe,SAAS;AAC9C,QAAI,CAAC,OAAO,MAAM,IAAI,EAAG,IAAG,MAAM,SAAS,GAAG,IAAI;AAClD,OAAG,MAAM,YAAY,gBAAgB,YAAY,SAAS;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAGZ,oCAAgB,MAAM;AACpB,QAAI,SAAU,WAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,WAAW,KAAK,CAAC;AAE/B,QAAM,eAAe,CAAC,MAAwC;AAC5D,eAAW,CAAC;AACZ,QAAI,SAAU,WAAU;AAAA,EAC1B;AAGA,QAAM,UAAU,WAAW,gBAAgB,OAAO,eAAe;AACjE,QAAM,aAAa,WAAW;AAC9B,QAAM,cACJ,GAAG,aAAa,YAAY,QAAW,eAAqC,KAAK;AAEnF,SACE,6CAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,wBAAwB,SAAS,GAC3E;AAAA,aAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAW,GAAG,wBAAwB,aAAa,cAAc,GAClF,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,WACV,WAAW,UAAU,aAAa;AAAA,QACrC;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,0BAA0B,WAAW,+BAA+B;AAAA,QAEjF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Textarea"]}
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  // src/Textarea/Textarea.tsx
2
4
  import "./styles.css";
3
5
  import { forwardRef, useCallback, useId, useLayoutEffect, useRef } from "react";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Textarea/Textarea.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';\nimport type { ChangeEvent, TextareaHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n /**\n * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.\n */\n label?: ReactNode;\n /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */\n hideLabel?: boolean;\n /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n description?: ReactNode;\n /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n invalid?: boolean;\n /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n errorMessage?: ReactNode;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /**\n * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.\n * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).\n * @default 'vertical'\n */\n resize?: 'vertical' | 'none';\n /**\n * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,\n * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.\n * @default false\n */\n autosize?: boolean;\n /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */\n maxRows?: number;\n}\n\n/**\n * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와\n * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.\n * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.\n *\n * @example\n * <Textarea label=\"문의 내용\" rows={5} block />\n *\n * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤\n * <Textarea label=\"댓글\" autosize rows={3} maxRows={8} />\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n {\n label,\n hideLabel = false,\n description,\n invalid = false,\n errorMessage,\n block = false,\n resize = 'vertical',\n autosize = false,\n maxRows,\n rows = 3,\n disabled = false,\n className,\n id: idProp,\n value,\n onChange,\n 'aria-describedby': ariaDescribedby,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-textarea-${reactId}`;\n const messageId = `${id}-message`;\n\n const innerRef = useRef<HTMLTextAreaElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLTextAreaElement | null) => {\n innerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n // autosize: height를 내용(scrollHeight)에 맞추되 maxRows 상한에서 클램프.\n const fitHeight = useCallback(() => {\n const el = innerRef.current;\n if (!el) return;\n const cs = getComputedStyle(el);\n const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n const lineHeight = parseFloat(cs.lineHeight);\n // maxRows → px 상한 (line-height 계산 불가 환경에서는 무제한)\n const maxHeight =\n maxRows != null && !Number.isNaN(lineHeight)\n ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders\n : Infinity;\n\n el.style.height = 'auto'; // 줄어드는 경우도 반영되도록 초기화 후 측정\n const contentHeight = el.scrollHeight + borders; // scrollHeight는 border 미포함(border-box 보정)\n const next = Math.min(contentHeight, maxHeight);\n if (!Number.isNaN(next)) el.style.height = `${next}px`;\n el.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';\n }, [maxRows]);\n\n // 마운트·제어형 value 변경·autosize 토글 시 재계산\n useLayoutEffect(() => {\n if (autosize) fitHeight();\n }, [autosize, fitHeight, value]);\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n if (autosize) fitHeight(); // 비제어형 입력에도 반응\n };\n\n // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄. (Input과 동일)\n const message = invalid && errorMessage != null ? errorMessage : description;\n const hasMessage = message != null;\n const describedBy =\n cx(hasMessage ? messageId : undefined, ariaDescribedby as string | undefined) || undefined;\n\n return (\n <div className={cx('nuri-textarea', block && 'nuri-textarea--block', className)}>\n {label != null && (\n <label htmlFor={id} className={cx('nuri-textarea__label', hideLabel && 'nuri-sr-only')}>\n {label}\n </label>\n )}\n\n <textarea\n ref={setRefs}\n id={id}\n rows={rows}\n value={value}\n onChange={handleChange}\n className={cx(\n 'nuri-textarea__control',\n invalid && 'nuri-textarea__control--invalid',\n (resize === 'none' || autosize) && 'nuri-textarea__control--resize-none',\n )}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-describedby={describedBy}\n {...rest}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cx('nuri-textarea__message', invalid && 'nuri-textarea__message--error')}\n >\n {message}\n </p>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,SAAS,YAAY,aAAa,OAAO,iBAAiB,cAAc;;;ACCjE,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADqHI,SAEI,KAFJ;AAzEG,IAAM,WAAW,WAA+C,SAASA,UAC9E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAC7C,QAAM,YAAY,GAAG,EAAE;AAEvB,QAAM,WAAW,OAAmC,IAAI;AACxD,QAAM,UAAU;AAAA,IACd,CAAC,SAAqC;AACpC,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAGA,QAAM,YAAY,YAAY,MAAM;AAClC,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,UAAM,UAAU,WAAW,GAAG,cAAc,IAAI,WAAW,GAAG,iBAAiB;AAC/E,UAAM,aAAa,WAAW,GAAG,UAAU;AAE3C,UAAM,YACJ,WAAW,QAAQ,CAAC,OAAO,MAAM,UAAU,IACvC,UAAU,aAAa,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,aAAa,IAAI,UAClF;AAEN,OAAG,MAAM,SAAS;AAClB,UAAM,gBAAgB,GAAG,eAAe;AACxC,UAAM,OAAO,KAAK,IAAI,eAAe,SAAS;AAC9C,QAAI,CAAC,OAAO,MAAM,IAAI,EAAG,IAAG,MAAM,SAAS,GAAG,IAAI;AAClD,OAAG,MAAM,YAAY,gBAAgB,YAAY,SAAS;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAGZ,kBAAgB,MAAM;AACpB,QAAI,SAAU,WAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,WAAW,KAAK,CAAC;AAE/B,QAAM,eAAe,CAAC,MAAwC;AAC5D,eAAW,CAAC;AACZ,QAAI,SAAU,WAAU;AAAA,EAC1B;AAGA,QAAM,UAAU,WAAW,gBAAgB,OAAO,eAAe;AACjE,QAAM,aAAa,WAAW;AAC9B,QAAM,cACJ,GAAG,aAAa,YAAY,QAAW,eAAqC,KAAK;AAEnF,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,wBAAwB,SAAS,GAC3E;AAAA,aAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAW,GAAG,wBAAwB,aAAa,cAAc,GAClF,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,WACV,WAAW,UAAU,aAAa;AAAA,QACrC;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,0BAA0B,WAAW,+BAA+B;AAAA,QAEjF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Textarea"]}
1
+ {"version":3,"sources":["../../src/Textarea/Textarea.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';\nimport type { ChangeEvent, TextareaHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n /**\n * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.\n */\n label?: ReactNode;\n /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */\n hideLabel?: boolean;\n /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n description?: ReactNode;\n /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n invalid?: boolean;\n /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n errorMessage?: ReactNode;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n /**\n * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.\n * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).\n * @default 'vertical'\n */\n resize?: 'vertical' | 'none';\n /**\n * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,\n * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.\n * @default false\n */\n autosize?: boolean;\n /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */\n maxRows?: number;\n}\n\n/**\n * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와\n * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.\n * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.\n *\n * @example\n * <Textarea label=\"문의 내용\" rows={5} block />\n *\n * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤\n * <Textarea label=\"댓글\" autosize rows={3} maxRows={8} />\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n {\n label,\n hideLabel = false,\n description,\n invalid = false,\n errorMessage,\n block = false,\n resize = 'vertical',\n autosize = false,\n maxRows,\n rows = 3,\n disabled = false,\n className,\n id: idProp,\n value,\n onChange,\n 'aria-describedby': ariaDescribedby,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-textarea-${reactId}`;\n const messageId = `${id}-message`;\n\n const innerRef = useRef<HTMLTextAreaElement | null>(null);\n const setRefs = useCallback(\n (node: HTMLTextAreaElement | null) => {\n innerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n // autosize: height를 내용(scrollHeight)에 맞추되 maxRows 상한에서 클램프.\n const fitHeight = useCallback(() => {\n const el = innerRef.current;\n if (!el) return;\n const cs = getComputedStyle(el);\n const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n const lineHeight = parseFloat(cs.lineHeight);\n // maxRows → px 상한 (line-height 계산 불가 환경에서는 무제한)\n const maxHeight =\n maxRows != null && !Number.isNaN(lineHeight)\n ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders\n : Infinity;\n\n el.style.height = 'auto'; // 줄어드는 경우도 반영되도록 초기화 후 측정\n const contentHeight = el.scrollHeight + borders; // scrollHeight는 border 미포함(border-box 보정)\n const next = Math.min(contentHeight, maxHeight);\n if (!Number.isNaN(next)) el.style.height = `${next}px`;\n el.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';\n }, [maxRows]);\n\n // 마운트·제어형 value 변경·autosize 토글 시 재계산\n useLayoutEffect(() => {\n if (autosize) fitHeight();\n }, [autosize, fitHeight, value]);\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n if (autosize) fitHeight(); // 비제어형 입력에도 반응\n };\n\n // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄. (Input과 동일)\n const message = invalid && errorMessage != null ? errorMessage : description;\n const hasMessage = message != null;\n const describedBy =\n cx(hasMessage ? messageId : undefined, ariaDescribedby as string | undefined) || undefined;\n\n return (\n <div className={cx('nuri-textarea', block && 'nuri-textarea--block', className)}>\n {label != null && (\n <label htmlFor={id} className={cx('nuri-textarea__label', hideLabel && 'nuri-sr-only')}>\n {label}\n </label>\n )}\n\n <textarea\n ref={setRefs}\n id={id}\n rows={rows}\n value={value}\n onChange={handleChange}\n className={cx(\n 'nuri-textarea__control',\n invalid && 'nuri-textarea__control--invalid',\n (resize === 'none' || autosize) && 'nuri-textarea__control--resize-none',\n )}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-describedby={describedBy}\n {...rest}\n />\n\n {hasMessage && (\n <p\n id={messageId}\n className={cx('nuri-textarea__message', invalid && 'nuri-textarea__message--error')}\n >\n {message}\n </p>\n )}\n </div>\n );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;AAEA,OAAO;AACP,SAAS,YAAY,aAAa,OAAO,iBAAiB,cAAc;;;ACCjE,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADqHI,SAEI,KAFJ;AAzEG,IAAM,WAAW,WAA+C,SAASA,UAC9E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAC7C,QAAM,YAAY,GAAG,EAAE;AAEvB,QAAM,WAAW,OAAmC,IAAI;AACxD,QAAM,UAAU;AAAA,IACd,CAAC,SAAqC;AACpC,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAGA,QAAM,YAAY,YAAY,MAAM;AAClC,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,UAAM,UAAU,WAAW,GAAG,cAAc,IAAI,WAAW,GAAG,iBAAiB;AAC/E,UAAM,aAAa,WAAW,GAAG,UAAU;AAE3C,UAAM,YACJ,WAAW,QAAQ,CAAC,OAAO,MAAM,UAAU,IACvC,UAAU,aAAa,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,aAAa,IAAI,UAClF;AAEN,OAAG,MAAM,SAAS;AAClB,UAAM,gBAAgB,GAAG,eAAe;AACxC,UAAM,OAAO,KAAK,IAAI,eAAe,SAAS;AAC9C,QAAI,CAAC,OAAO,MAAM,IAAI,EAAG,IAAG,MAAM,SAAS,GAAG,IAAI;AAClD,OAAG,MAAM,YAAY,gBAAgB,YAAY,SAAS;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAGZ,kBAAgB,MAAM;AACpB,QAAI,SAAU,WAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,WAAW,KAAK,CAAC;AAE/B,QAAM,eAAe,CAAC,MAAwC;AAC5D,eAAW,CAAC;AACZ,QAAI,SAAU,WAAU;AAAA,EAC1B;AAGA,QAAM,UAAU,WAAW,gBAAgB,OAAO,eAAe;AACjE,QAAM,aAAa,WAAW;AAC9B,QAAM,cACJ,GAAG,aAAa,YAAY,QAAW,eAAqC,KAAK;AAEnF,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,wBAAwB,SAAS,GAC3E;AAAA,aAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAW,GAAG,wBAAwB,aAAa,cAAc,GAClF,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,WACV,WAAW,UAAU,aAAa;AAAA,QACrC;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,0BAA0B,WAAW,+BAA+B;AAAA,QAEjF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Textarea"]}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Toast/index.ts","../../src/Toast/Toaster.tsx","../../src/utils/cx.ts","../../src/Toast/store.ts","../../src/Toast/icons.tsx","../../src/Toast/toast.ts"],"sourcesContent":["export { Toaster } from './Toaster.js';\nexport type { ToasterProps } from './Toaster.js';\nexport { toast } from './toast.js';\nexport type { ToastTone, ToastOptions, ToastRecord } from './store.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { cx } from '../utils/cx.js';\nimport { toastStore, useToasts } from './store.js';\nimport { toneIcon } from './icons.js';\n\nexport interface ToasterProps {\n /**\n * 스와이프로 닫는 방향. 하단 표시라 기본 `down`(아래로 밀어 닫기 — 터치·드래그 모두).\n * @default 'down'\n */\n swipeDirection?: RadixToast.ToastProviderProps['swipeDirection'];\n /** 스와이프 임계 거리(px). @default 50 */\n swipeThreshold?: number;\n /** 뷰포트에 추가할 className (위치 커스터마이즈 등). */\n className?: string;\n /** 스크린리더용 지역 라벨. @default '알림' */\n label?: string;\n}\n\n/**\n * 토스트 렌더러. **앱 루트에 1회만** 마운트하면 되고, 표시는 `toast()` 호출로 트리거한다.\n * (사용처마다 렌더할 필요 없음 — 모듈 store를 구독해 이 컴포넌트만 렌더)\n *\n * Radix Toast 기반이라 자동 닫힘 타이머·hover 시 일시정지·스와이프 닫기·\n * 스크린리더 announce(aria-live)를 표준으로 제공한다.\n *\n * @example\n * // app/layout.tsx\n * <body>{children}<Toaster /></body>\n */\nexport function Toaster({\n swipeDirection = 'down',\n swipeThreshold = 50,\n className,\n label = '알림',\n}: ToasterProps) {\n const toasts = useToasts();\n\n return (\n <RadixToast.Provider\n swipeDirection={swipeDirection}\n swipeThreshold={swipeThreshold}\n label={label}\n >\n {toasts.map((t) => (\n <RadixToast.Root\n key={t.id}\n duration={t.duration}\n onOpenChange={(open) => {\n if (!open) toastStore.remove(t.id);\n }}\n // error는 foreground(assertive)로 즉시 안내, 그 외는 background(polite)\n type={t.tone === 'error' ? 'foreground' : 'background'}\n className={cx('nuri-toast', t.tone !== 'default' && `nuri-toast--${t.tone}`)}\n >\n {t.tone !== 'default' && (\n <span className=\"nuri-toast__icon\" aria-hidden=\"true\">\n {toneIcon[t.tone]}\n </span>\n )}\n <RadixToast.Title className=\"nuri-toast__message\">{t.message}</RadixToast.Title>\n </RadixToast.Root>\n ))}\n {/* 랜드마크 이름 — 스크린리더 영역 탐색용. {hotkey}는 Radix가 실제 키(F8)로 치환 */}\n <RadixToast.Viewport\n className={cx('nuri-toast__viewport', className)}\n label={`${label} ({hotkey})`}\n />\n </RadixToast.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n","'use client';\n\nimport { useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\n\nexport type ToastTone = 'default' | 'success' | 'error' | 'info';\n\nexport interface ToastOptions {\n /** 톤 — 아이콘·색 결정. @default 'default' (아이콘 없음) */\n tone?: ToastTone;\n /** 자동 닫힘까지 ms. @default 3000 */\n duration?: number;\n /** id 직접 지정 (같은 id면 교체 — 중복 방지·수동 dismiss용). */\n id?: string;\n}\n\nexport interface ToastRecord {\n id: string;\n message: ReactNode;\n tone: ToastTone;\n duration: number;\n}\n\n// ── React 밖 모듈 싱글톤 store (아무 데서나 toast() 호출 가능한 이유) ──\nlet toasts: ToastRecord[] = [];\nconst listeners = new Set<() => void>();\nconst EMPTY: ToastRecord[] = []; // 서버 스냅샷용 안정 참조\nlet counter = 0;\n\nconst emit = () => {\n for (const l of listeners) l();\n};\n\nfunction add(message: ReactNode, options: ToastOptions = {}): string {\n const id = options.id ?? `nuri-toast-${++counter}`;\n const record: ToastRecord = {\n id,\n message,\n tone: options.tone ?? 'default',\n duration: options.duration ?? 3000,\n };\n const idx = toasts.findIndex((t) => t.id === id);\n toasts = idx >= 0 ? toasts.map((t) => (t.id === id ? record : t)) : [...toasts, record];\n emit();\n return id;\n}\n\nfunction remove(id: string) {\n toasts = toasts.filter((t) => t.id !== id);\n emit();\n}\n\nfunction clear() {\n toasts = [];\n emit();\n}\n\nexport const toastStore = {\n add,\n remove,\n clear,\n subscribe(listener: () => void) {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n },\n getSnapshot: () => toasts,\n getServerSnapshot: () => EMPTY,\n};\n\n/** 현재 토스트 목록을 구독 (Toaster 내부 전용). */\nexport function useToasts(): ToastRecord[] {\n return useSyncExternalStore(\n toastStore.subscribe,\n toastStore.getSnapshot,\n toastStore.getServerSnapshot,\n );\n}\n","import type { ReactNode } from 'react';\nimport type { ToastTone } from './store.js';\n\n// 16px, currentColor — 색은 .nuri-toast--{tone}이 톤 토큰으로 지정.\nconst CheckIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ErrorIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 4v4.5\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"11.3\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\nconst InfoIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 7.5v4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"4.7\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\n/** default 톤은 아이콘 없음. */\nexport const toneIcon: Record<Exclude<ToastTone, 'default'>, ReactNode> = {\n success: <CheckIcon />,\n error: <ErrorIcon />,\n info: <InfoIcon />,\n};\n","import type { ReactNode } from 'react';\nimport { toastStore } from './store.js';\nimport type { ToastOptions } from './store.js';\n\ntype ToneOptions = Omit<ToastOptions, 'tone'>;\n\n/**\n * 토스트를 띄운다. React 밖 모듈 함수라 컴포넌트·이벤트 핸들러·API 레이어 등\n * **어디서나** 호출 가능. 화면 렌더는 앱 루트에 1회 마운트한 `<Toaster/>`가 담당한다.\n *\n * @returns 토스트 id (수동 dismiss에 사용)\n * @example\n * toast.success('저장됐습니다');\n * const id = toast.error('오류', { duration: 5000 });\n * toast.dismiss(id);\n */\nfunction toastFn(message: ReactNode, options?: ToastOptions): string {\n return toastStore.add(message, options);\n}\n\nexport const toast = Object.assign(toastFn, {\n success: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'success' }),\n error: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'error' }),\n info: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'info' }),\n /** id 지정 시 해당 토스트만, 없으면 전체 제거. */\n dismiss: (id?: string) => (id ? toastStore.remove(id) : toastStore.clear()),\n});\n"],"mappings":"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","names":["import_jsx_runtime","toasts"]}
1
+ {"version":3,"sources":["../../src/Toast/index.ts","../../src/Toast/Toaster.tsx","../../src/utils/cx.ts","../../src/Toast/store.ts","../../src/Toast/icons.tsx","../../src/Toast/toast.ts"],"sourcesContent":["export { Toaster } from './Toaster.js';\nexport type { ToasterProps } from './Toaster.js';\nexport { toast } from './toast.js';\nexport type { ToastTone, ToastOptions, ToastRecord } from './store.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { cx } from '../utils/cx.js';\nimport { toastStore, useToasts } from './store.js';\nimport { toneIcon } from './icons.js';\n\nexport interface ToasterProps {\n /**\n * 스와이프로 닫는 방향. 하단 표시라 기본 `down`(아래로 밀어 닫기 — 터치·드래그 모두).\n * @default 'down'\n */\n swipeDirection?: RadixToast.ToastProviderProps['swipeDirection'];\n /** 스와이프 임계 거리(px). @default 50 */\n swipeThreshold?: number;\n /** 뷰포트에 추가할 className (위치 커스터마이즈 등). */\n className?: string;\n /** 스크린리더용 지역 라벨. @default '알림' */\n label?: string;\n}\n\n/**\n * 토스트 렌더러. **앱 루트에 1회만** 마운트하면 되고, 표시는 `toast()` 호출로 트리거한다.\n * (사용처마다 렌더할 필요 없음 — 모듈 store를 구독해 이 컴포넌트만 렌더)\n *\n * Radix Toast 기반이라 자동 닫힘 타이머·hover 시 일시정지·스와이프 닫기·\n * 스크린리더 announce(aria-live)를 표준으로 제공한다.\n *\n * @example\n * // app/layout.tsx\n * <body>{children}<Toaster /></body>\n */\nexport function Toaster({\n swipeDirection = 'down',\n swipeThreshold = 50,\n className,\n label = '알림',\n}: ToasterProps) {\n const toasts = useToasts();\n\n return (\n <RadixToast.Provider\n swipeDirection={swipeDirection}\n swipeThreshold={swipeThreshold}\n label={label}\n >\n {toasts.map((t) => (\n <RadixToast.Root\n key={t.id}\n duration={t.duration}\n onOpenChange={(open) => {\n if (!open) toastStore.remove(t.id);\n }}\n // error는 foreground(assertive)로 즉시 안내, 그 외는 background(polite)\n type={t.tone === 'error' ? 'foreground' : 'background'}\n className={cx('nuri-toast', t.tone !== 'default' && `nuri-toast--${t.tone}`)}\n >\n {t.tone !== 'default' && (\n <span className=\"nuri-toast__icon\" aria-hidden=\"true\">\n {toneIcon[t.tone]}\n </span>\n )}\n <RadixToast.Title className=\"nuri-toast__message\">{t.message}</RadixToast.Title>\n </RadixToast.Root>\n ))}\n {/* 랜드마크 이름 — 스크린리더 영역 탐색용. {hotkey}는 Radix가 실제 키(F8)로 치환 */}\n <RadixToast.Viewport\n className={cx('nuri-toast__viewport', className)}\n label={`${label} ({hotkey})`}\n />\n </RadixToast.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n","'use client';\n\nimport { useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\n\nexport type ToastTone = 'default' | 'success' | 'error' | 'info';\n\nexport interface ToastOptions {\n /** 톤 — 아이콘·색 결정. @default 'default' (아이콘 없음) */\n tone?: ToastTone;\n /** 자동 닫힘까지 ms. @default 3000 */\n duration?: number;\n /** id 직접 지정 (같은 id면 교체 — 중복 방지·수동 dismiss용). */\n id?: string;\n}\n\nexport interface ToastRecord {\n id: string;\n message: ReactNode;\n tone: ToastTone;\n duration: number;\n}\n\n// ── React 밖 모듈 싱글톤 store (아무 데서나 toast() 호출 가능한 이유) ──\nlet toasts: ToastRecord[] = [];\nconst listeners = new Set<() => void>();\nconst EMPTY: ToastRecord[] = []; // 서버 스냅샷용 안정 참조\nlet counter = 0;\n\nconst emit = () => {\n for (const l of listeners) l();\n};\n\nfunction add(message: ReactNode, options: ToastOptions = {}): string {\n const id = options.id ?? `nuri-toast-${++counter}`;\n const record: ToastRecord = {\n id,\n message,\n tone: options.tone ?? 'default',\n duration: options.duration ?? 3000,\n };\n const idx = toasts.findIndex((t) => t.id === id);\n toasts = idx >= 0 ? toasts.map((t) => (t.id === id ? record : t)) : [...toasts, record];\n emit();\n return id;\n}\n\nfunction remove(id: string) {\n toasts = toasts.filter((t) => t.id !== id);\n emit();\n}\n\nfunction clear() {\n toasts = [];\n emit();\n}\n\nexport const toastStore = {\n add,\n remove,\n clear,\n subscribe(listener: () => void) {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n },\n getSnapshot: () => toasts,\n getServerSnapshot: () => EMPTY,\n};\n\n/** 현재 토스트 목록을 구독 (Toaster 내부 전용). */\nexport function useToasts(): ToastRecord[] {\n return useSyncExternalStore(\n toastStore.subscribe,\n toastStore.getSnapshot,\n toastStore.getServerSnapshot,\n );\n}\n","import type { ReactNode } from 'react';\nimport type { ToastTone } from './store.js';\n\n// 16px, currentColor — 색은 .nuri-toast--{tone}이 톤 토큰으로 지정.\nconst CheckIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ErrorIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 4v4.5\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"11.3\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\nconst InfoIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 7.5v4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"4.7\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\n/** default 톤은 아이콘 없음. */\nexport const toneIcon: Record<Exclude<ToastTone, 'default'>, ReactNode> = {\n success: <CheckIcon />,\n error: <ErrorIcon />,\n info: <InfoIcon />,\n};\n","import type { ReactNode } from 'react';\nimport { toastStore } from './store.js';\nimport type { ToastOptions } from './store.js';\n\ntype ToneOptions = Omit<ToastOptions, 'tone'>;\n\n/**\n * 토스트를 띄운다. React 밖 모듈 함수라 컴포넌트·이벤트 핸들러·API 레이어 등\n * **어디서나** 호출 가능. 화면 렌더는 앱 루트에 1회 마운트한 `<Toaster/>`가 담당한다.\n *\n * @returns 토스트 id (수동 dismiss에 사용)\n * @example\n * toast.success('저장됐습니다');\n * const id = toast.error('오류', { duration: 5000 });\n * toast.dismiss(id);\n */\nfunction toastFn(message: ReactNode, options?: ToastOptions): string {\n return toastStore.add(message, options);\n}\n\nexport const toast = Object.assign(toastFn, {\n success: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'success' }),\n error: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'error' }),\n info: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'info' }),\n /** id 지정 시 해당 토스트만, 없으면 전체 제거. */\n dismiss: (id?: string) => (id ? toastStore.remove(id) : toastStore.clear()),\n});\n"],"mappings":"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","names":["import_jsx_runtime","toasts"]}
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  // src/Toast/Toaster.tsx
2
4
  import "./styles.css";
3
5
  import * as RadixToast from "@radix-ui/react-toast";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Toast/Toaster.tsx","../../src/utils/cx.ts","../../src/Toast/store.ts","../../src/Toast/icons.tsx","../../src/Toast/toast.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { cx } from '../utils/cx.js';\nimport { toastStore, useToasts } from './store.js';\nimport { toneIcon } from './icons.js';\n\nexport interface ToasterProps {\n /**\n * 스와이프로 닫는 방향. 하단 표시라 기본 `down`(아래로 밀어 닫기 — 터치·드래그 모두).\n * @default 'down'\n */\n swipeDirection?: RadixToast.ToastProviderProps['swipeDirection'];\n /** 스와이프 임계 거리(px). @default 50 */\n swipeThreshold?: number;\n /** 뷰포트에 추가할 className (위치 커스터마이즈 등). */\n className?: string;\n /** 스크린리더용 지역 라벨. @default '알림' */\n label?: string;\n}\n\n/**\n * 토스트 렌더러. **앱 루트에 1회만** 마운트하면 되고, 표시는 `toast()` 호출로 트리거한다.\n * (사용처마다 렌더할 필요 없음 — 모듈 store를 구독해 이 컴포넌트만 렌더)\n *\n * Radix Toast 기반이라 자동 닫힘 타이머·hover 시 일시정지·스와이프 닫기·\n * 스크린리더 announce(aria-live)를 표준으로 제공한다.\n *\n * @example\n * // app/layout.tsx\n * <body>{children}<Toaster /></body>\n */\nexport function Toaster({\n swipeDirection = 'down',\n swipeThreshold = 50,\n className,\n label = '알림',\n}: ToasterProps) {\n const toasts = useToasts();\n\n return (\n <RadixToast.Provider\n swipeDirection={swipeDirection}\n swipeThreshold={swipeThreshold}\n label={label}\n >\n {toasts.map((t) => (\n <RadixToast.Root\n key={t.id}\n duration={t.duration}\n onOpenChange={(open) => {\n if (!open) toastStore.remove(t.id);\n }}\n // error는 foreground(assertive)로 즉시 안내, 그 외는 background(polite)\n type={t.tone === 'error' ? 'foreground' : 'background'}\n className={cx('nuri-toast', t.tone !== 'default' && `nuri-toast--${t.tone}`)}\n >\n {t.tone !== 'default' && (\n <span className=\"nuri-toast__icon\" aria-hidden=\"true\">\n {toneIcon[t.tone]}\n </span>\n )}\n <RadixToast.Title className=\"nuri-toast__message\">{t.message}</RadixToast.Title>\n </RadixToast.Root>\n ))}\n {/* 랜드마크 이름 — 스크린리더 영역 탐색용. {hotkey}는 Radix가 실제 키(F8)로 치환 */}\n <RadixToast.Viewport\n className={cx('nuri-toast__viewport', className)}\n label={`${label} ({hotkey})`}\n />\n </RadixToast.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n","'use client';\n\nimport { useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\n\nexport type ToastTone = 'default' | 'success' | 'error' | 'info';\n\nexport interface ToastOptions {\n /** 톤 — 아이콘·색 결정. @default 'default' (아이콘 없음) */\n tone?: ToastTone;\n /** 자동 닫힘까지 ms. @default 3000 */\n duration?: number;\n /** id 직접 지정 (같은 id면 교체 — 중복 방지·수동 dismiss용). */\n id?: string;\n}\n\nexport interface ToastRecord {\n id: string;\n message: ReactNode;\n tone: ToastTone;\n duration: number;\n}\n\n// ── React 밖 모듈 싱글톤 store (아무 데서나 toast() 호출 가능한 이유) ──\nlet toasts: ToastRecord[] = [];\nconst listeners = new Set<() => void>();\nconst EMPTY: ToastRecord[] = []; // 서버 스냅샷용 안정 참조\nlet counter = 0;\n\nconst emit = () => {\n for (const l of listeners) l();\n};\n\nfunction add(message: ReactNode, options: ToastOptions = {}): string {\n const id = options.id ?? `nuri-toast-${++counter}`;\n const record: ToastRecord = {\n id,\n message,\n tone: options.tone ?? 'default',\n duration: options.duration ?? 3000,\n };\n const idx = toasts.findIndex((t) => t.id === id);\n toasts = idx >= 0 ? toasts.map((t) => (t.id === id ? record : t)) : [...toasts, record];\n emit();\n return id;\n}\n\nfunction remove(id: string) {\n toasts = toasts.filter((t) => t.id !== id);\n emit();\n}\n\nfunction clear() {\n toasts = [];\n emit();\n}\n\nexport const toastStore = {\n add,\n remove,\n clear,\n subscribe(listener: () => void) {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n },\n getSnapshot: () => toasts,\n getServerSnapshot: () => EMPTY,\n};\n\n/** 현재 토스트 목록을 구독 (Toaster 내부 전용). */\nexport function useToasts(): ToastRecord[] {\n return useSyncExternalStore(\n toastStore.subscribe,\n toastStore.getSnapshot,\n toastStore.getServerSnapshot,\n );\n}\n","import type { ReactNode } from 'react';\nimport type { ToastTone } from './store.js';\n\n// 16px, currentColor — 색은 .nuri-toast--{tone}이 톤 토큰으로 지정.\nconst CheckIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ErrorIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 4v4.5\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"11.3\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\nconst InfoIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 7.5v4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"4.7\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\n/** default 톤은 아이콘 없음. */\nexport const toneIcon: Record<Exclude<ToastTone, 'default'>, ReactNode> = {\n success: <CheckIcon />,\n error: <ErrorIcon />,\n info: <InfoIcon />,\n};\n","import type { ReactNode } from 'react';\nimport { toastStore } from './store.js';\nimport type { ToastOptions } from './store.js';\n\ntype ToneOptions = Omit<ToastOptions, 'tone'>;\n\n/**\n * 토스트를 띄운다. React 밖 모듈 함수라 컴포넌트·이벤트 핸들러·API 레이어 등\n * **어디서나** 호출 가능. 화면 렌더는 앱 루트에 1회 마운트한 `<Toaster/>`가 담당한다.\n *\n * @returns 토스트 id (수동 dismiss에 사용)\n * @example\n * toast.success('저장됐습니다');\n * const id = toast.error('오류', { duration: 5000 });\n * toast.dismiss(id);\n */\nfunction toastFn(message: ReactNode, options?: ToastOptions): string {\n return toastStore.add(message, options);\n}\n\nexport const toast = Object.assign(toastFn, {\n success: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'success' }),\n error: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'error' }),\n info: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'info' }),\n /** id 지정 시 해당 토스트만, 없으면 전체 제거. */\n dismiss: (id?: string) => (id ? toastStore.remove(id) : toastStore.clear()),\n});\n"],"mappings":"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","names":["jsx","jsxs","toasts"]}
1
+ {"version":3,"sources":["../../src/Toast/Toaster.tsx","../../src/utils/cx.ts","../../src/Toast/store.ts","../../src/Toast/icons.tsx","../../src/Toast/toast.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { cx } from '../utils/cx.js';\nimport { toastStore, useToasts } from './store.js';\nimport { toneIcon } from './icons.js';\n\nexport interface ToasterProps {\n /**\n * 스와이프로 닫는 방향. 하단 표시라 기본 `down`(아래로 밀어 닫기 — 터치·드래그 모두).\n * @default 'down'\n */\n swipeDirection?: RadixToast.ToastProviderProps['swipeDirection'];\n /** 스와이프 임계 거리(px). @default 50 */\n swipeThreshold?: number;\n /** 뷰포트에 추가할 className (위치 커스터마이즈 등). */\n className?: string;\n /** 스크린리더용 지역 라벨. @default '알림' */\n label?: string;\n}\n\n/**\n * 토스트 렌더러. **앱 루트에 1회만** 마운트하면 되고, 표시는 `toast()` 호출로 트리거한다.\n * (사용처마다 렌더할 필요 없음 — 모듈 store를 구독해 이 컴포넌트만 렌더)\n *\n * Radix Toast 기반이라 자동 닫힘 타이머·hover 시 일시정지·스와이프 닫기·\n * 스크린리더 announce(aria-live)를 표준으로 제공한다.\n *\n * @example\n * // app/layout.tsx\n * <body>{children}<Toaster /></body>\n */\nexport function Toaster({\n swipeDirection = 'down',\n swipeThreshold = 50,\n className,\n label = '알림',\n}: ToasterProps) {\n const toasts = useToasts();\n\n return (\n <RadixToast.Provider\n swipeDirection={swipeDirection}\n swipeThreshold={swipeThreshold}\n label={label}\n >\n {toasts.map((t) => (\n <RadixToast.Root\n key={t.id}\n duration={t.duration}\n onOpenChange={(open) => {\n if (!open) toastStore.remove(t.id);\n }}\n // error는 foreground(assertive)로 즉시 안내, 그 외는 background(polite)\n type={t.tone === 'error' ? 'foreground' : 'background'}\n className={cx('nuri-toast', t.tone !== 'default' && `nuri-toast--${t.tone}`)}\n >\n {t.tone !== 'default' && (\n <span className=\"nuri-toast__icon\" aria-hidden=\"true\">\n {toneIcon[t.tone]}\n </span>\n )}\n <RadixToast.Title className=\"nuri-toast__message\">{t.message}</RadixToast.Title>\n </RadixToast.Root>\n ))}\n {/* 랜드마크 이름 — 스크린리더 영역 탐색용. {hotkey}는 Radix가 실제 키(F8)로 치환 */}\n <RadixToast.Viewport\n className={cx('nuri-toast__viewport', className)}\n label={`${label} ({hotkey})`}\n />\n </RadixToast.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n","'use client';\n\nimport { useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\n\nexport type ToastTone = 'default' | 'success' | 'error' | 'info';\n\nexport interface ToastOptions {\n /** 톤 — 아이콘·색 결정. @default 'default' (아이콘 없음) */\n tone?: ToastTone;\n /** 자동 닫힘까지 ms. @default 3000 */\n duration?: number;\n /** id 직접 지정 (같은 id면 교체 — 중복 방지·수동 dismiss용). */\n id?: string;\n}\n\nexport interface ToastRecord {\n id: string;\n message: ReactNode;\n tone: ToastTone;\n duration: number;\n}\n\n// ── React 밖 모듈 싱글톤 store (아무 데서나 toast() 호출 가능한 이유) ──\nlet toasts: ToastRecord[] = [];\nconst listeners = new Set<() => void>();\nconst EMPTY: ToastRecord[] = []; // 서버 스냅샷용 안정 참조\nlet counter = 0;\n\nconst emit = () => {\n for (const l of listeners) l();\n};\n\nfunction add(message: ReactNode, options: ToastOptions = {}): string {\n const id = options.id ?? `nuri-toast-${++counter}`;\n const record: ToastRecord = {\n id,\n message,\n tone: options.tone ?? 'default',\n duration: options.duration ?? 3000,\n };\n const idx = toasts.findIndex((t) => t.id === id);\n toasts = idx >= 0 ? toasts.map((t) => (t.id === id ? record : t)) : [...toasts, record];\n emit();\n return id;\n}\n\nfunction remove(id: string) {\n toasts = toasts.filter((t) => t.id !== id);\n emit();\n}\n\nfunction clear() {\n toasts = [];\n emit();\n}\n\nexport const toastStore = {\n add,\n remove,\n clear,\n subscribe(listener: () => void) {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n },\n getSnapshot: () => toasts,\n getServerSnapshot: () => EMPTY,\n};\n\n/** 현재 토스트 목록을 구독 (Toaster 내부 전용). */\nexport function useToasts(): ToastRecord[] {\n return useSyncExternalStore(\n toastStore.subscribe,\n toastStore.getSnapshot,\n toastStore.getServerSnapshot,\n );\n}\n","import type { ReactNode } from 'react';\nimport type { ToastTone } from './store.js';\n\n// 16px, currentColor — 색은 .nuri-toast--{tone}이 톤 토큰으로 지정.\nconst CheckIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3.5 8.5l3 3 6-6.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nconst ErrorIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 4v4.5\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"11.3\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\nconst InfoIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M8 7.5v4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n <circle cx=\"8\" cy=\"4.7\" r=\"0.95\" fill=\"currentColor\" />\n </svg>\n);\n\n/** default 톤은 아이콘 없음. */\nexport const toneIcon: Record<Exclude<ToastTone, 'default'>, ReactNode> = {\n success: <CheckIcon />,\n error: <ErrorIcon />,\n info: <InfoIcon />,\n};\n","import type { ReactNode } from 'react';\nimport { toastStore } from './store.js';\nimport type { ToastOptions } from './store.js';\n\ntype ToneOptions = Omit<ToastOptions, 'tone'>;\n\n/**\n * 토스트를 띄운다. React 밖 모듈 함수라 컴포넌트·이벤트 핸들러·API 레이어 등\n * **어디서나** 호출 가능. 화면 렌더는 앱 루트에 1회 마운트한 `<Toaster/>`가 담당한다.\n *\n * @returns 토스트 id (수동 dismiss에 사용)\n * @example\n * toast.success('저장됐습니다');\n * const id = toast.error('오류', { duration: 5000 });\n * toast.dismiss(id);\n */\nfunction toastFn(message: ReactNode, options?: ToastOptions): string {\n return toastStore.add(message, options);\n}\n\nexport const toast = Object.assign(toastFn, {\n success: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'success' }),\n error: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'error' }),\n info: (message: ReactNode, options?: ToneOptions) =>\n toastStore.add(message, { ...options, tone: 'info' }),\n /** id 지정 시 해당 토스트만, 없으면 전체 제거. */\n dismiss: (id?: string) => (id ? toastStore.remove(id) : toastStore.clear()),\n});\n"],"mappings":"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","names":["jsx","jsxs","toasts"]}
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Tooltip/index.ts","../../src/Tooltip/Tooltip.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Tooltip, TooltipProvider } from './Tooltip.js';\nexport type { TooltipProps, TooltipProviderProps } from './Tooltip.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { createContext, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nexport interface TooltipProps {\n /** 툴팁 내용. */\n content: ReactNode;\n /** 트리거 — 단일 엘리먼트에 asChild로 위임 (Button, 아이콘 버튼 등). */\n children: ReactElement;\n /**\n * 툴팁이 뜨는 방향. (디자인의 Direction은 꼬리 방향 기준이라 반대 —\n * 예: 디자인 Direction=Bottom ⇒ side=\"top\")\n * 공간이 부족하면 자동으로 반대쪽으로 반전된다.\n * @default 'top'\n */\n side?: Side;\n /** 트리거 기준 정렬. @default 'center' */\n align?: Align;\n /** 꼬리(화살표) 표시 여부 — 디자인의 showTail. @default true */\n arrow?: boolean;\n /**\n * 열림 지연 ms. 미지정 시 — 단독 사용은 100ms(거의 즉시, 스쳐 지나갈 때 깜빡임만 방지),\n * TooltipProvider 안에서는 프로바이더 설정을 따름. 0이면 즉시.\n * 키보드 포커스는 지연 없이 항상 즉시 표시된다.\n */\n delayDuration?: number;\n /** 열림 상태 제어 — 항상 표시(코치마크류)나 수동 제어에 사용. */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** true면 툴팁 없이 트리거만 렌더 (조건부 툴팁). @default false */\n disabled?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 툴팁 패널에 추가할 className. */\n className?: string;\n}\n\n// TooltipProvider 존재 감지용 — 없으면 Tooltip이 자체 Provider로 감싼다(제로 셋업).\nconst HasProviderContext = createContext(false);\n\nexport type TooltipProviderProps = RadixTooltip.TooltipProviderProps;\n\n/**\n * 지연 시간을 공유하는 프로바이더 (선택). 앱 루트에 1회 두면 툴팁 하나를 본 직후\n * 인접 트리거로 이동할 때 지연 없이 바로 표시된다(skipDelayDuration).\n * 없어도 Tooltip은 단독으로 동작한다.\n *\n * @example\n * <TooltipProvider delayDuration={300}><App /></TooltipProvider>\n */\nexport function TooltipProvider({ children, ...props }: TooltipProviderProps) {\n return (\n <HasProviderContext.Provider value={true}>\n <RadixTooltip.Provider {...props}>{children}</RadixTooltip.Provider>\n </HasProviderContext.Provider>\n );\n}\n\n/**\n * 툴팁. Radix Tooltip 기반 — hover와 **키보드 포커스** 모두에서 열리고,\n * Esc로 닫히며, `aria-describedby`가 자동 연결된다. 포털 + 충돌 감지\n * 포지셔닝이라 부모 overflow에 잘리지 않고 화면 밖으로 나가지 않는다.\n *\n * 터치 기기에서는 표시되지 않는다(hover 개념 부재 — Radix 기본 동작).\n * 닫기 버튼이 있는 지속형 안내(코치마크)는 툴팁 범위가 아니다.\n *\n * @example\n * <Tooltip content=\"즐겨찾기에 추가\">\n * <Button iconOnly aria-label=\"즐겨찾기\">★</Button>\n * </Tooltip>\n */\nexport function Tooltip({\n content,\n children,\n side = 'top',\n align = 'center',\n arrow = true,\n delayDuration,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n container,\n className,\n}: TooltipProps) {\n const hasProvider = useContext(HasProviderContext);\n\n if (disabled) return children;\n\n const root = (\n <RadixTooltip.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={delayDuration}\n >\n <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n <RadixTooltip.Portal container={container}>\n <RadixTooltip.Content\n className={cx('nuri-tooltip', className)}\n side={side}\n align={align}\n sideOffset={4}\n collisionPadding={8}\n arrowPadding={6}\n // 트리거가 뷰포트/스크롤 영역에서 완전히 사라지면 툴팁도 숨김\n // (기준 요소 없이 툴팁만 떠 있는 현상 방지)\n hideWhenDetached\n >\n {content}\n {arrow && <RadixTooltip.Arrow className=\"nuri-tooltip__arrow\" width={14} height={7} />}\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n );\n\n // 앱에 TooltipProvider가 없어도 동작하도록 자체 Provider로 폴백.\n // 앱 Provider가 있으면 감싸지 않는다 — 안쪽 컨텍스트가 이기므로 여기서 또 감싸면\n // 앱이 설정한 delayDuration·skipDelayDuration이 무시된다.\n // 폴백 지연 100ms — 거의 즉시로 느껴지되, 마우스가 스쳐 지나갈 때 연쇄 깜빡임은 방지\n // (버튼 하나를 가로지르는 데 ~30–50ms — 그보다 길게 머문 경우만 의도로 판정).\n return hasProvider ? (\n root\n ) : (\n <RadixTooltip.Provider delayDuration={100}>{root}</RadixTooltip.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,mBAA8B;AAC9B,mBAA0C;;;ACAnC,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuDM;AAfN,IAAM,yBAAqB,4BAAc,KAAK;AAYvC,SAAS,gBAAgB,EAAE,UAAU,GAAG,MAAM,GAAyB;AAC5E,SACE,4CAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAClC,sDAAc,uBAAb,EAAuB,GAAG,OAAQ,UAAS,GAC9C;AAEJ;AAeO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAiB;AACf,QAAM,kBAAc,yBAAW,kBAAkB;AAEjD,MAAI,SAAU,QAAO;AAErB,QAAM,OACJ;AAAA,IAAc;AAAA,IAAb;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,oDAAc,sBAAb,EAAqB,SAAO,MAAE,UAAS;AAAA,QACxC,4CAAc,qBAAb,EAAoB,WACnB;AAAA,UAAc;AAAA,UAAb;AAAA,YACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,YACvC;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,cAAc;AAAA,YAGd,kBAAgB;AAAA,YAEf;AAAA;AAAA,cACA,SAAS,4CAAc,oBAAb,EAAmB,WAAU,uBAAsB,OAAO,IAAI,QAAQ,GAAG;AAAA;AAAA;AAAA,QACtF,GACF;AAAA;AAAA;AAAA,EACF;AAQF,SAAO,cACL,OAEA,4CAAc,uBAAb,EAAsB,eAAe,KAAM,gBAAK;AAErD;","names":[]}
1
+ {"version":3,"sources":["../../src/Tooltip/index.ts","../../src/Tooltip/Tooltip.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Tooltip, TooltipProvider } from './Tooltip.js';\nexport type { TooltipProps, TooltipProviderProps } from './Tooltip.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { createContext, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nexport interface TooltipProps {\n /** 툴팁 내용. */\n content: ReactNode;\n /** 트리거 — 단일 엘리먼트에 asChild로 위임 (Button, 아이콘 버튼 등). */\n children: ReactElement;\n /**\n * 툴팁이 뜨는 방향. (디자인의 Direction은 꼬리 방향 기준이라 반대 —\n * 예: 디자인 Direction=Bottom ⇒ side=\"top\")\n * 공간이 부족하면 자동으로 반대쪽으로 반전된다.\n * @default 'top'\n */\n side?: Side;\n /** 트리거 기준 정렬. @default 'center' */\n align?: Align;\n /** 꼬리(화살표) 표시 여부 — 디자인의 showTail. @default true */\n arrow?: boolean;\n /**\n * 열림 지연 ms. 미지정 시 — 단독 사용은 100ms(거의 즉시, 스쳐 지나갈 때 깜빡임만 방지),\n * TooltipProvider 안에서는 프로바이더 설정을 따름. 0이면 즉시.\n * 키보드 포커스는 지연 없이 항상 즉시 표시된다.\n */\n delayDuration?: number;\n /** 열림 상태 제어 — 항상 표시(코치마크류)나 수동 제어에 사용. */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** true면 툴팁 없이 트리거만 렌더 (조건부 툴팁). @default false */\n disabled?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 툴팁 패널에 추가할 className. */\n className?: string;\n}\n\n// TooltipProvider 존재 감지용 — 없으면 Tooltip이 자체 Provider로 감싼다(제로 셋업).\nconst HasProviderContext = createContext(false);\n\nexport type TooltipProviderProps = RadixTooltip.TooltipProviderProps;\n\n/**\n * 지연 시간을 공유하는 프로바이더 (선택). 앱 루트에 1회 두면 툴팁 하나를 본 직후\n * 인접 트리거로 이동할 때 지연 없이 바로 표시된다(skipDelayDuration).\n * 없어도 Tooltip은 단독으로 동작한다.\n *\n * @example\n * <TooltipProvider delayDuration={300}><App /></TooltipProvider>\n */\nexport function TooltipProvider({ children, ...props }: TooltipProviderProps) {\n return (\n <HasProviderContext.Provider value={true}>\n <RadixTooltip.Provider {...props}>{children}</RadixTooltip.Provider>\n </HasProviderContext.Provider>\n );\n}\n\n/**\n * 툴팁. Radix Tooltip 기반 — hover와 **키보드 포커스** 모두에서 열리고,\n * Esc로 닫히며, `aria-describedby`가 자동 연결된다. 포털 + 충돌 감지\n * 포지셔닝이라 부모 overflow에 잘리지 않고 화면 밖으로 나가지 않는다.\n *\n * 터치 기기에서는 표시되지 않는다(hover 개념 부재 — Radix 기본 동작).\n * 닫기 버튼이 있는 지속형 안내(코치마크)는 툴팁 범위가 아니다.\n *\n * @example\n * <Tooltip content=\"즐겨찾기에 추가\">\n * <Button iconOnly aria-label=\"즐겨찾기\">★</Button>\n * </Tooltip>\n */\nexport function Tooltip({\n content,\n children,\n side = 'top',\n align = 'center',\n arrow = true,\n delayDuration,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n container,\n className,\n}: TooltipProps) {\n const hasProvider = useContext(HasProviderContext);\n\n if (disabled) return children;\n\n const root = (\n <RadixTooltip.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={delayDuration}\n >\n <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n <RadixTooltip.Portal container={container}>\n <RadixTooltip.Content\n className={cx('nuri-tooltip', className)}\n side={side}\n align={align}\n sideOffset={4}\n collisionPadding={8}\n arrowPadding={6}\n // 트리거가 뷰포트/스크롤 영역에서 완전히 사라지면 툴팁도 숨김\n // (기준 요소 없이 툴팁만 떠 있는 현상 방지)\n hideWhenDetached\n >\n {content}\n {arrow && <RadixTooltip.Arrow className=\"nuri-tooltip__arrow\" width={14} height={7} />}\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n );\n\n // 앱에 TooltipProvider가 없어도 동작하도록 자체 Provider로 폴백.\n // 앱 Provider가 있으면 감싸지 않는다 — 안쪽 컨텍스트가 이기므로 여기서 또 감싸면\n // 앱이 설정한 delayDuration·skipDelayDuration이 무시된다.\n // 폴백 지연 100ms — 거의 즉시로 느껴지되, 마우스가 스쳐 지나갈 때 연쇄 깜빡임은 방지\n // (버튼 하나를 가로지르는 데 ~30–50ms — 그보다 길게 머문 경우만 의도로 판정).\n return hasProvider ? (\n root\n ) : (\n <RadixTooltip.Provider delayDuration={100}>{root}</RadixTooltip.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,mBAA8B;AAC9B,mBAA0C;;;ACAnC,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuDM;AAfN,IAAM,yBAAqB,4BAAc,KAAK;AAYvC,SAAS,gBAAgB,EAAE,UAAU,GAAG,MAAM,GAAyB;AAC5E,SACE,4CAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAClC,sDAAc,uBAAb,EAAuB,GAAG,OAAQ,UAAS,GAC9C;AAEJ;AAeO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAiB;AACf,QAAM,kBAAc,yBAAW,kBAAkB;AAEjD,MAAI,SAAU,QAAO;AAErB,QAAM,OACJ;AAAA,IAAc;AAAA,IAAb;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,oDAAc,sBAAb,EAAqB,SAAO,MAAE,UAAS;AAAA,QACxC,4CAAc,qBAAb,EAAoB,WACnB;AAAA,UAAc;AAAA,UAAb;AAAA,YACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,YACvC;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,cAAc;AAAA,YAGd,kBAAgB;AAAA,YAEf;AAAA;AAAA,cACA,SAAS,4CAAc,oBAAb,EAAmB,WAAU,uBAAsB,OAAO,IAAI,QAAQ,GAAG;AAAA;AAAA;AAAA,QACtF,GACF;AAAA;AAAA;AAAA,EACF;AAQF,SAAO,cACL,OAEA,4CAAc,uBAAb,EAAsB,eAAe,KAAM,gBAAK;AAErD;","names":[]}
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  // src/Tooltip/Tooltip.tsx
2
4
  import "./styles.css";
3
5
  import * as RadixTooltip from "@radix-ui/react-tooltip";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { createContext, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nexport interface TooltipProps {\n /** 툴팁 내용. */\n content: ReactNode;\n /** 트리거 — 단일 엘리먼트에 asChild로 위임 (Button, 아이콘 버튼 등). */\n children: ReactElement;\n /**\n * 툴팁이 뜨는 방향. (디자인의 Direction은 꼬리 방향 기준이라 반대 —\n * 예: 디자인 Direction=Bottom ⇒ side=\"top\")\n * 공간이 부족하면 자동으로 반대쪽으로 반전된다.\n * @default 'top'\n */\n side?: Side;\n /** 트리거 기준 정렬. @default 'center' */\n align?: Align;\n /** 꼬리(화살표) 표시 여부 — 디자인의 showTail. @default true */\n arrow?: boolean;\n /**\n * 열림 지연 ms. 미지정 시 — 단독 사용은 100ms(거의 즉시, 스쳐 지나갈 때 깜빡임만 방지),\n * TooltipProvider 안에서는 프로바이더 설정을 따름. 0이면 즉시.\n * 키보드 포커스는 지연 없이 항상 즉시 표시된다.\n */\n delayDuration?: number;\n /** 열림 상태 제어 — 항상 표시(코치마크류)나 수동 제어에 사용. */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** true면 툴팁 없이 트리거만 렌더 (조건부 툴팁). @default false */\n disabled?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 툴팁 패널에 추가할 className. */\n className?: string;\n}\n\n// TooltipProvider 존재 감지용 — 없으면 Tooltip이 자체 Provider로 감싼다(제로 셋업).\nconst HasProviderContext = createContext(false);\n\nexport type TooltipProviderProps = RadixTooltip.TooltipProviderProps;\n\n/**\n * 지연 시간을 공유하는 프로바이더 (선택). 앱 루트에 1회 두면 툴팁 하나를 본 직후\n * 인접 트리거로 이동할 때 지연 없이 바로 표시된다(skipDelayDuration).\n * 없어도 Tooltip은 단독으로 동작한다.\n *\n * @example\n * <TooltipProvider delayDuration={300}><App /></TooltipProvider>\n */\nexport function TooltipProvider({ children, ...props }: TooltipProviderProps) {\n return (\n <HasProviderContext.Provider value={true}>\n <RadixTooltip.Provider {...props}>{children}</RadixTooltip.Provider>\n </HasProviderContext.Provider>\n );\n}\n\n/**\n * 툴팁. Radix Tooltip 기반 — hover와 **키보드 포커스** 모두에서 열리고,\n * Esc로 닫히며, `aria-describedby`가 자동 연결된다. 포털 + 충돌 감지\n * 포지셔닝이라 부모 overflow에 잘리지 않고 화면 밖으로 나가지 않는다.\n *\n * 터치 기기에서는 표시되지 않는다(hover 개념 부재 — Radix 기본 동작).\n * 닫기 버튼이 있는 지속형 안내(코치마크)는 툴팁 범위가 아니다.\n *\n * @example\n * <Tooltip content=\"즐겨찾기에 추가\">\n * <Button iconOnly aria-label=\"즐겨찾기\">★</Button>\n * </Tooltip>\n */\nexport function Tooltip({\n content,\n children,\n side = 'top',\n align = 'center',\n arrow = true,\n delayDuration,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n container,\n className,\n}: TooltipProps) {\n const hasProvider = useContext(HasProviderContext);\n\n if (disabled) return children;\n\n const root = (\n <RadixTooltip.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={delayDuration}\n >\n <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n <RadixTooltip.Portal container={container}>\n <RadixTooltip.Content\n className={cx('nuri-tooltip', className)}\n side={side}\n align={align}\n sideOffset={4}\n collisionPadding={8}\n arrowPadding={6}\n // 트리거가 뷰포트/스크롤 영역에서 완전히 사라지면 툴팁도 숨김\n // (기준 요소 없이 툴팁만 떠 있는 현상 방지)\n hideWhenDetached\n >\n {content}\n {arrow && <RadixTooltip.Arrow className=\"nuri-tooltip__arrow\" width={14} height={7} />}\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n );\n\n // 앱에 TooltipProvider가 없어도 동작하도록 자체 Provider로 폴백.\n // 앱 Provider가 있으면 감싸지 않는다 — 안쪽 컨텍스트가 이기므로 여기서 또 감싸면\n // 앱이 설정한 delayDuration·skipDelayDuration이 무시된다.\n // 폴백 지연 100ms — 거의 즉시로 느껴지되, 마우스가 스쳐 지나갈 때 연쇄 깜빡임은 방지\n // (버튼 하나를 가로지르는 데 ~30–50ms — 그보다 길게 머문 경우만 의도로 판정).\n return hasProvider ? (\n root\n ) : (\n <RadixTooltip.Provider delayDuration={100}>{root}</RadixTooltip.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,YAAY,kBAAkB;AAC9B,SAAS,eAAe,kBAAkB;;;ACAnC,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuDM,cA6CE,YA7CF;AAfN,IAAM,qBAAqB,cAAc,KAAK;AAYvC,SAAS,gBAAgB,EAAE,UAAU,GAAG,MAAM,GAAyB;AAC5E,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAClC,8BAAc,uBAAb,EAAuB,GAAG,OAAQ,UAAS,GAC9C;AAEJ;AAeO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAiB;AACf,QAAM,cAAc,WAAW,kBAAkB;AAEjD,MAAI,SAAU,QAAO;AAErB,QAAM,OACJ;AAAA,IAAc;AAAA,IAAb;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAc,sBAAb,EAAqB,SAAO,MAAE,UAAS;AAAA,QACxC,oBAAc,qBAAb,EAAoB,WACnB;AAAA,UAAc;AAAA,UAAb;AAAA,YACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,YACvC;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,cAAc;AAAA,YAGd,kBAAgB;AAAA,YAEf;AAAA;AAAA,cACA,SAAS,oBAAc,oBAAb,EAAmB,WAAU,uBAAsB,OAAO,IAAI,QAAQ,GAAG;AAAA;AAAA;AAAA,QACtF,GACF;AAAA;AAAA;AAAA,EACF;AAQF,SAAO,cACL,OAEA,oBAAc,uBAAb,EAAsB,eAAe,KAAM,gBAAK;AAErD;","names":[]}
1
+ {"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { createContext, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\nexport interface TooltipProps {\n /** 툴팁 내용. */\n content: ReactNode;\n /** 트리거 — 단일 엘리먼트에 asChild로 위임 (Button, 아이콘 버튼 등). */\n children: ReactElement;\n /**\n * 툴팁이 뜨는 방향. (디자인의 Direction은 꼬리 방향 기준이라 반대 —\n * 예: 디자인 Direction=Bottom ⇒ side=\"top\")\n * 공간이 부족하면 자동으로 반대쪽으로 반전된다.\n * @default 'top'\n */\n side?: Side;\n /** 트리거 기준 정렬. @default 'center' */\n align?: Align;\n /** 꼬리(화살표) 표시 여부 — 디자인의 showTail. @default true */\n arrow?: boolean;\n /**\n * 열림 지연 ms. 미지정 시 — 단독 사용은 100ms(거의 즉시, 스쳐 지나갈 때 깜빡임만 방지),\n * TooltipProvider 안에서는 프로바이더 설정을 따름. 0이면 즉시.\n * 키보드 포커스는 지연 없이 항상 즉시 표시된다.\n */\n delayDuration?: number;\n /** 열림 상태 제어 — 항상 표시(코치마크류)나 수동 제어에 사용. */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** true면 툴팁 없이 트리거만 렌더 (조건부 툴팁). @default false */\n disabled?: boolean;\n /** 포털 렌더 대상. 기본 document.body. */\n container?: HTMLElement | null;\n /** 툴팁 패널에 추가할 className. */\n className?: string;\n}\n\n// TooltipProvider 존재 감지용 — 없으면 Tooltip이 자체 Provider로 감싼다(제로 셋업).\nconst HasProviderContext = createContext(false);\n\nexport type TooltipProviderProps = RadixTooltip.TooltipProviderProps;\n\n/**\n * 지연 시간을 공유하는 프로바이더 (선택). 앱 루트에 1회 두면 툴팁 하나를 본 직후\n * 인접 트리거로 이동할 때 지연 없이 바로 표시된다(skipDelayDuration).\n * 없어도 Tooltip은 단독으로 동작한다.\n *\n * @example\n * <TooltipProvider delayDuration={300}><App /></TooltipProvider>\n */\nexport function TooltipProvider({ children, ...props }: TooltipProviderProps) {\n return (\n <HasProviderContext.Provider value={true}>\n <RadixTooltip.Provider {...props}>{children}</RadixTooltip.Provider>\n </HasProviderContext.Provider>\n );\n}\n\n/**\n * 툴팁. Radix Tooltip 기반 — hover와 **키보드 포커스** 모두에서 열리고,\n * Esc로 닫히며, `aria-describedby`가 자동 연결된다. 포털 + 충돌 감지\n * 포지셔닝이라 부모 overflow에 잘리지 않고 화면 밖으로 나가지 않는다.\n *\n * 터치 기기에서는 표시되지 않는다(hover 개념 부재 — Radix 기본 동작).\n * 닫기 버튼이 있는 지속형 안내(코치마크)는 툴팁 범위가 아니다.\n *\n * @example\n * <Tooltip content=\"즐겨찾기에 추가\">\n * <Button iconOnly aria-label=\"즐겨찾기\">★</Button>\n * </Tooltip>\n */\nexport function Tooltip({\n content,\n children,\n side = 'top',\n align = 'center',\n arrow = true,\n delayDuration,\n open,\n defaultOpen,\n onOpenChange,\n disabled = false,\n container,\n className,\n}: TooltipProps) {\n const hasProvider = useContext(HasProviderContext);\n\n if (disabled) return children;\n\n const root = (\n <RadixTooltip.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n delayDuration={delayDuration}\n >\n <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n <RadixTooltip.Portal container={container}>\n <RadixTooltip.Content\n className={cx('nuri-tooltip', className)}\n side={side}\n align={align}\n sideOffset={4}\n collisionPadding={8}\n arrowPadding={6}\n // 트리거가 뷰포트/스크롤 영역에서 완전히 사라지면 툴팁도 숨김\n // (기준 요소 없이 툴팁만 떠 있는 현상 방지)\n hideWhenDetached\n >\n {content}\n {arrow && <RadixTooltip.Arrow className=\"nuri-tooltip__arrow\" width={14} height={7} />}\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n </RadixTooltip.Root>\n );\n\n // 앱에 TooltipProvider가 없어도 동작하도록 자체 Provider로 폴백.\n // 앱 Provider가 있으면 감싸지 않는다 — 안쪽 컨텍스트가 이기므로 여기서 또 감싸면\n // 앱이 설정한 delayDuration·skipDelayDuration이 무시된다.\n // 폴백 지연 100ms — 거의 즉시로 느껴지되, 마우스가 스쳐 지나갈 때 연쇄 깜빡임은 방지\n // (버튼 하나를 가로지르는 데 ~30–50ms — 그보다 길게 머문 경우만 의도로 판정).\n return hasProvider ? (\n root\n ) : (\n <RadixTooltip.Provider delayDuration={100}>{root}</RadixTooltip.Provider>\n );\n}\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;AAEA,OAAO;AACP,YAAY,kBAAkB;AAC9B,SAAS,eAAe,kBAAkB;;;ACAnC,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuDM,cA6CE,YA7CF;AAfN,IAAM,qBAAqB,cAAc,KAAK;AAYvC,SAAS,gBAAgB,EAAE,UAAU,GAAG,MAAM,GAAyB;AAC5E,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAClC,8BAAc,uBAAb,EAAuB,GAAG,OAAQ,UAAS,GAC9C;AAEJ;AAeO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAiB;AACf,QAAM,cAAc,WAAW,kBAAkB;AAEjD,MAAI,SAAU,QAAO;AAErB,QAAM,OACJ;AAAA,IAAc;AAAA,IAAb;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAc,sBAAb,EAAqB,SAAO,MAAE,UAAS;AAAA,QACxC,oBAAc,qBAAb,EAAoB,WACnB;AAAA,UAAc;AAAA,UAAb;AAAA,YACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,YACvC;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,cAAc;AAAA,YAGd,kBAAgB;AAAA,YAEf;AAAA;AAAA,cACA,SAAS,oBAAc,oBAAb,EAAmB,WAAU,uBAAsB,OAAO,IAAI,QAAQ,GAAG;AAAA;AAAA;AAAA,QACtF,GACF;AAAA;AAAA;AAAA,EACF;AAQF,SAAO,cACL,OAEA,oBAAc,uBAAb,EAAsB,eAAe,KAAM,gBAAK;AAErD;","names":[]}
package/dist/index.cjs CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;