@sableui/react 0.6.1 → 0.7.0

package/dist/blocks/api-keys-block.js

@@ -0,0 +1,44 @@
+// src/blocks/api-keys-block.tsx
+import { Button } from "../components/button/index.js";
+import { Card, CardAction, CardDescription, CardHeader, CardList, CardTitle } from "../components/card/index.js";
+import { Code } from "../components/code/index.js";
+import { OverflowMenu } from "../components/overflow-menu/index.js";
+import { Entity } from "../components/entity/index.js";
+import { MenuItem, MenuSeparator } from "../components/menu/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var keys = [
+  { id: "k1", name: "Production", hint: "sk_live_\u2022\u2022\u2022\u20224f2a", detail: "Created Mar 2 \xB7 used 4 minutes ago" },
+  { id: "k2", name: "Staging", hint: "sk_test_\u2022\u2022\u2022\u202291cd", detail: "Created Feb 11 \xB7 used yesterday" },
+  { id: "k3", name: "CI deploys", hint: "sk_live_\u2022\u2022\u2022\u20220b7e", detail: "Created Jan 5 \xB7 never used" }
+];
+function ApiKeysBlock({ className, framed = true, onCreate, onKeyAction }) {
+  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: "API keys" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "A key is shown once, when you create it. Store it somewhere safe." }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", iconStart: /* @__PURE__ */ jsx(Icon, { name: "key" }), onClick: onCreate, children: "Create key" }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardList, { children: keys.map((k) => /* @__PURE__ */ jsx(
+      Entity,
+      {
+        title: /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-x-2", children: [
+          k.name,
+          /* @__PURE__ */ jsx(Code, { children: k.hint })
+        ] }),
+        subtitle: k.detail,
+        action: /* @__PURE__ */ jsxs(OverflowMenu, { label: `Manage the ${k.name} key`, size: "icon-sm", children: [
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => onKeyAction?.(k.id, "rename"), children: "Rename" }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => onKeyAction?.(k.id, "roll"), children: "Roll key" }),
+          /* @__PURE__ */ jsx(MenuSeparator, {}),
+          /* @__PURE__ */ jsx(MenuItem, { variant: "destructive", onClick: () => onKeyAction?.(k.id, "revoke"), children: "Revoke" })
+        ] })
+      },
+      k.id
+    )) })
+  ] });
+}
+export {
+  ApiKeysBlock
+};

package/dist/blocks/api-keys-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/api-keys-block.meta.ts
+var apiKeysBlockMeta = {
+  name: "ApiKeysBlock",
+  family: "Settings & team",
+  kind: "card",
+  width: { min: "20rem", max: "42rem" },
+  summary: "An API keys card: each key's name with its masked hint in Code, when it was created and last used, and an OverflowMenu to rename, roll or revoke.",
+  intent: "Reach for this for developer settings \u2014 API keys, access tokens, webhook secrets. Show a newly created key once, in a Dialog with a copy button; this list only ever shows the masked hint.",
+  notes: [
+    "Only the last four characters are shown. A full key never appears in a list, so there is no copy action here.",
+    '"Last used" sits in the detail line: it is what tells someone a key is safe to revoke.',
+    "Revoke is the destructive item, last and after a separator; confirm it in your handler with DestructiveActionModal."
+  ],
+  a11y: [
+    "Each OverflowMenu is labelled with the key's name, so the triggers are distinguishable.",
+    "The masked hint is a Code element inside the title, read after the key's name."
+  ]
+};
+export {
+  apiKeysBlockMeta
+};

package/dist/blocks/chat-thread-block.js

