@bridger-kr/react 0.1.0

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

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface FilterChipProps {
+    label: string;
+    /** Trailing count, rendered tabular-mono. */
+    count?: number;
+    active?: boolean;
+    removable?: boolean;
+    onToggle?: () => void;
+    onRemove?: () => void;
+    icon?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * FilterChip — a toggleable filter / tag for catalog facets (분야, 프로토콜, 상태).
+ * Crisp small-radius tag with a hairline, NOT a rounded-full cushion. Active =
+ * persimmon tint + border + bold. Optional count (mono) and a removable ✕.
+ * @startingPoint section="Core" subtitle="Toggleable catalog filter" viewport="520x80"
+ */
+declare function FilterChip({ label, count, active, removable, onToggle, onRemove, icon, style }: FilterChipProps): react.JSX.Element;
+
+export { FilterChip, type FilterChipProps };

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

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface FilterChipProps {
+    label: string;
+    /** Trailing count, rendered tabular-mono. */
+    count?: number;
+    active?: boolean;
+    removable?: boolean;
+    onToggle?: () => void;
+    onRemove?: () => void;
+    icon?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * FilterChip — a toggleable filter / tag for catalog facets (분야, 프로토콜, 상태).
+ * Crisp small-radius tag with a hairline, NOT a rounded-full cushion. Active =
+ * persimmon tint + border + bold. Optional count (mono) and a removable ✕.
+ * @startingPoint section="Core" subtitle="Toggleable catalog filter" viewport="520x80"
+ */
+declare function FilterChip({ label, count, active, removable, onToggle, onRemove, icon, style }: FilterChipProps): react.JSX.Element;
+
+export { FilterChip, type FilterChipProps };

package/dist/components/core/FilterChip.mjs

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/core/FilterChip.tsx
+function FilterChip({ label, count, active = false, removable = false, onToggle, onRemove, icon, style }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-pressed": active,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 7,
+        height: 30,
+        padding: "0 10px",
+        borderRadius: "var(--dt-radius-sm)",
+        cursor: "pointer",
+        fontFamily: "var(--dt-font-sans)",
+        fontSize: 13,
+        fontWeight: active ? 650 : 500,
+        background: active ? "var(--dt-tint-accent)" : "var(--dt-surface)",
+        color: active ? "var(--dt-accent)" : "var(--dt-muted-strong)",
+        boxShadow: `inset 0 0 0 1px ${active ? "color-mix(in srgb, var(--dt-accent) 40%, transparent)" : "var(--dt-border-strong)"}`,
+        transition: "background-color var(--dt-motion-fast), box-shadow var(--dt-motion-fast)",
+        ...style
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", color: active ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { children: label }),
+        count != null ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, fontWeight: 600, color: active ? "var(--dt-accent)" : "var(--dt-muted)", fontVariantNumeric: "tabular-nums" }, children: count }) : null,
+        removable ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "button",
+            "aria-label": "\uC81C\uAC70",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove?.();
+            },
+            style: { display: "inline-flex", marginRight: -2, color: active ? "var(--dt-accent)" : "var(--dt-muted)" },
+            children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { FilterChip };
+//# sourceMappingURL=FilterChip.mjs.map
+//# sourceMappingURL=FilterChip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/FilterChip.tsx"],"names":[],"mappings":";;;AAoBO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,KAAA,EAAO,MAAA,GAAS,KAAA,EAAO,SAAA,GAAY,KAAA,EAAO,QAAA,EAAU,QAAA,EAAU,IAAA,EAAM,KAAA,EAAM,EAAoB;AAChI,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,QAAA;AAAA,MACT,cAAA,EAAc,MAAA;AAAA,MACd,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,aAAA;AAAA,QAAe,UAAA,EAAY,QAAA;AAAA,QAAU,GAAA,EAAK,CAAA;AAAA,QAAG,MAAA,EAAQ,EAAA;AAAA,QAAI,OAAA,EAAS,QAAA;AAAA,QAC3E,YAAA,EAAc,qBAAA;AAAA,QAAuB,MAAA,EAAQ,SAAA;AAAA,QAC7C,UAAA,EAAY,qBAAA;AAAA,QAAuB,QAAA,EAAU,EAAA;AAAA,QAAI,UAAA,EAAY,SAAS,GAAA,GAAM,GAAA;AAAA,QAC5E,UAAA,EAAY,SAAS,uBAAA,GAA0B,mBAAA;AAAA,QAC/C,KAAA,EAAO,SAAS,kBAAA,GAAqB,wBAAA;AAAA,QACrC,SAAA,EAAW,CAAA,gBAAA,EAAmB,MAAA,GAAS,uDAAA,GAA0D,yBAAyB,CAAA,CAAA;AAAA,QAC1H,UAAA,EAAY,0EAAA;AAAA,QACZ,GAAG;AAAA,OACL;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,SAAS,aAAA,EAAe,KAAA,EAAO,MAAA,GAAS,kBAAA,GAAqB,iBAAA,EAAkB,EAAG,aAAA,EAAY,MAAA,EAAQ,gBAAK,CAAA,GAAU,IAAA;AAAA,wBAC5I,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACZ,KAAA,IAAS,uBACR,GAAA,CAAC,MAAA,EAAA,EAAK,OAAO,EAAE,UAAA,EAAY,uBAAuB,QAAA,EAAU,EAAA,EAAI,YAAY,GAAA,EAAK,KAAA,EAAO,SAAS,kBAAA,GAAqB,iBAAA,EAAmB,oBAAoB,cAAA,EAAe,EAAI,iBAAM,CAAA,GACpL,IAAA;AAAA,QACH,SAAA,mBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAAS,YAAA,EAAW,cAAA;AAAA,YACzB,OAAA,EAAS,CAAC,CAAA,KAAM;AAAE,cAAA,CAAA,CAAE,eAAA,EAAgB;AAAG,cAAA,QAAA,IAAW;AAAA,YAAG,CAAA;AAAA,YACrD,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAe,aAAa,EAAA,EAAI,KAAA,EAAO,MAAA,GAAS,kBAAA,GAAqB,iBAAA,EAAkB;AAAA,YAEzG,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAY,QAAO,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,sBAAA,EAAuB,MAAA,EAAO,gBAAe,WAAA,EAAY,KAAA,EAAM,aAAA,EAAc,OAAA,EAAQ,CAAA,EAAE;AAAA;AAAA,SAChL,GACE;AAAA;AAAA;AAAA,GACN;AAEJ","file":"FilterChip.mjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nexport interface FilterChipProps {\n  label: string;\n  /** Trailing count, rendered tabular-mono. */\n  count?: number;\n  active?: boolean;\n  removable?: boolean;\n  onToggle?: () => void;\n  onRemove?: () => void;\n  icon?: ReactNode;\n  style?: CSSProperties;\n}\n\n/**\n * FilterChip — a toggleable filter / tag for catalog facets (분야, 프로토콜, 상태).\n * Crisp small-radius tag with a hairline, NOT a rounded-full cushion. Active =\n * persimmon tint + border + bold. Optional count (mono) and a removable ✕.\n * @startingPoint section=\"Core\" subtitle=\"Toggleable catalog filter\" viewport=\"520x80\"\n */\nexport function FilterChip({ label, count, active = false, removable = false, onToggle, onRemove, icon, style }: FilterChipProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      aria-pressed={active}\n      style={{\n        display: 'inline-flex', alignItems: 'center', gap: 7, height: 30, padding: '0 10px',\n        borderRadius: 'var(--dt-radius-sm)', cursor: 'pointer',\n        fontFamily: 'var(--dt-font-sans)', fontSize: 13, fontWeight: active ? 650 : 500,\n        background: active ? 'var(--dt-tint-accent)' : 'var(--dt-surface)',\n        color: active ? 'var(--dt-accent)' : 'var(--dt-muted-strong)',\n        boxShadow: `inset 0 0 0 1px ${active ? 'color-mix(in srgb, var(--dt-accent) 40%, transparent)' : 'var(--dt-border-strong)'}`,\n        transition: 'background-color var(--dt-motion-fast), box-shadow var(--dt-motion-fast)',\n        ...style,\n      }}\n    >\n      {icon ? <span style={{ display: 'inline-flex', color: active ? 'var(--dt-accent)' : 'var(--dt-muted)' }} aria-hidden=\"true\">{icon}</span> : null}\n      <span>{label}</span>\n      {count != null ? (\n        <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600, color: active ? 'var(--dt-accent)' : 'var(--dt-muted)', fontVariantNumeric: 'tabular-nums' }}>{count}</span>\n      ) : null}\n      {removable ? (\n        <span\n          role=\"button\" aria-label=\"제거\"\n          onClick={(e) => { e.stopPropagation(); onRemove?.(); }}\n          style={{ display: 'inline-flex', marginRight: -2, color: active ? 'var(--dt-accent)' : 'var(--dt-muted)' }}\n        >\n          <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" /></svg>\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"]}

