@bridger-kr/react 0.1.0

package/dist/components/core/Surface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/core/Surface.tsx"],"names":[],"mappings":";;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACCO,IAAM,WAAA,GAAc;AAAA,EACzB,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,MAAA,EAAQ;AACV;AAIO,IAAM,YAAA,GAAe;AAAA,EAC1B,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM;AACR;AAKA,IAAM,gBAAA,GAAgD;AAAA,EACpD,CAAC,WAAA,CAAY,OAAO,GAAG,wBAAA;AAAA,EACvB,CAAC,WAAA,CAAY,MAAM,GAAG,+BAAA;AAAA,EACtB,CAAC,WAAA,CAAY,MAAM,GAAG;AACxB,CAAA;AAEA,IAAM,iBAAA,GAAsD;AAAA,EAC1D,CAAC,YAAA,CAAa,MAAM,GAAG,yBAAA;AAAA,EACvB,CAAC,YAAA,CAAa,OAAO,GAAG,0BAAA;AAAA,EACxB,CAAC,YAAA,CAAa,IAAI,GAAG;AACvB,CAAA;AAOO,SAAS,KAAA,CAAM,EAAE,IAAA,GAAO,WAAA,CAAY,SAAS,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAe;AAC/F,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yEAAA;AAAA,QACA,iBAAiB,IAAI,CAAA;AAAA,QACrB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,kBAAkB,MAAA,EAAkC;AAClE,EAAA,OAAO,kBAAkB,MAAM,CAAA;AACjC","file":"Surface.mjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const SurfaceTone = {\n  Default: 'default',\n  Raised: 'raised',\n  Sunken: 'sunken',\n} as const;\n\nexport type SurfaceTone = (typeof SurfaceTone)[keyof typeof SurfaceTone];\n\nexport const MetricAccent = {\n  Accent: 'accent',\n  Success: 'success',\n  Info: 'info',\n} as const;\n\nexport type MetricAccent = (typeof MetricAccent)[keyof typeof MetricAccent];\nexport type MetricAccentName = MetricAccent;\n\nconst surfaceToneClass: Record<SurfaceTone, string> = {\n  [SurfaceTone.Default]: 'bg-[var(--dt-surface)]',\n  [SurfaceTone.Raised]: 'bg-[var(--dt-surface-raised)]',\n  [SurfaceTone.Sunken]: 'bg-[var(--dt-surface-sunken)]',\n};\n\nconst metricAccentClass: Record<MetricAccentName, string> = {\n  [MetricAccent.Accent]: 'text-[var(--dt-accent)]',\n  [MetricAccent.Success]: 'text-[var(--dt-success)]',\n  [MetricAccent.Info]: 'text-[var(--dt-info)]',\n};\n\nexport type PanelProps = ComponentPropsWithoutRef<'section'> & {\n  readonly tone?: SurfaceTone;\n  readonly children: ReactNode;\n};\n\nexport function Panel({ tone = SurfaceTone.Default, className, children, ...props }: PanelProps) {\n  return (\n    <section\n      className={cx(\n        'rounded-dtLg border border-[var(--dt-border)] px-5 py-5 md:px-6 md:py-6',\n        surfaceToneClass[tone],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </section>\n  );\n}\n\nexport function metricAccentColor(accent: MetricAccentName): string {\n  return metricAccentClass[accent];\n}\n"]}

package/dist/components/core/Tabs.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/core/Tabs.tsx
+function Tabs({ tabs = [], value, defaultValue, onChange, style }) {
+  const [internal, setInternal] = react.useState(defaultValue ?? tabs[0]?.id);
+  const active = value !== void 0 ? value : internal;
+  const select = (id) => {
+    if (value === void 0) setInternal(id);
+    onChange?.(id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      style: {
+        display: "flex",
+        gap: 4,
+        borderBottom: "1px solid var(--dt-border)",
+        ...style
+      },
+      children: tabs.map((tab) => {
+        const isActive = tab.id === active;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": isActive,
+            type: "button",
+            onClick: () => select(tab.id),
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 7,
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "10px 12px",
+              marginBottom: -1,
+              fontSize: 13,
+              fontWeight: 600,
+              color: isActive ? "var(--dt-ink-strong)" : "var(--dt-muted)",
+              borderBottom: `2px solid ${isActive ? "var(--dt-accent)" : "transparent"}`,
+              transition: "color var(--dt-motion-fast)"
+            },
+            children: [
+              tab.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: tab.icon }) : null,
+              tab.label,
+              tab.count != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: tab.count }) : null
+            ]
+          },
+          tab.id
+        );
+      })
+    }
+  );
+}
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.cjs.map
+//# sourceMappingURL=Tabs.cjs.map

