@misoto22/design 0.3.1

package/dist/components/Table/Table.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const ALIGN = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+const ROWS = "[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0";
+const SOFT_HEAD = "[&_thead]:border-(--rule-2)";
+const COLUMNS = "[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0";
+const BOXED = "rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]";
+const BORDERS = {
+  rows: ROWS,
+  grid: cn(ROWS, COLUMNS, "[--table-pad-x:0.75rem]"),
+  bordered: cn(ROWS, SOFT_HEAD, BOXED),
+  "bordered-grid": cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),
+  none: ""
+};
+function Table({
+  caption,
+  showCaption = false,
+  stickyHeader = false,
+  borders = "rows",
+  density = "comfortable",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": caption,
+      "data-table-density": density,
+      className: cn("w-full overflow-x-auto scroll-slim", BORDERS[borders]),
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: cn(
+            "w-full border-collapse text-start text-sm",
+            stickyHeader && "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)",
+            className
+          ),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("caption", { className: cn(showCaption ? "pb-3 text-start eyebrow text-(--ink-3-aa)" : "sr-only"), children: caption }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function THead({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("thead", { className, ...rest });
+}
+function TBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("tbody", { className, ...rest });
+}
+function TR({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("tr", { className, ...rest });
+}
+const CELL = "px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]";
+const SORT_ICON = {
+  ascending: ArrowUp,
+  descending: ArrowDown,
+  none: ChevronsUpDown
+};
+function TH({
+  align = "start",
+  sortable = false,
+  sortDirection = "none",
+  onSort,
+  className,
+  children,
+  ...rest
+}) {
+  const Icon = SORT_ICON[sortDirection];
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "col",
+      "aria-sort": sortable ? sortDirection : void 0,
+      className: cn(CELL, "py-3 align-bottom eyebrow text-(--ink-3-aa)", ALIGN[align], className),
+      ...rest,
+      children: sortable ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onSort,
+          className: cn(
+            "group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)",
+            sortDirection === "none" ? "text-(--ink-3-aa)" : "text-(--ink)"
+          ),
+          children: [
+            children,
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                size: 12,
+                strokeWidth: 2,
+                "aria-hidden": true,
+                className: cn(
+                  "shrink-0 transition-opacity",
+                  sortDirection === "none" && "opacity-40 group-hover:opacity-100"
+                )
+              }
+            )
+          ]
+        }
+      ) : children
+    }
+  );
+}
+function TD({ align = "start", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(CELL, "py-[var(--table-pad-y)] align-top text-(--ink-2)", ALIGN[align], className),
+      ...rest
+    }
+  );
+}
+var Table_default = Table;
+export {
+  TBody,
+  TD,
+  TH,
+  THead,
+  TR,
+  Table,
+  Table_default as default
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ChevronsUpDown,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            strokeWidth={2}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"AAmHM,SASE,KATF;AAnHN,SAAS,WAAW,SAAS,sBAAsB;AAEnD,SAAS,UAAU;AAiBnB,MAAM,QAAoC;AAAA,EACxC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAeA,MAAM,OACJ;AACF,MAAM,YAAY;AAClB,MAAM,UACJ;AACF,MAAM,QAAQ;AAEd,MAAM,UAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,GAAG,MAAM,SAAS,yBAAyB;AAAA,EACjD,UAAU,GAAG,MAAM,WAAW,KAAK;AAAA,EACnC,iBAAiB,GAAG,MAAM,WAAW,SAAS,KAAK;AAAA,EACnD,MAAM;AACR;AA8CO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,sBAAoB;AAAA,MACpB,WAAW,GAAG,sCAAsC,QAAQ,OAAO,CAAC;AAAA,MAEpE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,gBACE;AAAA,YACF;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEJ;AAAA,gCAAC,aAAQ,WAAW,GAAG,cAAc,8CAA8C,SAAS,GACzF,mBACH;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,GAAG,EAAE,WAAW,GAAG,KAAK,GAAwC;AAC9E,SAAO,oBAAC,QAAG,WAAuB,GAAG,MAAM;AAC7C;AAyBA,MAAM,OACJ;AAEF,MAAM,YAAY;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM;AACR;AAYO,SAAS,GAAG;AAAA,EACjB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAY;AACV,QAAM,OAAO,UAAU,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAW,WAAW,gBAAgB;AAAA,MACtC,WAAW,GAAG,MAAM,+CAA+C,MAAM,KAAK,GAAG,SAAS;AAAA,MACzF,GAAG;AAAA,MAEH,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,SAAS,sBAAsB;AAAA,UACnD;AAAA,UAEC;AAAA;AAAA,YACD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,aAAa;AAAA,gBACb,eAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA,kBACA,kBAAkB,UAAU;AAAA,gBAC9B;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF,IAEA;AAAA;AAAA,EAEJ;AAEJ;AAOO,SAAS,GAAG,EAAE,QAAQ,SAAS,WAAW,GAAG,KAAK,GAAY;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,MAAM,oDAAoD,MAAM,KAAK,GAAG,SAAS;AAAA,MAC9F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+/** Radix Tabs root, re-exported as a typed passthrough. */
+declare const Tabs: react.ForwardRefExoticComponent<TabsPrimitive.TabsProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The tab strip.
+ *
+ * Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves
+ * every tab below it when the strip grows, and the reader loses the one they
+ * were about to click.
+ *
+ * @example
+ * <Tabs defaultValue="preview">
+ *   <TabsList>
+ *     <TabsTrigger value="preview">Preview</TabsTrigger>
+ *     <TabsTrigger value="code">Code</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="preview">…</TabsContent>
+ * </Tabs>
+ */
+declare function TabsList({ className, ...rest }: ComponentProps<typeof TabsPrimitive.List>): react.JSX.Element;
+/**
+ * One tab.
+ *
+ * The active marker is a 2px ink rule pulled onto the strip's own border with
+ * `-mb-px`, so the two occupy the same line instead of stacking into a 3px
+ * edge. 44px tall, because a tab is a pointer target like any other.
+ */
+declare function TabsTrigger({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Trigger>): react.JSX.Element;
+/** The panel paired to a {@link TabsTrigger} by matching `value`. */
+declare function TabsContent({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Content>): react.JSX.Element;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, Tabs as default };

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/cn.js";
+const Tabs = TabsPrimitive.Root;
+function TabsList({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      className: cn(
+        "flex items-center gap-1 overflow-x-auto border-b border-(--rule-2) scroll-slim",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function TabsTrigger({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      className: cn(
+        "-mb-px min-h-(--control-h-md) shrink-0 whitespace-nowrap border-b-2 border-transparent px-3.5 py-2 text-sm text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:text-(--ink) data-[state=active]:border-(--accent) data-[state=active]:text-(--accent-on-muted)",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function TabsContent({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-m22-animated": true,
+      className: cn("pt-5 data-[state=active]:animate-[m22-panel-in_var(--duration-fast)_var(--ease)]", className),
+      ...rest
+    }
+  );
+}
+var Tabs_default = Tabs;
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tabs_default as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Tabs root, re-exported as a typed passthrough. */\nexport const Tabs = TabsPrimitive.Root\n\n/**\n * The tab strip.\n *\n * Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves\n * every tab below it when the strip grows, and the reader loses the one they\n * were about to click.\n *\n * @example\n * <Tabs defaultValue=\"preview\">\n *   <TabsList>\n *     <TabsTrigger value=\"preview\">Preview</TabsTrigger>\n *     <TabsTrigger value=\"code\">Code</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"preview\">…</TabsContent>\n * </Tabs>\n */\nexport function TabsList({ className, ...rest }: ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        'flex items-center gap-1 overflow-x-auto border-b border-(--rule-2) scroll-slim',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One tab.\n *\n * The active marker is a 2px ink rule pulled onto the strip's own border with\n * `-mb-px`, so the two occupy the same line instead of stacking into a 3px\n * edge. 44px tall, because a tab is a pointer target like any other.\n */\nexport function TabsTrigger({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(\n        '-mb-px min-h-(--control-h-md) shrink-0 whitespace-nowrap border-b-2 border-transparent px-3.5 py-2 text-sm text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:text-(--ink) data-[state=active]:border-(--accent) data-[state=active]:text-(--accent-on-muted)',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The panel paired to a {@link TabsTrigger} by matching `value`. */\nexport function TabsContent({ className, ...rest }: ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-m22-animated\n      className={cn('pt-5 data-[state=active]:animate-[m22-panel-in_var(--duration-fast)_var(--ease)]', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Tabs\n"],"mappings":";AA2BI;AAzBJ,YAAY,mBAAmB;AAE/B,SAAS,UAAU;AAGZ,MAAM,OAAO,cAAc;AAkB3B,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAA8C;AAC1F,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AASO,SAAS,YAAY,EAAE,WAAW,GAAG,KAAK,GAAiD;AAChG,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,YAAY,EAAE,WAAW,GAAG,KAAK,GAAiD;AAChG,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,qBAAiB;AAAA,MACjB,WAAW,GAAG,oFAAoF,SAAS;AAAA,MAC1G,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    /** Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. */
+    active?: boolean;
+}
+/**
+ * A subject label — a topic, a technology, a filter facet.
+ *
+ * Distinct from `Badge`, which carries a state or a count. A tag names what
+ * something is ABOUT, so several sit together in a row and the reader scans
+ * them; a badge is one fact about one record.
+ *
+ * Presentational on purpose. To make a tag filter a list, wrap it in a button
+ * or a link at the call site and pass `active` — that keeps the focus ring,
+ * the pressed state and the keyboard handling with the element that actually
+ * owns them.
+ *
+ * @example
+ * <Tag>TypeScript</Tag>
+ * @example
+ * <button type="button" aria-pressed={on} onClick={toggle}><Tag active={on}>Rust</Tag></button>
+ */
+declare function Tag({ children, active, className, ...rest }: TagProps): react.JSX.Element;
+
+export { Tag, type TagProps, Tag as default };

package/dist/components/Tag/Tag.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function Tag({ children, active = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-(--radius-sm) px-2.5 py-1 font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)",
+        active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var Tag_default = Tag;
+export {
+  Tag,
+  Tag_default as default
+};
+//# sourceMappingURL=Tag.js.map

package/dist/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  /** Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. */\n  active?: boolean\n}\n\n/**\n * A subject label — a topic, a technology, a filter facet.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * Presentational on purpose. To make a tag filter a list, wrap it in a button\n * or a link at the call site and pass `active` — that keeps the focus ring,\n * the pressed state and the keyboard handling with the element that actually\n * owns them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <button type=\"button\" aria-pressed={on} onClick={toggle}><Tag active={on}>Rust</Tag></button>\n */\nexport function Tag({ children, active = false, className, ...rest }: TagProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-(--radius-sm) px-2.5 py-1 font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)',\n        active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AA4BI;AA3BJ,SAAS,UAAU;AAyBZ,SAAS,IAAI,EAAE,UAAU,SAAS,OAAO,WAAW,GAAG,KAAK,GAAa;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,6CAA6C;AAAA,QACtD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, Ref } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: boolean;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+/**
+ * Multi-line text entry.
+ *
+ * Resizes vertically only: horizontal resize lets a reader drag the control
+ * past the measure and past the page's own gutter.
+ *
+ * @example
+ * <Field label="Notes" htmlFor="notes"><Textarea id="notes" rows={4} /></Field>
+ */
+declare function Textarea({ invalid, className, ref, 'aria-invalid': ariaInvalid, ...rest }: TextareaProps): react.JSX.Element;
+
+export { Textarea, type TextareaProps, Textarea as default };

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+function Textarea({
+  invalid,
+  className,
+  ref,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+      className: cn(
+        CONTROL_BASE,
+        "min-h-24 resize-y",
+        bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+        className
+      ),
+      ...rest
+    }
+  );
+}
+var Textarea_default = Textarea;
+export {
+  Textarea,
+  Textarea_default as default
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import type { Ref, TextareaHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLTextAreaElement>\n}\n\n/**\n * Multi-line text entry.\n *\n * Resizes vertically only: horizontal resize lets a reader drag the control\n * past the measure and past the page's own gutter.\n *\n * @example\n * <Field label=\"Notes\" htmlFor=\"notes\"><Textarea id=\"notes\" rows={4} /></Field>\n */\nexport function Textarea({\n  invalid,\n  className,\n  ref,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: TextareaProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <textarea\n      ref={ref}\n      aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n      className={cn(\n        CONTROL_BASE,\n        'min-h-24 resize-y',\n        bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport default Textarea\n"],"mappings":"AA4BI;AA3BJ,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AAiBjD,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAkB;AAChB,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,MAC/C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,MAAM,eAAe,UAAU,eAAe;AAAA,QAC9C;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ToasterProps } from 'sonner';
+export { toast } from 'sonner';
+
+/**
+ * Transient confirmations, mounted once near the app root.
+ *
+ * A toast is for something that succeeded and needs no response. Anything the
+ * reader must act on belongs in the page — a toast is dismissed by time, and
+ * time is not an acknowledgement.
+ *
+ * `richColors` stays off by default: sonner's rich palette is not this system's
+ * status scale, and turning it on reintroduces chroma the White Reset spends
+ * only on state.
+ *
+ * @example
+ * // app root
+ * <Toaster />
+ * // anywhere
+ * toast.success('Saved')
+ */
+declare function Toaster({ position, closeButton, richColors, style, ...rest }: ToasterProps): react.JSX.Element;
+
+export { Toaster, Toaster as default };

package/dist/components/Toast/Toast.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Toaster as SonnerToaster, toast } from "sonner";
+const TOKEN_STYLE = {
+  "--normal-bg": "var(--paper)",
+  "--normal-text": "var(--ink)",
+  "--normal-border": "var(--rule-2)",
+  "--success-bg": "var(--paper)",
+  "--success-text": "var(--ok)",
+  "--success-border": "var(--rule-2)",
+  "--error-bg": "var(--paper)",
+  "--error-text": "var(--danger)",
+  "--error-border": "var(--rule-2)",
+  "--border-radius": "var(--radius)",
+  fontFamily: "var(--sans)"
+};
+function Toaster({
+  position = "bottom-right",
+  closeButton = true,
+  richColors = false,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    SonnerToaster,
+    {
+      position,
+      closeButton,
+      richColors,
+      style: { ...TOKEN_STYLE, ...style },
+      ...rest
+    }
+  );
+}
+var Toast_default = Toaster;
+export {
+  Toaster,
+  Toast_default as default,
+  toast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toaster as SonnerToaster, toast } from 'sonner'\nimport type { ToasterProps } from 'sonner'\nimport type { CSSProperties } from 'react'\n\n/**\n * Sonner's own custom properties, pointed at this system's tokens.\n *\n * Set as inline style on the Toaster rather than in a stylesheet: sonner\n * renders its list into a portal at the end of `<body>`, outside whatever\n * element a consumer's CSS is scoped to, and the inline style is the one place\n * guaranteed to reach it.\n *\n * Cast because this `@types/react` `CSSProperties` has no custom-property index\n * signature.\n */\nconst TOKEN_STYLE = {\n  '--normal-bg': 'var(--paper)',\n  '--normal-text': 'var(--ink)',\n  '--normal-border': 'var(--rule-2)',\n  '--success-bg': 'var(--paper)',\n  '--success-text': 'var(--ok)',\n  '--success-border': 'var(--rule-2)',\n  '--error-bg': 'var(--paper)',\n  '--error-text': 'var(--danger)',\n  '--error-border': 'var(--rule-2)',\n  '--border-radius': 'var(--radius)',\n  fontFamily: 'var(--sans)',\n} as CSSProperties\n\n/**\n * Transient confirmations, mounted once near the app root.\n *\n * A toast is for something that succeeded and needs no response. Anything the\n * reader must act on belongs in the page — a toast is dismissed by time, and\n * time is not an acknowledgement.\n *\n * `richColors` stays off by default: sonner's rich palette is not this system's\n * status scale, and turning it on reintroduces chroma the White Reset spends\n * only on state.\n *\n * @example\n * // app root\n * <Toaster />\n * // anywhere\n * toast.success('Saved')\n */\nexport function Toaster({\n  position = 'bottom-right',\n  closeButton = true,\n  richColors = false,\n  style,\n  ...rest\n}: ToasterProps) {\n  return (\n    <SonnerToaster\n      position={position}\n      closeButton={closeButton}\n      richColors={richColors}\n      style={{ ...TOKEN_STYLE, ...style }}\n      {...rest}\n    />\n  )\n}\n\nexport { toast }\nexport default Toaster\n"],"mappings":";AAwDI;AAtDJ,SAAS,WAAW,eAAe,aAAa;AAehD,MAAM,cAAc;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,YAAY;AACd;AAmBO,SAAS,QAAQ;AAAA,EACtB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,EAAE,GAAG,aAAa,GAAG,MAAM;AAAA,MACjC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGA,IAAO,gBAAQ;","names":[]}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>;
+/**
+ * A segmented control: several options, one strip.
+ *
+ * `type="single"` is a choice — Radix gives it radio semantics, and it is the
+ * right shape for a view switcher or a density setting. `type="multiple"` is a
+ * set of independent toggles, which is a different thing announced differently;
+ * choosing the wrong one is how a "filter by tag" control ends up telling a
+ * screen reader that picking one tag unpicks the others.
+ *
+ * The two look different on purpose. A single-value strip moves ONE filled pill
+ * between its options, so the eye follows a thing travelling; a multiple-value
+ * strip fills each pressed option separately, because there is no single
+ * selection to travel. Two people looking at a screenshot should be able to
+ * tell which kind they are looking at, and before this they could not.
+ *
+ * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.
+ * A toggle group changes a value.
+ *
+ * @example
+ * <ToggleGroup type="single" defaultValue="grid" aria-label="Layout">
+ *   <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
+ *   <ToggleGroupItem value="list">List</ToggleGroupItem>
+ * </ToggleGroup>
+ */
+declare function ToggleGroup({ className, children, ...props }: ToggleGroupProps): react.JSX.Element;
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;
+/**
+ * One segment.
+ *
+ * In a single-value group the item draws no background of its own — the
+ * travelling pill behind it does — so it only changes ink. In a multiple-value
+ * group it fills, because there is nothing travelling.
+ */
+declare function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps): react.JSX.Element;
+
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroup as default };

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { createContext, useContext, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { useSelectionIndicator } from "../../lib/useSelectionIndicator.js";
+const SingleValueContext = createContext(null);
+function ToggleGroup({ className, children, ...props }) {
+  const single = props.type === "single";
+  const [uncontrolled, setUncontrolled] = useState(
+    (single ? props.defaultValue : void 0) ?? ""
+  );
+  const value = single ? props.value ?? uncontrolled : null;
+  const [ref, indicator] = useSelectionIndicator(value);
+  const root = /* @__PURE__ */ jsxs(
+    ToggleGroupPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its
+        // children to the track by default, and `inline-flex` does not opt out
+        // of that. Without it the strip grew to whatever the widest sibling was
+        // — a label above it — and left dead space after the last segment.
+        "relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1",
+        className
+      ),
+      ...props,
+      onValueChange: (next) => {
+        if (single) setUncontrolled(next ?? "");
+        props.onValueChange?.(next);
+      },
+      children: [
+        single && indicator.ready && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-m22-animated": true,
+            className: "absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
+            style: {
+              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,
+              width: indicator.width,
+              height: indicator.height,
+              insetInlineStart: 0,
+              top: 0
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+  return single ? /* @__PURE__ */ jsx(SingleValueContext.Provider, { value, children: root }) : root;
+}
+function ToggleGroupItem({ className, value, ...props }) {
+  const selected = useContext(SingleValueContext);
+  const isSingle = selected !== null;
+  const active = isSingle && selected === value;
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      value,
+      "data-indicator-active": active ? "true" : void 0,
+      className: cn(
+        "relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+        isSingle ? active ? "text-(--accent-foreground)" : "text-(--ink-3-aa) hover:text-(--ink)" : "text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ToggleGroup_default = ToggleGroup;
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroup_default as default
+};
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/components/ToggleGroup/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({ className, children, ...props }: ToggleGroupProps) {\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-m22-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--accent-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AAgDI,SAiBI,KAjBJ;AA9CJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA0BrD,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAAqB;AAI/E,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,qBAAiB;AAAA,YACjB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+/**
+ * Wrap the app — or the smallest subtree that has tooltips — once. Radix needs
+ * it to share the open/close timing between neighbouring triggers, which is
+ * what stops a row of icon buttons flashing a tooltip per hover.
+ */
+declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
+interface TooltipProps extends Pick<ComponentProps<typeof TooltipPrimitive.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'> {
+    /** The element the tooltip describes. Must be focusable. */
+    children: ReactNode;
+    /**
+     * The tip. Keep it to a phrase — a tooltip is unreachable on touch and
+     * invisible to a reader who is scanning, so anything a user NEEDS belongs on
+     * the page instead.
+     */
+    content: ReactNode;
+    side?: ComponentProps<typeof TooltipPrimitive.Content>['side'];
+    sideOffset?: number;
+}
+/**
+ * A short label on hover and on focus.
+ *
+ * `asChild` on the trigger by design: the tooltip must not add a wrapper that
+ * swallows the trigger's own focus ring or breaks a flex row. It also means the
+ * child has to be focusable — a `<div>` trigger gets no keyboard tooltip, which
+ * is the failure this API shape makes obvious rather than silent.
+ *
+ * Not a replacement for an accessible name. An icon-only button still needs its
+ * own `aria-label`; the tooltip repeats that name for sighted pointer users.
+ *
+ * @example
+ * <TooltipProvider>
+ *   <Tooltip content="Copy to clipboard">
+ *     <Button iconOnly aria-label="Copy"><Copy size={16} /></Button>
+ *   </Tooltip>
+ * </TooltipProvider>
+ */
+declare function Tooltip({ children, content, side, sideOffset, ...root }: TooltipProps): react.JSX.Element;
+
+export { Tooltip, type TooltipProps, TooltipProvider, Tooltip as default };