hazo_ui 6.8.0 → 6.9.0

package/CHANGE_LOG.md

@@ -5,6 +5,50 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.9.0 (2026-08-06)
+
+### Added — `Badge`, `StatusBadge`, `makeStatusBadge`
+
+A generic, token-backed pill component plus a status-mapping layer built on
+top of it:
+
+```tsx
+import { Badge, StatusBadge, makeStatusBadge } from "hazo_ui";
+
+<Badge tone="success" dot>Active</Badge>
+
+<StatusBadge
+  status={order.status}
+  statusMap={{
+    pending: { label: "Pending", tone: "warning", dot: true, pulse: true },
+    shipped: { label: "Shipped", tone: "info" },
+    done: { label: "Done", tone: "success" },
+  }}
+  fallback={{ label: "Unknown", tone: "neutral" }}
+/>
+
+// Pre-bind a statusMap once per status enum:
+const OrderStatusBadge = makeStatusBadge<OrderStatus>(orderStatusMap);
+<OrderStatusBadge status={order.status} />
+```
+
+`Badge` is a `cva`-driven soft-fill pill (`button.tsx`'s pattern) with 8
+semantic `tone`s (`neutral`/`primary`/`secondary`/`accent`/`success`/
+`warning`/`destructive`/`info`), all mapped to existing theme tokens — no
+hardcoded hex. Optional `dot`/`pulse` render a leading status dot, colored via
+a literal-string tone→class lookup (a templated `bg-${tone}` would compile to
+zero CSS under Tailwind's JIT scanner). `className` passthrough via `cn()`
+lets consumers override pill size or add mono/uppercase/border styling —
+v1 deliberately has no solid/outline `variant` axis.
+
+`StatusBadge<S extends string>` resolves `statusMap[status] ?? fallback ??
+{ label: String(status), tone: "neutral" }` and renders a `Badge`.
+`makeStatusBadge(statusMap, fallback?)` pre-binds the map so call sites don't
+repeat it. Generalises kinstripe/seo_monitor's per-app inline status-pill
+duplication. New exports: `Badge`, `StatusBadge`, `makeStatusBadge`,
+`badgeVariants`, and types `BadgeProps`, `BadgeTone`, `StatusBadgeItem`,
+`StatusBadgeProps`.
+
 ## v6.8.0 (2026-08-03)
 
 ### Added — text prefixes: `PrefixConfig.insert_as_text` + `CommandItem.insert_text`

package/dist/index.cjs

@@ -12537,6 +12537,86 @@ function useScrollRestore(treeId, viewName, options) {
   const load = React27.useCallback(() => loadScrollPos(key), [key]);
   return { save, load };
 }
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap select-none",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-muted text-muted-foreground",
+        primary: "bg-primary/10 text-primary",
+        secondary: "bg-secondary text-secondary-foreground",
+        accent: "bg-accent text-accent-foreground",
+        success: "bg-success/15 text-success",
+        warning: "bg-warning/15 text-warning",
+        destructive: "bg-destructive/15 text-destructive",
+        info: "bg-info/15 text-info"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var TONE_DOT_CLASS = {
+  neutral: "bg-muted-foreground",
+  primary: "bg-primary",
+  secondary: "bg-secondary-foreground",
+  accent: "bg-accent-foreground",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info"
+};
+var Badge = React27__namespace.forwardRef(
+  ({ className, tone, dot = false, pulse = false, children, ...props }, ref) => {
+    const resolvedTone = tone ?? "neutral";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn(badgeVariants({ tone: resolvedTone }), className),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "inline-block h-1.5 w-1.5 rounded-full",
+                TONE_DOT_CLASS[resolvedTone],
+                pulse && "animate-pulse"
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+function StatusBadgeInner({ status, statusMap, fallback, className, ...rest }, ref) {
+  const meta = statusMap[status] ?? fallback ?? { label: String(status), tone: "neutral" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Badge,
+    {
+      ref,
+      tone: meta.tone,
+      dot: meta.dot,
+      pulse: meta.pulse,
+      className,
+      ...rest,
+      children: meta.label
+    }
+  );
+}
+StatusBadgeInner.displayName = "StatusBadge";
+var StatusBadge = React27__namespace.forwardRef(StatusBadgeInner);
+function makeStatusBadge(statusMap, fallback) {
+  const Component = React27__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { ref, ...props, statusMap, fallback }));
+  Component.displayName = "StatusBadge(bound)";
+  return Component;
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -12580,6 +12660,7 @@ exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.AppFooter = AppFooter;
 exports.AppHeader = AppHeader;
+exports.Badge = Badge;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupSeparator = ButtonGroupSeparator;
@@ -12712,6 +12793,7 @@ exports.Slider = Slider;
 exports.Sparkline = Sparkline;
 exports.Spinner = Spinner;
 exports.StackedBars = StackedBars;
+exports.StatusBadge = StatusBadge;
 exports.Switch = Switch;
 exports.Table = Table2;
 exports.TableBody = TableBody;
@@ -12748,6 +12830,7 @@ exports.get_hazo_ui_config = get_hazo_ui_config;
 exports.get_logger = get_logger;
 exports.hasUrlParam = hasUrlParam;
 exports.isLucideValue = isLucideValue;
+exports.makeStatusBadge = makeStatusBadge;
 exports.median = median;
 exports.parse_commands_from_text = parse_commands_from_text;
 exports.permissionToast = permissionToast;