@azmr/ui 0.0.1 → 0.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Alshafaraz Gazi / Azmara Technologies
+Copyright (c) 2026 Azmara Labs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,73 +1,244 @@
-# @azmr/ui
-
-React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
-
-## Install
-
-```bash
-pnpm add @azmr/ui @azmr/core react react-dom
-# or
-npm install @azmr/ui @azmr/core react react-dom
-```
-
-## Grid
-
-```tsx
-import { Signal } from "@azmr/core";
-import { Grid } from "@azmr/ui";
-
-const customers = new Signal([
-  { name: "Aroha", balance: 150 },
-  { name: "Mere",  balance: 320 },
-]);
-
-function App() {
-  return (
-    <Grid
-      signal={customers}
-      labels={{ name: "Customer", balance: "Balance ($)" }}
-    />
-  );
-}
-
-// Grid updates automatically
-customers.set([...customers.peek(), { name: "Tane", balance: 0 }]);
-```
-
-## useSignal
-
-Hook to subscribe any React component to a Signal.
-
-```tsx
-import { useSignal } from "@azmr/ui";
-
-function Counter({ count }: { count: Signal<number> }) {
-  const value = useSignal(count); // push-based, no polling
-  return <span>{value}</span>;
-}
-```
-
-## Grid Props
-
-| Prop | Type | Description |
-|---|---|---|
-| `signal` | `Signal<T[]>` | Reactive data source |
-| `columns` | `(keyof T)[]` | Optional column order |
-| `labels` | `Partial<Record<keyof T, string>>` | Optional column label overrides |
-| `emptyMessage` | `string` | Message shown when Signal is empty |
-
-All cell values are rendered through React's JSX escaping — `dangerouslySetInnerHTML` is never used.
-
-## Requirements
-
-- Node.js ≥ 18
-- React 18 or 19
-- TypeScript ≥ 5 (types included)
-
-## Documentation
-
-Full docs at [docs.azmara.io](https://docs.azmara.io)
-
-## License
-
-MIT © [Azmara Technologies](https://azmara.io)
+# @azmr/ui
+
+React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
+
+## Install
+
+```bash
+pnpm add @azmr/ui @azmr/core react react-dom
+# or
+npm install @azmr/ui @azmr/core react react-dom
+```
+
+`@azmr/core` is a **peer dependency**: install it yourself so your app and `@azmr/ui` share one copy (two copies give incompatible `Signal` types).
+
+## Styles and design tokens
+
+`@azmr/ui` ships the design tokens and the Tailwind v4 theme mapping in two stylesheets. In your global CSS, pick one:
+
+```css
+@import "tailwindcss";
+@import "@azmr/ui/styles.css";   /* tokens + global base rules (new app) */
+```
+
+```css
+@import "tailwindcss";
+@import "@azmr/ui/tokens.css";   /* tokens only (app that already has global styles) */
+```
+
+- **`styles.css`** is `tokens.css` plus two global base rules: the page background and text colour on `body`, and our border and outline colours as the default for every element. Use it in a new app.
+- **`tokens.css`** has the same tokens, themes, density, motion and utilities and **changes nothing outside our own classes**. Use it when the app already has global styles: another UI library mid-migration, or a documentation site. Components look right either way.
+
+- **Token names follow shadcn/ui** (`--background`, `--primary`, `--ring`, `--radius`, `--sidebar-*`, ...), so shadcn components from any registry look right next to ours. Azmara adds `--success`, `--warning`, `--info`, `--chart-1` to `--chart-8`, `--motion-*`, `--elevation-*`, `--z-*` and `--density-*`.
+- **Utilities** such as `bg-background`, `text-muted-foreground`, `rounded-lg`, `shadow-elevation-2` and `ease-standard` work out of the box. The stylesheets include an `@source` rule, so Tailwind scans the package's classes inside `node_modules`.
+- **Light and dark** use OKLCH colours with `light-dark()`. The page follows the system by default; force a mode with `class="dark"` / `class="light"` or `data-theme="dark|light"` on any ancestor. No JavaScript, no flash.
+- **Density:** set `data-density="compact"` or `"spacious"` on any ancestor to change control heights, padding and row height.
+- **Reduced motion:** with `prefers-reduced-motion: reduce`, every `--motion-duration-*` token collapses to `0.01ms` and a safety net shortens other animations. Mark genuinely essential motion with `data-motion="essential"`.
+- **Accessibility is tested:** every foreground/background token pair meets WCAG AA text contrast (4.5:1) in both modes, the focus ring and chart colours meet 3:1, and the eight chart colours stay distinguishable under protanopia, deuteranopia and tritanopia simulation.
+
+
+## Theme, density and locale
+
+**Server layout (Next.js App Router).** Read the stored preference from the cookie on the server and render it into `<html>`, so the first paint is already correct, with no inline script (works under a strict CSP):
+
+```tsx
+// app/layout.tsx
+import { cookies } from "next/headers";
+import { htmlAttributes, parseDensity, parseThemePreference, THEME_COOKIE, DENSITY_COOKIE } from "@azmr/ui/theme";
+import { LocaleProvider, ThemeProvider } from "@azmr/ui/react";
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const jar = await cookies();
+  const theme = parseThemePreference(jar.get(THEME_COOKIE)?.value);
+  const density = parseDensity(jar.get(DENSITY_COOKIE)?.value);
+  return (
+    <html lang="en-NZ" {...htmlAttributes({ theme, density })}>
+      <body>
+        <ThemeProvider defaultTheme={theme} defaultDensity={density}>
+          <LocaleProvider locale="en-NZ" currency="NZD">{children}</LocaleProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+- `system` (the default) needs no attribute and no JavaScript: the tokens use `light-dark()`, so the page follows the operating system.
+- `useTheme()` returns `{ theme, resolvedTheme, setTheme, density, setDensity }`. Changes update `<html>` immediately and are remembered in a cookie (`persist={false}` turns that off).
+- Static sites that cannot read cookies on the server can inline `themeInitScript()` instead (add your CSP nonce to the tag).
+- `createTheme({ primary, secondary, success, warning, info, destructive, radius, font, density })` turns brand colours (`#rrggbb`, `oklch(L C H)` or `{ l, c, h }`) into token overrides. Every colour option is optional and keeps its default when omitted (`destructive` is the "danger" colour). It guarantees WCAG AA in both modes, adjusting lightness where needed and keeping the hue:
+  - each `-foreground` is at least 4.5:1 on its colour, **including on a solid button's hover surface** (a button blends with the page on hover, which can pull a colour that only just passes below 4.5:1; the derivation checks the blend);
+  - `success`, `info` and `destructive` are also readable as **text** on the page and on cards (`Text tone`, form errors), and `warning` gets a separate readable `--warning-text`;
+  - the focus ring is at least 3:1.
+  Input is validated strictly because the output is CSS, and an error names the option that was wrong.
+
+```tsx
+import { createTheme } from "@azmr/ui/theme";
+const theme = createTheme({
+  primary: "#1E88E5",
+  success: "#2E7D32",
+  destructive: "#D32F2F",
+  radius: "0.5rem",
+});
+// <style>{theme.css}</style>   or   <html style={theme.cssVariables}>
+```
+
+**Locale.** `LocaleProvider` defaults to `en-NZ`, `NZD` and a Monday week start. `useLocale()` gives cached `Intl` formatters (`formatNumber`, `formatCurrency`, `formatDate`, `formatDateTime`) and the strings components show (`messages`, overridable). Date-only strings such as `2026-10-15` print that calendar day in every time zone; missing or invalid values format to an empty string instead of throwing.
+
+## Components
+
+Components read the design tokens only (no raw colours), accept `className` (merged last, so it can override defaults), forward `ref` to the real DOM element, and follow the density tokens for height and padding. Import from the root or from a subpath; subpaths and the root are both tree-shakeable.
+
+### Button
+
+```tsx
+import { Button } from "@azmr/ui/button";
+
+<Button>Save</Button>
+<Button variant="destructive" loading loadingText="Deleting">Delete</Button>
+<Button variant="outline" startIcon={<PlusIcon />}>New customer</Button>
+<Button size="icon" aria-label="Close"><XIcon /></Button>            {/* icon-only needs a name */}
+<Button nativeButton={false} render={<a href="/docs" />}>Docs</Button>   {/* renders a link */}
+```
+
+- **Variants:** `default`, `secondary`, `outline`, `ghost`, `destructive`, `success`, `warning`, `info`, `link`. **Sizes:** `sm`, `md` (follows the density token), `lg`, `icon`.
+- **`loading`:** shows a spinner, sets `aria-busy`, ignores clicks and keyboard activation, **stays focusable** (keyboard users keep their place). `loadingText` replaces the label while loading; `startIcon` is replaced by the spinner, `endIcon` stays.
+- **`type` is `"button"` by default**, so a button inside a form never submits by accident; pass `type="submit"` explicitly.
+- **Icon-only buttons are type-checked:** `size="icon"` requires `aria-label` or `aria-labelledby`.
+
+### Input
+
+```tsx
+import { Input } from "@azmr/ui/input";
+import { useForm } from "react-hook-form";
+
+const { register } = useForm();
+<label htmlFor="email">Email</label>
+<Input id="email" type="email" {...register("email")} />   {/* no Controller needed */}
+```
+
+`ref` is the real `<input>`, so `register()` works directly. Native `onChange` and the typed `onValueChange(value)` both fire. `aria-invalid="true"` styles the invalid state; focus uses a full-strength ring (WCAG 2.2 focus appearance).
+
+### Spinner
+
+`<Spinner />` is decorative; `<Spinner label="Loading customers" />` is announced as a status. It keeps spinning under `prefers-reduced-motion` because a frozen spinner reads as a hung page.
+
+## Icons
+
+`Icon` renders any icon component with consistent size, stroke, motion and accessibility. It is a **Server Component** (no hooks, no `"use client"`), so it works in `loading.tsx`, layouts and Suspense fallbacks.
+
+```tsx
+import { Icon } from "@azmr/ui/icons";
+import { Search } from "lucide-react";
+import { IconBell } from "@tabler/icons-react";   // optional: any set, or your own SVG component
+
+<Icon icon={Search} />                              {/* decorative: aria-hidden */}
+<Icon icon={Search} aria-label="Search" size="lg" /> {/* meaningful: role="img" + name */}
+<Icon icon={IconBell} strokeWidth={1.5} />
+<Icon icon={Loader} spin />                          {/* keeps spinning under reduced motion */}
+```
+
+- **Sizes:** `xs`, `sm`, `md` (default), `lg`, `xl` follow the size tokens; a number is a pixel size. `className` merges last, so `className="size-8"` wins.
+- **Accessible by default:** decorative (`aria-hidden`) unless you pass `aria-label` or `aria-labelledby`. An icon-only button is named by a labelled icon.
+- **Bring any set.** Lucide (ISC) is the default; Tabler (MIT) and your own SVG components work through the same `icon` prop with no adapter. `react-icons` is deliberately not bundled: it mixes licences and only tree-shakes through exact subpath imports.
+- **Tree-shaking is tested:** the Icon core bundles no icon at all, and an app that imports one icon bundles that icon only.
+
+**By name.** Three ways, from most to least isolated:
+
+```tsx
+// 1. The curated Lucide set, with typed names (about 60 everyday icons; Lucide's own kebab-case names)
+import { Icon } from "@azmr/ui/icons/lucide";
+<Icon name="circle-alert" />
+
+// 2. Your own typed set: nothing global, only the icons you list are bundled
+import { createIconSet } from "@azmr/ui/icons";
+export const { Icon } = createIconSet({ check: Check, "my-logo": MyLogo });
+
+// 3. A global registry for custom SVGs (names are untyped strings)
+import { registerIcons } from "@azmr/ui/icons";
+registerIcons({ "my-logo": MyLogo });   // then <Icon name="my-logo" />
+```
+
+An unknown name renders nothing and logs one development warning; it never crashes the page.
+
+**Migrating from `@mui/icons-material`.** `@azmr/ui/icons/mui-map` is plain data: `resolveMuiIcon("SearchOutlined")` returns `{ name: "Search", variant: "outlined", lucide: "search", tabler: "IconSearch" }`. It covers over 300 common Material icons, strips the `Outlined` / `Rounded` / `Sharp` / `TwoTone` variants (and the legacy `Outline` spelling older MUI versions export), maps brand icons to Tabler only (Lucide has none), and lists the common names it deliberately does not map in `unmappedMuiIcons`. Every name in it is checked by tests against the real `@mui/icons-material`, `lucide-react` and `@tabler/icons-react`. The migration codemod uses it and reports anything unmapped instead of guessing.
+
+## Entry points
+
+| Import | Contents | Directive |
+|---|---|---|
+| `@azmr/ui` | everything (`Grid`, `useSignal`, `cn`) | `"use client"` |
+| `@azmr/ui/hooks` | React hooks (`useSignal`) | `"use client"` |
+| `@azmr/ui/theme` | server-safe theme helpers: `createTheme`, cookies, `htmlAttributes`, `createLocale` | none, importable from Server Components and middleware |
+| `@azmr/ui/react` | `ThemeProvider`, `useTheme`, `LocaleProvider`, `useLocale` | `"use client"` |
+| `@azmr/ui/button` | `Button`, `buttonVariants` | `"use client"` |
+| `@azmr/ui/input` | `Input` | `"use client"` |
+| `@azmr/ui/spinner` | `Spinner` | none, importable from Server Components |
+| `@azmr/ui/icons` | `Icon`, `createIconSet`, `registerIcons` | none, importable from Server Components |
+| `@azmr/ui/icons/lucide` | `Icon` bound to the curated Lucide set, `lucideIcons` | none, importable from Server Components |
+| `@azmr/ui/icons/mui-map` | `resolveMuiIcon`, `muiIconMap`, `unmappedMuiIcons` (migration data) | none, pure data |
+| `@azmr/ui/lib` | `cn()` and other server-safe helpers | none, importable from Server Components |
+
+`cn(...classes)` merges class names and resolves conflicting Tailwind utilities, last one wins: `cn("p-2", "p-4")` → `"p-4"`.
+
+## Grid
+
+```tsx
+import { Signal } from "@azmr/core";
+import { Grid } from "@azmr/ui";
+
+const customers = new Signal([
+  { name: "Aroha", balance: 150 },
+  { name: "Mere",  balance: 320 },
+]);
+
+function App() {
+  return (
+    <Grid
+      signal={customers}
+      labels={{ name: "Customer", balance: "Balance ($)" }}
+    />
+  );
+}
+
+// Grid updates automatically
+customers.set([...customers.peek(), { name: "Tane", balance: 0 }]);
+```
+
+## useSignal
+
+Hook to subscribe any React component to a Signal.
+
+```tsx
+import { useSignal } from "@azmr/ui";
+
+function Counter({ count }: { count: Signal<number> }) {
+  const value = useSignal(count); // push-based, no polling
+  return <span>{value}</span>;
+}
+```
+
+## Grid Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `signal` | `Signal<T[]>` | Reactive data source |
+| `columns` | `(keyof T)[]` | Optional column order |
+| `labels` | `Partial<Record<keyof T, string>>` | Optional column label overrides |
+| `emptyMessage` | `string` | Message shown when Signal is empty |
+
+All cell values are rendered through React's JSX escaping — `dangerouslySetInnerHTML` is never used.
+
+## Requirements
+
+- Node.js ≥ 18
+- React 18 or 19
+- TypeScript ≥ 5 (types included)
+
+## Documentation
+
+Full docs at [docs.azmara.io](https://docs.azmara.io)
+
+## License
+
+MIT © [Azmara Labs](https://azmara.io)

package/dist/avatar.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * Up to two initials from a name: the first character of the first two words, uppercased.
+ * Counts whole characters (so a surrogate pair or an emoji is never cut in half).
+ */
+declare function getInitials(name: string): string;
+declare const SIZE: {
+    readonly sm: "size-6 text-[0.625rem]";
+    readonly md: "size-10 text-sm";
+    readonly lg: "size-14 text-base";
+    readonly xl: "size-20 text-xl";
+};
+declare const SHAPE: {
+    readonly circle: "rounded-full";
+    readonly square: "rounded-md";
+};
+type AvatarSize = keyof typeof SIZE;
+interface AvatarOwnProps {
+    /** The image. When it fails to load (or is absent) the fallback is shown. */
+    src?: string;
+    size?: AvatarSize;
+    shape?: keyof typeof SHAPE;
+    /** What to show instead of the image. Default: the initials of `name`, or a placeholder. */
+    fallback?: ReactNode;
+    /** Wait this long before showing the fallback, to avoid a flash while the image loads. */
+    delayMs?: number;
+    className?: string;
+}
+/** An avatar must say who it is, or be explicitly decorative. */
+type Identity = {
+    name: string;
+    alt?: string;
+    decorative?: boolean;
+} | {
+    alt: string;
+    name?: string;
+    decorative?: boolean;
+} | {
+    decorative: true;
+    name?: string;
+    alt?: string;
+};
+type AvatarProps = AvatarOwnProps & Identity & Omit<HTMLAttributes<HTMLSpanElement>, keyof AvatarOwnProps | "role" | "aria-label">;
+/** A person or entity as an image with initials as the fallback. Requires a name, alt or `decorative`. */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show at most this many avatars, then a `+N` for the rest. */
+    max?: number;
+    /** The accessible name of the `+N` avatar. Default `N more`. */
+    overflowLabel?: (hidden: number) => string;
+    children?: ReactNode;
+}
+/** Overlapping avatars with a labelled `+N` for the rest. */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, getInitials };

package/dist/avatar.js

@@ -0,0 +1,84 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/avatar/avatar.tsx
+import { Children, forwardRef } from "react";
+
+// src/primitives/avatar.ts
+import { Avatar } from "@base-ui/react/avatar";
+
+// src/components/avatar/avatar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = (word) => Array.from(word)[0] ?? "";
+  return words.slice(0, 2).map(first).join("").toLocaleUpperCase();
+}
+var SIZE = {
+  sm: "size-6 text-[0.625rem]",
+  md: "size-10 text-sm",
+  lg: "size-14 text-base",
+  xl: "size-20 text-xl"
+};
+var SHAPE = { circle: "rounded-full", square: "rounded-md" };
+var AvatarImpl = forwardRef(function Avatar2({
+  src,
+  name,
+  alt,
+  decorative = false,
+  size = "md",
+  shape = "circle",
+  fallback,
+  delayMs,
+  className,
+  ...props
+}, ref) {
+  const label = alt ?? name;
+  return /* @__PURE__ */ jsxs(
+    Avatar.Root,
+    {
+      ref,
+      ...decorative ? { "aria-hidden": true } : { role: "img", "aria-label": label },
+      className: cn(
+        "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground",
+        SIZE[size],
+        SHAPE[shape],
+        className
+      ),
+      ...props,
+      children: [
+        src && /* @__PURE__ */ jsx(Avatar.Image, { src, alt: "", className: "aspect-square size-full object-cover" }),
+        /* @__PURE__ */ jsx(Avatar.Fallback, { delay: delayMs, "aria-hidden": "true", children: fallback ?? (name ? getInitials(name) : "?") })
+      ]
+    }
+  );
+});
+var Avatar3 = AvatarImpl;
+var AvatarGroup = forwardRef(function AvatarGroup2({ max, overflowLabel = (n) => `${n} more`, className, children, ...props }, ref) {
+  const all = Children.toArray(children);
+  const visible = max === void 0 ? all : all.slice(0, Math.max(0, max));
+  const hidden = all.length - visible.length;
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a fieldset groups form controls; this groups images
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn("flex -space-x-2 [&>*]:ring-2 [&>*]:ring-background", className),
+        ...props,
+        children: [
+          visible,
+          hidden > 0 && /* @__PURE__ */ jsx(Avatar3, { alt: overflowLabel(hidden), fallback: `+${hidden}` })
+        ]
+      }
+    )
+  );
+});
+export {
+  Avatar3 as Avatar,
+  AvatarGroup,
+  getInitials
+};

