@uisatin/ui 0.2.0 → 0.3.0

package/{chunk-6QMSWITQ.js → chunk-SDOTDMYG.js}

@@ -1,6 +1,6 @@
-import { bannerMesh } from './chunk-YX5VNRJX.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { bannerMesh } from './chunk-YYFAZQ25.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { Xmark } from 'iconoir-react';
@@ -8,26 +8,26 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var bannerVariants = cva(
   [
-    "relative isolate flex max-w-full overflow-clip border border-border-default bg-bg-card",
-    "[box-shadow:0_2px_4px_-2px_var(--effect-shadow-sm),0_4px_6px_-1px_var(--effect-shadow-sm)]"
+    "sa:relative sa:isolate sa:flex sa:max-w-full sa:overflow-clip sa:border sa:border-border-default sa:bg-bg-card",
+    "sa:[box-shadow:0_2px_4px_-2px_var(--effect-shadow-sm),0_4px_6px_-1px_var(--effect-shadow-sm)]"
   ],
   {
     variants: {
       layout: {
-        horizontal: "w-[450px] items-center gap-2.5 px-3 py-2",
-        sidebar: "w-[222px] flex-col items-start gap-3 p-3"
+        horizontal: "sa:w-[450px] sa:items-center sa:gap-2.5 sa:px-3 sa:py-2",
+        sidebar: "sa:w-[222px] sa:flex-col sa:items-start sa:gap-3 sa:p-3"
       },
       shape: {
-        rounded: "rounded-xl",
-        pill: "rounded-3xl"
+        rounded: "sa:rounded-xl",
+        pill: "sa:rounded-3xl"
       },
       lines: {
         one: "",
         two: ""
       }
     },
-    compoundVariants: [{ layout: "horizontal", shape: "pill", lines: "one", className: "rounded-pill" }],
-    defaultVariants: { layout: "horizontal", shape: "rounded", lines: "one" }
+    compoundVariants: [{ layout: "horizontal", shape: "pill", lines: "one", className: "sa:rounded-pill" }],
+    defaultVariants: { layout: "horizontal", shape: "sa:rounded", lines: "one" }
   }
 );
 function Banner({
@@ -59,8 +59,8 @@ function Banner({
       "aria-label": dismissLabel,
       onClick: onDismiss,
       className: cn(
-        sidebar && "absolute top-[3px] right-[3px] z-10",
-        primary && "text-action-primary-fg [&_svg]:text-action-primary-fg satin-hover:bg-action-primary-bg-hover"
+        sidebar && "sa:absolute sa:top-[3px] sa:right-[3px] sa:z-10",
+        primary && "sa:text-action-primary-fg sa:[&_svg]:text-action-primary-fg sa:satin-hover:bg-action-primary-bg-hover"
       ),
       children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true })
     }
@@ -74,7 +74,7 @@ function Banner({
       "data-tone": tone,
       className: cn(
         bannerVariants({ layout, shape, lines }),
-        primary && "border-action-primary-border bg-action-primary-bg",
+        primary && "sa:border-action-primary-border sa:bg-action-primary-bg",
         shimmer && "satin-sheen",
         className
       ),
@@ -86,7 +86,7 @@ function Banner({
             src: glow.dark,
             alt: "",
             "aria-hidden": true,
-            className: "pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-screen"
+            className: "sa:pointer-events-none sa:absolute sa:-inset-px sa:-z-10 sa:size-[calc(100%+2px)] sa:max-w-none sa:object-cover sa:mix-blend-screen"
           }
         ),
         background === "mesh" && !primary && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -96,7 +96,7 @@ function Banner({
               src: glow.light,
               alt: "",
               "aria-hidden": true,
-              className: "pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-multiply"
+              className: "sa:pointer-events-none sa:absolute sa:-inset-px sa:-z-10 sa:size-[calc(100%+2px)] sa:max-w-none sa:object-cover sa:mix-blend-multiply"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -105,7 +105,7 @@ function Banner({
               src: glow.dark,
               alt: "",
               "aria-hidden": true,
-              className: "pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-screen"
+              className: "sa:pointer-events-none sa:absolute sa:-inset-px sa:-z-10 sa:size-[calc(100%+2px)] sa:max-w-none sa:object-cover sa:mix-blend-screen"
             }
           )
         ] }),
@@ -113,20 +113,20 @@ function Banner({
           "div",
           {
             className: cn(
-              "flex min-w-0 flex-col justify-center text-sm",
-              sidebar ? "w-full" : "flex-1",
-              description && "gap-0.5"
+              "sa:flex sa:min-w-0 sa:flex-col sa:justify-center sa:text-sm",
+              sidebar ? "sa:w-full" : "sa:flex-1",
+              description && "sa:gap-0.5"
             ),
             children: [
-              /* @__PURE__ */ jsx("p", { className: cn("truncate text-base leading-[18px] font-medium", primary ? "text-action-primary-fg" : "text-text-default"), children: title }),
-              description && /* @__PURE__ */ jsx("p", { className: cn("text-body", primary ? "text-action-primary-fg/80" : "text-text-muted", !sidebar && "truncate"), children: description })
+              /* @__PURE__ */ jsx("p", { className: cn("sa:truncate sa:text-base sa:leading-[18px] sa:font-medium", primary ? "sa:text-action-primary-fg" : "sa:text-text-default"), children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: cn("sa:text-body", primary ? "sa:text-action-primary-fg/80" : "sa:text-text-muted", !sidebar && "sa:truncate"), children: description })
             ]
           }
         ),
         sidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          action && /* @__PURE__ */ jsx("div", { className: "flex w-full items-center *:flex-1", children: action }),
+          action && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:w-full sa:items-center sa:*:flex-1", children: action }),
           close
-        ] }) : (action || close) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+        ] }) : (action || close) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-1", children: [
           action,
           close
         ] })
