@sableui/react 0.9.1 → 0.10.0

package/dist/components/pill/pill.variants.js

@@ -1,5 +1,6 @@
 // src/components/pill/pill.variants.ts
 import { cva } from "class-variance-authority";
+import { PALETTE_COLORS } from "../../lib/palette.js";
 var pillVariants = cva(
   /*
    * The asymmetric `pt-[0.23em] pb-[0.1em]` is the LEGACY optical correction: a
@@ -31,6 +32,20 @@ var pillVariants = cva(
       selected: {
         true: "",
         false: ""
+      },
+      // `neutral` is the chip as described above. A palette family is a
+      // category colour (a tag someone picks): the chip paints from the slots
+      // its data-palette scope fills, so no step is named here.
+      tone: {
+        neutral: "",
+        red: "",
+        orange: "",
+        yellow: "",
+        green: "",
+        teal: "",
+        blue: "",
+        purple: "",
+        pink: ""
       }
     },
     compoundVariants: [
@@ -51,12 +66,18 @@ var pillVariants = cva(
         // Transparent on whatever it sits on; the hover is derived from that
         // surface (sable-surface-interactive), not a fixed accent fill.
         class: "border-border text-muted-foreground sable-surface-interactive"
-      }
+      },
+      // After the neutral looks, so cn's merge lets these win.
+      { appearance: "solid", selected: false, tone: [...PALETTE_COLORS], class: "bg-palette-wash text-palette-text hover:bg-palette-wash-strong hover:text-palette-text" },
+      { appearance: "solid", selected: true, tone: [...PALETTE_COLORS], class: "bg-palette-solid text-palette-solid-ink hover:bg-palette-solid" },
+      { appearance: "outline", selected: false, tone: [...PALETTE_COLORS], class: "border-palette-edge text-palette-text" },
+      { appearance: "outline", selected: true, tone: [...PALETTE_COLORS], class: "border-palette-edge bg-palette-wash text-palette-text hover:bg-palette-wash-strong" }
     ],
     defaultVariants: {
       appearance: "solid",
       size: "md",
-      selected: false
+      selected: false,
+      tone: "neutral"
     }
   }
 );

package/dist/components/popover/popover.meta.js

@@ -123,11 +123,11 @@ var popoverMeta = {
   examples: [
     {
       label: "Basic",
-      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Edition details</PopoverTitle><PopoverDescription>A limited run of 100, stored permanently on Arweave.</PopoverDescription></PopoverContent></Popover>'
+      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Plan details</PopoverTitle><PopoverDescription>Up to 10 seats, billed monthly per seat.</PopoverDescription></PopoverContent></Popover>'
     },
     {
       label: "With close",
-      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Collecting mints a compressed NFT to your wallet.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>'
+      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Upgrading starts a new billing period today.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>'
     }
   ]
 };

package/dist/components/radar-chart/radar-chart.meta.js

@@ -144,9 +144,9 @@ var radarChartMeta = {
     }
   ],
   tokensUsed: [
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "tone-warning",
     "primary",

package/dist/components/radial-chart/radial-chart.meta.js

@@ -156,9 +156,9 @@ var radialChartMeta = {
     }
   ],
   tokensUsed: [
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "tone-warning",
     "primary",

package/dist/components/radio/radio.meta.js

@@ -80,7 +80,7 @@ var radioMeta = {
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal"><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal"><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>`
@@ -92,7 +92,7 @@ var radioMeta = {
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal" disabled><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal" disabled><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>`

package/dist/components/radio-card/radio-card.meta.js

@@ -77,7 +77,7 @@ var radioCardMeta = {
     },
     {
       name: "tone",
-      type: '"neutral" | "standard" | "collectible" | "edition" | "info" | "warning"',
+      type: '"neutral" | "3" | "2" | "1" | "info" | "warning"',
       default: '"neutral"',
       description: "Semantic colour the selected state carries across the border, radio, and icon glyph. Neutral uses the primary ring with a muted wash."
     },
@@ -106,7 +106,7 @@ var radioCardMeta = {
     }
   ],
   variants: {
-    tone: ["neutral", "standard", "collectible", "edition", "info", "warning"]
+    tone: ["neutral", "3", "2", "1", "info", "warning"]
   },
   tokensUsed: [
     "input",
@@ -116,9 +116,9 @@ var radioCardMeta = {
     "muted",
     "ring",
     "muted-foreground",
-    "tone-standard",
-    "tone-collectible",
-    "tone-edition",
+    "tone-3",
+    "tone-2",
+    "tone-1",
     "tone-info",
     "tone-warning"
   ],
@@ -132,7 +132,7 @@ var radioCardMeta = {
   examples: [
     {
       label: "Post type (tone + icon)",
-      code: '<RadioGroup defaultValue="post" className="grid sm:grid-cols-3"><RadioCard value="post" tone="standard" icon={<Icon name="plus" />} title="Standard" description="Share without minting" /><RadioCard value="collectible" tone="collectible" icon={<Icon name="gem" />} title="Collectible" description="Free to collect as NFT" /><RadioCard value="edition" tone="edition" icon={<Icon name="image-stack" />} title="Edition" description="Sell as NFT editions" /></RadioGroup>'
+      code: '<RadioGroup defaultValue="starter" className="grid sm:grid-cols-3"><RadioCard value="starter" tone="3" icon={<Icon name="plus" />} title="Starter" description="Free for one person" /><RadioCard value="studio" tone="2" icon={<Icon name="gem" />} title="Studio" description="For small teams" /><RadioCard value="business" tone="1" icon={<Icon name="image-stack" />} title="Business" description="SSO and audit log" /></RadioGroup>'
     },
     {
       label: "Plan picker (plain)",

package/dist/components/radio-card/radio-card.variants.js

@@ -7,23 +7,23 @@ var radioCardToneClasses = {
     dot: "bg-primary",
     glyph: "text-foreground"
   },
-  standard: {
-    card: SELECTION_CARD_CHECKED.standard,
-    marker: "group-data-[checked]:border-tone-standard",
-    dot: "bg-tone-standard",
-    glyph: "text-tone-standard"
+  "3": {
+    card: SELECTION_CARD_CHECKED["3"],
+    marker: "group-data-[checked]:border-tone-3",
+    dot: "bg-tone-3",
+    glyph: "text-tone-3"
   },
-  collectible: {
-    card: SELECTION_CARD_CHECKED.collectible,
-    marker: "group-data-[checked]:border-tone-collectible",
-    dot: "bg-tone-collectible",
-    glyph: "text-tone-collectible"
+  "2": {
+    card: SELECTION_CARD_CHECKED["2"],
+    marker: "group-data-[checked]:border-tone-2",
+    dot: "bg-tone-2",
+    glyph: "text-tone-2"
   },
-  edition: {
-    card: SELECTION_CARD_CHECKED.edition,
-    marker: "group-data-[checked]:border-tone-edition",
-    dot: "bg-tone-edition",
-    glyph: "text-tone-edition"
+  "1": {
+    card: SELECTION_CARD_CHECKED["1"],
+    marker: "group-data-[checked]:border-tone-1",
+    dot: "bg-tone-1",
+    glyph: "text-tone-1"
   },
   info: {
     card: SELECTION_CARD_CHECKED.info,

package/dist/components/scroller/scroller.meta.js

@@ -97,7 +97,7 @@ var scrollerMeta = {
   examples: [
     {
       label: "Vertical with overflow",
-      code: '<Scroller label="Editions" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>'
+      code: '<Scroller label="Projects" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>'
     },
     {
       label: "Capped, scrolls past the cap",

package/dist/components/search-input/search-input.meta.js

@@ -116,7 +116,7 @@ var searchInputMeta = {
     },
     {
       label: "Uncontrolled, sized as a whole",
-      code: '<Field label="Search posts"><SearchInput defaultValue="editions" className="max-w-80" /></Field>'
+      code: '<Field label="Search posts"><SearchInput defaultValue="roadmap" className="max-w-80" /></Field>'
     },
     {
       label: "Disabled",

package/dist/components/section-header/section-header.js

@@ -18,7 +18,7 @@ function SectionHeader({
   ...props
 }) {
   const generatedId = useId();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "section-header", className: cn("flex flex-col gap-1", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "section-header", className: cn("flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx(
       HeadingRow,
       {

package/dist/components/segmented-bar/segmented-bar.js

@@ -2,7 +2,7 @@
 import { cn } from "../../lib/cn.js";
 import { segmentedBarSegmentVariants, segmentedBarVariants } from "./segmented-bar.variants.js";
 import { jsx } from "react/jsx-runtime";
-var SEGMENTED_BAR_TONES = ["edition", "collectible", "standard", "info", "primary", "neutral"];
+var SEGMENTED_BAR_TONES = ["1", "2", "3", "info", "primary", "neutral"];
 function SegmentedBar({ segments, label, locale, size, className, ...props }) {
   const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
   const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });

package/dist/components/segmented-bar/segmented-bar.meta.js

@@ -59,12 +59,12 @@ var segmentedBarMeta = {
   ],
   variants: {
     size: ["sm", "md", "lg"],
-    tone: ["edition", "collectible", "standard", "info", "primary", "neutral", "success", "warning", "destructive"]
+    tone: ["1", "2", "3", "info", "primary", "neutral", "success", "warning", "destructive"]
   },
   tokensUsed: [
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "primary",
     "muted-foreground",
@@ -89,13 +89,13 @@ var segmentedBarMeta = {
     { slot: "activity", recipe: "none", part: "SegmentedBar", why: "No indeterminate state \u2014 an unknown breakdown is not drawn." }
   ],
   a11y: [
-    'Rendered role=img with an aria-label built from `label` and each segment\'s share ("Revenue by type: Editions 42%, Collectibles 27%"), so the whole breakdown is read in one stop.',
+    'Rendered role=img with an aria-label built from `label` and each segment\'s share ("Revenue by channel: Direct 42%, Partners 27%"), so the whole breakdown is read in one stop.',
     "Colour alone does not identify a segment: always show a legend with each segment's label beside the bar."
   ],
   examples: [
     {
       label: "With a legend",
-      code: 'const sales = [\n	{ label: "Editions", value: 42, tone: "edition" },\n	{ label: "Collectibles", value: 27, tone: "collectible" },\n	{ label: "Standard", value: 19, tone: "standard" },\n] as const\n\n<Stack gap={3}>\n	<SegmentedBar label="Revenue by type" segments={[...sales]} size="lg" />\n	<ul className="flex flex-col gap-1.5">\n		{sales.map((s) => (\n			<li key={s.label} className="flex items-center gap-2 text-body-sm">\n				<StatusDot tone={s.tone} />\n				<span className="flex-1 text-muted-foreground">{s.label}</span>\n				<span className="text-mono-caption">{s.value}%</span>\n			</li>\n		))}\n	</ul>\n</Stack>'
+      code: 'const sales = [\n	{ label: "Direct", value: 42, tone: "1" },\n	{ label: "Partners", value: 27, tone: "2" },\n	{ label: "Referrals", value: 19, tone: "3" },\n] as const\n\n<Stack gap={3}>\n	<SegmentedBar label="Revenue by channel" segments={[...sales]} size="lg" />\n	<ul className="flex flex-col gap-1.5">\n		{sales.map((s) => (\n			<li key={s.label} className="flex items-center gap-2 text-body-sm">\n				<StatusDot tone={s.tone} />\n				<span className="flex-1 text-muted-foreground">{s.label}</span>\n				<span className="text-mono-caption">{s.value}%</span>\n			</li>\n		))}\n	</ul>\n</Stack>'
     },
     {
       label: "Test results \u2014 status tones",

package/dist/components/segmented-bar/segmented-bar.variants.js

@@ -5,9 +5,9 @@ var segmentedBarSegmentVariants = cva(
   {
     variants: {
       tone: {
-        edition: "bg-tone-edition",
-        collectible: "bg-tone-collectible",
-        standard: "bg-tone-standard",
+        "1": "bg-tone-1",
+        "2": "bg-tone-2",
+        "3": "bg-tone-3",
         info: "bg-tone-info",
         primary: "bg-primary",
         neutral: "bg-muted-foreground",
@@ -17,7 +17,7 @@ var segmentedBarSegmentVariants = cva(
       }
     },
     defaultVariants: {
-      tone: "standard"
+      tone: "3"
     }
   }
 );

package/dist/components/select/select.meta.js

@@ -176,11 +176,11 @@ var selectMeta = {
     },
     {
       label: "Inside Field",
-      code: '<Field label="Default visibility" description="Controls how new editions appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>'
+      code: '<Field label="Default visibility" description="Controls how new projects appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>'
     },
     {
       label: "Rich item labels",
-      code: '<Select defaultValue="edition" items={[{ value: "edition", label: "Edition" }, { value: "collectible", label: "Collectible" }]}><SelectTrigger /><SelectContent><SelectItem value="edition" label="Edition"><span className="flex items-center gap-2"><Badge tone="edition">Edition</Badge><span>Edition drop</span></span></SelectItem><SelectItem value="collectible" label="Collectible"><span className="flex items-center gap-2"><Badge tone="collectible">Collectible</Badge><span>Collectible</span></span></SelectItem></SelectContent></Select>'
+      code: '<Select defaultValue="business" items={[{ value: "business", label: "Business" }, { value: "studio", label: "Studio" }]}><SelectTrigger /><SelectContent><SelectItem value="business" label="Business"><span className="flex items-center gap-2"><Badge tone="1">Business</Badge><span>Business plan</span></span></SelectItem><SelectItem value="studio" label="Studio"><span className="flex items-center gap-2"><Badge tone="2">Studio</Badge><span>Studio</span></span></SelectItem></SelectContent></Select>'
     }
   ]
 };

package/dist/components/sheet/sheet.meta.js

@@ -158,7 +158,7 @@ var sheetMeta = {
     },
     {
       label: "Bottom side",
-      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Edition details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>'
+      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Order details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>'
     }
   ]
 };

package/dist/components/side-nav/side-nav.meta.js

@@ -122,7 +122,7 @@ var sideNavMeta = {
     },
     {
       label: "Chrome-weight rail (size=lg)",
-      code: '<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Wallets" render={<Link to="/settings/wallets" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>'
+      code: '<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Billing" render={<Link to="/settings/billing" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>'
     },
     {
       label: "Inside Sidebar chrome",

package/dist/components/sidebar/sidebar.meta.js

@@ -106,7 +106,7 @@ var sidebarMeta = {
   examples: [
     {
       label: "Rail with nav",
-      code: '<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{wallet}</SidebarFooter></Sidebar>'
+      code: '<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{account}</SidebarFooter></Sidebar>'
     },
     {
       label: "Collapsible (icon rail)",

package/dist/components/sparkline/sparkline.meta.js

@@ -60,7 +60,7 @@ var sparklineMeta = {
     },
     {
       name: "tone",
-      type: '"edition" | "collectible" | "standard" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive"',
+      type: '"1" | "2" | "3" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive"',
       default: '"primary"',
       description: "Colour by role."
     },
@@ -92,9 +92,9 @@ var sparklineMeta = {
   },
   tokensUsed: [
     "primary",
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "tone-warning",
     "muted-foreground",

package/dist/components/spinner/spinner.meta.js

@@ -109,7 +109,7 @@ var spinnerMeta = {
     },
     {
       label: "Inside a button (Button owns it \u2014 use loading)",
-      code: "<Button loading>Collecting</Button>"
+      code: "<Button loading>Saving</Button>"
     }
   ]
 };

package/dist/components/status-dot/status-dot.js

@@ -1,5 +1,6 @@
 // src/components/status-dot/status-dot.tsx
 import { cn } from "../../lib/cn.js";
+import { isPaletteColor } from "../../lib/palette.js";
 import { statusDotVariants } from "./status-dot.variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function StatusDot({
@@ -10,11 +11,13 @@ function StatusDot({
   ...props
 }) {
   const dot = statusDotVariants({ tone, size });
+  const palette = isPaletteColor(tone) ? tone : void 0;
   if (pulse) {
     return /* @__PURE__ */ jsxs(
       "span",
       {
         "aria-hidden": "true",
+        "data-palette": palette,
         className: cn("relative inline-flex shrink-0", className),
         ...props,
         children: [
@@ -32,7 +35,7 @@ function StatusDot({
       }
     );
   }
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(dot, className), ...props });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-palette": palette, className: cn(dot, className), ...props });
 }
 StatusDot.displayName = "StatusDot";
 export {

package/dist/components/status-dot/status-dot.meta.js

@@ -53,9 +53,9 @@ var statusDotMeta = {
   props: [
     {
       name: "tone",
-      type: '"neutral" | "standard" | "success" | "warning" | "info" | "edition" | "collectible" | "destructive"',
+      type: '"neutral" | "1" | "2" | "3" | "success" | "warning" | "info" | "destructive" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "purple" | "pink"',
       default: '"neutral"',
-      description: "Semantic color of the dot."
+      description: "Semantic color of the dot, or a palette family (red \u2026 pink) for a category legend."
     },
     {
       name: "size",
@@ -71,26 +71,18 @@ var statusDotMeta = {
     }
   ],
   variants: {
-    tone: [
-      "neutral",
-      "standard",
-      "success",
-      "warning",
-      "info",
-      "edition",
-      "collectible",
-      "destructive"
-    ],
+    tone: ["neutral", "1", "2", "3", "success", "warning", "info", "destructive", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"],
     size: ["sm", "md", "lg"]
   },
   tokensUsed: [
+    "palette-dot",
     "muted-foreground",
-    "tone-standard",
+    "tone-3",
     "success",
     "tone-warning",
     "tone-info",
-    "tone-edition",
-    "tone-collectible",
+    "tone-1",
+    "tone-2",
     "destructive"
   ],
   a11y: [
@@ -100,7 +92,7 @@ var statusDotMeta = {
   examples: [
     {
       label: "Tones",
-      code: '<Row gap={2}><StatusDot tone="standard" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>'
+      code: '<Row gap={2}><StatusDot tone="3" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>'
     },
     {
       label: "With label \u2014 use Badge",

package/dist/components/status-dot/status-dot.variants.js

@@ -4,13 +4,22 @@ var statusDotVariants = cva("inline-block shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-muted-foreground",
-      standard: "bg-tone-standard",
+      "3": "bg-tone-3",
       success: "bg-success",
       warning: "bg-tone-warning",
       info: "bg-tone-info",
-      edition: "bg-tone-edition",
-      collectible: "bg-tone-collectible",
-      destructive: "bg-destructive"
+      "1": "bg-tone-1",
+      "2": "bg-tone-2",
+      destructive: "bg-destructive",
+      // A palette family paints from the slot its data-palette scope fills.
+      red: "bg-palette-dot",
+      orange: "bg-palette-dot",
+      yellow: "bg-palette-dot",
+      green: "bg-palette-dot",
+      teal: "bg-palette-dot",
+      blue: "bg-palette-dot",
+      purple: "bg-palette-dot",
+      pink: "bg-palette-dot"
     },
     size: {
       sm: "size-1.5",

package/dist/components/table/table.meta.js

@@ -121,8 +121,8 @@ var tableMeta = {
   ],
   examples: [
     {
-      label: "Collectors",
-      code: "<Table>\n	<TableCaption>Recent collectors</TableCaption>\n	<TableHeader>\n		<TableRow>\n			<TableHead>Collector</TableHead>\n			<TableHead>Edition</TableHead>\n			<TableHead>Paid</TableHead>\n		</TableRow>\n	</TableHeader>\n	<TableBody>\n		<TableRow>\n			<TableCell>@nova</TableCell>\n			<TableCell>#012</TableCell>\n			<TableCell>0.5 SOL</TableCell>\n		</TableRow>\n	</TableBody>\n</Table>"
+      label: "Orders",
+      code: "<Table>\n	<TableCaption>Recent orders</TableCaption>\n	<TableHeader>\n		<TableRow>\n			<TableHead>Customer</TableHead>\n			<TableHead>Order</TableHead>\n			<TableHead>Paid</TableHead>\n		</TableRow>\n	</TableHeader>\n	<TableBody>\n		<TableRow>\n			<TableCell>@nova</TableCell>\n			<TableCell>1042</TableCell>\n			<TableCell>$48.00</TableCell>\n		</TableRow>\n	</TableBody>\n</Table>"
     },
     {
       label: "Rich status cells",
@@ -130,11 +130,11 @@ var tableMeta = {
     },
     {
       label: "Flush in a card",
-      code: "<Card><CardHeader><CardTitle>Collectors</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Collector</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>0.5 SOL</TableCell></TableRow></TableBody></Table></CardContent></Card>"
+      code: "<Card><CardHeader><CardTitle>Customers</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Customer</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>$48.00</TableCell></TableRow></TableBody></Table></CardContent></Card>"
     },
     {
       label: "Summary footer",
-      code: '<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Primary sale</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableFooter></Table>'
+      code: '<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Studio plan</TableCell><TableCell className="text-end">$192.00</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">$192.00</TableCell></TableRow></TableFooter></Table>'
     }
   ]
 };

package/dist/components/tabs/tabs.meta.js

@@ -111,7 +111,7 @@ var tabsMeta = {
     },
     {
       label: "With a disabled tab",
-      code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="holders" disabled>Holders</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>'
+      code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="billing" disabled>Billing</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>'
     }
   ]
 };

package/dist/components/textarea/textarea.meta.js

@@ -96,7 +96,7 @@ var textareaMeta = {
     },
     {
       label: "With rows",
-      code: '<Textarea rows={6} placeholder="Tell the story behind this edition\u2026" />'
+      code: '<Textarea rows={6} placeholder="Tell your team what this project is for\u2026" />'
     },
     {
       label: "Auto-resize",
@@ -108,7 +108,7 @@ var textareaMeta = {
     },
     {
       label: "Disabled",
-      code: '<Textarea disabled defaultValue="Captions lock once the edition is minted." />'
+      code: '<Textarea disabled defaultValue="Notes lock once the invoice is sent." />'
     }
   ]
 };

package/dist/components/toast/toast.meta.js

@@ -236,7 +236,7 @@ var toastMeta = {
     },
     {
       label: "Persistent loading, updated in place",
-      code: 'const id = toast.loading("Pinning to Arweave\u2026"); /* later */ toast.update(id, { title: "Pinned", type: "success", timeout: 4000 })'
+      code: 'const id = toast.loading("Uploading report\u2026"); /* later */ toast.update(id, { title: "Uploaded", type: "success", timeout: 4000 })'
     },
     {
       label: "Custom toast markup (composed parts)",

package/dist/components/tooltip/tooltip.meta.js

@@ -139,7 +139,7 @@ var tooltipMeta = {
   examples: [
     {
       label: "Basic",
-      code: '<TooltipProvider><Tooltip><TooltipTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button>} /><TooltipContent>Stored permanently on Arweave.</TooltipContent></Tooltip></TooltipProvider>'
+      code: '<TooltipProvider><Tooltip><TooltipTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button>} /><TooltipContent>Saved to your workspace.</TooltipContent></Tooltip></TooltipProvider>'
     },
     {
       label: "Sides",
@@ -147,7 +147,7 @@ var tooltipMeta = {
     },
     {
       label: "Shorthand (SimpleTooltip)",
-      code: '<SimpleTooltip content="Stored permanently on Arweave."><Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button></SimpleTooltip>'
+      code: '<SimpleTooltip content="Saved to your workspace."><Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button></SimpleTooltip>'
     }
   ]
 };