@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/alert-dialog-D1UYVW__.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { B as Button } from './Button-C6eUqcPI.js';
+import { n as DialogContext, g as DialogHeader, f as DialogFooter, a as DialogBody, j as DialogTitle, e as DialogDescription, b as DialogCancel, i as DialogPortal, h as DialogOverlay, o as dialogContentSizeClasses, p as dialogPopupClassName, l as dialogActionSizeClasses, m as dialogActionLayoutClasses } from './dialog-cKzR2TXI.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+const alertDialogContext = { intent: "default", pending: false };
+function AlertDialog(props) {
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: alertDialogContext, children: /* @__PURE__ */ jsx(AlertDialog$1.Root, { ...props }) });
+}
+function AlertDialogContent({ className, size = "sm", ...props }) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Popup,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        className: cn(dialogPopupClassName, dialogContentSizeClasses[size], className),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogAction({ children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Close,
+    {
+      render: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "md",
+          className: cn(dialogActionLayoutClasses, dialogActionSizeClasses.md),
+          children
+        }
+      ),
+      ...props
+    }
+  );
+}
+AlertDialog.Trigger = AlertDialog$1.Trigger;
+AlertDialog.Content = AlertDialogContent;
+AlertDialog.Header = DialogHeader;
+AlertDialog.Footer = DialogFooter;
+AlertDialog.Body = DialogBody;
+AlertDialog.Title = DialogTitle;
+AlertDialog.Description = DialogDescription;
+AlertDialog.Action = AlertDialogAction;
+AlertDialog.Cancel = DialogCancel;
+
+export { AlertDialog as A };
+//# sourceMappingURL=alert-dialog-D1UYVW__.js.map