@@ -0,0 +1,17 @@
+// src/blocks/chat-thread-block.tsx
+import { Bubble } from "../components/bubble/index.js";
+import { Card, CardContent } from "../components/card/index.js";
+import { Message } from "../components/message/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var messages = [
+  { id: "m1", text: "Is the new cover ready?", mine: false },
+  { id: "m2", text: "Uploading it now \u{1F389}", mine: true },
+  { id: "m3", text: "Perfect, thank you!", mine: false }
+];
+function ChatThreadBlock({ className, framed = true }) {
+  return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col gap-2", children: messages.map((m) => /* @__PURE__ */ jsx(Message, { messageId: m.id, align: m.mine ? "end" : void 0, children: /* @__PURE__ */ jsx(Bubble, { variant: m.mine ? "primary" : void 0, align: m.mine ? "end" : void 0, children: m.text }) }, m.id)) }) });
+}
+export {
+  ChatThreadBlock
+};

package/dist/blocks/chat-thread-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/chat-thread-block.meta.ts
+var chatThreadBlockMeta = {
+  name: "ChatThreadBlock",
+  family: "Social & messaging",
+  kind: "card",
+  width: { min: "16rem", max: "20rem" },
+  summary: "A short message thread on a card: Message rows with incoming muted Bubbles on the start side and your own primary Bubbles on the end.",
+  intent: "Reach for this to show a conversation excerpt \u2014 a support preview, a comment thread on a dashboard, a recent-DM card. A working chat with a composer, streaming and history is the ChatPanel page shell.",
+  notes: [
+    "Sit it on a card, not straight on a muted page: incoming bubbles are the muted surface, and would vanish into it.",
+    "Your own messages align to the end with the primary Bubble; everyone else's align to the start."
+  ],
+  a11y: [
+    "Each Message carries a messageId, so a thread can be addressed and announced item by item.",
+    "Direction is shown by alignment and colour; when senders matter, add the sender's name to each Message."
+  ]
+};
+export {
+  chatThreadBlockMeta
+};

package/dist/blocks/command-palette-block.js

@@ -0,0 +1,24 @@
+// src/blocks/command-palette-block.tsx
+import { CommandMenuPanel } from "../components/command-menu/index.js";
+import { Kbd } from "../components/kbd/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var commands = [
+  { id: "new-project", icon: "plus", label: "New project", key: "N" },
+  { id: "invite", icon: "user", label: "Invite teammate", key: "I" },
+  { id: "settings", icon: "gear", label: "Open settings", key: "," }
+];
+function CommandPaletteBlock({ className, onCommand }) {
+  const items = commands.map((c) => ({
+    id: c.id,
+    group: "Actions",
+    icon: c.icon,
+    label: c.label,
+    hint: /* @__PURE__ */ jsx(Kbd, { children: c.key }),
+    onSelect: () => onCommand?.(c.id)
+  }));
+  return /* @__PURE__ */ jsx(CommandMenuPanel, { className: cn("w-full max-w-xs shadow-sm", className), placeholder: "Type a command\u2026", items });
+}
+export {
+  CommandPaletteBlock
+};

package/dist/blocks/command-palette-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/command-palette-block.meta.ts
+var commandPaletteBlockMeta = {
+  name: "CommandPaletteBlock",
+  family: "Navigation",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "An inline command palette: CommandMenuPanel with a filter field and grouped actions, each with an icon and its keyboard shortcut.",
+  intent: "Reach for this to show a command list in place \u2014 an empty state that teaches shortcuts, an onboarding step, a quick-actions card. The \u2318K palette that opens over the app is CommandMenu; this is its panel without the dialog.",
+  notes: [
+    "Each command shows its shortcut as a Kbd hint, so the palette also teaches the keys.",
+    "`onCommand` receives the command's id; ids also key the rows, so two commands may share a label.",
+    "No card around it: the panel is its own surface, lifted with `shadow-sm` when it sits on a muted section."
+  ],
+  a11y: [
+    "CommandMenuPanel wires the filter input to the list as a combobox, with arrow-key navigation and the active row announced.",
+    "Shortcut hints are Kbd elements, read as keys."
+  ]
+};
+export {
+  commandPaletteBlockMeta
+};

