@flanksource/clicky-ui 0.2.1 → 0.2.3

package/dist/data/Properties.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "./Icon.js";
+import { formatPropertyLabel } from "./properties-utils.js";
+const DENSITY_CLASSES = {
+  comfortable: {
+    row: "px-density-3 py-density-2",
+    label: "text-xs font-medium text-muted-foreground",
+    value: "text-sm text-foreground",
+    gridCols: "grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]"
+  },
+  compact: {
+    row: "px-density-2 py-density-1.5",
+    label: "font-mono text-[11px] text-muted-foreground",
+    value: "text-xs text-foreground",
+    gridCols: "grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]"
+  }
+};
+function Properties({
+  items,
+  renderLabel,
+  renderValue,
+  labelIcon,
+  prefixActions,
+  suffixActions,
+  className,
+  rowClassName,
+  labelClassName,
+  valueClassName,
+  density = "comfortable",
+  emptyMessage = "No properties"
+}) {
+  const visible = items.filter((item) => !item.hidden);
+  if (visible.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: emptyMessage });
+  }
+  const styles = DENSITY_CLASSES[density];
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn(
+        "divide-y divide-border rounded-md border border-border bg-muted/20",
+        className
+      ),
+      children: visible.map((item) => {
+        const iconName = typeof labelIcon === "function" ? labelIcon(item.key, item.value, item) : labelIcon;
+        const renderedLabel = renderLabel ? renderLabel(item.key, item.value, item) : formatPropertyLabel(item.key);
+        const ariaLabel = typeof renderedLabel === "string" ? renderedLabel : item.key;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("grid min-w-0 gap-density-3", styles.gridCols, styles.row, rowClassName),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "dt",
+                {
+                  "aria-label": ariaLabel,
+                  className: cn("min-w-0 truncate", styles.label, labelClassName),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
+                      iconName ? /* @__PURE__ */ jsx(Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
+                    ] }),
+                    item.subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("dd", { className: cn("min-w-0 space-y-density-1", valueClassName), children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
+                  /* @__PURE__ */ jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
+                  /* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full flex-1", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
+                  /* @__PURE__ */ jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
+                ] }),
+                item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
+              ] })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+}
+function ActionList({
+  actions,
+  item,
+  className
+}) {
+  if (!actions || actions.length === 0) return null;
+  const rendered = actions.filter(
+    (action) => !action.visible || action.visible(item.key, item.value, item)
+  );
+  if (rendered.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-0.5", className), children: rendered.map((action) => /* @__PURE__ */ jsx(PropertiesActionButton, { action, item }, action.id)) });
+}
+function PropertiesActionButton({
+  action,
+  item
+}) {
+  var _a;
+  const label = action.label(item.key, item.value, item);
+  const disabled = ((_a = action.disabled) == null ? void 0 : _a.call(action, item.key, item.value, item)) ?? false;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      disabled,
+      className: cn(
+        "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground",
+        "hover:bg-accent hover:text-foreground",
+        "disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+      ),
+      onClick: (event) => {
+        event.stopPropagation();
+        action.onClick(item.key, item.value, item);
+      },
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...typeof action.icon === "string" ? { name: action.icon } : { icon: action.icon },
+          className: "text-xs"
+        }
+      )
+    }
+  );
+}
+function defaultRenderValue(value) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "font-mono italic text-muted-foreground", children: "null" });
+  }
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: "font-mono", children: String(value) });
+  }
+  try {
+    return /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed", children: JSON.stringify(value, null, 2) });
+  } catch {
+    return String(value);
+  }
+}
+export {
+  Properties
+};
+//# sourceMappingURL=Properties.js.map