@@ -136,5 +136,3 @@ function Banner({
 }
 
 export { Banner, bannerVariants };
-//# sourceMappingURL=chunk-6QMSWITQ.js.map
-//# sourceMappingURL=chunk-6QMSWITQ.js.map

package/{chunk-UGRSWP6U.js → chunk-SPGUZMCC.js}

@@ -1,5 +1,5 @@
-import { Kbd } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Kbd } from './chunk-57QEOCDZ.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Search } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -24,14 +24,14 @@ var SearchBar = React.forwardRef(function SearchBar2({ shortcut = true, hotkey =
     {
       "data-slot": "search-bar",
       className: cn(
-        "flex h-control-height-lg w-full cursor-text items-center gap-2 rounded-lg border border-border-default bg-bg-card px-2",
-        "[box-shadow:0_1px_1px_0_var(--effect-shadow-xs)] transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-        "hover:border-border-strong",
-        "has-[input:focus-visible]:border-border-focus has-[input:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        "sa:flex sa:h-control-height-lg sa:w-full sa:cursor-text sa:items-center sa:gap-2 sa:rounded-lg sa:border sa:border-border-default sa:bg-bg-card sa:px-2",
+        "sa:[box-shadow:0_1px_1px_0_var(--effect-shadow-xs)] sa:transition-[border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:hover:border-border-strong",
+        "sa:has-[input:focus-visible]:border-border-focus sa:has-[input:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
         wrapperClassName
       ),
       children: [
-        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 text-text-muted [stroke-width:1.875]" }),
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:text-text-muted sa:[stroke-width:1.875]" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -48,14 +48,14 @@ var SearchBar = React.forwardRef(function SearchBar2({ shortcut = true, hotkey =
               onKeyDown?.(e);
             },
             className: cn(
-              "min-w-0 flex-1 bg-transparent text-sm text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0",
-              "[&::-webkit-search-cancel-button]:appearance-none",
+              "sa:min-w-0 sa:flex-1 sa:bg-transparent sa:text-sm sa:text-text-default sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0",
+              "sa:[&::-webkit-search-cancel-button]:appearance-none",
               className
             ),
             ...props
           }
         ),
-        shortcut && /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "flex shrink-0 items-center gap-0.5", children: [
+        shortcut && /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "sa:flex sa:shrink-0 sa:items-center sa:gap-0.5", children: [
           /* @__PURE__ */ jsx(Kbd, { children: "\u2318" }),
           /* @__PURE__ */ jsx(Kbd, { children: "K" })
         ] })
