@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/badge.js

@@ -0,0 +1,226 @@
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/badge.tsx
+/**
+* Badge — inline status/category/count label.
+*
+* cva-driven span, non-interactive by default. Styled on two axes — `tone`
+* (what it means) × `emphasis` (how loudly it's drawn) — with the old single
+* `variant` list kept as a deprecated alias.
+*/
+var badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+	variants: {
+		tone: {
+			default: "",
+			secondary: "",
+			destructive: ""
+		},
+		emphasis: {
+			filled: "",
+			outline: "",
+			ghost: ""
+		}
+	},
+	compoundVariants: [
+		{
+			tone: "default",
+			emphasis: "filled",
+			class: "bg-primary text-primary-foreground [a]:hover:bg-primary-hover [a]:active:bg-primary-active"
+		},
+		{
+			tone: "secondary",
+			emphasis: "filled",
+			class: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80"
+		},
+		{
+			tone: "destructive",
+			emphasis: "filled",
+			class: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20"
+		},
+		{
+			tone: "default",
+			emphasis: "outline",
+			class: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground"
+		},
+		{
+			tone: "secondary",
+			emphasis: "outline",
+			class: "border-border text-muted-foreground [a]:hover:bg-muted"
+		},
+		{
+			tone: "destructive",
+			emphasis: "outline",
+			class: "border-destructive/40 text-destructive focus-visible:ring-destructive/20 [a]:hover:bg-destructive/10"
+		},
+		{
+			tone: "default",
+			emphasis: "ghost",
+			class: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50"
+		},
+		{
+			tone: "secondary",
+			emphasis: "ghost",
+			class: "text-muted-foreground hover:bg-muted dark:hover:bg-muted/50"
+		},
+		{
+			tone: "destructive",
+			emphasis: "ghost",
+			class: "text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20"
+		}
+	],
+	defaultVariants: {
+		tone: "default",
+		emphasis: "filled"
+	}
+});
+var LEGACY_VARIANT = {
+	default: {
+		tone: "default",
+		emphasis: "filled"
+	},
+	secondary: {
+		tone: "secondary",
+		emphasis: "filled"
+	},
+	destructive: {
+		tone: "destructive",
+		emphasis: "filled"
+	},
+	outline: {
+		tone: "default",
+		emphasis: "outline"
+	},
+	ghost: {
+		tone: "default",
+		emphasis: "ghost"
+	}
+};
+function Badge({ className, tone, emphasis, variant, asChild = false, truncate = false, maxWidth, style, children, title, ...props }) {
+	const Comp = asChild ? Slot.Root : "span";
+	const legacy = variant && variant !== "link" ? LEGACY_VARIANT[variant] : void 0;
+	const resolvedTone = tone ?? legacy?.tone ?? "default";
+	const resolvedEmphasis = emphasis ?? legacy?.emphasis ?? (variant === "link" ? "ghost" : "filled");
+	const truncating = !asChild && (truncate || maxWidth !== void 0);
+	const content = truncating ? React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate",
+		children: child
+	}) : child) : children;
+	const fullLabel = title ?? (truncating ? React.Children.toArray(children).filter((c) => typeof c === "string" || typeof c === "number").join("") || void 0 : void 0);
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "badge",
+		"data-tone": resolvedTone,
+		"data-emphasis": resolvedEmphasis,
+		"data-variant": variant,
+		className: cn(badgeVariants({
+			tone: resolvedTone,
+			emphasis: resolvedEmphasis
+		}), variant === "link" && "text-primary underline-offset-4 hover:bg-transparent hover:text-primary hover:underline", truncating && "max-w-full min-w-0", className),
+		style: maxWidth !== void 0 ? {
+			maxWidth,
+			...style
+		} : style,
+		title: fullLabel,
+		...props,
+		children: content
+	});
+}
+/**
+* WHEN TO USE
+* - A status, category, count, or tag shown inline with other content
+*   (row status, list tag, small metadata chip).
+* - An operational-status indicator (active, failed, expiring, pending) —
+*   emphasis="outline" with a small colored icon, not a filled badge. This
+*   is Badge's status-indicator convention; there's no separate component
+*   for it.
+*
+* NOT WHEN
+* - Interactive filters or removable tags — those need their own
+*   click/remove handling, which Badge doesn't provide.
+* - An action — use Button.
+* - Long text — Badge is sized and padded for short labels only. When a user-supplied label might run long anyway (a role or tag name), cap it with `maxWidth` / `truncate`.
+*
+* KEY RULES
+* - `truncate` / `maxWidth` ellipsize a long label and show the full text as a native `title`; icons are untouched. They don't apply with `asChild`.
+* - Non-interactive by default; pass `asChild` to render as an `<a>` when
+*   the badge itself needs to link somewhere.
+* - Two axes, not one list. tone: default | secondary | destructive — what the
+*   label means. emphasis: filled | outline | ghost — how loudly it's drawn.
+*   Every tone×emphasis pair is styled; omit both for a filled default badge.
+*   The old single `variant` prop (default, secondary, destructive, outline,
+*   ghost, link) still renders identically but is deprecated — it folded the
+*   two axes into one list. `link` has no new-axis equivalent: a Badge is
+*   non-interactive, so an underlined link look belongs on Button/anchor.
+* - Custom semantic colors (success/warning/alert/info) aren't separate
+*   variants — apply the token utility directly, using each status's
+*   subtle `-light`/`-text` pair (not the solid `-foreground` pairing,
+*   which reads too loud for an inline tag), e.g. `className="bg-success-light
+*   text-success-text"`.
+* - Status-indicator convention: emphasis="outline" + a leading icon colored
+*   with the matching semantic token, `data-icon="inline-start"`. Fixed
+*   icon/color pairing, don't substitute other icons for these:
+*     success -> CheckIcon        text-success
+*     alert   -> XIcon            text-alert       (text-destructive for a true error, not just "alert")
+*     warning -> TriangleAlertIcon text-warning
+*     info    -> InfoIcon         text-info
+*     default -> PenLineIcon      text-muted-foreground
+* - Flush status-indicator variant: the same icon/color pairing above, but
+*   `emphasis="ghost"` (no border, no fill) plus
+*   `className="px-0 has-data-[icon=inline-start]:pl-0 has-data-[icon=inline-end]:pr-0 hover:bg-transparent"`
+*   — the padding overrides zero out what `emphasis="outline"` needs for
+*   its own chip look but this doesn't, and `hover:bg-transparent` drops
+*   `ghost`'s subtle hover highlight (meant for when Badge is `asChild` as
+*   a real link), which a flush, non-interactive status doesn't need. For
+*   a status that needs to sit flush against other plain content instead
+*   of reading as its own separate chip: a `KeyValuePairValue` slot, a
+*   table cell (especially one with a `MetaList` underneath, where a
+*   padded chip would misalign against the MetaList's own flush left/right
+*   edges), or right-aligned in a flex row next to one.
+* - An AI-assigned status/tag is a plain composition, not a variant: keep the Badge exactly
+*   as the status calls for and put `AILabel` (size="sm" — never the opt-in icon-only "xs" by
+*   default) beside it in an `inline-flex` span. Never restyle the Badge itself
+*   with the AI gradient — that would be indistinguishable from Button's AI Chip
+*   (variant="ai" rounded-full), and the two must read apart: the Chip is an action, a Badge
+*   is not. See AI/Badge.
+*
+* USAGE
+* <Badge>Default</Badge>
+* <Badge tone="destructive">Overdue</Badge>
+* <Badge tone="secondary" emphasis="ghost">Draft</Badge>
+* <Badge className="bg-success-light text-success-text">Success</Badge>
+* <Badge><CheckIcon />Verified</Badge>
+* <Badge maxWidth={120}>Regional Clinical Operations Lead</Badge>
+*
+* // Status indicator convention
+* <Badge emphasis="outline">
+*   <CheckIcon className="text-success" data-icon="inline-start" />
+*   Active
+* </Badge>
+* <Badge emphasis="outline">
+*   <XIcon className="text-alert" data-icon="inline-start" />
+*   Failed
+* </Badge>
+* <Badge emphasis="outline">
+*   <TriangleAlertIcon className="text-warning" data-icon="inline-start" />
+*   Expiring soon
+* </Badge>
+* <Badge emphasis="outline">
+*   <PenLineIcon className="text-muted-foreground" data-icon="inline-start" />
+*   Draft
+* </Badge>
+*
+* // Flush status indicator — KVP value, table cell, or right-aligned next to a MetaList
+* <Badge
+*   emphasis="ghost"
+*   className="px-0 has-data-[icon=inline-start]:pl-0 has-data-[icon=inline-end]:pr-0 hover:bg-transparent"
+* >
+*   <CheckIcon className="text-success" data-icon="inline-start" />
+*   Active
+* </Badge>
+*/
+//#endregion
+export { Badge, badgeVariants };
+
+//# sourceMappingURL=badge.js.map

