@uisatin/ui 0.0.0-stage → 0.1.1

package/chunk-UBNHSZSE.js

@@ -0,0 +1,88 @@
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FormFieldContext = React.createContext(null);
+function useFormField() {
+  return React.useContext(FormFieldContext);
+}
+function FormField({
+  label,
+  description,
+  error,
+  layout = "vertical",
+  disabled = false,
+  required = false,
+  htmlFor,
+  className,
+  children,
+  ...props
+}) {
+  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, describedBy: messageId, invalid, disabled, required }),
+    [id, 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("flex w-full items-start", layout === "vertical" ? "flex-col gap-2" : "gap-6", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: cn(
+              "flex items-start gap-0.5 text-sm leading-[18px] font-medium text-text-default",
+              layout === "horizontal" && "w-40 shrink-0",
+              disabled && "opacity-50"
+            ),
+            children: [
+              label,
+              required && // The required mark from Figma (the `sparkle 2` glyph in _label), 6px, in the label colour.
+              /* @__PURE__ */ jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "currentColor", "aria-hidden": true, className: "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" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-1.5", children: [
+          children,
+          invalid ? /* @__PURE__ */ jsxs("p", { id: messageId, className: "flex items-start gap-1.5 text-sm text-action-destructive-bg", 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: "mt-[2.75px] 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: error })
+          ] }) : description && /* @__PURE__ */ jsx("p", { id: messageId, className: cn("text-sm text-text-muted", disabled && "opacity-50"), children: description })
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { FormField, useFormField };
+//# sourceMappingURL=chunk-UBNHSZSE.js.map
+//# sourceMappingURL=chunk-UBNHSZSE.js.map

package/chunk-UBNHSZSE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form-field.tsx"],"names":[],"mappings":"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","file":"chunk-UBNHSZSE.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * Form field, 1:1 with the uiKit `FormField` set (3649:17775): a label, a control slot, then a\n * description or, when `error` is set, an error message in its place. Vertical puts the label\n * 8px above the control; horizontal puts it in a 160px column, 24px to the left. Description\n * and error sit 6px under the control. Disabled dims the label and description to 50% and\n * disables the control.\n *\n * The control is wired through context: Input and Textarea pick up the field's id (so the\n * label points at them), `aria-describedby` (description or error), `aria-invalid` and\n * `disabled`. Any other control can read the same values with `useFormField()`.\n */\nexport interface FormFieldContextValue {\n  id: string\n  describedBy?: string\n  invalid: boolean\n  disabled: boolean\n  required: boolean\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null)\n\n/** The id, describedby, invalid, disabled and required of the surrounding FormField, if any. */\nexport function useFormField() {\n  return React.useContext(FormFieldContext)\n}\n\nexport interface FormFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  label: React.ReactNode\n  description?: React.ReactNode\n  /** An error message. It replaces the description and marks the control invalid. */\n  error?: React.ReactNode\n  layout?: 'vertical' | 'horizontal'\n  disabled?: boolean\n  /** Shows the required mark after the label and sets `required` on the control. */\n  required?: boolean\n  /** The id given to the control. Generated when left out. */\n  htmlFor?: string\n  children: React.ReactNode\n}\n\nexport function FormField({\n  label,\n  description,\n  error,\n  layout = 'vertical',\n  disabled = false,\n  required = false,\n  htmlFor,\n  className,\n  children,\n  ...props\n}: FormFieldProps) {\n  const autoId = React.useId()\n  const id = htmlFor ?? autoId\n  const invalid = Boolean(error)\n  const messageId = invalid ? `${id}-error` : description ? `${id}-description` : undefined\n\n  const context = React.useMemo<FormFieldContextValue>(\n    () => ({ id, describedBy: messageId, invalid, disabled, required }),\n    [id, messageId, invalid, disabled, required],\n  )\n\n  return (\n    <FormFieldContext.Provider value={context}>\n      <div\n        data-slot=\"form-field\"\n        data-layout={layout}\n        data-invalid={invalid || undefined}\n        data-disabled={disabled || undefined}\n        className={cn('flex w-full items-start', layout === 'vertical' ? 'flex-col gap-2' : 'gap-6', className)}\n        {...props}\n      >\n        <label\n          htmlFor={id}\n          className={cn(\n            'flex items-start gap-0.5 text-sm leading-[18px] font-medium text-text-default',\n            layout === 'horizontal' && 'w-40 shrink-0',\n            disabled && 'opacity-50',\n          )}\n        >\n          {label}\n          {required && (\n            // The required mark from Figma (the `sparkle 2` glyph in _label), 6px, in the label colour.\n            <svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"currentColor\" aria-hidden className=\"shrink-0\">\n              <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\" />\n            </svg>\n          )}\n        </label>\n        <div className=\"flex w-full min-w-0 flex-1 flex-col gap-1.5\">\n          {children}\n          {invalid ? (\n            <p id={messageId} className=\"flex items-start gap-1.5 text-sm text-action-destructive-bg\">\n              {/* Figma's 14px warning circle at 1.09px. */}\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 14 14\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.09375\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden\n                className=\"mt-[2.75px] shrink-0\"\n              >\n                <path d=\"M7 4.67613V7.25806\" />\n                <path d=\"M7 9.32422L7.0059 9.31766\" />\n                <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\" />\n              </svg>\n              <span>{error}</span>\n            </p>\n          ) : (\n            description && (\n              <p id={messageId} className={cn('text-sm text-text-muted', disabled && 'opacity-50')}>\n                {description}\n              </p>\n            )\n          )}\n        </div>\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n"]}

