@bridger-kr/react 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# @bridger-kr/react
+
+React component library for the Bridger Design System.
+
+Exports 40 components across six categories (core, forms, feedback, data, navigation, product) plus the `cx` class-name helper, all consumable from the package root.
+
+## Install
+
+```sh
+pnpm add @bridger-kr/react @bridger-kr/tokens react react-dom
+```
+
+## Peer Dependencies
+
+`@bridger-kr/react` expects React, React DOM 18 or newer, and `@bridger-kr/tokens`:
+
+```json
+{
+  "react": ">=18",
+  "react-dom": ">=18"
+}
+```
+
+## Usage
+
+Components are exported from the package root by category:
+
+```tsx
+import { Button, Card, CardTone, Badge, Input } from '@bridger-kr/react';
+```
+
+Per-component subpath imports are reserved for tree-shaking-friendly usage:
+
+```tsx
+import { Button } from '@bridger-kr/react/components/core/Button';
+```
+
+## CSS Setup
+
+Import the token contract once before React component styles:
+
+```ts
+import '@bridger-kr/tokens/css';
+import '@bridger-kr/react/styles.css';
+```
+
+The React stylesheet currently imports `@bridger-kr/tokens/css` too, so bundlers that preserve package CSS imports can load a single stylesheet:
+
+```ts
+import '@bridger-kr/react/styles.css';
+```
+
+If your bundler does not resolve package `@import` statements in CSS, import both `@bridger-kr/tokens/css` and `@bridger-kr/react/styles.css` in that order.
+
+## Component Categories
+
+- `core` — Badge, Button, Card, FilterChip, Input, Panel/Surface, StatusPill, Tabs
+- `forms` — Checkbox, Combobox, FileUpload, RadioGroup, SegmentedControl, Select, Slider, Switch/ToggleSwitch, Textarea
+- `feedback` — Alert, Dialog, Drawer, EmptyState, Skeleton, Spinner, Toast, Tooltip
+- `data` — Avatar, CodeBlock, KeyValue, LogRow, Pagination, StatTile, Table, UsageMeter
+- `navigation` — Breadcrumb, CommandPalette, Menu, Sidebar, Stepper
+- `product` — BrandLogo, SectionCard, ToolCard

package/dist/components/core/Badge.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/core/Badge.tsx
+var TONE_CLASS = {
+  neutral: "badge",
+  accent: "badge badge-accent",
+  info: "badge badge-info",
+  success: "badge badge-success",
+  warning: "badge badge-warning",
+  danger: "badge badge-danger"
+};
+function Badge({ children, tone = "neutral", dot = false, style, ...rest }) {
+  const cls = TONE_CLASS[tone] ?? TONE_CLASS.neutral;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cls, style, ...rest, children: [
+    dot ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          background: "currentColor",
+          display: "inline-block"
+        }
+      }
+    ) : null,
+    children
+  ] });
+}
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.cjs.map
+//# sourceMappingURL=Badge.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Badge.tsx"],"names":["jsx"],"mappings":";;;;;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,OAAA,EAAS,OAAA;AAAA,EACT,MAAA,EAAQ,oBAAA;AAAA,EACR,IAAA,EAAM,kBAAA;AAAA,EACN,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS,qBAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAeO,SAAS,KAAA,CAAM,EAAE,QAAA,EAAU,IAAA,GAAO,SAAA,EAAW,MAAM,KAAA,EAAO,KAAA,EAAO,GAAG,IAAA,EAAK,EAAe;AAC7F,EAAA,MAAM,GAAA,GAAM,UAAA,CAAW,IAAI,CAAA,IAAK,UAAA,CAAW,OAAA;AAC3C,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAW,GAAA,EAAK,KAAA,EAAe,GAAG,IAAA,EACrC,QAAA,EAAA;AAAA,IAAA,GAAA,mBACCA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,CAAA;AAAA,UACP,MAAA,EAAQ,CAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,UAAA,EAAY,cAAA;AAAA,UACZ,OAAA,EAAS;AAAA;AACX;AAAA,KACF,GACE,IAAA;AAAA,IACH;AAAA,GAAA,EACH,CAAA;AAEJ","file":"Badge.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nconst TONE_CLASS = {\n  neutral: 'badge',\n  accent: 'badge badge-accent',\n  info: 'badge badge-info',\n  success: 'badge badge-success',\n  warning: 'badge badge-warning',\n  danger: 'badge badge-danger',\n};\n\nexport interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {\n  children?: ReactNode;\n  /** Semantic tone. info/success/warning/danger are status-only. */\n  tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n  /** Show a leading status dot in the current tone color. */\n  dot?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Status / classification badge. Pill-shaped, tinted. Status or\n * classification only — never decorative.\n */\nexport function Badge({ children, tone = 'neutral', dot = false, style, ...rest }: BadgeProps) {\n  const cls = TONE_CLASS[tone] ?? TONE_CLASS.neutral;\n  return (\n    <span className={cls} style={style} {...rest}>\n      {dot ? (\n        <span\n          aria-hidden=\"true\"\n          style={{\n            width: 6,\n            height: 6,\n            borderRadius: '9999px',\n            background: 'currentColor',\n            display: 'inline-block',\n          }}\n        />\n      ) : null}\n      {children}\n    </span>\n  );\n}\n"]}

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    children?: ReactNode;
+    /** Semantic tone. info/success/warning/danger are status-only. */
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+    /** Show a leading status dot in the current tone color. */
+    dot?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Status / classification badge. Pill-shaped, tinted. Status or
+ * classification only — never decorative.
+ */
+declare function Badge({ children, tone, dot, style, ...rest }: BadgeProps): react.JSX.Element;
+
+export { Badge, type BadgeProps };

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    children?: ReactNode;
+    /** Semantic tone. info/success/warning/danger are status-only. */
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+    /** Show a leading status dot in the current tone color. */
+    dot?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Status / classification badge. Pill-shaped, tinted. Status or
+ * classification only — never decorative.
+ */
+declare function Badge({ children, tone, dot, style, ...rest }: BadgeProps): react.JSX.Element;
+
+export { Badge, type BadgeProps };