package/dist/alert-dialog-D1UYVW__.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-D1UYVW__.js","sources":["../src/ds/components/AlertDialog/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { Button } from '@/ds/components/Button';\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport {\n  DialogContext,\n  dialogActionLayoutClasses,\n  dialogActionSizeClasses,\n} from '@/ds/components/Dialog/dialog-context';\nimport type { DialogContextValue } from '@/ds/components/Dialog/dialog-context';\nimport { dialogContentSizeClasses, dialogPopupClassName } from '@/ds/components/Dialog/dialog-shell';\nimport type { DialogSize } from '@/ds/components/Dialog/dialog-shell';\nimport { cn } from '@/lib/utils';\n\nconst alertDialogContext: DialogContextValue = { intent: 'default', pending: false };\n\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return (\n    <DialogContext.Provider value={alertDialogContext}>\n      <AlertDialogPrimitive.Root {...props} />\n    </DialogContext.Provider>\n  );\n}\n\ntype AlertDialogContentProps = Omit<AlertDialogPrimitive.Popup.Props, 'className'> & {\n  className?: string;\n  size?: DialogSize;\n};\n\nfunction AlertDialogContent({ className, size = 'sm', ...props }: AlertDialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(dialogPopupClassName, dialogContentSizeClasses[size], className)}\n        {...props}\n      />\n    </DialogPortal>\n  );\n}\n\nfunction AlertDialogAction({ children, ...props }: AlertDialogPrimitive.Close.Props) {\n  return (\n    <AlertDialogPrimitive.Close\n      render={\n        <Button\n          variant=\"primary\"\n          size=\"md\"\n          className={cn(dialogActionLayoutClasses, dialogActionSizeClasses.md)}\n          children={children}\n        />\n      }\n      {...props}\n    />\n  );\n}\n\nAlertDialog.Trigger = AlertDialogPrimitive.Trigger;\nAlertDialog.Content = AlertDialogContent;\nAlertDialog.Header = DialogHeader;\nAlertDialog.Footer = DialogFooter;\nAlertDialog.Body = DialogBody;\nAlertDialog.Title = DialogTitle;\nAlertDialog.Description = DialogDescription;\nAlertDialog.Action = AlertDialogAction;\nAlertDialog.Cancel = DialogCancel;\n\nexport { AlertDialog };\n"],"names":["AlertDialogPrimitive"],"mappings":";;;;;;AAuBA,MAAM,kBAAA,GAAyC,EAAE,MAAA,EAAQ,SAAA,EAAW,SAAS,KAAA,EAAM;AAEnF,SAAS,YAAY,KAAA,EAAwC;AAC3D,EAAA,uBACE,GAAA,CAAC,aAAA,CAAc,QAAA,EAAd,EAAuB,KAAA,EAAO,kBAAA,EAC7B,QAAA,kBAAA,GAAA,CAACA,aAAA,CAAqB,IAAA,EAArB,EAA2B,GAAG,KAAA,EAAO,CAAA,EACxC,CAAA;AAEJ;AAOA,SAAS,mBAAmB,EAAE,SAAA,EAAW,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AACzF,EAAA,4BACG,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,oBACf,GAAA;AAAA,MAACA,aAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,WAAA,EAAW,IAAA;AAAA,QACX,WAAW,EAAA,CAAG,oBAAA,EAAsB,wBAAA,CAAyB,IAAI,GAAG,SAAS,CAAA;AAAA,QAC5E,GAAG;AAAA;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,GAAG,OAAM,EAAqC;AACnF,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,KAAA;AAAA,IAArB;AAAA,MACC,MAAA,kBACE,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,SAAA;AAAA,UACR,IAAA,EAAK,IAAA;AAAA,UACL,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,uBAAA,CAAwB,EAAE,CAAA;AAAA,UACnE;AAAA;AAAA,OACF;AAAA,MAED,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,WAAA,CAAY,UAAUA,aAAA,CAAqB,OAAA;AAC3C,WAAA,CAAY,OAAA,GAAU,kBAAA;AACtB,WAAA,CAAY,MAAA,GAAS,YAAA;AACrB,WAAA,CAAY,MAAA,GAAS,YAAA;AACrB,WAAA,CAAY,IAAA,GAAO,UAAA;AACnB,WAAA,CAAY,KAAA,GAAQ,WAAA;AACpB,WAAA,CAAY,WAAA,GAAc,iBAAA;AAC1B,WAAA,CAAY,MAAA,GAAS,iBAAA;AACrB,WAAA,CAAY,MAAA,GAAS,YAAA;;;;"}

package/dist/ansi-Cq_bKF5J.js

@@ -0,0 +1,11 @@
+const ANSI_RE = /[\u001b\u009b][[\]()#;?]*(?:(?:[a-zA-Z\d]*(?:;[-a-zA-Z\d/#&.:=?%@~_]*)*)?\u0007|(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~])/g;
+const ESCAPED_ANSI_RE = /(?<!\\)((?:\\\\)*)\\u001[bB](?:\[[0-9;?<=>]*[a-zA-Z]|\][\s\S]*?(?:\\u0007|\\u001[bB]\\\\))/g;
+function stripAnsi(text) {
+  return text.replace(ANSI_RE, "");
+}
+function stripSerializedAnsi(text) {
+  return stripAnsi(text).replace(ESCAPED_ANSI_RE, "$1");
+}
+
+export { stripAnsi as a, stripSerializedAnsi as s };
+//# sourceMappingURL=ansi-Cq_bKF5J.js.map

package/dist/ansi-Cq_bKF5J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ansi-Cq_bKF5J.js","sources":["../src/ds/components/ai/tool-call/ansi.ts"],"sourcesContent":["// Sandbox commands run in a PTY, so CLIs emit color escapes even under NO_COLOR.\n// eslint-disable-next-line no-control-regex\nconst ANSI_RE =\n  /[\\u001b\\u009b][[\\]()#;?]*(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d/#&.:=?%@~_]*)*)?\\u0007|(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~])/g;\n\n// The same sequences once JSON.stringify escaped the bytes; an even backslash run before the `u` is source text spelling the escape, kept.\nconst ESCAPED_ANSI_RE = /(?<!\\\\)((?:\\\\\\\\)*)\\\\u001[bB](?:\\[[0-9;?<=>]*[a-zA-Z]|\\][\\s\\S]*?(?:\\\\u0007|\\\\u001[bB]\\\\\\\\))/g;\n\nexport function stripAnsi(text: string): string {\n  return text.replace(ANSI_RE, '');\n}\n\nexport function stripSerializedAnsi(text: string): string {\n  return stripAnsi(text).replace(ESCAPED_ANSI_RE, '$1');\n}\n"],"names":[],"mappings":"AAEA,MAAM,OAAA,GACJ,oIAAA;AAGF,MAAM,eAAA,GAAkB,6FAAA;AAEjB,SAAS,UAAU,IAAA,EAAsB;AAC9C,EAAA,OAAO,IAAA,CAAK,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA;AACjC;AAEO,SAAS,oBAAoB,IAAA,EAAsB;AACxD,EAAA,OAAO,SAAA,CAAU,IAAI,CAAA,CAAE,OAAA,CAAQ,iBAAiB,IAAI,CAAA;AACtD;;;;"}

package/dist/ansi-fAtbeDQN.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const ANSI_RE = /[\u001b\u009b][[\]()#;?]*(?:(?:[a-zA-Z\d]*(?:;[-a-zA-Z\d/#&.:=?%@~_]*)*)?\u0007|(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~])/g;
+const ESCAPED_ANSI_RE = /(?<!\\)((?:\\\\)*)\\u001[bB](?:\[[0-9;?<=>]*[a-zA-Z]|\][\s\S]*?(?:\\u0007|\\u001[bB]\\\\))/g;
+function stripAnsi(text) {
+  return text.replace(ANSI_RE, "");
+}
+function stripSerializedAnsi(text) {
+  return stripAnsi(text).replace(ESCAPED_ANSI_RE, "$1");
+}
+
+exports.stripAnsi = stripAnsi;
+exports.stripSerializedAnsi = stripSerializedAnsi;
+//# sourceMappingURL=ansi-fAtbeDQN.cjs.map

package/dist/ansi-fAtbeDQN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ansi-fAtbeDQN.cjs","sources":["../src/ds/components/ai/tool-call/ansi.ts"],"sourcesContent":["// Sandbox commands run in a PTY, so CLIs emit color escapes even under NO_COLOR.\n// eslint-disable-next-line no-control-regex\nconst ANSI_RE =\n  /[\\u001b\\u009b][[\\]()#;?]*(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d/#&.:=?%@~_]*)*)?\\u0007|(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~])/g;\n\n// The same sequences once JSON.stringify escaped the bytes; an even backslash run before the `u` is source text spelling the escape, kept.\nconst ESCAPED_ANSI_RE = /(?<!\\\\)((?:\\\\\\\\)*)\\\\u001[bB](?:\\[[0-9;?<=>]*[a-zA-Z]|\\][\\s\\S]*?(?:\\\\u0007|\\\\u001[bB]\\\\\\\\))/g;\n\nexport function stripAnsi(text: string): string {\n  return text.replace(ANSI_RE, '');\n}\n\nexport function stripSerializedAnsi(text: string): string {\n  return stripAnsi(text).replace(ESCAPED_ANSI_RE, '$1');\n}\n"],"names":[],"mappings":";;AAEA,MAAM,OAAA,GACJ,oIAAA;AAGF,MAAM,eAAA,GAAkB,6FAAA;AAEjB,SAAS,UAAU,IAAA,EAAsB;AAC9C,EAAA,OAAO,IAAA,CAAK,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA;AACjC;AAEO,SAAS,oBAAoB,IAAA,EAAsB;AACxD,EAAA,OAAO,SAAA,CAAU,IAAI,CAAA,CAAE,OAAA,CAAQ,iBAAiB,IAAI,CAAA;AACtD;;;;;"}

package/dist/ask-user-Crg1O-o6.js

@@ -0,0 +1,206 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { MessageCircleQuestion, Check } from 'lucide-react';
+import { useId, useState } from 'react';
+import { B as Badge } from './Badge-Q_pCeeGW.js';
+import { B as Button } from './Button-C6eUqcPI.js';
+import { C as Checkbox } from './checkbox-CQedzgsi.js';
+import { I as Input } from './input-CHghVv3k.js';
+import { R as RadioGroup, a as RadioGroupItem } from './radio-group-CFZXUXZ5.js';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { Icon } from './icons/Icon.es.js';
+import { raisedSurfaceStyle } from './primitives/raised-surface.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+const AskUserContainer = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "ask-user",
+    className: cn(raisedSurfaceStyle, "w-full overflow-hidden rounded-xl", className),
+    ...props
+  }
+);
+const AskUserLabel = ({ children = "Question", className, ...props }) => /* @__PURE__ */ jsxs("div", { "data-slot": "ask-user-label", className: cn("flex min-h-10 items-center gap-2 px-4 pt-3", className), ...props, children: [
+  /* @__PURE__ */ jsx(Icon, { size: "xs", className: "text-muted-foreground", children: /* @__PURE__ */ jsx(MessageCircleQuestion, {}) }),
+  /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", children })
+] });
+const AskUserBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "ask-user-body", className: cn("px-4 pt-1 pb-4", className), ...props });
+const AskUserQuestion = ({ className, ...props }) => /* @__PURE__ */ jsx(Txt, { as: "p", variant: "subheading", tone: "ink", ...props, className: cn("mb-3", className) });
+const AskUserOptionRow = ({
+  control,
+  label,
+  description,
+  disabled = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "label",
+  {
+    "aria-disabled": disabled || void 0,
+    className: cn(
+      "state-layer flex items-start gap-2.5 rounded-lg bg-fill px-3 py-2",
+      disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+      className
+    ),
+    ...props,
+    children: [
+      control,
+      /* @__PURE__ */ jsxs("span", { className: "grid gap-0.5", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", tone: "ink", children: label }),
+        description ? /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", children: description }) : null
+      ] })
+    ]
+  }
+);
+const AskUserSubmit = ({ children = "Submit answer", ...props }) => /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(Check, {}), type: "button", size: "sm", variant: "primary", ...props, children });
+const AskUserPending = ({ children = "Submitting…", ...props }) => /* @__PURE__ */ jsx(Txt, { as: "span", role: "status", variant: "caption", tone: "muted", ...props, children });
+const AskUserOutput = ({ result, className, ...props }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-slot": "ask-user-output",
+    role: result.isError ? "alert" : "status",
+    className: cn("grid gap-2 rounded-lg bg-fill p-3", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Badge, { size: "xs", variant: result.isError ? "destructive" : "success", className: "justify-self-start", children: result.isError ? "Error" : "Answered" }),
+      /* @__PURE__ */ jsx(Txt, { as: "p", variant: "body", tone: "ink", className: cn(result.isError && "text-destructive-indicator"), children: result.content })
+    ]
+  }
+);
+const validOptions = (options) => options?.filter(
+  (option) => Boolean(option && typeof option.label === "string" && option.label)
+) ?? [];
+const AskUserInput = ({
+  payload,
+  options,
+  result,
+  isAnswered = false,
+  isSubmitting = false,
+  onSubmit,
+  footer,
+  ...props
+}) => {
+  const fieldId = useId();
+  const [text, setText] = useState("");
+  const [selected, setSelected] = useState([]);
+  if (result || isAnswered) {
+    return /* @__PURE__ */ jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsx(AskUserLabel, {}),
+      /* @__PURE__ */ jsxs(AskUserBody, { children: [
+        /* @__PURE__ */ jsx(AskUserQuestion, { children: payload.question }),
+        result ? /* @__PURE__ */ jsx(AskUserOutput, { result }) : /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Answered" })
+      ] })
+    ] });
+  }
+  const submitText = () => {
+    const answer = text.trim();
+    if (answer && !isSubmitting) onSubmit(answer);
+  };
+  const handleTextKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submitText();
+    }
+  };
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsx(AskUserLabel, {}),
+      /* @__PURE__ */ jsxs(AskUserBody, { children: [
+        /* @__PURE__ */ jsx(AskUserQuestion, { as: "label", htmlFor: fieldId, className: "mb-2 block", children: payload.question }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: fieldId,
+              value: text,
+              onChange: (event) => setText(event.target.value),
+              onKeyDown: handleTextKeyDown,
+              placeholder: "Type your answer...",
+              disabled: isSubmitting,
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AskUserSubmit,
+            {
+              className: "shrink-0 whitespace-nowrap",
+              disabled: isSubmitting || !text.trim(),
+              onClick: submitText
+            }
+          )
+        ] }),
+        isSubmitting ? /* @__PURE__ */ jsx(AskUserPending, { className: "mt-2 block" }) : null,
+        footer
+      ] })
+    ] });
+  }
+  const isMulti = payload.selectionMode === "multi_select";
+  return /* @__PURE__ */ jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+    /* @__PURE__ */ jsx(AskUserLabel, {}),
+    /* @__PURE__ */ jsxs(AskUserBody, { children: [
+      /* @__PURE__ */ jsx(AskUserQuestion, { id: fieldId, children: payload.question }),
+      isMulti ? /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": fieldId, className: "grid gap-2", children: [
+        options.map((option) => /* @__PURE__ */ jsx(
+          AskUserOptionRow,
+          {
+            label: option.label,
+            description: option.description,
+            disabled: isSubmitting,
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                className: "mt-0.5",
+                disabled: isSubmitting,
+                checked: selected.includes(option.label),
+                onCheckedChange: () => setSelected(
+                  (current) => current.includes(option.label) ? current.filter((selectedLabel) => selectedLabel !== option.label) : [...current, option.label]
+                )
+              }
+            )
+          },
+          option.label
+        )),
+        /* @__PURE__ */ jsx(
+          AskUserSubmit,
+          {
+            className: "mt-1 justify-self-start",
+            disabled: isSubmitting || selected.length === 0,
+            onClick: () => onSubmit(selected),
+            children: "Submit answer"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          "aria-labelledby": fieldId,
+          disabled: isSubmitting,
+          value: selected[0] ?? null,
+          onValueChange: (value) => {
+            const label = String(value);
+            setSelected([label]);
+            onSubmit(label);
+          },
+          children: options.map((option) => /* @__PURE__ */ jsx(
+            AskUserOptionRow,
+            {
+              label: option.label,
+              description: option.description,
+              disabled: isSubmitting,
+              control: /* @__PURE__ */ jsx(RadioGroupItem, { className: "mt-0.5", value: option.label })
+            },
+            option.label
+          ))
+        }
+      ),
+      isSubmitting ? /* @__PURE__ */ jsx(AskUserPending, { className: "mt-3 block" }) : null,
+      footer
+    ] })
+  ] });
+};
+const AskUser = ({ payload, ...props }) => {
+  const options = validOptions(payload.options);
+  const payloadKey = JSON.stringify([payload.question, options.map((option) => option.label), payload.selectionMode]);
+  return /* @__PURE__ */ jsx(AskUserInput, { payload, options, ...props }, payloadKey);
+};
+
+export { AskUser as A, AskUserBody as a, AskUserContainer as b, AskUserLabel as c, AskUserOptionRow as d, AskUserOutput as e, AskUserPending as f, AskUserQuestion as g, AskUserSubmit as h };
+//# sourceMappingURL=ask-user-Crg1O-o6.js.map

