@sableui/react 0.6.2 → 0.7.1

package/dist/blocks/stat-row-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/stat-row-block.meta.ts
+var statRowBlockMeta = {
+  name: "StatRowBlock",
+  family: "Dashboard",
+  kind: "section",
+  summary: "A KPI row: four stat cards, each a label, the value in the metric mono tier, and a trend Badge with its comparison note \u2014 2 \xD7 2 on a phone, one row from xl.",
+  intent: "Reach for this at the top of a dashboard or report, above the tables and charts it summarises. One headline number worth splitting into categories is RevenueBreakdownBlock.",
+  notes: [
+    "Copied from the DashboardPage page shell's stat row.",
+    "Values are `text-mono-xl` \u2014 tabular figures, never a heading tier \u2014 so the four numbers align digit for digit.",
+    "The trend Badge sits with its note in CardContent, so the value keeps the full card width when the row folds to 2 \xD7 2.",
+    "Keep it to four. A fifth stat is a sign one of them belongs in a table."
+  ],
+  a11y: [
+    "The trend is stated in text (+8.2%) with an arrow icon; the tone is reinforcement, not the signal.",
+    "Each card's label is read before its value, in source order."
+  ]
+};
+export {
+  statRowBlockMeta
+};

package/dist/blocks/steps-block.js

@@ -0,0 +1,37 @@
+// src/blocks/steps-block.tsx
+import { useId } from "react";
+import { Button } from "../components/button/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { Region, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var intro = {
+  eyebrow: "How it works",
+  title: "From request to sealed record.",
+  lede: "Teams are usually live within a week. Cove adapts to the routes you already run instead of asking you to start over.",
+  link: { label: "Read the rollout guide", href: "/guides/rollout" }
+};
+var steps = [
+  { title: "Connect your spaces", body: "Bring teams, vendors, and record stores into one workspace, with roles that mirror how you already work." },
+  { title: "Route every approval", body: "Requests follow the path you define, with reviewers, deadlines, and escalation built in from the start." },
+  { title: "Seal the record", body: "Approved work is archived with its full context and is ready for review the moment it closes." }
+];
+function StepsBlock({ 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("div", { className: "grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, className: "max-w-md", 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-md text-muted-foreground", children: intro.lede }),
+      /* @__PURE__ */ jsx("div", { className: "pt-3", children: /* @__PURE__ */ jsx(Button, { variant: "outline", iconEnd: /* @__PURE__ */ jsx(Icon, { name: "arrow-right" }), render: /* @__PURE__ */ jsx("a", { href: intro.link.href }), children: intro.link.label }) })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { className: "grid gap-10 sm:grid-cols-3 sm:gap-6", children: steps.map((step, index) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2 border-t border-border-strong pt-6", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-muted-foreground", children: String(index + 1).padStart(2, "0") }),
+      /* @__PURE__ */ jsx("h3", { className: "mt-3 text-title-lg sm:mt-6", children: step.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: step.body })
+    ] }, step.title)) })
+  ] }) });
+}
+export {
+  StepsBlock
+};

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

@@ -0,0 +1,20 @@
+// src/blocks/steps-block.meta.ts
+var stepsBlockMeta = {
+  name: "StepsBlock",
+  family: "Marketing",
+  kind: "section",
+  summary: "A how-it-works section: the heading, lede and a guide link on the left; three numbered steps on the right, each under a strong rule.",
+  intent: "Reach for this when the pitch is a sequence \u2014 onboarding, a workflow, a setup. Parallel benefits with no order are FeatureGridBlock; progress through a live process is a Stepper.",
+  notes: [
+    "Copied from the BrandLandingPage page shell's how-it-works section.",
+    "The steps are an <ol>, so the order is semantic and the 01 / 02 / 03 numbers are its visual echo, set in the mono tier.",
+    "Three steps fit the 1 : 2 split on desktop; on a phone everything stacks with the intro first."
+  ],
+  a11y: [
+    "Each step has an h3 under the section's h2.",
+    "The guide link is an <a> styled as an outline Button, because it navigates."
+  ]
+};
+export {
+  stepsBlockMeta
+};

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

