@smwb/ui-react 2.5.0 → 2.6.1

package/dist/headless/components/dataDisplay/chat/useChatFileUpload.js

@@ -1,42 +1,51 @@
-import { useDropzone as F } from "react-dropzone";
-import { CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES as d } from "./types.js";
-function A(e) {
-  return e == null ? d : Math.max(1, e);
+import { useDropzone as g } from "../../../hooks/useDropzone.js";
+import { CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES as F } from "./types.js";
+function d(e) {
+  return e == null ? F : Math.max(1, e);
 }
-function D({
+function v({
   enabled: e = !1,
-  accept: s,
-  maxFiles: n,
-  onUploadFiles: o,
-  disabled: l = !1
+  accept: p,
+  maxFiles: s,
+  onUploadFiles: t,
+  disabled: i = !1
 }) {
-  const t = A(n), i = e && !!o && !l, { getRootProps: a, getInputProps: c, open: r, isDragActive: u, inputRef: p } = F({
-    accept: s,
-    maxFiles: t,
-    multiple: t > 1,
-    disabled: !i,
-    noClick: !0,
-    noKeyboard: !0,
-    useFsAccessApi: !1,
-    onDropAccepted: (f) => {
-      o && o(f);
+  const n = d(s), r = e && !!t && !i, {
+    getRootProps: l,
+    getInputProps: c,
+    open: u,
+    isDragActive: a,
+    inputRef: P
+  } = g({
+    accept: p,
+    maxFiles: n,
+    multiple: n > 1,
+    disabled: !r,
+    onDropAccepted: (o) => {
+      t && t(o);
     }
   });
   return {
-    enabled: i,
-    maxFiles: t,
-    getRootProps: a,
-    getInputProps: c,
+    enabled: r,
+    maxFiles: n,
+    getRootProps: () => {
+      const { onClick: o, ...f } = l();
+      return f;
+    },
+    getInputProps: (o) => ({
+      ...c(),
+      ...o != null ? o : {}
+    }),
     open: () => {
-      r == null || r();
+      u();
     },
-    inputRef: p,
-    isDragActive: u
+    inputRef: P,
+    isDragActive: a
   };
 }
 export {
-  D as default,
-  A as resolveChatFileUploadMaxFiles,
-  D as useChatFileUpload
+  v as default,
+  d as resolveChatFileUploadMaxFiles,
+  v as useChatFileUpload
 };
 //# sourceMappingURL=useChatFileUpload.js.map

package/dist/headless/components/dataDisplay/chat/useChatFileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChatFileUpload.js","sources":["../../../../../src/components/dataDisplay/chat/useChatFileUpload.ts"],"sourcesContent":["import { useDropzone, type Accept } from \"react-dropzone\";\nimport { CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES } from \"./types\";\n\nexport interface UseChatFileUploadOptions {\n  enabled?: boolean;\n  accept?: Accept;\n  maxFiles?: number;\n  onUploadFiles?: (files: File[]) => void | Promise<void>;\n  disabled?: boolean;\n}\n\nexport function resolveChatFileUploadMaxFiles(maxFiles?: number): number {\n  if (maxFiles == null) {\n    return CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES;\n  }\n\n  return Math.max(1, maxFiles);\n}\n\nexport function useChatFileUpload({\n  enabled = false,\n  accept,\n  maxFiles,\n  onUploadFiles,\n  disabled = false,\n}: UseChatFileUploadOptions) {\n  const resolvedMaxFiles = resolveChatFileUploadMaxFiles(maxFiles);\n  const active = enabled && Boolean(onUploadFiles) && !disabled;\n\n  const { getRootProps, getInputProps, open, isDragActive, inputRef } = useDropzone({\n    accept,\n    maxFiles: resolvedMaxFiles,\n    multiple: resolvedMaxFiles > 1,\n    disabled: !active,\n    noClick: true,\n    noKeyboard: true,\n    useFsAccessApi: false,\n    onDropAccepted: (files) => {\n      if (onUploadFiles) {\n        void onUploadFiles(files);\n      }\n    },\n  });\n\n  const openFilePicker = () => {\n    open?.();\n  };\n\n  return {\n    enabled: active,\n    maxFiles: resolvedMaxFiles,\n    getRootProps,\n    getInputProps,\n    open: openFilePicker,\n    inputRef,\n    isDragActive,\n  };\n}\n\nexport default useChatFileUpload;\n"],"names":["resolveChatFileUploadMaxFiles","maxFiles","CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES","useChatFileUpload","enabled","accept","onUploadFiles","disabled","resolvedMaxFiles","active","getRootProps","getInputProps","open","isDragActive","inputRef","useDropzone","files"],"mappings":";;AAWO,SAASA,EAA8BC,GAA2B;AACvE,SAAIA,KAAY,OACPC,IAGF,KAAK,IAAI,GAAGD,CAAQ;AAC7B;AAEO,SAASE,EAAkB;AAAA,EAChC,SAAAC,IAAU;AAAA,EACV,QAAAC;AAAA,EACA,UAAAJ;AAAA,EACA,eAAAK;AAAA,EACA,UAAAC,IAAW;AACb,GAA6B;AAC3B,QAAMC,IAAmBR,EAA8BC,CAAQ,GACzDQ,IAASL,KAAW,EAAQE,KAAkB,CAACC,GAE/C,EAAE,cAAAG,GAAc,eAAAC,GAAe,MAAAC,GAAM,cAAAC,GAAc,UAAAC,EAAA,IAAaC,EAAY;AAAA,IAChF,QAAAV;AAAA,IACA,UAAUG;AAAA,IACV,UAAUA,IAAmB;AAAA,IAC7B,UAAU,CAACC;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,gBAAgB,CAACO,MAAU;AACzB,MAAIV,KACGA,EAAcU,CAAK;AAAA,IAE5B;AAAA,EAAA,CACD;AAMD,SAAO;AAAA,IACL,SAASP;AAAA,IACT,UAAUD;AAAA,IACV,cAAAE;AAAA,IACA,eAAAC;AAAA,IACA,MATqB,MAAM;AAC3B,MAAAC,KAAA,QAAAA;AAAA,IACF;AAAA,IAQE,UAAAE;AAAA,IACA,cAAAD;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useChatFileUpload.js","sources":["../../../../../src/components/dataDisplay/chat/useChatFileUpload.ts"],"sourcesContent":["import React from \"react\";\nimport { type DropzoneAccept, type DropzoneInputProps, useDropzone } from \"../../../hooks/useDropzone\";\nimport { CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES } from \"./types\";\n\n/** Kept as a named alias so `ChatProps.fileUploadAccept` reads the same as before. */\nexport type Accept = DropzoneAccept;\n\nexport interface UseChatFileUploadOptions {\n  enabled?: boolean;\n  accept?: Accept;\n  maxFiles?: number;\n  onUploadFiles?: (files: File[]) => void | Promise<void>;\n  disabled?: boolean;\n}\n\nexport interface ChatFileUploadRootProps {\n  onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n  onDragLeave: () => void;\n  onDrop: (event: React.DragEvent<HTMLElement>) => void;\n}\n\nexport function resolveChatFileUploadMaxFiles(maxFiles?: number): number {\n  if (maxFiles == null) {\n    return CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES;\n  }\n\n  return Math.max(1, maxFiles);\n}\n\nexport function useChatFileUpload({\n  enabled = false,\n  accept,\n  maxFiles,\n  onUploadFiles,\n  disabled = false,\n}: UseChatFileUploadOptions) {\n  const resolvedMaxFiles = resolveChatFileUploadMaxFiles(maxFiles);\n  const active = enabled && Boolean(onUploadFiles) && !disabled;\n\n  const {\n    getRootProps: getDropzoneRootProps,\n    getInputProps: getDropzoneInputProps,\n    open,\n    isDragActive,\n    inputRef,\n  } = useDropzone({\n    accept,\n    maxFiles: resolvedMaxFiles,\n    multiple: resolvedMaxFiles > 1,\n    disabled: !active,\n    onDropAccepted: (files) => {\n      if (onUploadFiles) {\n        void onUploadFiles(files);\n      }\n    },\n  });\n\n  // Drag/drop root props WITHOUT a click handler — the `noClick` behaviour this hook used to\n  // configure on react-dropzone. Clicking the chat surface must never open the file picker;\n  // the attach button calls `open()` explicitly. Mirrors ui-solid's createChatFileUpload.\n  const getRootProps = (): ChatFileUploadRootProps => {\n    const { onClick: _onClick, ...rest } = getDropzoneRootProps();\n    void _onClick;\n    return rest;\n  };\n\n  const getInputProps = (extra?: { id?: string }): DropzoneInputProps & { id?: string } => ({\n    ...getDropzoneInputProps(),\n    ...(extra ?? {}),\n  });\n\n  const openFilePicker = () => {\n    open();\n  };\n\n  return {\n    enabled: active,\n    maxFiles: resolvedMaxFiles,\n    getRootProps,\n    getInputProps,\n    open: openFilePicker,\n    inputRef,\n    isDragActive,\n  };\n}\n\nexport default useChatFileUpload;\n"],"names":["resolveChatFileUploadMaxFiles","maxFiles","CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES","useChatFileUpload","enabled","accept","onUploadFiles","disabled","resolvedMaxFiles","active","getDropzoneRootProps","getDropzoneInputProps","open","isDragActive","inputRef","useDropzone","files","_onClick","rest","extra"],"mappings":";;AAqBO,SAASA,EAA8BC,GAA2B;AACvE,SAAIA,KAAY,OACPC,IAGF,KAAK,IAAI,GAAGD,CAAQ;AAC7B;AAEO,SAASE,EAAkB;AAAA,EAChC,SAAAC,IAAU;AAAA,EACV,QAAAC;AAAA,EACA,UAAAJ;AAAA,EACA,eAAAK;AAAA,EACA,UAAAC,IAAW;AACb,GAA6B;AAC3B,QAAMC,IAAmBR,EAA8BC,CAAQ,GACzDQ,IAASL,KAAW,EAAQE,KAAkB,CAACC,GAE/C;AAAA,IACJ,cAAcG;AAAA,IACd,eAAeC;AAAA,IACf,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEC,EAAY;AAAA,IACd,QAAAV;AAAA,IACA,UAAUG;AAAA,IACV,UAAUA,IAAmB;AAAA,IAC7B,UAAU,CAACC;AAAA,IACX,gBAAgB,CAACO,MAAU;AACzB,MAAIV,KACGA,EAAcU,CAAK;AAAA,IAE5B;AAAA,EAAA,CACD;AAoBD,SAAO;AAAA,IACL,SAASP;AAAA,IACT,UAAUD;AAAA,IACV,cAlBmB,MAA+B;AAClD,YAAM,EAAE,SAASS,GAAU,GAAGC,EAAA,IAASR,EAAA;AAEvC,aAAOQ;AAAA,IACT;AAAA,IAeE,eAboB,CAACC,OAAmE;AAAA,MACxF,GAAGR,EAAA;AAAA,MACH,GAAIQ,KAAA,OAAAA,IAAS,CAAA;AAAA,IAAC;AAAA,IAYd,MATqB,MAAM;AAC3B,MAAAP,EAAA;AAAA,IACF;AAAA,IAQE,UAAAE;AAAA,IACA,cAAAD;AAAA,EAAA;AAEJ;"}

package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js

@@ -0,0 +1,48 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { useId as p } from "react";
+import j from "clsx";
+import { Modal as r } from "../modal/modal.js";
+import { Typography as b } from "../../dataDisplay/typography/typography.js";
+import { Button as f } from "../../inputs/button/button.js";
+function N(u) {
+  const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: l, danger: h, busy: e, onConfirm: g, onCancel: s, className: x } = u, c = p(), d = p(), m = [n ? c : "", i ? d : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    r,
+    {
+      open: y,
+      onClose: s,
+      size: "small",
+      role: "alertdialog",
+      backdrop: "dark",
+      closeOnEsc: !e,
+      closeOnOutsideClick: !e,
+      "aria-label": t,
+      ...m ? { "aria-describedby": m } : {},
+      children: [
+        /* @__PURE__ */ o(r.Header, { children: t }),
+        /* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ a("div", { className: j("smwb-confirm-dialog__body", x), children: [
+          n ? /* @__PURE__ */ o(b, { id: c, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
+          i ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: i }) : null
+        ] }) }),
+        /* @__PURE__ */ a(r.Footer, { children: [
+          /* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: s, label: l != null ? l : "Cancel" }),
+          /* @__PURE__ */ o(
+            f,
+            {
+              variant: "contained",
+              size: "small",
+              color: h ? "error" : "primary",
+              disabled: !!e,
+              onClick: g,
+              label: C
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  N as ConfirmDialog
+};
+//# sourceMappingURL=confirmDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n  const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n    props;\n\n  const subjectId = useId();\n  const messageId = useId();\n  // Only describe when there IS something to describe — an empty aria-describedby would point a\n  // screen reader at nothing.\n  const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n  return (\n    <Modal\n      open={open}\n      onClose={onCancel}\n      size=\"small\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!busy}\n      closeOnOutsideClick={!busy}\n      aria-label={title}\n      {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n    >\n      <Modal.Header>{title}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n          {subject ? (\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {subject}\n            </Typography>\n          ) : null}\n          {message ? (\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {message}\n            </Typography>\n          ) : null}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={danger ? \"error\" : \"primary\"}\n          disabled={!!busy}\n          onClick={onConfirm}\n          label={confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;AA+BO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/headless/components/inputs/fileDrop/countPreview.js

@@ -0,0 +1,15 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import m from "clsx";
+import { FloatingButton as t } from "../floatingButton/floatingButton.js";
+import { Icon as p } from "../../base/icon/icon.js";
+function w({ handleRemoveAll: o, filesLength: r, previewClassName: s, text: i }) {
+  const n = m("smwb-file-drop__preview", s);
+  return /* @__PURE__ */ l("div", { className: n, children: [
+    /* @__PURE__ */ e(t, { onClick: o, className: "smwb-file-drop__preview-button", children: /* @__PURE__ */ e(p, { name: "delete", size: 28 }) }),
+    /* @__PURE__ */ e("div", { className: "smwb-file-drop__preview-count", children: `${i || "uploaded files:"} ${r}` })
+  ] });
+}
+export {
+  w as CountPreview
+};
+//# sourceMappingURL=countPreview.js.map

package/dist/headless/components/inputs/fileDrop/countPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countPreview.js","sources":["../../../../../src/components/inputs/fileDrop/countPreview.tsx"],"sourcesContent":["import { FloatingButton } from \"../floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport React from \"react\";\nimport cn from \"clsx\";\n\nexport interface CountPreviewProps {\n  previewClassName?: string;\n  text?: string;\n  filesLength: number;\n  handleRemoveAll: () => void;\n}\n\nexport function CountPreview({ handleRemoveAll, filesLength, previewClassName, text }: CountPreviewProps) {\n  const previewClasses = cn(\"smwb-file-drop__preview\", previewClassName);\n\n  return (\n    <div className={previewClasses}>\n      <FloatingButton onClick={handleRemoveAll} className=\"smwb-file-drop__preview-button\">\n        <Icon name=\"delete\" size={28} />\n      </FloatingButton>\n      <div className=\"smwb-file-drop__preview-count\">{`${text ? text : \"uploaded files:\"} ${filesLength}`}</div>\n    </div>\n  );\n}\n"],"names":["CountPreview","handleRemoveAll","filesLength","previewClassName","text","previewClasses","cn","jsxs","jsx","FloatingButton","Icon"],"mappings":";;;;AAYO,SAASA,EAAa,EAAE,iBAAAC,GAAiB,aAAAC,GAAa,kBAAAC,GAAkB,MAAAC,KAA2B;AACxG,QAAMC,IAAiBC,EAAG,2BAA2BH,CAAgB;AAErE,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAe,SAASR,GAAiB,WAAU,kCAClD,UAAA,gBAAAO,EAACE,GAAA,EAAK,MAAK,UAAS,MAAM,GAAA,CAAI,GAChC;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,iCAAiC,UAAA,GAAGJ,KAAc,iBAAiB,IAAIF,CAAW,GAAA,CAAG;AAAA,EAAA,GACtG;AAEJ;"}

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

@@ -0,0 +1,59 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import g, { forwardRef as P } from "react";
+import { useDropzone as R } from "../../../hooks/useDropzone.js";
+import { PreviewWrapper as z } from "./previewWrapper.js";
+import C from "clsx";
+const O = P(function(p, n) {
+  const {
+    preview: d,
+    previewCols: m = 3,
+    galleryItemSize: c = 100,
+    onDrop: f,
+    label: s = "",
+    className: b,
+    previewClassName: w,
+    disabled: e,
+    error: o,
+    ...u
+  } = p, [l, i] = g.useState([]), v = (t) => {
+    i((x) => [...x, ...t]), f(t);
+  }, { getRootProps: h, getInputProps: D } = R({
+    onDrop: v,
+    disabled: e,
+    ...u
+  }), N = () => {
+    i([]);
+  }, _ = C("smwb-file-drop", { "smwb-disabled": e, "smwb-error": !!o }, b);
+  return /* @__PURE__ */ a("div", { ref: n, className: _, "data-testid": "file-drop", children: [
+    l.length > 0 ? /* @__PURE__ */ r(
+      z,
+      {
+        preview: d,
+        files: l,
+        handleRemoveAll: N,
+        previewCols: m,
+        galleryItemSize: c,
+        previewClassName: w
+      }
+    ) : /* @__PURE__ */ a(
+      "div",
+      {
+        className: "smwb-file-drop__input",
+        role: "button",
+        tabIndex: e ? -1 : 0,
+        "aria-disabled": e || void 0,
+        "aria-label": s || "Upload files",
+        ...h(),
+        children: [
+          /* @__PURE__ */ r("div", { className: "smwb-file-drop__input-text", children: s }),
+          /* @__PURE__ */ r("input", { ...D() })
+        ]
+      }
+    ),
+    o ? /* @__PURE__ */ r("span", { className: "smwb-file-drop__error", role: "alert", children: o }) : null
+  ] });
+});
+export {
+  O as FileDrop
+};
+//# sourceMappingURL=fileDrop.js.map

package/dist/headless/components/inputs/fileDrop/fileDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileDrop.js","sources":["../../../../../src/components/inputs/fileDrop/fileDrop.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type DropzoneOptions, useDropzone } from \"../../../hooks/useDropzone\";\nimport { PreviewWrapper } from \"./previewWrapper\";\nimport cn from \"clsx\";\n\nexport interface FileUploadProps extends DropzoneOptions {\n  preview?: boolean;\n  previewCols?: number;\n  galleryItemSize?: number;\n  onDrop: (files: File[]) => void;\n  label?: string;\n  className?: string;\n  previewClassName?: string;\n  disabled?: boolean;\n  /** Validation message rendered below the drop zone. */\n  error?: string;\n}\n\nexport const FileDrop = forwardRef<HTMLDivElement, FileUploadProps>(function FileDrop(props, ref) {\n  const {\n    preview,\n    previewCols = 3,\n    galleryItemSize = 100,\n    onDrop: onDropProp,\n    label = \"\",\n    className,\n    previewClassName,\n    disabled,\n    error,\n    ...dropzoneOptions\n  } = props;\n\n  const [files, setFiles] = React.useState<File[]>([]);\n\n  const onDrop = (acceptedFiles: File[]) => {\n    setFiles((prev) => [...prev, ...acceptedFiles]);\n    onDropProp(acceptedFiles);\n  };\n\n  const { getRootProps, getInputProps } = useDropzone({\n    onDrop,\n    disabled,\n    ...dropzoneOptions,\n  });\n\n  const handleRemoveAll = () => {\n    setFiles([]);\n  };\n\n  const wrapperClasses = cn(\"smwb-file-drop\", { \"smwb-disabled\": disabled, \"smwb-error\": !!error }, className);\n\n  return (\n    <div ref={ref} className={wrapperClasses} data-testid=\"file-drop\">\n      {files.length > 0 ? (\n        <PreviewWrapper\n          preview={preview}\n          files={files}\n          handleRemoveAll={handleRemoveAll}\n          previewCols={previewCols}\n          galleryItemSize={galleryItemSize}\n          previewClassName={previewClassName}\n        />\n      ) : (\n        <div\n          className=\"smwb-file-drop__input\"\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          aria-label={label || \"Upload files\"}\n          {...getRootProps()}\n        >\n          <div className=\"smwb-file-drop__input-text\">{label}</div>\n          <input {...getInputProps()} />\n        </div>\n      )}\n      {error ? (\n        <span className=\"smwb-file-drop__error\" role=\"alert\">\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nexport default FileDrop;\n"],"names":["FileDrop","forwardRef","props","ref","preview","previewCols","galleryItemSize","onDropProp","label","className","previewClassName","disabled","error","dropzoneOptions","files","setFiles","React","onDrop","acceptedFiles","prev","getRootProps","getInputProps","useDropzone","handleRemoveAll","wrapperClasses","cn","jsx","PreviewWrapper","jsxs"],"mappings":";;;;;AAkBO,MAAMA,IAAWC,EAA4C,SAAkBC,GAAOC,GAAK;AAChG,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,QAAQC;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDX,GAEE,CAACY,GAAOC,CAAQ,IAAIC,EAAM,SAAiB,CAAA,CAAE,GAE7CC,IAAS,CAACC,MAA0B;AACxC,IAAAH,EAAS,CAACI,MAAS,CAAC,GAAGA,GAAM,GAAGD,CAAa,CAAC,GAC9CX,EAAWW,CAAa;AAAA,EAC1B,GAEM,EAAE,cAAAE,GAAc,eAAAC,EAAA,IAAkBC,EAAY;AAAA,IAClD,QAAAL;AAAA,IACA,UAAAN;AAAA,IACA,GAAGE;AAAA,EAAA,CACJ,GAEKU,IAAkB,MAAM;AAC5B,IAAAR,EAAS,CAAA,CAAE;AAAA,EACb,GAEMS,IAAiBC,EAAG,kBAAkB,EAAE,iBAAiBd,GAAU,cAAc,CAAC,CAACC,EAAA,GAASH,CAAS;AAE3G,2BACG,OAAA,EAAI,KAAAN,GAAU,WAAWqB,GAAgB,eAAY,aACnD,UAAA;AAAA,IAAAV,EAAM,SAAS,IACd,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAvB;AAAA,QACA,OAAAU;AAAA,QACA,iBAAAS;AAAA,QACA,aAAAlB;AAAA,QACA,iBAAAC;AAAA,QACA,kBAAAI;AAAA,MAAA;AAAA,IAAA,IAGF,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAUjB,IAAW,KAAK;AAAA,QAC1B,iBAAeA,KAAY;AAAA,QAC3B,cAAYH,KAAS;AAAA,QACpB,GAAGY,EAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAlB,GAAM;AAAA,UACnD,gBAAAkB,EAAC,SAAA,EAAO,GAAGL,IAAc,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/BT,sBACE,QAAA,EAAK,WAAU,yBAAwB,MAAK,SAC1C,aACH,IACE;AAAA,EAAA,GACN;AAEJ,CAAC;"}

package/dist/headless/components/inputs/fileDrop/preview.js

@@ -0,0 +1,41 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { isImageFile as c } from "./utils.js";
+import w from "clsx";
+import { FloatingButton as d } from "../floatingButton/floatingButton.js";
+import { Icon as v } from "../../base/icon/icon.js";
+import { ImagesList as f } from "../../dataDisplay/imagesList/imagesList.js";
+import g from "../../dataDisplay/imagesList/imagesListItem/imagesListItem.js";
+function C(i) {
+  const { files: o, handleRemoveAll: l, previewCols: t, galleryItemSize: s, previewClassName: a } = i, n = w("smwb-file-drop__preview", a);
+  return /* @__PURE__ */ p("div", { className: n, children: [
+    /* @__PURE__ */ r(d, { onClick: l, className: "smwb-file-drop__preview-button", children: /* @__PURE__ */ r(v, { name: "delete", size: 28 }) }),
+    /* @__PURE__ */ r(f, { className: "smwb-file-drop__preview-gallery", cols: t, rowsHeight: s, children: o.map((e) => {
+      const m = c(e) ? URL.createObjectURL(e) : null;
+      return m ? /* @__PURE__ */ r(
+        g,
+        {
+          className: "smwb-file-drop__preview-gallery-image",
+          src: m,
+          rows: 1,
+          cols: 1,
+          itemBarContent: e.name
+        },
+        e.name
+      ) : /* @__PURE__ */ r(
+        "div",
+        {
+          className: "smwb-file-drop__preview-gallery-file",
+          style: {
+            width: `${s - 4}px`
+          },
+          children: e.name
+        },
+        e.name
+      );
+    }) })
+  ] });
+}
+export {
+  C as Preview
+};
+//# sourceMappingURL=preview.js.map

package/dist/headless/components/inputs/fileDrop/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sources":["../../../../../src/components/inputs/fileDrop/preview.tsx"],"sourcesContent":["import { FloatingButton } from \"../floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { ImagesList, ImagesListItem } from \"../../dataDisplay/imagesList\";\nimport { isImageFile } from \"./utils\";\nimport React from \"react\";\nimport cn from \"clsx\";\n\nexport interface PreviewProps {\n  previewCols?: number;\n  galleryItemSize?: number;\n  previewClassName?: string;\n  files: File[];\n  handleRemoveAll: () => void;\n}\n\nexport function Preview(props: PreviewProps) {\n  const { files, handleRemoveAll, previewCols, galleryItemSize, previewClassName } = props;\n\n  const previewClasses = cn(\"smwb-file-drop__preview\", previewClassName);\n\n  return (\n    <div className={previewClasses}>\n      <FloatingButton onClick={handleRemoveAll} className=\"smwb-file-drop__preview-button\">\n        <Icon name=\"delete\" size={28} />\n      </FloatingButton>\n      <ImagesList className=\"smwb-file-drop__preview-gallery\" cols={previewCols as number} rowsHeight={galleryItemSize}>\n        {files.map((file: File) => {\n          const src = isImageFile(file) ? URL.createObjectURL(file) : null;\n\n          return src ? (\n            <ImagesListItem\n              className=\"smwb-file-drop__preview-gallery-image\"\n              key={file.name}\n              src={src}\n              rows={1}\n              cols={1}\n              itemBarContent={file.name}\n            />\n          ) : (\n            <div\n              key={file.name}\n              className=\"smwb-file-drop__preview-gallery-file\"\n              style={{\n                width: `${(galleryItemSize as number) - 4}px`,\n              }}\n            >\n              {file.name}\n            </div>\n          );\n        })}\n      </ImagesList>\n    </div>\n  );\n}\n"],"names":["Preview","props","files","handleRemoveAll","previewCols","galleryItemSize","previewClassName","previewClasses","cn","jsxs","jsx","FloatingButton","Icon","ImagesList","file","src","isImageFile","ImagesListItem"],"mappings":";;;;;;;AAeO,SAASA,EAAQC,GAAqB;AAC3C,QAAM,EAAE,OAAAC,GAAO,iBAAAC,GAAiB,aAAAC,GAAa,iBAAAC,GAAiB,kBAAAC,MAAqBL,GAE7EM,IAAiBC,EAAG,2BAA2BF,CAAgB;AAErE,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GACd,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAe,SAASR,GAAiB,WAAU,kCAClD,UAAA,gBAAAO,EAACE,GAAA,EAAK,MAAK,UAAS,MAAM,GAAA,CAAI,GAChC;AAAA,IACA,gBAAAF,EAACG,GAAA,EAAW,WAAU,mCAAkC,MAAMT,GAAuB,YAAYC,GAC9F,UAAAH,EAAM,IAAI,CAACY,MAAe;AACzB,YAAMC,IAAMC,EAAYF,CAAI,IAAI,IAAI,gBAAgBA,CAAI,IAAI;AAE5D,aAAOC,IACL,gBAAAL;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UAEV,KAAAF;AAAA,UACA,MAAM;AAAA,UACN,MAAM;AAAA,UACN,gBAAgBD,EAAK;AAAA,QAAA;AAAA,QAJhBA,EAAK;AAAA,MAAA,IAOZ,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,OAAO,GAAIL,IAA6B,CAAC;AAAA,UAAA;AAAA,UAG1C,UAAAS,EAAK;AAAA,QAAA;AAAA,QANDA,EAAK;AAAA,MAAA;AAAA,IAShB,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/headless/components/inputs/fileDrop/previewWrapper.js