package/dist/blocks/cta-band-block.js

@@ -0,0 +1,27 @@
+// src/blocks/cta-band-block.tsx
+import { useId } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent } from "../components/card/index.js";
+import { cn } from "../lib/cn.js";
+import { Region, Row, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var cta = {
+  title: "Build the product, not another component library",
+  lede: "Install Sable, pick a preset, and ship the first screen today.",
+  primary: { label: "Get started", href: "/docs/getting-started" },
+  secondary: { label: "Star on GitHub", href: "/github" }
+};
+function CtaBandBlock({ className }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": titleId, max: "wide", className: cn("w-full py-16", className), children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "py-8 text-center sm:py-12", children: [
+    /* @__PURE__ */ jsx("h2", { id: titleId, className: "max-w-2xl text-balance text-heading-1", children: cta.title }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: cta.lede }),
+    /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", wrap: true, className: "pt-2", children: [
+      /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: cta.primary.href }), children: cta.primary.label }),
+      /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: cta.secondary.href }), children: cta.secondary.label })
+    ] })
+  ] }) }) }) });
+}
+export {
+  CtaBandBlock
+};

package/dist/blocks/cta-band-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/cta-band-block.meta.ts
+var ctaBandBlockMeta = {
+  name: "CtaBandBlock",
+  family: "Marketing",
+  kind: "section",
+  summary: "A closing call to action: a centred h2 and one-line lede on a card, with a primary and an outline action.",
+  intent: "Reach for this as the last section before the footer, repeating the hero's primary action once the reader has seen the case. Mid-page prompts to sign up belong inline, not in a band.",
+  notes: [
+    "Copied from the LandingPage page shell's closing call to action.",
+    "The primary action matches the hero's, so the page asks for one thing twice rather than two things once.",
+    "Sitting on a Card lifts it from the page without a coloured band, so it follows any preset."
+  ],
+  a11y: [
+    "The section is labelled by its h2.",
+    "Both actions are links styled as Buttons, because they navigate."
+  ]
+};
+export {
+  ctaBandBlockMeta
+};

package/dist/blocks/danger-zone-block.js

@@ -0,0 +1,39 @@
+// src/blocks/danger-zone-block.tsx
+import { useState } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { DestructiveActionModal } from "../components/destructive-action-modal/index.js";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var account = { handle: "ada", editions: 12 };
+function DangerZoneBlock({ className, framed = true, onDelete }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__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: "Delete account" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Permanently remove your profile, editions, and sales history. Collectors keep the editions they own." })
+      ] }),
+      /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setOpen(true), children: "Delete account" }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DestructiveActionModal,
+      {
+        open,
+        onOpenChange: setOpen,
+        title: "Delete your account?",
+        description: `This permanently removes your profile, ${account.editions} editions, and sales history. Pending payouts are still sent. This can't be undone.`,
+        confirmLabel: "Delete account",
+        confirmingLabel: "Deleting\u2026",
+        confirmText: account.handle,
+        onConfirm: () => {
+          setOpen(false);
+          onDelete?.();
+        }
+      }
+    )
+  ] });
+}
+export {
+  DangerZoneBlock
+};

package/dist/blocks/danger-zone-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/danger-zone-block.meta.ts
+var dangerZoneBlockMeta = {
+  name: "DangerZoneBlock",
+  family: "Settings & team",
+  kind: "card",
+  width: { min: "20rem", max: "42rem" },
+  summary: "A delete-account card: what deleting removes and what survives, one destructive Button, and a DestructiveActionModal that asks for the handle to be typed before it acts.",
+  intent: "Reach for this as the last section of account, workspace or project settings. Deleting a single record from a list is an OverflowMenu item that opens DestructiveActionModal directly, not a card.",
+  notes: [
+    "Copied from the SettingsPage page shell's Delete account section.",
+    "The button never acts directly: it opens the modal, whose confirm stays disabled until the handle is typed.",
+    'The description says what is lost AND what is kept ("Collectors keep the editions they own"), which is what people want to know before they decide.'
+  ],
+  a11y: [
+    "DestructiveActionModal is an alertdialog: focus opens on Cancel and the backdrop does not dismiss it.",
+    "The CardTitle is an h2, so the section is reachable by heading."
+  ]
+};
+export {
+  dangerZoneBlockMeta
+};