@@ -0,0 +1,52 @@
+// src/blocks/task-list-block.tsx
+import { useId, useState } from "react";
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { Checkbox } from "../components/checkbox/index.js";
+import { Label } from "../components/label/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tasks = [
+  { title: "Pick the cover type", tag: "Design", tone: "collectible", done: true },
+  { title: "Wire up checkout", tag: "Engineering", tone: "info", done: false },
+  { title: "Draft launch post", tag: "Launch", tone: "edition", done: false }
+];
+function TaskListBlock({ className, framed = true, onAddTask }) {
+  const [done, setDone] = useState(tasks.map((t) => t.done));
+  const id = useId();
+  const left = done.filter((d) => !d).length;
+  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: "This week" }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
+        left,
+        " left"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: tasks.map((task, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: `${id}-${i}`,
+          checked: done[i],
+          onCheckedChange: (v) => setDone(done.map((d, j) => j === i ? v : d))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          htmlFor: `${id}-${i}`,
+          className: cn("min-w-0 flex-1 motion-interactive", done[i] && "text-muted-foreground line-through"),
+          children: task.title
+        }
+      ),
+      /* @__PURE__ */ jsx(Badge, { tone: task.tone, size: "sm", children: task.tag })
+    ] }, task.title)) }) }),
+    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", bleed: "start", iconStart: /* @__PURE__ */ jsx(Icon, { name: "plus" }), onClick: onAddTask, children: "Add task" }) })
+  ] });
+}
+export {
+  TaskListBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/task-list-block.meta.ts
+var taskListBlockMeta = {
+  name: "TaskListBlock",
+  family: "Dashboard",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A checklist card: a titled list of Checkbox rows with a category Badge each, a live count of what is left, and a quiet Add task action.",
+  intent: "Reach for this for a short, personal to-do list on a dashboard or in onboarding. A team's task board with assignees and status columns needs a Table or DataTable.",
+  notes: [
+    "Finishing a task strikes it through and mutes it rather than removing it, so the list does not jump under the pointer.",
+    "The count in CardAction updates with every check, so progress reads without counting rows.",
+    "Add task is a ghost Button in the footer \u2014 present, but quieter than the list."
+  ],
+  a11y: [
+    "Every Checkbox has a real <Label htmlFor>, so the whole title is the click target and the accessible name.",
+    "Category Badges carry text; the tone only groups them visually."
+  ]
+};
+export {
+  taskListBlockMeta
+};

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

@@ -0,0 +1,49 @@
+// src/blocks/team-members-block.tsx
+import { Avatar } from "../components/avatar/index.js";
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardAction, CardDescription, CardHeader, CardList, CardTitle } from "../components/card/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 members = [
+  { id: "u1", name: "Ada Lovelace", initials: "AL", email: "ada@studio.com", role: "Owner" },
+  { id: "u2", name: "Mara Okafor", initials: "MO", email: "mara@studio.com", role: "Admin" },
+  { id: "u3", name: "Sam Rivera", initials: "SR", email: "sam@studio.com", role: "Member" },
+  { id: "u4", name: "jun@studio.com", initials: "J", email: "Invited 2 days ago", role: "Pending" }
+];
+function TeamMembersBlock({ className, framed = true, onInvite, onMemberAction }) {
+  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: "Members" }),
+      /* @__PURE__ */ jsxs(CardDescription, { children: [
+        members.length,
+        " people in this workspace."
+      ] }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { size: "sm", iconStart: /* @__PURE__ */ jsx(Icon, { name: "plus" }), onClick: onInvite, children: "Invite" }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardList, { children: members.map((m) => /* @__PURE__ */ jsx(
+      Entity,
+      {
+        leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: m.initials, alt: m.name }),
+        title: m.name,
+        subtitle: m.email,
+        action: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { appearance: m.role === "Pending" ? "outline" : "plain", tone: m.role === "Owner" ? "edition" : "neutral", size: "sm", children: m.role }),
+          m.role === "Owner" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-(--control-sm)" }) : /* @__PURE__ */ jsxs(OverflowMenu, { label: `Manage ${m.name}`, size: "icon-sm", children: [
+            m.role === "Pending" ? /* @__PURE__ */ jsx(MenuItem, { onClick: () => onMemberAction?.(m.id, "resend"), children: "Resend invite" }) : m.role === "Admin" ? /* @__PURE__ */ jsx(MenuItem, { onClick: () => onMemberAction?.(m.id, "make-member"), children: "Make member" }) : /* @__PURE__ */ jsx(MenuItem, { onClick: () => onMemberAction?.(m.id, "make-admin"), children: "Make admin" }),
+            /* @__PURE__ */ jsx(MenuSeparator, {}),
+            /* @__PURE__ */ jsx(MenuItem, { variant: "destructive", onClick: () => onMemberAction?.(m.id, "remove"), children: m.role === "Pending" ? "Cancel invite" : "Remove from workspace" })
+          ] })
+        ] })
+      },
+      m.id
+    )) })
+  ] });
+}
+export {
+  TeamMembersBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/team-members-block.meta.ts
+var teamMembersBlockMeta = {
+  name: "TeamMembersBlock",
+  family: "Settings & team",
+  kind: "card",
+  width: { min: "20rem", max: "42rem" },
+  summary: "A members card: Entity rows with avatar, name and email, a role Badge, and an OverflowMenu of role changes and removal; pending invites sit in the same list.",
+  intent: "Reach for this to manage who is in a workspace, project or team. For inviting people when the list is empty or short, InviteTeamBlock is the lighter shape; for hundreds of members with filters, use a DataTable.",
+  notes: [
+    "Each row's menu offers only what applies to it: Make admin or Make member, Resend invite for pending rows, then the destructive action after a separator.",
+    "The owner has no menu \u2014 ownership is transferred elsewhere \u2014 and a control-sized spacer keeps the role badges aligned.",
+    "Pending invites are outline Badges in the same list, so the team's full size reads in one place."
+  ],
+  a11y: [
+    `Each OverflowMenu is labelled with the member's name ("Manage Mara Okafor"), so the triggers are distinguishable in a list.`,
+    "Roles are text in a Badge; tone only distinguishes the owner."
+  ]
+};
+export {
+  teamMembersBlockMeta
+};

package/dist/blocks/testimonial-block.js

@@ -0,0 +1,49 @@
+// src/blocks/testimonial-block.tsx
+import { Avatar } from "../components/avatar/index.js";
+import { Card, CardContent } from "../components/card/index.js";
+import { Separator } from "../components/separator/index.js";
+import { cn } from "../lib/cn.js";
+import { Region, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var story = {
+  quote: "We used to chase approvals across four tools. Now every request has an owner, a deadline, and a record, and our auditors stopped asking for screenshots.",
+  name: "Maya Okafor",
+  initials: "MO",
+  role: "Head of operations, Fielddesk"
+};
+var outcomes = [
+  { value: "3.2\xD7", label: "faster approvals in the first quarter" },
+  { value: "68%", label: "fewer follow-ups on handoffs" },
+  { value: "1 day", label: "to prepare a quarterly audit" }
+];
+function TestimonialBlock({ className }) {
+  return /* @__PURE__ */ jsx(Region, { as: "section", "aria-label": "Customer story", max: "wide", className: cn("w-full py-16", className), children: /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("figure", {}), children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1.5fr_1fr]", children: [
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col justify-between gap-10 sm:p-10", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+        /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Customer story" }),
+        /* @__PURE__ */ jsxs("blockquote", { className: "text-balance text-heading-3 sm:text-heading-2", children: [
+          "\u201C",
+          story.quote,
+          "\u201D"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: story.initials, alt: story.name }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-title-sm", children: story.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: story.role })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-border max-lg:border-t lg:border-s", children: /* @__PURE__ */ jsx(CardContent, { className: "flex h-full flex-col justify-center gap-6 sm:p-10", children: outcomes.map((outcome, index) => /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-heading-1 sm:text-display-lg", children: outcome.value }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-sm text-muted-foreground", children: outcome.label })
+      ] })
+    ] }, outcome.label)) }) })
+  ] }) }) });
+}
+export {
+  TestimonialBlock
+};

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

