@nurimedia/react-ui 0.1.1 → 0.1.2

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 (97) hide show
  1. package/dist/AlertDialog/index.cjs +4 -181
  2. package/dist/AlertDialog/index.cjs.map +1 -1
  3. package/dist/AlertDialog/index.js +4 -145
  4. package/dist/AlertDialog/index.js.map +1 -1
  5. package/dist/Button/index.cjs +4 -132
  6. package/dist/Button/index.cjs.map +1 -1
  7. package/dist/Button/index.js +4 -106
  8. package/dist/Button/index.js.map +1 -1
  9. package/dist/Checkbox/index.cjs +4 -79
  10. package/dist/Checkbox/index.cjs.map +1 -1
  11. package/dist/Checkbox/index.js +4 -43
  12. package/dist/Checkbox/index.js.map +1 -1
  13. package/dist/Input/index.cjs +4 -99
  14. package/dist/Input/index.cjs.map +1 -1
  15. package/dist/Input/index.js +4 -73
  16. package/dist/Input/index.js.map +1 -1
  17. package/dist/Modal/index.cjs +4 -116
  18. package/dist/Modal/index.cjs.map +1 -1
  19. package/dist/Modal/index.js +4 -80
  20. package/dist/Modal/index.js.map +1 -1
  21. package/dist/Radio/index.cjs +6 -82
  22. package/dist/Radio/index.cjs.map +1 -1
  23. package/dist/Radio/index.js +5 -44
  24. package/dist/Radio/index.js.map +1 -1
  25. package/dist/Select/index.cjs +4 -112
  26. package/dist/Select/index.cjs.map +1 -1
  27. package/dist/Select/index.js +4 -76
  28. package/dist/Select/index.js.map +1 -1
  29. package/dist/Switch/index.cjs +4 -67
  30. package/dist/Switch/index.cjs.map +1 -1
  31. package/dist/Switch/index.js +4 -31
  32. package/dist/Switch/index.js.map +1 -1
  33. package/dist/Textarea/index.cjs +4 -123
  34. package/dist/Textarea/index.cjs.map +1 -1
  35. package/dist/Textarea/index.js +4 -97
  36. package/dist/Textarea/index.js.map +1 -1
  37. package/dist/Toast/index.cjs +4 -178
  38. package/dist/Toast/index.cjs.map +1 -1
  39. package/dist/Toast/index.js +5 -142
  40. package/dist/Toast/index.js.map +1 -1
  41. package/dist/Tooltip/index.cjs +6 -101
  42. package/dist/Tooltip/index.cjs.map +1 -1
  43. package/dist/Tooltip/index.js +5 -63
  44. package/dist/Tooltip/index.js.map +1 -1
  45. package/dist/chunk-2LFW4MM6.cjs +47 -0
  46. package/dist/chunk-2LFW4MM6.cjs.map +1 -0
  47. package/dist/chunk-2WKLA5RC.cjs +82 -0
  48. package/dist/chunk-2WKLA5RC.cjs.map +1 -0
  49. package/dist/chunk-2YGYLCCA.js +66 -0
  50. package/dist/chunk-2YGYLCCA.js.map +1 -0
  51. package/dist/chunk-323VGYMK.cjs +147 -0
  52. package/dist/chunk-323VGYMK.cjs.map +1 -0
  53. package/dist/chunk-3H47QMKS.js +47 -0
  54. package/dist/chunk-3H47QMKS.js.map +1 -0
  55. package/dist/chunk-3QSLHLC2.cjs +45 -0
  56. package/dist/chunk-3QSLHLC2.cjs.map +1 -0
  57. package/dist/chunk-4N5JIGIU.js +82 -0
  58. package/dist/chunk-4N5JIGIU.js.map +1 -0
  59. package/dist/chunk-DTGPVOJK.js +99 -0
  60. package/dist/chunk-DTGPVOJK.js.map +1 -0
  61. package/dist/chunk-DTQE42F7.js +33 -0
  62. package/dist/chunk-DTQE42F7.js.map +1 -0
  63. package/dist/chunk-DYO4PIBB.js +75 -0
  64. package/dist/chunk-DYO4PIBB.js.map +1 -0
  65. package/dist/chunk-GBMYANHH.js +149 -0
  66. package/dist/chunk-GBMYANHH.js.map +1 -0
  67. package/dist/chunk-I7KJ7WTN.cjs +149 -0
  68. package/dist/chunk-I7KJ7WTN.cjs.map +1 -0
  69. package/dist/chunk-JM4HDCLU.cjs +110 -0
  70. package/dist/chunk-JM4HDCLU.cjs.map +1 -0
  71. package/dist/chunk-JXJ6G634.cjs +75 -0
  72. package/dist/chunk-JXJ6G634.cjs.map +1 -0
  73. package/dist/chunk-LAPTEQ5N.js +45 -0
  74. package/dist/chunk-LAPTEQ5N.js.map +1 -0
  75. package/dist/chunk-LRATCHCB.cjs +66 -0
  76. package/dist/chunk-LRATCHCB.cjs.map +1 -0
  77. package/dist/chunk-OM4QMC4F.js +110 -0
  78. package/dist/chunk-OM4QMC4F.js.map +1 -0
  79. package/dist/chunk-PAXRFQUJ.cjs +33 -0
  80. package/dist/chunk-PAXRFQUJ.cjs.map +1 -0
  81. package/dist/chunk-PC3B67B4.cjs +78 -0
  82. package/dist/chunk-PC3B67B4.cjs.map +1 -0
  83. package/dist/chunk-PS6QXS5Z.js +11 -0
  84. package/dist/chunk-PS6QXS5Z.js.map +1 -0
  85. package/dist/chunk-Q26BJSLP.cjs +99 -0
  86. package/dist/chunk-Q26BJSLP.cjs.map +1 -0
  87. package/dist/chunk-R4E4BIPC.cjs +11 -0
  88. package/dist/chunk-R4E4BIPC.cjs.map +1 -0
  89. package/dist/chunk-R757N7RU.js +78 -0
  90. package/dist/chunk-R757N7RU.js.map +1 -0
  91. package/dist/chunk-RC773ZEY.js +147 -0
  92. package/dist/chunk-RC773ZEY.js.map +1 -0
  93. package/dist/index.cjs +54 -900
  94. package/dist/index.cjs.map +1 -1
  95. package/dist/index.js +37 -834
  96. package/dist/index.js.map +1 -1
  97. package/package.json +1 -1
