@sableui/react 0.6.2 → 0.7.1

package/dist/components/browser/browser.js

@@ -0,0 +1,39 @@
+// src/components/browser/browser.tsx
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Browser({ url, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("overflow-hidden rounded-xl border border-border bg-card shadow-sm", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "grid h-11 grid-cols-[1fr_minmax(0,28rem)_1fr] items-center gap-3 border-b border-border px-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-muted" }),
+              /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-muted" }),
+              /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full bg-muted" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2.5 text-muted-foreground sm:flex", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "chevron-left", className: "text-sm" }),
+              /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: "text-sm opacity-50" }),
+              /* @__PURE__ */ jsx(Icon, { name: "refresh", className: "text-sm" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-md bg-muted px-3 text-muted-foreground", children: [
+            url ? /* @__PURE__ */ jsx(Icon, { name: "lock", className: "shrink-0 text-xs" }) : null,
+            /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm", children: url ?? "" })
+          ] }),
+          /* @__PURE__ */ jsx("div", {})
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-background", children })
+      ]
+    }
+  );
+}
+Browser.displayName = "Browser";
+export {
+  Browser
+};

package/dist/components/browser/browser.meta.js

@@ -0,0 +1,80 @@
+// src/components/browser/browser.meta.ts
+var browserMeta = {
+  name: "Browser",
+  summary: "A generic, current browser window: one compact toolbar (window controls, back/forward/reload, a centered address field) around page content.",
+  status: "stable",
+  keywords: [
+    "browser",
+    "mockup",
+    "preview",
+    "website"
+  ],
+  usage: {
+    description: "Use Browser to frame a website or product surface preview when the browser chrome is part of the story.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for documentation, product examples, and visual previews where the page context matters."
+      },
+      {
+        guidance: "do",
+        description: "Keep the framed content simple enough to remain legible at the rendered size."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Browser for real navigation, real forms, or arbitrary card decoration."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a real, working URL in the address pill. It reads as a link, is not one, and invites a click that does nothing."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Phone",
+      "Card"
+    ]
+  },
+  props: [
+    {
+      name: "url",
+      type: "string",
+      description: "Address shown in the centered address pill. Omit for a blank pill."
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Page content rendered inside the content region."
+    }
+  ],
+  tokensUsed: ["card", "background", "border", "muted", "muted-foreground"],
+  a11y: [
+    "Purely presentational chrome; the framed content carries its own semantics.",
+    "The toolbar is drawn, not interactive, and hidden from assistive technology; the address is decorative text."
+  ],
+  examples: [
+    {
+      label: "Framing a page",
+      code: '<Browser url="studio.example/explore"><div className="p-8"><PageHeader title="Explore" description="Trending posts from every chain." /></div></Browser>'
+    },
+    {
+      label: "Mockup, not chrome",
+      code: `// Browser is DECORATIVE framing for a screenshot or a demo \u2014 it belongs on a
+// marketing page, never around your actual app.
+
+<Region max="wide">
+  <Browser url="studio.example">
+    <img src="/screenshots/editor.png" alt="The editor" />
+  </Browser>
+</Region>
+
+// \u2717 Wrapping live UI in it. The frame implies "this is a picture of software";
+//   putting real controls inside makes users hunt for a browser that isn't there.
+// \u2717 Using it to fake a URL bar for credibility. Show the real product.`
+    }
+  ]
+};
+export {
+  browserMeta
+};

package/dist/components/browser/index.js

@@ -0,0 +1,7 @@
+// src/components/browser/index.ts
+import { Browser } from "./browser.js";
+import { browserMeta } from "./browser.meta.js";
+export {
+  Browser,
+  browserMeta
+};

package/dist/components/bubble/bubble.js

