@sableui/react 0.6.2 → 0.7.1

package/dist/blocks/invite-team-block.js

@@ -0,0 +1,36 @@
+// src/blocks/invite-team-block.tsx
+import { Avatar, AvatarGroup } from "../components/avatar/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Input } from "../components/input/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var collaborators = ["MO", "SR", "JL", "AK"];
+function InviteTeamBlock({ className, framed = true, onSend }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Invite your team" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Collaborators can edit every project." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx(AvatarGroup, { "aria-label": `${collaborators.length} collaborators`, size: "sm", surface: framed ? "card" : void 0, children: collaborators.map((initials) => /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: initials, alt: initials }, initials)) }),
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex gap-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            onSend?.(String(new FormData(event.currentTarget).get("email") ?? ""));
+          },
+          children: [
+            /* @__PURE__ */ jsx(Input, { name: "email", type: "email", placeholder: "name@company.com", "aria-label": "Email address" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", children: "Send" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  InviteTeamBlock
+};

package/dist/blocks/invite-team-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/invite-team-block.meta.ts
+var inviteTeamBlockMeta = {
+  name: "InviteTeamBlock",
+  family: "Settings & team",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "An invite card: who is already on the team as an AvatarGroup, and an email field with Send.",
+  intent: "Reach for this for team or project invites in onboarding, an empty workspace, or a settings section. For managing an existing member list with roles, use a CardList of Entity rows instead.",
+  notes: [
+    "The field and Send are a <form>, so Enter sends; `onSend` receives the typed address.",
+    "The AvatarGroup ring matches the card surface when framed and inherits the host surface when not."
+  ],
+  a11y: [
+    "The AvatarGroup carries an aria-label with the count, so the stack reads as one item, not four initials.",
+    "The email Input carries aria-label; there is no visible label in this compact layout."
+  ]
+};
+export {
+  inviteTeamBlockMeta
+};

package/dist/blocks/invoice-history-block.js

@@ -0,0 +1,41 @@
+// src/blocks/invoice-history-block.tsx
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/table/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var invoices = [
+  { id: "INV-0042", date: "Oct 1, 2026", plan: "Studio \xB7 yearly", amount: "$192.00", status: "Paid" },
+  { id: "INV-0031", date: "Sep 1, 2026", plan: "Studio \xB7 monthly", amount: "$20.00", status: "Paid" },
+  { id: "INV-0027", date: "Aug 1, 2026", plan: "Studio \xB7 monthly", amount: "$20.00", status: "Refunded" },
+  { id: "INV-0019", date: "Jul 1, 2026", plan: "Starter", amount: "$0.00", status: "Paid" }
+];
+function InvoiceHistoryBlock({ className, framed = true, onDownload }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-2xl", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Invoices" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Sent to billing@studio.com on the 1st of each month." })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { flush: true, className: "overflow-x-auto scrollbar-quiet", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: "Date" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Plan" }),
+        /* @__PURE__ */ jsx(TableHead, { numeric: true, children: "Amount" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-0", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Download" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: invoices.map((invoice) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "whitespace-nowrap", children: invoice.date }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground", children: invoice.plan }),
+        /* @__PURE__ */ jsx(TableCell, { numeric: true, children: invoice.amount }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: invoice.status === "Paid" ? "success" : "neutral", dot: true, children: invoice.status }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Download ${invoice.id}`, onClick: () => onDownload?.(invoice.id), children: /* @__PURE__ */ jsx(Icon, { name: "download" }) }) })
+      ] }, invoice.id)) })
+    ] }) })
+  ] });
+}
+export {
+  InvoiceHistoryBlock
+};

package/dist/blocks/invoice-history-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/invoice-history-block.meta.ts
+var invoiceHistoryBlockMeta = {
+  name: "InvoiceHistoryBlock",
+  family: "Commerce",
+  kind: "card",
+  width: { min: "20rem", max: "42rem" },
+  summary: "A billing history card: a flush Table of date, plan, amount and status per invoice, with a download button on each row.",
+  intent: "Reach for this in billing settings, under the current plan. For a long, filterable history (hundreds of rows, date ranges, export), use DataTable on its own page.",
+  notes: [
+    "The table runs edge to edge (CardContent flush); its first and last columns still line up with the card header's padding.",
+    "Amounts are a numeric column \u2014 right-aligned with tabular figures \u2014 so they compare by eye.",
+    "On a narrow screen the table scrolls sideways inside the card (with a quiet scrollbar) rather than squeezing its columns."
+  ],
+  a11y: [
+    'The download column has a screen-reader-only header, and each button names its invoice ("Download INV-0042").',
+    "Status is text in a Badge; the dot's colour only reinforces it."
+  ]
+};
+export {
+  invoiceHistoryBlockMeta
+};

package/dist/blocks/kpi-sparkline-block.js

@@ -0,0 +1,29 @@
+// src/blocks/kpi-sparkline-block.tsx
+import { Badge } from "../components/badge/index.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Sparkline } from "../components/sparkline/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { Grid } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var kpis = [
+  { label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, trend: [12, 14, 13, 17, 16, 19, 18, 21, 20, 24, 23, 26], tone: "success" },
+  { label: "Active users", value: "3,912", delta: "+3.1%", up: true, trend: [30, 31, 29, 33, 34, 33, 36, 35, 37, 38, 37, 39], tone: "info" },
+  { label: "Churn", value: "4.1%", delta: "\u22120.6%", up: false, trend: [9, 8, 9, 7, 8, 6, 7, 5, 6, 4, 5, 4], tone: "warning" }
+];
+function KpiSparklineBlock({ className }) {
+  return /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 3 }, gap: 3, className: cn("w-full", className), children: kpis.map((kpi) => /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardDescription, { children: kpi.label }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: kpi.value }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Sparkline, { label: `${kpi.label}, last 12 weeks`, data: [...kpi.trend], variant: "area", tone: kpi.tone }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Badge, { tone: kpi.up ? "success" : "neutral", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: kpi.up ? "arrow-up" : "arrow-down" }), children: [
+      kpi.delta,
+      " vs last quarter"
+    ] }) })
+  ] }, kpi.label)) });
+}
+export {
+  KpiSparklineBlock
+};

package/dist/blocks/kpi-sparkline-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/kpi-sparkline-block.meta.ts
+var kpiSparklineBlockMeta = {
+  name: "KpiSparklineBlock",
+  family: "Dashboard",
+  kind: "section",
+  summary: "A KPI row with trends: three stat cards, each the value in the metric mono tier, a Sparkline of its last twelve weeks, and the change as a Badge.",
+  intent: "Reach for this at the top of a dashboard or a landing page's proof section, where each number needs its recent shape. Without the trend, StatRowBlock is calmer; for one headline trend, TrafficTrendBlock.",
+  notes: [
+    "Each sparkline is coloured by what its measure is, and the change Badge by whether it is good: churn falling is good news in a warning-toned trend.",
+    "The sparklines draw on as the row scrolls into view.",
+    "One column on a phone, three from sm."
+  ],
+  a11y: [
+    "Each Sparkline is an image named by the measure and the period, with its range spoken.",
+    "The change is stated in text (+8.2% vs last quarter) with an arrow icon; colour only reinforces it."
+  ]
+};
+export {
+  kpiSparklineBlockMeta
+};

package/dist/blocks/media-player-block.js

@@ -0,0 +1,68 @@
+// src/blocks/media-player-block.tsx
+import { useState } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent } from "../components/card/index.js";
+import { Entity } from "../components/entity/index.js";
+import { MediaImage } from "../components/media-image/index.js";
+import { Slider } from "../components/slider/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var track = { title: "Low tide, high noon", artist: "Juno Avery", cover: "", duration: 220, position: 84 };
+function formatTime(seconds) {
+  return `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`;
+}
+function MediaPlayerBlock({ className, framed = true, onPlayingChange, onPrevious, onNext }) {
+  const [playing, setPlaying] = useState(true);
+  const [position, setPosition] = useState(track.position);
+  return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      Entity,
+      {
+        className: "p-0",
+        leading: /* @__PURE__ */ jsx(MediaImage, { src: track.cover, seed: track.title, className: "size-14 shrink-0 rounded-md" }),
+        title: track.title,
+        subtitle: track.artist,
+        action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Like", children: /* @__PURE__ */ jsx(Icon, { name: "heart" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          value: position,
+          max: track.duration,
+          onValueChange: setPosition,
+          "aria-label": "Position",
+          getAriaValueText: (_, value) => `${formatTime(value)} of ${formatTime(track.duration)}`
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-mono-caption text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: formatTime(position) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "-",
+          formatTime(track.duration - position)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous", onClick: onPrevious, children: /* @__PURE__ */ jsx(Icon, { name: "previous", variant: "solid" }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          "aria-label": playing ? "Pause" : "Play",
+          onClick: () => {
+            setPlaying(!playing);
+            onPlayingChange?.(!playing);
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", variant: "solid" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next", onClick: onNext, children: /* @__PURE__ */ jsx(Icon, { name: "next", variant: "solid" }) })
+    ] })
+  ] }) });
+}
+export {
+  MediaPlayerBlock
+};

package/dist/blocks/media-player-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/media-player-block.meta.ts
+var mediaPlayerBlockMeta = {
+  name: "MediaPlayerBlock",
+  family: "Media & files",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A now-playing card: cover, title and artist as an Entity with a Like action, a position Slider with elapsed and remaining time, and previous / play-pause / next.",
+  intent: "Reach for this for audio or video playback controls outside the media itself \u2014 a mini player, a podcast card, a preview in a feed. Playback over the video frame is the Video component's own chrome.",
+  notes: [
+    "Play/pause is the one filled control, centred between two ghost skips.",
+    "Times are `text-mono-caption`, so the digits do not shift as they count.",
+    "The cover is painted from the palette as a placeholder; swap it for the real artwork."
+  ],
+  a11y: [
+    "Every icon-only Button carries aria-label, and play/pause's label follows its state.",
+    'The Slider carries aria-label="Position". Give it aria-valuetext in your player ("1:24 of 3:40") so the position is read as time, not a percentage.'
+  ]
+};
+export {
+  mediaPlayerBlockMeta
+};

package/dist/blocks/newsletter-block.js

@@ -0,0 +1,35 @@
+// src/blocks/newsletter-block.tsx
+import { useId } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Input } from "../components/input/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var newsletter = { title: "The Cove digest", body: "One note a month on trusted workflows and product releases." };
+function NewsletterBlock({ className, framed = true, onSubscribe }) {
+  const emailId = useId();
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-sm", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: newsletter.title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: newsletter.body })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "grid gap-2 sm:grid-cols-[1fr_auto]",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSubscribe?.(String(new FormData(event.currentTarget).get("email") ?? ""));
+        },
+        children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: emailId, className: "sr-only", children: "Work email" }),
+          /* @__PURE__ */ jsx(Input, { id: emailId, name: "email", type: "email", autoComplete: "email", placeholder: "you@company.com", required: true }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full sm:w-auto", children: "Subscribe" })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  NewsletterBlock
+};

package/dist/blocks/newsletter-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/newsletter-block.meta.ts
+var newsletterBlockMeta = {
+  name: "NewsletterBlock",
+  family: "Marketing",
+  kind: "card",
+  width: { min: "18rem", max: "24rem" },
+  summary: "A newsletter sign-up card: the list's name, what it sends and how often, and an email field with Subscribe.",
+  intent: "Reach for this in a footer, at the end of an article, or beside a changelog. Creating an account is SignUpBlock; inviting a teammate is InviteTeamBlock.",
+  notes: [
+    "Copied from the BrandLandingPage page shell's footer.",
+    "The description says how often mail arrives \u2014 the one thing people want to know before they subscribe.",
+    "The field and button sit side by side from sm up and stack on a phone, where the button goes full width."
+  ],
+  a11y: [
+    "The input has a real (visually hidden) <label>, not just a placeholder.",
+    "The CardTitle renders an h2, so the sign-up is reachable by heading in a footer."
+  ]
+};
+export {
+  newsletterBlockMeta
+};

package/dist/blocks/not-found-block.js

@@ -0,0 +1,27 @@
+// src/blocks/not-found-block.tsx
+import { Button } from "../components/button/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { Region, Row, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var notFound = {
+  code: "404",
+  title: "This page isn't here",
+  body: "It may have moved, or the link may be mistyped. Check the address, or head back to somewhere you know.",
+  home: { label: "Go home", href: "/" },
+  help: { label: "Search the docs", href: "/docs" }
+};
+function NotFoundBlock({ className }) {
+  return /* @__PURE__ */ jsx(Region, { as: "section", max: "form", className: cn("w-full py-16 sm:py-24", className), children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-mono-md text-muted-foreground", children: notFound.code }),
+    /* @__PURE__ */ jsx("h1", { className: "text-balance text-heading-1", children: notFound.title }),
+    /* @__PURE__ */ jsx("p", { className: "text-pretty text-body-md text-muted-foreground", children: notFound.body }),
+    /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", wrap: true, className: "pt-2", children: [
+      /* @__PURE__ */ jsx(Button, { iconStart: /* @__PURE__ */ jsx(Icon, { name: "home" }), render: /* @__PURE__ */ jsx("a", { href: notFound.home.href }), children: notFound.home.label }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", iconStart: /* @__PURE__ */ jsx(Icon, { name: "search" }), render: /* @__PURE__ */ jsx("a", { href: notFound.help.href }), children: notFound.help.label })
+    ] })
+  ] }) });
+}
+export {
+  NotFoundBlock
+};

package/dist/blocks/not-found-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/not-found-block.meta.ts
+var notFoundBlockMeta = {
+  name: "NotFoundBlock",
+  family: "System",
+  kind: "section",
+  summary: "A not-found page body: the status code in mono, a plain-language h1, what probably happened, and two ways on \u2014 home and search.",
+  intent: "Reach for this as the body of a 404 route. An empty list or a search with no results inside a working page is EmptyState, not this.",
+  notes: [
+    "The heading says what happened in words; the code is a small mono label for people who look for it.",
+    "Two ways on, one primary. Never a dead end with only the browser's back button.",
+    "Capped at the `form` region width, so the short message stays a tight, centred column."
+  ],
+  a11y: [
+    "It renders the page's h1 \u2014 use it as the route's main content, inside <main>.",
+    "Both actions are links styled as Buttons, because they navigate."
+  ]
+};
+export {
+  notFoundBlockMeta
+};

package/dist/blocks/notification-list-block.js

@@ -0,0 +1,32 @@
+// src/blocks/notification-list-block.tsx
+import { Avatar } from "../components/avatar/index.js";
+import { Card, CardList } from "../components/card/index.js";
+import { Entity } from "../components/entity/index.js";
+import { StatusDot } from "../components/status-dot/index.js";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var notifications = [
+  { initials: "MO", name: "Mara Okafor", what: "collected your edition", when: "2m", unread: true },
+  { initials: "SR", name: "Sam Rivera", what: "left a comment on Dusk", when: "1h", unread: false }
+];
+function NotificationListBlock({ className, framed = true }) {
+  return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: /* @__PURE__ */ jsx(CardList, { children: notifications.map((n) => /* @__PURE__ */ jsx(
+    Entity,
+    {
+      leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: n.initials, alt: n.name }),
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        n.name,
+        n.unread ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (unread)" }) : null
+      ] }),
+      subtitle: n.what,
+      action: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-caption text-muted-foreground", children: [
+        n.unread ? /* @__PURE__ */ jsx(StatusDot, { tone: "info" }) : null,
+        n.when
+      ] })
+    },
+    n.name
+  )) }) });
+}
+export {
+  NotificationListBlock
+};

package/dist/blocks/notification-list-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/notification-list-block.meta.ts
+var notificationListBlockMeta = {
+  name: "NotificationListBlock",
+  family: "Social & messaging",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "An activity list: Entity rows with the actor's Avatar, who did what, and a compact time with an unread StatusDot.",
+  intent: "Reach for this for a notifications popover, a recent-activity card or an inbox preview. A full inbox with selection and bulk actions is a ListDetailPage.",
+  notes: [
+    "Rows are Card + CardList + Entity, inset from the card's padding at any density.",
+    "Unread is a quiet info dot before the time, so the times keep one right edge \u2014 the list stays calm when most items are unread.",
+    "framed={false} drops the surface for a Popover, which already is one."
+  ],
+  a11y: [
+    'The unread dot is decorative; each unread row also carries a screen-reader-only "(unread)" after the name.',
+    "Each Avatar's alt is the actor's name."
+  ]
+};
+export {
+  notificationListBlockMeta
+};

package/dist/blocks/notification-settings-block.js

@@ -0,0 +1,25 @@
+// src/blocks/notification-settings-block.tsx
+import { Card, CardList } from "../components/card/index.js";
+import { Entity } from "../components/entity/index.js";
+import { Switch } from "../components/switch/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var preferences = [
+  { id: "email", title: "Email notifications", detail: "Replies and mentions", on: true },
+  { id: "push", title: "Push notifications", detail: "On this device", on: false },
+  { id: "digest", title: "Weekly digest", detail: "Every Monday", on: true }
+];
+function NotificationSettingsBlock({ className, framed = true, onChange }) {
+  return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: /* @__PURE__ */ jsx(CardList, { children: preferences.map((p) => /* @__PURE__ */ jsx(
+    Entity,
+    {
+      title: p.title,
+      subtitle: p.detail,
+      action: /* @__PURE__ */ jsx(Switch, { defaultChecked: p.on, "aria-label": p.title, onCheckedChange: (on) => onChange?.(p.id, on) })
+    },
+    p.id
+  )) }) });
+}
+export {
+  NotificationSettingsBlock
+};

package/dist/blocks/notification-settings-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/notification-settings-block.meta.ts
+var notificationSettingsBlockMeta = {
+  name: "NotificationSettingsBlock",
+  family: "Settings & team",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A preferences card: Entity rows in a CardList, each with a title, a one-line detail and a Switch that applies instantly.",
+  intent: "Reach for this for any short list of on/off preferences \u2014 notifications, privacy, feature flags in a settings section. For a full settings route with a section rail, start from the SettingsPage page shell.",
+  notes: [
+    "Switches apply the moment they change; never pair them with a Save button. `onChange` receives the row id and the new state.",
+    "Rows are Card + CardList + Entity, so they inset with the card's padding at any density."
+  ],
+  a11y: [
+    "Each Switch takes its row title as aria-label, since the Entity title is not a <label>.",
+    "Keep details to one line \u2014 Entity truncates its subtitle."
+  ]
+};
+export {
+  notificationSettingsBlockMeta
+};

package/dist/blocks/order-tracking-block.js

@@ -0,0 +1,26 @@
+// src/blocks/order-tracking-block.tsx
+import { Badge } from "../components/badge/index.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Stepper, StepperItem } from "../components/stepper/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var order = { number: "Order #2048", item: "Gicl\xE9e print, 18 \xD7 24 in", status: "In transit", current: 2 };
+var steps = [
+  { title: "Order placed", detail: "Oct 9, 10:14 AM" },
+  { title: "Printed and packed", detail: "Oct 10, 4:02 PM" },
+  { title: "Out for delivery", detail: "Arriving today by 6 PM" },
+  { title: "Delivered", detail: void 0 }
+];
+function OrderTrackingBlock({ className, framed = true }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: order.number }),
+      /* @__PURE__ */ jsx(CardDescription, { children: order.item }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "warning", size: "sm", children: order.status }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Stepper, { orientation: "vertical", indicator: "dot", current: order.current, "aria-label": "Delivery status", children: steps.map((step) => /* @__PURE__ */ jsx(StepperItem, { title: step.title, description: step.detail }, step.title)) }) })
+  ] });
+}
+export {
+  OrderTrackingBlock
+};

package/dist/blocks/order-tracking-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/order-tracking-block.meta.ts
+var orderTrackingBlockMeta = {
+  name: "OrderTrackingBlock",
+  family: "Commerce",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "An order status card: order number, item and a status Badge in the header over a vertical dot Stepper of delivery milestones.",
+  intent: "Reach for this for anything that moves through known stages \u2014 a delivery, an application, a review, a deployment. For an open-ended activity log, use a list of Entity rows with timestamps instead.",
+  notes: [
+    "The Stepper's `current` is the step under way; finished steps show their timestamp and future steps show none.",
+    "The status Badge restates the current stage in one word so the card scans without reading the steps."
+  ],
+  a11y: [
+    'The Stepper is labelled "Delivery status" and marks the current step for assistive tech.',
+    "The Badge's tone is backed by its text; colour alone never carries the status."
+  ]
+};
+export {
+  orderTrackingBlockMeta
+};

package/dist/blocks/pricing-card-block.js

@@ -0,0 +1,46 @@
+// src/blocks/pricing-card-block.tsx
+import { useState } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent } from "../components/card/index.js";
+import { Toggle, ToggleGroup } from "../components/toggle/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var plan = {
+  monthly: { price: "$20", note: "Billed monthly. Cancel anytime." },
+  yearly: { price: "$16", note: "Billed $192 yearly. You save 20%." },
+  features: ["Unlimited projects", "Version history", "Priority support"]
+};
+function PricingCardBlock({ className, framed = true, onStart }) {
+  const [period, setPeriod] = useState("yearly");
+  return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs(
+      ToggleGroup,
+      {
+        value: [period],
+        onValueChange: (v) => v[0] && setPeriod(v[0]),
+        "aria-label": "Billing period",
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx(Toggle, { value: "monthly", className: "flex-1", children: "Monthly" }),
+          /* @__PURE__ */ jsx(Toggle, { value: "yearly", className: "flex-1", children: "Yearly" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-heading-2", children: plan[period].price }),
+        /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: "per seat / month" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: plan[period].note })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 text-body-sm", children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-success" }),
+      feature
+    ] }, feature)) }),
+    /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: () => onStart?.(period), children: "Start free trial" })
+  ] }) });
+}
+export {
+  PricingCardBlock
+};

package/dist/blocks/pricing-card-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/pricing-card-block.meta.ts
+var pricingCardBlockMeta = {
+  name: "PricingCardBlock",
+  family: "Commerce",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A single-plan pricing card: a Monthly/Yearly ToggleGroup, the price and billing note, a checked feature list, and one full-width call to action.",
+  intent: "Reach for this when one plan is on offer \u2014 an upgrade prompt, a paywall, a plan summary in billing settings. Comparing several tiers side by side is a pricing table, not three of these.",
+  notes: [
+    "The period switch is a ToggleGroup (a segmented control), not Tabs: it changes a value in place rather than showing another panel.",
+    "The price is a heading tier because it is the card's headline; its unit and billing note sit beside and below it in muted body text.",
+    "`onStart` receives the period showing, so checkout opens on the plan the person was looking at."
+  ],
+  a11y: [
+    `The ToggleGroup carries aria-label="Billing period"; each Toggle's text is its name.`,
+    "The check icons are decorative beside each feature's text."
+  ]
+};
+export {
+  pricingCardBlockMeta
+};