@sableui/react 0.6.2 → 0.7.1

package/dist/components/meter/meter.meta.js

@@ -0,0 +1,227 @@
+// src/components/meter/meter.meta.ts
+var meterMeta = {
+  name: "Meter",
+  summary: "A role=meter reading over Base UI Meter, drawn as a bar or a ring \u2014 how full something is within a known range (storage, quota, strength), with a tone for good/caution/bad. Not task progress.",
+  status: "stable",
+  keywords: [
+    "meter",
+    "usage bar",
+    "storage",
+    "quota",
+    "capacity",
+    "limit",
+    "password strength",
+    "level"
+  ],
+  usage: {
+    description: "Use Meter to show a static measurement against a known maximum \u2014 storage used, seats taken, API quota, password strength. It is announced as a meter, not a progress bar, so a screen-reader user hears a level rather than a task underway.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Label it and show the reading in units people use ("7.2 of 10 GB"), with MeterLabel and MeterValue. The bar shows proportion; the number is what gets acted on.'
+      },
+      {
+        guidance: "do",
+        description: "Pick `tone` from thresholds you own and apply them consistently across the page \u2014 warning near the limit, destructive at or over it. The component does not guess where good becomes bad."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Meter for a task in flight \u2014 an upload, an install, a step count. That is Progress; Meter tells assistive tech nothing is happening."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a value without a meaningful maximum (followers, total spend). A bar implies a full scale; an unbounded count is a stat."
+      },
+      {
+        guidance: "do",
+        description: 'Use shape="ring" when the reading is a score that belongs in a small, glanceable spot on a card. It is the same measurement drawn as a circular gauge, not a different component.'
+      }
+    ],
+    anatomy: [
+      {
+        name: "MeterTrack",
+        required: true,
+        description: "The rail that represents the full range."
+      },
+      {
+        name: "MeterIndicator",
+        required: true,
+        description: "The fill, sized from value and coloured by tone."
+      },
+      {
+        name: "MeterLabel",
+        required: false,
+        description: "The visible name; also names the meter for assistive tech."
+      },
+      {
+        name: "MeterValue",
+        required: false,
+        description: "The formatted reading."
+      }
+    ]
+  },
+  related: {
+    components: ["Progress", "Badge"]
+  },
+  props: [
+    {
+      name: "value",
+      type: "number",
+      description: "The current reading, between min and max. Required."
+    },
+    {
+      name: "min",
+      type: "number",
+      default: "0",
+      description: "The bottom of the range."
+    },
+    {
+      name: "max",
+      type: "number",
+      default: "100",
+      description: "The top of the range."
+    },
+    {
+      name: "tone",
+      type: '"primary" | "standard" | "success" | "warning" | "destructive"',
+      default: '"primary"',
+      description: "Fill colour, mapped to a semantic token. Choose it from your own thresholds."
+    },
+    {
+      name: "shape",
+      type: '"bar" | "ring"',
+      default: '"bar"',
+      description: "bar is a horizontal track; ring is a circular gauge for a small, glanceable reading \u2014 the same value, min, max and tones."
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      default: '"md"',
+      description: "Ring diameter (40 / 64 / 96px at the default spacing; the centre value steps with it), or bar thickness on the same sm / md / lg rails as Progress."
+    },
+    {
+      name: "showValue",
+      type: "boolean",
+      description: "Print the value in the ring's centre (formatted like MeterValue)."
+    },
+    {
+      name: "strokeWidth",
+      type: "number",
+      default: "6",
+      description: "Ring stroke width, in viewBox units of 100."
+    },
+    {
+      name: "format",
+      type: "Intl.NumberFormatOptions",
+      description: "Formatting for MeterValue and aria-valuetext (percent, unit, currency)."
+    },
+    {
+      name: "getAriaValueText",
+      type: "(formatted: string, value: number) => string",
+      description: 'Human-readable reading for assistive tech ("7.2 of 10 gigabytes used").'
+    },
+    {
+      name: "locale",
+      type: "Intl.LocalesArgument",
+      description: "Locale for formatting. Defaults to the runtime locale."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "MeterTrack",
+      type: "Base UI Track props + className + size",
+      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default."
+    },
+    {
+      name: "MeterIndicator",
+      type: "Base UI Indicator props + className + tone",
+      description: "The fill. Inherits the Meter's tone unless given its own."
+    },
+    {
+      name: "MeterLabel",
+      type: "Base UI Label props + className",
+      description: "Visible label; wires aria-labelledby on the root."
+    },
+    {
+      name: "MeterValue",
+      type: "Base UI Value props + className",
+      description: "Formatted reading. Accepts a `(formatted, value) => ReactNode` child."
+    }
+  ],
+  variants: {
+    tone: ["primary", "standard", "success", "warning", "destructive"],
+    shape: ["bar", "ring"],
+    size: ["sm", "md", "lg"]
+  },
+  tokensUsed: [
+    "secondary",
+    "primary",
+    "success",
+    "tone-warning",
+    "destructive",
+    "foreground",
+    "muted-foreground"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Meter",
+      why: "A meter is a reading, present with the page that reports it. Animating the fill up from zero on load would act out a change that did not happen."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Meter",
+      why: "It reports and accepts no input. A bar that reacted to the pointer would read as a Slider the user could drag."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "MeterIndicator",
+      why: "Width and colour ease on the motion tokens (no recipe animates width) when the reading changes \u2014 freeing space after a delete visibly shrinks the bar, so the user sees the cause and effect rather than a different bar."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Meter",
+      why: "A meter has no indeterminate state; a reading is either known or not shown. Unknown-but-working is Progress with no value."
+    }
+  ],
+  a11y: [
+    "Base UI renders role=meter with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext \u2014 distinct from Progress's role=progressbar.",
+    "Name it with MeterLabel or aria-label; an unnamed meter is announced as a bare number.",
+    'Tone is colour only. Say the state in text too ("Almost full") when it matters, and use getAriaValueText to give units.'
+  ],
+  examples: [
+    {
+      label: "Ring",
+      code: '<Meter shape="ring" value={72} showValue aria-label="Storage used" />'
+    },
+    {
+      label: "Bare",
+      code: '<Meter value={64} aria-label="Storage used" />'
+    },
+    {
+      label: "Storage with label and reading",
+      code: `<Meter value={7.2} max={10} tone="warning" getAriaValueText={(_, v) => \`\${v} of 10 gigabytes used\`}>
+	<div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+		<MeterLabel>Storage</MeterLabel>
+		<MeterValue>{(_, value) => \`\${value} of 10 GB\`}</MeterValue>
+	</div>
+	<MeterTrack />
+</Meter>`
+    },
+    {
+      label: "Tones",
+      code: `<div className="flex flex-col gap-3">
+	<Meter value={30} tone="success" aria-label="Seats used" />
+	<Meter value={82} tone="warning" aria-label="API quota used" />
+	<Meter value={100} tone="destructive" aria-label="Storage used" />
+</div>`
+    }
+  ]
+};
+export {
+  meterMeta
+};