package/dist/data/Properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables an expandable child area below the row value. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridCols: string }\n> = {\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const styles = DENSITY_CLASSES[density];\n\n  return (\n    <dl\n      className={cn(\n        \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n        className,\n      )}\n    >\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <div\n            key={item.key}\n            className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n          >\n            <dt\n              aria-label={ariaLabel}\n              className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n            >\n              <div className=\"flex min-w-0 items-center gap-density-1\">\n                {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n                <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n              </div>\n              {item.subtitle ? (\n                <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                  {item.subtitle}\n                </div>\n              ) : null}\n            </dt>\n            <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n              <div className=\"flex min-w-0 items-start gap-density-1\">\n                <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n                <div className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}>\n                  {renderValue\n                    ? renderValue(item.key, item.value, item)\n                    : defaultRenderValue(item.value)}\n                </div>\n                <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n              </div>\n              {item.expandable && item.expanded && item.renderChildren\n                ? item.renderChildren()\n                : null}\n            </dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center gap-0.5\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/data/SignedDeltaBar.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+function defaultFormat(value) {
+  return `${value >= 0 ? "+" : ""}${value.toFixed(2)}%`;
+}
+function SignedDeltaBar({
+  value,
+  max = 50,
+  significant = true,
+  positiveIsBad = false,
+  format = defaultFormat,
+  height = "h-4",
+  className
+}) {
+  const clamped = Math.max(-max, Math.min(max, value));
+  const halfWidthPct = Math.abs(clamped) / max * 50;
+  const isBad = significant && (positiveIsBad ? value > 0 : value < 0);
+  const isGood = significant && (positiveIsBad ? value < 0 : value > 0);
+  const barColor = isBad ? "bg-red-500" : isGood ? "bg-green-500" : "bg-muted-foreground/40";
+  const textColor = isBad ? "text-red-600 dark:text-red-400" : isGood ? "text-green-600 dark:text-green-400" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: utils.cn("relative flex-1 min-w-[80px] bg-muted rounded overflow-hidden", height),
+        role: "meter",
+        "aria-valuenow": value,
+        "aria-valuemin": -max,
+        "aria-valuemax": max,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-1/2 w-px bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn("absolute inset-y-0", barColor),
+              style: value >= 0 ? { left: "50%", width: `${halfWidthPct}%` } : { right: "50%", width: `${halfWidthPct}%` }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils.cn(
+          "text-xs tabular-nums w-16 text-right",
+          textColor,
+          significant && "font-semibold"
+        ),
+        children: format(value)
+      }
+    )
+  ] });
+}
+exports.SignedDeltaBar = SignedDeltaBar;
+//# sourceMappingURL=SignedDeltaBar.cjs.map