package/dist/components/core/Badge.mjs

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/core/Badge.tsx
+var TONE_CLASS = {
+  neutral: "badge",
+  accent: "badge badge-accent",
+  info: "badge badge-info",
+  success: "badge badge-success",
+  warning: "badge badge-warning",
+  danger: "badge badge-danger"
+};
+function Badge({ children, tone = "neutral", dot = false, style, ...rest }) {
+  const cls = TONE_CLASS[tone] ?? TONE_CLASS.neutral;
+  return /* @__PURE__ */ jsxs("span", { className: cls, style, ...rest, children: [
+    dot ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          background: "currentColor",
+          display: "inline-block"
+        }
+      }
+    ) : null,
+    children
+  ] });
+}
+
+export { Badge };
+//# sourceMappingURL=Badge.mjs.map
+//# sourceMappingURL=Badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Badge.tsx"],"names":[],"mappings":";;;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,OAAA,EAAS,OAAA;AAAA,EACT,MAAA,EAAQ,oBAAA;AAAA,EACR,IAAA,EAAM,kBAAA;AAAA,EACN,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS,qBAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAeO,SAAS,KAAA,CAAM,EAAE,QAAA,EAAU,IAAA,GAAO,SAAA,EAAW,MAAM,KAAA,EAAO,KAAA,EAAO,GAAG,IAAA,EAAK,EAAe;AAC7F,EAAA,MAAM,GAAA,GAAM,UAAA,CAAW,IAAI,CAAA,IAAK,UAAA,CAAW,OAAA;AAC3C,EAAA,4BACG,MAAA,EAAA,EAAK,SAAA,EAAW,GAAA,EAAK,KAAA,EAAe,GAAG,IAAA,EACrC,QAAA,EAAA;AAAA,IAAA,GAAA,mBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,CAAA;AAAA,UACP,MAAA,EAAQ,CAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,UAAA,EAAY,cAAA;AAAA,UACZ,OAAA,EAAS;AAAA;AACX;AAAA,KACF,GACE,IAAA;AAAA,IACH;AAAA,GAAA,EACH,CAAA;AAEJ","file":"Badge.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nconst TONE_CLASS = {\n  neutral: 'badge',\n  accent: 'badge badge-accent',\n  info: 'badge badge-info',\n  success: 'badge badge-success',\n  warning: 'badge badge-warning',\n  danger: 'badge badge-danger',\n};\n\nexport interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {\n  children?: ReactNode;\n  /** Semantic tone. info/success/warning/danger are status-only. */\n  tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';\n  /** Show a leading status dot in the current tone color. */\n  dot?: boolean;\n  style?: CSSProperties;\n}\n\n/**\n * Status / classification badge. Pill-shaped, tinted. Status or\n * classification only — never decorative.\n */\nexport function Badge({ children, tone = 'neutral', dot = false, style, ...rest }: BadgeProps) {\n  const cls = TONE_CLASS[tone] ?? TONE_CLASS.neutral;\n  return (\n    <span className={cls} style={style} {...rest}>\n      {dot ? (\n        <span\n          aria-hidden=\"true\"\n          style={{\n            width: 6,\n            height: 6,\n            borderRadius: '9999px',\n            background: 'currentColor',\n            display: 'inline-block',\n          }}\n        />\n      ) : null}\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/components/core/Button.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/core/Button.tsx
+var SIZE = {
+  sm: { height: 36, padding: "0 14px", fontSize: 13 },
+  md: { height: 40, padding: "0 16px", fontSize: 14 },
+  lg: { height: 48, padding: "0 20px", fontSize: 15 }
+};
+var VARIANT_CLASS = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost"
+};
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  type = "button",
+  onClick,
+  style,
+  ...rest
+}) {
+  const cls = VARIANT_CLASS[variant] ?? VARIANT_CLASS.primary;
+  const s = SIZE[size] ?? SIZE.md;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type,
+      className: cls,
+      disabled,
+      onClick,
+      style: {
+        height: s.height,
+        padding: s.padding,
+        fontSize: s.fontSize,
+        opacity: disabled ? 0.55 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex" }, "aria-hidden": "true", children: icon }) : null,
+        children,
+        iconRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex" }, "aria-hidden": "true", children: iconRight }) : null
+      ]
+    }
+  );
+}
+
+exports.Button = Button;
+//# sourceMappingURL=Button.cjs.map
+//# sourceMappingURL=Button.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Button.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAIA,IAAM,IAAA,GAAO;AAAA,EACX,IAAI,EAAE,MAAA,EAAQ,IAAI,OAAA,EAAS,QAAA,EAAU,UAAU,EAAA,EAAG;AAAA,EAClD,IAAI,EAAE,MAAA,EAAQ,IAAI,OAAA,EAAS,QAAA,EAAU,UAAU,EAAA,EAAG;AAAA,EAClD,IAAI,EAAE,MAAA,EAAQ,IAAI,OAAA,EAAS,QAAA,EAAU,UAAU,EAAA;AACjD,CAAA;AAEA,IAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,aAAA;AAAA,EACT,SAAA,EAAW,eAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAuBO,SAAS,MAAA,CAAO;AAAA,EACrB,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY,IAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,QAAA;AAAA,EACP,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,GAAA,GAAM,aAAA,CAAc,OAAO,CAAA,IAAK,aAAA,CAAc,OAAA;AACpD,EAAA,MAAM,CAAA,GAAI,IAAA,CAAK,IAAI,CAAA,IAAK,IAAA,CAAK,EAAA;AAC7B,EAAA,uBACEA,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,SAAA,EAAW,GAAA;AAAA,MACX,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACL,QAAQ,CAAA,CAAE,MAAA;AAAA,QACV,SAAS,CAAA,CAAE,OAAA;AAAA,QACX,UAAU,CAAA,CAAE,QAAA;AAAA,QACZ,OAAA,EAAS,WAAW,IAAA,GAAO,CAAA;AAAA,QAC3B,MAAA,EAAQ,WAAW,aAAA,GAAgB,SAAA;AAAA,QACnC,GAAG;AAAA,OACL;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,mBAAOC,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,eAAc,EAAG,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU,IAAA;AAAA,QACnF,QAAA;AAAA,QACA,SAAA,mBAAYA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAc,EAAG,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,SAAA,EAAU,CAAA,GAAU;AAAA;AAAA;AAAA,GAChG;AAEJ","file":"Button.cjs","sourcesContent":["import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';\n\n/* Height grid (px) per size — matches the fill-based button recipe in base.css.\n   Horizontal padding only; vertical centering comes from the fixed height. */\nconst SIZE = {\n  sm: { height: 36, padding: '0 14px', fontSize: 13 },\n  md: { height: 40, padding: '0 16px', fontSize: 14 },\n  lg: { height: 48, padding: '0 20px', fontSize: 15 },\n};\n\nconst VARIANT_CLASS = {\n  primary: 'btn-primary',\n  secondary: 'btn-secondary',\n  ghost: 'btn-ghost',\n};\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {\n  children?: ReactNode;\n  /** primary = the one strongest action; secondary = regular; ghost = low-emphasis. */\n  variant?: 'primary' | 'secondary' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  /** Lucide icon element placed before the label. */\n  icon?: ReactNode;\n  /** Lucide icon element placed after the label. */\n  iconRight?: ReactNode;\n  disabled?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  style?: CSSProperties;\n}\n\n/**\n * Bridger button. Primary is the single strongest action per screen;\n * secondary for regular actions; ghost for low-emphasis commands.\n *\n * The one strongest action per screen uses variant=\"primary\" (persimmon).\n * @startingPoint section=\"Core\" subtitle=\"Primary / secondary / ghost actions\" viewport=\"700x140\"\n */\nexport function Button({\n  children,\n  variant = 'primary',\n  size = 'md',\n  icon = null,\n  iconRight = null,\n  disabled = false,\n  type = 'button',\n  onClick,\n  style,\n  ...rest\n}: ButtonProps) {\n  const cls = VARIANT_CLASS[variant] ?? VARIANT_CLASS.primary;\n  const s = SIZE[size] ?? SIZE.md;\n  return (\n    <button\n      type={type}\n      className={cls}\n      disabled={disabled}\n      onClick={onClick}\n      style={{\n        height: s.height,\n        padding: s.padding,\n        fontSize: s.fontSize,\n        opacity: disabled ? 0.55 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        ...style,\n      }}\n      {...rest}\n    >\n      {icon ? <span style={{ display: 'inline-flex' }} aria-hidden=\"true\">{icon}</span> : null}\n      {children}\n      {iconRight ? <span style={{ display: 'inline-flex' }} aria-hidden=\"true\">{iconRight}</span> : null}\n    </button>\n  );\n}\n"]}

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

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children?: ReactNode;
+    /** primary = the one strongest action; secondary = regular; ghost = low-emphasis. */
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    /** Lucide icon element placed before the label. */
+    icon?: ReactNode;
+    /** Lucide icon element placed after the label. */
+    iconRight?: ReactNode;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    style?: CSSProperties;
+}
+/**
+ * Bridger button. Primary is the single strongest action per screen;
+ * secondary for regular actions; ghost for low-emphasis commands.
+ *
+ * The one strongest action per screen uses variant="primary" (persimmon).
+ * @startingPoint section="Core" subtitle="Primary / secondary / ghost actions" viewport="700x140"
+ */
+declare function Button({ children, variant, size, icon, iconRight, disabled, type, onClick, style, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps };

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

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children?: ReactNode;
+    /** primary = the one strongest action; secondary = regular; ghost = low-emphasis. */
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    /** Lucide icon element placed before the label. */
+    icon?: ReactNode;
+    /** Lucide icon element placed after the label. */
+    iconRight?: ReactNode;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    style?: CSSProperties;
+}
+/**
+ * Bridger button. Primary is the single strongest action per screen;
+ * secondary for regular actions; ghost for low-emphasis commands.
+ *
+ * The one strongest action per screen uses variant="primary" (persimmon).
+ * @startingPoint section="Core" subtitle="Primary / secondary / ghost actions" viewport="700x140"
+ */
+declare function Button({ children, variant, size, icon, iconRight, disabled, type, onClick, style, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/components/core/Button.mjs

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/core/Button.tsx
+var SIZE = {
+  sm: { height: 36, padding: "0 14px", fontSize: 13 },
+  md: { height: 40, padding: "0 16px", fontSize: 14 },
+  lg: { height: 48, padding: "0 20px", fontSize: 15 }
+};
+var VARIANT_CLASS = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost"
+};
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  type = "button",
+  onClick,
+  style,
+  ...rest
+}) {
+  const cls = VARIANT_CLASS[variant] ?? VARIANT_CLASS.primary;
+  const s = SIZE[size] ?? SIZE.md;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: cls,
+      disabled,
+      onClick,
+      style: {
+        height: s.height,
+        padding: s.padding,
+        fontSize: s.fontSize,
+        opacity: disabled ? 0.55 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, "aria-hidden": "true", children: icon }) : null,
+        children,
+        iconRight ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, "aria-hidden": "true", children: iconRight }) : null
+      ]
+    }
+  );
+}
+
+export { Button };
+//# sourceMappingURL=Button.mjs.map
+//# sourceMappingURL=Button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/Button.tsx"],"names":[],"mappings":";;;AAIA,IAAM,IAAA,GAAO;AAAA,EACX,IAAI,EAAE,MAAA,EAAQ,IAAI,OAAA,EAAS,QAAA,EAAU,UAAU,EAAA,EAAG;AAAA,EAClD,IAAI,EAAE,MAAA,EAAQ,IAAI,OAAA,EAAS,QAAA,EAAU,UAAU,EAAA,EAAG;AAAA,EAClD,IAAI,EAAE,MAAA,EAAQ,IAAI,OAAA,EAAS,QAAA,EAAU,UAAU,EAAA;AACjD,CAAA;AAEA,IAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,aAAA;AAAA,EACT,SAAA,EAAW,eAAA;AAAA,EACX,KAAA,EAAO;AACT,CAAA;AAuBO,SAAS,MAAA,CAAO;AAAA,EACrB,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY,IAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,QAAA;AAAA,EACP,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,GAAA,GAAM,aAAA,CAAc,OAAO,CAAA,IAAK,aAAA,CAAc,OAAA;AACpD,EAAA,MAAM,CAAA,GAAI,IAAA,CAAK,IAAI,CAAA,IAAK,IAAA,CAAK,EAAA;AAC7B,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,SAAA,EAAW,GAAA;AAAA,MACX,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACL,QAAQ,CAAA,CAAE,MAAA;AAAA,QACV,SAAS,CAAA,CAAE,OAAA;AAAA,QACX,UAAU,CAAA,CAAE,QAAA;AAAA,QACZ,OAAA,EAAS,WAAW,IAAA,GAAO,CAAA;AAAA,QAC3B,MAAA,EAAQ,WAAW,aAAA,GAAgB,SAAA;AAAA,QACnC,GAAG;AAAA,OACL;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,eAAc,EAAG,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU,IAAA;AAAA,QACnF,QAAA;AAAA,QACA,SAAA,mBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAc,EAAG,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,SAAA,EAAU,CAAA,GAAU;AAAA;AAAA;AAAA,GAChG;AAEJ","file":"Button.mjs","sourcesContent":["import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';\n\n/* Height grid (px) per size — matches the fill-based button recipe in base.css.\n   Horizontal padding only; vertical centering comes from the fixed height. */\nconst SIZE = {\n  sm: { height: 36, padding: '0 14px', fontSize: 13 },\n  md: { height: 40, padding: '0 16px', fontSize: 14 },\n  lg: { height: 48, padding: '0 20px', fontSize: 15 },\n};\n\nconst VARIANT_CLASS = {\n  primary: 'btn-primary',\n  secondary: 'btn-secondary',\n  ghost: 'btn-ghost',\n};\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {\n  children?: ReactNode;\n  /** primary = the one strongest action; secondary = regular; ghost = low-emphasis. */\n  variant?: 'primary' | 'secondary' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  /** Lucide icon element placed before the label. */\n  icon?: ReactNode;\n  /** Lucide icon element placed after the label. */\n  iconRight?: ReactNode;\n  disabled?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  style?: CSSProperties;\n}\n\n/**\n * Bridger button. Primary is the single strongest action per screen;\n * secondary for regular actions; ghost for low-emphasis commands.\n *\n * The one strongest action per screen uses variant=\"primary\" (persimmon).\n * @startingPoint section=\"Core\" subtitle=\"Primary / secondary / ghost actions\" viewport=\"700x140\"\n */\nexport function Button({\n  children,\n  variant = 'primary',\n  size = 'md',\n  icon = null,\n  iconRight = null,\n  disabled = false,\n  type = 'button',\n  onClick,\n  style,\n  ...rest\n}: ButtonProps) {\n  const cls = VARIANT_CLASS[variant] ?? VARIANT_CLASS.primary;\n  const s = SIZE[size] ?? SIZE.md;\n  return (\n    <button\n      type={type}\n      className={cls}\n      disabled={disabled}\n      onClick={onClick}\n      style={{\n        height: s.height,\n        padding: s.padding,\n        fontSize: s.fontSize,\n        opacity: disabled ? 0.55 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        ...style,\n      }}\n      {...rest}\n    >\n      {icon ? <span style={{ display: 'inline-flex' }} aria-hidden=\"true\">{icon}</span> : null}\n      {children}\n      {iconRight ? <span style={{ display: 'inline-flex' }} aria-hidden=\"true\">{iconRight}</span> : null}\n    </button>\n  );\n}\n"]}

