@mastra/playground-ui 60.1.0-alpha.1 → 60.2.0-alpha.0

package/dist/{ask-user-Dlz2346n.js → ask-user-DE8TaPhb.js}

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { MessageCircleQuestion, Check } from 'lucide-react';
-import { useId, useState } from 'react';
+import { useState } from 'react';
 import { B as Badge } from './Badge-DmOqFpXW.js';
 import { B as Button } from './Button-D43ghVKt.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 { C as Checkbox } from './checkbox-DcNIsz5L.js';
+import { F as Field, e as FieldLabel, f as Fieldset, g as FieldsetLegend, d as FieldItem } from './field-BtvEQ68O.js';
+import './field-control-aria-DB6y41tQ.js';
+import { I as Input } from './input-D5_B67_r.js';
+import { a as RadioGroupItem, R as RadioGroup } from './radio-group-bvm7Sqq_.js';
 import { T as Txt } from './Txt-BP1SRHmL.js';
 import { Icon } from './icons/Icon.es.js';
 import { raisedSurfaceStyle } from './primitives/raised-surface.es.js';
@@ -32,13 +34,12 @@ const AskUserOptionRow = ({
   disabled = false,
   className,
   ...props
-}) => /* @__PURE__ */ jsxs(
-  "label",
+}) => /* @__PURE__ */ jsx(FieldItem, { disabled, className: "contents", children: /* @__PURE__ */ jsxs(
+  FieldLabel,
   {
     "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",
+      "state-layer flex items-start gap-2.5 rounded-lg bg-fill px-3 py-2 data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -50,7 +51,7 @@ const AskUserOptionRow = ({
       ] })
     ]
   }
