@sableui/react 0.6.2 → 0.7.1

package/dist/{chunk-KFZ43RKU.js → components/phone/phone.meta.js}

@@ -1,51 +1,3 @@
-import { StatusIcons } from './chunk-NEQNXI2G.js';
-import { cn } from './chunk-SRQWQUTW.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function Phone({ statusBar = true, systemChrome = true, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        // Hardware is the one surface no preset or mode repaints: a titanium
-        // body and band, not a theme's scrim (`overlay` is translucent in some
-        // presets, which drew a grey, see-through phone).
-        // design-lint-disable-next-line inline-color -- fixed device material, deliberately unthemed
-        "@container relative mx-auto w-[280px] [--phone-body:oklch(18%_0.004_265)] [--phone-band:oklch(48%_0.006_265)]",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[18%] h-[4.5%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[25.5%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[34%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.6cqi] top-[27%] h-[10.5%] w-[0.8cqi] rounded-e-full bg-(--phone-band)" }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.4cqi] top-[55%] h-[6%] w-[0.6cqi] rounded-e-full bg-(--phone-band)" }),
-        /* @__PURE__ */ jsx("div", { className: "relative rounded-[18cqi] bg-(--phone-body) p-[3.7cqi] shadow-xl ring-[0.5cqi] ring-(--phone-band) ring-inset", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[402/874] overflow-hidden rounded-[14.3cqi] bg-background text-foreground [clip-path:inset(0_round_14.3cqi)]", children: [
-          /* @__PURE__ */ jsx("div", { className: cn("h-full overflow-auto overscroll-contain scrollbar-hidden", statusBar && "pt-[14.3cqi]"), children }),
-          statusBar ? /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-hidden": true,
-              className: "absolute inset-x-0 top-0 grid h-[14.3cqi] grid-cols-[1fr_19cqi_1fr] grid-rows-[8cqi] content-start items-center bg-background px-[4cqi] pt-[2.6cqi]",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "justify-self-center text-label-md tabular-nums", children: "9:41" }),
-                /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx(StatusIcons, { className: "flex items-center gap-[1.15cqi] justify-self-center [&_svg]:h-[2.8cqi] [&_svg]:w-auto" })
-              ]
-            }
-          ) : null,
-          systemChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 top-[2.6cqi] mx-auto h-[8cqi] w-[19cqi] rounded-full bg-(--phone-body)" }),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-[1.85cqi] mx-auto h-[1.15cqi] min-h-1 w-[35%] rounded-full bg-foreground" })
-          ] }) : null
-        ] }) })
-      ]
-    }
-  );
-}
-Phone.displayName = "Phone";
-
 // src/components/phone/phone.meta.ts
 var phoneMeta = {
   name: "Phone",
@@ -135,5 +87,6 @@ var phoneMeta = {
     }
   ]
 };
-
-export { Phone, phoneMeta };
+export {
+  phoneMeta
+};

package/dist/{chunk-NEQNXI2G.js → components/phone/status-icons.js}

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/phone/status-icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 function StatusIcons(props) {
   return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, ...props, children: [
     /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 17 12", width: "17", height: "12", fill: "currentColor", children: [
@@ -21,5 +20,6 @@ function StatusIcons(props) {
     ] })
   ] });
 }
-
-export { StatusIcons };
+export {
+  StatusIcons
+};

package/dist/components/pie-chart/index.js

@@ -0,0 +1,7 @@
+// src/components/pie-chart/index.ts
+import { PieChart } from "./pie-chart.js";
+import { pieChartMeta } from "./pie-chart.meta.js";
+export {
+  PieChart,
+  pieChartMeta
+};

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