package/dist/components/core/Input.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/core/Input.tsx
+function Input({
+  label,
+  hint,
+  mono = false,
+  id,
+  type = "text",
+  prefix = null,
+  invalid = false,
+  style,
+  ...rest
+}) {
+  const inputId = id || (label ? `in-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 8 }, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" },
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: invalid ? "dt-field dt-field-invalid" : "dt-field",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "0 12px"
+        },
+        children: [
+          prefix ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--dt-muted)", display: "inline-flex" }, children: prefix }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: inputId,
+              type,
+              style: {
+                flex: 1,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                color: "var(--dt-ink-strong)",
+                padding: "11px 0",
+                fontFamily: mono ? "var(--dt-font-mono)" : "var(--dt-font-sans)",
+                fontSize: mono ? 13 : 14,
+                ...style
+              },
+              ...rest
+            }
+          )
+        ]
+      }
+    ),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+exports.Input = Input;
+//# sourceMappingURL=Input.cjs.map
+//# sourceMappingURL=Input.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Input.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAiBO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,EAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,MAAA,GAAS,IAAA;AAAA,EACT,OAAA,GAAU,KAAA;AAAA,EACV,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,OAAA,GAAU,OAAO,KAAA,GAAQ,CAAA,GAAA,EAAM,MAAM,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAC,CAAA,CAAA,GAAK,MAAA,CAAA;AACpE,EAAA,uBACEA,eAAA,CAAC,SAAI,KAAA,EAAO,EAAE,SAAS,MAAA,EAAQ,GAAA,EAAK,GAAE,EACnC,QAAA,EAAA;AAAA,IAAA,KAAA,mBACCC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,OAAA;AAAA,QACT,OAAO,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,GAAA,EAAK,OAAO,wBAAA,EAAyB;AAAA,QAEvE,QAAA,EAAA;AAAA;AAAA,KACH,GACE,IAAA;AAAA,oBACJD,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,UAAU,2BAAA,GAA8B,UAAA;AAAA,QACnD,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,GAAA,EAAK,CAAA;AAAA,UACL,OAAA,EAAS;AAAA,SACX;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,MAAA,mBAASC,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,mBAAmB,OAAA,EAAS,aAAA,EAAc,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAU,IAAA;AAAA,0BAC/FA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,OAAA;AAAA,cACJ,IAAA;AAAA,cACA,KAAA,EAAO;AAAA,gBACL,IAAA,EAAM,CAAA;AAAA,gBACN,MAAA,EAAQ,MAAA;AAAA,gBACR,OAAA,EAAS,MAAA;AAAA,gBACT,UAAA,EAAY,aAAA;AAAA,gBACZ,KAAA,EAAO,sBAAA;AAAA,gBACP,OAAA,EAAS,QAAA;AAAA,gBACT,UAAA,EAAY,OAAO,qBAAA,GAAwB,qBAAA;AAAA,gBAC3C,QAAA,EAAU,OAAO,EAAA,GAAK,EAAA;AAAA,gBACtB,GAAG;AAAA,eACL;AAAA,cACC,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,KACF;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":"Input.cjs","sourcesContent":["import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'style'> {\n  label?: string;\n  hint?: string;\n  /** Render the value in JetBrains Mono — for API paths, keys, IDs. */\n  mono?: boolean;\n  /** Leading adornment (icon or short text). */\n  prefix?: ReactNode;\n  invalid?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Compact labeled input, paired with a label or table context. Supports a\n * mono variant for API paths / keys / IDs.\n */\nexport function Input({\n  label,\n  hint,\n  mono = false,\n  id,\n  type = 'text',\n  prefix = null,\n  invalid = false,\n  style,\n  ...rest\n}: InputProps) {\n  const inputId = id || (label ? `in-${label.replace(/\\s+/g, '-')}` : undefined);\n  return (\n    <div style={{ display: 'grid', gap: 8 }}>\n      {label ? (\n        <label\n          htmlFor={inputId}\n          style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}\n        >\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={invalid ? 'dt-field dt-field-invalid' : 'dt-field'}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 8,\n          padding: '0 12px',\n        }}\n      >\n        {prefix ? <span style={{ color: 'var(--dt-muted)', display: 'inline-flex' }}>{prefix}</span> : null}\n        <input\n          id={inputId}\n          type={type}\n          style={{\n            flex: 1,\n            border: 'none',\n            outline: 'none',\n            background: 'transparent',\n            color: 'var(--dt-ink-strong)',\n            padding: '11px 0',\n            fontFamily: mono ? 'var(--dt-font-mono)' : 'var(--dt-font-sans)',\n            fontSize: mono ? 13 : 14,\n            ...style,\n          }}\n          {...rest}\n        />\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'style'> {
+    label?: string;
+    hint?: string;
+    /** Render the value in JetBrains Mono — for API paths, keys, IDs. */
+    mono?: boolean;
+    /** Leading adornment (icon or short text). */
+    prefix?: ReactNode;
+    invalid?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Compact labeled input, paired with a label or table context. Supports a
+ * mono variant for API paths / keys / IDs.
+ */
+declare function Input({ label, hint, mono, id, type, prefix, invalid, style, ...rest }: InputProps): react.JSX.Element;
+
+export { Input, type InputProps };

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'style'> {
+    label?: string;
+    hint?: string;
+    /** Render the value in JetBrains Mono — for API paths, keys, IDs. */
+    mono?: boolean;
+    /** Leading adornment (icon or short text). */
+    prefix?: ReactNode;
+    invalid?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Compact labeled input, paired with a label or table context. Supports a
+ * mono variant for API paths / keys / IDs.
+ */
+declare function Input({ label, hint, mono, id, type, prefix, invalid, style, ...rest }: InputProps): react.JSX.Element;
+
+export { Input, type InputProps };

package/dist/components/core/Input.mjs

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/core/Input.tsx
+function Input({
+  label,
+  hint,
+  mono = false,
+  id,
+  type = "text",
+  prefix = null,
+  invalid = false,
+  style,
+  ...rest
+}) {
+  const inputId = id || (label ? `in-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8 }, children: [
+    label ? /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" },
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: invalid ? "dt-field dt-field-invalid" : "dt-field",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "0 12px"
+        },
+        children: [
+          prefix ? /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-muted)", display: "inline-flex" }, children: prefix }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type,
+              style: {
+                flex: 1,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                color: "var(--dt-ink-strong)",
+                padding: "11px 0",
+                fontFamily: mono ? "var(--dt-font-mono)" : "var(--dt-font-sans)",
+                fontSize: mono ? 13 : 14,
+                ...style
+              },
+              ...rest
+            }
+          )
+        ]
+      }
+    ),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+export { Input };
+//# sourceMappingURL=Input.mjs.map
+//# sourceMappingURL=Input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Input.tsx"],"names":[],"mappings":";;;AAiBO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,EAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,MAAA,GAAS,IAAA;AAAA,EACT,OAAA,GAAU,KAAA;AAAA,EACV,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,OAAA,GAAU,OAAO,KAAA,GAAQ,CAAA,GAAA,EAAM,MAAM,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAC,CAAA,CAAA,GAAK,MAAA,CAAA;AACpE,EAAA,uBACE,IAAA,CAAC,SAAI,KAAA,EAAO,EAAE,SAAS,MAAA,EAAQ,GAAA,EAAK,GAAE,EACnC,QAAA,EAAA;AAAA,IAAA,KAAA,mBACC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,OAAA;AAAA,QACT,OAAO,EAAE,QAAA,EAAU,IAAI,UAAA,EAAY,GAAA,EAAK,OAAO,wBAAA,EAAyB;AAAA,QAEvE,QAAA,EAAA;AAAA;AAAA,KACH,GACE,IAAA;AAAA,oBACJ,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,UAAU,2BAAA,GAA8B,UAAA;AAAA,QACnD,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,GAAA,EAAK,CAAA;AAAA,UACL,OAAA,EAAS;AAAA,SACX;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,MAAA,mBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,mBAAmB,OAAA,EAAS,aAAA,EAAc,EAAI,QAAA,EAAA,MAAA,EAAO,CAAA,GAAU,IAAA;AAAA,0BAC/F,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,OAAA;AAAA,cACJ,IAAA;AAAA,cACA,KAAA,EAAO;AAAA,gBACL,IAAA,EAAM,CAAA;AAAA,gBACN,MAAA,EAAQ,MAAA;AAAA,gBACR,OAAA,EAAS,MAAA;AAAA,gBACT,UAAA,EAAY,aAAA;AAAA,gBACZ,KAAA,EAAO,sBAAA;AAAA,gBACP,OAAA,EAAS,QAAA;AAAA,gBACT,UAAA,EAAY,OAAO,qBAAA,GAAwB,qBAAA;AAAA,gBAC3C,QAAA,EAAU,OAAO,EAAA,GAAK,EAAA;AAAA,gBACtB,GAAG;AAAA,eACL;AAAA,cACC,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,KACF;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":"Input.mjs","sourcesContent":["import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'style'> {\n  label?: string;\n  hint?: string;\n  /** Render the value in JetBrains Mono — for API paths, keys, IDs. */\n  mono?: boolean;\n  /** Leading adornment (icon or short text). */\n  prefix?: ReactNode;\n  invalid?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Compact labeled input, paired with a label or table context. Supports a\n * mono variant for API paths / keys / IDs.\n */\nexport function Input({\n  label,\n  hint,\n  mono = false,\n  id,\n  type = 'text',\n  prefix = null,\n  invalid = false,\n  style,\n  ...rest\n}: InputProps) {\n  const inputId = id || (label ? `in-${label.replace(/\\s+/g, '-')}` : undefined);\n  return (\n    <div style={{ display: 'grid', gap: 8 }}>\n      {label ? (\n        <label\n          htmlFor={inputId}\n          style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}\n        >\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={invalid ? 'dt-field dt-field-invalid' : 'dt-field'}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 8,\n          padding: '0 12px',\n        }}\n      >\n        {prefix ? <span style={{ color: 'var(--dt-muted)', display: 'inline-flex' }}>{prefix}</span> : null}\n        <input\n          id={inputId}\n          type={type}\n          style={{\n            flex: 1,\n            border: 'none',\n            outline: 'none',\n            background: 'transparent',\n            color: 'var(--dt-ink-strong)',\n            padding: '11px 0',\n            fontFamily: mono ? 'var(--dt-font-mono)' : 'var(--dt-font-sans)',\n            fontSize: mono ? 13 : 14,\n            ...style,\n          }}\n          {...rest}\n        />\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/core/StatusPill.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/core/StatusPill.tsx
+var STATUS = {
+  connected: { bg: "var(--dt-tint-success)", fg: "var(--dt-success)" },
+  success: { bg: "var(--dt-tint-success)", fg: "var(--dt-success)" },
+  reconnecting: { bg: "var(--dt-tint-warning)", fg: "var(--dt-warning)" },
+  warning: { bg: "var(--dt-tint-warning)", fg: "var(--dt-warning)" },
+  disconnected: { bg: "var(--dt-tint-danger)", fg: "var(--dt-danger)" },
+  danger: { bg: "var(--dt-tint-danger)", fg: "var(--dt-danger)" },
+  info: { bg: "var(--dt-tint-cobalt)", fg: "var(--dt-info)" },
+  idle: { bg: "var(--dt-tint-muted)", fg: "var(--dt-muted-strong)" }
+};
+function StatusPill({ status = "idle", children, pulse = false, style, ...rest }) {
+  const tone = STATUS[status] ?? STATUS.idle;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        borderRadius: "var(--dt-radius-full)",
+        background: tone.bg,
+        padding: "4px 10px",
+        fontSize: 12,
+        fontWeight: 600,
+        color: tone.fg,
+        ...style
+      },
+      ...rest,
+      children: [
+        pulse ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: "9999px",
+              background: tone.fg,
+              animation: "dt-status-pulse 1.6s var(--dt-ease) infinite"
+            }
+          }
+        ) : null,
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: "@keyframes dt-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}" })
+      ]
+    }
+  );
+}
+
+exports.StatusPill = StatusPill;
+//# sourceMappingURL=StatusPill.cjs.map
+//# sourceMappingURL=StatusPill.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/StatusPill.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAEA,IAAM,MAAA,GAAS;AAAA,EACb,SAAA,EAAW,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACnE,OAAA,EAAS,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACjE,YAAA,EAAc,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACtE,OAAA,EAAS,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACjE,YAAA,EAAc,EAAE,EAAA,EAAI,uBAAA,EAAyB,IAAI,kBAAA,EAAmB;AAAA,EACpE,MAAA,EAAQ,EAAE,EAAA,EAAI,uBAAA,EAAyB,IAAI,kBAAA,EAAmB;AAAA,EAC9D,IAAA,EAAM,EAAE,EAAA,EAAI,uBAAA,EAAyB,IAAI,gBAAA,EAAiB;AAAA,EAC1D,IAAA,EAAM,EAAE,EAAA,EAAI,sBAAA,EAAwB,IAAI,wBAAA;AAC1C,CAAA;AAgBO,SAAS,UAAA,CAAW,EAAE,MAAA,GAAS,MAAA,EAAQ,QAAA,EAAU,QAAQ,KAAA,EAAO,KAAA,EAAO,GAAG,IAAA,EAAK,EAAoB;AACxG,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,MAAM,CAAA,IAAK,MAAA,CAAO,IAAA;AACtC,EAAA,uBACEA,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,aAAA;AAAA,QACT,UAAA,EAAY,QAAA;AAAA,QACZ,GAAA,EAAK,CAAA;AAAA,QACL,YAAA,EAAc,uBAAA;AAAA,QACd,YAAY,IAAA,CAAK,EAAA;AAAA,QACjB,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,EAAA;AAAA,QACV,UAAA,EAAY,GAAA;AAAA,QACZ,OAAO,IAAA,CAAK,EAAA;AAAA,QACZ,GAAG;AAAA,OACL;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,mBACCC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,CAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,YAAA,EAAc,QAAA;AAAA,cACd,YAAY,IAAA,CAAK,EAAA;AAAA,cACjB,SAAA,EAAW;AAAA;AACb;AAAA,SACF,GACE,IAAA;AAAA,QACH,QAAA;AAAA,wBACDA,cAAA,CAAC,WAAO,QAAA,EAAA,gEAAA,EAAiE;AAAA;AAAA;AAAA,GAC3E;AAEJ","file":"StatusPill.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nconst STATUS = {\n  connected: { bg: 'var(--dt-tint-success)', fg: 'var(--dt-success)' },\n  success: { bg: 'var(--dt-tint-success)', fg: 'var(--dt-success)' },\n  reconnecting: { bg: 'var(--dt-tint-warning)', fg: 'var(--dt-warning)' },\n  warning: { bg: 'var(--dt-tint-warning)', fg: 'var(--dt-warning)' },\n  disconnected: { bg: 'var(--dt-tint-danger)', fg: 'var(--dt-danger)' },\n  danger: { bg: 'var(--dt-tint-danger)', fg: 'var(--dt-danger)' },\n  info: { bg: 'var(--dt-tint-cobalt)', fg: 'var(--dt-info)' },\n  idle: { bg: 'var(--dt-tint-muted)', fg: 'var(--dt-muted-strong)' },\n};\n\nexport interface StatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {\n  /** Semantic state — drives the dot color. */\n  status?: 'connected' | 'success' | 'reconnecting' | 'warning' | 'disconnected' | 'danger' | 'info' | 'idle';\n  children?: ReactNode;\n  /** Pulse the dot (use for transient states like reconnecting). */\n  pulse?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Compact status pill: a tinted fill carrying a colored label — the console's\n * most-used status affordance (gateway / stream state). No outline, no dot;\n * an optional pulse marker appears only for live (`pulse`) states.\n */\nexport function StatusPill({ status = 'idle', children, pulse = false, style, ...rest }: StatusPillProps) {\n  const tone = STATUS[status] ?? STATUS.idle;\n  return (\n    <span\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 6,\n        borderRadius: 'var(--dt-radius-full)',\n        background: tone.bg,\n        padding: '4px 10px',\n        fontSize: 12,\n        fontWeight: 600,\n        color: tone.fg,\n        ...style,\n      }}\n      {...rest}\n    >\n      {pulse ? (\n        <span\n          aria-hidden=\"true\"\n          style={{\n            width: 7,\n            height: 7,\n            borderRadius: '9999px',\n            background: tone.fg,\n            animation: 'dt-status-pulse 1.6s var(--dt-ease) infinite',\n          }}\n        />\n      ) : null}\n      {children}\n      <style>{'@keyframes dt-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}'}</style>\n    </span>\n  );\n}\n"]}

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface StatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    /** Semantic state — drives the dot color. */
+    status?: 'connected' | 'success' | 'reconnecting' | 'warning' | 'disconnected' | 'danger' | 'info' | 'idle';
+    children?: ReactNode;
+    /** Pulse the dot (use for transient states like reconnecting). */
+    pulse?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Compact status pill: a tinted fill carrying a colored label — the console's
+ * most-used status affordance (gateway / stream state). No outline, no dot;
+ * an optional pulse marker appears only for live (`pulse`) states.
+ */
+declare function StatusPill({ status, children, pulse, style, ...rest }: StatusPillProps): react.JSX.Element;
+
+export { StatusPill, type StatusPillProps };

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface StatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    /** Semantic state — drives the dot color. */
+    status?: 'connected' | 'success' | 'reconnecting' | 'warning' | 'disconnected' | 'danger' | 'info' | 'idle';
+    children?: ReactNode;
+    /** Pulse the dot (use for transient states like reconnecting). */
+    pulse?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Compact status pill: a tinted fill carrying a colored label — the console's
+ * most-used status affordance (gateway / stream state). No outline, no dot;
+ * an optional pulse marker appears only for live (`pulse`) states.
+ */
+declare function StatusPill({ status, children, pulse, style, ...rest }: StatusPillProps): react.JSX.Element;
+
+export { StatusPill, type StatusPillProps };