package/dist/ask-user-Crg1O-o6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-Crg1O-o6.js","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check, MessageCircleQuestion } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ComponentProps, KeyboardEvent, ReactNode } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { Checkbox } from '@/ds/components/Checkbox';\nimport { Input } from '@/ds/components/Input';\nimport { RadioGroup, RadioGroupItem } from '@/ds/components/RadioGroup';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type AskUserSelectionMode = 'single_select' | 'multi_select';\nexport type AskUserAnswer = string | string[];\n\nexport interface AskUserOption {\n  label: string;\n  description?: string;\n}\n\nexport interface AskUserPayload {\n  question: string;\n  options?: AskUserOption[];\n  selectionMode?: AskUserSelectionMode;\n}\n\nexport interface AskUserResult {\n  content: string;\n  isError?: boolean;\n}\n\nexport const AskUserContainer = ({ className, ...props }: ComponentProps<'div'>) => (\n  <div\n    data-slot=\"ask-user\"\n    className={cn(raisedSurfaceStyle, 'w-full overflow-hidden rounded-xl', className)}\n    {...props}\n  />\n);\n\nexport const AskUserLabel = ({ children = 'Question', className, ...props }: ComponentProps<'div'>) => (\n  <div data-slot=\"ask-user-label\" className={cn('flex min-h-10 items-center gap-2 px-4 pt-3', className)} {...props}>\n    <Icon size=\"xs\" className=\"text-muted-foreground\">\n      <MessageCircleQuestion />\n    </Icon>\n    <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n      {children}\n    </Txt>\n  </div>\n);\n\nexport const AskUserBody = ({ className, ...props }: ComponentProps<'div'>) => (\n  <div data-slot=\"ask-user-body\" className={cn('px-4 pt-1 pb-4', className)} {...props} />\n);\n\nexport const AskUserQuestion = ({ className, ...props }: ComponentProps<typeof Txt>) => (\n  <Txt as=\"p\" variant=\"subheading\" tone=\"ink\" {...props} className={cn('mb-3', className)} />\n);\n\nexport interface AskUserOptionRowProps extends Omit<ComponentProps<'label'>, 'children'> {\n  control: ReactNode;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n}\n\nexport const AskUserOptionRow = ({\n  control,\n  label,\n  description,\n  disabled = false,\n  className,\n  ...props\n}: AskUserOptionRowProps) => (\n  <label\n    // state-layer's wash only stops at :disabled/aria-disabled, and a <label> is neither\n    aria-disabled={disabled || undefined}\n    className={cn(\n      'state-layer flex items-start gap-2.5 rounded-lg bg-fill px-3 py-2',\n      disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n      className,\n    )}\n    {...props}\n  >\n    {control}\n    <span className=\"grid gap-0.5\">\n      <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n        {label}\n      </Txt>\n      {description ? (\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {description}\n        </Txt>\n      ) : null}\n    </span>\n  </label>\n);\n\nexport type AskUserSubmitProps = Omit<ComponentProps<typeof Button>, 'children'> & { children?: ReactNode };\n\nexport const AskUserSubmit = ({ children = 'Submit answer', ...props }: AskUserSubmitProps) => (\n  <Button icon={<Check />} type=\"button\" size=\"sm\" variant=\"primary\" {...props}>\n    {children}\n  </Button>\n);\n\nexport const AskUserPending = ({ children = 'Submitting…', ...props }: ComponentProps<typeof Txt>) => (\n  <Txt as=\"span\" role=\"status\" variant=\"caption\" tone=\"muted\" {...props}>\n    {children}\n  </Txt>\n);\n\nexport interface AskUserOutputProps extends ComponentProps<'div'> {\n  result: AskUserResult;\n}\n\nexport const AskUserOutput = ({ result, className, ...props }: AskUserOutputProps) => (\n  <div\n    data-slot=\"ask-user-output\"\n    role={result.isError ? 'alert' : 'status'}\n    className={cn('grid gap-2 rounded-lg bg-fill p-3', className)}\n    {...props}\n  >\n    <Badge size=\"xs\" variant={result.isError ? 'destructive' : 'success'} className=\"justify-self-start\">\n      {result.isError ? 'Error' : 'Answered'}\n    </Badge>\n    <Txt as=\"p\" variant=\"body\" tone=\"ink\" className={cn(result.isError && 'text-destructive-indicator')}>\n      {result.content}\n    </Txt>\n  </div>\n);\n\nexport interface AskUserProps extends Omit<ComponentProps<typeof AskUserContainer>, 'children' | 'onSubmit'> {\n  payload: AskUserPayload;\n  result?: AskUserResult;\n  isAnswered?: boolean;\n  isSubmitting?: boolean;\n  onSubmit: (answer: AskUserAnswer) => void;\n  footer?: ReactNode;\n}\n\nconst validOptions = (options: AskUserPayload['options']): AskUserOption[] =>\n  options?.filter((option): option is AskUserOption =>\n    Boolean(option && typeof option.label === 'string' && option.label),\n  ) ?? [];\n\ninterface AskUserInputProps extends AskUserProps {\n  options: AskUserOption[];\n}\n\nconst AskUserInput = ({\n  payload,\n  options,\n  result,\n  isAnswered = false,\n  isSubmitting = false,\n  onSubmit,\n  footer,\n  ...props\n}: AskUserInputProps) => {\n  const fieldId = useId();\n  const [text, setText] = useState('');\n  const [selected, setSelected] = useState<string[]>([]);\n\n  if (result || isAnswered) {\n    return (\n      <AskUserContainer data-testid=\"ask-user\" {...props}>\n        <AskUserLabel />\n        <AskUserBody>\n          <AskUserQuestion>{payload.question}</AskUserQuestion>\n          {result ? <AskUserOutput result={result} /> : <Badge variant=\"success\">Answered</Badge>}\n        </AskUserBody>\n      </AskUserContainer>\n    );\n  }\n\n  const submitText = () => {\n    const answer = text.trim();\n    if (answer && !isSubmitting) onSubmit(answer);\n  };\n\n  const handleTextKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      submitText();\n    }\n  };\n\n  if (options.length === 0) {\n    return (\n      <AskUserContainer data-testid=\"ask-user\" {...props}>\n        <AskUserLabel />\n        <AskUserBody>\n          <AskUserQuestion as=\"label\" htmlFor={fieldId} className=\"mb-2 block\">\n            {payload.question}\n          </AskUserQuestion>\n          <div className=\"flex items-center gap-2\">\n            <Input\n              id={fieldId}\n              value={text}\n              onChange={event => setText(event.target.value)}\n              onKeyDown={handleTextKeyDown}\n              placeholder=\"Type your answer...\"\n              disabled={isSubmitting}\n              size=\"sm\"\n            />\n            <AskUserSubmit\n              className=\"shrink-0 whitespace-nowrap\"\n              disabled={isSubmitting || !text.trim()}\n              onClick={submitText}\n            />\n          </div>\n          {isSubmitting ? <AskUserPending className=\"mt-2 block\" /> : null}\n          {footer}\n        </AskUserBody>\n      </AskUserContainer>\n    );\n  }\n\n  const isMulti = payload.selectionMode === 'multi_select';\n\n  return (\n    <AskUserContainer data-testid=\"ask-user\" {...props}>\n      <AskUserLabel />\n      <AskUserBody>\n        <AskUserQuestion id={fieldId}>{payload.question}</AskUserQuestion>\n        {isMulti ? (\n          <div role=\"group\" aria-labelledby={fieldId} className=\"grid gap-2\">\n            {options.map(option => (\n              <AskUserOptionRow\n                key={option.label}\n                label={option.label}\n                description={option.description}\n                disabled={isSubmitting}\n                control={\n                  <Checkbox\n                    className=\"mt-0.5\"\n                    disabled={isSubmitting}\n                    checked={selected.includes(option.label)}\n                    onCheckedChange={() =>\n                      setSelected(current =>\n                        current.includes(option.label)\n                          ? current.filter(selectedLabel => selectedLabel !== option.label)\n                          : [...current, option.label],\n                      )\n                    }\n                  />\n                }\n              />\n            ))}\n            <AskUserSubmit\n              className=\"mt-1 justify-self-start\"\n              disabled={isSubmitting || selected.length === 0}\n              onClick={() => onSubmit(selected)}\n            >\n              Submit answer\n            </AskUserSubmit>\n          </div>\n        ) : (\n          <RadioGroup\n            aria-labelledby={fieldId}\n            disabled={isSubmitting}\n            value={selected[0] ?? null}\n            onValueChange={value => {\n              const label = String(value);\n              setSelected([label]);\n              onSubmit(label);\n            }}\n          >\n            {options.map(option => (\n              <AskUserOptionRow\n                key={option.label}\n                label={option.label}\n                description={option.description}\n                disabled={isSubmitting}\n                control={<RadioGroupItem className=\"mt-0.5\" value={option.label} />}\n              />\n            ))}\n          </RadioGroup>\n        )}\n        {isSubmitting ? <AskUserPending className=\"mt-3 block\" /> : null}\n        {footer}\n      </AskUserBody>\n    </AskUserContainer>\n  );\n};\n\nexport const AskUser = ({ payload, ...props }: AskUserProps) => {\n  const options = validOptions(payload.options);\n  const payloadKey = JSON.stringify([payload.question, options.map(option => option.label), payload.selectionMode]);\n\n  return <AskUserInput key={payloadKey} payload={payload} options={options} {...props} />;\n};\n"],"names":[],"mappings":"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"}

