@nurimedia/react-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nurimedia Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,274 @@
+# @nurimedia/react-ui
+
+누리미디어의 헤드리스 React 컴포넌트 + 디자인 토큰 라이브러리. **브랜드 색은 앱이 주입**합니다.
+
+- Radix Primitives 기반 — 키보드·포커스·ARIA 등 웹 접근성 내장
+- 컴포넌트 11종: Button · Input · Textarea · Checkbox · Radio · Switch · Select · Modal · AlertDialog · Toast · Tooltip
+- AI 도구용 사용 명세(`llms.txt`) 동봉 — [AI 도구와 함께 쓰기](#ai-도구와-함께-쓰기-claude-등)
+
+## 설치
+
+```bash
+pnpm add @nurimedia/react-ui
+```
+
+## 사용
+
+소비 앱의 진입점(루트 레이아웃)에서 **한 번** import:
+
+```tsx
+import '@nurimedia/react-ui/tokens.css';      // base 토큰 — 중립색·여백·radius·컴포넌트 변수 (브랜드 색 제외)
+import '@nurimedia/react-ui/styles.css';      // 전체 컴포넌트 CSS
+import '@nurimedia/react-ui/typography.css';  // (선택) 타이포 유틸 클래스 .nuri-text-*
+```
+
+컴포넌트는 어디서나 import — 각 컴포넌트 CSS가 side-effect로 자동 따라옵니다 (`styles.css`를 받았다면 중복 없이 처리):
+
+```tsx
+import { Button } from '@nurimedia/react-ui';
+
+<Button variant="primary">저장</Button>
+```
+
+> **브랜드 색은 라이브러리에 없습니다(헤드리스).** `tokens.css`의 컴포넌트 토큰은 `var(--nuri-color-brand-*)`만 참조하고, 그 값은 앱이 정의합니다 → 아래 [테마 적용](#테마-적용).
+
+## 테마 적용
+
+테마 = **브랜드 변수 4개**. @nurimedia/react-ui는 이 값을 갖지 않으므로 **앱이 정의**합니다.
+
+```
+--nuri-color-brand-default          /* 포인트 색 (버튼 primary·text.point·포커스링) */
+--nuri-color-brand-pressed          /* 눌림 */
+--nuri-color-brand-subtle           /* 옅은 배경 (secondary 버튼 등) */
+--nuri-color-brand-subtle-pressed   /* 옅은 배경 눌림 */
+```
+
+`globals.css`에 직접 작성합니다.
+
+앱마다 **단일 테마** — `:root`에 변수 4개만 정의하면 끝입니다. `ThemeProvider`도 `data-theme`도 필요 없어요.
+
+```css
+/* 앱 globals.css */
+:root {
+  --nuri-color-brand-default: #29b79c;       /* 앱의 포인트 색 */
+  --nuri-color-brand-pressed: #1d9b83;
+  --nuri-color-brand-subtle: #e0faf4;
+  --nuri-color-brand-subtle-pressed: #c3eae2;
+}
+```
+
+앱이 여러 개라면 각 앱이 자기 색을 `:root`에 정의합니다 — 서로 다른 앱이므로 충돌하지 않습니다. 변수를 정의하지 않으면 라이브러리 기본색(teal)이 적용됩니다.
+
+모달 등 포털되는 컴포넌트도 `:root` 변수를 상속하므로 색이 자동으로 따라옵니다 — 별도 설정 불필요.
+
+> CSS import는 **앱당 1회**(루트 레이아웃). 컴포넌트는 아무 데서나 `import { Button }` — 사용처마다 import하지 않습니다.
+>
+> 한 앱 안에서 영역별로 색을 달리하거나 런타임에 색이 바뀌어야 하면 `[data-theme]` 스코프로 변수를 재정의하고 포털 컨테이너를 스코프 안에 두면 됩니다.
+
+## subpath exports
+
+| 경로 | 내용 |
+|---|---|
+| `@nurimedia/react-ui` | 모든 컴포넌트 (tree-shakable) |
+| `@nurimedia/react-ui/Button` `…/Input` `…/Textarea` `…/Checkbox` `…/Radio` `…/Switch` `…/Select` `…/Modal` `…/AlertDialog` `…/Toast` `…/Tooltip` | 개별 컴포넌트 (명시 import) |
+| `@nurimedia/react-ui/styles.css` | 전체 컴포넌트 CSS 번들 |
+| `@nurimedia/react-ui/Button/styles.css` 등 | 개별 컴포넌트 CSS |
+| `@nurimedia/react-ui/tokens.css` | base 토큰 — 중립색·구조 + 브랜드 var 슬롯 (브랜드 값 미포함) |
+| `@nurimedia/react-ui/typography.css` | 타이포 유틸 클래스 `.nuri-text-*` |
+
+브랜드 색은 라이브러리가 export하지 않습니다 — 앱이 `--nuri-color-brand-*`를 정의합니다([테마 적용](#테마-적용)).
+
+## Button
+
+### Props
+
+| prop | type | 기본값 | 설명 |
+|---|---|---|---|
+| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | 시각 유형 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 36 / 42 / 48 px 높이 |
+| `iconLeft` | `ReactNode` | — | 라벨 좌측 아이콘 |
+| `iconRight` | `ReactNode` | — | 라벨 우측 아이콘 |
+| `iconOnly` | `boolean` | `false` | 정사각형 아이콘 전용. **`aria-label` 필수** |
+| `block` | `boolean` | `false` | 컨테이너 전체너비 |
+| `loading` | `boolean` | `false` | 스피너 + 클릭 차단 + `aria-busy` |
+| `disabled` | `boolean` | `false` | 클릭 차단 |
+| `asChild` | `boolean` | `false` | Radix Slot — 자식 엘리먼트가 Button props 받음 |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | 폼 동작 |
+| 그 외 | `ButtonHTMLAttributes` | — | `onClick`, `aria-*`, `data-*` 등 모두 통과 |
+
+### 예시
+
+```tsx
+<Button variant="primary" size="md">저장</Button>
+<Button variant="outline" iconLeft={<SearchIcon />}>검색</Button>
+<Button iconOnly aria-label="닫기" variant="ghost"><CloseIcon /></Button>
+<Button loading>저장</Button>
+<Button block>로그인</Button>
+<Button asChild><Link href="/about">소개</Link></Button>
+```
+
+## Modal
+
+Radix Dialog 기반 compound 컴포넌트. 슬롯을 조합해 구성하며, 포커스 트랩·Esc·스크롤 락·포커스 복귀·aria 연결은 자동.
+
+```tsx
+import { Modal, Button } from '@nurimedia/react-ui';
+
+<Modal open={open} onOpenChange={setOpen}>   {/* 또는 Modal.Trigger로 비제어 */}
+  <Modal.Content placement="center" size="md">
+    <Modal.Header>
+      <Modal.Title>제목</Modal.Title>           {/* → aria-labelledby 자동 */}
+      <Modal.Description>설명</Modal.Description> {/* → aria-describedby 자동 */}
+      <Modal.CloseButton />
+    </Modal.Header>
+    <Modal.Body>본문 (스크롤 가능)</Modal.Body>
+    <Modal.Footer align="end">
+      <Modal.Close asChild><Button variant="outline">취소</Button></Modal.Close>
+      <Button variant="primary">확인</Button>
+    </Modal.Footer>
+  </Modal.Content>
+</Modal>
+```
+
+### 슬롯
+
+| 슬롯 | 역할 |
+|---|---|
+| `Modal` | 루트 (`open`/`onOpenChange` 제어, 또는 비제어) |
+| `Modal.Trigger` | 여는 트리거 (`asChild`) |
+| `Modal.Content` | 오버레이+포털+패널. props: `placement`('center'\|'bottom'), `size`('sm'\|'md'\|'lg'), `overlay`, `container` |
+| `Modal.Header` / `Modal.Body` / `Modal.Footer` | 레이아웃 슬롯 |
+| `Modal.Title` / `Modal.Description` | a11y 연결되는 제목·설명 (필수 권장) |
+| `Modal.Close` | 닫기 액션 (`asChild`) |
+| `Modal.CloseButton` | 우상단 X (미리 스타일됨) |
+
+`Modal.Footer`의 `align`: `end`(기본) / `start` / `center` / `between` / `full`(모바일 전체너비).
+
+### 제목 — 항상 Modal.Title 포함 (필수)
+
+Radix Dialog는 접근 가능한 이름을 위해 `Title`이 **필수**입니다(없으면 콘솔 에러 + 스크린리더가 모달을 식별 못 함). 시각적 제목이 없는 모달이라면 `visuallyHidden`으로 숨기되 이름은 유지하세요:
+
+```tsx
+<Modal.Title visuallyHidden>이미지 미리보기</Modal.Title>
+```
+
+`Modal.Description`은 선택이며, 불필요하면 생략하면 됩니다.
+
+### 초기 포커스 / 닫기 동작 커스터마이즈
+
+`Modal.Content`는 Radix `Dialog.Content`의 props를 모두 통과시킵니다:
+
+```tsx
+<Modal.Content
+  onOpenAutoFocus={(e) => { e.preventDefault(); inputRef.current?.focus(); }} // 특정 요소에 초기 포커스
+  onInteractOutside={(e) => e.preventDefault()}  // 백드롭 클릭으로 닫기 방지
+  onEscapeKeyDown={(e) => e.preventDefault()}     // Esc로 닫기 방지
+>
+```
+
+### CloseButton 라벨 (i18n)
+
+`Modal.CloseButton`의 기본 `aria-label`은 `"닫기"`(한국어)입니다. 다른 로케일에선 직접 지정하세요:
+
+```tsx
+<Modal.CloseButton aria-label="Close" />
+```
+
+### overlay 주의
+
+`overlay={false}`는 **시각적 백드롭만** 제거합니다. 포커스 트랩·스크롤 락 등 모달 동작은 유지됩니다(여전히 modal). 페이지와 상호작용 가능한 비모달 패널이 필요하면 Modal이 아닌 다른 패턴을 쓰세요.
+
+### 반응형 — 바텀시트는 앱이 결정
+
+`placement="bottom"`은 **항상** 바텀시트(풀 width)로 렌더됩니다. "모바일에서만 바텀시트"는 **소비 앱이 뷰포트를 판단**해 결정하세요 (라이브러리가 분기점을 강제하지 않음 — 프로젝트마다 브레이크포인트가 다르므로):
+
+```tsx
+const isMobile = useMediaQuery('(max-width: 767px)'); // 앱의 훅 재사용
+<Modal.Content placement={isMobile ? 'bottom' : 'center'}>...</Modal.Content>
+```
+
+### z-index 통합
+
+모달 z-index는 토큰입니다. 앱의 헤더·토스트 등과 겹치면 조정하세요:
+
+```css
+:root { --nuri-modal-z-index: 5000; } /* overlay = 이 값, panel = +1 */
+```
+
+### 포털 위치
+
+모달은 기본적으로 `document.body`로 포털됩니다. 단일 테마(`:root`)에선 body도 변수를 상속하므로 그대로 두면 됩니다. 특정 요소 안으로 포털하고 싶을 때만 `container`를 지정하세요.
+
+```tsx
+<Modal.Content container={someRef.current}>...</Modal.Content>
+```
+
+## Escape hatches
+
+ButtonHTMLAttributes를 extend하므로 HTML button이 받는 모든 속성·이벤트가 자동 통과:
+
+```tsx
+<Button
+  onMouseEnter={...} onFocus={...} onKeyDown={...}
+  data-testid="save" aria-describedby="hint"
+  id="primary" name="action" form="my-form"
+>저장</Button>
+```
+
+인스턴스별 CSS 변수 override (일회성 예외):
+
+```tsx
+<Button style={{
+  ['--nuri-button-primary-bg' as string]: '#ff0066',
+}}>특별</Button>
+```
+
+## 디자인 시스템
+
+컴포넌트는 CSS 변수만 참조합니다. 소유권이 둘로 나뉩니다:
+
+- **라이브러리 (`tokens.css`)** — 중립색·여백·radius·타이포 등 **구조**. `src/tokens/{primitives,semantic}.json` 수정 → `pnpm build` → publish. *컴포넌트/구조가 바뀔 때만 버전이 오릅니다.*
+- **앱** — 브랜드 색(`--nuri-color-brand-*`). 새 서비스·색 변경은 **앱에서** 처리하므로 라이브러리 버전과 무관합니다.
+
+`semantic.json`이 브랜드를 참조하는 토큰은 빌드 시 `outputReferences`로 `var(--nuri-color-brand-*)`가 되어, 앱이 변수 4개만 덮으면 버튼·포인트색·포커스링이 전부 따라옵니다.
+
+## 접근성
+
+- `aria-disabled` / `aria-busy` 자동
+- iconOnly aria-label 없으면 dev 경고
+- focus-visible 시 브랜드 색 outline
+- `asChild` 경로에서도 disabled 클릭 차단
+- `prefers-reduced-motion` 시 transition 제거 + 스피너 감속
+
+## AI 도구와 함께 쓰기 (Claude 등)
+
+패키지에 **AI용 사용 명세**(`llms.txt`)가 동봉되어 있습니다 — 컴포넌트 목록·정확한 API·예시·주의사항을 AI가 읽기 좋은 형태로 담고 있어요. 설치하면 `node_modules/@nurimedia/react-ui/llms.txt`에 위치합니다.
+
+소비 프로젝트의 AI 설정 문서(`CLAUDE.md` 등)에 아래 블록을 붙여넣으면, AI가 커스텀 UI를 새로 만들지 않고 이 라이브러리를 정확히 사용합니다:
+
+```markdown
+## UI 컴포넌트
+
+- 이 프로젝트의 UI는 공통 라이브러리 **@nurimedia/react-ui**를 사용한다.
+- 공통 UI(버튼·모달·폼 요소·알림 등)를 만들기 전에 반드시
+  `node_modules/@nurimedia/react-ui/llms.txt`에서 제공 컴포넌트를 확인하고,
+  있으면 직접 구현하지 말고 그것을 사용할 것.
+- 사용법·API·주의사항은 llms.txt의 명세를 그대로 따를 것.
+```
+
+## 개발
+
+```bash
+pnpm install
+pnpm storybook        # 컴포넌트 카탈로그 + 문서 (http://localhost:6006)
+pnpm build            # 토큰 + 컴포넌트 빌드 (dist/)
+pnpm dev              # watch 모드 (tsup)
+pnpm test             # 단위 테스트 (vitest)
+pnpm build-storybook  # 정적 Storybook 빌드
+```
+
+컴포넌트 사용법·prop·예시는 **Storybook**(`pnpm storybook`)에서 확인하세요. 상단 툴바에서 테마를 전환해 브랜드 변수 주입 결과를 비교할 수 있습니다. (Storybook의 브랜드 색은 데모용 `.storybook/demo-themes.css` — 배포물에는 포함되지 않습니다.)
+
+## License
+
+MIT © Nurimedia Co., Ltd.

package/dist/AlertDialog/index.cjs

@@ -0,0 +1,185 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/AlertDialog/index.ts
+var AlertDialog_exports = {};
+__export(AlertDialog_exports, {
+  AlertDialog: () => AlertDialog
+});
+module.exports = __toCommonJS(AlertDialog_exports);
+
+// src/AlertDialog/AlertDialog.tsx
+var import_styles = require("./styles.css");
+var Alert = __toESM(require("@radix-ui/react-alert-dialog"), 1);
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/AlertDialog/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-success-bg)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M15.77 9.58L10.65 14.70L8.90 12.95",
+      stroke: "var(--nuri-alert-tone-success-fg)",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var WarningIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-warning-bg)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M12 6.75V12",
+      stroke: "var(--nuri-alert-tone-warning-fg)",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "16.31", r: "1.1", fill: "var(--nuri-alert-tone-warning-fg)" })
+] });
+var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-info-bg)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M12.25 7h0.01",
+      stroke: "var(--nuri-alert-tone-info-fg)",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M11 12h1.25v5h1.25",
+      stroke: "var(--nuri-alert-tone-info-fg)",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var defaultToneIcon = {
+  info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoIcon, {}),
+  success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuccessIcon, {}),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WarningIcon, {})
+};
+
+// src/AlertDialog/AlertDialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Root2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Root, { ...props });
+Root2.displayName = "AlertDialog";
+var Trigger2 = Alert.Trigger;
+var Content2 = (0, import_react.forwardRef)(
+  function AlertDialogContent({ tone = "info", icon, overlay = true, container, className, children, ...rest }, ref) {
+    const resolvedIcon = icon === void 0 ? defaultToneIcon[tone] : icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Alert.Portal, { container, children: [
+      overlay && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Overlay, { className: "nuri-alert__overlay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        Alert.Content,
+        {
+          ref,
+          className: cx("nuri-alert", `nuri-alert--${tone}`, className),
+          ...rest,
+          children: [
+            resolvedIcon != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "nuri-alert__icon", "aria-hidden": "true", children: resolvedIcon }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
+var Header = (0, import_react.forwardRef)(
+  function AlertDialogHeader({ className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx("nuri-alert__header", className), ...rest });
+  }
+);
+var Title2 = (0, import_react.forwardRef)(function AlertDialogTitle({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Title, { ref, className: cx("nuri-alert__title", className), ...rest });
+});
+var Description2 = (0, import_react.forwardRef)(function AlertDialogDescription({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Description, { ref, className: cx("nuri-alert__description", className), ...rest });
+});
+var Body = (0, import_react.forwardRef)(function AlertDialogBody({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cx("nuri-alert__body", className), ...rest });
+});
+var Footer = (0, import_react.forwardRef)(function AlertDialogFooter({ align = "full", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref,
+      className: cx("nuri-alert__footer", `nuri-alert__footer--${align}`, className),
+      ...rest
+    }
+  );
+});
+var Action2 = Alert.Action;
+var Cancel2 = Alert.Cancel;
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+var CloseButton = (0, import_react.forwardRef)(function AlertDialogCloseButton({ className, "aria-label": ariaLabel = "\uB2EB\uAE30", children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Alert.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": ariaLabel,
+      className: cx("nuri-alert__close", className),
+      ...rest,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {})
+    }
+  ) });
+});
+var AlertDialog = Object.assign(Root2, {
+  Trigger: Trigger2,
+  Content: Content2,
+  Header,
+  Title: Title2,
+  Description: Description2,
+  Body,
+  Footer,
+  Action: Action2,
+  Cancel: Cancel2,
+  CloseButton
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialog
+});
+//# sourceMappingURL=index.cjs.map