@@ -1,80 +1,8 @@
1
1
  'use client';
2
-
3
- // src/Select/Select.tsx
4
- import "./styles.css";
5
- import * as RadixSelect from "@radix-ui/react-select";
6
- import { forwardRef } from "react";
7
-
8
- // src/utils/cx.ts
9
- function cx(...classes) {
10
- return classes.filter(Boolean).join(" ");
11
- }
12
-
13
- // src/Select/Select.tsx
14
- import { jsx, jsxs } from "react/jsx-runtime";
15
- var CaretIcon = () => /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1.1 2.5h5.8L4 5.9z", fill: "currentColor" }) });
16
- var Select = forwardRef(function Select2({
17
- options,
18
- size = "md",
19
- placeholder,
20
- value,
21
- defaultValue,
22
- onValueChange,
23
- open,
24
- defaultOpen,
25
- onOpenChange,
26
- disabled = false,
27
- block = false,
28
- name,
29
- required,
30
- container,
31
- className,
32
- "aria-label": ariaLabel
33
- }, ref) {
34
- return /* @__PURE__ */ jsxs(
35
- RadixSelect.Root,
36
- {
37
- value,
38
- defaultValue,
39
- onValueChange,
40
- open,
41
- defaultOpen,
42
- onOpenChange,
43
- disabled,
44
- name,
45
- required,
46
- children: [
47
- /* @__PURE__ */ jsxs(
48
- RadixSelect.Trigger,
49
- {
50
- ref,
51
- "aria-label": ariaLabel,
52
- className: cx(
53
- "nuri-select__trigger",
54
- `nuri-select__trigger--${size}`,
55
- block && "nuri-select__trigger--block",
56
- className
57
- ),
58
- children: [
59
- /* @__PURE__ */ jsx("span", { className: "nuri-select__value", children: /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }) }),
60
- /* @__PURE__ */ jsx(RadixSelect.Icon, { className: "nuri-select__caret", children: /* @__PURE__ */ jsx(CaretIcon, {}) })
61
- ]
62
- }
63
- ),
64
- /* @__PURE__ */ jsx(RadixSelect.Portal, { container, children: /* @__PURE__ */ jsx(RadixSelect.Content, { className: "nuri-select__content", position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: "nuri-select__viewport", children: options.map((option) => /* @__PURE__ */ jsx(
65
- RadixSelect.Item,
66
- {
67
- value: option.value,
68
- disabled: option.disabled,
69
- className: "nuri-select__item",
70
- children: /* @__PURE__ */ jsx(RadixSelect.ItemText, { children: option.label })
71
- },
72
- option.value
73
- )) }) }) })
74
- ]
75
- }
76
- );
77
- });
2
+ import {
3
+ Select
4
+ } from "../chunk-R757N7RU.js";
5
+ import "../chunk-PS6QXS5Z.js";
78
6
  export {
79
7
  Select
80
8
  };