@@ -0,0 +1,27 @@
+import { jsx as e, Fragment as p } from "react/jsx-runtime";
+import { Preview as s } from "./preview.js";
+import { CountPreview as v } from "./countPreview.js";
+function g(t) {
+  const { previewCols: l, preview: m, galleryItemSize: n, handleRemoveAll: r, files: i, previewClassName: o } = t;
+  return /* @__PURE__ */ e(p, { children: m ? /* @__PURE__ */ e(
+    s,
+    {
+      files: i,
+      handleRemoveAll: r,
+      previewCols: l,
+      galleryItemSize: n,
+      previewClassName: o
+    }
+  ) : /* @__PURE__ */ e(
+    v,
+    {
+      filesLength: i.length,
+      handleRemoveAll: r,
+      previewClassName: o
+    }
+  ) });
+}
+export {
+  g as PreviewWrapper
+};
+//# sourceMappingURL=previewWrapper.js.map

package/dist/headless/components/inputs/fileDrop/previewWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"previewWrapper.js","sources":["../../../../../src/components/inputs/fileDrop/previewWrapper.tsx"],"sourcesContent":["import { Preview } from \"./preview\";\nimport { CountPreview } from \"./countPreview\";\nimport React from \"react\";\n\nexport interface PreviewWrapperProps {\n  preview?: boolean;\n  files: File[];\n  handleRemoveAll: () => void;\n  previewCols?: number;\n  galleryItemSize?: number;\n  previewClassName?: string;\n}\n\nexport function PreviewWrapper(props: PreviewWrapperProps) {\n  const { previewCols, preview, galleryItemSize, handleRemoveAll, files, previewClassName } = props;\n\n  return (\n    <>\n      {preview ? (\n        <Preview\n          files={files}\n          handleRemoveAll={handleRemoveAll}\n          previewCols={previewCols}\n          galleryItemSize={galleryItemSize}\n          previewClassName={previewClassName}\n        />\n      ) : (\n        <CountPreview\n          filesLength={files.length}\n          handleRemoveAll={handleRemoveAll}\n          previewClassName={previewClassName}\n        />\n      )}\n    </>\n  );\n}\n"],"names":["PreviewWrapper","props","previewCols","preview","galleryItemSize","handleRemoveAll","files","previewClassName","jsx","Preview","CountPreview"],"mappings":";;;AAaO,SAASA,EAAeC,GAA4B;AACzD,QAAM,EAAE,aAAAC,GAAa,SAAAC,GAAS,iBAAAC,GAAiB,iBAAAC,GAAiB,OAAAC,GAAO,kBAAAC,MAAqBN;AAE5F,gCAEK,UAAAE,IACC,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAH;AAAA,MACA,iBAAAD;AAAA,MACA,aAAAH;AAAA,MACA,iBAAAE;AAAA,MACA,kBAAAG;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAC;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,aAAaJ,EAAM;AAAA,MACnB,iBAAAD;AAAA,MACA,kBAAAE;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/headless/components/inputs/fileDrop/utils.js