package/chunk-UC3ZJWOD.js

@@ -0,0 +1,73 @@
+import { cn } from './chunk-H63FYCMY.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(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2 border font-medium whitespace-nowrap select-none text-text-muted",
+    "transition-[background-color,border-color,color,box-shadow,border-radius] duration-(--duration-fast) ease-(--ease-out)",
+    "focus-visible:outline-none disabled:pointer-events-none disabled:text-text-subtle",
+    "satin-hover:text-text-default satin-focus:text-text-default data-[state=on]:text-text-default",
+    // Figma icons are 1.25px at 16; on Iconoir's 24 grid that is 1.875.
+    "[&_svg]:pointer-events-none [&_svg]:size-icon-size [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: [
+          "rounded-lg border-border-default bg-bg-popover",
+          "satin-hover:border-border-strong satin-hover:bg-bg-muted",
+          "satin-focus:border-action-primary-bg satin-focus:bg-bg-popover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "data-[state=on]:border-border-strong data-[state=on]:bg-action-secondary-bg-pressed",
+          "data-[state=on]:satin-hover:border-border-strong data-[state=on]:satin-hover:bg-action-secondary-bg-pressed",
+          "data-[state=on]:satin-focus:border-action-primary-bg data-[state=on]:satin-focus:bg-action-secondary-bg-pressed",
+          "disabled:border-border-default disabled:bg-bg-muted",
+          "disabled:data-[state=on]:border-border-default disabled:data-[state=on]:bg-action-secondary-bg-pressed"
+        ],
+        ghost: [
+          "rounded-md border-transparent bg-transparent",
+          "satin-hover:rounded-lg satin-hover:bg-bg-muted",
+          // Figma's ghost focus is the primary border alone (its ring is 0px); pressed + focus has the ring.
+          "satin-focus:rounded-lg satin-focus:border-action-primary-bg satin-focus:[box-shadow:none]",
+          "data-[state=on]:rounded-lg data-[state=on]:bg-action-secondary-bg-pressed",
+          "data-[state=on]:satin-hover:bg-action-secondary-bg-pressed",
+          "data-[state=on]:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "disabled:rounded-md disabled:data-[state=on]:rounded-md"
+        ]
+      },
+      size: {
+        md: "h-control-height-lg px-2.5 text-base",
+        sm: "h-control-height px-2.5 text-sm leading-[18px]"
+      },
+      iconOnly: {
+        true: "px-0",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { iconOnly: true, size: "md", className: "w-control-height-lg" },
+      { iconOnly: true, size: "sm", className: "w-control-height" }
+    ],
+    defaultVariants: { variant: "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 };
+//# sourceMappingURL=chunk-UC3ZJWOD.js.map
+//# sourceMappingURL=chunk-UC3ZJWOD.js.map

package/chunk-UC3ZJWOD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toggle.tsx"],"names":["TogglePrimitive"],"mappings":";;;;;;AAqBA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB;AAAA,IACE,yHAAA;AAAA,IACA,wHAAA;AAAA,IACA,mFAAA;AAAA,IACA,+FAAA;AAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,gDAAA;AAAA,UACA,0DAAA;AAAA,UACA,4HAAA;AAAA,UACA,qFAAA;AAAA,UACA,6GAAA;AAAA,UACA,iHAAA;AAAA,UACA,qDAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,8CAAA;AAAA,UACA,gDAAA;AAAA;AAAA,UAEA,2FAAA;AAAA,UACA,2EAAA;AAAA,UACA,4DAAA;AAAA,UACA,6EAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,sCAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,MAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,WAAW,qBAAA,EAAsB;AAAA,MAC/D,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,WAAW,kBAAA;AAAmB,KAC9D;AAAA,IACA,iBAAiB,EAAE,OAAA,EAAS,WAAW,IAAA,EAAM,IAAA,EAAM,UAAU,KAAA;AAAM;AAEvE;AAWO,SAAS,MAAA,CAAO,EAAE,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,UAAU,IAAA,EAAM,QAAA,EAAU,GAAG,KAAA,EAAM,EAAgB;AACpG,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,QAAA,EAAU,CAAA,EAAG,SAAS,CAAA;AAAA,MACnE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,CAAC,QAAA,IAAY;AAAA;AAAA;AAAA,GAChB;AAEJ","file":"chunk-UC3ZJWOD.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Toggle as TogglePrimitive } from 'radix-ui'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../lib/utils'\n\n/**\n * Toggle, 1:1 with the uiKit `Toggle` set (852:21771): a button that stays pressed. Two\n * variants, outline (bg/popover, border/default, radius-lg) and ghost (no fill, radius-md),\n * two sizes, md 32 (14/21) and sm 28 (13/18), 10px side padding, a 16px icon 8px from the\n * label, and a square icon-only form.\n *\n * At rest the label and icon are text/muted. Hover: bg/muted (outline adds border/strong).\n * Focus: an action/primary border, plus the 2px focus ring on outline. Pressed:\n * action/secondary/bg-pressed (outline with border/strong), text/default; pressed + focus\n * adds the ring on both. Disabled: text/subtle, outline on bg/muted. Ghost rounds to radius-lg\n * whenever it is hovered, focused or pressed, as in Figma.\n *\n * States use satin-hover / satin-focus (or data-force), pressed is Radix's data-state=\"on\".\n */\nconst toggleVariants = cva(\n  [\n    'inline-flex shrink-0 items-center justify-center gap-2 border font-medium whitespace-nowrap select-none text-text-muted',\n    'transition-[background-color,border-color,color,box-shadow,border-radius] duration-(--duration-fast) ease-(--ease-out)',\n    'focus-visible:outline-none disabled:pointer-events-none disabled:text-text-subtle',\n    'satin-hover:text-text-default satin-focus:text-text-default data-[state=on]:text-text-default',\n    // Figma icons are 1.25px at 16; on Iconoir's 24 grid that is 1.875.\n    '[&_svg]:pointer-events-none [&_svg]:size-icon-size [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'rounded-lg border-border-default bg-bg-popover',\n          'satin-hover:border-border-strong satin-hover:bg-bg-muted',\n          'satin-focus:border-action-primary-bg satin-focus:bg-bg-popover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'data-[state=on]:border-border-strong data-[state=on]:bg-action-secondary-bg-pressed',\n          'data-[state=on]:satin-hover:border-border-strong data-[state=on]:satin-hover:bg-action-secondary-bg-pressed',\n          'data-[state=on]:satin-focus:border-action-primary-bg data-[state=on]:satin-focus:bg-action-secondary-bg-pressed',\n          'disabled:border-border-default disabled:bg-bg-muted',\n          'disabled:data-[state=on]:border-border-default disabled:data-[state=on]:bg-action-secondary-bg-pressed',\n        ],\n        ghost: [\n          'rounded-md border-transparent bg-transparent',\n          'satin-hover:rounded-lg satin-hover:bg-bg-muted',\n          // Figma's ghost focus is the primary border alone (its ring is 0px); pressed + focus has the ring.\n          'satin-focus:rounded-lg satin-focus:border-action-primary-bg satin-focus:[box-shadow:none]',\n          'data-[state=on]:rounded-lg data-[state=on]:bg-action-secondary-bg-pressed',\n          'data-[state=on]:satin-hover:bg-action-secondary-bg-pressed',\n          'data-[state=on]:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n          'disabled:rounded-md disabled:data-[state=on]:rounded-md',\n        ],\n      },\n      size: {\n        md: 'h-control-height-lg px-2.5 text-base',\n        sm: 'h-control-height px-2.5 text-sm leading-[18px]',\n      },\n      iconOnly: {\n        true: 'px-0',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'md', className: 'w-control-height-lg' },\n      { iconOnly: true, size: 'sm', className: 'w-control-height' },\n    ],\n    defaultVariants: { variant: 'outline', size: 'md', iconOnly: false },\n  },\n)\n\nexport interface ToggleProps\n  extends React.ComponentProps<typeof TogglePrimitive.Root>,\n    VariantProps<typeof toggleVariants> {\n  /** A 16px icon before the label, or the only content when `iconOnly` (then pass an aria-label). */\n  icon?: React.ReactNode\n  /** Show a state without interacting, for state sheets. */\n  'data-force'?: 'hover' | 'focus'\n}\n\nexport function Toggle({ className, variant, size, iconOnly, icon, children, ...props }: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, iconOnly }), className)}\n      {...props}\n    >\n      {icon}\n      {!iconOnly && children}\n    </TogglePrimitive.Root>\n  )\n}\n\nexport { toggleVariants }\n"]}