@@ -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":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,72 +1,9 @@
1
- 'use client';
2
- "use strict";
3
- var __create = Object.create;
4
- var __defProp = Object.defineProperty;
5
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getProtoOf = Object.getPrototypeOf;
8
- var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
- }
19
- return to;
20
- };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});'use client';
30
2
 
31
- // src/Switch/index.ts
32
- var Switch_exports = {};
33
- __export(Switch_exports, {
34
- Switch: () => Switch
35
- });
36
- module.exports = __toCommonJS(Switch_exports);
37
3
 
38
- // src/Switch/Switch.tsx
39
- var import_styles = require("./styles.css");
40
- var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
41
- var import_react = require("react");
4
+ var _chunkPAXRFQUJcjs = require('../chunk-PAXRFQUJ.cjs');
5
+ require('../chunk-R4E4BIPC.cjs');
42
6
 
43
- // src/utils/cx.ts
44
- function cx(...classes) {
45
- return classes.filter(Boolean).join(" ");
46
- }
47
7
 
48
- // src/Switch/Switch.tsx
49
- var import_jsx_runtime = require("react/jsx-runtime");
50
- var Switch = (0, import_react.forwardRef)(function Switch2({ label, disabled = false, id: idProp, className, ...rest }, ref) {
51
- const reactId = (0, import_react.useId)();
52
- const id = idProp ?? `nuri-switch-${reactId}`;
53
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-switch", className), children: [
54
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
55
- RadixSwitch.Root,
56
- {
57
- ref,
58
- id,
59
- className: "nuri-switch__control",
60
- disabled,
61
- ...rest,
62
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSwitch.Thumb, { className: "nuri-switch__thumb" })
63
- }
64
- ),
65
- label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "nuri-switch__label", children: label })
66
- ] });
67
- });
68
- // Annotate the CommonJS export names for ESM import in node:
69
- 0 && (module.exports = {
70
- Switch
71
- });
8
+ exports.Switch = _chunkPAXRFQUJcjs.Switch;
72
9
  //# sourceMappingURL=index.cjs.map
@@ -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":["/Users/summerhoony/Desktop/projects/nuri-ui/dist/Switch/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,0CAAC","file":"/Users/summerhoony/Desktop/projects/nuri-ui/dist/Switch/index.cjs"}
@@ -1,35 +1,8 @@
1
1
  'use client';
2
-
3
- // src/Switch/Switch.tsx
4
- import "./styles.css";
5
- import * as RadixSwitch from "@radix-ui/react-switch";
6
- import { forwardRef, useId } from "react";
7
-
8
- // src/utils/cx.ts
9
- function cx(...classes) {
10
- return classes.filter(Boolean).join(" ");
11
- }
12
-
13
- // src/Switch/Switch.tsx
14
- import { jsx, jsxs } from "react/jsx-runtime";
15
- var Switch = forwardRef(function Switch2({ label, disabled = false, id: idProp, className, ...rest }, ref) {
16
- const reactId = useId();
17
- const id = idProp ?? `nuri-switch-${reactId}`;
18
- return /* @__PURE__ */ jsxs("div", { className: cx("nuri-switch", className), children: [
19
- /* @__PURE__ */ jsx(
20
- RadixSwitch.Root,
21
- {
22
- ref,
23
- id,
24
- className: "nuri-switch__control",
25
- disabled,
26
- ...rest,
27
- children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: "nuri-switch__thumb" })
28
- }
29
- ),
30
- label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "nuri-switch__label", children: label })
31
- ] });
32
- });
2
+ import {
3
+ Switch
4
+ } from "../chunk-DTQE42F7.js";
5
+ import "../chunk-PS6QXS5Z.js";
33
6
  export {
34
7
  Switch
35
8
  };