package/dist/AlertDialog/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AlertDialog/index.ts","../../src/AlertDialog/AlertDialog.tsx","../../src/utils/cx.ts","../../src/AlertDialog/icons.tsx"],"sourcesContent":["export { AlertDialog } from './AlertDialog.js';\nexport type { AlertDialogContentProps, AlertDialogFooterProps } from './AlertDialog.js';\n","'use client';\n\nimport './styles.css';\nimport * as Alert from '@radix-ui/react-alert-dialog';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\nimport { defaultToneIcon } from './icons.js';\n\ntype Tone = 'info' | 'success' | 'warning';\n\n/**\n * 확인 강제형 다이얼로그 (alertdialog). Radix AlertDialog 기반.\n *\n * 일반 Modal과의 차이:\n * - `role=\"alertdialog\"` — 스크린리더가 더 강하게 안내\n * - **바깥(백드롭) 클릭으로 닫히지 않음** — 실수로 닫히는 것 방지\n * - 포커스가 기본적으로 Cancel(취소)에 위치 — 실수로 위험 액션 방지\n * - **중앙 정렬 + 상단 아이콘** (디자인 시스템 표준 레이아웃)\n *\n * Esc 키는 닫힘(키보드 탈출구 — 접근성). 막으려면 Content에 `onEscapeKeyDown` 전달.\n *\n * @example\n * <AlertDialog>\n *   <AlertDialog.Trigger asChild><Button>삭제</Button></AlertDialog.Trigger>\n *   <AlertDialog.Content tone=\"warning\">\n *     <AlertDialog.Header>\n *       <AlertDialog.Title>정말 삭제할까요?</AlertDialog.Title>\n *       <AlertDialog.Description>되돌릴 수 없습니다.</AlertDialog.Description>\n *     </AlertDialog.Header>\n *     <AlertDialog.Footer>\n *       <AlertDialog.Cancel asChild><Button variant=\"outline\">취소</Button></AlertDialog.Cancel>\n *       <AlertDialog.Action asChild><Button onClick={onDelete}>삭제</Button></AlertDialog.Action>\n *     </AlertDialog.Footer>\n *   </AlertDialog.Content>\n * </AlertDialog>\n */\nconst Root = (props: ComponentPropsWithoutRef<typeof Alert.Root>) => <Alert.Root {...props} />;\nRoot.displayName = 'AlertDialog';\n\n/** 다이얼로그를 여는 트리거. `asChild`로 임의 엘리먼트에 위임. */\nconst Trigger = Alert.Trigger;\n\nexport interface AlertDialogContentProps extends ComponentPropsWithoutRef<typeof Alert.Content> {\n  /**\n   * 상태 톤 — 기본 아이콘과 그 색을 결정.\n   * @default 'info'\n   */\n  tone?: Tone;\n  /**\n   * 상단 아이콘.\n   * - 미지정: `tone`에 맞는 **기본 아이콘** 자동 렌더\n   * - `ReactNode`: 커스텀 아이콘으로 교체\n   * - `null`: 아이콘 제거\n   */\n  icon?: ReactNode | null;\n  /** 백드롭(오버레이) 표시 여부. @default true */\n  overlay?: boolean;\n  /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */\n  container?: HTMLElement | null;\n}\n\n/** 오버레이 + 포털 + 패널을 한 번에 렌더. 중앙 정렬 + 상단 아이콘 레이아웃. */\nconst Content = forwardRef<ElementRef<typeof Alert.Content>, AlertDialogContentProps>(\n  function AlertDialogContent(\n    { tone = 'info', icon, overlay = true, container, className, children, ...rest },\n    ref,\n  ) {\n    // icon 미지정(undefined) → 기본 tone 아이콘 / null → 제거 / ReactNode → 교체\n    const resolvedIcon = icon === undefined ? defaultToneIcon[tone] : icon;\n    return (\n      <Alert.Portal container={container}>\n        {overlay && <Alert.Overlay className=\"nuri-alert__overlay\" />}\n        <Alert.Content\n          ref={ref}\n          className={cx('nuri-alert', `nuri-alert--${tone}`, className)}\n          {...rest}\n        >\n          {resolvedIcon != null && (\n            <div className=\"nuri-alert__icon\" aria-hidden=\"true\">\n              {resolvedIcon}\n            </div>\n          )}\n          {children}\n        </Alert.Content>\n      </Alert.Portal>\n    );\n  },\n);\n\n/** 헤더 슬롯 (Title/Description 묶음, 중앙 정렬). */\nconst Header = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  function AlertDialogHeader({ className, ...rest }, ref) {\n    return <div ref={ref} className={cx('nuri-alert__header', className)} {...rest} />;\n  },\n);\n\n/** 제목. 자동으로 `aria-labelledby`로 연결됨. */\nconst Title = forwardRef<\n  ElementRef<typeof Alert.Title>,\n  ComponentPropsWithoutRef<typeof Alert.Title>\n>(function AlertDialogTitle({ className, ...rest }, ref) {\n  return <Alert.Title ref={ref} className={cx('nuri-alert__title', className)} {...rest} />;\n});\n\n/** 설명. 자동으로 `aria-describedby`로 연결됨. */\nconst Description = forwardRef<\n  ElementRef<typeof Alert.Description>,\n  ComponentPropsWithoutRef<typeof Alert.Description>\n>(function AlertDialogDescription({ className, ...rest }, ref) {\n  return (\n    <Alert.Description ref={ref} className={cx('nuri-alert__description', className)} {...rest} />\n  );\n});\n\n/** 본문 슬롯 (추가 콘텐츠). */\nconst Body = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function AlertDialogBody(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx('nuri-alert__body', className)} {...rest} />;\n});\n\nexport interface AlertDialogFooterProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * 버튼 정렬. 디자인 표준은 전체너비 버튼이라 기본값 `full`.\n   * @default 'full'\n   */\n  align?: 'start' | 'center' | 'end' | 'between' | 'full';\n}\n\n/** 푸터 슬롯 (Cancel/Action 배치). 기본 전체너비(`full`). */\nconst Footer = forwardRef<HTMLDivElement, AlertDialogFooterProps>(function AlertDialogFooter(\n  { align = 'full', className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx('nuri-alert__footer', `nuri-alert__footer--${align}`, className)}\n      {...rest}\n    />\n  );\n});\n\n/**\n * 확인(주 액션) 버튼. 클릭 시 닫힘. `asChild`로 Button 위임.\n * @example <AlertDialog.Action asChild><Button onClick={onConfirm}>삭제</Button></AlertDialog.Action>\n */\nconst Action = Alert.Action;\n\n/**\n * 취소 버튼. 클릭 시 닫힘. 포커스가 기본적으로 여기 위치.\n * @example <AlertDialog.Cancel asChild><Button variant=\"outline\">취소</Button></AlertDialog.Cancel>\n */\nconst Cancel = Alert.Cancel;\n\nconst CloseIcon = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n    <path d=\"M5 5l10 10M15 5L5 15\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n  </svg>\n);\n\n/**\n * 우상단 X 닫기 버튼 (옵션). 내부적으로 Cancel과 동일하게 닫힘. 기본 `aria-label=\"닫기\"`.\n * 확인을 강제하려면 사용하지 않는 편이 좋습니다 (Cancel/Action으로 명시적 선택 유도).\n */\nconst CloseButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ComponentPropsWithoutRef<'button'>, 'children'> & { children?: ReactNode }\n>(function AlertDialogCloseButton(\n  { className, 'aria-label': ariaLabel = '닫기', children, ...rest },\n  ref,\n) {\n  return (\n    <Alert.Cancel asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={cx('nuri-alert__close', className)}\n        {...rest}\n      >\n        {children ?? <CloseIcon />}\n      </button>\n    </Alert.Cancel>\n  );\n});\n\nexport const AlertDialog = Object.assign(Root, {\n  Trigger,\n  Content,\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n  Action,\n  Cancel,\n  CloseButton,\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","/**\n * tone별 기본 아이콘 — 디자이너 시스템(Figma) 에셋을 그대로 inline SVG로 재현.\n * 구조: 틴트 원 배경 + tone 색 심볼. 색은 토큰(`--nuri-alert-tone-*`)으로 분리.\n * AlertDialog.Content의 `icon` 미지정 시 tone에 맞춰 자동 렌더.\n * `icon={<Custom/>}`로 교체, `icon={null}`로 제거 가능.\n */\nimport type { ReactNode } from 'react';\n\nconst SuccessIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-success-bg)\" />\n    <path\n      d=\"M15.77 9.58L10.65 14.70L8.90 12.95\"\n      stroke=\"var(--nuri-alert-tone-success-fg)\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nconst WarningIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-warning-bg)\" />\n    <path\n      d=\"M12 6.75V12\"\n      stroke=\"var(--nuri-alert-tone-warning-fg)\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n    />\n    <circle cx=\"12\" cy=\"16.31\" r=\"1.1\" fill=\"var(--nuri-alert-tone-warning-fg)\" />\n  </svg>\n);\n\nconst InfoIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"var(--nuri-alert-tone-info-bg)\" />\n    <path\n      d=\"M12.25 7h0.01\"\n      stroke=\"var(--nuri-alert-tone-info-fg)\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n    <path\n      d=\"M11 12h1.25v5h1.25\"\n      stroke=\"var(--nuri-alert-tone-info-fg)\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const defaultToneIcon: Record<'info' | 'success' | 'warning', ReactNode> = {\n  info: <InfoIcon />,\n  success: <SuccessIcon />,\n  warning: <WarningIcon />,\n};\n"],"mappings":"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","names":["import_jsx_runtime","Root","Trigger","Content","Title","Description","Action","Cancel"]}

package/dist/AlertDialog/index.d.cts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as Alert from '@radix-ui/react-alert-dialog';
+
+type Tone = 'info' | 'success' | 'warning';
+interface AlertDialogContentProps extends ComponentPropsWithoutRef<typeof Alert.Content> {
+    /**
+     * 상태 톤 — 기본 아이콘과 그 색을 결정.
+     * @default 'info'
+     */
+    tone?: Tone;
+    /**
+     * 상단 아이콘.
+     * - 미지정: `tone`에 맞는 **기본 아이콘** 자동 렌더
+     * - `ReactNode`: 커스텀 아이콘으로 교체
+     * - `null`: 아이콘 제거
+     */
+    icon?: ReactNode | null;
+    /** 백드롭(오버레이) 표시 여부. @default true */
+    overlay?: boolean;
+    /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */
+    container?: HTMLElement | null;
+}
+interface AlertDialogFooterProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * 버튼 정렬. 디자인 표준은 전체너비 버튼이라 기본값 `full`.
+     * @default 'full'
+     */
+    align?: 'start' | 'center' | 'end' | 'between' | 'full';
+}
+declare const AlertDialog: {
+    (props: ComponentPropsWithoutRef<typeof Alert.Root>): react.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<Alert.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<AlertDialogContentProps & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<Alert.AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<Alert.AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<AlertDialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Action: react.ForwardRefExoticComponent<Alert.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>>;
+    Cancel: react.ForwardRefExoticComponent<Alert.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>>;
+    CloseButton: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { AlertDialog, type AlertDialogContentProps, type AlertDialogFooterProps };

package/dist/AlertDialog/index.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as Alert from '@radix-ui/react-alert-dialog';
+
+type Tone = 'info' | 'success' | 'warning';
+interface AlertDialogContentProps extends ComponentPropsWithoutRef<typeof Alert.Content> {
+    /**
+     * 상태 톤 — 기본 아이콘과 그 색을 결정.
+     * @default 'info'
+     */
+    tone?: Tone;
+    /**
+     * 상단 아이콘.
+     * - 미지정: `tone`에 맞는 **기본 아이콘** 자동 렌더
+     * - `ReactNode`: 커스텀 아이콘으로 교체
+     * - `null`: 아이콘 제거
+     */
+    icon?: ReactNode | null;
+    /** 백드롭(오버레이) 표시 여부. @default true */
+    overlay?: boolean;
+    /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */
+    container?: HTMLElement | null;
+}
+interface AlertDialogFooterProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * 버튼 정렬. 디자인 표준은 전체너비 버튼이라 기본값 `full`.
+     * @default 'full'
+     */
+    align?: 'start' | 'center' | 'end' | 'between' | 'full';
+}
+declare const AlertDialog: {
+    (props: ComponentPropsWithoutRef<typeof Alert.Root>): react.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<Alert.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<AlertDialogContentProps & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<Alert.AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<Alert.AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<AlertDialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Action: react.ForwardRefExoticComponent<Alert.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>>;
+    Cancel: react.ForwardRefExoticComponent<Alert.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>>;
+    CloseButton: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { AlertDialog, type AlertDialogContentProps, type AlertDialogFooterProps };