package/dist/ask-user-DJXmLJzy.cjs

@@ -0,0 +1,216 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Badge = require('./Badge-H8K5WrXg.cjs');
+const Button = require('./Button-BnmR2HRc.cjs');
+const checkbox = require('./checkbox-CI8JtZKS.cjs');
+const input = require('./input-bd223EJW.cjs');
+const radioGroup = require('./radio-group-BdEPWGzi.cjs');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+const AskUserContainer = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    "data-slot": "ask-user",
+    className: utils_cn.cn(primitives_raisedSurface.raisedSurfaceStyle, "w-full overflow-hidden rounded-xl", className),
+    ...props
+  }
+);
+const AskUserLabel = ({ children = "Question", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "ask-user-label", className: utils_cn.cn("flex min-h-10 items-center gap-2 px-4 pt-3", className), ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", className: "text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleQuestion, {}) }),
+  /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children })
+] });
+const AskUserBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "ask-user-body", className: utils_cn.cn("px-4 pt-1 pb-4", className), ...props });
+const AskUserQuestion = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "subheading", tone: "ink", ...props, className: utils_cn.cn("mb-3", className) });
+const AskUserOptionRow = ({
+  control,
+  label,
+  description,
+  disabled = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "label",
+  {
+    "aria-disabled": disabled || void 0,
+    className: utils_cn.cn(
+      "state-layer flex items-start gap-2.5 rounded-lg bg-fill px-3 py-2",
+      disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+      className
+    ),
+    ...props,
+    children: [
+      control,
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", tone: "ink", children: label }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children: description }) : null
+      ] })
+    ]
+  }
+);
+const AskUserSubmit = ({ children = "Submit answer", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}), type: "button", size: "sm", variant: "primary", ...props, children });
+const AskUserPending = ({ children = "Submitting…", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", role: "status", variant: "caption", tone: "muted", ...props, children });
+const AskUserOutput = ({ result, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    "data-slot": "ask-user-output",
+    role: result.isError ? "alert" : "status",
+    className: utils_cn.cn("grid gap-2 rounded-lg bg-fill p-3", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: result.isError ? "destructive" : "success", className: "justify-self-start", children: result.isError ? "Error" : "Answered" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "body", tone: "ink", className: utils_cn.cn(result.isError && "text-destructive-indicator"), children: result.content })
+    ]
+  }
+);
+const validOptions = (options) => options?.filter(
+  (option) => Boolean(option && typeof option.label === "string" && option.label)
+) ?? [];
+const AskUserInput = ({
+  payload,
+  options,
+  result,
+  isAnswered = false,
+  isSubmitting = false,
+  onSubmit,
+  footer,
+  ...props
+}) => {
+  const fieldId = React.useId();
+  const [text, setText] = React.useState("");
+  const [selected, setSelected] = React.useState([]);
+  if (result || isAnswered) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AskUserLabel, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(AskUserBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestion, { children: payload.question }),
+        result ? /* @__PURE__ */ jsxRuntime.jsx(AskUserOutput, { result }) : /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "success", children: "Answered" })
+      ] })
+    ] });
+  }
+  const submitText = () => {
+    const answer = text.trim();
+    if (answer && !isSubmitting) onSubmit(answer);
+  };
+  const handleTextKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submitText();
+    }
+  };
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AskUserLabel, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(AskUserBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestion, { as: "label", htmlFor: fieldId, className: "mb-2 block", children: payload.question }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              id: fieldId,
+              value: text,
+              onChange: (event) => setText(event.target.value),
+              onKeyDown: handleTextKeyDown,
+              placeholder: "Type your answer...",
+              disabled: isSubmitting,
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AskUserSubmit,
+            {
+              className: "shrink-0 whitespace-nowrap",
+              disabled: isSubmitting || !text.trim(),
+              onClick: submitText
+            }
+          )
+        ] }),
+        isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(AskUserPending, { className: "mt-2 block" }) : null,
+        footer
+      ] })
+    ] });
+  }
+  const isMulti = payload.selectionMode === "multi_select";
+  return /* @__PURE__ */ jsxRuntime.jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AskUserLabel, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(AskUserBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestion, { id: fieldId, children: payload.question }),
+      isMulti ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": fieldId, className: "grid gap-2", children: [
+        options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          AskUserOptionRow,
+          {
+            label: option.label,
+            description: option.description,
+            disabled: isSubmitting,
+            control: /* @__PURE__ */ jsxRuntime.jsx(
+              checkbox.Checkbox,
+              {
+                className: "mt-0.5",
+                disabled: isSubmitting,
+                checked: selected.includes(option.label),
+                onCheckedChange: () => setSelected(
+                  (current) => current.includes(option.label) ? current.filter((selectedLabel) => selectedLabel !== option.label) : [...current, option.label]
+                )
+              }
+            )
+          },
+          option.label
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AskUserSubmit,
+          {
+            className: "mt-1 justify-self-start",
+            disabled: isSubmitting || selected.length === 0,
+            onClick: () => onSubmit(selected),
+            children: "Submit answer"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        radioGroup.RadioGroup,
+        {
+          "aria-labelledby": fieldId,
+          disabled: isSubmitting,
+          value: selected[0] ?? null,
+          onValueChange: (value) => {
+            const label = String(value);
+            setSelected([label]);
+            onSubmit(label);
+          },
+          children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            AskUserOptionRow,
+            {
+              label: option.label,
+              description: option.description,
+              disabled: isSubmitting,
+              control: /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroupItem, { className: "mt-0.5", value: option.label })
+            },
+            option.label
+          ))
+        }
+      ),
+      isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(AskUserPending, { className: "mt-3 block" }) : null,
+      footer
+    ] })
+  ] });
+};
+const AskUser = ({ payload, ...props }) => {
+  const options = validOptions(payload.options);
+  const payloadKey = JSON.stringify([payload.question, options.map((option) => option.label), payload.selectionMode]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AskUserInput, { payload, options, ...props }, payloadKey);
+};
+
+exports.AskUser = AskUser;
+exports.AskUserBody = AskUserBody;
+exports.AskUserContainer = AskUserContainer;
+exports.AskUserLabel = AskUserLabel;
+exports.AskUserOptionRow = AskUserOptionRow;
+exports.AskUserOutput = AskUserOutput;
+exports.AskUserPending = AskUserPending;
+exports.AskUserQuestion = AskUserQuestion;
+exports.AskUserSubmit = AskUserSubmit;
+//# sourceMappingURL=ask-user-DJXmLJzy.cjs.map