@@ -0,0 +1,110 @@
+// src/components/bubble/bubble.tsx
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { Pill } from "../pill/pill.js";
+import {
+  bubbleTailVariants,
+  bubbleReactionsVariants,
+  bubbleVariants
+} from "./bubble.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Bubble({
+  variant = "muted",
+  align = "start",
+  tail = true,
+  className,
+  children,
+  ...props
+}) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-align": align,
+      className: cn(bubbleVariants({ variant, align, tail }), tier.prose, className),
+      ...props,
+      children: [
+        children,
+        tail && variant !== "plain" ? /* @__PURE__ */ jsx(BubbleTail, { variant: variant ?? "muted", align: align ?? "start" }) : null
+      ]
+    }
+  );
+}
+var TAIL = {
+  roundFill: "M0 0H4.4Q6 0 5.07 1.3L2.45 4.97Q1 7 1 9.5H0Z",
+  sharpFill: "M0 0H6L1 7V9.5H0Z",
+  roundEdge: "M0 .5H3.43Q5.03 .5 4.1 1.8L1.95 4.81Q.5 6.84 .5 9.34V9.5",
+  sharpEdge: "M0 .5H5.03L.5 6.84V9.5"
+};
+var ROUND = "[opacity:sign(var(--radius-sm))]";
+var SHARP = "[opacity:calc(1-sign(var(--radius-sm)))]";
+var TAIL_FILL = { muted: "fill-muted", primary: "fill-primary", outline: "fill-card" };
+function BubbleTail({ variant, align }) {
+  const outline = variant === "outline";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 6 9.5",
+      className: bubbleTailVariants({ surface: outline ? "outline" : "solid", align }),
+      children: [
+        /* @__PURE__ */ jsx("path", { d: TAIL.roundFill, className: cn(TAIL_FILL[variant], ROUND) }),
+        /* @__PURE__ */ jsx("path", { d: TAIL.sharpFill, className: cn(TAIL_FILL[variant], SHARP) }),
+        outline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: TAIL.roundEdge, className: cn("fill-none stroke-border", ROUND), strokeWidth: 1 }),
+          /* @__PURE__ */ jsx("path", { d: TAIL.sharpEdge, className: cn("fill-none stroke-border", SHARP), strokeWidth: 1 })
+        ] }) : null
+      ]
+    }
+  );
+}
+Bubble.displayName = "Bubble";
+function BubbleReactions({
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(bubbleReactionsVariants({ align }), className),
+      ...props
+    }
+  );
+}
+BubbleReactions.displayName = "BubbleReactions";
+function BubbleReaction({
+  emoji,
+  count,
+  active = false,
+  className,
+  ...props
+}) {
+  const tier = useTypeTier();
+  return (
+    // Pill's own quiet chip: outline (a hairline at rest, a primary tint when
+    // it is the reader's) at the xs control height. No overrides — a reaction
+    // is a Pill, not a private look built on top of one.
+    /* @__PURE__ */ jsxs(
+      Pill,
+      {
+        appearance: "outline",
+        size: "sm",
+        selected: active,
+        className: cn(tier.secondary, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji }),
+          count !== void 0 && count > 1 ? /* @__PURE__ */ jsx("span", { className: "text-mono-caption tabular-nums", children: count }) : null
+        ]
+      }
+    )
+  );
+}
+BubbleReaction.displayName = "BubbleReaction";
+export {
+  Bubble,
+  BubbleReaction,
+  BubbleReactions
+};

package/dist/components/bubble/bubble.meta.js