package/dist/components/core/StatusPill.mjs

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/core/StatusPill.tsx
+var STATUS = {
+  connected: { bg: "var(--dt-tint-success)", fg: "var(--dt-success)" },
+  success: { bg: "var(--dt-tint-success)", fg: "var(--dt-success)" },
+  reconnecting: { bg: "var(--dt-tint-warning)", fg: "var(--dt-warning)" },
+  warning: { bg: "var(--dt-tint-warning)", fg: "var(--dt-warning)" },
+  disconnected: { bg: "var(--dt-tint-danger)", fg: "var(--dt-danger)" },
+  danger: { bg: "var(--dt-tint-danger)", fg: "var(--dt-danger)" },
+  info: { bg: "var(--dt-tint-cobalt)", fg: "var(--dt-info)" },
+  idle: { bg: "var(--dt-tint-muted)", fg: "var(--dt-muted-strong)" }
+};
+function StatusPill({ status = "idle", children, pulse = false, style, ...rest }) {
+  const tone = STATUS[status] ?? STATUS.idle;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        borderRadius: "var(--dt-radius-full)",
+        background: tone.bg,
+        padding: "4px 10px",
+        fontSize: 12,
+        fontWeight: 600,
+        color: tone.fg,
+        ...style
+      },
+      ...rest,
+      children: [
+        pulse ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: 7,
+              height: 7,
+              borderRadius: "9999px",
+              background: tone.fg,
+              animation: "dt-status-pulse 1.6s var(--dt-ease) infinite"
+            }
+          }
+        ) : null,
+        children,
+        /* @__PURE__ */ jsx("style", { children: "@keyframes dt-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}" })
+      ]
+    }
+  );
+}
+
+export { StatusPill };
+//# sourceMappingURL=StatusPill.mjs.map
+//# sourceMappingURL=StatusPill.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/StatusPill.tsx"],"names":[],"mappings":";;;AAEA,IAAM,MAAA,GAAS;AAAA,EACb,SAAA,EAAW,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACnE,OAAA,EAAS,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACjE,YAAA,EAAc,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACtE,OAAA,EAAS,EAAE,EAAA,EAAI,wBAAA,EAA0B,IAAI,mBAAA,EAAoB;AAAA,EACjE,YAAA,EAAc,EAAE,EAAA,EAAI,uBAAA,EAAyB,IAAI,kBAAA,EAAmB;AAAA,EACpE,MAAA,EAAQ,EAAE,EAAA,EAAI,uBAAA,EAAyB,IAAI,kBAAA,EAAmB;AAAA,EAC9D,IAAA,EAAM,EAAE,EAAA,EAAI,uBAAA,EAAyB,IAAI,gBAAA,EAAiB;AAAA,EAC1D,IAAA,EAAM,EAAE,EAAA,EAAI,sBAAA,EAAwB,IAAI,wBAAA;AAC1C,CAAA;AAgBO,SAAS,UAAA,CAAW,EAAE,MAAA,GAAS,MAAA,EAAQ,QAAA,EAAU,QAAQ,KAAA,EAAO,KAAA,EAAO,GAAG,IAAA,EAAK,EAAoB;AACxG,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,MAAM,CAAA,IAAK,MAAA,CAAO,IAAA;AACtC,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,aAAA;AAAA,QACT,UAAA,EAAY,QAAA;AAAA,QACZ,GAAA,EAAK,CAAA;AAAA,QACL,YAAA,EAAc,uBAAA;AAAA,QACd,YAAY,IAAA,CAAK,EAAA;AAAA,QACjB,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,EAAA;AAAA,QACV,UAAA,EAAY,GAAA;AAAA,QACZ,OAAO,IAAA,CAAK,EAAA;AAAA,QACZ,GAAG;AAAA,OACL;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,mBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,CAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,YAAA,EAAc,QAAA;AAAA,cACd,YAAY,IAAA,CAAK,EAAA;AAAA,cACjB,SAAA,EAAW;AAAA;AACb;AAAA,SACF,GACE,IAAA;AAAA,QACH,QAAA;AAAA,wBACD,GAAA,CAAC,WAAO,QAAA,EAAA,gEAAA,EAAiE;AAAA;AAAA;AAAA,GAC3E;AAEJ","file":"StatusPill.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nconst STATUS = {\n  connected: { bg: 'var(--dt-tint-success)', fg: 'var(--dt-success)' },\n  success: { bg: 'var(--dt-tint-success)', fg: 'var(--dt-success)' },\n  reconnecting: { bg: 'var(--dt-tint-warning)', fg: 'var(--dt-warning)' },\n  warning: { bg: 'var(--dt-tint-warning)', fg: 'var(--dt-warning)' },\n  disconnected: { bg: 'var(--dt-tint-danger)', fg: 'var(--dt-danger)' },\n  danger: { bg: 'var(--dt-tint-danger)', fg: 'var(--dt-danger)' },\n  info: { bg: 'var(--dt-tint-cobalt)', fg: 'var(--dt-info)' },\n  idle: { bg: 'var(--dt-tint-muted)', fg: 'var(--dt-muted-strong)' },\n};\n\nexport interface StatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {\n  /** Semantic state — drives the dot color. */\n  status?: 'connected' | 'success' | 'reconnecting' | 'warning' | 'disconnected' | 'danger' | 'info' | 'idle';\n  children?: ReactNode;\n  /** Pulse the dot (use for transient states like reconnecting). */\n  pulse?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Compact status pill: a tinted fill carrying a colored label — the console's\n * most-used status affordance (gateway / stream state). No outline, no dot;\n * an optional pulse marker appears only for live (`pulse`) states.\n */\nexport function StatusPill({ status = 'idle', children, pulse = false, style, ...rest }: StatusPillProps) {\n  const tone = STATUS[status] ?? STATUS.idle;\n  return (\n    <span\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 6,\n        borderRadius: 'var(--dt-radius-full)',\n        background: tone.bg,\n        padding: '4px 10px',\n        fontSize: 12,\n        fontWeight: 600,\n        color: tone.fg,\n        ...style,\n      }}\n      {...rest}\n    >\n      {pulse ? (\n        <span\n          aria-hidden=\"true\"\n          style={{\n            width: 7,\n            height: 7,\n            borderRadius: '9999px',\n            background: tone.fg,\n            animation: 'dt-status-pulse 1.6s var(--dt-ease) infinite',\n          }}\n        />\n      ) : null}\n      {children}\n      <style>{'@keyframes dt-status-pulse{0%,100%{opacity:1}50%{opacity:.35}}'}</style>\n    </span>\n  );\n}\n"]}

