@nucleux/structured-input 0.5.0 → 0.7.0

package/dist/index.d.cts

@@ -34,9 +34,126 @@ interface StructuredInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 }
 /**
  * An agent-generated clarifying question rendered as a structured choice —
- * single or multi-select options, a free-text escape, and a skip.
+ * single or multi-select options, a free-text escape, and a skip. The other
+ * structured-input variants are composable siblings: {@link StructuredInputSlots}
+ * (named slots), {@link StructuredInputTags} (tagged input) and
+ * {@link StructuredInputWizard} (wizard step).
  * Source: Figma "Expressive Input / Structured Input".
  */
 declare const StructuredInput: React.ForwardRefExoticComponent<StructuredInputProps & React.RefAttributes<HTMLDivElement>>;
+interface StructuredInputSlot {
+    /** Key in the values object. */
+    name: string;
+    /** Plain-language label, e.g. `"Audience"`. */
+    label: string;
+    /** Placeholder / example value. */
+    placeholder?: string;
+    /** Choices — renders a select instead of a text field. */
+    options?: StructuredOption[];
+    /** Helper text under the field. */
+    helper?: string;
+    /**
+     * Marks the initial value as the agent's suggestion, with the reason, e.g.
+     * `"from the meeting invite"`. Once the person changes it, it reads “Edited by you”.
+     */
+    suggested?: string;
+    /** Span the full row. */
+    wide?: boolean;
+}
+type StructuredInputValues = Record<string, string>;
+interface StructuredInputSlotsProps extends Omit<React.HTMLAttributes<HTMLFormElement>, "onSubmit" | "defaultValue"> {
+    /** The 2–4 slots the prompt template needs. */
+    slots: StructuredInputSlot[];
+    /** Values (controlled). */
+    values?: StructuredInputValues;
+    /** Initial values (uncontrolled). */
+    defaultValues?: StructuredInputValues;
+    /** Called on every change. */
+    onValuesChange?: (values: StructuredInputValues) => void;
+    /** Show a freeform override field. `true` uses the label `"Anything else?"`; a string sets the label. */
+    freeform?: boolean | string;
+    /** Called on submit. Never requires every slot — any value (or the freeform text) is enough. */
+    onSubmit?: (values: StructuredInputValues, freeform: string) => void;
+    /** Label of the submit button. Defaults to `"Generate"`. */
+    submitLabel?: React.ReactNode;
+    /** Accessible name of the form. Defaults to `"Structured prompt builder"`. */
+    label?: string;
+}
+/**
+ * Named slots: a short set of plain-language fields (2–4) that fill a prompt
+ * template — text fields or selects, an optional freeform override, and a
+ * submit that never requires every field. Agent-suggested values are marked
+ * “Suggested” with their reason and become “Edited by you” once changed; the
+ * component never changes a value the person set.
+ */
+declare const StructuredInputSlots: React.ForwardRefExoticComponent<StructuredInputSlotsProps & React.RefAttributes<HTMLFormElement>>;
+interface StructuredInputTagTrigger {
+    /** The prefix that starts a tag, e.g. `"@"`, `"p:"`, `"/"`. */
+    trigger: string;
+    /** What the tag refers to, e.g. `"Person"`. */
+    label: string;
+    /** Values offered while typing after the trigger. */
+    suggestions?: string[];
+}
+type StructuredInputPart = {
+    type: "text";
+    text: string;
+} | {
+    type: "tag";
+    trigger: string;
+    value: string;
+};
+interface StructuredInputTagsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "defaultValue" | "onChange"> {
+    /** Recognised tag prefixes. Defaults to `@` person, `p:` project, `/` file. */
+    triggers?: StructuredInputTagTrigger[];
+    /** Committed parts (controlled). */
+    value?: StructuredInputPart[];
+    /** Initial parts (uncontrolled). */
+    defaultValue?: StructuredInputPart[];
+    /** Called when parts are added or removed. */
+    onValueChange?: (parts: StructuredInputPart[]) => void;
+    /** Called on Enter or the send button with the parts and their plain-text form. */
+    onSubmit?: (parts: StructuredInputPart[], text: string) => void;
+    /** Accessible name and placeholder of the text field. */
+    placeholder?: string;
+    /** Label of the send button. Defaults to `"Send"`. */
+    submitLabel?: React.ReactNode;
+}
+/** Serialise parts into the plain prompt text, e.g. `"Update @sam on p:Apollo"`. */
+declare function structuredPartsToText(parts: StructuredInputPart[]): string;
+/**
+ * Tagged input: a prompt field where typed prefixes (`@` person, `p:` project,
+ * `/` file — configurable) become removable tag chips, with optional
+ * type-ahead suggestions shown as buttons. Backspace on an empty field removes
+ * the last tag; Enter sends. Tags are optional — plain text always works.
+ */
+declare const StructuredInputTags: React.ForwardRefExoticComponent<StructuredInputTagsProps & React.RefAttributes<HTMLDivElement>>;
+interface StructuredInputWizardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "title"> {
+    /** Step titles, e.g. `["Intent", "Audience", "Tone"]`. */
+    steps: string[];
+    /** Current step, 0-based (controlled). */
+    step?: number;
+    /** Initial step (uncontrolled). */
+    defaultStep?: number;
+    /** Called when Back / Next move. */
+    onStepChange?: (step: number) => void;
+    /** The current step's question, e.g. `"Who is the brief for?"`. */
+    description?: React.ReactNode;
+    /** Called from the last step (or from “Generate now” when `allowEarlySubmit`). */
+    onSubmit?: () => void;
+    /** Label of the final button. Defaults to `"Generate"`. */
+    submitLabel?: React.ReactNode;
+    /** Offer “Generate now” before the last step — fields are never all required. Defaults to `true`. */
+    allowEarlySubmit?: boolean;
+    /** The current step's fields. */
+    children?: React.ReactNode;
+}
+/**
+ * Wizard step: a multi-step frame for high-stakes prompts (legal, HR, medical) —
+ * a progress bar, “Step 2 of 3 · Audience”, the step's question and fields
+ * (children), and Back / Next / Generate. Focus moves to the step heading when
+ * the step changes; nothing forces every step to be filled before generating.
+ */
+declare const StructuredInputWizard: React.ForwardRefExoticComponent<StructuredInputWizardProps & React.RefAttributes<HTMLDivElement>>;
 