package/dist/ask-user-DJXmLJzy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-DJXmLJzy.cjs","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check, MessageCircleQuestion } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ComponentProps, KeyboardEvent, ReactNode } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { Checkbox } from '@/ds/components/Checkbox';\nimport { Input } from '@/ds/components/Input';\nimport { RadioGroup, RadioGroupItem } from '@/ds/components/RadioGroup';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type AskUserSelectionMode = 'single_select' | 'multi_select';\nexport type AskUserAnswer = string | string[];\n\nexport interface AskUserOption {\n  label: string;\n  description?: string;\n}\n\nexport interface AskUserPayload {\n  question: string;\n  options?: AskUserOption[];\n  selectionMode?: AskUserSelectionMode;\n}\n\nexport interface AskUserResult {\n  content: string;\n  isError?: boolean;\n}\n\nexport const AskUserContainer = ({ className, ...props }: ComponentProps<'div'>) => (\n  <div\n    data-slot=\"ask-user\"\n    className={cn(raisedSurfaceStyle, 'w-full overflow-hidden rounded-xl', className)}\n    {...props}\n  />\n);\n\nexport const AskUserLabel = ({ children = 'Question', className, ...props }: ComponentProps<'div'>) => (\n  <div data-slot=\"ask-user-label\" className={cn('flex min-h-10 items-center gap-2 px-4 pt-3', className)} {...props}>\n    <Icon size=\"xs\" className=\"text-muted-foreground\">\n      <MessageCircleQuestion />\n    </Icon>\n    <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n      {children}\n    </Txt>\n  </div>\n);\n\nexport const AskUserBody = ({ className, ...props }: ComponentProps<'div'>) => (\n  <div data-slot=\"ask-user-body\" className={cn('px-4 pt-1 pb-4', className)} {...props} />\n);\n\nexport const AskUserQuestion = ({ className, ...props }: ComponentProps<typeof Txt>) => (\n  <Txt as=\"p\" variant=\"subheading\" tone=\"ink\" {...props} className={cn('mb-3', className)} />\n);\n\nexport interface AskUserOptionRowProps extends Omit<ComponentProps<'label'>, 'children'> {\n  control: ReactNode;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n}\n\nexport const AskUserOptionRow = ({\n  control,\n  label,\n  description,\n  disabled = false,\n  className,\n  ...props\n}: AskUserOptionRowProps) => (\n  <label\n    // state-layer's wash only stops at :disabled/aria-disabled, and a <label> is neither\n    aria-disabled={disabled || undefined}\n    className={cn(\n      'state-layer flex items-start gap-2.5 rounded-lg bg-fill px-3 py-2',\n      disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n      className,\n    )}\n    {...props}\n  >\n    {control}\n    <span className=\"grid gap-0.5\">\n      <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n        {label}\n      </Txt>\n      {description ? (\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {description}\n        </Txt>\n      ) : null}\n    </span>\n  </label>\n);\n\nexport type AskUserSubmitProps = Omit<ComponentProps<typeof Button>, 'children'> & { children?: ReactNode };\n\nexport const AskUserSubmit = ({ children = 'Submit answer', ...props }: AskUserSubmitProps) => (\n  <Button icon={<Check />} type=\"button\" size=\"sm\" variant=\"primary\" {...props}>\n    {children}\n  </Button>\n);\n\nexport const AskUserPending = ({ children = 'Submitting…', ...props }: ComponentProps<typeof Txt>) => (\n  <Txt as=\"span\" role=\"status\" variant=\"caption\" tone=\"muted\" {...props}>\n    {children}\n  </Txt>\n);\n\nexport interface AskUserOutputProps extends ComponentProps<'div'> {\n  result: AskUserResult;\n}\n\nexport const AskUserOutput = ({ result, className, ...props }: AskUserOutputProps) => (\n  <div\n    data-slot=\"ask-user-output\"\n    role={result.isError ? 'alert' : 'status'}\n    className={cn('grid gap-2 rounded-lg bg-fill p-3', className)}\n    {...props}\n  >\n    <Badge size=\"xs\" variant={result.isError ? 'destructive' : 'success'} className=\"justify-self-start\">\n      {result.isError ? 'Error' : 'Answered'}\n    </Badge>\n    <Txt as=\"p\" variant=\"body\" tone=\"ink\" className={cn(result.isError && 'text-destructive-indicator')}>\n      {result.content}\n    </Txt>\n  </div>\n);\n\nexport interface AskUserProps extends Omit<ComponentProps<typeof AskUserContainer>, 'children' | 'onSubmit'> {\n  payload: AskUserPayload;\n  result?: AskUserResult;\n  isAnswered?: boolean;\n  isSubmitting?: boolean;\n  onSubmit: (answer: AskUserAnswer) => void;\n  footer?: ReactNode;\n}\n\nconst validOptions = (options: AskUserPayload['options']): AskUserOption[] =>\n  options?.filter((option): option is AskUserOption =>\n    Boolean(option && typeof option.label === 'string' && option.label),\n  ) ?? [];\n\ninterface AskUserInputProps extends AskUserProps {\n  options: AskUserOption[];\n}\n\nconst AskUserInput = ({\n  payload,\n  options,\n  result,\n  isAnswered = false,\n  isSubmitting = false,\n  onSubmit,\n  footer,\n  ...props\n}: AskUserInputProps) => {\n  const fieldId = useId();\n  const [text, setText] = useState('');\n  const [selected, setSelected] = useState<string[]>([]);\n\n  if (result || isAnswered) {\n    return (\n      <AskUserContainer data-testid=\"ask-user\" {...props}>\n        <AskUserLabel />\n        <AskUserBody>\n          <AskUserQuestion>{payload.question}</AskUserQuestion>\n          {result ? <AskUserOutput result={result} /> : <Badge variant=\"success\">Answered</Badge>}\n        </AskUserBody>\n      </AskUserContainer>\n    );\n  }\n\n  const submitText = () => {\n    const answer = text.trim();\n    if (answer && !isSubmitting) onSubmit(answer);\n  };\n\n  const handleTextKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      submitText();\n    }\n  };\n\n  if (options.length === 0) {\n    return (\n      <AskUserContainer data-testid=\"ask-user\" {...props}>\n        <AskUserLabel />\n        <AskUserBody>\n          <AskUserQuestion as=\"label\" htmlFor={fieldId} className=\"mb-2 block\">\n            {payload.question}\n          </AskUserQuestion>\n          <div className=\"flex items-center gap-2\">\n            <Input\n              id={fieldId}\n              value={text}\n              onChange={event => setText(event.target.value)}\n              onKeyDown={handleTextKeyDown}\n              placeholder=\"Type your answer...\"\n              disabled={isSubmitting}\n              size=\"sm\"\n            />\n            <AskUserSubmit\n              className=\"shrink-0 whitespace-nowrap\"\n              disabled={isSubmitting || !text.trim()}\n              onClick={submitText}\n            />\n          </div>\n          {isSubmitting ? <AskUserPending className=\"mt-2 block\" /> : null}\n          {footer}\n        </AskUserBody>\n      </AskUserContainer>\n    );\n  }\n\n  const isMulti = payload.selectionMode === 'multi_select';\n\n  return (\n    <AskUserContainer data-testid=\"ask-user\" {...props}>\n      <AskUserLabel />\n      <AskUserBody>\n        <AskUserQuestion id={fieldId}>{payload.question}</AskUserQuestion>\n        {isMulti ? (\n          <div role=\"group\" aria-labelledby={fieldId} className=\"grid gap-2\">\n            {options.map(option => (\n              <AskUserOptionRow\n                key={option.label}\n                label={option.label}\n                description={option.description}\n                disabled={isSubmitting}\n                control={\n                  <Checkbox\n                    className=\"mt-0.5\"\n                    disabled={isSubmitting}\n                    checked={selected.includes(option.label)}\n                    onCheckedChange={() =>\n                      setSelected(current =>\n                        current.includes(option.label)\n                          ? current.filter(selectedLabel => selectedLabel !== option.label)\n                          : [...current, option.label],\n                      )\n                    }\n                  />\n                }\n              />\n            ))}\n            <AskUserSubmit\n              className=\"mt-1 justify-self-start\"\n              disabled={isSubmitting || selected.length === 0}\n              onClick={() => onSubmit(selected)}\n            >\n              Submit answer\n            </AskUserSubmit>\n          </div>\n        ) : (\n          <RadioGroup\n            aria-labelledby={fieldId}\n            disabled={isSubmitting}\n            value={selected[0] ?? null}\n            onValueChange={value => {\n              const label = String(value);\n              setSelected([label]);\n              onSubmit(label);\n            }}\n          >\n            {options.map(option => (\n              <AskUserOptionRow\n                key={option.label}\n                label={option.label}\n                description={option.description}\n                disabled={isSubmitting}\n                control={<RadioGroupItem className=\"mt-0.5\" value={option.label} />}\n              />\n            ))}\n          </RadioGroup>\n        )}\n        {isSubmitting ? <AskUserPending className=\"mt-3 block\" /> : null}\n        {footer}\n      </AskUserBody>\n    </AskUserContainer>\n  );\n};\n\nexport const AskUser = ({ payload, ...props }: AskUserProps) => {\n  const options = validOptions(payload.options);\n  const payloadKey = JSON.stringify([payload.question, options.map(option => option.label), payload.selectionMode]);\n\n  return <AskUserInput key={payloadKey} payload={payload} options={options} {...props} />;\n};\n"],"names":["jsx","cn","raisedSurfaceStyle","Icon","MessageCircleQuestion","Txt","jsxs","Button","Check","Badge","useId","useState","Input","Checkbox","RadioGroup","RadioGroupItem"],"mappings":"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"}

