@nucleux/md3-structured-input 0.0.0-stage → 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,43 @@
-# Temporary Holding Version
+# @nucleux/md3-structured-input
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Material 3 Structured Input — a compact form for exact values, suggestions marked and every value yours — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+This is the Material 3 twin of [`@nucleux/structured-input`](https://www.npmjs.com/package/@nucleux/structured-input) (`StructuredInput`). It shares the twin's API exactly — the props types are the twin's own — so you can switch families by changing only the import. Only the look differs: MD3 colour roles, shape, elevation, state layers and motion (stilled under reduced motion).
+
+## Exports
+
+- **`Md3StructuredInput`** — a clarifying question as MD3 radio / checkbox rows, free-text escape and skip
+- **`Md3StructuredInputSlots`** — 2–4 labelled MD3 outlined fields; “Suggested” marks become “Edited by you”
+- **`Md3StructuredInputTags`** — `@` / `p:` / `/` tags become tonal input chips, suggestions as MD3 suggestion chips
+- **`Md3StructuredInputWizard`** — multi-step MD3 card with a segmented progress track
+- **`structuredPartsToText`** — re-exported from `@nucleux/structured-input`
+- Types: `Md3StructuredInputProps`, `Md3StructuredInputSlotsProps`, `Md3StructuredInputTagsProps`, `Md3StructuredInputWizardProps`, `StructuredOption`, `StructuredInputSlot`, `StructuredInputValues`, `StructuredInputTagTrigger`, `StructuredInputPart`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-structured-input @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3StructuredInput } from "@nucleux/md3-structured-input";
+
+<Md3StructuredInput
+  question="Which audience is this for?"
+  options={[{ value: "execs", label: "Executives" }, { value: "eng", label: "Engineers" }]}
+  onSubmit={(values) => answer(values)}
+/>
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,562 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var md3Button = require('@nucleux/md3-button');
+var md3Card = require('@nucleux/md3-card');
+var md3Chip = require('@nucleux/md3-chip');
+var structuredInput = require('@nucleux/structured-input');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var stateLayer = "before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]";
+var fieldClass = utils.cn(
+  "w-full rounded-md-xs border border-md-outline bg-transparent px-4 text-base text-md-on-surface outline-none transition-colors",
+  "placeholder:text-md-on-surface-variant hover:border-md-on-surface",
+  "focus:border-md-primary focus:ring-1 focus:ring-inset focus:ring-md-primary",
+  "disabled:cursor-not-allowed disabled:opacity-[0.38]"
+);
+var Md3StructuredInput = React__namespace.forwardRef(
+  ({
+    question,
+    options,
+    multiple = false,
+    value,
+    defaultValue = [],
+    onValueChange,
+    allowOther = false,
+    otherPlaceholder = "Something else\u2026",
+    onSubmit,
+    onSkip,
+    submitLabel = "Continue",
+    skipLabel = "Skip",
+    className,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React__namespace.useState(defaultValue);
+    const [other, setOther] = React__namespace.useState("");
+    const questionId = React__namespace.useId();
+    const groupRef = React__namespace.useRef(null);
+    const selected = value !== void 0 ? value : internal;
+    const setSelected = (next) => {
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    const toggle = (val) => {
+      if (multiple) {
+        setSelected(selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val]);
+      } else {
+        setSelected([val]);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      md3Card.Md3Card,
+      {
+        ref,
+        variant: "outlined",
+        className: utils.cn("flex flex-col gap-4 rounded-md-lg p-5 animate-nx-fade-in motion-reduce:animate-none", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { id: questionId, className: "text-base font-medium tracking-[0.15px] text-md-on-surface", children: question }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: groupRef,
+              role: multiple ? "group" : "radiogroup",
+              "aria-labelledby": questionId,
+              className: "flex flex-col gap-1",
+              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__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: multiple ? "checkbox" : "radio",
+                    "aria-checked": active,
+                    tabIndex: tabbable ? 0 : -1,
+                    onClick: () => toggle(option.value),
+                    className: utils.cn(
+                      "relative flex min-h-12 items-center gap-4 overflow-hidden rounded-md-md px-3 py-2 text-left text-sm transition-colors duration-200 motion-reduce:transition-none",
+                      stateLayer,
+                      "outline-none focus-visible:ring-2 focus-visible:ring-md-primary",
+                      active ? "bg-md-secondary-container text-md-on-secondary-container" : "text-md-on-surface"
+                    ),
+                    children: [
+                      multiple ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: utils.cn(
+                            "relative inline-flex size-[18px] shrink-0 items-center justify-center rounded-[2px] border-2 transition-colors [&_svg]:size-3.5",
+                            active ? "border-md-primary bg-md-primary text-md-on-primary" : "border-md-on-surface-variant"
+                          ),
+                          children: active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { strokeWidth: 3, "aria-hidden": "true" })
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: utils.cn(
+                            "relative inline-flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                            active ? "border-md-primary" : "border-md-on-surface-variant"
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: utils.cn(
+                                "size-2.5 rounded-full bg-md-primary transition-transform duration-200 motion-reduce:transition-none",
+                                active ? "scale-100" : "scale-0"
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative flex-1", children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          ),
+          allowOther && /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: other,
+              onChange: (e) => setOther(e.target.value),
+              placeholder: otherPlaceholder,
+              "aria-label": otherPlaceholder,
+              className: utils.cn(fieldClass, "h-12")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            onSkip && /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: onSkip, children: skipLabel }),
+            onSubmit && /* @__PURE__ */ jsxRuntime.jsx(
+              md3Button.Md3Button,
+              {
+                variant: "filled",
+                onClick: () => onSubmit(selected, allowOther ? other : void 0),
+                disabled: selected.length === 0 && !(allowOther && other.trim()),
+                children: submitLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Md3StructuredInput.displayName = "Md3StructuredInput";
+var Md3StructuredInputSlots = React__namespace.forwardRef(
+  ({
+    slots,
+    values: valuesProp,
+    defaultValues,
+    onValuesChange,
+    freeform = false,
+    onSubmit,
+    submitLabel = "Generate",
+    label = "Structured prompt builder",
+    className,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React__namespace.useState(defaultValues ?? {});
+    const values = valuesProp ?? internal;
+    const [edited, setEdited] = React__namespace.useState({});
+    const [extra, setExtra] = React__namespace.useState("");
+    const baseId = React__namespace.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__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        ref,
+        "aria-label": label,
+        className: utils.cn("grid grid-cols-1 gap-4 text-md-on-surface 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 isEdited = !!edited[slot.name];
+            const mark = slot.suggested ? isEdited ? "edited" : "suggested" : null;
+            const describedBy = slot.helper || mark === "suggested" ? helperId : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-1.5", slot.wide && "sm:col-span-2"), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-6 items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-xs font-medium tracking-[0.5px] text-md-on-surface-variant", children: slot.label }),
+                mark && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: utils.cn(
+                      "inline-flex h-6 items-center gap-1 rounded-md-sm px-2 text-[11px] font-medium tracking-[0.5px] [&_svg]:size-3.5",
+                      mark === "suggested" ? "bg-md-primary-container text-md-on-primary-container" : "bg-md-surface-container-high text-md-on-surface-variant"
+                    ),
+                    children: [
+                      mark === "suggested" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPen, { "aria-hidden": "true" }),
+                      mark === "suggested" ? "Suggested" : "Edited by you"
+                    ]
+                  }
+                )
+              ] }),
+              slot.options ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
+                {
+                  id,
+                  value: values[slot.name] ?? "",
+                  "aria-describedby": describedBy,
+                  onChange: (e) => setValue(slot.name, e.target.value),
+                  className: utils.cn(fieldClass, "h-14 cursor-pointer", !values[slot.name] && "text-md-on-surface-variant"),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: slot.placeholder ?? "Choose\u2026" }),
+                    slot.options.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: typeof o.label === "string" || typeof o.label === "number" ? o.label : o.value }, o.value))
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  id,
+                  type: "text",
+                  value: values[slot.name] ?? "",
+                  placeholder: slot.placeholder,
+                  "aria-describedby": describedBy,
+                  onChange: (e) => setValue(slot.name, e.target.value),
+                  className: utils.cn(fieldClass, "h-14")
+                }
+              ),
+              describedBy && /* @__PURE__ */ jsxRuntime.jsxs("p", { id: helperId, className: "px-4 text-xs text-md-on-surface-variant", children: [
+                mark === "suggested" ? `Suggested ${slot.suggested}. ` : "",
+                slot.helper
+              ] })
+            ] }, slot.name);
+          }),
+          freeform && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 sm:col-span-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: `${baseId}-freeform`,
+                className: "text-xs font-medium tracking-[0.5px] text-md-on-surface-variant",
+                children: freeformLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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),
+                className: utils.cn(fieldClass, "resize-none py-3")
+              }
+            )
+          ] }),
+          onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end sm:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { type: "submit", variant: "filled", disabled: !hasAny, children: submitLabel }) })
+        ]
+      }
+    );
+  }
+);
+Md3StructuredInputSlots.displayName = "Md3StructuredInputSlots";
+var DEFAULT_TRIGGERS = [
+  { trigger: "@", label: "Person" },
+  { trigger: "p:", label: "Project" },
+  { trigger: "/", label: "File" }
+];
+var TAG_TONES = [
+  "bg-md-primary-container text-md-on-primary-container",
+  "bg-md-secondary-container text-md-on-secondary-container",
+  "bg-md-tertiary-container text-md-on-tertiary-container",
+  "bg-md-surface-container-high text-md-on-surface"
+];
+var Md3StructuredInputTags = React__namespace.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__namespace.useState(defaultValue ?? []);
+    const parts = valueProp ?? internal;
+    const [draft, setDraft] = React__namespace.useState("");
+    const inputRef = React__namespace.useRef(null);
+    const hintId = React__namespace.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 = structuredInput.structuredPartsToText(next);
+      if (text) onSubmit?.(next, text);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("flex flex-col gap-2 text-md-on-surface", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: utils.cn(
+            "flex min-h-14 flex-wrap items-center gap-1.5 rounded-md-xs border border-md-outline bg-transparent px-3 py-2 text-base text-md-on-surface transition-colors",
+            "hover:border-md-on-surface focus-within:border-md-primary focus-within:ring-1 focus-within:ring-inset focus-within:ring-md-primary"
+          ),
+          onClick: () => inputRef.current?.focus(),
+          children: [
+            parts.map(
+              (part, i) => part.type === "text" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: part.text }, i) : /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: utils.cn(
+                    "inline-flex h-7 items-center gap-0.5 rounded-md-sm pl-2 pr-0.5 text-sm font-medium animate-nx-fade-in motion-reduce:animate-none",
+                    toneFor(part.trigger)
+                  ),
+                  children: [
+                    part.trigger,
+                    part.value,
+                    /* @__PURE__ */ jsxRuntime.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: utils.cn(
+                          "relative inline-flex size-6 items-center justify-center overflow-hidden rounded-full [&_svg]:size-3.5",
+                          stateLayer,
+                          "outline-none focus-visible:ring-2 focus-visible:ring-md-primary"
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "relative", "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                },
+                i
+              )
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                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-8 min-w-[8rem] flex-1 bg-transparent text-base text-md-on-surface outline-none placeholder:text-md-on-surface-variant"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": `${activeTrigger.label} suggestions`, className: "flex flex-wrap gap-2", children: suggestions.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+        md3Chip.Md3Chip,
+        {
+          variant: "suggestion",
+          onClick: () => {
+            flush(draft, { trigger: activeTrigger.trigger, value: s });
+            inputRef.current?.focus();
+          },
+          children: [
+            activeTrigger.trigger,
+            s
+          ]
+        },
+        s
+      )) }),
+      onSubmit && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "filled", onClick: submit, disabled: parts.length === 0 && draft.trim() === "", children: submitLabel }) })
+    ] });
+  }
+);
+Md3StructuredInputTags.displayName = "Md3StructuredInputTags";
+var Md3StructuredInputWizard = React__namespace.forwardRef(
+  ({
+    steps,
+    step: stepProp,
+    defaultStep = 0,
+    onStepChange,
+    description,
+    onSubmit,
+    submitLabel = "Generate",
+    allowEarlySubmit = true,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React__namespace.useState(defaultStep);
+    const step = Math.min(Math.max(stepProp ?? internal, 0), Math.max(steps.length - 1, 0));
+    const headingRef = React__namespace.useRef(null);
+    const headingId = React__namespace.useId();
+    const moved = React__namespace.useRef(false);
+    React__namespace.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__ */ jsxRuntime.jsxs(
+      md3Card.Md3Card,
+      {
+        ref,
+        variant: "outlined",
+        role: "group",
+        "aria-labelledby": headingId,
+        className: utils.cn("flex flex-col gap-3 rounded-md-lg p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", "aria-hidden": "true", children: steps.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: utils.cn(
+                "h-1 flex-1 rounded-full transition-colors duration-300 motion-reduce:transition-none",
+                i <= step ? "bg-md-primary" : "bg-md-secondary-container"
+              )
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "p",
+              {
+                ref: headingRef,
+                id: headingId,
+                tabIndex: -1,
+                className: "rounded-md-xs text-sm font-medium tracking-[0.1px] text-md-on-surface outline-none focus-visible:ring-2 focus-visible:ring-md-primary",
+                children: [
+                  "Step ",
+                  step + 1,
+                  " of ",
+                  steps.length,
+                  " \xB7 ",
+                  steps[step]
+                ]
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-md-on-surface-variant", children: description })
+          ] }),
+          children,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            step > 0 && /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: () => go(step - 1), children: "Back" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+            !last && allowEarlySubmit && onSubmit && /* @__PURE__ */ jsxRuntime.jsxs(md3Button.Md3Button, { variant: "text", onClick: onSubmit, children: [
+              submitLabel,
+              " now"
+            ] }),
+            last ? onSubmit && /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "filled", onClick: onSubmit, children: submitLabel }) : /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "filled", onClick: () => go(step + 1), children: "Next" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Md3StructuredInputWizard.displayName = "Md3StructuredInputWizard";
+
+Object.defineProperty(exports, "structuredPartsToText", {
+  enumerable: true,
+  get: function () { return structuredInput.structuredPartsToText; }
+});
+exports.Md3StructuredInput = Md3StructuredInput;
+exports.Md3StructuredInputSlots = Md3StructuredInputSlots;
+exports.Md3StructuredInputTags = Md3StructuredInputTags;
+exports.Md3StructuredInputWizard = Md3StructuredInputWizard;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map