@sableui/react 0.6.2 → 0.7.1

package/dist/components/badge/badge.meta.js

@@ -0,0 +1,171 @@
+// src/components/badge/badge.meta.ts
+var badgeMeta = {
+  name: "Badge",
+  summary: "Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral or a semantic tone). An optional leading icon, or a status dot (with pulse) for state.",
+  keywords: [
+    "badge",
+    "tag",
+    "label",
+    "status",
+    "metadata",
+    "chip",
+    "pill",
+    "tone",
+    "category"
+  ],
+  usage: {
+    description: 'Use Badge for any short static label: metadata, categories, tone-coded labels, a label on artwork (appearance="overlay"), or a status line (appearance="plain" with dot). Use Pill for a chip someone clicks, NotificationBadge for an unread count on an icon, and Banner or Toast for messages that need attention.',
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Keep badge text short: one to three words or a compact count."
+      },
+      {
+        guidance: "do",
+        description: "Use tone variants when the badge carries meaning, such as success, warning, destructive, edition, or collectible."
+      },
+      {
+        guidance: "do",
+        description: "Pair icons with text; the icon reinforces meaning but should not be the only cue."
+      },
+      {
+        guidance: "dont",
+        description: "Use a Badge as a button. If it triggers an action, use Button, Toggle, or a menu item."
+      },
+      {
+        guidance: "do",
+        description: "Choose appearance and tone separately: appearance is how loud it is (soft by default, solid for emphasis, overlay on images, plain for a status line); tone is what it means."
+      },
+      {
+        guidance: "dont",
+        description: "Stack many loud tone badges in one row; too many semantic colors compete with the actual content."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Container",
+        required: true,
+        description: "The compact pill surface carrying the tone or neutral treatment."
+      },
+      {
+        name: "Label",
+        required: true,
+        description: "Short visible text that names the category, state, role, or metadata value."
+      },
+      {
+        name: "Icon",
+        required: false,
+        description: "Optional leading Icon used to reinforce the label."
+      }
+    ]
+  },
+  related: {
+    components: ["Pill", "StatusDot", "NotificationBadge", "Banner", "Toast"],
+    patterns: ["DashboardPage", "ListDetailPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "appearance",
+      type: '"soft" | "outline" | "solid" | "overlay" | "plain"',
+      default: '"soft"',
+      description: "How it is drawn. soft: a tinted fill (neutral is the secondary surface). outline: a hairline. solid: the tone at full strength (neutral is the inverted chip). overlay: legible on images \u2014 a dark scrim, or the solid tone. plain: no fill or padding, a status line."
+    },
+    {
+      name: "tone",
+      type: '"neutral" | "standard" | "collectible" | "edition" | "info" | "success" | "warning" | "destructive"',
+      default: '"neutral"',
+      description: "What it means. Every appearance takes every tone."
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      default: '"md"',
+      description: '"sm" uses tighter padding + text-label-sm; "md" is the default look.'
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      description: 'Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap. Ignored when dot is set.'
+    },
+    {
+      name: "dot",
+      type: "boolean",
+      default: "false",
+      description: `A leading status dot in the badge's tone. With appearance="plain" it is a status line (\u25CF Ready).`
+    },
+    {
+      name: "pulse",
+      type: "boolean",
+      default: "false",
+      description: "Pulse the dot, for a state in progress. Needs dot."
+    }
+  ],
+  variants: {
+    appearance: ["soft", "outline", "solid", "overlay", "plain"],
+    tone: ["neutral", "standard", "collectible", "edition", "info", "success", "warning", "destructive"],
+    size: ["sm", "md"]
+  },
+  tokensUsed: [
+    "secondary",
+    "secondary-foreground",
+    "border",
+    "foreground",
+    "background",
+    "muted",
+    "muted-foreground",
+    "tone-standard",
+    "tone-collectible",
+    "tone-edition",
+    "tone-info",
+    "success",
+    "tone-warning",
+    "destructive",
+    "overlay",
+    "overlay-foreground",
+    "tone-standard-foreground",
+    "tone-collectible-foreground",
+    "tone-edition-foreground",
+    "tone-info-foreground",
+    "success-foreground",
+    "tone-warning-foreground",
+    "destructive-foreground"
+  ],
+  a11y: [
+    "Badges are static text by default; do not rely on color alone for meaning.",
+    "Use clear label text for semantic tones so assistive tech receives the same status information sighted users see."
+  ],
+  examples: [
+    {
+      label: "Tones",
+      code: '<Row gap={1}><Badge tone="edition">Edition</Badge><Badge tone="collectible">Collectible</Badge><Badge tone="standard">Standard</Badge></Row>'
+    },
+    {
+      label: "Solid",
+      code: '<Badge appearance="solid" size="sm">Admin</Badge>'
+    },
+    {
+      label: "Success",
+      code: '<Badge tone="success">Resolved</Badge>'
+    },
+    {
+      label: "With icon",
+      code: '<Badge size="sm" icon={<Icon name="lock" />}>Locked</Badge>'
+    },
+    {
+      label: "Small",
+      code: '<Badge size="sm" tone="info">New</Badge>'
+    },
+    {
+      label: "Metadata row",
+      code: '<Row gap={1}><Badge>12 editions</Badge><Badge appearance="outline">Open edition</Badge><Badge tone="info" icon={<Icon name="info" />}>Curated</Badge></Row>'
+    },
+    {
+      label: "Semantic state",
+      code: '<Row gap={1}><Badge tone="success">Synced</Badge><Badge tone="warning">Review</Badge><Badge tone="destructive">Blocked</Badge></Row>'
+    }
+  ]
+};
+export {
+  badgeMeta
+};