@@ -0,0 +1,158 @@
+// src/components/bubble/bubble.meta.ts
+var bubbleMeta = {
+  name: "Bubble",
+  summary: "The surface a message's content sits on: four treatments, an align-aware tail, a readable measure cap, and an optional row of reaction pills.",
+  status: "stable",
+  keywords: [
+    "chat bubble",
+    "message bubble",
+    "speech bubble",
+    "reactions",
+    "conversation",
+    "messaging",
+    "ai chat"
+  ],
+  usage: {
+    description: "The tinted (or untinted) surface a turn's content sits on. Kept separate from Message because the row's layout and the content's surface change independently \u2014 an assistant's markdown answer wants no surface at all in exactly the same row a one-line reply wants a bubble.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use `muted` for the other party and `primary` for the reader's own messages. Two treatments is the whole vocabulary a conversation needs to say who is speaking."
+      },
+      {
+        guidance: "do",
+        description: 'Reach for `variant="plain"` for long-form assistant output \u2014 rendered markdown, code blocks, tables. A tinted box around three paragraphs reads as a quote block rather than as a turn, and `plain` drops the measure cap with the surface.'
+      },
+      {
+        guidance: "do",
+        description: "Pass the same `align` you gave the enclosing Message, so the tail lands on the speaker's side."
+      },
+      {
+        guidance: "do",
+        description: "Set `tail={false}` on the continuation bubbles in a grouped run \u2014 the tail marks where a speaker starts, and repeating it on every line makes a block of one person's messages look like four separate turns."
+      },
+      {
+        guidance: "do",
+        description: 'Let the register size it. Inside `<Density value="compact">` a Bubble sets itself in the workspace prose tier automatically \u2014 a docked agent panel needs no per-call-site sizing, and hardcoding one defeats the mechanism.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not remove the measure cap to fill a wide window. ~42rem is a reading measure; a bubble spanning a 1600px viewport is a paragraph at 140 characters per line."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not put the timestamp or the author name inside the bubble. Those are Message\'s `header` / `footer`, which stay outside the surface and so still work under `variant="plain"`.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use a Bubble for a system note or a streaming status. Those are `Marker`, which is deliberately quieter than the message tier."
+      },
+      {
+        guidance: "dont",
+        description: "Do not render reactions as static text. `BubbleReaction` is a toggle and reports `aria-pressed`, which is how a screen-reader user knows whether pressing it adds or removes their own reaction."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Bubble",
+        required: true,
+        description: "The surface itself. Holds the variant, the side, and the tail."
+      },
+      {
+        name: "BubbleReactions",
+        required: false,
+        description: "The row of reaction pills, just under the bubble at the message column's small gap, so it reads as belonging to that message rather than the next row."
+      },
+      {
+        name: "BubbleReaction",
+        required: false,
+        description: "One reaction pill \u2014 emoji, count (hidden at 1), and pressed state."
+      }
+    ]
+  },
+  related: {
+    components: ["Message", "MessageScroller", "Marker", "Attachment"]
+  },
+  props: [
+    {
+      name: "variant",
+      type: '"muted" | "primary" | "outline" | "plain"',
+      default: '"muted"',
+      description: "Surface treatment. `muted` for the other party, `primary` for the reader's own messages, `outline` for a quieter own-side, `plain` for long-form output that should not sit in a box (also drops the measure cap and padding)."
+    },
+    {
+      name: "align",
+      type: '"start" | "end"',
+      default: '"start"',
+      description: "Which side of the conversation the bubble is on \u2014 puts the tail on the speaker's side. Match it to the enclosing Message."
+    },
+    {
+      name: "tail",
+      type: "boolean",
+      default: "true",
+      description: "Draw the tail: a small ear off the speaker-side top corner, which goes square to meet it. The same 5px in every theme's radius language, flat through fully pilled. The bubble keeps the ear's space either way, so turning it off for the continuation bubbles in a grouped run keeps the run aligned."
+    },
+    {
+      name: "...div props",
+      type: 'ComponentPropsWithRef<"div">',
+      description: "Spread onto the surface element."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "BubbleReactions",
+      type: '{ align?: "start" | "end" } & ComponentPropsWithRef<"div">',
+      description: "Row container for reaction pills. Match `align` to the Bubble so the row hangs off the same edge."
+    },
+    {
+      name: "BubbleReaction",
+      type: '{ emoji: ReactNode; count?: number; active?: boolean } & ComponentPropsWithRef<"button">',
+      description: 'One reaction pill. A toggle, not a label: `active` drives `aria-pressed` as well as the styling, and `count` is hidden at 1 because the pill already says "one".'
+    }
+  ],
+  variants: {
+    variant: ["muted", "primary", "outline", "plain"],
+    align: ["start", "end"],
+    tail: ["true", "false"]
+  },
+  tokensUsed: [
+    "muted",
+    "foreground",
+    "primary",
+    "primary-foreground",
+    "border",
+    "card",
+    "card-foreground",
+    "accent",
+    "accent-foreground",
+    "muted-foreground",
+    "ring"
+  ],
+  a11y: [
+    "The surface is a plain container with no imposed role \u2014 a bubble is presentation, and announcing one as a region would put a landmark around every line of a conversation.",
+    "Reaction pills are real buttons reporting `aria-pressed`, so the reader's own reaction is state rather than colour alone; the emoji is hidden from AT and the count is left readable.",
+    "`whitespace-pre-wrap` and `break-words` keep pasted logs, long URLs, and hard-wrapped text inside the surface instead of overflowing the conversation.",
+    "Every variant meets AA against its own surface, including `primary`, which pairs the primary fill with its paired foreground token rather than a hardcoded white."
+  ],
+  examples: [
+    {
+      label: "Two sides",
+      code: '<>\n	<Message messageId="m1"><Bubble>Did the deploy finish?</Bubble></Message>\n	<Message messageId="m2" align="end"><Bubble variant="primary" align="end">Green across the board.</Bubble></Message>\n</>'
+    },
+    {
+      label: "Long-form assistant output",
+      code: '<Message messageId="a1" avatar={<Avatar size="sm" fallback="AI" />}>\n	<Bubble variant="plain" className="space-y-3">\n		<p className="text-body-md text-foreground">Three things changed in this release:</p>\n		<CodeBlock code={diff} filename="CHANGELOG.md" />\n	</Bubble>\n</Message>'
+    },
+    {
+      label: "With reactions",
+      code: '<Message messageId="m3">\n	<Bubble>Shipped 0.45.0.</Bubble>\n	<BubbleReactions>\n		<BubbleReaction emoji="\u{1F389}" count={3} active onClick={() => toggle("\u{1F389}")} />\n		<BubbleReaction emoji="\u{1F440}" count={1} onClick={() => toggle("\u{1F440}")} />\n	</BubbleReactions>\n</Message>'
+    },
+    {
+      label: "A grouped run drops the repeated tail",
+      code: '<>\n	<Message messageId="m1" align="end"><Bubble variant="primary" align="end">One more thing.</Bubble></Message>\n	<Message messageId="m2" align="end" grouped><Bubble variant="primary" align="end" tail={false}>The staging cert expires Friday.</Bubble></Message>\n</>'
+    }
+  ]
+};
+export {
+  bubbleMeta
+};