@@ -0,0 +1,20 @@
+// src/blocks/testimonial-block.meta.ts
+var testimonialBlockMeta = {
+  name: "TestimonialBlock",
+  family: "Marketing",
+  kind: "section",
+  summary: "A customer story: one large blockquote with the person's avatar, name and role, beside three outcome figures separated by rules.",
+  intent: "Reach for this for one strong, attributable quote backed by numbers. A wall of short quotes is a different section; a logo row is Marquee.",
+  notes: [
+    "Copied from the BrandLandingPage page shell's customer story.",
+    "The quote and the outcomes share one Card as a <figure>; the outcomes move under the quote below lg.",
+    "Outcome values use display sizes because they are the proof; their labels say what each number counts."
+  ],
+  a11y: [
+    "<figure> + <blockquote> + <figcaption> tie the quote to the person who said it.",
+    'The section is labelled "Customer story" so it is reachable as a landmark.'
+  ]
+};
+export {
+  testimonialBlockMeta
+};

package/dist/blocks/traffic-sources-block.js

@@ -0,0 +1,39 @@
+// src/blocks/traffic-sources-block.tsx
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { PieChart } from "../components/pie-chart/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sources = [
+  { source: "Search", visitors: 4280 },
+  { source: "Direct", visitors: 2910 },
+  { source: "Social", visitors: 1840 },
+  { source: "Email", visitors: 960 }
+];
+var total = sources.reduce((sum, s) => sum + s.visitors, 0);
+function TrafficSourcesBlock({ className, framed = true }) {
+  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: "Traffic sources" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Where this month's visitors came from." })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      PieChart,
+      {
+        label: "Visitors by source, this month",
+        data: sources,
+        index: "source",
+        valueKey: "visitors",
+        donut: true,
+        centerLabel: { value: total, label: "Visitors" }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "text-body-sm text-muted-foreground", children: [
+      "Search brings ",
+      Math.round(sources[0].visitors / total * 100),
+      "% of visitors."
+    ] })
+  ] });
+}
+export {
+  TrafficSourcesBlock
+};

