@nurimedia/react-ui 0.1.0

package/dist/AlertDialog/index.js

@@ -0,0 +1,148 @@
+// src/AlertDialog/AlertDialog.tsx
+import "./styles.css";
+import * as Alert from "@radix-ui/react-alert-dialog";
+import { forwardRef } from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/AlertDialog/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-success-bg)" }),
+  /* @__PURE__ */ 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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-warning-bg)" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 6.75V12",
+      stroke: "var(--nuri-alert-tone-warning-fg)",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.31", r: "1.1", fill: "var(--nuri-alert-tone-warning-fg)" })
+] });
+var InfoIcon = () => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "var(--nuri-alert-tone-info-bg)" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12.25 7h0.01",
+      stroke: "var(--nuri-alert-tone-info-fg)",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ 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__ */ jsx(InfoIcon, {}),
+  success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+  warning: /* @__PURE__ */ jsx(WarningIcon, {})
+};
+
+// src/AlertDialog/AlertDialog.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Root2 = (props) => /* @__PURE__ */ jsx2(Alert.Root, { ...props });
+Root2.displayName = "AlertDialog";
+var Trigger2 = Alert.Trigger;
+var Content2 = forwardRef(
+  function AlertDialogContent({ tone = "info", icon, overlay = true, container, className, children, ...rest }, ref) {
+    const resolvedIcon = icon === void 0 ? defaultToneIcon[tone] : icon;
+    return /* @__PURE__ */ jsxs2(Alert.Portal, { container, children: [
+      overlay && /* @__PURE__ */ jsx2(Alert.Overlay, { className: "nuri-alert__overlay" }),
+      /* @__PURE__ */ jsxs2(
+        Alert.Content,
+        {
+          ref,
+          className: cx("nuri-alert", `nuri-alert--${tone}`, className),
+          ...rest,
+          children: [
+            resolvedIcon != null && /* @__PURE__ */ jsx2("div", { className: "nuri-alert__icon", "aria-hidden": "true", children: resolvedIcon }),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
+var Header = forwardRef(
+  function AlertDialogHeader({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx2("div", { ref, className: cx("nuri-alert__header", className), ...rest });
+  }
+);
+var Title2 = forwardRef(function AlertDialogTitle({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(Alert.Title, { ref, className: cx("nuri-alert__title", className), ...rest });
+});
+var Description2 = forwardRef(function AlertDialogDescription({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(Alert.Description, { ref, className: cx("nuri-alert__description", className), ...rest });
+});
+var Body = forwardRef(function AlertDialogBody({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2("div", { ref, className: cx("nuri-alert__body", className), ...rest });
+});
+var Footer = forwardRef(function AlertDialogFooter({ align = "full", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: cx("nuri-alert__footer", `nuri-alert__footer--${align}`, className),
+      ...rest
+    }
+  );
+});
+var Action2 = Alert.Action;
+var Cancel2 = Alert.Cancel;
+var CloseIcon = () => /* @__PURE__ */ jsx2("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+var CloseButton = forwardRef(function AlertDialogCloseButton({ className, "aria-label": ariaLabel = "\uB2EB\uAE30", children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(Alert.Cancel, { asChild: true, children: /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": ariaLabel,
+      className: cx("nuri-alert__close", className),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx2(CloseIcon, {})
+    }
+  ) });
+});
+var AlertDialog = Object.assign(Root2, {
+  Trigger: Trigger2,
+  Content: Content2,
+  Header,
+  Title: Title2,
+  Description: Description2,
+  Body,
+  Footer,
+  Action: Action2,
+  Cancel: Cancel2,
+  CloseButton
+});
+export {
+  AlertDialog
+};
+//# sourceMappingURL=index.js.map

package/dist/AlertDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AlertDialog/AlertDialog.tsx","../../src/utils/cx.ts","../../src/AlertDialog/icons.tsx"],"sourcesContent":["'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":["jsx","jsxs","Root","Trigger","Content","Title","Description","Action","Cancel"]}

package/dist/AlertDialog/styles.css

@@ -0,0 +1,187 @@
+.nuri-alert__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--nuri-modal-overlay);
+  z-index: var(--nuri-modal-z-index);
+  animation: nuri-alert-overlay-in 200ms ease;
+}
+.nuri-alert__overlay[data-state='closed'] {
+  animation: nuri-alert-overlay-out 150ms ease;
+}
+
+.nuri-alert,
+.nuri-alert__header,
+.nuri-alert__body,
+.nuri-alert__footer {
+  box-sizing: border-box;
+}
+
+.nuri-alert {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: calc(var(--nuri-modal-z-index) + 1);
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 중앙 정렬 (디자인 표준) */
+  width: calc(100vw - 32px);
+  max-width: var(--nuri-alert-width);
+  max-height: calc(100dvh - 48px);
+  padding: var(--nuri-modal-padding);
+  border-radius: var(--nuri-modal-radius);
+  background-color: var(--nuri-modal-surface);
+  color: var(--nuri-modal-fg);
+  box-shadow: var(--nuri-modal-shadow);
+  font-family: inherit;
+  text-align: center;
+  outline: none;
+  animation: nuri-alert-in 200ms ease;
+}
+.nuri-alert[data-state='closed'] {
+  animation: nuri-alert-out 150ms ease;
+}
+
+/* ─── 상단 아이콘 (틴트 원 + 심볼은 SVG에 토큰색으로 내장) ─── */
+.nuri-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nuri-alert-icon-size);
+  height: var(--nuri-alert-icon-size);
+  flex-shrink: 0;
+  margin-bottom: var(--nuri-alert-icon-title-gap); /* 아이콘 → 제목 (4px) */
+}
+.nuri-alert__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ─── 슬롯 (중앙) ─── */
+/* 간격: 아이콘→제목 4px(위 icon margin), 제목→설명 6px(header gap),
+   텍스트→버튼 16px(body/footer margin-top) */
+.nuri-alert__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nuri-alert-title-desc-gap);
+  width: 100%;
+}
+.nuri-alert__title {
+  margin: 0;
+  font-size: var(--nuri-alert-title-size);
+  font-weight: var(--nuri-alert-title-weight);
+  color: var(--nuri-alert-title-color);
+  line-height: 1.6;
+}
+.nuri-alert__description {
+  margin: 0;
+  font-size: var(--nuri-alert-desc-size);
+  font-weight: var(--nuri-alert-desc-weight);
+  color: var(--nuri-alert-desc-color);
+  line-height: 1.6;
+}
+.nuri-alert__body {
+  width: 100%;
+  margin-top: var(--nuri-alert-section-gap);
+  font-size: var(--nuri-modal-body-size);
+  line-height: 1.6;
+}
+
+/* ─── 푸터 (전체너비 기본) ─── */
+.nuri-alert__footer {
+  display: flex;
+  gap: var(--nuri-alert-button-gap);
+  width: 100%;
+  margin-top: var(--nuri-alert-section-gap); /* 텍스트 그룹 → 버튼 (16px) */
+  flex-shrink: 0;
+}
+.nuri-alert__footer--start {
+  justify-content: flex-start;
+}
+.nuri-alert__footer--center {
+  justify-content: center;
+}
+.nuri-alert__footer--end {
+  justify-content: flex-end;
+}
+.nuri-alert__footer--between {
+  justify-content: space-between;
+}
+.nuri-alert__footer--full > * {
+  flex: 1 1 0;
+}
+
+/* ─── 우상단 닫기 (옵션) ─── */
+.nuri-alert__close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nuri-modal-close-color);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+.nuri-alert__close:hover {
+  background-color: var(--nuri-modal-close-bg-hover);
+  color: var(--nuri-modal-close-color-hover);
+}
+.nuri-alert__close:focus-visible {
+  outline: var(--nuri-button-focus-ring-width) solid
+    var(--nuri-button-focus-ring-color, var(--nuri-color-brand-default));
+  outline-offset: 2px;
+}
+
+/* ─── 애니메이션 ─── */
+@keyframes nuri-alert-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes nuri-alert-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes nuri-alert-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes nuri-alert-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nuri-alert__overlay,
+  .nuri-alert {
+    animation-duration: 1ms;
+  }
+}