package/dist/components/core/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Tabs.tsx"],"names":["useState","jsx","jsxs"],"mappings":";;;;;;AAuBO,SAAS,IAAA,CAAK,EAAE,IAAA,GAAO,IAAI,KAAA,EAAO,YAAA,EAAc,QAAA,EAAU,KAAA,EAAM,EAAc;AACnF,EAAA,MAAM,CAAC,UAAU,WAAW,CAAA,GAAIA,eAAS,YAAA,IAAgB,IAAA,CAAK,CAAC,CAAA,EAAG,EAAE,CAAA;AACpE,EAAA,MAAM,MAAA,GAAS,KAAA,KAAU,MAAA,GAAY,KAAA,GAAQ,QAAA;AAE7C,EAAA,MAAM,MAAA,GAAS,CAAC,EAAA,KAAe;AAC7B,IAAA,IAAI,KAAA,KAAU,MAAA,EAAW,WAAA,CAAY,EAAE,CAAA;AACvC,IAAA,QAAA,GAAW,EAAE,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,MAAA;AAAA,QACT,GAAA,EAAK,CAAA;AAAA,QACL,YAAA,EAAc,4BAAA;AAAA,QACd,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,KAAQ;AACjB,QAAA,MAAM,QAAA,GAAW,IAAI,EAAA,KAAO,MAAA;AAC5B,QAAA,uBACEC,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,KAAA;AAAA,YACL,eAAA,EAAe,QAAA;AAAA,YACf,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,MAAA,CAAO,GAAA,CAAI,EAAE,CAAA;AAAA,YAC5B,KAAA,EAAO;AAAA,cACL,QAAA,EAAU,UAAA;AAAA,cACV,OAAA,EAAS,aAAA;AAAA,cACT,UAAA,EAAY,QAAA;AAAA,cACZ,GAAA,EAAK,CAAA;AAAA,cACL,UAAA,EAAY,aAAA;AAAA,cACZ,MAAA,EAAQ,MAAA;AAAA,cACR,MAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,WAAA;AAAA,cACT,YAAA,EAAc,EAAA;AAAA,cACd,QAAA,EAAU,EAAA;AAAA,cACV,UAAA,EAAY,GAAA;AAAA,cACZ,KAAA,EAAO,WAAW,sBAAA,GAAyB,iBAAA;AAAA,cAC3C,YAAA,EAAc,CAAA,UAAA,EAAa,QAAA,GAAW,kBAAA,GAAqB,aAAa,CAAA,CAAA;AAAA,cACxE,UAAA,EAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,mBAAOD,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAc,EAAI,QAAA,EAAA,GAAA,CAAI,IAAA,EAAK,CAAA,GAAU,IAAA;AAAA,cAC3F,GAAA,CAAI,KAAA;AAAA,cACJ,IAAI,KAAA,IAAS,IAAA,mBACZA,cAAA,CAAC,MAAA,EAAA,EAAK,OAAO,EAAE,UAAA,EAAY,qBAAA,EAAuB,QAAA,EAAU,IAAI,KAAA,EAAO,iBAAA,EAAkB,EACtF,QAAA,EAAA,GAAA,CAAI,OACP,CAAA,GACE;AAAA;AAAA,WAAA;AAAA,UA5BC,GAAA,CAAI;AAAA,SA6BX;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"Tabs.cjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\n\nexport interface TabItem {\n  id: string;\n  label: string;\n  icon?: ReactNode;\n  count?: number | string;\n}\n\nexport interface TabsProps {\n  tabs?: TabItem[];\n  /** Controlled active tab id. */\n  value?: string;\n  defaultValue?: string;\n  onChange?: (id: string) => void;\n  style?: CSSProperties;\n}\n\n/**\n * Underline-style tab bar for switching console views. Controlled via\n * `value` + `onChange`, or uncontrolled with `defaultValue`.\n */\nexport function Tabs({ tabs = [], value, defaultValue, onChange, style }: TabsProps) {\n  const [internal, setInternal] = useState(defaultValue ?? tabs[0]?.id);\n  const active = value !== undefined ? value : internal;\n\n  const select = (id: string) => {\n    if (value === undefined) setInternal(id);\n    onChange?.(id);\n  };\n\n  return (\n    <div\n      role=\"tablist\"\n      style={{\n        display: 'flex',\n        gap: 4,\n        borderBottom: '1px solid var(--dt-border)',\n        ...style,\n      }}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        return (\n          <button\n            key={tab.id}\n            role=\"tab\"\n            aria-selected={isActive}\n            type=\"button\"\n            onClick={() => select(tab.id)}\n            style={{\n              position: 'relative',\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: 7,\n              background: 'transparent',\n              border: 'none',\n              cursor: 'pointer',\n              padding: '10px 12px',\n              marginBottom: -1,\n              fontSize: 13,\n              fontWeight: 600,\n              color: isActive ? 'var(--dt-ink-strong)' : 'var(--dt-muted)',\n              borderBottom: `2px solid ${isActive ? 'var(--dt-accent)' : 'transparent'}`,\n              transition: 'color var(--dt-motion-fast)',\n            }}\n          >\n            {tab.icon ? <span aria-hidden=\"true\" style={{ display: 'inline-flex' }}>{tab.icon}</span> : null}\n            {tab.label}\n            {tab.count != null ? (\n              <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>\n                {tab.count}\n              </span>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/core/Tabs.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface TabItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    count?: number | string;
+}
+interface TabsProps {
+    tabs?: TabItem[];
+    /** Controlled active tab id. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    style?: CSSProperties;
+}
+/**
+ * Underline-style tab bar for switching console views. Controlled via
+ * `value` + `onChange`, or uncontrolled with `defaultValue`.
+ */
+declare function Tabs({ tabs, value, defaultValue, onChange, style }: TabsProps): react.JSX.Element;
+
+export { type TabItem, Tabs, type TabsProps };

package/dist/components/core/Tabs.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface TabItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    count?: number | string;
+}
+interface TabsProps {
+    tabs?: TabItem[];
+    /** Controlled active tab id. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    style?: CSSProperties;
+}
+/**
+ * Underline-style tab bar for switching console views. Controlled via
+ * `value` + `onChange`, or uncontrolled with `defaultValue`.
+ */
+declare function Tabs({ tabs, value, defaultValue, onChange, style }: TabsProps): react.JSX.Element;
+
+export { type TabItem, Tabs, type TabsProps };

package/dist/components/core/Tabs.mjs

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/core/Tabs.tsx
+function Tabs({ tabs = [], value, defaultValue, onChange, style }) {
+  const [internal, setInternal] = useState(defaultValue ?? tabs[0]?.id);
+  const active = value !== void 0 ? value : internal;
+  const select = (id) => {
+    if (value === void 0) setInternal(id);
+    onChange?.(id);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      style: {
+        display: "flex",
+        gap: 4,
+        borderBottom: "1px solid var(--dt-border)",
+        ...style
+      },
+      children: tabs.map((tab) => {
+        const isActive = tab.id === active;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": isActive,
+            type: "button",
+            onClick: () => select(tab.id),
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 7,
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "10px 12px",
+              marginBottom: -1,
+              fontSize: 13,
+              fontWeight: 600,
+              color: isActive ? "var(--dt-ink-strong)" : "var(--dt-muted)",
+              borderBottom: `2px solid ${isActive ? "var(--dt-accent)" : "transparent"}`,
+              transition: "color var(--dt-motion-fast)"
+            },
+            children: [
+              tab.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: tab.icon }) : null,
+              tab.label,
+              tab.count != null ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: tab.count }) : null
+            ]
+          },
+          tab.id
+        );
+      })
+    }
+  );
+}
+
+export { Tabs };
+//# sourceMappingURL=Tabs.mjs.map
+//# sourceMappingURL=Tabs.mjs.map