package/dist/components/ui/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["/**\n * Badge — inline status/category/count label.\n *\n * cva-driven span, non-interactive by default. Styled on two axes — `tone`\n * (what it means) × `emphasis` (how loudly it's drawn) — with the old single\n * `variant` list kept as a deprecated alias.\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    // Two axes, not one list: `tone` is what the label means (neutral\n    // primary, quieter secondary, destructive), `emphasis` is how loudly\n    // it's drawn (filled surface, outlined, or bare text). Every\n    // combination is defined below so the two never collide.\n    variants: {\n      tone: {\n        default: \"\",\n        secondary: \"\",\n        destructive: \"\",\n      },\n      emphasis: {\n        filled: \"\",\n        outline: \"\",\n        ghost: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        tone: \"default\",\n        emphasis: \"filled\",\n        class:\n          \"bg-primary text-primary-foreground [a]:hover:bg-primary-hover [a]:active:bg-primary-active\",\n      },\n      {\n        tone: \"secondary\",\n        emphasis: \"filled\",\n        class:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n      },\n      {\n        tone: \"destructive\",\n        emphasis: \"filled\",\n        class:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n      },\n      {\n        tone: \"default\",\n        emphasis: \"outline\",\n        class:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n      },\n      {\n        tone: \"secondary\",\n        emphasis: \"outline\",\n        class: \"border-border text-muted-foreground [a]:hover:bg-muted\",\n      },\n      {\n        tone: \"destructive\",\n        emphasis: \"outline\",\n        class:\n          \"border-destructive/40 text-destructive focus-visible:ring-destructive/20 [a]:hover:bg-destructive/10\",\n      },\n      {\n        tone: \"default\",\n        emphasis: \"ghost\",\n        class:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n      },\n      {\n        tone: \"secondary\",\n        emphasis: \"ghost\",\n        class: \"text-muted-foreground hover:bg-muted dark:hover:bg-muted/50\",\n      },\n      {\n        tone: \"destructive\",\n        emphasis: \"ghost\",\n        class:\n          \"text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20\",\n      },\n    ],\n    defaultVariants: {\n      tone: \"default\",\n      emphasis: \"filled\",\n    },\n  }\n)\n\ntype BadgeTone = NonNullable<VariantProps<typeof badgeVariants>[\"tone\"]>\ntype BadgeEmphasis = NonNullable<VariantProps<typeof badgeVariants>[\"emphasis\"]>\n/**\n * @deprecated The single `variant` list mixed two axes (what the badge means\n * and how loudly it's drawn). Use `tone` + `emphasis` instead. Still accepted\n * so existing consumers render unchanged: default -> filled default,\n * secondary -> filled secondary, destructive -> filled destructive,\n * outline -> outline default, ghost -> ghost default. `link` (an interaction\n * affordance on a non-interactive label) has no new-axis equivalent and just\n * keeps its old underline look.\n */\ntype BadgeLegacyVariant =\n  \"default\" | \"secondary\" | \"destructive\" | \"outline\" | \"ghost\" | \"link\"\n\nconst LEGACY_VARIANT: Record<\n  Exclude<BadgeLegacyVariant, \"link\">,\n  { tone: BadgeTone; emphasis: BadgeEmphasis }\n> = {\n  default: { tone: \"default\", emphasis: \"filled\" },\n  secondary: { tone: \"secondary\", emphasis: \"filled\" },\n  destructive: { tone: \"destructive\", emphasis: \"filled\" },\n  outline: { tone: \"default\", emphasis: \"outline\" },\n  ghost: { tone: \"default\", emphasis: \"ghost\" },\n}\n\nfunction Badge({\n  className,\n  tone,\n  emphasis,\n  variant,\n  asChild = false,\n  truncate = false,\n  maxWidth,\n  style,\n  children,\n  title,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean\n    /** Cuts a label that's too long for its space off with an ellipsis instead of overflowing. Pair with `maxWidth` (or a width from the parent) — without one the badge just sizes to its text. Not applied with `asChild`. */\n    truncate?: boolean\n    /** Caps the badge's width (a number is px, or any CSS size) and implies `truncate`. */\n    maxWidth?: number | string\n    /** @deprecated use `tone` + `emphasis` */\n    variant?: BadgeLegacyVariant\n  }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n  const legacy =\n    variant && variant !== \"link\" ? LEGACY_VARIANT[variant] : undefined\n  const resolvedTone = tone ?? legacy?.tone ?? \"default\"\n  const resolvedEmphasis =\n    emphasis ?? legacy?.emphasis ?? (variant === \"link\" ? \"ghost\" : \"filled\")\n\n  const truncating = !asChild && (truncate || maxWidth !== undefined)\n  // A flex container can't ellipsize its own bare text — each text run gets\n  // its own `truncate` span, while icons (elements) keep their size.\n  const content = truncating\n    ? React.Children.map(children, (child) =>\n        typeof child === \"string\" || typeof child === \"number\" ? (\n          <span className=\"min-w-0 truncate\">{child}</span>\n        ) : (\n          child\n        )\n      )\n    : children\n  // Surfaces the full label on hover once it may be cut off.\n  const fullLabel =\n    title ??\n    (truncating\n      ? React.Children.toArray(children)\n          .filter((c) => typeof c === \"string\" || typeof c === \"number\")\n          .join(\"\") || undefined\n      : undefined)\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-tone={resolvedTone}\n      data-emphasis={resolvedEmphasis}\n      data-variant={variant}\n      className={cn(\n        badgeVariants({ tone: resolvedTone, emphasis: resolvedEmphasis }),\n        variant === \"link\" &&\n          \"text-primary underline-offset-4 hover:bg-transparent hover:text-primary hover:underline\",\n        truncating && \"max-w-full min-w-0\",\n        className\n      )}\n      style={maxWidth !== undefined ? { maxWidth, ...style } : style}\n      title={fullLabel}\n      {...props}\n    >\n      {content}\n    </Comp>\n  )\n}\n\nexport { Badge, badgeVariants }\nexport type { BadgeTone, BadgeEmphasis }\n\n/**\n * WHEN TO USE\n * - A status, category, count, or tag shown inline with other content\n *   (row status, list tag, small metadata chip).\n * - An operational-status indicator (active, failed, expiring, pending) —\n *   emphasis=\"outline\" with a small colored icon, not a filled badge. This\n *   is Badge's status-indicator convention; there's no separate component\n *   for it.\n *\n * NOT WHEN\n * - Interactive filters or removable tags — those need their own\n *   click/remove handling, which Badge doesn't provide.\n * - An action — use Button.\n * - Long text — Badge is sized and padded for short labels only. When a user-supplied label might run long anyway (a role or tag name), cap it with `maxWidth` / `truncate`.\n *\n * KEY RULES\n * - `truncate` / `maxWidth` ellipsize a long label and show the full text as a native `title`; icons are untouched. They don't apply with `asChild`.\n * - Non-interactive by default; pass `asChild` to render as an `<a>` when\n *   the badge itself needs to link somewhere.\n * - Two axes, not one list. tone: default | secondary | destructive — what the\n *   label means. emphasis: filled | outline | ghost — how loudly it's drawn.\n *   Every tone×emphasis pair is styled; omit both for a filled default badge.\n *   The old single `variant` prop (default, secondary, destructive, outline,\n *   ghost, link) still renders identically but is deprecated — it folded the\n *   two axes into one list. `link` has no new-axis equivalent: a Badge is\n *   non-interactive, so an underlined link look belongs on Button/anchor.\n * - Custom semantic colors (success/warning/alert/info) aren't separate\n *   variants — apply the token utility directly, using each status's\n *   subtle `-light`/`-text` pair (not the solid `-foreground` pairing,\n *   which reads too loud for an inline tag), e.g. `className=\"bg-success-light\n *   text-success-text\"`.\n * - Status-indicator convention: emphasis=\"outline\" + a leading icon colored\n *   with the matching semantic token, `data-icon=\"inline-start\"`. Fixed\n *   icon/color pairing, don't substitute other icons for these:\n *     success -> CheckIcon        text-success\n *     alert   -> XIcon            text-alert       (text-destructive for a true error, not just \"alert\")\n *     warning -> TriangleAlertIcon text-warning\n *     info    -> InfoIcon         text-info\n *     default -> PenLineIcon      text-muted-foreground\n * - Flush status-indicator variant: the same icon/color pairing above, but\n *   `emphasis=\"ghost\"` (no border, no fill) plus\n *   `className=\"px-0 has-data-[icon=inline-start]:pl-0 has-data-[icon=inline-end]:pr-0 hover:bg-transparent\"`\n *   — the padding overrides zero out what `emphasis=\"outline\"` needs for\n *   its own chip look but this doesn't, and `hover:bg-transparent` drops\n *   `ghost`'s subtle hover highlight (meant for when Badge is `asChild` as\n *   a real link), which a flush, non-interactive status doesn't need. For\n *   a status that needs to sit flush against other plain content instead\n *   of reading as its own separate chip: a `KeyValuePairValue` slot, a\n *   table cell (especially one with a `MetaList` underneath, where a\n *   padded chip would misalign against the MetaList's own flush left/right\n *   edges), or right-aligned in a flex row next to one.\n * - An AI-assigned status/tag is a plain composition, not a variant: keep the Badge exactly\n *   as the status calls for and put `AILabel` (size=\"sm\" — never the opt-in icon-only \"xs\" by\n *   default) beside it in an `inline-flex` span. Never restyle the Badge itself\n *   with the AI gradient — that would be indistinguishable from Button's AI Chip\n *   (variant=\"ai\" rounded-full), and the two must read apart: the Chip is an action, a Badge\n *   is not. See AI/Badge.\n *\n * USAGE\n * <Badge>Default</Badge>\n * <Badge tone=\"destructive\">Overdue</Badge>\n * <Badge tone=\"secondary\" emphasis=\"ghost\">Draft</Badge>\n * <Badge className=\"bg-success-light text-success-text\">Success</Badge>\n * <Badge><CheckIcon />Verified</Badge>\n * <Badge maxWidth={120}>Regional Clinical Operations Lead</Badge>\n *\n * // Status indicator convention\n * <Badge emphasis=\"outline\">\n *   <CheckIcon className=\"text-success\" data-icon=\"inline-start\" />\n *   Active\n * </Badge>\n * <Badge emphasis=\"outline\">\n *   <XIcon className=\"text-alert\" data-icon=\"inline-start\" />\n *   Failed\n * </Badge>\n * <Badge emphasis=\"outline\">\n *   <TriangleAlertIcon className=\"text-warning\" data-icon=\"inline-start\" />\n *   Expiring soon\n * </Badge>\n * <Badge emphasis=\"outline\">\n *   <PenLineIcon className=\"text-muted-foreground\" data-icon=\"inline-start\" />\n *   Draft\n * </Badge>\n *\n * // Flush status indicator — KVP value, table cell, or right-aligned next to a MetaList\n * <Badge\n *   emphasis=\"ghost\"\n *   className=\"px-0 has-data-[icon=inline-start]:pl-0 has-data-[icon=inline-end]:pr-0 hover:bg-transparent\"\n * >\n *   <CheckIcon className=\"text-success\" data-icon=\"inline-start\" />\n *   Active\n * </Badge>\n */\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAM,gBAAgB,IACpB,ifACA;CAKE,UAAU;EACR,MAAM;GACJ,SAAS;GACT,WAAW;GACX,aAAa;EACf;EACA,UAAU;GACR,QAAQ;GACR,SAAS;GACT,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;EACA;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;EACA;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;EACA;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;EACA;GACE,MAAM;GACN,UAAU;GACV,OAAO;EACT;EACA;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;EACA;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;EACA;GACE,MAAM;GACN,UAAU;GACV,OAAO;EACT;EACA;GACE,MAAM;GACN,UAAU;GACV,OACE;EACJ;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CACF;AAgBA,IAAM,iBAGF;CACF,SAAS;EAAE,MAAM;EAAW,UAAU;CAAS;CAC/C,WAAW;EAAE,MAAM;EAAa,UAAU;CAAS;CACnD,aAAa;EAAE,MAAM;EAAe,UAAU;CAAS;CACvD,SAAS;EAAE,MAAM;EAAW,UAAU;CAAU;CAChD,OAAO;EAAE,MAAM;EAAW,UAAU;CAAQ;AAC9C;AAEA,SAAS,MAAM,EACb,WACA,MACA,UACA,SACA,UAAU,OACV,WAAW,OACX,UACA,OACA,UACA,OACA,GAAG,SAUA;CACH,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,MAAM,SACJ,WAAW,YAAY,SAAS,eAAe,WAAW,KAAA;CAC5D,MAAM,eAAe,QAAQ,QAAQ,QAAQ;CAC7C,MAAM,mBACJ,YAAY,QAAQ,aAAa,YAAY,SAAS,UAAU;CAElE,MAAM,aAAa,CAAC,YAAY,YAAY,aAAa,KAAA;CAGzD,MAAM,UAAU,aACZ,MAAM,SAAS,IAAI,WAAW,UAC5B,OAAO,UAAU,YAAY,OAAO,UAAU,WAC5C,oBAAC,QAAD;EAAM,WAAU;EAAoB,UAAA;CAAY,CAAA,IAEhD,KAEJ,IACA;CAEJ,MAAM,YACJ,UACC,aACG,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAC7B,QAAQ,MAAM,OAAO,MAAM,YAAY,OAAO,MAAM,QAAQ,CAAC,CAC7D,KAAK,EAAE,KAAK,KAAA,IACf,KAAA;CAEN,OACE,oBAAC,MAAD;EACE,aAAU;EACV,aAAW;EACX,iBAAe;EACf,gBAAc;EACd,WAAW,GACT,cAAc;GAAE,MAAM;GAAc,UAAU;EAAiB,CAAC,GAChE,YAAY,UACV,2FACF,cAAc,sBACd,SACF;EACA,OAAO,aAAa,KAAA,IAAY;GAAE;GAAU,GAAG;EAAM,IAAI;EACzD,OAAO;EACP,GAAI;EAEH,UAAA;CACG,CAAA;AAEV"}

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

