@bridger-kr/react 0.1.0

package/dist/components/data/StatTile.mjs

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/data/StatTile.tsx
+function StatTile({ label, value, delta, deltaTone = "neutral", hint, style, ...rest }) {
+  const tone = { up: "var(--dt-success)", down: "var(--dt-danger)", neutral: "var(--dt-muted)" }[deltaTone];
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: { padding: 18, minWidth: 0, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 650, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--dt-muted)" }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 8, fontSize: 25, fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--dt-ink-strong)", fontVariantNumeric: "tabular-nums" }, children: value }),
+    delta || hint ? /* @__PURE__ */ jsxs("div", { style: { marginTop: 6, display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--dt-muted)" }, children: [
+      delta ? /* @__PURE__ */ jsx("span", { style: { color: tone, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: delta }) : null,
+      hint ? /* @__PURE__ */ jsx("span", { children: hint }) : null
+    ] }) : null
+  ] });
+}
+
+export { StatTile };
+//# sourceMappingURL=StatTile.mjs.map
+//# sourceMappingURL=StatTile.mjs.map

package/dist/components/data/StatTile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/StatTile.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,SAAA,GAAY,SAAA,EAAW,IAAA,EAAM,KAAA,EAAO,GAAG,IAAA,EAAK,EAAkB;AAC5G,EAAA,MAAM,IAAA,GAAO,EAAE,EAAA,EAAI,mBAAA,EAAqB,MAAM,kBAAA,EAAoB,OAAA,EAAS,iBAAA,EAAkB,CAAE,SAAS,CAAA;AAExG,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,CAAA,EAAG,GAAG,KAAA,EAAM,EACzD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,GAAA,EAAK,aAAA,EAAe,QAAA,EAAU,aAAA,EAAe,WAAA,EAAa,KAAA,EAAO,iBAAA,IAAsB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACpI,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAG,UAAU,EAAA,EAAI,UAAA,EAAY,KAAK,UAAA,EAAY,GAAA,EAAK,eAAe,SAAA,EAAW,KAAA,EAAO,wBAAwB,kBAAA,EAAoB,cAAA,IAAmB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAChL,SAAS,IAAA,mBACT,IAAA,CAAC,SAAI,KAAA,EAAO,EAAE,WAAW,CAAA,EAAG,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,UAAU,GAAA,EAAK,CAAA,EAAG,UAAU,EAAA,EAAI,KAAA,EAAO,mBAAkB,EAC/G,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,UAAA,EAAY,GAAA,EAAK,kBAAA,EAAoB,cAAA,EAAe,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,GAAU,IAAA;AAAA,MAC5G,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU;AAAA,KAAA,EAChC,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ","file":"StatTile.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface StatTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  label: ReactNode;\n  value: ReactNode;\n  /** e.g. \"+8.4%\". */\n  delta?: ReactNode;\n  deltaTone?: 'up' | 'down' | 'neutral';\n  hint?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * Metric tile — uppercase label, large tabular value, optional delta.\n * The console's KPI unit. Compose several inside a bordered stat row.\n */\nexport function StatTile({ label, value, delta, deltaTone = 'neutral', hint, style, ...rest }: StatTileProps) {\n  const tone = { up: 'var(--dt-success)', down: 'var(--dt-danger)', neutral: 'var(--dt-muted)' }[deltaTone];\n\n  return (\n    <div {...rest} style={{ padding: 18, minWidth: 0, ...style }}>\n      <div style={{ fontSize: 11, fontWeight: 650, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--dt-muted)' }}>{label}</div>\n      <div style={{ marginTop: 8, fontSize: 25, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--dt-ink-strong)', fontVariantNumeric: 'tabular-nums' }}>{value}</div>\n      {(delta || hint) ? (\n        <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--dt-muted)' }}>\n          {delta ? <span style={{ color: tone, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{delta}</span> : null}\n          {hint ? <span>{hint}</span> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/data/Table.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/Table.tsx
+function Table({ columns = [], rows = [], rowKey, onRowClick, empty, style, ...rest }) {
+  if (!rows.length && empty) return empty;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, style: { overflowX: "auto", borderRadius: "var(--dt-radius-lg)", background: "var(--dt-surface)", boxShadow: "var(--dt-ring), var(--dt-shadow-xs)", ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", color: "var(--dt-ink)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { style: { background: "var(--dt-surface-muted)" }, children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
+        textAlign: column.align || "left",
+        padding: "11px 18px",
+        fontFamily: "var(--dt-font-mono)",
+        fontSize: 11,
+        fontWeight: 600,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        color: "var(--dt-muted)",
+        borderBottom: "1px solid var(--dt-divider)",
+        whiteSpace: "nowrap"
+      }, children: column.header }, column.key)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          className: "dt-tr",
+          style: { cursor: onRowClick ? "pointer" : "default" },
+          children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
+            textAlign: column.align || "left",
+            padding: "13px 18px",
+            fontSize: 13,
+            borderBottom: "1px solid var(--dt-divider)",
+            whiteSpace: column.nowrap ? "nowrap" : "normal"
+          }, children: column.render ? column.render(row[column.key], row) : row[column.key] }, column.key))
+        },
+        rowKey ? rowKey(row, rowIndex) : rowIndex
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.dt-tr{transition:background-color 130ms}.dt-tr:hover{background:var(--dt-surface-muted)}tbody tr:last-child td{border-bottom:0}` })
+  ] });
+}
+
+exports.Table = Table;
+//# sourceMappingURL=Table.cjs.map
+//# sourceMappingURL=Table.cjs.map

package/dist/components/data/Table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/Table.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AA0BO,SAAS,KAAA,CAAuC,EAAE,OAAA,GAAU,IAAI,IAAA,GAAO,EAAC,EAAG,MAAA,EAAQ,UAAA,EAAY,KAAA,EAAO,KAAA,EAAO,GAAG,MAAK,EAAoB;AAC9I,EAAA,IAAI,CAAC,IAAA,CAAK,MAAA,IAAU,KAAA,EAAO,OAAO,KAAA;AAElC,EAAA,uCACG,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,EAAQ,YAAA,EAAc,qBAAA,EAAuB,YAAY,mBAAA,EAAqB,SAAA,EAAW,qCAAA,EAAuC,GAAG,OAAM,EAC1K,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,OAAA,EAAA,EAAM,OAAO,EAAE,KAAA,EAAO,QAAQ,cAAA,EAAgB,UAAA,EAAY,KAAA,EAAO,eAAA,EAAgB,EAChF,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,UAAA,EAAY,yBAAA,EAA0B,EAChD,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZA,cAAA,CAAC,QAAoB,KAAA,EAAO;AAAA,QAC1B,SAAA,EAAW,OAAO,KAAA,IAAS,MAAA;AAAA,QAAQ,OAAA,EAAS,WAAA;AAAA,QAC5C,UAAA,EAAY,qBAAA;AAAA,QAAuB,QAAA,EAAU,EAAA;AAAA,QAAI,UAAA,EAAY,GAAA;AAAA,QAC7D,aAAA,EAAe,QAAA;AAAA,QAAU,aAAA,EAAe,WAAA;AAAA,QAAa,KAAA,EAAO,iBAAA;AAAA,QAC5D,YAAA,EAAc,6BAAA;AAAA,QAA+B,UAAA,EAAY;AAAA,SACvD,QAAA,EAAA,MAAA,CAAO,MAAA,EAAA,EALF,OAAO,GAKE,CACnB,GACH,CAAA,EACF,CAAA;AAAA,qCACC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,KAAK,QAAA,qBACdA,cAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,UAAA,GAAa,MAAM,UAAA,CAAW,GAAG,CAAA,GAAI,MAAA;AAAA,UAC9C,SAAA,EAAU,OAAA;AAAA,UACV,KAAA,EAAO,EAAE,MAAA,EAAQ,UAAA,GAAa,YAAY,SAAA,EAAU;AAAA,UACnD,kBAAQ,GAAA,CAAI,CAAC,MAAA,qBACZA,cAAA,CAAC,QAAoB,KAAA,EAAO;AAAA,YAC1B,SAAA,EAAW,OAAO,KAAA,IAAS,MAAA;AAAA,YAAQ,OAAA,EAAS,WAAA;AAAA,YAAa,QAAA,EAAU,EAAA;AAAA,YACnE,YAAA,EAAc,6BAAA;AAAA,YAA+B,UAAA,EAAY,MAAA,CAAO,MAAA,GAAS,QAAA,GAAW;AAAA,aAClF,QAAA,EAAA,MAAA,CAAO,MAAA,GAAS,MAAA,CAAO,MAAA,CAAO,IAAI,MAAA,CAAO,GAAG,CAAA,EAAG,GAAG,IAAI,GAAA,CAAI,MAAA,CAAO,GAAG,CAAA,EAAA,EAH/D,MAAA,CAAO,GAG0D,CAC3E;AAAA,SAAA;AAAA,QATM,MAAA,GAAS,MAAA,CAAO,GAAA,EAAK,QAAQ,CAAA,GAAI;AAAA,OAW3C,CAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,oBACAA,cAAA,CAAC,WAAO,QAAA,EAAA,CAAA,gIAAA,CAAA,EAAmI;AAAA,GAAA,EAC7I,CAAA;AAEJ","file":"Table.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport type TableAlign = 'left' | 'center' | 'right';\nexport type TableRow = Record<string, ReactNode>;\n\nexport interface TableColumn<Row extends TableRow = TableRow> {\n  key: Extract<keyof Row, string>;\n  header: ReactNode;\n  align?: TableAlign;\n  nowrap?: boolean;\n  render?: (value: Row[Extract<keyof Row, string>], row: Row) => ReactNode;\n}\n\nexport interface TableProps<Row extends TableRow = TableRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {\n  columns?: Array<TableColumn<Row>>;\n  rows?: Row[];\n  rowKey?: (row: Row, index: number) => string | number;\n  onRowClick?: (row: Row) => void;\n  empty?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * Data table — scannable, dense, hairline-divided. Columns define header,\n * alignment, and an optional cell renderer. Built for comparison, not decoration.\n */\nexport function Table<Row extends TableRow = TableRow>({ columns = [], rows = [], rowKey, onRowClick, empty, style, ...rest }: TableProps<Row>) {\n  if (!rows.length && empty) return empty;\n\n  return (\n    <div {...rest} style={{ overflowX: 'auto', borderRadius: 'var(--dt-radius-lg)', background: 'var(--dt-surface)', boxShadow: 'var(--dt-ring), var(--dt-shadow-xs)', ...style }}>\n      <table style={{ width: '100%', borderCollapse: 'collapse', color: 'var(--dt-ink)' }}>\n        <thead>\n          <tr style={{ background: 'var(--dt-surface-muted)' }}>\n            {columns.map((column) => (\n              <th key={column.key} style={{\n                textAlign: column.align || 'left', padding: '11px 18px',\n                fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600,\n                letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--dt-muted)',\n                borderBottom: '1px solid var(--dt-divider)', whiteSpace: 'nowrap',\n              }}>{column.header}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <tr key={rowKey ? rowKey(row, rowIndex) : rowIndex}\n              onClick={onRowClick ? () => onRowClick(row) : undefined}\n              className=\"dt-tr\"\n              style={{ cursor: onRowClick ? 'pointer' : 'default' }}>\n              {columns.map((column) => (\n                <td key={column.key} style={{\n                  textAlign: column.align || 'left', padding: '13px 18px', fontSize: 13,\n                  borderBottom: '1px solid var(--dt-divider)', whiteSpace: column.nowrap ? 'nowrap' : 'normal',\n                }}>{column.render ? column.render(row[column.key], row) : row[column.key]}</td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      <style>{`.dt-tr{transition:background-color 130ms}.dt-tr:hover{background:var(--dt-surface-muted)}tbody tr:last-child td{border-bottom:0}`}</style>\n    </div>\n  );\n}\n"]}

package/dist/components/data/Table.d.cts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
+
+type TableAlign = 'left' | 'center' | 'right';
+type TableRow = Record<string, ReactNode>;
+interface TableColumn<Row extends TableRow = TableRow> {
+    key: Extract<keyof Row, string>;
+    header: ReactNode;
+    align?: TableAlign;
+    nowrap?: boolean;
+    render?: (value: Row[Extract<keyof Row, string>], row: Row) => ReactNode;
+}
+interface TableProps<Row extends TableRow = TableRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    columns?: Array<TableColumn<Row>>;
+    rows?: Row[];
+    rowKey?: (row: Row, index: number) => string | number;
+    onRowClick?: (row: Row) => void;
+    empty?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Data table — scannable, dense, hairline-divided. Columns define header,
+ * alignment, and an optional cell renderer. Built for comparison, not decoration.
+ */
+declare function Table<Row extends TableRow = TableRow>({ columns, rows, rowKey, onRowClick, empty, style, ...rest }: TableProps<Row>): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element;
+
+export { Table, type TableAlign, type TableColumn, type TableProps, type TableRow };

package/dist/components/data/Table.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
+
+type TableAlign = 'left' | 'center' | 'right';
+type TableRow = Record<string, ReactNode>;
+interface TableColumn<Row extends TableRow = TableRow> {
+    key: Extract<keyof Row, string>;
+    header: ReactNode;
+    align?: TableAlign;
+    nowrap?: boolean;
+    render?: (value: Row[Extract<keyof Row, string>], row: Row) => ReactNode;
+}
+interface TableProps<Row extends TableRow = TableRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    columns?: Array<TableColumn<Row>>;
+    rows?: Row[];
+    rowKey?: (row: Row, index: number) => string | number;
+    onRowClick?: (row: Row) => void;
+    empty?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Data table — scannable, dense, hairline-divided. Columns define header,
+ * alignment, and an optional cell renderer. Built for comparison, not decoration.
+ */
+declare function Table<Row extends TableRow = TableRow>({ columns, rows, rowKey, onRowClick, empty, style, ...rest }: TableProps<Row>): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element;
+
+export { Table, type TableAlign, type TableColumn, type TableProps, type TableRow };

package/dist/components/data/Table.mjs

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/data/Table.tsx
+function Table({ columns = [], rows = [], rowKey, onRowClick, empty, style, ...rest }) {
+  if (!rows.length && empty) return empty;
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: { overflowX: "auto", borderRadius: "var(--dt-radius-lg)", background: "var(--dt-surface)", boxShadow: "var(--dt-ring), var(--dt-shadow-xs)", ...style }, children: [
+    /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", color: "var(--dt-ink)" }, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { style: { background: "var(--dt-surface-muted)" }, children: columns.map((column) => /* @__PURE__ */ jsx("th", { style: {
+        textAlign: column.align || "left",
+        padding: "11px 18px",
+        fontFamily: "var(--dt-font-mono)",
+        fontSize: 11,
+        fontWeight: 600,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        color: "var(--dt-muted)",
+        borderBottom: "1px solid var(--dt-divider)",
+        whiteSpace: "nowrap"
+      }, children: column.header }, column.key)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          className: "dt-tr",
+          style: { cursor: onRowClick ? "pointer" : "default" },
+          children: columns.map((column) => /* @__PURE__ */ jsx("td", { style: {
+            textAlign: column.align || "left",
+            padding: "13px 18px",
+            fontSize: 13,
+            borderBottom: "1px solid var(--dt-divider)",
+            whiteSpace: column.nowrap ? "nowrap" : "normal"
+          }, children: column.render ? column.render(row[column.key], row) : row[column.key] }, column.key))
+        },
+        rowKey ? rowKey(row, rowIndex) : rowIndex
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `.dt-tr{transition:background-color 130ms}.dt-tr:hover{background:var(--dt-surface-muted)}tbody tr:last-child td{border-bottom:0}` })
+  ] });
+}
+
+export { Table };
+//# sourceMappingURL=Table.mjs.map
+//# sourceMappingURL=Table.mjs.map

package/dist/components/data/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/Table.tsx"],"names":[],"mappings":";;;AA0BO,SAAS,KAAA,CAAuC,EAAE,OAAA,GAAU,IAAI,IAAA,GAAO,EAAC,EAAG,MAAA,EAAQ,UAAA,EAAY,KAAA,EAAO,KAAA,EAAO,GAAG,MAAK,EAAoB;AAC9I,EAAA,IAAI,CAAC,IAAA,CAAK,MAAA,IAAU,KAAA,EAAO,OAAO,KAAA;AAElC,EAAA,4BACG,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,SAAA,EAAW,MAAA,EAAQ,YAAA,EAAc,qBAAA,EAAuB,YAAY,mBAAA,EAAqB,SAAA,EAAW,qCAAA,EAAuC,GAAG,OAAM,EAC1K,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,OAAO,EAAE,KAAA,EAAO,QAAQ,cAAA,EAAgB,UAAA,EAAY,KAAA,EAAO,eAAA,EAAgB,EAChF,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,UAAA,EAAY,yBAAA,EAA0B,EAChD,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA,CAAC,QAAoB,KAAA,EAAO;AAAA,QAC1B,SAAA,EAAW,OAAO,KAAA,IAAS,MAAA;AAAA,QAAQ,OAAA,EAAS,WAAA;AAAA,QAC5C,UAAA,EAAY,qBAAA;AAAA,QAAuB,QAAA,EAAU,EAAA;AAAA,QAAI,UAAA,EAAY,GAAA;AAAA,QAC7D,aAAA,EAAe,QAAA;AAAA,QAAU,aAAA,EAAe,WAAA;AAAA,QAAa,KAAA,EAAO,iBAAA;AAAA,QAC5D,YAAA,EAAc,6BAAA;AAAA,QAA+B,UAAA,EAAY;AAAA,SACvD,QAAA,EAAA,MAAA,CAAO,MAAA,EAAA,EALF,OAAO,GAKE,CACnB,GACH,CAAA,EACF,CAAA;AAAA,0BACC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,KAAK,QAAA,qBACd,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,UAAA,GAAa,MAAM,UAAA,CAAW,GAAG,CAAA,GAAI,MAAA;AAAA,UAC9C,SAAA,EAAU,OAAA;AAAA,UACV,KAAA,EAAO,EAAE,MAAA,EAAQ,UAAA,GAAa,YAAY,SAAA,EAAU;AAAA,UACnD,kBAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA,CAAC,QAAoB,KAAA,EAAO;AAAA,YAC1B,SAAA,EAAW,OAAO,KAAA,IAAS,MAAA;AAAA,YAAQ,OAAA,EAAS,WAAA;AAAA,YAAa,QAAA,EAAU,EAAA;AAAA,YACnE,YAAA,EAAc,6BAAA;AAAA,YAA+B,UAAA,EAAY,MAAA,CAAO,MAAA,GAAS,QAAA,GAAW;AAAA,aAClF,QAAA,EAAA,MAAA,CAAO,MAAA,GAAS,MAAA,CAAO,MAAA,CAAO,IAAI,MAAA,CAAO,GAAG,CAAA,EAAG,GAAG,IAAI,GAAA,CAAI,MAAA,CAAO,GAAG,CAAA,EAAA,EAH/D,MAAA,CAAO,GAG0D,CAC3E;AAAA,SAAA;AAAA,QATM,MAAA,GAAS,MAAA,CAAO,GAAA,EAAK,QAAQ,CAAA,GAAI;AAAA,OAW3C,CAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,WAAO,QAAA,EAAA,CAAA,gIAAA,CAAA,EAAmI;AAAA,GAAA,EAC7I,CAAA;AAEJ","file":"Table.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport type TableAlign = 'left' | 'center' | 'right';\nexport type TableRow = Record<string, ReactNode>;\n\nexport interface TableColumn<Row extends TableRow = TableRow> {\n  key: Extract<keyof Row, string>;\n  header: ReactNode;\n  align?: TableAlign;\n  nowrap?: boolean;\n  render?: (value: Row[Extract<keyof Row, string>], row: Row) => ReactNode;\n}\n\nexport interface TableProps<Row extends TableRow = TableRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {\n  columns?: Array<TableColumn<Row>>;\n  rows?: Row[];\n  rowKey?: (row: Row, index: number) => string | number;\n  onRowClick?: (row: Row) => void;\n  empty?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * Data table — scannable, dense, hairline-divided. Columns define header,\n * alignment, and an optional cell renderer. Built for comparison, not decoration.\n */\nexport function Table<Row extends TableRow = TableRow>({ columns = [], rows = [], rowKey, onRowClick, empty, style, ...rest }: TableProps<Row>) {\n  if (!rows.length && empty) return empty;\n\n  return (\n    <div {...rest} style={{ overflowX: 'auto', borderRadius: 'var(--dt-radius-lg)', background: 'var(--dt-surface)', boxShadow: 'var(--dt-ring), var(--dt-shadow-xs)', ...style }}>\n      <table style={{ width: '100%', borderCollapse: 'collapse', color: 'var(--dt-ink)' }}>\n        <thead>\n          <tr style={{ background: 'var(--dt-surface-muted)' }}>\n            {columns.map((column) => (\n              <th key={column.key} style={{\n                textAlign: column.align || 'left', padding: '11px 18px',\n                fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600,\n                letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--dt-muted)',\n                borderBottom: '1px solid var(--dt-divider)', whiteSpace: 'nowrap',\n              }}>{column.header}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <tr key={rowKey ? rowKey(row, rowIndex) : rowIndex}\n              onClick={onRowClick ? () => onRowClick(row) : undefined}\n              className=\"dt-tr\"\n              style={{ cursor: onRowClick ? 'pointer' : 'default' }}>\n              {columns.map((column) => (\n                <td key={column.key} style={{\n                  textAlign: column.align || 'left', padding: '13px 18px', fontSize: 13,\n                  borderBottom: '1px solid var(--dt-divider)', whiteSpace: column.nowrap ? 'nowrap' : 'normal',\n                }}>{column.render ? column.render(row[column.key], row) : row[column.key]}</td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      <style>{`.dt-tr{transition:background-color 130ms}.dt-tr:hover{background:var(--dt-surface-muted)}tbody tr:last-child td{border-bottom:0}`}</style>\n    </div>\n  );\n}\n"]}

package/dist/components/data/UsageMeter.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/UsageMeter.tsx
+function UsageMeter({ label, value = 0, max = 100, unit = "", hint, style, ...rest }) {
+  const pct = Math.min(100, Math.max(0, value / max * 100));
+  const fill = pct >= 90 ? "var(--dt-danger)" : pct >= 75 ? "var(--dt-warning)" : "var(--dt-accent)";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, style: { display: "grid", gap: 8, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }, children: [
+      label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 12.5, color: "var(--dt-ink-strong)", fontVariantNumeric: "tabular-nums" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontWeight: 700 }, children: value.toLocaleString() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--dt-muted)" }, children: [
+          " / ",
+          max.toLocaleString(),
+          unit
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", height: 8, borderRadius: "var(--dt-radius-sm)", background: "var(--dt-surface-sunken)", boxShadow: "inset 0 0 0 1px var(--dt-border-strong)", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, width: `${pct}%`, background: fill, borderRadius: "var(--dt-radius-sm)", transition: "width var(--dt-motion)" } }) }),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+exports.UsageMeter = UsageMeter;
+//# sourceMappingURL=UsageMeter.cjs.map
+//# sourceMappingURL=UsageMeter.cjs.map

package/dist/components/data/UsageMeter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/UsageMeter.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAgBO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,GAAM,GAAA,EAAK,IAAA,GAAO,EAAA,EAAI,IAAA,EAAM,KAAA,EAAO,GAAG,MAAK,EAAoB;AAC5G,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,CAAA,EAAI,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA;AAC1D,EAAA,MAAM,OAAO,GAAA,IAAO,EAAA,GAAK,kBAAA,GAAqB,GAAA,IAAO,KAAK,mBAAA,GAAsB,kBAAA;AAEhF,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,CAAA,EAAG,GAAG,KAAA,EAAM,EACxD,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,UAAA,EAAY,cAAA,EAAgB,eAAA,EAAiB,GAAA,EAAK,EAAA,EAAG,EAC7F,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQC,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,UAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,wBAAA,EAAyB,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,kCAAW,MAAA,EAAA,EAAK,CAAA;AAAA,sBACjHD,eAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,UAAA,EAAY,qBAAA,EAAuB,QAAA,EAAU,IAAA,EAAM,KAAA,EAAO,sBAAA,EAAwB,kBAAA,EAAoB,cAAA,EAAe,EAClI,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,OAAO,EAAE,UAAA,EAAY,KAAI,EAAI,QAAA,EAAA,KAAA,CAAM,gBAAe,EAAE,CAAA;AAAA,wCACtD,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,mBAAkB,EAAG,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UAAI,IAAI,cAAA,EAAe;AAAA,UAAG;AAAA,SAAA,EAAK;AAAA,OAAA,EAC5E;AAAA,KAAA,EACF,CAAA;AAAA,mCACC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,YAAY,MAAA,EAAQ,CAAA,EAAG,YAAA,EAAc,qBAAA,EAAuB,YAAY,0BAAA,EAA4B,SAAA,EAAW,yCAAA,EAA2C,QAAA,EAAU,UAAS,EACnM,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,KAAA,EAAO,CAAA,EAAG,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,EAAK,UAAA,EAAY,MAAM,YAAA,EAAc,qBAAA,EAAuB,UAAA,EAAY,wBAAA,IAA4B,CAAA,EACjK,CAAA;AAAA,IACC,IAAA,mBAAOA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,KAAA,EAAO,iBAAA,EAAkB,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU;AAAA,GAAA,EACnF,CAAA;AAEJ","file":"UsageMeter.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  label?: ReactNode;\n  value?: number;\n  max?: number;\n  /** Suffix after max, e.g. \"회/일\". */\n  unit?: string;\n  hint?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * Quota / usage bar — hairline track, persimmon fill escalating to warning/danger.\n * @startingPoint section=\"Data\" subtitle=\"Quota usage with tabular readout\" viewport=\"420x80\"\n */\nexport function UsageMeter({ label, value = 0, max = 100, unit = '', hint, style, ...rest }: UsageMeterProps) {\n  const pct = Math.min(100, Math.max(0, (value / max) * 100));\n  const fill = pct >= 90 ? 'var(--dt-danger)' : pct >= 75 ? 'var(--dt-warning)' : 'var(--dt-accent)';\n\n  return (\n    <div {...rest} style={{ display: 'grid', gap: 8, ...style }}>\n      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>\n        {label ? <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>{label}</span> : <span />}\n        <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 12.5, color: 'var(--dt-ink-strong)', fontVariantNumeric: 'tabular-nums' }}>\n          <b style={{ fontWeight: 700 }}>{value.toLocaleString()}</b>\n          <span style={{ color: 'var(--dt-muted)' }}> / {max.toLocaleString()}{unit}</span>\n        </span>\n      </div>\n      <div style={{ position: 'relative', height: 8, borderRadius: 'var(--dt-radius-sm)', background: 'var(--dt-surface-sunken)', boxShadow: 'inset 0 0 0 1px var(--dt-border-strong)', overflow: 'hidden' }}>\n        <div style={{ position: 'absolute', inset: 0, width: `${pct}%`, background: fill, borderRadius: 'var(--dt-radius-sm)', transition: 'width var(--dt-motion)' }} />\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/data/UsageMeter.d.cts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    label?: ReactNode;
+    value?: number;
+    max?: number;
+    /** Suffix after max, e.g. "회/일". */
+    unit?: string;
+    hint?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Quota / usage bar — hairline track, persimmon fill escalating to warning/danger.
+ * @startingPoint section="Data" subtitle="Quota usage with tabular readout" viewport="420x80"
+ */
+declare function UsageMeter({ label, value, max, unit, hint, style, ...rest }: UsageMeterProps): react.JSX.Element;
+
+export { UsageMeter, type UsageMeterProps };

package/dist/components/data/UsageMeter.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    label?: ReactNode;
+    value?: number;
+    max?: number;
+    /** Suffix after max, e.g. "회/일". */
+    unit?: string;
+    hint?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Quota / usage bar — hairline track, persimmon fill escalating to warning/danger.
+ * @startingPoint section="Data" subtitle="Quota usage with tabular readout" viewport="420x80"
+ */
+declare function UsageMeter({ label, value, max, unit, hint, style, ...rest }: UsageMeterProps): react.JSX.Element;
+
+export { UsageMeter, type UsageMeterProps };

package/dist/components/data/UsageMeter.mjs

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/data/UsageMeter.tsx
+function UsageMeter({ label, value = 0, max = 100, unit = "", hint, style, ...rest }) {
+  const pct = Math.min(100, Math.max(0, value / max * 100));
+  const fill = pct >= 90 ? "var(--dt-danger)" : pct >= 75 ? "var(--dt-warning)" : "var(--dt-accent)";
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: { display: "grid", gap: 8, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }, children: [
+      label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 12.5, color: "var(--dt-ink-strong)", fontVariantNumeric: "tabular-nums" }, children: [
+        /* @__PURE__ */ jsx("b", { style: { fontWeight: 700 }, children: value.toLocaleString() }),
+        /* @__PURE__ */ jsxs("span", { style: { color: "var(--dt-muted)" }, children: [
+          " / ",
+          max.toLocaleString(),
+          unit
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { position: "relative", height: 8, borderRadius: "var(--dt-radius-sm)", background: "var(--dt-surface-sunken)", boxShadow: "inset 0 0 0 1px var(--dt-border-strong)", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, width: `${pct}%`, background: fill, borderRadius: "var(--dt-radius-sm)", transition: "width var(--dt-motion)" } }) }),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+export { UsageMeter };
+//# sourceMappingURL=UsageMeter.mjs.map
+//# sourceMappingURL=UsageMeter.mjs.map

package/dist/components/data/UsageMeter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/UsageMeter.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,GAAM,GAAA,EAAK,IAAA,GAAO,EAAA,EAAI,IAAA,EAAM,KAAA,EAAO,GAAG,MAAK,EAAoB;AAC5G,EAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,CAAA,EAAI,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA;AAC1D,EAAA,MAAM,OAAO,GAAA,IAAO,EAAA,GAAK,kBAAA,GAAqB,GAAA,IAAO,KAAK,mBAAA,GAAsB,kBAAA;AAEhF,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,CAAA,EAAG,GAAG,KAAA,EAAM,EACxD,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,UAAA,EAAY,cAAA,EAAgB,eAAA,EAAiB,GAAA,EAAK,EAAA,EAAG,EAC7F,QAAA,EAAA;AAAA,MAAA,KAAA,mBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,UAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,wBAAA,EAAyB,EAAI,QAAA,EAAA,KAAA,EAAM,CAAA,uBAAW,MAAA,EAAA,EAAK,CAAA;AAAA,sBACjH,IAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,UAAA,EAAY,qBAAA,EAAuB,QAAA,EAAU,IAAA,EAAM,KAAA,EAAO,sBAAA,EAAwB,kBAAA,EAAoB,cAAA,EAAe,EAClI,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,OAAO,EAAE,UAAA,EAAY,KAAI,EAAI,QAAA,EAAA,KAAA,CAAM,gBAAe,EAAE,CAAA;AAAA,6BACtD,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,mBAAkB,EAAG,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UAAI,IAAI,cAAA,EAAe;AAAA,UAAG;AAAA,SAAA,EAAK;AAAA,OAAA,EAC5E;AAAA,KAAA,EACF,CAAA;AAAA,wBACC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,YAAY,MAAA,EAAQ,CAAA,EAAG,YAAA,EAAc,qBAAA,EAAuB,YAAY,0BAAA,EAA4B,SAAA,EAAW,yCAAA,EAA2C,QAAA,EAAU,UAAS,EACnM,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,KAAA,EAAO,CAAA,EAAG,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,EAAK,UAAA,EAAY,MAAM,YAAA,EAAc,qBAAA,EAAuB,UAAA,EAAY,wBAAA,IAA4B,CAAA,EACjK,CAAA;AAAA,IACC,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,KAAA,EAAO,iBAAA,EAAkB,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU;AAAA,GAAA,EACnF,CAAA;AAEJ","file":"UsageMeter.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  label?: ReactNode;\n  value?: number;\n  max?: number;\n  /** Suffix after max, e.g. \"회/일\". */\n  unit?: string;\n  hint?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * Quota / usage bar — hairline track, persimmon fill escalating to warning/danger.\n * @startingPoint section=\"Data\" subtitle=\"Quota usage with tabular readout\" viewport=\"420x80\"\n */\nexport function UsageMeter({ label, value = 0, max = 100, unit = '', hint, style, ...rest }: UsageMeterProps) {\n  const pct = Math.min(100, Math.max(0, (value / max) * 100));\n  const fill = pct >= 90 ? 'var(--dt-danger)' : pct >= 75 ? 'var(--dt-warning)' : 'var(--dt-accent)';\n\n  return (\n    <div {...rest} style={{ display: 'grid', gap: 8, ...style }}>\n      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>\n        {label ? <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>{label}</span> : <span />}\n        <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 12.5, color: 'var(--dt-ink-strong)', fontVariantNumeric: 'tabular-nums' }}>\n          <b style={{ fontWeight: 700 }}>{value.toLocaleString()}</b>\n          <span style={{ color: 'var(--dt-muted)' }}> / {max.toLocaleString()}{unit}</span>\n        </span>\n      </div>\n      <div style={{ position: 'relative', height: 8, borderRadius: 'var(--dt-radius-sm)', background: 'var(--dt-surface-sunken)', boxShadow: 'inset 0 0 0 1px var(--dt-border-strong)', overflow: 'hidden' }}>\n        <div style={{ position: 'absolute', inset: 0, width: `${pct}%`, background: fill, borderRadius: 'var(--dt-radius-sm)', transition: 'width var(--dt-motion)' }} />\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/feedback/Alert.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var AlertTone = {
+  Info: "info",
+  Success: "success",
+  Warning: "warning",
+  Danger: "danger"
+};
+var AlertMotion = {
+  None: "none",
+  Subtle: "subtle",
+  Pulse: "pulse"
+};
+var TONE_BACKGROUND = {
+  info: "var(--dt-status-cobalt)",
+  success: "var(--dt-status-success)",
+  warning: "var(--dt-status-warning)",
+  danger: "var(--dt-status-danger)"
+};
+function Alert({
+  tone = AlertTone.Info,
+  title,
+  children,
+  icon,
+  action,
+  motion = AlertMotion.None,
+  onDismiss,
+  className,
+  style,
+  ...rest
+}) {
+  const background = TONE_BACKGROUND[tone] ?? TONE_BACKGROUND[AlertTone.Info];
+  const motionClass = motion === AlertMotion.None ? void 0 : `dt-alert-motion-${motion}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      className: cx("dt-alert", motionClass, className),
+      style: {
+        alignItems: "flex-start",
+        background,
+        borderRadius: "20px",
+        color: "var(--dt-alert-ink)",
+        display: "flex",
+        gap: 12,
+        minHeight: 62,
+        overflow: "clip",
+        padding: "13px 15px",
+        position: "relative",
+        transition: "filter var(--dt-motion-fast), transform var(--dt-motion-fast)",
+        width: "min(100%, 380px)",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "currentColor", display: "inline-flex", flex: "0 0 auto", marginTop: 1 }, children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: "1 0 0", minWidth: 1, overflow: "clip", wordBreak: "break-word" }, children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 600, lineHeight: "normal" }, children: title }) : null,
+          children ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: title ? 3 : 0, fontSize: 13, fontWeight: 400, lineHeight: "normal" }, children }) : null,
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 10 }, children: action }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onDismiss, "aria-label": "\uB2EB\uAE30", style: { flex: "0 0 auto", border: "none", background: "transparent", cursor: "pointer", color: "currentColor", padding: 2, lineHeight: 0 }, 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: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) : null
+      ]
+    }
+  );
+}
+
+exports.Alert = Alert;
+exports.AlertMotion = AlertMotion;
+exports.AlertTone = AlertTone;
+//# sourceMappingURL=Alert.cjs.map
+//# sourceMappingURL=Alert.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/feedback/Alert.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"Alert.cjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const AlertTone = {\n  Info: 'info',\n  Success: 'success',\n  Warning: 'warning',\n  Danger: 'danger',\n} as const;\n\nexport type AlertTone = (typeof AlertTone)[keyof typeof AlertTone];\n\nexport const AlertMotion = {\n  None: 'none',\n  Subtle: 'subtle',\n  Pulse: 'pulse',\n} as const;\n\nexport type AlertMotion = (typeof AlertMotion)[keyof typeof AlertMotion];\n\nconst TONE_BACKGROUND = {\n  info: 'var(--dt-status-cobalt)',\n  success: 'var(--dt-status-success)',\n  warning: 'var(--dt-status-warning)',\n  danger: 'var(--dt-status-danger)',\n} satisfies Record<AlertTone, string>;\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'title'> {\n  tone?: AlertTone;\n  title?: ReactNode;\n  children?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  motion?: AlertMotion;\n  onDismiss?: () => void;\n  style?: CSSProperties;\n}\n\nexport function Alert({\n  tone = AlertTone.Info,\n  title,\n  children,\n  icon,\n  action,\n  motion = AlertMotion.None,\n  onDismiss,\n  className,\n  style,\n  ...rest\n}: AlertProps) {\n  const background = TONE_BACKGROUND[tone] ?? TONE_BACKGROUND[AlertTone.Info];\n  const motionClass = motion === AlertMotion.None ? undefined : `dt-alert-motion-${motion}`;\n  return (\n    <div\n      role=\"status\"\n      className={cx('dt-alert', motionClass, className)}\n      style={{\n        alignItems: 'flex-start',\n        background,\n        borderRadius: '20px',\n        color: 'var(--dt-alert-ink)',\n        display: 'flex',\n        gap: 12,\n        minHeight: 62,\n        overflow: 'clip',\n        padding: '13px 15px',\n        position: 'relative',\n        transition: 'filter var(--dt-motion-fast), transform var(--dt-motion-fast)',\n        width: 'min(100%, 380px)',\n        ...style,\n      }}\n      {...rest}\n    >\n      {icon ? <span style={{ color: 'currentColor', display: 'inline-flex', flex: '0 0 auto', marginTop: 1 }}>{icon}</span> : null}\n      <div style={{ flex: '1 0 0', minWidth: 1, overflow: 'clip', wordBreak: 'break-word' }}>\n        {title ? <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 'normal' }}>{title}</div> : null}\n        {children ? <div style={{ marginTop: title ? 3 : 0, fontSize: 13, fontWeight: 400, lineHeight: 'normal' }}>{children}</div> : null}\n        {action ? <div style={{ marginTop: 10 }}>{action}</div> : null}\n      </div>\n      {onDismiss ? (\n        <button onClick={onDismiss} aria-label=\"닫기\" style={{ flex: '0 0 auto', border: 'none', background: 'transparent', cursor: 'pointer', color: 'currentColor', padding: 2, lineHeight: 0 }}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+declare const AlertTone: {
+    readonly Info: "info";
+    readonly Success: "success";
+    readonly Warning: "warning";
+    readonly Danger: "danger";
+};
+type AlertTone = (typeof AlertTone)[keyof typeof AlertTone];
+declare const AlertMotion: {
+    readonly None: "none";
+    readonly Subtle: "subtle";
+    readonly Pulse: "pulse";
+};
+type AlertMotion = (typeof AlertMotion)[keyof typeof AlertMotion];
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'title'> {
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+    motion?: AlertMotion;
+    onDismiss?: () => void;
+    style?: CSSProperties;
+}
+declare function Alert({ tone, title, children, icon, action, motion, onDismiss, className, style, ...rest }: AlertProps): react.JSX.Element;
+
+export { Alert, AlertMotion, type AlertProps, AlertTone };

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

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+declare const AlertTone: {
+    readonly Info: "info";
+    readonly Success: "success";
+    readonly Warning: "warning";
+    readonly Danger: "danger";
+};
+type AlertTone = (typeof AlertTone)[keyof typeof AlertTone];
+declare const AlertMotion: {
+    readonly None: "none";
+    readonly Subtle: "subtle";
+    readonly Pulse: "pulse";
+};
+type AlertMotion = (typeof AlertMotion)[keyof typeof AlertMotion];
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'title'> {
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+    motion?: AlertMotion;
+    onDismiss?: () => void;
+    style?: CSSProperties;
+}
+declare function Alert({ tone, title, children, icon, action, motion, onDismiss, className, style, ...rest }: AlertProps): react.JSX.Element;
+
+export { Alert, AlertMotion, type AlertProps, AlertTone };

