@uisatin/ui 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @uisatin/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- 51f930e: New components built from the ones Satin already has:
+
+  - Buttons: `ButtonGroup` (attached or spaced, with `ButtonGroupSeparator`), `SplitButton`, `ActionButton` (arrow, spinner, checkmark in one slot), and `loading` on `Button`.
+  - Forms: `Form` (one layout, errors by `name`, focus on the first invalid field, `onSubmitValues`), `FormSection`, `FormActions`, `FieldGroup`, `InputGroup` with `InputGroupAddon`, `PasswordInput`, `leadingText` / `trailingText` on `Input`, and `name` on `FormField`.
+  - Choices: `SelectableRadio` and `SelectableCheckbox`, in `sm` and `md`.
+  - Feedback and content: `Alert`, `Spinner`, `Separator`, `Link`, `List` with `Item`.
+
+  Fixes: `cn` now knows Satin's theme names (`text-body`, `rounded-pill`, `h-control-height`…), so `text-body` is no longer dropped next to a text colour (Banner descriptions, StreamingText and table cells take the theme's body size again) and app classes replace them as they should. Checkbox and Radio texts dim inside a disabled fieldset.
+
+## 0.3.0
+
+### Minor Changes
+
+- 0d40736: Satin now sits next to an app's own Tailwind or shadcn/ui theme without touching it. The stylesheet's classes carry Satin's prefix (`sa:flex`), its theme variables are `--sa-*` (`--sa-text-sm`, `--sa-color-blue-600`, `--sa-radius`, `--sa-chart-1`…), and Tailwind's reset and Satin's base rules apply only to Satin's elements, so the app's `text-sm`, `--spacing`, `--radius`, list styles and headings stay the app's in either import order. Tailwind classes passed in `className` still replace the Satin classes they conflict with.
+
+  Breaking for custom CSS that read Satin's primitive variables: use `--sa-color-*` and `--sa-radius-*` instead of `--color-*` and `--radius-*` (semantic tokens like `--bg-card` and `--action-primary-bg` are unchanged). `themeCss()` writes the new names. The shadcn registry ships the same prefixed source. The empty source maps are gone from the package.
+
+- 9a4b332: Every component now takes ordinary HTML attributes and a `ref` (`id`, `data-*`, `aria-*`, `style`, handlers): fields pass them to the control a label points at (Select's trigger, NumberInput's input), overlays to their panel (Dialog, Sheet, Popover, menus, Tooltip's bubble). Each component's docs comment says where they go. Tabs' extra props are now typed.
+
+  New `SatinLabels` (`@uisatin/ui/labels`): the words components say on their own (Close, Increase, Select all rows, Pick a date…) are English by default and can be translated or reworded for an app or part of it. A component's own prop still wins.
+
+  Table: a column's `key` must be a field of the row unless the column renders its own `cell`, so a typo is a type error; rows no longer need an index signature. Internal helpers still exported from the root (`CloseIcon`, `menuItemClass`, `FieldChrome`…) are marked `@internal`.
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -10,7 +10,7 @@ Satin's React components: shadcn-based, built on Radix, themed with Satin tokens
 
 **Satin Free.** This package is the free, open-source edition of Satin, under the MIT license. Satin Pro, with more components, patterns and templates, will ship separately as its own licensed package; nothing here changes when it does.
 
-You don't need Tailwind. Satin ships one precompiled stylesheet with the tokens and every class the components use.
+You don't need Tailwind. Satin ships one precompiled stylesheet with the tokens and every class the components use. If your app has its own Tailwind (v3 or v4) or a shadcn/ui theme, the two don't touch: Satin's classes are prefixed (`sa:flex`), its variables are `--sa-*`, and its reset only applies to Satin's elements, so your `text-sm`, `--spacing` or `--radius` stay yours in either import order.
 
 ## Install
 
@@ -43,6 +43,15 @@ export function Save() {
 
 **Dark mode:** add the `dark` class to `<html>` or any parent element.
 
+**Customizing:**
+
+- Props first: `variant`, `size`, `tone`, `shape` cover what the design system allows.
+- `className` takes your own classes and lands on the component's root. With Tailwind in your app, a utility there replaces the Satin class it conflicts with (`<Button className="px-6">` drops Satin's padding for yours). Without Tailwind, use your own CSS classes; a Tailwind class name alone does nothing, because Satin's stylesheet only contains its own prefixed classes.
+- Theme: brand colour and corners with `themeCss({ brand, radius })` or the customizer at https://uisatin.dev/theming. Semantic tokens (`--bg-card`, `--text-muted`, `--action-primary-bg`…) can be set in your CSS too.
+- Words: the labels components say on their own (Close, Increase, Select all rows…) are English by default. Wrap the app in `<SatinLabels labels={{ close: 'Zamknij' }}>` (from `@uisatin/ui/labels`) to translate or reword any of them.
+- HTML attributes and `ref`: every component passes `id`, `data-*`, `aria-*`, handlers and `ref` to its main element (the control for fields, the panel for overlays); each component's docs comment says which.
+- Satin's CSS sits in cascade layers (`theme`, `base`, `components`, `utilities`). Your unlayered rules win over it, so a global `p { margin: … }` also reaches a paragraph inside a Satin Card; scope those rules or put them in `@layer base`.
+
 **Font:** the tokens ask for Geist and Geist Mono; load them (for example with `@fontsource-variable/geist`) or the system font is used.
 
 ## Copy the source instead (shadcn registry)

package/{chunk-P4O6TGDR.js → chunk-3VVO5MY5.js}

@@ -1,6 +1,7 @@
-import { menuItemClass, MenuItemContent } from './chunk-3DINAQLL.js';
-import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { menuItemClass, MenuItemContent } from './chunk-P36KBUYD.js';
+import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-XWPH7C2W.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Dialog } from 'radix-ui';
 import { Search } from 'iconoir-react';