@@ -0,0 +1,7 @@
+function t(e) {
+  return /^image\/(png|jpeg)$/.test(e.type);
+}
+export {
+  t as isImageFile
+};
+//# sourceMappingURL=utils.js.map

package/dist/headless/components/inputs/fileDrop/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/inputs/fileDrop/utils.ts"],"sourcesContent":["export function isImageFile(file: File): boolean {\n  return /^image\\/(png|jpeg)$/.test(file.type);\n}\n"],"names":["isImageFile","file"],"mappings":"AAAO,SAASA,EAAYC,GAAqB;AAC/C,SAAO,sBAAsB,KAAKA,EAAK,IAAI;AAC7C;"}

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

@@ -0,0 +1,34 @@
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { useDropzone as D } from "../../../hooks/useDropzone.js";
+import a from "clsx";
+const P = x(function(p, m) {
+  const { label: c, onClick: e, onFilesSelected: o, className: u, buttonClassName: d, disabled: s, error: l, ...t } = p, { getRootProps: f, getInputProps: b } = D({
+    ...t,
+    disabled: s,
+    onDropAccepted: (r, h) => {
+      var i;
+      o == null || o(r), (i = t.onDropAccepted) == null || i.call(t, r, h);
+    }
+  }), N = (r) => {
+    e == null || e(r);
+  };
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      ref: m,
+      className: a("smwb-file-input", { "smwb-disabled": s }, u),
+      "data-testid": "file-input",
+      ...f(),
+      children: [
+        /* @__PURE__ */ n("button", { type: "button", className: a(d), disabled: s, onClick: N, children: c }),
+        /* @__PURE__ */ n("input", { ...b() }),
+        l ? /* @__PURE__ */ n("span", { className: "smwb-file-input__error", role: "alert", children: l }) : null
+      ]
+    }
+  );
+});
+export {
+  P as FileInput
+};
+//# sourceMappingURL=fileInput.js.map

