@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-A5XEM3GF.js → chunk-IKJIR6VL.js}

@@ -1,21 +1,21 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Check, Copy } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var tokenClass = {
-  plain: "text-[var(--code-plain,#18181b)] dark:text-[var(--code-plain,#fafafa)]",
-  keyword: "text-[var(--code-keyword,#dc2626)] dark:text-[var(--code-keyword,#f87171)]",
-  string: "text-[var(--code-string,#0369a1)] dark:text-[var(--code-string,#7dd3fc)]",
-  function: "text-[var(--code-function,#8b5cf6)] dark:text-[var(--code-function,#a78bfa)]",
-  parameter: "text-[var(--code-parameter,#b45309)] dark:text-[var(--code-parameter,#fcd34d)]",
-  variable: "text-[var(--code-variable,#0284c7)] dark:text-[var(--code-variable,#38bdf8)]",
+  plain: "sa:text-[var(--code-plain,#18181b)] sa:dark:text-[var(--code-plain,#fafafa)]",
+  keyword: "sa:text-[var(--code-keyword,#dc2626)] sa:dark:text-[var(--code-keyword,#f87171)]",
+  string: "sa:text-[var(--code-string,#0369a1)] sa:dark:text-[var(--code-string,#7dd3fc)]",
+  function: "sa:text-[var(--code-function,#8b5cf6)] sa:dark:text-[var(--code-function,#a78bfa)]",
+  parameter: "sa:text-[var(--code-parameter,#b45309)] sa:dark:text-[var(--code-parameter,#fcd34d)]",
+  variable: "sa:text-[var(--code-variable,#0284c7)] sa:dark:text-[var(--code-variable,#38bdf8)]",
   // No comment colour in Figma: comments take the line-number grey.
-  comment: "text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]"
+  comment: "sa:text-[var(--code-line-number,#a1a1aa)] sa:dark:text-[var(--code-line-number,#71717a)]"
 };
-var lineNumberClass = "text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]";
-var highlightClass = "bg-[var(--code-line-highlight,rgba(0,0,0,0.05))] dark:bg-[var(--code-line-highlight,rgba(255,255,255,0.06))]";
+var lineNumberClass = "sa:text-[var(--code-line-number,#a1a1aa)] sa:dark:text-[var(--code-line-number,#71717a)]";
+var highlightClass = "sa:bg-[var(--code-line-highlight,rgba(0,0,0,0.05))] sa:dark:bg-[var(--code-line-highlight,rgba(255,255,255,0.06))]";
 var KEYWORDS = /* @__PURE__ */ new Set([
   "import",
   "from",
@@ -124,7 +124,7 @@ function parse(code, view, highlightLines) {
   });
 }
 function FileCodeIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "shrink-0 text-text-muted", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:shrink-0 sa:text-text-muted", children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M13.333 5.333L9.333 1.333H4C3.264 1.333 2.667 1.93 2.667 2.667V13.333C2.667 14.07 3.264 14.667 4 14.667H12C12.736 14.667 13.333 14.07 13.333 13.333V5.333ZM9.333 1.333V5.333H13.333M6.667 8.333L5.333 9.667L6.667 11M9.333 8.333L10.667 9.667L9.333 11",
@@ -170,25 +170,25 @@ function CodeBlock({
       "data-slot": "code-block",
       "data-view": view,
       className: cn(
-        "flex flex-col overflow-hidden rounded-2xl border border-border-default bg-bg-card pb-3",
+        "sa:flex sa:flex-col sa:overflow-hidden sa:rounded-2xl sa:border sa:border-border-default sa:bg-bg-card sa:pb-3",
         className
       ),
       ...props,
       children: [
-        showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2 pr-2 pb-1 pl-4", children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2 sa:pt-2 sa:pr-2 sa:pb-1 sa:pl-4", children: [
           /* @__PURE__ */ jsx(FileCodeIcon, {}),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-[18px] font-medium text-text-default", children: filename }),
-          diff && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-sm leading-(--text-sm--line-height) tracking-normal", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-status-green-fg", children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: filename }),
+          diff && /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-1.5 sa:font-mono sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:tracking-normal", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sa:text-status-green-fg", children: [
               "+",
               added
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-status-red-fg", children: [
+            /* @__PURE__ */ jsxs("span", { className: "sa:text-status-red-fg", children: [
               "\u2212",
               removed
             ] })
           ] }),
-          showActions && /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: copy, className: "text-text-default", children: [
+          showActions && /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: copy, className: "sa:text-text-default", children: [
             copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
             /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: copied ? "Copied" : "Copy" })
           ] })