package/dist/components/meter/meter.variants.js

@@ -0,0 +1,61 @@
+// src/components/meter/meter.variants.ts
+import { cva } from "class-variance-authority";
+var meterIndicatorVariants = cva(
+  "h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-decelerate",
+  {
+    variants: {
+      tone: {
+        primary: "bg-primary",
+        standard: "bg-tone-standard",
+        success: "bg-success",
+        warning: "bg-tone-warning",
+        destructive: "bg-destructive"
+      }
+    },
+    defaultVariants: {
+      tone: "primary"
+    }
+  }
+);
+var meterTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-secondary", {
+  variants: {
+    size: {
+      sm: "h-1.5",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var meterRingValueVariants = cva("absolute inset-0 flex items-center justify-center text-foreground", {
+  variants: {
+    size: {
+      sm: "text-label-xs",
+      md: "text-label-md",
+      lg: "text-title-sm"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var meterRingVariants = cva("relative inline-flex shrink-0", {
+  variants: {
+    size: {
+      sm: "size-10",
+      md: "size-16",
+      lg: "size-24"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  meterIndicatorVariants,
+  meterRingValueVariants,
+  meterRingVariants,
+  meterTrackVariants
+};

package/dist/components/middle-truncate/index.js

@@ -0,0 +1,7 @@
+// src/components/middle-truncate/index.ts
+import { MiddleTruncate } from "./middle-truncate.js";
+import { middleTruncateMeta } from "./middle-truncate.meta.js";
+export {
+  MiddleTruncate,
+  middleTruncateMeta
+};

package/dist/components/middle-truncate/middle-truncate.js

@@ -0,0 +1,28 @@
+// src/components/middle-truncate/middle-truncate.tsx
+import { cn } from "../../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MiddleTruncate({
+  text,
+  startChars = 6,
+  endChars = 6,
+  className,
+  ...props
+}) {
+  const fits = text.length <= startChars + endChars + 1;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: fits ? void 0 : text,
+      className: cn("text-mono-sm tabular-nums", className),
+      ...props,
+      children: fits ? text : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: `${text.slice(0, startChars)}\u2026${text.slice(-endChars)}` }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: text })
+      ] })
+    }
+  );
+}
+MiddleTruncate.displayName = "MiddleTruncate";
+export {
+  MiddleTruncate
+};

