@nucleux/md3-modes 0.0.0-stage → 0.8.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,51 @@
-# Temporary Holding Version
+# @nucleux/md3-modes
 
-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 Modes — choose how the agent approaches a request (Brainstorm, Draft, Review, Plan), shown as a chip in the composer and switchable before sending — 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).
+
+**Same API as the shadcn twin.** The props, callbacks, states, keyboard model and accessible names are those of [`@nucleux/modes`](https://www.npmjs.com/package/@nucleux/modes) (`Modes`) — the props types are re-exported from it and the state logic (`useModes`) is shared — so you switch families by changing only the import. Only the look differs: Material 3 colour roles, shape, elevation, state layers and motion (reduced under `prefers-reduced-motion`). In the `composer` variant the Mode chip sits in an `Md3AgentComposer` toolbar and the picker grows up from the composer.
+
+## Exports
+
+- **`Md3Modes`** — the whole pattern (`variant`: `composer` · `segmented` · `list` · `chip`)
+- **`Md3ModesSegmented`** — an `Md3SegmentedButton` of modes (radio group)
+- **`Md3ModesList`** — mode rows: 40dp icon tile, name, what changes, unavailable reason, trailing check
+- **`Md3ModesChip`** — outlined "Mode ▾" assist chip, or tonal "Mode **Plan** ▾ ×" once set
+- **`Md3ModesPicker`** — the menu-surface dialog: heading, rows, error-container alert, "No mode"
+- **`Md3ModesNote`** — "Mode changed to … Your text is unchanged." with Undo
+- Types: `Md3ModesProps`, `Md3ModeOption`, `Md3ModesVariant`, `Md3ModesNotice`, `Md3ModesSubmitDetails`, and each sub-component's `Md3…Props`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-modes @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3Modes } from "@nucleux/md3-modes";
+import { Flag, Lightbulb, NotebookPen, Eye } from "lucide-react";
+
+<Md3Modes
+  modes={[
+    { id: "brainstorm", name: "Brainstorm", icon: <Lightbulb />, description: "Explore several possible directions." },
+    { id: "draft", name: "Draft", icon: <NotebookPen />, description: "Write a first version you can edit." },
+    { id: "review", name: "Review", icon: <Eye />, description: "Check existing work for gaps and risks." },
+    { id: "plan", name: "Plan", icon: <Flag />, description: "Break the work into steps with owners and dates." },
+  ]}
+  onSubmit={(text, { mode }) => send(text, { mode: mode?.id })}
+/>
+```
+
+`sendLabel` is accepted for API parity; the send button is named by `Md3AgentComposer` ("Send").
+
+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,520 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var modes = require('@nucleux/modes');
+var md3OpenInput = require('@nucleux/md3-open-input');
+var md3AgentComposer = require('@nucleux/md3-agent-composer');
+var md3Button = require('@nucleux/md3-button');
+var md3Chip = require('@nucleux/md3-chip');
+var md3IconButton = require('@nucleux/md3-icon-button');
+var md3Menu = require('@nucleux/md3-menu');
+var md3SegmentedButton = require('@nucleux/md3-segmented-button');
+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:pointer-events-none 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] motion-reduce:before:transition-none";
+var Md3ModesSegmented = React__namespace.forwardRef(
+  ({ modes: modes$1, value, onSelect, label = "Mode", className, ...props }, ref) => {
+    const roving = modes.useModesRoving(modes$1, value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      md3SegmentedButton.Md3SegmentedButton,
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": label,
+        value: value ?? "",
+        className: utils.cn("divide-md-outline-variant border-md-outline-variant", className),
+        ...props,
+        children: modes$1.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          md3SegmentedButton.Md3SegmentedButtonItem,
+          {
+            value: m.id,
+            icon: m.icon,
+            role: "radio",
+            "aria-checked": m.id === value,
+            "aria-pressed": void 0,
+            "aria-disabled": m.unavailable ? true : void 0,
+            title: m.unavailable,
+            ...roving.getItemProps(i),
+            onClick: () => onSelect(m.id),
+            className: utils.cn("min-w-[5.5rem] motion-reduce:transition-none", m.unavailable && "cursor-not-allowed opacity-[0.38]"),
+            children: m.shortName ?? m.name
+          },
+          m.id
+        ))
+      }
+    );
+  }
+);
+Md3ModesSegmented.displayName = "Md3ModesSegmented";
+var Md3ModesList = React__namespace.forwardRef(
+  ({ modes: modes$1, value, onSelect, label = "Mode", showDescriptions = true, framed = true, className, ...props }, ref) => {
+    const roving = modes.useModesRoving(modes$1, value);
+    const baseId = React__namespace.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": label,
+        className: utils.cn(
+          "flex flex-col gap-0.5",
+          framed && "rounded-md-lg border border-md-outline-variant bg-md-surface p-2",
+          className
+        ),
+        ...props,
+        children: modes$1.map((m, i) => {
+          const on = m.id === value;
+          const support = modes.modeSupportingText(m, showDescriptions);
+          const descId = `${baseId}-${i}`;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": on,
+              "aria-disabled": m.unavailable ? true : void 0,
+              "aria-labelledby": `${descId}-n`,
+              "aria-describedby": support || m.unavailable ? descId : void 0,
+              ...roving.getItemProps(i),
+              onClick: () => onSelect(m.id),
+              className: utils.cn(
+                "relative flex min-h-14 w-full items-center gap-3 overflow-hidden rounded-md-md px-3 py-2.5 text-left transition-colors motion-reduce:transition-none",
+                stateLayer,
+                "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-md-primary",
+                on ? "bg-md-secondary-container text-md-on-secondary-container" : "text-md-on-surface",
+                m.unavailable && "cursor-not-allowed"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: utils.cn(
+                      "relative grid size-10 shrink-0 place-items-center rounded-md-md text-base [&_svg]:size-[22px]",
+                      on ? "bg-md-primary text-md-on-primary" : "bg-md-surface-container-high text-md-on-surface-variant",
+                      m.unavailable && "opacity-[0.55]"
+                    ),
+                    children: m.icon
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { id: `${descId}-n`, className: utils.cn("text-sm font-medium leading-5", m.unavailable && "opacity-[0.55]"), children: m.name }),
+                  (support || m.unavailable) && /* @__PURE__ */ jsxRuntime.jsxs("span", { id: descId, className: "flex flex-col gap-0.5 text-xs leading-[18px]", children: [
+                    support && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(on ? "text-current" : "text-md-on-surface-variant", m.unavailable && "opacity-[0.55]"), children: support }),
+                    m.unavailable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-md-on-surface", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+                      m.unavailable
+                    ] })
+                  ] })
+                ] }),
+                on && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: "relative size-[22px] shrink-0 text-md-on-secondary-container" })
+              ]
+            },
+            m.id
+          );
+        })
+      }
+    );
+  }
+);
+Md3ModesList.displayName = "Md3ModesList";
+var Md3ModesChip = React__namespace.forwardRef(
+  ({ mode, label = "Mode", open = false, onRemove, className, ...props }, ref) => {
+    const chevron = /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.ChevronDown,
+      {
+        "aria-hidden": "true",
+        className: utils.cn("relative -mr-1 size-[18px] transition-transform motion-reduce:transition-none", open && "rotate-180")
+      }
+    );
+    if (!mode) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        md3Chip.Md3Chip,
+        {
+          ref,
+          variant: "assist",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { "aria-hidden": "true" }),
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": modes.modesLabels.chip(label, null),
+          className: utils.cn("shrink-0 border-md-outline-variant font-normal [&_svg]:size-4", open && "border-md-primary", className),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            label,
+            chevron
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: utils.cn(
+          "inline-flex h-8 shrink-0 items-center rounded-md-sm bg-md-secondary-container text-md-on-secondary-container animate-nx-fade-in motion-reduce:animate-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            md3Chip.Md3Chip,
+            {
+              ref,
+              variant: "assist",
+              selected: true,
+              icon: mode.icon,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              "aria-label": modes.modesLabels.chip(label, mode),
+              className: utils.cn("bg-transparent pl-2 font-normal [&_svg]:size-4", onRemove ? "rounded-r-none pr-1.5" : "pr-2.5"),
+              ...props,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[18ch] truncate font-semibold", children: mode.shortName ?? mode.name }),
+                chevron
+              ] })
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            md3IconButton.Md3IconButton,
+            {
+              "aria-label": modes.modesLabels.remove(label, mode),
+              onClick: onRemove,
+              className: "h-8 w-7 rounded-none rounded-r-md-sm pr-1 text-current focus-visible:ring-offset-0 [&_svg]:size-3.5",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Md3ModesChip.displayName = "Md3ModesChip";
+var Md3ModesPicker = React__namespace.forwardRef(
+  ({
+    modes: modes$1,
+    value,
+    onSelect,
+    onClear,
+    onClose,
+    label = "Mode",
+    description = "How the agent approaches this request. Model and effort stay as they are.",
+    rejected,
+    showDescriptions = true,
+    autoFocus = false,
+    showClose = false,
+    className,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const listRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      if (!autoFocus) return;
+      const el = listRef.current?.querySelector('[role="radio"][aria-checked="true"]') ?? listRef.current?.querySelector('[role="radio"]');
+      el?.focus();
+    }, [autoFocus]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      md3Menu.Md3Menu,
+      {
+        ref,
+        role: "dialog",
+        "aria-label": modes.modesLabels.picker(label),
+        className: utils.cn(
+          "min-w-[18rem] rounded-md-lg border border-md-outline-variant bg-md-surface p-2 shadow-md-2 animate-nx-fade-in motion-reduce:animate-none",
+          className
+        ),
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose?.();
+          }
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col gap-0.5 px-3 pb-2 pt-2.5", showClose && "pr-12"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium leading-6 text-md-on-surface", children: label }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-[18px] text-md-on-surface-variant", children: description }),
+            showClose && /* @__PURE__ */ jsxRuntime.jsx(md3IconButton.Md3IconButton, { "aria-label": modes.modesLabels.close, onClick: onClose, className: "absolute right-0 top-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Md3ModesList,
+            {
+              ref: listRef,
+              modes: modes$1,
+              value,
+              onSelect,
+              label,
+              framed: false,
+              showDescriptions
+            }
+          ),
+          rejected && /* @__PURE__ */ jsxRuntime.jsxs(
+            "p",
+            {
+              role: "alert",
+              className: "mx-2 mb-1 mt-2 flex items-center gap-2 rounded-md-md bg-md-error-container px-3 py-2 text-[13px] leading-5 text-md-on-error-container",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-[18px] shrink-0" }),
+                modes.modesLabels.unavailable(rejected)
+              ]
+            }
+          ),
+          onClear && value != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: onClear, children: modes.modesLabels.clear }) })
+        ]
+      }
+    );
+  }
+);
+Md3ModesPicker.displayName = "Md3ModesPicker";
+var Md3ModesNote = React__namespace.forwardRef(
+  ({ onUndo, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex items-center gap-2 px-2 text-[13px] leading-5 text-md-on-surface-variant animate-nx-fade-in motion-reduce:animate-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { "aria-hidden": "true", className: "size-[18px] shrink-0 text-md-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children }),
+        onUndo && /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: onUndo, className: "h-8 px-2", children: modes.modesLabels.undo })
+      ]
+    }
+  )
+);
+Md3ModesNote.displayName = "Md3ModesNote";
+var Md3Modes = React__namespace.forwardRef(
+  ({
+    modes: modes$1,
+    value,
+    defaultValue,
+    onValueChange,
+    variant = "composer",
+    open,
+    defaultOpen,
+    onOpenChange,
+    clearable = true,
+    showDescriptions = true,
+    label = "Mode",
+    pickerDescription,
+    defaultNotice,
+    onUnavailable,
+    draft: draftProp,
+    defaultDraft = "",
+    onDraftChange,
+    onSubmit,
+    placeholder = "Ask Aria\u2026",
+    composerLeading,
+    composerActions,
+    sendLabel: _sendLabel,
+    trigger = "chip",
+    settingsItems,
+    onSettingsSelect,
+    className,
+    ...props
+  }, ref) => {
+    const s = modes.useModes({
+      modes: modes$1,
+      value,
+      defaultValue,
+      onValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      defaultNotice,
+      onUnavailable
+    });
+    const [internalDraft, setInternalDraft] = React__namespace.useState(defaultDraft);
+    const draft = draftProp ?? internalDraft;
+    const setDraft = (t) => {
+      if (draftProp === void 0) setInternalDraft(t);
+      onDraftChange?.(t);
+    };
+    const chipRef = React__namespace.useRef(null);
+    const chipBoxRef = React__namespace.useRef(null);
+    const pickerRef = React__namespace.useRef(null);
+    const [userOpened, setUserOpened] = React__namespace.useState(false);
+    modes.useModesDismiss([chipBoxRef, pickerRef], s.open, () => s.setOpen(false));
+    const [refocus, setRefocus] = React__namespace.useState(0);
+    React__namespace.useEffect(() => {
+      if (refocus) chipRef.current?.focus();
+    }, [refocus]);
+    const choose = (id) => {
+      const m = modes$1.find((x) => x.id === id);
+      const wasOpen = s.open;
+      s.select(id);
+      if (wasOpen && m && !m.unavailable) setRefocus((n) => n + 1);
+    };
+    const clearMode = () => {
+      s.clear();
+      setRefocus((n) => n + 1);
+    };
+    const undoChange = () => {
+      s.undo();
+      setRefocus((n) => n + 1);
+    };
+    const closePicker = () => {
+      s.setOpen(false);
+      setRefocus((n) => n + 1);
+    };
+    const notice = s.notice;
+    const rejected = notice?.type === "unavailable" ? modes$1.find((m) => m.id === notice.id) ?? null : null;
+    const changedTo = notice?.type === "changed" ? s.mode : null;
+    const note = changedTo ? /* @__PURE__ */ jsxRuntime.jsx(Md3ModesNote, { onUndo: undoChange, children: modes.modesLabels.changed(changedTo) }) : null;
+    const inlineAlert = rejected && !s.open ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        role: "alert",
+        className: "flex items-center gap-2 rounded-md-md bg-md-error-container px-3 py-2 text-[13px] leading-5 text-md-on-error-container",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { "aria-hidden": "true", className: "size-[18px] shrink-0" }),
+          modes.modesLabels.unavailable(rejected)
+        ]
+      }
+    ) : null;
+    const chip = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: chipBoxRef, className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Md3ModesChip,
+      {
+        ref: chipRef,
+        mode: s.mode,
+        label,
+        open: s.open,
+        onClick: () => {
+          setUserOpened(!s.open);
+          s.setOpen(!s.open);
+        },
+        onRemove: clearable ? clearMode : void 0
+      }
+    ) });
+    const settings = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: chipBoxRef, className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+      md3OpenInput.Md3RequestSettings,
+      {
+        ref: chipRef,
+        items: md3OpenInput.mergeRequestSettingsItems(modes.modesSettingsItem(label, s.mode, /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, {})), settingsItems),
+        onSelect: (id) => {
+          if (id !== "mode") return onSettingsSelect?.(id);
+          setUserOpened(true);
+          s.setOpen(true);
+        },
+        onOpenChange: (o) => {
+          if (o && s.open) s.setOpen(false);
+        },
+        className: variant === "composer" ? "static [&>[role=menu]]:left-10" : void 0
+      }
+    ) });
+    const control = trigger === "settings" ? settings : chip;
+    const picker = s.open ? /* @__PURE__ */ jsxRuntime.jsx(
+      Md3ModesPicker,
+      {
+        ref: pickerRef,
+        modes: modes$1,
+        value: s.value,
+        onSelect: choose,
+        onClear: clearable ? clearMode : void 0,
+        onClose: closePicker,
+        label,
+        description: pickerDescription,
+        rejected,
+        showDescriptions,
+        autoFocus: userOpened,
+        showClose: trigger === "settings",
+        className: utils.cn(
+          "absolute z-50",
+          variant === "chip" ? "bottom-full left-0 mb-2 w-[22rem]" : "inset-x-0 bottom-full mb-2"
+        )
+      }
+    ) : null;
+    const live = /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: s.announcement });
+    if (variant === "segmented" || variant === "list") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("flex flex-col gap-2", variant === "segmented" && "items-start", className), ...props, children: [
+        variant === "segmented" ? /* @__PURE__ */ jsxRuntime.jsx(Md3ModesSegmented, { modes: modes$1, value: s.value, onSelect: s.select, label }) : /* @__PURE__ */ jsxRuntime.jsx(
+          Md3ModesList,
+          {
+            modes: modes$1,
+            value: s.value,
+            onSelect: s.select,
+            label,
+            showDescriptions,
+            className: "w-full max-w-[30rem]"
+          }
+        ),
+        inlineAlert,
+        note,
+        live
+      ] });
+    }
+    if (variant === "chip") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("relative inline-flex flex-col items-start gap-2", className), ...props, children: [
+        control,
+        picker,
+        note,
+        live
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: utils.cn("relative flex w-full max-w-[38rem] flex-col gap-2", className), ...props, children: [
+      picker,
+      note,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        md3AgentComposer.Md3AgentComposer,
+        {
+          value: draft,
+          onValueChange: setDraft,
+          onSubmit: (text) => {
+            onSubmit?.(text, { mode: s.mode });
+            s.dismissNotice();
+            if (draftProp === void 0) setInternalDraft("");
+          },
+          placeholder,
+          leftActions: trigger === "settings" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            composerLeading,
+            settings
+          ] }) : composerLeading,
+          rightActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            trigger === "chip" && chip,
+            composerActions
+          ] }),
+          className: utils.cn(
+            "relative gap-2 rounded-md-xl border border-md-outline-variant bg-md-surface px-4 pb-2.5 pt-4 shadow-md-1"
+          )
+        }
+      ),
+      live
+    ] });
+  }
+);
+Md3Modes.displayName = "Md3Modes";
+
+exports.Md3Modes = Md3Modes;
+exports.Md3ModesChip = Md3ModesChip;
+exports.Md3ModesList = Md3ModesList;
+exports.Md3ModesNote = Md3ModesNote;
+exports.Md3ModesPicker = Md3ModesPicker;
+exports.Md3ModesSegmented = Md3ModesSegmented;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map