@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,110 +1,8 @@
1
1
  'use client';
2
-
3
- // src/Button/Button.tsx
4
- import "./styles.css";
5
- import { Slot } from "@radix-ui/react-slot";
6
- import { Children, cloneElement, forwardRef, isValidElement } from "react";
7
-
8
- // src/Button/Spinner.tsx
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
- var Spinner = () => /* @__PURE__ */ jsx("span", { className: "nuri-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { className: "nuri-button__spinner", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: [
11
- /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
12
- /* @__PURE__ */ jsx("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
13
- ] }) });
14
-
15
- // src/utils/cx.ts
16
- function cx(...classes) {
17
- return classes.filter(Boolean).join(" ");
18
- }
19
-
20
- // src/Button/Button.tsx
21
- import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
22
- var Button = forwardRef(function Button2({
23
- variant = "primary",
24
- size = "md",
25
- iconLeft,
26
- iconRight,
27
- iconOnly = false,
28
- block = false,
29
- loading = false,
30
- disabled = false,
31
- asChild = false,
32
- type = "button",
33
- className,
34
- children,
35
- onClick,
36
- ...rest
37
- }, ref) {
38
- const isBlocked = disabled || loading;
39
- if (process.env.NODE_ENV !== "production" && iconOnly && !rest["aria-label"] && !rest["aria-labelledby"]) {
40
- console.warn(
41
- "[nuri/Button] `iconOnly` \uBC84\uD2BC\uC740 `aria-label`(\uB610\uB294 `aria-labelledby`)\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."
42
- );
43
- }
44
- const hasLeftSlot = !iconOnly && (loading || iconLeft != null);
45
- const hasRightSlot = !iconOnly && !loading && iconRight != null;
46
- const classes = cx(
47
- "nuri-button",
48
- `nuri-button--${variant}`,
49
- `nuri-button--${size}`,
50
- block && "nuri-button--block",
51
- iconOnly && "nuri-button--icon-only",
52
- isBlocked && "nuri-button--disabled",
53
- loading && "nuri-button--loading",
54
- hasLeftSlot && "nuri-button--has-left",
55
- hasRightSlot && "nuri-button--has-right",
56
- className
57
- );
58
- const handleClick = (e) => {
59
- if (isBlocked) {
60
- e.preventDefault();
61
- e.stopPropagation();
62
- return;
63
- }
64
- onClick?.(e);
65
- };
66
- const renderContent = (content) => {
67
- if (iconOnly) {
68
- return /* @__PURE__ */ jsx2("span", { className: "nuri-button__icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx2(Spinner, {}) : content });
69
- }
70
- return /* @__PURE__ */ jsxs2(Fragment, { children: [
71
- loading ? /* @__PURE__ */ jsx2(Spinner, {}) : iconLeft != null && /* @__PURE__ */ jsx2("span", { className: "nuri-button__icon nuri-button__icon--left", "aria-hidden": "true", children: iconLeft }),
72
- content,
73
- hasRightSlot && /* @__PURE__ */ jsx2("span", { className: "nuri-button__icon nuri-button__icon--right", "aria-hidden": "true", children: iconRight })
74
- ] });
75
- };
76
- if (asChild) {
77
- const child = Children.only(children);
78
- if (!isValidElement(child)) return null;
79
- const childElement = child;
80
- return /* @__PURE__ */ jsx2(
81
- Slot,
82
- {
83
- ref,
84
- className: classes,
85
- "aria-disabled": isBlocked || void 0,
86
- "aria-busy": loading || void 0,
87
- onClick: handleClick,
88
- ...rest,
89
- children: cloneElement(childElement, void 0, renderContent(childElement.props.children))
90
- }
91
- );
92
- }
93
- return /* @__PURE__ */ jsx2(
94
- "button",
95
- {
96
- ref,
97
- type,
98
- className: classes,
99
- disabled,
100
- "aria-disabled": loading || void 0,
101
- "aria-busy": loading || void 0,
102
- onClick: handleClick,
103
- ...rest,
104
- children: renderContent(children)
105
- }
106
- );
107
- });
2
+ import {
3
+ Button
4
+ } from "../chunk-OM4QMC4F.js";
5
+ import "../chunk-PS6QXS5Z.js";
108
6
  export {
109
7
  Button
110
8
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Button.tsx","../../src/Button/Spinner.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Children, cloneElement, forwardRef, isValidElement } from 'react';\nimport type { ButtonHTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { Spinner } from './Spinner.js';\nimport { cx } from '../utils/cx.js';\n\ntype Variant = 'primary' | 'secondary' | 'outline' | 'ghost';\ntype Size = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {\n /**\n * 시각 유형.\n * - `primary`: 브랜드 색 배경 (기본)\n * - `secondary`: 브랜드 옅은 톤 배경\n * - `outline`: 투명 배경 + 테두리\n * - `ghost`: 투명 배경, hover 시에만 배경 채움\n * @default 'primary'\n */\n variant?: Variant;\n\n /**\n * 사이즈.\n * - `sm`: 36px 높이 — 밀집된 UI, 테이블 액션\n * - `md`: 42px 높이 — 일반 콘텐츠 영역 (기본)\n * - `lg`: 48px 높이 — 주요 CTA, 모바일 터치\n * @default 'md'\n */\n size?: Size;\n\n /**\n * 라벨 좌측에 표시할 아이콘.\n * @example <Button iconLeft={<SearchIcon />}>검색</Button>\n */\n iconLeft?: ReactNode;\n\n /**\n * 라벨 우측에 표시할 아이콘.\n */\n iconRight?: ReactNode;\n\n /**\n * 아이콘만 표시하는 정사각 버튼. **`aria-label` 필수**\n * (icon-only는 시각적으로만 의미가 있으므로 스크린리더용 라벨이 없으면 사용자가 용도를 알 수 없음).\n * children은 단일 아이콘 엘리먼트.\n * @example <Button iconOnly aria-label=\"닫기\"><CloseIcon /></Button>\n */\n iconOnly?: boolean;\n\n /**\n * 컨테이너 전체 너비로 확장.\n */\n block?: boolean;\n\n /**\n * 로딩 중 표시. 스피너를 좌측 아이콘 자리에 표시하고, 클릭을 차단하며 `aria-busy=\"true\"`를 부여.\n */\n loading?: boolean;\n\n /**\n * Radix Slot으로 자식 엘리먼트를 렌더 — 자식이 Button의 className·ref·이벤트 핸들러를 모두 물려받음.\n * 링크를 버튼처럼 보이게 할 때 가장 자주 사용 (next/link, react-router Link 등).\n * @example\n * <Button asChild><Link href=\"/about\">소개</Link></Button>\n */\n asChild?: boolean;\n\n /**\n * 폼 버튼 타입. 의도치 않은 form submit 방지를 위해 기본값 `'button'`.\n * 폼 제출 버튼이면 명시적으로 `type=\"submit\"` 지정.\n * @default 'button'\n */\n type?: 'button' | 'submit' | 'reset';\n\n children?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant = 'primary',\n size = 'md',\n iconLeft,\n iconRight,\n iconOnly = false,\n block = false,\n loading = false,\n disabled = false,\n asChild = false,\n type = 'button',\n className,\n children,\n onClick,\n ...rest\n },\n ref,\n) {\n const isBlocked = disabled || loading;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n iconOnly &&\n !rest['aria-label'] &&\n !rest['aria-labelledby']\n ) {\n // iconOnly 버튼은 텍스트가 없어 스크린리더가 용도를 알 수 없음 → 개발 모드 경고\n console.warn(\n '[nuri/Button] `iconOnly` 버튼은 `aria-label`(또는 `aria-labelledby`)이 필요합니다.',\n );\n }\n\n const hasLeftSlot = !iconOnly && (loading || iconLeft != null);\n const hasRightSlot = !iconOnly && !loading && iconRight != null;\n\n const classes = cx(\n 'nuri-button',\n `nuri-button--${variant}`,\n `nuri-button--${size}`,\n block && 'nuri-button--block',\n iconOnly && 'nuri-button--icon-only',\n isBlocked && 'nuri-button--disabled',\n loading && 'nuri-button--loading',\n hasLeftSlot && 'nuri-button--has-left',\n hasRightSlot && 'nuri-button--has-right',\n className,\n );\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n if (isBlocked) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n onClick?.(e);\n };\n\n const renderContent = (content: ReactNode) => {\n if (iconOnly) {\n return (\n <span className=\"nuri-button__icon\" aria-hidden=\"true\">\n {loading ? <Spinner /> : content}\n </span>\n );\n }\n return (\n <>\n {loading ? (\n <Spinner />\n ) : (\n iconLeft != null && (\n <span className=\"nuri-button__icon nuri-button__icon--left\" aria-hidden=\"true\">\n {iconLeft}\n </span>\n )\n )}\n {content}\n {hasRightSlot && (\n <span className=\"nuri-button__icon nuri-button__icon--right\" aria-hidden=\"true\">\n {iconRight}\n </span>\n )}\n </>\n );\n };\n\n if (asChild) {\n const child = Children.only(children);\n if (!isValidElement(child)) return null;\n const childElement = child as ReactElement<{ children?: ReactNode }>;\n return (\n <Slot\n ref={ref}\n className={classes}\n aria-disabled={isBlocked || undefined}\n aria-busy={loading || undefined}\n onClick={handleClick}\n {...rest}\n >\n {cloneElement(childElement, undefined, renderContent(childElement.props.children))}\n </Slot>\n );\n }\n\n return (\n <button\n ref={ref}\n type={type}\n className={classes}\n // disabled = 진짜 비활성 → native disabled (포커스 불가, 의도된 동작)\n // loading = 일시적 처리중 → aria-disabled로 포커스 유지 (클릭은 handleClick이 가드)\n disabled={disabled}\n aria-disabled={loading || undefined}\n aria-busy={loading || undefined}\n onClick={handleClick}\n {...rest}\n >\n {renderContent(children)}\n </button>\n );\n});\n","export const Spinner = () => (\n <span className=\"nuri-button__icon\" aria-hidden=\"true\">\n <svg className=\"nuri-button__spinner\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" strokeOpacity=\"0.25\" strokeWidth=\"2\" />\n <path d=\"M14 8a6 6 0 0 0-6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n </span>\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":"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","names":["jsx","jsxs","Button"]}
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,84 +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/Checkbox/index.ts
32
- var Checkbox_exports = {};
33
- __export(Checkbox_exports, {
34
- Checkbox: () => Checkbox
35
- });
36
- module.exports = __toCommonJS(Checkbox_exports);
37
3
 
38
- // src/Checkbox/Checkbox.tsx
39
- var import_styles = require("./styles.css");
40
- var RadixCheckbox = __toESM(require("@radix-ui/react-checkbox"), 1);
41
- var import_react = require("react");
4
+ var _chunk3QSLHLC2cjs = require('../chunk-3QSLHLC2.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/Checkbox/Checkbox.tsx
49
- var import_jsx_runtime = require("react/jsx-runtime");
50
- var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
51
- "path",
52
- {
53
- d: "M2.5 6.2l2.4 2.4 4.6-5",
54
- stroke: "currentColor",
55
- strokeWidth: "1.6",
56
- strokeLinecap: "round",
57
- strokeLinejoin: "round"
58
- }
59
- ) });
60
- var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.8 6h6.4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) });
61
- var Checkbox = (0, import_react.forwardRef)(function Checkbox2({ label, size = "md", disabled = false, id: idProp, className, checked, ...rest }, ref) {
62
- const reactId = (0, import_react.useId)();
63
- const id = idProp ?? `nuri-checkbox-${reactId}`;
64
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-checkbox", `nuri-checkbox--${size}`, className), children: [
65
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
66
- RadixCheckbox.Root,
67
- {
68
- ref,
69
- id,
70
- className: "nuri-checkbox__control",
71
- disabled,
72
- checked,
73
- ...rest,
74
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixCheckbox.Indicator, { className: "nuri-checkbox__indicator", children: checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndeterminateIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) })
75
- }
76
- ),
77
- label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "nuri-checkbox__label", children: label })
78
- ] });
79
- });
80
- // Annotate the CommonJS export names for ESM import in node:
81
- 0 && (module.exports = {
82
- Checkbox
83
- });
8
+ exports.Checkbox = _chunk3QSLHLC2cjs.Checkbox;
84
9
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Checkbox/index.ts","../../src/Checkbox/Checkbox.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Checkbox } from './Checkbox.js';\nexport type { CheckboxProps } from './Checkbox.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface CheckboxProps {\n /** 라벨 (컨트롤 우측). 지정 시 클릭 영역에 포함되고 자동 연결됨. 없으면 `aria-label` 필수. */\n label?: ReactNode;\n /**\n * 사이즈. md 16px(디자인 Large, 기본) / sm 12px(디자인 Small).\n * @default 'md'\n */\n size?: Size;\n /** 체크 상태 (제어형). `'indeterminate'`는 부분 선택 표시. */\n checked?: boolean | 'indeterminate';\n /** 초기 체크 상태 (비제어형). */\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean | 'indeterminate') => void;\n disabled?: boolean;\n /** 폼 전송용 name — 네이티브 checkbox처럼 폼에 참여. */\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/** 체크마크. TODO(Figma 실측): 디자이너 아이콘으로 교체 예정 — 잠정 표준형. */\nconst CheckIcon = () => (\n <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M2.5 6.2l2.4 2.4 4.6-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/** 부분 선택(indeterminate) 표시 — 가로 막대. */\nconst IndeterminateIcon = () => (\n <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2.8 6h6.4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n </svg>\n);\n\n/**\n * 체크박스. Radix Checkbox 기반 — Space 토글·aria-checked·폼 참여 자동.\n * 라벨을 지정하면 라벨 클릭으로도 토글된다.\n *\n * @example\n * <Checkbox label=\"이용약관에 동의합니다\" checked={agreed} onCheckedChange={setAgreed} />\n *\n * @example 부분 선택 (전체선택 헤더 등)\n * <Checkbox label=\"전체 선택\" checked={someChecked ? 'indeterminate' : allChecked} … />\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(\n { label, size = 'md', disabled = false, id: idProp, className, checked, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-checkbox-${reactId}`;\n\n return (\n <div className={cx('nuri-checkbox', `nuri-checkbox--${size}`, className)}>\n <RadixCheckbox.Root\n ref={ref}\n id={id}\n className=\"nuri-checkbox__control\"\n disabled={disabled}\n checked={checked}\n {...rest}\n >\n <RadixCheckbox.Indicator className=\"nuri-checkbox__indicator\">\n {checked === 'indeterminate' ? <IndeterminateIcon /> : <CheckIcon />}\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label != null && (\n <label htmlFor={id} className=\"nuri-checkbox__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,oBAA+B;AAC/B,mBAAkC;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD+BI;AAFJ,IAAM,YAAY,MAChB,4CAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA;AACjB,GACF;AAIF,IAAM,oBAAoB,MACxB,4CAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C,sDAAC,UAAK,GAAE,cAAa,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,GACrF;AAaK,IAAM,eAAW,yBAA6C,SAASA,UAC5E,EAAE,OAAO,OAAO,MAAM,WAAW,OAAO,IAAI,QAAQ,WAAW,SAAS,GAAG,KAAK,GAChF,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAE7C,SACE,6CAAC,SAAI,WAAW,GAAG,iBAAiB,kBAAkB,IAAI,IAAI,SAAS,GACrE;AAAA;AAAA,MAAe;AAAA,MAAd;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,sDAAe,yBAAd,EAAwB,WAAU,4BAChC,sBAAY,kBAAkB,4CAAC,qBAAkB,IAAK,4CAAC,aAAU,GACpE;AAAA;AAAA,IACF;AAAA,IACC,SAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAU,wBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Checkbox"]}
1
+ {"version":3,"sources":["/Users/summerhoony/Desktop/projects/nuri-ui/dist/Checkbox/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,8CAAC","file":"/Users/summerhoony/Desktop/projects/nuri-ui/dist/Checkbox/index.cjs"}
@@ -1,47 +1,8 @@
1
1
  'use client';
2
-
3
- // src/Checkbox/Checkbox.tsx
4
- import "./styles.css";
5
- import * as RadixCheckbox from "@radix-ui/react-checkbox";
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/Checkbox/Checkbox.tsx
14
- import { jsx, jsxs } from "react/jsx-runtime";
15
- var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
16
- "path",
17
- {
18
- d: "M2.5 6.2l2.4 2.4 4.6-5",
19
- stroke: "currentColor",
20
- strokeWidth: "1.6",
21
- strokeLinecap: "round",
22
- strokeLinejoin: "round"
23
- }
24
- ) });
25
- var IndeterminateIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.8 6h6.4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) });
26
- var Checkbox = forwardRef(function Checkbox2({ label, size = "md", disabled = false, id: idProp, className, checked, ...rest }, ref) {
27
- const reactId = useId();
28
- const id = idProp ?? `nuri-checkbox-${reactId}`;
29
- return /* @__PURE__ */ jsxs("div", { className: cx("nuri-checkbox", `nuri-checkbox--${size}`, className), children: [
30
- /* @__PURE__ */ jsx(
31
- RadixCheckbox.Root,
32
- {
33
- ref,
34
- id,
35
- className: "nuri-checkbox__control",
36
- disabled,
37
- checked,
38
- ...rest,
39
- children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "nuri-checkbox__indicator", children: checked === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) })
40
- }
41
- ),
42
- label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "nuri-checkbox__label", children: label })
43
- ] });
44
- });
2
+ import {
3
+ Checkbox
4
+ } from "../chunk-LAPTEQ5N.js";
5
+ import "../chunk-PS6QXS5Z.js";
45
6
  export {
46
7
  Checkbox
47
8
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface CheckboxProps {\n /** 라벨 (컨트롤 우측). 지정 시 클릭 영역에 포함되고 자동 연결됨. 없으면 `aria-label` 필수. */\n label?: ReactNode;\n /**\n * 사이즈. md 16px(디자인 Large, 기본) / sm 12px(디자인 Small).\n * @default 'md'\n */\n size?: Size;\n /** 체크 상태 (제어형). `'indeterminate'`는 부분 선택 표시. */\n checked?: boolean | 'indeterminate';\n /** 초기 체크 상태 (비제어형). */\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean | 'indeterminate') => void;\n disabled?: boolean;\n /** 폼 전송용 name — 네이티브 checkbox처럼 폼에 참여. */\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/** 체크마크. TODO(Figma 실측): 디자이너 아이콘으로 교체 예정 — 잠정 표준형. */\nconst CheckIcon = () => (\n <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M2.5 6.2l2.4 2.4 4.6-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.6\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/** 부분 선택(indeterminate) 표시 — 가로 막대. */\nconst IndeterminateIcon = () => (\n <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2.8 6h6.4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n </svg>\n);\n\n/**\n * 체크박스. Radix Checkbox 기반 — Space 토글·aria-checked·폼 참여 자동.\n * 라벨을 지정하면 라벨 클릭으로도 토글된다.\n *\n * @example\n * <Checkbox label=\"이용약관에 동의합니다\" checked={agreed} onCheckedChange={setAgreed} />\n *\n * @example 부분 선택 (전체선택 헤더 등)\n * <Checkbox label=\"전체 선택\" checked={someChecked ? 'indeterminate' : allChecked} … />\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(\n { label, size = 'md', disabled = false, id: idProp, className, checked, ...rest },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-checkbox-${reactId}`;\n\n return (\n <div className={cx('nuri-checkbox', `nuri-checkbox--${size}`, className)}>\n <RadixCheckbox.Root\n ref={ref}\n id={id}\n className=\"nuri-checkbox__control\"\n disabled={disabled}\n checked={checked}\n {...rest}\n >\n <RadixCheckbox.Indicator className=\"nuri-checkbox__indicator\">\n {checked === 'indeterminate' ? <IndeterminateIcon /> : <CheckIcon />}\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label != null && (\n <label htmlFor={id} className=\"nuri-checkbox__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,mBAAmB;AAC/B,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD+BI,cAmCA,YAnCA;AAFJ,IAAM,YAAY,MAChB,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA;AACjB,GACF;AAIF,IAAM,oBAAoB,MACxB,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C,8BAAC,UAAK,GAAE,cAAa,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,GACrF;AAaK,IAAM,WAAW,WAA6C,SAASA,UAC5E,EAAE,OAAO,OAAO,MAAM,WAAW,OAAO,IAAI,QAAQ,WAAW,SAAS,GAAG,KAAK,GAChF,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAE7C,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,kBAAkB,IAAI,IAAI,SAAS,GACrE;AAAA;AAAA,MAAe;AAAA,MAAd;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAe,yBAAd,EAAwB,WAAU,4BAChC,sBAAY,kBAAkB,oBAAC,qBAAkB,IAAK,oBAAC,aAAU,GACpE;AAAA;AAAA,IACF;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,wBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Checkbox"]}
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,104 +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/Input/index.ts
22
- var Input_exports = {};
23
- __export(Input_exports, {
24
- Input: () => Input
25
- });
26
- module.exports = __toCommonJS(Input_exports);
27
3
 
28
- // src/Input/Input.tsx
29
- var import_styles = require("./styles.css");
30
- var import_react = require("react");
4
+ var _chunkJXJ6G634cjs = require('../chunk-JXJ6G634.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/Input/Input.tsx
38
- var import_jsx_runtime = require("react/jsx-runtime");
39
- var Input = (0, import_react.forwardRef)(function Input2({
40
- size = "md",
41
- label,
42
- hideLabel = false,
43
- description,
44
- invalid = false,
45
- errorMessage,
46
- iconLeft,
47
- iconRight,
48
- block = false,
49
- disabled = false,
50
- className,
51
- id: idProp,
52
- "aria-describedby": ariaDescribedby,
53
- ...rest
54
- }, ref) {
55
- const reactId = (0, import_react.useId)();
56
- const id = idProp ?? `nuri-input-${reactId}`;
57
- const messageId = `${id}-message`;
58
- const message = invalid && errorMessage != null ? errorMessage : description;
59
- const hasMessage = message != null;
60
- const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
61
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-input", block && "nuri-input--block", className), children: [
62
- label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: cx("nuri-input__label", hideLabel && "nuri-sr-only"), children: label }),
63
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
64
- "div",
65
- {
66
- className: cx(
67
- "nuri-input__field",
68
- `nuri-input__field--${size}`,
69
- invalid && "nuri-input__field--invalid",
70
- disabled && "nuri-input__field--disabled"
71
- ),
72
- children: [
73
- iconLeft != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconLeft }),
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
- "input",
76
- {
77
- ref,
78
- id,
79
- className: "nuri-input__control",
80
- disabled,
81
- "aria-invalid": invalid || void 0,
82
- "aria-describedby": describedBy,
83
- ...rest
84
- }
85
- ),
86
- iconRight != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconRight })
87
- ]
88
- }
89
- ),
90
- hasMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
91
- "p",
92
- {
93
- id: messageId,
94
- className: cx("nuri-input__message", invalid && "nuri-input__message--error"),
95
- children: message
96
- }
97
- )
98
- ] });
99
- });
100
- // Annotate the CommonJS export names for ESM import in node:
101
- 0 && (module.exports = {
102
- Input
103
- });
8
+ exports.Input = _chunkJXJ6G634cjs.Input;
104
9
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Input/index.ts","../../src/Input/Input.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Input } from './Input.js';\nexport type { InputProps } from './Input.js';\n","'use client';\n\nimport './styles.css';\nimport { forwardRef, useId } from 'react';\nimport type { InputHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md' | 'lg';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /**\n * 사이즈. sm 36 / md 42 / lg 48 px 높이.\n * @default 'md'\n */\n size?: Size;\n /**\n * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요\n * (placeholder는 이름을 대체하지 못함 — 입력 시 사라지고 대비가 낮음).\n */\n label?: ReactNode;\n /**\n * 라벨을 시각적으로만 숨김 (스크린리더에는 노출). 디자인상 라벨을 안 보이게 하되\n * 접근성 이름은 유지할 때 사용.\n * @default false\n */\n hideLabel?: boolean;\n /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n description?: ReactNode;\n /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n invalid?: boolean;\n /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n errorMessage?: ReactNode;\n /** 좌측 어도먼트 (아이콘 등). */\n iconLeft?: ReactNode;\n /** 우측 어도먼트 (아이콘·clear·버튼 등). */\n iconRight?: ReactNode;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n}\n\n/**\n * 텍스트 입력 필드. 옵션으로 라벨(위)·헬퍼/에러 메시지(아래)를 포함하는 자체 완결형.\n * 상태(default/focus/invalid/disabled)는 CSS로, 값 채움(filled)은 네이티브로 처리.\n *\n * @example 기본\n * <Input placeholder=\"검색어\" aria-label=\"검색\" />\n *\n * @example 라벨 + 헬퍼 + 에러\n * <Input\n * label=\"비밀번호\"\n * description=\"8자 이상 입력하세요\"\n * invalid\n * errorMessage=\"비밀번호가 일치하지 않습니다\"\n * />\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n size = 'md',\n label,\n hideLabel = false,\n description,\n invalid = false,\n errorMessage,\n iconLeft,\n iconRight,\n block = false,\n disabled = false,\n className,\n id: idProp,\n 'aria-describedby': ariaDescribedby,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-input-${reactId}`;\n const messageId = `${id}-message`;\n\n // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄.\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-input', block && 'nuri-input--block', className)}>\n {label != null && (\n <label htmlFor={id} className={cx('nuri-input__label', hideLabel && 'nuri-sr-only')}>\n {label}\n </label>\n )}\n\n <div\n className={cx(\n 'nuri-input__field',\n `nuri-input__field--${size}`,\n invalid && 'nuri-input__field--invalid',\n disabled && 'nuri-input__field--disabled',\n )}\n >\n {iconLeft != null && (\n <span className=\"nuri-input__icon\" aria-hidden=\"true\">\n {iconLeft}\n </span>\n )}\n <input\n ref={ref}\n id={id}\n className=\"nuri-input__control\"\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-describedby={describedBy}\n {...rest}\n />\n {iconRight != null && (\n <span className=\"nuri-input__icon\" aria-hidden=\"true\">\n {iconRight}\n </span>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cx('nuri-input__message', invalid && 'nuri-input__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,mBAAkC;;;ACC3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADkFQ;AAhCD,IAAM,YAAQ,yBAAyC,SAASA,OACrE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,cAAc,OAAO;AAC1C,QAAM,YAAY,GAAG,EAAE;AAGvB,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,cAAc,SAAS,qBAAqB,SAAS,GACrE;AAAA,aAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAW,GAAG,qBAAqB,aAAa,cAAc,GAC/E,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,IAAI;AAAA,UAC1B,WAAW;AAAA,UACX,YAAY;AAAA,QACd;AAAA,QAEC;AAAA,sBAAY,QACX,4CAAC,UAAK,WAAU,oBAAmB,eAAY,QAC5C,oBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV;AAAA,cACA,gBAAc,WAAW;AAAA,cACzB,oBAAkB;AAAA,cACjB,GAAG;AAAA;AAAA,UACN;AAAA,UACC,aAAa,QACZ,4CAAC,UAAK,WAAU,oBAAmB,eAAY,QAC5C,qBACH;AAAA;AAAA;AAAA,IAEJ;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,uBAAuB,WAAW,4BAA4B;AAAA,QAE3E;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Input"]}
1
+ {"version":3,"sources":["/Users/summerhoony/Desktop/projects/nuri-ui/dist/Input/index.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,wCAAC","file":"/Users/summerhoony/Desktop/projects/nuri-ui/dist/Input/index.cjs"}
@@ -1,77 +1,8 @@
1
1
  'use client';
2
-
3
- // src/Input/Input.tsx
4
- import "./styles.css";
5
- import { forwardRef, useId } from "react";
6
-
7
- // src/utils/cx.ts
8
- function cx(...classes) {
9
- return classes.filter(Boolean).join(" ");
10
- }
11
-
12
- // src/Input/Input.tsx
13
- import { jsx, jsxs } from "react/jsx-runtime";
14
- var Input = forwardRef(function Input2({
15
- size = "md",
16
- label,
17
- hideLabel = false,
18
- description,
19
- invalid = false,
20
- errorMessage,
21
- iconLeft,
22
- iconRight,
23
- block = false,
24
- disabled = false,
25
- className,
26
- id: idProp,
27
- "aria-describedby": ariaDescribedby,
28
- ...rest
29
- }, ref) {
30
- const reactId = useId();
31
- const id = idProp ?? `nuri-input-${reactId}`;
32
- const messageId = `${id}-message`;
33
- const message = invalid && errorMessage != null ? errorMessage : description;
34
- const hasMessage = message != null;
35
- const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
36
- return /* @__PURE__ */ jsxs("div", { className: cx("nuri-input", block && "nuri-input--block", className), children: [
37
- label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: cx("nuri-input__label", hideLabel && "nuri-sr-only"), children: label }),
38
- /* @__PURE__ */ jsxs(
39
- "div",
40
- {
41
- className: cx(
42
- "nuri-input__field",
43
- `nuri-input__field--${size}`,
44
- invalid && "nuri-input__field--invalid",
45
- disabled && "nuri-input__field--disabled"
46
- ),
47
- children: [
48
- iconLeft != null && /* @__PURE__ */ jsx("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconLeft }),
49
- /* @__PURE__ */ jsx(
50
- "input",
51
- {
52
- ref,
53
- id,
54
- className: "nuri-input__control",
55
- disabled,
56
- "aria-invalid": invalid || void 0,
57
- "aria-describedby": describedBy,
58
- ...rest
59
- }
60
- ),
61
- iconRight != null && /* @__PURE__ */ jsx("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconRight })
62
- ]
63
- }
64
- ),
65
- hasMessage && /* @__PURE__ */ jsx(
66
- "p",
67
- {
68
- id: messageId,
69
- className: cx("nuri-input__message", invalid && "nuri-input__message--error"),
70
- children: message
71
- }
72
- )
73
- ] });
74
- });
2
+ import {
3
+ Input
4
+ } from "../chunk-DYO4PIBB.js";
5
+ import "../chunk-PS6QXS5Z.js";
75
6
  export {
76
7
  Input
77
8
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Input/Input.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport { forwardRef, useId } from 'react';\nimport type { InputHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md' | 'lg';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /**\n * 사이즈. sm 36 / md 42 / lg 48 px 높이.\n * @default 'md'\n */\n size?: Size;\n /**\n * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요\n * (placeholder는 이름을 대체하지 못함 — 입력 시 사라지고 대비가 낮음).\n */\n label?: ReactNode;\n /**\n * 라벨을 시각적으로만 숨김 (스크린리더에는 노출). 디자인상 라벨을 안 보이게 하되\n * 접근성 이름은 유지할 때 사용.\n * @default false\n */\n hideLabel?: boolean;\n /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n description?: ReactNode;\n /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n invalid?: boolean;\n /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n errorMessage?: ReactNode;\n /** 좌측 어도먼트 (아이콘 등). */\n iconLeft?: ReactNode;\n /** 우측 어도먼트 (아이콘·clear·버튼 등). */\n iconRight?: ReactNode;\n /** 컨테이너 전체 너비로 확장. @default false */\n block?: boolean;\n}\n\n/**\n * 텍스트 입력 필드. 옵션으로 라벨(위)·헬퍼/에러 메시지(아래)를 포함하는 자체 완결형.\n * 상태(default/focus/invalid/disabled)는 CSS로, 값 채움(filled)은 네이티브로 처리.\n *\n * @example 기본\n * <Input placeholder=\"검색어\" aria-label=\"검색\" />\n *\n * @example 라벨 + 헬퍼 + 에러\n * <Input\n * label=\"비밀번호\"\n * description=\"8자 이상 입력하세요\"\n * invalid\n * errorMessage=\"비밀번호가 일치하지 않습니다\"\n * />\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n size = 'md',\n label,\n hideLabel = false,\n description,\n invalid = false,\n errorMessage,\n iconLeft,\n iconRight,\n block = false,\n disabled = false,\n className,\n id: idProp,\n 'aria-describedby': ariaDescribedby,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? `nuri-input-${reactId}`;\n const messageId = `${id}-message`;\n\n // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄.\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-input', block && 'nuri-input--block', className)}>\n {label != null && (\n <label htmlFor={id} className={cx('nuri-input__label', hideLabel && 'nuri-sr-only')}>\n {label}\n </label>\n )}\n\n <div\n className={cx(\n 'nuri-input__field',\n `nuri-input__field--${size}`,\n invalid && 'nuri-input__field--invalid',\n disabled && 'nuri-input__field--disabled',\n )}\n >\n {iconLeft != null && (\n <span className=\"nuri-input__icon\" aria-hidden=\"true\">\n {iconLeft}\n </span>\n )}\n <input\n ref={ref}\n id={id}\n className=\"nuri-input__control\"\n disabled={disabled}\n aria-invalid={invalid || undefined}\n aria-describedby={describedBy}\n {...rest}\n />\n {iconRight != null && (\n <span className=\"nuri-input__icon\" aria-hidden=\"true\">\n {iconRight}\n </span>\n )}\n </div>\n\n {hasMessage && (\n <p\n id={messageId}\n className={cx('nuri-input__message', invalid && 'nuri-input__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;;;ACC3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADkFQ,cAKF,YALE;AAhCD,IAAM,QAAQ,WAAyC,SAASA,OACrE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,cAAc,OAAO;AAC1C,QAAM,YAAY,GAAG,EAAE;AAGvB,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,cAAc,SAAS,qBAAqB,SAAS,GACrE;AAAA,aAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAW,GAAG,qBAAqB,aAAa,cAAc,GAC/E,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,IAAI;AAAA,UAC1B,WAAW;AAAA,UACX,YAAY;AAAA,QACd;AAAA,QAEC;AAAA,sBAAY,QACX,oBAAC,UAAK,WAAU,oBAAmB,eAAY,QAC5C,oBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV;AAAA,cACA,gBAAc,WAAW;AAAA,cACzB,oBAAkB;AAAA,cACjB,GAAG;AAAA;AAAA,UACN;AAAA,UACC,aAAa,QACZ,oBAAC,UAAK,WAAU,oBAAmB,eAAY,QAC5C,qBACH;AAAA;AAAA;AAAA,IAEJ;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,uBAAuB,WAAW,4BAA4B;AAAA,QAE3E;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Input"]}
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}