package/dist/components/middle-truncate/middle-truncate.meta.js

@@ -0,0 +1,77 @@
+// src/components/middle-truncate/middle-truncate.meta.ts
+var middleTruncateMeta = {
+  name: "MiddleTruncate",
+  summary: "Middle-truncates a long string (hash, address, signature) to `5J7s\u20268xQp`, keeping the start and end legible while preserving the full value on hover.",
+  status: "stable",
+  keywords: [
+    "truncate",
+    "middle truncate",
+    "hash",
+    "identifier"
+  ],
+  usage: {
+    description: "Use MiddleTruncate when both the beginning and end of a long identifier must remain visible.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for hashes, addresses, long filenames, URLs, or generated IDs."
+      },
+      {
+        guidance: "do",
+        description: "Provide the full value through title text, copy action, or surrounding detail when needed."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use MiddleTruncate for human prose where the middle words carry meaning."
+      },
+      {
+        guidance: "dont",
+        description: "Do not middle-truncate a value with no way to obtain it in full. Truncation removes characters from the page, so the value needs a copy affordance beside it: an icon Button with useCopy, as in the Copyable value example."
+      }
+    ]
+  },
+  related: {
+    components: ["Code", "Button"]
+  },
+  props: [
+    {
+      name: "text",
+      type: "string",
+      description: "The full string to render. When it is truncated, the full value is also set as the title attribute (a pointer tooltip)."
+    },
+    {
+      name: "startChars",
+      type: "number",
+      default: "6",
+      description: "How many leading characters to keep before the ellipsis."
+    },
+    {
+      name: "endChars",
+      type: "number",
+      default: "6",
+      description: "How many trailing characters to keep after the ellipsis."
+    }
+  ],
+  tokensUsed: [],
+  a11y: [
+    "When truncated, the visible abbreviation is aria-hidden and a visually hidden copy carries the full value, so screen readers announce the whole string. The title attribute holds it too, for a pointer tooltip only.",
+    "Renders the string verbatim when it is too short to benefit from truncation, so no value is hidden needlessly."
+  ],
+  examples: [
+    {
+      label: "Solana address",
+      code: '<MiddleTruncate text="5J7sX2QpHt9vK4mNbR8wYcZ3dF6gH1jL0pA8xQpVnTu" />'
+    },
+    {
+      label: "Custom start/end counts",
+      code: '<MiddleTruncate text="0xAbC1234567890dEf1234567890aBcDeF12345678" startChars={4} endChars={4} />'
+    },
+    {
+      label: "Copyable value",
+      code: 'const { copy, copied } = useCopy(address)\n<Row gap={1}><MiddleTruncate text={address} /><Button variant="ghost" size="icon-xs" aria-label="Copy address" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>'
+    }
+  ]
+};
+export {
+  middleTruncateMeta
+};

package/dist/components/note/index.js

@@ -0,0 +1,9 @@
+// src/components/note/index.ts
+import { Note } from "./note.js";
+import { noteVariants } from "./note.variants.js";
+import { noteMeta } from "./note.meta.js";
+export {
+  Note,
+  noteMeta,
+  noteVariants
+};

package/dist/components/note/note.js