package/dist/components/core/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Tabs.tsx"],"names":[],"mappings":";;;;AAuBO,SAAS,IAAA,CAAK,EAAE,IAAA,GAAO,IAAI,KAAA,EAAO,YAAA,EAAc,QAAA,EAAU,KAAA,EAAM,EAAc;AACnF,EAAA,MAAM,CAAC,UAAU,WAAW,CAAA,GAAI,SAAS,YAAA,IAAgB,IAAA,CAAK,CAAC,CAAA,EAAG,EAAE,CAAA;AACpE,EAAA,MAAM,MAAA,GAAS,KAAA,KAAU,MAAA,GAAY,KAAA,GAAQ,QAAA;AAE7C,EAAA,MAAM,MAAA,GAAS,CAAC,EAAA,KAAe;AAC7B,IAAA,IAAI,KAAA,KAAU,MAAA,EAAW,WAAA,CAAY,EAAE,CAAA;AACvC,IAAA,QAAA,GAAW,EAAE,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,MAAA;AAAA,QACT,GAAA,EAAK,CAAA;AAAA,QACL,YAAA,EAAc,4BAAA;AAAA,QACd,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,KAAQ;AACjB,QAAA,MAAM,QAAA,GAAW,IAAI,EAAA,KAAO,MAAA;AAC5B,QAAA,uBACE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,KAAA;AAAA,YACL,eAAA,EAAe,QAAA;AAAA,YACf,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,MAAA,CAAO,GAAA,CAAI,EAAE,CAAA;AAAA,YAC5B,KAAA,EAAO;AAAA,cACL,QAAA,EAAU,UAAA;AAAA,cACV,OAAA,EAAS,aAAA;AAAA,cACT,UAAA,EAAY,QAAA;AAAA,cACZ,GAAA,EAAK,CAAA;AAAA,cACL,UAAA,EAAY,aAAA;AAAA,cACZ,MAAA,EAAQ,MAAA;AAAA,cACR,MAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,WAAA;AAAA,cACT,YAAA,EAAc,EAAA;AAAA,cACd,QAAA,EAAU,EAAA;AAAA,cACV,UAAA,EAAY,GAAA;AAAA,cACZ,KAAA,EAAO,WAAW,sBAAA,GAAyB,iBAAA;AAAA,cAC3C,YAAA,EAAc,CAAA,UAAA,EAAa,QAAA,GAAW,kBAAA,GAAqB,aAAa,CAAA,CAAA;AAAA,cACxE,UAAA,EAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAc,EAAI,QAAA,EAAA,GAAA,CAAI,IAAA,EAAK,CAAA,GAAU,IAAA;AAAA,cAC3F,GAAA,CAAI,KAAA;AAAA,cACJ,IAAI,KAAA,IAAS,IAAA,mBACZ,GAAA,CAAC,MAAA,EAAA,EAAK,OAAO,EAAE,UAAA,EAAY,qBAAA,EAAuB,QAAA,EAAU,IAAI,KAAA,EAAO,iBAAA,EAAkB,EACtF,QAAA,EAAA,GAAA,CAAI,OACP,CAAA,GACE;AAAA;AAAA,WAAA;AAAA,UA5BC,GAAA,CAAI;AAAA,SA6BX;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"Tabs.mjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\n\nexport interface TabItem {\n  id: string;\n  label: string;\n  icon?: ReactNode;\n  count?: number | string;\n}\n\nexport interface TabsProps {\n  tabs?: TabItem[];\n  /** Controlled active tab id. */\n  value?: string;\n  defaultValue?: string;\n  onChange?: (id: string) => void;\n  style?: CSSProperties;\n}\n\n/**\n * Underline-style tab bar for switching console views. Controlled via\n * `value` + `onChange`, or uncontrolled with `defaultValue`.\n */\nexport function Tabs({ tabs = [], value, defaultValue, onChange, style }: TabsProps) {\n  const [internal, setInternal] = useState(defaultValue ?? tabs[0]?.id);\n  const active = value !== undefined ? value : internal;\n\n  const select = (id: string) => {\n    if (value === undefined) setInternal(id);\n    onChange?.(id);\n  };\n\n  return (\n    <div\n      role=\"tablist\"\n      style={{\n        display: 'flex',\n        gap: 4,\n        borderBottom: '1px solid var(--dt-border)',\n        ...style,\n      }}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === active;\n        return (\n          <button\n            key={tab.id}\n            role=\"tab\"\n            aria-selected={isActive}\n            type=\"button\"\n            onClick={() => select(tab.id)}\n            style={{\n              position: 'relative',\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: 7,\n              background: 'transparent',\n              border: 'none',\n              cursor: 'pointer',\n              padding: '10px 12px',\n              marginBottom: -1,\n              fontSize: 13,\n              fontWeight: 600,\n              color: isActive ? 'var(--dt-ink-strong)' : 'var(--dt-muted)',\n              borderBottom: `2px solid ${isActive ? 'var(--dt-accent)' : 'transparent'}`,\n              transition: 'color var(--dt-motion-fast)',\n            }}\n          >\n            {tab.icon ? <span aria-hidden=\"true\" style={{ display: 'inline-flex' }}>{tab.icon}</span> : null}\n            {tab.label}\n            {tab.count != null ? (\n              <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>\n                {tab.count}\n              </span>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/data/Avatar.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/Avatar.tsx
+var SIZE = { sm: 26, md: 34, lg: 44 };
+function Avatar({ name = "", src, size = "md", status, square = true, style, ...rest }) {
+  const px = typeof size === "number" ? size : SIZE[size] ?? SIZE.md;
+  const initials = name.trim().split(/\s+/).map((word) => word[0]).slice(0, 2).join("").toUpperCase() || "\xB7";
+  const radius = square ? Math.round(px * 0.28) : px;
+  const statusColor = status ? { online: "var(--dt-success)", busy: "var(--dt-danger)", away: "var(--dt-warning)", offline: "var(--dt-muted)" }[status] ?? void 0 : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, style: { position: "relative", display: "inline-flex", flex: "0 0 auto", ...style }, children: [
+    src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, width: px, height: px, style: { borderRadius: radius, objectFit: "cover", boxShadow: "var(--dt-ring)" } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+      width: px,
+      height: px,
+      borderRadius: radius,
+      display: "grid",
+      placeItems: "center",
+      background: "var(--dt-tint-accent)",
+      color: "var(--dt-accent)",
+      fontSize: px * 0.38,
+      fontWeight: 700,
+      letterSpacing: "-0.02em"
+    }, children: initials }),
+    statusColor ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+      position: "absolute",
+      right: -1,
+      bottom: -1,
+      width: px * 0.3,
+      height: px * 0.3,
+      borderRadius: 9999,
+      background: statusColor,
+      boxShadow: "0 0 0 2px var(--dt-surface)"
+    } }) : null
+  ] });
+}
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.cjs.map
+//# sourceMappingURL=Avatar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/Avatar.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAEA,IAAM,OAAO,EAAE,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAG;AAgB/B,SAAS,MAAA,CAAO,EAAE,IAAA,GAAO,EAAA,EAAI,GAAA,EAAK,IAAA,GAAO,IAAA,EAAM,MAAA,EAAQ,MAAA,GAAS,IAAA,EAAM,KAAA,EAAO,GAAG,MAAK,EAAgB;AAC1G,EAAA,MAAM,EAAA,GAAK,OAAO,IAAA,KAAS,QAAA,GAAW,OAAQ,IAAA,CAAK,IAAI,KAAK,IAAA,CAAK,EAAA;AACjE,EAAA,MAAM,QAAA,GAAW,KAAK,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,CAAC,CAAC,CAAA,CAAE,MAAM,CAAA,EAAG,CAAC,EAAE,IAAA,CAAK,EAAE,CAAA,CAAE,WAAA,EAAY,IAAK,MAAA;AACvG,EAAA,MAAM,SAAS,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,EAAA,GAAK,IAAI,CAAA,GAAI,EAAA;AAChD,EAAA,MAAM,WAAA,GAAc,MAAA,GAAS,EAAE,MAAA,EAAQ,qBAAqB,IAAA,EAAM,kBAAA,EAAoB,IAAA,EAAM,mBAAA,EAAqB,OAAA,EAAS,iBAAA,EAAkB,CAAE,MAAM,KAAK,MAAA,GAAY,MAAA;AAErK,EAAA,uBACEA,eAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,OAAO,EAAE,QAAA,EAAU,UAAA,EAAY,OAAA,EAAS,aAAA,EAAe,IAAA,EAAM,UAAA,EAAY,GAAG,OAAM,EAC/F,QAAA,EAAA;AAAA,IAAA,GAAA,mBACCC,cAAA,CAAC,SAAI,GAAA,EAAU,GAAA,EAAK,MAAM,KAAA,EAAO,EAAA,EAAI,QAAQ,EAAA,EAAI,KAAA,EAAO,EAAE,YAAA,EAAc,MAAA,EAAQ,WAAW,OAAA,EAAS,SAAA,EAAW,kBAAiB,EAAG,CAAA,mBAEnIA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO;AAAA,MACX,KAAA,EAAO,EAAA;AAAA,MAAI,MAAA,EAAQ,EAAA;AAAA,MAAI,YAAA,EAAc,MAAA;AAAA,MAAQ,OAAA,EAAS,MAAA;AAAA,MAAQ,UAAA,EAAY,QAAA;AAAA,MAC1E,UAAA,EAAY,uBAAA;AAAA,MAAyB,KAAA,EAAO,kBAAA;AAAA,MAC5C,UAAU,EAAA,GAAK,IAAA;AAAA,MAAM,UAAA,EAAY,GAAA;AAAA,MAAK,aAAA,EAAe;AAAA,OACnD,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,IAEd,WAAA,mBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MAAY,KAAA,EAAO,EAAA;AAAA,MAAI,MAAA,EAAQ,EAAA;AAAA,MAAI,OAAO,EAAA,GAAK,GAAA;AAAA,MAAK,QAAQ,EAAA,GAAK,GAAA;AAAA,MAC3E,YAAA,EAAc,IAAA;AAAA,MAAM,UAAA,EAAY,WAAA;AAAA,MAAa,SAAA,EAAW;AAAA,OACvD,CAAA,GACD;AAAA,GAAA,EACN,CAAA;AAEJ","file":"Avatar.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nconst SIZE = { sm: 26, md: 34, lg: 44 } as const;\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {\n  name?: string;\n  src?: string;\n  size?: keyof typeof SIZE | number;\n  status?: 'online' | 'busy' | 'away' | 'offline';\n  /** Rounded square (default) vs full circle. */\n  square?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Avatar — image or initials in a rounded square. Optional status dot.\n * Deterministic tint from the name when no image is given.\n */\nexport function Avatar({ name = '', src, size = 'md', status, square = true, style, ...rest }: AvatarProps) {\n  const px = typeof size === 'number' ? size : (SIZE[size] ?? SIZE.md);\n  const initials = name.trim().split(/\\s+/).map((word) => word[0]).slice(0, 2).join('').toUpperCase() || '·';\n  const radius = square ? Math.round(px * 0.28) : px;\n  const statusColor = status ? { online: 'var(--dt-success)', busy: 'var(--dt-danger)', away: 'var(--dt-warning)', offline: 'var(--dt-muted)' }[status] ?? undefined : undefined;\n\n  return (\n    <span {...rest} style={{ position: 'relative', display: 'inline-flex', flex: '0 0 auto', ...style }}>\n      {src ? (\n        <img src={src} alt={name} width={px} height={px} style={{ borderRadius: radius, objectFit: 'cover', boxShadow: 'var(--dt-ring)' }} />\n      ) : (\n        <span style={{\n          width: px, height: px, borderRadius: radius, display: 'grid', placeItems: 'center',\n          background: 'var(--dt-tint-accent)', color: 'var(--dt-accent)',\n          fontSize: px * 0.38, fontWeight: 700, letterSpacing: '-0.02em',\n        }}>{initials}</span>\n      )}\n      {statusColor ? (\n        <span style={{\n          position: 'absolute', right: -1, bottom: -1, width: px * 0.3, height: px * 0.3,\n          borderRadius: 9999, background: statusColor, boxShadow: '0 0 0 2px var(--dt-surface)',\n        }} />\n      ) : null}\n    </span>\n  );\n}\n"]}

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

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+declare const SIZE: {
+    readonly sm: 26;
+    readonly md: 34;
+    readonly lg: 44;
+};
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    name?: string;
+    src?: string;
+    size?: keyof typeof SIZE | number;
+    status?: 'online' | 'busy' | 'away' | 'offline';
+    /** Rounded square (default) vs full circle. */
+    square?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Avatar — image or initials in a rounded square. Optional status dot.
+ * Deterministic tint from the name when no image is given.
+ */
+declare function Avatar({ name, src, size, status, square, style, ...rest }: AvatarProps): react.JSX.Element;
+
+export { Avatar, type AvatarProps };

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

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+declare const SIZE: {
+    readonly sm: 26;
+    readonly md: 34;
+    readonly lg: 44;
+};
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    name?: string;
+    src?: string;
+    size?: keyof typeof SIZE | number;
+    status?: 'online' | 'busy' | 'away' | 'offline';
+    /** Rounded square (default) vs full circle. */
+    square?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Avatar — image or initials in a rounded square. Optional status dot.
+ * Deterministic tint from the name when no image is given.
+ */
+declare function Avatar({ name, src, size, status, square, style, ...rest }: AvatarProps): react.JSX.Element;
+
+export { Avatar, type AvatarProps };