package/chunk-UGRSWP6U.js

@@ -0,0 +1,69 @@
+import { Kbd } from './chunk-BKZBWPUH.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Search } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SearchBar = React.forwardRef(function SearchBar2({ shortcut = true, hotkey = shortcut, wrapperClassName, className, placeholder = "Search...", onKeyDown, ...props }, forwarded) {
+  const inner = React.useRef(null);
+  React.useImperativeHandle(forwarded, () => inner.current);
+  React.useEffect(() => {
+    if (!hotkey) return;
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        inner.current?.focus();
+        inner.current?.select();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [hotkey]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "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)]",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 text-text-muted [stroke-width:1.875]" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inner,
+            type: "search",
+            placeholder,
+            onKeyDown: (e) => {
+              if (e.key === "Escape" && e.currentTarget.value) {
+                e.preventDefault();
+                const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+                set?.call(e.currentTarget, "");
+                e.currentTarget.dispatchEvent(new Event("input", { bubbles: true }));
+              }
+              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",
+              className
+            ),
+            ...props
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "flex shrink-0 items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx(Kbd, { children: "\u2318" }),
+          /* @__PURE__ */ jsx(Kbd, { children: "K" })
+        ] })
+      ]
+    }
+  );
+});
+
+export { SearchBar };
+//# sourceMappingURL=chunk-UGRSWP6U.js.map
+//# sourceMappingURL=chunk-UGRSWP6U.js.map