@@ -17,14 +18,16 @@ function CommandMenu({
   defaultOpen = false,
   onOpenChange,
   hotkey = true,
-  placeholder = "Type a command or search\u2026",
+  placeholder,
   emptyText = (q) => `No results for \u201C${q}\u201D`,
   hints = true,
   modal = true,
   container,
   onOpenAutoFocus,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
   const open = openProp ?? uncontrolledOpen;
   const setOpen = React.useCallback(
@@ -69,24 +72,25 @@ function CommandMenu({
   const position = container ? "absolute" : "fixed";
   let index = -1;
   return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: setOpen, modal, children: /* @__PURE__ */ jsxs(Dialog.Portal, { container, children: [
-    /* @__PURE__ */ jsx(Dialog.Overlay, { className: cn(position, "inset-0 z-50 bg-black-a40") }),
-    /* @__PURE__ */ jsx("div", { className: cn(position, "pointer-events-none inset-0 z-50 flex items-center justify-center p-4"), children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Dialog.Overlay, { className: cn(position, "sa:inset-0 sa:z-50 sa:bg-black-a40") }),
+    /* @__PURE__ */ jsx("div", { className: cn(position, "sa:pointer-events-none sa:inset-0 sa:z-50 sa:flex sa:items-center sa:justify-center sa:p-4"), children: /* @__PURE__ */ jsxs(
       Dialog.Content,
       {
-        "data-slot": "command-menu",
         "aria-describedby": void 0,
+        ...props,
+        "data-slot": "command-menu",
         onOpenAutoFocus,
         className: cn(
-          "pointer-events-auto flex h-fit max-h-[min(480px,76vh)] w-[520px] max-w-full flex-col overflow-hidden",
-          "rounded-2xl border border-border-subtle bg-bg-popover",
-          "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
-          "outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          "sa:pointer-events-auto sa:flex sa:h-fit sa:max-h-[min(480px,76vh)] sa:w-[520px] sa:max-w-full sa:flex-col sa:overflow-hidden",
+          "sa:rounded-2xl sa:border sa:border-border-subtle sa:bg-bg-popover",
+          "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+          "sa:outline-none sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: "Command menu" }),
-          /* @__PURE__ */ jsxs("label", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border-subtle px-4 text-text-muted", children: [
-            /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 [stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx(Dialog.Title, { className: "sa:sr-only", children: labels.commandMenu }),
+          /* @__PURE__ */ jsxs("label", { className: "sa:flex sa:h-12 sa:shrink-0 sa:items-center sa:gap-2 sa:border-b sa:border-border-subtle sa:px-4 sa:text-text-muted", children: [
+            /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:[stroke-width:1.875]" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -95,9 +99,9 @@ function CommandMenu({
                 "aria-controls": listId,
                 "aria-autocomplete": "list",
                 "aria-activedescendant": flat[active] ? optionId(active) : void 0,
-                "aria-label": "Search commands",
+                "aria-label": labels.searchCommands,
                 value: query,
-                placeholder,
+                placeholder: placeholder ?? labels.commandPlaceholder,
                 onChange: (e) => {
                   setQuery(e.target.value);
                   setActive(0);
@@ -112,13 +116,13 @@ function CommandMenu({
                     run(flat[active]);
                   }
                 },
-                className: "min-w-0 flex-1 bg-transparent text-base leading-[21px] text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0"
+                className: "sa:min-w-0 sa:flex-1 sa:bg-transparent sa:text-base sa:leading-[21px] sa:text-text-default sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0"
               }
             ),
             /* @__PURE__ */ jsx(Kbd, { size: "md", "aria-hidden": true, children: "Esc" })
           ] }),
-          /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "flex min-h-0 flex-col gap-2 overflow-y-auto p-2", children: flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-8 text-center text-sm text-text-muted", children: emptyText(query) }) : shown.map((g, gi) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${listId}-g${gi}`, className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx("div", { id: `${listId}-g${gi}`, className: "flex h-6 items-center px-2 text-xs leading-3 font-medium tracking-normal text-text-muted", children: g.label }),
+          /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": labels.commands, className: "sa:flex sa:min-h-0 sa:flex-col sa:gap-2 sa:overflow-y-auto sa:p-2", children: flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "sa:px-2 sa:py-8 sa:text-center sa:text-sm sa:text-text-muted", children: emptyText(query) }) : shown.map((g, gi) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${listId}-g${gi}`, className: "sa:flex sa:flex-col", children: [
+            /* @__PURE__ */ jsx("div", { id: `${listId}-g${gi}`, className: "sa:flex sa:h-6 sa:items-center sa:px-2 sa:text-xs sa:leading-3 sa:font-medium sa:tracking-normal sa:text-text-muted", children: g.label }),
             g.items.map((item) => {
               index += 1;
               const i = index;
@@ -150,10 +154,10 @@ function CommandMenu({
               );
             })
           ] }, gi)) }),
-          hints && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex h-10 shrink-0 items-center gap-4 border-t border-border-subtle px-4", children: [
-            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: "Navigate" }),
-            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: "Open" }),
-            /* @__PURE__ */ jsx(KbdHint, { className: "ml-auto", keys: ["Esc"], label: "Close" })
+          hints && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "sa:flex sa:h-10 sa:shrink-0 sa:items-center sa:gap-4 sa:border-t sa:border-border-subtle sa:px-4", children: [
+            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: labels.navigate }),
+            /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: labels.openItem }),
+            /* @__PURE__ */ jsx(KbdHint, { className: "sa:ml-auto", keys: ["Esc"], label: labels.close })
           ] })
         ]
       }