package/dist/blocks/device-comparison-block.js

@@ -0,0 +1,69 @@
+// src/blocks/device-comparison-block.tsx
+import { useState } from "react";
+import { BarChart } from "../components/bar-chart/index.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Toggle, ToggleGroup } from "../components/toggle/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var days = Array.from({ length: 30 }, (_, i) => ({
+  date: new Date(2026, 8, 1 + i).toISOString().slice(0, 10),
+  desktop: Math.round(320 + Math.sin(i / 3) * 90 + i % 5 * 14),
+  mobile: Math.round(260 + Math.cos(i / 4) * 80 + i % 4 * 18)
+}));
+var series = [
+  { key: "desktop", label: "Desktop" },
+  { key: "mobile", label: "Mobile" }
+];
+var shortDate = (iso) => (/* @__PURE__ */ new Date(`${iso}T00:00:00`)).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+function DeviceComparisonBlock({ className, framed = true }) {
+  const [active, setActive] = useState("desktop");
+  const totals = Object.fromEntries(series.map((s) => [s.key, days.reduce((sum, d) => sum + d[s.key], 0)]));
+  const current = series.find((s) => s.key === active) ?? series[0];
+  return (
+    // overflow-hidden: the square tiles meet the card's rounded corner.
+    /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-3xl overflow-hidden", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-b border-border sm:flex-row", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex-1 pb-[var(--card-p,--spacing(6))]", children: [
+          /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Visitors by device" }),
+          /* @__PURE__ */ jsx(CardDescription, { children: "The last 30 days. Pick a device to plot it." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            value: [active],
+            onValueChange: (v) => v[0] && setActive(String(v[0])),
+            "aria-label": "Device",
+            className: "items-stretch gap-0",
+            children: series.map((s) => /* @__PURE__ */ jsxs(
+              Toggle,
+              {
+                value: s.key,
+                className: "h-auto flex-1 flex-col items-start justify-center gap-1 rounded-none border-border px-6 py-4 text-start text-foreground max-sm:border-t sm:border-s",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: s.label }),
+                  /* @__PURE__ */ jsx("span", { className: "text-mono-lg", children: totals[s.key].toLocaleString("en-US") })
+                ]
+              },
+              s.key
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+        BarChart,
+        {
+          label: `${current.label} visitors per day, last 30 days`,
+          data: days,
+          index: "date",
+          series: [current],
+          indexFormatter: shortDate,
+          radius: 3,
+          className: "h-64"
+        }
+      ) })
+    ] })
+  );
+}
+export {
+  DeviceComparisonBlock
+};

package/dist/blocks/device-comparison-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/device-comparison-block.meta.ts
+var deviceComparisonBlockMeta = {
+  name: "DeviceComparisonBlock",
+  family: "Dashboard",
+  kind: "card",
+  width: { min: "20rem", max: "48rem" },
+  summary: "A comparison card: each series' total sits in the header as a pressable tile, and the one pressed is plotted below as a daily BarChart.",
+  intent: "Reach for this when two or three measures share a page and the reader looks at one at a time \u2014 devices, regions, plans. To see them together, plot both in one BarChart or LineChart instead.",
+  notes: [
+    "The totals are the switch: Toggles in a labelled ToggleGroup, so the number and the control are one thing, with the group's own pressed and hover states.",
+    "Switching eases every bar to its new height rather than redrawing.",
+    "Below sm the tiles stack under the title and divide with a top rule instead of a side rule."
+  ],
+  a11y: [
+    'Each total is a Toggle (aria-pressed) named by its label and value, in a ToggleGroup labelled "Device" with arrow-key movement between tiles.',
+    "The chart's name says which series is plotted, so the data table is unambiguous."
+  ]
+};
+export {
+  deviceComparisonBlockMeta
+};

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