@@ -200,22 +200,22 @@ function CodeBlock({
             role: "region",
             "aria-label": filename ? `${filename} code` : "Code",
             className: cn(
-              "outline-none focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
-              "overflow-x-auto font-mono text-sm leading-(--text-sm--line-height) font-normal tracking-normal",
+              "sa:outline-none sa:focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
+              "sa:overflow-x-auto sa:font-mono sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-normal sa:tracking-normal",
               // Without the header the code sits in the middle: 12px above, as below.
-              showHeader ? "pt-1" : "pt-3",
+              showHeader ? "sa:pt-1" : "sa:pt-3",
               tokenClass.plain
             ),
-            children: /* @__PURE__ */ jsx("code", { className: "block w-max min-w-full", children: lines.map((line, i) => /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("code", { className: "sa:block sa:w-max sa:min-w-full", children: lines.map((line, i) => /* @__PURE__ */ jsxs(
               "span",
               {
                 "data-line": line.kind,
                 className: cn(
-                  "flex h-6 items-center px-4",
-                  diff ? "gap-2" : "gap-4",
+                  "sa:flex sa:h-6 sa:items-center sa:px-4",
+                  diff ? "sa:gap-2" : "sa:gap-4",
                   line.kind === "highlighted" && highlightClass,
-                  line.kind === "added" && "bg-status-green-bg",
-                  line.kind === "removed" && "bg-status-red-bg"
+                  line.kind === "added" && "sa:bg-status-green-bg",
+                  line.kind === "removed" && "sa:bg-status-red-bg"
                 ),
                 children: [
                   /* @__PURE__ */ jsx(
@@ -223,8 +223,8 @@ function CodeBlock({
                     {
                       "aria-hidden": true,
                       className: cn(
-                        "w-5 shrink-0 text-right select-none",
-                        line.kind === "added" ? "text-status-green-fg" : line.kind === "removed" ? "text-status-red-fg" : lineNumberClass
+                        "sa:w-5 sa:shrink-0 sa:text-right sa:select-none",
+                        line.kind === "added" ? "sa:text-status-green-fg" : line.kind === "removed" ? "sa:text-status-red-fg" : lineNumberClass
                       ),
                       children: line.number
                     }
@@ -233,17 +233,17 @@ function CodeBlock({
                     "span",
                     {
                       className: cn(
-                        "w-2 shrink-0 text-center select-none",
-                        line.kind === "added" ? "text-status-green-fg" : line.kind === "removed" ? "text-status-red-fg" : lineNumberClass
+                        "sa:w-2 sa:shrink-0 sa:text-center sa:select-none",
+                        line.kind === "added" ? "sa:text-status-green-fg" : line.kind === "removed" ? "sa:text-status-red-fg" : lineNumberClass
                       ),
                       children: [
                         line.kind === "added" ? "+" : line.kind === "removed" ? "\u2212" : " ",
-                        line.kind === "added" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " added" }),
-                        line.kind === "removed" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " removed" })
+                        line.kind === "added" && /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: " added" }),
+                        line.kind === "removed" && /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: " removed" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "whitespace-pre", children: line.text === "" ? "\u200B" : highlight ? tokenize(line.text).map((t, j) => /* @__PURE__ */ jsx("span", { className: t.kind === "plain" ? void 0 : tokenClass[t.kind], children: t.text }, j)) : line.text })
+                  /* @__PURE__ */ jsx("span", { className: "sa:whitespace-pre", children: line.text === "" ? "\u200B" : highlight ? tokenize(line.text).map((t, j) => /* @__PURE__ */ jsx("span", { className: t.kind === "plain" ? void 0 : tokenClass[t.kind], children: t.text }, j)) : line.text })
                 ]
               },
               i
@@ -256,5 +256,3 @@ function CodeBlock({
 }
 
 export { CodeBlock };
-//# sourceMappingURL=chunk-A5XEM3GF.js.map
-//# sourceMappingURL=chunk-A5XEM3GF.js.map

package/{chunk-DO3TBNSC.js → chunk-INJWE2LD.js}

@@ -1,5 +1,5 @@
-import { ChartCard, defaultFormat, ChartTooltip, ChartLegendRow } from './chunk-YPJYW624.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { ChartCard, defaultFormat, ChartTooltip, ChartLegendRow } from './chunk-LI5VYDLN.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -32,12 +32,12 @@ function BarCard({
   const ticks = [4, 3, 2, 1, 0].map((i) => max / 4 * i);
   const sum = data.reduce((n, d) => n + d.value, 0);
   return /* @__PURE__ */ jsxs(ChartCard, { total: total ?? defaultFormat(sum), ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-[206px] items-end gap-2 pl-8", onPointerLeave: () => setHovered(null), children: [
+    /* @__PURE__ */ jsx("div", { className: "sa:pt-2", children: /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex sa:h-[206px] sa:items-end sa:gap-2 sa:pl-8", onPointerLeave: () => setHovered(null), children: [
       ticks.slice(0, 4).map((_, i) => /* @__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: TRACK / 4 * i }
         },
         i
@@ -47,7 +47,7 @@ function BarCard({
         {
           "aria-hidden": true,
           className: cn(
-            "absolute left-6 w-6 -translate-x-full text-right text-xs leading-[18px] text-text-muted",
+            "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",
             regrow && "satin-bar-fade"
           ),
           style: { top: TRACK / 4 * i - 9 },
@@ -55,7 +55,7 @@ function BarCard({
         },
         `${redraw.n}-${i}`
       )),
-      /* @__PURE__ */ jsx("ul", { className: "contents", "aria-label": props.title, children: data.map((d, i) => {
+      /* @__PURE__ */ jsx("ul", { className: "sa:contents", "aria-label": props.title, children: data.map((d, i) => {
         const isActive = active === i;
         const dimmed = active !== null && !isActive;
         const height = d.value / max * TRACK;
@@ -67,9 +67,9 @@ function BarCard({
             onPointerEnter: () => setHovered(i),
             onFocus: () => setHovered(i),
             onBlur: () => setHovered(null),
-            className: "relative flex min-w-0 flex-1 flex-col items-center gap-1.5 rounded-md focus-visible:outline-none",
+            className: "sa:relative sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:items-center sa:gap-1.5 sa:rounded-md sa:focus-visible:outline-none",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col items-center justify-end gap-1.5", style: { height: TRACK }, children: [
+              /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex sa:w-full sa:flex-col sa:items-center sa:justify-end sa:gap-1.5", style: { height: TRACK }, children: [
                 isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     ChartTooltip,
@@ -79,17 +79,17 @@ function BarCard({
                       value: `${formatValue(d.value)}${unit ? ` ${unit}` : ""}`
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { ref: setAnchor, className: "text-sm leading-(--text-sm--line-height) font-medium text-text-default", children: formatValue(d.value) })
+                  /* @__PURE__ */ jsx("span", { ref: setAnchor, className: "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium sa:text-text-default", children: formatValue(d.value) })
                 ] }),
                 /* @__PURE__ */ jsx(
                   "span",
                   {
                     "aria-hidden": true,
                     className: cn(
-                      "w-full rounded-md transition-[background-color,outline-color] duration-(--duration-fast) ease-(--ease-out)",
+                      "sa:w-full sa:rounded-md sa:transition-[background-color,outline-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
                       // Dimmed bars stay a tint of chart/3 on the card, so the brand colour never reaches them.
-                      dimmed ? "bg-[color-mix(in_oklab,var(--chart-3)_30%,var(--bg-card))]" : "bg-chart-3",
-                      isActive && "outline outline-offset-2 outline-chart-3",
+                      dimmed ? "sa:bg-[color-mix(in_oklab,var(--sa-chart-3)_30%,var(--bg-card))]" : "sa:bg-chart-3",
+                      isActive && "sa:outline sa:outline-offset-2 sa:outline-chart-3",
                       regrow && "satin-bar-regrow"
                     ),
                     style: { height }
@@ -100,8 +100,8 @@ function BarCard({
                 "span",
                 {
                   className: cn(
-                    "text-sm leading-(--text-sm--line-height) font-medium whitespace-nowrap",
-                    isActive ? "text-text-default" : "text-text-muted",
+                    "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium sa:whitespace-nowrap",
+                    isActive ? "sa:text-text-default" : "sa:text-text-muted",
                     regrow && "satin-bar-fade"
                   ),
                   children: d.label
@@ -116,7 +116,7 @@ function BarCard({
     legend && /* @__PURE__ */ jsx(
       ChartLegendRow,
       {
-        color: "var(--chart-3)",
+        color: "var(--sa-chart-3)",
         label: legend.label,
         value: legend.value ?? formatValue(sum),
         note: legend.note
@@ -126,5 +126,3 @@ function BarCard({
 }
 
 export { BarCard, niceMax };
-//# sourceMappingURL=chunk-DO3TBNSC.js.map
-//# sourceMappingURL=chunk-DO3TBNSC.js.map

package/chunk-J5UQPROI.js

@@ -0,0 +1,56 @@
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { Slot } from 'radix-ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var variantClass = {
+  default: "sa:text-text-default sa:decoration-border-strong sa:hover:decoration-current",
+  brand: "sa:text-status-brand-fg sa:decoration-status-brand-fg/40 sa:hover:decoration-current",
+  muted: "sa:text-text-muted sa:decoration-current sa:hover:text-text-default"
+};
+function Link({
+  variant = "default",
+  underline,
+  external,
+  asChild = false,
+  target,
+  rel,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const line = underline ?? (variant === "muted" ? "hover" : "always");
+  const isExternal = external ?? target === "_blank";
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "link",
+      "data-variant": variant,
+      target: target ?? (isExternal && !asChild ? "_blank" : void 0),
+      rel: rel ?? (isExternal ? "noopener noreferrer" : void 0),
+      className: cn(
+        "sa:rounded-xs sa:font-medium sa:underline-offset-[3px] sa:outline-none sa:[text-decoration-thickness:1px]",
+        "sa:transition-[color,text-decoration-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        line === "always" && "sa:underline",
+        line === "hover" && "sa:no-underline sa:hover:underline",
+        line === "none" && "sa:no-underline",
+        variantClass[variant],
+        className
+      ),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        isExternal && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": true, className: "sa:ml-0.5 sa:inline-block sa:align-[-1px]", children: /* @__PURE__ */ jsx("path", { d: "M4 3H9V8M9 3L3 9", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", style: { strokeWidth: 1.1 } }) }),
+          /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: ` ${labels.opensInNewTab}` })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { Link };