@cfx-dev/ui-components 2.1.12 → 2.1.14

package/dist/components/InputDropzone/InputDropzoneShowcase.js

@@ -1,27 +1,37 @@
-import { jsx as c } from "react/jsx-runtime";
-import e from "react";
-import p from "./InputDropzone.js";
-function u() {
-  const [r, t] = e.useState([]), s = e.useCallback((o) => {
-    t(o);
-  }, []), a = e.useCallback((o) => {
-    t((i) => {
-      const n = [...i], l = n.indexOf(o);
-      return l !== -1 && n.splice(l, 1), n;
+import { jsx as m } from "react/jsx-runtime";
+import n from "react";
+import d from "./InputDropzone.js";
+function R() {
+  const [l, i] = n.useState([]), [a, c] = n.useState([]), r = n.useCallback((o, t) => {
+    i(o), c(t);
+  }, []), p = n.useCallback((o) => {
+    i((t) => {
+      const e = [...t], s = e.indexOf(o);
+      return s !== -1 && e.splice(s, 1), e;
+    });
+  }, []), u = n.useCallback((o) => {
+    c((t) => {
+      const e = [...t], s = e.findIndex((f) => o === f.file);
+      return s !== -1 && e.splice(s, 1), e;
     });
   }, []);
-  return /* @__PURE__ */ c(
-    p,
+  return /* @__PURE__ */ m(
+    d,
     {
-      value: r,
-      onRemoveFile: a,
-      onDrop: s,
+      value: l,
+      rejections: a,
+      onRemoveFile: p,
+      onRemoveRejection: u,
+      onDrop: r,
       text: "Drag and Drop file here or",
-      linkText: "Choose file."
+      linkText: "Choose file.",
+      accept: {
+        "image/png": [".png"]
+      }
     }
   );
 }
-const h = e.memo(u);
+const D = n.memo(R);
 export {
-  h as default
+  D as default
 };

package/dist/components/InputDropzone/ItemPreview.d.ts

@@ -6,7 +6,8 @@ export interface ItemPreviewProps {
     onRemoveFile: (file: FileWithPath) => void;
     removeAriaLabel?: string;
     className?: string;
+    theme?: 'default' | 'failed';
 }
-declare function ItemPreview({ file, onRemoveFile, removeAriaLabel, className, }: ItemPreviewProps): import("react/jsx-runtime").JSX.Element;
+declare function ItemPreview({ file, onRemoveFile, removeAriaLabel, className, theme, }: ItemPreviewProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ItemPreview>;
 export default _default;

package/dist/components/InputDropzone/ItemPreview.js

@@ -1,27 +1,29 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
 import e from "react";
-import { Button as l } from "../Button/Button.js";
-import { Text as f } from "../Text/Text.js";
-import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/ItemPreview.css';const p = "_root_7ek6f_1", d = "_filePath_7ek6f_13", r = {
-  root: p,
-  filePath: d
+import f from "../IconButton/IconButton.js";
+import { Text as d } from "../Text/Text.js";
+import { clsx as _ } from "../../utils/clsx.js";
+import '../../assets/ItemPreview.css';const h = "_root_1v0i1_1", p = "_failed_1v0i1_12", u = "_filePath_1v0i1_15", a = {
+  root: h,
+  failed: p,
+  filePath: u
 };
-function _({
+function P({
   file: t,
-  onRemoveFile: s,
+  onRemoveFile: r,
   removeAriaLabel: o = "",
-  className: c
+  className: i,
+  theme: c = "default"
 }) {
-  const m = e.useCallback(() => {
-    s(t);
-  }, [t, s]), n = e.useMemo(() => `${o}${o ? ", " : ""}${t.path}`, [o, t.path]);
-  return /* @__PURE__ */ i("div", { className: h(r.root, c), children: [
-    /* @__PURE__ */ a(f, { family: "secondary", className: r.filePath, children: t.path }),
-    /* @__PURE__ */ a(l, { theme: "secondary", ariaLabel: n, icon: "Close", onClick: m })
+  const l = e.useCallback(() => {
+    r(t);
+  }, [t, r]), m = e.useMemo(() => `${o}${o ? ", " : ""}${t.path}`, [o, t.path]);
+  return /* @__PURE__ */ n("div", { className: _(a.root, a[c], i), children: [
+    /* @__PURE__ */ s(d, { family: "secondary", className: a.filePath, children: t.path }),
+    /* @__PURE__ */ s(f, { areaSize: "large", ariaLabel: m, name: "Close", onClick: l })
   ] });
 }
-const $ = e.memo(_);
+const I = e.memo(P);
 export {
-  $ as default
+  I as default
 };

package/dist/components/Modal/Modal.js

@@ -4,46 +4,46 @@ import "../Button/Button.js";
 import { ButtonBar as k } from "../Button/ButtonBar.js";
 import "../Button/LinkButton.js";
 import y from "../IconButton/IconButton.js";
-import { Overlay as t } from "../Overlay/Overlay.js";
-import { Text as m } from "../Text/Text.js";
-import { clsx as l } from "../../utils/clsx.js";
+import { Overlay as c } from "../Overlay/Overlay.js";
+import { Text as d } from "../Text/Text.js";
+import { clsx as s } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as w } from "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-import '../../assets/Modal.css';const B = "_root_w22bc_1", v = "_close_w22bc_36", x = "_header_w22bc_42", g = "_footer_w22bc_52", r = {
+import '../../assets/Modal.css';const B = "_root_lmrwf_1", v = "_close_lmrwf_36", x = "_header_lmrwf_42", g = "_footer_lmrwf_52", r = {
   root: B,
-  "modal-appearance": "_modal-appearance_w22bc_1",
+  "modal-appearance": "_modal-appearance_lmrwf_1",
   close: v,
   header: x,
   footer: g
 };
-function p(c) {
+function f(t) {
   const {
-    onClose: o,
-    children: s,
-    className: e,
-    overlayClassName: b,
-    backdropClassName: f,
-    contentClassName: _,
+    onClose: e,
+    children: l,
+    className: o,
+    overlayClassName: p,
+    backdropClassName: _,
+    contentClassName: b,
     ariaDescribedby: h,
     ariaLabelledby: u,
     disableBackdropClose: n = !1,
     disableFocusLock: C = !1
-  } = c, d = N.useCallback(() => {
-    n || !o || o();
-  }, [o, n]);
-  return w(d), /* @__PURE__ */ i(t, { className: l(r.overlay, b), children: [
+  } = t, m = N.useCallback(() => {
+    n || !e || e();
+  }, [e, n]);
+  return w(m), /* @__PURE__ */ i(c, { className: s(r.overlay, p), children: [
     /* @__PURE__ */ a(
-      t.Backdrop,
+      c.Backdrop,
       {
-        onClick: d,
-        className: l(r.backdrop, f)
+        onClick: m,
+        className: s(r.backdrop, _)
       }
     ),
     /* @__PURE__ */ a(
-      t.Content,
+      c.Content,
       {
-        className: _,
+        className: b,
         disableFocusLock: C,
         children: /* @__PURE__ */ i(
           "div",
@@ -51,10 +51,10 @@ function p(c) {
             role: "dialog",
             "aria-describedby": h,
             "aria-labelledby": u,
-            className: l(r.root, e),
+            className: s(r.root, o),
             children: [
-              !!o && /* @__PURE__ */ a(y, { className: r.close, name: "Close", onClick: o }),
-              s
+              !!e && /* @__PURE__ */ a(y, { areaSize: "large", className: r.close, name: "Close", onClick: e }),
+              l
             ]
           }
         )
@@ -62,37 +62,37 @@ function p(c) {
     )
   ] });
 }
-p.Header = function(o) {
+f.Header = function(e) {
   const {
-    title: s,
-    description: e
-  } = o;
+    title: l,
+    description: o
+  } = e;
   return /* @__PURE__ */ i("div", { className: r.header, children: [
     /* @__PURE__ */ a(
-      m,
+      d,
       {
         weight: "bold",
         size: "large",
-        children: s
+        children: l
       }
     ),
-    e && /* @__PURE__ */ a(
-      m,
+    o && /* @__PURE__ */ a(
+      d,
       {
         size: "small",
         color: "secondary",
-        children: e
+        children: o
       }
     )
   ] });
 };
-p.Footer = function(o) {
+f.Footer = function(e) {
   const {
-    className: s,
-    ...e
-  } = o;
-  return /* @__PURE__ */ a(k, { ...e, className: l(r.footer, s) });
+    className: l,
+    ...o
+  } = e;
+  return /* @__PURE__ */ a(k, { ...o, className: s(r.footer, l) });
 };
 export {
-  p as Modal
+  f as Modal
 };

package/dist/components/Modal/ModalShowcase.js

@@ -1,12 +1,15 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import r from "react";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import i from "react";
 import { Button as l } from "../Button/Button.js";
 import "../Button/LinkButton.js";
+import n from "../Input/Input.js";
+import "../Input/RichInput.js";
+import { Box as c } from "../Layout/Box/Box.js";
 import { LOREM_IPSUM as s } from "../../utils/loremipsum.js";
-import { Modal as i } from "./Modal.js";
-function m() {
-  const [a, d] = r.useState(!1), e = r.useCallback(() => d((n) => !n), []);
-  return /* @__PURE__ */ t(
+import { Modal as r } from "./Modal.js";
+function p() {
+  const [d, a] = i.useState(!1), t = i.useCallback(() => a((m) => !m), []);
+  return /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -16,18 +19,19 @@ function m() {
       children: [
         /* @__PURE__ */ o("div", { id: "backdrop" }),
         /* @__PURE__ */ o("div", { id: "overlay-outlet" }),
-        /* @__PURE__ */ o(l, { theme: "primary", onClick: e, text: "Toggle Modal" }),
-        a && /* @__PURE__ */ t(i, { onClose: e, children: [
-          /* @__PURE__ */ o(i.Header, { title: "Modal Title", description: "Modal Description" }),
+        /* @__PURE__ */ o(l, { theme: "primary", onClick: t, text: "Toggle Modal" }),
+        d && /* @__PURE__ */ e(r, { onClose: t, children: [
+          /* @__PURE__ */ o(r.Header, { title: "Modal Title", description: "Modal Description" }),
+          /* @__PURE__ */ o(c, { mb: 4, children: /* @__PURE__ */ o(n, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
           "Modal content: ",
           s,
-          /* @__PURE__ */ t(i.Footer, { children: [
+          /* @__PURE__ */ e(r.Footer, { children: [
             /* @__PURE__ */ o(
               l,
               {
                 fullWidth: !0,
                 theme: "secondary",
-                onClick: e,
+                onClick: t,
                 text: "Close"
               }
             ),
@@ -36,7 +40,7 @@ function m() {
               {
                 fullWidth: !0,
                 theme: "primary",
-                onClick: e,
+                onClick: t,
                 text: "Confirm"
               }
             )
@@ -46,7 +50,7 @@ function m() {
     }
   );
 }
-const x = r.memo(m);
+const S = i.memo(p);
 export {
-  x as default
+  S as default
 };