package/chunk-UGRSWP6U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/search-bar.tsx"],"names":["SearchBar"],"mappings":";;;;;;AA0BO,IAAM,YAAkB,KAAA,CAAA,UAAA,CAA6C,SAASA,UAAAA,CACnF,EAAE,WAAW,IAAA,EAAM,MAAA,GAAS,QAAA,EAAU,gBAAA,EAAkB,WAAW,WAAA,GAAc,WAAA,EAAa,WAAW,GAAG,KAAA,IAC5G,SAAA,EACA;AACA,EAAA,MAAM,KAAA,GAAc,aAAyB,IAAI,CAAA;AACjD,EAAM,KAAA,CAAA,mBAAA,CAAoB,SAAA,EAAW,MAAM,KAAA,CAAM,OAA2B,CAAA;AAE5E,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACb,IAAA,MAAM,KAAA,GAAQ,CAAC,CAAA,KAAqB;AAClC,MAAA,IAAA,CAAK,CAAA,CAAE,WAAW,CAAA,CAAE,OAAA,KAAY,EAAE,GAAA,CAAI,WAAA,OAAkB,GAAA,EAAK;AAC3D,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,KAAA,CAAM,SAAS,KAAA,EAAM;AACrB,QAAA,KAAA,CAAM,SAAS,MAAA,EAAO;AAAA,MACxB;AAAA,IACF,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,KAAK,CAAA;AAC1C,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,KAAK,CAAA;AAAA,EAC5D,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,wHAAA;AAAA,QACA,oIAAA;AAAA,QACA,4BAAA;AAAA,QACA,yHAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,sDAAA,EAAuD,CAAA;AAAA,wBACrF,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,KAAA;AAAA,YACL,IAAA,EAAK,QAAA;AAAA,YACL,WAAA;AAAA,YACA,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,cAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,QAAA,IAAY,CAAA,CAAE,cAAc,KAAA,EAAO;AAC/C,gBAAA,CAAA,CAAE,cAAA,EAAe;AACjB,gBAAA,MAAM,MAAM,MAAA,CAAO,wBAAA,CAAyB,gBAAA,CAAiB,SAAA,EAAW,OAAO,CAAA,EAAG,GAAA;AAClF,gBAAA,GAAA,EAAK,IAAA,CAAK,CAAA,CAAE,aAAA,EAAe,EAAE,CAAA;AAC7B,gBAAA,CAAA,CAAE,aAAA,CAAc,cAAc,IAAI,KAAA,CAAM,SAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAC,CAAA;AAAA,cACrE;AACA,cAAA,SAAA,GAAY,CAAC,CAAA;AAAA,YACf,CAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACT,uHAAA;AAAA,cACA,mDAAA;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA,SACN;AAAA,QACC,4BACC,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,WAAU,oCAAA,EAC1B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAI,QAAA,EAAA,QAAA,EAAC,CAAA;AAAA,0BACN,GAAA,CAAC,OAAI,QAAA,EAAA,GAAA,EAAC;AAAA,SAAA,EACR;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC","file":"chunk-UGRSWP6U.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Search } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { Kbd } from './kbd'\n\n/**\n * SearchBar, 1:1 with the uiKit `searchBar` (3233:18871): a 32px field for the sidebar that\n * fills its container. A 16px search icon in text/muted, 13px text (placeholder text/subtle),\n * 8px padding and gaps, radius-lg, border/default on bg/card with the xs shadow; hover takes\n * border/strong, focus border/focus with the 2px focus ring. The ⌘K keys (Kbd sm) can be hidden\n * with `shortcut={false}`.\n *\n * With `shortcut`, ⌘K or Ctrl+K anywhere on the page focuses it; Escape clears it.\n */\nexport interface SearchBarProps extends Omit<React.ComponentProps<'input'>, 'size'> {\n  /** Show the ⌘K keycaps and listen for the shortcut. */\n  shortcut?: boolean\n  /** Listen for ⌘K / Ctrl+K. Defaults to `shortcut`; turn it off when something else owns the\n   *  shortcut (a Command menu this bar opens) but the keycaps should still show. */\n  hotkey?: boolean\n  /** Classes for the outer field; `className` styles the input. */\n  wrapperClassName?: string\n}\n\nexport const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>(function SearchBar(\n  { shortcut = true, hotkey = shortcut, wrapperClassName, className, placeholder = 'Search...', onKeyDown, ...props },\n  forwarded,\n) {\n  const inner = React.useRef<HTMLInputElement>(null)\n  React.useImperativeHandle(forwarded, () => inner.current as HTMLInputElement)\n\n  React.useEffect(() => {\n    if (!hotkey) return\n    const onKey = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {\n        e.preventDefault()\n        inner.current?.focus()\n        inner.current?.select()\n      }\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [hotkey])\n\n  return (\n    <label\n      data-slot=\"search-bar\"\n      className={cn(\n        'flex h-control-height-lg w-full cursor-text items-center gap-2 rounded-lg border border-border-default bg-bg-card px-2',\n        '[box-shadow:0_1px_1px_0_var(--effect-shadow-xs)] transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n        'hover:border-border-strong',\n        'has-[input:focus-visible]:border-border-focus has-[input:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n        wrapperClassName,\n      )}\n    >\n      <Search aria-hidden className=\"size-4 shrink-0 text-text-muted [stroke-width:1.875]\" />\n      <input\n        ref={inner}\n        type=\"search\"\n        placeholder={placeholder}\n        onKeyDown={(e) => {\n          if (e.key === 'Escape' && e.currentTarget.value) {\n            e.preventDefault()\n            const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n            set?.call(e.currentTarget, '')\n            e.currentTarget.dispatchEvent(new Event('input', { bubbles: true }))\n          }\n          onKeyDown?.(e)\n        }}\n        className={cn(\n          'min-w-0 flex-1 bg-transparent text-sm text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          className,\n        )}\n        {...props}\n      />\n      {shortcut && (\n        <span aria-hidden className=\"flex shrink-0 items-center gap-0.5\">\n          <Kbd>⌘</Kbd>\n          <Kbd>K</Kbd>\n        </span>\n      )}\n    </label>\n  )\n})\n"]}

package/chunk-VAGIAREV.js

@@ -0,0 +1,214 @@
+import { Button } from './chunk-HNQUX43Z.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { DropdownMenu } from 'radix-ui';
+import { NavArrowDown, Check, Plus } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AgentPicker({
+  agents,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  showDescription = true,
+  variant = "secondary",
+  size = "md",
+  onCreate,
+  createLabel = "New agent",
+  placeholder = "Choose an agent",
+  open,
+  defaultOpen,
+  onOpenChange,
+  disablePortal = false,
+  className
+}) {
+  const [inner, setInner] = React.useState(defaultValue ?? agents[0]?.id);
+  const value = valueProp ?? inner;
+  const current = agents.find((a) => a.id === value);
+  const select = (id) => {
+    setInner(id);
+    onValueChange?.(id);
+  };
+  const content = /* @__PURE__ */ jsx(
+    AgentMenu,
+    {
+      agents,
+      value,
+      onValueChange: select,
+      showDescription,
+      onCreate,
+      createLabel
+    }
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, defaultOpen, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant,
+        size,
+        shape: "rounded",
+        className: cn("data-[state=open]:bg-action-secondary-bg-hover", className),
+        children: [
+          current && /* @__PURE__ */ jsx(AgentAvatar, { agent: current, size: 16 }),
+          /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+            current && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Agent: " }),
+            current ? current.name : placeholder
+          ] }),
+          /* @__PURE__ */ jsx(NavArrowDown, { "aria-hidden": true, "data-chevron": true })
+        ]
+      }
+    ) }),
+    disablePortal ? content : /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: content })
+  ] });
+}
+function AgentMenu({
+  agents,
+  value,
+  onValueChange,
+  showDescription,
+  onCreate,
+  createLabel
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.Content,
+    {
+      align: "start",
+      sideOffset: 8,
+      className: cn(
+        "z-50 flex w-[255px] max-w-[520px] flex-col gap-1 rounded-xl border border-border-subtle bg-bg-popover p-1 outline-none",
+        "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+        "data-[state=open]:[animation:satin-enter_var(--duration-fast)_var(--ease-out)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value, onValueChange, className: "flex flex-col", children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMenuItem, { agent, showDescription }, agent.id)) }),
+        onCreate && /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            onSelect: onCreate,
+            className: cn(
+              "flex h-control-height-xs items-center gap-1 self-start rounded-md px-2 text-sm font-medium text-text-default outline-none select-none",
+              "transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+              "[&_svg]:size-icon-size-sm [&_svg]:text-text-muted [&_svg]:[stroke-width:1.875]",
+              "data-highlighted:bg-bg-hover"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+              createLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AgentMenuItem({ agent, showDescription = true, className, ...props }) {
+  const stacked = showDescription && !!agent.description;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.RadioItem,
+    {
+      value: agent.id,
+      className: cn(agentRowClass, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(AgentAvatar, { agent, size: stacked ? 20 : 16 }),
+        /* @__PURE__ */ jsx(AgentRowText, { agent, stacked }),
+        /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size text-status-green-fg [stroke-width:1.875]" }) })
+      ]
+    }
+  );
+}
+var agentRowClass = cn(
+  "flex min-h-8 w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left outline-none select-none",
+  "transition-[background-color] duration-(--duration-fast) ease-(--ease-out)",
+  "data-highlighted:bg-bg-selected data-[force=hover]:bg-bg-selected data-[state=checked]:bg-bg-selected"
+);
+function AgentRowText({ agent, stacked }) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm leading-[13px] font-medium text-text-default", children: agent.name }),
+    stacked && /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-text-muted", children: agent.description })
+  ] });
+}
+function AgentPickerRow({
+  agent,
+  state = "default",
+  showDescription = true,
+  className
+}) {
+  const stacked = showDescription && !!agent.description;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-force": state === "hover" ? "hover" : void 0,
+      "data-state": state === "selected" ? "checked" : void 0,
+      className: cn(agentRowClass, className),
+      children: [
+        /* @__PURE__ */ jsx(AgentAvatar, { agent, size: stacked ? 20 : 16 }),
+        /* @__PURE__ */ jsx(AgentRowText, { agent, stacked }),
+        state === "selected" && /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size shrink-0 text-status-green-fg [stroke-width:1.875]" })
+      ]
+    }
+  );
+}
+function AgentAvatar({ agent, size = 16 }) {
+  if (agent.avatar === "flappy") return /* @__PURE__ */ jsx(FlappyAvatar, { tone: agent.tone ?? "brand", size });
+  const initials = agent.initials ?? toInitials(agent.name);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-tone": agent.tone ?? "brand",
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full bg-tone-bg font-semibold tracking-normal text-tone-fg",
+        size === 16 ? "size-4 text-[7px] leading-2" : "size-5 text-[9px] leading-[10px]"
+      ),
+      children: initials
+    }
+  );
+}
+var FLAPPY_GRID = [
+  "......000000.....",
+  "....001111020....",
+  "...01111102220...",
+  ".00001111022020..",
+  "022220111022020..",
+  "022222011102220..",
+  "0122210111100000.",
+  ".0111011110333330",
+  "..00044440300000.",
+  "....044444033330.",
+  ".....00444400000.",
+  ".......0000......"
+];
+var FLAPPY_FILL = [
+  "#000",
+  "oklch(from var(--tone-fg) 0.8 calc(c * 1.33) h)",
+  "#fff",
+  "#ff5722",
+  "oklch(from var(--tone-fg) 0.68 calc(c * 1.33) h)"
+];
+function FlappyAvatar({ tone, size }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      "data-tone": tone,
+      width: size,
+      height: size,
+      viewBox: "0 -2.5 17 17",
+      shapeRendering: "crispEdges",
+      className: "shrink-0",
+      children: FLAPPY_GRID.flatMap(
+        (row, y) => [...row].map((c, x) => c === "." ? null : /* @__PURE__ */ jsx("rect", { x, y, width: 1, height: 1, fill: FLAPPY_FILL[+c] }, `${x}-${y}`))
+      )
+    }
+  );
+}
+function toInitials(name) {
+  const words = name.trim().split(/\s+/);
+  const letters = words.length > 1 ? words[0][0] + words[1][0] : name.slice(0, 2);
+  return letters.toUpperCase();
+}
+
+export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow };
+//# sourceMappingURL=chunk-VAGIAREV.js.map
+//# sourceMappingURL=chunk-VAGIAREV.js.map

