@bridger-kr/react 0.1.0

package/dist/components/feedback/Dialog.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/Dialog.tsx
+function Dialog({ open, onClose, title, description, children, footer, "aria-label": ariaLabel, width = 460 }) {
+  const titleId = react.useId();
+  react.useEffect(() => {
+    if (!open) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick: onClose, style: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 100,
+    display: "grid",
+    placeItems: "center",
+    padding: 20,
+    background: "color-mix(in srgb, var(--dt-ink-strong) 32%, transparent)",
+    backdropFilter: "blur(2px)",
+    animation: "dt-fade 160ms var(--dt-ease)"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        onClick: (event) => event.stopPropagation(),
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
+        style: {
+          width: "100%",
+          maxWidth: width,
+          background: "var(--dt-surface)",
+          borderRadius: "var(--dt-radius-lg)",
+          boxShadow: "var(--dt-shadow-xl)",
+          animation: "dt-pop 200ms var(--dt-ease)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "22px 24px" }, children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { id: titleId, style: { fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+            description ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 8, fontSize: 14, lineHeight: 1.55, color: "var(--dt-muted-strong)" }, children: description }) : null,
+            children ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: title || description ? 16 : 0 }, children }) : null
+          ] }),
+          footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, padding: "14px 24px", background: "var(--dt-surface-sunken)" }, children: footer }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes dt-fade{from{opacity:0}}@keyframes dt-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}` })
+  ] });
+}
+
+exports.Dialog = Dialog;
+//# sourceMappingURL=Dialog.cjs.map
+//# sourceMappingURL=Dialog.cjs.map

package/dist/components/feedback/Dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Dialog.tsx"],"names":["useId","useEffect","jsxs","jsx"],"mappings":"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","file":"Dialog.cjs","sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect, useId } from 'react';\n\nexport interface DialogProps {\n  open: boolean;\n  onClose?: () => void;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  footer?: ReactNode;\n  'aria-label'?: string;\n  width?: number;\n}\n\n/** Modal dialog with overlay, Esc/backdrop close, and a footer action bar. */\nexport function Dialog({ open, onClose, title, description, children, footer, 'aria-label': ariaLabel, width = 460 }: DialogProps) {\n  const titleId = useId();\n  useEffect(() => {\n    if (!open) return undefined;\n    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose?.(); };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [open, onClose]);\n  if (!open) return null;\n  return (\n    <div onClick={onClose} style={{\n      position: 'fixed', inset: 0, zIndex: 100, display: 'grid', placeItems: 'center', padding: 20,\n      background: 'color-mix(in srgb, var(--dt-ink-strong) 32%, transparent)',\n      backdropFilter: 'blur(2px)', animation: 'dt-fade 160ms var(--dt-ease)',\n    }}>\n      <div\n        role=\"dialog\" aria-modal=\"true\" onClick={(event) => event.stopPropagation()}\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel}\n        style={{\n          width: '100%', maxWidth: width, background: 'var(--dt-surface)',\n          borderRadius: 'var(--dt-radius-lg)', boxShadow: 'var(--dt-shadow-xl)',\n          animation: 'dt-pop 200ms var(--dt-ease)', overflow: 'hidden',\n        }}\n      >\n        <div style={{ padding: '22px 24px' }}>\n          {title ? <h3 id={titleId} style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--dt-ink-strong)' }}>{title}</h3> : null}\n          {description ? <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.55, color: 'var(--dt-muted-strong)' }}>{description}</p> : null}\n          {children ? <div style={{ marginTop: title || description ? 16 : 0 }}>{children}</div> : null}\n        </div>\n        {footer ? <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: '14px 24px', background: 'var(--dt-surface-sunken)' }}>{footer}</div> : null}\n      </div>\n      <style>{`@keyframes dt-fade{from{opacity:0}}@keyframes dt-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}`}</style>\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Dialog.d.cts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface DialogProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    'aria-label'?: string;
+    width?: number;
+}
+/** Modal dialog with overlay, Esc/backdrop close, and a footer action bar. */
+declare function Dialog({ open, onClose, title, description, children, footer, 'aria-label': ariaLabel, width }: DialogProps): react.JSX.Element | null;
+
+export { Dialog, type DialogProps };

package/dist/components/feedback/Dialog.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface DialogProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    'aria-label'?: string;
+    width?: number;
+}
+/** Modal dialog with overlay, Esc/backdrop close, and a footer action bar. */
+declare function Dialog({ open, onClose, title, description, children, footer, 'aria-label': ariaLabel, width }: DialogProps): react.JSX.Element | null;
+
+export { Dialog, type DialogProps };

package/dist/components/feedback/Dialog.mjs

@@ -0,0 +1,60 @@
+import { useId, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Dialog.tsx
+function Dialog({ open, onClose, title, description, children, footer, "aria-label": ariaLabel, width = 460 }) {
+  const titleId = useId();
+  useEffect(() => {
+    if (!open) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { onClick: onClose, style: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 100,
+    display: "grid",
+    placeItems: "center",
+    padding: 20,
+    background: "color-mix(in srgb, var(--dt-ink-strong) 32%, transparent)",
+    backdropFilter: "blur(2px)",
+    animation: "dt-fade 160ms var(--dt-ease)"
+  }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        onClick: (event) => event.stopPropagation(),
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
+        style: {
+          width: "100%",
+          maxWidth: width,
+          background: "var(--dt-surface)",
+          borderRadius: "var(--dt-radius-lg)",
+          boxShadow: "var(--dt-shadow-xl)",
+          animation: "dt-pop 200ms var(--dt-ease)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { padding: "22px 24px" }, children: [
+            title ? /* @__PURE__ */ jsx("h3", { id: titleId, style: { fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+            description ? /* @__PURE__ */ jsx("p", { style: { marginTop: 8, fontSize: 14, lineHeight: 1.55, color: "var(--dt-muted-strong)" }, children: description }) : null,
+            children ? /* @__PURE__ */ jsx("div", { style: { marginTop: title || description ? 16 : 0 }, children }) : null
+          ] }),
+          footer ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, padding: "14px 24px", background: "var(--dt-surface-sunken)" }, children: footer }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `@keyframes dt-fade{from{opacity:0}}@keyframes dt-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}` })
+  ] });
+}
+
+export { Dialog };
+//# sourceMappingURL=Dialog.mjs.map
+//# sourceMappingURL=Dialog.mjs.map

package/dist/components/feedback/Dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Dialog.tsx"],"names":[],"mappings":"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","file":"Dialog.mjs","sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect, useId } from 'react';\n\nexport interface DialogProps {\n  open: boolean;\n  onClose?: () => void;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  footer?: ReactNode;\n  'aria-label'?: string;\n  width?: number;\n}\n\n/** Modal dialog with overlay, Esc/backdrop close, and a footer action bar. */\nexport function Dialog({ open, onClose, title, description, children, footer, 'aria-label': ariaLabel, width = 460 }: DialogProps) {\n  const titleId = useId();\n  useEffect(() => {\n    if (!open) return undefined;\n    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose?.(); };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [open, onClose]);\n  if (!open) return null;\n  return (\n    <div onClick={onClose} style={{\n      position: 'fixed', inset: 0, zIndex: 100, display: 'grid', placeItems: 'center', padding: 20,\n      background: 'color-mix(in srgb, var(--dt-ink-strong) 32%, transparent)',\n      backdropFilter: 'blur(2px)', animation: 'dt-fade 160ms var(--dt-ease)',\n    }}>\n      <div\n        role=\"dialog\" aria-modal=\"true\" onClick={(event) => event.stopPropagation()}\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel}\n        style={{\n          width: '100%', maxWidth: width, background: 'var(--dt-surface)',\n          borderRadius: 'var(--dt-radius-lg)', boxShadow: 'var(--dt-shadow-xl)',\n          animation: 'dt-pop 200ms var(--dt-ease)', overflow: 'hidden',\n        }}\n      >\n        <div style={{ padding: '22px 24px' }}>\n          {title ? <h3 id={titleId} style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--dt-ink-strong)' }}>{title}</h3> : null}\n          {description ? <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.55, color: 'var(--dt-muted-strong)' }}>{description}</p> : null}\n          {children ? <div style={{ marginTop: title || description ? 16 : 0 }}>{children}</div> : null}\n        </div>\n        {footer ? <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: '14px 24px', background: 'var(--dt-surface-sunken)' }}>{footer}</div> : null}\n      </div>\n      <style>{`@keyframes dt-fade{from{opacity:0}}@keyframes dt-pop{from{opacity:0;transform:translateY(8px) scale(.98)}}`}</style>\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Drawer.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/Drawer.tsx
+function Drawer({ open = false, side = "right", title, children, footer, onClose, width = 420, style, "aria-label": ariaLabel }) {
+  const titleId = react.useId();
+  if (!open) return null;
+  const fromRight = side === "right";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "absolute", inset: 0, zIndex: 40, display: "flex", justifyContent: fromRight ? "flex-end" : "flex-start" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onClose, style: { position: "absolute", inset: 0, background: "rgba(24,22,18,0.32)" } }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel || "pane",
+        style: {
+          position: "relative",
+          width,
+          maxWidth: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          background: "var(--dt-surface)",
+          boxShadow: "var(--dt-shadow-xl)",
+          borderLeft: fromRight ? "1px solid var(--dt-border-strong)" : "none",
+          borderRight: fromRight ? "none" : "1px solid var(--dt-border-strong)",
+          fontFamily: "var(--dt-font-sans)",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", borderBottom: "1px solid var(--dt-border)" }, children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { id: titleId, style: { margin: 0, flex: 1, minWidth: 0, fontSize: 16, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "\uB2EB\uAE30",
+                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: "16", height: "16", 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.jsx("div", { style: { flex: 1, overflowY: "auto", padding: 18 }, children }),
+          footer ? /* @__PURE__ */ jsxRuntime.jsx("footer", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderTop: "1px solid var(--dt-border)" }, children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.cjs.map
+//# sourceMappingURL=Drawer.cjs.map

package/dist/components/feedback/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Drawer.tsx"],"names":["useId","jsx","jsxs"],"mappings":"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","file":"Drawer.cjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\n\nexport interface DrawerProps {\n  open?: boolean;\n  side?: 'right' | 'left';\n  title?: string;\n  children?: ReactNode;\n  footer?: ReactNode;\n  onClose?: () => void;\n  width?: number;\n  style?: CSSProperties;\n  'aria-label'?: string;\n}\n\n/**\n * Side sheet over a scrim for secondary flows — floats (shadow) but stays flat inside.\n * Render inside a positioned container (the panel fills its height).\n * @startingPoint section=\"Feedback\" subtitle=\"Side sheet over a scrim\" viewport=\"560x420\"\n */\nexport function Drawer({ open = false, side = 'right', title, children, footer, onClose, width = 420, style, 'aria-label': ariaLabel }: DrawerProps) {\n  const titleId = useId();\n  if (!open) return null;\n  const fromRight = side === 'right';\n  return (\n    <div style={{ position: 'absolute', inset: 0, zIndex: 40, display: 'flex', justifyContent: fromRight ? 'flex-end' : 'flex-start' }}>\n      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(24,22,18,0.32)' }} />\n      <aside\n        role=\"dialog\" aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel || 'pane'}\n        style={{\n          position: 'relative', width, maxWidth: '100%', height: '100%', display: 'flex', flexDirection: 'column',\n          background: 'var(--dt-surface)', boxShadow: 'var(--dt-shadow-xl)',\n          borderLeft: fromRight ? '1px solid var(--dt-border-strong)' : 'none',\n          borderRight: fromRight ? 'none' : '1px solid var(--dt-border-strong)',\n          fontFamily: 'var(--dt-font-sans)', ...style,\n        }}\n      >\n        <header style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', borderBottom: '1px solid var(--dt-border)' }}>\n          {title ? <h3 id={titleId} style={{ margin: 0, flex: 1, minWidth: 0, fontSize: 16, fontWeight: 650, letterSpacing: '-0.01em', color: 'var(--dt-ink-strong)' }}>{title}</h3> : null}\n          <button\n            type=\"button\" onClick={onClose} aria-label=\"닫기\"\n            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' }}\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n          </button>\n        </header>\n        <div style={{ flex: 1, overflowY: 'auto', padding: 18 }}>{children}</div>\n        {footer ? <footer style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 18px', borderTop: '1px solid var(--dt-border)' }}>{footer}</footer> : null}\n      </aside>\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Drawer.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface DrawerProps {
+    open?: boolean;
+    side?: 'right' | 'left';
+    title?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onClose?: () => void;
+    width?: number;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Side sheet over a scrim for secondary flows — floats (shadow) but stays flat inside.
+ * Render inside a positioned container (the panel fills its height).
+ * @startingPoint section="Feedback" subtitle="Side sheet over a scrim" viewport="560x420"
+ */
+declare function Drawer({ open, side, title, children, footer, onClose, width, style, 'aria-label': ariaLabel }: DrawerProps): react.JSX.Element | null;
+
+export { Drawer, type DrawerProps };

package/dist/components/feedback/Drawer.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface DrawerProps {
+    open?: boolean;
+    side?: 'right' | 'left';
+    title?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onClose?: () => void;
+    width?: number;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Side sheet over a scrim for secondary flows — floats (shadow) but stays flat inside.
+ * Render inside a positioned container (the panel fills its height).
+ * @startingPoint section="Feedback" subtitle="Side sheet over a scrim" viewport="560x420"
+ */
+declare function Drawer({ open, side, title, children, footer, onClose, width, style, 'aria-label': ariaLabel }: DrawerProps): react.JSX.Element | null;
+
+export { Drawer, type DrawerProps };

package/dist/components/feedback/Drawer.mjs

@@ -0,0 +1,56 @@
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Drawer.tsx
+function Drawer({ open = false, side = "right", title, children, footer, onClose, width = 420, style, "aria-label": ariaLabel }) {
+  const titleId = useId();
+  if (!open) return null;
+  const fromRight = side === "right";
+  return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0, zIndex: 40, display: "flex", justifyContent: fromRight ? "flex-end" : "flex-start" }, children: [
+    /* @__PURE__ */ jsx("div", { onClick: onClose, style: { position: "absolute", inset: 0, background: "rgba(24,22,18,0.32)" } }),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel || "pane",
+        style: {
+          position: "relative",
+          width,
+          maxWidth: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          background: "var(--dt-surface)",
+          boxShadow: "var(--dt-shadow-xl)",
+          borderLeft: fromRight ? "1px solid var(--dt-border-strong)" : "none",
+          borderRight: fromRight ? "none" : "1px solid var(--dt-border-strong)",
+          fontFamily: "var(--dt-font-sans)",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", borderBottom: "1px solid var(--dt-border)" }, children: [
+            title ? /* @__PURE__ */ jsx("h3", { id: titleId, style: { margin: 0, flex: 1, minWidth: 0, fontSize: 16, fontWeight: 650, letterSpacing: "-0.01em", color: "var(--dt-ink-strong)" }, children: title }) : null,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "\uB2EB\uAE30",
+                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: "16", height: "16", 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__ */ jsx("div", { style: { flex: 1, overflowY: "auto", padding: 18 }, children }),
+          footer ? /* @__PURE__ */ jsx("footer", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderTop: "1px solid var(--dt-border)" }, children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+
+export { Drawer };
+//# sourceMappingURL=Drawer.mjs.map
+//# sourceMappingURL=Drawer.mjs.map

package/dist/components/feedback/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Drawer.tsx"],"names":[],"mappings":"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","file":"Drawer.mjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { useId } from 'react';\n\nexport interface DrawerProps {\n  open?: boolean;\n  side?: 'right' | 'left';\n  title?: string;\n  children?: ReactNode;\n  footer?: ReactNode;\n  onClose?: () => void;\n  width?: number;\n  style?: CSSProperties;\n  'aria-label'?: string;\n}\n\n/**\n * Side sheet over a scrim for secondary flows — floats (shadow) but stays flat inside.\n * Render inside a positioned container (the panel fills its height).\n * @startingPoint section=\"Feedback\" subtitle=\"Side sheet over a scrim\" viewport=\"560x420\"\n */\nexport function Drawer({ open = false, side = 'right', title, children, footer, onClose, width = 420, style, 'aria-label': ariaLabel }: DrawerProps) {\n  const titleId = useId();\n  if (!open) return null;\n  const fromRight = side === 'right';\n  return (\n    <div style={{ position: 'absolute', inset: 0, zIndex: 40, display: 'flex', justifyContent: fromRight ? 'flex-end' : 'flex-start' }}>\n      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(24,22,18,0.32)' }} />\n      <aside\n        role=\"dialog\" aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel || 'pane'}\n        style={{\n          position: 'relative', width, maxWidth: '100%', height: '100%', display: 'flex', flexDirection: 'column',\n          background: 'var(--dt-surface)', boxShadow: 'var(--dt-shadow-xl)',\n          borderLeft: fromRight ? '1px solid var(--dt-border-strong)' : 'none',\n          borderRight: fromRight ? 'none' : '1px solid var(--dt-border-strong)',\n          fontFamily: 'var(--dt-font-sans)', ...style,\n        }}\n      >\n        <header style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', borderBottom: '1px solid var(--dt-border)' }}>\n          {title ? <h3 id={titleId} style={{ margin: 0, flex: 1, minWidth: 0, fontSize: 16, fontWeight: 650, letterSpacing: '-0.01em', color: 'var(--dt-ink-strong)' }}>{title}</h3> : null}\n          <button\n            type=\"button\" onClick={onClose} aria-label=\"닫기\"\n            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' }}\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n          </button>\n        </header>\n        <div style={{ flex: 1, overflowY: 'auto', padding: 18 }}>{children}</div>\n        {footer ? <footer style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 18px', borderTop: '1px solid var(--dt-border)' }}>{footer}</footer> : null}\n      </aside>\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/EmptyState.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/EmptyState.tsx
+function EmptyState({ icon, title, description, action, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    display: "grid",
+    placeItems: "center",
+    gap: 10,
+    textAlign: "center",
+    padding: "40px 24px",
+    borderRadius: "var(--dt-radius-lg)",
+    background: "var(--dt-surface-sunken)",
+    ...style
+  }, children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+      display: "inline-flex",
+      width: 44,
+      height: 44,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "var(--dt-radius-md)",
+      background: "var(--dt-surface)",
+      color: "var(--dt-muted)",
+      boxShadow: "var(--dt-ring), var(--dt-shadow-xs)"
+    }, children: icon }) : null,
+    title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 15, fontWeight: 650, color: "var(--dt-ink-strong)" }, children: title }) : null,
+    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, lineHeight: 1.55, color: "var(--dt-muted)", maxWidth: 320 }, children: description }) : null,
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 6 }, children: action }) : null
+  ] });
+}
+
+exports.EmptyState = EmptyState;
+//# sourceMappingURL=EmptyState.cjs.map
+//# sourceMappingURL=EmptyState.cjs.map

package/dist/components/feedback/EmptyState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/EmptyState.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAWO,SAAS,WAAW,EAAE,IAAA,EAAM,OAAO,WAAA,EAAa,MAAA,EAAQ,OAAM,EAAoB;AACvF,EAAA,uBACEA,eAAA,CAAC,SAAI,KAAA,EAAO;AAAA,IACV,OAAA,EAAS,MAAA;AAAA,IAAQ,UAAA,EAAY,QAAA;AAAA,IAAU,GAAA,EAAK,EAAA;AAAA,IAAI,SAAA,EAAW,QAAA;AAAA,IAC3D,OAAA,EAAS,WAAA;AAAA,IAAa,YAAA,EAAc,qBAAA;AAAA,IACpC,UAAA,EAAY,0BAAA;AAAA,IAA4B,GAAG;AAAA,GAC7C,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,mBACCC,cAAA,CAAC,UAAK,KAAA,EAAO;AAAA,MACX,OAAA,EAAS,aAAA;AAAA,MAAe,KAAA,EAAO,EAAA;AAAA,MAAI,MAAA,EAAQ,EAAA;AAAA,MAAI,UAAA,EAAY,QAAA;AAAA,MAAU,cAAA,EAAgB,QAAA;AAAA,MACrF,YAAA,EAAc,qBAAA;AAAA,MAAuB,UAAA,EAAY,mBAAA;AAAA,MAAqB,KAAA,EAAO,iBAAA;AAAA,MAC7E,SAAA,EAAW;AAAA,KACb,EAAI,gBAAK,CAAA,GACP,IAAA;AAAA,IACH,KAAA,mBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,sBAAA,EAAuB,EAAI,iBAAM,CAAA,GAAS,IAAA;AAAA,IACtG,WAAA,mBAAcA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,IAAA,EAAM,OAAO,iBAAA,EAAmB,QAAA,EAAU,GAAA,EAAI,EAAI,uBAAY,CAAA,GAAS,IAAA;AAAA,IAC7H,MAAA,kCAAU,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAE,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAS;AAAA,GAAA,EAC3D,CAAA;AAEJ","file":"EmptyState.cjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nexport interface EmptyStateProps {\n  icon?: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  style?: CSSProperties;\n}\n\n/** Empty state for lists/tables — quiet icon, title, guidance, action. */\nexport function EmptyState({ icon, title, description, action, style }: EmptyStateProps) {\n  return (\n    <div style={{\n      display: 'grid', placeItems: 'center', gap: 10, textAlign: 'center',\n      padding: '40px 24px', borderRadius: 'var(--dt-radius-lg)',\n      background: 'var(--dt-surface-sunken)', ...style,\n    }}>\n      {icon ? (\n        <span style={{\n          display: 'inline-flex', width: 44, height: 44, alignItems: 'center', justifyContent: 'center',\n          borderRadius: 'var(--dt-radius-md)', background: 'var(--dt-surface)', color: 'var(--dt-muted)',\n          boxShadow: 'var(--dt-ring), var(--dt-shadow-xs)',\n        }}>{icon}</span>\n      ) : null}\n      {title ? <div style={{ fontSize: 15, fontWeight: 650, color: 'var(--dt-ink-strong)' }}>{title}</div> : null}\n      {description ? <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--dt-muted)', maxWidth: 320 }}>{description}</div> : null}\n      {action ? <div style={{ marginTop: 6 }}>{action}</div> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/EmptyState.d.cts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    style?: CSSProperties;
+}
+/** Empty state for lists/tables — quiet icon, title, guidance, action. */
+declare function EmptyState({ icon, title, description, action, style }: EmptyStateProps): react.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/feedback/EmptyState.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    style?: CSSProperties;
+}
+/** Empty state for lists/tables — quiet icon, title, guidance, action. */
+declare function EmptyState({ icon, title, description, action, style }: EmptyStateProps): react.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/feedback/EmptyState.mjs

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/EmptyState.tsx
+function EmptyState({ icon, title, description, action, style }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "grid",
+    placeItems: "center",
+    gap: 10,
+    textAlign: "center",
+    padding: "40px 24px",
+    borderRadius: "var(--dt-radius-lg)",
+    background: "var(--dt-surface-sunken)",
+    ...style
+  }, children: [
+    icon ? /* @__PURE__ */ jsx("span", { style: {
+      display: "inline-flex",
+      width: 44,
+      height: 44,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "var(--dt-radius-md)",
+      background: "var(--dt-surface)",
+      color: "var(--dt-muted)",
+      boxShadow: "var(--dt-ring), var(--dt-shadow-xs)"
+    }, children: icon }) : null,
+    title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 15, fontWeight: 650, color: "var(--dt-ink-strong)" }, children: title }) : null,
+    description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, lineHeight: 1.55, color: "var(--dt-muted)", maxWidth: 320 }, children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { style: { marginTop: 6 }, children: action }) : null
+  ] });
+}
+
+export { EmptyState };
+//# sourceMappingURL=EmptyState.mjs.map
+//# sourceMappingURL=EmptyState.mjs.map

package/dist/components/feedback/EmptyState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/EmptyState.tsx"],"names":[],"mappings":";;;AAWO,SAAS,WAAW,EAAE,IAAA,EAAM,OAAO,WAAA,EAAa,MAAA,EAAQ,OAAM,EAAoB;AACvF,EAAA,uBACE,IAAA,CAAC,SAAI,KAAA,EAAO;AAAA,IACV,OAAA,EAAS,MAAA;AAAA,IAAQ,UAAA,EAAY,QAAA;AAAA,IAAU,GAAA,EAAK,EAAA;AAAA,IAAI,SAAA,EAAW,QAAA;AAAA,IAC3D,OAAA,EAAS,WAAA;AAAA,IAAa,YAAA,EAAc,qBAAA;AAAA,IACpC,UAAA,EAAY,0BAAA;AAAA,IAA4B,GAAG;AAAA,GAC7C,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,mBACC,GAAA,CAAC,UAAK,KAAA,EAAO;AAAA,MACX,OAAA,EAAS,aAAA;AAAA,MAAe,KAAA,EAAO,EAAA;AAAA,MAAI,MAAA,EAAQ,EAAA;AAAA,MAAI,UAAA,EAAY,QAAA;AAAA,MAAU,cAAA,EAAgB,QAAA;AAAA,MACrF,YAAA,EAAc,qBAAA;AAAA,MAAuB,UAAA,EAAY,mBAAA;AAAA,MAAqB,KAAA,EAAO,iBAAA;AAAA,MAC7E,SAAA,EAAW;AAAA,KACb,EAAI,gBAAK,CAAA,GACP,IAAA;AAAA,IACH,KAAA,mBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,sBAAA,EAAuB,EAAI,iBAAM,CAAA,GAAS,IAAA;AAAA,IACtG,WAAA,mBAAc,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,IAAA,EAAM,OAAO,iBAAA,EAAmB,QAAA,EAAU,GAAA,EAAI,EAAI,uBAAY,CAAA,GAAS,IAAA;AAAA,IAC7H,MAAA,uBAAU,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAE,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAS;AAAA,GAAA,EAC3D,CAAA;AAEJ","file":"EmptyState.mjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nexport interface EmptyStateProps {\n  icon?: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  style?: CSSProperties;\n}\n\n/** Empty state for lists/tables — quiet icon, title, guidance, action. */\nexport function EmptyState({ icon, title, description, action, style }: EmptyStateProps) {\n  return (\n    <div style={{\n      display: 'grid', placeItems: 'center', gap: 10, textAlign: 'center',\n      padding: '40px 24px', borderRadius: 'var(--dt-radius-lg)',\n      background: 'var(--dt-surface-sunken)', ...style,\n    }}>\n      {icon ? (\n        <span style={{\n          display: 'inline-flex', width: 44, height: 44, alignItems: 'center', justifyContent: 'center',\n          borderRadius: 'var(--dt-radius-md)', background: 'var(--dt-surface)', color: 'var(--dt-muted)',\n          boxShadow: 'var(--dt-ring), var(--dt-shadow-xs)',\n        }}>{icon}</span>\n      ) : null}\n      {title ? <div style={{ fontSize: 15, fontWeight: 650, color: 'var(--dt-ink-strong)' }}>{title}</div> : null}\n      {description ? <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--dt-muted)', maxWidth: 320 }}>{description}</div> : null}\n      {action ? <div style={{ marginTop: 6 }}>{action}</div> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Skeleton.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/Skeleton.tsx
+function Skeleton({ width = "100%", height = 14, radius = "var(--dt-radius-sm)", style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-skeleton", style: {
+    display: "block",
+    width,
+    height,
+    borderRadius: radius,
+    background: "var(--dt-surface-sunken)",
+    ...style
+  } });
+}
+
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=Skeleton.cjs.map
+//# sourceMappingURL=Skeleton.cjs.map

package/dist/components/feedback/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Skeleton.tsx"],"names":["jsx"],"mappings":";;;;;AASO,SAAS,QAAA,CAAS,EAAE,KAAA,GAAQ,MAAA,EAAQ,SAAS,EAAA,EAAI,MAAA,GAAS,qBAAA,EAAuB,KAAA,EAAM,EAAkB;AAC9G,EAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO;AAAA,IACnC,OAAA,EAAS,OAAA;AAAA,IAAS,KAAA;AAAA,IAAO,MAAA;AAAA,IAAQ,YAAA,EAAc,MAAA;AAAA,IAC/C,UAAA,EAAY,0BAAA;AAAA,IAA4B,GAAG;AAAA,GAC7C,EAAG,CAAA;AAEP","file":"Skeleton.cjs","sourcesContent":["import type { CSSProperties } from 'react';\n\nexport interface SkeletonProps {\n  width?: number | string;\n  height?: number | string;\n  radius?: string;\n  style?: CSSProperties;\n}\n\nexport function Skeleton({ width = '100%', height = 14, radius = 'var(--dt-radius-sm)', style }: SkeletonProps) {\n  return (\n    <span className=\"dt-skeleton\" style={{\n      display: 'block', width, height, borderRadius: radius,\n      background: 'var(--dt-surface-sunken)', ...style,\n    }} />\n  );\n}\n"]}

package/dist/components/feedback/Skeleton.d.cts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    radius?: string;
+    style?: CSSProperties;
+}
+declare function Skeleton({ width, height, radius, style }: SkeletonProps): react.JSX.Element;
+
+export { Skeleton, type SkeletonProps };

package/dist/components/feedback/Skeleton.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    radius?: string;
+    style?: CSSProperties;
+}
+declare function Skeleton({ width, height, radius, style }: SkeletonProps): react.JSX.Element;
+
+export { Skeleton, type SkeletonProps };

package/dist/components/feedback/Skeleton.mjs

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/feedback/Skeleton.tsx
+function Skeleton({ width = "100%", height = 14, radius = "var(--dt-radius-sm)", style }) {
+  return /* @__PURE__ */ jsx("span", { className: "dt-skeleton", style: {
+    display: "block",
+    width,
+    height,
+    borderRadius: radius,
+    background: "var(--dt-surface-sunken)",
+    ...style
+  } });
+}
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.mjs.map
+//# sourceMappingURL=Skeleton.mjs.map

package/dist/components/feedback/Skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Skeleton.tsx"],"names":[],"mappings":";;;AASO,SAAS,QAAA,CAAS,EAAE,KAAA,GAAQ,MAAA,EAAQ,SAAS,EAAA,EAAI,MAAA,GAAS,qBAAA,EAAuB,KAAA,EAAM,EAAkB;AAC9G,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO;AAAA,IACnC,OAAA,EAAS,OAAA;AAAA,IAAS,KAAA;AAAA,IAAO,MAAA;AAAA,IAAQ,YAAA,EAAc,MAAA;AAAA,IAC/C,UAAA,EAAY,0BAAA;AAAA,IAA4B,GAAG;AAAA,GAC7C,EAAG,CAAA;AAEP","file":"Skeleton.mjs","sourcesContent":["import type { CSSProperties } from 'react';\n\nexport interface SkeletonProps {\n  width?: number | string;\n  height?: number | string;\n  radius?: string;\n  style?: CSSProperties;\n}\n\nexport function Skeleton({ width = '100%', height = 14, radius = 'var(--dt-radius-sm)', style }: SkeletonProps) {\n  return (\n    <span className=\"dt-skeleton\" style={{\n      display: 'block', width, height, borderRadius: radius,\n      background: 'var(--dt-surface-sunken)', ...style,\n    }} />\n  );\n}\n"]}

package/dist/components/feedback/Spinner.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/feedback/Spinner.tsx
+function Spinner({ size = 18, stroke = 2, color = "var(--dt-accent)", style }) {
+  react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", ...style }, role: "status", "aria-label": "\uB85C\uB529 \uC911", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "dt-spinner-svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: stroke, style: { color: "var(--dt-border-strong)", opacity: 0.5 } }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3a9 9 0 0 1 9 9", stroke: color, strokeWidth: stroke, strokeLinecap: "round" })
+  ] }) });
+}
+
+exports.Spinner = Spinner;
+//# sourceMappingURL=Spinner.cjs.map
+//# sourceMappingURL=Spinner.cjs.map

package/dist/components/feedback/Spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/feedback/Spinner.tsx"],"names":["useId","jsx","jsxs"],"mappings":";;;;;;AAUO,SAAS,OAAA,CAAQ,EAAE,IAAA,GAAO,EAAA,EAAI,SAAS,CAAA,EAAG,KAAA,GAAQ,kBAAA,EAAoB,KAAA,EAAM,EAAiB;AAClG,EAAAA,WAAA,EAAM;AACN,EAAA,uBACEC,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,eAAe,GAAG,KAAA,EAAM,EAAG,IAAA,EAAK,QAAA,EAAS,YAAA,EAAW,uBAC1E,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EAAiB,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA,EAAM,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAClF,QAAA,EAAA;AAAA,oBAAAD,cAAA,CAAC,YAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,MAAA,EAAO,cAAA,EAAe,WAAA,EAAa,QAAQ,KAAA,EAAO,EAAE,OAAO,yBAAA,EAA2B,OAAA,EAAS,KAAI,EAAG,CAAA;AAAA,oBACpIA,cAAA,CAAC,UAAK,CAAA,EAAE,qBAAA,EAAsB,QAAQ,KAAA,EAAO,WAAA,EAAa,MAAA,EAAQ,aAAA,EAAc,OAAA,EAAQ;AAAA,GAAA,EAC1F,CAAA,EACF,CAAA;AAEJ","file":"Spinner.cjs","sourcesContent":["import type { CSSProperties } from 'react';\nimport { useId } from 'react';\n\nexport interface SpinnerProps {\n  size?: number;\n  stroke?: number;\n  color?: string;\n  style?: CSSProperties;\n}\n\nexport function Spinner({ size = 18, stroke = 2, color = 'var(--dt-accent)', style }: SpinnerProps) {\n  useId();\n  return (\n    <span style={{ display: 'inline-flex', ...style }} role=\"status\" aria-label=\"로딩 중\">\n      <svg className=\"dt-spinner-svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth={stroke} style={{ color: 'var(--dt-border-strong)', opacity: 0.5 }} />\n        <path d=\"M12 3a9 9 0 0 1 9 9\" stroke={color} strokeWidth={stroke} strokeLinecap=\"round\" />\n      </svg>\n    </span>\n  );\n}\n"]}

package/dist/components/feedback/Spinner.d.cts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+interface SpinnerProps {
+    size?: number;
+    stroke?: number;
+    color?: string;
+    style?: CSSProperties;
+}
+declare function Spinner({ size, stroke, color, style }: SpinnerProps): react.JSX.Element;
+
+export { Spinner, type SpinnerProps };