@bridger-kr/react 0.1.0

package/dist/components/forms/FileUpload.cjs

@@ -0,0 +1,187 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/FileUpload.tsx
+function fmtSize(bytes) {
+  if (bytes == null) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function FileUpload({
+  label,
+  accept = ".json,.yaml,.yml",
+  hint = "OpenAPI \uC2A4\uD399 \xB7 JSON \uB610\uB294 YAML",
+  file,
+  onFiles,
+  onRemove,
+  id,
+  style
+}) {
+  const [drag, setDrag] = react.useState(false);
+  const inputRef = react.useRef(null);
+  const fId = id || "fu";
+  const handle = (files) => {
+    if (files && files.length) onFiles?.(files);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 7, ...style }, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    file ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "12px 14px",
+          background: "var(--dt-surface)",
+          border: "1px solid var(--dt-border-strong)",
+          borderRadius: "var(--dt-radius-lg)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                width: 34,
+                height: 34,
+                flex: "0 0 auto",
+                display: "grid",
+                placeItems: "center",
+                borderRadius: "var(--dt-radius-md)",
+                background: "var(--dt-tint-accent)",
+                color: "var(--dt-accent)"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinejoin: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: "var(--dt-font-mono)",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: "var(--dt-ink-strong)",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: file.name
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)", marginTop: 2 }, children: [
+              fmtSize(file.size),
+              " \xB7 \uC5C5\uB85C\uB4DC \uC644\uB8CC"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              "aria-label": "\uC81C\uAC70",
+              style: {
+                flex: "0 0 auto",
+                width: 30,
+                height: 30,
+                display: "grid",
+                placeItems: "center",
+                border: "none",
+                background: "var(--dt-surface-sunken)",
+                borderRadius: "var(--dt-radius-sm)",
+                color: "var(--dt-muted-strong)",
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: fId,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDrag(true);
+        },
+        onDragLeave: () => setDrag(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDrag(false);
+          handle(e.dataTransfer.files);
+        },
+        style: {
+          display: "grid",
+          placeItems: "center",
+          gap: 8,
+          padding: "26px 20px",
+          textAlign: "center",
+          cursor: "pointer",
+          borderRadius: "var(--dt-radius-lg)",
+          border: `1.5px dashed ${drag ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+          background: drag ? "var(--dt-tint-accent)" : "var(--dt-surface-sunken)",
+          transition: "background-color var(--dt-motion-fast), border-color var(--dt-motion-fast)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: drag ? "var(--dt-accent)" : "var(--dt-muted)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M12 16V4m0 0L7 9m5-5l5 5",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 13.5, color: "var(--dt-ink-strong)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "var(--dt-accent)" }, children: "\uD30C\uC77C \uC120\uD0DD" }),
+            " \uB610\uB294 \uB04C\uC5B4\uB2E4 \uB193\uAE30"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: hint }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: fId,
+              type: "file",
+              accept,
+              onChange: (e) => handle(e.target.files),
+              style: { display: "none" }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+exports.FileUpload = FileUpload;
+//# sourceMappingURL=FileUpload.cjs.map
+//# sourceMappingURL=FileUpload.cjs.map

package/dist/components/forms/FileUpload.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/FileUpload.tsx"],"names":["useState","useRef","jsxs","jsx"],"mappings":"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","file":"FileUpload.cjs","sourcesContent":["import { useRef, useState } from 'react';\nimport type { CSSProperties, DragEvent, HTMLAttributes } from 'react';\n\nfunction fmtSize(bytes?: number) {\n  if (bytes == null) return '';\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;\n  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nexport interface UploadedFile {\n  name: string;\n  size?: number;\n}\n\nexport interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style'> {\n  label?: string;\n  /** Accepted file types, passed to the native input. */\n  accept?: string;\n  hint?: string;\n  /** Current file — when set, the filled state renders instead of the dropzone. */\n  file?: UploadedFile | null;\n  onFiles?: (files: FileList) => void;\n  onRemove?: () => void;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Dashed hairline dropzone for uploading an OpenAPI spec. Idle / drag / filled.\n * @startingPoint section=\"Forms\" subtitle=\"Dropzone for an OpenAPI spec\" viewport=\"460x180\"\n */\nexport function FileUpload({\n  label,\n  accept = '.json,.yaml,.yml',\n  hint = 'OpenAPI 스펙 · JSON 또는 YAML',\n  file,\n  onFiles,\n  onRemove,\n  id,\n  style,\n}: FileUploadProps) {\n  const [drag, setDrag] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fId = id || 'fu';\n\n  const handle = (files: FileList | null) => {\n    if (files && files.length) onFiles?.(files);\n  };\n\n  return (\n    <div style={{ display: 'grid', gap: 7, ...style }}>\n      {label ? <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>{label}</span> : null}\n\n      {file ? (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 12,\n            padding: '12px 14px',\n            background: 'var(--dt-surface)',\n            border: '1px solid var(--dt-border-strong)',\n            borderRadius: 'var(--dt-radius-lg)',\n          }}\n        >\n          <span\n            style={{\n              width: 34,\n              height: 34,\n              flex: '0 0 auto',\n              display: 'grid',\n              placeItems: 'center',\n              borderRadius: 'var(--dt-radius-md)',\n              background: 'var(--dt-tint-accent)',\n              color: 'var(--dt-accent)',\n            }}\n          >\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinejoin=\"round\"\n              />\n              <path d=\"M14 2v6h6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n            </svg>\n          </span>\n          <div style={{ flex: 1, minWidth: 0 }}>\n            <div\n              style={{\n                fontFamily: 'var(--dt-font-mono)',\n                fontSize: 13,\n                fontWeight: 600,\n                color: 'var(--dt-ink-strong)',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {file.name}\n            </div>\n            <div style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)', marginTop: 2 }}>\n              {fmtSize(file.size)} · 업로드 완료\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onRemove}\n            aria-label=\"제거\"\n            style={{\n              flex: '0 0 auto',\n              width: 30,\n              height: 30,\n              display: 'grid',\n              placeItems: 'center',\n              border: 'none',\n              background: 'var(--dt-surface-sunken)',\n              borderRadius: 'var(--dt-radius-sm)',\n              color: 'var(--dt-muted-strong)',\n              cursor: 'pointer',\n            }}\n          >\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n        </div>\n      ) : (\n        <label\n          htmlFor={fId}\n          onDragOver={(e: DragEvent<HTMLLabelElement>) => {\n            e.preventDefault();\n            setDrag(true);\n          }}\n          onDragLeave={() => setDrag(false)}\n          onDrop={(e: DragEvent<HTMLLabelElement>) => {\n            e.preventDefault();\n            setDrag(false);\n            handle(e.dataTransfer.files);\n          }}\n          style={{\n            display: 'grid',\n            placeItems: 'center',\n            gap: 8,\n            padding: '26px 20px',\n            textAlign: 'center',\n            cursor: 'pointer',\n            borderRadius: 'var(--dt-radius-lg)',\n            border: `1.5px dashed ${drag ? 'var(--dt-accent)' : 'var(--dt-border-strong)'}`,\n            background: drag ? 'var(--dt-tint-accent)' : 'var(--dt-surface-sunken)',\n            transition: 'background-color var(--dt-motion-fast), border-color var(--dt-motion-fast)',\n          }}\n        >\n          <span style={{ color: drag ? 'var(--dt-accent)' : 'var(--dt-muted)' }}>\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"M12 16V4m0 0L7 9m5-5l5 5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              <path\n                d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </span>\n          <span style={{ fontSize: 13.5, color: 'var(--dt-ink-strong)' }}>\n            <span style={{ fontWeight: 600, color: 'var(--dt-accent)' }}>파일 선택</span> 또는 끌어다 놓기\n          </span>\n          <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>{hint}</span>\n          <input\n            ref={inputRef}\n            id={fId}\n            type=\"file\"\n            accept={accept}\n            onChange={(e) => handle(e.target.files)}\n            style={{ display: 'none' }}\n          />\n        </label>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/FileUpload.d.cts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface UploadedFile {
+    name: string;
+    size?: number;
+}
+interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style'> {
+    label?: string;
+    /** Accepted file types, passed to the native input. */
+    accept?: string;
+    hint?: string;
+    /** Current file — when set, the filled state renders instead of the dropzone. */
+    file?: UploadedFile | null;
+    onFiles?: (files: FileList) => void;
+    onRemove?: () => void;
+    id?: string;
+    style?: CSSProperties;
+}
+/**
+ * Dashed hairline dropzone for uploading an OpenAPI spec. Idle / drag / filled.
+ * @startingPoint section="Forms" subtitle="Dropzone for an OpenAPI spec" viewport="460x180"
+ */
+declare function FileUpload({ label, accept, hint, file, onFiles, onRemove, id, style, }: FileUploadProps): react.JSX.Element;
+
+export { FileUpload, type FileUploadProps, type UploadedFile };

package/dist/components/forms/FileUpload.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface UploadedFile {
+    name: string;
+    size?: number;
+}
+interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style'> {
+    label?: string;
+    /** Accepted file types, passed to the native input. */
+    accept?: string;
+    hint?: string;
+    /** Current file — when set, the filled state renders instead of the dropzone. */
+    file?: UploadedFile | null;
+    onFiles?: (files: FileList) => void;
+    onRemove?: () => void;
+    id?: string;
+    style?: CSSProperties;
+}
+/**
+ * Dashed hairline dropzone for uploading an OpenAPI spec. Idle / drag / filled.
+ * @startingPoint section="Forms" subtitle="Dropzone for an OpenAPI spec" viewport="460x180"
+ */
+declare function FileUpload({ label, accept, hint, file, onFiles, onRemove, id, style, }: FileUploadProps): react.JSX.Element;
+
+export { FileUpload, type FileUploadProps, type UploadedFile };

package/dist/components/forms/FileUpload.mjs

@@ -0,0 +1,185 @@
+import { useState, useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/FileUpload.tsx
+function fmtSize(bytes) {
+  if (bytes == null) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function FileUpload({
+  label,
+  accept = ".json,.yaml,.yml",
+  hint = "OpenAPI \uC2A4\uD399 \xB7 JSON \uB610\uB294 YAML",
+  file,
+  onFiles,
+  onRemove,
+  id,
+  style
+}) {
+  const [drag, setDrag] = useState(false);
+  const inputRef = useRef(null);
+  const fId = id || "fu";
+  const handle = (files) => {
+    if (files && files.length) onFiles?.(files);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7, ...style }, children: [
+    label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    file ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "12px 14px",
+          background: "var(--dt-surface)",
+          border: "1px solid var(--dt-border-strong)",
+          borderRadius: "var(--dt-radius-lg)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 34,
+                height: 34,
+                flex: "0 0 auto",
+                display: "grid",
+                placeItems: "center",
+                borderRadius: "var(--dt-radius-md)",
+                background: "var(--dt-tint-accent)",
+                color: "var(--dt-accent)"
+              },
+              children: /* @__PURE__ */ jsxs("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinejoin: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx("path", { d: "M14 2v6h6", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: "var(--dt-font-mono)",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: "var(--dt-ink-strong)",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: file.name
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)", marginTop: 2 }, children: [
+              fmtSize(file.size),
+              " \xB7 \uC5C5\uB85C\uB4DC \uC644\uB8CC"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              "aria-label": "\uC81C\uAC70",
+              style: {
+                flex: "0 0 auto",
+                width: 30,
+                height: 30,
+                display: "grid",
+                placeItems: "center",
+                border: "none",
+                background: "var(--dt-surface-sunken)",
+                borderRadius: "var(--dt-radius-sm)",
+                color: "var(--dt-muted-strong)",
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: fId,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDrag(true);
+        },
+        onDragLeave: () => setDrag(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDrag(false);
+          handle(e.dataTransfer.files);
+        },
+        style: {
+          display: "grid",
+          placeItems: "center",
+          gap: 8,
+          padding: "26px 20px",
+          textAlign: "center",
+          cursor: "pointer",
+          borderRadius: "var(--dt-radius-lg)",
+          border: `1.5px dashed ${drag ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+          background: drag ? "var(--dt-tint-accent)" : "var(--dt-surface-sunken)",
+          transition: "background-color var(--dt-motion-fast), border-color var(--dt-motion-fast)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: drag ? "var(--dt-accent)" : "var(--dt-muted)" }, children: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M12 16V4m0 0L7 9m5-5l5 5",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 13.5, color: "var(--dt-ink-strong)" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--dt-accent)" }, children: "\uD30C\uC77C \uC120\uD0DD" }),
+            " \uB610\uB294 \uB04C\uC5B4\uB2E4 \uB193\uAE30"
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: hint }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: fId,
+              type: "file",
+              accept,
+              onChange: (e) => handle(e.target.files),
+              style: { display: "none" }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { FileUpload };
+//# sourceMappingURL=FileUpload.mjs.map
+//# sourceMappingURL=FileUpload.mjs.map

package/dist/components/forms/FileUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/FileUpload.tsx"],"names":[],"mappings":"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","file":"FileUpload.mjs","sourcesContent":["import { useRef, useState } from 'react';\nimport type { CSSProperties, DragEvent, HTMLAttributes } from 'react';\n\nfunction fmtSize(bytes?: number) {\n  if (bytes == null) return '';\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;\n  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nexport interface UploadedFile {\n  name: string;\n  size?: number;\n}\n\nexport interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style'> {\n  label?: string;\n  /** Accepted file types, passed to the native input. */\n  accept?: string;\n  hint?: string;\n  /** Current file — when set, the filled state renders instead of the dropzone. */\n  file?: UploadedFile | null;\n  onFiles?: (files: FileList) => void;\n  onRemove?: () => void;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Dashed hairline dropzone for uploading an OpenAPI spec. Idle / drag / filled.\n * @startingPoint section=\"Forms\" subtitle=\"Dropzone for an OpenAPI spec\" viewport=\"460x180\"\n */\nexport function FileUpload({\n  label,\n  accept = '.json,.yaml,.yml',\n  hint = 'OpenAPI 스펙 · JSON 또는 YAML',\n  file,\n  onFiles,\n  onRemove,\n  id,\n  style,\n}: FileUploadProps) {\n  const [drag, setDrag] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fId = id || 'fu';\n\n  const handle = (files: FileList | null) => {\n    if (files && files.length) onFiles?.(files);\n  };\n\n  return (\n    <div style={{ display: 'grid', gap: 7, ...style }}>\n      {label ? <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>{label}</span> : null}\n\n      {file ? (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 12,\n            padding: '12px 14px',\n            background: 'var(--dt-surface)',\n            border: '1px solid var(--dt-border-strong)',\n            borderRadius: 'var(--dt-radius-lg)',\n          }}\n        >\n          <span\n            style={{\n              width: 34,\n              height: 34,\n              flex: '0 0 auto',\n              display: 'grid',\n              placeItems: 'center',\n              borderRadius: 'var(--dt-radius-md)',\n              background: 'var(--dt-tint-accent)',\n              color: 'var(--dt-accent)',\n            }}\n          >\n            <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinejoin=\"round\"\n              />\n              <path d=\"M14 2v6h6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n            </svg>\n          </span>\n          <div style={{ flex: 1, minWidth: 0 }}>\n            <div\n              style={{\n                fontFamily: 'var(--dt-font-mono)',\n                fontSize: 13,\n                fontWeight: 600,\n                color: 'var(--dt-ink-strong)',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              }}\n            >\n              {file.name}\n            </div>\n            <div style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)', marginTop: 2 }}>\n              {fmtSize(file.size)} · 업로드 완료\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onRemove}\n            aria-label=\"제거\"\n            style={{\n              flex: '0 0 auto',\n              width: 30,\n              height: 30,\n              display: 'grid',\n              placeItems: 'center',\n              border: 'none',\n              background: 'var(--dt-surface-sunken)',\n              borderRadius: 'var(--dt-radius-sm)',\n              color: 'var(--dt-muted-strong)',\n              cursor: 'pointer',\n            }}\n          >\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n            </svg>\n          </button>\n        </div>\n      ) : (\n        <label\n          htmlFor={fId}\n          onDragOver={(e: DragEvent<HTMLLabelElement>) => {\n            e.preventDefault();\n            setDrag(true);\n          }}\n          onDragLeave={() => setDrag(false)}\n          onDrop={(e: DragEvent<HTMLLabelElement>) => {\n            e.preventDefault();\n            setDrag(false);\n            handle(e.dataTransfer.files);\n          }}\n          style={{\n            display: 'grid',\n            placeItems: 'center',\n            gap: 8,\n            padding: '26px 20px',\n            textAlign: 'center',\n            cursor: 'pointer',\n            borderRadius: 'var(--dt-radius-lg)',\n            border: `1.5px dashed ${drag ? 'var(--dt-accent)' : 'var(--dt-border-strong)'}`,\n            background: drag ? 'var(--dt-tint-accent)' : 'var(--dt-surface-sunken)',\n            transition: 'background-color var(--dt-motion-fast), border-color var(--dt-motion-fast)',\n          }}\n        >\n          <span style={{ color: drag ? 'var(--dt-accent)' : 'var(--dt-muted)' }}>\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"M12 16V4m0 0L7 9m5-5l5 5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              <path\n                d=\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </span>\n          <span style={{ fontSize: 13.5, color: 'var(--dt-ink-strong)' }}>\n            <span style={{ fontWeight: 600, color: 'var(--dt-accent)' }}>파일 선택</span> 또는 끌어다 놓기\n          </span>\n          <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>{hint}</span>\n          <input\n            ref={inputRef}\n            id={fId}\n            type=\"file\"\n            accept={accept}\n            onChange={(e) => handle(e.target.files)}\n            style={{ display: 'none' }}\n          />\n        </label>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/RadioGroup.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/RadioGroup.tsx
+function RadioGroup({ name, options = [], value, defaultValue, onChange, disabled, style }) {
+  const [internal, setInternal] = react.useState(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const generatedName = react.useId();
+  const groupName = name || generatedName;
+  const select = (v) => {
+    if (disabled) return;
+    if (value === void 0) setInternal(v);
+    onChange?.(v);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", style: { display: "grid", gap: 10, ...style }, children: options.map((o) => {
+    const opt = typeof o === "string" ? { value: o, label: o } : o;
+    const on = opt.value === current;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 10,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.55 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name: groupName,
+              checked: on,
+              onChange: () => select(opt.value),
+              disabled,
+              style: { position: "absolute", opacity: 0, width: 0, height: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                width: 18,
+                height: 18,
+                marginTop: 1,
+                flex: "0 0 auto",
+                borderRadius: 9999,
+                display: "grid",
+                placeItems: "center",
+                background: "var(--dt-surface)",
+                border: `1.5px solid ${on ? "var(--dt-accent)" : "var(--dt-border-strong)"}`,
+                transition: "border-color 130ms"
+              },
+              children: on ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 9, height: 9, borderRadius: 9999, background: "var(--dt-accent)" } }) : null
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "grid", gap: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)", lineHeight: 1.3 }, children: opt.label }),
+            opt.hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: opt.hint }) : null
+          ] })
+        ]
+      },
+      opt.value
+    );
+  }) });
+}
+
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=RadioGroup.cjs.map
+//# sourceMappingURL=RadioGroup.cjs.map