package/chunk-VAGIAREV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/agent-picker.tsx"],"names":[],"mappings":"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","file":"chunk-VAGIAREV.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { DropdownMenu } from 'radix-ui'\nimport { Check, NavArrowDown, Plus } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\nimport type { BadgeTone } from './badge'\n\n/**\n * AgentPicker, from the uiKit Agent picker docs view (3890:47473): a rounded Button with the\n * current agent's avatar, name and a chevron, opening a menu of agents. Menu rows are 1:1\n * with `DropdownMenu/Item` (653:19165): 8px side padding, radius-lg, medium 13/13 label and a\n * 13px text/muted description 4px under it (`layout=stacked`, 20px avatar), or the label alone\n * (`layout=inline`, 16px avatar) when `showDescription` is off. Hover and the selected row\n * fill bg/selected; the selected row also shows a check in status/green, so selection never\n * relies on colour alone. The menu is bg/popover, a border/subtle hairline, radius-xl, 4px\n * padding, 255 wide, with the shadcn sm shadow.\n *\n * Built on Radix DropdownMenu (radio group semantics, arrow keys, typeahead, Escape).\n * The avatar is a small local one on the Badge hue pairs, so this file has no dependency\n * on a separate Avatar component.\n */\n\nexport type Agent = {\n  id: string\n  name: string\n  /** One line on what the agent does. */\n  description?: string\n  /** Two letters for the avatar; taken from the name when left out. */\n  initials?: string\n  /** Avatar hue, same pairs as Badge. */\n  tone?: BadgeTone\n  /** Initials on the tone, or the flappy bird painted in it. */\n  avatar?: 'initials' | 'flappy'\n}\n\nexport interface AgentPickerProps {\n  agents: Agent[]\n  /** The selected agent's id. */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (id: string) => void\n  /** Show the one-line description under each name. Turn it off once agents are familiar. */\n  showDescription?: boolean\n  /** Secondary under the composer, Tertiary inside dense toolbars. */\n  variant?: 'secondary' | 'tertiary'\n  /** md is the 28px trigger, xs the 24px one. */\n  size?: 'md' | 'xs'\n  /** Adds a \"New agent\" action under the list. */\n  onCreate?: () => void\n  /** Label for the create action. */\n  createLabel?: string\n  /** Shown on the trigger when nothing is selected. */\n  placeholder?: string\n  /** Controlled open state, e.g. to show the menu open on a docs stage. */\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Render the menu in place instead of in a portal. */\n  disablePortal?: boolean\n  className?: string\n}\n\nexport function AgentPicker({\n  agents,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  showDescription = true,\n  variant = 'secondary',\n  size = 'md',\n  onCreate,\n  createLabel = 'New agent',\n  placeholder = 'Choose an agent',\n  open,\n  defaultOpen,\n  onOpenChange,\n  disablePortal = false,\n  className,\n}: AgentPickerProps) {\n  const [inner, setInner] = React.useState(defaultValue ?? agents[0]?.id)\n  const value = valueProp ?? inner\n  const current = agents.find((a) => a.id === value)\n\n  const select = (id: string) => {\n    setInner(id)\n    onValueChange?.(id)\n  }\n\n  const content = (\n    <AgentMenu\n      agents={agents}\n      value={value}\n      onValueChange={select}\n      showDescription={showDescription}\n      onCreate={onCreate}\n      createLabel={createLabel}\n    />\n  )\n\n  return (\n    <DropdownMenu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <Button\n          variant={variant}\n          size={size}\n          shape=\"rounded\"\n          className={cn('data-[state=open]:bg-action-secondary-bg-hover', className)}\n        >\n          {current && <AgentAvatar agent={current} size={16} />}\n          <span className=\"truncate\">\n            {current && <span className=\"sr-only\">Agent: </span>}\n            {current ? current.name : placeholder}\n          </span>\n          <NavArrowDown aria-hidden data-chevron />\n        </Button>\n      </DropdownMenu.Trigger>\n      {disablePortal ? content : <DropdownMenu.Portal>{content}</DropdownMenu.Portal>}\n    </DropdownMenu.Root>\n  )\n}\n\nfunction AgentMenu({\n  agents,\n  value,\n  onValueChange,\n  showDescription,\n  onCreate,\n  createLabel,\n}: {\n  agents: Agent[]\n  value?: string\n  onValueChange: (id: string) => void\n  showDescription: boolean\n  onCreate?: () => void\n  createLabel: string\n}) {\n  return (\n    <DropdownMenu.Content\n      align=\"start\"\n      sideOffset={8}\n      className={cn(\n        'z-50 flex w-[255px] max-w-[520px] flex-col gap-1 rounded-xl border border-border-subtle bg-bg-popover p-1 outline-none',\n        '[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]',\n        'data-[state=open]:[animation:satin-enter_var(--duration-fast)_var(--ease-out)]',\n      )}\n    >\n      <DropdownMenu.RadioGroup value={value} onValueChange={onValueChange} className=\"flex flex-col\">\n        {agents.map((agent) => (\n          <AgentMenuItem key={agent.id} agent={agent} showDescription={showDescription} />\n        ))}\n      </DropdownMenu.RadioGroup>\n      {onCreate && (\n        <DropdownMenu.Item\n          onSelect={onCreate}\n          className={cn(\n            'flex h-control-height-xs items-center gap-1 self-start rounded-md px-2 text-sm font-medium text-text-default outline-none select-none',\n            'transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n            '[&_svg]:size-icon-size-sm [&_svg]:text-text-muted [&_svg]:[stroke-width:1.875]',\n            'data-highlighted:bg-bg-hover',\n          )}\n        >\n          <Plus aria-hidden />\n          {createLabel}\n        </DropdownMenu.Item>\n      )}\n    </DropdownMenu.Content>\n  )\n}\n\nexport interface AgentMenuItemProps\n  extends Omit<React.ComponentProps<typeof DropdownMenu.RadioItem>, 'value' | 'children'> {\n  agent: Agent\n  showDescription?: boolean\n  'data-force'?: 'hover'\n}\n\n/** One row of the menu, `DropdownMenu/Item` (653:19165). Must sit inside the picker's radio group. */\nexport function AgentMenuItem({ agent, showDescription = true, className, ...props }: AgentMenuItemProps) {\n  const stacked = showDescription && !!agent.description\n  return (\n    <DropdownMenu.RadioItem\n      value={agent.id}\n      className={cn(agentRowClass, className)}\n      {...props}\n    >\n      <AgentAvatar agent={agent} size={stacked ? 20 : 16} />\n      <AgentRowText agent={agent} stacked={stacked} />\n      <DropdownMenu.ItemIndicator className=\"flex shrink-0\">\n        <Check aria-hidden className=\"size-icon-size text-status-green-fg [stroke-width:1.875]\" />\n      </DropdownMenu.ItemIndicator>\n    </DropdownMenu.RadioItem>\n  )\n}\n\nconst agentRowClass = cn(\n  'flex min-h-8 w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left outline-none select-none',\n  'transition-[background-color] duration-(--duration-fast) ease-(--ease-out)',\n  'data-highlighted:bg-bg-selected data-[force=hover]:bg-bg-selected data-[state=checked]:bg-bg-selected',\n)\n\nfunction AgentRowText({ agent, stacked }: { agent: Agent; stacked: boolean }) {\n  return (\n    <span className=\"flex min-w-0 flex-1 flex-col justify-center gap-1\">\n      <span className=\"text-sm leading-[13px] font-medium text-text-default\">{agent.name}</span>\n      {stacked && <span className=\"text-sm font-normal text-text-muted\">{agent.description}</span>}\n    </span>\n  )\n}\n\n/**\n * A static menu row for state sheets and docs (no menu around it): the same look as a menu\n * item, with `state` forced to default, hover or selected.\n */\nexport function AgentPickerRow({\n  agent,\n  state = 'default',\n  showDescription = true,\n  className,\n}: {\n  agent: Agent\n  state?: 'default' | 'hover' | 'selected'\n  showDescription?: boolean\n  className?: string\n}) {\n  const stacked = showDescription && !!agent.description\n  return (\n    <div\n      data-force={state === 'hover' ? 'hover' : undefined}\n      data-state={state === 'selected' ? 'checked' : undefined}\n      className={cn(agentRowClass, className)}\n    >\n      <AgentAvatar agent={agent} size={stacked ? 20 : 16} />\n      <AgentRowText agent={agent} stacked={stacked} />\n      {state === 'selected' && (\n        <Check aria-hidden className=\"size-icon-size shrink-0 text-status-green-fg [stroke-width:1.875]\" />\n      )}\n    </div>\n  )\n}\n\n/**\n * Initials on a Badge hue pair, round. 16px uses semibold 7/8, 20px semibold 9/10, as on\n * the uiKit Avatar (992:20199). These sizes have no type token, so they stay raw.\n * `avatar=\"flappy\"` draws the flappy bird instead, in the agent's tone.\n */\nexport function AgentAvatar({ agent, size = 16 }: { agent: Agent; size?: 16 | 20 }) {\n  if (agent.avatar === 'flappy') return <FlappyAvatar tone={agent.tone ?? 'brand'} size={size} />\n  const initials = agent.initials ?? toInitials(agent.name)\n  return (\n    <span\n      aria-hidden\n      data-tone={agent.tone ?? 'brand'}\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center rounded-full bg-tone-bg font-semibold tracking-normal text-tone-fg',\n        size === 16 ? 'size-4 text-[7px] leading-2' : 'size-5 text-[9px] leading-[10px]',\n      )}\n    >\n      {initials}\n    </span>\n  )\n}\n\n/**\n * The flappy bird (uiKit flappyAgent, 1215:69019) as a 17 × 12 pixel grid: 0 outline, 1 body,\n * 2 eye and wing, 3 beak, 4 belly. Body and belly take the tone's hue at a fixed, bright\n * lightness (0.8 and 0.68 in OKLCH, chroma up a third), so each agent gets its own bird on the\n * Badge hues and it stays as vivid as the original yellow one in both themes.\n */\nconst FLAPPY_GRID = [\n  '......000000.....',\n  '....001111020....',\n  '...01111102220...',\n  '.00001111022020..',\n  '022220111022020..',\n  '022222011102220..',\n  '0122210111100000.',\n  '.0111011110333330',\n  '..00044440300000.',\n  '....044444033330.',\n  '.....00444400000.',\n  '.......0000......',\n]\nconst FLAPPY_FILL = [\n  '#000',\n  'oklch(from var(--tone-fg) 0.8 calc(c * 1.33) h)',\n  '#fff',\n  '#ff5722',\n  'oklch(from var(--tone-fg) 0.68 calc(c * 1.33) h)',\n]\n\nfunction FlappyAvatar({ tone, size }: { tone: BadgeTone; size: 16 | 20 }) {\n  return (\n    <svg\n      aria-hidden\n      data-tone={tone}\n      width={size}\n      height={size}\n      viewBox=\"0 -2.5 17 17\"\n      shapeRendering=\"crispEdges\"\n      className=\"shrink-0\"\n    >\n      {FLAPPY_GRID.flatMap((row, y) =>\n        [...row].map((c, x) => (c === '.' ? null : <rect key={`${x}-${y}`} x={x} y={y} width={1} height={1} fill={FLAPPY_FILL[+c]} />)),\n      )}\n    </svg>\n  )\n}\n\nfunction toInitials(name: string) {\n  const words = name.trim().split(/\\s+/)\n  const letters = words.length > 1 ? words[0][0] + words[1][0] : name.slice(0, 2)\n  return letters.toUpperCase()\n}\n"]}

package/chunk-WTMZT3IT.js

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