package/dist/components/data/Avatar.mjs

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/data/Avatar.tsx
+var SIZE = { sm: 26, md: 34, lg: 44 };
+function Avatar({ name = "", src, size = "md", status, square = true, style, ...rest }) {
+  const px = typeof size === "number" ? size : SIZE[size] ?? SIZE.md;
+  const initials = name.trim().split(/\s+/).map((word) => word[0]).slice(0, 2).join("").toUpperCase() || "\xB7";
+  const radius = square ? Math.round(px * 0.28) : px;
+  const statusColor = status ? { online: "var(--dt-success)", busy: "var(--dt-danger)", away: "var(--dt-warning)", offline: "var(--dt-muted)" }[status] ?? void 0 : void 0;
+  return /* @__PURE__ */ jsxs("span", { ...rest, style: { position: "relative", display: "inline-flex", flex: "0 0 auto", ...style }, children: [
+    src ? /* @__PURE__ */ jsx("img", { src, alt: name, width: px, height: px, style: { borderRadius: radius, objectFit: "cover", boxShadow: "var(--dt-ring)" } }) : /* @__PURE__ */ jsx("span", { style: {
+      width: px,
+      height: px,
+      borderRadius: radius,
+      display: "grid",
+      placeItems: "center",
+      background: "var(--dt-tint-accent)",
+      color: "var(--dt-accent)",
+      fontSize: px * 0.38,
+      fontWeight: 700,
+      letterSpacing: "-0.02em"
+    }, children: initials }),
+    statusColor ? /* @__PURE__ */ jsx("span", { style: {
+      position: "absolute",
+      right: -1,
+      bottom: -1,
+      width: px * 0.3,
+      height: px * 0.3,
+      borderRadius: 9999,
+      background: statusColor,
+      boxShadow: "0 0 0 2px var(--dt-surface)"
+    } }) : null
+  ] });
+}
+
+export { Avatar };
+//# sourceMappingURL=Avatar.mjs.map
+//# sourceMappingURL=Avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/Avatar.tsx"],"names":[],"mappings":";;;AAEA,IAAM,OAAO,EAAE,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAG;AAgB/B,SAAS,MAAA,CAAO,EAAE,IAAA,GAAO,EAAA,EAAI,GAAA,EAAK,IAAA,GAAO,IAAA,EAAM,MAAA,EAAQ,MAAA,GAAS,IAAA,EAAM,KAAA,EAAO,GAAG,MAAK,EAAgB;AAC1G,EAAA,MAAM,EAAA,GAAK,OAAO,IAAA,KAAS,QAAA,GAAW,OAAQ,IAAA,CAAK,IAAI,KAAK,IAAA,CAAK,EAAA;AACjE,EAAA,MAAM,QAAA,GAAW,KAAK,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,CAAC,CAAC,CAAA,CAAE,MAAM,CAAA,EAAG,CAAC,EAAE,IAAA,CAAK,EAAE,CAAA,CAAE,WAAA,EAAY,IAAK,MAAA;AACvG,EAAA,MAAM,SAAS,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,EAAA,GAAK,IAAI,CAAA,GAAI,EAAA;AAChD,EAAA,MAAM,WAAA,GAAc,MAAA,GAAS,EAAE,MAAA,EAAQ,qBAAqB,IAAA,EAAM,kBAAA,EAAoB,IAAA,EAAM,mBAAA,EAAqB,OAAA,EAAS,iBAAA,EAAkB,CAAE,MAAM,KAAK,MAAA,GAAY,MAAA;AAErK,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,OAAO,EAAE,QAAA,EAAU,UAAA,EAAY,OAAA,EAAS,aAAA,EAAe,IAAA,EAAM,UAAA,EAAY,GAAG,OAAM,EAC/F,QAAA,EAAA;AAAA,IAAA,GAAA,mBACC,GAAA,CAAC,SAAI,GAAA,EAAU,GAAA,EAAK,MAAM,KAAA,EAAO,EAAA,EAAI,QAAQ,EAAA,EAAI,KAAA,EAAO,EAAE,YAAA,EAAc,MAAA,EAAQ,WAAW,OAAA,EAAS,SAAA,EAAW,kBAAiB,EAAG,CAAA,mBAEnI,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO;AAAA,MACX,KAAA,EAAO,EAAA;AAAA,MAAI,MAAA,EAAQ,EAAA;AAAA,MAAI,YAAA,EAAc,MAAA;AAAA,MAAQ,OAAA,EAAS,MAAA;AAAA,MAAQ,UAAA,EAAY,QAAA;AAAA,MAC1E,UAAA,EAAY,uBAAA;AAAA,MAAyB,KAAA,EAAO,kBAAA;AAAA,MAC5C,UAAU,EAAA,GAAK,IAAA;AAAA,MAAM,UAAA,EAAY,GAAA;AAAA,MAAK,aAAA,EAAe;AAAA,OACnD,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,IAEd,WAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MAAY,KAAA,EAAO,EAAA;AAAA,MAAI,MAAA,EAAQ,EAAA;AAAA,MAAI,OAAO,EAAA,GAAK,GAAA;AAAA,MAAK,QAAQ,EAAA,GAAK,GAAA;AAAA,MAC3E,YAAA,EAAc,IAAA;AAAA,MAAM,UAAA,EAAY,WAAA;AAAA,MAAa,SAAA,EAAW;AAAA,OACvD,CAAA,GACD;AAAA,GAAA,EACN,CAAA;AAEJ","file":"Avatar.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nconst SIZE = { sm: 26, md: 34, lg: 44 } as const;\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {\n  name?: string;\n  src?: string;\n  size?: keyof typeof SIZE | number;\n  status?: 'online' | 'busy' | 'away' | 'offline';\n  /** Rounded square (default) vs full circle. */\n  square?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Avatar — image or initials in a rounded square. Optional status dot.\n * Deterministic tint from the name when no image is given.\n */\nexport function Avatar({ name = '', src, size = 'md', status, square = true, style, ...rest }: AvatarProps) {\n  const px = typeof size === 'number' ? size : (SIZE[size] ?? SIZE.md);\n  const initials = name.trim().split(/\\s+/).map((word) => word[0]).slice(0, 2).join('').toUpperCase() || '·';\n  const radius = square ? Math.round(px * 0.28) : px;\n  const statusColor = status ? { online: 'var(--dt-success)', busy: 'var(--dt-danger)', away: 'var(--dt-warning)', offline: 'var(--dt-muted)' }[status] ?? undefined : undefined;\n\n  return (\n    <span {...rest} style={{ position: 'relative', display: 'inline-flex', flex: '0 0 auto', ...style }}>\n      {src ? (\n        <img src={src} alt={name} width={px} height={px} style={{ borderRadius: radius, objectFit: 'cover', boxShadow: 'var(--dt-ring)' }} />\n      ) : (\n        <span style={{\n          width: px, height: px, borderRadius: radius, display: 'grid', placeItems: 'center',\n          background: 'var(--dt-tint-accent)', color: 'var(--dt-accent)',\n          fontSize: px * 0.38, fontWeight: 700, letterSpacing: '-0.02em',\n        }}>{initials}</span>\n      )}\n      {statusColor ? (\n        <span style={{\n          position: 'absolute', right: -1, bottom: -1, width: px * 0.3, height: px * 0.3,\n          borderRadius: 9999, background: statusColor, boxShadow: '0 0 0 2px var(--dt-surface)',\n        }} />\n      ) : null}\n    </span>\n  );\n}\n"]}