@@ -65,5 +65,3 @@ var SearchBar = React.forwardRef(function SearchBar2({ shortcut = true, hotkey =
 });
 
 export { SearchBar };
-//# sourceMappingURL=chunk-UGRSWP6U.js.map
-//# sourceMappingURL=chunk-UGRSWP6U.js.map

package/chunk-SSOFFQ5T.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/labels.tsx
+var defaultLabels = {
+  close: "Close",
+  dismiss: "Dismiss",
+  announcement: "Announcement",
+  increase: "Increase",
+  decrease: "Decrease",
+  previous: "Previous",
+  next: "Next",
+  previousSection: "Previous section",
+  nextSection: "Next section",
+  previousQuestion: "Previous question",
+  nextQuestion: "Next question",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  year: "Year",
+  month: "Month",
+  sheets: "Sheets",
+  hiddenPages: "Hidden pages",
+  period: "Period",
+  commandMenu: "Command menu",
+  searchCommands: "Search commands",
+  commands: "Commands",
+  draft: "Draft",
+  files: "Files",
+  attachedFiles: "Attached files",
+  goodResponse: "Good response",
+  badResponse: "Bad response",
+  copy: "Copy",
+  attachments: "Attachments",
+  addToConversation: "Add to conversation",
+  message: "Message",
+  send: "Send",
+  stop: "Stop",
+  searchAgentsAndTools: "Search agents and tools",
+  addAgent: "Add an agent",
+  agentsAndTools: "Agents and tools",
+  model: "Model",
+  agent: "Agent",
+  remove: "Remove",
+  add: "Add",
+  selectAllRows: "Select all rows",
+  selectRow: "Select row",
+  select: "Select\u2026",
+  search: "Search\u2026",
+  noResults: "No results",
+  clear: "Clear",
+  apply: "Apply",
+  cancel: "Cancel",
+  pickDate: "Pick a date",
+  pickDates: "Pick dates",
+  from: "From",
+  to: "To",
+  value: "Value",
+  selected: "selected",
+  commandPlaceholder: "Type a command or search\u2026",
+  navigate: "Navigate",
+  openItem: "Open",
+  source: "Source"
+};
+var LabelsContext = React.createContext(defaultLabels);
+function SatinLabels({ labels, children }) {
+  const parent = React.useContext(LabelsContext);
+  const value = React.useMemo(() => ({ ...parent, ...labels }), [parent, labels]);
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children });
+}
+function useSatinLabels() {
+  return React.useContext(LabelsContext);
+}
+
+export { SatinLabels, defaultLabels, useSatinLabels };

package/{chunk-AN2RNJLR.js → chunk-SZJIVBOD.js}

@@ -1,10 +1,11 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Clock, DoubleCheck, ThumbsUp, ThumbsDown, Copy, Link } from 'iconoir-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var divider = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-3 w-px shrink-0 rounded-full bg-border-default" });
+var divider = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:h-3 sa:w-px sa:shrink-0 sa:rounded-full sa:bg-border-default" });
 function MessageActions({
   timestamp,
   status = "delivered",
@@ -16,6 +17,7 @@ function MessageActions({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const [feedback, setFeedback] = React.useState(feedbackProp);
   React.useEffect(() => setFeedback(feedbackProp), [feedbackProp]);
   const toggle = (value) => {
@@ -23,26 +25,26 @@ function MessageActions({
     setFeedback(next);
     onFeedback?.(next);
   };
-  const thumb = "aria-pressed:bg-border-input aria-pressed:[&_svg]:text-text-subtle";
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-2", className), ...props, children: [
+  const thumb = "sa:aria-pressed:bg-border-input sa:aria-pressed:[&_svg]:text-text-subtle";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "message-actions", className: cn("sa:flex sa:items-center sa:gap-2", className), ...props, children: [
     timestamp && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex size-6 items-center justify-center text-text-muted", children: [
-          status === "sending" ? /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: "size-icon-size [stroke-width:1.875]" }) : /* @__PURE__ */ jsx(DoubleCheck, { "aria-hidden": true, className: "size-icon-size [stroke-width:1.875]" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: status === "sending" ? "Sending" : "Delivered" })
+      /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-center sa:gap-0.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:size-6 sa:items-center sa:justify-center sa:text-text-muted", children: [
+          status === "sending" ? /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: "sa:size-icon-size sa:[stroke-width:1.875]" }) : /* @__PURE__ */ jsx(DoubleCheck, { "aria-hidden": true, className: "sa:size-icon-size sa:[stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: status === "sending" ? "Sending" : "Delivered" })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium whitespace-nowrap text-text-muted", children: timestamp })
+        /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:font-medium sa:whitespace-nowrap sa:text-text-muted", children: timestamp })
       ] }),
       divider
     ] }),
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-center sa:gap-0.5", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           variant: "tertiary",
           size: "xs",
           iconOnly: true,
-          "aria-label": "Good response",
+          "aria-label": labels.goodResponse,
           "aria-pressed": feedback === "like",
           onClick: () => toggle("like"),
           className: thumb,