@@ -0,0 +1,191 @@
+"use client";
+
+// src/components/pie-chart/pie-chart.tsx
+import { useId } from "react";
+import { ChartFrame } from "../../lib/chart/chart-frame.js";
+import { ChartLegend } from "../../lib/chart/chart-legend.js";
+import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
+import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
+import { arcPath, polar } from "../../lib/chart/geometry.js";
+import { DRAW_DURATION, morphTransition, pathStyle } from "../../lib/chart/motion.js";
+import {
+  categoryStyle,
+  numberValue
+} from "../../lib/chart/types.js";
+import { cn } from "../../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PieChart({
+  data,
+  index,
+  valueKey,
+  label,
+  categories,
+  className,
+  donut = false,
+  centerLabel,
+  separator = true,
+  labels = "none",
+  labelContent = "value",
+  legend,
+  tooltip = true,
+  valueFormatter,
+  locale,
+  animate = true,
+  activeIndex,
+  defaultActiveIndex,
+  onActiveIndexChange
+}) {
+  const uid = useId().replace(/:/g, "");
+  const keys = Array.isArray(valueKey) ? valueKey : [valueKey];
+  const fmt = chartFormatters(locale, valueFormatter);
+  const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+  const names = data.map((d) => categoryText(d[index], locale));
+  const styles = names.map((name, i) => categoryStyle(categories, name, i));
+  const rings = keys.map((key) => {
+    const vals = data.map((d) => Math.max(0, numberValue(d[key])));
+    const total = vals.reduce((a, b) => a + b, 0) || 1;
+    let acc = 0;
+    return vals.map((v) => {
+      const a0 = acc / total * Math.PI * 2;
+      acc += v;
+      return { v, share: v / total, a0, a1: acc / total * Math.PI * 2 };
+    });
+  });
+  const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
+  const ratio = donut === true ? 0.6 : typeof donut === "number" ? Math.min(0.9, Math.max(0, donut)) : 0;
+  const geometry = (size) => {
+    const margin = labels === "outside" ? 30 : 8;
+    const outer = Math.max(8, Math.min(size.width, size.height) / 2 - margin);
+    const inner = outer * ratio;
+    const cx = size.width / 2;
+    const cy = size.height / 2;
+    const ringWidth = (outer - inner) / keys.length;
+    return { cx, cy, outer, inner, ringWidth };
+  };
+  const hitTest = (x, y, size) => {
+    const g = geometry(size);
+    const dx = x - g.cx;
+    const dy = y - g.cy;
+    const r = Math.hypot(dx, dy);
+    if (r > g.outer + 8 || r < g.inner) return null;
+    const angle = (Math.atan2(dx, -dy) + Math.PI * 2) % (Math.PI * 2);
+    const ring = Math.min(keys.length - 1, Math.max(0, Math.floor((g.outer - r) / g.ringWidth)));
+    const hit = rings[ring].findIndex((s) => angle >= s.a0 && angle < s.a1);
+    return hit < 0 ? null : hit;
+  };
+  const sliceText = (ring, i) => labelContent === "percent" ? percent.format(rings[ring][i].share) : labelContent === "name" ? styles[i].label : fmt.full(rings[ring][i].v);
+  const describe = (i) => `${styles[i].label}: ${keys.map((k, r) => `${keys.length > 1 ? `${k} ` : ""}${fmt.full(rings[r][i].v)} (${percent.format(rings[r][i].share)})`).join(", ")}`;
+  const tooltipFor = (i, size) => {
+    const g = geometry(size);
+    const s = rings[0][i];
+    const [x, y] = polar(g.cx, g.cy, g.outer, (s.a0 + s.a1) / 2);
+    return {
+      x,
+      y,
+      content: /* @__PURE__ */ jsx(
+        ChartTooltipContent,
+        {
+          indicator: tooltipOptions.indicator,
+          label: tooltipOptions.hideLabel || keys.length === 1 ? void 0 : styles[i].label,
+          rows: keys.map((k, r) => ({
+            key: k,
+            label: keys.length === 1 ? styles[i].label : k,
+            value: fmt.full(rings[r][i].v),
+            color: styles[i].color,
+            icon: styles[i].icon
+          }))
+        }
+      )
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      label,
+      className: cn("h-64", className),
+      count: data.length,
+      interactive: tooltip !== false,
+      animate,
+      activeIndex,
+      defaultActiveIndex,
+      onActiveIndexChange,
+      hitTest,
+      tooltip: tooltip === false ? void 0 : tooltipFor,
+      describe,
+      table: {
+        headers: [index.charAt(0).toUpperCase() + index.slice(1), ...keys],
+        rows: data.map((_, i) => [styles[i].label, ...keys.map((_2, r) => fmt.full(rings[r][i].v))])
+      },
+      legend: legend ?? labels === "none" ? /* @__PURE__ */ jsx(ChartLegend, { items: names.map((n, i) => ({ key: n, label: styles[i].label, color: styles[i].color, icon: styles[i].icon })) }) : null,
+      children: ({ size, activeIndex: active }) => {
+        const g = geometry(size);
+        const maskId = `${uid}-sweep`;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: g.cx,
+              cy: g.cy,
+              r: g.outer / 2 + 4,
+              fill: "none",
+              stroke: "white",
+              strokeWidth: g.outer + 8,
+              pathLength: 1,
+              transform: `rotate(-90 ${g.cx} ${g.cy})`,
+              className: "[stroke-dasharray:1] [stroke-dashoffset:0] [[data-reveal=out]_&]:[stroke-dashoffset:1]",
+              style: { transition: `stroke-dashoffset ${DRAW_DURATION} var(--motion-ease-decelerate)` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("g", { mask: `url(#${maskId})`, children: rings.map(
+            (ring, r) => ring.map((s, i) => {
+              if (s.v === 0) return null;
+              const outer = g.outer - r * g.ringWidth + (active === i && r === 0 ? 6 : 0);
+              const inner = Math.max(g.inner, g.outer - (r + 1) * g.ringWidth);
+              const d = arcPath(g.cx, g.cy, inner, outer, s.a0, s.a1);
+              return /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d,
+                  strokeWidth: separator ? 2 : 0,
+                  strokeLinejoin: "round",
+                  className: cn(separator && "stroke-(--sable-surface-bg,var(--background))", active != null && active !== i && "opacity-60"),
+                  style: { ...pathStyle(d), fill: styles[i].color, transition: morphTransition() }
+                },
+                `${r}-${names[i]}`
+              );
+            })
+          ) }),
+          labels !== "none" ? rings[0].map((s, i) => {
+            if (s.v === 0) return null;
+            const mid = (s.a0 + s.a1) / 2;
+            const inside = labels === "inside";
+            const r = inside ? g.outer - g.ringWidth / 2 : g.outer + 14;
+            const [x, y] = polar(g.cx, g.cy, r, mid);
+            const anchor = inside ? "middle" : Math.sin(mid) > 0.1 ? "start" : Math.sin(mid) < -0.1 ? "end" : "middle";
+            return /* @__PURE__ */ jsx(
+              "text",
+              {
+                x,
+                y,
+                dy: "0.32em",
+                textAnchor: anchor,
+                className: cn("text-caption tabular-nums [[data-reveal=out]_&]:opacity-0", inside ? "fill-background text-label-sm" : "fill-foreground"),
+                style: { transition: morphTransition(), transitionDelay: "var(--motion-duration-slower)" },
+                children: sliceText(0, i)
+              },
+              `l-${names[i]}`
+            );
+          }) : null,
+          centerLabel && g.inner > 0 ? /* @__PURE__ */ jsxs("text", { x: g.cx, y: g.cy, textAnchor: "middle", className: "[[data-reveal=out]_&]:opacity-0", style: { transition: morphTransition() }, children: [
+            /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
+            centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
+          ] }) : null
+        ] });
+      }
+    }
+  );
+}
+PieChart.displayName = "PieChart";
+export {
+  PieChart
+};

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

