@sableui/react 0.9.0 → 0.10.0

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/stepper/stepper.js

@@ -33,6 +33,10 @@ function Stepper({
 }) {
   const items = Children.toArray(children).filter(isValidElement);
   const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
+  const hasCurrent = items.some((child, index) => {
+    const own = child.props.status;
+    return (own ?? (index < current ? "complete" : index === current ? "current" : "upcoming")) === "current";
+  });
   return /* @__PURE__ */ jsx(
     "ol",
     {
@@ -55,7 +59,8 @@ function Stepper({
             current,
             orientation,
             indicator,
-            statusLabels: labels
+            statusLabels: labels,
+            hasCurrent
           },
           children: child
         },
@@ -84,6 +89,7 @@ function StepperItem({
   const isLast = index === count - 1;
   const isCurrent = index === current;
   const statusLabel = (ctx?.statusLabels ?? DEFAULT_STATUS_LABELS)[status];
+  const hasCurrent = ctx?.hasCurrent ?? true;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     dot ? (
       // One title line tall (the step carries the title's type), so the dot
@@ -99,7 +105,10 @@ function StepperItem({
           // Narrow and horizontal: three two-word titles wrapped under their
           // connectors at 390px. The current step keeps its title; the rest
           // are discs on screen and full titles to a screen reader.
-          orientation === "horizontal" && !isCurrent && "@max-md/stepper:sr-only"
+          // Keyed on the resolved status, not the index: a flow driven by each
+          // step's `status`, or finished (`current` past the end), still keeps
+          // the right title, or every title when no step is current.
+          orientation === "horizontal" && status !== "current" && hasCurrent && "@max-md/stepper:sr-only"
         ),
         children: [
           /* @__PURE__ */ jsxs(

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.js

@@ -121,6 +121,7 @@ function ToastRoot({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Base.Root,
     {
+      "data-sable-toast-stacked": stacked ? "" : void 0,
       className: cn(
         "flex w-full gap-3 rounded-md border border-border-floating bg-popover p-4 text-popover-foreground shadow-xl",
         stacked ? [STACKED_ROOT, STACKED_EDGE[edgeOf(position)]] : ENTER_MOTION[position],

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>'
     }
   ]
 };