@inui/design-system 0.0.0-stage → 1.22.0

package/README.md

@@ -1,3 +1,361 @@
-# Temporary Holding Version
+# @inui/design-system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+61 React components on Tailwind CSS v4, with a shared design token palette.
+Built from shadcn/ui on Radix primitives.
+
+- **React 19** (peer dependency — you provide it)
+- **Tailwind not required.** The package ships a prebuilt stylesheet.
+- **Dark mode** via a `dark` class, no theme provider needed.
+- **Tree-shakeable** — importing `Button` pulls in Button, not all 61.
+
+[Live on Storybook](https://gitlab-pages.innovaccer.com/inui-design-system-b7dcd2/?path=/docs/actions-buttongroup--docs)
+
+---
+
+## 1. Install
+
+```bash
+pnpm add @inui/design-system
+# or: npm i @inui/design-system
+```
+
+`lucide-react` is a peer dependency (the components render its icons), so install
+it alongside:
+
+```bash
+pnpm add lucide-react
+```
+
+## 2. Import the stylesheet and mark your root
+
+Import once at your app's entry point (`main.tsx`, `App.tsx`, or `app/layout.tsx`):
+
+```ts
+import "@inui/design-system/styles.css"
+```
+
+Then put `data-m2ds-root` on the element your app renders into:
+
+```tsx
+<div data-m2ds-root>{/* your app */}</div>
+```
+
+**Both steps are required.** Every rule in the stylesheet is wrapped in a CSS
+[`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) block, so
+without that attribute on an ancestor nothing is styled. This is deliberate — see
+[Why it's scoped](#why-its-scoped).
+
+It works on a custom element too (`<my-app data-m2ds-root>`), and multiple roots on
+one page are each scoped independently.
+
+> Put the attribute on a **wrapper**, not on an element you also style with utility
+> classes. `@scope` does not match its own scoping root with bare selectors, so
+> `<div data-m2ds-root className="bg-card">` would not get `bg-card`.
+
+## 3. Use the components
+
+```tsx
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@inui/design-system"
+
+export function Example() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Deploy</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Ship it</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+That's the whole setup. Everything below is optional or situational.
+
+---
+
+## Fonts
+
+The palette expects **DM Sans** and **DM Mono**, but the package does not ship
+font files (bundling them would break the published CSS). Install them yourself:
+
+```bash
+pnpm add @fontsource-variable/dm-sans @fontsource/dm-mono
+```
+
+```ts
+import "@fontsource-variable/dm-sans"
+import "@fontsource/dm-mono"
+```
+
+Or skip it and point the tokens at a font you already load. Override on your root
+element — the stylesheet declares `--font-sans` there, so a `:root` override would
+be shadowed:
+
+```css
+[data-m2ds-root] {
+  --font-sans: "Inter", system-ui, sans-serif;
+}
+```
+
+## Dark mode
+
+Add the `dark` class to `<html>`. Every token flips automatically — there is no
+provider to install and no context to wire up.
+
+```tsx
+document.documentElement.classList.toggle("dark", isDark)
+```
+
+If you already use `next-themes` or similar, it does this for you; nothing extra
+is needed.
+
+This keeps working even though `<html>` sits _outside_ the scope root: `@scope`
+confines only a selector's subject, not its ancestors. `dark` on your root element
+or on a subtree inside it works too, so a dark sidebar in a light app is fine.
+
+## Components that need a wrapper
+
+Three components need something mounted before they work:
+
+| Component          | What to add         | Where                            |
+| ------------------ | ------------------- | -------------------------------- |
+| `Tooltip`          | `<TooltipProvider>` | once, at your app root           |
+| `Toaster` (toasts) | `<Toaster />`       | once, at your app root           |
+| `Sidebar`          | `<SidebarProvider>` | around the sidebar + its content |
+
+```tsx
+import { TooltipProvider, Toaster } from "@inui/design-system"
+
+export function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipProvider>
+      {children}
+      <Toaster />
+    </TooltipProvider>
+  )
+}
+```
+
+Then anywhere: `import { toast } from "sonner"` → `toast.success("Saved")`.
+
+---
+
+## Using the design tokens
+
+The stylesheet exposes 87 colour tokens as CSS custom properties, declared on your
+`data-m2ds-root` element. Use them in your own styles anywhere **inside** that
+element — they don't resolve outside it:
+
+```tsx
+<div style={{ background: "var(--color-surface-chat)" }} />
+```
+
+```css
+.my-panel {
+  background: var(--color-surface);
+  color: var(--color-surface-foreground);
+  border: 1px solid var(--color-border-subtle);
+}
+```
+
+**Browse them all** in Storybook under **Design System → Tokens → Colors**. Each
+swatch has a click-to-copy `var(...)` snippet.
+
+Token families: `background` / `foreground`, `card`, `popover`, `surface*`,
+`primary*`, `secondary`, `muted*`, `accent`, `border*`, `input`, `ring*`, the
+status set (`destructive`, `success`, `warning`, `alert`, `info` — each with
+`-foreground`, `-light`, `-ultra-light`, `-text`), `sidebar*`, `chart-1..8`,
+and `ai-*`.
+
+> Pair a surface with its own foreground: `--color-card` with
+> `--color-card-foreground`, never with `--color-foreground`.
+
+### Utility classes (`bg-primary`, `text-muted-foreground`)
+
+These work for the ~20 tokens the components use, because Tailwind only
+generates utilities for classes it sees used. `bg-ai-wash` is **not** in
+the prebuilt CSS.
+
+If you want a utility for any token, run your own Tailwind v4 build over our
+`dist/` instead of importing our stylesheet — see [Opting out](#opting-out). You
+then get every token as a utility, plus opacity steps like `bg-alert/30`. Don't
+import `styles.css` as well, or you'll ship the CSS twice.
+
+### Overriding a token
+
+Redefine it after the import. Scope it to a class if you need more than one
+theme live at once:
+
+```css
+@import "@inui/design-system/styles.css";
+
+:root {
+  --color-primary: #7c3aed;
+}
+
+.theme-acme {
+  --color-primary: #0f766e;
+}
+.dark .theme-acme,
+.theme-acme.dark {
+  --color-primary: #5eead4;
+}
+```
+
+> Override on your root element, not `:root` — the stylesheet declares tokens on
+> the element carrying `data-m2ds-root`, which is a closer ancestor and therefore
+> wins. Use `[data-m2ds-root] { --color-primary: #7c3aed }`, or set it inline on the
+> element.
+
+## Why it's scoped
+
+This library is built to run as one web component among several on a shared page,
+in the light DOM (no shadow root). A document-wide stylesheet is hostile there, so
+there isn't one — `styles.css` is scoped and that is the only mode shipped.
+
+**What that buys you.**
+
+- Tailwind's preflight (`*`, `ol`/`ul`/`menu`, `img`/`svg`, form controls) doesn't
+  reset the host document.
+- `font-family` and `background`/`color` land on your root element, not on `html`
+  and `body`.
+- **No design token touches `:root`.** Isolation is two-way: a co-loaded design
+  system declaring `--color-primary` or `--radius` on `:root` keeps its own values,
+  and your components keep theirs.
+- Specificity is unchanged, so your own overrides beat a utility exactly as they
+  would against any ordinary Tailwind build.
+
+**Caveats.**
+
+- **Browser support is a hard floor:** `@scope` needs Chrome/Edge 118+,
+  Safari 17.4+, Firefox 128+. There is no polyfill, and an unsupported `@scope`
+  block is dropped _with its contents_ — so on an older browser your app renders
+  unstyled rather than degrading. Since this is the only stylesheet shipped, that
+  matrix is the package's.
+- **It stops us leaking out, not others leaking in.** Unlayered host CSS such as
+  `ul { list-style: square }` still overrides our preflight inside the scope,
+  because unlayered CSS always beats layered CSS. That's a property of Tailwind's
+  cascade layers, not of `@scope`.
+- **`@keyframes` names stay global.** Ours is prefixed (`mmds-step-in`), but names
+  from dependencies (`enter`/`exit`, `spin`, `pulse`, `accordion-down`) are not, so
+  another sheet defining the same name wins for both.
+- **Portals are handled for you.** Overlays portal into `document.body`, outside
+  your root, so the 12 overlay components tag their own portal wrapper with
+  `data-m2ds-portal` — the sheet scopes to that as a second root. If you portal
+  library content yourself, spread `portalScopeProps` onto your container:
+
+  ```tsx
+  import { portalScopeProps } from "@inui/design-system"
+  createPortal(<div {...portalScopeProps}>{content}</div>, document.body)
+  ```
+
+`M2DS_ROOT_ATTRIBUTE`, `M2DS_PORTAL_ATTRIBUTE`, `rootScopeProps` and
+`portalScopeProps` are all exported if you'd rather not hardcode the strings.
+
+### Opting out
+
+If your app owns the whole page and you want unscoped, document-wide CSS, don't
+import `styles.css` — run your own Tailwind build over our `dist/` instead:
+
+```css
+@import "tailwindcss";
+@import "@inui/design-system/theme.css";
+@source "../node_modules/@inui/design-system/dist";
+```
+
+`theme.css` emits the palette on `:root` when imported directly, so this path needs
+no `data-m2ds-root`. You also get every token as a utility (see
+[Utility classes](#utility-classes-bg-primary-text-muted-foreground)).
+
+`theme.css` also carries the Tailwind v4 border-color compatibility rule
+(`* { border-color: var(--color-border) }`, base layer) — Tailwind v4 stopped
+defaulting a bare `border`/`border-b`/etc. to gray and resolves it to
+`currentColor` instead, which every component here that uses an unsuffixed
+border (Table's rows, Card's footer, Sidebar's rail edge, and others — same
+as shadcn/ui's own source) depends on not happening. Nothing to configure;
+it's already active once you import `theme.css`.
+
+## Good to know
+
+- **Nothing is styled without `data-m2ds-root`** on an ancestor. If your app renders
+  completely unstyled, that's the first thing to check.
+- **The stylesheet sets no document-level rules.** `font-family`,
+  `background` and `color` land on your root element, so your app shell keeps
+  control of `html` and `body`.
+- **Everything is a named export** from the package root — there are no deep
+  import paths like `@inui/design-system/button`.
+- **TypeScript** types ship with the package; no `@types/*` needed.
+
+## Component list
+
+`manifest.json` at the repo root is a machine-readable index of all 61 — id,
+category, a summary of the real variants and sizes, and `when` / `not_when`
+guidance. It's meant for AI coding agents: scan it to pick a component, then read
+the `file` path for the source.
+
+Actions · Button, ButtonGroup, Toggle, ToggleGroup
+Forms · Input, Textarea, Label, Checkbox, RadioGroup, Switch, Select,
+NativeSelect, Combobox, Slider, InputOTP, InputGroup, Field, Questionnaire,
+Calendar
+Navigation · Breadcrumb, Tabs, Pagination, Menubar, NavigationMenu, Sidebar
+Menus · DropdownMenu, ContextMenu, Command
+Overlays · Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip
+Data display · Table, Card, Badge, Avatar, Item, Kbd, Marker
+Feedback · Alert, Toaster, Progress, Skeleton, Spinner, Empty
+Layout · Accordion, Collapsible, Carousel, ResizablePanelGroup, ScrollArea,
+Separator, AspectRatio
+Chat · Bubble, Message, MessageScroller, Attachment
+Utilities · DirectionProvider, `cn()`, `useIsMobile()`, `useIsDarkMode()`
+
+---
+
+## Developing this library
+
+```bash
+pnpm install
+pnpm storybook        # docs + playground at localhost:6006
+```
+
+| Script                      | Does                                |
+| --------------------------- | ----------------------------------- |
+| `pnpm storybook`            | Storybook dev server                |
+| `pnpm build`                | Build `dist/` — JS, types, then CSS |
+| `pnpm build:storybook`      | Static Storybook                    |
+| `pnpm typecheck`            | `tsc --noEmit`                      |
+| `pnpm lint` / `pnpm format` | ESLint / Prettier                   |
+
+**Layout**
+
+```
+src/components/ui/          the 61 components (vendored from the shadcn registry)
+src/styles/index.css        the scoped Tailwind entry -> dist/styles.css
+src/styles/theme.css        token registration; also the published theme.css
+src/styles/theme-tokens.css the palette, light + dark — EDIT HERE to rebrand
+src/lib/scope.ts            the data-m2ds-root / data-m2ds-portal markers
+stories/components/         one story file per component
+```
+
+`theme-tokens.css` is a selector-less declaration list, which is what lets one set
+of values be placed on `:root` by `theme.css` and on `:scope` by the scoped entry.
+Dark mode is a nested rule inside it, so `&` resolves to whichever element that
+entry chose. It stays a separate file because `@theme` always emits to `:root`
+(Tailwind hardcodes that selector), so the scoped build registers the theme with
+`@reference` — emitting nothing — and declares the values itself.
+
+To rebrand, edit `theme-tokens.css`, then mirror the values into the
+`@theme static reference` block in `theme.css`. That block is registration only and
+feeds `var()` fallbacks that never resolve, so a mismatch cannot change a rendered
+colour.
+
+To change the theme, edit `src/styles/theme.css` and rebuild. To pull a component
+update from upstream, `pnpm dlx shadcn@latest add --overwrite <name>` — then
+re-check `sonner.tsx`, which is intentionally patched to drop its `next-themes`
+dependency.

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

@@ -0,0 +1,44 @@
+/**
+ * Accordion — coordinated set of collapsible sections.
+ *
+ * Built on the Radix Accordion primitive. The open/closed chevron swap is
+ * done via data-slot targeting instead of a rotate transform.
+ */
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+declare function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+/**
+ * WHEN TO USE
+ * - Progressive disclosure of several grouped, peer sections — FAQs, nested
+ *   settings, a long form split into sections.
+ *
+ * NOT WHEN
+ * - Switching between peer views that replace each other — use Tabs.
+ * - Exactly one independent expandable region — use Collapsible (Accordion
+ *   is Collapsible plus coordination between multiple items).
+ * - Content the user needs visible immediately — an accordion adds a click
+ *   before it's readable.
+ *
+ * KEY RULES
+ * - `type` is required and changes exclusivity: "single" closes other items
+ *   when one opens (add `collapsible` to also allow all-closed); "multiple"
+ *   lets any number stay open independently.
+ * - Any AccordionItem can take `disabled` to lock it regardless of `type`.
+ * - Height animates via the `--radix-accordion-content-height` CSS var — do
+ *   not replace AccordionContent's wrapper div with a fixed-height container.
+ *
+ * USAGE
+ *   <Accordion type="single" collapsible defaultValue="tokens">
+ *     <AccordionItem value="tokens">
+ *       <AccordionTrigger>How do I customise the theme?</AccordionTrigger>
+ *       <AccordionContent>Edit the oklch values in theme.css.</AccordionContent>
+ *     </AccordionItem>
+ *   </Accordion>
+ *
+ *   <Accordion type="multiple" defaultValue={["tokens", "tailwind"]}>...</Accordion>
+ */
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK1D,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAQtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAQtD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAuBzD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAiBzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG"}

package/dist/components/ui/accordion.js

@@ -0,0 +1,86 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Accordion as Accordion$1 } from "radix-ui";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/accordion.tsx
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		"data-slot": "accordion",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		"data-slot": "accordion-item",
+		className: cn("not-last:border-b", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				}),
+				/* @__PURE__ */ jsx(ChevronUpIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				})
+			]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Content, {
+		"data-slot": "accordion-content",
+		className: "overflow-hidden text-sm data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - Progressive disclosure of several grouped, peer sections — FAQs, nested
+*   settings, a long form split into sections.
+*
+* NOT WHEN
+* - Switching between peer views that replace each other — use Tabs.
+* - Exactly one independent expandable region — use Collapsible (Accordion
+*   is Collapsible plus coordination between multiple items).
+* - Content the user needs visible immediately — an accordion adds a click
+*   before it's readable.
+*
+* KEY RULES
+* - `type` is required and changes exclusivity: "single" closes other items
+*   when one opens (add `collapsible` to also allow all-closed); "multiple"
+*   lets any number stay open independently.
+* - Any AccordionItem can take `disabled` to lock it regardless of `type`.
+* - Height animates via the `--radix-accordion-content-height` CSS var — do
+*   not replace AccordionContent's wrapper div with a fixed-height container.
+*
+* USAGE
+*   <Accordion type="single" collapsible defaultValue="tokens">
+*     <AccordionItem value="tokens">
+*       <AccordionTrigger>How do I customise the theme?</AccordionTrigger>
+*       <AccordionContent>Edit the oklch values in theme.css.</AccordionContent>
+*     </AccordionItem>
+*   </Accordion>
+*
+*   <Accordion type="multiple" defaultValue={["tokens", "tailwind"]}>...</Accordion>
+*/
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+
+//# sourceMappingURL=accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":[],"sources":["../../../src/components/ui/accordion.tsx"],"sourcesContent":["/**\n * Accordion — coordinated set of collapsible sections.\n *\n * Built on the Radix Accordion primitive. The open/closed chevron swap is\n * done via data-slot targeting instead of a rotate transform.\n */\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <ChevronUpIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n\n/**\n * WHEN TO USE\n * - Progressive disclosure of several grouped, peer sections — FAQs, nested\n *   settings, a long form split into sections.\n *\n * NOT WHEN\n * - Switching between peer views that replace each other — use Tabs.\n * - Exactly one independent expandable region — use Collapsible (Accordion\n *   is Collapsible plus coordination between multiple items).\n * - Content the user needs visible immediately — an accordion adds a click\n *   before it's readable.\n *\n * KEY RULES\n * - `type` is required and changes exclusivity: \"single\" closes other items\n *   when one opens (add `collapsible` to also allow all-closed); \"multiple\"\n *   lets any number stay open independently.\n * - Any AccordionItem can take `disabled` to lock it regardless of `type`.\n * - Height animates via the `--radix-accordion-content-height` CSS var — do\n *   not replace AccordionContent's wrapper div with a fixed-height container.\n *\n * USAGE\n *   <Accordion type=\"single\" collapsible defaultValue=\"tokens\">\n *     <AccordionItem value=\"tokens\">\n *       <AccordionTrigger>How do I customise the theme?</AccordionTrigger>\n *       <AccordionContent>Edit the oklch values in theme.css.</AccordionContent>\n *     </AccordionItem>\n *   </Accordion>\n *\n *   <Accordion type=\"multiple\" defaultValue={[\"tokens\", \"tailwind\"]}>...</Accordion>\n */\n"],"mappings":";;;;;;AAaA,SAAS,UAAU,EACjB,WACA,GAAG,SACoD;CACvD,OACE,oBAAC,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAAC,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,qBAAqB,SAAS;EAC5C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAAC,YAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAAC,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,ufACA,SACF;GACA,GAAI;GANN,UAAA;IAQG;IACD,oBAAC,iBAAD;KACE,aAAU;KACV,WAAU;IACX,CAAA;IACD,oBAAC,eAAD;KACE,aAAU;KACV,WAAU;IACX,CAAA;GACyB;;CACH,CAAA;AAE/B;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAAC,YAAmB,SAApB;EACE,aAAU;EACV,WAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,WAAW,GACT,qJACA,SACF;GAEC;EACE,CAAA;CACqB,CAAA;AAEhC"}

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

@@ -0,0 +1,46 @@
+/**
+ * AIAvatar — an avatar-shaped AI-identity marker.
+ *
+ * A plain `Avatar`, fixed to an AI-Identity gradient background instead of
+ * `AvatarFallback`'s usual hash-derived color, holding `AISparkle`
+ * (`tone="mono"`, rendered white via `text-white`) instead of initials.
+ * The full brand gradient icon on top of an already-gradient background
+ * would read as muddy — a flat white mark reads clean, the same
+ * colored-circle-plus-white-icon convention avatar badges generally use.
+ *
+ * The background is `ai-grad-from` to `ai-grad-to` (pink to orange), not
+ * the usual `ai-wash` to `ai-grad-from` (yellow to pink) — computed
+ * contrast of white against `ai-wash` is only 1.62:1, and still only
+ * ~2.9:1 at the gradient's own visual midpoint, failing WCAG 1.4.11's 3:1
+ * non-text minimum across a meaningful chunk of the icon's footprint.
+ * `ai-grad-from`/`ai-grad-to` individually clear 3.6-4.3:1 against white —
+ * same AI Identity palette, just without the one stop that doesn't hold
+ * up against a white icon.
+ *
+ * Marks genuine AI involvement only, never decoration — see manifest.json's
+ * `ai_presence` convention for the full rule and every current AI-treatment
+ * recipe.
+ */
+import * as React from "react";
+import { Avatar } from "../../components/ui/avatar";
+declare function AIAvatar({ className, size, ...props }: Omit<React.ComponentProps<typeof Avatar>, "children"> & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+export { AIAvatar };
+/**
+ * WHEN TO USE
+ * - An avatar-shaped slot that needs to read as "this is Sara/AI" at a glance — a collaborator list that includes an AI participant, a DataTable row's assignee avatar when AI is the assignee
+ *
+ * NOT WHEN
+ * - A chat surface that's already inside its own Sara-branded container — per message.tsx's own doc comment, per-message AI marking is redundant there; omit the avatar entirely instead
+ * - Marking AI presence on content that isn't itself a person/entity slot — use AILabel or Button variant="ai" instead
+ *
+ * KEY RULES
+ * - size: "default" | "sm" | "lg" — same vocabulary as Avatar itself, passed straight through
+ * - No `children`/`colorSeed` — always the fixed AI Gradient background + white AISparkle, not a hash-derived color
+ *
+ * USAGE
+ * <AIAvatar />
+ * <AIAvatar size="sm" />
+ */
+//# sourceMappingURL=ai-avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ai-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAS/C,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B,qBA0BA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB;;;;;;;;;;;;;;;GAeG"}

package/dist/components/ui/ai-avatar.js

@@ -0,0 +1,43 @@
+import { cn } from "../../lib/utils.js";
+import { AISparkle } from "./ai-sparkle.js";
+import { Avatar } from "./avatar.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/ai-avatar.tsx
+var SPARKLE_SIZE_BY_AVATAR_SIZE = {
+	default: "md",
+	sm: "sm",
+	lg: "lg"
+};
+function AIAvatar({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		"data-slot": "ai-avatar",
+		size,
+		className: cn("items-center justify-center bg-gradient-to-br from-ai-grad-from to-ai-grad-to text-white", className),
+		...props,
+		children: /* @__PURE__ */ jsx(AISparkle, {
+			tone: "mono",
+			size: SPARKLE_SIZE_BY_AVATAR_SIZE[size]
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - An avatar-shaped slot that needs to read as "this is Sara/AI" at a glance — a collaborator list that includes an AI participant, a DataTable row's assignee avatar when AI is the assignee
+*
+* NOT WHEN
+* - A chat surface that's already inside its own Sara-branded container — per message.tsx's own doc comment, per-message AI marking is redundant there; omit the avatar entirely instead
+* - Marking AI presence on content that isn't itself a person/entity slot — use AILabel or Button variant="ai" instead
+*
+* KEY RULES
+* - size: "default" | "sm" | "lg" — same vocabulary as Avatar itself, passed straight through
+* - No `children`/`colorSeed` — always the fixed AI Gradient background + white AISparkle, not a hash-derived color
+*
+* USAGE
+* <AIAvatar />
+* <AIAvatar size="sm" />
+*/
+//#endregion
+export { AIAvatar };
+
+//# sourceMappingURL=ai-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-avatar.js","names":[],"sources":["../../../src/components/ui/ai-avatar.tsx"],"sourcesContent":["/**\n * AIAvatar — an avatar-shaped AI-identity marker.\n *\n * A plain `Avatar`, fixed to an AI-Identity gradient background instead of\n * `AvatarFallback`'s usual hash-derived color, holding `AISparkle`\n * (`tone=\"mono\"`, rendered white via `text-white`) instead of initials.\n * The full brand gradient icon on top of an already-gradient background\n * would read as muddy — a flat white mark reads clean, the same\n * colored-circle-plus-white-icon convention avatar badges generally use.\n *\n * The background is `ai-grad-from` to `ai-grad-to` (pink to orange), not\n * the usual `ai-wash` to `ai-grad-from` (yellow to pink) — computed\n * contrast of white against `ai-wash` is only 1.62:1, and still only\n * ~2.9:1 at the gradient's own visual midpoint, failing WCAG 1.4.11's 3:1\n * non-text minimum across a meaningful chunk of the icon's footprint.\n * `ai-grad-from`/`ai-grad-to` individually clear 3.6-4.3:1 against white —\n * same AI Identity palette, just without the one stop that doesn't hold\n * up against a white icon.\n *\n * Marks genuine AI involvement only, never decoration — see manifest.json's\n * `ai_presence` convention for the full rule and every current AI-treatment\n * recipe.\n */\n\nimport * as React from \"react\"\n\nimport { AISparkle } from \"@/components/ui/ai-sparkle\"\nimport { Avatar } from \"@/components/ui/avatar\"\nimport { cn } from \"@/lib/utils\"\n\nconst SPARKLE_SIZE_BY_AVATAR_SIZE = {\n  default: \"md\",\n  sm: \"sm\",\n  lg: \"lg\",\n} as const\n\nfunction AIAvatar({\n  className,\n  size = \"default\",\n  ...props\n}: Omit<React.ComponentProps<typeof Avatar>, \"children\"> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <Avatar\n      data-slot=\"ai-avatar\"\n      size={size}\n      // grad-from -> grad-to (pink -> orange), not the wash's pale yellow —\n      // computed contrast of white against ai-wash is only 1.62:1 (and\n      // ~2.9:1 even at the gradient's own visual midpoint), failing WCAG\n      // 1.4.11's 3:1 non-text minimum across a meaningful chunk of the\n      // icon's footprint. grad-from/grad-to individually clear 3.6-4.3:1,\n      // same AI Identity palette, just without the one stop that doesn't\n      // hold up against a white icon.\n      className={cn(\n        \"items-center justify-center bg-gradient-to-br from-ai-grad-from to-ai-grad-to text-white\",\n        className\n      )}\n      {...props}\n    >\n      {/*\n       * Avatar has no ambient `[&_svg]` sizing rule the way Button does\n       * (see AISparkle's own doc comment) — AISparkle needs an explicit\n       * size here or it renders at the SVG's unconstrained default.\n       */}\n      <AISparkle tone=\"mono\" size={SPARKLE_SIZE_BY_AVATAR_SIZE[size]} />\n    </Avatar>\n  )\n}\n\nexport { AIAvatar }\n\n/**\n * WHEN TO USE\n * - An avatar-shaped slot that needs to read as \"this is Sara/AI\" at a glance — a collaborator list that includes an AI participant, a DataTable row's assignee avatar when AI is the assignee\n *\n * NOT WHEN\n * - A chat surface that's already inside its own Sara-branded container — per message.tsx's own doc comment, per-message AI marking is redundant there; omit the avatar entirely instead\n * - Marking AI presence on content that isn't itself a person/entity slot — use AILabel or Button variant=\"ai\" instead\n *\n * KEY RULES\n * - size: \"default\" | \"sm\" | \"lg\" — same vocabulary as Avatar itself, passed straight through\n * - No `children`/`colorSeed` — always the fixed AI Gradient background + white AISparkle, not a hash-derived color\n *\n * USAGE\n * <AIAvatar />\n * <AIAvatar size=\"sm\" />\n */\n"],"mappings":";;;;;;AA8BA,IAAM,8BAA8B;CAClC,SAAS;CACT,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,SAAS,EAChB,WACA,OAAO,WACP,GAAG,SAGF;CACD,OACE,oBAAC,QAAD;EACE,aAAU;EACJ;EAQN,WAAW,GACT,4FACA,SACF;EACA,GAAI;EAOJ,UAAA,oBAAC,WAAD;GAAW,MAAK;GAAO,MAAM,4BAA4B;EAAQ,CAAA;CAC3D,CAAA;AAEZ"}