@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-NSRTTYQ4.js → chunk-M7RILZVW.js}

@@ -1,8 +1,9 @@
-import { Chip } from './chunk-3ERGAHKA.js';
-import { useFieldChrome, FieldChrome, SelectChevron } from './chunk-72OCFAPT.js';
-import { MenuItemContent, menuItemClass, menuSurfaceClass } from './chunk-3DINAQLL.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Chip } from './chunk-6JTSZAGO.js';
+import { useFieldChrome, FieldChrome, SelectChevron } from './chunk-EQAFDIPE.js';
+import { MenuItemContent, menuItemClass, menuSurfaceClass } from './chunk-P36KBUYD.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Popover } from 'radix-ui';
 import { Search } from 'iconoir-react';
@@ -20,12 +21,12 @@ function Combobox({
   onValueChange,
   multiple = false,
   footer = false,
-  placeholder = "Select\u2026",
-  searchPlaceholder = "Search\u2026",
-  emptyText = "No results",
-  applyLabel = "Apply",
-  cancelLabel = "Cancel",
-  clearLabel = "Clear",
+  placeholder: placeholderProp,
+  searchPlaceholder: searchPlaceholderProp,
+  emptyText: emptyTextProp,
+  applyLabel: applyLabelProp,
+  cancelLabel: cancelLabelProp,
+  clearLabel: clearLabelProp,
   label,
   hint,
   error,
@@ -41,9 +42,17 @@ function Combobox({
   onInteractOutside,
   wrapperClassName,
   className,
+  "aria-describedby": describedBy,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
+  const placeholder = placeholderProp ?? labels.select;
+  const searchPlaceholder = searchPlaceholderProp ?? labels.search;
+  const emptyText = emptyTextProp ?? labels.noResults;
+  const applyLabel = applyLabelProp ?? labels.apply;
+  const cancelLabel = cancelLabelProp ?? labels.cancel;
+  const clearLabel = clearLabelProp ?? labels.clear;
   const listId = `${chrome.controlId}-list`;
   const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
   const applied = value ?? uncontrolledValue;
@@ -100,51 +109,51 @@ function Combobox({
             "data-invalid": chrome.invalid || void 0,
             "data-disabled": chrome.disabled || void 0,
             "data-state": open ? "open" : "closed",
-            className: cn("satin-field satin-select satin-combobox relative", className),
+            className: cn("satin-field satin-select satin-combobox sa:relative", className),
             children: [
               /* @__PURE__ */ jsx(
                 Popover.Trigger,
                 {
+                  ...props,
                   id: chrome.controlId,
                   "data-slot": "combobox-trigger",
                   disabled: chrome.disabled,
                   "aria-invalid": chrome.invalid || void 0,
-                  "aria-describedby": chrome.describedBy,
-                  "aria-label": props["aria-label"],
+                  "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
                   "aria-haspopup": "listbox",
-                  className: "absolute inset-0 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-0 disabled:cursor-not-allowed",
-                  children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: chosen.length ? chosen.map((o) => o.label).join(", ") : placeholder })
+                  className: "sa:absolute sa:inset-0 sa:cursor-pointer sa:rounded-[inherit] sa:outline-none sa:focus-visible:ring-0 sa:disabled:cursor-not-allowed",
+                  children: /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: chosen.length ? chosen.map((o) => o.label).join(", ") : placeholder })
                 }
               ),
-              lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon satin-combobox-icon pointer-events-none", "aria-hidden": true, children: lead }),
-              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex min-w-0 flex-1 flex-wrap items-center gap-1 *:pointer-events-auto", children: [
+              lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon satin-combobox-icon sa:pointer-events-none", "aria-hidden": true, children: lead }),
+              /* @__PURE__ */ jsxs("div", { className: "sa:pointer-events-none sa:flex sa:min-w-0 sa:flex-1 sa:flex-wrap sa:items-center sa:gap-1 sa:*:pointer-events-auto", children: [
                 chips && chosen.map((o) => /* @__PURE__ */ jsx(
                   Chip,
                   {
                     size: "sm",
                     variant: "outline",
                     disabled: chrome.disabled,
-                    removeLabel: `Remove ${o.label}`,
+                    removeLabel: `${labels.remove} ${o.label}`,
                     onRemove: () => commit(applied.filter((v) => v !== o.value)),
-                    className: "relative",
+                    className: "sa:relative",
                     children: o.label
                   },
                   o.value
                 )),
-                triggerText && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("pointer-events-none! min-w-0 flex-1 truncate", chosen.length ? "text-text-default" : "text-text-muted"), children: triggerText }),
+                triggerText && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("sa:pointer-events-none! sa:min-w-0 sa:flex-1 sa:truncate", chosen.length ? "sa:text-text-default" : "sa:text-text-muted"), children: triggerText }),
                 !label && chips && chosen.length > 1 && /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "tertiary",
                     size: "xs",
                     disabled: chrome.disabled,
-                    className: "relative ml-auto",
+                    className: "sa:relative sa:ml-auto",
                     onClick: () => commit([]),
                     children: clearLabel
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(SelectChevron, { className: "satin-combobox-icon pointer-events-none" })
+              /* @__PURE__ */ jsx(SelectChevron, { className: "satin-combobox-icon sa:pointer-events-none" })
             ]
           }
         ) }),
