@brokenrubik/ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,265 @@
-# Temporary Holding Version
+# @brokenrubik/ui
 
-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.
+The **BR Admin Library** (Figma) as a React component package: shadcn-style components and a
+Tailwind CSS v4 theme with the exact Figma values. Every BrokenRubik app (Proma, Timma, Mara,
+Folio, DocuBuilder and the next one) installs this package and gets the same look. Each app can
+still change or extend it.
+
+- **Docs site with live examples and code:** https://brokenrubik.github.io/ui/
+- **Source of truth:** Figma file `ONZyUryZr526mtbex2HVPk` (BR Admin Library), pages
+  *Foundations* (`2004:2`) and *Components · Base* (`2004:3`).
+- **What is different from Tailwind and shadcn:** [docs/figma-vs-tailwind.md](docs/figma-vs-tailwind.md)
+- **Stack:** React 18 or 19, Tailwind CSS v4, Radix UI, class-variance-authority,
+  tailwind-merge, lucide-react, cmdk, sonner, react-day-picker, IBM Plex fonts (included). ESM only. Every component that
+  needs the browser has `'use client'`, so it works in the Next.js App Router.
+
+Contents: [Install](#install) · [Set up](#set-up-once-per-app) ·
+[How the Tailwind config works](#how-the-tailwind-config-works) · [Use](#use) ·
+[Extend and override](#extend-and-override) · [Adopt in an existing app](#adopt-in-an-existing-app) ·
+[Rules](#rules-that-prevent-bugs) · [Contribute](#contribute)
+
+## Install
+
+```bash
+pnpm add @brokenrubik/ui      # or: npm install @brokenrubik/ui
+```
+
+Your app must already have `react`, `react-dom` and `tailwindcss` 4.x (peer dependencies). The
+package installs all other libraries itself (Radix, sonner, cmdk, lucide-react…) and the IBM
+Plex font files.
+
+## Set up (once per app)
+
+### 1. CSS
+
+Put these two lines at the top of the app's main stylesheet (`globals.css`, `index.css`):
+
+```css
+@import "tailwindcss";
+@import "@brokenrubik/ui/styles.css";
+```
+
+The order is important: `tailwindcss` first, then the package. Nothing else is necessary. The
+next section tells what these two lines do.
+
+### 2. Fonts (IBM Plex Sans and IBM Plex Mono)
+
+You do not need to do anything. `styles.css` loads IBM Plex Sans (400, 500, 600) and IBM Plex
+Mono (400, 500) from the package. Your bundler (Next.js, Vite) copies the font files into the
+build. The browser downloads only the weights and the character sets that the page uses.
+
+If the app already loads the fonts, remove that code (`next/font` IBM Plex, `@fontsource`
+imports, a Google Fonts `<link>`), so that the fonts do not load two times.
+
+To load the fonts in a different way (for example `next/font`, to get self-hosting with
+preload), set the CSS variables `--font-plex-sans` and `--font-plex-mono` to your font
+families. The package fonts are then never downloaded:
+
+```tsx
+// Next.js: app/layout.tsx (optional)
+import { IBM_Plex_Sans, IBM_Plex_Mono } from 'next/font/google';
+
+const sans = IBM_Plex_Sans({ subsets: ['latin'], weight: ['400', '500', '600'], variable: '--font-plex-sans' });
+const mono = IBM_Plex_Mono({ subsets: ['latin'], weight: ['400', '500'], variable: '--font-plex-mono' });
+
+<html lang="en" className={`${sans.variable} ${mono.variable}`}>
+```
+
+### 3. Dark mode and the light sidebar
+
+- Dark theme: put the class `dark` on `<html>`. The `dark:` variant follows this class, not
+  the operating system setting.
+- "Sidebar claro" (light sidebar, in the light and the dark theme): put the class
+  `sidebar-light` on `<html>`. With `dark` too, you get the Figma mode "Dark · Sidebar claro".
+- On the sidebar element, put the class `sidebar-surface`. Then the components inside the
+  sidebar use the sidebar colors (light text on navy).
+
+Set these classes before the first paint (an inline script in `<head>`), or the page flashes.
+
+### 4. Providers
+
+Add these once, in the app root:
+
+```tsx
+import { Toaster, TooltipProvider } from '@brokenrubik/ui';
+
+<TooltipProvider>
+  {children}
+  <Toaster theme={isDark ? 'dark' : 'light'} />
+</TooltipProvider>
+```
+
+## How the Tailwind config works
+
+Tailwind v4 has **no `tailwind.config.js`**. The configuration is CSS, and
+`@brokenrubik/ui/styles.css` is the shared configuration. When your app's Tailwind compiles
+`globals.css`, it reads the package CSS as if you wrote it in your own file. There is one
+CSS output for the app, with your classes and the package classes together.
+
+`styles.css` contains five parts:
+
+| Part | File | What it does |
+| --- | --- | --- |
+| Fonts | `fonts.css` | `@font-face` rules for IBM Plex Sans and IBM Plex Mono (files from the `@fontsource` packages, which the package installs). |
+| Tokens | `tokens.css` | CSS variables with the Figma values: `--primary: #9547ff`, `--radius: .5rem`… for light (`:root`), dark (`.dark`), `.sidebar-light` and `.sidebar-surface`. Plain CSS, no Tailwind. |
+| Theme | `theme.css` | Tells Tailwind about the tokens. `@theme` makes `bg-primary`, `text-muted-foreground`, `rounded-lg`, `shadow-md`, `text-body`… `@custom-variant dark` makes `dark:` follow the `.dark` class. `@source "../"` tells Tailwind to scan the package files for class names. |
+| Base | `base.css` | Page defaults: IBM Plex Sans, 13 px body text (Figma Body/Default), border color. |
+| Animations | `tw-animate-css` | Open and close animations for menus, dialogs and sheets. |
+
+Three things follow from this:
+
+1. **Tailwind must see the package classes.** The `@source` line in `theme.css` does this
+   automatically. If the components show without styles, the import is missing or is above
+   `@import "tailwindcss"`.
+2. **Your CSS after the import wins.** A later declaration of the same variable replaces the
+   earlier one. This is how you extend and override (next section).
+3. **Your own classes and the package classes use the same scale.** `bg-primary` in your code is
+   the same violet as in the Button. `text-body` in your code is the same 13/20 text as in the
+   Input.
+
+If an app needs less, import the parts:
+
+```css
+@import "tailwindcss";
+@import "@brokenrubik/ui/tokens.css";  /* variables only */
+@import "@brokenrubik/ui/theme.css";   /* Tailwind mapping + @source */
+@import "tw-animate-css";              /* needed by the overlays */
+/* no base.css: the app keeps its own body styles */
+```
+
+`tokens.css` alone works without Tailwind (for example in a plain CSS app or in app-shell).
+
+Tailwind v3 apps cannot use this package.
+
+## Use
+
+```tsx
+import { Badge, Button, Field, FieldDescription, FieldLabel, Input, toast } from '@brokenrubik/ui';
+// or one file: import { Button } from '@brokenrubik/ui/components/button';
+
+<Button onClick={() => toast.success('Saved')}>Save changes</Button>
+<Button variant="outline" size="sm">Cancel</Button>
+<Badge tone="success">Done</Badge>
+<Field>
+  <FieldLabel htmlFor="name">Project name</FieldLabel>
+  <Input id="name" />
+  <FieldDescription>Shown on the sidebar and in links.</FieldDescription>
+</Field>
+```
+
+The components have the shadcn/ui API (the same parts, `asChild`, `data-slot`), so shadcn
+examples work. The [docs site](https://brokenrubik.github.io/ui/) shows every
+component with its code.
+
+| Figma | Code |
+| --- | --- |
+| Button, Icon Button | `Button` — `variant`: default · secondary · outline · ghost · destructive · link; `size`: default · sm · icon · icon-sm |
+| Badge | `Badge` — `tone` (or `variant`): neutral · primary · success · warning · destructive · highlight · info |
+| Avatar | `Avatar` (`size` 20 · 28), `AvatarImage`, `AvatarFallback` (`tone`); `avatarToneFor(name)` |
+| Key Chip | `Kbd` — `variant`: highlight · muted; `size` 20 · 24 |
+| Input, Textarea, Select, Date Picker | `Input` (`startIcon`), `Textarea`, `Select*`, `DatePicker` |
+| Form Field | `Field` (`invalid`, `disabled`), `FieldLabel`, `FieldDescription`, `FieldError` |
+| Checkbox, Radio, Switch | `Checkbox`, `RadioGroup` + `RadioGroupItem`, `Switch` |
+| Tab, Toggle Group | `Tabs*` (underline), `ToggleGroup` + `ToggleGroupItem` (segmented) |
+| Menu Item, Dropdown Menu | `DropdownMenu*` (item `variant="destructive"`) |
+| Tooltip, Popover | `Tooltip*`, `Popover*` (`PopoverHeader`, `PopoverTitle`, `PopoverDescription`) |
+| Dialog (Default, Destructive) | `Dialog*`, `AlertDialog*` (`AlertDialogAction variant="destructive"`) |
+| Sheet, Command | `Sheet*` (`side`), `Command*`, `CommandDialog` |
+| Alert, Toast | `Alert` (`tone`, default icon per tone), `Toaster` + `toast()` |
+| Card, Empty State | `Card*`, `EmptyState*` |
+| Progress, Skeleton, Separator | `Progress` (`tone`), `Skeleton`, `Separator` |
+| Calendar, Pagination, Accordion | `Calendar`, `Pagination*`, `Accordion*` |
+
+**`tone` and `variant`.** Figma calls the color of Badge, Alert, Progress and Avatar "Tone";
+shadcn calls it `variant`. These components accept both names. `variant` also accepts the
+shadcn values: `<Badge variant="secondary">` is the neutral badge, and `<Alert variant="default">`
+is the info alert. If you set both props, `tone` wins.
+
+## Extend and override
+
+Put your changes **after** the package import. From the smallest change to the largest:
+
+1. **Change a token.** Every component follows.
+
+   ```css
+   @import "tailwindcss";
+   @import "@brokenrubik/ui/styles.css";
+
+   :root { --radius: 0.375rem; }   /* all corners, from one value */
+   .dark { --primary: #a78bfa; }
+   ```
+
+2. **Add tokens and utilities** in your own `@theme` block.
+
+   ```css
+   @theme {
+     --color-brand-timma: #c2581c;   /* gives bg-brand-timma, text-brand-timma, border-brand-timma… */
+     --text-hero: 40px;              /* gives text-hero */
+     --text-hero--line-height: 48px;
+   }
+   ```
+
+   If you add a `text-*` size, also make a `cn` that knows it (see the rule about `cn` below):
+
+   ```ts
+   // lib/utils.ts
+   import { createCn } from '@brokenrubik/ui';
+   export const cn = createCn({ extend: { theme: { text: ['hero'] } } });
+   ```
+
+3. **Change one use** with `className`. The last class wins: `<Button className="h-9 px-4">`.
+
+4. **Use the styles on another element.** Each component exports its recipe
+   (`buttonVariants`, `badgeVariants`, `alertVariants`, `kbdVariants`…) and the shared class
+   strings (`controlClassName`, `menuItemClassName`, `menuContentClassName`, `overlayClassName`).
+
+   ```tsx
+   <Link className={buttonVariants({ variant: 'outline', size: 'sm' })} href="/">Home</Link>
+   ```
+
+5. **A new variant for one app.** Wrap the package component in the app:
+
+   ```tsx
+   // components/ui/button.tsx (in the app)
+   import { Button as BaseButton, cn, type ButtonProps } from '@brokenrubik/ui';
+
+   export function Button({ variant, className, ...props }: Omit<ButtonProps, 'variant'> & { variant?: ButtonProps['variant'] | 'brand' }) {
+     if (variant === 'brand') return <BaseButton className={cn('bg-brand-timma text-white hover:bg-brand-timma/90', className)} {...props} />;
+     return <BaseButton variant={variant} className={className} {...props} />;
+   }
+   ```
+
+   When a second app needs the same variant, add it to Figma and to this package.
+
+## Adopt in an existing app
+
+1. `pnpm add @brokenrubik/ui`.
+2. In `globals.css`, remove the token blocks (`:root`, `.dark`, `.sidebar-light`,
+   `.sidebar-surface`, `@theme inline`) and add `@import "@brokenrubik/ui/styles.css";` after
+   `@import "tailwindcss";`. Keep only the tokens that belong to the app, after the import.
+3. Remove the app's IBM Plex setup (`next/font` IBM Plex in `layout.tsx`, `@fontsource`
+   imports and packages, Google Fonts `<link>`). The package loads the fonts.
+4. Replace `cn` in `lib/utils.ts` with `export { cn } from '@brokenrubik/ui';`.
+5. Replace the `components/ui/*` imports with `@brokenrubik/ui`, one component at a time. Keep
+   an app file only for a real app variant (step 5 above).
+6. Replace `import { toast } from 'sonner'` with `import { toast } from '@brokenrubik/ui'`.
+7. Check light, dark, light sidebar and phone width against Figma.
+
+The differences that each app has today: [docs/figma-vs-tailwind.md › Drift](docs/figma-vs-tailwind.md#7-drift-found-in-the-apps-2026-11-09).
+
+## Rules that prevent bugs
+
+- **Use the package `cn`.** The Figma text styles are classes such as `text-body`. A plain
+  shadcn `cn` thinks that `text-body` is a color and removes it when you also write a color
+  (`cn('text-body', 'text-muted-foreground')`). The package `cn` knows the names.
+- **Import `toast` from `@brokenrubik/ui`.** A `toast` from another copy of `sonner` does not
+  reach the package `<Toaster />`.
+- **Never use `primary` for text.** Use `text-primary-strong`. `primary` is for fills.
+- **Lime (`highlight`) means "you are here" only.** Do not use it for status.
+
+## Contribute
+
+See [CONTRIBUTING.md](CONTRIBUTING.md): set up, add or change a component, the visual test
+against Figma, and releases. AI agents: read [AGENTS.md](AGENTS.md).
+
+Releases and their notes: [GitHub releases](https://github.com/BrokenRubik/ui/releases). Requests for the Figma file: [docs/design-handoff.md](docs/design-handoff.md).

package/dist/components/accordion.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+/**
+ * Figma: Components · Base › Accordion Item (2085:277). Bottom border; trigger 12 px
+ * vertical padding, Body/Default Medium, muted chevron; content Body/Default muted, 12 px
+ * bottom padding.
+ */
+declare function Accordion(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 };
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAK3D;;;;GAIG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAE7E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAQnG;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAgBzD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAUzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/accordion.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+/**
+ * Figma: Components · Base › Accordion Item (2085:277). Bottom border; trigger 12 px
+ * vertical padding, Body/Default Medium, muted chevron; content Body/Default muted, 12 px
+ * bottom padding.
+ */
+function Accordion(props) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b border-border', className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('flex flex-1 items-center justify-between gap-4 py-3 text-left text-body font-medium text-foreground transition-all outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "overflow-hidden text-body text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn('pb-3', className), children: children }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC;;;;GAIG;AACH,SAAS,SAAS,CAAC,KAA2D;IAC5E,OAAO,KAAC,kBAAkB,CAAC,IAAI,iBAAW,WAAW,KAAK,KAAK,GAAI,CAAC;AACtE,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwD;IAClG,OAAO,CACL,KAAC,kBAAkB,CAAC,IAAI,iBACZ,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACgD;IACxD,OAAO,CACL,KAAC,kBAAkB,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACzC,MAAC,kBAAkB,CAAC,OAAO,iBACf,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CACX,sRAAsR,EACtR,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,KAAC,eAAe,IAAC,SAAS,EAAC,6FAA6F,GAAG,IAChG,GACH,CAC7B,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACgD;IACxD,OAAO,CACL,KAAC,kBAAkB,CAAC,OAAO,iBACf,mBAAmB,EAC7B,SAAS,EAAC,mIAAmI,KACzI,KAAK,YAET,cAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,GAC5B,CAC9B,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import type { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './button.js';
+/**
+ * Figma: Components · Base › Dialog, Type=Destructive (2084:160): the confirm dialog.
+ * Same chrome as Dialog, no close button; Cancel (outline) + action (default or destructive).
+ */
+declare function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<VariantProps<typeof buttonVariants>, 'variant'>): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;GAGG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,qBAEjF;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAE3F;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,qBAEzF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAQ3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAc3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE9E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ9E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,qBAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,qBAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,CAAC,qBAQrD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,qBAQ1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}

package/dist/components/alert-dialog.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+import { buttonVariants } from './button.js';
+import { overlayClassName } from './dialog.js';
+/**
+ * Figma: Components · Base › Dialog, Type=Destructive (2084:160): the confirm dialog.
+ * Same chrome as Dialog, no close button; Cancel (outline) + action (default or destructive).
+ */
+function AlertDialog(props) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger(props) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal(props) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn(overlayClassName, className), ...props }));
+}
+function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-xl border border-border bg-background p-6 text-body text-foreground shadow-lg outline-none 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 AlertDialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-header", className: cn('flex flex-col gap-1.5', className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-page-title', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-body text-muted-foreground', className), ...props }));
+}
+function AlertDialogAction({ className, variant = 'default', ...props }) {
+    return (_jsx(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: cn(buttonVariants({ variant }), className), ...props }));
+}
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: cn(buttonVariants({ variant: 'outline' }), className), ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,SAAS,WAAW,CAAC,KAA6D;IAChF,OAAO,KAAC,oBAAoB,CAAC,IAAI,iBAAW,cAAc,KAAK,KAAK,GAAI,CAAC;AAC3E,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAgE;IAC1F,OAAO,KAAC,oBAAoB,CAAC,OAAO,iBAAW,sBAAsB,KAAK,KAAK,GAAI,CAAC;AACtF,CAAC;AAED,SAAS,iBAAiB,CAAC,KAA+D;IACxF,OAAO,KAAC,oBAAoB,CAAC,MAAM,iBAAW,qBAAqB,KAAK,KAAK,GAAI,CAAC;AACpF,CAAC;AAED,SAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACkD;IAC1D,OAAO,CACL,KAAC,oBAAoB,CAAC,OAAO,iBACjB,sBAAsB,EAChC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,KACtC,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACkD;IAC1D,OAAO,CACL,MAAC,iBAAiB,eAChB,KAAC,kBAAkB,KAAG,EACtB,KAAC,oBAAoB,CAAC,OAAO,iBACjB,sBAAsB,EAChC,SAAS,EAAE,EAAE,CACX,6YAA6Y,EAC7Y,SAAS,CACV,KACG,KAAK,GACT,IACgB,CACrB,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC7E,OAAO,2BAAe,qBAAqB,EAAC,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC/G,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC7E,OAAO,CACL,2BACY,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,SAAS,CAAC,KAC9E,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACgD;IACxD,OAAO,CACL,KAAC,oBAAoB,CAAC,KAAK,iBACf,oBAAoB,EAC9B,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KACvC,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACsD;IAC9D,OAAO,CACL,KAAC,oBAAoB,CAAC,WAAW,iBACrB,0BAA0B,EACpC,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EAE4C;IACpD,OAAO,CACL,KAAC,oBAAoB,CAAC,MAAM,iBAChB,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACjD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACiD;IACzD,OAAO,CACL,KAAC,oBAAoB,CAAC,MAAM,iBAChB,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,KAC5D,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}

