@smwb/ui-solid 0.13.0 → 0.14.0

package/dist/components/feedBack/modal/modal.js

@@ -1,14 +1,15 @@
-import { createComponent as c, Portal as y, use as g, insert as s, Dynamic as k, mergeProps as C, effect as l, className as i, isServer as $, template as _, delegateEvents as O } from "solid-js/web";
+import { createComponent as p, Portal as E, use as k, insert as s, Dynamic as $, mergeProps as A, effect as l, className as i, isServer as O, template as b, delegateEvents as h } from "solid-js/web";
 import '../../../assets/styles/less/components/modal/modal.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { mergeProps as A, splitProps as E, createEffect as h, onCleanup as P, Show as x } from "solid-js";
-import n from "clsx";
-import { createCssTransition as F } from "../../../primitives/createCssTransition.js";
-import { createFocusTrap as L } from "../../../primitives/createFocusTrap.js";
-import { isTopOverlayLayer as S } from "../../../primitives/overlayLayer.js";
-import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
-var D = /* @__PURE__ */ _("<div data-smwb-overlay-layer>"), d = /* @__PURE__ */ _("<div>");
-const M = {
+import { mergeProps as x, splitProps as F, createSignal as P, createEffect as v, on as S, onCleanup as _, Show as L } from "solid-js";
+import a from "clsx";
+import { createCssTransition as T } from "../../../primitives/createCssTransition.js";
+import { createFocusTrap as z } from "../../../primitives/createFocusTrap.js";
+import { isTopOverlayLayer as D } from "../../../primitives/overlayLayer.js";
+import { restoreFocus as M } from "../../../primitives/restoreFocus.js";
+import { mergeRefs as N } from "../../../primitives/mergeRefs.js";
+var R = /* @__PURE__ */ b("<div data-smwb-overlay-layer>"), u = /* @__PURE__ */ b("<div>");
+const j = {
   appear: "smwb-modal__overlay-appear",
   appearActive: "smwb-modal__overlay-appear-active",
   appearDone: "smwb-modal__overlay-appear-done",
@@ -18,8 +19,13 @@ const M = {
   exit: "smwb-modal__overlay-exit",
   exitActive: "smwb-modal__overlay-exit-active"
 };
-function N(o) {
-  const r = A({
+function q(r) {
+  if (!r || typeof document > "u") return !0;
+  const o = document.querySelectorAll(".smwb-modal__overlay:not(.smwb-modal__overlay-exit)");
+  return o[o.length - 1] === r;
+}
+function B(r) {
+  const o = x({
     animation: "fade",
     backdrop: "dark",
     size: "large",
@@ -28,55 +34,63 @@ function N(o) {
     disableAppearAnimation: !1,
     role: "dialog",
     closeOnEsc: !0
-  }, o), [e, f] = E(r, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]);
-  let p, u;
-  const m = F({
+  }, r), [e, w] = F(o, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]), [m, y] = P();
+  let c;
+  v(S(() => e.open, (t) => {
+    if (!t) return;
+    const n = m()?.contains(document.activeElement) ? null : document.activeElement;
+    _(() => M(n, m()));
+  }));
+  const d = T({
     in: () => e.open,
     timeout: {
       appear: 225,
       enter: 225,
       exit: 150
     },
-    classNames: M,
+    classNames: j,
     appear: !e.disableAppearAnimation
   });
-  L({
-    active: () => e.open && m.mounted(),
-    container: () => p
-  }), h(() => {
+  z({
+    active: () => e.open && d.mounted(),
+    container: m,
+    restoreFocus: !1,
+    isTopmost: () => q(c)
+  }), v(() => {
     if (!e.open || !e.closeOnEsc || !e.onClose) return;
-    const t = (a) => {
-      a.key === "Escape" && !a.defaultPrevented && S(u) && e.onClose?.();
+    const t = (n) => {
+      n.key === "Escape" && !n.defaultPrevented && D(c) && e.onClose?.();
     };
-    document.addEventListener("keydown", t), P(() => document.removeEventListener("keydown", t));
+    document.addEventListener("keydown", t), _(() => document.removeEventListener("keydown", t));
   });
-  const b = () => {
+  const g = () => {
     e.closeOnOutsideClick && e.onClose?.();
   };
-  return c(x, {
+  return p(L, {
     get when() {
-      return m.mounted();
+      return d.mounted();
     },
     get children() {
-      return c(y, {
+      return p(E, {
         get mount() {
-          return $ ? void 0 : document.body;
+          return O ? void 0 : document.body;
         },
         get children() {
-          var t = D();
-          return t.$$click = b, g((a) => u = a, t), s(t, c(k, C({
+          var t = R();
+          return t.$$click = g, k((n) => c = n, t), s(t, p($, A({
             get component() {
               return e.asForm ? "form" : "div";
             }
-          }, f, {
-            ref(a) {
-              var v = z(e.ref, (w) => p = w);
-              typeof v == "function" && v(a);
+          }, w, {
+            ref(n) {
+              var f = N(e.ref, (C) => y(C));
+              typeof f == "function" && f(n);
             },
             get class() {
-              return n("smwb-modal", `smwb-${e.size}`, `smwb-${e.animation}`, e.class);
+              return a("smwb-modal", `smwb-${e.size}`, `smwb-${e.animation}`, e.class);
             },
-            onClick: (a) => a.stopPropagation(),
+            onClick: (n) => n.stopPropagation(),
+            tabindex: -1,
             get role() {
               return e.role;
             },
@@ -84,40 +98,40 @@ function N(o) {
             get children() {
               return e.children;
             }
-          }))), l(() => i(t, n("smwb-modal__overlay", `smwb-${e.backdrop}`, `smwb-${e.size}`, m.classes()))), t;
+          }))), l(() => i(t, a("smwb-modal__overlay", `smwb-${e.backdrop}`, `smwb-${e.size}`, d.classes()))), t;
         }
       });
     }
   });
 }
-function T(o) {
+function H(r) {
   return (() => {
-    var r = d();
-    return s(r, () => o.children), l(() => i(r, n("smwb-modal__header", o.class))), r;
+    var o = u();
+    return s(o, () => r.children), l(() => i(o, a("smwb-modal__header", r.class))), o;
   })();
 }
-function R(o) {
+function K(r) {
   return (() => {
-    var r = d();
-    return s(r, () => o.children), l(() => i(r, n("smwb-modal__content", o.class))), r;
+    var o = u();
+    return s(o, () => r.children), l(() => i(o, a("smwb-modal__content", r.class))), o;
   })();
 }
-function j(o) {
+function V(r) {
   return (() => {
-    var r = d();
-    return s(r, () => o.children), l(() => i(r, n("smwb-modal__footer", o.class))), r;
+    var o = u();
+    return s(o, () => r.children), l(() => i(o, a("smwb-modal__footer", r.class))), o;
   })();
 }
-const Q = Object.assign(N, {
-  Footer: j,
-  Header: T,
-  Content: R
+const oe = Object.assign(B, {
+  Footer: V,
+  Header: H,
+  Content: K
 });
-O(["click"]);
+h(["click"]);
 export {
-  R as Content,
-  j as Footer,
-  T as Header,
-  Q as Modal
+  K as Content,
+  V as Footer,
+  H as Header,
+  oe as Modal
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/feedBack/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // Always attached and checks the props itself. Solid binds event handlers\n  // once, and the portal builds the overlay in a tracked scope, so choosing the\n  // handler by these props there would rebuild the dialog, content included,\n  // whenever one of them changes.\n  const onOverlayClick = (): void => {\n    if (local.closeOnOutsideClick) local.onClose?.();\n  };\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={onOverlayClick}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","overlayEl","transition","createCssTransition","in","open","timeout","classNames","createFocusTrap","active","mounted","container","createEffect","onClose","onKeyDown","event","key","defaultPrevented","isTopOverlayLayer","document","addEventListener","onCleanup","removeEventListener","onOverlayClick","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","$$click","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  on,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { restoreFocus } from \"../../../primitives/restoreFocus\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\n/**\n * Whether `overlay` is the last open Modal overlay; a dialog stacked above it owns Tab. Fading-out\n * ones do not count. Not `isTopOverlayLayer`: menus, select dropdowns and pickers are overlay\n * layers too, and a select dropdown open inside a Modal must not switch the Modal's trap off.\n */\nfunction isTopModal(overlay: Element | null | undefined): boolean {\n  if (!overlay || typeof document === \"undefined\") return true;\n  const open = document.querySelectorAll(\".smwb-modal__overlay:not(.smwb-modal__overlay-exit)\");\n  return open[open.length - 1] === overlay;\n}\n\n/**\n * A modal dialog: portaled to `<body>`, animated, closed by Escape or a backdrop click.\n *\n * While open it traps Tab/Shift+Tab inside the dialog and moves the focus into it (the first tab\n * stop, else the dialog itself), unless a child has already focused itself. On close, and on\n * unmount while open, the focus goes back to the element that had it when the dialog opened —\n * unless the app has moved the focus elsewhere by then.\n * Of stacked dialogs only the topmost one handles Tab.\n */\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  // A signal, not a plain `let`: the dialog is built by a portal, so on a closed→open transition\n  // the trap's effect runs before the ref below has assigned anything. A plain variable is not\n  // tracked, so the trap bailed on the empty container and never armed itself again — Tab then\n  // walked focus out of an open dialog. Writing a signal re-runs the trap once the node lands.\n  const [contentEl, setContentEl] = createSignal<HTMLDivElement | undefined>();\n  let overlayEl: HTMLDivElement | undefined;\n\n  // Created before the transition and the trap: effects run in creation order, so the opener is read\n  // before the trap's `autoFocus` moves the focus and before a child's `onMount` focuses itself.\n  createEffect(\n    on(\n      () => local.open,\n      (open) => {\n        if (!open) return;\n        // The element focused when the dialog opens gets focus back when it closes or unmounts while open,\n        // unless the app has moved focus out of the dialog by then (see restoreFocus).\n        const opener = contentEl()?.contains(document.activeElement) ? null : document.activeElement;\n        onCleanup(() => restoreFocus(opener, contentEl()));\n      }\n    )\n  );\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({\n    active: () => local.open && transition.mounted(),\n    container: contentEl,\n    restoreFocus: false,\n    isTopmost: () => isTopModal(overlayEl),\n  });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // Always attached and checks the props itself. Solid binds event handlers\n  // once, and the portal builds the overlay in a tracked scope, so choosing the\n  // handler by these props there would rebuild the dialog, content included,\n  // whenever one of them changes.\n  const onOverlayClick = (): void => {\n    if (local.closeOnOutsideClick) local.onClose?.();\n  };\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={onOverlayClick}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => setContentEl(el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            tabindex={-1}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"names":["OVERLAY_CLASSNAMES","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","isTopModal","overlay","document","open","querySelectorAll","length","ModalBase","props","merged","mergeProps","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","local","rest","splitProps","contentEl","setContentEl","createSignal","overlayEl","createEffect","on","opener","contains","activeElement","onCleanup","restoreFocus","transition","createCssTransition","in","timeout","classNames","createFocusTrap","active","mounted","container","isTopmost","onClose","onKeyDown","event","key","defaultPrevented","isTopOverlayLayer","addEventListener","removeEventListener","onOverlayClick","_$createComponent","Show","when","children","Portal","mount","isServer","undefined","body","_el$","_tmpl$","$$click","_$use","el","_$insert","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","onClick","stopPropagation","tabindex","_$effect","_$className","classes","Header","_el$2","_tmpl$2","Content","_el$3","Footer","_el$4","Modal","Object","assign","_$delegateEvents"],"mappings":"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"}

package/dist/components/inputs/button/button.d.ts

@@ -18,6 +18,18 @@ export interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTML
     color?: "primary" | "secondary" | "error" | "success" | "warning" | "info";
     /** When set, the component renders as an <a>. */
     href?: string;
+    /**
+     * Where a link (with `href`) opens. By default `"_blank"`: a new tab. `null` leaves the `target`
+     * attribute out, so the link opens in place, like an internal one; an empty string does the same, and
+     * any other string is used as is.
+     */
+    target?: string | null | undefined;
+    /**
+     * The `rel` of a link (with `href`). By default `"noreferrer"` for a link that opens another tab or
+     * window, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself
+     * if you still want it; an empty string drops the attribute.
+     */
+    rel?: string | undefined;
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     /** Stretch to the full width of the container. */

package/dist/components/inputs/button/button.js

@@ -1,16 +1,17 @@
-import { createComponent as n, use as b, spread as g, mergeProps as l, insert as h, template as _, memo as w } from "solid-js/web";
+import { createComponent as n, use as b, spread as h, mergeProps as l, insert as w, template as $, memo as v } from "solid-js/web";
 import '../../../assets/styles/less/components/button/button.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as D, splitProps as z, children as T, Show as s } from "solid-js";
+import { mergeProps as k, splitProps as D, children as z, Show as s } from "solid-js";
 import W from "clsx";
 import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
-import { useButtonGroup as k } from "../buttonGroups/buttonGroupContext.js";
-import { callHandler as C } from "../../../primitives/callHandler.js";
-import { Ripple as B } from "../../base/ripple/ripple.js";
-import { Icon as x } from "../../base/icon/icon.js";
-var A = /* @__PURE__ */ _("<a>"), E = /* @__PURE__ */ _("<button>");
-function M($) {
-  const t = k(), v = D({
+import { useButtonGroup as C } from "../buttonGroups/buttonGroupContext.js";
+import { callHandler as B } from "../../../primitives/callHandler.js";
+import { resolveLinkRel as L, resolveLinkTarget as x } from "../../../utils/linkAttrs.js";
+import { Ripple as A } from "../../base/ripple/ripple.js";
+import { Icon as E } from "../../base/icon/icon.js";
+var G = /* @__PURE__ */ $("<a>"), H = /* @__PURE__ */ $("<button>");
+function U(_) {
+  const t = C(), R = k({
     get variant() {
       return t?.variant ?? "contained";
     },
@@ -20,12 +21,14 @@ function M($) {
     get colorTheme() {
       return t?.colorTheme ?? "primary";
     }
-  }, $), [e, a] = z(v, [
+  }, _), [e, a] = D(R, [
     "label",
     "variant",
     "icon",
     "iconProps",
     "href",
+    "target",
+    "rel",
     "class",
     "disabled",
     "children",
@@ -39,32 +42,32 @@ function M($) {
     "color",
     "ref",
     "data-testid"
-  ]), c = () => e.color ?? t?.color ?? e.colorTheme, i = () => e.disabled ?? t?.disabled, y = () => e.fullWidth ?? t?.fullWidth;
-  let m;
-  const p = () => W("smwb-button", `smwb-${e.variant}`, `smwb-${e.size}`, c() === "primary" ? "smwb-primary" : `smwb-button_color-${c()}`, t && "smwb-button-group__grouped", e.class, {
+  ]), c = () => x(e.target), m = () => e.color ?? t?.color ?? e.colorTheme, i = () => e.disabled ?? t?.disabled, y = () => e.fullWidth ?? t?.fullWidth;
+  let p;
+  const u = () => W("smwb-button", `smwb-${e.variant}`, `smwb-${e.size}`, m() === "primary" ? "smwb-primary" : `smwb-button_color-${m()}`, t && "smwb-button-group__grouped", e.class, {
     "smwb-disabled": i(),
     "smwb-full-width": y()
-  }), u = (r) => {
-    C(e.onPointerDown, r), i() || m?.onRipple(r);
-  }, d = T(() => e.icon), R = () => {
-    const r = d();
-    return typeof r == "string" ? n(x, l(() => e.iconProps ?? {}, {
+  }), d = (r) => {
+    B(e.onPointerDown, r), i() || p?.onRipple(r);
+  }, f = z(() => e.icon), T = () => {
+    const r = f();
+    return typeof r == "string" ? n(E, l(() => e.iconProps ?? {}, {
       name: r
     })) : r;
-  }, f = () => [n(s, {
+  }, g = () => [n(s, {
     get when() {
-      return d();
+      return f();
     },
     get children() {
-      return R();
+      return T();
     }
-  }), w(() => w(() => !!e.label)() ? e.label : e.children), n(s, {
+  }), v(() => v(() => !!e.label)() ? e.label : e.children), n(s, {
     get when() {
       return !e.disableRipple;
     },
     get children() {
-      return n(B, {
-        actionRef: (r) => m = r,
+      return n(A, {
+        actionRef: (r) => p = r,
         get center() {
           return e.rippleCenter;
         }
@@ -77,43 +80,47 @@ function M($) {
     },
     get fallback() {
       return (() => {
-        var r = E(), o = P(e.ref);
-        return typeof o == "function" && b(o, r), g(r, l({
+        var r = H(), o = P(e.ref);
+        return typeof o == "function" && b(o, r), h(r, l({
           get "data-testid"() {
             return e["data-testid"] ?? "button";
           }
         }, a, {
           get class() {
-            return p();
+            return u();
           },
-          onPointerDown: u,
+          onPointerDown: d,
           get disabled() {
             return !!i();
           }
-        }), !1, !0), h(r, f), r;
+        }), !1, !0), w(r, g), r;
       })();
     },
     get children() {
-      var r = A(), o = P(e.ref);
-      return typeof o == "function" && b(o, r), g(r, l({
+      var r = G(), o = P(e.ref);
+      return typeof o == "function" && b(o, r), h(r, l({
         get "data-testid"() {
           return e["data-testid"] ?? "button-link";
         }
       }, a, {
         get class() {
-          return p();
+          return u();
         },
         get href() {
           return e.href;
         },
-        target: "_blank",
-        rel: "noreferrer",
-        onPointerDown: u
-      }), !1, !0), h(r, f), r;
+        get target() {
+          return c();
+        },
+        get rel() {
+          return L(e.rel, c());
+        },
+        onPointerDown: d
+      }), !1, !0), w(r, g), r;
     }
   });
 }
 export {
-  M as Button
+  U as Button
 };
 //# sourceMappingURL=button.js.map

package/dist/components/inputs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid={local[\"data-testid\"] ?? \"button\"}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid={local[\"data-testid\"] ?? \"button-link\"}\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"names":["Button","props","group","useButtonGroup","merged","mergeProps","variant","size","colorTheme","local","rest","splitProps","color","disabled","fullWidth","rippleActions","classes","cn","class","onPointerDown","event","callHandler","onRipple","icon","children","iconElement","resolved","_$createComponent","Icon","_$mergeProps","iconProps","name","content","Show","when","_$memo","label","disableRipple","Ripple","actionRef","actions","center","rippleCenter","href","fallback","_el$2","_tmpl$2","_ref$2","mergeRefs","ref","_$use","_$spread","_$insert","_el$","_tmpl$","_ref$"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  /**\n   * Where a link (with `href`) opens. By default `\"_blank\"`: a new tab. `null` leaves the `target`\n   * attribute out, so the link opens in place, like an internal one; an empty string does the same, and\n   * any other string is used as is.\n   */\n  target?: string | null | undefined;\n  /**\n   * The `rel` of a link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or\n   * window, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string | undefined;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid={local[\"data-testid\"] ?? \"button\"}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid={local[\"data-testid\"] ?? \"button-link\"}\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target={linkTarget()}\n        rel={resolveLinkRel(local.rel, linkTarget())}\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"names":["Button","props","group","useButtonGroup","merged","mergeProps","variant","size","colorTheme","local","rest","splitProps","linkTarget","resolveLinkTarget","target","color","disabled","fullWidth","rippleActions","classes","cn","class","onPointerDown","event","callHandler","onRipple","icon","children","iconElement","resolved","_$createComponent","Icon","_$mergeProps","iconProps","name","content","Show","when","_$memo","label","disableRipple","Ripple","actionRef","actions","center","rippleCenter","href","fallback","_el$2","_tmpl$2","_ref$2","mergeRefs","ref","_$use","_$spread","_$insert","_el$","_tmpl$","_ref$","rel","resolveLinkRel"],"mappings":"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"}

package/dist/components/inputs/composer/composer.d.ts

@@ -0,0 +1,148 @@
+import { type JSX } from "solid-js";
+import type { ComposerSendKey } from "./composerKeys";
+/** Where the toolbar and the action sit: under the field (`stacked`) or in one row with it (`inline`). */
+export type ComposerLayout = "stacked" | "inline";
+export interface ComposerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onKeyDown" | "onFocus" | "onBlur" | "children"> {
+    /**
+     * Controlled text. The composer is controlled while this is not `undefined` (checked reactively); a parent that
+     * ignores `onValueChange` keeps the field showing this value.
+     */
+    value?: string | undefined;
+    /** Initial text while uncontrolled. Defaults to an empty string. */
+    defaultValue?: string | undefined;
+    /** Called on every text change: typing, a newline, and the clear after a send. Called in both modes. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Called with the trimmed text when the user sends it: the send key (see `sendKey`) or a click on the action
+     * button. Nothing is called while sending is not allowed: no `onSend`, an empty or whitespace-only text, `disabled`,
+     * `readOnly`, `busy`, or a text over `maxLength`. Async work is shown with `busy`; the return value is ignored.
+     */
+    onSend?: ((text: string) => void) | undefined;
+    /**
+     * Which Enter sends. `"modEnter"` (default): Ctrl/⌘+Enter sends and Enter inserts a newline. `"enter"`: Enter sends,
+     * Shift+Enter inserts a newline, Ctrl/⌘+Enter sends too. An Enter that commits an IME composition never sends.
+     */
+    sendKey?: ComposerSendKey | undefined;
+    /**
+     * Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange("")` while controlled.
+     * Defaults to `true`.
+     */
+    clearOnSend?: boolean | undefined;
+    /**
+     * The agent is working: the action button turns into Stop and calls `onStop`, and the keys and the button do not
+     * send. The text stays editable. The composer never changes `busy` itself, the parent owns it.
+     */
+    busy?: boolean | undefined;
+    /**
+     * Called when Stop is pressed (click, Enter or Space on the button) while `busy` and not `disabled`. Without it the
+     * Stop button does nothing, so pass it whenever `busy` can be set.
+     */
+    onStop?: (() => void) | undefined;
+    /** Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well. */
+    placeholder?: string | undefined;
+    /**
+     * Hard limit on the text (the native `maxlength` of the textarea, counted in UTF-16 units, so an emoji is 2).
+     * Turns the counter on.
+     */
+    maxLength?: number | undefined;
+    /** Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set. */
+    counter?: boolean | undefined;
+    /**
+     * Text for the polite status region that announces how many characters are left. It is spoken only near the limit
+     * (within the larger of 10 characters and 10% of `maxLength`) and when the text is over it, with a negative
+     * `remaining`. Defaults to "N characters left" / "N characters over the limit".
+     */
+    counterAnnouncement?: ((remaining: number, maxLength: number) => string) | undefined;
+    /** Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`. */
+    minRows?: number | undefined;
+    /** Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`. */
+    maxRows?: number | undefined;
+    /**
+     * `"stacked"` (default): the field on top, a bar under it with the attach button, the toolbar, the counter and the
+     * action. `"inline"`: the attach button, the field, the counter and the action in one row, the toolbar (if any)
+     * in a row under it.
+     */
+    layout?: ComposerLayout | undefined;
+    /**
+     * Slot under the field for chips and selectors (agent, model, mode, …). Drawn in every state. It is a plain `div`,
+     * not `role="toolbar"`: the content brings its own keyboard handling and disabled state.
+     */
+    toolbar?: JSX.Element;
+    /**
+     * Slot above the field for the app's file chips. The composer keeps no file state: the app lists what `onAttach`
+     * gave it here.
+     */
+    attachments?: JSX.Element;
+    /**
+     * Turns on the attach button, the hidden file input and the drop target (the whole composer). Called with the files
+     * of a pick or a drop that are left after `accept`, `multiple` and `maxFiles`, never with an empty list. Only a drag
+     * of files is taken: dragged text or a link still goes into the field.
+     */
+    onAttach?: ((files: File[]) => void) | undefined;
+    /**
+     * Accepted file types, as a record of mime type to extensions or a raw `accept` string (`image/*`, `.pdf`, an exact
+     * mime type). It sets the picker's filter, and the files of a pick or a drop that do not match are left out.
+     */
+    accept?: Record<string, string[]> | string | undefined;
+    /** Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`. */
+    multiple?: boolean | undefined;
+    /** Files beyond this number are dropped from a pick or a drop (counted after `accept`). */
+    maxFiles?: number | undefined;
+    /**
+     * Whether `onAttach` also makes the composer a drop target for files. Set `false` when a parent already takes drops
+     * (a chat panel): the attach button and the picker stay, and a drop on the composer bubbles to the parent untouched.
+     * Defaults to `true`.
+     */
+    dropTarget?: boolean | undefined;
+    /**
+     * Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to
+     * disable.
+     */
+    disabled?: boolean | undefined;
+    /** The textarea is `readonly`: sending is unavailable, Stop still works. */
+    readOnly?: boolean | undefined;
+    /** Focus the textarea on mount. */
+    autofocus?: boolean | undefined;
+    /** Name of the textarea. */
+    name?: string | undefined;
+    /** Id of the textarea (the root keeps no id). Generated when not given. */
+    id?: string | undefined;
+    /** Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name. */
+    "aria-label"?: string | undefined;
+    /** Id(s) of the element(s) that name the textarea. */
+    "aria-labelledby"?: string | undefined;
+    /** Id(s) that describe the textarea. They come first, the counter's id is appended. */
+    "aria-describedby"?: string | undefined;
+    /** Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key. */
+    onKeyDown?: JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent> | undefined;
+    /** Focus handler of the textarea. */
+    onFocus?: JSX.EventHandlerUnion<HTMLTextAreaElement, FocusEvent> | undefined;
+    /** Blur handler of the textarea. */
+    onBlur?: JSX.EventHandlerUnion<HTMLTextAreaElement, FocusEvent> | undefined;
+    /** Ref of the textarea (the root takes the component's own `ref`). */
+    inputRef?: ((el: HTMLTextAreaElement) => void) | undefined;
+    /** Accessible name of the action button while it sends. Defaults to "Send". */
+    sendLabel?: string | undefined;
+    /** Accessible name of the action button while `busy`. Defaults to "Stop". */
+    stopLabel?: string | undefined;
+    /** Accessible name of the attach button. Defaults to "Attach file". */
+    attachLabel?: string | undefined;
+    /**
+     * Class name(s) for the root `<div>`. `style`, `ref`, `data-*` attributes and every other HTML attribute or event
+     * handler go to the root too; the root's drag handlers run after yours.
+     */
+    class?: string | undefined;
+    /** Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …). */
+    "data-testid"?: string | undefined;
+}
+/**
+ * A task input: a multi-line field that grows from `minRows` to `maxRows`, a `toolbar` slot under it for chip
+ * selectors, a send button that becomes Stop while `busy`, keyboard send (Ctrl/⌘+Enter by default), an optional
+ * attach button and drop target, and a character counter.
+ *
+ * ```tsx
+ * <Composer aria-label="Task for the agent" onSend={(text) => run(text)} busy={running()} onStop={cancel} />
+ * ```
+ */
+export declare function Composer(props: ComposerProps): JSX.Element;
+export default Composer;