package/dist/components/badge/badge.variants.js

@@ -0,0 +1,103 @@
+// src/components/badge/badge.variants.ts
+import { cva } from "class-variance-authority";
+var BADGE_TONES = ["neutral", "standard", "collectible", "edition", "info", "success", "warning", "destructive"];
+var BADGE_APPEARANCES = ["soft", "outline", "solid", "overlay", "plain"];
+var MATRIX = {
+  // The ink is the tone pulled a quarter of the way to the page's own ink. The
+  // raw tone clears 4.5:1 on the page, but on its own 15% wash it did not
+  // (light info 4.2:1, dark edition 3.6:1, most of Verdant's tones ~4.1:1).
+  // Mixing toward --foreground moves it AWAY from the wash in both modes and
+  // every theme, and keeps the hue. Status tones mix from their -text token,
+  // not the fill: dark fills now sit low enough for a white label, and ink
+  // mixed from them fell under 4.5:1 (Meridian dark destructive, 3.8:1).
+  soft: {
+    neutral: "bg-secondary text-secondary-foreground",
+    standard: "bg-tone-standard/15 text-[color-mix(in_oklch,var(--tone-standard)_75%,var(--foreground))]",
+    collectible: "bg-tone-collectible/15 text-[color-mix(in_oklch,var(--tone-collectible)_75%,var(--foreground))]",
+    edition: "bg-tone-edition/15 text-[color-mix(in_oklch,var(--tone-edition)_75%,var(--foreground))]",
+    info: "bg-tone-info/15 text-[color-mix(in_oklch,var(--tone-info-text)_75%,var(--foreground))]",
+    success: "bg-success/15 text-[color-mix(in_oklch,var(--success-text)_75%,var(--foreground))]",
+    warning: "bg-tone-warning/15 text-[color-mix(in_oklch,var(--tone-warning-text)_75%,var(--foreground))]",
+    destructive: "bg-destructive/15 text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
+  },
+  outline: {
+    neutral: "border border-border text-foreground",
+    standard: "border border-tone-standard/50 text-tone-standard",
+    collectible: "border border-tone-collectible/50 text-tone-collectible",
+    edition: "border border-tone-edition/50 text-tone-edition",
+    info: "border border-tone-info/50 text-tone-info",
+    success: "border border-success/50 text-success",
+    warning: "border border-tone-warning/50 text-tone-warning",
+    destructive: "border border-destructive/50 text-destructive"
+  },
+  solid: {
+    neutral: "bg-foreground text-background",
+    standard: "bg-tone-standard text-tone-standard-foreground",
+    collectible: "bg-tone-collectible text-tone-collectible-foreground",
+    edition: "bg-tone-edition text-tone-edition-foreground",
+    info: "bg-tone-info text-tone-info-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-tone-warning text-tone-warning-foreground",
+    destructive: "bg-destructive text-destructive-foreground"
+  },
+  overlay: {
+    neutral: "bg-overlay/85 text-overlay-foreground",
+    standard: "bg-tone-standard text-tone-standard-foreground",
+    collectible: "bg-tone-collectible text-tone-collectible-foreground",
+    edition: "bg-tone-edition text-tone-edition-foreground",
+    info: "bg-tone-info text-tone-info-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-tone-warning text-tone-warning-foreground",
+    destructive: "bg-destructive text-destructive-foreground"
+  },
+  plain: {
+    neutral: "text-muted-foreground",
+    standard: "text-foreground",
+    collectible: "text-foreground",
+    edition: "text-foreground",
+    info: "text-foreground",
+    success: "text-foreground",
+    warning: "text-foreground",
+    destructive: "text-destructive"
+  }
+};
+var badgeVariants = cva(
+  "sable-optical-pad [--sable-optical-pad:0.6em] inline-flex w-fit items-center whitespace-nowrap rounded-full",
+  {
+    variants: {
+      // Every drawn appearance carries a 1px border — transparent unless it is
+      // the outline — so soft, solid and outline badges are one height in a
+      // mixed row (outline alone was a pixel taller).
+      appearance: {
+        soft: "gap-1 border border-transparent",
+        outline: "gap-1",
+        solid: "gap-1 border border-transparent",
+        overlay: "gap-1 border border-transparent",
+        plain: "gap-1.5"
+      },
+      tone: { neutral: "", standard: "", collectible: "", edition: "", info: "", success: "", warning: "", destructive: "" },
+      size: {
+        sm: "text-label-sm",
+        md: "text-label-md"
+      }
+    },
+    compoundVariants: [
+      ...BADGE_APPEARANCES.flatMap(
+        (appearance) => BADGE_TONES.map((tone) => ({ appearance, tone, className: MATRIX[appearance][tone] }))
+      ),
+      // Padding belongs to the drawn appearances; a plain status line has none.
+      { appearance: ["soft", "outline", "solid", "overlay"], size: "sm", className: "px-2 pt-[0.2em] pb-[0.08em]" },
+      { appearance: ["soft", "outline", "solid", "overlay"], size: "md", className: "px-2.5 pt-[0.23em] pb-[0.1em]" }
+    ],
+    defaultVariants: {
+      appearance: "soft",
+      tone: "neutral",
+      size: "md"
+    }
+  }
+);
+export {
+  BADGE_APPEARANCES,
+  BADGE_TONES,
+  badgeVariants
+};