package/dist/components/alert.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Figma: Components · Base › Alert (2085:172). 8 px radius, 12/16 px padding, 12 px gap,
+ * 16 px icon. info = bordered on background (violet icon, muted text); the states are a
+ * tint with the -strong shade for icon, title and text.
+ */
+declare const alertVariants: (props?: ({
+    tone?: "destructive" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AlertTone = NonNullable<VariantProps<typeof alertVariants>['tone']>;
+type AlertProps = React.ComponentProps<'div'> & {
+    /** Figma "Tone". Default `info`. */
+    tone?: AlertTone | null;
+    /** shadcn name for `tone`. Also accepts `default` (→ `info`). */
+    variant?: AlertTone | 'default' | null;
+    /** The icon. Default: the tone's lucide icon from Figma. `null` = no icon. */
+    icon?: React.ReactNode;
+};
+declare function Alert({ className, tone: toneProp, variant, icon, children, ...props }: AlertProps): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps, type AlertTone };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE;;;;GAIG;AACH,QAAA,MAAM,aAAa;;8EAalB,CAAC;AASF,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9C,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IACvC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAgB1F;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7E;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/dist/components/alert.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react';
+import { resolveTone } from '../lib/tone.js';
+import { cn } from '../lib/utils.js';
+/**
+ * Figma: Components · Base › Alert (2085:172). 8 px radius, 12/16 px padding, 12 px gap,
+ * 16 px icon. info = bordered on background (violet icon, muted text); the states are a
+ * tint with the -strong shade for icon, title and text.
+ */
+const alertVariants = cva("relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-0.5 rounded-lg px-4 py-3 text-body [&>svg]:size-4", {
+    variants: {
+        tone: {
+            info: 'border border-border bg-background text-foreground [&>svg]:text-primary-strong *:data-[slot=alert-description]:text-muted-foreground',
+            success: 'bg-success-tint text-success-strong',
+            warning: 'bg-warning-tint text-warning-strong',
+            destructive: 'bg-destructive-tint text-destructive-strong',
+        },
+    },
+    defaultVariants: { tone: 'info' },
+});
+const defaultIcons = {
+    info: InfoIcon,
+    success: CircleCheckIcon,
+    warning: TriangleAlertIcon,
+    destructive: CircleAlertIcon,
+};
+function Alert({ className, tone: toneProp, variant, icon, children, ...props }) {
+    const tone = resolveTone(toneProp, variant, { default: 'info' }, 'info');
+    const DefaultIcon = defaultIcons[tone];
+    const shown = icon === undefined ? _jsx(DefaultIcon, { "aria-hidden": true }) : icon;
+    return (_jsxs("div", { "data-slot": "alert", "data-tone": tone, role: "alert", className: cn(alertVariants({ tone }), !shown && 'grid-cols-1', className), ...props, children: [shown, children] }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn('col-start-2 font-medium in-[[data-slot=alert].grid-cols-1]:col-start-1', className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn('col-start-2 text-body-sm in-[[data-slot=alert].grid-cols-1]:col-start-1 [&_p]:leading-relaxed', className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription, alertVariants };
+//# sourceMappingURL=alert.js.map

package/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC;;;;GAIG;AACH,MAAM,aAAa,GAAG,GAAG,CACvB,uHAAuH,EACvH;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,sIAAsI;YAC5I,OAAO,EAAE,qCAAqC;YAC9C,OAAO,EAAE,qCAAqC;YAC9C,WAAW,EAAE,6CAA6C;SAC3D;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;CAClC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,eAAe;IACxB,OAAO,EAAE,iBAAiB;IAC1B,WAAW,EAAE,eAAe;CACpB,CAAC;AAaX,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc;IACzF,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACzE,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,WAAW,0BAAe,CAAC,CAAC,CAAC,IAAI,CAAC;IACtE,OAAO,CACL,4BACY,OAAO,eACN,IAAI,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,IAAI,aAAa,EAAE,SAAS,CAAC,KACtE,KAAK,aAER,KAAK,EACL,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACtE,OAAO,CACL,2BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,wEAAwE,EAAE,SAAS,CAAC,KAC9F,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IAC5E,OAAO,CACL,2BACY,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAmC,CAAC"}

package/dist/components/avatar.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+/**
+ * Figma: Components · Base › Avatar (2006:62). 20 or 28 px, full radius. Initials use a
+ * soft tint per person with the -strong shade, never a solid saturated fill.
+ */
+declare const avatarVariants: (props?: ({
+    size?: 20 | 28 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const avatarFallbackVariants: (props?: ({
+    tone?: "amber" | "coral" | "emerald" | "purple" | "red" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AvatarTone = NonNullable<VariantProps<typeof avatarFallbackVariants>['tone']>;
+/** A stable tone for a person (same name → same tint), for lists without a stored tone. */
+declare function avatarToneFor(key: string): AvatarTone;
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback> & {
+    /** Figma "Tone". Default `slate`. `avatarToneFor(name)` picks a stable one per person. */
+    tone?: AvatarTone | null;
+    /** Same as `tone` (shadcn-style name). */
+    variant?: AvatarTone | null;
+};
+declare function AvatarFallback({ className, tone: toneProp, variant, ...props }: AvatarFallbackProps): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, avatarFallbackVariants, avatarToneFor, type AvatarTone, type AvatarFallbackProps, };
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD;;;GAGG;AACH,QAAA,MAAM,cAAc;;8EAQlB,CAAC;AAEH,QAAA,MAAM,sBAAsB;;8EAe3B,CAAC;AAEF,KAAK,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAInF,2FAA2F;AAC3F,iBAAS,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAI9C;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBASzF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQ/F;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,GAAG;IACjF,0FAA0F;IAC1F,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,qBAU5F;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,KAAK,UAAU,EACf,KAAK,mBAAmB,GACzB,CAAC"}

package/dist/components/avatar.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { resolveTone } from '../lib/tone.js';
+import { cn } from '../lib/utils.js';
+/**
+ * Figma: Components · Base › Avatar (2006:62). 20 or 28 px, full radius. Initials use a
+ * soft tint per person with the -strong shade, never a solid saturated fill.
+ */
+const avatarVariants = cva('group/avatar relative flex shrink-0 overflow-hidden rounded-full', {
+    variants: {
+        size: {
+            20: 'size-5',
+            28: 'size-7',
+        },
+    },
+    defaultVariants: { size: 28 },
+});
+const avatarFallbackVariants = cva('flex size-full items-center justify-center rounded-full text-initials group-data-[size=20]/avatar:text-initials-sm', {
+    variants: {
+        tone: {
+            purple: 'bg-primary-tint text-primary-strong',
+            amber: 'bg-warning-tint text-warning-strong',
+            red: 'bg-destructive-tint text-destructive-strong',
+            emerald: 'bg-success-tint text-success-strong',
+            coral: 'bg-secondary text-secondary-foreground',
+            slate: 'bg-secondary text-secondary-foreground',
+        },
+    },
+    defaultVariants: { tone: 'slate' },
+});
+const avatarTones = ['purple', 'amber', 'red', 'emerald', 'coral', 'slate'];
+/** A stable tone for a person (same name → same tint), for lists without a stored tone. */
+function avatarToneFor(key) {
+    let hash = 0;
+    for (let i = 0; i < key.length; i++)
+        hash = (hash * 31 + key.charCodeAt(i)) | 0;
+    return avatarTones[Math.abs(hash) % avatarTones.length] ?? 'slate';
+}
+function Avatar({ className, size = 28, ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn(avatarVariants({ size }), className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full object-cover', className), ...props }));
+}
+function AvatarFallback({ className, tone: toneProp, variant, ...props }) {
+    const tone = resolveTone(toneProp, variant, {}, 'slate');
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", "data-tone": tone, className: cn(avatarFallbackVariants({ tone }), className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, avatarFallbackVariants, avatarToneFor, };
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC,kEAAkE,EAAE;IAC7F,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,QAAQ;SACb;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;CAC9B,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,GAAG,CAChC,oHAAoH,EACpH;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,MAAM,EAAE,qCAAqC;YAC7C,KAAK,EAAE,qCAAqC;YAC5C,GAAG,EAAE,6CAA6C;YAClD,OAAO,EAAE,qCAAqC;YAC9C,KAAK,EAAE,wCAAwC;YAC/C,KAAK,EAAE,wCAAwC;SAChD;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACnC,CACF,CAAC;AAIF,MAAM,WAAW,GAA0B,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAEnG,2FAA2F;AAC3F,SAAS,aAAa,CAAC,GAAW;IAChC,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE;QAAE,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC;AACrE,CAAC;AAED,SAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAI,GAAG,EAAE,EACT,GAAG,KAAK,EACgF;IACxF,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,iBACT,QAAQ,eACP,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAsD;IAC9F,OAAO,CACL,KAAC,eAAe,CAAC,KAAK,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,KAC5D,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AASD,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAuB;IAC3F,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACzD,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,iBACb,iBAAiB,eAChB,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KACtD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,aAAa,GAGd,CAAC"}

package/dist/components/badge.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Figma: Components · Base › Badge (2006:37). 20 px high, 6 px radius, Label/Caption
+ * Medium. Every tone is a soft tint with the -strong text shade ("one color, one job").
+ * Only status fields get a tone: categorical tags (country, owner…) stay neutral.
+ */
+declare const badgeVariants: (props?: ({
+    tone?: "destructive" | "highlight" | "info" | "neutral" | "primary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>['tone']>;
+type BadgeProps = React.ComponentProps<'span'> & {
+    /** Figma "Tone". Default `neutral`. */
+    tone?: BadgeTone | null;
+    /** shadcn name for `tone`. Also accepts `default`, `secondary`, `outline` (→ `neutral`). */
+    variant?: BadgeTone | 'default' | 'secondary' | 'outline' | null;
+    asChild?: boolean;
+};
+declare function Badge({ className, tone, variant, asChild, ...props }: BadgeProps): React.JSX.Element;
+export { Badge, badgeVariants, type BadgeProps, type BadgeTone };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE;;;;GAIG;AACH,QAAA,MAAM,aAAa;;8EAkBlB,CAAC;AAEF,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AASzE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAC/C,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAWjF;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,CAAC"}