package/dist/data/SignedDeltaBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedDeltaBar.cjs","sources":["../../src/data/SignedDeltaBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type SignedDeltaBarProps = {\n  /** Signed value to visualize. Negative grows left, positive grows right. */\n  value: number;\n  /** Magnitude (in `value` units) that maps to a full half-bar. Larger values clamp. */\n  max?: number;\n  /**\n   * When false the bar renders muted, signalling the delta is not meaningful\n   * (e.g. below a statistical-significance threshold).\n   */\n  significant?: boolean;\n  /**\n   * Treat positive values as the \"bad\" direction (red) and negative as \"good\"\n   * (green). Benchmarks pass `true` — a positive runtime delta is a regression.\n   * Defaults to `false`, where positive is green and negative is red.\n   */\n  positiveIsBad?: boolean;\n  /** Formats the trailing label. Defaults to a signed two-decimal percentage. */\n  format?: (value: number) => string;\n  /** Height utility class, e.g. `h-4`. */\n  height?: string;\n  /** Classes applied to the root. */\n  className?: string;\n};\n\nfunction defaultFormat(value: number): string {\n  return `${value >= 0 ? \"+\" : \"\"}${value.toFixed(2)}%`;\n}\n\nexport function SignedDeltaBar({\n  value,\n  max = 50,\n  significant = true,\n  positiveIsBad = false,\n  format = defaultFormat,\n  height = \"h-4\",\n  className,\n}: SignedDeltaBarProps) {\n  const clamped = Math.max(-max, Math.min(max, value));\n  const halfWidthPct = (Math.abs(clamped) / max) * 50;\n\n  const isBad = significant && (positiveIsBad ? value > 0 : value < 0);\n  const isGood = significant && (positiveIsBad ? value < 0 : value > 0);\n  const barColor = isBad ? \"bg-red-500\" : isGood ? \"bg-green-500\" : \"bg-muted-foreground/40\";\n  const textColor = isBad\n    ? \"text-red-600 dark:text-red-400\"\n    : isGood\n      ? \"text-green-600 dark:text-green-400\"\n      : \"text-muted-foreground\";\n\n  return (\n    <div className={cn(\"flex items-center gap-2 w-full\", className)}>\n      <div\n        className={cn(\"relative flex-1 min-w-[80px] bg-muted rounded overflow-hidden\", height)}\n        role=\"meter\"\n        aria-valuenow={value}\n        aria-valuemin={-max}\n        aria-valuemax={max}\n      >\n        <div className=\"absolute inset-y-0 left-1/2 w-px bg-border\" />\n        <div\n          className={cn(\"absolute inset-y-0\", barColor)}\n          style={\n            value >= 0\n              ? { left: \"50%\", width: `${halfWidthPct}%` }\n              : { right: \"50%\", width: `${halfWidthPct}%` }\n          }\n        />\n      </div>\n      <span\n        className={cn(\n          \"text-xs tabular-nums w-16 text-right\",\n          textColor,\n          significant && \"font-semibold\",\n        )}\n      >\n        {format(value)}\n      </span>\n    </div>\n  );\n}\n"],"names":["cn","jsxs","jsx"],"mappings":";;;;AA0BA,SAAS,cAAc,OAAuB;AAC5C,SAAO,GAAG,SAAS,IAAI,MAAM,EAAE,GAAG,MAAM,QAAQ,CAAC,CAAC;AACpD;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AACF,GAAwB;AACtB,QAAM,UAAU,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AACnD,QAAM,eAAgB,KAAK,IAAI,OAAO,IAAI,MAAO;AAEjD,QAAM,QAAQ,gBAAgB,gBAAgB,QAAQ,IAAI,QAAQ;AAClE,QAAM,SAAS,gBAAgB,gBAAgB,QAAQ,IAAI,QAAQ;AACnE,QAAM,WAAW,QAAQ,eAAe,SAAS,iBAAiB;AAClE,QAAM,YAAY,QACd,mCACA,SACE,uCACA;AAEN,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,kCAAkC,SAAS,GAC5D,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA,GAAG,iEAAiE,MAAM;AAAA,QACrF,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe,CAAC;AAAA,QAChB,iBAAe;AAAA,QAEf,UAAA;AAAA,UAAAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,6CAAA,CAA6C;AAAA,UAC5DA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,MAAAA,GAAG,sBAAsB,QAAQ;AAAA,cAC5C,OACE,SAAS,IACL,EAAE,MAAM,OAAO,OAAO,GAAG,YAAY,IAAA,IACrC,EAAE,OAAO,OAAO,OAAO,GAAG,YAAY,IAAA;AAAA,YAAI;AAAA,UAAA;AAAA,QAElD;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFE,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWF,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA,eAAe;AAAA,QAAA;AAAA,QAGhB,iBAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACF;AAEJ;;"}

package/dist/data/SignedDeltaBar.d.ts