@@ -0,0 +1,210 @@
+// src/components/pie-chart/pie-chart.meta.ts
+var pieChartMeta = {
+  name: "PieChart",
+  summary: "Parts of a whole as slices: a pie or donut, concentric rings for several measures, a total in the hole, slice labels inside or out, and an active slice that pulls outward. Slices sweep in clockwise as the chart scrolls into view.",
+  keywords: [
+    "chart",
+    "pie",
+    "donut",
+    "doughnut",
+    "share",
+    "proportion",
+    "breakdown",
+    "parts",
+    "whole"
+  ],
+  usage: {
+    description: "Use PieChart for a share of one total across two to six categories \u2014 traffic sources, a budget split, survey answers. A donut leaves room for the total in the middle (`centerLabel`). With more categories, or to compare values precisely, use BarChart; for a breakdown inside a stat card, SegmentedBar is lighter.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Put the total, or the headline slice, in a donut's centerLabel."
+      },
+      {
+        guidance: "do",
+        description: "Configure slice names, tones and icons with categories, keyed by each slice's value in the data."
+      },
+      {
+        guidance: "dont",
+        description: 'Use more than six slices \u2014 merge the tail into "Other" or use BarChart.'
+      },
+      {
+        guidance: "dont",
+        description: "Use it for data-heavy views \u2014 streaming or real-time data, thousands of points, zoom and brushing, trading charts. Those belong on a charting library (Recharts, visx, ECharts); Sable's charts are for dashboards, landing pages and decks."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "SegmentedBar",
+      "RadialChart",
+      "BarChart",
+      "Card"
+    ]
+  },
+  status: "beta",
+  props: [
+    {
+      name: "data",
+      type: "Record<string, unknown>[]",
+      description: "One row per slice."
+    },
+    {
+      name: "index",
+      type: "string",
+      description: "The datum field naming each slice."
+    },
+    {
+      name: "valueKey",
+      type: "string | string[]",
+      description: "The datum field holding each slice's amount \u2014 or several fields, drawn as concentric rings, outer first."
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "What the chart shows. Its accessible name and the caption of the data table assistive tech reads."
+    },
+    {
+      name: "categories",
+      type: "Record<string, { label?: string; tone?: ChartTone; color?: string; icon?: string }>",
+      description: "Labels, tones and icons per slice, keyed by the slice's name. Unlisted slices take the tones in order."
+    },
+    {
+      name: "className",
+      type: "string",
+      default: '"h-64"',
+      description: "Sizes the chart. Set a height."
+    },
+    {
+      name: "donut",
+      type: "boolean | number",
+      default: "false",
+      description: "Cut out the middle: `true` for a ring at 60% of the radius, or a ratio (0\u20130.9)."
+    },
+    {
+      name: "centerLabel",
+      type: "{ value: string | number; label?: string }",
+      description: "A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units."
+    },
+    {
+      name: "separator",
+      type: "boolean",
+      default: "true",
+      description: "A hairline in the surface colour between slices."
+    },
+    {
+      name: "labels",
+      type: '"none" | "outside" | "inside"',
+      default: '"none"',
+      description: "Label each slice outside the pie or inside it."
+    },
+    {
+      name: "labelContent",
+      type: '"value" | "percent" | "name"',
+      default: '"value"',
+      description: "What a slice label says."
+    },
+    {
+      name: "legend",
+      type: "boolean",
+      default: "true unless slices are labelled",
+      description: "Show the legend."
+    },
+    {
+      name: "tooltip",
+      type: 'boolean | { indicator?: "dot" | "line" | "dashed" | "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean }',
+      default: "true",
+      description: "Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row."
+    },
+    {
+      name: "valueFormatter",
+      type: "(value: number) => string",
+      description: 'Format values everywhere (axis, labels, tooltip, table) \u2014 units like "$12,480". Default: compact on the axis, full elsewhere.'
+    },
+    {
+      name: "locale",
+      type: "string",
+      default: "runtime locale",
+      description: "BCP 47 locale for default number and date formatting."
+    },
+    {
+      name: "animate",
+      type: "boolean",
+      default: "true",
+      description: "Sweep the slices in clockwise when the chart scrolls into view."
+    },
+    {
+      name: "activeIndex",
+      type: "number | null",
+      description: "The highlighted row (controlled); `null` for none."
+    },
+    {
+      name: "defaultActiveIndex",
+      type: "number | null",
+      description: "The row highlighted at first \u2014 a tooltip already open before anyone hovers."
+    },
+    {
+      name: "onActiveIndexChange",
+      type: "(index: number | null) => void",
+      description: "Called as the pointer or keyboard moves between rows."
+    }
+  ],
+  tokensUsed: [
+    "tone-edition",
+    "tone-collectible",
+    "tone-standard",
+    "tone-info",
+    "tone-warning",
+    "primary",
+    "muted-foreground",
+    "border",
+    "popover",
+    "popover-foreground",
+    "foreground",
+    "background"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "custom",
+      part: "Slices",
+      why: "Once on screen the slices are revealed by a mask that sweeps clockwise from 12 o'clock \u2014 the whole is read as it fills. On the motion tokens; reduced motion shows the finished chart."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Active slice",
+      why: "The hovered slice pulls outward and the rest dim at once; the geometry change itself eases (see transition)."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Slices",
+      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "PieChart",
+      why: "A chart has no indeterminate state; show a Skeleton while the data loads."
+    }
+  ],
+  a11y: [
+    "The drawing is aria-hidden; the same numbers are in a visually hidden data table (captioned by `label`) that the chart is aria-describedby, so assistive tech reads values, not shapes.",
+    'With a tooltip, the chart is one tab stop (role=group, aria-roledescription="chart"): arrow keys, Home and End step through the data, Escape clears, and each step is announced in a polite live region.',
+    "Colour is never the only key: series are named in the legend, tooltip and table."
+  ],
+  examples: [
+    {
+      label: "Donut with a total",
+      code: 'const sources = [\n	{ source: "Search", visitors: 275 },\n	{ source: "Direct", visitors: 200 },\n	{ source: "Social", visitors: 187 },\n	{ source: "Email", visitors: 90 },\n]\n\n<PieChart\n	label="Visitors by source"\n	data={sources}\n	index="source"\n	valueKey="visitors"\n	donut\n	centerLabel={{ value: 752, label: "Visitors" }}\n/>'
+    },
+    {
+      label: "Labelled slices",
+      code: '<PieChart\n	label="Share of visitors by source"\n	data={sources}\n	index="source"\n	valueKey="visitors"\n	labels="outside"\n	labelContent="percent"\n	categories={{ Search: { tone: "primary" }, Email: { tone: "neutral" } }}\n/>'
+    }
+  ]
+};
+export {
+  pieChartMeta
+};

