@cfx-dev/ui-components 4.5.3 → 4.5.4

package/dist/assets/css/Modal.css

@@ -1 +1 @@
-.cfxui__Modal__root__53283{flex-shrink:0;position:relative;display:flex;flex-direction:column;max-width:calc((var(--width) - var(--offset-safezone) * 2) * 1);min-width:calc(var(--quant) * 37.5);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6) calc(var(--quant) * 3.75) calc(var(--quant) * 3.75) calc(var(--quant) * 3.75);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden auto;animation-name:cfxui__Modal__modal-appearance__60dd7;animation-duration:.2s}@media (min-width: 1024px){.cfxui__Modal__root__53283{min-width:calc(var(--quant) * 75)}}@media (min-width: 1920px){.cfxui__Modal__root__53283{min-width:calc(var(--quant) * 87.5);padding:calc(var(--quant) * 6) calc(var(--quant) * 5) calc(var(--quant) * 5) calc(var(--quant) * 5)}}.cfxui__Modal__root__53283 .cfxui__Modal__close__2df9b{position:absolute;top:calc(var(--quant) * 1.5);right:calc(var(--quant) * 2);z-index:1}.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 3)}@media (min-width: 1920px){.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76{padding-bottom:calc(var(--quant) * 4)}}.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}.cfxui__Modal__root__53283 .cfxui__Modal__footer__bb2fc{padding-top:calc(var(--quant) * 2.5)}@media (min-width: 1920px){.cfxui__Modal__root__53283 .cfxui__Modal__footer__bb2fc{padding-top:calc(var(--quant) * 3.75)}}@keyframes cfxui__Modal__modal-appearance__60dd7{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
+.cfxui__Modal__root__53283{flex-shrink:0;position:relative;display:flex;flex-direction:column;max-width:calc((var(--width) - var(--offset-safezone) * 2) * 1);min-width:calc(var(--quant) * 37.5);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6) calc(var(--quant) * 3.75) calc(var(--quant) * 3.75) calc(var(--quant) * 3.75);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden auto;animation-name:cfxui__Modal__modal-appearance__60dd7;animation-duration:.2s}.cfxui__Modal__root__53283.cfxui__Modal__colored__649d1{border-top:calc(var(--quant) * 1.25) solid var(--modal-color);background:linear-gradient(180deg,var(--modal-color-bg) 0%,rgba(var(--color-bg),.2) 44.05%),linear-gradient(0deg,var(--color-modal-background),var(--color-modal-background))}@media (min-width: 1024px){.cfxui__Modal__root__53283{min-width:calc(var(--quant) * 75)}}@media (min-width: 1920px){.cfxui__Modal__root__53283{min-width:calc(var(--quant) * 87.5);padding:calc(var(--quant) * 6) calc(var(--quant) * 5) calc(var(--quant) * 5) calc(var(--quant) * 5)}}.cfxui__Modal__root__53283 .cfxui__Modal__close__2df9b{position:absolute;top:calc(var(--quant) * 1.5);right:calc(var(--quant) * 2);z-index:1}.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 3)}@media (min-width: 1920px){.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76{padding-bottom:calc(var(--quant) * 4)}}.cfxui__Modal__root__53283 .cfxui__Modal__footer__bb2fc{padding-top:calc(var(--quant) * 2.5)}@media (min-width: 1920px){.cfxui__Modal__root__53283 .cfxui__Modal__footer__bb2fc{padding-top:calc(var(--quant) * 3.75)}}@keyframes cfxui__Modal__modal-appearance__60dd7{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}

package/dist/components/Button/LinkButton.js