@@ -0,0 +1,25 @@
+export type SignedDeltaBarProps = {
+    /** Signed value to visualize. Negative grows left, positive grows right. */
+    value: number;
+    /** Magnitude (in `value` units) that maps to a full half-bar. Larger values clamp. */
+    max?: number;
+    /**
+     * When false the bar renders muted, signalling the delta is not meaningful
+     * (e.g. below a statistical-significance threshold).
+     */
+    significant?: boolean;
+    /**
+     * Treat positive values as the "bad" direction (red) and negative as "good"
+     * (green). Benchmarks pass `true` — a positive runtime delta is a regression.
+     * Defaults to `false`, where positive is green and negative is red.
+     */
+    positiveIsBad?: boolean;
+    /** Formats the trailing label. Defaults to a signed two-decimal percentage. */
+    format?: (value: number) => string;
+    /** Height utility class, e.g. `h-4`. */
+    height?: string;
+    /** Classes applied to the root. */
+    className?: string;
+};
+export declare function SignedDeltaBar({ value, max, significant, positiveIsBad, format, height, className, }: SignedDeltaBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignedDeltaBar.d.ts.map

package/dist/data/SignedDeltaBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedDeltaBar.d.ts","sourceRoot":"","sources":["../../src/data/SignedDeltaBar.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,mBAAmB,GAAG;IAChC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAQ,EACR,WAAkB,EAClB,aAAqB,EACrB,MAAsB,EACtB,MAAc,EACd,SAAS,GACV,EAAE,mBAAmB,2CA2CrB"}

package/dist/data/SignedDeltaBar.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function defaultFormat(value) {
+  return `${value >= 0 ? "+" : ""}${value.toFixed(2)}%`;
+}
+function SignedDeltaBar({
+  value,
+  max = 50,
+  significant = true,
+  positiveIsBad = false,
+  format = defaultFormat,
+  height = "h-4",
+  className
+}) {
+  const clamped = Math.max(-max, Math.min(max, value));
+  const halfWidthPct = Math.abs(clamped) / max * 50;
+  const isBad = significant && (positiveIsBad ? value > 0 : value < 0);
+  const isGood = significant && (positiveIsBad ? value < 0 : value > 0);
+  const barColor = isBad ? "bg-red-500" : isGood ? "bg-green-500" : "bg-muted-foreground/40";
+  const textColor = isBad ? "text-red-600 dark:text-red-400" : isGood ? "text-green-600 dark:text-green-400" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 w-full", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative flex-1 min-w-[80px] bg-muted rounded overflow-hidden", height),
+        role: "meter",
+        "aria-valuenow": value,
+        "aria-valuemin": -max,
+        "aria-valuemax": max,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1/2 w-px bg-border" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("absolute inset-y-0", barColor),
+              style: value >= 0 ? { left: "50%", width: `${halfWidthPct}%` } : { right: "50%", width: `${halfWidthPct}%` }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs tabular-nums w-16 text-right",
+          textColor,
+          significant && "font-semibold"
+        ),
+        children: format(value)
+      }
+    )
+  ] });
+}
+export {
+  SignedDeltaBar
+};
+//# sourceMappingURL=SignedDeltaBar.js.map