@@ -55,14 +57,14 @@ function MessageActions({
           variant: "tertiary",
           size: "xs",
           iconOnly: true,
-          "aria-label": "Bad response",
+          "aria-label": labels.badResponse,
           "aria-pressed": feedback === "dislike",
           onClick: () => toggle("dislike"),
           className: thumb,
           children: /* @__PURE__ */ jsx(ThumbsDown, {})
         }
       ),
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Copy", onClick: onCopy, children: /* @__PURE__ */ jsx(Copy, {}) })
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.copy, onClick: onCopy, children: /* @__PURE__ */ jsx(Copy, {}) })
     ] }),
     showShare && /* @__PURE__ */ jsxs(Fragment, { children: [
       divider,
@@ -75,5 +77,3 @@ function MessageActions({
 }
 
 export { MessageActions };
-//# sourceMappingURL=chunk-AN2RNJLR.js.map
-//# sourceMappingURL=chunk-AN2RNJLR.js.map

package/chunk-T6L32XXH.js

@@ -0,0 +1,107 @@
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { Slot } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsx } 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 }
+  }
+);
+function Button({ className, variant, size, shape, iconOnly, asChild = false, type, ...props }) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      type: asChild ? void 0 : type ?? "button",
+      className: cn(buttonVariants({ variant, size, shape, iconOnly }), className),
+      ...props
+    }
+  );
+}
+
+export { Button, buttonVariants };

package/{chunk-QS4N4MNP.js → chunk-TT2N5752.js}

@@ -1,6 +1,6 @@
-import { useSlidingIndicator, SLIDE_MS } from './chunk-J3NSDRVH.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useSlidingIndicator, SLIDE_MS } from './chunk-XETMIETJ.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { NavArrowLeft, NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -18,10 +18,10 @@ function paginationRange(page, pageCount, siblings = 1) {
   return [1, "gap", ...span(left, right), "gap", pageCount];
 }
 var pageClass = cn(
-  "relative z-10 grid h-control-height min-w-control-height place-items-center overflow-hidden rounded-lg px-1.5 text-sm text-text-muted tabular-nums",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out) outline-none focus-visible:shadow-border-focus",
-  "hover:bg-bg-hover hover:text-text-default",
-  "aria-[current=page]:font-medium aria-[current=page]:text-text-default aria-[current=page]:hover:bg-transparent"
+  "sa:relative sa:z-10 sa:grid sa:h-control-height sa:min-w-control-height sa:place-items-center sa:overflow-hidden sa:rounded-lg sa:px-1.5 sa:text-sm sa:text-text-muted sa:tabular-nums",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:outline-none sa:focus-visible:shadow-border-focus",
+  "sa:hover:bg-bg-hover sa:hover:text-text-default",
+  "sa:aria-[current=page]:font-medium sa:aria-[current=page]:text-text-default sa:aria-[current=page]:hover:bg-transparent"
 );
 var STRIP_MS = SLIDE_MS;
 var STEP_PX = 32;