-export { StructuredInput, type StructuredInputProps, type StructuredOption };
+export { StructuredInput, type StructuredInputPart, type StructuredInputProps, type StructuredInputSlot, StructuredInputSlots, type StructuredInputSlotsProps, type StructuredInputTagTrigger, StructuredInputTags, type StructuredInputTagsProps, type StructuredInputValues, StructuredInputWizard, type StructuredInputWizardProps, type StructuredOption, structuredPartsToText };

package/dist/index.d.ts

@@ -34,9 +34,126 @@ interface StructuredInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 }
 /**
  * An agent-generated clarifying question rendered as a structured choice —
- * single or multi-select options, a free-text escape, and a skip.
+ * single or multi-select options, a free-text escape, and a skip. The other
+ * structured-input variants are composable siblings: {@link StructuredInputSlots}
+ * (named slots), {@link StructuredInputTags} (tagged input) and
+ * {@link StructuredInputWizard} (wizard step).
  * Source: Figma "Expressive Input / Structured Input".
  */
 declare const StructuredInput: React.ForwardRefExoticComponent<StructuredInputProps & React.RefAttributes<HTMLDivElement>>;
+interface StructuredInputSlot {
+    /** Key in the values object. */
+    name: string;
+    /** Plain-language label, e.g. `"Audience"`. */
+    label: string;
+    /** Placeholder / example value. */
+    placeholder?: string;
+    /** Choices — renders a select instead of a text field. */
+    options?: StructuredOption[];
+    /** Helper text under the field. */
+    helper?: string;
+    /**
+     * Marks the initial value as the agent's suggestion, with the reason, e.g.
+     * `"from the meeting invite"`. Once the person changes it, it reads “Edited by you”.
+     */
+    suggested?: string;
+    /** Span the full row. */
+    wide?: boolean;
+}
+type StructuredInputValues = Record<string, string>;
+interface StructuredInputSlotsProps extends Omit<React.HTMLAttributes<HTMLFormElement>, "onSubmit" | "defaultValue"> {
+    /** The 2–4 slots the prompt template needs. */
+    slots: StructuredInputSlot[];
+    /** Values (controlled). */
+    values?: StructuredInputValues;
+    /** Initial values (uncontrolled). */
+    defaultValues?: StructuredInputValues;
+    /** Called on every change. */
+    onValuesChange?: (values: StructuredInputValues) => void;
+    /** Show a freeform override field. `true` uses the label `"Anything else?"`; a string sets the label. */
+    freeform?: boolean | string;
+    /** Called on submit. Never requires every slot — any value (or the freeform text) is enough. */
+    onSubmit?: (values: StructuredInputValues, freeform: string) => void;
+    /** Label of the submit button. Defaults to `"Generate"`. */
+    submitLabel?: React.ReactNode;
+    /** Accessible name of the form. Defaults to `"Structured prompt builder"`. */
+    label?: string;
+}
+/**
+ * Named slots: a short set of plain-language fields (2–4) that fill a prompt
+ * template — text fields or selects, an optional freeform override, and a
+ * submit that never requires every field. Agent-suggested values are marked
+ * “Suggested” with their reason and become “Edited by you” once changed; the
+ * component never changes a value the person set.
+ */
+declare const StructuredInputSlots: React.ForwardRefExoticComponent<StructuredInputSlotsProps & React.RefAttributes<HTMLFormElement>>;
+interface StructuredInputTagTrigger {
+    /** The prefix that starts a tag, e.g. `"@"`, `"p:"`, `"/"`. */
+    trigger: string;
+    /** What the tag refers to, e.g. `"Person"`. */
+    label: string;
+    /** Values offered while typing after the trigger. */
+    suggestions?: string[];
+}
+type StructuredInputPart = {
+    type: "text";
+    text: string;
+} | {
+    type: "tag";
+    trigger: string;
+    value: string;
+};
+interface StructuredInputTagsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "defaultValue" | "onChange"> {
+    /** Recognised tag prefixes. Defaults to `@` person, `p:` project, `/` file. */
+    triggers?: StructuredInputTagTrigger[];
+    /** Committed parts (controlled). */
+    value?: StructuredInputPart[];
+    /** Initial parts (uncontrolled). */
+    defaultValue?: StructuredInputPart[];
+    /** Called when parts are added or removed. */
+    onValueChange?: (parts: StructuredInputPart[]) => void;
+    /** Called on Enter or the send button with the parts and their plain-text form. */
+    onSubmit?: (parts: StructuredInputPart[], text: string) => void;
+    /** Accessible name and placeholder of the text field. */
+    placeholder?: string;
+    /** Label of the send button. Defaults to `"Send"`. */
+    submitLabel?: React.ReactNode;
+}
+/** Serialise parts into the plain prompt text, e.g. `"Update @sam on p:Apollo"`. */
+declare function structuredPartsToText(parts: StructuredInputPart[]): string;
+/**
+ * Tagged input: a prompt field where typed prefixes (`@` person, `p:` project,
+ * `/` file — configurable) become removable tag chips, with optional
+ * type-ahead suggestions shown as buttons. Backspace on an empty field removes
+ * the last tag; Enter sends. Tags are optional — plain text always works.
+ */
+declare const StructuredInputTags: React.ForwardRefExoticComponent<StructuredInputTagsProps & React.RefAttributes<HTMLDivElement>>;
+interface StructuredInputWizardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "title"> {
+    /** Step titles, e.g. `["Intent", "Audience", "Tone"]`. */
+    steps: string[];
+    /** Current step, 0-based (controlled). */
+    step?: number;
+    /** Initial step (uncontrolled). */
+    defaultStep?: number;
+    /** Called when Back / Next move. */
+    onStepChange?: (step: number) => void;
+    /** The current step's question, e.g. `"Who is the brief for?"`. */
+    description?: React.ReactNode;
+    /** Called from the last step (or from “Generate now” when `allowEarlySubmit`). */
+    onSubmit?: () => void;
+    /** Label of the final button. Defaults to `"Generate"`. */
+    submitLabel?: React.ReactNode;
+    /** Offer “Generate now” before the last step — fields are never all required. Defaults to `true`. */
+    allowEarlySubmit?: boolean;
+    /** The current step's fields. */
+    children?: React.ReactNode;
+}
+/**
+ * Wizard step: a multi-step frame for high-stakes prompts (legal, HR, medical) —
+ * a progress bar, “Step 2 of 3 · Audience”, the step's question and fields
+ * (children), and Back / Next / Generate. Focus moves to the step heading when
+ * the step changes; nothing forces every step to be filled before generating.
+ */
+declare const StructuredInputWizard: React.ForwardRefExoticComponent<StructuredInputWizardProps & React.RefAttributes<HTMLDivElement>>;
 