package/dist/components/core/Card.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var CardTone = {
+  Default: "default",
+  Muted: "muted",
+  Raised: "raised",
+  Panel: "panel"
+};
+var VARIANT_STYLE = {
+  default: { background: "var(--dt-surface)", boxShadow: "var(--dt-card-rest)" },
+  muted: { background: "var(--dt-surface-sunken)" },
+  raised: { background: "var(--dt-surface-raised)", boxShadow: "var(--dt-card-float)" },
+  panel: { background: "var(--dt-surface)", boxShadow: "var(--dt-shadow-xs)" }
+};
+function Card({
+  children,
+  variant,
+  tone,
+  interactive = false,
+  padding = 20,
+  className,
+  style,
+  ...rest
+}) {
+  const selectedTone = tone ?? variant ?? CardTone.Default;
+  const v = VARIANT_STYLE[selectedTone] ?? VARIANT_STYLE[CardTone.Default];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(interactive && "dt-card-interactive", className),
+      style: {
+        borderRadius: "var(--dt-radius-lg)",
+        color: "var(--dt-ink)",
+        padding,
+        transition: "box-shadow var(--dt-motion), background-color var(--dt-motion)",
+        ...v,
+        ...style
+      },
+      ...rest,
+      children: [
+        children,
+        interactive ? /* @__PURE__ */ jsxRuntime.jsx("style", { children: ".dt-card-interactive:hover{box-shadow:var(--dt-card-hover)}" }) : null
+      ]
+    }
+  );
+}
+
+exports.Card = Card;
+exports.CardTone = CardTone;
+//# sourceMappingURL=Card.cjs.map
+//# sourceMappingURL=Card.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/core/Card.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACCO,IAAM,QAAA,GAAW;AAAA,EACtB,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO;AACT;AAIA,IAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,EAAE,UAAA,EAAY,mBAAA,EAAqB,WAAW,qBAAA,EAAsB;AAAA,EAC7E,KAAA,EAAO,EAAE,UAAA,EAAY,0BAAA,EAA2B;AAAA,EAChD,MAAA,EAAQ,EAAE,UAAA,EAAY,0BAAA,EAA4B,WAAW,sBAAA,EAAuB;AAAA,EACpF,KAAA,EAAO,EAAE,UAAA,EAAY,mBAAA,EAAqB,WAAW,qBAAA;AACvD,CAAA;AAiBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,OAAA,GAAU,EAAA;AAAA,EACV,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,MAAM,YAAA,GAAe,IAAA,IAAQ,OAAA,IAAW,QAAA,CAAS,OAAA;AACjD,EAAA,MAAM,IAAI,aAAA,CAAc,YAAY,CAAA,IAAK,aAAA,CAAc,SAAS,OAAO,CAAA;AACvE,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,WAAA,IAAe,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC7D,KAAA,EAAO;AAAA,QACL,YAAA,EAAc,qBAAA;AAAA,QACd,KAAA,EAAO,eAAA;AAAA,QACP,OAAA;AAAA,QACA,UAAA,EAAY,gEAAA;AAAA,QACZ,GAAG,CAAA;AAAA,QACH,GAAG;AAAA,OACL;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,WAAA,mBACCC,cAAA,CAAC,OAAA,EAAA,EAAO,QAAA,EAAA,6DAAA,EAA8D,CAAA,GACpE;AAAA;AAAA;AAAA,GACN;AAEJ","file":"Card.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 CardTone = {\n  Default: 'default',\n  Muted: 'muted',\n  Raised: 'raised',\n  Panel: 'panel',\n} as const;\n\nexport type CardTone = (typeof CardTone)[keyof typeof CardTone];\n\nconst VARIANT_STYLE = {\n  default: { background: 'var(--dt-surface)', boxShadow: 'var(--dt-card-rest)' },\n  muted: { background: 'var(--dt-surface-sunken)' },\n  raised: { background: 'var(--dt-surface-raised)', boxShadow: 'var(--dt-card-float)' },\n  panel: { background: 'var(--dt-surface)', boxShadow: 'var(--dt-shadow-xs)' },\n} satisfies Record<CardTone, CSSProperties>;\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  children?: ReactNode;\n  /** default = surface + subtle shadow; muted = sunken well; raised = elevated; panel = flat console panel. */\n  variant?: CardTone;\n  tone?: CardTone;\n  /** Strengthen border + lift surface on hover (for clickable rows/cards). */\n  interactive?: boolean;\n  padding?: number;\n  style?: CSSProperties;\n}\n\n/**\n * Surface container. Use for repeated items, modals, and genuinely framed\n * tools — not as a decorative wrapper. `panel` is the flatter console variant.\n */\nexport function Card({\n  children,\n  variant,\n  tone,\n  interactive = false,\n  padding = 20,\n  className,\n  style,\n  ...rest\n}: CardProps) {\n  const selectedTone = tone ?? variant ?? CardTone.Default;\n  const v = VARIANT_STYLE[selectedTone] ?? VARIANT_STYLE[CardTone.Default];\n  return (\n    <div\n      className={cx(interactive && 'dt-card-interactive', className)}\n      style={{\n        borderRadius: 'var(--dt-radius-lg)',\n        color: 'var(--dt-ink)',\n        padding,\n        transition: 'box-shadow var(--dt-motion), background-color var(--dt-motion)',\n        ...v,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n      {interactive ? (\n        <style>{'.dt-card-interactive:hover{box-shadow:var(--dt-card-hover)}'}</style>\n      ) : null}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+declare const CardTone: {
+    readonly Default: "default";
+    readonly Muted: "muted";
+    readonly Raised: "raised";
+    readonly Panel: "panel";
+};
+type CardTone = (typeof CardTone)[keyof typeof CardTone];
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    children?: ReactNode;
+    /** default = surface + subtle shadow; muted = sunken well; raised = elevated; panel = flat console panel. */
+    variant?: CardTone;
+    tone?: CardTone;
+    /** Strengthen border + lift surface on hover (for clickable rows/cards). */
+    interactive?: boolean;
+    padding?: number;
+    style?: CSSProperties;
+}
+/**
+ * Surface container. Use for repeated items, modals, and genuinely framed
+ * tools — not as a decorative wrapper. `panel` is the flatter console variant.
+ */
+declare function Card({ children, variant, tone, interactive, padding, className, style, ...rest }: CardProps): react.JSX.Element;
+
+export { Card, type CardProps, CardTone };

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

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+declare const CardTone: {
+    readonly Default: "default";
+    readonly Muted: "muted";
+    readonly Raised: "raised";
+    readonly Panel: "panel";
+};
+type CardTone = (typeof CardTone)[keyof typeof CardTone];
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    children?: ReactNode;
+    /** default = surface + subtle shadow; muted = sunken well; raised = elevated; panel = flat console panel. */
+    variant?: CardTone;
+    tone?: CardTone;
+    /** Strengthen border + lift surface on hover (for clickable rows/cards). */
+    interactive?: boolean;
+    padding?: number;
+    style?: CSSProperties;
+}
+/**
+ * Surface container. Use for repeated items, modals, and genuinely framed
+ * tools — not as a decorative wrapper. `panel` is the flatter console variant.
+ */
+declare function Card({ children, variant, tone, interactive, padding, className, style, ...rest }: CardProps): react.JSX.Element;
+
+export { Card, type CardProps, CardTone };

