@uisatin/ui 0.2.0 → 0.4.0

package/chunk-KITXKIYW.js

@@ -0,0 +1,104 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FormFieldContext = React.createContext(null);
+var FormContext = React.createContext(null);
+var FieldSizeContext = React.createContext(null);
+function useFormContext() {
+  return React.useContext(FormContext);
+}
+function useFormField() {
+  return React.useContext(FormFieldContext);
+}
+function FormField({
+  label,
+  description,
+  name,
+  error: ownError,
+  layout: ownLayout,
+  disabled: ownDisabled,
+  required = false,
+  htmlFor,
+  className,
+  children,
+  ...props
+}) {
+  const form = useFormContext();
+  const error = ownError ?? (name ? form?.errors?.[name] : void 0);
+  const layout = ownLayout ?? form?.layout ?? "vertical";
+  const disabled = ownDisabled ?? form?.disabled ?? false;
+  const autoId = React.useId();
+  const id = htmlFor ?? autoId;
+  const invalid = Boolean(error);
+  const messageId = invalid ? `${id}-error` : description ? `${id}-description` : void 0;
+  const context = React.useMemo(
+    () => ({ id, name, describedBy: messageId, invalid, disabled, required }),
+    [id, name, messageId, invalid, disabled, required]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "form-field",
+      "data-layout": layout,
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: cn("sa:flex sa:w-full sa:items-start", layout === "vertical" ? "sa:flex-col sa:gap-2" : "sa:gap-6", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: cn(
+              "sa:flex sa:items-start sa:gap-0.5 sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default",
+              layout === "horizontal" && "sa:w-40 sa:shrink-0",
+              disabled && "sa:opacity-50"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx(RequiredMark, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-full sa:min-w-0 sa:flex-1 sa:flex-col sa:gap-1.5", children: [
+          children,
+          invalid ? /* @__PURE__ */ jsx(FieldError, { id: messageId, children: error }) : description && /* @__PURE__ */ jsx(FieldDescription, { id: messageId, className: cn(disabled && "sa:opacity-50"), children: description })
+        ] })
+      ]
+    }
+  ) });
+}
+function RequiredMark() {
+  return /* @__PURE__ */ jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "currentColor", "aria-hidden": true, className: "sa:shrink-0", children: /* @__PURE__ */ jsx("path", { d: "M3.63636 2.18023L5.55372 1.41279L6 2.75581L4.04959 3.43605L5.27273 5.14535L4.18182 6L2.95868 4.20349L1.80165 6L0.694215 5.14535L1.91736 3.43605L0 2.75581L0.446281 1.41279L2.31405 2.18023V0H3.63636V2.18023Z" }) });
+}
+function FieldError({ id, children, className }) {
+  return /* @__PURE__ */ jsxs("p", { id, className: cn("sa:flex sa:items-start sa:gap-1.5 sa:text-sm sa:text-action-destructive-bg", className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.09375",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        className: "sa:mt-[2.75px] sa:shrink-0",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M7 4.67613V7.25806" }),
+          /* @__PURE__ */ jsx("path", { d: "M7 9.32422L7.0059 9.31766" }),
+          /* @__PURE__ */ jsx("path", { d: "M6.99995 12.1638C9.85184 12.1638 12.1638 9.85184 12.1638 6.99995C12.1638 4.14803 9.85184 1.83609 6.99995 1.83609C4.14803 1.83609 1.83609 4.14803 1.83609 6.99995C1.83609 9.85184 4.14803 12.1638 6.99995 12.1638Z" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+function FieldDescription({ id, children, className }) {
+  return /* @__PURE__ */ jsx("p", { id, className: cn("sa:text-sm sa:text-text-muted", className), children });
+}
+
+export { FieldDescription, FieldError, FieldSizeContext, FormContext, FormField, RequiredMark, useFormContext, useFormField };

package/{chunk-NN6PKJWS.js → chunk-KQNA22D3.js}

@@ -1,5 +1,5 @@
-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 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -22,15 +22,15 @@ function CookieConsent({
       "data-slot": "cookie-consent",
       "aria-label": ariaLabel,
       className: cn(
-        "flex w-fit max-w-full flex-wrap items-center gap-x-5 gap-y-3 rounded-3xl border border-border-subtle bg-bg-popover px-5 py-4 [box-shadow:0_1px_3px_0_var(--effect-shadow-ambient),0_16px_40px_-12px_var(--effect-shadow-lg)]",
-        floating && "fixed inset-x-4 bottom-4 z-50 mx-auto max-w-[calc(100vw-32px)]",
+        "sa:flex sa:w-fit sa:max-w-full sa:flex-wrap sa:items-center sa:gap-x-5 sa:gap-y-3 sa:rounded-3xl sa:border sa:border-border-subtle sa:bg-bg-popover sa:px-5 sa:py-4 sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-ambient),0_16px_40px_-12px_var(--effect-shadow-lg)]",
+        floating && "sa:fixed sa:inset-x-4 sa:bottom-4 sa:z-50 sa:mx-auto sa:max-w-[calc(100vw-32px)]",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("p", { className: "m-0 w-[280px] max-w-full min-w-0 shrink text-base text-text-muted", children }),
-        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-          onCustomize && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "lg", shape: "rounded", className: "text-text-muted", onClick: onCustomize, children: customizeLabel }),
+        /* @__PURE__ */ jsx("p", { className: "sa:m-0 sa:w-[280px] sa:max-w-full sa:min-w-0 sa:shrink sa:text-base sa:text-text-muted", children }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:ml-auto sa:flex sa:shrink-0 sa:items-center sa:gap-2", children: [
+          onCustomize && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "lg", shape: "rounded", className: "sa:text-text-muted", onClick: onCustomize, children: customizeLabel }),
           /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", shape: "rounded", onClick: onReject, children: rejectLabel }),
           /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "rounded", onClick: onAccept, children: acceptLabel })
         ] })