package/dist/components/core/Surface.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var SurfaceTone = {
+  Default: "default",
+  Raised: "raised",
+  Sunken: "sunken"
+};
+var MetricAccent = {
+  Accent: "accent",
+  Success: "success",
+  Info: "info"
+};
+var surfaceToneClass = {
+  [SurfaceTone.Default]: "bg-[var(--dt-surface)]",
+  [SurfaceTone.Raised]: "bg-[var(--dt-surface-raised)]",
+  [SurfaceTone.Sunken]: "bg-[var(--dt-surface-sunken)]"
+};
+var metricAccentClass = {
+  [MetricAccent.Accent]: "text-[var(--dt-accent)]",
+  [MetricAccent.Success]: "text-[var(--dt-success)]",
+  [MetricAccent.Info]: "text-[var(--dt-info)]"
+};
+function Panel({ tone = SurfaceTone.Default, className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: cx(
+        "rounded-dtLg border border-[var(--dt-border)] px-5 py-5 md:px-6 md:py-6",
+        surfaceToneClass[tone],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function metricAccentColor(accent) {
+  return metricAccentClass[accent];
+}
+
+exports.MetricAccent = MetricAccent;
+exports.Panel = Panel;
+exports.SurfaceTone = SurfaceTone;
+exports.metricAccentColor = metricAccentColor;
+//# sourceMappingURL=Surface.cjs.map
+//# sourceMappingURL=Surface.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/core/Surface.tsx"],"names":["jsx"],"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,uBACEA,cAAA;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.cjs","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/Surface.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+declare const SurfaceTone: {
+    readonly Default: "default";
+    readonly Raised: "raised";
+    readonly Sunken: "sunken";
+};
+type SurfaceTone = (typeof SurfaceTone)[keyof typeof SurfaceTone];
+declare const MetricAccent: {
+    readonly Accent: "accent";
+    readonly Success: "success";
+    readonly Info: "info";
+};
+type MetricAccent = (typeof MetricAccent)[keyof typeof MetricAccent];
+type MetricAccentName = MetricAccent;
+type PanelProps = ComponentPropsWithoutRef<'section'> & {
+    readonly tone?: SurfaceTone;
+    readonly children: ReactNode;
+};
+declare function Panel({ tone, className, children, ...props }: PanelProps): react.JSX.Element;
+declare function metricAccentColor(accent: MetricAccentName): string;
+
+export { MetricAccent, type MetricAccentName, Panel, type PanelProps, SurfaceTone, metricAccentColor };

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

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+declare const SurfaceTone: {
+    readonly Default: "default";
+    readonly Raised: "raised";
+    readonly Sunken: "sunken";
+};
+type SurfaceTone = (typeof SurfaceTone)[keyof typeof SurfaceTone];
+declare const MetricAccent: {
+    readonly Accent: "accent";
+    readonly Success: "success";
+    readonly Info: "info";
+};
+type MetricAccent = (typeof MetricAccent)[keyof typeof MetricAccent];
+type MetricAccentName = MetricAccent;
+type PanelProps = ComponentPropsWithoutRef<'section'> & {
+    readonly tone?: SurfaceTone;
+    readonly children: ReactNode;
+};
+declare function Panel({ tone, className, children, ...props }: PanelProps): react.JSX.Element;
+declare function metricAccentColor(accent: MetricAccentName): string;
+
+export { MetricAccent, type MetricAccentName, Panel, type PanelProps, SurfaceTone, metricAccentColor };

package/dist/components/core/Surface.mjs

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var SurfaceTone = {
+  Default: "default",
+  Raised: "raised",
+  Sunken: "sunken"
+};
+var MetricAccent = {
+  Accent: "accent",
+  Success: "success",
+  Info: "info"
+};
+var surfaceToneClass = {
+  [SurfaceTone.Default]: "bg-[var(--dt-surface)]",
+  [SurfaceTone.Raised]: "bg-[var(--dt-surface-raised)]",
+  [SurfaceTone.Sunken]: "bg-[var(--dt-surface-sunken)]"
+};
+var metricAccentClass = {
+  [MetricAccent.Accent]: "text-[var(--dt-accent)]",
+  [MetricAccent.Success]: "text-[var(--dt-success)]",
+  [MetricAccent.Info]: "text-[var(--dt-info)]"
+};
+function Panel({ tone = SurfaceTone.Default, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cx(
+        "rounded-dtLg border border-[var(--dt-border)] px-5 py-5 md:px-6 md:py-6",
+        surfaceToneClass[tone],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function metricAccentColor(accent) {
+  return metricAccentClass[accent];
+}
+
+export { MetricAccent, Panel, SurfaceTone, metricAccentColor };
+//# sourceMappingURL=Surface.mjs.map
+//# sourceMappingURL=Surface.mjs.map