package/dist/data/SignedDeltaBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedDeltaBar.js","sources":["../../src/data/SignedDeltaBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type SignedDeltaBarProps = {\n  /** Signed value to visualize. Negative grows left, positive grows right. */\n  value: number;\n  /** Magnitude (in `value` units) that maps to a full half-bar. Larger values clamp. */\n  max?: number;\n  /**\n   * When false the bar renders muted, signalling the delta is not meaningful\n   * (e.g. below a statistical-significance threshold).\n   */\n  significant?: boolean;\n  /**\n   * Treat positive values as the \"bad\" direction (red) and negative as \"good\"\n   * (green). Benchmarks pass `true` — a positive runtime delta is a regression.\n   * Defaults to `false`, where positive is green and negative is red.\n   */\n  positiveIsBad?: boolean;\n  /** Formats the trailing label. Defaults to a signed two-decimal percentage. */\n  format?: (value: number) => string;\n  /** Height utility class, e.g. `h-4`. */\n  height?: string;\n  /** Classes applied to the root. */\n  className?: string;\n};\n\nfunction defaultFormat(value: number): string {\n  return `${value >= 0 ? \"+\" : \"\"}${value.toFixed(2)}%`;\n}\n\nexport function SignedDeltaBar({\n  value,\n  max = 50,\n  significant = true,\n  positiveIsBad = false,\n  format = defaultFormat,\n  height = \"h-4\",\n  className,\n}: SignedDeltaBarProps) {\n  const clamped = Math.max(-max, Math.min(max, value));\n  const halfWidthPct = (Math.abs(clamped) / max) * 50;\n\n  const isBad = significant && (positiveIsBad ? value > 0 : value < 0);\n  const isGood = significant && (positiveIsBad ? value < 0 : value > 0);\n  const barColor = isBad ? \"bg-red-500\" : isGood ? \"bg-green-500\" : \"bg-muted-foreground/40\";\n  const textColor = isBad\n    ? \"text-red-600 dark:text-red-400\"\n    : isGood\n      ? \"text-green-600 dark:text-green-400\"\n      : \"text-muted-foreground\";\n\n  return (\n    <div className={cn(\"flex items-center gap-2 w-full\", className)}>\n      <div\n        className={cn(\"relative flex-1 min-w-[80px] bg-muted rounded overflow-hidden\", height)}\n        role=\"meter\"\n        aria-valuenow={value}\n        aria-valuemin={-max}\n        aria-valuemax={max}\n      >\n        <div className=\"absolute inset-y-0 left-1/2 w-px bg-border\" />\n        <div\n          className={cn(\"absolute inset-y-0\", barColor)}\n          style={\n            value >= 0\n              ? { left: \"50%\", width: `${halfWidthPct}%` }\n              : { right: \"50%\", width: `${halfWidthPct}%` }\n          }\n        />\n      </div>\n      <span\n        className={cn(\n          \"text-xs tabular-nums w-16 text-right\",\n          textColor,\n          significant && \"font-semibold\",\n        )}\n      >\n        {format(value)}\n      </span>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AA0BA,SAAS,cAAc,OAAuB;AAC5C,SAAO,GAAG,SAAS,IAAI,MAAM,EAAE,GAAG,MAAM,QAAQ,CAAC,CAAC;AACpD;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AACF,GAAwB;AACtB,QAAM,UAAU,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AACnD,QAAM,eAAgB,KAAK,IAAI,OAAO,IAAI,MAAO;AAEjD,QAAM,QAAQ,gBAAgB,gBAAgB,QAAQ,IAAI,QAAQ;AAClE,QAAM,SAAS,gBAAgB,gBAAgB,QAAQ,IAAI,QAAQ;AACnE,QAAM,WAAW,QAAQ,eAAe,SAAS,iBAAiB;AAClE,QAAM,YAAY,QACd,mCACA,SACE,uCACA;AAEN,8BACG,OAAA,EAAI,WAAW,GAAG,kCAAkC,SAAS,GAC5D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,iEAAiE,MAAM;AAAA,QACrF,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe,CAAC;AAAA,QAChB,iBAAe;AAAA,QAEf,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,6CAAA,CAA6C;AAAA,UAC5D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,sBAAsB,QAAQ;AAAA,cAC5C,OACE,SAAS,IACL,EAAE,MAAM,OAAO,OAAO,GAAG,YAAY,IAAA,IACrC,EAAE,OAAO,OAAO,OAAO,GAAG,YAAY,IAAA;AAAA,YAAI;AAAA,UAAA;AAAA,QAElD;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,eAAe;AAAA,QAAA;AAAA,QAGhB,iBAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACF;AAEJ;"}

package/dist/data/SortableHeader.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+function SortableHeader({
+  active,
+  dir,
+  onClick,
+  align = "left",
+  className,
+  children
+}) {
+  const alignCls = align === "right" ? "justify-end" : align === "center" ? "justify-center" : "justify-start";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: utils.cn(
+        "inline-flex items-center gap-1 cursor-pointer select-none hover:text-foreground",
+        active ? "text-primary" : "text-muted-foreground",
+        alignCls,
+        className
+      ),
+      children: [
+        children,
+        active ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: dir === "asc" ? "↑" : "↓" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "opacity-40", children: "↕" })
+      ]
+    }
+  );
+}
+exports.SortableHeader = SortableHeader;
+//# sourceMappingURL=SortableHeader.cjs.map