@@ -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":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,128 +1,9 @@
1
- 'use client';
2
- "use strict";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});'use client';
20
2
 
21
- // src/Textarea/index.ts
22
- var Textarea_exports = {};
23
- __export(Textarea_exports, {
24
- Textarea: () => Textarea
25
- });
26
- module.exports = __toCommonJS(Textarea_exports);
27
3
 
28
- // src/Textarea/Textarea.tsx
29
- var import_styles = require("./styles.css");
30
- var import_react = require("react");
4
+ var _chunkQ26BJSLPcjs = require('../chunk-Q26BJSLP.cjs');
5
+ require('../chunk-R4E4BIPC.cjs');
31
6
 
32
- // src/utils/cx.ts
33
- function cx(...classes) {
34
- return classes.filter(Boolean).join(" ");
35
- }
36
7
 
37
- // src/Textarea/Textarea.tsx
38
- var import_jsx_runtime = require("react/jsx-runtime");
39
- var Textarea = (0, import_react.forwardRef)(function Textarea2({
40
- label,
41
- hideLabel = false,
42
- description,
43
- invalid = false,
44
- errorMessage,
45
- block = false,
46
- resize = "vertical",
47
- autosize = false,
48
- maxRows,
49
- rows = 3,
50
- disabled = false,
51
- className,
52
- id: idProp,
53
- value,
54
- onChange,
55
- "aria-describedby": ariaDescribedby,
56
- ...rest
57
- }, ref) {
58
- const reactId = (0, import_react.useId)();
59
- const id = idProp ?? `nuri-textarea-${reactId}`;
60
- const messageId = `${id}-message`;
61
- const innerRef = (0, import_react.useRef)(null);
62
- const setRefs = (0, import_react.useCallback)(
63
- (node) => {
64
- innerRef.current = node;
65
- if (typeof ref === "function") ref(node);
66
- else if (ref) ref.current = node;
67
- },
68
- [ref]
69
- );
70
- const fitHeight = (0, import_react.useCallback)(() => {
71
- const el = innerRef.current;
72
- if (!el) return;
73
- const cs = getComputedStyle(el);
74
- const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
75
- const lineHeight = parseFloat(cs.lineHeight);
76
- const maxHeight = maxRows != null && !Number.isNaN(lineHeight) ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders : Infinity;
77
- el.style.height = "auto";
78
- const contentHeight = el.scrollHeight + borders;
79
- const next = Math.min(contentHeight, maxHeight);
80
- if (!Number.isNaN(next)) el.style.height = `${next}px`;
81
- el.style.overflowY = contentHeight > maxHeight ? "auto" : "hidden";
82
- }, [maxRows]);
83
- (0, import_react.useLayoutEffect)(() => {
84
- if (autosize) fitHeight();
85
- }, [autosize, fitHeight, value]);
86
- const handleChange = (e) => {
87
- onChange?.(e);
88
- if (autosize) fitHeight();
89
- };
90
- const message = invalid && errorMessage != null ? errorMessage : description;
91
- const hasMessage = message != null;
92
- const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
93
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-textarea", block && "nuri-textarea--block", className), children: [
94
- label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: cx("nuri-textarea__label", hideLabel && "nuri-sr-only"), children: label }),
95
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
96
- "textarea",
97
- {
98
- ref: setRefs,
99
- id,
100
- rows,
101
- value,
102
- onChange: handleChange,
103
- className: cx(
104
- "nuri-textarea__control",
105
- invalid && "nuri-textarea__control--invalid",
106
- (resize === "none" || autosize) && "nuri-textarea__control--resize-none"
107
- ),
108
- disabled,
109
- "aria-invalid": invalid || void 0,
110
- "aria-describedby": describedBy,
111
- ...rest
112
- }
113
- ),
114
- hasMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
- "p",
116
- {
117
- id: messageId,
118
- className: cx("nuri-textarea__message", invalid && "nuri-textarea__message--error"),
119
- children: message
120
- }
121
- )
122
- ] });
123
- });
124
- // Annotate the CommonJS export names for ESM import in node:
125
- 0 && (module.exports = {
126
- Textarea
127
- });
8
+ exports.Textarea = _chunkQ26BJSLPcjs.Textarea;
128
9
  //# sourceMappingURL=index.cjs.map