package/dist/components/badge/index.js

@@ -0,0 +1,11 @@
+// src/components/badge/index.ts
+import { Badge } from "./badge.js";
+import { BADGE_APPEARANCES, BADGE_TONES, badgeVariants } from "./badge.variants.js";
+import { badgeMeta } from "./badge.meta.js";
+export {
+  BADGE_APPEARANCES,
+  BADGE_TONES,
+  Badge,
+  badgeMeta,
+  badgeVariants
+};

package/dist/components/banner/banner.js

@@ -0,0 +1,76 @@
+"use client";
+
+// src/components/banner/banner.tsx
+import { useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { Badge } from "../badge/index.js";
+import { Button } from "../button/button.js";
+import { cn } from "../../lib/cn.js";
+import { bannerVariants } from "./banner.variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Banner({
+  tone,
+  appearance,
+  label,
+  action,
+  dismissible,
+  onDismiss,
+  sticky,
+  live = "off",
+  className,
+  children,
+  ...props
+}) {
+  const [visible, setVisible] = useState(true);
+  if (!visible) {
+    return null;
+  }
+  function handleDismiss() {
+    setVisible(false);
+    onDismiss?.();
+  }
+  const split = action != null;
+  const labelAppearance = appearance === "solid" && (tone ?? "neutral") !== "neutral" ? "overlay" : "soft";
+  const dismissButton = dismissible ? /* @__PURE__ */ jsx(Button, { variant: "on-color-ghost", size: "icon-xs", "aria-label": "Dismiss", onClick: handleDismiss, className: "shrink-0", children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) }) : null;
+  const a11yProps = live === "off" ? { role: "region", "aria-label": "Announcement" } : { role: live === "assertive" ? "alert" : "status" };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...a11yProps,
+      className: cn(
+        bannerVariants({ tone, appearance }),
+        split ? "justify-between" : "justify-center",
+        sticky && "sticky top-0 z-(--z-sticky)",
+        // A centred message with a floating dismiss reserves the button's
+        // width on BOTH sides: the end so long text never runs under the ×,
+        // the start so the message stays optically centred.
+        dismissible && !split && "px-[calc(var(--control-xs)+--spacing(4))]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-3",
+              split ? "min-w-0 flex-1" : "justify-center"
+            ),
+            children: [
+              label != null ? /* @__PURE__ */ jsx(Badge, { size: "sm", appearance: labelAppearance, className: "shrink-0", children: label }) : null,
+              children
+            ]
+          }
+        ),
+        split ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          action,
+          dismissButton
+        ] }) : dismissButton ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 end-2 flex items-center", children: dismissButton }) : null
+      ]
+    }
+  );
+}
+Banner.displayName = "Banner";
+export {
+  Banner
+};

package/dist/components/banner/banner.meta.js