package/dist/data/SortableHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableHeader.cjs","sources":["../../src/data/SortableHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { SortDir } from \"../hooks/use-sort\";\n\nexport type SortableHeaderProps = {\n  /** Whether this header currently owns the sort state. */\n  active: boolean;\n  /** Current sort direction when active. */\n  dir?: SortDir | undefined;\n  /** Called when the header is clicked. */\n  onClick: () => void;\n  /** Header content alignment. */\n  align?: \"left\" | \"right\" | \"center\";\n  /** Classes applied to the button. */\n  className?: string;\n  /** Header label/content. */\n  children: ReactNode;\n};\n\nexport function SortableHeader({\n  active,\n  dir,\n  onClick,\n  align = \"left\",\n  className,\n  children,\n}: SortableHeaderProps) {\n  const alignCls =\n    align === \"right\" ? \"justify-end\" : align === \"center\" ? \"justify-center\" : \"justify-start\";\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center gap-1 cursor-pointer select-none hover:text-foreground\",\n        active ? \"text-primary\" : \"text-muted-foreground\",\n        alignCls,\n        className,\n      )}\n    >\n      {children}\n      {active ? (\n        <span aria-hidden>{dir === \"asc\" ? \"↑\" : \"↓\"}</span>\n      ) : (\n        <span aria-hidden className=\"opacity-40\">\n          ↕\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAmBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WACJ,UAAU,UAAU,gBAAgB,UAAU,WAAW,mBAAmB;AAC9E,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,iBAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACA,SACCC,2BAAAA,IAAC,QAAA,EAAK,eAAW,MAAE,kBAAQ,QAAQ,MAAM,IAAA,CAAI,mCAE5C,QAAA,EAAK,eAAW,MAAC,WAAU,cAAa,UAAA,IAAA,CAEzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/data/SortableHeader.d.ts