-export { StructuredInput, type StructuredInputProps, type StructuredOption };
+export { StructuredInput, type StructuredInputPart, type StructuredInputProps, type StructuredInputSlot, StructuredInputSlots, type StructuredInputSlotsProps, type StructuredInputTagTrigger, StructuredInputTags, type StructuredInputTagsProps, type StructuredInputValues, StructuredInputWizard, type StructuredInputWizardProps, type StructuredOption, structuredPartsToText };

package/dist/index.js

@@ -1,7 +1,13 @@
 "use client";
 import * as React from 'react';
 import { cn } from '@nucleux/utils';
-import { Check } from 'lucide-react';
+import { Check, X } from 'lucide-react';
+import { Badge } from '@nucleux/badge';
+import { Button } from '@nucleux/button';
+import { Field, FieldLabel, FieldDescription } from '@nucleux/field';
+import { Input } from '@nucleux/input';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@nucleux/select';
+import { Textarea } from '@nucleux/textarea';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/index.tsx
@@ -24,6 +30,8 @@ var StructuredInput = React.forwardRef(
   }, ref) => {
     const [internal, setInternal] = React.useState(defaultValue);
     const [other, setOther] = React.useState("");
+    const questionId = React.useId();
+    const groupRef = React.useRef(null);
     const selected = value !== void 0 ? value : internal;
     const setSelected = (next) => {
       if (value === void 0) setInternal(next);
@@ -43,21 +51,35 @@ var StructuredInput = React.forwardRef(
         className: cn("flex flex-col gap-4 rounded-xl border border-border bg-background p-5", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-foreground", children: question }),
+          /* @__PURE__ */ jsx("p", { id: questionId, className: "text-base font-medium text-foreground", children: question }),
           /* @__PURE__ */ jsx(
             "div",
             {
+              ref: groupRef,
               role: multiple ? "group" : "radiogroup",
-              "aria-label": typeof question === "string" ? question : "Options",
+              "aria-labelledby": questionId,
               className: "flex flex-col gap-2",
-              children: options.map((option) => {
+              onKeyDown: (e) => {
+                if (multiple || !["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) return;
+                const radios = Array.from(groupRef.current?.querySelectorAll('[role="radio"]') ?? []);
+                const i = radios.indexOf(document.activeElement);
+                if (i < 0) return;
+                e.preventDefault();
+                const step = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
+                const next = (i + step + radios.length) % radios.length;
+                radios[next].focus();
+                setSelected([options[next].value]);
+              },
+              children: options.map((option, index) => {
                 const active = selected.includes(option.value);
+                const tabbable = multiple || index === Math.max(0, options.findIndex((o) => selected.includes(o.value)));
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
                     role: multiple ? "checkbox" : "radio",
                     "aria-checked": active,
+                    tabIndex: tabbable ? 0 : -1,
                     onClick: () => toggle(option.value),
                     className: cn(
                       "flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -121,7 +143,328 @@ var StructuredInput = React.forwardRef(
   }
 );
 StructuredInput.displayName = "StructuredInput";
+var StructuredInputSlots = React.forwardRef(
+  ({
+    slots,
+    values: valuesProp,
+    defaultValues,
+    onValuesChange,
+    freeform = false,
+    onSubmit,
+    submitLabel = "Generate",
+    label = "Structured prompt builder",
+    className,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React.useState(defaultValues ?? {});
+    const values = valuesProp ?? internal;
+    const [edited, setEdited] = React.useState({});
+    const [extra, setExtra] = React.useState("");
+    const baseId = React.useId();
+    const setValue = (name, value) => {
+      const next = { ...values, [name]: value };
+      if (valuesProp === void 0) setInternal(next);
+      setEdited((e) => ({ ...e, [name]: true }));
+      onValuesChange?.(next);
+    };
+    const hasAny = Object.values(values).some((v) => v && v.trim()) || extra.trim().length > 0;
+    const freeformLabel = typeof freeform === "string" ? freeform : "Anything else?";
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        "aria-label": label,
+        className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2", className),
+        onSubmit: (e) => {
+          e.preventDefault();
+          if (hasAny) onSubmit?.(values, extra);
+        },
+        ...props,
+        children: [
+          slots.map((slot) => {
+            const id = `${baseId}-${slot.name}`;
+            const helperId = `${id}-helper`;
+            const mark = slot.suggested ? edited[slot.name] ? { text: "Edited by you", variant: "secondary" } : { text: "Suggested", variant: "info" } : null;
+            const describedBy = slot.helper || mark && !edited[slot.name] ? helperId : void 0;
+            return /* @__PURE__ */ jsxs(Field, { className: cn("gap-1.5", slot.wide && "sm:col-span-2"), children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(FieldLabel, { id: `${id}-label`, htmlFor: id, className: "text-xs font-semibold text-muted-foreground", children: slot.label }),
+                mark && /* @__PURE__ */ jsx(Badge, { variant: mark.variant, children: mark.text })
+              ] }),
+              slot.options ? /* @__PURE__ */ jsxs(Select, { value: values[slot.name] || void 0, onValueChange: (v) => setValue(slot.name, v), children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { id, "aria-labelledby": `${id}-label ${id}`, "aria-describedby": describedBy, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: slot.placeholder ?? "Choose\u2026" }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: slot.options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
+              ] }) : /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id,
+                  value: values[slot.name] ?? "",
+                  placeholder: slot.placeholder,
+                  "aria-describedby": describedBy,
+                  onChange: (e) => setValue(slot.name, e.target.value)
+                }
+              ),
+              describedBy && /* @__PURE__ */ jsxs(FieldDescription, { id: helperId, className: "text-xs", children: [
+                mark && !edited[slot.name] ? `Suggested ${slot.suggested}. ` : "",
+                slot.helper
+              ] })
+            ] }, slot.name);
+          }),
+          freeform && /* @__PURE__ */ jsxs(Field, { className: "gap-1.5 sm:col-span-2", children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: `${baseId}-freeform`, className: "text-xs font-semibold text-muted-foreground", children: freeformLabel }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: `${baseId}-freeform`,
+                rows: 2,
+                value: extra,
+                placeholder: "Say it in your own words \u2014 this overrides the fields above",
+                onChange: (e) => setExtra(e.target.value)
+              }
+            )
+          ] }),
+          onSubmit && /* @__PURE__ */ jsx("div", { className: "flex justify-end sm:col-span-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", variant: "cta", size: "sm", disabled: !hasAny, children: submitLabel }) })
+        ]
+      }
+    );
+  }
+);
+StructuredInputSlots.displayName = "StructuredInputSlots";
+var DEFAULT_TRIGGERS = [
+  { trigger: "@", label: "Person" },
+  { trigger: "p:", label: "Project" },
+  { trigger: "/", label: "File" }
+];
+var TAG_TONES = [
+  { variant: "secondary", className: "bg-brand-muted text-brand" },
+  { variant: "info" },
+  { variant: "success" },
+  { variant: "outline" }
+];
+function structuredPartsToText(parts) {
+  return parts.map((p) => p.type === "text" ? p.text : `${p.trigger}${p.value}`).join(" ").replace(/\s+/g, " ").trim();
+}
+var StructuredInputTags = React.forwardRef(
+  ({
+    triggers = DEFAULT_TRIGGERS,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onSubmit,
+    placeholder = "Type @ for people, p: for projects, / for files",
+    submitLabel = "Send",
+    className,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React.useState(defaultValue ?? []);
+    const parts = valueProp ?? internal;
+    const [draft, setDraft] = React.useState("");
+    const inputRef = React.useRef(null);
+    const hintId = React.useId();
+    const commit = (next) => {
+      if (valueProp === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    const ordered = [...triggers].sort((a, b) => b.trigger.length - a.trigger.length);
+    const matchTag = (word) => {
+      const t = ordered.find((tr) => word.startsWith(tr.trigger) && word.length > tr.trigger.length);
+      return t ? { trigger: t.trigger, value: word.slice(t.trigger.length) } : null;
+    };
+    const lastWord = draft.split(" ").pop() ?? "";
+    const activeTrigger = ordered.find((tr) => lastWord.startsWith(tr.trigger));
+    const query = activeTrigger ? lastWord.slice(activeTrigger.trigger.length).toLowerCase() : "";
+    const suggestions = activeTrigger?.suggestions?.filter((s) => s.toLowerCase().startsWith(query)).slice(0, 5) ?? [];
+    const flush = (source = draft, forceTag) => {
+      const words = source.split(" ");
+      const last = words.pop() ?? "";
+      const tag = forceTag ?? matchTag(last);
+      const textBefore = (tag ? words.join(" ") : source).trim();
+      const next = [...parts];
+      if (textBefore) next.push({ type: "text", text: textBefore });
+      if (tag) next.push({ type: "tag", ...tag });
+      if (next.length !== parts.length) commit(next);
+      setDraft("");
+      return next;
+    };
+    const toneFor = (trigger) => {
+      const i = triggers.findIndex((t) => t.trigger === trigger);
+      return TAG_TONES[(i < 0 ? 0 : i) % TAG_TONES.length];
+    };
+    const labelFor = (trigger) => triggers.find((t) => t.trigger === trigger)?.label ?? "Tag";
+    const submit = () => {
+      const next = flush();
+      const text = structuredPartsToText(next);
+      if (text) onSubmit?.(next, text);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-2", className), ...props, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-wrap items-center gap-1.5 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground focus-within:ring-2 focus-within:ring-ring",
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            parts.map(
+              (part, i) => part.type === "text" ? /* @__PURE__ */ jsx("span", { children: part.text }, i) : /* @__PURE__ */ jsxs(
+                Badge,
+                {
+                  variant: toneFor(part.trigger).variant,
+                  className: cn("gap-0.5 rounded-md pr-0.5 font-semibold", toneFor(part.trigger).className),
+                  children: [
+                    part.trigger,
+                    part.value,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Remove ${labelFor(part.trigger).toLowerCase()} ${part.trigger}${part.value}`,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          commit(parts.filter((_, j) => j !== i));
+                          inputRef.current?.focus();
+                        },
+                        className: "inline-flex size-4 items-center justify-center rounded-sm opacity-70 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3",
+                        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                },
+                i
+              )
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRef,
+                value: draft,
+                "aria-label": placeholder,
+                "aria-describedby": hintId,
+                placeholder: parts.length ? void 0 : placeholder,
+                onChange: (e) => {
+                  const v = e.target.value;
+                  if (v.endsWith(" ") && matchTag(v.trimEnd().split(" ").pop() ?? "")) flush(v.trimEnd());
+                  else setDraft(v);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === " " && matchTag(lastWord)) {
+                    e.preventDefault();
+                    flush();
+                  } else if (e.key === "Enter") {
+                    e.preventDefault();
+                    submit();
+                  } else if (e.key === "Backspace" && draft === "" && parts.length) {
+                    e.preventDefault();
+                    const last = parts[parts.length - 1];
+                    commit(parts.slice(0, -1));
+                    if (last.type === "text") setDraft(last.text);
+                  }
+                },
+                className: "h-7 min-w-[8rem] flex-1 border-0 px-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("p", { id: hintId, className: "sr-only", children: [
+        triggers.map((t) => `${t.trigger} for ${t.label.toLowerCase()}`).join(", "),
+        ". Space turns a tag into a chip; Backspace removes the last one; Enter sends."
+      ] }),
+      activeTrigger && suggestions.length > 0 && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": `${activeTrigger.label} suggestions`, className: "flex flex-wrap gap-1", children: suggestions.map((s) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          className: "h-7 px-2",
+          onClick: () => {
+            flush(draft, { trigger: activeTrigger.trigger, value: s });
+            inputRef.current?.focus();
+          },
+          children: [
+            activeTrigger.trigger,
+            s
+          ]
+        },
+        s
+      )) }),
+      onSubmit && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "cta",
+          size: "sm",
+          onClick: submit,
+          disabled: parts.length === 0 && draft.trim() === "",
+          children: submitLabel
+        }
+      ) })
+    ] });
+  }
+);
+StructuredInputTags.displayName = "StructuredInputTags";
+var StructuredInputWizard = React.forwardRef(
+  ({
+    steps,
+    step: stepProp,
+    defaultStep = 0,
+    onStepChange,
+    description,
+    onSubmit,
+    submitLabel = "Generate",
+    allowEarlySubmit = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React.useState(defaultStep);
+    const step = Math.min(Math.max(stepProp ?? internal, 0), Math.max(steps.length - 1, 0));
+    const headingRef = React.useRef(null);
+    const headingId = React.useId();
+    const moved = React.useRef(false);
+    React.useEffect(() => {
+      if (moved.current) headingRef.current?.focus();
+    }, [step]);
+    const go = (next) => {
+      moved.current = true;
+      if (stepProp === void 0) setInternal(next);
+      onStepChange?.(next);
+    };
+    const last = step === steps.length - 1;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-labelledby": headingId,
+        className: cn("flex flex-col gap-3 rounded-xl border border-border bg-background p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1", "aria-hidden": "true", children: steps.map((_, i) => /* @__PURE__ */ jsx("span", { className: cn("h-1 flex-1 rounded-full", i <= step ? "bg-brand" : "bg-muted") }, i)) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("p", { ref: headingRef, id: headingId, tabIndex: -1, className: "text-sm font-semibold text-foreground outline-none", children: [
+              "Step ",
+              step + 1,
+              " of ",
+              steps.length,
+              " \xB7 ",
+              steps[step]
+            ] }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          children,
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            step > 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => go(step - 1), children: "Back" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+            !last && allowEarlySubmit && onSubmit && /* @__PURE__ */ jsxs(Button, { variant: "link", size: "sm", onClick: onSubmit, children: [
+              submitLabel,
+              " now"
+            ] }),
+            last ? onSubmit && /* @__PURE__ */ jsx(Button, { variant: "cta", size: "sm", onClick: onSubmit, children: submitLabel }) : /* @__PURE__ */ jsx(Button, { variant: "cta", size: "sm", onClick: () => go(step + 1), children: "Next" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StructuredInputWizard.displayName = "StructuredInputWizard";
 
-export { StructuredInput };
+export { StructuredInput, StructuredInputSlots, StructuredInputTags, StructuredInputWizard, structuredPartsToText };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map