@@ -40,5 +40,3 @@ function CookieConsent({
 }
 
 export { CookieConsent };
-//# sourceMappingURL=chunk-NN6PKJWS.js.map
-//# sourceMappingURL=chunk-NN6PKJWS.js.map

package/{chunk-YPNKBE5X.js → chunk-L5PPN42A.js}

@@ -1,5 +1,5 @@
-import { useFormField } from './chunk-UBNHSZSE.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFormField, FieldSizeContext } from './chunk-KITXKIYW.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -7,9 +7,11 @@ function Input({
   label,
   hint,
   error,
-  size = "md",
+  size: ownSize,
   leadingIcon,
   trailingIcon,
+  leadingText,
+  trailingText,
   className,
   wrapperClassName,
   id,
@@ -23,6 +25,7 @@ function Input({
   ...props
 }) {
   const field = useFormField();
+  const size = ownSize ?? React.useContext(FieldSizeContext) ?? "md";
   const autoId = React.useId();
   const inputId = id ?? field?.id ?? autoId;
   const isDisabled = disabled ?? field?.disabled ?? false;
@@ -35,12 +38,12 @@ function Input({
   );
   const filled = value != null ? String(value).length > 0 : uncontrolledFilled;
   const inputRef = React.useRef(null);
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "input-wrapper", className: cn("grid w-full gap-2", wrapperClassName), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "input-wrapper", className: cn("sa:grid sa:w-full sa:gap-2", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx(
       "label",
       {
         htmlFor: inputId,
-        className: "text-sm leading-[18px] font-medium text-text-default",
+        className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default",
         children: label
       }
     ),
@@ -63,6 +66,8 @@ function Input({
         },
         children: [
           leadingIcon && /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: leadingIcon }),
+          leadingText && // 2px from the value, not the field's 8: `https://` reads as part of the address.
+          /* @__PURE__ */ jsx("span", { "data-slot": "input-text", className: "sa:-mr-1.5 sa:shrink-0 sa:whitespace-nowrap sa:text-text-muted sa:select-none", children: leadingText }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -80,9 +85,11 @@ function Input({
                 if (value == null) setUncontrolledFilled(e.target.value.length > 0);
                 onChange?.(e);
               },
-              ...props
+              ...props,
+              name: props.name ?? field?.name
             }
           ),
+          trailingText && /* @__PURE__ */ jsx("span", { "data-slot": "input-text", className: "sa:-ml-1.5 sa:shrink-0 sa:whitespace-nowrap sa:text-text-muted sa:select-none", children: trailingText }),
           trailingIcon && // Not aria-hidden: the trailing slot may hold an action, such as a clear button.
           /* @__PURE__ */ jsx("span", { className: "satin-field-icon", children: trailingIcon })
         ]
@@ -92,7 +99,7 @@ function Input({
       "p",
       {
         id: messageId,
-        className: cn("text-sm", typeof error === "string" || React.isValidElement(error) ? "text-action-destructive-bg" : "text-text-muted"),
+        className: cn("sa:text-sm", typeof error === "string" || React.isValidElement(error) ? "sa:text-action-destructive-bg" : "sa:text-text-muted"),
         children: message
       }
     )
@@ -100,5 +107,3 @@ function Input({
 }
 
 export { Input };
-//# sourceMappingURL=chunk-YPNKBE5X.js.map
-//# sourceMappingURL=chunk-YPNKBE5X.js.map

package/chunk-LAOE6Y57.js

@@ -0,0 +1,95 @@
+import { bannerMesh } from './chunk-YYFAZQ25.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { ArrowRight, Xmark } from 'iconoir-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function AnnouncementBar({
+  action,
+  onDismiss,
+  dismissLabel = "Dismiss announcement",
+  sticky,
+  tone = "primary",
+  background = "plain",
+  shimmer = false,
+  children,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const toneClass = {
+    primary: "sa:bg-action-primary-bg sa:text-action-primary-fg",
+    inverse: "sa:bg-action-inverse-bg sa:text-text-on-inverse",
+    default: "sa:bg-bg-card sa:text-text-default sa:[box-shadow:inset_0_1px_0_var(--border-subtle),inset_0_-1px_0_var(--border-subtle)]"
+  }[tone];
+  const closeClass = {
+    primary: "sa:text-action-primary-fg sa:opacity-70 sa:hover:bg-action-primary-bg-hover sa:hover:opacity-100",
+    inverse: "sa:text-text-on-inverse sa:opacity-70 sa:hover:bg-action-inverse-bg-hover sa:hover:opacity-100",
+    default: "sa:text-text-muted sa:hover:bg-bg-hover sa:hover:text-text-default"
+  }[tone];
+  const label = action && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.label,
+    /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": labels.announcement,
+      "data-slot": "announcement-bar",
+      "data-tone": tone,
+      className: cn(
+        "sa:relative sa:isolate sa:flex sa:min-h-11 sa:w-full sa:items-center sa:justify-center sa:px-12 sa:py-2 sa:text-base",
+        toneClass,
+        shimmer && "satin-sheen",
+        sticky === "top" && "sa:sticky sa:top-0 sa:z-40",
+        sticky === "bottom" && "sa:sticky sa:bottom-0 sa:z-40",
+        className
+      ),
+      ...props,
+      children: [
+        background === "mesh" && tone === "default" && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: bannerMesh.horizontal.one.light,
+            alt: "",
+            "aria-hidden": true,
+            className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:-z-10 sa:size-full sa:max-w-none sa:object-cover sa:mix-blend-multiply"
+          }
+        ),
+        background === "mesh" && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: bannerMesh.horizontal.one.dark,
+            alt: "",
+            "aria-hidden": true,
+            className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:-z-10 sa:size-full sa:max-w-none sa:object-cover sa:mix-blend-screen"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-wrap sa:items-center sa:justify-center sa:gap-x-3 sa:gap-y-1 sa:text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "sa:m-0", children }),
+          action && (action.href ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", size: "xs", className: "sa:shrink-0 sa:no-underline", children: /* @__PURE__ */ jsx("a", { href: action.href, onClick: action.onClick, children: label }) }) : /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "xs", className: "sa:shrink-0", onClick: action.onClick, children: label }))
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            className: cn(
+              "sa:absolute sa:top-1/2 sa:right-3 sa:grid sa:size-7 sa:-translate-y-1/2 sa:place-items-center sa:rounded-md sa:outline-none",
+              closeClass,
+              "sa:transition-[opacity,background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:focus-visible:opacity-100 sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+            ),
+            children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true, className: "sa:size-4 sa:[stroke-width:1.875]" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AnnouncementBar };

package/chunk-LI5VYDLN.js

@@ -0,0 +1,195 @@
+import { Floating } from './chunk-ZHFIWDGF.js';
+import { Select } from './chunk-EQAFDIPE.js';
+import { Badge } from './chunk-7NV53EL5.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultFormat = (n) => n.toLocaleString("en-US");
+function ChartCard({
+  title,
+  range,
+  total,
+  change,
+  periods,
+  value,
+  onPeriodChange,
+  className,
+  children,
+  ...props
+}) {
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-card",
+      role: "figure",
+      "aria-labelledby": titleId,
+      className: cn("sa:@container sa:flex sa:flex-col sa:gap-4 sa:overflow-hidden sa:rounded-2xl sa:border sa:border-border-default sa:bg-bg-card sa:p-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-col sa:gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-7 sa:items-center sa:gap-3", children: [
+            /* @__PURE__ */ jsx("p", { id: titleId, className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-lg sa:leading-6 sa:font-medium sa:text-text-default", children: title }),
+            periods && /* @__PURE__ */ jsx(PeriodSelect, { periods, value, onValueChange: onPeriodChange })
+          ] }),
+          total == null && /* @__PURE__ */ jsx("p", { className: "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:text-text-muted", children: range })
+        ] }),
+        total != null && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-col sa:gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "sa:text-xl sa:leading-(--sa-text-xl--line-height) sa:font-semibold sa:text-text-default sa:tabular-nums", children: total }),
+            change && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                tone: /^[−-]/.test(change) ? "red" : "green",
+                size: "sm",
+                className: "sa:[box-shadow:inset_0_0_0_1px_var(--tone-border)]",
+                children: change
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:text-text-muted", children: range })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function PeriodSelect({
+  periods,
+  value,
+  onValueChange
+}) {
+  const labels = useSatinLabels();
+  const groups = Array.isArray(periods[0]) ? periods : [periods];
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      size: "sm",
+      "aria-label": labels.period,
+      options: groups.map((g) => ({ options: g.map((p) => ({ value: p, label: p })) })),
+      value,
+      onValueChange,
+      wrapperClassName: "sa:w-[132px] sa:shrink-0"
+    }
+  );
+}
+function ChartLegendPill({
+  color,
+  label,
+  value,
+  variant = "outline",
+  active,
+  dimmed,
+  className,
+  ...props
+}) {
+  const plain = variant === "plain";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-legend-pill",
+      "data-variant": variant,
+      className: cn(
+        "sa:inline-flex sa:h-8 sa:items-center sa:gap-1.5 sa:rounded-pill sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:whitespace-nowrap",
+        "sa:transition-[border-color,background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:*:transition-opacity sa:*:duration-(--sa-duration-fast) sa:*:ease-(--sa-ease-out)",
+        plain ? "sa:px-2" : "sa:border sa:px-2.5",
+        !plain && (active ? "sa:border-border-strong" : "sa:border-border-default"),
+        plain && active && "sa:bg-bg-hover",
+        dimmed && "sa:*:opacity-45",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:size-2 sa:shrink-0 sa:rounded-full", style: { background: color } }),
+        /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:truncate sa:text-text-default", children: label }),
+        value != null && /* @__PURE__ */ jsx("span", { className: "sa:font-medium sa:text-text-default sa:tabular-nums", children: value })
+      ]
+    }
+  );
+}
+var pointerPath = "M1.17721 0.5H13.1772L8.23721 5.62C7.65721 6.22 6.69721 6.22 6.11721 5.62L1.17721 0.5Z";
+var tooltipShadow = "sa:[filter:drop-shadow(0_2px_2px_var(--effect-shadow-sm))_drop-shadow(0_4px_3px_var(--effect-shadow-sm))]";
+function TooltipPill({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1.5 sa:rounded-md sa:bg-text-default sa:px-2.5 sa:py-1.5 sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:whitespace-nowrap sa:text-bg-canvas", children: [
+    /* @__PURE__ */ jsx("span", { className: "sa:font-medium", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "sa:opacity-72", children: value })
+  ] });
+}
+function ChartTooltip({
+  label,
+  value,
+  anchor,
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  if (anchor !== void 0) {
+    return /* @__PURE__ */ jsx(Floating, { anchor, side: "top", sideOffset: sideOffset + 5, className: "sa:pointer-events-none", children: ({ side, arrowRef, arrowStyle }) => /* @__PURE__ */ jsxs("div", { "data-slot": "chart-tooltip", className: cn("sa:relative", tooltipShadow, className), ...props, children: [
+      /* @__PURE__ */ jsx(TooltipPill, { label, value }),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: arrowRef,
+          width: "12",
+          height: "6",
+          viewBox: "1.17 0.5 12 5.57",
+          "aria-hidden": true,
+          className: cn("sa:absolute sa:block sa:text-text-default", side === "bottom" ? "sa:bottom-full sa:-mb-px sa:rotate-180" : "sa:top-full sa:-mt-px"),
+          style: arrowStyle,
+          children: /* @__PURE__ */ jsx("path", { d: pointerPath, fill: "currentColor" })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: cn("sa:pointer-events-none sa:flex sa:flex-col sa:items-center", tooltipShadow, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TooltipPill, { label, value }),
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "6", viewBox: "1.17 0.5 12 5.57", "aria-hidden": true, className: "sa:-mt-px sa:block sa:text-text-default", children: /* @__PURE__ */ jsx("path", { d: pointerPath, fill: "currentColor" }) })
+      ]
+    }
+  );
+}
+function ChartLegendRow({
+  color,
+  label,
+  value,
+  note,
+  active,
+  dimmed,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-legend-row",
+      className: cn(
+        "sa:flex sa:h-8 sa:items-center sa:gap-2 sa:rounded-md sa:px-2 sa:py-1.5 sa:text-sm sa:leading-(--sa-text-sm--line-height)",
+        // The dim fades the row's content, never its ground: on the row itself it would multiply
+        // the leaving highlight's fade-out and cut it short.
+        "sa:transition-[background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:*:transition-opacity sa:*:duration-(--sa-duration-fast) sa:*:ease-(--sa-ease-out)",
+        active && "sa:bg-bg-muted",
+        dimmed && "sa:*:opacity-45",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:size-2 sa:shrink-0 sa:rounded-full", style: { background: color } }),
+        /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:text-text-default", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:font-medium sa:whitespace-nowrap sa:text-text-default", children: value }),
+        note && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-right sa:whitespace-nowrap sa:text-text-muted", children: note })
+      ]
+    }
+  );
+}
+
+export { ChartCard, ChartLegendPill, ChartLegendRow, ChartTooltip, defaultFormat };