@@ -162,5 +166,3 @@ function CommandMenu({
 }
 
 export { CommandMenu };
-//# sourceMappingURL=chunk-P4O6TGDR.js.map
-//# sourceMappingURL=chunk-P4O6TGDR.js.map

package/chunk-47DDBME3.js

@@ -0,0 +1,87 @@
+import { HoverCard } from './chunk-W2EH6RY5.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SourceIcon({ source }) {
+  if (source.icon) return /* @__PURE__ */ jsx("span", { className: "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:overflow-clip sa:rounded-xs sa:[&>*]:size-4", children: source.icon });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:rounded-xs sa:bg-bg-muted sa:text-[10px] sa:leading-none sa:font-semibold sa:text-text-muted", children: source.title.charAt(0).toUpperCase() });
+}
+function Citation({ index, source, className, "aria-label": ariaLabel, ...props }) {
+  const labels = useSatinLabels();
+  const chip = /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      "data-slot": "citation",
+      href: source.href,
+      target: source.href ? "_blank" : void 0,
+      rel: source.href ? "noreferrer" : void 0,
+      "aria-label": ariaLabel ?? `${labels.source} ${index}: ${source.title}`,
+      className: cn(
+        "sa:mx-0.5 sa:inline-grid sa:h-4 sa:min-w-4 sa:translate-y-[-1px] sa:place-items-center sa:rounded-sm sa:bg-bg-muted sa:px-1 sa:align-middle sa:text-xs sa:leading-none sa:font-medium sa:text-text-default sa:no-underline sa:tabular-nums sa:outline-none",
+        "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:hover:bg-bg-hover sa:hover:[box-shadow:inset_0_0_0_1px_var(--border-strong)] sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className
+      ),
+      children: index
+    }
+  );
+  return /* @__PURE__ */ jsxs(HoverCard, { trigger: chip, side: "top", align: "center", className: "sa:w-[300px] sa:gap-2 sa:p-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-center sa:gap-2 sa:text-xs sa:text-text-muted", children: [
+      /* @__PURE__ */ jsx(SourceIcon, { source }),
+      /* @__PURE__ */ jsx("span", { className: "sa:truncate", children: source.origin })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:font-medium sa:text-text-default", children: source.title }),
+    source.quote && /* @__PURE__ */ jsxs("span", { className: "sa:text-body sa:text-text-muted", children: [
+      "\u201C",
+      source.quote,
+      "\u201D"
+    ] })
+  ] });
+}
+function Sources({ sources, defaultOpen = false, className, ...props }) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const listId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { ...props, "data-slot": "sources", className: cn("sa:flex sa:flex-col sa:gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen(!open),
+        className: cn(
+          "sa:inline-flex sa:h-8 sa:w-fit sa:items-center sa:gap-2 sa:rounded-pill sa:border sa:border-border-default sa:py-1 sa:pr-3 sa:pl-1.5 sa:text-sm sa:font-medium sa:text-text-default sa:outline-none",
+          "sa:transition-[border-color,background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:hover:border-border-strong sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          open && "sa:bg-bg-hover"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:flex sa:items-center sa:gap-0.5", children: sources.slice(0, 3).map((s, i) => /* @__PURE__ */ jsx(SourceIcon, { source: s }, i)) }),
+          sources.length,
+          " ",
+          sources.length === 1 ? "source" : "sources"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: listId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ol", { className: "sa:flex sa:flex-col sa:gap-0.5", children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: s.href,
+        target: s.href ? "_blank" : void 0,
+        rel: s.href ? "noreferrer" : void 0,
+        className: "sa:flex sa:items-center sa:gap-3 sa:rounded-lg sa:p-2 sa:text-sm sa:no-underline sa:outline-none sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:hover:bg-bg-hover sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:grid sa:h-4 sa:min-w-4 sa:place-items-center sa:rounded-sm sa:bg-bg-muted sa:px-1 sa:text-xs sa:leading-none sa:font-medium sa:text-text-default sa:tabular-nums", children: i + 1 }),
+          /* @__PURE__ */ jsx(SourceIcon, { source: s }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-default", children: s.title }),
+          s.origin && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-text-muted", children: s.origin })
+        ]
+      }
+    ) }, i)) }) }) })
+  ] });
+}
+
+export { Citation, Sources };

