@nurimedia/react-ui 0.1.0

package/dist/Input/index.cjs

@@ -0,0 +1,103 @@
+"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/Input/index.ts
+var Input_exports = {};
+__export(Input_exports, {
+  Input: () => Input
+});
+module.exports = __toCommonJS(Input_exports);
+
+// src/Input/Input.tsx
+var import_styles = require("./styles.css");
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Input/Input.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Input = (0, import_react.forwardRef)(function Input2({
+  size = "md",
+  label,
+  hideLabel = false,
+  description,
+  invalid = false,
+  errorMessage,
+  iconLeft,
+  iconRight,
+  block = false,
+  disabled = false,
+  className,
+  id: idProp,
+  "aria-describedby": ariaDescribedby,
+  ...rest
+}, ref) {
+  const reactId = (0, import_react.useId)();
+  const id = idProp ?? `nuri-input-${reactId}`;
+  const messageId = `${id}-message`;
+  const message = invalid && errorMessage != null ? errorMessage : description;
+  const hasMessage = message != null;
+  const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-input", block && "nuri-input--block", className), children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: cx("nuri-input__label", hideLabel && "nuri-sr-only"), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: cx(
+          "nuri-input__field",
+          `nuri-input__field--${size}`,
+          invalid && "nuri-input__field--invalid",
+          disabled && "nuri-input__field--disabled"
+        ),
+        children: [
+          iconLeft != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconLeft }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref,
+              id,
+              className: "nuri-input__control",
+              disabled,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": describedBy,
+              ...rest
+            }
+          ),
+          iconRight != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconRight })
+        ]
+      }
+    ),
+    hasMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "p",
+      {
+        id: messageId,
+        className: cx("nuri-input__message", invalid && "nuri-input__message--error"),
+        children: message
+      }
+    )
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Input/index.cjs.map

@@ -0,0 +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"]}

package/dist/Input/index.d.cts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type Size = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * 사이즈. sm 36 / md 42 / lg 48 px 높이.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.
+     * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요
+     * (placeholder는 이름을 대체하지 못함 — 입력 시 사라지고 대비가 낮음).
+     */
+    label?: ReactNode;
+    /**
+     * 라벨을 시각적으로만 숨김 (스크린리더에는 노출). 디자인상 라벨을 안 보이게 하되
+     * 접근성 이름은 유지할 때 사용.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */
+    description?: ReactNode;
+    /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */
+    invalid?: boolean;
+    /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */
+    errorMessage?: ReactNode;
+    /** 좌측 어도먼트 (아이콘 등). */
+    iconLeft?: ReactNode;
+    /** 우측 어도먼트 (아이콘·clear·버튼 등). */
+    iconRight?: ReactNode;
+    /** 컨테이너 전체 너비로 확장. @default false */
+    block?: boolean;
+}
+/**
+ * 텍스트 입력 필드. 옵션으로 라벨(위)·헬퍼/에러 메시지(아래)를 포함하는 자체 완결형.
+ * 상태(default/focus/invalid/disabled)는 CSS로, 값 채움(filled)은 네이티브로 처리.
+ *
+ * @example 기본
+ * <Input placeholder="검색어" aria-label="검색" />
+ *
+ * @example 라벨 + 헬퍼 + 에러
+ * <Input
+ *   label="비밀번호"
+ *   description="8자 이상 입력하세요"
+ *   invalid
+ *   errorMessage="비밀번호가 일치하지 않습니다"
+ * />
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/Input/index.d.ts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type Size = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * 사이즈. sm 36 / md 42 / lg 48 px 높이.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.
+     * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요
+     * (placeholder는 이름을 대체하지 못함 — 입력 시 사라지고 대비가 낮음).
+     */
+    label?: ReactNode;
+    /**
+     * 라벨을 시각적으로만 숨김 (스크린리더에는 노출). 디자인상 라벨을 안 보이게 하되
+     * 접근성 이름은 유지할 때 사용.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */
+    description?: ReactNode;
+    /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */
+    invalid?: boolean;
+    /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */
+    errorMessage?: ReactNode;
+    /** 좌측 어도먼트 (아이콘 등). */
+    iconLeft?: ReactNode;
+    /** 우측 어도먼트 (아이콘·clear·버튼 등). */
+    iconRight?: ReactNode;
+    /** 컨테이너 전체 너비로 확장. @default false */
+    block?: boolean;
+}
+/**
+ * 텍스트 입력 필드. 옵션으로 라벨(위)·헬퍼/에러 메시지(아래)를 포함하는 자체 완결형.
+ * 상태(default/focus/invalid/disabled)는 CSS로, 값 채움(filled)은 네이티브로 처리.
+ *
+ * @example 기본
+ * <Input placeholder="검색어" aria-label="검색" />
+ *
+ * @example 라벨 + 헬퍼 + 에러
+ * <Input
+ *   label="비밀번호"
+ *   description="8자 이상 입력하세요"
+ *   invalid
+ *   errorMessage="비밀번호가 일치하지 않습니다"
+ * />
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/Input/index.js

@@ -0,0 +1,76 @@
+// src/Input/Input.tsx
+import "./styles.css";
+import { forwardRef, useId } from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Input/Input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef(function Input2({
+  size = "md",
+  label,
+  hideLabel = false,
+  description,
+  invalid = false,
+  errorMessage,
+  iconLeft,
+  iconRight,
+  block = false,
+  disabled = false,
+  className,
+  id: idProp,
+  "aria-describedby": ariaDescribedby,
+  ...rest
+}, ref) {
+  const reactId = useId();
+  const id = idProp ?? `nuri-input-${reactId}`;
+  const messageId = `${id}-message`;
+  const message = invalid && errorMessage != null ? errorMessage : description;
+  const hasMessage = message != null;
+  const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("nuri-input", block && "nuri-input--block", className), children: [
+    label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: cx("nuri-input__label", hideLabel && "nuri-sr-only"), children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "nuri-input__field",
+          `nuri-input__field--${size}`,
+          invalid && "nuri-input__field--invalid",
+          disabled && "nuri-input__field--disabled"
+        ),
+        children: [
+          iconLeft != null && /* @__PURE__ */ jsx("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconLeft }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id,
+              className: "nuri-input__control",
+              disabled,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": describedBy,
+              ...rest
+            }
+          ),
+          iconRight != null && /* @__PURE__ */ jsx("span", { className: "nuri-input__icon", "aria-hidden": "true", children: iconRight })
+        ]
+      }
+    ),
+    hasMessage && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: messageId,
+        className: cx("nuri-input__message", invalid && "nuri-input__message--error"),
+        children: message
+      }
+    )
+  ] });
+});
+export {
+  Input
+};
+//# sourceMappingURL=index.js.map