@@ -32,7 +32,7 @@ function PageText({ text, dir, motion }) {
   return (
     // Clipped to the wider number, so in the compact "Page 5 of 12" a moving number never runs
     // into the words around it.
-    /* @__PURE__ */ jsxs("span", { className: "inline-grid overflow-hidden align-bottom", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:inline-grid sa:overflow-hidden sa:align-bottom", children: [
       state.old != null && /* @__PURE__ */ jsx(
         "span",
         {
@@ -40,7 +40,7 @@ function PageText({ text, dir, motion }) {
           "data-motion": motion,
           "data-phase": "out",
           "data-dir": state.dir,
-          className: "satin-page-text col-start-1 row-start-1 text-center",
+          className: "satin-page-text sa:col-start-1 sa:row-start-1 sa:text-center",
           onAnimationEnd: () => setState((s) => ({ ...s, old: null })),
           children: state.old
         },
@@ -52,7 +52,7 @@ function PageText({ text, dir, motion }) {
           "data-motion": animate ? motion : void 0,
           "data-phase": animate ? "in" : void 0,
           "data-dir": state.dir,
-          className: "satin-page-text col-start-1 row-start-1 text-center",
+          className: "satin-page-text sa:col-start-1 sa:row-start-1 sa:text-center",
           children: state.text
         },
         `n${state.n}`
@@ -143,7 +143,7 @@ function Pagination({
       );
     }
   }, [page, motion, layout, dir]);
-  const target = (p, className2, children, extra) => getHref ? /* @__PURE__ */ jsx("a", { href: getHref(p), className: className2, onClick: () => go(p), ...extra, children }) : /* @__PURE__ */ jsx("button", { type: "button", className: cn("cursor-pointer", className2), onClick: () => go(p), ...extra, children });
+  const target = (p, className2, children, extra) => getHref ? /* @__PURE__ */ jsx("a", { href: getHref(p), className: className2, onClick: () => go(p), ...extra, children }) : /* @__PURE__ */ jsx("button", { type: "button", className: cn("sa:cursor-pointer", className2), onClick: () => go(p), ...extra, children });
   const step = (dir2) => {
     const to = page + dir2;
     const disabled = to < 1 || to > pageCount;
@@ -159,32 +159,32 @@ function Pagination({
     ] });
     return getHref && !disabled ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "tertiary", iconOnly: compact, "aria-label": compact ? label : void 0, children: /* @__PURE__ */ jsx("a", { href: getHref(to), rel: dir2 < 0 ? "prev" : "next", onClick: () => go(to), children: content }) }) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", iconOnly: compact, "aria-label": compact ? label : void 0, disabled, onClick: () => go(to), children: content });
   };
-  return /* @__PURE__ */ jsx("nav", { "data-slot": "pagination", "data-layout": layout, "aria-label": ariaLabel, className: cn("flex items-center", className), ...props, children: layout === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "pagination", "data-layout": layout, "aria-label": ariaLabel, className: cn("sa:flex sa:items-center", className), ...props, children: layout === "compact" ? /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2", children: [
     step(-1),
-    /* @__PURE__ */ jsxs("span", { className: "text-sm text-text-muted tabular-nums", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:text-sm sa:text-text-muted sa:tabular-nums", "aria-live": "polite", children: [
       "Page ",
       /* @__PURE__ */ jsx(PageText, { text: String(page), dir, motion: motion === "scroll" ? "scroll" : textMotion }),
       " of ",
       pageCount
     ] }),
     step(1)
-  ] }) : /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "relative flex items-center gap-1", children: [
+  ] }) : /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "sa:relative sa:flex sa:items-center sa:gap-1", children: [
     /* @__PURE__ */ jsx(
       "li",
       {
         ref: pill.ref,
         "aria-hidden": true,
         role: "presentation",
-        className: "pointer-events-none absolute top-0 left-0 h-control-height rounded-lg bg-bg-selected opacity-0"
+        className: "sa:pointer-events-none sa:absolute sa:top-0 sa:left-0 sa:h-control-height sa:rounded-lg sa:bg-bg-selected sa:opacity-0"
       }
     ),
-    /* @__PURE__ */ jsx("li", { ref: ghostRef, "aria-hidden": true, role: "presentation", className: "pointer-events-none absolute inset-0 overflow-visible" }),
+    /* @__PURE__ */ jsx("li", { ref: ghostRef, "aria-hidden": true, role: "presentation", className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:overflow-visible" }),
     /* @__PURE__ */ jsx("li", { children: step(-1) }),
     motion === "scroll" ? (
       // The strip: pages keyed by their number, the two ellipses by their side.
       paginationRange(page, pageCount, siblings).map((p, i, all) => {
         const key = p === "gap" ? i < all.length / 2 ? "gap-start" : "gap-end" : `p${p}`;
-        return /* @__PURE__ */ jsx("li", { "data-cell": key, className: "relative", children: p === "gap" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(pageClass, "pointer-events-none"), children: "\u2026" }) : target(p, pageClass, p, {
+        return /* @__PURE__ */ jsx("li", { "data-cell": key, className: "sa:relative", children: p === "gap" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(pageClass, "sa:pointer-events-none"), children: "\u2026" }) : target(p, pageClass, p, {
           "aria-current": p === page ? "page" : void 0,
           "aria-label": `Page ${p}`
         }) }, key);
@@ -195,7 +195,7 @@ function Pagination({
         const gap = p === "gap";
         const text = /* @__PURE__ */ jsx(PageText, { text: gap ? "\u2026" : String(p), dir, motion: textMotion });
         return /* @__PURE__ */ jsx("li", { children: gap ? React.createElement(getHref ? "a" : "button", {
-          className: cn(pageClass, "pointer-events-none"),
+          className: cn(pageClass, "sa:pointer-events-none"),
           "aria-hidden": true,
           tabIndex: -1,
           ...getHref ? {} : { type: "button", disabled: true },
@@ -211,5 +211,3 @@ function Pagination({
 }
 
 export { Pagination, paginationRange };
-//# sourceMappingURL=chunk-QS4N4MNP.js.map
-//# sourceMappingURL=chunk-QS4N4MNP.js.map