@smwb/ui-react 2.8.0 → 2.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\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  className?: 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}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\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(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      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      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useInsertionEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\nimport { restoreFocus } from \"../../../utils/restoreFocus\";\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  className?: 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}\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 */\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // The dialog element as state too: the content is portaled and appears a commit after `open`, and\n  // the trap only re-runs when `active` changes, so a plain ref that fills in later would never arm it.\n  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef, setContentEl);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // The opener is captured in an insertion effect, which runs in the mutation phase of the open\n  // commit: before React focuses an `autoFocus` child (that happens in the layout phase, ahead of\n  // any layout effect of this component), before the children's passive effects (a CommandPalette\n  // focusing its input) and before the trap moves the focus into the dialog.\n  const openerRef = useRef<Element | null>(null);\n  useInsertionEffect(() => {\n    if (!open) return;\n    openerRef.current = contentRef.current?.contains(document.activeElement) ? null : document.activeElement;\n  }, [open]);\n\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). The return runs in a\n  // passive cleanup, not in a layout one: React gives the focus back to whatever was focused when the\n  // commit started (resetAfterCommit -> restoreSelection), and a closing dialog is still in the\n  // document during its fade-out, so restoring inside that commit is undone. The palette relied on a\n  // setTimeout(0) for the same reason.\n  useEffect(() => {\n    if (!open) return;\n    const opener = openerRef.current;\n    return () => {\n      // The dialog is read here, not captured above: mounted with `open` it appears only a commit\n      // after this effect runs, so a capture would hold null and skip the return. On unmount the ref\n      // is already null, which is the \"root is gone\" case restoreFocus handles.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      restoreFocus(opener, contentRef.current);\n    };\n  }, [open]);\n\n  const isTopmost = useCallback(() => isTopModal(nodeRef.current), []);\n  useFocusTrap(contentRef, { active: open && contentEl !== null, restoreFocus: false, isTopmost });\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\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(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      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      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          tabIndex={-1}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["isTopModal","overlay","open","ModalBase","forwardRef","children","onClose","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","contentEl","setContentEl","forkedContentRef","useForkRef","useSafeLayoutEffect","openerRef","useInsertionEffect","_a","useEffect","opener","restoreFocus","isTopmost","useCallback","useFocusTrap","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}

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