package/dist/Input/index.js.map

@@ -0,0 +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"]}

package/dist/Input/styles.css

@@ -0,0 +1,135 @@
+.nuri-input {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--nuri-input-field-gap);
+  font-family: inherit; /* 앱 폰트 상속 */
+}
+.nuri-input--block {
+  display: flex;
+  width: 100%;
+}
+
+/* 라벨 (옵션, 위) */
+.nuri-input__label {
+  font-size: var(--nuri-input-label-size);
+  font-weight: var(--nuri-input-label-weight);
+  line-height: var(--nuri-input-line-height);
+  color: var(--nuri-input-label-color);
+}
+
+/* 시각적으로만 숨김 (스크린리더에는 노출) */
+.nuri-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* 필드 (보더·배경을 가진 래퍼) */
+.nuri-input__field {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--nuri-input-gap);
+  padding: 0 var(--nuri-input-padding-x);
+  background-color: var(--nuri-input-bg);
+  border: 1px solid var(--nuri-input-border);
+  border-radius: var(--nuri-input-radius);
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease;
+}
+
+/* focus — 브랜드색 (use-site 폴백: 토큰 미정의 시 브랜드 프리미티브) */
+.nuri-input__field:focus-within:not(.nuri-input__field--invalid):not(.nuri-input__field--disabled) {
+  border-color: var(--nuri-input-border-focus, var(--nuri-color-brand-default));
+}
+
+/* error */
+.nuri-input__field--invalid {
+  background-color: var(--nuri-input-bg-error);
+  border-color: var(--nuri-input-border-error);
+}
+
+/* disabled */
+.nuri-input__field--disabled {
+  background-color: var(--nuri-input-bg-disabled);
+  border-color: var(--nuri-input-border-disabled);
+  cursor: not-allowed;
+}
+
+/* 사이즈 (높이) */
+.nuri-input__field--sm {
+  height: var(--nuri-input-size-sm-height);
+}
+.nuri-input__field--md {
+  height: var(--nuri-input-size-md-height);
+}
+.nuri-input__field--lg {
+  height: var(--nuri-input-size-lg-height);
+}
+
+/* 실제 input (테두리·배경 없음, 필드 래퍼가 담당) */
+.nuri-input__control {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--nuri-input-font-size);
+  font-weight: var(--nuri-input-font-weight);
+  line-height: var(--nuri-input-line-height);
+  color: var(--nuri-input-text);
+  outline: none;
+  appearance: none;
+}
+.nuri-input__control::placeholder {
+  color: var(--nuri-input-placeholder);
+  opacity: 1; /* Firefox 기본 opacity 제거 */
+}
+.nuri-input__field--invalid .nuri-input__control,
+.nuri-input__field--invalid .nuri-input__control::placeholder {
+  color: var(--nuri-input-text-error);
+}
+.nuri-input__control:disabled {
+  color: var(--nuri-input-text-disabled);
+  cursor: not-allowed;
+  -webkit-text-fill-color: var(--nuri-input-text-disabled); /* Safari disabled 색 강제 */
+}
+.nuri-input__field--invalid .nuri-input__control:disabled,
+.nuri-input__field--disabled .nuri-input__control::placeholder {
+  color: var(--nuri-input-text-disabled);
+}
+
+/* 어도먼트 (좌/우 아이콘) */
+.nuri-input__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--nuri-input-icon-size);
+  height: var(--nuri-input-icon-size);
+  color: var(--nuri-input-icon-color);
+}
+.nuri-input__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* 메시지 (헬퍼/에러, 아래) */
+.nuri-input__message {
+  margin: 0;
+  font-size: var(--nuri-input-desc-size);
+  line-height: var(--nuri-input-line-height);
+  color: var(--nuri-input-desc-color);
+}
+.nuri-input__message--error {
+  color: var(--nuri-input-text-error);
+}