@@ -0,0 +1,172 @@
+// src/components/banner/banner.meta.ts
+var bannerMeta = {
+  name: "Banner",
+  summary: "Full-width, page-level announcement bar. A tone (neutral, info, success, warning, edition, destructive) \xD7 an appearance (soft tint or loud solid fill), and an optional leading scope label. Centers its message, or \u2014 with a trailing action \u2014 switches to a leading-text + trailing-button layout. Optionally sticky and dismissible.",
+  keywords: [
+    "banner",
+    "announcement",
+    "alert",
+    "status",
+    "message",
+    "warning",
+    "success",
+    "offline",
+    "sticky"
+  ],
+  usage: {
+    description: "Use Banner for page-level or app-level messages that affect the current experience: outages, maintenance, success confirmations, policy notices, or major warnings. Prefer Toast for transient feedback from a specific action, and prefer InlineStatus for local row or form state.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use soft appearance for contextual notices and solid appearance for urgent, blocking, or system-wide states."
+      },
+      {
+        guidance: "do",
+        description: "Set live='polite' or live='assertive' only when the banner appears or changes dynamically."
+      },
+      {
+        guidance: "do",
+        description: "Include one clear action when the user can resolve or inspect the state."
+      },
+      {
+        guidance: "dont",
+        description: "Use multiple stacked solid banners unless the page is genuinely blocked by multiple independent states."
+      },
+      {
+        guidance: "dont",
+        description: "Use Banner for field-level validation, row status, or small local hints; use Field, InlineStatus, or Badge instead."
+      },
+      {
+        guidance: "dont",
+        description: "Use Banner inside a dialog, a form, or a section to qualify the content around it \u2014 that is Note. Banner is a full-width announcement strip for page- or app-level state, so in a modal it reads as a slab heavier than the fields it warns about, and its soft appearance has no border and no tone-colored icon: the severity survives only as a faint wash."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Message",
+        required: true,
+        description: "The short announcement text. It should explain the state in plain language."
+      },
+      {
+        name: "Action",
+        required: false,
+        description: "Optional trailing action that changes the layout from centered copy to text plus action."
+      },
+      {
+        name: "Dismiss",
+        required: false,
+        description: "Optional close control for notices the user can safely hide."
+      }
+    ]
+  },
+  related: {
+    components: ["Note", "AppShell", "Toast", "InlineStatus", "EmptyState", "Button"],
+    patterns: ["DashboardPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "tone",
+      type: '"neutral" | "info" | "success" | "warning" | "edition" | "destructive"',
+      default: '"neutral"',
+      description: "Neutral surface or a tone that encodes the announcement's intent (info / success / warning / edition / destructive)."
+    },
+    {
+      name: "appearance",
+      type: '"soft" | "solid"',
+      default: '"soft"',
+      description: `"soft" is a quiet tinted fill; "solid" is the full tone with its paired ink \u2014 for loud, can't-miss states (offline, chain-down, RPC errors).`
+    },
+    {
+      name: "label",
+      type: "ReactNode",
+      description: 'A short scope label ("Preview", "Staging", a project name) in a leading chip \u2014 a Badge that reads on soft and solid fills.'
+    },
+    {
+      name: "action",
+      type: "ReactNode",
+      description: "A trailing action (e.g. a Button). Switches the bar to leading text + trailing action instead of centered text."
+    },
+    {
+      name: "sticky",
+      type: "boolean",
+      default: "false",
+      description: "Stick the banner to the top of its scroll container (sticky top-0, z-30)."
+    },
+    {
+      name: "live",
+      type: '"off" | "polite" | "assertive"',
+      default: '"off"',
+      description: 'ARIA live-region politeness for banners shown/updated at runtime (offline, RPC-down, "N new posts"). "polite" \u2192 role=status; "assertive" \u2192 role=alert. "off" keeps a static labelled region.'
+    },
+    {
+      name: "dismissible",
+      type: "boolean",
+      default: "false",
+      description: "Render a trailing close button that hides the banner when clicked."
+    },
+    {
+      name: "onDismiss",
+      type: "() => void",
+      description: "Called after the banner is dismissed."
+    }
+  ],
+  variants: {
+    tone: ["neutral", "info", "success", "warning", "edition", "destructive"],
+    appearance: ["soft", "solid"]
+  },
+  tokensUsed: [
+    "secondary",
+    "secondary-foreground",
+    "foreground",
+    "background",
+    "tone-info",
+    "tone-info-foreground",
+    "success",
+    "success-foreground",
+    "tone-warning",
+    "tone-warning-foreground",
+    "tone-edition",
+    "tone-edition-foreground",
+    "destructive",
+    "destructive-foreground"
+  ],
+  a11y: [
+    "Static banners render as a labelled region (role=region); set `live` to announce dynamic status bars (role=status / role=alert) when they appear or change.",
+    "The dismiss control is Button (on-color-ghost, icon-xs) with an aria-label; it takes the bar's own ink, so its glyph and focus ring stay legible on soft and solid fills alike.",
+    "Solid fills pair each tone with its theme-adaptive ink token, so text stays legible in light and dark."
+  ],
+  examples: [
+    {
+      label: "Tones",
+      code: '<Banner tone="info">Maintenance window tonight at 02:00 UTC.</Banner>'
+    },
+    {
+      label: "Solid (loud)",
+      code: '<Banner tone="destructive" appearance="solid" live="assertive">Blockchain unavailable. Collect and buy are temporarily disabled.</Banner>'
+    },
+    {
+      label: "Success",
+      code: '<Banner tone="success" live="polite">Credits authorized for Studio.</Banner>'
+    },
+    {
+      label: "Action",
+      code: '<Banner sticky action={<Button variant="outline" size="sm">Refresh</Button>}>12 new posts</Banner>'
+    },
+    {
+      label: "Dismissible",
+      code: '<Banner tone="warning" dismissible>Your session expires soon.</Banner>'
+    },
+    {
+      label: "Recoverable warning",
+      code: '<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>'
+    },
+    {
+      label: "App-shell outage",
+      code: '<AppShell banners={<Banner tone="destructive" appearance="solid" live="assertive">Uploads are temporarily unavailable.</Banner>}><Region max="feed"><EmptyState title="Uploads paused" description="Existing posts are still visible while the service recovers." /></Region></AppShell>'
+    }
+  ]
+};
+export {
+  bannerMeta
+};