@@ -0,0 +1,73 @@
+// src/components/note/note.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { STATUS_TONE_ICON } from "../../lib/status-tone.js";
+import { noteVariants } from "./note.variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneAction = {
+  info: "text-tone-info",
+  warning: "text-tone-warning",
+  success: "text-success",
+  destructive: "text-destructive",
+  neutral: "text-foreground"
+};
+function Note({
+  tone = "info",
+  title,
+  icon,
+  action,
+  className,
+  children,
+  ...props
+}) {
+  const resolved = tone ?? "info";
+  const { name, className: iconClassName } = STATUS_TONE_ICON[resolved];
+  const glyph = icon === void 0 ? /* @__PURE__ */ jsx(Icon, { name, className: cn("text-base", iconClassName) }) : icon === null ? null : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: cn("text-base", iconClassName) }) : icon;
+  const leadingIcon = glyph ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "note-icon",
+      className: cn("flex h-[1lh] shrink-0 items-center", title ? "text-title-sm" : "text-body-sm"),
+      children: glyph
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "note",
+      className: cn(noteVariants({ tone: resolved }), className),
+      ...props,
+      children: [
+        leadingIcon,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "text-title-sm", children: title }) : null,
+          /* @__PURE__ */ jsx("div", { className: cn(title && "mt-1"), children }),
+          action ? /* @__PURE__ */ jsx(NoteActionControl, { action, tone: resolved }) : null
+        ] })
+      ]
+    }
+  );
+}
+Note.displayName = "Note";
+function NoteActionControl({
+  action,
+  tone
+}) {
+  const className = cn(
+    "mt-2 inline-flex items-center gap-0.5 rounded-sm text-label-sm",
+    toneAction[tone],
+    "underline underline-offset-4 decoration-1 hover:decoration-2",
+    "motion-interactive motion-press",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  );
+  if (action.href) {
+    return /* @__PURE__ */ jsxs("a", { href: action.href, className, children: [
+      action.label,
+      /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: "text-sm" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onClick, className, children: action.label });
+}
+export {
+  Note
+};

package/dist/components/note/note.meta.js

@@ -0,0 +1,112 @@
+// src/components/note/note.meta.ts
+var noteMeta = {
+  name: "Note",
+  summary: "Callout / admonition box. Its tone follows the shared status-tone vocabulary (neutral/info/success/warning/destructive), pairing a soft tone fill with a matching leading icon. Optional title.",
+  status: "stable",
+  keywords: [
+    "note",
+    "callout",
+    "admonition",
+    "warning",
+    "caveat",
+    "hint",
+    "context"
+  ],
+  usage: {
+    description: "Use Note for helpful supporting information that should sit near the relevant content \u2014 including a caveat or warning attached to a form, a dialog, or a section. It is the in-context callout; Banner is the page-level strip.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for tips, caveats, or secondary context that improves understanding."
+      },
+      {
+        guidance: "do",
+        description: "Reach for Note rather than Banner when the message qualifies something on the page \u2014 a warning inside a dialog, a caveat above a submit button. Banner is a full-width announcement strip for page- or app-level state; inside a form it reads as a slab, and its soft fill carries no border or tone-colored icon, so the severity stops being visible."
+      },
+      {
+        guidance: "do",
+        description: "Keep tone calm and concise so the note does not compete with primary content."
+      },
+      {
+        guidance: "do",
+        description: "When the reader can resolve the state, pass `action` rather than putting a Button in children. The prop is data \u2014 label plus handler \u2014 so the callout owns the placement and weight; a Button dropped into children inherits neither, floats in the box's padding, and (in `secondary`) punches a near-background hole in the tone fill."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Note for state the whole page or app is in (an outage, an offline session, a blocked account) \u2014 that is Banner \u2014 or for a message tied to one field, which is the field's own error text."
+      },
+      {
+        guidance: "dont",
+        description: "Do not give a Note two actions. One remedy reads as the sentence's next move; two make it a decision point, which is a Dialog's job."
+      },
+      {
+        guidance: "dont",
+        description: "Do not stack several in a row. Three notes together are a wall of asides; if everything is called out, nothing is."
+      }
+    ]
+  },
+  related: {
+    components: ["Banner", "InlineStatus", "EmptyState"]
+  },
+  props: [
+    {
+      name: "action",
+      type: "{ label: string; onClick?: () => void; href?: string }",
+      description: "A single remedy, rendered below the body and aligned to the text column. Deliberately data, not a slot: Note owns the placement, weight, ink and motion, so the action cannot be styled into a button that outweighs the sentence explaining it. Use onClick for an in-place action (renders a button, no glyph) or href for a link (renders an anchor with a trailing chevron) \u2014 the chevron means navigate, so it appears only when the action genuinely goes somewhere."
+    },
+    {
+      name: "tone",
+      type: '"neutral" | "info" | "success" | "warning" | "destructive"',
+      default: '"info"',
+      description: "Severity tone \u2014 drives the border, fill, and leading icon color/name. The shared status-tone vocabulary (STATUS_TONES)."
+    },
+    {
+      name: "title",
+      type: "string",
+      description: "Optional bold lead-in rendered above the body (text-title-sm)."
+    },
+    {
+      name: "icon",
+      type: "string | ReactNode | null",
+      description: "Override the variant glyph: a string swaps the icon name (keeping the tone color), a ReactNode replaces it, null removes it; omit for the variant default."
+    }
+  ],
+  variants: {
+    tone: ["neutral", "info", "success", "warning", "destructive"]
+  },
+  tokensUsed: [
+    "foreground",
+    "border",
+    "muted",
+    "muted-foreground",
+    "tone-info",
+    "tone-warning",
+    "success",
+    "destructive"
+  ],
+  a11y: [
+    'Rendered with role="note" so assistive tech can announce it as an aside.',
+    "Color is never the sole signal \u2014 the leading icon and optional title reinforce severity."
+  ],
+  examples: [
+    {
+      label: "Info",
+      code: '<Note tone="info">Editions mint on Solana mainnet.</Note>'
+    },
+    {
+      label: "With title",
+      code: '<Note tone="warning" title="Low balance">Top up SOL before minting.</Note>'
+    },
+    {
+      label: "Warning with a remedy, inside a dialog",
+      code: '<Note tone="warning" action={{ label: "Unload chat model", onClick: unloadChatModel }}>gemma-4 is holding VRAM \u2014 generating now may be slow or fail.</Note>'
+    },
+    {
+      label: "Custom icon",
+      code: '<Note tone="neutral" icon="lock">Pricing and supply cannot be changed after an edition is purchased.</Note>'
+    }
+  ]
+};
+export {
+  noteMeta
+};