package/dist/components/data/CodeBlock.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/data/CodeBlock.tsx
+function highlight(line) {
+  const out = [];
+  const re = /("(?:[^"\\]|\\.)*"\s*:)|("(?:[^"\\]|\\.)*")|(\b-?\d+(?:\.\d+)?\b)|(\b(?:true|false|null|GET|POST|PUT|DELETE)\b)|([{}[\],:])/g;
+  let last = 0;
+  let match;
+  while ((match = re.exec(line)) !== null) {
+    if (match.index > last) out.push({ t: line.slice(last, match.index), c: "plain" });
+    if (match[1]) out.push({ t: match[1], c: "key" });
+    else if (match[2]) out.push({ t: match[2], c: "str" });
+    else if (match[3]) out.push({ t: match[3], c: "num" });
+    else if (match[4]) out.push({ t: match[4], c: "kw" });
+    else if (match[5]) out.push({ t: match[5], c: "pun" });
+    last = re.lastIndex;
+  }
+  if (last < line.length) out.push({ t: line.slice(last), c: "plain" });
+  return out;
+}
+var COLOR = { plain: "#cdd0d8", key: "#7fd1c0", str: "#e0a96d", num: "#8fb3ff", kw: "#c98aff", pun: "#8a91a3" };
+function CodeBlock({ code = "", label, language = "json", showLineNumbers = true, copyable = true, style, ...rest }) {
+  const [copied, setCopied] = react.useState(false);
+  const lines = String(code).replace(/\n$/, "").split("\n");
+  const copy = () => {
+    try {
+      navigator.clipboard?.writeText(code);
+    } catch {
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1400);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, style: {
+    background: "var(--dt-code-bg)",
+    border: "1px solid var(--dt-code-border)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    ...style
+  }, children: [
+    label || copyable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: "9px 12px",
+      borderBottom: "1px solid var(--dt-code-border)"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "#8a91a3" }, children: label || language }),
+      copyable ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: copy,
+          style: {
+            marginLeft: "auto",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "none",
+            background: "transparent",
+            color: copied ? "#34d399" : "#8a91a3",
+            cursor: "pointer",
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 11,
+            fontWeight: 600,
+            padding: 0
+          },
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            "\uBCF5\uC0AC\uB428"
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+            ] }),
+            "\uBCF5\uC0AC"
+          ] })
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 0", overflowX: "auto" }, children: lines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: showLineNumbers ? "38px 1fr" : "1fr", fontFamily: "var(--dt-font-mono)", fontSize: 12.5, lineHeight: 1.75 }, children: [
+      showLineNumbers ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textAlign: "right", paddingRight: 14, color: "#5a6273", userSelect: "none" }, children: index + 1 }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("code", { style: { color: COLOR.plain, whiteSpace: "pre", paddingRight: 14 }, children: highlight(line).map((segment, segmentIndex) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: COLOR[segment.c] }, children: segment.t }, segmentIndex)) })
+    ] }, index)) })
+  ] });
+}
+
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=CodeBlock.cjs.map
+//# sourceMappingURL=CodeBlock.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data/CodeBlock.tsx"],"names":["useState","jsxs","jsx","Fragment"],"mappings":"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","file":"CodeBlock.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\nimport { useState } from 'react';\n\ntype TokenKind = 'plain' | 'key' | 'str' | 'num' | 'kw' | 'pun';\n\ninterface CodeToken {\n  t: string;\n  c: TokenKind;\n}\n\nfunction highlight(line: string): CodeToken[] {\n  const out: CodeToken[] = [];\n  const re = /(\"(?:[^\"\\\\]|\\\\.)*\"\\s*:)|(\"(?:[^\"\\\\]|\\\\.)*\")|(\\b-?\\d+(?:\\.\\d+)?\\b)|(\\b(?:true|false|null|GET|POST|PUT|DELETE)\\b)|([{}[\\],:])/g;\n  let last = 0;\n  let match: RegExpExecArray | null;\n\n  while ((match = re.exec(line)) !== null) {\n    if (match.index > last) out.push({ t: line.slice(last, match.index), c: 'plain' });\n    if (match[1]) out.push({ t: match[1], c: 'key' });\n    else if (match[2]) out.push({ t: match[2], c: 'str' });\n    else if (match[3]) out.push({ t: match[3], c: 'num' });\n    else if (match[4]) out.push({ t: match[4], c: 'kw' });\n    else if (match[5]) out.push({ t: match[5], c: 'pun' });\n    last = re.lastIndex;\n  }\n\n  if (last < line.length) out.push({ t: line.slice(last), c: 'plain' });\n  return out;\n}\n\nconst COLOR: Record<TokenKind, string> = { plain: '#cdd0d8', key: '#7fd1c0', str: '#e0a96d', num: '#8fb3ff', kw: '#c98aff', pun: '#8a91a3' };\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  /** The snippet, newline-separated. Lightly token-highlighted (JSON/shell). */\n  code?: string;\n  /** Header label, e.g. a filename or \"response\". Falls back to language. */\n  label?: string;\n  language?: string;\n  showLineNumbers?: boolean;\n  copyable?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Dark code surface for the light page (Stripe-style). Header + copy + line numbers.\n * @startingPoint section=\"Data\" subtitle=\"Dark code block with copy\" viewport=\"520x220\"\n */\nexport function CodeBlock({ code = '', label, language = 'json', showLineNumbers = true, copyable = true, style, ...rest }: CodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n  const lines = String(code).replace(/\\n$/, '').split('\\n');\n\n  const copy = () => {\n    try { navigator.clipboard?.writeText(code); } catch { /* clipboard unavailable */ }\n    setCopied(true); setTimeout(() => setCopied(false), 1400);\n  };\n\n  return (\n    <div {...rest} style={{\n      background: 'var(--dt-code-bg)', border: '1px solid var(--dt-code-border)',\n      borderRadius: 'var(--dt-radius-lg)', overflow: 'hidden', ...style,\n    }}>\n      {(label || copyable) ? (\n        <div style={{\n          display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px',\n          borderBottom: '1px solid var(--dt-code-border)',\n        }}>\n          <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: '#8a91a3' }}>{label || language}</span>\n          {copyable ? (\n            <button\n              type=\"button\" onClick={copy}\n              style={{\n                marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, border: 'none',\n                background: 'transparent', color: copied ? '#34d399' : '#8a91a3', cursor: 'pointer',\n                fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600, padding: 0,\n              }}\n            >\n              {copied ? (\n                <><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>복사됨</>\n              ) : (\n                <><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" /><path d=\"M5 15V5a2 2 0 0 1 2-2h10\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" /></svg>복사</>\n              )}\n            </button>\n          ) : null}\n        </div>\n      ) : null}\n      <div style={{ padding: '12px 0', overflowX: 'auto' }}>\n        {lines.map((line, index) => (\n          <div key={index} style={{ display: 'grid', gridTemplateColumns: showLineNumbers ? '38px 1fr' : '1fr', fontFamily: 'var(--dt-font-mono)', fontSize: 12.5, lineHeight: 1.75 }}>\n            {showLineNumbers ? <span style={{ textAlign: 'right', paddingRight: 14, color: '#5a6273', userSelect: 'none' }}>{index + 1}</span> : null}\n            <code style={{ color: COLOR.plain, whiteSpace: 'pre', paddingRight: 14 }}>\n              {highlight(line).map((segment, segmentIndex) => <span key={segmentIndex} style={{ color: COLOR[segment.c] }}>{segment.t}</span>)}\n            </code>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** The snippet, newline-separated. Lightly token-highlighted (JSON/shell). */
+    code?: string;
+    /** Header label, e.g. a filename or "response". Falls back to language. */
+    label?: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    copyable?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Dark code surface for the light page (Stripe-style). Header + copy + line numbers.
+ * @startingPoint section="Data" subtitle="Dark code block with copy" viewport="520x220"
+ */
+declare function CodeBlock({ code, label, language, showLineNumbers, copyable, style, ...rest }: CodeBlockProps): react.JSX.Element;
+
+export { CodeBlock, type CodeBlockProps };

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** The snippet, newline-separated. Lightly token-highlighted (JSON/shell). */
+    code?: string;
+    /** Header label, e.g. a filename or "response". Falls back to language. */
+    label?: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    copyable?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Dark code surface for the light page (Stripe-style). Header + copy + line numbers.
+ * @startingPoint section="Data" subtitle="Dark code block with copy" viewport="520x220"
+ */
+declare function CodeBlock({ code, label, language, showLineNumbers, copyable, style, ...rest }: CodeBlockProps): react.JSX.Element;
+
+export { CodeBlock, type CodeBlockProps };