package/dist/blocks/traffic-sources-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/traffic-sources-block.meta.ts
+var trafficSourcesBlockMeta = {
+  name: "TrafficSourcesBlock",
+  family: "Dashboard",
+  kind: "card",
+  width: { min: "18rem", max: "24rem" },
+  summary: "A share card: a donut PieChart of where a total comes from, the total in the hole, a legend, and the headline share in words in the footer.",
+  intent: "Reach for this for a split of one total into four or fewer parts \u2014 traffic sources, revenue by plan, tickets by channel. More parts, or values to compare exactly, belong in a horizontal BarChart.",
+  notes: [
+    `The total sits in the donut's hole, so the card answers "how many" and "from where" at once.`,
+    "The footer puts the biggest share in a sentence \u2014 the takeaway does not depend on reading the slices.",
+    "The slices sweep in clockwise as the card scrolls into view."
+  ],
+  a11y: [
+    "The chart's data table lists every source and its count; the legend repeats it visually.",
+    "Hovering or arrowing through the slices pulls each out and announces it."
+  ]
+};
+export {
+  trafficSourcesBlockMeta
+};

package/dist/blocks/traffic-trend-block.js

@@ -0,0 +1,61 @@
+// src/blocks/traffic-trend-block.tsx
+import { useState } from "react";
+import { AreaChart } from "../components/area-chart/index.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } 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 days = Array.from({ length: 90 }, (_, i) => {
+  const wave = Math.sin(i / 6) * 60 + Math.sin(i / 2.3) * 25;
+  return {
+    date: new Date(2026, 6, 1 + i).toISOString().slice(0, 10),
+    desktop: Math.round(240 + wave + i % 7 * 9),
+    mobile: Math.round(160 + wave * 0.7 + i * 3 % 11 * 6)
+  };
+});
+var series = [
+  { key: "desktop", label: "Desktop" },
+  { key: "mobile", label: "Mobile" }
+];
+var ranges = [
+  { id: "90d", label: "3 months", days: 90 },
+  { id: "30d", label: "30 days", days: 30 },
+  { id: "7d", label: "7 days", days: 7 }
+];
+var shortDate = (iso) => (/* @__PURE__ */ new Date(`${iso}T00:00:00`)).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+function TrafficTrendBlock({ className, framed = true }) {
+  const [range, setRange] = useState("90d");
+  const shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90));
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("@container/trend w-full max-w-3xl", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "@max-sm/trend:has-data-[slot=card-action]:grid-cols-1", children: [
+      /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Visitors" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Desktop and mobile, by day." }),
+      /* @__PURE__ */ jsx(CardAction, { className: "@max-sm/trend:col-start-1 @max-sm/trend:row-span-1 @max-sm/trend:row-start-auto @max-sm/trend:mt-2 @max-sm/trend:justify-self-start", children: /* @__PURE__ */ jsx(ToggleGroup, { value: [range], onValueChange: (v) => v[0] && setRange(String(v[0])), "aria-label": "Time range", children: ranges.map((r) => /* @__PURE__ */ jsx(Toggle, { value: r.id, children: r.label }, r.id)) }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      AreaChart,
+      {
+        label: `Visitors per day, last ${ranges.find((r) => r.id === range)?.label}`,
+        data: shown,
+        index: "date",
+        series,
+        indexFormatter: shortDate,
+        tooltip: { labelFormatter: (d) => (/* @__PURE__ */ new Date(`${d}T00:00:00`)).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) },
+        stacked: true,
+        gradient: true,
+        className: "h-64"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "gap-1.5 text-body-sm", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "arrow-up", className: "text-success" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Up 5.2% on the previous period ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xB7 desktop leads every week" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  TrafficTrendBlock
+};

package/dist/blocks/traffic-trend-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/traffic-trend-block.meta.ts
+var trafficTrendBlockMeta = {
+  name: "TrafficTrendBlock",
+  family: "Dashboard",
+  kind: "card",
+  width: { min: "20rem", max: "48rem" },
+  summary: "A trend card: a stacked gradient AreaChart of two series by day, a time-range ToggleGroup in the header, and a one-line takeaway with its direction in the footer.",
+  intent: "Reach for this as the headline chart of a dashboard or an analytics section on a landing page. For a single number with a small trend beside it, KpiSparklineBlock is lighter.",
+  notes: [
+    "Switching the range eases the chart from one shape to the next instead of redrawing it.",
+    "The footer states the takeaway in words, so the card says something even before the chart is read.",
+    "The tooltip heading spells out the weekday; the axis keeps short dates so they fit."
+  ],
+  a11y: [
+    "The chart's accessible name includes the range showing, and its data table updates with it.",
+    "The range control is a labelled ToggleGroup; the chart is one tab stop with arrow-key navigation."
+  ]
+};
+export {
+  trafficTrendBlockMeta
+};

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

@@ -0,0 +1,39 @@
+// src/blocks/upload-list-block.tsx
+import { Attachment } from "../components/attachment/index.js";
+import { Button } from "../components/button/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var uploading = { name: "brand-guidelines.pdf", meta: "4.2 MB of 6.8 MB", progress: 62 };
+var uploaded = { name: "cover-final.png", meta: "Uploaded \xB7 2.1 MB" };
+function UploadListBlock({ className, onCancel }) {
+  return (
+    // An upload list, not chips: rows fill the block's width.
+    /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-xs flex-col gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        Attachment,
+        {
+          className: "max-w-none",
+          name: uploading.name,
+          meta: uploading.meta,
+          status: "uploading",
+          progress: uploading.progress,
+          actions: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Cancel upload", onClick: onCancel, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Attachment,
+        {
+          className: "max-w-none",
+          name: uploaded.name,
+          icon: "image-stack",
+          meta: uploaded.meta,
+          actions: /* @__PURE__ */ jsx("span", { className: "grid size-(--control-sm) place-items-center", children: /* @__PURE__ */ jsx(Icon, { name: "circle-check", className: "text-success", "aria-label": "Uploaded" }) })
+        }
+      )
+    ] })
+  );
+}
+export {
+  UploadListBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/upload-list-block.meta.ts
+var uploadListBlockMeta = {
+  name: "UploadListBlock",
+  family: "Media & files",
+  kind: "card",
+  width: { min: "16rem", max: "20rem" },
+  summary: "An upload queue: full-width Attachment rows \u2014 one uploading with progress and a cancel button, one finished with a success check.",
+  intent: "Reach for this under a FileDropzone, or anywhere files are in flight \u2014 a composer, an import step, a document form. For files attached to a message, Attachment chips in the composer fit better.",
+  notes: [
+    "Rows, not chips: each Attachment drops its chip cap (`max-w-none`) to fill the block's width.",
+    "The success check sits in a control-sized box so it lines up with the cancel button on the row above.",
+    "No card: Attachment rows are their own surfaces. Wrap the block in a Card if it needs a header."
+  ],
+  a11y: [
+    "Attachment announces upload progress; the cancel Button carries aria-label.",
+    `The finished row's check carries aria-label="Uploaded", so the state is spoken, not only coloured.`
+  ]
+};
+export {
+  uploadListBlockMeta
+};

package/dist/blocks/verify-code-block.js

@@ -0,0 +1,28 @@
+// src/blocks/verify-code-block.tsx
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { Field } from "../components/form/index.js";
+import { OtpField } from "../components/otp-field/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sentTo = "ada@studio.com";
+function VerifyCodeBlock({ className, framed = true, onVerify, onResend }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-sm", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Check your email" }),
+      /* @__PURE__ */ jsxs(CardDescription, { children: [
+        "We sent a 6-digit code to ",
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: sentTo }),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Field, { label: "Verification code", description: "The code expires in 10 minutes.", children: /* @__PURE__ */ jsx(OtpField, { length: 6, groupSize: 3, onValueComplete: (code) => onVerify?.(code) }) }) }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: "Didn\u2019t get it?" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", bleed: "end", onClick: onResend, children: "Resend code" })
+    ] })
+  ] });
+}
+export {
+  VerifyCodeBlock
+};