package/dist/buttons-group.css

@@ -186,29 +186,19 @@
   }
 
   /* The ring colour above ties a segment's own `focus-visible:` border on specificity and
-     wins on source order, so the group repaints the focus edge itself — at the weight the
-     segment focuses at alone: a raised surface moves its rim to `--surface-rim-focus`,
-     not the `--border-focus` a bare border needs. */
-  [data-slot='buttons-group'] {
-    --segment-focus-edge: var(--border-focus);
-  }
-
-  [data-slot='buttons-group']:has(> .shadow-raised:focus-visible, > .shadow-raised :focus-visible) {
-    --segment-focus-edge: var(--surface-rim-focus);
-  }
-
+     wins on source order, so the group repaints the focus edge itself. */
   [data-slot='buttons-group'] > :is(:focus-visible, :has(:focus-visible)) {
-    border-color: var(--segment-focus-edge);
+    border-color: var(--border-focus);
   }
 
   /* A segment's leading edge is its neighbour's border, so a state that recolours the
      segment's own border (focus) lights three sides only.
      The neighbour that owns the seam takes the state colour for it. */
   [data-slot='buttons-group'][data-orientation='horizontal'] > :has(+ :focus-visible, + * :focus-visible) {
-    border-right-color: var(--segment-focus-edge);
+    border-right-color: var(--border-focus);
   }
 
   [data-slot='buttons-group'][data-orientation='vertical'] > :has(+ :focus-visible, + * :focus-visible) {
-    border-bottom-color: var(--segment-focus-edge);
+    border-bottom-color: var(--border-focus);
   }
 }