@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/context-menu.js

@@ -0,0 +1,163 @@
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import "react";
+import { ContextMenu as ContextMenu$1 } from "radix-ui";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/context-menu.tsx
+function ContextMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, tabIndex, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-slot": "context-menu-trigger",
+		tabIndex: tabIndex ?? 0,
+		className: cn("select-none", className),
+		...props
+	});
+}
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+function ContextMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		"data-slot": "context-menu-portal",
+		container: getPortalContainer(),
+		...props
+	});
+}
+function ContextMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Sub, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		container: getPortalContainer(),
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Content, {
+			"data-slot": "context-menu-content",
+			className: cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+			...props
+		})
+	});
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.SubTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+function ContextMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubContent, {
+		"data-slot": "context-menu-sub-content",
+		className: cn("z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-popover duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Label, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		"data-slot": "context-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Right-click affordances on a canvas, tree, table row, or file item
+*
+* NOT WHEN
+* - As the only way to reach an action — always provide a visible alternative (a button or DropdownMenu) alongside it
+* - Touch-primary interfaces — there's no reliable right-click equivalent on touch; don't make it the sole path to an action there
+*
+* KEY RULES
+* - ContextMenuTrigger wraps the exact region that should respond to right-click — size it to the target, not the whole page
+* - ContextMenuItem accepts variant="default" | "destructive"; use "destructive" only for irreversible entries
+* - Checkbox/radio items are controlled, same pattern as DropdownMenu — the caller owns checked/value state
+* - Submenus use ContextMenuSub + ContextMenuSubTrigger + ContextMenuSubContent, same composition as DropdownMenu
+*
+* USAGE
+* <ContextMenu>
+*   <ContextMenuTrigger className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm">
+*     Right click here
+*   </ContextMenuTrigger>
+*   <ContextMenuContent className="w-52">
+*     <ContextMenuItem>Back<ContextMenuShortcut>⌘[</ContextMenuShortcut></ContextMenuItem>
+*     <ContextMenuSeparator />
+*     <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+*   </ContextMenuContent>
+* </ContextMenu>
+*
+* <ContextMenuRadioGroup value={pane} onValueChange={setPane}>
+*   <ContextMenuRadioItem value="left">Left pane</ContextMenuRadioItem>
+*   <ContextMenuRadioItem value="right">Right pane</ContextMenuRadioItem>
+* </ContextMenuRadioGroup>
+*/
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+
+//# sourceMappingURL=context-menu.js.map

package/dist/components/ui/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","names":[],"sources":["../../../src/components/ui/context-menu.tsx"],"sourcesContent":["/**\n * ContextMenu — menu of actions opened by right-clicking (or long-pressing) a target region\n *\n * Shares the same item vocabulary as DropdownMenu (groups, labels,\n * separators, submenus, checkbox/radio items) — the only difference from\n * DropdownMenu is the trigger: a wrapped region instead of a click target.\n */\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\nimport { ChevronRightIcon, CheckIcon } from \"lucide-react\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  tabIndex,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      // Radix's Trigger only wires onContextMenu/pointer handlers — it adds\n      // no tabIndex of its own, so a wrapped region with no other reason to\n      // be focusable (the common case: some plain text/content, not a\n      // button) has no keyboard path to open the menu at all (no element\n      // for Shift+F10/the Menu key to target). Defaulting to 0 here — never\n      // overriding an explicit tabIndex the consumer set for their own\n      // reasons — gives every ContextMenuTrigger a keyboard-reachable\n      // baseline. This alone doesn't make the region announce as any\n      // particular control; give it a `role` fitting what it represents\n      // (e.g. `role=\"button\"` for an action-like region) if it doesn't\n      // already have one from its own content.\n      tabIndex={tabIndex ?? 0}\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal\n      data-slot=\"context-menu-portal\"\n      container={getPortalContainer()}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal container={getPortalContainer()}>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-popover duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n\n/**\n * WHEN TO USE\n * - Right-click affordances on a canvas, tree, table row, or file item\n *\n * NOT WHEN\n * - As the only way to reach an action — always provide a visible alternative (a button or DropdownMenu) alongside it\n * - Touch-primary interfaces — there's no reliable right-click equivalent on touch; don't make it the sole path to an action there\n *\n * KEY RULES\n * - ContextMenuTrigger wraps the exact region that should respond to right-click — size it to the target, not the whole page\n * - ContextMenuItem accepts variant=\"default\" | \"destructive\"; use \"destructive\" only for irreversible entries\n * - Checkbox/radio items are controlled, same pattern as DropdownMenu — the caller owns checked/value state\n * - Submenus use ContextMenuSub + ContextMenuSubTrigger + ContextMenuSubContent, same composition as DropdownMenu\n *\n * USAGE\n * <ContextMenu>\n *   <ContextMenuTrigger className=\"flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm\">\n *     Right click here\n *   </ContextMenuTrigger>\n *   <ContextMenuContent className=\"w-52\">\n *     <ContextMenuItem>Back<ContextMenuShortcut>⌘[</ContextMenuShortcut></ContextMenuItem>\n *     <ContextMenuSeparator />\n *     <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n *\n * <ContextMenuRadioGroup value={pane} onValueChange={setPane}>\n *   <ContextMenuRadioItem value=\"left\">Left pane</ContextMenuRadioItem>\n *   <ContextMenuRadioItem value=\"right\">Right pane</ContextMenuRadioItem>\n * </ContextMenuRadioGroup>\n */\n"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+/**
+ * CountBadge — small absolutely-positioned count pill for an icon corner.
+ *
+ * Plain `span`, no cva — a single fixed look (`bg-primary` pill), not a
+ * variant set.
+ */
+import * as React from "react";
+declare function CountBadge({ className, count, max, ...props }: React.ComponentProps<"span"> & {
+    count: number;
+    /** Counts above this render as "`max`+" instead of the exact number. */
+    max?: number;
+}): React.JSX.Element | null;
+export { CountBadge };
+/**
+ * WHEN TO USE
+ * - A numeric badge overlaid on an icon or button corner — unread-message
+ *   counts, notification counts on a bell glyph.
+ *
+ * NOT WHEN
+ * - An inline status/category label with no number — use Badge.
+ * - A presence dot with no number — use Avatar's `AvatarBadge`.
+ *
+ * KEY RULES
+ * - Renders nothing when `count <= 0` — no need to conditionally hide it
+ *   yourself.
+ * - Counts above `max` (default 9) render as "`max`+", not the exact number.
+ * - `absolute` positioning with no top/right offset baked in — the parent
+ *   must be `relative`, and you set the offset via `className` (e.g.
+ *   `-top-1 -right-1.5`) because it varies with the icon it decorates.
+ *
+ * USAGE
+ * <div className="relative inline-flex">
+ *   <BellIcon className="size-5" />
+ *   <CountBadge count={6} className="-top-1 -right-1.5" />
+ * </div>
+ *
+ * <CountBadge count={42} className="-top-1 -right-1.5" />  // renders "9+"
+ * <CountBadge count={0} className="-top-1 -right-1.5" />   // renders null
+ */
+//# sourceMappingURL=count-badge.d.ts.map

package/dist/components/ui/count-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"count-badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/count-badge.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,GAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,4BAeA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG"}

package/dist/components/ui/count-badge.js

@@ -0,0 +1,43 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/count-badge.tsx
+function CountBadge({ className, count, max = 9, ...props }) {
+	if (count <= 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "count-badge",
+		className: cn("absolute flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-xs leading-none font-semibold text-primary-foreground tabular-nums", className),
+		...props,
+		children: count > max ? `${max}+` : count
+	});
+}
+/**
+* WHEN TO USE
+* - A numeric badge overlaid on an icon or button corner — unread-message
+*   counts, notification counts on a bell glyph.
+*
+* NOT WHEN
+* - An inline status/category label with no number — use Badge.
+* - A presence dot with no number — use Avatar's `AvatarBadge`.
+*
+* KEY RULES
+* - Renders nothing when `count <= 0` — no need to conditionally hide it
+*   yourself.
+* - Counts above `max` (default 9) render as "`max`+", not the exact number.
+* - `absolute` positioning with no top/right offset baked in — the parent
+*   must be `relative`, and you set the offset via `className` (e.g.
+*   `-top-1 -right-1.5`) because it varies with the icon it decorates.
+*
+* USAGE
+* <div className="relative inline-flex">
+*   <BellIcon className="size-5" />
+*   <CountBadge count={6} className="-top-1 -right-1.5" />
+* </div>
+*
+* <CountBadge count={42} className="-top-1 -right-1.5" />  // renders "9+"
+* <CountBadge count={0} className="-top-1 -right-1.5" />   // renders null
+*/
+//#endregion
+export { CountBadge };
+
+//# sourceMappingURL=count-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"count-badge.js","names":[],"sources":["../../../src/components/ui/count-badge.tsx"],"sourcesContent":["/**\n * CountBadge — small absolutely-positioned count pill for an icon corner.\n *\n * Plain `span`, no cva — a single fixed look (`bg-primary` pill), not a\n * variant set.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction CountBadge({\n  className,\n  count,\n  max = 9,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  count: number\n  /** Counts above this render as \"`max`+\" instead of the exact number. */\n  max?: number\n}) {\n  if (count <= 0) return null\n\n  return (\n    <span\n      data-slot=\"count-badge\"\n      className={cn(\n        \"absolute flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-xs leading-none font-semibold text-primary-foreground tabular-nums\",\n        className\n      )}\n      {...props}\n    >\n      {count > max ? `${max}+` : count}\n    </span>\n  )\n}\n\nexport { CountBadge }\n\n/**\n * WHEN TO USE\n * - A numeric badge overlaid on an icon or button corner — unread-message\n *   counts, notification counts on a bell glyph.\n *\n * NOT WHEN\n * - An inline status/category label with no number — use Badge.\n * - A presence dot with no number — use Avatar's `AvatarBadge`.\n *\n * KEY RULES\n * - Renders nothing when `count <= 0` — no need to conditionally hide it\n *   yourself.\n * - Counts above `max` (default 9) render as \"`max`+\", not the exact number.\n * - `absolute` positioning with no top/right offset baked in — the parent\n *   must be `relative`, and you set the offset via `className` (e.g.\n *   `-top-1 -right-1.5`) because it varies with the icon it decorates.\n *\n * USAGE\n * <div className=\"relative inline-flex\">\n *   <BellIcon className=\"size-5\" />\n *   <CountBadge count={6} className=\"-top-1 -right-1.5\" />\n * </div>\n *\n * <CountBadge count={42} className=\"-top-1 -right-1.5\" />  // renders \"9+\"\n * <CountBadge count={0} className=\"-top-1 -right-1.5\" />   // renders null\n */\n"],"mappings":";;;;AAWA,SAAS,WAAW,EAClB,WACA,OACA,MAAM,GACN,GAAG,SAKF;CACD,IAAI,SAAS,GAAG,OAAO;CAEvB,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,oKACA,SACF;EACA,GAAI;EAEH,UAAA,QAAQ,MAAM,GAAG,IAAI,KAAK;CACvB,CAAA;AAEV"}