package/dist/Modal/index.cjs

@@ -0,0 +1,120 @@
+"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/Modal/index.ts
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal
+});
+module.exports = __toCommonJS(Modal_exports);
+
+// src/Modal/Modal.tsx
+var import_styles = require("./styles.css");
+var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Modal/Modal.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Root2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Root, { ...props });
+Root2.displayName = "Modal";
+var Trigger2 = Dialog.Trigger;
+var Content2 = (0, import_react.forwardRef)(
+  function ModalContent({ placement = "center", size = "md", overlay = true, container, className, children, ...rest }, ref) {
+    const classes = cx("nuri-modal", `nuri-modal--${placement}`, `nuri-modal--${size}`, className);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Portal, { container, children: [
+      overlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Overlay, { className: "nuri-modal__overlay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Content, { ref, className: classes, ...rest, children })
+    ] });
+  }
+);
+var Header = (0, import_react.forwardRef)(function ModalHeader({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cx("nuri-modal__header", className), ...rest });
+});
+var Title2 = (0, import_react.forwardRef)(function ModalTitle({ visuallyHidden = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Dialog.Title,
+    {
+      ref,
+      className: cx("nuri-modal__title", visuallyHidden && "nuri-sr-only", className),
+      ...rest
+    }
+  );
+});
+var Description2 = (0, import_react.forwardRef)(function ModalDescription({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Description, { ref, className: cx("nuri-modal__description", className), ...rest });
+});
+var Body = (0, import_react.forwardRef)(function ModalBody({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cx("nuri-modal__body", className), ...rest });
+});
+var Footer = (0, import_react.forwardRef)(function ModalFooter({ align = "end", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: cx("nuri-modal__footer", `nuri-modal__footer--${align}`, className),
+      ...rest
+    }
+  );
+});
+var Close2 = Dialog.Close;
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+var CloseButton = (0, import_react.forwardRef)(function ModalCloseButton({ className, "aria-label": ariaLabel = "\uB2EB\uAE30", children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": ariaLabel,
+      className: cx("nuri-modal__close", className),
+      ...rest,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+    }
+  ) });
+});
+var Modal = Object.assign(Root2, {
+  Trigger: Trigger2,
+  Content: Content2,
+  Header,
+  Title: Title2,
+  Description: Description2,
+  Body,
+  Footer,
+  Close: Close2,
+  CloseButton
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Modal/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/index.ts","../../src/Modal/Modal.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Modal } from './Modal.js';\nexport type { ModalContentProps, ModalFooterProps, ModalTitleProps } from './Modal.js';\n","'use client';\n\nimport './styles.css';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Placement = 'center' | 'bottom';\ntype Size = 'sm' | 'md' | 'lg';\n\n/**\n * 모달 루트. open/onOpenChange로 제어하거나, Modal.Trigger와 함께 비제어로도 사용.\n * Radix Dialog 기반 — 포커스 트랩·Esc·스크롤 락·포커스 복귀·aria 연결을 자동 제공.\n *\n * @example 제어형\n * <Modal open={open} onOpenChange={setOpen}>\n *   <Modal.Content>...</Modal.Content>\n * </Modal>\n *\n * @example 비제어 (트리거)\n * <Modal>\n *   <Modal.Trigger asChild><Button>열기</Button></Modal.Trigger>\n *   <Modal.Content>...</Modal.Content>\n * </Modal>\n */\nconst Root = (props: ComponentPropsWithoutRef<typeof Dialog.Root>) => <Dialog.Root {...props} />;\nRoot.displayName = 'Modal';\n\n/** 모달을 여는 트리거. `asChild`로 임의 엘리먼트(Button 등)에 위임. */\nconst Trigger = Dialog.Trigger;\n\nexport interface ModalContentProps extends ComponentPropsWithoutRef<typeof Dialog.Content> {\n  /**\n   * 표시 위치.\n   * - `center`: 화면 중앙 다이얼로그 (기본)\n   * - `bottom`: 하단 바텀시트 (모바일에서 아래에서 올라옴)\n   * @default 'center'\n   */\n  placement?: Placement;\n  /**\n   * 최대 너비. **`placement=\"center\"`에서만 적용** (bottom 바텀시트는 항상 풀 width).\n   * @default 'md'\n   */\n  size?: Size;\n  /** 백드롭(오버레이) 표시 여부. @default true */\n  overlay?: boolean;\n  /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */\n  container?: HTMLElement | null;\n}\n\n/**\n * 오버레이 + 포털 + 다이얼로그 패널을 한 번에 렌더.\n * 내부에 Modal.Header / Modal.Body / Modal.Footer를 자유롭게 합성.\n */\nconst Content = forwardRef<ElementRef<typeof Dialog.Content>, ModalContentProps>(\n  function ModalContent(\n    { placement = 'center', size = 'md', overlay = true, container, className, children, ...rest },\n    ref,\n  ) {\n    const classes = cx('nuri-modal', `nuri-modal--${placement}`, `nuri-modal--${size}`, className);\n\n    return (\n      <Dialog.Portal container={container}>\n        {overlay && <Dialog.Overlay className=\"nuri-modal__overlay\" />}\n        <Dialog.Content ref={ref} className={classes} {...rest}>\n          {children}\n        </Dialog.Content>\n      </Dialog.Portal>\n    );\n  },\n);\n\n/** 헤더 영역 (Title/Description/CloseButton을 담는 레이아웃 슬롯). */\nconst Header = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function ModalHeader(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx('nuri-modal__header', className)} {...rest} />;\n});\n\nexport interface ModalTitleProps extends ComponentPropsWithoutRef<typeof Dialog.Title> {\n  /**\n   * 시각적으로는 숨기되 스크린리더에는 노출. 시각적 제목이 없는 모달도\n   * 접근 가능한 이름을 가져야 하므로(Radix Dialog는 Title 필수), 이 옵션으로 처리.\n   * @example <Modal.Title visuallyHidden>이미지 미리보기</Modal.Title>\n   */\n  visuallyHidden?: boolean;\n}\n\n/** 모달 제목. 렌더 시 자동으로 `aria-labelledby`로 연결됨 (Radix Dialog.Title). */\nconst Title = forwardRef<ElementRef<typeof Dialog.Title>, ModalTitleProps>(function ModalTitle(\n  { visuallyHidden = false, className, ...rest },\n  ref,\n) {\n  return (\n    <Dialog.Title\n      ref={ref}\n      className={cx('nuri-modal__title', visuallyHidden && 'nuri-sr-only', className)}\n      {...rest}\n    />\n  );\n});\n\n/** 모달 설명. 렌더 시 자동으로 `aria-describedby`로 연결됨 (Radix Dialog.Description). */\nconst Description = forwardRef<\n  ElementRef<typeof Dialog.Description>,\n  ComponentPropsWithoutRef<typeof Dialog.Description>\n>(function ModalDescription({ className, ...rest }, ref) {\n  return (\n    <Dialog.Description ref={ref} className={cx('nuri-modal__description', className)} {...rest} />\n  );\n});\n\n/** 본문 영역 (스크롤 가능). */\nconst Body = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function ModalBody(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx('nuri-modal__body', className)} {...rest} />;\n});\n\nexport interface ModalFooterProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * 액션 버튼 정렬.\n   * - `end`: 우측 (기본, 데스크탑 관례)\n   * - `start`: 좌측\n   * - `center`: 가운데\n   * - `between`: 양끝 분산 (예: 좌측 위험 액션 + 우측 확인)\n   * - `full`: 버튼들이 가로를 균등하게 채움 (모바일 전체너비)\n   * @default 'end'\n   */\n  align?: 'start' | 'center' | 'end' | 'between' | 'full';\n}\n\n/** 푸터 영역 (액션 버튼 배치). 정렬은 `align` prop으로 제어. */\nconst Footer = forwardRef<HTMLDivElement, ModalFooterProps>(function ModalFooter(\n  { align = 'end', className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx('nuri-modal__footer', `nuri-modal__footer--${align}`, className)}\n      {...rest}\n    />\n  );\n});\n\n/**\n * 모달을 닫는 액션. `asChild`로 임의 엘리먼트에 위임.\n * @example <Modal.Close asChild><Button variant=\"outline\">취소</Button></Modal.Close>\n */\nconst Close = Dialog.Close;\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/** 우상단 X 닫기 버튼 (미리 스타일링됨). 기본 `aria-label=\"닫기\"`. */\nconst CloseButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ComponentPropsWithoutRef<'button'>, 'children'> & { children?: ReactNode }\n>(function ModalCloseButton(\n  { className, 'aria-label': ariaLabel = '닫기', children, ...rest },\n  ref,\n) {\n  return (\n    <Dialog.Close asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={cx('nuri-modal__close', className)}\n        {...rest}\n      >\n        {children ?? <CloseIcon />}\n      </button>\n    </Dialog.Close>\n  );\n});\n\nexport const Modal = Object.assign(Root, {\n  Trigger,\n  Content,\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n  Close,\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"],"mappings":"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","names":["Root","Trigger","Content","Title","Description","Close"]}

package/dist/Modal/index.d.cts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+
+type Placement = 'center' | 'bottom';
+type Size = 'sm' | 'md' | 'lg';
+interface ModalContentProps extends ComponentPropsWithoutRef<typeof Dialog.Content> {
+    /**
+     * 표시 위치.
+     * - `center`: 화면 중앙 다이얼로그 (기본)
+     * - `bottom`: 하단 바텀시트 (모바일에서 아래에서 올라옴)
+     * @default 'center'
+     */
+    placement?: Placement;
+    /**
+     * 최대 너비. **`placement="center"`에서만 적용** (bottom 바텀시트는 항상 풀 width).
+     * @default 'md'
+     */
+    size?: Size;
+    /** 백드롭(오버레이) 표시 여부. @default true */
+    overlay?: boolean;
+    /** 포털 렌더 대상. 기본은 document.body. 다른 요소에 렌더하려면 지정. */
+    container?: HTMLElement | null;
+}
+interface ModalTitleProps extends ComponentPropsWithoutRef<typeof Dialog.Title> {
+    /**
+     * 시각적으로는 숨기되 스크린리더에는 노출. 시각적 제목이 없는 모달도
+     * 접근 가능한 이름을 가져야 하므로(Radix Dialog는 Title 필수), 이 옵션으로 처리.
+     * @example <Modal.Title visuallyHidden>이미지 미리보기</Modal.Title>
+     */
+    visuallyHidden?: boolean;
+}
+interface ModalFooterProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * 액션 버튼 정렬.
+     * - `end`: 우측 (기본, 데스크탑 관례)
+     * - `start`: 좌측
+     * - `center`: 가운데
+     * - `between`: 양끝 분산 (예: 좌측 위험 액션 + 우측 확인)
+     * - `full`: 버튼들이 가로를 균등하게 채움 (모바일 전체너비)
+     * @default 'end'
+     */
+    align?: 'start' | 'center' | 'end' | 'between' | 'full';
+}
+declare const Modal: {
+    (props: ComponentPropsWithoutRef<typeof Dialog.Root>): react.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: react.ForwardRefExoticComponent<Dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<ModalContentProps & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<ModalTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<Dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+    CloseButton: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { Modal, type ModalContentProps, type ModalFooterProps, type ModalTitleProps };