@sableui/react 0.6.2 → 0.7.1

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

@@ -0,0 +1,88 @@
+// src/blocks/pricing-table-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, 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 { Grid, Region, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tiers = [
+  {
+    id: "starter",
+    name: "Starter",
+    blurb: "For one person shipping their first editions.",
+    monthly: 0,
+    yearly: 0,
+    cta: "Start for free",
+    featured: false,
+    features: ["3 live editions", "Collector profiles", "Community support"]
+  },
+  {
+    id: "studio",
+    name: "Studio",
+    blurb: "For working artists with a steady release schedule.",
+    monthly: 20,
+    yearly: 16,
+    cta: "Start free trial",
+    featured: true,
+    features: ["Unlimited editions", "Scheduled drops", "Sales analytics", "Priority support"]
+  },
+  {
+    id: "collective",
+    name: "Collective",
+    blurb: "For galleries and teams releasing together.",
+    monthly: 48,
+    yearly: 40,
+    cta: "Talk to sales",
+    featured: false,
+    features: ["Everything in Studio", "Up to 10 seats", "Shared payouts", "Roles and approvals"]
+  }
+];
+function PricingTableBlock({ className, onChoose }) {
+  const [period, setPeriod] = useState("yearly");
+  const titleId = useId();
+  return /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": titleId, max: "wide", className: cn("w-full py-16", className), children: /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-balance text-heading-1", children: "Pricing that grows with your practice" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Every plan includes unlimited collectors and no fees on your first $1,000 in sales." }),
+      /* @__PURE__ */ jsxs(ToggleGroup, { value: [period], onValueChange: (v) => v[0] && setPeriod(v[0]), "aria-label": "Billing period", children: [
+        /* @__PURE__ */ jsx(Toggle, { value: "monthly", children: "Monthly" }),
+        /* @__PURE__ */ jsx(Toggle, { value: "yearly", children: "Yearly \xB7 save 20%" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { cols: { base: 1, md: 3 }, gap: 4, className: "items-stretch", children: tiers.map((tier) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        render: /* @__PURE__ */ jsx("article", {}),
+        className: cn("flex flex-col", tier.featured && "border-primary ring-1 ring-primary"),
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h3", {}), children: tier.name }),
+            /* @__PURE__ */ jsx(CardDescription, { children: tier.blurb }),
+            tier.featured ? /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "edition", size: "sm", children: "Most popular" }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col gap-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-heading-2", children: [
+                "$",
+                tier[period]
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: "per seat / month" })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 text-body-sm", children: tier.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(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: tier.featured ? "primary" : "outline", onClick: () => onChoose?.(tier.id, period), children: tier.cta }) })
+        ]
+      },
+      tier.id
+    )) })
+  ] }) });
+}
+export {
+  PricingTableBlock
+};

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

@@ -0,0 +1,20 @@
+// src/blocks/pricing-table-block.meta.ts
+var pricingTableBlockMeta = {
+  name: "PricingTableBlock",
+  family: "Commerce",
+  kind: "section",
+  summary: 'A three-tier pricing section: heading, a Monthly/Yearly ToggleGroup, and three equal-height plan cards with the recommended one outlined in primary and badged "Most popular".',
+  intent: "Reach for this on a pricing page or the pricing band of a landing page, to compare plans side by side. A single plan on offer (an upgrade prompt, a paywall) is PricingCardBlock.",
+  notes: [
+    "One featured tier at most: it takes the primary button and a primary outline; the others take outline buttons so the recommendation is unmistakable.",
+    "Cards stretch to the tallest one and push their buttons to the bottom, so the calls to action line up across the row.",
+    "The yearly saving is stated in the toggle itself, where the choice is made. `onChoose` receives the tier id and the period showing."
+  ],
+  a11y: [
+    "Each plan is an <article> with an h3 under the section's h2, so the tiers are navigable by heading.",
+    'The ToggleGroup is labelled "Billing period"; prices update in place and stay in the reading order of each card.'
+  ]
+};
+export {
+  pricingTableBlockMeta
+};

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