@@ -0,0 +1,40 @@
+// src/blocks/event-card-block.tsx
+import { Avatar, AvatarGroup } from "../components/avatar/index.js";
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "../components/card/index.js";
+import { DateTile } from "../components/date-tile/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var event = {
+  title: "Design review",
+  date: new Date(2026, 9, 14),
+  when: "Tuesday, 2:00 \u2013 2:45 PM",
+  starts: "In 10 min",
+  attendees: ["MO", "SR", "JL"],
+  total: 7
+};
+function EventCardBlock({ className, framed = true, onRespond }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx(DateTile, { date: event.date }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-2 text-title-lg", children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: event.title }),
+          /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: /* @__PURE__ */ jsx(Badge, { tone: "info", size: "sm", children: event.starts }) })
+        ] }),
+        /* @__PURE__ */ jsx(CardDescription, { children: event.when })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "flex-wrap justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(AvatarGroup, { "aria-label": `${event.total} attendees`, total: event.total, size: "sm", surface: framed ? "card" : void 0, fit: true, children: event.attendees.map((initials) => /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: initials, alt: initials }, initials)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => onRespond?.("decline"), children: "Decline" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => onRespond?.("join"), children: "Join" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  EventCardBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/event-card-block.meta.ts
+var eventCardBlockMeta = {
+  name: "EventCardBlock",
+  family: "Dashboard",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: 'An upcoming-event card: a DateTile beside the title and time, a "starts in" Badge, attendees as an AvatarGroup, and Decline / Join.',
+  intent: "Reach for this for the next meeting, booking or live session on a dashboard or home screen. For a list of many upcoming events, use Entity rows with a DateTile as `leading`.",
+  notes: [
+    "The DateTile names the day; the full weekday and time range sit in text beside it.",
+    "The Badge is one title line tall and wraps under the title rather than squeezing it onto two lines.",
+    "AvatarGroup `fit` trades avatars for the +N count before it pushes the actions to their own line."
+  ],
+  a11y: [
+    "DateTile is a <time> with a machine-readable date; the time range is plain text read in order after the title.",
+    "The AvatarGroup's aria-label states the total attendee count."
+  ]
+};
+export {
+  eventCardBlockMeta
+};

package/dist/blocks/faq-block.js

@@ -0,0 +1,38 @@
+// src/blocks/faq-block.tsx
+import { useId } from "react";
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "../components/accordion/index.js";
+import { cn } from "../lib/cn.js";
+import { Region, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var intro = {
+  title: "Questions, answered",
+  lede: "Can't find what you need?",
+  contact: { label: "Write to us", href: "/contact" }
+};
+var questions = [
+  { q: "Is there a free plan?", a: "Yes. Starter is free forever for three live editions, with no fees on your first $1,000 in sales." },
+  { q: "Can I change plans later?", a: "Any time. Upgrades apply immediately and are prorated; downgrades take effect at the end of the billing period." },
+  { q: "Who owns the work I sell?", a: "You do. Collectors own the editions they buy, and you keep the rights to the work itself." },
+  { q: "How do payouts work?", a: "Sales clear after seven days and are paid out every Friday to the account you connect in settings." }
+];
+function FaqBlock({ className }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": titleId, max: "content", className: cn("w-full py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 md:grid-cols-[1fr_2fr]", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-balance text-heading-2", children: intro.title }),
+      /* @__PURE__ */ jsxs("p", { className: "text-body-md text-muted-foreground", children: [
+        intro.lede,
+        " ",
+        /* @__PURE__ */ jsx("a", { href: intro.contact.href, className: "text-foreground underline underline-offset-4 motion-interactive hover:text-muted-foreground", children: intro.contact.label }),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Accordion, { children: questions.map((item) => /* @__PURE__ */ jsxs(AccordionItem, { value: item.q, children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { children: item.q }),
+      /* @__PURE__ */ jsx(AccordionPanel, { children: item.a })
+    ] }, item.q)) })
+  ] }) });
+}
+export {
+  FaqBlock
+};

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

