@smwb/ui-react 2.8.0 → 2.9.0

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

@@ -1,80 +1,86 @@
-import { jsx as N, jsxs as $ } from "react/jsx-runtime";
+import { jsx as k, jsxs as y } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/button/button.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import g from "react";
+import x from "react";
 import W from "clsx";
-import { Ripple as q } from "../../base/ripple/ripple.js";
-import { Icon as v } from "../../base/icon/icon.js";
-const Q = g.forwardRef(
-  function(j, c) {
-    var y;
+import { Ripple as _ } from "../../base/ripple/ripple.js";
+import { resolveLinkRel as q, resolveLinkTarget as A } from "../../../utils/linkAttrs.js";
+import { Icon as F } from "../../base/icon/icon.js";
+const V = x.forwardRef(
+  function(N, m) {
     const {
-      label: o,
-      variant: k = "contained",
-      icon: e,
-      iconProps: B = {},
-      href: a,
+      label: n,
+      variant: $ = "contained",
+      icon: o,
+      iconProps: j = {},
+      href: c,
+      target: v,
+      rel: B,
       className: D,
       disabled: r,
-      children: p,
+      children: a,
       onMouseDown: i,
       // The button sets this on its root too; its own handler calls the caller's first.
       onPointerDown: s,
       fullWidth: E,
-      rippleCenter: _,
+      rippleCenter: L,
       disableRipple: z,
       size: C = "medium",
       colorTheme: M = "primary",
       color: l,
-      "data-testid": t,
-      ...m
-    } = j, b = l != null ? l : M, f = g.useRef(null), u = (n) => {
-      i == null || i(n);
-    }, d = (n) => {
-      var x;
-      s == null || s(n), r || (x = f.current) == null || x.onRipple(n);
+      "data-testid": e,
+      ...p
+    } = N, f = l != null ? l : M, u = x.useRef(null), b = (t) => {
+      i == null || i(t);
+    }, d = (t) => {
+      var g;
+      s == null || s(t), r || (g = u.current) == null || g.onRipple(t);
     }, w = W(
       "smwb-button",
-      `smwb-${k}`,
+      `smwb-${$}`,
       `smwb-${C}`,
-      b === "primary" ? "smwb-primary" : `smwb-button_color-${b}`,
+      f === "primary" ? "smwb-primary" : `smwb-button_color-${f}`,
       D,
       {
         "smwb-disabled": r,
         "smwb-full-width": E
       }
-    ), R = !z && /* @__PURE__ */ N(q, { actionRef: f, center: _ }), h = typeof e == "string" ? /* @__PURE__ */ N(v, { ...B, name: e }) : e;
-    return a ? /* @__PURE__ */ $(
-      "a",
-      {
-        "data-testid": t != null ? t : "button-link",
-        ref: c,
-        className: w,
-        href: a,
-        target: "_blank",
-        onMouseDown: u,
-        onPointerDown: d,
-        ...m,
-        rel: (y = m.rel) != null ? y : "noreferrer",
-        children: [
-          e && h,
-          o || p,
-          R
-        ]
-      }
-    ) : /* @__PURE__ */ $(
+    ), R = !z && /* @__PURE__ */ k(_, { actionRef: u, center: L }), h = typeof o == "string" ? /* @__PURE__ */ k(F, { ...j, name: o }) : o;
+    if (c) {
+      const t = A(v);
+      return /* @__PURE__ */ y(
+        "a",
+        {
+          "data-testid": e != null ? e : "button-link",
+          ref: m,
+          className: w,
+          href: c,
+          target: t,
+          rel: q(B, t),
+          onMouseDown: b,
+          onPointerDown: d,
+          ...p,
+          children: [
+            o && h,
+            n || a,
+            R
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ y(
       "button",
       {
-        "data-testid": t != null ? t : "button",
-        ref: c,
+        "data-testid": e != null ? e : "button",
+        ref: m,
         className: w,
-        onMouseDown: u,
+        onMouseDown: b,
         onPointerDown: d,
         disabled: !!r,
-        ...m,
+        ...p,
         children: [
-          e && h,
-          o || p,
+          o && h,
+          n || a,
           R
         ]
       }
@@ -82,7 +88,7 @@ const Q = g.forwardRef(
   }
 );
 export {
-  Q as Button,
-  Q as default
+  V as Button,
+  V as default
 };
 //# 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 React, { PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Icon, IconProps } from \"../../base/icon\";\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /**\n   * Текст на кнопке.\n   */\n  label?: string;\n\n  /**\n   * Вариант стилизации кнопки.\n   */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n\n  /**\n   * Размер кнопки.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Иконка, которая может быть ReactNode (например, <Icon/>) или строкой (url, base64, и т.д.).\n   */\n  icon?: React.ReactNode | string;\n\n  /**\n   * Пропсы для иконки (исключая 'name', если в IconProps оно обязательно).\n   */\n  iconProps?: Omit<IconProps, \"name\">;\n\n  /**\n   * @deprecated используйте `color`. Оставлено для обратной совместимости.\n   */\n  colorTheme?: \"primary\";\n\n  /**\n   * Семантический цвет кнопки. Резолвится через токены `--smui-*Color*`.\n   */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\n  /**\n   * Ссылка. Если задана, компонент может рендериться как <a>.\n   */\n  href?: string;\n\n  /**\n   * Отключённое состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Тип кнопки.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /**\n   * Растягивать кнопку по всей ширине контейнера.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Позиция риппл-эффекта по центру.\n   */\n  rippleCenter?: boolean;\n\n  /**\n   * Отключить риппл-эффект.\n   */\n  disableRipple?: boolean;\n\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<ButtonProps>>(\n  function Button(props, ref) {\n    const {\n      label,\n      variant = \"contained\",\n      icon,\n      iconProps = {},\n      href,\n      className,\n      disabled,\n      children,\n      onMouseDown: onMouseDownProp,\n      // The button sets this on its root too; its own handler calls the caller's first.\n      onPointerDown: onPointerDownProp,\n      fullWidth,\n      rippleCenter,\n      disableRipple,\n\n      size = \"medium\",\n      colorTheme = \"primary\",\n      color: colorProp,\n      \"data-testid\": dataTestId,\n      ...rest\n    } = props;\n    const color = colorProp ?? colorTheme;\n    const rippleRef = React.useRef<RippleActionsRef>(null);\n\n    const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onMouseDownProp?.(event);\n    };\n\n    // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n    const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onPointerDownProp?.(event);\n      if (!disabled) {\n        rippleRef.current?.onRipple(event);\n      }\n    };\n\n    const classes = cn(\n      \"smwb-button\",\n      `smwb-${variant}`,\n      `smwb-${size}`,\n      color === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color}`,\n      className,\n      {\n        \"smwb-disabled\": disabled,\n        \"smwb-full-width\": fullWidth,\n      }\n    );\n\n    const rippleElement = !disableRipple && <Ripple actionRef={rippleRef} center={rippleCenter} />;\n    const iconElement = typeof icon === \"string\" ? <Icon {...iconProps} name={icon} /> : icon;\n\n    if (href) {\n      return (\n        <a\n          data-testid={dataTestId ?? \"button-link\"}\n          ref={ref as React.LegacyRef<HTMLAnchorElement>}\n          className={classes}\n          href={href}\n          target=\"_blank\"\n          onMouseDown={onMouseDown}\n          onPointerDown={onPointerDown}\n          {...rest}\n          // A default: the caller's rel wins, and an explicit undefined keeps it.\n          rel={rest.rel ?? \"noreferrer\"}\n        >\n          {icon && iconElement}\n          {label ? label : children}\n          {rippleElement}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        data-testid={dataTestId ?? \"button\"}\n        ref={ref as React.LegacyRef<HTMLButtonElement>}\n        className={classes}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        disabled={!!disabled}\n        {...rest}\n      >\n        {icon && iconElement}\n        {label ? label : children}\n        {rippleElement}\n      </button>\n    );\n  }\n);\nexport default Button;\n"],"names":["Button","React","props","ref","label","variant","icon","iconProps","href","className","disabled","children","onMouseDownProp","onPointerDownProp","fullWidth","rippleCenter","disableRipple","size","colorTheme","colorProp","dataTestId","rest","color","rippleRef","onMouseDown","event","onPointerDown","_a","classes","cn","rippleElement","jsx","Ripple","iconElement","Icon","jsxs"],"mappings":";;;;;;;AA6EO,MAAMA,IAASC,EAAM;AAAA,EAC1B,SAAgBC,GAAOC,GAAK;;AAC1B,UAAM;AAAA,MACJ,OAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,MAAAC;AAAA,MACA,WAAAC,IAAY,CAAA;AAAA,MACZ,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,aAAaC;AAAA;AAAA,MAEb,eAAeC;AAAA,MACf,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,MAAAC,IAAO;AAAA,MACP,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,eAAeC;AAAA,MACf,GAAGC;AAAA,IAAA,IACDnB,GACEoB,IAAQH,KAAA,OAAAA,IAAaD,GACrBK,IAAYtB,EAAM,OAAyB,IAAI,GAE/CuB,IAAc,CAACC,MAAmE;AACtF,MAAAb,KAAA,QAAAA,EAAkBa;AAAA,IACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,MAAAZ,KAAA,QAAAA,EAAoBY,IACff,MACHiB,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,IAEhC,GAEMG,IAAUC;AAAA,MACd;AAAA,MACA,QAAQxB,CAAO;AAAA,MACf,QAAQY,CAAI;AAAA,MACZK,MAAU,YAAY,iBAAiB,qBAAqBA,CAAK;AAAA,MACjEb;AAAA,MACA;AAAA,QACE,iBAAiBC;AAAA,QACjB,mBAAmBI;AAAA,MAAA;AAAA,IACrB,GAGIgB,IAAgB,CAACd,KAAiB,gBAAAe,EAACC,KAAO,WAAWT,GAAW,QAAQR,GAAc,GACtFkB,IAAc,OAAO3B,KAAS,WAAW,gBAAAyB,EAACG,KAAM,GAAG3B,GAAW,MAAMD,EAAA,CAAM,IAAKA;AAErF,WAAIE,IAEA,gBAAA2B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaf,KAAA,OAAAA,IAAc;AAAA,QAC3B,KAAAjB;AAAA,QACA,WAAWyB;AAAA,QACX,MAAApB;AAAA,QACA,QAAO;AAAA,QACP,aAAAgB;AAAA,QACA,eAAAE;AAAA,QACC,GAAGL;AAAA,QAEJ,MAAKM,IAAAN,EAAK,QAAL,OAAAM,IAAY;AAAA,QAEhB,UAAA;AAAA,UAAArB,KAAQ2B;AAAA,UACR7B,KAAgBO;AAAA,UAChBmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaf,KAAA,OAAAA,IAAc;AAAA,QAC3B,KAAAjB;AAAA,QACA,WAAWyB;AAAA,QACX,aAAAJ;AAAA,QACA,eAAAE;AAAA,QACA,UAAU,CAAC,CAAChB;AAAA,QACX,GAAGW;AAAA,QAEH,UAAA;AAAA,UAAAf,KAAQ2B;AAAA,UACR7B,KAAgBO;AAAA,UAChBmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Icon, IconProps } from \"../../base/icon\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /**\n   * Текст на кнопке.\n   */\n  label?: string;\n\n  /**\n   * Вариант стилизации кнопки.\n   */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n\n  /**\n   * Размер кнопки.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Иконка, которая может быть ReactNode (например, <Icon/>) или строкой (url, base64, и т.д.).\n   */\n  icon?: React.ReactNode | string;\n\n  /**\n   * Пропсы для иконки (исключая 'name', если в IconProps оно обязательно).\n   */\n  iconProps?: Omit<IconProps, \"name\">;\n\n  /**\n   * @deprecated используйте `color`. Оставлено для обратной совместимости.\n   */\n  colorTheme?: \"primary\";\n\n  /**\n   * Семантический цвет кнопки. Резолвится через токены `--smui-*Color*`.\n   */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\n  /**\n   * Ссылка. Если задана, компонент рендерится как <a>.\n   */\n  href?: string;\n\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;\n\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;\n\n  /**\n   * Отключённое состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Тип кнопки.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /**\n   * Растягивать кнопку по всей ширине контейнера.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Позиция риппл-эффекта по центру.\n   */\n  rippleCenter?: boolean;\n\n  /**\n   * Отключить риппл-эффект.\n   */\n  disableRipple?: boolean;\n\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<ButtonProps>>(\n  function Button(props, ref) {\n    const {\n      label,\n      variant = \"contained\",\n      icon,\n      iconProps = {},\n      href,\n      target,\n      rel,\n      className,\n      disabled,\n      children,\n      onMouseDown: onMouseDownProp,\n      // The button sets this on its root too; its own handler calls the caller's first.\n      onPointerDown: onPointerDownProp,\n      fullWidth,\n      rippleCenter,\n      disableRipple,\n\n      size = \"medium\",\n      colorTheme = \"primary\",\n      color: colorProp,\n      \"data-testid\": dataTestId,\n      ...rest\n    } = props;\n    const color = colorProp ?? colorTheme;\n    const rippleRef = React.useRef<RippleActionsRef>(null);\n\n    const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onMouseDownProp?.(event);\n    };\n\n    // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n    const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onPointerDownProp?.(event);\n      if (!disabled) {\n        rippleRef.current?.onRipple(event);\n      }\n    };\n\n    const classes = cn(\n      \"smwb-button\",\n      `smwb-${variant}`,\n      `smwb-${size}`,\n      color === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color}`,\n      className,\n      {\n        \"smwb-disabled\": disabled,\n        \"smwb-full-width\": fullWidth,\n      }\n    );\n\n    const rippleElement = !disableRipple && <Ripple actionRef={rippleRef} center={rippleCenter} />;\n    const iconElement = typeof icon === \"string\" ? <Icon {...iconProps} name={icon} /> : icon;\n\n    if (href) {\n      const linkTarget = resolveLinkTarget(target);\n      return (\n        <a\n          data-testid={dataTestId ?? \"button-link\"}\n          ref={ref as React.LegacyRef<HTMLAnchorElement>}\n          className={classes}\n          href={href}\n          target={linkTarget}\n          rel={resolveLinkRel(rel, linkTarget)}\n          onMouseDown={onMouseDown}\n          onPointerDown={onPointerDown}\n          {...rest}\n        >\n          {icon && iconElement}\n          {label ? label : children}\n          {rippleElement}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        data-testid={dataTestId ?? \"button\"}\n        ref={ref as React.LegacyRef<HTMLButtonElement>}\n        className={classes}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        disabled={!!disabled}\n        {...rest}\n      >\n        {icon && iconElement}\n        {label ? label : children}\n        {rippleElement}\n      </button>\n    );\n  }\n);\nexport default Button;\n"],"names":["Button","React","props","ref","label","variant","icon","iconProps","href","target","rel","className","disabled","children","onMouseDownProp","onPointerDownProp","fullWidth","rippleCenter","disableRipple","size","colorTheme","colorProp","dataTestId","rest","color","rippleRef","onMouseDown","event","onPointerDown","_a","classes","cn","rippleElement","jsx","Ripple","iconElement","Icon","linkTarget","resolveLinkTarget","jsxs","resolveLinkRel"],"mappings":";;;;;;;;AA4FO,MAAMA,IAASC,EAAM;AAAA,EAC1B,SAAgBC,GAAOC,GAAK;AAC1B,UAAM;AAAA,MACJ,OAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,MAAAC;AAAA,MACA,WAAAC,IAAY,CAAA;AAAA,MACZ,MAAAC;AAAA,MACA,QAAAC;AAAA,MACA,KAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,aAAaC;AAAA;AAAA,MAEb,eAAeC;AAAA,MACf,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,MAAAC,IAAO;AAAA,MACP,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,eAAeC;AAAA,MACf,GAAGC;AAAA,IAAA,IACDrB,GACEsB,IAAQH,KAAA,OAAAA,IAAaD,GACrBK,IAAYxB,EAAM,OAAyB,IAAI,GAE/CyB,IAAc,CAACC,MAAmE;AACtF,MAAAb,KAAA,QAAAA,EAAkBa;AAAA,IACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,MAAAZ,KAAA,QAAAA,EAAoBY,IACff,MACHiB,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,IAEhC,GAEMG,IAAUC;AAAA,MACd;AAAA,MACA,QAAQ1B,CAAO;AAAA,MACf,QAAQc,CAAI;AAAA,MACZK,MAAU,YAAY,iBAAiB,qBAAqBA,CAAK;AAAA,MACjEb;AAAA,MACA;AAAA,QACE,iBAAiBC;AAAA,QACjB,mBAAmBI;AAAA,MAAA;AAAA,IACrB,GAGIgB,IAAgB,CAACd,KAAiB,gBAAAe,EAACC,KAAO,WAAWT,GAAW,QAAQR,GAAc,GACtFkB,IAAc,OAAO7B,KAAS,WAAW,gBAAA2B,EAACG,KAAM,GAAG7B,GAAW,MAAMD,EAAA,CAAM,IAAKA;AAErF,QAAIE,GAAM;AACR,YAAM6B,IAAaC,EAAkB7B,CAAM;AAC3C,aACE,gBAAA8B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAajB,KAAA,OAAAA,IAAc;AAAA,UAC3B,KAAAnB;AAAA,UACA,WAAW2B;AAAA,UACX,MAAAtB;AAAA,UACA,QAAQ6B;AAAA,UACR,KAAKG,EAAe9B,GAAK2B,CAAU;AAAA,UACnC,aAAAX;AAAA,UACA,eAAAE;AAAA,UACC,GAAGL;AAAA,UAEH,UAAA;AAAA,YAAAjB,KAAQ6B;AAAA,YACR/B,KAAgBS;AAAA,YAChBmB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAajB,KAAA,OAAAA,IAAc;AAAA,QAC3B,KAAAnB;AAAA,QACA,WAAW2B;AAAA,QACX,aAAAJ;AAAA,QACA,eAAAE;AAAA,QACA,UAAU,CAAC,CAAChB;AAAA,QACX,GAAGW;AAAA,QAEH,UAAA;AAAA,UAAAjB,KAAQ6B;AAAA,UACR/B,KAAgBS;AAAA,UAChBmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

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

@@ -0,0 +1,149 @@
+import React from "react";
+import type { DropzoneAccept } from "../../../hooks/useDropzone";
+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<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onKeyDown" | "onFocus" | "onBlur" | "children"> {
+    /**
+     * Controlled text. The composer is controlled while this is not `undefined` (checked on every render); a parent
+     * that ignores `onValueChange` keeps the field showing this value.
+     */
+    value?: string;
+    /** Initial text while uncontrolled. Defaults to an empty string. */
+    defaultValue?: string;
+    /** Called on every text change: typing, a newline, and the clear after a send. Called in both modes. */
+    onValueChange?: (value: string) => void;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange("")` while controlled.
+     * Defaults to `true`.
+     */
+    clearOnSend?: boolean;
+    /**
+     * 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;
+    /**
+     * 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;
+    /** Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well. */
+    placeholder?: string;
+    /**
+     * 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;
+    /** Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set. */
+    counter?: boolean;
+    /**
+     * 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;
+    /** Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`. */
+    minRows?: number;
+    /** Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`. */
+    maxRows?: number;
+    /**
+     * `"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;
+    /**
+     * 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?: React.ReactNode;
+    /**
+     * 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?: React.ReactNode;
+    /**
+     * 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;
+    /**
+     * 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?: DropzoneAccept;
+    /** Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`. */
+    multiple?: boolean;
+    /** Files beyond this number are dropped from a pick or a drop (counted after `accept`). */
+    maxFiles?: number;
+    /**
+     * 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;
+    /**
+     * Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to
+     * disable.
+     */
+    disabled?: boolean;
+    /** The textarea is `readonly`: sending is unavailable, Stop still works. */
+    readOnly?: boolean;
+    /** Focus the textarea on mount. */
+    autoFocus?: boolean;
+    /** Name of the textarea. */
+    name?: string;
+    /** Id of the textarea (the root keeps no id). Generated when not given. */
+    id?: string;
+    /** Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name. */
+    "aria-label"?: string;
+    /** Id(s) of the element(s) that name the textarea. */
+    "aria-labelledby"?: string;
+    /** Id(s) that describe the textarea. They come first, the counter's id is appended. */
+    "aria-describedby"?: string;
+    /** Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key. */
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+    /** Focus handler of the textarea. */
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /** Blur handler of the textarea. */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /** Ref of the textarea (the root takes the component's own `ref`). */
+    inputRef?: React.Ref<HTMLTextAreaElement>;
+    /** Accessible name of the action button while it sends. Defaults to "Send". */
+    sendLabel?: string;
+    /** Accessible name of the action button while `busy`. Defaults to "Stop". */
+    stopLabel?: string;
+    /** Accessible name of the attach button. Defaults to "Attach file". */
+    attachLabel?: string;
+    /**
+     * 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.
+     */
+    className?: string;
+    /** Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …). */
+    "data-testid"?: string;
+}
+/**
+ * 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 const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLDivElement>>;
+export default Composer;

package/dist/components/inputs/composer/composer.js

@@ -0,0 +1,219 @@
+import { jsxs as De, jsx as t } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/composer/composer.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
+import A, { useState as Ce } from "react";
+import L from "clsx";
+import { Icon as H } from "../../base/icon/icon.js";
+import { useControllableState as xe } from "../../../hooks/useControllableState.js";
+import { useDropzone as Ke } from "../../../hooks/useDropzone.js";
+import { useId as Ne } from "../../../hooks/useId.js";
+import { filterAttachedFiles as Le, isFileDrag as V } from "./composerFiles.js";
+import { resolveComposerKeyAction as Ae } from "./composerKeys.js";
+const ke = (o) => o >= 0 ? `${o} characters left` : `${-o} characters over the limit`;
+function Te(o) {
+  o.preventDefault();
+}
+function b(o) {
+  return Array.isArray(o) ? o.some(b) : A.isValidElement(o) && o.type === A.Fragment ? b(o.props.children) : o != null && typeof o != "boolean" && o !== "";
+}
+const qe = A.forwardRef(function(q, G) {
+  const {
+    value: J,
+    defaultValue: f,
+    onValueChange: Q,
+    onSend: h,
+    sendKey: U = "modEnter",
+    clearOnSend: W = !0,
+    busy: r = !1,
+    onStop: y,
+    placeholder: X,
+    maxLength: a,
+    counter: g,
+    counterAnnouncement: Y = ke,
+    minRows: w = 1,
+    maxRows: Z = 8,
+    layout: ee = "stacked",
+    toolbar: k,
+    attachments: T,
+    onAttach: i,
+    accept: S,
+    multiple: F = !0,
+    maxFiles: oe,
+    dropTarget: te = !0,
+    disabled: n = !1,
+    readOnly: R = !1,
+    autoFocus: ae,
+    name: re,
+    id: se,
+    "aria-label": ne,
+    "aria-labelledby": ie,
+    "aria-describedby": ce,
+    onKeyDown: _,
+    onFocus: v,
+    onBlur: D,
+    inputRef: le,
+    sendLabel: me = "Send",
+    stopLabel: de = "Stop",
+    attachLabel: pe = "Attach file",
+    className: ue,
+    "data-testid": C,
+    onDragOver: c,
+    onDragLeave: l,
+    onDrop: m,
+    ...be
+  } = q, [s, $] = xe({
+    value: J,
+    defaultValue: f != null ? f : "",
+    onChange: Q
+  }), [fe, M] = Ce(!1), O = Ne(se, "smwb-composer"), z = `${O}-counter`, d = Ke({
+    accept: S,
+    multiple: F,
+    disabled: n,
+    // `maxFiles` is not passed on: the cut has to come after `accept`, see `filterAttachedFiles`.
+    onDrop: (e) => {
+      const N = Le(e, { accept: S, multiple: F, maxFiles: oe });
+      N.length > 0 && (i == null || i(N));
+    }
+  }), x = d.getRootProps(), B = d.getInputProps(), K = i !== void 0, I = K && te, p = g != null ? g : a !== void 0, u = a !== void 0 && s.length > a, P = !!h && s.trim() !== "" && !n && !R && !r && !u;
+  let j = "";
+  if (p && a !== void 0) {
+    const e = a - s.length;
+    e <= Math.max(10, Math.ceil(a * 0.1)) && (j = Y(e, a));
+  }
+  const E = () => {
+    !P || !h || (h(s.trim()), W && $(""));
+  }, he = (e) => {
+    _ == null || _(e), !(e.defaultPrevented || Ae(
+      {
+        key: e.key,
+        shiftKey: e.shiftKey,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        altKey: e.altKey,
+        isComposing: e.nativeEvent.isComposing,
+        keyCode: e.keyCode
+      },
+      U
+    ) === "native") && (e.preventDefault(), E());
+  }, ye = (e) => {
+    if (!(e.detail > 1)) {
+      if (r) {
+        n || y == null || y();
+        return;
+      }
+      E();
+    }
+  }, ge = I ? { onDragOver: (e) => {
+    c == null || c(e), V(e.dataTransfer) && x.onDragOver(e);
+  }, onDragLeave: (e) => {
+    l == null || l(e), !(e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)) && x.onDragLeave();
+  }, onDrop: (e) => {
+    m == null || m(e), V(e.dataTransfer) && x.onDrop(e);
+  } } : { onDragOver: c, onDragLeave: l, onDrop: m }, we = I && d.isDragActive, _e = {
+    "--smwb-composer-min-rows": w,
+    "--smwb-composer-max-rows": Math.max(Z, w)
+  }, ve = [ce, p ? z : void 0].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ De(
+    "div",
+    {
+      ...be,
+      ...ge,
+      ref: G,
+      className: L(
+        "smwb-composer",
+        `smwb-composer_${ee}`,
+        fe && "smwb-composer_focused",
+        r && "smwb-composer_busy",
+        n && "smwb-composer_disabled",
+        we && "smwb-composer_drag-active",
+        u && "smwb-composer_over-limit",
+        ue
+      ),
+      "data-testid": C != null ? C : "composer",
+      children: [
+        b(T) ? /* @__PURE__ */ t("div", { className: "smwb-composer__attachments", "data-testid": "composer-attachments", children: T }) : null,
+        /* @__PURE__ */ t("div", { className: "smwb-composer__field", "data-value": s, style: _e, children: /* @__PURE__ */ t(
+          "textarea",
+          {
+            ref: le,
+            className: "smwb-composer__input",
+            id: O,
+            name: re,
+            rows: w,
+            placeholder: X,
+            maxLength: a,
+            disabled: n,
+            readOnly: R,
+            autoFocus: ae,
+            "aria-label": ne,
+            "aria-labelledby": ie,
+            "aria-describedby": ve,
+            "aria-invalid": u || void 0,
+            value: s,
+            onChange: (e) => $(e.target.value),
+            onKeyDown: he,
+            onFocus: (e) => {
+              v == null || v(e), M(!0);
+            },
+            onBlur: (e) => {
+              D == null || D(e), M(!1);
+            },
+            "data-testid": "composer-input"
+          }
+        ) }),
+        K ? /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "smwb-composer__icon-button smwb-composer__attach",
+            "aria-label": pe,
+            disabled: n,
+            onClick: d.open,
+            "data-testid": "composer-attach",
+            children: /* @__PURE__ */ t(H, { name: "attach_file", size: 20 })
+          }
+        ) : null,
+        b(k) ? /* @__PURE__ */ t("div", { className: "smwb-composer__toolbar", "data-testid": "composer-toolbar", children: k }) : null,
+        p ? /* @__PURE__ */ t(
+          "span",
+          {
+            id: z,
+            className: L("smwb-composer__counter", u && "smwb-composer__counter_error"),
+            "data-testid": "composer-counter",
+            children: a !== void 0 ? `${s.length} / ${a}` : s.length
+          }
+        ) : null,
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: L("smwb-composer__icon-button", "smwb-composer__action", r && "smwb-composer__action_stop"),
+            "aria-label": r ? de : me,
+            "aria-disabled": !r && !P ? !0 : void 0,
+            disabled: n,
+            "data-action": r ? "stop" : "send",
+            onMouseDown: Te,
+            onClick: ye,
+            "data-testid": "composer-action",
+            children: /* @__PURE__ */ t(H, { name: r ? "stop" : "send", size: 20 })
+          }
+        ),
+        p ? /* @__PURE__ */ t("span", { className: "smwb-composer__status", role: "status", "data-testid": "composer-status", children: j }) : null,
+        K ? /* @__PURE__ */ t(
+          "input",
+          {
+            ...B,
+            onChange: (e) => {
+              B.onChange(e), e.currentTarget.value = "";
+            },
+            "data-testid": "composer-file-input"
+          }
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  qe as Composer
+};
+//# sourceMappingURL=composer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composer.js","sources":["../../../../src/components/inputs/composer/composer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useDropzone } from \"../../../hooks/useDropzone\";\nimport type { DropzoneAccept } from \"../../../hooks/useDropzone\";\nimport { useId } from \"../../../hooks/useId\";\nimport { filterAttachedFiles, isFileDrag } from \"./composerFiles\";\nimport { resolveComposerKeyAction } from \"./composerKeys\";\nimport type { ComposerSendKey } from \"./composerKeys\";\n\n/** Where the toolbar and the action sit: under the field (`stacked`) or in one row with it (`inline`). */\nexport type ComposerLayout = \"stacked\" | \"inline\";\n\nexport interface ComposerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\" | \"onKeyDown\" | \"onFocus\" | \"onBlur\" | \"children\"\n> {\n  /**\n   * Controlled text. The composer is controlled while this is not `undefined` (checked on every render); a parent\n   * that ignores `onValueChange` keeps the field showing this value.\n   */\n  value?: string;\n  /** Initial text while uncontrolled. Defaults to an empty string. */\n  defaultValue?: string;\n  /** Called on every text change: typing, a newline, and the clear after a send. Called in both modes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the trimmed text when the user sends it: the send key (see `sendKey`) or a click on the action\n   * button. Nothing is called while sending is not allowed: no `onSend`, an empty or whitespace-only text, `disabled`,\n   * `readOnly`, `busy`, or a text over `maxLength`. Async work is shown with `busy`; the return value is ignored.\n   */\n  onSend?: (text: string) => void;\n  /**\n   * Which Enter sends. `\"modEnter\"` (default): Ctrl/⌘+Enter sends and Enter inserts a newline. `\"enter\"`: Enter sends,\n   * Shift+Enter inserts a newline, Ctrl/⌘+Enter sends too. An Enter that commits an IME composition never sends.\n   */\n  sendKey?: ComposerSendKey;\n  /**\n   * Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange(\"\")` while controlled.\n   * Defaults to `true`.\n   */\n  clearOnSend?: boolean;\n  /**\n   * The agent is working: the action button turns into Stop and calls `onStop`, and the keys and the button do not\n   * send. The text stays editable. The composer never changes `busy` itself, the parent owns it.\n   */\n  busy?: boolean;\n  /**\n   * Called when Stop is pressed (click, Enter or Space on the button) while `busy` and not `disabled`. Without it the\n   * Stop button does nothing, so pass it whenever `busy` can be set.\n   */\n  onStop?: () => void;\n  /** Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well. */\n  placeholder?: string;\n  /**\n   * Hard limit on the text (the native `maxlength` of the textarea, counted in UTF-16 units, so an emoji is 2).\n   * Turns the counter on.\n   */\n  maxLength?: number;\n  /** Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /**\n   * Text for the polite status region that announces how many characters are left. It is spoken only near the limit\n   * (within the larger of 10 characters and 10% of `maxLength`) and when the text is over it, with a negative\n   * `remaining`. Defaults to \"N characters left\" / \"N characters over the limit\".\n   */\n  counterAnnouncement?: (remaining: number, maxLength: number) => string;\n  /** Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`. */\n  minRows?: number;\n  /** Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`. */\n  maxRows?: number;\n  /**\n   * `\"stacked\"` (default): the field on top, a bar under it with the attach button, the toolbar, the counter and the\n   * action. `\"inline\"`: the attach button, the field, the counter and the action in one row, the toolbar (if any)\n   * in a row under it.\n   */\n  layout?: ComposerLayout;\n  /**\n   * Slot under the field for chips and selectors (agent, model, mode, …). Drawn in every state. It is a plain `div`,\n   * not `role=\"toolbar\"`: the content brings its own keyboard handling and disabled state.\n   */\n  toolbar?: React.ReactNode;\n  /**\n   * Slot above the field for the app's file chips. The composer keeps no file state: the app lists what `onAttach`\n   * gave it here.\n   */\n  attachments?: React.ReactNode;\n  /**\n   * Turns on the attach button, the hidden file input and the drop target (the whole composer). Called with the files\n   * of a pick or a drop that are left after `accept`, `multiple` and `maxFiles`, never with an empty list. Only a drag\n   * of files is taken: dragged text or a link still goes into the field.\n   */\n  onAttach?: (files: File[]) => void;\n  /**\n   * Accepted file types, as a record of mime type to extensions or a raw `accept` string (`image/*`, `.pdf`, an exact\n   * mime type). It sets the picker's filter, and the files of a pick or a drop that do not match are left out.\n   */\n  accept?: DropzoneAccept;\n  /** Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`. */\n  multiple?: boolean;\n  /** Files beyond this number are dropped from a pick or a drop (counted after `accept`). */\n  maxFiles?: number;\n  /**\n   * Whether `onAttach` also makes the composer a drop target for files. Set `false` when a parent already takes drops\n   * (a chat panel): the attach button and the picker stay, and a drop on the composer bubbles to the parent untouched.\n   * Defaults to `true`.\n   */\n  dropTarget?: boolean;\n  /**\n   * Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to\n   * disable.\n   */\n  disabled?: boolean;\n  /** The textarea is `readonly`: sending is unavailable, Stop still works. */\n  readOnly?: boolean;\n  /** Focus the textarea on mount. */\n  autoFocus?: boolean;\n  /** Name of the textarea. */\n  name?: string;\n  /** Id of the textarea (the root keeps no id). Generated when not given. */\n  id?: string;\n  /** Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name. */\n  \"aria-label\"?: string;\n  /** Id(s) of the element(s) that name the textarea. */\n  \"aria-labelledby\"?: string;\n  /** Id(s) that describe the textarea. They come first, the counter's id is appended. */\n  \"aria-describedby\"?: string;\n  /** Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n  /** Focus handler of the textarea. */\n  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n  /** Blur handler of the textarea. */\n  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n  /** Ref of the textarea (the root takes the component's own `ref`). */\n  inputRef?: React.Ref<HTMLTextAreaElement>;\n  /** Accessible name of the action button while it sends. Defaults to \"Send\". */\n  sendLabel?: string;\n  /** Accessible name of the action button while `busy`. Defaults to \"Stop\". */\n  stopLabel?: string;\n  /** Accessible name of the attach button. Defaults to \"Attach file\". */\n  attachLabel?: string;\n  /**\n   * Class name(s) for the root `<div>`. `style`, `ref`, `data-*` attributes and every other HTML attribute or event\n   * handler go to the root too; the root's drag handlers run after yours.\n   */\n  className?: string;\n  /** Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …). */\n  \"data-testid\"?: string;\n}\n\nconst defaultCounterAnnouncement = (remaining: number): string =>\n  remaining >= 0 ? `${remaining} characters left` : `${-remaining} characters over the limit`;\n\nfunction stopMouseDown(event: React.MouseEvent<HTMLElement>): void {\n  // Keeps the focus in the textarea when the action button is clicked with a mouse.\n  event.preventDefault();\n}\n\n// Whether a slot draws anything: null, false, \"\" and empty arrays or fragments do not.\nfunction isDrawn(node: React.ReactNode): boolean {\n  if (Array.isArray(node)) return node.some(isDrawn);\n  if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment) {\n    return isDrawn(node.props.children);\n  }\n  return node != null && typeof node !== \"boolean\" && node !== \"\";\n}\n\n/**\n * A task input: a multi-line field that grows from `minRows` to `maxRows`, a `toolbar` slot under it for chip\n * selectors, a send button that becomes Stop while `busy`, keyboard send (Ctrl/⌘+Enter by default), an optional\n * attach button and drop target, and a character counter.\n *\n * ```tsx\n * <Composer aria-label=\"Task for the agent\" onSend={(text) => run(text)} busy={running} onStop={cancel} />\n * ```\n */\nexport const Composer = React.forwardRef<HTMLDivElement, ComposerProps>(function Composer(props, ref) {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    onSend,\n    sendKey = \"modEnter\",\n    clearOnSend = true,\n    busy = false,\n    onStop,\n    placeholder,\n    maxLength,\n    counter,\n    counterAnnouncement = defaultCounterAnnouncement,\n    minRows = 1,\n    maxRows = 8,\n    layout = \"stacked\",\n    toolbar,\n    attachments,\n    onAttach,\n    accept,\n    multiple = true,\n    maxFiles,\n    dropTarget = true,\n    disabled = false,\n    readOnly = false,\n    autoFocus,\n    name,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    inputRef,\n    sendLabel = \"Send\",\n    stopLabel = \"Stop\",\n    attachLabel = \"Attach file\",\n    className,\n    \"data-testid\": testId,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n    ...rest\n  } = props;\n\n  const [text, setText] = useControllableState<string>({\n    value,\n    defaultValue: defaultValue ?? \"\",\n    onChange: onValueChange,\n  });\n  const [focused, setFocused] = useState(false);\n  const textareaId = useId(id, \"smwb-composer\");\n  const counterId = `${textareaId}-counter`;\n\n  const dropzone = useDropzone({\n    accept,\n    multiple,\n    disabled,\n    // `maxFiles` is not passed on: the cut has to come after `accept`, see `filterAttachedFiles`.\n    onDrop: (files) => {\n      const attached = filterAttachedFiles(files, { accept, multiple, maxFiles });\n      if (attached.length > 0) onAttach?.(attached);\n    },\n  });\n  const dropHandlers = dropzone.getRootProps();\n  const inputProps = dropzone.getInputProps();\n\n  const attachable = onAttach !== undefined;\n  // `dropTarget={false}` keeps the attach button and the picker but hands drops to a parent that owns the target.\n  const dropping = attachable && dropTarget;\n\n  const showCounter = counter ?? maxLength !== undefined;\n  const overLimit = maxLength !== undefined && text.length > maxLength;\n  const canSend = !!onSend && text.trim() !== \"\" && !disabled && !readOnly && !busy && !overLimit;\n\n  let status = \"\";\n  if (showCounter && maxLength !== undefined) {\n    const remaining = maxLength - text.length;\n    if (remaining <= Math.max(10, Math.ceil(maxLength * 0.1))) status = counterAnnouncement(remaining, maxLength);\n  }\n\n  const send = () => {\n    if (!canSend || !onSend) return;\n    onSend(text.trim());\n    if (clearOnSend) setText(\"\");\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    const action = resolveComposerKeyAction(\n      {\n        key: event.key,\n        shiftKey: event.shiftKey,\n        ctrlKey: event.ctrlKey,\n        metaKey: event.metaKey,\n        altKey: event.altKey,\n        isComposing: event.nativeEvent.isComposing,\n        keyCode: event.keyCode,\n      },\n      sendKey\n    );\n    if (action === \"native\") return;\n\n    event.preventDefault();\n    send();\n  };\n\n  const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    // The second click of a double-click lands on the node the first one turned into the other action (Send into\n    // Stop once the parent sets `busy`). It is not a new press: keyboard activation has `detail` 0, a click 1.\n    if (event.detail > 1) return;\n    if (busy) {\n      if (!disabled) onStop?.();\n      return;\n    }\n    send();\n  };\n\n  const rootDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    onDragOver?.(event);\n    // Only a drag of files is the dropzone's. Text or a link keeps its default: the textarea inserts it.\n    if (isFileDrag(event.dataTransfer)) dropHandlers.onDragOver(event);\n  };\n  const rootDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n    onDragLeave?.(event);\n    // A leave onto a descendant is not a leave: it would flicker the drag-active state over the toolbar chips.\n    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;\n    dropHandlers.onDragLeave();\n  };\n  const rootDrop = (event: React.DragEvent<HTMLDivElement>) => {\n    onDrop?.(event);\n    if (isFileDrag(event.dataTransfer)) dropHandlers.onDrop(event);\n  };\n  const dragHandlers = dropping\n    ? { onDragOver: rootDragOver, onDragLeave: rootDragLeave, onDrop: rootDrop }\n    : { onDragOver, onDragLeave, onDrop };\n\n  const dragActive = dropping && dropzone.isDragActive;\n  const fieldStyle = {\n    \"--smwb-composer-min-rows\": minRows,\n    \"--smwb-composer-max-rows\": Math.max(maxRows, minRows),\n  } as React.CSSProperties;\n  const describedBy = [ariaDescribedBy, showCounter ? counterId : undefined].filter(Boolean).join(\" \") || undefined;\n\n  return (\n    <div\n      {...rest}\n      {...dragHandlers}\n      ref={ref}\n      className={cn(\n        \"smwb-composer\",\n        `smwb-composer_${layout}`,\n        focused && \"smwb-composer_focused\",\n        busy && \"smwb-composer_busy\",\n        disabled && \"smwb-composer_disabled\",\n        dragActive && \"smwb-composer_drag-active\",\n        overLimit && \"smwb-composer_over-limit\",\n        className\n      )}\n      data-testid={testId ?? \"composer\"}\n    >\n      {isDrawn(attachments) ? (\n        <div className=\"smwb-composer__attachments\" data-testid=\"composer-attachments\">\n          {attachments}\n        </div>\n      ) : null}\n      <div className=\"smwb-composer__field\" data-value={text} style={fieldStyle}>\n        <textarea\n          ref={inputRef}\n          className=\"smwb-composer__input\"\n          id={textareaId}\n          name={name}\n          rows={minRows}\n          placeholder={placeholder}\n          maxLength={maxLength}\n          disabled={disabled}\n          readOnly={readOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={describedBy}\n          aria-invalid={overLimit || undefined}\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onFocus={(event) => {\n            onFocus?.(event);\n            setFocused(true);\n          }}\n          onBlur={(event) => {\n            onBlur?.(event);\n            setFocused(false);\n          }}\n          data-testid=\"composer-input\"\n        />\n      </div>\n      {attachable ? (\n        <button\n          type=\"button\"\n          className=\"smwb-composer__icon-button smwb-composer__attach\"\n          aria-label={attachLabel}\n          disabled={disabled}\n          onClick={dropzone.open}\n          data-testid=\"composer-attach\"\n        >\n          <Icon name=\"attach_file\" size={20} />\n        </button>\n      ) : null}\n      {isDrawn(toolbar) ? (\n        <div className=\"smwb-composer__toolbar\" data-testid=\"composer-toolbar\">\n          {toolbar}\n        </div>\n      ) : null}\n      {showCounter ? (\n        <span\n          id={counterId}\n          className={cn(\"smwb-composer__counter\", overLimit && \"smwb-composer__counter_error\")}\n          data-testid=\"composer-counter\"\n        >\n          {maxLength !== undefined ? `${text.length} / ${maxLength}` : text.length}\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        className={cn(\"smwb-composer__icon-button\", \"smwb-composer__action\", busy && \"smwb-composer__action_stop\")}\n        aria-label={busy ? stopLabel : sendLabel}\n        aria-disabled={!busy && !canSend ? true : undefined}\n        disabled={disabled}\n        data-action={busy ? \"stop\" : \"send\"}\n        onMouseDown={stopMouseDown}\n        onClick={handleActionClick}\n        data-testid=\"composer-action\"\n      >\n        <Icon name={busy ? \"stop\" : \"send\"} size={20} />\n      </button>\n      {showCounter ? (\n        <span className=\"smwb-composer__status\" role=\"status\" data-testid=\"composer-status\">\n          {status}\n        </span>\n      ) : null}\n      {attachable ? (\n        <input\n          {...inputProps}\n          onChange={(event) => {\n            inputProps.onChange(event);\n            // Lets the same file be picked again.\n            event.currentTarget.value = \"\";\n          }}\n          data-testid=\"composer-file-input\"\n        />\n      ) : null}\n    </div>\n  );\n});\n\nexport default Composer;\n"],"names":["defaultCounterAnnouncement","remaining","stopMouseDown","event","isDrawn","node","React","Composer","props","ref","value","defaultValue","onValueChange","onSend","sendKey","clearOnSend","busy","onStop","placeholder","maxLength","counter","counterAnnouncement","minRows","maxRows","layout","toolbar","attachments","onAttach","accept","multiple","maxFiles","dropTarget","disabled","readOnly","autoFocus","name","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","onKeyDown","onFocus","onBlur","inputRef","sendLabel","stopLabel","attachLabel","className","testId","onDragOver","onDragLeave","onDrop","rest","text","setText","useControllableState","focused","setFocused","useState","textareaId","useId","counterId","dropzone","useDropzone","files","attached","filterAttachedFiles","dropHandlers","inputProps","attachable","dropping","showCounter","overLimit","canSend","status","send","handleKeyDown","resolveComposerKeyAction","handleActionClick","dragHandlers","isFileDrag","dragActive","fieldStyle","describedBy","jsxs","cn","jsx","Icon"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+/** Accepted file types as `Composer` takes them: a record of mime type to extensions, or a raw `accept` string. */
+export type ComposerAccept = Record<string, string[]> | string;
+/** The part of a `DataTransfer` the drag guard reads. */
+export interface ComposerDragData {
+    types?: ArrayLike<string> | null | undefined;
+    files?: ArrayLike<unknown> | null | undefined;
+}
+/** The options that decide which of the picked or dropped files `Composer` passes on. */
+export interface ComposerFileOptions {
+    accept?: ComposerAccept | undefined;
+    multiple?: boolean | undefined;
+    maxFiles?: number | undefined;
+}
+/**
+ * Whether a drag carries files. A text or link drag does not and stays with the browser (the textarea inserts it).
+ * `dragover` exposes only `types`, and Firefox gives a `DOMStringList` there, hence `Array.from`; a `drop` has the
+ * file list as well.
+ */
+export declare function isFileDrag(data: ComposerDragData | null | undefined): boolean;
+/**
+ * The files of a pick or a drop that `Composer` passes to `onAttach`: those that match `accept` (a drop is not
+ * filtered by the browser, and the picker's "All files" choice lifts its filter), cut to one file when `multiple` is
+ * `false`, then to `maxFiles`. The cut comes last, so the files it drops are the ones past the limit, not the ones
+ * `accept` would have refused anyway.
+ */
+export declare function filterAttachedFiles(files: File[], options: ComposerFileOptions): File[];