package/{chunk-SHDFUXYV.js → chunk-5663JVE5.js}

@@ -1,6 +1,6 @@
-import { niceMax } from './chunk-DO3TBNSC.js';
-import { ChartCard, defaultFormat, ChartTooltip } from './chunk-YPJYW624.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { niceMax } from './chunk-INJWE2LD.js';
+import { ChartCard, defaultFormat, ChartTooltip } from './chunk-LI5VYDLN.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -71,13 +71,13 @@ function LineCard({
     setHovered(Math.max(0, Math.min(n - 1, Math.round(f * (n - 1)))));
   };
   const fmt = (v) => `${formatValue(v)}${unit ? ` ${unit}` : ""}`;
-  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? defaultFormat(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative pt-2 pl-8", children: [
+  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? defaultFormat(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:pt-2 sa:pl-8", children: [
     ticks.map((t, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       i < 4 && /* @__PURE__ */ jsx(
         "span",
         {
           "aria-hidden": true,
-          className: "absolute right-0 left-8 h-px border-t border-dashed border-border-subtle",
+          className: "sa:absolute sa:right-0 sa:left-8 sa:h-px sa:border-t sa:border-dashed sa:border-border-subtle",
           style: { top: 8 + TRACK / 4 * i }
         }
       ),
@@ -85,7 +85,7 @@ function LineCard({
         "span",
         {
           "aria-hidden": true,
-          className: cn("absolute left-6 w-6 -translate-x-full text-right text-xs leading-[18px] text-text-muted", fade && "satin-bar-fade"),
+          className: cn("sa:absolute sa:left-6 sa:w-6 sa:-translate-x-full sa:text-right sa:text-xs sa:leading-[18px] sa:text-text-muted", fade && "satin-bar-fade"),
           style: { top: 8 + TRACK / 4 * i - 9 },
           children: formatValue(t)
         },
@@ -98,7 +98,7 @@ function LineCard({
         role: "group",
         "aria-label": `${props.title}, ${n} points`,
         tabIndex: 0,
-        className: "relative rounded-md outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className: "sa:relative sa:rounded-md sa:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
         style: { height: TRACK },
         onPointerMove: pick,
         onPointerLeave: () => setHovered(null),
@@ -116,12 +116,12 @@ function LineCard({
               "aria-hidden": true,
               viewBox: `0 0 100 ${TRACK}`,
               preserveAspectRatio: "none",
-              className: cn("absolute inset-0 size-full overflow-visible", fade && "satin-bar-fade"),
+              className: cn("sa:absolute sa:inset-0 sa:size-full sa:overflow-visible", fade && "satin-bar-fade"),
               children: [
                 area && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "var(--chart-3)", stopOpacity: "0.28" }),
-                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--chart-3)", stopOpacity: "0" })
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "var(--sa-chart-3)", stopOpacity: "0.28" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--sa-chart-3)", stopOpacity: "0" })
                   ] }) }),
                   /* @__PURE__ */ jsx("path", { d: `${line} L 100 ${TRACK} L 0 ${TRACK} Z`, fill: `url(#${gradientId})` })
                 ] }),
