@inui/design-system 0.0.0-stage → 1.22.0

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

@@ -0,0 +1,74 @@
+/**
+ * Attachment — file attachment row with upload state, for chat messages and composers.
+ *
+ * A card-like row (or vertical tile) with a media/icon slot, title,
+ * description, and action buttons for one file. `state` drives the upload
+ * affordance: dashed border while idle, shimmering title while
+ * uploading/processing, destructive tint on error. AttachmentGroup lays out
+ * several as a horizontally-scrolling strip. AttachmentTrigger is an
+ * invisible full-cover button for drop-zone / file-picker interactions.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button, type TextButtonSize } from "../../components/ui/button";
+declare const attachmentVariants: (props?: ({
+    size?: "sm" | "default" | "xs" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+    variant?: "image" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "aria-label" | "iconOnly" | "asChild"> & {
+    /** Height step of the icon-only button; it is always square (`iconOnly`). */
+    size?: TextButtonSize;
+    "aria-label": string;
+}): React.JSX.Element;
+declare function AttachmentTrigger({ className, asChild, type, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function AttachmentGroup({ className, tabIndex, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, };
+/**
+ * WHEN TO USE
+ * - Files attached to a chat message or composer
+ * - Upload queues that need per-file progress/state and a remove action
+ *
+ * NOT WHEN
+ * - A plain native file picker with no per-file UI — use Input type="file"
+ * - Image browsing meant as a gallery rather than an attachment list
+ * - Plain download links with no upload lifecycle
+ *
+ * KEY RULES
+ * - state: idle, uploading, processing, error, done (default "done") — "idle" renders a dashed border (drop-zone look)
+ * - size: default, sm, xs — scales padding/gap and AttachmentMedia icon size together; set once on Attachment
+ * - orientation: horizontal (default, row) or vertical (column tile, media fills the width)
+ * - AttachmentMedia variant: icon (default) or image — image dims to 60% opacity except in "done"/"idle" states
+ * - AttachmentTitle shimmers automatically in "uploading"/"processing" states — no extra prop needed
+ * - AttachmentAction defaults to variant="ghost" size="xs" iconOnly — always pass aria-label, it's icon-only
+ * - AttachmentTrigger covers the whole card (inset-0, z-10) — put real buttons in AttachmentActions (z-20) so they stack above it and stay clickable
+ *
+ * USAGE
+ * <Attachment state="uploading">
+ *   <AttachmentMedia variant="icon"><FileTextIcon /></AttachmentMedia>
+ *   <AttachmentContent>
+ *     <AttachmentTitle>theme.css</AttachmentTitle>
+ *     <AttachmentDescription>6.3 KB</AttachmentDescription>
+ *   </AttachmentContent>
+ *   <AttachmentActions>
+ *     <AttachmentAction aria-label="Remove attachment"><XIcon /></AttachmentAction>
+ *   </AttachmentActions>
+ * </Attachment>
+ *
+ * <AttachmentGroup>
+ *   {files.map((f) => <Attachment key={f.name}>...</Attachment>)}
+ * </AttachmentGroup>
+ */
+//# sourceMappingURL=attachment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../../src/components/ui/attachment.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAAE,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEpE,QAAA,MAAM,kBAAkB;;;8EAgBvB,CAAA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAc,EACd,IAAgB,EAChB,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAA;CAC/D,qBAWF;AAED,QAAA,MAAM,uBAAuB;;8EAc5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAS5E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAY9B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAO,EACP,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CACL,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAC/C,GAAG;IACF,6EAA6E;IAC7E,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;CACrB,qBAWA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAe,EACf,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAWA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAc7B;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG"}

package/dist/components/ui/attachment.js

@@ -0,0 +1,142 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import "react";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/attachment.tsx
+var attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-3 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", { variants: {
+	size: {
+		default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+		sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+		xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+	}
+} });
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: cn(attachmentVariants({
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+var attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		icon: "",
+		image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: cn(attachmentMediaVariants({ variant }), className),
+		...props
+	});
+}
+function AttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-content",
+		className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className),
+		...props
+	});
+}
+function AttachmentTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-title",
+		className: cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className),
+		...props
+	});
+}
+function AttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-description",
+		className: cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", "max-w-full", className),
+		...props
+	});
+}
+function AttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-actions",
+		className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className),
+		...props
+	});
+}
+function AttachmentAction({ className, variant, size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "attachment-action",
+		variant: variant ?? "ghost",
+		size,
+		iconOnly: true,
+		className: cn(className),
+		...props
+	});
+}
+function AttachmentTrigger({ className, asChild = false, type, ...props }) {
+	const Comp = asChild ? Slot.Root : "button";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "attachment-trigger",
+		type: asChild ? void 0 : type ?? "button",
+		className: cn("absolute inset-0 z-10 outline-none", className),
+		...props
+	});
+}
+function AttachmentGroup({ className, tabIndex = 0, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-group",
+		role: "region",
+		"aria-label": "Attachments",
+		tabIndex,
+		className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Files attached to a chat message or composer
+* - Upload queues that need per-file progress/state and a remove action
+*
+* NOT WHEN
+* - A plain native file picker with no per-file UI — use Input type="file"
+* - Image browsing meant as a gallery rather than an attachment list
+* - Plain download links with no upload lifecycle
+*
+* KEY RULES
+* - state: idle, uploading, processing, error, done (default "done") — "idle" renders a dashed border (drop-zone look)
+* - size: default, sm, xs — scales padding/gap and AttachmentMedia icon size together; set once on Attachment
+* - orientation: horizontal (default, row) or vertical (column tile, media fills the width)
+* - AttachmentMedia variant: icon (default) or image — image dims to 60% opacity except in "done"/"idle" states
+* - AttachmentTitle shimmers automatically in "uploading"/"processing" states — no extra prop needed
+* - AttachmentAction defaults to variant="ghost" size="xs" iconOnly — always pass aria-label, it's icon-only
+* - AttachmentTrigger covers the whole card (inset-0, z-10) — put real buttons in AttachmentActions (z-20) so they stack above it and stay clickable
+*
+* USAGE
+* <Attachment state="uploading">
+*   <AttachmentMedia variant="icon"><FileTextIcon /></AttachmentMedia>
+*   <AttachmentContent>
+*     <AttachmentTitle>theme.css</AttachmentTitle>
+*     <AttachmentDescription>6.3 KB</AttachmentDescription>
+*   </AttachmentContent>
+*   <AttachmentActions>
+*     <AttachmentAction aria-label="Remove attachment"><XIcon /></AttachmentAction>
+*   </AttachmentActions>
+* </Attachment>
+*
+* <AttachmentGroup>
+*   {files.map((f) => <Attachment key={f.name}>...</Attachment>)}
+* </AttachmentGroup>
+*/
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };
+
+//# sourceMappingURL=attachment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","names":[],"sources":["../../../src/components/ui/attachment.tsx"],"sourcesContent":["/**\n * Attachment — file attachment row with upload state, for chat messages and composers.\n *\n * A card-like row (or vertical tile) with a media/icon slot, title,\n * description, and action buttons for one file. `state` drives the upload\n * affordance: dashed border while idle, shimmering title while\n * uploading/processing, destructive tint on error. AttachmentGroup lays out\n * several as a horizontally-scrolling strip. AttachmentTrigger is an\n * invisible full-cover button for drop-zone / file-picker interactions.\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\"\nimport { Button, type TextButtonSize } from \"@/components/ui/button\"\n\nconst attachmentVariants = cva(\n  \"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-3 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed\",\n  {\n    variants: {\n      size: {\n        default:\n          \"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2\",\n        sm: \"gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5\",\n        xs: \"gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1\",\n      },\n      orientation: {\n        horizontal: \"min-w-40 items-center\",\n        vertical: \"w-24 flex-col has-data-[slot=attachment-content]:w-30\",\n      },\n    },\n  }\n)\n\nfunction Attachment({\n  className,\n  state = \"done\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\"\n  }) {\n  return (\n    <div\n      data-slot=\"attachment\"\n      data-state={state}\n      data-size={size}\n      data-orientation={orientation}\n      className={cn(attachmentVariants({ size, orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nconst attachmentMediaVariants = cva(\n  \"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        icon: \"\",\n        image:\n          \"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"icon\",\n    },\n  }\n)\n\nfunction AttachmentMedia({\n  className,\n  variant = \"icon\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof attachmentMediaVariants>) {\n  return (\n    <div\n      data-slot=\"attachment-media\"\n      data-variant={variant}\n      className={cn(attachmentMediaVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-content\"\n      className={cn(\n        \"max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-title\"\n      className={cn(\n        \"block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-description\"\n      className={cn(\n        \"mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80\",\n        \"max-w-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-actions\"\n      className={cn(\n        \"relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentAction({\n  className,\n  variant,\n  size = \"xs\",\n  ...props\n}: Omit<\n  React.ComponentProps<typeof Button>,\n  \"size\" | \"aria-label\" | \"iconOnly\" | \"asChild\"\n> & {\n  /** Height step of the icon-only button; it is always square (`iconOnly`). */\n  size?: TextButtonSize\n  \"aria-label\": string\n}) {\n  return (\n    <Button\n      data-slot=\"attachment-action\"\n      variant={variant ?? \"ghost\"}\n      size={size}\n      iconOnly\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentTrigger({\n  className,\n  asChild = false,\n  type,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"attachment-trigger\"\n      type={asChild ? undefined : (type ?? \"button\")}\n      className={cn(\"absolute inset-0 z-10 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AttachmentGroup({\n  className,\n  tabIndex = 0,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-group\"\n      role=\"region\"\n      aria-label=\"Attachments\"\n      tabIndex={tabIndex}\n      className={cn(\n        \"flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Attachment,\n  AttachmentGroup,\n  AttachmentMedia,\n  AttachmentContent,\n  AttachmentTitle,\n  AttachmentDescription,\n  AttachmentActions,\n  AttachmentAction,\n  AttachmentTrigger,\n}\n\n/**\n * WHEN TO USE\n * - Files attached to a chat message or composer\n * - Upload queues that need per-file progress/state and a remove action\n *\n * NOT WHEN\n * - A plain native file picker with no per-file UI — use Input type=\"file\"\n * - Image browsing meant as a gallery rather than an attachment list\n * - Plain download links with no upload lifecycle\n *\n * KEY RULES\n * - state: idle, uploading, processing, error, done (default \"done\") — \"idle\" renders a dashed border (drop-zone look)\n * - size: default, sm, xs — scales padding/gap and AttachmentMedia icon size together; set once on Attachment\n * - orientation: horizontal (default, row) or vertical (column tile, media fills the width)\n * - AttachmentMedia variant: icon (default) or image — image dims to 60% opacity except in \"done\"/\"idle\" states\n * - AttachmentTitle shimmers automatically in \"uploading\"/\"processing\" states — no extra prop needed\n * - AttachmentAction defaults to variant=\"ghost\" size=\"xs\" iconOnly — always pass aria-label, it's icon-only\n * - AttachmentTrigger covers the whole card (inset-0, z-10) — put real buttons in AttachmentActions (z-20) so they stack above it and stay clickable\n *\n * USAGE\n * <Attachment state=\"uploading\">\n *   <AttachmentMedia variant=\"icon\"><FileTextIcon /></AttachmentMedia>\n *   <AttachmentContent>\n *     <AttachmentTitle>theme.css</AttachmentTitle>\n *     <AttachmentDescription>6.3 KB</AttachmentDescription>\n *   </AttachmentContent>\n *   <AttachmentActions>\n *     <AttachmentAction aria-label=\"Remove attachment\"><XIcon /></AttachmentAction>\n *   </AttachmentActions>\n * </Attachment>\n *\n * <AttachmentGroup>\n *   {files.map((f) => <Attachment key={f.name}>...</Attachment>)}\n * </AttachmentGroup>\n */\n"],"mappings":";;;;;;;AAkBA,IAAM,qBAAqB,IACzB,ySACA,EACE,UAAU;CACR,MAAM;EACJ,SACE;EACF,IAAI;EACJ,IAAI;CACN;CACA,aAAa;EACX,YAAY;EACZ,UAAU;CACZ;AACF,EACF,CACF;AAEA,SAAS,WAAW,EAClB,WACA,QAAQ,QACR,OAAO,WACP,cAAc,cACd,GAAG,SAIA;CACH,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,oBAAkB;EAClB,WAAW,GAAG,mBAAmB;GAAE;GAAM;EAAY,CAAC,GAAG,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,0BAA0B,IAC9B,orBACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,SAAS,gBAAgB,EACvB,WACA,UAAU,QACV,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,wBAAwB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,kJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,uHACA,cACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6PACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,SACA,OAAO,MACP,GAAG,SAQF;CACD,OACE,oBAAC,QAAD;EACE,aAAU;EACV,SAAS,WAAW;EACd;EACN,UAAA;EACA,WAAW,GAAG,SAAS;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,UAAU,OACV,MACA,GAAG,SAGF;CACD,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAM,UAAU,KAAA,IAAa,QAAQ;EACrC,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EACvB,WACA,WAAW,GACX,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAW;EACD;EACV,WAAW,GACT,sMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,82 @@
+/**
+ * Avatar — person/entity image with initials fallback.
+ *
+ * Built on the Radix Avatar primitive. A `size` prop ("default" | "sm" |
+ * "lg") also rescales AvatarFallback text and AvatarBadge via a shared
+ * `data-size` attribute, so sizing never needs className overrides.
+ */
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, colorSeed, children, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback> & {
+    /**
+     * A stable identity string (name, user id, email) hashed to one of the
+     * 6 chart colors. Defaults to the fallback's own text (usually
+     * initials) when omitted, so a plain `<AvatarFallback>AL</AvatarFallback>`
+     * is already colored — there's no neutral/grey fallback for text content.
+     * Pass it explicitly when the visible text isn't a stable per-identity
+     * string (e.g. it's always "?"), or when it differs from the real identity
+     * key you want the color derived from.
+     */
+    colorSeed?: string;
+}): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };
+/**
+ * WHEN TO USE
+ * - Representing a person or organization visually — profile pictures,
+ *   comment authors, member lists.
+ * - AvatarGroup + AvatarGroupCount for a set of collaborators with a
+ *   "+N" overflow count.
+ * - AvatarBadge for a presence dot (online/away/status) on the corner.
+ *
+ * NOT WHEN
+ * - Generic iconography with no identity meaning — use a Lucide icon.
+ * - Decorative or content imagery — Avatar is identity-specific.
+ * - A numeric unread/notification count — use CountBadge, not AvatarBadge
+ *   (AvatarBadge is a plain dot with no built-in number formatting).
+ *
+ * KEY RULES
+ * - Prefer the `size` prop ("default" | "sm" | "lg") over a raw
+ *   `size-*` className — it keeps AvatarFallback's text size and
+ *   AvatarBadge's dot size in sync via `data-size`. A raw className
+ *   override (e.g. `size-14`) changes only the Avatar's own dimensions,
+ *   not its children's.
+ * - AvatarFallback renders only once AvatarImage fails or is still
+ *   loading — always pair an AvatarImage with a fallback.
+ * - AvatarFallback hashes to one of 6 chart colors so each identity gets a
+ *   stable, distinct fallback — never the flat neutral bg-muted. The hash
+ *   seed defaults to the fallback's own text content (usually initials), so
+ *   plain `<AvatarFallback>AL</AvatarFallback>` is already colored; pass
+ *   `colorSeed` explicitly only when the visible text isn't a stable
+ *   per-identity string, or should key off something other than itself
+ * - Avatar itself has no border/ring — that's AvatarGroup's job (a
+ *   background-colored ring for overlap separation), not Avatar's
+ * - AvatarGroup expects each child to be a `data-slot="avatar"` element
+ *   (i.e. an actual `<Avatar>`) — it styles overlap and ring via that
+ *   attribute selector, not by wrapping arbitrary children.
+ *
+ * USAGE
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Ada Lovelace" />
+ *   <AvatarFallback>AL</AvatarFallback>
+ * </Avatar>
+ *
+ * <Avatar size="lg">
+ *   <AvatarImage src="/user.png" alt="Ada Lovelace" />
+ *   <AvatarFallback>AL</AvatarFallback>
+ *   <AvatarBadge className="bg-success" />
+ * </Avatar>
+ *
+ * <AvatarGroup>
+ *   <Avatar><AvatarFallback>CN</AvatarFallback></Avatar>
+ *   <Avatar><AvatarFallback>AL</AvatarFallback></Avatar>
+ *   <AvatarGroupCount>+4</AvatarGroupCount>
+ * </AvatarGroup>
+ */
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAIpD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B,qBAYA;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAWpD;AA4CD,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBAkBA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,WAAW,GACZ,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG"}