package/dist/components/data/CodeBlock.mjs

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/data/CodeBlock.tsx
+function highlight(line) {
+  const out = [];
+  const re = /("(?:[^"\\]|\\.)*"\s*:)|("(?:[^"\\]|\\.)*")|(\b-?\d+(?:\.\d+)?\b)|(\b(?:true|false|null|GET|POST|PUT|DELETE)\b)|([{}[\],:])/g;
+  let last = 0;
+  let match;
+  while ((match = re.exec(line)) !== null) {
+    if (match.index > last) out.push({ t: line.slice(last, match.index), c: "plain" });
+    if (match[1]) out.push({ t: match[1], c: "key" });
+    else if (match[2]) out.push({ t: match[2], c: "str" });
+    else if (match[3]) out.push({ t: match[3], c: "num" });
+    else if (match[4]) out.push({ t: match[4], c: "kw" });
+    else if (match[5]) out.push({ t: match[5], c: "pun" });
+    last = re.lastIndex;
+  }
+  if (last < line.length) out.push({ t: line.slice(last), c: "plain" });
+  return out;
+}
+var COLOR = { plain: "#cdd0d8", key: "#7fd1c0", str: "#e0a96d", num: "#8fb3ff", kw: "#c98aff", pun: "#8a91a3" };
+function CodeBlock({ code = "", label, language = "json", showLineNumbers = true, copyable = true, style, ...rest }) {
+  const [copied, setCopied] = useState(false);
+  const lines = String(code).replace(/\n$/, "").split("\n");
+  const copy = () => {
+    try {
+      navigator.clipboard?.writeText(code);
+    } catch {
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1400);
+  };
+  return /* @__PURE__ */ jsxs("div", { ...rest, style: {
+    background: "var(--dt-code-bg)",
+    border: "1px solid var(--dt-code-border)",
+    borderRadius: "var(--dt-radius-lg)",
+    overflow: "hidden",
+    ...style
+  }, children: [
+    label || copyable ? /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: "9px 12px",
+      borderBottom: "1px solid var(--dt-code-border)"
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "#8a91a3" }, children: label || language }),
+      copyable ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: copy,
+          style: {
+            marginLeft: "auto",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "none",
+            background: "transparent",
+            color: copied ? "#34d399" : "#8a91a3",
+            cursor: "pointer",
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 11,
+            fontWeight: 600,
+            padding: 0
+          },
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            "\uBCF5\uC0AC\uB428"
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+            ] }),
+            "\uBCF5\uC0AC"
+          ] })
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { style: { padding: "12px 0", overflowX: "auto" }, children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: showLineNumbers ? "38px 1fr" : "1fr", fontFamily: "var(--dt-font-mono)", fontSize: 12.5, lineHeight: 1.75 }, children: [
+      showLineNumbers ? /* @__PURE__ */ jsx("span", { style: { textAlign: "right", paddingRight: 14, color: "#5a6273", userSelect: "none" }, children: index + 1 }) : null,
+      /* @__PURE__ */ jsx("code", { style: { color: COLOR.plain, whiteSpace: "pre", paddingRight: 14 }, children: highlight(line).map((segment, segmentIndex) => /* @__PURE__ */ jsx("span", { style: { color: COLOR[segment.c] }, children: segment.t }, segmentIndex)) })
+    ] }, index)) })
+  ] });
+}
+
+export { CodeBlock };
+//# sourceMappingURL=CodeBlock.mjs.map
+//# sourceMappingURL=CodeBlock.mjs.map