@@ -0,0 +1,26 @@
+// src/blocks/product-card-block.tsx
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { MediaImage } from "../components/media-image/index.js";
+import { AspectBox } from "../layout/AspectBox.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var product = { title: "Untitled (gold rush)", maker: "Mara Okafor", image: "", edition: "12 of 50", price: "0.42 SOL" };
+function ProductCardBlock({ className, framed = true, onCollect }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx(AspectBox, { ratio: 4 / 3, children: /* @__PURE__ */ jsx(MediaImage, { src: product.image, seed: product.title }) }),
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: product.title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: product.maker }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "edition", children: product.edition }) })
+    ] }),
+    /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between pt-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-mono-lg", children: product.price }),
+      /* @__PURE__ */ jsx(Button, { onClick: onCollect, children: "Collect" })
+    ] })
+  ] });
+}
+export {
+  ProductCardBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/product-card-block.meta.ts
+var productCardBlockMeta = {
+  name: "ProductCardBlock",
+  family: "Commerce",
+  kind: "card",
+  width: { min: "16rem", max: "20rem" },
+  summary: "A product card: edge-to-edge artwork, title and maker, an edition Badge, and the price beside a single buy action.",
+  intent: "Reach for this for a product, edition or listing in a grid or a featured slot. For a row in a dense list, use an Entity with the image as `leading` instead.",
+  notes: [
+    "The artwork runs to the card's edges; the card clips it to its own corners (overflow-hidden).",
+    "Prices are `text-mono-lg` \u2014 the metric mono tier with tabular figures \u2014 never a heading tier.",
+    "The placeholder art is painted from the palette's decorative tones so it follows the theme; swap it for the product image with real alt text."
+  ],
+  a11y: [
+    "The placeholder art is aria-hidden. A real product image needs alt text naming the product.",
+    "The card is not a link: it holds its own button. To make the whole card navigate, move the action to the detail page and render the Card as an <a>."
+  ]
+};
+export {
+  productCardBlockMeta
+};

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

@@ -0,0 +1,58 @@
+// src/blocks/profile-card-block.tsx
+import { useState } from "react";
+import { Avatar } from "../components/avatar/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardTitle } from "../components/card/index.js";
+import { GradientArt } from "../components/gradient-art/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var profile = {
+  name: "Juno Avery",
+  initials: "JA",
+  handle: "@juno \xB7 Sound and light",
+  bio: "Field recordings, slowed down. New edition every full moon.",
+  stats: [
+    { value: "128", label: "posts" },
+    { value: "4.2k", label: "followers" }
+  ]
+};
+function ProfileCardBlock({ className, framed = true, onFollowChange, onShare }) {
+  const [following, setFollowing] = useState(false);
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx(GradientArt, { "aria-hidden": true, seed: profile.handle, className: "h-20" }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3 pt-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: profile.initials, alt: profile.name, className: "-mt-6 ring-4 ring-card" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 pt-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Share profile", onClick: onShare, children: /* @__PURE__ */ jsx(Icon, { name: "share" }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: following ? "secondary" : "primary",
+              onClick: () => {
+                setFollowing(!following);
+                onFollowChange?.(!following);
+              },
+              children: following ? "Following" : "Follow"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: profile.name }),
+        /* @__PURE__ */ jsx(CardDescription, { children: profile.handle })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-sm", children: profile.bio }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-4 text-body-sm", children: profile.stats.map((s) => /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-label-lg", children: s.value }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: s.label })
+      ] }, s.label)) })
+    ] })
+  ] });
+}
+export {
+  ProfileCardBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/profile-card-block.meta.ts
+var profileCardBlockMeta = {
+  name: "ProfileCardBlock",
+  family: "Social & messaging",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A profile card: a cover banner, an avatar rising into it, Share and Follow, the name and handle, a one-line bio and two counts.",
+  intent: "Reach for this for a person or creator summary \u2014 a suggested-follow card, a hover target's full view, the top of a profile sidebar. For a small inline preview on hover, use ContextCard; for a row in a list of people, use Entity.",
+  notes: [
+    "The avatar overlaps the banner by half its height with a ring in the card colour, so it reads as sitting on the card, not pasted over the art.",
+    "Follow is the one primary action and flips to a secondary Following once pressed; Share is an icon-only ghost Button beside it.",
+    "Counts pair a label-tier number with muted body text, so the numbers scan as a row."
+  ],
+  a11y: [
+    "The Share button carries aria-label; Follow's visible text changes with its state.",
+    "The banner is decorative (aria-hidden); the Avatar's alt is the person's name."
+  ]
+};
+export {
+  profileCardBlockMeta
+};

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

@@ -0,0 +1,70 @@
+// src/blocks/profile-form-block.tsx
+import { Avatar } from "../components/avatar/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { Field, Form } from "../components/form/index.js";
+import { Input } from "../components/input/index.js";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../components/select/index.js";
+import { Textarea } from "../components/textarea/index.js";
+import { cn } from "../lib/cn.js";
+import { Grid, Row, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var profile = {
+  name: "Ada Lovelace",
+  initials: "AL",
+  handle: "ada",
+  bio: "Generative artist working in plotted ink and code. New editions of 25 to 100 every month.",
+  timezone: "europe-london"
+};
+var timezones = [
+  { value: "europe-london", label: "London (GMT+1)" },
+  { value: "europe-paris", label: "Paris (GMT+2)" },
+  { value: "america-new-york", label: "New York (GMT\u22124)" },
+  { value: "america-los-angeles", label: "Los Angeles (GMT\u22127)" },
+  { value: "asia-tokyo", label: "Tokyo (GMT+9)" }
+];
+function ProfileFormBlock({ className, framed = true, onSave }) {
+  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: "Profile" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "How collectors see you." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Form,
+      {
+        className: "gap-0",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSave?.(new FormData(event.currentTarget));
+        },
+        children: [
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+              /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: profile.initials, alt: profile.name }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 0.5, align: "start", children: [
+                /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Upload photo" }),
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", children: "Remove" })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "Square PNG or JPG, at least 400 px." })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, sm: 2 }, gap: 3, children: [
+              /* @__PURE__ */ jsx(Field, { label: "Display name", name: "displayName", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: profile.name, autoComplete: "name" }) }),
+              /* @__PURE__ */ jsx(Field, { label: "Handle", name: "handle", description: `atelier.com/@${profile.handle}`, required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: profile.handle, autoComplete: "username", spellCheck: false }) })
+            ] }),
+            /* @__PURE__ */ jsx(Field, { label: "Bio", name: "bio", description: "Shown on your profile and edition pages.", children: /* @__PURE__ */ jsx(Textarea, { rows: 3, defaultValue: profile.bio }) }),
+            /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2 }, gap: 3, children: /* @__PURE__ */ jsx(Field, { label: "Timezone", name: "timezone", description: "Release times use this zone.", children: /* @__PURE__ */ jsxs(Select, { defaultValue: profile.timezone, items: timezones, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, {}),
+              /* @__PURE__ */ jsx(SelectContent, { children: timezones.map((zone) => /* @__PURE__ */ jsx(SelectItem, { value: zone.value, children: zone.label }, zone.value)) })
+            ] }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ProfileFormBlock
+};

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