@@ -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":["/Users/summerhoony/Desktop/projects/nuri-ui/dist/Textarea/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,8CAAC","file":"/Users/summerhoony/Desktop/projects/nuri-ui/dist/Textarea/index.cjs"}
@@ -1,101 +1,8 @@
1
1
  'use client';
2
-
3
- // src/Textarea/Textarea.tsx
4
- import "./styles.css";
5
- import { forwardRef, useCallback, useId, useLayoutEffect, useRef } from "react";
6
-
7
- // src/utils/cx.ts
8
- function cx(...classes) {
9
- return classes.filter(Boolean).join(" ");
10
- }
11
-
12
- // src/Textarea/Textarea.tsx
13
- import { jsx, jsxs } from "react/jsx-runtime";
14
- var Textarea = forwardRef(function Textarea2({
15
- label,
16
- hideLabel = false,
17
- description,
18
- invalid = false,
19
- errorMessage,
20
- block = false,
21
- resize = "vertical",
22
- autosize = false,
23
- maxRows,
24
- rows = 3,
25
- disabled = false,
26
- className,
27
- id: idProp,
28
- value,
29
- onChange,
30
- "aria-describedby": ariaDescribedby,
31
- ...rest
32
- }, ref) {
33
- const reactId = useId();
34
- const id = idProp ?? `nuri-textarea-${reactId}`;
35
- const messageId = `${id}-message`;
36
- const innerRef = useRef(null);
37
- const setRefs = useCallback(
38
- (node) => {
39
- innerRef.current = node;
40
- if (typeof ref === "function") ref(node);
41
- else if (ref) ref.current = node;
42
- },
43
- [ref]
44
- );
45
- const fitHeight = useCallback(() => {
46
- const el = innerRef.current;
47
- if (!el) return;
48
- const cs = getComputedStyle(el);
49
- const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
50
- const lineHeight = parseFloat(cs.lineHeight);
51
- const maxHeight = maxRows != null && !Number.isNaN(lineHeight) ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders : Infinity;
52
- el.style.height = "auto";
53
- const contentHeight = el.scrollHeight + borders;
54
- const next = Math.min(contentHeight, maxHeight);
55
- if (!Number.isNaN(next)) el.style.height = `${next}px`;
56
- el.style.overflowY = contentHeight > maxHeight ? "auto" : "hidden";
57
- }, [maxRows]);
58
- useLayoutEffect(() => {
59
- if (autosize) fitHeight();
60
- }, [autosize, fitHeight, value]);
61
- const handleChange = (e) => {
62
- onChange?.(e);
63
- if (autosize) fitHeight();
64
- };
65
- const message = invalid && errorMessage != null ? errorMessage : description;
66
- const hasMessage = message != null;
67
- const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
68
- return /* @__PURE__ */ jsxs("div", { className: cx("nuri-textarea", block && "nuri-textarea--block", className), children: [
69
- label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: cx("nuri-textarea__label", hideLabel && "nuri-sr-only"), children: label }),
70
- /* @__PURE__ */ jsx(
71
- "textarea",
72
- {
73
- ref: setRefs,
74
- id,
75
- rows,
76
- value,
77
- onChange: handleChange,
78
- className: cx(
79
- "nuri-textarea__control",
80
- invalid && "nuri-textarea__control--invalid",
81
- (resize === "none" || autosize) && "nuri-textarea__control--resize-none"
82
- ),
83
- disabled,
84
- "aria-invalid": invalid || void 0,
85
- "aria-describedby": describedBy,
86
- ...rest
87
- }
88
- ),
89
- hasMessage && /* @__PURE__ */ jsx(
90
- "p",
91
- {
92
- id: messageId,
93
- className: cx("nuri-textarea__message", invalid && "nuri-textarea__message--error"),
94
- children: message
95
- }
96
- )
97
- ] });
98
- });
2
+ import {
3
+ Textarea
4
+ } from "../chunk-DTGPVOJK.js";
5
+ import "../chunk-PS6QXS5Z.js";
99
6
  export {
100
7
  Textarea
101
8
  };
@@ -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":[],"sourcesContent":[],"mappings":"","names":[]}