@uisatin/ui 0.2.0 → 0.3.0

package/chunk-XH56JGYC.js

@@ -0,0 +1,71 @@
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { Toggle as Toggle$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsxs } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  [
+    "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:gap-2 sa:border sa:font-medium sa:whitespace-nowrap sa:select-none sa:text-text-muted",
+    "sa:transition-[background-color,border-color,color,box-shadow,border-radius] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:focus-visible:outline-none sa:disabled:pointer-events-none sa:disabled:text-text-subtle",
+    "sa:satin-hover:text-text-default sa:satin-focus:text-text-default sa:data-[state=on]:text-text-default",
+    // Figma icons are 1.25px at 16; on Iconoir's 24 grid that is 1.875.
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:size-icon-size sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: [
+          "sa:rounded-lg sa:border-border-default sa:bg-bg-popover",
+          "sa:satin-hover:border-border-strong sa:satin-hover:bg-bg-muted",
+          "sa:satin-focus:border-action-primary-bg sa:satin-focus:bg-bg-popover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:data-[state=on]:border-border-strong sa:data-[state=on]:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-hover:border-border-strong sa:data-[state=on]:satin-hover:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-focus:border-action-primary-bg sa:data-[state=on]:satin-focus:bg-action-secondary-bg-pressed",
+          "sa:disabled:border-border-default sa:disabled:bg-bg-muted",
+          "sa:disabled:data-[state=on]:border-border-default sa:disabled:data-[state=on]:bg-action-secondary-bg-pressed"
+        ],
+        ghost: [
+          "sa:rounded-md sa:border-transparent sa:bg-transparent",
+          "sa:satin-hover:rounded-lg sa:satin-hover:bg-bg-muted",
+          // Figma's ghost focus is the primary border alone (its ring is 0px); pressed + focus has the ring.
+          "sa:satin-focus:rounded-lg sa:satin-focus:border-action-primary-bg sa:satin-focus:[box-shadow:none]",
+          "sa:data-[state=on]:rounded-lg sa:data-[state=on]:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-hover:bg-action-secondary-bg-pressed",
+          "sa:data-[state=on]:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:disabled:rounded-md sa:disabled:data-[state=on]:rounded-md"
+        ]
+      },
+      size: {
+        md: "sa:h-control-height-lg sa:px-2.5 sa:text-base",
+        sm: "sa:h-control-height sa:px-2.5 sa:text-sm sa:leading-[18px]"
+      },
+      iconOnly: {
+        true: "sa:px-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { iconOnly: true, size: "md", className: "sa:w-control-height-lg" },
+      { iconOnly: true, size: "sm", className: "sa:w-control-height" }
+    ],
+    defaultVariants: { variant: "sa:outline", size: "md", iconOnly: false }
+  }
+);
+function Toggle({ className, variant, size, iconOnly, icon, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Toggle$1.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, iconOnly }), className),
+      ...props,
+      children: [
+        icon,
+        !iconOnly && children
+      ]
+    }
+  );
+}
+
+export { Toggle, toggleVariants };

package/{chunk-O7F3CIDV.js → chunk-XUOSJMEJ.js}

@@ -1,28 +1,28 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
 var badgeVariants = cva(
   [
-    "inline-flex shrink-0 items-center gap-1 text-sm leading-4 font-medium tracking-normal whitespace-nowrap text-tone-fg",
-    "[&_svg]:pointer-events-none [&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]"
+    "sa:inline-flex sa:shrink-0 sa:items-center sa:gap-1 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:whitespace-nowrap sa:text-tone-fg",
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
   ],
   {
     variants: {
       size: {
-        lg: "px-2 py-1",
-        sm: "px-1.5 py-0.5"
+        lg: "sa:px-2 sa:py-1",
+        sm: "sa:px-1.5 sa:py-0.5"
       },
       variant: {
-        soft: "bg-tone-bg",
-        plain: "bg-transparent",
+        soft: "sa:bg-tone-bg",
+        plain: "sa:bg-transparent",
         // White (bg/card) inside a 1px border/default edge, drawn inset so the size stays put.
-        outline: "bg-bg-card [box-shadow:inset_0_0_0_1px_var(--border-default)]"
+        outline: "sa:bg-bg-card sa:[box-shadow:inset_0_0_0_1px_var(--border-default)]"
       },
       shape: {
-        default: "rounded-sm",
-        rounded: "rounded-pill"
+        default: "sa:rounded-sm",
+        rounded: "sa:rounded-pill"
       }
     },
     defaultVariants: { size: "lg", variant: "soft", shape: "default" }
@@ -41,5 +41,3 @@ function Badge({ className, tone = "neutral", size, variant, shape, ...props })
 }
 
 export { Badge, badgeVariants };
-//# sourceMappingURL=chunk-O7F3CIDV.js.map
-//# sourceMappingURL=chunk-O7F3CIDV.js.map

package/chunk-YJK4MGSI.js

@@ -0,0 +1,86 @@
+import { CloseIcon } from './chunk-AIMQNLPY.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { Dialog } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Sheet({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  side = "right",
+  title,
+  description,
+  footer,
+  children,
+  modal = true,
+  container,
+  onOpenAutoFocus,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const position = container ? "absolute" : "fixed";
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { container, children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Overlay,
+        {
+          className: cn(
+            position,
+            "sa:inset-0 sa:z-50 sa:bg-black-a40",
+            "sa:data-[state=open]:animate-[satin-fade-in_var(--sa-duration-slow)_var(--sa-ease-out)]",
+            "sa:data-[state=closed]:animate-[satin-fade-out_var(--sa-duration-base)_var(--sa-ease-out)]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          ...description ? {} : { "aria-describedby": void 0 },
+          ...props,
+          "data-slot": "sheet",
+          "data-side": side,
+          onOpenAutoFocus,
+          className: cn(
+            position,
+            "sa:z-50 sa:flex sa:flex-col sa:gap-4 sa:bg-bg-card sa:p-4 sa:outline-none",
+            "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+            // Flush with its edge: no radius and no border on the side that touches it.
+            side === "bottom" && "sa:inset-x-0 sa:bottom-0 sa:max-h-[85%] sa:rounded-t-2xl sa:border-t sa:border-border-subtle sa:pt-6",
+            side === "right" && "sa:inset-y-0 sa:right-0 sa:w-[400px] sa:max-w-[calc(100%-32px)] sa:rounded-l-2xl sa:border-l sa:border-border-subtle",
+            side === "left" && "sa:inset-y-0 sa:left-0 sa:w-[400px] sa:max-w-[calc(100%-32px)] sa:rounded-r-2xl sa:border-r sa:border-border-subtle",
+            side === "bottom" && "sa:data-[state=open]:animate-[satin-sheet-up_var(--sa-duration-slow)_var(--sa-ease-out)] sa:data-[state=closed]:animate-[satin-sheet-down_var(--sa-duration-base)_var(--sa-ease-out)]",
+            side === "right" && "sa:data-[state=open]:animate-[satin-sheet-left_var(--sa-duration-slow)_var(--sa-ease-out)] sa:data-[state=closed]:animate-[satin-sheet-right_var(--sa-duration-base)_var(--sa-ease-out)]",
+            side === "left" && "sa:data-[state=open]:animate-[satin-sheet-from-left_var(--sa-duration-slow)_var(--sa-ease-out)] sa:data-[state=closed]:animate-[satin-sheet-to-left_var(--sa-duration-base)_var(--sa-ease-out)]",
+            className
+          ),
+          children: [
+            side === "bottom" && /* @__PURE__ */ jsx(
+              Dialog.Close,
+              {
+                "aria-label": labels.close,
+                className: "sa:absolute sa:inset-x-4 sa:top-0 sa:flex sa:h-6 sa:cursor-pointer sa:items-center sa:justify-center sa:rounded-lg sa:outline-none sa:focus-visible:ring-2 sa:focus-visible:ring-action-focus-ring",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:h-1 sa:w-9 sa:rounded-full sa:bg-border-strong" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:flex-col sa:gap-0.5", side !== "bottom" && "sa:pr-8"), children: [
+              /* @__PURE__ */ jsx(Dialog.Title, { className: "sa:text-base sa:leading-[21px] sa:font-medium sa:text-text-default", children: title }),
+              description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "sa:text-sm sa:text-text-muted", children: description }) : null
+            ] }),
+            children != null && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-h-0 sa:flex-1 sa:flex-col sa:overflow-y-auto", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: cn("sa:flex sa:shrink-0 sa:items-center sa:justify-end sa:gap-2", side === "bottom" && "sa:*:flex-1"), children: footer }),
+            side !== "bottom" && /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xl", iconOnly: true, "aria-label": labels.close, className: "sa:absolute sa:top-[7px] sa:right-[7px] sa:rounded-lg", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var SheetClose = Dialog.Close;
+
+export { Sheet, SheetClose };

package/{chunk-YX5VNRJX.js → chunk-YYFAZQ25.js}

@@ -20,5 +20,3 @@ var bannerMesh = {
 };
 
 export { bannerMesh };
-//# sourceMappingURL=chunk-YX5VNRJX.js.map
-//# sourceMappingURL=chunk-YX5VNRJX.js.map

package/chunk-Z7S2KQZS.js

@@ -0,0 +1,177 @@
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var chipVariants = cva(
+  [
+    "sa:group/chip sa:relative sa:inline-flex sa:shrink-0 sa:items-center sa:rounded-pill sa:whitespace-nowrap sa:select-none",
+    "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium",
+    "sa:transition-[background-color,border-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:focus-visible:outline-none",
+    "sa:data-[disabled]:pointer-events-none sa:data-[disabled]:opacity-50 sa:data-[disabled]:[box-shadow:none]"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: "sa:border",
+        subtle: ""
+      },
+      size: {
+        md: "sa:h-control-height",
+        sm: "sa:h-control-height-xs"
+      },
+      neutral: { true: "sa:text-text-default", false: "sa:text-tone-fg" }
+    },
+    compoundVariants: [
+      {
+        variant: "sa:outline",
+        neutral: true,
+        className: [
+          "sa:border-border-default sa:bg-bg-popover sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:satin-hover:border-border-strong sa:satin-hover:bg-bg-hover",
+          "sa:satin-focus:border-border-strong sa:satin-focus:bg-bg-popover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:border-border-strong sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:border-border-strong sa:satin-pressed:bg-border-input sa:satin-pressed:[box-shadow:none]",
+          "sa:data-[disabled]:border-border-strong"
+        ]
+      },
+      {
+        variant: "sa:outline",
+        neutral: false,
+        className: [
+          "sa:border-tone-border sa:bg-tone-bg sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:satin-hover:bg-tone-border",
+          "sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-tone-border sa:satin-pressed:[box-shadow:none]"
+        ]
+      },
+      {
+        variant: "subtle",
+        neutral: true,
+        className: [
+          "sa:bg-action-secondary-bg",
+          "sa:satin-hover:bg-border-input",
+          "sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-border-input sa:satin-pressed:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
+        ]
+      },
+      {
+        variant: "subtle",
+        neutral: false,
+        className: [
+          "sa:bg-tone-bg",
+          "sa:satin-hover:bg-tone-border",
+          "sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-tone-border"
+        ]
+      }
+    ],
+    defaultVariants: { variant: "subtle", size: "md", neutral: true }
+  }
+);
+function CloseGlyph({ size }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.50551 11.4951L8.0006 8M8.0006 8L11.4957 4.50491M8.0006 8L4.50551 4.50491M8.0006 8L11.4957 11.4951",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function Chip({
+  className,
+  variant = "subtle",
+  size = "md",
+  tone = "neutral",
+  dot = false,
+  avatar,
+  onRemove,
+  removeLabel,
+  disabled = false,
+  children,
+  type,
+  ...props
+}) {
+  const neutral = tone === "neutral";
+  const iconSize = size === "sm" ? 14 : 16;
+  const classes = cn(chipVariants({ variant, size, neutral }), className);
+  const label = typeof children === "string" ? children : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot && // Dot slot: 4px in, a 16px box with an 8px status dot (status/green fg in Figma).
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-dot", className: "sa:-mr-1 sa:flex sa:shrink-0 sa:items-center sa:pl-1", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "sa:grid sa:size-4 sa:place-items-center", children: /* @__PURE__ */ jsx("span", { className: "sa:size-2 sa:rounded-full sa:bg-status-green-fg" }) }) }),
+    avatar && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "chip-avatar",
+        className: "sa:-mr-1 sa:flex sa:shrink-0 sa:items-center sa:pl-1 sa:[&>*]:size-4 sa:[&>*]:rounded-full",
+        children: avatar
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-label", className: cn("sa:flex sa:shrink-0 sa:items-center sa:px-2", onRemove && "sa:-mr-1"), children }),
+    onRemove && /* @__PURE__ */ jsx("span", { className: "sa:flex sa:shrink-0 sa:items-center sa:pr-1", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "chip-remove",
+        disabled,
+        "aria-label": removeLabel ?? (label ? `Remove ${label}` : "Remove"),
+        onClick: onRemove,
+        className: cn(
+          "sa:grid sa:shrink-0 sa:place-items-center sa:rounded-pill sa:focus-visible:outline-none",
+          neutral ? "sa:text-text-muted" : "sa:text-tone-fg"
+        ),
+        children: /* @__PURE__ */ jsx(CloseGlyph, { size: iconSize })
+      }
+    ) })
+  ] });
+  if (onRemove) {
+    const { "data-force": force } = props;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "chip",
+        "data-tone": tone,
+        "data-force": force,
+        "data-disabled": disabled || void 0,
+        className: classes,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-slot": "chip",
+      "data-tone": tone,
+      "data-disabled": disabled || void 0,
+      type: type ?? "button",
+      disabled,
+      className: classes,
+      ...props,
+      children: content
+    }
+  );
+}
+function ChipAvatar({ initials, tone, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-tone": tone,
+      "aria-hidden": true,
+      className: cn(
+        "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:overflow-hidden sa:rounded-full sa:bg-tone-bg sa:text-[7px] sa:leading-2 sa:font-semibold sa:text-tone-fg",
+        className
+      ),
+      children: initials
+    }
+  );
+}
+
+export { Chip, ChipAvatar, chipVariants };

package/chunk-ZBZ3ZQRB.js

@@ -0,0 +1,195 @@
+import { Floating } from './chunk-ZHFIWDGF.js';
+import { Select } from './chunk-UCCNXGLG.js';
+import { Badge } from './chunk-XUOSJMEJ.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.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-Y5AYU7PK.js → chunk-ZHFIWDGF.js}

@@ -40,5 +40,3 @@ function Floating({ anchor, side = "top", sideOffset = 8, collisionPadding = 8,
 }
 
 export { Floating };
-//# sourceMappingURL=chunk-Y5AYU7PK.js.map
-//# sourceMappingURL=chunk-Y5AYU7PK.js.map

package/components/accordion.js

@@ -1,4 +1,2 @@
-'use client';export { Accordion, AccordionItem } from '../chunk-GQA24FYG.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=accordion.js.map
-//# sourceMappingURL=accordion.js.map
+'use client';export { Accordion, AccordionItem } from '../chunk-GI2SMFZL.js';
+import '../chunk-O46O6LFQ.js';

package/components/agent-loading.d.ts

@@ -22,6 +22,7 @@ import * as React from 'react';
  */
 export type Glimmer = 'color' | 'neutral';
 /** The tetris mark. Memoised: its 125 animated elements never re-render with their parent. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare const TetrisMark: React.MemoExoticComponent<({ glimmer, className }: {
     glimmer?: Glimmer;
     className?: string;
@@ -45,6 +46,7 @@ export declare function ShimmerLabel({ children, className }: {
     className?: string;
 }): React.JSX.Element;
 /** The flappy bird fitted into a `size` square; `run` plays the run in place. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare function FlappySprite({ size, run, className }: {
     size?: number;
     run?: boolean;

package/components/agent-loading.js

@@ -1,4 +1,2 @@
-'use client';export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill } from '../chunk-KNUWZNFV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=agent-loading.js.map
-//# sourceMappingURL=agent-loading.js.map
+'use client';export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill } from '../chunk-UGIVCXGN.js';
+import '../chunk-O46O6LFQ.js';

package/components/agent-picker.js

@@ -1,5 +1,4 @@
-'use client';export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow } from '../chunk-VAGIAREV.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=agent-picker.js.map
-//# sourceMappingURL=agent-picker.js.map
+'use client';export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow } from '../chunk-W472DBMT.js';
+import '../chunk-T6L32XXH.js';
+import '../chunk-SSOFFQ5T.js';
+import '../chunk-O46O6LFQ.js';

package/components/agent-suggestion.js

@@ -1,6 +1,5 @@
-'use client';export { AgentSuggestion, AgentSuggestionChanges, AgentSuggestionDiff, AgentSuggestionMetric, AgentSuggestionQuote } from '../chunk-MR3JDI7E.js';
-import '../chunk-7TXHCRAG.js';
-import '../chunk-O7F3CIDV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=agent-suggestion.js.map
-//# sourceMappingURL=agent-suggestion.js.map
+'use client';export { AgentSuggestion, AgentSuggestionChanges, AgentSuggestionDiff, AgentSuggestionMetric, AgentSuggestionQuote } from '../chunk-7Q76HLRQ.js';
+import '../chunk-M2HEVFQ3.js';
+import '../chunk-XUOSJMEJ.js';
+import '../chunk-SSOFFQ5T.js';
+import '../chunk-O46O6LFQ.js';

package/components/announcement-bar.js

@@ -1,7 +1,6 @@
-'use client';export { AnnouncementBar } from '../chunk-D7RZNTFC.js';
-import '../chunk-6QMSWITQ.js';
-import '../chunk-YX5VNRJX.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=announcement-bar.js.map
-//# sourceMappingURL=announcement-bar.js.map
+'use client';export { AnnouncementBar } from '../chunk-HK6WINL6.js';
+import '../chunk-SDOTDMYG.js';
+import '../chunk-YYFAZQ25.js';
+import '../chunk-T6L32XXH.js';
+import '../chunk-SSOFFQ5T.js';
+import '../chunk-O46O6LFQ.js';