package/dist/headless/components/inputs/fileInput/fileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileInput.js","sources":["../../../../../src/components/inputs/fileInput/fileInput.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type DropzoneOptions, useDropzone } from \"../../../hooks/useDropzone\";\nimport cn from \"clsx\";\n\nexport interface FileInputProps extends DropzoneOptions {\n  label?: string;\n  className?: string;\n  buttonClassName?: string;\n  disabled?: boolean;\n  /** Validation message shown below the control. */\n  error?: string;\n  /** Fired with the accepted files when the user picks them. */\n  onFilesSelected?: (files: File[]) => void;\n  /** @deprecated optional click passthrough on the trigger button. */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const FileInput = forwardRef<HTMLDivElement, FileInputProps>(function FileInput(props, ref) {\n  const { label, onClick, onFilesSelected, className, buttonClassName, disabled, error, ...dropzoneOptions } = props;\n\n  const { getRootProps, getInputProps } = useDropzone({\n    ...dropzoneOptions,\n    disabled,\n    onDropAccepted: (accepted, event) => {\n      onFilesSelected?.(accepted);\n      dropzoneOptions.onDropAccepted?.(accepted, event);\n    },\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"smwb-file-input\", { \"smwb-disabled\": disabled }, className)}\n      data-testid=\"file-input\"\n      {...getRootProps()}\n    >\n      <button type=\"button\" className={cn(buttonClassName)} disabled={disabled} onClick={handleClick}>\n        {label}\n      </button>\n      <input {...getInputProps()} />\n      {error ? (\n        <span className=\"smwb-file-input__error\" role=\"alert\">\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nexport default FileInput;\n"],"names":["FileInput","forwardRef","props","ref","label","onClick","onFilesSelected","className","buttonClassName","disabled","error","dropzoneOptions","getRootProps","getInputProps","useDropzone","accepted","event","_a","handleClick","e","jsxs","cn","jsx"],"mappings":";;;;AAiBO,MAAMA,IAAYC,EAA2C,SAAmBC,GAAOC,GAAK;AACjG,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,GAAiB,UAAAC,GAAU,OAAAC,GAAO,GAAGC,EAAA,IAAoBT,GAEvG,EAAE,cAAAU,GAAc,eAAAC,EAAA,IAAkBC,EAAY;AAAA,IAClD,GAAGH;AAAA,IACH,UAAAF;AAAA,IACA,gBAAgB,CAACM,GAAUC,MAAU;;AACnC,MAAAV,KAAA,QAAAA,EAAkBS,KAClBE,IAAAN,EAAgB,mBAAhB,QAAAM,EAAA,KAAAN,GAAiCI,GAAUC;AAAA,IAC7C;AAAA,EAAA,CACD,GAEKE,IAAc,CAACC,MAA2C;AAC9D,IAAAd,KAAA,QAAAA,EAAUc;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,WAAWkB,EAAG,mBAAmB,EAAE,iBAAiBZ,EAAA,GAAYF,CAAS;AAAA,MACzE,eAAY;AAAA,MACX,GAAGK,EAAA;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWD,EAAGb,CAAe,GAAG,UAAAC,GAAoB,SAASS,GAChF,UAAAd,EAAA,CACH;AAAA,QACA,gBAAAkB,EAAC,SAAA,EAAO,GAAGT,EAAA,EAAc,CAAG;AAAA,QAC3BH,sBACE,QAAA,EAAK,WAAU,0BAAyB,MAAK,SAC3C,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}