@@ -0,0 +1,21 @@
+// src/blocks/profile-form-block.meta.ts
+var profileFormBlockMeta = {
+  name: "ProfileFormBlock",
+  family: "Settings & team",
+  kind: "card",
+  width: { min: "20rem", max: "42rem" },
+  summary: "A profile settings card: avatar with upload/remove, name and handle side by side, a bio, a timezone Select, and one Save profile in the footer.",
+  intent: "Reach for this for the profile or account section of settings, or any form of drafted text that is committed together. Toggles that apply instantly belong in NotificationSettingsBlock, never behind this Save.",
+  notes: [
+    "Copied from the SettingsPage page shell's Profile section; the shell keeps its own copy so it stays one self-contained file.",
+    "One explicit save for the whole card. Short pairs (name + handle) sit side by side from sm up with Grid cols={{ base: 1, sm: 2 }}.",
+    "The CardTitle renders an h2, so the section joins the page outline under its h1."
+  ],
+  a11y: [
+    "Field wires label, description and error to each control; the handle's URL preview is its description.",
+    'The photo actions are type="button", so neither one submits the form.'
+  ]
+};
+export {
+  profileFormBlockMeta
+};

package/dist/blocks/revenue-breakdown-block.js

@@ -0,0 +1,38 @@
+// src/blocks/revenue-breakdown-block.tsx
+import { Badge } from "../components/badge/index.js";
+import { Card, CardAction, CardContent, CardDescription, CardHeader } from "../components/card/index.js";
+import { SegmentedBar } from "../components/segmented-bar/index.js";
+import { StatusDot } from "../components/status-dot/index.js";
+import { cn } from "../lib/cn.js";
+import { Grid } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var revenue = { label: "Revenue this month", total: "$12,480", change: "+8.2%" };
+var segments = [
+  { label: "Editions", value: 42, tone: "edition" },
+  { label: "Collectibles", value: 27, tone: "collectible" },
+  { label: "Standard", value: 19, tone: "standard" },
+  { label: "Commissions", value: 12, tone: "info" }
+];
+function RevenueBreakdownBlock({ 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(CardDescription, { children: revenue.label }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", children: revenue.change }) })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4 pt-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-mono-xl", children: revenue.total }),
+      /* @__PURE__ */ jsx(SegmentedBar, { label: "Revenue by type", segments: [...segments], size: "lg" }),
+      /* @__PURE__ */ jsx(Grid, { "aria-hidden": true, minItemWidth: "9.5em", gap: "calc(var(--spacing) * 1.5) calc(var(--spacing) * 4)", children: segments.map((s) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-body-sm", children: [
+        /* @__PURE__ */ jsx(StatusDot, { tone: s.tone }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }),
+        /* @__PURE__ */ jsxs("span", { className: "text-mono-caption", children: [
+          s.value,
+          "%"
+        ] })
+      ] }, s.label)) })
+    ] })
+  ] });
+}
+export {
+  RevenueBreakdownBlock
+};