package/dist/components/bubble/bubble.variants.js

@@ -0,0 +1,90 @@
+// src/components/bubble/bubble.variants.ts
+import { cva } from "class-variance-authority";
+var EAR_SPACE = "[--bubble-ear:5px]";
+var bubbleTailVariants = cva(
+  "pointer-events-none absolute h-[9.5px] w-[6px] overflow-visible",
+  {
+    variants: {
+      // Its x = 1 is the bubble's outer edge: on a solid bubble that is the
+      // padding edge, so the box tucks 1px under it; outline's 1px border puts
+      // the outer edge 1px further out, and its top 1px higher.
+      surface: {
+        solid: "top-0",
+        outline: "-top-px"
+      },
+      // Drawn pointing to the end side; the start tail is its mirror image,
+      // and in a right-to-left layout each swaps.
+      align: {
+        start: "-scale-x-100 rtl:scale-x-100",
+        end: "rtl:-scale-x-100"
+      }
+    },
+    compoundVariants: [
+      { surface: "solid", align: "start", className: "end-[calc(100%-1px)]" },
+      { surface: "solid", align: "end", className: "start-[calc(100%-1px)]" },
+      { surface: "outline", align: "start", className: "end-full" },
+      { surface: "outline", align: "end", className: "start-full" }
+    ]
+  }
+);
+var bubbleVariants = cva(
+  "relative w-fit max-w-[42rem] whitespace-pre-wrap break-words rounded-lg px-3.5 py-2.5 text-body-md",
+  {
+    variants: {
+      variant: {
+        /** The other party. The resting conversational surface. */
+        muted: "bg-muted text-foreground",
+        /** The reader's own messages. */
+        primary: "bg-primary text-primary-foreground",
+        /** A quieter own-side or a secondary channel. */
+        outline: "border border-border bg-card text-card-foreground",
+        /**
+         * No surface at all — for long-form assistant output (markdown,
+         * code, tables) where a tinted box around three paragraphs reads as
+         * a quote block rather than as a turn.
+         */
+        plain: "max-w-none bg-transparent px-0 py-0 text-foreground"
+      },
+      align: {
+        start: "",
+        end: ""
+      },
+      tail: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { variant: ["muted", "primary", "outline"], className: EAR_SPACE },
+      { align: "start", variant: ["muted", "primary", "outline"], className: "ms-(--bubble-ear)" },
+      { align: "end", variant: ["muted", "primary", "outline"], className: "me-(--bubble-ear)" },
+      // The speaker-side top corner goes square to meet the tail.
+      { tail: true, align: "start", variant: ["muted", "primary", "outline"], className: "rounded-ss-none" },
+      { tail: true, align: "end", variant: ["muted", "primary", "outline"], className: "rounded-se-none" },
+      // A surfaceless bubble has no surface to hang a tail from.
+      { variant: "plain", className: "rounded-none" }
+    ],
+    defaultVariants: {
+      variant: "muted",
+      align: "start",
+      tail: true
+    }
+  }
+);
+var bubbleReactionsVariants = cva(
+  "flex flex-wrap items-center gap-1",
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: { align: "start" }
+  }
+);
+export {
+  bubbleReactionsVariants,
+  bubbleTailVariants,
+  bubbleVariants
+};