package/dist/components/pill/index.js

@@ -0,0 +1,9 @@
+// src/components/pill/index.ts
+import { Pill } from "./pill.js";
+import { pillVariants } from "./pill.variants.js";
+import { pillMeta } from "./pill.meta.js";
+export {
+  Pill,
+  pillMeta,
+  pillVariants
+};

package/dist/components/pill/pill.js

@@ -0,0 +1,24 @@
+// src/components/pill/pill.tsx
+import { cn } from "../../lib/cn.js";
+import { trimLabel } from "../../lib/trim-label.js";
+import { pillVariants } from "./pill.variants.js";
+import { jsxs } from "react/jsx-runtime";
+function Pill({ selected = false, appearance, size, icon, className, children, type, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: type ?? "button",
+      "aria-pressed": selected,
+      className: cn(pillVariants({ appearance, size, selected }), className),
+      ...props,
+      children: [
+        icon,
+        trimLabel(children)
+      ]
+    }
+  );
+}
+Pill.displayName = "Pill";
+export {
+  Pill
+};

package/dist/components/pill/pill.meta.js

@@ -0,0 +1,108 @@
+// src/components/pill/pill.meta.ts
+var pillMeta = {
+  name: "Pill",
+  summary: 'A chip someone clicks: a filter, a tag choice, an option in a row. Always a button with aria-pressed. appearance="solid" (filters; selected lifts onto the primary surface) or "outline" (quiet chips that annotate content, like reactions); size md or sm. A static label is a Badge.',
+  status: "stable",
+  keywords: [
+    "pill",
+    "chip",
+    "filter",
+    "tag",
+    "toggle chip",
+    "category"
+  ],
+  usage: {
+    description: "Use Pill for a row of filters or choices a person clicks to narrow or toggle what they see. For a label that only describes something, use Badge.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use short text that names the filter or choice."
+      },
+      {
+        guidance: "do",
+        description: "Reflect the current choice with selected, so the active filter reads at a glance."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Pill as a static label. A pressable-looking chip that does nothing is the most common cause of dead clicks in a filter row \u2014 that is a Badge."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Pill for primary actions or important system status."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not restyle a Pill with border or background classes to get a quieter chip. That is appearance="outline" (and size="sm" for a small one); an override is a look that exists nowhere else in the system.'
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Badge",
+      "ToggleGroup"
+    ]
+  },
+  props: [
+    {
+      name: "selected",
+      type: "boolean",
+      default: "false",
+      description: "Marks the pill as chosen. Solid lifts onto the primary surface; outline takes a primary tint and soft primary edge. Sets aria-pressed."
+    },
+    {
+      name: "appearance",
+      type: '"solid" | "outline"',
+      default: '"solid"',
+      description: "solid for a filter row; outline for quiet chips that annotate other content (a reaction under a message, a tag on a card), where a filled chip would compete with what it annotates."
+    },
+    {
+      name: "size",
+      type: '"md" | "sm"',
+      default: '"md"',
+      description: "md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content."
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      description: 'Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap.'
+    }
+  ],
+  variants: {
+    appearance: ["solid", "outline"],
+    size: ["md", "sm"],
+    selected: ["true", "false"]
+  },
+  tokensUsed: [
+    "secondary",
+    "secondary-foreground",
+    "accent",
+    "accent-foreground",
+    "primary",
+    "primary-foreground",
+    "card",
+    "border",
+    "muted-foreground",
+    "foreground"
+  ],
+  a11y: [
+    'Renders a native <button type="button"> for focus and keyboard activation.',
+    "Selected state is exposed via aria-pressed."
+  ],
+  examples: [
+    {
+      label: "Filter row",
+      code: "<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Editions</Pill><Pill onClick={() => {}}>Collectibles</Pill></Row>"
+    },
+    {
+      label: "Outline, small (reactions)",
+      code: '<Row gap={1}><Pill appearance="outline" size="sm" selected onClick={() => {}}>\u{1F389} 3</Pill><Pill appearance="outline" size="sm" onClick={() => {}}>\u{1F440}</Pill></Row>'
+    },
+    {
+      label: "With icon",
+      code: '<Pill icon={<Icon name="lock" />} onClick={() => {}}>Locked</Pill>'
+    }
+  ]
+};
+export {
+  pillMeta
+};