@@ -0,0 +1,43 @@
+/**
+ * Breadcrumb — hierarchical location trail, plain markup (not a Radix primitive).
+ *
+ * An <ol> of BreadcrumbItem, ancestors as BreadcrumbLink and the current
+ * page as a non-interactive BreadcrumbPage.
+ */
+import * as React from "react";
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+/**
+ * WHEN TO USE
+ * - Showing position in a hierarchy at least two levels deep (e.g. Patients
+ *   › James Wilson), typically placed above a PageHeader title
+ *
+ * NOT WHEN
+ * - Flat navigation with no hierarchy
+ * - As a substitute for Tabs
+ *
+ * KEY RULES
+ * - The current page is BreadcrumbPage — plain text, not a link
+ *   (aria-current="page", aria-disabled)
+ * - BreadcrumbEllipsis collapses a long trail; pair it with a
+ *   BreadcrumbSeparator on each side like any other item
+ * - BreadcrumbLink supports asChild to render a router Link instead of <a>
+ *
+ * USAGE
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><BreadcrumbLink href="/patients">Patients</BreadcrumbLink></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><BreadcrumbPage>James Wilson</BreadcrumbPage></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/ui/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBASvE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ1E;AAED,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAUA;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW5E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAY5B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAgB9B;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG"}

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,98 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Slot } from "radix-ui";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/breadcrumb.tsx
+function Breadcrumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: cn(className),
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "a";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "breadcrumb-link",
+		className: cn("transition-colors hover:text-foreground", className),
+		...props
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: cn("font-normal text-foreground", className),
+		...props
+	});
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+}
+/**
+* WHEN TO USE
+* - Showing position in a hierarchy at least two levels deep (e.g. Patients
+*   › James Wilson), typically placed above a PageHeader title
+*
+* NOT WHEN
+* - Flat navigation with no hierarchy
+* - As a substitute for Tabs
+*
+* KEY RULES
+* - The current page is BreadcrumbPage — plain text, not a link
+*   (aria-current="page", aria-disabled)
+* - BreadcrumbEllipsis collapses a long trail; pair it with a
+*   BreadcrumbSeparator on each side like any other item
+* - BreadcrumbLink supports asChild to render a router Link instead of <a>
+*
+* USAGE
+* <Breadcrumb>
+*   <BreadcrumbList>
+*     <BreadcrumbItem><BreadcrumbLink href="/patients">Patients</BreadcrumbLink></BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem><BreadcrumbPage>James Wilson</BreadcrumbPage></BreadcrumbItem>
+*   </BreadcrumbList>
+* </Breadcrumb>
+*/
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/ui/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["/**\n * Breadcrumb — hierarchical location trail, plain markup (not a Radix primitive).\n *\n * An <ol> of BreadcrumbItem, ancestors as BreadcrumbLink and the current\n * page as a non-interactive BreadcrumbPage.\n */\n\nimport * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon />}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MoreHorizontalIcon />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n\n/**\n * WHEN TO USE\n * - Showing position in a hierarchy at least two levels deep (e.g. Patients\n *   › James Wilson), typically placed above a PageHeader title\n *\n * NOT WHEN\n * - Flat navigation with no hierarchy\n * - As a substitute for Tabs\n *\n * KEY RULES\n * - The current page is BreadcrumbPage — plain text, not a link\n *   (aria-current=\"page\", aria-disabled)\n * - BreadcrumbEllipsis collapses a long trail; pair it with a\n *   BreadcrumbSeparator on each side like any other item\n * - BreadcrumbLink supports asChild to render a router Link instead of <a>\n *\n * USAGE\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem><BreadcrumbLink href=\"/patients\">Patients</BreadcrumbLink></BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem><BreadcrumbPage>James Wilson</BreadcrumbPage></BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n */\n"],"mappings":";;;;;;AAaA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,cAAW;EACX,aAAU;EACV,WAAW,GAAG,SAAS;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,qFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;CAC3E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SAGF;CACD,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,iBAAc;EACd,gBAAa;EACb,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,UACA,WACA,GAAG,SAC0B;CAC7B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,SAAS;EAC3C,GAAI;EAEH,UAAA,YAAY,oBAAC,kBAAD,CAAmB,CAAA;CAC9B,CAAA;AAER;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC4B;CAC/B,OACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GACT,0DACA,SACF;EACA,GAAI;EARN,UAAA,CAUE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAU,CAAA,CAChC;;AAEV"}