@@ -142,7 +142,7 @@ function LineCard({
                   {
                     d: line,
                     fill: "none",
-                    stroke: "var(--chart-3)",
+                    stroke: "var(--sa-chart-3)",
                     strokeWidth: 2,
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
@@ -159,23 +159,23 @@ function LineCard({
               {
                 ref: setAnchor,
                 "aria-hidden": true,
-                className: "pointer-events-none absolute size-2 -translate-1/2 rounded-full border-2 border-chart-3 bg-bg-card",
+                className: "sa:pointer-events-none sa:absolute sa:size-2 sa:-translate-1/2 sa:rounded-full sa:border-2 sa:border-chart-3 sa:bg-bg-card",
                 style: { left: `${x(active)}%`, top: y(data[active].value) }
               }
             ),
             /* @__PURE__ */ jsx(ChartTooltip, { anchor, sideOffset: 6, label: data[active].tooltipLabel ?? data[active].label, value: fmt(data[active].value) }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: `${data[active].tooltipLabel ?? data[active].label}: ${fmt(data[active].value)}` })
+            /* @__PURE__ */ jsx("span", { className: "sa:sr-only", "aria-live": "polite", children: `${data[active].tooltipLabel ?? data[active].label}: ${fmt(data[active].value)}` })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "relative mt-1.5 h-5", children: data.map(
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:relative sa:mt-1.5 sa:h-5", children: data.map(
       (d, i) => showLabel(i) ? /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "absolute -translate-x-1/2 text-sm leading-(--text-sm--line-height) whitespace-nowrap",
-            i === active ? "font-medium text-text-default" : "text-text-muted",
+            "sa:absolute sa:-translate-x-1/2 sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:whitespace-nowrap",
+            i === active ? "sa:font-medium sa:text-text-default" : "sa:text-text-muted",
             fade && "satin-bar-fade"
           ),
           style: { left: `${x(i)}%` },
@@ -191,5 +191,3 @@ function AreaCard(props) {
 }
 
 export { AreaCard, LineCard };
-//# sourceMappingURL=chunk-SHDFUXYV.js.map
-//# sourceMappingURL=chunk-SHDFUXYV.js.map

package/chunk-67CBFB6Y.js

@@ -0,0 +1,99 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ListContext = React.createContext(null);
+function Item({
+  title,
+  description,
+  icon,
+  media,
+  meta,
+  actions,
+  href,
+  target,
+  onClick,
+  selected = false,
+  disabled = false,
+  size: ownSize,
+  variant = "plain",
+  className,
+  children,
+  ...props
+}) {
+  const list = React.useContext(ListContext);
+  const size = ownSize ?? list?.size ?? "md";
+  const sm = size === "sm";
+  const interactive = (href !== void 0 || onClick !== void 0) && !disabled;
+  const Root = list ? "li" : "div";
+  const flush = list?.variant === "divided" || list?.variant === "card";
+  const target_ = "sa:outline-none sa:after:absolute sa:after:inset-0";
+  const titleText = /* @__PURE__ */ jsx("span", { className: "sa:block sa:truncate", children: title });
+  const titleNode = href !== void 0 && !disabled ? /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, "data-slot": "item-target", "aria-current": selected ? "page" : void 0, className: cn(target_, "sa:no-underline sa:text-inherit"), children: titleText }) : onClick && !disabled ? /* @__PURE__ */ jsx("button", { type: "button", "data-slot": "item-target", "aria-pressed": selected || void 0, onClick, className: cn(target_, "sa:block sa:w-full sa:cursor-pointer sa:text-left"), children: titleText }) : titleText;
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      "data-slot": "item",
+      "data-size": size,
+      "data-selected": selected || void 0,
+      "data-disabled": disabled || void 0,
+      className: cn(
+        "sa:relative sa:flex sa:min-w-0 sa:items-center",
+        sm ? "sa:min-h-10 sa:gap-2.5 sa:px-2 sa:py-1.5" : "sa:min-h-14 sa:gap-3 sa:px-3 sa:py-2.5",
+        flush ? list?.variant === "card" ? sm ? "sa:px-3" : "sa:px-4" : "sa:px-0" : "sa:rounded-lg",
+        variant === "sa:outline" && !list && "sa:border sa:border-border-default sa:bg-bg-card sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        interactive && "sa:hover:bg-bg-hover",
+        interactive && flush && list?.variant === "divided" && "sa:hover:bg-transparent sa:[&:hover_[data-slot=item-title]]:underline",
+        selected && "sa:bg-bg-selected sa:hover:bg-bg-selected",
+        // The focus ring of the stretched link, drawn on the row.
+        "sa:has-[[data-slot=item-target]:focus-visible]:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
+        disabled && "sa:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        media ? /* @__PURE__ */ jsx("span", { className: "sa:flex sa:shrink-0 sa:items-center", children: media }) : icon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "sa:grid sa:shrink-0 sa:place-items-center sa:rounded-lg sa:bg-bg-muted sa:text-text-muted sa:[&_svg]:size-icon-size sa:[&_svg]:[stroke-width:1.875]",
+              sm ? "sa:size-7" : "sa:size-8"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "sa:min-w-0 sa:flex-1", children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "item-title", className: "sa:text-sm sa:leading-5 sa:font-medium sa:text-text-default sa:underline-offset-[3px]", children: titleNode }),
+          description && /* @__PURE__ */ jsx("p", { className: "sa:truncate sa:text-sm sa:leading-5 sa:text-text-muted", children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: "sa:mt-1.5", children })
+        ] }),
+        meta && /* @__PURE__ */ jsx("div", { className: "sa:shrink-0 sa:text-sm sa:text-text-muted sa:tabular-nums", children: meta }),
+        actions && // Above the stretched target, so they stay their own controls.
+        /* @__PURE__ */ jsx("div", { className: "sa:relative sa:z-10 sa:flex sa:shrink-0 sa:items-center sa:gap-1", children: actions })
+      ]
+    }
+  );
+}
+function List({ variant = "plain", size = "md", className, ...props }) {
+  const context = React.useMemo(() => ({ variant, size }), [variant, size]);
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      role: "list",
+      "data-slot": "list",
+      "data-variant": variant,
+      className: cn(
+        "sa:m-0 sa:flex sa:w-full sa:list-none sa:flex-col sa:p-0",
+        variant === "plain" && "sa:gap-0.5",
+        variant !== "plain" && "sa:divide-y sa:divide-border-default",
+        variant === "card" && "sa:overflow-hidden sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-card sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+export { Item, List };

package/chunk-6DWLTGRQ.js

@@ -0,0 +1,130 @@
+import { Spinner } from './chunk-AKEZCWNW.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var buttonVariants = cva(
+  [
+    "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:overflow-clip sa:font-medium sa:whitespace-nowrap sa:select-none",
+    "sa:transition-[background-color,border-color,color,box-shadow,transform] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    // A menu or popover trigger snaps back to full size the moment it opens (no scale, no
+    // transform transition), so the menu measures the button's real edge and never jumps.
+    "sa:not-aria-expanded:active:scale-[0.97] sa:aria-expanded:[transition-property:background-color,border-color,color,box-shadow]",
+    "sa:disabled:pointer-events-none sa:disabled:opacity-50",
+    "sa:focus-visible:outline-none sa:[&_svg]:pointer-events-none sa:[&_svg]:shrink-0",
+    // Figma icons are 1.25px at 16 and 1.09px at 14; on Iconoir's 24 grid both are 1.875.
+    "sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "sa:border sa:border-action-primary-border sa:bg-action-primary-bg sa:text-action-primary-fg",
+          "sa:[box-shadow:0_0_0_1px_var(--action-primary-bg),0_3px_6px_0_var(--action-primary-shadow)]",
+          "sa:satin-hover:bg-action-primary-bg-hover sa:satin-hover:[box-shadow:0_0_0_1px_var(--action-primary-bg-hover),0_3px_6px_0_var(--action-primary-shadow)]",
+          "sa:satin-focus:[box-shadow:0_0_0_1px_var(--action-primary-bg),0_3px_6px_0_var(--action-primary-shadow),0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-action-primary-bg-pressed sa:satin-pressed:[box-shadow:0_0_0_1px_var(--action-primary-bg-pressed)]",
+          "sa:[&[aria-haspopup][aria-expanded=true]:focus-visible]:[box-shadow:0_0_0_1px_var(--action-primary-bg-pressed),0_0_0_2px_var(--action-focus-ring)]"
+        ],
+        destructive: [
+          "sa:border sa:border-action-destructive-border sa:bg-action-destructive-bg sa:text-text-on-solid",
+          "sa:[box-shadow:0_0_0_1px_var(--action-destructive-bg),0_3px_6px_0_var(--action-primary-shadow)]",
+          "sa:satin-hover:bg-action-destructive-bg-hover sa:satin-hover:[box-shadow:0_0_0_1px_var(--action-destructive-bg-hover),0_3px_6px_0_var(--action-primary-shadow)]",
+          "sa:satin-focus:[box-shadow:0_0_0_1px_var(--action-destructive-bg),0_3px_6px_0_var(--action-primary-shadow),0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-action-destructive-bg-pressed sa:satin-pressed:[box-shadow:0_0_0_1px_var(--action-destructive-bg-pressed)]",
+          "sa:[&[aria-haspopup][aria-expanded=true]:focus-visible]:[box-shadow:0_0_0_1px_var(--action-destructive-bg-pressed),0_0_0_2px_var(--action-focus-ring)]"
+        ],
+        inverse: [
+          "sa:border sa:border-action-inverse-border sa:bg-action-inverse-bg sa:text-text-on-inverse",
+          "sa:[box-shadow:0_0_0_1px_var(--action-inverse-bg),0_3px_6px_0_var(--action-primary-shadow)]",
+          "sa:satin-hover:bg-action-inverse-bg-hover sa:satin-hover:[box-shadow:0_0_0_1px_var(--action-inverse-bg-hover),0_3px_6px_0_var(--action-primary-shadow)]",
+          "sa:satin-focus:[box-shadow:0_0_0_1px_var(--action-inverse-bg),0_3px_6px_0_var(--action-primary-shadow),0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-action-inverse-bg-pressed sa:satin-pressed:[box-shadow:0_0_0_1px_var(--action-inverse-bg-pressed)]",
+          "sa:[&[aria-haspopup][aria-expanded=true]:focus-visible]:[box-shadow:0_0_0_1px_var(--action-inverse-bg-pressed),0_0_0_2px_var(--action-focus-ring)]"
+        ],
+        // The outline is a 1px ring outside the box, like the filled variants' ring, so all of
+        // them read the same height; the border underneath takes the fill.
+        secondary: [
+          "sa:border sa:border-transparent sa:bg-bg-popover sa:text-text-default sa:[&_svg]:text-text-muted",
+          "sa:[box-shadow:0_0_0_1px_var(--border-default),0_1px_2px_1px_var(--effect-shadow-xs)]",
+          "sa:disabled:[box-shadow:0_0_0_1px_var(--border-strong)]",
+          "sa:satin-hover:bg-action-secondary-bg-hover sa:satin-hover:[box-shadow:0_0_0_1px_var(--border-strong),0_1px_2px_1px_var(--effect-shadow-xs)]",
+          "sa:satin-focus:bg-bg-popover sa:satin-focus:[box-shadow:0_0_0_1px_var(--border-strong),0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-action-secondary-bg-pressed sa:satin-pressed:[box-shadow:0_0_0_1px_var(--border-strong)]",
+          "sa:[&[aria-haspopup][aria-expanded=true]:focus-visible]:[box-shadow:0_0_0_1px_var(--border-strong),0_0_0_2px_var(--action-focus-ring)]"
+        ],
+        tertiary: [
+          "sa:bg-transparent sa:text-text-default sa:[&_svg]:text-text-muted",
+          "sa:satin-hover:bg-bg-hover",
+          "sa:satin-focus:bg-bg-hover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-border-input",
+          "sa:[&[aria-haspopup][aria-expanded=true]:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+        ]
+      },
+      size: {
+        xs: "sa:h-control-height-xs sa:gap-1 sa:px-2 sa:text-sm sa:[&_svg]:size-icon-size-sm",
+        md: "sa:h-control-height sa:gap-1.5 sa:px-2.5 sa:text-sm sa:[&_svg]:size-icon-size",
+        lg: "sa:h-control-height-lg sa:gap-1.5 sa:px-3 sa:text-sm sa:[&_svg]:size-icon-size",
+        xl: "sa:h-control-height-xl sa:gap-2 sa:px-3 sa:text-base sa:[&_svg]:size-icon-size"
+      },
+      shape: {
+        default: "",
+        rounded: "sa:rounded-pill"
+      },
+      iconOnly: {
+        true: "sa:px-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Default shape: the radius grows with the size (8 / 10 / 10 / 12).
+      { shape: "default", size: "xs", className: "sa:rounded-md" },
+      { shape: "default", size: "md", className: "sa:rounded-lg" },
+      { shape: "default", size: "lg", className: "sa:rounded-lg" },
+      { shape: "default", size: "xl", className: "sa:rounded-xl" },
+      { iconOnly: true, size: "xs", className: "sa:w-control-height-xs" },
+      { iconOnly: true, size: "md", className: "sa:w-control-height" },
+      { iconOnly: true, size: "lg", className: "sa:w-control-height-lg" },
+      { iconOnly: true, size: "xl", className: "sa:w-control-height-xl" }
+    ],
+    defaultVariants: { variant: "primary", size: "md", shape: "default", iconOnly: false }
+  }
+);
+var ButtonDefaultsContext = React.createContext(null);
+function Button({ className, variant, size, shape, iconOnly, asChild = false, loading = false, type, onClick, children, "aria-disabled": ariaDisabled, ...props }) {
+  const Comp = asChild ? Slot.Root : "button";
+  const group = React.useContext(ButtonDefaultsContext);
+  const resolved = variant ?? group?.variant ?? "primary";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": resolved,
+      type: asChild ? void 0 : type ?? "button",
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || ariaDisabled || void 0,
+      "data-loading": loading || void 0,
+      className: cn(
+        buttonVariants({ variant: resolved, size: size ?? group?.size, shape: shape ?? group?.shape, iconOnly }),
+        loading && "sa:relative sa:cursor-progress",
+        className
+      ),
+      onClick: (event) => {
+        if (loading) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      },
+      ...props,
+      children: loading && !asChild ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "sa:invisible sa:contents", children }),
+        /* @__PURE__ */ jsx("span", { className: "sa:absolute sa:inset-0 sa:grid sa:place-items-center", children: /* @__PURE__ */ jsx(Spinner, { size: (size ?? group?.size) === "xs" ? "sm" : "md", label: null }) })
+      ] }) : children
+    }
+  );
+}
+
+export { Button, ButtonDefaultsContext, buttonVariants };