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

package/dist/arrival-BWQZUZFQ.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useWatched = require('./use-watched-BixmYWp0.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function ArrivalScope({ children }) {
+  const settled = React.useRef(false);
+  React.useEffect(() => {
+    settled.current = true;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(useWatched.SettledContext, { value: settled, children });
+}
+function Arriving({ children, className }) {
+  const arriving = useWatched.useArriving();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(arriving, className), children: /* @__PURE__ */ jsxRuntime.jsx(ArrivalScope, { children }) });
+}
+
+exports.ArrivalScope = ArrivalScope;
+exports.Arriving = Arriving;
+//# sourceMappingURL=arrival-BWQZUZFQ.cjs.map

package/dist/arrival-BWQZUZFQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrival-BWQZUZFQ.cjs","sources":["../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsx","SettledContext","useArriving","cn"],"mappings":";;;;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAS,EAA4B;AAClE,EAAA,MAAM,OAAA,GAAUA,aAAO,KAAK,CAAA;AAC5B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBAAOC,cAAA,CAACC,yBAAA,EAAA,EAAe,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AACnD;AAGO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,MAAM,WAAWC,sBAAA,EAAY;AAE7B,EAAA,uBACEF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,WAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACpC,QAAA,kBAAAH,cAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAS,CAAA,EAC1B,CAAA;AAEJ;;;;;"}

package/dist/arrival-RmSek4Iq.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { S as SettledContext, u as useArriving } from './use-watched-CG9KoWl3.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function ArrivalScope({ children }) {
+  const settled = useRef(false);
+  useEffect(() => {
+    settled.current = true;
+  }, []);
+  return /* @__PURE__ */ jsx(SettledContext, { value: settled, children });
+}
+function Arriving({ children, className }) {
+  const arriving = useArriving();
+  return /* @__PURE__ */ jsx("div", { className: cn(arriving, className), children: /* @__PURE__ */ jsx(ArrivalScope, { children }) });
+}
+
+export { ArrivalScope as A, Arriving as a };
+//# sourceMappingURL=arrival-RmSek4Iq.js.map

package/dist/arrival-RmSek4Iq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrival-RmSek4Iq.js","sources":["../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAS,EAA4B;AAClE,EAAA,MAAM,OAAA,GAAU,OAAO,KAAK,CAAA;AAC5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBAAO,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AACnD;AAGO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAS,CAAA,EAC1B,CAAA;AAEJ;;;;"}