@@ -1,78 +1,84 @@
-import { jsx as N, jsxs as $ } from "react/jsx-runtime";
-import g from "react";
+import { jsx as k, jsxs as y } from "react/jsx-runtime";
+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 L = g.forwardRef(
-  function(j, m) {
-    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 T = x.forwardRef(
+  function(N, c) {
     const {
       label: n,
-      variant: k = "contained",
-      icon: e,
-      iconProps: B = {},
-      href: a,
+      variant: $ = "contained",
+      icon: o,
+      iconProps: j = {},
+      href: m,
+      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,
-      ...c
-    } = j, b = l != null ? l : M, f = g.useRef(null), u = (o) => {
-      i == null || i(o);
-    }, d = (o) => {
-      var x;
-      s == null || s(o), r || (x = f.current) == null || x.onRipple(o);
+      "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: m,
-        className: w,
-        href: a,
-        target: "_blank",
-        onMouseDown: u,
-        onPointerDown: d,
-        ...c,
-        rel: (y = c.rel) != null ? y : "noreferrer",
-        children: [
-          e && h,
-          n || p,
-          R
-        ]
-      }
-    ) : /* @__PURE__ */ $(
+    ), R = !z && /* @__PURE__ */ k(_, { actionRef: u, center: L }), h = typeof o == "string" ? /* @__PURE__ */ k(F, { ...j, name: o }) : o;
+    if (m) {
+      const t = A(v);
+      return /* @__PURE__ */ y(
+        "a",
+        {
+          "data-testid": e != null ? e : "button-link",
+          ref: c,
+          className: w,
+          href: m,
+          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: m,
+        "data-testid": e != null ? e : "button",
+        ref: c,
         className: w,
-        onMouseDown: u,
+        onMouseDown: b,
         onPointerDown: d,
         disabled: !!r,
-        ...c,
+        ...p,
         children: [
-          e && h,
-          n || p,
+          o && h,
+          n || a,
           R
         ]
       }
@@ -80,7 +86,7 @@ const L = g.forwardRef(
   }
 );
 export {
-  L as Button,
-  L as default
+  T as Button,
+  T as default
 };
 //# sourceMappingURL=button.js.map

package/dist/headless/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":";;;;;AA2EO,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":";;;;;;AA0FO,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/headless/components/inputs/composer/composer.js

@@ -0,0 +1,217 @@
+import { jsxs as De, jsx as t } from "react/jsx-runtime";
+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 He = 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 {
+  He as Composer
+};
+//# sourceMappingURL=composer.js.map

package/dist/headless/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":";;;;;;;;;AAuJA,MAAMA,KAA6B,CAACC,MAClCA,KAAa,IAAI,GAAGA,CAAS,qBAAqB,GAAG,CAACA,CAAS;AAEjE,SAASC,GAAcC,GAA4C;AAEjE,EAAAA,EAAM,eAAA;AACR;AAGA,SAASC,EAAQC,GAAgC;AAC/C,SAAI,MAAM,QAAQA,CAAI,IAAUA,EAAK,KAAKD,CAAO,IAC7CE,EAAM,eAA+CD,CAAI,KAAKA,EAAK,SAASC,EAAM,WAC7EF,EAAQC,EAAK,MAAM,QAAQ,IAE7BA,KAAQ,QAAQ,OAAOA,KAAS,aAAaA,MAAS;AAC/D;AAWO,MAAME,KAAWD,EAAM,WAA0C,SAAkBE,GAAOC,GAAK;AACpG,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAC,IAAc;AAAA,IACd,MAAAC,IAAO;AAAA,IACP,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,qBAAAC,IAAsBrB;AAAA,IACtB,SAAAsB,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,QAAAC,KAAS;AAAA,IACT,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,YAAAC,KAAa;AAAA,IACb,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAAC;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,oBAAoBC;AAAA,IACpB,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,KAAY;AAAA,IACZ,WAAAC,KAAY;AAAA,IACZ,aAAAC,KAAc;AAAA,IACd,WAAAC;AAAA,IACA,eAAeC;AAAA,IACf,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACD5C,GAEE,CAAC6C,GAAMC,CAAO,IAAIC,GAA6B;AAAA,IACnD,OAAA7C;AAAA,IACA,cAAcC,KAAA,OAAAA,IAAgB;AAAA,IAC9B,UAAUC;AAAA,EAAA,CACX,GACK,CAAC4C,IAASC,CAAU,IAAIC,GAAS,EAAK,GACtCC,IAAaC,GAAMxB,IAAI,eAAe,GACtCyB,IAAY,GAAGF,CAAU,YAEzBG,IAAWC,GAAY;AAAA,IAC3B,QAAAnC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAG;AAAA;AAAA,IAEA,QAAQ,CAACgC,MAAU;AACjB,YAAMC,IAAWC,GAAoBF,GAAO,EAAE,QAAApC,GAAQ,UAAAC,GAAU,UAAAC,IAAU;AAC1E,MAAImC,EAAS,SAAS,MAAGtC,KAAA,QAAAA,EAAWsC;AAAA,IACtC;AAAA,EAAA,CACD,GACKE,IAAeL,EAAS,aAAA,GACxBM,IAAaN,EAAS,cAAA,GAEtBO,IAAa1C,MAAa,QAE1B2C,IAAWD,KAActC,IAEzBwC,IAAcnD,KAAA,OAAAA,IAAWD,MAAc,QACvCqD,IAAYrD,MAAc,UAAakC,EAAK,SAASlC,GACrDsD,IAAU,CAAC,CAAC5D,KAAUwC,EAAK,KAAA,MAAW,MAAM,CAACrB,KAAY,CAACC,KAAY,CAACjB,KAAQ,CAACwD;AAEtF,MAAIE,IAAS;AACb,MAAIH,KAAepD,MAAc,QAAW;AAC1C,UAAMlB,IAAYkB,IAAYkC,EAAK;AACnC,IAAIpD,KAAa,KAAK,IAAI,IAAI,KAAK,KAAKkB,IAAY,GAAG,CAAC,MAAGuD,IAASrD,EAAoBpB,GAAWkB,CAAS;AAAA,EAC9G;AAEA,QAAMwD,IAAO,MAAM;AACjB,IAAI,CAACF,KAAW,CAAC5D,MACjBA,EAAOwC,EAAK,MAAM,GACdtC,OAAqB,EAAE;AAAA,EAC7B,GAEM6D,KAAgB,CAACzE,MAAoD;AAgBzE,IAfAqC,KAAA,QAAAA,EAAYrC,IACR,EAAAA,EAAM,oBAEK0E;AAAA,MACb;AAAA,QACE,KAAK1E,EAAM;AAAA,QACX,UAAUA,EAAM;AAAA,QAChB,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,QACf,QAAQA,EAAM;AAAA,QACd,aAAaA,EAAM,YAAY;AAAA,QAC/B,SAASA,EAAM;AAAA,MAAA;AAAA,MAEjBW;AAAA,IAAA,MAEa,cAEfX,EAAM,eAAA,GACNwE,EAAA;AAAA,EACF,GAEMG,KAAoB,CAAC3E,MAA+C;AAGxE,QAAI,EAAAA,EAAM,SAAS,IACnB;AAAA,UAAIa,GAAM;AACR,QAAKgB,KAAUf,KAAA,QAAAA;AACf;AAAA,MACF;AACA,MAAA0D,EAAA;AAAA;AAAA,EACF,GAiBMI,KAAeT,IACjB,EAAE,YAhBe,CAACnE,MAA2C;AAC/D,IAAA8C,KAAA,QAAAA,EAAa9C,IAET6E,EAAW7E,EAAM,YAAY,KAAGgE,EAAa,WAAWhE,CAAK;AAAA,EACnE,GAYgC,aAXV,CAACA,MAA2C;AAGhE,IAFA+C,KAAA,QAAAA,EAAc/C,IAEV,EAAAA,EAAM,yBAAyB,QAAQA,EAAM,cAAc,SAASA,EAAM,aAAa,MAC3FgE,EAAa,YAAA;AAAA,EACf,GAM4D,QAL3C,CAAChE,MAA2C;AAC3D,IAAAgD,KAAA,QAAAA,EAAShD,IACL6E,EAAW7E,EAAM,YAAY,KAAGgE,EAAa,OAAOhE,CAAK;AAAA,EAC/D,EAEoE,IAChE,EAAE,YAAA8C,GAAY,aAAAC,GAAa,QAAAC,EAAA,GAEzB8B,KAAaX,KAAYR,EAAS,cAClCoB,KAAa;AAAA,IACjB,4BAA4B5D;AAAA,IAC5B,4BAA4B,KAAK,IAAIC,GAASD,CAAO;AAAA,EAAA,GAEjD6D,KAAc,CAAC5C,IAAiBgC,IAAcV,IAAY,MAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAExG,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhC;AAAA,MACH,GAAG2B;AAAA,MACJ,KAAAtE;AAAA,MACA,WAAW4E;AAAA,QACT;AAAA,QACA,iBAAiB7D,EAAM;AAAA,QACvBgC,MAAW;AAAA,QACXxC,KAAQ;AAAA,QACRgB,KAAY;AAAA,QACZiD,MAAc;AAAA,QACdT,KAAa;AAAA,QACbzB;AAAA,MAAA;AAAA,MAEF,eAAaC,KAAA,OAAAA,IAAU;AAAA,MAEtB,UAAA;AAAA,QAAA5C,EAAQsB,CAAW,IAClB,gBAAA4D,EAAC,OAAA,EAAI,WAAU,8BAA6B,eAAY,wBACrD,UAAA5D,EAAA,CACH,IACE;AAAA,0BACH,OAAA,EAAI,WAAU,wBAAuB,cAAY2B,GAAM,OAAO6B,IAC7D,UAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK3C;AAAA,YACL,WAAU;AAAA,YACV,IAAIgB;AAAA,YACJ,MAAAxB;AAAA,YACA,MAAMb;AAAA,YACN,aAAAJ;AAAA,YACA,WAAAC;AAAA,YACA,UAAAa;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,cAAYG;AAAA,YACZ,mBAAiBC;AAAA,YACjB,oBAAkB6C;AAAA,YAClB,gBAAcX,KAAa;AAAA,YAC3B,OAAOnB;AAAA,YACP,UAAU,CAAClD,MAAUmD,EAAQnD,EAAM,OAAO,KAAK;AAAA,YAC/C,WAAWyE;AAAA,YACX,SAAS,CAACzE,MAAU;AAClB,cAAAsC,KAAA,QAAAA,EAAUtC,IACVsD,EAAW,EAAI;AAAA,YACjB;AAAA,YACA,QAAQ,CAACtD,MAAU;AACjB,cAAAuC,KAAA,QAAAA,EAASvC,IACTsD,EAAW,EAAK;AAAA,YAClB;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QAAA,GAEhB;AAAA,QACCY,IACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYxC;AAAA,YACZ,UAAAd;AAAA,YACA,SAAS8B,EAAS;AAAA,YAClB,eAAY;AAAA,YAEZ,UAAA,gBAAAwB,EAACC,GAAA,EAAK,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,IAEnC;AAAA,QACHnF,EAAQqB,CAAO,IACd,gBAAA6D,EAAC,OAAA,EAAI,WAAU,0BAAyB,eAAY,oBACjD,UAAA7D,EAAA,CACH,IACE;AAAA,QACH8C,IACC,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIzB;AAAA,YACJ,WAAWwB,EAAG,0BAA0Bb,KAAa,8BAA8B;AAAA,YACnF,eAAY;AAAA,YAEX,UAAArD,MAAc,SAAY,GAAGkC,EAAK,MAAM,MAAMlC,CAAS,KAAKkC,EAAK;AAAA,UAAA;AAAA,QAAA,IAElE;AAAA,QACJ,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWD,EAAG,8BAA8B,yBAAyBrE,KAAQ,4BAA4B;AAAA,YACzG,cAAYA,IAAO6B,KAAYD;AAAA,YAC/B,iBAAe,CAAC5B,KAAQ,CAACyD,IAAU,KAAO;AAAA,YAC1C,UAAAzC;AAAA,YACA,eAAahB,IAAO,SAAS;AAAA,YAC7B,aAAad;AAAA,YACb,SAAS4E;AAAA,YACT,eAAY;AAAA,YAEZ,4BAACS,GAAA,EAAK,MAAMvE,IAAO,SAAS,QAAQ,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE/CuD,IACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,UAAS,eAAY,mBAC/D,UAAAZ,EAAA,CACH,IACE;AAAA,QACHL,IACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGlB;AAAA,YACJ,UAAU,CAACjE,MAAU;AACnB,cAAAiE,EAAW,SAASjE,CAAK,GAEzBA,EAAM,cAAc,QAAQ;AAAA,YAC9B;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QAAA,IAEZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

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

@@ -0,0 +1,19 @@
+function f(t) {
+  var e, r, s;
+  return t ? Array.from((e = t.types) != null ? e : []).includes("Files") ? !0 : ((s = (r = t.files) == null ? void 0 : r.length) != null ? s : 0) > 0 : !1;
+}
+function u(t) {
+  return t ? (typeof t == "string" ? t.split(",") : Object.entries(t).flatMap(([r, s]) => [r, ...s])).map((r) => r.trim().toLowerCase()).filter(Boolean) : [];
+}
+function a(t, e) {
+  return e === "*/*" ? !0 : e.startsWith(".") ? t.name.toLowerCase().endsWith(e) : e.endsWith("/*") ? t.type.toLowerCase().startsWith(e.slice(0, -1)) : t.type.toLowerCase() === e;
+}
+function o(t, e) {
+  const r = u(e.accept), s = r.length === 0 ? t : t.filter((n) => r.some((l) => a(n, l))), i = e.multiple === !1 ? 1 : e.maxFiles && e.maxFiles > 0 ? e.maxFiles : void 0;
+  return i === void 0 ? s : s.slice(0, i);
+}
+export {
+  o as filterAttachedFiles,
+  f as isFileDrag
+};
+//# sourceMappingURL=composerFiles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composerFiles.js","sources":["../../../../../src/components/inputs/composer/composerFiles.ts"],"sourcesContent":["/** Accepted file types as `Composer` takes them: a record of mime type to extensions, or a raw `accept` string. */\nexport type ComposerAccept = Record<string, string[]> | string;\n\n/** The part of a `DataTransfer` the drag guard reads. */\nexport interface ComposerDragData {\n  types?: ArrayLike<string> | null | undefined;\n  files?: ArrayLike<unknown> | null | undefined;\n}\n\n/** The options that decide which of the picked or dropped files `Composer` passes on. */\nexport interface ComposerFileOptions {\n  accept?: ComposerAccept | undefined;\n  multiple?: boolean | undefined;\n  maxFiles?: number | undefined;\n}\n\n/**\n * Whether a drag carries files. A text or link drag does not and stays with the browser (the textarea inserts it).\n * `dragover` exposes only `types`, and Firefox gives a `DOMStringList` there, hence `Array.from`; a `drop` has the\n * file list as well.\n */\nexport function isFileDrag(data: ComposerDragData | null | undefined): boolean {\n  if (!data) return false;\n  if (Array.from(data.types ?? []).includes(\"Files\")) return true;\n  return (data.files?.length ?? 0) > 0;\n}\n\nfunction acceptTokens(accept: ComposerAccept | undefined): string[] {\n  if (!accept) return [];\n  const tokens =\n    typeof accept === \"string\" ? accept.split(\",\") : Object.entries(accept).flatMap(([mime, exts]) => [mime, ...exts]);\n  return tokens.map((token) => token.trim().toLowerCase()).filter(Boolean);\n}\n\n// The same three forms as the `accept` attribute: `.ext`, `type/*` and an exact mime type.\nfunction matchesToken(file: File, token: string): boolean {\n  if (token === \"*/*\") return true;\n  if (token.startsWith(\".\")) return file.name.toLowerCase().endsWith(token);\n  if (token.endsWith(\"/*\")) return file.type.toLowerCase().startsWith(token.slice(0, -1));\n  return file.type.toLowerCase() === token;\n}\n\n/**\n * The files of a pick or a drop that `Composer` passes to `onAttach`: those that match `accept` (a drop is not\n * filtered by the browser, and the picker's \"All files\" choice lifts its filter), cut to one file when `multiple` is\n * `false`, then to `maxFiles`. The cut comes last, so the files it drops are the ones past the limit, not the ones\n * `accept` would have refused anyway.\n */\nexport function filterAttachedFiles(files: File[], options: ComposerFileOptions): File[] {\n  const tokens = acceptTokens(options.accept);\n  const accepted =\n    tokens.length === 0 ? files : files.filter((file) => tokens.some((token) => matchesToken(file, token)));\n  const limit =\n    options.multiple === false ? 1 : options.maxFiles && options.maxFiles > 0 ? options.maxFiles : undefined;\n  return limit === undefined ? accepted : accepted.slice(0, limit);\n}\n"],"names":["isFileDrag","data","_a","_b","_c","acceptTokens","accept","mime","exts","token","matchesToken","file","filterAttachedFiles","files","options","tokens","accepted","limit"],"mappings":"AAqBO,SAASA,EAAWC,GAAoD;AAAxE,MAAAC,GAAAC,GAAAC;AACL,SAAKH,IACD,MAAM,MAAKC,IAAAD,EAAK,UAAL,OAAAC,IAAc,CAAA,CAAE,EAAE,SAAS,OAAO,IAAU,OACnDE,KAAAD,IAAAF,EAAK,UAAL,gBAAAE,EAAY,WAAZ,OAAAC,IAAsB,KAAK,IAFjB;AAGpB;AAEA,SAASC,EAAaC,GAA8C;AAClE,SAAKA,KAEH,OAAOA,KAAW,WAAWA,EAAO,MAAM,GAAG,IAAI,OAAO,QAAQA,CAAM,EAAE,QAAQ,CAAC,CAACC,GAAMC,CAAI,MAAM,CAACD,GAAM,GAAGC,CAAI,CAAC,GACrG,IAAI,CAACC,MAAUA,EAAM,KAAA,EAAO,YAAA,CAAa,EAAE,OAAO,OAAO,IAHnD,CAAA;AAItB;AAGA,SAASC,EAAaC,GAAYF,GAAwB;AACxD,SAAIA,MAAU,QAAc,KACxBA,EAAM,WAAW,GAAG,IAAUE,EAAK,KAAK,YAAA,EAAc,SAASF,CAAK,IACpEA,EAAM,SAAS,IAAI,IAAUE,EAAK,KAAK,YAAA,EAAc,WAAWF,EAAM,MAAM,GAAG,EAAE,CAAC,IAC/EE,EAAK,KAAK,YAAA,MAAkBF;AACrC;AAQO,SAASG,EAAoBC,GAAeC,GAAsC;AACvF,QAAMC,IAASV,EAAaS,EAAQ,MAAM,GACpCE,IACJD,EAAO,WAAW,IAAIF,IAAQA,EAAM,OAAO,CAACF,MAASI,EAAO,KAAK,CAACN,MAAUC,EAAaC,GAAMF,CAAK,CAAC,CAAC,GAClGQ,IACJH,EAAQ,aAAa,KAAQ,IAAIA,EAAQ,YAAYA,EAAQ,WAAW,IAAIA,EAAQ,WAAW;AACjG,SAAOG,MAAU,SAAYD,IAAWA,EAAS,MAAM,GAAGC,CAAK;AACjE;"}

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

@@ -0,0 +1,7 @@
+function i(r, e) {
+  return r.isComposing || r.keyCode === 229 || r.key !== "Enter" || r.altKey || r.shiftKey ? "native" : r.ctrlKey || r.metaKey || e === "enter" ? "send" : "native";
+}
+export {
+  i as resolveComposerKeyAction
+};
+//# sourceMappingURL=composerKeys.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composerKeys.js","sources":["../../../../../src/components/inputs/composer/composerKeys.ts"],"sourcesContent":["/** Which Enter sends in a `Composer`: `\"modEnter\"` is Ctrl/⌘+Enter, `\"enter\"` is a plain Enter. */\nexport type ComposerSendKey = \"modEnter\" | \"enter\";\n\n/**\n * What the composer does with a key press in its textarea:\n * - `\"send\"`: prevent the default and send, if sending is allowed;\n * - `\"native\"`: leave the key to the browser (a newline, IME commit, …).\n */\nexport type ComposerKeyAction = \"send\" | \"native\";\n\n/** The part of a keyboard event the key map reads. */\nexport interface ComposerKeyEvent {\n  key: string;\n  shiftKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n  /** Set by Chromium and Firefox while an IME composition is open. */\n  isComposing?: boolean | undefined;\n  /** Safari reports the commit Enter of a composition as keyCode 229 with `isComposing` false. */\n  keyCode?: number | undefined;\n}\n\n/**\n * The composer's keyboard map (Escape and every other key stay native).\n *\n * - IME composition: always native, so an Enter that commits a CJK candidate is not a send.\n * - Ctrl/⌘+Enter (no Shift, no Alt): send in both modes.\n * - Enter alone: send with `sendKey=\"enter\"`, a native newline with `\"modEnter\"`.\n * - Shift+Enter and every other combination: native.\n */\nexport function resolveComposerKeyAction(event: ComposerKeyEvent, sendKey: ComposerSendKey): ComposerKeyAction {\n  if (event.isComposing || event.keyCode === 229) return \"native\";\n  if (event.key !== \"Enter\") return \"native\";\n  if (event.altKey || event.shiftKey) return \"native\";\n\n  if (event.ctrlKey || event.metaKey) return \"send\";\n  return sendKey === \"enter\" ? \"send\" : \"native\";\n}\n"],"names":["resolveComposerKeyAction","event","sendKey"],"mappings":"AA+BO,SAASA,EAAyBC,GAAyBC,GAA6C;AAG7G,SAFID,EAAM,eAAeA,EAAM,YAAY,OACvCA,EAAM,QAAQ,WACdA,EAAM,UAAUA,EAAM,WAAiB,WAEvCA,EAAM,WAAWA,EAAM,WACpBC,MAAY,UADwB,SACL;AACxC;"}