package/dist/components/ui/browser-tabs.d.ts

@@ -0,0 +1,218 @@
+/**
+ * BrowserTabs — persistent, closable document tabs, browser-style.
+ *
+ * The same Radix Tabs primitive `tabs.tsx` wraps, plus Popover for the "+"
+ * menu, Tooltip for truncated names, and Button for the per-tab close
+ * action — a different visual/interaction language from Tabs, not a
+ * variant of it: Tabs switches between named views of one entity (2-6 fixed
+ * tabs); this is for many independent, closable documents/views open at
+ * once (an IDE's editor tabs, a browser's own tab strip) — always
+ * horizontal, and always the topmost chrome of whatever surface it sits on.
+ * Each tab floats as a rounded pill on the strip's own bg-secondary track,
+ * flush against its bottom edge — the active tab's bg-card fill then
+ * touches the card content's own bg-card directly beneath it with no grey
+ * left in between, merging the two Chrome-style, rather than reading as a
+ * colored/selected state the way Tabs' own default variant does. Pinned
+ * tabs render icon-only — a fixed favicon-size square, falling back to a
+ * generic FileIcon when the tab itself has none — same as a real browser's
+ * own pinned tabs, and never part of the overflow behavior below. Once
+ * unpinned tabs stop fitting, they shrink together down to a floor, then
+ * the strip scrolls that pool horizontally past that — the same overflow
+ * model a real browser's own tab strip uses, not a "More" menu hiding the
+ * rest.
+ * An optional "+" pill at the strip's end, outside the scrolling region
+ * (`addViews` on BrowserTabsList) opens a popover of product-defined views
+ * the user can open as new tabs — a worklist's saved filters, for
+ * instance. `addTrigger`/`renderAddContent` swap its trigger or its
+ * popover content for something fully custom.
+ */
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { TabsContent as BrowserTabsContent } from "../../components/ui/tabs";
+declare function BrowserTabs({ className, value, defaultValue, onValueChange, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+/** One entry in the "+" popover — a product-defined view the user can open as a new tab. */
+type BrowserTabsAddView = {
+    id: string;
+    label: string;
+    /** A leading icon, same convention as BrowserTab's own `icon`. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** A muted line of secondary metadata under the label — a description, a count, a last-modified date. Same convention as DataTable's `FilterOption.description`. */
+    description?: string;
+    disabled?: boolean;
+    /** A hint that this view should open as a pinned tab (`"user"`/`"product"`, same meaning as `BrowserTab`'s own `pin`) — shown here as a small pin icon trailing the label. Purely informational: this component doesn't open tabs itself, so acting on it (passing the matching `pin` to the `BrowserTab` you add in `onAddView`) is the consumer's job. */
+    pin?: "user" | "product";
+};
+declare function BrowserTabsList({ className, children, addViews, onAddView, addLabel, addTrigger, renderAddContent, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & {
+    /** Product-defined views the user can open as new tabs — rendered in the "+" pill's default popover list. Omit entirely (with `renderAddContent` covering the "+" pill's content instead) for a fully custom popover. Opening is the consumer's job — `onAddView` only reports the pick; add the tab to your own list (or, if that view is already open, just activate it). A view's own `pin` is a hint for *that*: open it pinned (`"user"`/`"product"`, same meaning as `BrowserTab`'s own `pin`) rather than as a regular tab — shown as a small pin icon next to it here, not enforced by this component. */
+    addViews?: BrowserTabsAddView[];
+    /** Fires with the picked view; the popover closes itself. */
+    onAddView?: (view: BrowserTabsAddView) => void;
+    /** Accessible name of the "+" pill (it's icon-only). Defaults to "Open a view in a new tab". Ignored when `addTrigger` is given — that node is responsible for its own accessible name. */
+    addLabel?: string;
+    /** A custom trigger in place of the default icon-only "+" pill — still opens the same popover (`addViews`' list, or `renderAddContent`). Needs its own accessible name (a plain icon button still needs `aria-label`, same as any custom Popover trigger). */
+    addTrigger?: React.ReactNode;
+    /** Replaces the "+" popover's default views list with fully custom content — a search box, a grouped menu, anything. Called with `close` to dismiss the popover from inside it (the default list's own item clicks do this automatically; custom content must call it itself). Takes over the popover entirely: `addViews`/`onAddView` don't render alongside it. */
+    renderAddContent?: (close: () => void) => React.ReactNode;
+}): React.JSX.Element;
+type BrowserTabProps = {
+    value: string;
+    /** A leading icon (e.g. a favicon-style entity icon) — rendered outside the truncating label, so it's never clipped. */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    disabled?: boolean;
+    /** Groups this tab into the strip's pinned section, ahead of a divider from the rest. "user" tabs were pinned by the user and can still take `onClose` (closing is how the user unpins/removes them); "product" tabs are pinned by the product and never render a close button, regardless of `onClose`. */
+    pin?: "user" | "product";
+    /** Omit to render this tab with no close button — e.g. a pinned tab that can't be dismissed. Ignored when `pin="product"`. The close button is hover/focus-revealed over the end of the name (which truncates underneath it), so the tab is content-width at rest and never changes width on hover; it's also offered as "Close" in the tab's right-click menu. */
+    onClose?: () => void;
+    /** Accessible label for the close button. Defaults to "Close {children}" when `children` is a plain string; pass this explicitly when it isn't (an icon, a custom node). */
+    closeLabel?: string;
+    /** Enables "Pin tab" / "Unpin tab" in this tab's right-click menu (the item is always shown, disabled without a handler or on a `pin="product"` tab). Fires regardless of direction; read the tab's own current `pin` to decide whether you're pinning or unpinning it, then move it into (or to the front of) the appropriate section — BrowserTabs only renders what you give it, it doesn't reorder your list. There is no visible pin button on the tab itself. */
+    onPinToggle?: () => void;
+    /** Enables "Close other tabs" in this tab's right-click menu (the item is always shown, disabled without a handler). Like `onClose`, it only reports the intent — close every other UNPINNED tab in your own list and keep this one active. Pinned tabs (`pin="user"` or `"product"`) are never closed by "close others"; the user pinned them precisely so they'd survive that. */
+    onCloseOthers?: () => void;
+    className?: string;
+    children: React.ReactNode;
+};
+declare function BrowserTab(props: BrowserTabProps): React.JSX.Element;
+export { BrowserTabs, BrowserTabsList, BrowserTab, BrowserTabsContent };
+export type { BrowserTabsAddView };
+/**
+ * WHEN TO USE
+ * - Many independent, addable/closable documents or views open at once —
+ *   an IDE's editor tabs, a browser's own tab strip, a multi-record
+ *   workspace where each record opens in its own tab.
+ * - Always as the topmost chrome of whatever surface hosts it (a Card,
+ *   a page shell) — it's edge-to-edge and expects to sit flush at that
+ *   surface's top.
+ *
+ * NOT WHEN
+ * - Switching between a fixed 2-6 named views of *one* entity (an
+ *   Overview/History/Notes split) — use Tabs instead; it reads as
+ *   neutral navigation, not as separate closable documents.
+ * - Vertical tab placement — not supported; always horizontal.
+ *
+ * KEY RULES
+ * - Composition mirrors Tabs: `BrowserTabs` (Root, controlled or
+ *   uncontrolled via `value`/`onValueChange`/`defaultValue`) wraps
+ *   `BrowserTabsList` (the strip) and one `BrowserTabsContent` per tab
+ *   (re-exported directly from Tabs — same primitive, nothing about it
+ *   is strip-specific).
+ * - `pin`: omit for a normal tab, `"user"` for one the user pinned
+ *   (closable — closing is how they unpin it), `"product"` for one the
+ *   product configured (never closable, no close button rendered even if
+ *   `onClose` is passed). Pinned tabs of either kind render first, in a
+ *   section separated from the rest by a divider, and are never subject
+ *   to the overflow behavior below.
+ * - Pinned tabs render icon-only — a fixed favicon-size square, same as a
+ *   real browser's own pinned tabs — falling back to `FileIcon`
+ *   when the tab itself has no `icon`, so a pinned tab is never blank.
+ *   The full name still surfaces via Tooltip on hover/focus; there's no
+ *   hover-revealed close button at that width, so unpinning/closing goes
+ *   through the right-click menu or Delete/Backspace on the focused tab.
+ * - Every tab has the same three-item right-click menu (ContextMenu):
+ *   "Pin tab"/"Unpin tab", "Close", and "Close other tabs" — always
+ *   visible, each disabled when the tab wasn't given the matching
+ *   handler. `onPinToggle` drives the first (read the tab's current `pin`
+ *   to know the direction, then move it into — or, unpinning, to the
+ *   front of — the right section in your own list; always disabled on
+ *   `pin="product"`), `onClose` the second, `onCloseOthers` the third
+ *   (close every other UNPINNED tab yourself and keep this one active —
+ *   "close others" never closes a pinned tab of either kind; pinning is
+ *   exactly the promise that a tab survives bulk closing).
+ *   No visible pin button on the tab; pinning is menu-only, and pinned
+ *   tabs are identified by sitting in the pinned section ahead of the
+ *   divider.
+ * - Each `BrowserTab` needs its own `onClose` to get a close button at
+ *   all — omit it for a tab that can't be dismissed. A tab is exactly as
+ *   wide as its name at rest (nothing reserved on the right); on hover
+ *   the close button appears over the end of the name, which truncates
+ *   underneath it, so the tab's width never changes between rest and
+ *   hover. That button is pointer-only (a focusable control can't sit
+ *   inside a `role="tab"`): keyboard users press Delete or Backspace on
+ *   the focused tab, or use the right-click menu's "Close".
+ * - Closing a tab is entirely the consumer's responsibility: `onClose`
+ *   only reports the intent. Removing it from whatever list backs your
+ *   tabs, and deciding which tab becomes active next, is app logic this
+ *   component has no way to know on its own.
+ * - Overflow is browser-style, not a "More" menu: once unpinned tabs stop
+ *   fitting the available width, they shrink together (flex-shrink) down
+ *   to `min-w-16` (64px) each; past that floor the strip scrolls that
+ *   pool horizontally instead of shrinking further. Pinned tabs are
+ *   already fixed-size icon-only squares (see above), so they never
+ *   shrink, grow, or join the scrolling region. The active tab scrolls
+ *   into view
+ *   automatically whenever it changes, so switching tabs never leaves the
+ *   newly-active one scrolled out of sight. Only the "+" pill is truly
+ *   fixed-size, living outside the shrink pool entirely. A soft inset
+ *   shadow fades in on
+ *   whichever edge(s) still have more tabs scrolled past them (both at
+ *   once, mid-strip) and disappears once there's nothing left that way —
+ *   a direction-aware cue, not a static "this can scroll" marker.
+ * - A tab's name overflowing `max-w-52` is truncated in the strip but
+ *   shown in full in a Tooltip on hover/focus.
+ * - `addViews` on `BrowserTabsList` adds a "+" pill that opens a popover of
+ *   product-defined views the user can open as new tabs — a worklist's
+ *   saved filters, a set of report layouts — `{ id, label, icon?,
+ *   description?, disabled?, pin? }` each. Sits immediately after the
+ *   last tab at rest; pins to the strip's own right edge once the tabs
+ *   overflow into their shrink/scroll region instead, same as a real
+ *   browser's "+" button. Each is the same full-width tab pill (icon +
+ *   label) it will become as a tab; `description` grows that row to a
+ *   second, muted line underneath (a filter's own scope, a last-modified
+ *   date). Past `ADD_VIEWS_SEARCH_THRESHOLD` (6) views the popover grows
+ *   a search box filtering by label and description. A `pin` hint renders
+ *   a small pin icon trailing the label (purely visual — opening it
+ *   pinned is still your own `onAddView` handler's job). `onAddView` only
+ *   reports the pick: add a tab for that view to your own list and make
+ *   it active — or, if that view is already open, just activate the
+ *   existing tab instead of opening a duplicate. Icon-only by default;
+ *   `addLabel` names it for assistive tech (default "Open a view in a new
+ *   tab"). `addTrigger` swaps in a custom trigger node in place of the
+ *   default "+" pill (still needs its own `aria-label`). `renderAddContent`
+ *   replaces the *entire* popover body — search box, view list, and all —
+ *   with something fully custom (a grouped menu, anything) — called with
+ *   a `close` function to dismiss the popover
+ *   from inside it; `addViews`/`onAddView` don't render alongside it.
+ * - Each `BrowserTab` floats as a rounded pill inset from the strip's
+ *   `bg-secondary` track. Unlike Tabs' own default variant (a translucent
+ *   `bg-primary/10` fill), the active tab here reads as merged into the
+ *   card below it, Chrome-style: `bg-card`/`text-card-foreground` (matching
+ *   the content surface exactly) plus squared-off bottom corners, sitting
+ *   flush against the track's own bottom edge with nothing grey left
+ *   between tab and content. Inactive tabs just fill `bg-muted` on hover
+ *   and otherwise float clear of the track's edges.
+ * - A leading icon uses `icon`, not the `data-icon="inline-start"` slot
+ *   convention Button/Tabs use — it needs to sit outside the label's own
+ *   truncation, which a plain child node sharing that flex row wouldn't.
+ *
+ * USAGE
+ * <BrowserTabs value={activeId} onValueChange={setActiveId}>
+ *   <BrowserTabsList
+ *     addViews={worklistViews}   // [{ id: "overdue", label: "Overdue", icon: ClockIcon }, ...]
+ *     onAddView={(view) => openViewTab(view)}   // add to openDocs (or activate if already open)
+ *   >
+ *     <BrowserTab value="home" pin="product">Home</BrowserTab>
+ *     {openDocs.map((doc) => (
+ *       <BrowserTab
+ *         key={doc.id}
+ *         value={doc.id}
+ *         icon={doc.icon}
+ *         pin={doc.pinnedByUser ? "user" : undefined}
+ *         onClose={() => closeDoc(doc.id)}
+ *       >
+ *         {doc.title}
+ *       </BrowserTab>
+ *     ))}
+ *   </BrowserTabsList>
+ *   <BrowserTabsContent value="home">...</BrowserTabsContent>
+ *   {openDocs.map((doc) => (
+ *     <BrowserTabsContent key={doc.id} value={doc.id}>
+ *       <DocView doc={doc} />
+ *     </BrowserTabsContent>
+ *   ))}
+ * </BrowserTabs>
+ */
+//# sourceMappingURL=browser-tabs.d.ts.map

package/dist/components/ui/browser-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/browser-tabs.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AA8BhD,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAYxE,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,qBAyBjD;AAgCD,4FAA4F;AAC5F,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClD,oKAAoK;IACpK,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4VAA4V;IAC5V,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACzB,CAAA;AAoBD,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAqC,EACrC,UAAU,EACV,gBAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG;IACnD,klBAAklB;IACllB,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC/B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC9C,2LAA2L;IAC3L,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8PAA8P;IAC9P,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,qWAAqW;IACrW,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;CAC1D,qBA2QA;AAkJD,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wHAAwH;IACxH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4SAA4S;IAC5S,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACxB,mWAAmW;IACnW,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4KAA4K;IAC5K,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,ucAAuc;IACvc,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,oXAAoX;IACpX,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAqXD,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,qBAazC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA;AACvE,YAAY,EAAE,kBAAkB,EAAE,CAAA;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuIG"}