package/{chunk-7TXHCRAG.js → chunk-LKSFTNPF.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -18,10 +18,10 @@ function Progress({
   const known = value != null;
   const v = known ? Math.min(max, Math.max(0, value)) : 0;
   const text = known ? formatValue(v, max) : void 0;
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "progress", "data-size": size, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    (label || showValue && known) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm leading-5", children: [
-      label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 truncate font-medium text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
-      showValue && known && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-text-muted tabular-nums", children: text })
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "progress", "data-size": size, className: cn("sa:flex sa:w-full sa:flex-col sa:gap-2", className), ...props, children: [
+    (label || showValue && known) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:justify-between sa:gap-3 sa:text-sm sa:leading-5", children: [
+      label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:min-w-0 sa:truncate sa:font-medium sa:text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
+      showValue && known && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:shrink-0 sa:text-text-muted sa:tabular-nums", children: text })
     ] }),
     /* @__PURE__ */ jsx(
       "div",
@@ -33,19 +33,17 @@ function Progress({
         "aria-valuemax": max,
         "aria-valuenow": known ? v : void 0,
         "aria-valuetext": text,
-        className: cn("relative w-full overflow-hidden rounded-full bg-bg-muted", size === "md" ? "h-2" : "h-1"),
+        className: cn("sa:relative sa:w-full sa:overflow-hidden sa:rounded-full sa:bg-bg-muted", size === "md" ? "sa:h-2" : "sa:h-1"),
         children: known ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full rounded-full bg-action-primary-bg transition-[width] duration-300 ease-(--ease-out)",
+            className: "sa:h-full sa:rounded-full sa:bg-action-primary-bg sa:transition-[width] sa:duration-300 sa:ease-(--sa-ease-out)",
             style: { width: `${v / max * 100}%` }
           }
-        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 w-1/3 rounded-full bg-action-primary-bg animate-[satin-progress-indeterminate_1.4s_var(--ease-in-out)_infinite]" })
+        ) : /* @__PURE__ */ jsx("div", { className: "sa:absolute sa:inset-y-0 sa:left-0 sa:w-1/3 sa:rounded-full sa:bg-action-primary-bg sa:animate-[satin-progress-indeterminate_1.4s_var(--sa-ease-in-out)_infinite]" })
       }
     )
   ] });
 }
 
 export { Progress };