@@ -0,0 +1,20 @@
+// src/blocks/faq-block.meta.ts
+var faqBlockMeta = {
+  name: "FaqBlock",
+  family: "Marketing",
+  kind: "section",
+  summary: "A FAQ section: the heading and a way to ask beside an Accordion of questions, each answer one or two sentences.",
+  intent: "Reach for this near pricing or at the end of a landing page, for the questions that block a decision. Long help content belongs in docs, not an accordion.",
+  notes: [
+    "Every question starts closed: the list of questions is itself the useful summary.",
+    "The way to ask a human sits beside the heading, so it is found before the reader scrolls the list.",
+    "Capped at the `content` region width; questions wider than that are hard to scan."
+  ],
+  a11y: [
+    "Accordion triggers are buttons with aria-expanded, inside headings, so the questions are navigable by heading and operable by keyboard.",
+    "The contact link is a real <a> inside the lede sentence."
+  ]
+};
+export {
+  faqBlockMeta
+};

package/dist/blocks/feature-grid-block.js

@@ -0,0 +1,38 @@
+// src/blocks/feature-grid-block.tsx
+import { useId } from "react";
+import { Card, CardContent } from "../components/card/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { Grid, Region, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var intro = {
+  eyebrow: "Why Sable",
+  title: "A design system with the rules written down",
+  lede: "The decisions a senior designer would make are encoded once, so every screen your team or your agent builds starts from them."
+};
+var features = [
+  { icon: "component", title: "Behavior built in", body: "Focus management, keyboard navigation, and ARIA come from Base UI primitives under every control." },
+  { icon: "eyedropper", title: "Semantic tokens end to end", body: "Re-theme the whole product, light and dark, from one preset without touching a component." },
+  { icon: "layout", title: "Pages, not just parts", body: "Landing, dashboard, settings, auth, and list-detail shells to copy and adapt." },
+  { icon: "book", title: "A contract agents can read", body: "registry.json, llms.txt, and a CLI hand agents the exact props, examples, and rules." },
+  { icon: "circle-check", title: "Lint that knows the design", body: "sable-lint flags raw colors, hand-built controls, and motion that ignores reduced motion." },
+  { icon: "play", title: "Motion with an off switch", body: "Named recipes run on one scale variable, so reduced motion stops every transition at once." }
+];
+function FeatureGridBlock({ className }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": titleId, max: "wide", className: cn("w-full py-16 sm:py-24", className), children: /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: intro.eyebrow }),
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-balance text-heading-1", children: intro.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: intro.lede })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2, lg: 3 }, gap: 4, children: features.map((feature) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-md sable-well", children: /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl" }) }),
+      /* @__PURE__ */ jsx("h3", { className: "pt-2 text-title-lg", children: feature.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: feature.body })
+    ] }) }, feature.title)) })
+  ] }) });
+}
+export {
+  FeatureGridBlock
+};

package/dist/blocks/feature-grid-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/feature-grid-block.meta.ts
+var featureGridBlockMeta = {
+  name: "FeatureGridBlock",
+  family: "Marketing",
+  kind: "section",
+  summary: "A feature section: an overline, an h2 and a lede over a grid of article cards, each with an icon in a well, a title and one sentence \u2014 1, 2 then 3 columns.",
+  intent: "Reach for this to explain what a product does in six or fewer points. For a sequence (first this, then that), use StepsBlock; for one proof point with numbers, TestimonialBlock.",
+  notes: [
+    "Copied from the LandingPage page shell's features section.",
+    "Six features fill 3 \xD7 2 evenly; keep the count a multiple of three, or drop to cols={{ lg: 2 }}.",
+    "Each body is one sentence. A feature that needs a paragraph needs its own section.",
+    "Icons sit in a `sable-well`, which derives its fill from the card surface it is on."
+  ],
+  a11y: [
+    "Each feature is an <article> with an h3 under the section's h2.",
+    "The icons are decorative; each title says what the feature is."
+  ]
+};
+export {
+  featureGridBlockMeta
+};