@@ -1,31 +1,37 @@
-import { jsx as r } from "react/jsx-runtime";
-import i from "react";
-import { noop as k } from "../../utils/functional.js";
-import { isExternalUrl as x } from "../../utils/links.js";
-import { getButtonClassName as d, ButtonContent as B } from "./Button.js";
-function M(t) {
+import { jsx as s } from "react/jsx-runtime";
+import o from "react";
+import { isExternalUrl as b } from "../../utils/links.js";
+import { getButtonClassName as h, ButtonContent as B } from "./Button.js";
+function M(e) {
   const {
-    to: e,
-    title: m = "",
-    tabIndex: a,
-    target: s = "",
-    onClick: l = k,
-    isHrefProp: n = !1,
-    Component: f,
-    ref: c
-  } = t, u = i.useMemo(() => d(t), [t]), o = x(e), C = o ? "a" : f || "a", p = i.useMemo(() => o || n ? { href: e } : { to: e }, [e, o, n]);
-  return /* @__PURE__ */ r(
-    C,
+    to: t,
+    title: f = "",
+    tabIndex: m,
+    target: u = "",
+    onClick: n,
+    isHrefProp: a = !1,
+    Component: c,
+    disabled: l = !1,
+    ref: C
+  } = e, d = o.useMemo(() => h(e), [e]), r = b(t), k = r ? "a" : c || "a", p = o.useMemo(() => r || a ? { href: t } : { to: t }, [t, r, a]), x = o.useCallback((i) => {
+    if (l) {
+      i.preventDefault();
+      return;
+    }
+    n && n(i);
+  }, [l, n]);
+  return /* @__PURE__ */ s(
+    k,
     {
-      ref: c,
-      className: u,
-      tabIndex: a,
-      title: m,
-      target: s,
+      ref: C,
+      className: d,
+      tabIndex: m,
+      title: f,
+      target: u,
       rel: "noopener noreferrer",
-      onClickCapture: l,
+      onClickCapture: x,
       ...p,
-      children: /* @__PURE__ */ r(B, { ...t })
+      children: /* @__PURE__ */ s(B, { ...e })
     }
   );
 }

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -2,9 +2,9 @@ import { jsx as r } from "react/jsx-runtime";
 import c from "react";
 import C from "../Button/Button.js";
 import { clsx as _ } from "../../utils/clsx.js";
-import { noop as f } from "../../utils/functional.js";
 import "../../utils/links.js";
-import { Title as u } from "../Title/Title.js";
+import { Title as f } from "../Title/Title.js";
+import { noop as u } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
@@ -19,7 +19,7 @@ function h(o) {
     copiedTitle: T,
     textToCopy: j,
     fixedOn: n,
-    onClick: t = f,
+    onClick: t = u,
     ...p
   } = o, {
     copied: l,
@@ -29,7 +29,7 @@ function h(o) {
     t(s), i();
   }, [i, t]), a = _(e.root, { [e.copied]: l });
   return /* @__PURE__ */ r(
-    u,
+    f,
     {
       title: m,
       fixedOn: n,

package/dist/components/Flyout/Flyout.js

@@ -3,9 +3,9 @@ import d from "react";
 import { F as f } from "../../Combination-N-vN9BB-.js";
 import p from "../Button/Button.js";
 import { clsx as l } from "../../utils/clsx.js";
-import { noop as h } from "../../utils/functional.js";
 import "../../utils/links.js";
-import { Interactive as y } from "../Interactive/Interactive.js";
+import { Interactive as h } from "../Interactive/Interactive.js";
+import { noop as y } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
@@ -28,7 +28,7 @@ function I(c) {
   const {
     disabled: t = !1,
     size: s = "normal",
-    onClose: r = h,
+    onClose: r = y,
     children: a,
     holderClassName: n
   } = c, m = x(E);
@@ -42,7 +42,7 @@ function I(c) {
     [o.active]: !t
   });
   return /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i("div", { className: u, children: [
-    /* @__PURE__ */ e(y, { showPointer: !1, className: o.backdrop, onClick: r }),
+    /* @__PURE__ */ e(h, { showPointer: !1, className: o.backdrop, onClick: r }),
     /* @__PURE__ */ e("div", { className: o.mask, children: /* @__PURE__ */ e("div", { className: l(o.holder, n), children: /* @__PURE__ */ e(f, { disabled: !!t, className: o.content, children: a }) }) })
   ] }) });
 }

package/dist/components/Modal/Modal.d.ts

@@ -1,9 +1,21 @@
 import { default as React } from 'react';
 import { ButtonBarProps } from '../Button';
+import { IconBigName } from '../Icons';
+import { ColorType } from '../../utils/ui';
 