@@ -1,11 +1,17 @@
 import { ReactNode } from 'react';
 import { SortDir } from '../hooks/use-sort';
 export type SortableHeaderProps = {
+    /** Whether this header currently owns the sort state. */
     active: boolean;
+    /** Current sort direction when active. */
     dir?: SortDir | undefined;
+    /** Called when the header is clicked. */
     onClick: () => void;
+    /** Header content alignment. */
     align?: "left" | "right" | "center";
+    /** Classes applied to the button. */
     className?: string;
+    /** Header label/content. */
     children: ReactNode;
 };
 export declare function SortableHeader({ active, dir, onClick, align, className, children, }: SortableHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/data/SortableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHeader.d.ts","sourceRoot":"","sources":["../../src/data/SortableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,GAAG,EACH,OAAO,EACP,KAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CAwBrB"}
+{"version":3,"file":"SortableHeader.d.ts","sourceRoot":"","sources":["../../src/data/SortableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG;IAChC,yDAAyD;IACzD,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,GAAG,EACH,OAAO,EACP,KAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CAwBrB"}

package/dist/data/SortableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHeader.js","sources":["../../src/data/SortableHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { SortDir } from \"../hooks/use-sort\";\n\nexport type SortableHeaderProps = {\n  active: boolean;\n  dir?: SortDir | undefined;\n  onClick: () => void;\n  align?: \"left\" | \"right\" | \"center\";\n  className?: string;\n  children: ReactNode;\n};\n\nexport function SortableHeader({\n  active,\n  dir,\n  onClick,\n  align = \"left\",\n  className,\n  children,\n}: SortableHeaderProps) {\n  const alignCls =\n    align === \"right\" ? \"justify-end\" : align === \"center\" ? \"justify-center\" : \"justify-start\";\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center gap-1 cursor-pointer select-none hover:text-foreground\",\n        active ? \"text-primary\" : \"text-muted-foreground\",\n        alignCls,\n        className,\n      )}\n    >\n      {children}\n      {active ? (\n        <span aria-hidden>{dir === \"asc\" ? \"↑\" : \"↓\"}</span>\n      ) : (\n        <span aria-hidden className=\"opacity-40\">\n          ↕\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;AAaO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WACJ,UAAU,UAAU,gBAAgB,UAAU,WAAW,mBAAmB;AAC9E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,SAAS,iBAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACA,SACC,oBAAC,QAAA,EAAK,eAAW,MAAE,kBAAQ,QAAQ,MAAM,IAAA,CAAI,wBAE5C,QAAA,EAAK,eAAW,MAAC,WAAU,cAAa,UAAA,IAAA,CAEzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"SortableHeader.js","sources":["../../src/data/SortableHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { SortDir } from \"../hooks/use-sort\";\n\nexport type SortableHeaderProps = {\n  /** Whether this header currently owns the sort state. */\n  active: boolean;\n  /** Current sort direction when active. */\n  dir?: SortDir | undefined;\n  /** Called when the header is clicked. */\n  onClick: () => void;\n  /** Header content alignment. */\n  align?: \"left\" | \"right\" | \"center\";\n  /** Classes applied to the button. */\n  className?: string;\n  /** Header label/content. */\n  children: ReactNode;\n};\n\nexport function SortableHeader({\n  active,\n  dir,\n  onClick,\n  align = \"left\",\n  className,\n  children,\n}: SortableHeaderProps) {\n  const alignCls =\n    align === \"right\" ? \"justify-end\" : align === \"center\" ? \"justify-center\" : \"justify-start\";\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center gap-1 cursor-pointer select-none hover:text-foreground\",\n        active ? \"text-primary\" : \"text-muted-foreground\",\n        alignCls,\n        className,\n      )}\n    >\n      {children}\n      {active ? (\n        <span aria-hidden>{dir === \"asc\" ? \"↑\" : \"↓\"}</span>\n      ) : (\n        <span aria-hidden className=\"opacity-40\">\n          ↕\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;AAmBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WACJ,UAAU,UAAU,gBAAgB,UAAU,WAAW,mBAAmB;AAC9E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,SAAS,iBAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACA,SACC,oBAAC,QAAA,EAAK,eAAW,MAAE,kBAAQ,QAAQ,MAAM,IAAA,CAAI,wBAE5C,QAAA,EAAK,eAAW,MAAC,WAAU,cAAa,UAAA,IAAA,CAEzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/TabButton.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+function TabButton({
+  active,
+  onClick,
+  label,
+  icon,
+  count,
+  countColor = "bg-muted-foreground",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": active,
+      onClick,
+      className: utils.cn(
+        "inline-flex items-center gap-1.5 px-density-3 py-density-1.5 text-sm rounded-md transition-colors",
+        active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        count !== void 0 && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils.cn(
+              "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white",
+              countColor
+            ),
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+exports.TabButton = TabButton;
+//# sourceMappingURL=TabButton.cjs.map

package/dist/data/TabButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabButton.cjs","sources":["../../src/data/TabButton.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type TabButtonProps = {\n  /** Current selected state. */\n  active: boolean;\n  /** Called when the tab is clicked. */\n  onClick: () => void;\n  /** Visible tab label. */\n  label: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge. Hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Classes applied to the button. */\n  className?: string;\n};\n\nexport function TabButton({\n  active,\n  onClick,\n  label,\n  icon,\n  count,\n  countColor = \"bg-muted-foreground\",\n  className,\n}: TabButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={active}\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center gap-1.5 px-density-3 py-density-1.5 text-sm rounded-md transition-colors\",\n        active\n          ? \"bg-primary text-primary-foreground\"\n          : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n        className,\n      )}\n    >\n      {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n      <span>{label}</span>\n      {count !== undefined && count > 0 && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white\",\n            countColor,\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon"],"mappings":";;;;;AAqBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAAmB;AACjB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe;AAAA,MACf;AAAA,MACA,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SACI,uCACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,QAAQC,2BAAAA,IAACC,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,QAC3ED,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,QACZ,UAAU,UAAa,QAAQ,KAC9BA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/data/TabButton.d.ts

@@ -1,11 +1,19 @@
 import { ReactNode } from 'react';
+import { StaticIconComponent } from './Icon';
 export type TabButtonProps = {
+    /** Current selected state. */
     active: boolean;
+    /** Called when the tab is clicked. */
     onClick: () => void;
+    /** Visible tab label. */
     label: ReactNode;
-    icon?: string;
+    /** Optional leading icon. */
+    icon?: string | StaticIconComponent;
+    /** Optional count badge. Hidden when zero. */
     count?: number;
+    /** Classes for the count badge background. */
     countColor?: string;
+    /** Classes applied to the button. */
     className?: string;
 };
 export declare function TabButton({ active, onClick, label, icon, count, countColor, className, }: TabButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/data/TabButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabButton.d.ts","sourceRoot":"","sources":["../../src/data/TabButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAkC,EAClC,SAAS,GACV,EAAE,cAAc,2CA6BhB"}
+{"version":3,"file":"TabButton.d.ts","sourceRoot":"","sources":["../../src/data/TabButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,8BAA8B;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAkC,EAClC,SAAS,GACV,EAAE,cAAc,2CA6BhB"}

package/dist/data/TabButton.js

@@ -23,7 +23,7 @@ function TabButton({
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx(Icon, { name: icon }),
+        icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon } }),
         /* @__PURE__ */ jsx("span", { children: label }),
         count !== void 0 && count > 0 && /* @__PURE__ */ jsx(
           "span",

package/dist/data/TabButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabButton.js","sources":["../../src/data/TabButton.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\n\nexport type TabButtonProps = {\n  active: boolean;\n  onClick: () => void;\n  label: ReactNode;\n  icon?: string;\n  count?: number;\n  countColor?: string;\n  className?: string;\n};\n\nexport function TabButton({\n  active,\n  onClick,\n  label,\n  icon,\n  count,\n  countColor = \"bg-muted-foreground\",\n  className,\n}: TabButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={active}\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center gap-1.5 px-density-3 py-density-1.5 text-sm rounded-md transition-colors\",\n        active\n          ? \"bg-primary text-primary-foreground\"\n          : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n        className,\n      )}\n    >\n      {icon && <Icon name={icon} />}\n      <span>{label}</span>\n      {count !== undefined && count > 0 && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white\",\n            countColor,\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe;AAAA,MACf;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,SACI,uCACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,QAAQ,oBAAC,MAAA,EAAK,MAAM,KAAA,CAAM;AAAA,QAC3B,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,QACZ,UAAU,UAAa,QAAQ,KAC9B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"TabButton.js","sources":["../../src/data/TabButton.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nexport type TabButtonProps = {\n  /** Current selected state. */\n  active: boolean;\n  /** Called when the tab is clicked. */\n  onClick: () => void;\n  /** Visible tab label. */\n  label: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge. Hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Classes applied to the button. */\n  className?: string;\n};\n\nexport function TabButton({\n  active,\n  onClick,\n  label,\n  icon,\n  count,\n  countColor = \"bg-muted-foreground\",\n  className,\n}: TabButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={active}\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center gap-1.5 px-density-3 py-density-1.5 text-sm rounded-md transition-colors\",\n        active\n          ? \"bg-primary text-primary-foreground\"\n          : \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n        className,\n      )}\n    >\n      {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n      <span>{label}</span>\n      {count !== undefined && count > 0 && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white\",\n            countColor,\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe;AAAA,MACf;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,SACI,uCACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,QAC3E,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,QACZ,UAAU,UAAa,QAAQ,KAC9B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}