package/dist/components/banner/banner.variants.js

@@ -0,0 +1,44 @@
+// src/components/banner/banner.variants.ts
+import { cva } from "class-variance-authority";
+var bannerVariants = cva(
+  "relative flex min-h-(--control-md) w-full items-center gap-3 px-4 py-2 text-label-md",
+  {
+    variants: {
+      tone: {
+        neutral: "",
+        info: "",
+        success: "",
+        warning: "",
+        edition: "",
+        destructive: ""
+      },
+      appearance: {
+        soft: "",
+        solid: ""
+      }
+    },
+    compoundVariants: [
+      // Soft — a quiet tint of the tone (the default announcement look).
+      { tone: "neutral", appearance: "soft", class: "bg-secondary text-secondary-foreground" },
+      { tone: "info", appearance: "soft", class: "bg-tone-info/15 text-foreground" },
+      { tone: "success", appearance: "soft", class: "bg-success/15 text-foreground" },
+      { tone: "warning", appearance: "soft", class: "bg-tone-warning/15 text-foreground" },
+      { tone: "edition", appearance: "soft", class: "bg-tone-edition/15 text-foreground" },
+      { tone: "destructive", appearance: "soft", class: "bg-destructive/15 text-foreground" },
+      // Solid — the full tone fill with its paired ink, for loud states.
+      { tone: "neutral", appearance: "solid", class: "bg-foreground text-background" },
+      { tone: "info", appearance: "solid", class: "bg-tone-info text-tone-info-foreground" },
+      { tone: "success", appearance: "solid", class: "bg-success text-success-foreground" },
+      { tone: "warning", appearance: "solid", class: "bg-tone-warning text-tone-warning-foreground" },
+      { tone: "edition", appearance: "solid", class: "bg-tone-edition text-tone-edition-foreground" },
+      { tone: "destructive", appearance: "solid", class: "bg-destructive text-destructive-foreground" }
+    ],
+    defaultVariants: {
+      tone: "neutral",
+      appearance: "soft"
+    }
+  }
+);
+export {
+  bannerVariants
+};

package/dist/components/banner/index.js

@@ -0,0 +1,9 @@
+// src/components/banner/index.ts
+import { Banner } from "./banner.js";
+import { bannerVariants } from "./banner.variants.js";
+import { bannerMeta } from "./banner.meta.js";
+export {
+  Banner,
+  bannerMeta,
+  bannerVariants
+};

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

@@ -0,0 +1,10 @@
+// src/components/bar-chart/bar-chart.tsx
+import { CartesianChart } from "../../lib/chart/cartesian.js";
+import { jsx } from "react/jsx-runtime";
+function BarChart(props) {
+  return /* @__PURE__ */ jsx(CartesianChart, { kind: "bar", ...props });
+}
+BarChart.displayName = "BarChart";
+export {
+  BarChart
+};