@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-6YXUBP27.js → chunk-JCR5TWTF.js}

@@ -1,9 +1,10 @@
-import { KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-BKZBWPUH.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-XWPH7C2W.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, DropdownMenu } from 'radix-ui';
-import { Attachment, Globe, Plus, ArrowUp, Search, Check, Microphone, Xmark, Page, NavArrowDown } from 'iconoir-react';
+import { Attachment, Globe, Plus, ArrowUp, Search, NavArrowDown, Check, Microphone, Xmark, Page } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var defaultActions = [
@@ -11,10 +12,10 @@ var defaultActions = [
   { id: "web", label: "Web search", description: "Research and find on the internet", icon: /* @__PURE__ */ jsx(Globe, {}) }
 ];
 var menuCard = [
-  "overflow-clip rounded-xl border border-border-subtle bg-bg-popover",
-  "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
-  "origin-(--radix-popper-transform-origin) data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
-  "focus-visible:outline-none"
+  "sa:overflow-clip sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-popover",
+  "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+  "sa:origin-(--radix-popper-transform-origin) sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
+  "sa:focus-visible:outline-none"
 ];
 function PromptBar({
   shape = "pill",
@@ -36,6 +37,7 @@ function PromptBar({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const [innerValue, setInnerValue] = React.useState(defaultValue);
   const value = valueProp ?? innerValue;
   const [files, setFiles] = React.useState(attachmentsProp ?? []);
@@ -94,11 +96,11 @@ function PromptBar({
           submit();
         },
         className: cn(
-          "flex w-full flex-col gap-2 border border-border-default bg-bg-field p-2 [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
-          "transition-[border-color,border-radius] duration-(--duration-fast) ease-(--ease-out)",
-          "has-[textarea:focus]:border-border-strong data-filled:border-border-strong",
-          pill ? files.length > 0 || expanded ? "rounded-3xl" : "rounded-pill" : "rounded-xl",
-          disabled && "opacity-50",
+          "sa:flex sa:w-full sa:flex-col sa:gap-2 sa:border sa:border-border-default sa:bg-bg-field sa:p-2 sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:transition-[border-color,border-radius] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:has-[textarea:focus]:border-border-strong sa:data-filled:border-border-strong",
+          pill ? files.length > 0 || expanded ? "sa:rounded-3xl" : "sa:rounded-pill" : "sa:rounded-xl",
+          disabled && "sa:opacity-50",
           className
         ),
         ...props,
@@ -117,7 +119,7 @@ function PromptBar({
               }
             }
           ),
-          files.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": "Attachments", className: "flex flex-wrap gap-1 pb-1", children: files.map((file, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          files.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": labels.attachments, className: "sa:flex sa:flex-wrap sa:gap-1 sa:pb-1", children: files.map((file, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             AttachmentChip,
             {
               file,
@@ -126,7 +128,7 @@ function PromptBar({
               onRemove: () => setAttachments(files.filter((_, j) => j !== i))
             }
           ) }, `${file.name}-${i}`)) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-end gap-x-2 gap-y-2", expanded && "items-center"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:flex-wrap sa:items-end sa:gap-x-2 sa:gap-y-2", expanded && "sa:items-center"), children: [
             /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
               {
@@ -135,8 +137,8 @@ function PromptBar({
                 shape: btnShape,
                 iconOnly: true,
                 disabled,
-                "aria-label": "Add to conversation",
-                className: "data-[state=open]:bg-border-input",
+                "aria-label": labels.addToConversation,
+                className: "sa:data-[state=open]:bg-border-input",
                 children: /* @__PURE__ */ jsx(Plus, {})
               }
             ) }),
@@ -148,7 +150,7 @@ function PromptBar({
                 value,
                 disabled,
                 placeholder,
-                "aria-label": "Message",
+                "aria-label": labels.message,
                 onChange: (e) => setValue(e.target.value),
                 onKeyDown: (e) => {
                   if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
@@ -157,13 +159,13 @@ function PromptBar({
                   }
                 },
                 className: cn(
-                  "block h-7 min-w-0 flex-1 resize-none bg-transparent py-[3.5px] text-base leading-[21px] text-text-default",
-                  expanded && "order-first basis-full px-1",
-                  "outline-none placeholder:text-text-muted focus-visible:ring-0 disabled:cursor-not-allowed"
+                  "sa:block sa:h-7 sa:min-w-0 sa:flex-1 sa:resize-none sa:bg-transparent sa:py-[3.5px] sa:text-base sa:leading-[21px] sa:text-text-default",
+                  expanded && "sa:order-first sa:basis-full sa:px-1",
+                  "sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0 sa:disabled:cursor-not-allowed"
                 )
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-1", expanded && "contents"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:shrink-0 sa:items-center sa:gap-1", expanded && "sa:contents"), children: [
               /* @__PURE__ */ jsx(
                 ModelSelect,
                 {
@@ -179,7 +181,7 @@ function PromptBar({
                   }
                 }
               ),
-              expanded && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex-1" }),
+              expanded && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:flex-1" }),
               /* @__PURE__ */ jsx(
                 DictationButton,
                 {
@@ -192,7 +194,7 @@ function PromptBar({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "md", shape: btnShape, iconOnly: true, "aria-label": "Send", disabled: !canSend, children: /* @__PURE__ */ jsx(ArrowUp, {}) })
+              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "md", shape: btnShape, iconOnly: true, "aria-label": labels.send, disabled: !canSend, children: /* @__PURE__ */ jsx(ArrowUp, {}) })
             ] })
           ] })
         ]
@@ -205,8 +207,8 @@ function PromptBar({
         align: "start",
         sideOffset: 8,
         avoidCollisions: false,
-        "aria-label": "Add to conversation",
-        className: cn(menuCard, "z-50 flex w-(--radix-popper-anchor-width) flex-col"),
+        "aria-label": labels.addToConversation,
+        className: cn(menuCard, "sa:z-50 sa:flex sa:w-(--radix-popper-anchor-width) sa:flex-col"),
         children: /* @__PURE__ */ jsx(AddMenu, { actions, onAction: runAction, onAddAgent })
       }
     ) })
@@ -217,6 +219,7 @@ function AddMenu({
   onAction,
   onAddAgent
 }) {
+  const labels = useSatinLabels();
   const [query, setQuery] = React.useState("");
   const [active, setActive] = React.useState(0);
   const id = React.useId();
@@ -224,9 +227,9 @@ function AddMenu({
   const shown = q ? actions.filter((a) => `${a.label} ${a.description ?? ""}`.toLowerCase().includes(q)) : actions;
   const index = Math.min(active, Math.max(shown.length - 1, 0));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pr-1.5", children: [
-      /* @__PURE__ */ jsxs("label", { className: "flex flex-1 items-center gap-2 px-3 py-1.5", children: [
-        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-icon-size shrink-0 text-text-muted [stroke-width:1.875]" }),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1 sa:pr-1.5", children: [
+      /* @__PURE__ */ jsxs("label", { className: "sa:flex sa:flex-1 sa:items-center sa:gap-2 sa:px-3 sa:py-1.5", children: [
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "sa:size-icon-size sa:shrink-0 sa:text-text-muted sa:[stroke-width:1.875]" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -234,7 +237,7 @@ function AddMenu({
             "aria-expanded": true,
             "aria-controls": `${id}-list`,
             "aria-activedescendant": shown.length ? `${id}-${index}` : void 0,
-            "aria-label": "Search agents and tools",
+            "aria-label": labels.searchAgentsAndTools,
             placeholder: "Search agents and tools",
             value: query,
             onChange: (e) => {
@@ -253,14 +256,14 @@ function AddMenu({
                 onAction(shown[index]);
               }
             },
-            className: "min-w-0 flex-1 bg-transparent text-sm 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-sm sa:text-text-default sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0"
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Add an agent", onClick: onAddAgent, children: /* @__PURE__ */ jsx(Plus, {}) })
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.addAgent, onClick: onAddAgent, children: /* @__PURE__ */ jsx(Plus, {}) })
     ] }),
-    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-px bg-border-subtle" }),
-    /* @__PURE__ */ jsxs("div", { id: `${id}-list`, role: "listbox", "aria-label": "Agents and tools", className: "flex flex-col p-1", children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:h-px sa:bg-border-subtle" }),
+    /* @__PURE__ */ jsxs("div", { id: `${id}-list`, role: "listbox", "aria-label": labels.agentsAndTools, className: "sa:flex sa:flex-col sa:p-1", children: [
       shown.map((a, i) => /* @__PURE__ */ jsxs(
         "div",
         {
@@ -271,21 +274,21 @@ function AddMenu({
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => onAction(a),
           className: cn(
-            "flex min-h-8 items-center gap-2 rounded-lg px-2 py-1.5",
-            "[&>svg]:size-icon-size [&>svg]:shrink-0 [&>svg]:text-text-muted [&>svg]:[stroke-width:1.875]",
-            i === index && "bg-bg-hover"
+            "sa:flex sa:min-h-8 sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:py-1.5",
+            "sa:[&>svg]:size-icon-size sa:[&>svg]:shrink-0 sa:[&>svg]:text-text-muted sa:[&>svg]:[stroke-width:1.875]",
+            i === index && "sa:bg-bg-hover"
           ),
           children: [
             a.icon,
-            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm leading-[13px] font-medium whitespace-nowrap text-text-default", children: a.label }),
-              a.description && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-text-muted", children: a.description })
+            /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-baseline sa:gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-sm sa:leading-[13px] sa:font-medium sa:whitespace-nowrap sa:text-text-default", children: a.label }),
+              a.description && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:text-text-muted", children: a.description })
             ] })
           ]
         },
         a.id
       )),
-      shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-sm text-text-muted", children: "No matches" })
+      shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "sa:px-2 sa:py-1.5 sa:text-sm sa:text-text-muted", children: "No matches" })
     ] }),
     /* @__PURE__ */ jsx(ShortcutHints, {})
   ] });
@@ -299,6 +302,7 @@ function ModelSelect({
   disabled,
   onChange
 }) {
+  const labels = useSatinLabels();
   if (!label) return null;
   const trigger = /* @__PURE__ */ jsxs(
     Button,
@@ -307,10 +311,13 @@ function ModelSelect({
       size: "md",
       shape,
       disabled,
-      className: "data-[state=open]:bg-border-input",
+      className: "sa:data-[state=open]:bg-border-input",
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>*]:size-4", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Model: " }),
+        icon && /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:[&>*]:size-4", children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+          labels.model,
+          ": "
+        ] }),
         label,
         /* @__PURE__ */ jsx(NavArrowDown, { "aria-hidden": true, "data-chevron": true })
       ]
@@ -326,20 +333,20 @@ function ModelSelect({
         align: "end",
         sideOffset: 8,
         avoidCollisions: false,
-        className: cn(menuCard, "z-50 w-[241px]"),
+        className: cn(menuCard, "sa:z-50 sa:w-[241px]"),
         children: [
-          /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: model, onValueChange: onChange, className: "flex flex-col p-1", children: models.map((m) => /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: model, onValueChange: onChange, className: "sa:flex sa:flex-col sa:p-1", children: models.map((m) => /* @__PURE__ */ jsxs(
             DropdownMenu.RadioItem,
             {
               value: m.value,
               className: cn(
-                "flex min-h-8 cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 outline-none select-none",
-                "data-highlighted:bg-bg-hover data-[state=checked]:bg-bg-selected"
+                "sa:flex sa:min-h-8 sa:cursor-pointer sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:py-1.5 sa:outline-none sa:select-none",
+                "sa:data-highlighted:bg-bg-hover sa:data-[state=checked]:bg-bg-selected"
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center [&>*]:size-5", children: m.icon }),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-[13px] font-medium text-text-default", children: m.label }),
-                /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size text-status-green-fg [stroke-width:1.875]" }) })
+                /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-5 sa:shrink-0 sa:items-center sa:justify-center sa:[&>*]:size-5", children: m.icon }),
+                /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:leading-[13px] sa:font-medium sa:text-text-default", children: m.label }),
+                /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size sa:text-status-green-fg sa:[stroke-width:1.875]" }) })
               ]
             },
             m.value
@@ -351,7 +358,7 @@ function ModelSelect({
   ] });
 }
 function ShortcutHints() {
-  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 border-t border-border-default bg-bg-popover px-3 py-1.5", children: [
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "sa:flex sa:items-center sa:gap-3 sa:border-t sa:border-border-default sa:bg-bg-popover sa:px-3 sa:py-1.5", children: [
     /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: "Navigate" }),
     /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: "Select" })
   ] });
@@ -406,15 +413,15 @@ function AttachmentChip({
     {
       "data-slot": "attachment",
       className: cn(
-        "flex h-control-height items-center gap-1.5 border border-border-default bg-bg-popover pr-0.5 pl-2",
-        "[filter:drop-shadow(0_1px_1px_var(--effect-shadow-xs))]",
-        "transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-out)",
-        "hover:border-border-strong hover:bg-bg-canvas active:border-border-strong active:bg-bg-muted",
-        rounded ? "rounded-pill" : "rounded-md"
+        "sa:flex sa:h-control-height sa:items-center sa:gap-1.5 sa:border sa:border-border-default sa:bg-bg-popover sa:pr-0.5 sa:pl-2",
+        "sa:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-xs))]",
+        "sa:transition-[background-color,border-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:hover:border-border-strong sa:hover:bg-bg-canvas sa:active:border-border-strong sa:active:bg-bg-muted",
+        rounded ? "sa:rounded-pill" : "sa:rounded-md"
       ),
       children: [
         /* @__PURE__ */ jsx(FileIcon, { name: file.name }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] truncate text-sm font-medium text-text-default", children: file.name }),
+        /* @__PURE__ */ jsx("span", { className: "sa:max-w-[200px] sa:truncate sa:text-sm sa:font-medium sa:text-text-default", children: file.name }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -425,7 +432,7 @@ function AttachmentChip({
             disabled,
             "aria-label": `Remove ${file.name}`,
             onClick: onRemove,
-            children: /* @__PURE__ */ jsx(Xmark, { className: "![stroke-width:1.64]" })
+            children: /* @__PURE__ */ jsx(Xmark, { className: "sa:![stroke-width:1.64]" })
           }
         )
       ]
@@ -453,22 +460,20 @@ var LABELS = {
   ]
 };
 var FILE_COLORS = {
-  pdf: ["var(--color-red-500)", "var(--color-red-300)"],
-  doc: ["var(--color-sky-600)", "var(--color-sky-300)"],
-  xls: ["var(--color-green-700)", "var(--color-green-300)"]
+  pdf: ["var(--sa-color-red-500)", "var(--sa-color-red-300)"],
+  doc: ["var(--sa-color-sky-600)", "var(--sa-color-sky-300)"],
+  xls: ["var(--sa-color-green-700)", "var(--sa-color-green-300)"]
 };
 function FileIcon({ name }) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   const kind = ext === "pdf" ? "pdf" : ext === "doc" || ext === "docx" ? "doc" : ext === "xls" || ext === "xlsx" || ext === "csv" ? "xls" : null;
-  if (!kind) return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "size-4 shrink-0 text-text-muted [stroke-width:1.875]" });
+  if (!kind) return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:text-text-muted sa:[stroke-width:1.875]" });
   const [page, fold] = FILE_COLORS[kind];
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", className: "size-4 shrink-0", children: [
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", className: "sa:size-4 sa:shrink-0", children: [
     /* @__PURE__ */ jsx("path", { d: PAGE, fill: page }),
     /* @__PURE__ */ jsx("path", { d: FOLD, fill: fold }),
-    LABELS[kind].map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: "var(--color-white)" }, i))
+    LABELS[kind].map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: "var(--sa-color-white)" }, i))
   ] });
 }
 
 export { PromptBar, defaultActions };
-//# sourceMappingURL=chunk-6YXUBP27.js.map
-//# sourceMappingURL=chunk-6YXUBP27.js.map

package/chunk-JKOBDLP3.js

@@ -0,0 +1,25 @@
+import { FieldSizeContext } from './chunk-KITXKIYW.js';
+import { ButtonDefaultsContext } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonSize = { sm: "md", md: "lg", lg: "xl" };
+function InputGroup({ size = "md", className, ...props }) {
+  const buttons = React.useMemo(() => ({ size: buttonSize[size], variant: "secondary" }), [size]);
+  return /* @__PURE__ */ jsx(FieldSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(ButtonDefaultsContext.Provider, { value: buttons, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group",
+      "data-size": size,
+      className: cn("sa:flex sa:w-full sa:items-stretch", className),
+      ...props
+    }
+  ) }) });
+}
+function InputGroupAddon({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-group-addon", className: cn("satin-input-addon", className), ...props });
+}
+
+export { InputGroup, InputGroupAddon };

package/chunk-JR3VVDV6.js

@@ -0,0 +1,37 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var emptyStateVariants = cva(
+  "sa:flex sa:w-[350px] sa:max-w-[560px] sa:min-w-[min(320px,100%)] sa:flex-col sa:items-center sa:gap-4 sa:rounded-2xl sa:px-4 sa:pt-4 sa:pb-5 sa:text-center",
+  {
+    variants: {
+      border: {
+        ghost: "",
+        dashed: "sa:border sa:border-dashed sa:border-border-default",
+        outline: "sa:border sa:border-border-default"
+      }
+    },
+    defaultVariants: { border: "ghost" }
+  }
+);
+function EmptyState({ className, border, title, description, icon, actions, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn(emptyStateVariants({ border }), className), ...props, children: [
+    icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "sa:flex sa:shrink-0 sa:items-center sa:justify-center sa:rounded-lg sa:bg-bg-muted sa:p-2.5 sa:text-text-default sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-full sa:flex-col sa:items-center sa:gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "sa:w-full sa:text-lg sa:font-medium sa:text-text-default", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "sa:w-full sa:text-body-lg sa:text-text-muted", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-wrap sa:items-start sa:justify-center sa:gap-2", children: actions })
+  ] });
+}
+
+export { EmptyState, emptyStateVariants };

package/chunk-JYGCZWET.js

@@ -0,0 +1,112 @@
+import { useSlidingIndicator } from './chunk-XETMIETJ.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { ToggleGroup } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var track = cva("sa:relative sa:isolate sa:inline-flex sa:items-center sa:gap-0.5 sa:bg-bg-muted sa:p-1", {
+  variants: {
+    shape: { default: "sa:rounded-lg", rounded: "sa:rounded-pill" },
+    border: { true: "sa:border sa:border-border-subtle", false: "" },
+    fullWidth: { true: "sa:flex sa:w-full", false: "" }
+  }
+});
+var segment = cva(
+  [
+    "sa:relative sa:z-10 sa:inline-flex sa:items-center sa:justify-center sa:font-medium sa:whitespace-nowrap sa:text-text-muted sa:select-none",
+    "sa:transition-[color,background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:satin-hover:text-text-default sa:data-[state=on]:text-text-default",
+    "sa:satin-pressed:bg-component-segmented-pressed sa:satin-pressed:text-text-default",
+    "sa:focus-visible:outline-none sa:satin-focus:text-text-default sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+    "sa:disabled:pointer-events-none sa:disabled:text-text-subtle",
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "sa:h-control-height-xs sa:gap-1 sa:px-2.5 sa:text-sm sa:[&_svg]:size-icon-size-sm",
+        md: "sa:h-control-height sa:gap-1.5 sa:px-3 sa:text-sm sa:[&_svg]:size-icon-size",
+        lg: "sa:h-control-height-lg sa:gap-1.5 sa:px-4 sa:text-base sa:[&_svg]:size-icon-size"
+      },
+      shape: { default: "sa:rounded-sm", rounded: "sa:rounded-pill" },
+      fullWidth: { true: "sa:flex-1", false: "" }
+    }
+  }
+);
+function SegmentedControl({
+  items,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  shape = "default",
+  border = false,
+  fullWidth = false,
+  className,
+  ref,
+  ...props
+}) {
+  const [inner, setInner] = React.useState(defaultValue ?? items[0]?.value ?? "");
+  const value = valueProp ?? inner;
+  const trackRef = React.useRef(null);
+  const setTrack = React.useCallback(
+    (node) => {
+      trackRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const pill = useSlidingIndicator(trackRef, '[data-state="on"]', `${value}|${size}|${fullWidth}|${items.length}`);
+  return /* @__PURE__ */ jsxs(
+    ToggleGroup.Root,
+    {
+      ...props,
+      ref: setTrack,
+      type: "single",
+      value,
+      onValueChange: (next) => {
+        if (!next) return;
+        setInner(next);
+        onValueChange?.(next);
+      },
+      "data-slot": "segmented-control",
+      className: cn(track({ shape, border, fullWidth }), className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: pill.ref,
+            "aria-hidden": true,
+            className: cn(
+              "sa:pointer-events-none sa:absolute sa:top-1 sa:bottom-1 sa:left-0 sa:z-0 sa:bg-component-segmented-selected sa:opacity-0 sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+              shape === "sa:rounded" ? "sa:rounded-pill" : "sa:rounded-sm"
+            )
+          }
+        ),
+        items.map((item) => /* @__PURE__ */ jsxs(
+          ToggleGroup.Item,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            className: cn(
+              segment({ size, shape, fullWidth }),
+              // Unselected focus: bg/muted under the ring. Selected focus keeps the pill's fill.
+              "sa:data-[state=off]:satin-focus:bg-bg-muted",
+              // Before the pill is measured (server render), the selected segment paints its own fill.
+              !pill.ready && "sa:data-[state=on]:bg-component-segmented-selected sa:data-[state=on]:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
+            ),
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          item.value
+        ))
+      ]
+    }
+  );
+}
+
+export { SegmentedControl };

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

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

package/{chunk-B6V4VSGH.js → chunk-KDU7AT2T.js}

@@ -1,5 +1,5 @@
-import { KbdGroup } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { KbdGroup } from './chunk-XWPH7C2W.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Tooltip as Tooltip$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -14,15 +14,15 @@ function TooltipBubble({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       "data-slot": "tooltip",
       className: cn(
-        "flex items-center gap-2 bg-text-default py-1 pl-2.5 text-sm leading-(--text-sm--line-height) font-medium whitespace-nowrap text-bg-canvas",
-        "[box-shadow:0_8px_12px_0_var(--effect-shadow-md),0_1px_1.5px_0_var(--effect-shadow-ambient),inset_0_1px_0_0_var(--effect-highlight-top)]",
-        shape === "rounded" ? "rounded-pill" : "rounded-lg",
-        shortcut ? "pr-1.5" : "pr-2.5",
+        "sa:flex sa:items-center sa:gap-2 sa:bg-text-default sa:py-1 sa:pl-2.5 sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium sa:whitespace-nowrap sa:text-bg-canvas",
+        "sa:[box-shadow:0_8px_12px_0_var(--effect-shadow-md),0_1px_1.5px_0_var(--effect-shadow-ambient),inset_0_1px_0_0_var(--effect-highlight-top)]",
+        shape === "sa:rounded" ? "sa:rounded-pill" : "sa:rounded-lg",
+        shortcut ? "sa:pr-1.5" : "sa:pr-2.5",
         className
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsx("span", { children: label }),
         shortcut && /* @__PURE__ */ jsx(KbdGroup, { keys: shortcut, tone: "inverse" })
@@ -42,7 +42,8 @@ function Tooltip({
   defaultOpen = false,
   onOpenChange,
   container,
-  className
+  className,
+  ...props
 }) {
   const [inner, setInner] = React.useState(defaultOpen);
   const open = openProp ?? inner;
@@ -66,17 +67,15 @@ function Tooltip({
         sideOffset: 8,
         collisionPadding: 8,
         className: cn(
-          "z-50 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out)",
-          "starting:opacity-0",
-          "data-[side=top]:starting:translate-y-1 data-[side=bottom]:starting:-translate-y-1",
-          "data-[side=left]:starting:translate-x-1 data-[side=right]:starting:-translate-x-1"
+          "sa:z-50 sa:transition-[opacity,translate] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:starting:opacity-0",
+          "sa:data-[side=top]:starting:translate-y-1 sa:data-[side=bottom]:starting:-translate-y-1",
+          "sa:data-[side=left]:starting:translate-x-1 sa:data-[side=right]:starting:-translate-x-1"
         ),
-        children: /* @__PURE__ */ jsx(TooltipBubble, { label, shortcut, shape, className })
+        children: /* @__PURE__ */ jsx(TooltipBubble, { ...props, label, shortcut, shape, className })
       }
     ) })
   ] }) });
 }
 
 export { Tooltip, TooltipBubble };
-//# sourceMappingURL=chunk-B6V4VSGH.js.map
-//# sourceMappingURL=chunk-B6V4VSGH.js.map