hazo_ui 6.8.1 → 6.10.0

package/CHANGE_LOG.md

@@ -5,6 +5,84 @@ 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.10.0 (2026-08-15)
+
+### Added — `HazoUiKanban.renderColumnHeaderExtra`
+
+`renderColumnFooter` already gave consumers a slot under a column's body;
+there was no equivalent for the header. `renderColumnHeaderExtra` fills that
+gap — a render-prop that fires once per rendered copy of a column and returns
+a node placed inline in the header, next to the title and count badge:
+
+```tsx
+<HazoUiKanban
+  columns={columns}
+  items={items}
+  renderCard={(item) => <Card item={item} />}
+  renderColumnHeaderExtra={({ columnKey, laneKey }) =>
+    columnKey !== "todo" ? null : (
+      <SegmentedToggle value={view} onChange={setView} options={["All", "Recent"]} />
+    )
+  }
+/>
+```
+
+Same lane-scoping caveat as `renderColumnFooter`: on a laned board it fires
+once per (lane, column) pair, and the unmatched-lane sentinel row never gets
+one. The internal `render_column` parameter that gated this (`with_footer`)
+is renamed `with_consumer_callbacks` since it now gates both render-props for
+the same reason — leaking `UNMATCHED_LANE_KEY` to a consumer callback isn't
+specific to the footer.
+
+The returned node is wrapped so its pointer/mouse/key events stop
+propagation before reaching dnd-kit, the same guard already used by the
+card's pencil-edit affordance — this matters on a sectioned column, where the
+header is itself a droppable, and is a harmless no-op elsewhere.
+
+## 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

@@ -9217,6 +9217,7 @@ function KanbanColumn({
   renderCard,
   emptyColumn,
   footer,
+  headerExtra,
   cardClassName,
   showEdit,
   onEditRequest,
@@ -9277,7 +9278,8 @@ function KanbanColumn({
             treeKey,
             title: column.title,
             count: items.length,
-            droppable: sections != null
+            droppable: sections != null,
+            headerExtra
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -9332,7 +9334,8 @@ function KanbanColumnHead({
   treeKey,
   title,
   count,
-  droppable
+  droppable,
+  headerExtra
 }) {
   const { setNodeRef, isOver } = core$1.useDroppable({
     id: tree_droppable_id("columnhead", treeKey, laneKey, columnKey),
@@ -9346,13 +9349,25 @@ function KanbanColumnHead({
       "data-column-key": columnKey,
       "data-lane-key": laneKey,
       className: cn(
-        "cls_hazo_kanban_column_head mb-2 flex items-center justify-between rounded-sm px-1 text-xs uppercase tracking-wider text-muted-foreground",
+        "cls_hazo_kanban_column_head mb-2 flex items-center justify-between gap-2 rounded-sm px-1 text-xs uppercase tracking-wider text-muted-foreground",
         droppable && "py-1",
         isOver && "cls_hazo_kanban_column_head_over bg-accent/30 text-foreground ring-1 ring-ring/40"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_title", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_count rounded-full bg-muted px-2 py-0.5 text-foreground", children: count })
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cls_hazo_kanban_column_head_title_group flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_title truncate", children: title }),
+          headerExtra ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "cls_hazo_kanban_column_head_extra shrink-0",
+              onPointerDown: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              children: headerExtra
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_hazo_kanban_column_count shrink-0 rounded-full bg-muted px-2 py-0.5 text-foreground", children: count })
       ]
     }
   );
@@ -9933,6 +9948,7 @@ function HazoUiKanban({
   announcements,
   emptyColumn = "\u2014",
   renderColumnFooter,
+  renderColumnHeaderExtra,
   className,
   cardClassName,
   itemLabel,
@@ -10186,7 +10202,7 @@ function HazoUiKanban({
       total += (grouped.get(bucket_key(lane_key, col.key)) ?? []).length;
     return total;
   }
-  function render_column(col, tree_key, lane_key, with_footer = true) {
+  function render_column(col, tree_key, lane_key, with_consumer_callbacks = true) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       KanbanColumn,
       {
@@ -10196,7 +10212,8 @@ function HazoUiKanban({
         items: grouped.get(bucket_key(lane_key, col.key)) ?? [],
         renderCard,
         emptyColumn,
-        footer: with_footer ? renderColumnFooter?.({ columnKey: col.key, laneKey: lane_key }) ?? null : null,
+        footer: with_consumer_callbacks ? renderColumnFooter?.({ columnKey: col.key, laneKey: lane_key }) ?? null : null,
+        headerExtra: with_consumer_callbacks ? renderColumnHeaderExtra?.({ columnKey: col.key, laneKey: lane_key }) ?? null : null,
         cardClassName,
         showEdit: show_edit,
         onEditRequest: handle_edit_request
@@ -12537,6 +12554,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 +12677,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 +12810,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 +12847,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;