package/dist/blocks/revenue-breakdown-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/revenue-breakdown-block.meta.ts
+var revenueBreakdownBlockMeta = {
+  name: "RevenueBreakdownBlock",
+  family: "Dashboard",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: "A stat card with a breakdown: the KPI in the metric mono tier, its trend Badge, a SegmentedBar of how the total divides, and a StatusDot legend.",
+  intent: "Reach for this when a headline number is worth splitting into a few categories \u2014 revenue by product, storage by type, tickets by priority. A plain KPI with no split is a smaller stat card (see DashboardPage's stat row).",
+  notes: [
+    "The value is `text-mono-xl` \u2014 tabular figures, never a heading tier \u2014 and the label above it is CardDescription.",
+    "The legend reflows from two columns to one by measuring in em, so larger type or a narrower card never truncates a label.",
+    "Each category keeps the same tone in the bar and its legend dot; reuse those tones wherever the category appears."
+  ],
+  a11y: [
+    "The SegmentedBar is one image whose name reads every share; the legend repeats it visually and is aria-hidden so it is not announced twice.",
+    "The trend Badge states the change as text (+8.2%), not by colour."
+  ]
+};
+export {
+  revenueBreakdownBlockMeta
+};

package/dist/blocks/sign-in-block.js

@@ -0,0 +1,38 @@
+// src/blocks/sign-in-block.tsx
+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 { Separator } from "../components/separator/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SignInBlock({ className, framed = true, onSignIn }) {
+  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: "Welcome back" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Sign in to pick up where you left off." })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "flex flex-col gap-4",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSignIn?.("password");
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Input, { name: "email", type: "email", autoComplete: "email", placeholder: "you@studio.com", "aria-label": "Email" }),
+            /* @__PURE__ */ jsx(Input, { name: "password", type: "password", autoComplete: "current-password", placeholder: "Password", "aria-label": "Password" })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", children: "Sign in" }),
+          /* @__PURE__ */ jsx(Separator, { label: "or" }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "lock" }), onClick: () => onSignIn?.("passkey"), children: "Use a passkey" })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  SignInBlock
+};