package/dist/components/ui/avatar.js

@@ -0,0 +1,123 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Avatar as Avatar$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/avatar.tsx
+function Avatar({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+var AVATAR_FALLBACK_COLOR_VARIANTS = [
+	"bg-[oklch(from_var(--color-chart-1)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-1)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-1)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-1)_0.88_calc(c*0.6)_h)]",
+	"bg-[oklch(from_var(--color-chart-3)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-3)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-3)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-3)_0.88_calc(c*0.6)_h)]",
+	"bg-[oklch(from_var(--color-chart-4)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-4)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-4)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-4)_0.88_calc(c*0.6)_h)]",
+	"bg-[oklch(from_var(--color-chart-6)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-6)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-6)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-6)_0.88_calc(c*0.6)_h)]",
+	"bg-[oklch(from_var(--color-chart-7)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-7)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-7)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-7)_0.88_calc(c*0.6)_h)]",
+	"bg-[oklch(from_var(--color-chart-8)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-8)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-8)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-8)_0.88_calc(c*0.6)_h)]"
+];
+/** djb2-ish string hash — deterministic, so the same seed always lands on the same swatch. */
+function hashSeedToColorIndex(seed) {
+	let hash = 0;
+	for (let i = 0; i < seed.length; i++) {
+		hash = (hash << 5) - hash + seed.charCodeAt(i);
+		hash |= 0;
+	}
+	return Math.abs(hash) % AVATAR_FALLBACK_COLOR_VARIANTS.length;
+}
+function AvatarFallback({ className, colorSeed, children, ...props }) {
+	const seed = colorSeed ?? (typeof children === "string" ? children : void 0);
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs", seed ? AVATAR_FALLBACK_COLOR_VARIANTS[hashSeedToColorIndex(seed)] : "bg-muted text-muted-foreground", className),
+		...props,
+		children
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Representing a person or organization visually — profile pictures,
+*   comment authors, member lists.
+* - AvatarGroup + AvatarGroupCount for a set of collaborators with a
+*   "+N" overflow count.
+* - AvatarBadge for a presence dot (online/away/status) on the corner.
+*
+* NOT WHEN
+* - Generic iconography with no identity meaning — use a Lucide icon.
+* - Decorative or content imagery — Avatar is identity-specific.
+* - A numeric unread/notification count — use CountBadge, not AvatarBadge
+*   (AvatarBadge is a plain dot with no built-in number formatting).
+*
+* KEY RULES
+* - Prefer the `size` prop ("default" | "sm" | "lg") over a raw
+*   `size-*` className — it keeps AvatarFallback's text size and
+*   AvatarBadge's dot size in sync via `data-size`. A raw className
+*   override (e.g. `size-14`) changes only the Avatar's own dimensions,
+*   not its children's.
+* - AvatarFallback renders only once AvatarImage fails or is still
+*   loading — always pair an AvatarImage with a fallback.
+* - AvatarFallback hashes to one of 6 chart colors so each identity gets a
+*   stable, distinct fallback — never the flat neutral bg-muted. The hash
+*   seed defaults to the fallback's own text content (usually initials), so
+*   plain `<AvatarFallback>AL</AvatarFallback>` is already colored; pass
+*   `colorSeed` explicitly only when the visible text isn't a stable
+*   per-identity string, or should key off something other than itself
+* - Avatar itself has no border/ring — that's AvatarGroup's job (a
+*   background-colored ring for overlap separation), not Avatar's
+* - AvatarGroup expects each child to be a `data-slot="avatar"` element
+*   (i.e. an actual `<Avatar>`) — it styles overlap and ring via that
+*   attribute selector, not by wrapping arbitrary children.
+*
+* USAGE
+* <Avatar>
+*   <AvatarImage src="/user.png" alt="Ada Lovelace" />
+*   <AvatarFallback>AL</AvatarFallback>
+* </Avatar>
+*
+* <Avatar size="lg">
+*   <AvatarImage src="/user.png" alt="Ada Lovelace" />
+*   <AvatarFallback>AL</AvatarFallback>
+*   <AvatarBadge className="bg-success" />
+* </Avatar>
+*
+* <AvatarGroup>
+*   <Avatar><AvatarFallback>CN</AvatarFallback></Avatar>
+*   <Avatar><AvatarFallback>AL</AvatarFallback></Avatar>
+*   <AvatarGroupCount>+4</AvatarGroupCount>
+* </AvatarGroup>
+*/
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
+
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["/**\n * Avatar — person/entity image with initials fallback.\n *\n * Built on the Radix Avatar primitive. A `size` prop (\"default\" | \"sm\" |\n * \"lg\") also rescales AvatarFallback text and AvatarBadge via a shared\n * `data-size` attribute, so sizing never needs className overrides.\n */\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/*\n * One static class string per chart color, not a template literal — Tailwind's\n * scanner only picks up complete class names that appear literally in source.\n * bg: a subtle tint of the color; text: a dark shade of that SAME color,\n * not a flat neutral ink — via the same CSS relative-color trick Bubble's\n * \"tinted\" variant already uses: keep the chart color's hue, pull the\n * background toward a light pastel (dark mode: a dark pastel) and the text\n * toward a dark, moderately saturated shade of that hue (dark mode: a light\n * one) instead of full-strength swatch + neutral ink.\n *\n * Only 6 of the 8 chart hues, not all 8: chart-1/3/4/6/7/8 (orange, indigo,\n * lime, pink, teal, fuchsia) — dropping chart-2 (violet) and chart-5 (cyan),\n * the two that sit closest to a kept hue (violet is 20.8° from indigo; cyan\n * is 39.5° from teal) and are therefore the most redundant to cut. Worst gap\n * in the kept 6 is 36.8° (pink to fuchsia) — not the >=45° this used to\n * clear before chart-1..8 was reconstructed from the Accent 1-8 primitives\n * (see theme-tokens.css), but the best any 6-of-8 subset of these\n * particular hues can do; re-verified via brute force over all 28\n * combinations, not assumed. Once pulled this light and this desaturated\n * for an avatar fill, hue is nearly all that's left to tell colors apart,\n * so even a \"close enough\" pair here reads as more similar than it would\n * at chart's full saturation.\n */\nconst AVATAR_FALLBACK_COLOR_VARIANTS = [\n  \"bg-[oklch(from_var(--color-chart-1)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-1)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-1)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-1)_0.88_calc(c*0.6)_h)]\",\n  \"bg-[oklch(from_var(--color-chart-3)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-3)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-3)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-3)_0.88_calc(c*0.6)_h)]\",\n  \"bg-[oklch(from_var(--color-chart-4)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-4)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-4)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-4)_0.88_calc(c*0.6)_h)]\",\n  \"bg-[oklch(from_var(--color-chart-6)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-6)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-6)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-6)_0.88_calc(c*0.6)_h)]\",\n  \"bg-[oklch(from_var(--color-chart-7)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-7)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-7)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-7)_0.88_calc(c*0.6)_h)]\",\n  \"bg-[oklch(from_var(--color-chart-8)_0.93_calc(c*0.35)_h)] text-[oklch(from_var(--color-chart-8)_0.32_calc(c*0.85)_h)] dark:bg-[oklch(from_var(--color-chart-8)_0.32_calc(c*0.35)_h)] dark:text-[oklch(from_var(--color-chart-8)_0.88_calc(c*0.6)_h)]\",\n]\n\n/** djb2-ish string hash — deterministic, so the same seed always lands on the same swatch. */\nfunction hashSeedToColorIndex(seed: string) {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash << 5) - hash + seed.charCodeAt(i)\n    hash |= 0\n  }\n  return Math.abs(hash) % AVATAR_FALLBACK_COLOR_VARIANTS.length\n}\n\nfunction AvatarFallback({\n  className,\n  colorSeed,\n  children,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback> & {\n  /**\n   * A stable identity string (name, user id, email) hashed to one of the\n   * 6 chart colors. Defaults to the fallback's own text (usually\n   * initials) when omitted, so a plain `<AvatarFallback>AL</AvatarFallback>`\n   * is already colored — there's no neutral/grey fallback for text content.\n   * Pass it explicitly when the visible text isn't a stable per-identity\n   * string (e.g. it's always \"?\"), or when it differs from the real identity\n   * key you want the color derived from.\n   */\n  colorSeed?: string\n}) {\n  const seed =\n    colorSeed ?? (typeof children === \"string\" ? children : undefined)\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        seed\n          ? AVATAR_FALLBACK_COLOR_VARIANTS[hashSeedToColorIndex(seed)]\n          : \"bg-muted text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n\n/**\n * WHEN TO USE\n * - Representing a person or organization visually — profile pictures,\n *   comment authors, member lists.\n * - AvatarGroup + AvatarGroupCount for a set of collaborators with a\n *   \"+N\" overflow count.\n * - AvatarBadge for a presence dot (online/away/status) on the corner.\n *\n * NOT WHEN\n * - Generic iconography with no identity meaning — use a Lucide icon.\n * - Decorative or content imagery — Avatar is identity-specific.\n * - A numeric unread/notification count — use CountBadge, not AvatarBadge\n *   (AvatarBadge is a plain dot with no built-in number formatting).\n *\n * KEY RULES\n * - Prefer the `size` prop (\"default\" | \"sm\" | \"lg\") over a raw\n *   `size-*` className — it keeps AvatarFallback's text size and\n *   AvatarBadge's dot size in sync via `data-size`. A raw className\n *   override (e.g. `size-14`) changes only the Avatar's own dimensions,\n *   not its children's.\n * - AvatarFallback renders only once AvatarImage fails or is still\n *   loading — always pair an AvatarImage with a fallback.\n * - AvatarFallback hashes to one of 6 chart colors so each identity gets a\n *   stable, distinct fallback — never the flat neutral bg-muted. The hash\n *   seed defaults to the fallback's own text content (usually initials), so\n *   plain `<AvatarFallback>AL</AvatarFallback>` is already colored; pass\n *   `colorSeed` explicitly only when the visible text isn't a stable\n *   per-identity string, or should key off something other than itself\n * - Avatar itself has no border/ring — that's AvatarGroup's job (a\n *   background-colored ring for overlap separation), not Avatar's\n * - AvatarGroup expects each child to be a `data-slot=\"avatar\"` element\n *   (i.e. an actual `<Avatar>`) — it styles overlap and ring via that\n *   attribute selector, not by wrapping arbitrary children.\n *\n * USAGE\n * <Avatar>\n *   <AvatarImage src=\"/user.png\" alt=\"Ada Lovelace\" />\n *   <AvatarFallback>AL</AvatarFallback>\n * </Avatar>\n *\n * <Avatar size=\"lg\">\n *   <AvatarImage src=\"/user.png\" alt=\"Ada Lovelace\" />\n *   <AvatarFallback>AL</AvatarFallback>\n *   <AvatarBadge className=\"bg-success\" />\n * </Avatar>\n *\n * <AvatarGroup>\n *   <Avatar><AvatarFallback>CN</AvatarFallback></Avatar>\n *   <Avatar><AvatarFallback>AL</AvatarFallback></Avatar>\n *   <AvatarGroupCount>+4</AvatarGroupCount>\n * </AvatarGroup>\n */\n"],"mappings":";;;;;AAaA,SAAS,OAAO,EACd,WACA,OAAO,WACP,GAAG,SAGF;CACD,OACE,oBAAC,SAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,oHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,qDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAyBA,IAAM,iCAAiC;CACrC;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAS,qBAAqB,MAAc;CAC1C,IAAI,OAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,QAAQ,QAAQ,KAAK,OAAO,KAAK,WAAW,CAAC;EAC7C,QAAQ;CACV;CACA,OAAO,KAAK,IAAI,IAAI,IAAI,+BAA+B;AACzD;AAEA,SAAS,eAAe,EACtB,WACA,WACA,UACA,GAAG,SAYF;CACD,MAAM,OACJ,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;CAC1D,OACE,oBAAC,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,uGACA,OACI,+BAA+B,qBAAqB,IAAI,KACxD,kCACJ,SACF;EACA,GAAI;EAEH;CACuB,CAAA;AAE9B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;CAC1E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,4KACA,iFACA,6FACA,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,uGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,130 @@
+/**
+ * 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.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    tone?: "default" | "secondary" | "destructive" | null | undefined;
+    emphasis?: "outline" | "ghost" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>["tone"]>;
+type BadgeEmphasis = NonNullable<VariantProps<typeof badgeVariants>["emphasis"]>;
+/**
+ * @deprecated The single `variant` list mixed two axes (what the badge means
+ * and how loudly it's drawn). Use `tone` + `emphasis` instead. Still accepted
+ * so existing consumers render unchanged: default -> filled default,
+ * secondary -> filled secondary, destructive -> filled destructive,
+ * outline -> outline default, ghost -> ghost default. `link` (an interaction
+ * affordance on a non-interactive label) has no new-axis equivalent and just
+ * keeps its old underline look.
+ */
+type BadgeLegacyVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+declare function Badge({ className, tone, emphasis, variant, asChild, truncate, maxWidth, style, children, title, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+    /** 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`. */
+    truncate?: boolean;
+    /** Caps the badge's width (a number is px, or any CSS size) and implies `truncate`. */
+    maxWidth?: number | string;
+    /** @deprecated use `tone` + `emphasis` */
+    variant?: BadgeLegacyVariant;
+}): React.JSX.Element;
+export { Badge, badgeVariants };
+export type { BadgeTone, BadgeEmphasis };
+/**
+ * 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>
+ */
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,aAAa;;;8EA8ElB,CAAA;AAED,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACxE,KAAK,aAAa,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;AAChF;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACrB,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAaxE,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAe,EACf,QAAgB,EAChB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAC7B,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4NAA4N;IAC5N,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAA;CAC7B,qBAiDF;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA;AAC/B,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FG"}