@@ -159,14 +168,14 @@ function Combobox({
             onOpenAutoFocus,
             onInteractOutside,
             className: cn(
-              "pointer-events-auto z-50 flex w-(--radix-popover-trigger-width) min-w-60 max-w-[520px] flex-col overflow-hidden",
+              "sa:pointer-events-auto sa:z-50 sa:flex sa:w-(--radix-popover-trigger-width) sa:min-w-60 sa:max-w-[520px] sa:flex-col sa:overflow-hidden",
               menuSurfaceClass,
-              "origin-(--radix-popover-content-transform-origin) outline-none",
-              "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+              "sa:origin-(--radix-popover-content-transform-origin) sa:outline-none",
+              "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
             ),
             children: [
-              /* @__PURE__ */ jsxs("label", { className: "flex h-9 shrink-0 items-center gap-2 border-b border-border-subtle px-3 text-text-muted", children: [
-                /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 [stroke-width:1.875]" }),
+              /* @__PURE__ */ jsxs("label", { className: "sa:flex sa:h-9 sa:shrink-0 sa:items-center sa:gap-2 sa:border-b sa:border-border-subtle sa:px-3 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",
                   {
@@ -192,7 +201,7 @@ function Combobox({
                         if (!shown[active].disabled) pick(shown[active].value);
                       }
                     },
-                    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"
                   }
                 )
               ] }),
@@ -202,8 +211,8 @@ function Combobox({
                   id: listId,
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
-                  className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto p-1",
-                  children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-text-muted", children: emptyText }) : shown.map((o, i) => {
+                  className: "sa:flex sa:max-h-60 sa:flex-col sa:gap-0.5 sa:overflow-y-auto sa:p-1",
+                  children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "sa:px-3 sa:py-6 sa:text-center sa:text-sm sa:text-text-muted", children: emptyText }) : shown.map((o, i) => {
                     const picked = picks.includes(o.value);
                     return /* @__PURE__ */ jsx(
                       "div",
@@ -217,7 +226,7 @@ function Combobox({
                         onPointerMove: () => setActive(i),
                         onMouseDown: (e) => e.preventDefault(),
                         onClick: () => !o.disabled && pick(o.value),
-                        className: cn(menuItemClass, picked && "bg-bg-selected"),
+                        className: cn(menuItemClass, picked && "sa:bg-bg-selected"),
                         children: /* @__PURE__ */ jsx(
                           MenuItemContent,
                           {
@@ -235,7 +244,7 @@ function Combobox({
                   })
                 }
               ),
-              footer && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-border-subtle p-2", children: [
+              footer && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:justify-end sa:gap-2 sa:border-t sa:border-border-subtle sa:p-2", children: [
                 /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpen(false), children: cancelLabel }),
                 /* @__PURE__ */ jsx(Button, { disabled: pending.length === 0, onClick: apply, children: applyLabel })
               ] })
@@ -248,5 +257,3 @@ function Combobox({
 }
 
 export { Combobox };
-//# sourceMappingURL=chunk-NSRTTYQ4.js.map
-//# sourceMappingURL=chunk-NSRTTYQ4.js.map

package/{chunk-LW3TRU5W.js → chunk-MOGWOUCN.js}

@@ -1,5 +1,6 @@
-import { useFieldChrome, FieldChrome } from './chunk-72OCFAPT.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFieldChrome, FieldChrome } from './chunk-EQAFDIPE.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Minus, Plus } from 'iconoir-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -22,9 +23,14 @@ function NumberInput({
   name,
   wrapperClassName,
   className,
+  "aria-describedby": describedBy,
+  onChange,
+  onBlur,
+  onKeyDown,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
   const [inner, setInner] = React.useState(defaultValue);
   const value = valueProp ?? inner;
   const [draft, setDraft] = React.useState(null);
@@ -43,10 +49,10 @@ function NumberInput({
   const atMin = value <= min;
   const atMax = value >= max;
   const btn = cn(
-    "grid size-6 shrink-0 place-items-center rounded-md text-text-muted outline-none",
-    "transition-[background-color,color,opacity] duration-(--duration-fast) ease-(--ease-out)",
-    "hover:bg-bg-hover hover:text-text-default focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-    "disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]"
+    "sa:grid sa:size-6 sa:shrink-0 sa:place-items-center sa:rounded-md sa:text-text-muted sa:outline-none",
+    "sa:transition-[background-color,color,opacity] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:hover:bg-bg-hover sa:hover:text-text-default sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+    "sa:disabled:pointer-events-none sa:disabled:opacity-40 sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]"
   );
   return /* @__PURE__ */ jsx(FieldChrome, { label, chrome, className: wrapperClassName, children: /* @__PURE__ */ jsxs(
     "div",
@@ -56,14 +62,14 @@ function NumberInput({
       "data-filled": true,
       "data-invalid": chrome.invalid || void 0,
       "data-disabled": chrome.disabled || void 0,
-      className: cn("satin-field gap-1 px-1", className),
+      className: cn("satin-field sa:gap-1 sa:px-1", className),
       children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             tabIndex: -1,
-            "aria-label": "Decrease",
+            "aria-label": labels.decrease,
             "aria-controls": chrome.controlId,
             disabled: chrome.disabled || atMin,
             onClick: () => by(-1),
@@ -74,6 +80,7 @@ function NumberInput({
         /* @__PURE__ */ jsx(
           "input",
           {
+            ...props,
             id: chrome.controlId,
             name,
             role: "spinbutton",
@@ -83,13 +90,20 @@ function NumberInput({
             "aria-valuemax": Number.isFinite(max) ? max : void 0,
             "aria-valuetext": formatValue(value),
             "aria-invalid": chrome.invalid || void 0,
-            "aria-describedby": chrome.describedBy,
-            "aria-label": props["aria-label"],
+            "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
             disabled: chrome.disabled,
             value: draft ?? formatValue(value),
-            onChange: (e) => setDraft(e.target.value),
-            onBlur: () => draft != null && commit(Number(draft.replace(",", ".").replace(/[^\d.-]/g, "")) || 0),
+            onChange: (e) => {
+              onChange?.(e);
+              setDraft(e.target.value);
+            },
+            onBlur: (e) => {
+              onBlur?.(e);
+              if (draft != null) commit(Number(draft.replace(",", ".").replace(/[^\d.-]/g, "")) || 0);
+            },
             onKeyDown: (e) => {
+              onKeyDown?.(e);
+              if (e.defaultPrevented) return;
               const keys = {
                 ArrowUp: () => by(1),
                 ArrowDown: () => by(-1),
@@ -105,7 +119,7 @@ function NumberInput({
                 keys[e.key]();
               }
             },
-            className: "satin-field-input text-center tabular-nums"
+            className: "satin-field-input sa:text-center sa:tabular-nums"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -113,7 +127,7 @@ function NumberInput({
           {
             type: "button",
             tabIndex: -1,
-            "aria-label": "Increase",
+            "aria-label": labels.increase,
             "aria-controls": chrome.controlId,
             disabled: chrome.disabled || atMax,
             onClick: () => by(1),
@@ -127,5 +141,3 @@ function NumberInput({
 }
 
 export { NumberInput };
-//# sourceMappingURL=chunk-LW3TRU5W.js.map
-//# sourceMappingURL=chunk-LW3TRU5W.js.map

package/chunk-NCIRJ5V2.js

@@ -0,0 +1,108 @@
+import { FormContext, FieldDescription, useFormContext } from './chunk-KITXKIYW.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function formValues(form) {
+  const values = {};
+  for (const [key, value] of new FormData(form)) {
+    const prev = values[key];
+    values[key] = prev === void 0 ? value : Array.isArray(prev) ? [...prev, value] : [prev, value];
+  }
+  return values;
+}
+var hasErrors = (errors) => !!errors && Object.values(errors).some(Boolean);
+function Form({
+  layout = "vertical",
+  errors,
+  disabled,
+  onSubmit,
+  onSubmitValues,
+  noValidate = true,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const formRef = React.useRef(null);
+  const [submits, setSubmits] = React.useState(0);
+  const context = React.useMemo(() => ({ layout, disabled, errors }), [layout, disabled, errors]);
+  const hadErrors = React.useRef(false);
+  const lastSubmit = React.useRef(0);
+  React.useEffect(() => {
+    const now = hasErrors(errors);
+    const submitted = submits !== lastSubmit.current;
+    if (now && (submitted || !hadErrors.current)) {
+      const first = formRef.current?.querySelector('[aria-invalid="true"]');
+      if (submits > 0) first?.focus();
+    }
+    hadErrors.current = now;
+    lastSubmit.current = submits;
+  }, [errors, submits]);
+  const setRefs = (node) => {
+    formRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      ref: setRefs,
+      "data-slot": "form",
+      "data-layout": layout,
+      noValidate,
+      onSubmit: (event) => {
+        setSubmits((n) => n + 1);
+        if (onSubmitValues) {
+          event.preventDefault();
+          onSubmitValues(formValues(event.currentTarget), event);
+        }
+        onSubmit?.(event);
+      },
+      className: cn("sa:w-full", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("fieldset", { disabled, className: "sa:m-0 sa:grid sa:min-w-0 sa:gap-6 sa:border-0 sa:p-0", children })
+    }
+  ) });
+}
+function FormSection({ title, description, className, children, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": `${id}-title`,
+      "data-slot": "form-section",
+      className: cn(
+        "sa:grid sa:gap-5 sa:not-first:border-t sa:not-first:border-border-default sa:not-first:pt-6",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "sa:grid sa:gap-1", children: [
+          /* @__PURE__ */ jsx("h3", { id: `${id}-title`, className: "sa:text-base sa:font-medium sa:text-text-default", children: title }),
+          description && /* @__PURE__ */ jsx(FieldDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "sa:grid sa:gap-5", children })
+      ]
+    }
+  );
+}
+function FormActions({ align = "end", className, ...props }) {
+  const form = useFormContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "form-actions",
+      className: cn(
+        "sa:flex sa:flex-wrap sa:items-center sa:gap-2",
+        align === "end" && "sa:justify-end",
+        align === "between" && "sa:justify-end sa:[&>:first-child]:mr-auto",
+        align === "start" && form?.layout === "horizontal" && "sa:pl-46",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Form, FormActions, FormSection, formValues };

package/chunk-NQL6SIIB.js

@@ -0,0 +1,168 @@
+// src/theme/create-theme.ts
+var defaultTheme = { brand: "#4633D7", radius: 1 };
+var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var toGamma = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? [...h].map((c) => c + c).join("") : h.slice(0, 6);
+  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16) / 255);
+}
+function rgbToOklch([r, g, b]) {
+  const [lr, lg, lb] = [r, g, b].map(toLinear);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return [L, Math.hypot(A, B), (Math.atan2(B, A) * 180 / Math.PI + 360) % 360];
+}
+function oklchToRgb([L, C, H]) {
+  const a = C * Math.cos(H * Math.PI / 180);
+  const b = C * Math.sin(H * Math.PI / 180);
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var inGamut = (rgb) => rgb.every((c) => c >= -5e-4 && c <= 1.0005);
+function oklchToHex([L, C, H]) {
+  let c = C;
+  let rgb = oklchToRgb([L, c, H]);
+  while (!inGamut(rgb) && c > 0) {
+    c = Math.max(0, c - 5e-3);
+    rgb = oklchToRgb([L, c, H]);
+  }
+  return "#" + rgb.map((v) => Math.round(Math.min(1, Math.max(0, toGamma(v))) * 255).toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+var luminance = (hex) => {
+  const [r, g, b] = hexToRgb(hex).map(toLinear);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var contrast = (a, b) => {
+  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (x + 0.05) / (y + 0.05);
+};
+var RAMP = {
+  "blue-50": "#F2F4FF",
+  "blue-200": "#CFD6FF",
+  "blue-300": "#B1BBFE",
+  "blue-500": "#5146E9",
+  "blue-600": "#4633D7",
+  "blue-700": "#3923B9",
+  "blue-900": "#1D1168",
+  "blue-950": "#110A47",
+  "blue-soft-50": "#F3F5FF",
+  "blue-soft-200": "#D9DEFB",
+  "blue-soft-300": "#BEC7FC",
+  "blue-soft-700": "#5158A0",
+  "blue-soft-900": "#30344F",
+  "blue-soft-950": "#1F2132",
+  "primary-dark": "#493DD6",
+  "primary-hover-dark": "#554FE7",
+  "primary-pressed-dark": "#3E2AC5",
+  "primary-border-light": "#9085E7",
+  "primary-border-dark": "#928BE6"
+};
+var SOLID = /* @__PURE__ */ new Set(["blue-500", "blue-600", "blue-700", "primary-dark", "primary-hover-dark", "primary-pressed-dark"]);
+function solidLightness(c, h, base, hoverStep) {
+  const passes = (L) => contrast(oklchToHex([L, c, h]), "#FFFFFF") >= 4.7 && contrast(oklchToHex([L + hoverStep, c, h]), "#FFFFFF") >= 4.7;
+  if (passes(base)) return base;
+  let lo = 0.2;
+  let hi = base;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (passes(mid)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+function brandVars(brand) {
+  const [bl, bc, bh] = rgbToOklch(hexToRgb(brand));
+  const lch = (step) => rgbToOklch(hexToRgb(RAMP[step]));
+  const [rl, rc, rh] = lch("blue-600");
+  const chroma = bc / rc;
+  const light = solidLightness(bc, bh, bl, lch("blue-500")[0] - rl);
+  const darkRest = lch("primary-dark")[0];
+  const dark = solidLightness(bc, bh, light + (darkRest - rl), lch("primary-hover-dark")[0] - darkRest);
+  const root = {};
+  for (const [step, hex] of Object.entries(RAMP)) {
+    const [l, c, h] = rgbToOklch(hexToRgb(hex));
+    const isDark = step.endsWith("-dark") && step !== "primary-border-dark";
+    const L = SOLID.has(step) ? isDark ? dark + (l - darkRest) : light + (l - rl) : l;
+    root[`--color-${step}`] = step === "blue-600" && light === bl ? brand.toUpperCase() : oklchToHex([Math.min(0.97, Math.max(0.15, L)), c * chroma, bh + (h - rh)]);
+  }
+  root["--sa-color-blue-600-a20"] = `${root["--sa-color-blue-600"]}33`;
+  root["--sa-color-blue-500-a20"] = `${root["--sa-color-blue-500"]}33`;
+  root["--sa-color-primary-focus-dark"] = `${root["--sa-color-primary-dark"]}33`;
+  return root;
+}
+var RADII = { xs: 4, sm: 6, md: 8, xl: 12, "2xl": 16, "3xl": 20 };
+function radiusVars(scale) {
+  const v = {};
+  for (const [k, px] of Object.entries(RADII)) v[`--radius-${k}`] = `${Math.round(px * scale * 2) / 2}px`;
+  v["--sa-radius"] = `${Math.round(10 * scale * 2) / 2}px`;
+  v["--sa-radius-pill"] = scale >= 1 ? "9999px" : `${Math.round(16 * scale)}px`;
+  return v;
+}
+var VAR_PREFIX = "sa-";
+var prefixed = (text, prefix) => prefix ? text.replace(/--(?=color-|radius)/g, `--${prefix}`) : text;
+var prefixVars = (vars, prefix) => Object.fromEntries(Object.entries(vars).map(([k, v]) => [prefixed(k, prefix), prefixed(v, prefix)]));
+function themeVars(theme, options = {}) {
+  const prefix = options.prefix ?? VAR_PREFIX;
+  return { root: prefixVars({ ...brandVars(theme.brand), ...radiusVars(theme.radius) }, prefix), dark: {} };
+}
+var SCOPED_LIGHT = {
+  "--border-focus": "var(--sa-color-blue-600)",
+  "--action-primary-bg": "var(--sa-color-blue-600)",
+  "--action-primary-bg-hover": "var(--sa-color-blue-500)",
+  "--action-primary-bg-pressed": "var(--sa-color-blue-700)",
+  "--action-primary-border": "var(--sa-color-primary-border-light)",
+  "--action-focus-ring": "var(--sa-color-blue-600-a20)",
+  "--status-brand-bg": "var(--sa-color-blue-soft-50)",
+  "--status-brand-border": "var(--sa-color-blue-soft-200)",
+  "--status-brand-fg": "var(--sa-color-blue-soft-700)",
+  "--sa-radius-lg": "var(--sa-radius)"
+};
+var SCOPED_DARK = {
+  "--border-focus": "var(--sa-color-primary-hover-dark)",
+  "--action-primary-bg": "var(--sa-color-primary-dark)",
+  "--action-primary-bg-hover": "var(--sa-color-primary-hover-dark)",
+  "--action-primary-bg-pressed": "var(--sa-color-primary-pressed-dark)",
+  "--action-primary-border": "var(--sa-color-primary-border-dark)",
+  "--action-focus-ring": "var(--sa-color-primary-focus-dark)",
+  "--status-brand-bg": "var(--sa-color-blue-soft-950)",
+  "--status-brand-border": "var(--sa-color-blue-soft-900)",
+  "--status-brand-fg": "var(--sa-color-blue-soft-300)"
+};
+function themeCss(theme, scope, options = {}) {
+  const prefix = options.prefix ?? VAR_PREFIX;
+  const vars = themeVars(theme, { prefix });
+  const root = scope ? { ...vars.root, ...prefixVars(SCOPED_LIGHT, prefix) } : vars.root;
+  const dark = scope ? { ...vars.dark, ...prefixVars(SCOPED_DARK, prefix) } : vars.dark;
+  const block = (sel, vars2) => `${sel} {
+${Object.entries(vars2).map(([k, v]) => `  ${k}: ${v};`).join("\n")}
+}`;
+  return [
+    `/* Satin theme: brand ${theme.brand.toUpperCase()}, radius ${theme.radius}. */`,
+    // :root:root outranks Satin's own :root, so the theme wins wherever the file is loaded.
+    block(scope ?? ":root:root", root),
+    ...Object.keys(dark).length ? [block(scope ? `.dark ${scope}` : ":root.dark", dark)] : [],
+    ""
+  ].join("\n\n");
+}
+function randomTheme(current) {
+  const [, , currentHue] = current ? rgbToOklch(hexToRgb(current.brand)) : [0, 0, -360];
+  const hue = (currentHue + 60 + Math.random() * 240) % 360;
+  const l = 0.5 + Math.random() * 0.25;
+  const brand = oklchToHex([l, 0.12 + Math.random() * 0.08, hue]);
+  const radii = [0, 0.5, 1, 1.5].filter((r) => r !== current?.radius);
+  const radius = radii[Math.floor(Math.random() * radii.length)];
+  return { brand, radius };
+}
+
+export { contrast, defaultTheme, randomTheme, themeCss, themeVars };

package/chunk-NTSU44FY.js

@@ -0,0 +1,81 @@
+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",
+  moreOptions: "More options",
+  loading: "Loading",
+  submit: "Submit",
+  done: "Done",
+  opensInNewTab: "(opens in a new tab)",
+  showPassword: "Show password",
+  hidePassword: "Hide password"
+};
+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 };