package/dist/blocks/sign-in-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/sign-in-block.meta.ts
+var signInBlockMeta = {
+  name: "SignInBlock",
+  family: "Auth",
+  kind: "card",
+  width: { min: "18rem", max: "20rem" },
+  summary: 'A sign-in card: email and password, a primary Sign in, and a passkey alternative under an "or" separator.',
+  intent: "Reach for this wherever someone signs in inside a surface you already have \u2014 a Sheet, a Dialog, a gated panel. For a whole sign-in route with brand art beside the form, start from the AuthPage page shell instead.",
+  notes: [
+    "One primary action. The passkey is an outline Button under a labelled Separator, so it reads as an alternative, not a second submit.",
+    "The fields are a real <form>: Enter submits, and the browser's password manager recognises the autocomplete hints.",
+    "framed={false} keeps the padding and drops the surface, for a Sheet or Dialog that is already the frame."
+  ],
+  a11y: [
+    "Inputs carry aria-label because the design shows placeholders, not visible labels; add Field labels if your brief wants them visible.",
+    '`onSignIn` receives "password" or "passkey", so focus and error handling stay with the caller\'s auth flow.'
+  ]
+};
+export {
+  signInBlockMeta
+};

package/dist/blocks/sign-up-block.js

@@ -0,0 +1,48 @@
+// src/blocks/sign-up-block.tsx
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { Field, Form } from "../components/form/index.js";
+import { Input } from "../components/input/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SignUpBlock({ className, framed = true, onSignUp }) {
+  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: "Create your account" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Free for 14 days. No card needed." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Form,
+      {
+        className: "gap-0",
+        onSubmit: (event) => {
+          event.preventDefault();
+          const data = new FormData(event.currentTarget);
+          onSignUp?.({
+            name: String(data.get("name") ?? ""),
+            email: String(data.get("email") ?? ""),
+            password: String(data.get("password") ?? "")
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Name", name: "name", required: true, children: /* @__PURE__ */ jsx(Input, { autoComplete: "name" }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Work email", name: "email", required: true, children: /* @__PURE__ */ jsx(Input, { type: "email", autoComplete: "email", placeholder: "you@studio.com" }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Password", name: "password", description: "At least 12 characters.", required: true, children: /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", minLength: 12 }) })
+          ] }),
+          /* @__PURE__ */ jsxs(CardFooter, { className: "flex-col items-stretch gap-3", children: [
+            /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", children: "Create account" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-center text-caption text-muted-foreground", children: [
+              "Already have an account?",
+              " ",
+              /* @__PURE__ */ jsx("a", { href: "/sign-in", className: "text-foreground underline underline-offset-4 motion-interactive hover:text-muted-foreground", children: "Sign in" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SignUpBlock
+};

package/dist/blocks/sign-up-block.meta.js

@@ -0,0 +1,21 @@
+// src/blocks/sign-up-block.meta.ts
+var signUpBlockMeta = {
+  name: "SignUpBlock",
+  family: "Auth",
+  kind: "card",
+  width: { min: "18rem", max: "24rem" },
+  summary: "A sign-up card: name, work email and password as labelled Fields, one full-width Create account, and a link to sign in instead.",
+  intent: "Reach for this to create an account inside a surface you already have, or as the form of a sign-up route. For the whole route with brand art beside it, start from the AuthPage page shell and drop this card in.",
+  notes: [
+    "Visible labels, not placeholders: someone filling a new form needs to see what each field is after typing in it.",
+    "The password rule is stated up front in the Field description, before anyone fails it.",
+    "`onSignUp` receives the fields only after the browser's own validation (required, type=email, minLength) passes."
+  ],
+  a11y: [
+    "Field wires each label, description and error to its input; never hand-roll <label> + <input> pairs.",
+    "autoComplete hints (name, email, new-password) let password managers offer to generate and save the password."
+  ]
+};
+export {
+  signUpBlockMeta
+};

package/dist/blocks/site-footer-block.js

@@ -0,0 +1,54 @@
+// src/blocks/site-footer-block.tsx
+import { cn } from "../lib/cn.js";
+import { Region, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var brand = { name: "Sable", tagline: "React components, patterns, and tokens for products built with AI agents." };
+var groups = [
+  {
+    title: "Product",
+    links: [
+      { label: "Components", href: "/components" },
+      { label: "Patterns", href: "/patterns" },
+      { label: "Themes", href: "/themes" },
+      { label: "Canvas", href: "/canvas" }
+    ]
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Documentation", href: "/docs" },
+      { label: "Changelog", href: "/changelog" },
+      { label: "llms.txt", href: "/llms.txt" }
+    ]
+  },
+  {
+    title: "Community",
+    links: [
+      { label: "GitHub", href: "/github" },
+      { label: "npm", href: "/npm" },
+      { label: "Discussions", href: "/discussions" }
+    ]
+  }
+];
+function SiteFooterBlock({ className }) {
+  return /* @__PURE__ */ jsx("footer", { className: cn("w-full border-t border-border", className), children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-12", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-10 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-xs", children: [
+        /* @__PURE__ */ jsx("a", { href: "/", className: "w-fit text-title-lg motion-interactive hover:text-muted-foreground", children: brand.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: brand.tagline })
+      ] }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid grid-cols-2 gap-8 sm:grid-cols-3", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-label-md text-muted-foreground", children: group.title }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-col gap-1", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: "flex min-h-9 items-center text-body-sm motion-interactive hover:text-muted-foreground", children: link.label }) }, link.label)) })
+      ] }, group.title)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ jsxs("p", { className: "text-caption text-muted-foreground", children: [
+      "\xA9 2026 ",
+      brand.name,
+      ". Released under the MIT license."
+    ] }) })
+  ] }) });
+}
+export {
+  SiteFooterBlock
+};