-);
+) });
 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(
@@ -79,7 +80,6 @@ const AskUserInput = ({
   footer,
   ...props
 }) => {
-  const fieldId = useId();
   const [text, setText] = useState("");
   const [selected, setSelected] = useState([]);
   if (result || isAnswered) {
@@ -105,28 +105,29 @@ const AskUserInput = ({
     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
-            }
-          )
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { className: "text-subheading", children: payload.question }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                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
@@ -137,8 +138,8 @@ const AskUserInput = ({
   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: [
+      isMulti ? /* @__PURE__ */ jsxs(Fieldset, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(FieldsetLegend, { className: "mb-1 text-subheading", children: payload.question }),
         options.map((option) => /* @__PURE__ */ jsx(
           AskUserOptionRow,
           {
@@ -168,27 +169,35 @@ const AskUserInput = ({
             children: "Submit answer"
           }
         )
-      ] }) : /* @__PURE__ */ jsx(
-        RadioGroup,
+      ] }) : /* @__PURE__ */ jsxs(
+        Fieldset,
         {
-          "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,
+          className: "gap-2",
+          render: /* @__PURE__ */ jsx(
+            RadioGroup,
             {
-              label: option.label,
-              description: option.description,
               disabled: isSubmitting,
-              control: /* @__PURE__ */ jsx(RadioGroupItem, { className: "mt-0.5", value: option.label })
-            },
-            option.label
-          ))
+              value: selected[0] ?? null,
+              onValueChange: (value) => {
+                const label = String(value);
+                setSelected([label]);
+                onSubmit(label);
+              }
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(FieldsetLegend, { className: "mb-1 text-subheading", children: payload.question }),
+            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,
@@ -203,4 +212,4 @@ const AskUser = ({ payload, ...props }) => {
 };
 
 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-Dlz2346n.js.map
+//# sourceMappingURL=ask-user-DE8TaPhb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-DE8TaPhb.js","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check, MessageCircleQuestion } from 'lucide-react';\nimport { 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 { Field, FieldItem, FieldLabel, Fieldset, FieldsetLegend } from '@/ds/components/Field';\nimport type { FieldLabelProps } from '@/ds/components/Field';\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<FieldLabelProps, '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  <FieldItem disabled={disabled} className=\"contents\">\n    <FieldLabel\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 data-disabled:opacity-50',\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    </FieldLabel>\n  </FieldItem>\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-foreground')}>\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 [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          <Field>\n            <FieldLabel className=\"text-subheading\">{payload.question}</FieldLabel>\n            <div className=\"flex items-center gap-2\">\n              <Input\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          </Field>\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        {isMulti ? (\n          <Fieldset className=\"gap-2\">\n            <FieldsetLegend className=\"mb-1 text-subheading\">{payload.question}</FieldsetLegend>\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          </Fieldset>\n        ) : (\n          <Fieldset\n            className=\"gap-2\"\n            render={\n              <RadioGroup\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            }\n          >\n            <FieldsetLegend className=\"mb-1 text-subheading\">{payload.question}</FieldsetLegend>\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          </Fieldset>\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-CXu4b7Jw.cjs → ask-user-XYY0fUoI.cjs}

@@ -5,9 +5,11 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const Badge = require('./Badge-D3EctKQo.cjs');
 const Button = require('./Button-CXhSUBxN.cjs');
-const checkbox = require('./checkbox-CI8JtZKS.cjs');
-const input = require('./input-bd223EJW.cjs');
-const radioGroup = require('./radio-group-BdEPWGzi.cjs');
+const checkbox = require('./checkbox-Bkobte27.cjs');
+const field = require('./field-ip9xiOVa.cjs');
+require('./field-control-aria-WzMGs0A4.cjs');
+const input = require('./input-D0UPyj6A.cjs');
+const radioGroup = require('./radio-group-QV7yVrSX.cjs');
 const Txt = require('./Txt-DPmEpNbp.cjs');
 const icons_Icon = require('./icons/Icon.cjs.js');
 const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
@@ -34,13 +36,12 @@ const AskUserOptionRow = ({
   disabled = false,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "label",
+}) => /* @__PURE__ */ jsxRuntime.jsx(field.FieldItem, { disabled, className: "contents", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  field.FieldLabel,
   {
     "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",
+      "state-layer flex items-start gap-2.5 rounded-lg bg-fill px-3 py-2 data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -52,7 +53,7 @@ const AskUserOptionRow = ({
       ] })
     ]
   }
-);
+) });
 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(
@@ -81,7 +82,6 @@ const AskUserInput = ({
   footer,
   ...props
 }) => {
-  const fieldId = React.useId();
   const [text, setText] = React.useState("");
   const [selected, setSelected] = React.useState([]);
   if (result || isAnswered) {
@@ -107,28 +107,29 @@ const AskUserInput = ({
     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
-            }
-          )
+        /* @__PURE__ */ jsxRuntime.jsxs(field.Field, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(field.FieldLabel, { className: "text-subheading", children: payload.question }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              input.Input,
+              {
+                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
@@ -139,8 +140,8 @@ const AskUserInput = ({
   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: [
+      isMulti ? /* @__PURE__ */ jsxRuntime.jsxs(field.Fieldset, { className: "gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldsetLegend, { className: "mb-1 text-subheading", children: payload.question }),
         options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
           AskUserOptionRow,
           {
@@ -170,27 +171,35 @@ const AskUserInput = ({
             children: "Submit answer"
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-        radioGroup.RadioGroup,
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        field.Fieldset,
         {
-          "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,
+          className: "gap-2",
+          render: /* @__PURE__ */ jsxRuntime.jsx(
+            radioGroup.RadioGroup,
             {
-              label: option.label,
-              description: option.description,
               disabled: isSubmitting,
-              control: /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroupItem, { className: "mt-0.5", value: option.label })
-            },
-            option.label
-          ))
+              value: selected[0] ?? null,
+              onValueChange: (value) => {
+                const label = String(value);
+                setSelected([label]);
+                onSubmit(label);
+              }
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(field.FieldsetLegend, { className: "mb-1 text-subheading", children: payload.question }),
+            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,
@@ -213,4 +222,4 @@ exports.AskUserOutput = AskUserOutput;
 exports.AskUserPending = AskUserPending;
 exports.AskUserQuestion = AskUserQuestion;
 exports.AskUserSubmit = AskUserSubmit;
-//# sourceMappingURL=ask-user-CXu4b7Jw.cjs.map
+//# sourceMappingURL=ask-user-XYY0fUoI.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-XYY0fUoI.cjs","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check, MessageCircleQuestion } from 'lucide-react';\nimport { 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 { Field, FieldItem, FieldLabel, Fieldset, FieldsetLegend } from '@/ds/components/Field';\nimport type { FieldLabelProps } from '@/ds/components/Field';\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<FieldLabelProps, '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  <FieldItem disabled={disabled} className=\"contents\">\n    <FieldLabel\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 data-disabled:opacity-50',\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    </FieldLabel>\n  </FieldItem>\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-foreground')}>\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 [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          <Field>\n            <FieldLabel className=\"text-subheading\">{payload.question}</FieldLabel>\n            <div className=\"flex items-center gap-2\">\n              <Input\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          </Field>\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        {isMulti ? (\n          <Fieldset className=\"gap-2\">\n            <FieldsetLegend className=\"mb-1 text-subheading\">{payload.question}</FieldsetLegend>\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          </Fieldset>\n        ) : (\n          <Fieldset\n            className=\"gap-2\"\n            render={\n              <RadioGroup\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            }\n          >\n            <FieldsetLegend className=\"mb-1 text-subheading\">{payload.question}</FieldsetLegend>\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          </Fieldset>\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","FieldItem","jsxs","FieldLabel","Button","Check","Badge","useState","Field","Input","Fieldset","FieldsetLegend","Checkbox","RadioGroup","RadioGroupItem"],"mappings":"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"}

package/dist/{checkbox-CI8JtZKS.cjs → checkbox-Bkobte27.cjs}

@@ -4,6 +4,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const checkbox = require('@base-ui/react/checkbox');
 const lucideReact = require('lucide-react');
 const React = require('react');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
 const primitives_selectionControl = require('./primitives/selection-control.cjs.js');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
 
@@ -36,6 +37,7 @@ const Checkbox = React__namespace.forwardRef(
         checked: isCheckedIndeterminate ? false : checked,
         indeterminate: indeterminate ?? isCheckedIndeterminate,
         "data-slot": "checkbox",
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", { ...fieldControlAria.keepOwnAccessibleName(props) }),
         className: utils_cn.cn(
           "peer rounded-[0.3125rem]",
           primitives_selectionControl.selectionControlStyle,
@@ -97,4 +99,4 @@ function CheckboxIndicatorIcon() {
 }
 
 exports.Checkbox = Checkbox;
-//# sourceMappingURL=checkbox-CI8JtZKS.cjs.map
+//# sourceMappingURL=checkbox-Bkobte27.cjs.map

package/dist/checkbox-Bkobte27.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-Bkobte27.cjs","sources":["../src/ds/components/Checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check, Minus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { selectionControlStyle } from '@/ds/primitives/selection-control';\nimport { cn } from '@/lib/utils';\n\n/**\n * Radix-style tri-state value for the controlled `checked` prop. Base UI splits\n * this into a strict `checked` boolean plus a separate `indeterminate` boolean —\n * we keep the Radix union here so existing consumers (which pass\n * `checked=\"indeterminate\"`) keep working without changes.\n *\n * `defaultChecked` is intentionally a plain boolean: an uncontrolled checkbox\n * cannot start \"indeterminate\" and then be toggled out of it (the indeterminate\n * state is inherently controlled), so `'indeterminate'` is not allowed there.\n */\nexport type CheckedState = boolean | 'indeterminate';\n\ntype CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'className' | 'checked'> & {\n  className?: string;\n  checked?: CheckedState;\n};\n\nconst Checkbox = React.forwardRef<HTMLSpanElement, CheckboxProps>(\n  ({ className, checked, indeterminate, ...props }, ref) => {\n    // Translate the Radix `'indeterminate'` sentinel into Base UI's dedicated\n    // `indeterminate` prop while leaving `checked` as a boolean.\n    const isCheckedIndeterminate = checked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        checked={isCheckedIndeterminate ? false : checked}\n        indeterminate={indeterminate ?? isCheckedIndeterminate}\n        data-slot=\"checkbox\"\n        render={<span {...keepOwnAccessibleName(props)} />}\n        className={cn(\n          'peer rounded-[0.3125rem]',\n          selectionControlStyle,\n          // Indeterminate is checkbox-only and mirrors the checked chip.\n          'data-[indeterminate]:border-foreground data-[indeterminate]:bg-foreground data-[indeterminate]:text-background',\n          'data-[indeterminate]:hover:border-foreground/90 data-[indeterminate]:hover:bg-foreground/90',\n          'data-[indeterminate]:active:border-foreground/75 data-[indeterminate]:active:bg-foreground/75',\n          'data-[disabled]:data-[indeterminate]:border-muted-foreground data-[disabled]:data-[indeterminate]:bg-muted-foreground data-[disabled]:data-[indeterminate]:text-background',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          keepMounted\n          className={cn(\n            'group/checkbox-indicator flex items-center justify-center text-current',\n            'scale-75 opacity-0 transition-[opacity,transform] duration-200 ease-out-custom',\n            'data-[checked]:scale-100 data-[checked]:opacity-100',\n            'data-[indeterminate]:scale-100 data-[indeterminate]:opacity-100',\n            'data-[starting-style]:scale-75 data-[starting-style]:opacity-0',\n            'data-[ending-style]:scale-75 data-[ending-style]:opacity-0',\n          )}\n        >\n          <CheckboxIndicatorIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\n/**\n * Picks the checkmark vs. the dash based on the Indicator's data attributes.\n * The Indicator stays mounted so unchecked transitions can animate out cleanly.\n */\nfunction CheckboxIndicatorIcon() {\n  return (\n    <>\n      <Check\n        className={cn(\n          'stroke-3.25 size-3 scale-95 transition-[stroke-dashoffset,transform] duration-200 ease-out-custom',\n          // Lucide's check path is ~22.6 units long. Use a longer dash so the\n          // final checked mark is never clipped.\n          '[stroke-dasharray:28] [stroke-dashoffset:28]',\n          'group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]',\n          'group-data-[checked]/checkbox-indicator:scale-100',\n          'group-data-[indeterminate]/checkbox-indicator:hidden',\n        )}\n      />\n      <Minus\n        className={cn(\n          'stroke-3.25 hidden size-3 scale-95 transition-transform duration-200 ease-out-custom',\n          'group-data-[indeterminate]/checkbox-indicator:block',\n          'group-data-[indeterminate]/checkbox-indicator:scale-100',\n        )}\n      />\n    </>\n  );\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n"],"names":["React","jsx","CheckboxPrimitive","keepOwnAccessibleName","cn","selectionControlStyle","jsxs","Fragment","Check","Minus"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,WAAWA,gBAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAe,GAAG,KAAA,IAAS,GAAA,KAAQ;AAGxD,IAAA,MAAM,yBAAyB,OAAA,KAAY,eAAA;AAE3C,IAAA,uBACEC,cAAA;AAAA,MAACC,iBAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,OAAA,EAAS,yBAAyB,KAAA,GAAQ,OAAA;AAAA,QAC1C,eAAe,aAAA,IAAiB,sBAAA;AAAA,QAChC,WAAA,EAAU,UAAA;AAAA,QACV,wBAAQD,cAAA,CAAC,MAAA,EAAA,EAAM,GAAGE,sCAAA,CAAsB,KAAK,CAAA,EAAG,CAAA;AAAA,QAChD,SAAA,EAAWC,WAAA;AAAA,UACT,0BAAA;AAAA,UACAC,iDAAA;AAAA;AAAA,UAEA,gHAAA;AAAA,UACA,6FAAA;AAAA,UACA,+FAAA;AAAA,UACA,4KAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAJ,cAAA;AAAA,UAACC,iBAAA,CAAkB,SAAA;AAAA,UAAlB;AAAA,YACC,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAWE,WAAA;AAAA,cACT,wEAAA;AAAA,cACA,gFAAA;AAAA,cACA,qDAAA;AAAA,cACA,iEAAA;AAAA,cACA,gEAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,yCAAC,qBAAA,EAAA,EAAsB;AAAA;AAAA;AACzB;AAAA,KACF;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,SAAS,qBAAA,GAAwB;AAC/B,EAAA,uBACEE,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAN,cAAA;AAAA,MAACO,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWJ,WAAA;AAAA,UACT,mGAAA;AAAA;AAAA;AAAA,UAGA,8CAAA;AAAA,UACA,+DAAA;AAAA,UACA,mDAAA;AAAA,UACA;AAAA;AACF;AAAA,KACF;AAAA,oBACAH,cAAA;AAAA,MAACQ,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWL,WAAA;AAAA,UACT,sFAAA;AAAA,UACA,qDAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/{checkbox-CQedzgsi.js → checkbox-DcNIsz5L.js}

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Check, Minus } from 'lucide-react';
 import * as React from 'react';
+import { k as keepOwnAccessibleName } from './field-control-aria-DB6y41tQ.js';
 import { selectionControlStyle } from './primitives/selection-control.es.js';
 import { c as cn } from './cn-65Adrsfj.js';
 
@@ -15,6 +16,7 @@ const Checkbox = React.forwardRef(
         checked: isCheckedIndeterminate ? false : checked,
         indeterminate: indeterminate ?? isCheckedIndeterminate,
         "data-slot": "checkbox",
+        render: /* @__PURE__ */ jsx("span", { ...keepOwnAccessibleName(props) }),
         className: cn(
           "peer rounded-[0.3125rem]",
           selectionControlStyle,
@@ -76,4 +78,4 @@ function CheckboxIndicatorIcon() {
 }
 
 export { Checkbox as C };
-//# sourceMappingURL=checkbox-CQedzgsi.js.map
+//# sourceMappingURL=checkbox-DcNIsz5L.js.map

package/dist/checkbox-DcNIsz5L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-DcNIsz5L.js","sources":["../src/ds/components/Checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check, Minus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { selectionControlStyle } from '@/ds/primitives/selection-control';\nimport { cn } from '@/lib/utils';\n\n/**\n * Radix-style tri-state value for the controlled `checked` prop. Base UI splits\n * this into a strict `checked` boolean plus a separate `indeterminate` boolean —\n * we keep the Radix union here so existing consumers (which pass\n * `checked=\"indeterminate\"`) keep working without changes.\n *\n * `defaultChecked` is intentionally a plain boolean: an uncontrolled checkbox\n * cannot start \"indeterminate\" and then be toggled out of it (the indeterminate\n * state is inherently controlled), so `'indeterminate'` is not allowed there.\n */\nexport type CheckedState = boolean | 'indeterminate';\n\ntype CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'className' | 'checked'> & {\n  className?: string;\n  checked?: CheckedState;\n};\n\nconst Checkbox = React.forwardRef<HTMLSpanElement, CheckboxProps>(\n  ({ className, checked, indeterminate, ...props }, ref) => {\n    // Translate the Radix `'indeterminate'` sentinel into Base UI's dedicated\n    // `indeterminate` prop while leaving `checked` as a boolean.\n    const isCheckedIndeterminate = checked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        checked={isCheckedIndeterminate ? false : checked}\n        indeterminate={indeterminate ?? isCheckedIndeterminate}\n        data-slot=\"checkbox\"\n        render={<span {...keepOwnAccessibleName(props)} />}\n        className={cn(\n          'peer rounded-[0.3125rem]',\n          selectionControlStyle,\n          // Indeterminate is checkbox-only and mirrors the checked chip.\n          'data-[indeterminate]:border-foreground data-[indeterminate]:bg-foreground data-[indeterminate]:text-background',\n          'data-[indeterminate]:hover:border-foreground/90 data-[indeterminate]:hover:bg-foreground/90',\n          'data-[indeterminate]:active:border-foreground/75 data-[indeterminate]:active:bg-foreground/75',\n          'data-[disabled]:data-[indeterminate]:border-muted-foreground data-[disabled]:data-[indeterminate]:bg-muted-foreground data-[disabled]:data-[indeterminate]:text-background',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          keepMounted\n          className={cn(\n            'group/checkbox-indicator flex items-center justify-center text-current',\n            'scale-75 opacity-0 transition-[opacity,transform] duration-200 ease-out-custom',\n            'data-[checked]:scale-100 data-[checked]:opacity-100',\n            'data-[indeterminate]:scale-100 data-[indeterminate]:opacity-100',\n            'data-[starting-style]:scale-75 data-[starting-style]:opacity-0',\n            'data-[ending-style]:scale-75 data-[ending-style]:opacity-0',\n          )}\n        >\n          <CheckboxIndicatorIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\n/**\n * Picks the checkmark vs. the dash based on the Indicator's data attributes.\n * The Indicator stays mounted so unchecked transitions can animate out cleanly.\n */\nfunction CheckboxIndicatorIcon() {\n  return (\n    <>\n      <Check\n        className={cn(\n          'stroke-3.25 size-3 scale-95 transition-[stroke-dashoffset,transform] duration-200 ease-out-custom',\n          // Lucide's check path is ~22.6 units long. Use a longer dash so the\n          // final checked mark is never clipped.\n          '[stroke-dasharray:28] [stroke-dashoffset:28]',\n          'group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]',\n          'group-data-[checked]/checkbox-indicator:scale-100',\n          'group-data-[indeterminate]/checkbox-indicator:hidden',\n        )}\n      />\n      <Minus\n        className={cn(\n          'stroke-3.25 hidden size-3 scale-95 transition-transform duration-200 ease-out-custom',\n          'group-data-[indeterminate]/checkbox-indicator:block',\n          'group-data-[indeterminate]/checkbox-indicator:scale-100',\n        )}\n      />\n    </>\n  );\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;AAyBA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAe,GAAG,KAAA,IAAS,GAAA,KAAQ;AAGxD,IAAA,MAAM,yBAAyB,OAAA,KAAY,eAAA;AAE3C,IAAA,uBACE,GAAA;AAAA,MAACA,UAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,OAAA,EAAS,yBAAyB,KAAA,GAAQ,OAAA;AAAA,QAC1C,eAAe,aAAA,IAAiB,sBAAA;AAAA,QAChC,WAAA,EAAU,UAAA;AAAA,QACV,wBAAQ,GAAA,CAAC,MAAA,EAAA,EAAM,GAAG,qBAAA,CAAsB,KAAK,CAAA,EAAG,CAAA;AAAA,QAChD,SAAA,EAAW,EAAA;AAAA,UACT,0BAAA;AAAA,UACA,qBAAA;AAAA;AAAA,UAEA,gHAAA;AAAA,UACA,6FAAA;AAAA,UACA,+FAAA;AAAA,UACA,4KAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAACA,UAAA,CAAkB,SAAA;AAAA,UAAlB;AAAA,YACC,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAW,EAAA;AAAA,cACT,wEAAA;AAAA,cACA,gFAAA;AAAA,cACA,qDAAA;AAAA,cACA,iEAAA;AAAA,cACA,gEAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,8BAAC,qBAAA,EAAA,EAAsB;AAAA;AAAA;AACzB;AAAA,KACF;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,SAAS,qBAAA,GAAwB;AAC/B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,mGAAA;AAAA;AAAA;AAAA,UAGA,8CAAA;AAAA,UACA,+DAAA;AAAA,UACA,mDAAA;AAAA,UACA;AAAA;AACF;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,sFAAA;AAAA,UACA,qDAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/{code-block-DY5KsTGY.js → code-block-Bnz7Pq0Q.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { C as Code } from './code-BeWhOFT4.js';
 import { C as CopyButton } from './copy-button-DH8xtrWz.js';
-import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-DZeNf-kI.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select--ArpXYDc.js';
 import { a as Tabs, T as TabList } from './tabs-root-lrZZ3KwH.js';
 import { T as Tab } from './tabs-tab-DoPSW-1s.js';
 import { transitions } from './primitives/transitions.es.js';
@@ -41,7 +41,7 @@ function CodeBlock({
         ] }) }),
         useSelect && options && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-border-strong/40 px-2 py-1.5", children: [
           /* @__PURE__ */ jsxs(Select, { value: activeValue, onValueChange, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", variant: "ghost", className: "w-auto", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
           ] }),
           actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: actions })
@@ -83,4 +83,4 @@ function CodeBlock({
 }
 
 export { CodeBlock as C };
-//# sourceMappingURL=code-block-DY5KsTGY.js.map
+//# sourceMappingURL=code-block-Bnz7Pq0Q.js.map

package/dist/code-block-Bnz7Pq0Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-Bnz7Pq0Q.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border-strong/40 bg-background [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border-strong/40 px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border-strong/40 px-4 py-2\">\n          <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"flex items-center justify-end border-b border-border-strong/40 px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-caption text-foreground',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{code-block-BzoMjjtf.cjs → code-block-C3DbSINk.cjs}

@@ -3,7 +3,7 @@
 const jsxRuntime = require('react/jsx-runtime');
 const code = require('./code-B-x-9sJ1.cjs');
 const copyButton = require('./copy-button-CGkFEDHF.cjs');
-const select = require('./select-DBY9LQFQ.cjs');
+const select = require('./select-DJQYAVcm.cjs');
 const tabsRoot = require('./tabs-root-C-ePF1y9.cjs');
 const tabsTab = require('./tabs-tab-BmIBFifi.cjs');
 const primitives_transitions = require('./primitives/transitions.cjs.js');
@@ -43,7 +43,7 @@ function CodeBlock({
         ] }) }),
         useSelect && options && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-border-strong/40 px-2 py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: activeValue, onValueChange, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size: "sm", variant: "ghost", className: "w-auto", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
           ] }),
           actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: actions })
@@ -85,4 +85,4 @@ function CodeBlock({
 }
 
 exports.CodeBlock = CodeBlock;
-//# sourceMappingURL=code-block-BzoMjjtf.cjs.map
+//# sourceMappingURL=code-block-C3DbSINk.cjs.map

package/dist/code-block-C3DbSINk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-C3DbSINk.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border-strong/40 bg-background [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"flex shrink-0 items-center border-b border-border pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"flex items-center border-b border-border-strong/40 px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\" className=\"w-auto\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"flex items-center border-b border-border-strong/40 px-4 py-2\">\n          <figcaption className=\"font-mono text-caption text-muted-foreground\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"flex items-center justify-end border-b border-border-strong/40 px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-caption text-foreground',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}