package/dist/components/core/Card.mjs

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var CardTone = {
+  Default: "default",
+  Muted: "muted",
+  Raised: "raised",
+  Panel: "panel"
+};
+var VARIANT_STYLE = {
+  default: { background: "var(--dt-surface)", boxShadow: "var(--dt-card-rest)" },
+  muted: { background: "var(--dt-surface-sunken)" },
+  raised: { background: "var(--dt-surface-raised)", boxShadow: "var(--dt-card-float)" },
+  panel: { background: "var(--dt-surface)", boxShadow: "var(--dt-shadow-xs)" }
+};
+function Card({
+  children,
+  variant,
+  tone,
+  interactive = false,
+  padding = 20,
+  className,
+  style,
+  ...rest
+}) {
+  const selectedTone = tone ?? variant ?? CardTone.Default;
+  const v = VARIANT_STYLE[selectedTone] ?? VARIANT_STYLE[CardTone.Default];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(interactive && "dt-card-interactive", className),
+      style: {
+        borderRadius: "var(--dt-radius-lg)",
+        color: "var(--dt-ink)",
+        padding,
+        transition: "box-shadow var(--dt-motion), background-color var(--dt-motion)",
+        ...v,
+        ...style
+      },
+      ...rest,
+      children: [
+        children,
+        interactive ? /* @__PURE__ */ jsx("style", { children: ".dt-card-interactive:hover{box-shadow:var(--dt-card-hover)}" }) : null
+      ]
+    }
+  );
+}
+
+export { Card, CardTone };
+//# sourceMappingURL=Card.mjs.map
+//# sourceMappingURL=Card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/core/Card.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,QAAA,GAAW;AAAA,EACtB,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO;AACT;AAIA,IAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,EAAE,UAAA,EAAY,mBAAA,EAAqB,WAAW,qBAAA,EAAsB;AAAA,EAC7E,KAAA,EAAO,EAAE,UAAA,EAAY,0BAAA,EAA2B;AAAA,EAChD,MAAA,EAAQ,EAAE,UAAA,EAAY,0BAAA,EAA4B,WAAW,sBAAA,EAAuB;AAAA,EACpF,KAAA,EAAO,EAAE,UAAA,EAAY,mBAAA,EAAqB,WAAW,qBAAA;AACvD,CAAA;AAiBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,OAAA,GAAU,EAAA;AAAA,EACV,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,MAAM,YAAA,GAAe,IAAA,IAAQ,OAAA,IAAW,QAAA,CAAS,OAAA;AACjD,EAAA,MAAM,IAAI,aAAA,CAAc,YAAY,CAAA,IAAK,aAAA,CAAc,SAAS,OAAO,CAAA;AACvE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,WAAA,IAAe,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC7D,KAAA,EAAO;AAAA,QACL,YAAA,EAAc,qBAAA;AAAA,QACd,KAAA,EAAO,eAAA;AAAA,QACP,OAAA;AAAA,QACA,UAAA,EAAY,gEAAA;AAAA,QACZ,GAAG,CAAA;AAAA,QACH,GAAG;AAAA,OACL;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,WAAA,mBACC,GAAA,CAAC,OAAA,EAAA,EAAO,QAAA,EAAA,6DAAA,EAA8D,CAAA,GACpE;AAAA;AAAA;AAAA,GACN;AAEJ","file":"Card.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 CardTone = {\n  Default: 'default',\n  Muted: 'muted',\n  Raised: 'raised',\n  Panel: 'panel',\n} as const;\n\nexport type CardTone = (typeof CardTone)[keyof typeof CardTone];\n\nconst VARIANT_STYLE = {\n  default: { background: 'var(--dt-surface)', boxShadow: 'var(--dt-card-rest)' },\n  muted: { background: 'var(--dt-surface-sunken)' },\n  raised: { background: 'var(--dt-surface-raised)', boxShadow: 'var(--dt-card-float)' },\n  panel: { background: 'var(--dt-surface)', boxShadow: 'var(--dt-shadow-xs)' },\n} satisfies Record<CardTone, CSSProperties>;\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {\n  children?: ReactNode;\n  /** default = surface + subtle shadow; muted = sunken well; raised = elevated; panel = flat console panel. */\n  variant?: CardTone;\n  tone?: CardTone;\n  /** Strengthen border + lift surface on hover (for clickable rows/cards). */\n  interactive?: boolean;\n  padding?: number;\n  style?: CSSProperties;\n}\n\n/**\n * Surface container. Use for repeated items, modals, and genuinely framed\n * tools — not as a decorative wrapper. `panel` is the flatter console variant.\n */\nexport function Card({\n  children,\n  variant,\n  tone,\n  interactive = false,\n  padding = 20,\n  className,\n  style,\n  ...rest\n}: CardProps) {\n  const selectedTone = tone ?? variant ?? CardTone.Default;\n  const v = VARIANT_STYLE[selectedTone] ?? VARIANT_STYLE[CardTone.Default];\n  return (\n    <div\n      className={cx(interactive && 'dt-card-interactive', className)}\n      style={{\n        borderRadius: 'var(--dt-radius-lg)',\n        color: 'var(--dt-ink)',\n        padding,\n        transition: 'box-shadow var(--dt-motion), background-color var(--dt-motion)',\n        ...v,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n      {interactive ? (\n        <style>{'.dt-card-interactive:hover{box-shadow:var(--dt-card-hover)}'}</style>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/core/FilterChip.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/core/FilterChip.tsx
+function FilterChip({ label, count, active = false, removable = false, onToggle, onRemove, icon, style }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", color: active ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        count != null ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+exports.FilterChip = FilterChip;
+//# sourceMappingURL=FilterChip.cjs.map
+//# sourceMappingURL=FilterChip.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/core/FilterChip.tsx"],"names":["jsxs","jsx"],"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,uBACEA,eAAA;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,mBAAOC,cAAA,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,wBAC5IA,cAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACZ,KAAA,IAAS,uBACRA,cAAA,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,mBACCA,cAAA;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,kBAAAA,cAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAY,QAAO,QAAA,kBAAAA,cAAA,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.cjs","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"]}