package/dist/blocks/site-footer-block.meta.js

@@ -0,0 +1,20 @@
+// src/blocks/site-footer-block.meta.ts
+var siteFooterBlockMeta = {
+  name: "SiteFooterBlock",
+  family: "Marketing",
+  kind: "section",
+  summary: "A site footer: the brand and a one-line tagline beside link groups in a labelled Footer nav, over a copyright line.",
+  intent: "Reach for this at the foot of a marketing or docs site. App screens inside an AppShell take no footer; their navigation lives in the sidebar.",
+  notes: [
+    "Copied from the LandingPage page shell's footer.",
+    "Every link is at least 36px tall (min-h-9), so the dense list is still an easy touch target.",
+    "Groups go two up on a phone and three up from sm; add a group only if it has three links or more."
+  ],
+  a11y: [
+    `Renders <footer> with a <nav aria-label="Footer">, distinct from the page's main navigation.`,
+    "Group titles are h2s, so the footer's structure is navigable by heading."
+  ]
+};
+export {
+  siteFooterBlockMeta
+};

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

@@ -0,0 +1,28 @@
+// src/blocks/stat-row-block.tsx
+import { Badge } from "../components/badge/index.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/card/index.js";
+import { Icon } from "../icon/index.js";
+import { cn } from "../lib/cn.js";
+import { Grid, Row } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var stats = [
+  { label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, note: "vs. $16,857" },
+  { label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
+  { label: "Collectors", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+  { label: "Sell-through", value: "64%", delta: "\u22121.8%", up: false, note: "6 open editions" }
+];
+function StatRowBlock({ className }) {
+  return /* @__PURE__ */ jsx(Grid, { cols: { base: 2, xl: 4 }, gap: 3, className: cn("w-full", className), children: stats.map((stat) => /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardDescription, { children: stat.label }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: stat.value })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Row, { gap: 1, wrap: true, children: [
+      /* @__PURE__ */ jsx(Badge, { tone: stat.up ? "success" : "warning", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: stat.up ? "arrow-up" : "arrow-down" }), children: stat.delta }),
+      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: stat.note })
+    ] }) })
+  ] }, stat.label)) });
+}
+export {
+  StatRowBlock
+};