package/dist/blocks/feedback-form-block.js

@@ -0,0 +1,30 @@
+// src/blocks/feedback-form-block.tsx
+import { useState } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { Textarea } from "../components/textarea/index.js";
+import { Toggle, ToggleGroup } from "../components/toggle/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var scale = ["1", "2", "3", "4", "5"];
+function FeedbackFormBlock({ className, framed = true, onDone }) {
+  const [score, setScore] = useState("4");
+  const [notes, setNotes] = useState("");
+  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: "How was the session?" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "One tap is enough. Notes help us more." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx(ToggleGroup, { value: [score], onValueChange: (v) => v[0] && setScore(String(v[0])), "aria-label": "Rating", className: "w-full", children: scale.map((n) => /* @__PURE__ */ jsx(Toggle, { value: n, className: "flex-1", children: n }, n)) }),
+      /* @__PURE__ */ jsx(Textarea, { placeholder: "What worked, what didn\u2019t\u2026", "aria-label": "Notes", rows: 3, value: notes, onChange: (e) => setNotes(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs(CardFooter, { actions: true, className: "justify-end", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDone?.(false), children: "Skip" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => onDone?.(true, { score: Number(score), notes }), children: "Send feedback" })
+    ] })
+  ] });
+}
+export {
+  FeedbackFormBlock
+};

package/dist/blocks/feedback-form-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/feedback-form-block.meta.ts
+var feedbackFormBlockMeta = {
+  name: "FeedbackFormBlock",
+  family: "Social & messaging",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A feedback card: a one-to-five rating as a full-width ToggleGroup, an optional notes field, and Skip / Send feedback.",
+  intent: "Reach for this for a post-session or post-purchase survey in a Sheet, Dialog or end-of-flow screen. For a feedback control anchored to a button in the app chrome, use the Feedback component (a popover).",
+  notes: [
+    "The rating is preselected, so one tap on Send is a complete answer; the notes are optional and say so.",
+    "Skip is a ghost Button before the primary, so dismissing is always available and never competes with sending.",
+    "`onDone` reports whether feedback was sent and, if so, the score and notes."
+  ],
+  a11y: [
+    `The ToggleGroup carries aria-label="Rating"; each Toggle's number is its name.`,
+    'The Textarea carries aria-label="Notes"; its placeholder is a prompt, not the label.'
+  ]
+};
+export {
+  feedbackFormBlockMeta
+};

package/dist/blocks/goal-progress-block.js

@@ -0,0 +1,24 @@
+// src/blocks/goal-progress-block.tsx
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { RadialChart } from "../components/radial-chart/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var goals = [
+  { goal: "Releases", progress: 82 },
+  { goal: "Collectors", progress: 64 },
+  { goal: "Revenue", progress: 91 }
+];
+function GoalProgressBlock({ className, framed = true }) {
+  const behind = goals.filter((g) => g.progress < 70);
+  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: "Quarter goals" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Progress toward each target, in percent." })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(RadialChart, { label: "Progress toward quarter goals", data: goals, index: "goal", valueKey: "progress", max: 100, className: "h-64", valueFormatter: (v) => `${v}%` }) }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "text-body-sm text-muted-foreground", children: behind.length ? `${behind.map((g) => g.goal).join(" and ")} behind pace.` : "Every goal on pace." })
+  ] });
+}
+export {
+  GoalProgressBlock
+};