-//# sourceMappingURL=chunk-7TXHCRAG.js.map
-//# sourceMappingURL=chunk-7TXHCRAG.js.map

package/chunk-LLW3X4ZJ.js

@@ -0,0 +1,39 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Separator({ orientation = "horizontal", decorative = true, label, className, ...props }) {
+  const semantics = decorative ? { role: "none" } : { role: "separator", "aria-orientation": orientation };
+  if (label && orientation === "horizontal")
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "separator",
+        "data-orientation": orientation,
+        ...semantics,
+        className: cn("sa:flex sa:w-full sa:items-center sa:gap-3 sa:text-sm sa:text-text-muted", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:h-px sa:flex-1 sa:bg-border-default" }),
+          /* @__PURE__ */ jsx("span", { className: "sa:shrink-0", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "sa:h-px sa:flex-1 sa:bg-border-default" })
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "separator",
+      "data-orientation": orientation,
+      ...semantics,
+      className: cn(
+        "sa:shrink-0 sa:bg-border-default",
+        orientation === "horizontal" ? "sa:h-px sa:w-full" : "sa:w-px sa:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Separator };

package/{chunk-RTJ76X5U.js → chunk-LWRB4DED.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -114,7 +114,7 @@ function StreamingText({
       "data-slot": "streaming-text",
       "data-reveal": reveal,
       "aria-busy": streaming || void 0,
-      className: cn("satin-stream text-body whitespace-pre-wrap text-text-default", className),
+      className: cn("satin-stream sa:text-body sa:whitespace-pre-wrap sa:text-text-default", className),
       ...props,
       children: units.map((u, i) => /* @__PURE__ */ jsx("span", { className: "satin-stream-unit", children: u }, i))
     }
@@ -122,5 +122,3 @@ function StreamingText({
 }
 
 export { StreamingText };
-//# sourceMappingURL=chunk-RTJ76X5U.js.map
-//# sourceMappingURL=chunk-RTJ76X5U.js.map