@equal-experts/kuat-react 0.15.0-beta.1 → 0.15.0-beta.2

package/agent-docs/AGENTS.md

@@ -7,4 +7,4 @@ Rules for this install live under `agent-docs/` in `@equal-experts/kuat-core`, `
 3. Load component guides via `agent-docs/components/components.manifest.json`.
 4. Skills: `kuat-review`, `kuat-create` from [kuat-agent-docs](https://github.com/equalexperts/kuat-agent-docs).
 
-**Version:** 0.15.0-beta.1 · **Rules snapshot:** 038a985b57fe
+**Version:** 0.15.0-beta.2 · **Rules snapshot:** bdf7dafd019a

package/agent-docs/README.md

@@ -14,4 +14,4 @@ Curated agent docs bundled with `@equal-experts/kuat-core`, `@equal-experts/kuat
 node scripts/agent-docs/bundle-for-core.mjs
 ```
 
-Built against upstream ref: `038a985b57fe`
+Built against upstream ref: `bdf7dafd019a`

package/agent-docs/components/components.manifest.json

@@ -24,6 +24,30 @@
       "displayName": "Callout",
       "path": "components/callout.md",
       "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
+    },
+    "kuat:status-badge": {
+      "slug": "status-badge",
+      "displayName": "StatusBadge",
+      "path": "components/status-badge.md",
+      "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
+    },
+    "kuat:tag": {
+      "slug": "tag",
+      "displayName": "Tag",
+      "path": "components/tag.md",
+      "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
+    },
+    "kuat:tag-group": {
+      "slug": "tag-group",
+      "displayName": "TagGroup",
+      "path": "components/tag-group.md",
+      "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
+    },
+    "kuat:counter-badge": {
+      "slug": "counter-badge",
+      "displayName": "CounterBadge",
+      "path": "components/counter-badge.md",
+      "sources": ["@equal-experts/kuat-react", "@equal-experts/kuat-vue"]
     }
   }
 }

package/agent-docs/components/counter-badge.md

@@ -0,0 +1,57 @@
+# CounterBadge (`kuat:counter-badge`)
+
+## Overview
+
+Digits-only count pill designed to overlay the top-right of an icon or avatar: solid fill, white text, "{max}+" overflow above the cap (99 by default). Two types — `primary` (brand blue) and `attention` (destructive red). Exported from `@equal-experts/kuat-react` / `@equal-experts/kuat-vue`.
+
+## When to use
+
+- Unread/notification counts on icons, tabs, or navigation items
+- `attention` when the count demands action; `primary` for routine counts
+
+## When not to use
+
+- Text labels of any kind — use `StatusBadge` or `Tag`
+- Counts the user needs exactly beyond the cap — show the full number in content instead
+
+## Variants
+
+- `primary` (default) — `--primary` fill (brand ee-blue)
+- `attention` — `--destructive` fill (brand runtime-red)
+
+Solid fill only. The published Figma component ships these two Type variants; a possible future solid/outlined axis is logged upstream but not designed, so it is deliberately not in this API.
+
+## States
+
+None — non-interactive, digits only.
+
+## Content guidance
+
+- Digits only; the component renders `count`, never child content.
+- Counts above `max` render as "{max}+" (default "99+").
+
+## Behaviour
+
+- Renders a `<span>` with tabular numerals; `min-width` keeps single digits circular.
+- Overlay anchoring is the consumer's job (absolute positioning over the anchor icon/avatar) — see the Storybook `OverlayAnchoring` story.
+
+## Accessibility
+
+- The count renders as real text, so it is announced as-is; when the badge overlays an icon, give the anchor an accessible name that includes the count context (e.g. `aria-label="Notifications, 3 unread"`).
+- Fills use the same semantic tokens as primary/destructive Buttons, so the white-text pairing matches the established DS pairing in both modes.
+
+## API
+
+Import from `@equal-experts/kuat-react` (subpath: `@equal-experts/kuat-react/counter-badge`) or `@equal-experts/kuat-vue` (subpath: `@equal-experts/kuat-vue/counter-badge`).
+
+- `count: number` — required
+- `max?: number` — default `99`
+- `type?: "primary" | "attention"` — default `"primary"`
+
+See Storybook (`Data Display/CounterBadge`) for overflow and overlay-anchoring examples.
+
+## Related components
+
+- `kuat:status-badge` — status indication with a text label
+- `kuat:tag` — categorisation labels
+- `kuat:badge` — deprecated predecessor; see `kuat-docs/DEPRECATIONS.md`

package/agent-docs/components/status-badge.md

@@ -0,0 +1,68 @@
+# StatusBadge (`kuat:status-badge`)
+
+## Overview
+
+Non-interactive status indicator: five semantic types (success, warning, error, info, neutral), two sizes, a built-in per-type icon, and a solid fill. Reuses Callout's bar colour vocabulary (the raw brand ramps) plus a server-slate neutral. Exported from `@equal-experts/kuat-react` / `@equal-experts/kuat-vue`. Supersedes the deprecated `Badge` for status indication.
+
+## When to use
+
+- RAG/status states on rows, cards, or progress trackers — one per item
+- Success = completed/positive, Warning = needs attention, Error = failure/destructive, Info = neutral informational
+- Neutral = non-semantic metadata (e.g. "Archived") where no status colour applies
+
+## When not to use
+
+- Decorative or promotional labels ("New feature", "Popular") — status colour is reserved for status, per the Figma Do/Don't guidance
+- Categorisation a user filters by, or zero-to-many labels per item — use `Tag`
+- Numeric counts — use `CounterBadge`
+- Anything interactive — StatusBadge never takes an `onClick`; that is the dividing line from `Tag`
+
+## Variants
+
+Five semantic `type` values, each a solid fill with white text (neutral: dark text):
+
+- `success` (default) — uptime-green fill, `CheckCircle2` icon
+- `warning` — equal-ember fill, `AlertCircle` icon
+- `error` — runtime-red fill, `XCircle` icon
+- `info` — ee-blue fill, `BadgeInfo` icon
+- `neutral` — server-slate-200 fill, dark text, no icon
+
+Solid fill only — no subtle/tint mode exists, by design.
+
+## States
+
+- **Size** — `base` (12px text) or `large` (14px text); icon is 12px in both.
+- Non-interactive: no hover, focus, or pressed states.
+
+## Content guidance
+
+- Label is a single short word or phrase stating the status ("Complete", "Failed", "Needs attention").
+- Status is never conveyed by colour alone: the icon shape and the label wording both carry the meaning.
+
+## Behaviour
+
+- Renders a `<span>`; the per-type icon is chosen automatically and cannot be swapped.
+- Renders identically in light and dark mode — the fills are raw brand ramps, not mode-flipping aliases, because no dark-mode spec exists yet.
+
+## Accessibility
+
+- Icon is `aria-hidden="true"` — decorative reinforcement of the label text.
+- Colour is always paired with icon + label (WCAG 1.4.1); neutral has no icon but also no status semantics.
+- Note: white text on the warning (equal-ember) and info (ee-blue-500) fills follows the Figma spec and matches the existing primary Button pairing, but sits below 4.5:1 at Base size — flagged upstream as a design-token question, not deviated from in code.
+
+## API
+
+Import from `@equal-experts/kuat-react` (subpath: `@equal-experts/kuat-react/status-badge`) or `@equal-experts/kuat-vue` (subpath: `@equal-experts/kuat-vue/status-badge`).
+
+- `type?: "success" | "warning" | "error" | "info" | "neutral"` — default `"success"`
+- `size?: "base" | "large"` — default `"base"`
+- Label is the child content
+
+See Storybook (`Data Display/StatusBadge`) for every type and size.
+
+## Related components
+
+- `kuat:tag` — categorisation (zero-to-many per item, interactive, tint fill)
+- `kuat:counter-badge` — numeric counts
+- `kuat:callout` — status messages with title/description tied to a content section
+- `kuat:badge` — deprecated predecessor; see `kuat-docs/DEPRECATIONS.md`

package/agent-docs/components/tag-group.md

@@ -0,0 +1,53 @@
+# TagGroup (`kuat:tag-group`)
+
+## Overview
+
+Thin accessibility wrapper for a set of `Tag`s: a labelled `role="group"`, flex-wrap layout (8px gap in both axes), and a polite `aria-live` region that announces tag removal. Layout is plain CSS — the component exists for the behaviour a flex container doesn't give you for free. Exported from `@equal-experts/kuat-react` / `@equal-experts/kuat-vue`.
+
+## When to use
+
+- Any set of related Tags — especially dismissible (applied filters) or toggle (filter) groups
+
+## When not to use
+
+- A single standalone Tag
+- Grouping anything other than Tags
+
+## Variants
+
+None — a single presentation.
+
+## States
+
+None of its own; tags inside carry their own states.
+
+## Content guidance
+
+- `label` names what the group is, e.g. "Technology filters", "Applied filters" — it's the group's accessible name, read by screen readers on entry.
+
+## Behaviour
+
+- Wrapping, spacing, and reflow after dismissal are plain `flex-wrap` — no layout logic.
+- When a `Tag` with `mode="dismiss"` inside the group is dismissed, the group's live region announces "{label} removed".
+- For 8–10+ tags, the Figma exploration recommends a "+N more" collapse — not built into this component; curate or collapse in the consumer.
+
+## Accessibility
+
+- `role="group"` + `aria-label` from the required `label` prop.
+- Dismissals are announced via a visually hidden `aria-live="polite"` region inside the group.
+- Per-tag semantics (`aria-pressed`, hidden icons, touch targets) live on `Tag` itself.
+
+## API
+
+Import from `@equal-experts/kuat-react` (subpath: `@equal-experts/kuat-react/tag-group`) or `@equal-experts/kuat-vue` (subpath: `@equal-experts/kuat-vue/tag-group`).
+
+- `label: string` — required accessible name
+- Children are the Tags
+
+No Figma component mapping: TagGroup is a documented exception — the upstream exploration concluded "no component needed" for layout, so only this code wrapper exists (for the accessibility behaviour), with the Figma exploration frame as its design reference.
+
+See Storybook (`Data Display/TagGroup`) for wrapping and dismissal examples.
+
+## Related components
+
+- `kuat:tag` — the tags inside the group

package/agent-docs/components/tag.md

@@ -0,0 +1,72 @@
+# Tag (`kuat:tag`)
+
+## Overview
+
+Categorisation pill on the extended Data/Digital palette: nine colour categories, full pill radius, and three interaction modes — display (non-interactive), toggle (multi-select filter), and dismiss (removable). Colours come from per-category `--tag-*` semantic tokens in `@equal-experts/kuat-core` (mirroring the Figma "semantic colors" collection) with dedicated light and dark values. Exported from `@equal-experts/kuat-react` / `@equal-experts/kuat-vue`.
+
+## When to use
+
+- Zero-to-many category labels per item (skills, technologies, topics)
+- Multi-select filter chips (`mode="toggle"`)
+- Applied-filter chips the user can remove (`mode="dismiss"`)
+
+## When not to use
+
+- Status indication — use `StatusBadge` (one per item, status colours)
+- Mixing toggle and dismiss tags within the same group — pick one interaction model per group
+- More than 8–10 tags per item without curation — collapse or curate instead
+
+## Variants
+
+Nine `color` categories: `base` (EE neutral scale) plus the eight extended Data/Digital ramps — `index-indigo`, `transform-teal`, `packet-plum`, `server-slate`, `logic-lime`, `signal-yellow`, `cursor-coral`, `patch-peach`.
+
+## States
+
+Each state uses its category's semantic token (light value → dark value in ramp steps):
+
+- **Default** — `--tag-{category}-background` (`/50` → `/700`), text `--tag-{category}-foreground` (`/700` → `/100`)
+- **Hover** (interactive modes) — `--tag-{category}-background-hover` (`/100` → `/600`) + 1px `--tag-{category}-border` (`/700` → `/100`)
+- **Selected Toggle** — `--tag-{category}-background-selected` (`/200` → `/500`) + trailing check icon
+- **Selected Dismiss** — same selected background + trailing x icon (dismiss tags always render this visual)
+- **Disabled** — 50% opacity, no pointer events
+
+`base` maps to the EE neutral ramp with the same steps (white background in light mode).
+
+## Content guidance
+
+- One or two words per tag; the label names the category, not the action.
+- For dismiss tags, consider passing `aria-label="Remove {label}"` when the surrounding context doesn't already make the action obvious.
+
+## Behaviour
+
+- `mode="display"` renders a `<span>`; `toggle` and `dismiss` render a `<button type="button">` — a conditional element choice built into Tag, not a polymorphic base.
+- Toggle: clicking calls `onSelectedChange(next)` (React) / emits `update:selected` (Vue); the consumer owns the state.
+- Dismiss: clicking calls `onDismiss` (React) / emits `dismiss` (Vue) and, inside a `TagGroup`, announces "{label} removed" via the group's live region.
+- Full light/dark support: the `--tag-*` semantic tokens flip with the `.dark` class, so tags invert (dark `/700` fills with `/100` text) without any component-level changes.
+
+## Accessibility
+
+- 44px-tall invisible hit area extends beyond the 37px visual pill (WCAG 2.5.8 touch target).
+- Toggle tags expose `aria-pressed`; check/dismiss icons are `aria-hidden="true"`.
+- WCAG AA contrast confirmed per colour in the Figma spec (tightest: Transform Teal selected, 4.67:1).
+- Keyboard-operable: real `<button>` semantics, visible focus ring.
+
+## API
+
+Import from `@equal-experts/kuat-react` (subpath: `@equal-experts/kuat-react/tag`) or `@equal-experts/kuat-vue` (subpath: `@equal-experts/kuat-vue/tag`).
+
+- `color?: TagColor` — default `"base"`
+- `mode?: "display" | "toggle" | "dismiss"` — default `"display"`
+- `selected?: boolean` — toggle mode only, default `false`
+- `onSelectedChange?: (selected: boolean) => void` (React) / `@update:selected` (Vue)
+- `onDismiss?: () => void` (React) / `@dismiss` (Vue)
+- `disabled?: boolean`
+- Label is the child content
+
+See Storybook (`Data Display/Tag`) for all colours, modes, and states.
+
+## Related components
+
+- `kuat:tag-group` — wrap every set of Tags in one for the group role, label, and dismissal announcements
+- `kuat:status-badge` — status indication (one per item, status colours)
+- `kuat:badge` — deprecated predecessor; see `kuat-docs/DEPRECATIONS.md`

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/component-decision-tree.md

@@ -36,6 +36,10 @@ Pre-built compositions that combine multiple components:
 
 Custom components unique to the design system:
 - `ButtonGroup` - Group of related buttons
+- `StatusBadge` - Status indicator (success/warning/error/info/neutral, one per item, non-interactive)
+- `Tag` - Categorisation pill (nine colours, zero-to-many per item, toggle or dismiss interaction)
+- `TagGroup` - Accessibility wrapper for a set of Tags (group role, label, dismissal announcements)
+- `CounterBadge` - Numeric count pill ("99+" overflow, overlays icons/avatars)
 - Other components not available in shadcn
 
 **Use when:** The component doesn't exist in shadcn but is needed across multiple applications.

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/component-registry.md

@@ -11,9 +11,16 @@ Stable IDs link patterns and checklists to per-component guides in the implement
 | `shadcn:button` | Button | shadcn CLI + `kuat-core` theme | `components/button.md` | [complete a form](./patterns/complete-a-form.md), [sign in](./patterns/sign-in.md), [content/actions](./content/actions.md) |
 | `kuat:button-group` | ButtonGroup | `@equal-experts/kuat-react` / `kuat-vue` | `components/button-group.md` | [component-decision-tree](./component-decision-tree.md) |
 | `kuat:kuat-header` | KuatHeader | `@equal-experts/kuat-react` / `kuat-vue` block | `components/kuat-header.md` | [component-decision-tree](./component-decision-tree.md), [design](./design.md) |
+| `kuat:callout` | Callout | `@equal-experts/kuat-react` / `kuat-vue` | `components/callout.md` | [component-decision-tree](./component-decision-tree.md) |
+| `kuat:status-badge` | StatusBadge | `@equal-experts/kuat-react` / `kuat-vue` | `components/status-badge.md` | [component-decision-tree](./component-decision-tree.md) |
+| `kuat:tag` | Tag | `@equal-experts/kuat-react` / `kuat-vue` | `components/tag.md` | [component-decision-tree](./component-decision-tree.md) |
+| `kuat:tag-group` | TagGroup | `@equal-experts/kuat-react` / `kuat-vue` | `components/tag-group.md` | [component-decision-tree](./component-decision-tree.md) |
+| `kuat:counter-badge` | CounterBadge | `@equal-experts/kuat-react` / `kuat-vue` | `components/counter-badge.md` | [component-decision-tree](./component-decision-tree.md) |
 
 Expand this table in `kuat-mono` as component docs are added. Keep IDs stable; add new rows rather than renaming IDs.
 
+> `Badge` (the predecessor of StatusBadge/Tag/CounterBadge) is deprecated and intentionally has no registry row — see `kuat-docs/DEPRECATIONS.md` in `kuat-mono`.
+
 ---
 
 ## ID conventions

package/agent-docs/manifest.json

@@ -1,8 +1,8 @@
 {
-  "packageVersion": "0.15.0-beta.1",
+  "packageVersion": "0.15.0-beta.2",
   "rules": {
-    "snapshotRef": "038a985b57fe567a24d3a663277f4594d75b9a87",
-    "snapshotDate": "2026-07-06T14:20:52.535Z",
+    "snapshotRef": "bdf7dafd019a6dadb8369bc4fd2d13964f6a111c",
+    "snapshotDate": "2026-07-14T10:57:49.931Z",
     "sourceRepo": "equalexperts/kuat-agent-docs",
     "loadingPath": "agent-docs/rules/LOADING-consumer.md"
   }

package/agent-docs/rules/LOADING-consumer.md

@@ -2,7 +2,7 @@
 
 **Package:** @equal-experts/kuat-core (and mirrored in kuat-react / kuat-vue agent-docs)
 
-**Snapshot:** 038a985b57fe
+**Snapshot:** bdf7dafd019a
 
 ## Default load (web product / marketing UI)
 

package/dist/badge-BFeIqSCP.js

@@ -0,0 +1,25 @@
+import { jsx as u } from "react/jsx-runtime";
+import { c as r } from "./utils-DLUjLwnh.js";
+const g = ["default", "secondary", "destructive", "outline", "ghost"], f = ["default", "round"];
+let t = !1;
+function l({ className: e, variant: a = "default", roundness: d = "default", ...s }) {
+  return process.env.NODE_ENV !== "production" && !t && (t = !0, console.warn(
+    "[kuat-react] Badge is deprecated - use StatusBadge (status), Tag (categorisation), or CounterBadge (counts). See kuat-docs/DEPRECATIONS.md."
+  )), /* @__PURE__ */ u(
+    "div",
+    {
+      className: r("badge", `badge--${a}`, `badge--roundness-${d}`, e),
+      ...s
+    }
+  );
+}
+function o(e) {
+  const a = (e == null ? void 0 : e.variant) ?? "default", d = (e == null ? void 0 : e.roundness) ?? "default";
+  return r("badge", `badge--${a}`, `badge--roundness-${d}`);
+}
+export {
+  l as B,
+  g as a,
+  o as b,
+  f as c
+};

package/dist/badge.js

@@ -1,5 +1,5 @@
 import { c as e } from "./utils-DLUjLwnh.js";
-import { B as s, b as t } from "./badge-BZgdEQSD.js";
+import { B as s, b as t } from "./badge-BFeIqSCP.js";
 export {
   s as Badge,
   t as badgeVariants,

package/dist/components/ui/badge/badge.d.ts

@@ -7,8 +7,15 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: BadgeVariant;
     roundness?: BadgeRoundness;
 }
+/**
+ * @deprecated Use `StatusBadge` for status indication, `Tag` for categorisation, or
+ * `CounterBadge` for numeric counts. See kuat-docs/DEPRECATIONS.md. Removal target: next major.
+ */
 declare function Badge({ className, variant, roundness, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
-/** Returns class string for badge variant (backward compatibility). */
+/**
+ * Returns class string for badge variant (backward compatibility).
+ * @deprecated Use `statusBadgeVariants`, `tagVariants`, or `counterBadgeVariants` instead.
+ */
 export declare function badgeVariants(options: {
     variant?: BadgeVariant;
     roundness?: BadgeRoundness;

package/dist/components/ui/counter-badge/counter-badge.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export declare const COUNTER_BADGE_TYPES: readonly ["primary", "attention"];
+export type CounterBadgeType = (typeof COUNTER_BADGE_TYPES)[number];
+export interface CounterBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    count: number;
+    /** Counts above this render as "{max}+". */
+    max?: number;
+    type?: CounterBadgeType;
+}
+declare const CounterBadge: React.ForwardRefExoticComponent<CounterBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+/** Returns class string for counter badge variant (backward compatibility). */
+export declare function counterBadgeVariants(options?: {
+    type?: CounterBadgeType;
+}): string;
+export { CounterBadge };

package/dist/components/ui/counter-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { CounterBadge, counterBadgeVariants, COUNTER_BADGE_TYPES, } from './counter-badge';
+export type { CounterBadgeProps, CounterBadgeType } from './counter-badge';

package/dist/components/ui/status-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBadge, statusBadgeVariants, STATUS_BADGE_TYPES, STATUS_BADGE_SIZES, } from './status-badge';
+export type { StatusBadgeProps, StatusBadgeType, StatusBadgeSize, } from './status-badge';

package/dist/components/ui/status-badge/status-badge.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export declare const STATUS_BADGE_TYPES: readonly ["success", "warning", "error", "info", "neutral"];
+export type StatusBadgeType = (typeof STATUS_BADGE_TYPES)[number];
+export declare const STATUS_BADGE_SIZES: readonly ["base", "large"];
+export type StatusBadgeSize = (typeof STATUS_BADGE_SIZES)[number];
+export interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    type?: StatusBadgeType;
+    size?: StatusBadgeSize;
+}
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+/** Returns class string for status badge variant (backward compatibility). */
+export declare function statusBadgeVariants(options?: {
+    type?: StatusBadgeType;
+    size?: StatusBadgeSize;
+}): string;
+export { StatusBadge };

package/dist/components/ui/tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag, tagVariants, TAG_COLORS, TAG_MODES } from './tag';
+export type { TagProps, TagColor, TagMode } from './tag';

package/dist/components/ui/tag/tag.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export declare const TAG_COLORS: readonly ["base", "index-indigo", "transform-teal", "packet-plum", "server-slate", "logic-lime", "signal-yellow", "cursor-coral", "patch-peach"];
+export type TagColor = (typeof TAG_COLORS)[number];
+export declare const TAG_MODES: readonly ["display", "toggle", "dismiss"];
+export type TagMode = (typeof TAG_MODES)[number];
+export interface TagProps extends React.HTMLAttributes<HTMLElement> {
+    color?: TagColor;
+    /** One interaction model per group: display (non-interactive), toggle (multi-select filter), or dismiss (removable). Do not mix toggle and dismiss tags within the same group. */
+    mode?: TagMode;
+    /** Toggle mode only: whether the tag is selected. */
+    selected?: boolean;
+    /** Toggle mode only: called with the next selected state on click. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Dismiss mode only: called when the tag is dismissed. */
+    onDismiss?: () => void;
+    disabled?: boolean;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
+/** Returns class string for tag variant (backward compatibility). */
+export declare function tagVariants(options?: {
+    color?: TagColor;
+    mode?: TagMode;
+    selected?: boolean;
+}): string;
+export { Tag };

package/dist/components/ui/tag-group/index.d.ts

@@ -0,0 +1,4 @@
+export { TagGroup } from './tag-group';
+export type { TagGroupProps } from './tag-group';
+export { TagGroupContext, useTagGroup } from './tag-group-context';
+export type { TagGroupContextValue } from './tag-group-context';

package/dist/components/ui/tag-group/tag-group-context.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface TagGroupContextValue {
+    /** Push a message to the group's aria-live region (e.g. "Design removed"). */
+    announce: (message: string) => void;
+}
+export declare const TagGroupContext: React.Context<TagGroupContextValue | null>;
+/** Returns the enclosing TagGroup's context, or null outside a TagGroup. */
+export declare function useTagGroup(): TagGroupContextValue | null;

package/dist/components/ui/tag-group/tag-group.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible name for the group, e.g. "Technology filters". */
+    label: string;
+}
+declare const TagGroup: React.ForwardRefExoticComponent<TagGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { TagGroup };

package/dist/counter-badge-JLm2U18L.js

@@ -0,0 +1,27 @@
+import { jsx as u } from "react/jsx-runtime";
+import * as g from "react";
+import { c } from "./utils-DLUjLwnh.js";
+const p = ["primary", "attention"], i = g.forwardRef(function({ className: r, count: e, max: t = 99, type: n = "primary", ...o }, d) {
+  const s = e > t ? `${t}+` : String(e);
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      ref: d,
+      "data-slot": "counter-badge",
+      "data-type": n,
+      className: c("counter-badge", `counter-badge--${n}`, r),
+      ...o,
+      children: s
+    }
+  );
+});
+i.displayName = "CounterBadge";
+function y(a) {
+  const r = (a == null ? void 0 : a.type) ?? "primary";
+  return c("counter-badge", `counter-badge--${r}`);
+}
+export {
+  i as C,
+  p as a,
+  y as c
+};

package/dist/counter-badge.d.ts

@@ -0,0 +1,3 @@
+export { cn } from './lib/utils';
+export { CounterBadge, counterBadgeVariants, COUNTER_BADGE_TYPES, } from './components/ui/counter-badge';
+export type { CounterBadgeProps, CounterBadgeType } from './components/ui/counter-badge';

package/dist/counter-badge.js

@@ -0,0 +1,8 @@
+import { c as e } from "./utils-DLUjLwnh.js";
+import { a as s, C as t, c } from "./counter-badge-JLm2U18L.js";
+export {
+  s as COUNTER_BADGE_TYPES,
+  t as CounterBadge,
+  e as cn,
+  c as counterBadgeVariants
+};

package/dist/index.d.ts

@@ -25,6 +25,14 @@ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from '.
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/ui/alert-dialog';
 export { Badge, badgeVariants, BADGE_VARIANTS, BADGE_ROUNDNESS } from './components/ui/badge';
 export type { BadgeProps, BadgeVariant, BadgeRoundness } from './components/ui/badge';
+export { StatusBadge, statusBadgeVariants, STATUS_BADGE_TYPES, STATUS_BADGE_SIZES, } from './components/ui/status-badge';
+export type { StatusBadgeProps, StatusBadgeType, StatusBadgeSize, } from './components/ui/status-badge';
+export { Tag, tagVariants, TAG_COLORS, TAG_MODES } from './components/ui/tag';
+export type { TagProps, TagColor, TagMode } from './components/ui/tag';
+export { TagGroup, TagGroupContext, useTagGroup } from './components/ui/tag-group';
+export type { TagGroupProps, TagGroupContextValue } from './components/ui/tag-group';
+export { CounterBadge, counterBadgeVariants, COUNTER_BADGE_TYPES, } from './components/ui/counter-badge';
+export type { CounterBadgeProps, CounterBadgeType } from './components/ui/counter-badge';
 export { Breadcrumb, BreadcrumbRoot, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from './components/ui/breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemEntry, BreadcrumbLinkProps, } from './components/ui/breadcrumb';
 export { Button, buttonVariants, BUTTON_VARIANTS, BUTTON_SIZES, BUTTON_COLORS, } from './components/ui/button';