package/dist/ask-user-CS2e6Re4.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Badge = require('./Badge-BEeYtjmv.cjs');
+const Button = require('./Button-CVewl8nT.cjs');
+const fieldBlock = require('./field-block-Dy1IaWbv.cjs');
+const input = require('./input-CDLMprJS.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+const AskUserContainer = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("rounded-lg border border-border bg-background p-3 text-body", className), ...props });
+const AskUserQuestion = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("legend", { className: utils_cn.cn("mb-3 text-subheading text-foreground", className), ...props });
+const AskUserOptionDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("block text-meta text-muted-foreground", className), ...props });
+const AskUserOptionControl = ({ type, label, description, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "label",
+  {
+    className: utils_cn.cn(
+      "state-layer bg-card shadow-raised flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 text-foreground transition-colors has-[:checked]:[--surface-tint:var(--fill-hover)] has-[:checked]:[--surface-rim:var(--border-strong)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type, className: "mt-0.5 accent-current", ...props }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block", children: label }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(AskUserOptionDescription, { 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…", className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", className: utils_cn.cn("text-meta text-muted-foreground", className), ...props, children });
+const AskUserOutput = ({ result, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    role: result.isError ? "alert" : "status",
+    className: utils_cn.cn("space-y-2 rounded-md bg-card p-3 text-foreground", result.isError && "text-error", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: result.isError ? "red" : "green", children: result.isError ? "Error" : "Answered" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { 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 inputId = 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("p", { className: "text-foreground text-subheading mb-2", children: payload.question }),
+      result ? /* @__PURE__ */ jsxRuntime.jsx(AskUserOutput, { result }) : /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "green", 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(fieldBlock.FieldBlock.Label, { name: inputId, htmlFor: inputId, className: "mb-2", children: payload.question }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            id: inputId,
+            value: text,
+            onChange: (event) => setText(event.target.value),
+            onKeyDown: handleTextKeyDown,
+            placeholder: "Type your answer...",
+            disabled: isSubmitting,
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(AskUserSubmit, { "aria-label": "Submit answer", disabled: isSubmitting || !text.trim(), onClick: submitText, children: "Submit" })
+      ] }),
+      isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(AskUserPending, { className: "mt-2 block" }) : null,
+      footer
+    ] });
+  }
+  const isMulti = payload.selectionMode === "multi_select";
+  return /* @__PURE__ */ jsxRuntime.jsx(AskUserContainer, { "data-testid": "ask-user", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { disabled: isSubmitting, className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AskUserQuestion, { children: payload.question }),
+    options.map((option) => {
+      const checked = selected.includes(option.label);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AskUserOptionControl,
+        {
+          type: isMulti ? "checkbox" : "radio",
+          name: inputId,
+          label: option.label,
+          description: option.description,
+          disabled: isSubmitting,
+          checked,
+          onChange: () => {
+            if (isSubmitting) return;
+            if (!isMulti) {
+              setSelected([option.label]);
+              onSubmit(option.label);
+              return;
+            }
+            setSelected(
+              (current) => current.includes(option.label) ? current.filter((selectedLabel) => selectedLabel !== option.label) : [...current, option.label]
+            );
+          }
+        },
+        option.label
+      );
+    }),
+    isMulti ? /* @__PURE__ */ jsxRuntime.jsx(AskUserSubmit, { disabled: isSubmitting || selected.length === 0, onClick: () => onSubmit(selected), children: "Submit answer" }) : null,
+    isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(AskUserPending, {}) : 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.AskUserContainer = AskUserContainer;
+exports.AskUserOptionControl = AskUserOptionControl;
+exports.AskUserOptionDescription = AskUserOptionDescription;
+exports.AskUserOutput = AskUserOutput;
+exports.AskUserPending = AskUserPending;
+exports.AskUserQuestion = AskUserQuestion;
+exports.AskUserSubmit = AskUserSubmit;
+//# sourceMappingURL=ask-user-CS2e6Re4.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-CS2e6Re4.cjs","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check } 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 { FieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Input } from '@/ds/components/Input';\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 className={cn('rounded-lg border border-border bg-background p-3 text-body', className)} {...props} />\n);\n\nexport const AskUserQuestion = ({ className, ...props }: ComponentProps<'legend'>) => (\n  <legend className={cn('mb-3 text-subheading text-foreground', className)} {...props} />\n);\n\nexport const AskUserOptionDescription = ({ className, ...props }: ComponentProps<'span'>) => (\n  <span className={cn('block text-meta text-muted-foreground', className)} {...props} />\n);\n\ninterface AskUserOptionControlProps extends Omit<ComponentProps<'input'>, 'type'> {\n  type: 'radio' | 'checkbox';\n  label: string;\n  description?: string;\n}\n\nexport const AskUserOptionControl = ({ type, label, description, className, ...props }: AskUserOptionControlProps) => (\n  <label\n    className={cn(\n      'state-layer bg-card shadow-raised flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 text-foreground transition-colors has-[:checked]:[--surface-tint:var(--fill-hover)] has-[:checked]:[--surface-rim:var(--border-strong)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50',\n      className,\n    )}\n  >\n    <input type={type} className=\"mt-0.5 accent-current\" {...props} />\n    <span>\n      <span className=\"block\">{label}</span>\n      {description ? <AskUserOptionDescription>{description}</AskUserOptionDescription> : null}\n    </span>\n  </label>\n);\n\nexport const AskUserSubmit = ({ children = 'Submit answer', ...props }: ComponentProps<typeof Button>) => (\n  <Button icon={<Check />} type=\"button\" size=\"sm\" variant=\"primary\" {...props}>\n    {children}\n  </Button>\n);\n\nexport const AskUserPending = ({ children = 'Submitting…', className, ...props }: ComponentProps<'span'>) => (\n  <span role=\"status\" className={cn('text-meta text-muted-foreground', className)} {...props}>\n    {children}\n  </span>\n);\n\nexport interface AskUserOutputProps extends ComponentProps<'div'> {\n  result: AskUserResult;\n}\n\nexport const AskUserOutput = ({ result, className, ...props }: AskUserOutputProps) => (\n  <div\n    role={result.isError ? 'alert' : 'status'}\n    className={cn('space-y-2 rounded-md bg-card p-3 text-foreground', result.isError && 'text-error', className)}\n    {...props}\n  >\n    <Badge size=\"xs\" variant={result.isError ? 'red' : 'green'}>\n      {result.isError ? 'Error' : 'Answered'}\n    </Badge>\n    <p>{result.content}</p>\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 inputId = 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        <p className=\"text-foreground text-subheading mb-2\">{payload.question}</p>\n        {result ? <AskUserOutput result={result} /> : <Badge variant=\"green\">Answered</Badge>}\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        <FieldBlock.Label name={inputId} htmlFor={inputId} className=\"mb-2\">\n          {payload.question}\n        </FieldBlock.Label>\n        <div className=\"flex items-center gap-2\">\n          <Input\n            id={inputId}\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 aria-label=\"Submit answer\" disabled={isSubmitting || !text.trim()} onClick={submitText}>\n            Submit\n          </AskUserSubmit>\n        </div>\n        {isSubmitting ? <AskUserPending className=\"mt-2 block\" /> : null}\n        {footer}\n      </AskUserContainer>\n    );\n  }\n\n  const isMulti = payload.selectionMode === 'multi_select';\n  return (\n    <AskUserContainer data-testid=\"ask-user\" {...props}>\n      <fieldset disabled={isSubmitting} className=\"space-y-2\">\n        <AskUserQuestion>{payload.question}</AskUserQuestion>\n        {options.map(option => {\n          const checked = selected.includes(option.label);\n          return (\n            <AskUserOptionControl\n              key={option.label}\n              type={isMulti ? 'checkbox' : 'radio'}\n              name={inputId}\n              label={option.label}\n              description={option.description}\n              disabled={isSubmitting}\n              checked={checked}\n              onChange={() => {\n                if (isSubmitting) return;\n                if (!isMulti) {\n                  setSelected([option.label]);\n                  onSubmit(option.label);\n                  return;\n                }\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        {isMulti ? (\n          <AskUserSubmit disabled={isSubmitting || selected.length === 0} onClick={() => onSubmit(selected)}>\n            Submit answer\n          </AskUserSubmit>\n        ) : null}\n        {isSubmitting ? <AskUserPending /> : null}\n        {footer}\n      </fieldset>\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","jsxs","Button","Check","Badge","useId","useState","FieldBlock","Input"],"mappings":"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"}

package/dist/ask-user-gS3Y1bCc.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useId, useState } from 'react';
+import { B as Badge } from './Badge-TD55_qZJ.js';
+import { B as Button } from './Button-cWcBEd-G.js';
+import { F as FieldBlock } from './field-block-DWkbNcsV.js';
+import { I as Input } from './input-B1RysHyq.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+const AskUserContainer = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border border-border bg-background p-3 text-body", className), ...props });
+const AskUserQuestion = ({ className, ...props }) => /* @__PURE__ */ jsx("legend", { className: cn("mb-3 text-subheading text-foreground", className), ...props });
+const AskUserOptionDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("block text-meta text-muted-foreground", className), ...props });
+const AskUserOptionControl = ({ type, label, description, className, ...props }) => /* @__PURE__ */ jsxs(
+  "label",
+  {
+    className: cn(
+      "state-layer bg-card shadow-raised flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 text-foreground transition-colors has-[:checked]:[--surface-tint:var(--fill-hover)] has-[:checked]:[--surface-rim:var(--border-strong)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("input", { type, className: "mt-0.5 accent-current", ...props }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "block", children: label }),
+        description ? /* @__PURE__ */ jsx(AskUserOptionDescription, { 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…", className, ...props }) => /* @__PURE__ */ jsx("span", { role: "status", className: cn("text-meta text-muted-foreground", className), ...props, children });
+const AskUserOutput = ({ result, className, ...props }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    role: result.isError ? "alert" : "status",
+    className: cn("space-y-2 rounded-md bg-card p-3 text-foreground", result.isError && "text-error", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Badge, { size: "xs", variant: result.isError ? "red" : "green", children: result.isError ? "Error" : "Answered" }),
+      /* @__PURE__ */ jsx("p", { 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 inputId = useId();
+  const [text, setText] = useState("");
+  const [selected, setSelected] = useState([]);
+  if (result || isAnswered) {
+    return /* @__PURE__ */ jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-foreground text-subheading mb-2", children: payload.question }),
+      result ? /* @__PURE__ */ jsx(AskUserOutput, { result }) : /* @__PURE__ */ jsx(Badge, { variant: "green", 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(FieldBlock.Label, { name: inputId, htmlFor: inputId, className: "mb-2", children: payload.question }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            value: text,
+            onChange: (event) => setText(event.target.value),
+            onKeyDown: handleTextKeyDown,
+            placeholder: "Type your answer...",
+            disabled: isSubmitting,
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsx(AskUserSubmit, { "aria-label": "Submit answer", disabled: isSubmitting || !text.trim(), onClick: submitText, children: "Submit" })
+      ] }),
+      isSubmitting ? /* @__PURE__ */ jsx(AskUserPending, { className: "mt-2 block" }) : null,
+      footer
+    ] });
+  }
+  const isMulti = payload.selectionMode === "multi_select";
+  return /* @__PURE__ */ jsx(AskUserContainer, { "data-testid": "ask-user", ...props, children: /* @__PURE__ */ jsxs("fieldset", { disabled: isSubmitting, className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(AskUserQuestion, { children: payload.question }),
+    options.map((option) => {
+      const checked = selected.includes(option.label);
+      return /* @__PURE__ */ jsx(
+        AskUserOptionControl,
+        {
+          type: isMulti ? "checkbox" : "radio",
+          name: inputId,
+          label: option.label,
+          description: option.description,
+          disabled: isSubmitting,
+          checked,
+          onChange: () => {
+            if (isSubmitting) return;
+            if (!isMulti) {
+              setSelected([option.label]);
+              onSubmit(option.label);
+              return;
+            }
+            setSelected(
+              (current) => current.includes(option.label) ? current.filter((selectedLabel) => selectedLabel !== option.label) : [...current, option.label]
+            );
+          }
+        },
+        option.label
+      );
+    }),
+    isMulti ? /* @__PURE__ */ jsx(AskUserSubmit, { disabled: isSubmitting || selected.length === 0, onClick: () => onSubmit(selected), children: "Submit answer" }) : null,
+    isSubmitting ? /* @__PURE__ */ jsx(AskUserPending, {}) : 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, AskUserContainer as a, AskUserOptionControl as b, AskUserOptionDescription as c, AskUserOutput as d, AskUserPending as e, AskUserQuestion as f, AskUserSubmit as g };
+//# sourceMappingURL=ask-user-gS3Y1bCc.js.map

package/dist/ask-user-gS3Y1bCc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-gS3Y1bCc.js","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check } 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 { FieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Input } from '@/ds/components/Input';\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 className={cn('rounded-lg border border-border bg-background p-3 text-body', className)} {...props} />\n);\n\nexport const AskUserQuestion = ({ className, ...props }: ComponentProps<'legend'>) => (\n  <legend className={cn('mb-3 text-subheading text-foreground', className)} {...props} />\n);\n\nexport const AskUserOptionDescription = ({ className, ...props }: ComponentProps<'span'>) => (\n  <span className={cn('block text-meta text-muted-foreground', className)} {...props} />\n);\n\ninterface AskUserOptionControlProps extends Omit<ComponentProps<'input'>, 'type'> {\n  type: 'radio' | 'checkbox';\n  label: string;\n  description?: string;\n}\n\nexport const AskUserOptionControl = ({ type, label, description, className, ...props }: AskUserOptionControlProps) => (\n  <label\n    className={cn(\n      'state-layer bg-card shadow-raised flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 text-foreground transition-colors has-[:checked]:[--surface-tint:var(--fill-hover)] has-[:checked]:[--surface-rim:var(--border-strong)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50',\n      className,\n    )}\n  >\n    <input type={type} className=\"mt-0.5 accent-current\" {...props} />\n    <span>\n      <span className=\"block\">{label}</span>\n      {description ? <AskUserOptionDescription>{description}</AskUserOptionDescription> : null}\n    </span>\n  </label>\n);\n\nexport const AskUserSubmit = ({ children = 'Submit answer', ...props }: ComponentProps<typeof Button>) => (\n  <Button icon={<Check />} type=\"button\" size=\"sm\" variant=\"primary\" {...props}>\n    {children}\n  </Button>\n);\n\nexport const AskUserPending = ({ children = 'Submitting…', className, ...props }: ComponentProps<'span'>) => (\n  <span role=\"status\" className={cn('text-meta text-muted-foreground', className)} {...props}>\n    {children}\n  </span>\n);\n\nexport interface AskUserOutputProps extends ComponentProps<'div'> {\n  result: AskUserResult;\n}\n\nexport const AskUserOutput = ({ result, className, ...props }: AskUserOutputProps) => (\n  <div\n    role={result.isError ? 'alert' : 'status'}\n    className={cn('space-y-2 rounded-md bg-card p-3 text-foreground', result.isError && 'text-error', className)}\n    {...props}\n  >\n    <Badge size=\"xs\" variant={result.isError ? 'red' : 'green'}>\n      {result.isError ? 'Error' : 'Answered'}\n    </Badge>\n    <p>{result.content}</p>\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 inputId = 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        <p className=\"text-foreground text-subheading mb-2\">{payload.question}</p>\n        {result ? <AskUserOutput result={result} /> : <Badge variant=\"green\">Answered</Badge>}\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        <FieldBlock.Label name={inputId} htmlFor={inputId} className=\"mb-2\">\n          {payload.question}\n        </FieldBlock.Label>\n        <div className=\"flex items-center gap-2\">\n          <Input\n            id={inputId}\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 aria-label=\"Submit answer\" disabled={isSubmitting || !text.trim()} onClick={submitText}>\n            Submit\n          </AskUserSubmit>\n        </div>\n        {isSubmitting ? <AskUserPending className=\"mt-2 block\" /> : null}\n        {footer}\n      </AskUserContainer>\n    );\n  }\n\n  const isMulti = payload.selectionMode === 'multi_select';\n  return (\n    <AskUserContainer data-testid=\"ask-user\" {...props}>\n      <fieldset disabled={isSubmitting} className=\"space-y-2\">\n        <AskUserQuestion>{payload.question}</AskUserQuestion>\n        {options.map(option => {\n          const checked = selected.includes(option.label);\n          return (\n            <AskUserOptionControl\n              key={option.label}\n              type={isMulti ? 'checkbox' : 'radio'}\n              name={inputId}\n              label={option.label}\n              description={option.description}\n              disabled={isSubmitting}\n              checked={checked}\n              onChange={() => {\n                if (isSubmitting) return;\n                if (!isMulti) {\n                  setSelected([option.label]);\n                  onSubmit(option.label);\n                  return;\n                }\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        {isMulti ? (\n          <AskUserSubmit disabled={isSubmitting || selected.length === 0} onClick={() => onSubmit(selected)}>\n            Submit answer\n          </AskUserSubmit>\n        ) : null}\n        {isSubmitting ? <AskUserPending /> : null}\n        {footer}\n      </fieldset>\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/buttons-group-BiLEV_Ak.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+require('./buttons-group.css');const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-C-fBJhpb.cjs');
+const React = require('react');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ButtonsGroupOrientationContext = React__namespace.createContext("horizontal");
+const ButtonsGroup = React__namespace.forwardRef(
+  ({ children, className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: utils_cn.cn("flex w-fit items-stretch", orientation === "vertical" ? "flex-col" : "flex-row", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React__namespace.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React__namespace.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: utils_cn.cn("self-stretch bg-border", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = index.cva(
+  utils_cn.cn(
+    "inline-flex items-center justify-center border border-border bg-surface-panel text-foreground select-none",
+    "shrink-0 gap-[.75em] rounded-full px-[1em] whitespace-nowrap",
+    "[&>svg]:size-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        sm: primitives_controlSize.controlSizeClasses.sm,
+        md: primitives_controlSize.controlSizeClasses.md,
+        lg: primitives_controlSize.controlSizeClasses.lg
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const ButtonsGroupText = React__namespace.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: utils_cn.cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+exports.ButtonsGroup = ButtonsGroup;
+exports.ButtonsGroupSeparator = ButtonsGroupSeparator;
+exports.ButtonsGroupText = ButtonsGroupText;
+//# sourceMappingURL=buttons-group-BiLEV_Ak.cjs.map

package/dist/buttons-group-BiLEV_Ak.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-BiLEV_Ak.cjs","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst ButtonsGroupOrientationContext = React.createContext<Orientation>('horizontal');\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', ...props }, ref) => {\n    return (\n      <ButtonsGroupOrientationContext.Provider value={orientation}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonsGroupOrientationContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\nexport type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroupSeparator = React.forwardRef<HTMLDivElement, ButtonsGroupSeparatorProps>(\n  ({ className, orientation, ...props }, ref) => {\n    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);\n    // Separator runs perpendicular to the group flow by default.\n    const resolved = orientation ?? (parentOrientation === 'vertical' ? 'horizontal' : 'vertical');\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={resolved}\n        data-slot=\"buttons-group-separator\"\n        className={cn('self-stretch bg-border', resolved === 'vertical' ? 'w-px' : 'h-px', className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupSeparator.displayName = 'ButtonsGroupSeparator';\n\nconst buttonsGroupTextVariants = cva(\n  cn(\n    'inline-flex items-center justify-center border border-border bg-surface-panel text-foreground select-none',\n    'shrink-0 gap-[.75em] rounded-full px-[1em] whitespace-nowrap',\n    '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n  ),\n  {\n    variants: {\n      size: {\n        sm: controlSizeClasses.sm,\n        md: controlSizeClasses.md,\n        lg: controlSizeClasses.lg,\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, size = 'md', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"buttons-group-text\"\n        className={cn(buttonsGroupTextVariants({ size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"names":["React","jsx","cn","cva","controlSizeClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,8BAAA,GAAiCA,gBAAA,CAAM,aAAA,CAA2B,YAAY,CAAA;AAM7E,MAAM,eAAeA,gBAAA,CAAM,UAAA;AAAA,EAChC,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,YAAA,EAAc,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtE,IAAA,uBACEC,cAAA,CAAC,8BAAA,CAA+B,QAAA,EAA/B,EAAwC,OAAO,WAAA,EAC9C,QAAA,kBAAAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,eAAA;AAAA,QACV,kBAAA,EAAkB,WAAA;AAAA,QAClB,WAAWC,WAAA,CAAG,0BAAA,EAA4B,gBAAgB,UAAA,GAAa,UAAA,GAAa,YAAY,SAAS,CAAA;AAAA,QACxG,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAMpB,MAAM,wBAAwBF,gBAAA,CAAM,UAAA;AAAA,EACzC,CAAC,EAAE,SAAA,EAAW,aAAa,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC7C,IAAA,MAAM,iBAAA,GAAoBA,gBAAA,CAAM,UAAA,CAAW,8BAA8B,CAAA;AAEzE,IAAA,MAAM,QAAA,GAAW,WAAA,KAAgB,iBAAA,KAAsB,UAAA,GAAa,YAAA,GAAe,UAAA,CAAA;AACnF,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,WAAA;AAAA,QACL,kBAAA,EAAkB,QAAA;AAAA,QAClB,WAAA,EAAU,yBAAA;AAAA,QACV,WAAWC,WAAA,CAAG,wBAAA,EAA0B,aAAa,UAAA,GAAa,MAAA,GAAS,QAAQ,SAAS,CAAA;AAAA,QAC3F,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,qBAAA,CAAsB,WAAA,GAAc,uBAAA;AAEpC,MAAM,wBAAA,GAA2BC,SAAA;AAAA,EAC/BD,WAAA;AAAA,IACE,2GAAA;AAAA,IACA,8DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAIE,yCAAA,CAAmB,EAAA;AAAA,QACvB,IAAIA,yCAAA,CAAmB,EAAA;AAAA,QACvB,IAAIA,yCAAA,CAAmB;AAAA;AACzB,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAMO,MAAM,mBAAmBJ,gBAAA,CAAM,UAAA;AAAA,EACpC,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC7C,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,oBAAA;AAAA,QACV,WAAWC,WAAA,CAAG,wBAAA,CAAyB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC1D,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;;;"}

package/dist/buttons-group-CaA7KAWf.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cva } from './index-Dubp6Qv4.js';
+import * as React from 'react';
+import { controlSizeClasses } from './primitives/control-size.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+import './buttons-group.css';const ButtonsGroupOrientationContext = React.createContext("horizontal");
+const ButtonsGroup = React.forwardRef(
+  ({ children, className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: cn("flex w-fit items-stretch", orientation === "vertical" ? "flex-col" : "flex-row", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: cn("self-stretch bg-border", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = cva(
+  cn(
+    "inline-flex items-center justify-center border border-border bg-surface-panel text-foreground select-none",
+    "shrink-0 gap-[.75em] rounded-full px-[1em] whitespace-nowrap",
+    "[&>svg]:size-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        sm: controlSizeClasses.sm,
+        md: controlSizeClasses.md,
+        lg: controlSizeClasses.lg
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const ButtonsGroupText = React.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+export { ButtonsGroup as B, ButtonsGroupSeparator as a, ButtonsGroupText as b };
+//# sourceMappingURL=buttons-group-CaA7KAWf.js.map

package/dist/buttons-group-CaA7KAWf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-CaA7KAWf.js","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst ButtonsGroupOrientationContext = React.createContext<Orientation>('horizontal');\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', ...props }, ref) => {\n    return (\n      <ButtonsGroupOrientationContext.Provider value={orientation}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonsGroupOrientationContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\nexport type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroupSeparator = React.forwardRef<HTMLDivElement, ButtonsGroupSeparatorProps>(\n  ({ className, orientation, ...props }, ref) => {\n    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);\n    // Separator runs perpendicular to the group flow by default.\n    const resolved = orientation ?? (parentOrientation === 'vertical' ? 'horizontal' : 'vertical');\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={resolved}\n        data-slot=\"buttons-group-separator\"\n        className={cn('self-stretch bg-border', resolved === 'vertical' ? 'w-px' : 'h-px', className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupSeparator.displayName = 'ButtonsGroupSeparator';\n\nconst buttonsGroupTextVariants = cva(\n  cn(\n    'inline-flex items-center justify-center border border-border bg-surface-panel text-foreground select-none',\n    'shrink-0 gap-[.75em] rounded-full px-[1em] whitespace-nowrap',\n    '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n  ),\n  {\n    variants: {\n      size: {\n        sm: controlSizeClasses.sm,\n        md: controlSizeClasses.md,\n        lg: controlSizeClasses.lg,\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, size = 'md', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"buttons-group-text\"\n        className={cn(buttonsGroupTextVariants({ size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,8BAAA,GAAiC,KAAA,CAAM,aAAA,CAA2B,YAAY,CAAA;AAM7E,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EAChC,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,YAAA,EAAc,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtE,IAAA,uBACE,GAAA,CAAC,8BAAA,CAA+B,QAAA,EAA/B,EAAwC,OAAO,WAAA,EAC9C,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,eAAA;AAAA,QACV,kBAAA,EAAkB,WAAA;AAAA,QAClB,WAAW,EAAA,CAAG,0BAAA,EAA4B,gBAAgB,UAAA,GAAa,UAAA,GAAa,YAAY,SAAS,CAAA;AAAA,QACxG,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAMpB,MAAM,wBAAwB,KAAA,CAAM,UAAA;AAAA,EACzC,CAAC,EAAE,SAAA,EAAW,aAAa,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC7C,IAAA,MAAM,iBAAA,GAAoB,KAAA,CAAM,UAAA,CAAW,8BAA8B,CAAA;AAEzE,IAAA,MAAM,QAAA,GAAW,WAAA,KAAgB,iBAAA,KAAsB,UAAA,GAAa,YAAA,GAAe,UAAA,CAAA;AACnF,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,WAAA;AAAA,QACL,kBAAA,EAAkB,QAAA;AAAA,QAClB,WAAA,EAAU,yBAAA;AAAA,QACV,WAAW,EAAA,CAAG,wBAAA,EAA0B,aAAa,UAAA,GAAa,MAAA,GAAS,QAAQ,SAAS,CAAA;AAAA,QAC3F,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,qBAAA,CAAsB,WAAA,GAAc,uBAAA;AAEpC,MAAM,wBAAA,GAA2B,GAAA;AAAA,EAC/B,EAAA;AAAA,IACE,2GAAA;AAAA,IACA,8DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAI,kBAAA,CAAmB,EAAA;AAAA,QACvB,IAAI,kBAAA,CAAmB,EAAA;AAAA,QACvB,IAAI,kBAAA,CAAmB;AAAA;AACzB,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAMO,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EACpC,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC7C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,oBAAA;AAAA,QACV,WAAW,EAAA,CAAG,wBAAA,CAAyB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC1D,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;"}