package/dist/components/note/note.variants.js

@@ -0,0 +1,22 @@
+// src/components/note/note.variants.ts
+import { cva } from "class-variance-authority";
+var noteVariants = cva(
+  "flex gap-3 rounded-md border p-4 text-body-sm text-foreground",
+  {
+    variants: {
+      tone: {
+        info: "border-tone-info/30 bg-tone-info/10",
+        warning: "border-tone-warning/30 bg-tone-warning/10",
+        success: "border-success/30 bg-success/10",
+        destructive: "border-destructive/30 bg-destructive/10",
+        neutral: "border-border bg-muted/40"
+      }
+    },
+    defaultVariants: {
+      tone: "info"
+    }
+  }
+);
+export {
+  noteVariants
+};

package/dist/components/notification-badge/index.js

@@ -0,0 +1,15 @@
+// src/components/notification-badge/index.ts
+import {
+  NotificationBadge
+} from "./notification-badge.js";
+import {
+  notificationCountVariants,
+  notificationDotVariants
+} from "./notification-badge.variants.js";
+import { notificationBadgeMeta } from "./notification-badge.meta.js";
+export {
+  NotificationBadge,
+  notificationBadgeMeta,
+  notificationCountVariants,
+  notificationDotVariants
+};

package/dist/components/notification-badge/notification-badge.js

@@ -0,0 +1,48 @@
+// src/components/notification-badge/notification-badge.tsx
+import { cn } from "../../lib/cn.js";
+import { trimLabel } from "../../lib/trim-label.js";
+import {
+  notificationCountVariants,
+  notificationDotVariants
+} from "./notification-badge.variants.js";
+import { jsx } from "react/jsx-runtime";
+function NotificationBadge({
+  dot,
+  count,
+  max = 99,
+  tone,
+  size,
+  overlay = false,
+  className,
+  ...props
+}) {
+  if (dot) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "notification-badge",
+        "aria-hidden": true,
+        className: cn(notificationDotVariants({ tone, size, overlay }), className),
+        ...props
+      }
+    );
+  }
+  if (count === void 0 || count <= 0) {
+    return null;
+  }
+  const label = count > max ? `${max}+` : String(count);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "notification-badge",
+      "aria-hidden": true,
+      className: cn(notificationCountVariants({ tone, size, overlay }), className),
+      ...props,
+      children: trimLabel(label)
+    }
+  );
+}
+NotificationBadge.displayName = "NotificationBadge";
+export {
+  NotificationBadge
+};