+export declare enum ModalThemeEnum {
+    default = "default",
+    danger = "danger",
+    success = "success",
+    warning = "warning"
+}
+export type ModalThemeType = keyof typeof ModalThemeEnum;
+export declare const MODAL_THEME_TO_COLOR_MAP: Record<ModalThemeType, ColorType | undefined>;
 export interface ModalProps {
     children: React.ReactNode;
     onClose?: () => void;
+    color?: ColorType;
+    theme?: ModalThemeType;
     className?: string;
     overlayClassName?: string;
     backdropClassName?: string;
@@ -18,8 +30,30 @@ export declare namespace Modal {
     var Header: (props: ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
     var Footer: (props: ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
 }
-export interface ModalHeaderProps {
+export interface ModalHeaderIconProps {
+    theme?: ModalThemeType;
+    iconName?: IconBigName;
+    iconColor?: ColorType;
+}
+type ModalHeaderIconType = {
+    theme: ModalThemeType;
+    iconName?: never;
+    iconColor?: never;
+    icon?: never;
+} | {
+    theme?: never;
+    iconName: IconBigName;
+    iconColor?: ColorType;
+    icon?: never;
+} | {
+    theme?: never;
+    iconName?: never;
+    iconColor?: never;
+    icon?: React.ReactNode;
+};
+export type ModalHeaderProps = ModalHeaderIconType & {
     title: string;
     description?: React.ReactNode;
-}
+};
 export type ModalFooterProps = ButtonBarProps;
+export {};

package/dist/components/Modal/Modal.js

@@ -1,60 +1,81 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import N from "react";
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import B from "react";
 import "../Button/Button.js";
-import { ButtonBar as k } from "../Button/ButtonBar.js";
+import { ButtonBar as M } from "../Button/ButtonBar.js";
 import "../../utils/links.js";
-import y from "../IconButton/IconButton.js";
-import { Overlay as t } from "../Overlay/Overlay.js";
-import { Text as m } from "../Text/Text.js";
-import "../../utils/ui/ui.js";
-import { clsx as s } from "../../utils/clsx.js";
+import g from "../Flex/Flex.js";
+import { clsx as i } from "../../utils/clsx.js";
+import { IconBig as w } from "../IconBig/IconBig.js";
+import O from "../IconButton/IconButton.js";
+import { Overlay as u } from "../Overlay/Overlay.js";
+import { Text as b } from "../Text/Text.js";
+import { ui as C } from "../../utils/ui/ui.js";
+import { ColorEnum as z } from "../../utils/ui/ui.types.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as x } from "../../utils/hooks/useKeyboardClose.js";
+import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
-const M = "cfxui__Modal__root__53283", B = "cfxui__Modal__close__2df9b", v = "cfxui__Modal__header__bec76", g = "cfxui__Modal__footer__bb2fc", r = {
-  root: M,
-  close: B,
-  header: v,
-  footer: g
+const H = "cfxui__Modal__root__53283", I = "cfxui__Modal__colored__649d1", L = "cfxui__Modal__close__2df9b", T = "cfxui__Modal__header__bec76", j = "cfxui__Modal__footer__bb2fc", l = {
+  root: H,
+  colored: I,
+  close: L,
+  header: T,
+  footer: j
 };
-function _(c) {
+var A = /* @__PURE__ */ ((o) => (o.default = "default", o.danger = "danger", o.success = "success", o.warning = "warning", o))(A || {});
+const h = {
+  default: void 0,
+  danger: "red",
+  success: "green",
+  warning: "yellow"
+};
+function N(o) {
   const {
-    onClose: o,
-    children: l,
-    className: e,
-    overlayClassName: f,
-    backdropClassName: p,
-    contentClassName: b,
-    ariaDescribedby: u,
-    ariaLabelledby: h,
-    disableBackdropClose: d = !1,
-    disableFocusLock: C = !1
-  } = c, n = N.useCallback(() => {
-    d || !o || o();
-  }, [o, d]);
-  return x(n), /* @__PURE__ */ i(t, { className: s(r.overlay, f), children: [
+    theme: r = "default",
+    color: c,
+    onClose: e,
+    children: t,
+    className: s,
+    overlayClassName: m,
+    backdropClassName: f,
+    contentClassName: y,
+    ariaDescribedby: v,
+    ariaLabelledby: x,
+    disableBackdropClose: _ = !1,
+    disableFocusLock: k = !1
+  } = o, p = B.useCallback(() => {
+    _ || !e || e();
+  }, [e, _]);
+  F(p);
+  const n = c || h[r];
+  return /* @__PURE__ */ d(u, { className: i(l.overlay, m), children: [
     /* @__PURE__ */ a(
-      t.Backdrop,
+      u.Backdrop,
       {
-        onClick: n,
-        className: s(r.backdrop, p)
+        onClick: p,
+        className: i(l.backdrop, f)
       }
     ),
     /* @__PURE__ */ a(
-      t.Content,
+      u.Content,
       {
-        className: b,
-        disableFocusLock: C,
-        children: /* @__PURE__ */ i(
+        className: y,
+        disableFocusLock: k,
+        children: /* @__PURE__ */ d(
           "div",
           {
             role: "dialog",
-            "aria-describedby": u,
-            "aria-labelledby": h,
-            className: s(r.root, e),
+            "aria-describedby": v,
+            "aria-labelledby": x,
+            className: i(l.root, s, {
+              [l.colored]: !!n
+            }),
+            style: {
+              "--modal-color": n ? C.color(n) : void 0,
+              "--modal-color-bg": n ? C.color(n, void 0, 0.2) : void 0
+            },
             children: [
-              !!o && /* @__PURE__ */ a(y, { areaSize: "large", className: r.close, name: "Close", onClick: o }),
-              l
+              !!e && /* @__PURE__ */ a(O, { areaSize: "large", className: l.close, name: "Close", onClick: e }),
+              t
             ]
           }
         )
@@ -62,37 +83,82 @@ function _(c) {
     )
   ] });
 }
-_.Header = function(o) {
+function D(o) {
+  switch (o) {
+    case "danger":
+      return "Warni";
+    case "success":
+      return "Confirm";
+    default:
+      return;
+  }
+}
+function P(o) {
   const {
-    title: l,
-    description: e
+    theme: r = "default",
+    iconName: c,
+    iconColor: e
   } = o;
-  return /* @__PURE__ */ i("div", { className: r.header, children: [
-    /* @__PURE__ */ a(
-      m,
+  if (!c && !r)
+    return null;
+  const t = c || D(r), s = e || h[r] || z.primary;
+  return t ? /* @__PURE__ */ a(g, { centered: !0, children: /* @__PURE__ */ a(
+    w,
+    {
+      name: t,
+      color: s,
+      size: "normal"
+    }
+  ) }) : null;
+}
+N.Header = function(r) {
+  const {
+    title: c,
+    description: e,
+    theme: t = "default",
+    icon: s,
+    iconName: m,
+    iconColor: f
+  } = r;
+  return /* @__PURE__ */ d(g, { vertical: !0, gap: "large", children: [
+    s || /* @__PURE__ */ a(
+      P,
       {
-        weight: "bold",
-        size: "large",
-        children: l
+        theme: t,
+        iconName: m,
+        iconColor: f
       }
     ),
-    e && /* @__PURE__ */ a(
-      m,
-      {
-        size: "small",
-        color: "secondary",
-        children: e
-      }
-    )
+    /* @__PURE__ */ d("div", { className: l.header, children: [
+      /* @__PURE__ */ a(
+        b,
+        {
+          weight: "bold",
+          size: "large",
+          children: c
+        }
+      ),
+      e && /* @__PURE__ */ a(
+        b,
+        {
+          size: "small",
+          color: "secondary",
+          typographic: !0,
+          children: e
+        }
+      )
+    ] })
   ] });
 };
-_.Footer = function(o) {
+N.Footer = function(r) {
   const {
-    className: l,
+    className: c,
     ...e
-  } = o;
-  return /* @__PURE__ */ a(k, { ...e, className: s(r.footer, l) });
+  } = r;
+  return /* @__PURE__ */ a(M, { ...e, className: i(l.footer, c) });
 };
 export {
-  _ as Modal
+  h as MODAL_THEME_TO_COLOR_MAP,
+  N as Modal,
+  A as ModalThemeEnum
 };

package/dist/components/Modal/ModalShowcase.js

@@ -1,17 +1,17 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import i from "react";
+import r from "react";
 import n from "../Box/Box.js";
 import "../../utils/ui/ui.js";
-import l from "../Button/Button.js";
+import i from "../Button/Button.js";
 import "../../utils/links.js";
-import p from "../Input/Input.js";
+import c from "../Input/Input.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
-import { LOREM_IPSUM as c } from "../../utils/loremipsum.js";
-import { Modal as r } from "./Modal.js";
+import { LOREM_IPSUM as p } from "../../utils/loremipsum.js";
+import { Modal as l } from "./Modal.js";
 function s() {
-  const [d, m] = i.useState(!1), t = i.useCallback(() => m((a) => !a), []);
+  const [a, d] = r.useState(!1), t = r.useCallback(() => d((m) => !m), []);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -22,16 +22,24 @@ function s() {
       children: [
         /* @__PURE__ */ o("div", { id: "backdrop" }),
         /* @__PURE__ */ o("div", { id: "overlay-outlet" }),
-        /* @__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(n, { mb: 4, children: /* @__PURE__ */ o(p, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
+        /* @__PURE__ */ o(i, { theme: "primary", onClick: t, text: "Toggle Modal" }),
+        a && /* @__PURE__ */ e(l, { onClose: t, children: [
+          /* @__PURE__ */ o(
+            l.Header,
+            {
+              iconName: "Subscriptions",
+              iconColor: "accent",
+              title: "Modal Title",
+              description: "Modal Description"
+            }
+          ),
+          /* @__PURE__ */ o(n, { mb: 4, children: /* @__PURE__ */ o(c, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
           "Modal content:",
           " ",
-          c,
-          /* @__PURE__ */ e(r.Footer, { children: [
+          p,
+          /* @__PURE__ */ e(l.Footer, { children: [
             /* @__PURE__ */ o(
-              l,
+              i,
               {
                 fullWidth: !0,
                 theme: "secondary",
@@ -40,7 +48,7 @@ function s() {
               }
             ),
             /* @__PURE__ */ o(
-              l,
+              i,
               {
                 fullWidth: !0,
                 theme: "primary",
@@ -54,7 +62,7 @@ function s() {
     }
   );
 }
-const b = i.memo(s);
+const w = r.memo(s);
 export {
-  b as default
+  w as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.5.3",
+  "version": "4.5.4",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",