package/dist/breadcrumb.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, LiHTMLAttributes, AnchorHTMLAttributes, ReactElement, OlHTMLAttributes } from 'react';
+
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** The landmark's name. Default "Breadcrumb"; change it for translation, or with two trails on a page. */
+    label?: string;
+}
+/** A navigation landmark holding the trail. Server-safe. */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: react.ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & react.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Render your router's `Link` instead of an `<a>`: `render={<NextLink href="/x" />}`. */
+    render?: ReactElement;
+}
+declare const BreadcrumbLink: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+/** Where you are. Plain text, not a link, marked `aria-current="page"`. */
+declare const BreadcrumbPage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+/** The mark between items. Decorative: hidden from assistive technology. A chevron by default. */
+declare function BreadcrumbSeparator({ children, className, ...props }: HTMLAttributes<HTMLLIElement>): react.JSX.Element;
+/** Stands for items left out of a long trail. For a menu of the hidden pages, wrap it in a `DropdownMenu`. */
+declare function BreadcrumbEllipsis({ label, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    label?: string;
+}): react.JSX.Element;
+interface BreadcrumbEntry {
+    label: ReactNode;
+    /** Where the item links. The last item is always shown as the current page, whatever it has. */
+    href?: string;
+}
+interface BreadcrumbsProps extends Omit<BreadcrumbProps, "children"> {
+    items: readonly BreadcrumbEntry[];
+    /**
+     * Collapse a longer trail: keep the first item, an ellipsis, and the last items, `maxItems` in all
+     * (the ellipsis counts as one). Default: never collapse.
+     */
+    maxItems?: number;
+    /** Replace the chevron between items. */
+    separator?: ReactNode;
+    /** Render your router's `Link`: `renderLink={(href) => <NextLink href={href} />}`. */
+    renderLink?: (href: string) => ReactElement;
+    /** The ellipsis's spoken name. Default "More pages". */
+    ellipsisLabel?: string;
+}
+/** A trail from data. Built from the parts above; use those directly for custom layouts. */
+declare function Breadcrumbs({ items, maxItems, separator, renderLink, ellipsisLabel, ...props }: BreadcrumbsProps): react.JSX.Element | null;
+
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbsProps };

package/dist/breadcrumb.js

@@ -0,0 +1,120 @@
+import {
+  renderElement
+} from "./chunk-LTOLV67A.js";
+import {
+  Icon
+} from "./chunk-Q4PPM2SU.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/breadcrumb/breadcrumb.tsx
+import { ChevronRight, Ellipsis } from "lucide-react";
+import {
+  Fragment,
+  forwardRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Breadcrumb = forwardRef(function Breadcrumb2({ label = "Breadcrumb", ...props }, ref) {
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, ...props });
+});
+var BreadcrumbList = forwardRef(
+  function BreadcrumbList2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var BreadcrumbItem = forwardRef(
+  function BreadcrumbItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props });
+  }
+);
+var LINK = "rounded-sm text-muted-foreground transition-colors duration-(--motion-duration-fast) hover:text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+var BreadcrumbLink = forwardRef(
+  function BreadcrumbLink2({ render, className, children, ...props }, ref) {
+    return renderElement(render, "a", { ref, ...props, className: cn(LINK, className) }, children);
+  }
+);
+var BreadcrumbPage = forwardRef(
+  function BreadcrumbPage2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-current": "page",
+        className: cn("font-medium text-foreground", className),
+        ...props
+      }
+    );
+  }
+);
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      "data-azmr-separator": "",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  label = "More pages",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex size-9 items-center justify-center", className), ...props, children: [
+    /* @__PURE__ */ jsx(Icon, { icon: Ellipsis }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+  ] });
+}
+function Breadcrumbs({
+  items,
+  maxItems,
+  separator,
+  renderLink,
+  ellipsisLabel,
+  ...props
+}) {
+  if (items.length === 0) return null;
+  const collapse = maxItems !== void 0 && items.length > Math.max(maxItems, 2);
+  const lastCount = Math.max(1, (maxItems ?? 0) - 2);
+  const visible = collapse ? [items[0], "ellipsis", ...items.slice(items.length - lastCount)] : [...items];
+  return /* @__PURE__ */ jsx(Breadcrumb, { ...props, children: /* @__PURE__ */ jsx(BreadcrumbList, { children: visible.map((entry, index) => {
+    const isLast = index === visible.length - 1;
+    return (
+      // The position is the identity: the list is static and never reordered.
+      // biome-ignore lint/suspicious/noArrayIndexKey: static, never reordered
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: entry === "ellipsis" ? /* @__PURE__ */ jsx(BreadcrumbEllipsis, { label: ellipsisLabel }) : isLast ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: entry.label }) : entry.href ? /* @__PURE__ */ jsx(BreadcrumbLink, { href: entry.href, render: renderLink?.(entry.href), children: entry.label }) : /* @__PURE__ */ jsx("span", { children: entry.label }) }),
+        !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator })
+      ] }, index)
+    );
+  }) }) });
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Breadcrumbs
+};