package/dist/components/bubble/index.js

@@ -0,0 +1,13 @@
+// src/components/bubble/index.ts
+import {
+  Bubble,
+  BubbleReaction,
+  BubbleReactions
+} from "./bubble.js";
+import { bubbleMeta } from "./bubble.meta.js";
+export {
+  Bubble,
+  BubbleReaction,
+  BubbleReactions,
+  bubbleMeta
+};

package/dist/components/button/button.js

@@ -0,0 +1,87 @@
+// src/components/button/button.tsx
+import { useContext } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { StackedActionsContext } from "../../lib/presentation.js";
+import { trimLabel } from "../../lib/trim-label.js";
+import { Spinner } from "../spinner/index.js";
+import { buttonVariants } from "./button.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BORDERLESS = /* @__PURE__ */ new Set(["ghost", "link", "on-color-ghost"]);
+var OPTICAL_START = "[--button-ps:calc(var(--button-px)-(--spacing(0.5)))] ps-(--button-ps)";
+var OPTICAL_END = "[--button-pe:calc(var(--button-px)-(--spacing(0.5)))] pe-(--button-pe)";
+var BLEED_CLASS = {
+  start: "-ms-(--button-ps,var(--button-px))",
+  end: "-me-(--button-pe,var(--button-px))",
+  both: "-ms-(--button-ps,var(--button-px)) -me-(--button-pe,var(--button-px))"
+};
+function Button({
+  variant,
+  size,
+  className,
+  render,
+  ref,
+  type,
+  loading = false,
+  loadingLabel,
+  iconStart,
+  iconEnd,
+  badge,
+  bleed,
+  disabled,
+  children,
+  ...props
+}) {
+  const tier = useTypeTier();
+  const isNativeButton = render === void 0;
+  const stacked = useContext(StackedActionsContext) && !String(size ?? "md").startsWith("icon");
+  const resolvedSize = stacked ? "cta" : size ?? "md";
+  const hasLabel = children != null && children !== false;
+  const spinner = /* @__PURE__ */ jsx(Spinner, { className: "size-(--button-icon)", thickness: 2 });
+  const start = loading ? spinner : iconStart;
+  const iconOnly = String(resolvedSize).startsWith("icon");
+  const inner = loading && iconOnly ? spinner : /* @__PURE__ */ jsxs(Fragment, { children: [
+    start,
+    trimLabel(loading ? loadingLabel ?? children : children),
+    iconEnd
+  ] });
+  const content = badge != null ? /* @__PURE__ */ jsxs("span", { "data-slot": "button-badge-anchor", className: "relative inline-flex items-center gap-(--control-gap)", children: [
+    inner,
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute -end-1 -top-1 flex", children: badge })
+  ] }) : inner;
+  const optical = cn(
+    start && hasLabel && !iconOnly ? OPTICAL_START : null,
+    iconEnd && hasLabel && !iconOnly ? OPTICAL_END : null
+  );
+  const bleedable = BORDERLESS.has(variant ?? "primary") && !stacked;
+  const resolvedBleed = bleedable ? bleed ?? "auto" : void 0;
+  return useRender({
+    render: render ?? /* @__PURE__ */ jsx("button", { type: type ?? "button" }),
+    ref,
+    props: {
+      ...props,
+      className: cn(
+        buttonVariants({ variant, size: resolvedSize }),
+        stacked ? "w-full" : null,
+        tier.action,
+        optical,
+        resolvedBleed && resolvedBleed !== "auto" && resolvedBleed !== "none" ? BLEED_CLASS[resolvedBleed] : null,
+        // Busy is not disabled. Loading sets `disabled` so the action cannot
+        // double-fire, but fading it to 50% made a working button read as an
+        // unavailable one. It keeps full colour; the spinner says "working".
+        loading ? "cursor-progress disabled:opacity-100 aria-disabled:opacity-100" : null,
+        className
+      ),
+      children: content,
+      ...resolvedBleed ? { "data-bleed": resolvedBleed } : null,
+      ...loading ? { "aria-busy": true } : null,
+      ...isNativeButton ? { disabled: disabled || loading } : loading || disabled ? { "aria-disabled": true } : null
+    },
+    defaultTagName: "button"
+  });
+}
+Button.displayName = "Button";
+export {
+  Button
+};