package/dist/blocks/verify-code-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/verify-code-block.meta.ts
+var verifyCodeBlockMeta = {
+  name: "VerifyCodeBlock",
+  family: "Auth",
+  kind: "card",
+  width: { min: "18rem", max: "24rem" },
+  summary: "A one-time-code card: where the code went, a six-slot OtpField grouped 3 + 3 under a visible label, and a quiet Resend.",
+  intent: "Reach for this for email or SMS verification, two-factor sign-in, or confirming a sensitive change. For a code someone copies out (a recovery key), show it with Code and a copy button instead.",
+  notes: [
+    "No submit button: the code verifies the moment the last slot fills, which is what people expect from a code field.",
+    "The destination is named in the description, so a mistyped address is caught before the wait.",
+    "Resend is a ghost Button \u2014 present for the stuck case, never competing with the field."
+  ],
+  a11y: [
+    'OtpField names each slot ("Character 1 of 6") and accepts a pasted code into all six at once.',
+    "Field labels the group and reads the expiry as its description."
+  ]
+};
+export {
+  verifyCodeBlockMeta
+};

package/dist/blocks/wallet-block.js

@@ -0,0 +1,48 @@
+// src/blocks/wallet-block.tsx
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Entity } from "../components/entity/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var balance = "14.62 SOL";
+var activity = [
+  { title: "Sold \u201CDusk, no. 4\u201D", detail: "Edition \xB7 2h ago", amount: "+0.80", tone: "edition" },
+  { title: "Royalty", detail: "Collectible \xB7 Yesterday", amount: "+0.12", tone: "collectible" },
+  { title: "Withdrawal", detail: "To Phantom \xB7 Mon", amount: "-1.50", tone: "standard" }
+];
+function WalletBlock({ className, framed = true, onSend, onReceive }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardDescription, { children: "Balance" }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: balance })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { iconStart: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" }), onClick: onSend, children: "Send" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", iconStart: /* @__PURE__ */ jsx(Icon, { name: "arrow-down" }), onClick: onReceive, children: "Receive" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: activity.map((item) => /* @__PURE__ */ jsx(
+        Entity,
+        {
+          className: "px-0",
+          leading: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "block size-8 rounded-full",
+              style: { background: `oklch(from var(--tone-${item.tone}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h)` }
+            }
+          ),
+          title: item.title,
+          subtitle: item.detail,
+          action: /* @__PURE__ */ jsx("span", { className: cn("text-mono-md", item.amount.startsWith("+") ? "text-success" : "text-muted-foreground"), children: item.amount })
+        },
+        item.title
+      )) })
+    ] })
+  ] });
+}
+export {
+  WalletBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/wallet-block.meta.ts
+var walletBlockMeta = {
+  name: "WalletBlock",
+  family: "Commerce",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A balance card: the balance in the metric mono tier, Send and Receive as an equal pair, and recent activity as Entity rows with signed amounts.",
+  intent: "Reach for this for a wallet, account balance or credits summary with its latest movements. For a full transaction history with filters, use a DataTable.",
+  notes: [
+    "The balance is CardTitle at `text-mono-xl` \u2014 tabular figures, never a heading tier \u2014 under its label as CardDescription.",
+    "Send is primary and Receive secondary, side by side at equal width: two directions of one action, with sending the riskier and more frequent.",
+    "Incoming amounts are `text-success`; outgoing stay muted rather than red, because a withdrawal is not an error."
+  ],
+  a11y: [
+    "Each activity row's leading swatch is aria-hidden; the title and detail carry the meaning.",
+    "Amounts keep their sign in text (+0.80 / -1.50), so the direction does not depend on colour."
+  ]
+};
+export {
+  walletBlockMeta
+};