package/dist/Button/index.cjs

@@ -0,0 +1,136 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Button/index.ts
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(Button_exports);
+
+// src/Button/Button.tsx
+var import_styles = require("./styles.css");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react = require("react");
+
+// src/Button/Spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "nuri-button__spinner", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+] }) });
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(function Button2({
+  variant = "primary",
+  size = "md",
+  iconLeft,
+  iconRight,
+  iconOnly = false,
+  block = false,
+  loading = false,
+  disabled = false,
+  asChild = false,
+  type = "button",
+  className,
+  children,
+  onClick,
+  ...rest
+}, ref) {
+  const isBlocked = disabled || loading;
+  if (process.env.NODE_ENV !== "production" && iconOnly && !rest["aria-label"] && !rest["aria-labelledby"]) {
+    console.warn(
+      "[nuri/Button] `iconOnly` \uBC84\uD2BC\uC740 `aria-label`(\uB610\uB294 `aria-labelledby`)\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."
+    );
+  }
+  const hasLeftSlot = !iconOnly && (loading || iconLeft != null);
+  const hasRightSlot = !iconOnly && !loading && iconRight != null;
+  const classes = cx(
+    "nuri-button",
+    `nuri-button--${variant}`,
+    `nuri-button--${size}`,
+    block && "nuri-button--block",
+    iconOnly && "nuri-button--icon-only",
+    isBlocked && "nuri-button--disabled",
+    loading && "nuri-button--loading",
+    hasLeftSlot && "nuri-button--has-left",
+    hasRightSlot && "nuri-button--has-right",
+    className
+  );
+  const handleClick = (e) => {
+    if (isBlocked) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick?.(e);
+  };
+  const renderContent = (content) => {
+    if (iconOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nuri-button__icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) : content });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}) : iconLeft != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nuri-button__icon nuri-button__icon--left", "aria-hidden": "true", children: iconLeft }),
+      content,
+      hasRightSlot && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "nuri-button__icon nuri-button__icon--right", "aria-hidden": "true", children: iconRight })
+    ] });
+  };
+  if (asChild) {
+    const child = import_react.Children.only(children);
+    if (!(0, import_react.isValidElement)(child)) return null;
+    const childElement = child;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_slot.Slot,
+      {
+        ref,
+        className: classes,
+        "aria-disabled": isBlocked || void 0,
+        "aria-busy": loading || void 0,
+        onClick: handleClick,
+        ...rest,
+        children: (0, import_react.cloneElement)(childElement, void 0, renderContent(childElement.props.children))
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      type,
+      className: classes,
+      disabled,
+      "aria-disabled": loading || void 0,
+      "aria-busy": loading || void 0,
+      onClick: handleClick,
+      ...rest,
+      children: renderContent(children)
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/index.ts","../../src/Button/Button.tsx","../../src/Button/Spinner.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps } from './Button.js';\n","'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":["import_jsx_runtime","Button"]}

package/dist/Button/index.d.cts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type Variant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type Size = 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * 시각 유형.
+     * - `primary`: 브랜드 색 배경 (기본)
+     * - `secondary`: 브랜드 옅은 톤 배경
+     * - `outline`: 투명 배경 + 테두리
+     * - `ghost`: 투명 배경, hover 시에만 배경 채움
+     * @default 'primary'
+     */
+    variant?: Variant;
+    /**
+     * 사이즈.
+     * - `sm`: 36px 높이 — 밀집된 UI, 테이블 액션
+     * - `md`: 42px 높이 — 일반 콘텐츠 영역 (기본)
+     * - `lg`: 48px 높이 — 주요 CTA, 모바일 터치
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * 라벨 좌측에 표시할 아이콘.
+     * @example <Button iconLeft={<SearchIcon />}>검색</Button>
+     */
+    iconLeft?: ReactNode;
+    /**
+     * 라벨 우측에 표시할 아이콘.
+     */
+    iconRight?: ReactNode;
+    /**
+     * 아이콘만 표시하는 정사각 버튼. **`aria-label` 필수**
+     * (icon-only는 시각적으로만 의미가 있으므로 스크린리더용 라벨이 없으면 사용자가 용도를 알 수 없음).
+     * children은 단일 아이콘 엘리먼트.
+     * @example <Button iconOnly aria-label="닫기"><CloseIcon /></Button>
+     */
+    iconOnly?: boolean;
+    /**
+     * 컨테이너 전체 너비로 확장.
+     */
+    block?: boolean;
+    /**
+     * 로딩 중 표시. 스피너를 좌측 아이콘 자리에 표시하고, 클릭을 차단하며 `aria-busy="true"`를 부여.
+     */
+    loading?: boolean;
+    /**
+     * Radix Slot으로 자식 엘리먼트를 렌더 — 자식이 Button의 className·ref·이벤트 핸들러를 모두 물려받음.
+     * 링크를 버튼처럼 보이게 할 때 가장 자주 사용 (next/link, react-router Link 등).
+     * @example
+     * <Button asChild><Link href="/about">소개</Link></Button>
+     */
+    asChild?: boolean;
+    /**
+     * 폼 버튼 타입. 의도치 않은 form submit 방지를 위해 기본값 `'button'`.
+     * 폼 제출 버튼이면 명시적으로 `type="submit"` 지정.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    children?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };

package/dist/Button/index.d.ts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type Variant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type Size = 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * 시각 유형.
+     * - `primary`: 브랜드 색 배경 (기본)
+     * - `secondary`: 브랜드 옅은 톤 배경
+     * - `outline`: 투명 배경 + 테두리
+     * - `ghost`: 투명 배경, hover 시에만 배경 채움
+     * @default 'primary'
+     */
+    variant?: Variant;
+    /**
+     * 사이즈.
+     * - `sm`: 36px 높이 — 밀집된 UI, 테이블 액션
+     * - `md`: 42px 높이 — 일반 콘텐츠 영역 (기본)
+     * - `lg`: 48px 높이 — 주요 CTA, 모바일 터치
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * 라벨 좌측에 표시할 아이콘.
+     * @example <Button iconLeft={<SearchIcon />}>검색</Button>
+     */
+    iconLeft?: ReactNode;
+    /**
+     * 라벨 우측에 표시할 아이콘.
+     */
+    iconRight?: ReactNode;
+    /**
+     * 아이콘만 표시하는 정사각 버튼. **`aria-label` 필수**
+     * (icon-only는 시각적으로만 의미가 있으므로 스크린리더용 라벨이 없으면 사용자가 용도를 알 수 없음).
+     * children은 단일 아이콘 엘리먼트.
+     * @example <Button iconOnly aria-label="닫기"><CloseIcon /></Button>
+     */
+    iconOnly?: boolean;
+    /**
+     * 컨테이너 전체 너비로 확장.
+     */
+    block?: boolean;
+    /**
+     * 로딩 중 표시. 스피너를 좌측 아이콘 자리에 표시하고, 클릭을 차단하며 `aria-busy="true"`를 부여.
+     */
+    loading?: boolean;
+    /**
+     * Radix Slot으로 자식 엘리먼트를 렌더 — 자식이 Button의 className·ref·이벤트 핸들러를 모두 물려받음.
+     * 링크를 버튼처럼 보이게 할 때 가장 자주 사용 (next/link, react-router Link 등).
+     * @example
+     * <Button asChild><Link href="/about">소개</Link></Button>
+     */
+    asChild?: boolean;
+    /**
+     * 폼 버튼 타입. 의도치 않은 form submit 방지를 위해 기본값 `'button'`.
+     * 폼 제출 버튼이면 명시적으로 `type="submit"` 지정.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    children?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };