@uisatin/ui 0.3.0 → 0.5.0

package/chunk-GH2DEOGO.js

@@ -0,0 +1,67 @@
+import { ButtonDefaultsContext } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function ButtonGroup({
+  orientation = "horizontal",
+  attached = true,
+  variant,
+  size,
+  shape,
+  className,
+  children,
+  ...props
+}) {
+  const defaults = React.useMemo(() => ({ variant, size, shape }), [variant, size, shape]);
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(ButtonDefaultsContext.Provider, { value: defaults, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      "data-attached": attached || void 0,
+      className: cn(
+        "sa:inline-flex sa:w-fit",
+        horizontal ? "sa:flex-row sa:items-center" : "sa:flex-col sa:items-stretch",
+        attached ? [
+          "sa:[&>*]:relative sa:[&>*:hover]:z-10 sa:[&>*:focus-visible]:z-20 sa:[&>*:focus-visible]:[clip-path:none]!",
+          horizontal ? [
+            "sa:[&>*:not(:first-child)]:rounded-l-none sa:[&>*:not(:last-child)]:rounded-r-none sa:[&>*:not(:last-child)]:border-r-0",
+            "sa:[&>[data-variant=secondary]:not(:first-child)]:border-l-border-default",
+            "sa:[&>*:not(:last-child)]:[clip-path:inset(-12px_0_-12px_-12px)] sa:[&>*:not(:first-child)]:[clip-path:inset(-12px_-12px_-12px_0)]",
+            "sa:[&>*:not(:first-child):not(:last-child)]:[clip-path:inset(-12px_0)]"
+          ] : [
+            "sa:[&>*:not(:first-child)]:rounded-t-none sa:[&>*:not(:last-child)]:rounded-b-none sa:[&>*:not(:last-child)]:border-b-0",
+            "sa:[&>[data-variant=secondary]:not(:first-child)]:border-t-border-default",
+            "sa:[&>*:not(:last-child)]:[clip-path:inset(-12px_-12px_0_-12px)] sa:[&>*:not(:first-child)]:[clip-path:inset(0_-12px_-12px_-12px)]",
+            "sa:[&>*:not(:first-child):not(:last-child)]:[clip-path:inset(0_-12px)]"
+          ]
+        ] : size === "xs" ? "sa:gap-1" : "sa:gap-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function ButtonGroupSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "data-slot": "button-group-separator",
+      className: cn(
+        "sa:shrink-0 sa:self-center sa:bg-border-default",
+        // Vertical in a row, horizontal in a column.
+        "sa:h-4 sa:w-px sa:[[data-orientation=vertical]>&]:h-px sa:[[data-orientation=vertical]>&]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator };

package/{chunk-J7RMFN54.js → chunk-GKDMCY2S.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/chunk-GTFUAA6H.js

@@ -0,0 +1,42 @@
+import { Input } from './chunk-L5PPN42A.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import * as React from 'react';
+import { EyeClosed, Eye } from 'iconoir-react';
+import { jsx } from 'react/jsx-runtime';
+
+function PasswordInput({ visible, onVisibleChange, autoComplete = "current-password", disabled, ...props }) {
+  const labels = useSatinLabels();
+  const [own, setOwn] = React.useState(false);
+  const shown = visible ?? own;
+  const toggle = () => {
+    if (visible === void 0) setOwn(!shown);
+    onVisibleChange?.(!shown);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      disabled,
+      type: shown ? "text" : "password",
+      autoComplete,
+      trailingIcon: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "xs",
+          iconOnly: true,
+          disabled,
+          "aria-label": shown ? labels.hidePassword : labels.showPassword,
+          "aria-pressed": shown,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: toggle,
+          className: "sa:-m-1",
+          children: shown ? /* @__PURE__ */ jsx(EyeClosed, {}) : /* @__PURE__ */ jsx(Eye, {})
+        }
+      )
+    }
+  );
+}
+
+export { PasswordInput };

package/{chunk-SAYNV7B3.js → chunk-HI6QIG55.js}

@@ -1,8 +1,8 @@
 import { SLIDE_MS } from './chunk-XETMIETJ.js';
-import { Checkbox } from './chunk-X2GNMNZQ.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Checkbox } from './chunk-W2QQQWNE.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 { RadioGroup } from 'radix-ui';
 import { Check, NavArrowLeft, NavArrowRight, EditPencil } from 'iconoir-react';

package/{chunk-SDOTDMYG.js → chunk-HZV7EXGU.js}

@@ -1,6 +1,6 @@
 import { bannerMesh } from './chunk-YYFAZQ25.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { Xmark } from 'iconoir-react';

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

@@ -1,5 +1,5 @@
-import { Button } from './chunk-T6L32XXH.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Check, Copy } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';

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

@@ -1,5 +1,5 @@
-import { ChartCard, defaultFormat, ChartTooltip, ChartLegendRow } from './chunk-ZBZ3ZQRB.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { ChartCard, defaultFormat, ChartTooltip, ChartLegendRow } from './chunk-LI5VYDLN.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/chunk-J5UQPROI.js

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

package/{chunk-5725MFGQ.js → chunk-JCR5TWTF.js}

@@ -1,7 +1,7 @@
-import { KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-57QEOCDZ.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.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, NavArrowDown, Check, Microphone, Xmark, Page } from 'iconoir-react';

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-FAJ3OVL4.js → chunk-JR3VVDV6.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/{chunk-CVNRZ2YV.js → chunk-JYGCZWET.js}

@@ -1,5 +1,5 @@
 import { useSlidingIndicator } from './chunk-XETMIETJ.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { ToggleGroup } from 'radix-ui';
 import { cva } from 'class-variance-authority';

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

@@ -1,5 +1,5 @@
-import { Kbd } from './chunk-57QEOCDZ.js';
-import { cn } from './chunk-O46O6LFQ.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';

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

@@ -1,5 +1,5 @@
-import { KbdGroup } from './chunk-57QEOCDZ.js';
-import { cn } from './chunk-O46O6LFQ.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';

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-JYOZUQNU.js → chunk-KQNA22D3.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-T6L32XXH.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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

@@ -1,5 +1,5 @@
-import { useFormField } from './chunk-VUOAPWTF.js';
-import { cn } from './chunk-O46O6LFQ.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;
@@ -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 })
         ]

package/{chunk-HK6WINL6.js → chunk-LAOE6Y57.js}

@@ -1,7 +1,7 @@
 import { bannerMesh } from './chunk-YYFAZQ25.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.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';

package/{chunk-ZBZ3ZQRB.js → chunk-LI5VYDLN.js}

@@ -1,8 +1,8 @@
 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 { 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';
 

package/{chunk-M2HEVFQ3.js → chunk-LKSFTNPF.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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-5KTBSMQU.js → chunk-LWRB4DED.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

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

@@ -1,9 +1,9 @@
-import { Chip } from './chunk-Z7S2KQZS.js';
-import { useFieldChrome, FieldChrome, SelectChevron } from './chunk-UCCNXGLG.js';
-import { MenuItemContent, menuItemClass, menuSurfaceClass } from './chunk-BR2B4OIT.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.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';

package/{chunk-674SRBZK.js → chunk-MOGWOUCN.js}

@@ -1,6 +1,6 @@
-import { useFieldChrome, FieldChrome } from './chunk-UCCNXGLG.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.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';