package/dist/components/forms/RadioGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/RadioGroup.tsx"],"names":["useState","useId","jsxs","jsx"],"mappings":"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","file":"RadioGroup.cjs","sourcesContent":["import { useId, useState } from 'react';\nimport type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface RadioOption {\n  value: string;\n  label: string;\n  hint?: string;\n}\n\nexport interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {\n  name?: string;\n  options?: Array<string | RadioOption>;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  style?: CSSProperties;\n}\n\n/** Radio group with optional per-option hint text. */\nexport function RadioGroup({ name, options = [], value, defaultValue, onChange, disabled, style }: RadioGroupProps) {\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value !== undefined ? value : internal;\n  const generatedName = useId();\n  const groupName = name || generatedName;\n  const select = (v: string) => {\n    if (disabled) return;\n    if (value === undefined) setInternal(v);\n    onChange?.(v);\n  };\n  return (\n    <div role=\"radiogroup\" style={{ display: 'grid', gap: 10, ...style }}>\n      {options.map((o) => {\n        const opt = typeof o === 'string' ? { value: o, label: o } : o;\n        const on = opt.value === current;\n        return (\n          <label\n            key={opt.value}\n            style={{\n              display: 'flex',\n              alignItems: 'flex-start',\n              gap: 10,\n              cursor: disabled ? 'not-allowed' : 'pointer',\n              opacity: disabled ? 0.55 : 1,\n            }}\n          >\n            <input\n              type=\"radio\"\n              name={groupName}\n              checked={on}\n              onChange={() => select(opt.value)}\n              disabled={disabled}\n              style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }}\n            />\n            <span\n              style={{\n                width: 18,\n                height: 18,\n                marginTop: 1,\n                flex: '0 0 auto',\n                borderRadius: 9999,\n                display: 'grid',\n                placeItems: 'center',\n                background: 'var(--dt-surface)',\n                border: `1.5px solid ${on ? 'var(--dt-accent)' : 'var(--dt-border-strong)'}`,\n                transition: 'border-color 130ms',\n              }}\n            >\n              {on ? <span style={{ width: 9, height: 9, borderRadius: 9999, background: 'var(--dt-accent)' }} /> : null}\n            </span>\n            <span style={{ display: 'grid', gap: 2 }}>\n              <span style={{ fontSize: 14, color: 'var(--dt-ink)', lineHeight: 1.3 }}>{opt.label}</span>\n              {opt.hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{opt.hint}</span> : null}\n            </span>\n          </label>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/RadioGroup.d.cts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface RadioOption {
+    value: string;
+    label: string;
+    hint?: string;
+}
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {
+    name?: string;
+    options?: Array<string | RadioOption>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+/** Radio group with optional per-option hint text. */
+declare function RadioGroup({ name, options, value, defaultValue, onChange, disabled, style }: RadioGroupProps): react.JSX.Element;
+
+export { RadioGroup, type RadioGroupProps, type RadioOption };

package/dist/components/forms/RadioGroup.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface RadioOption {
+    value: string;
+    label: string;
+    hint?: string;
+}
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'style'> {
+    name?: string;
+    options?: Array<string | RadioOption>;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+/** Radio group with optional per-option hint text. */
+declare function RadioGroup({ name, options, value, defaultValue, onChange, disabled, style }: RadioGroupProps): react.JSX.Element;
+
+export { RadioGroup, type RadioGroupProps, type RadioOption };