package/dist/components/feedback/Alert.mjs

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var AlertTone = {
+  Info: "info",
+  Success: "success",
+  Warning: "warning",
+  Danger: "danger"
+};
+var AlertMotion = {
+  None: "none",
+  Subtle: "subtle",
+  Pulse: "pulse"
+};
+var TONE_BACKGROUND = {
+  info: "var(--dt-status-cobalt)",
+  success: "var(--dt-status-success)",
+  warning: "var(--dt-status-warning)",
+  danger: "var(--dt-status-danger)"
+};
+function Alert({
+  tone = AlertTone.Info,
+  title,
+  children,
+  icon,
+  action,
+  motion = AlertMotion.None,
+  onDismiss,
+  className,
+  style,
+  ...rest
+}) {
+  const background = TONE_BACKGROUND[tone] ?? TONE_BACKGROUND[AlertTone.Info];
+  const motionClass = motion === AlertMotion.None ? void 0 : `dt-alert-motion-${motion}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cx("dt-alert", motionClass, className),
+      style: {
+        alignItems: "flex-start",
+        background,
+        borderRadius: "20px",
+        color: "var(--dt-alert-ink)",
+        display: "flex",
+        gap: 12,
+        minHeight: 62,
+        overflow: "clip",
+        padding: "13px 15px",
+        position: "relative",
+        transition: "filter var(--dt-motion-fast), transform var(--dt-motion-fast)",
+        width: "min(100%, 380px)",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { style: { color: "currentColor", display: "inline-flex", flex: "0 0 auto", marginTop: 1 }, children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { flex: "1 0 0", minWidth: 1, overflow: "clip", wordBreak: "break-word" }, children: [
+          title ? /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600, lineHeight: "normal" }, children: title }) : null,
+          children ? /* @__PURE__ */ jsx("div", { style: { marginTop: title ? 3 : 0, fontSize: 13, fontWeight: 400, lineHeight: "normal" }, children }) : null,
+          action ? /* @__PURE__ */ jsx("div", { style: { marginTop: 10 }, children: action }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx("button", { onClick: onDismiss, "aria-label": "\uB2EB\uAE30", style: { flex: "0 0 auto", border: "none", background: "transparent", cursor: "pointer", color: "currentColor", padding: 2, lineHeight: 0 }, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) : null
+      ]
+    }
+  );
+}
+
+export { Alert, AlertMotion, AlertTone };
+//# sourceMappingURL=Alert.mjs.map
+//# sourceMappingURL=Alert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/feedback/Alert.tsx"],"names":[],"mappings":"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","file":"Alert.mjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const AlertTone = {\n  Info: 'info',\n  Success: 'success',\n  Warning: 'warning',\n  Danger: 'danger',\n} as const;\n\nexport type AlertTone = (typeof AlertTone)[keyof typeof AlertTone];\n\nexport const AlertMotion = {\n  None: 'none',\n  Subtle: 'subtle',\n  Pulse: 'pulse',\n} as const;\n\nexport type AlertMotion = (typeof AlertMotion)[keyof typeof AlertMotion];\n\nconst TONE_BACKGROUND = {\n  info: 'var(--dt-status-cobalt)',\n  success: 'var(--dt-status-success)',\n  warning: 'var(--dt-status-warning)',\n  danger: 'var(--dt-status-danger)',\n} satisfies Record<AlertTone, string>;\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'title'> {\n  tone?: AlertTone;\n  title?: ReactNode;\n  children?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  motion?: AlertMotion;\n  onDismiss?: () => void;\n  style?: CSSProperties;\n}\n\nexport function Alert({\n  tone = AlertTone.Info,\n  title,\n  children,\n  icon,\n  action,\n  motion = AlertMotion.None,\n  onDismiss,\n  className,\n  style,\n  ...rest\n}: AlertProps) {\n  const background = TONE_BACKGROUND[tone] ?? TONE_BACKGROUND[AlertTone.Info];\n  const motionClass = motion === AlertMotion.None ? undefined : `dt-alert-motion-${motion}`;\n  return (\n    <div\n      role=\"status\"\n      className={cx('dt-alert', motionClass, className)}\n      style={{\n        alignItems: 'flex-start',\n        background,\n        borderRadius: '20px',\n        color: 'var(--dt-alert-ink)',\n        display: 'flex',\n        gap: 12,\n        minHeight: 62,\n        overflow: 'clip',\n        padding: '13px 15px',\n        position: 'relative',\n        transition: 'filter var(--dt-motion-fast), transform var(--dt-motion-fast)',\n        width: 'min(100%, 380px)',\n        ...style,\n      }}\n      {...rest}\n    >\n      {icon ? <span style={{ color: 'currentColor', display: 'inline-flex', flex: '0 0 auto', marginTop: 1 }}>{icon}</span> : null}\n      <div style={{ flex: '1 0 0', minWidth: 1, overflow: 'clip', wordBreak: 'break-word' }}>\n        {title ? <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 'normal' }}>{title}</div> : null}\n        {children ? <div style={{ marginTop: title ? 3 : 0, fontSize: 13, fontWeight: 400, lineHeight: 'normal' }}>{children}</div> : null}\n        {action ? <div style={{ marginTop: 10 }}>{action}</div> : null}\n      </div>\n      {onDismiss ? (\n        <button onClick={onDismiss} aria-label=\"닫기\" style={{ flex: '0 0 auto', border: 'none', background: 'transparent', cursor: 'pointer', color: 'currentColor', padding: 2, lineHeight: 0 }}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"]}