@cfx-dev/ui-components 2.1.8 → 2.1.10

package/dist/assets/Modal.css

@@ -1 +1 @@
-._root_1hqka_1{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) * 100);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden;animation-name:_modal-appearance_1hqka_1;animation-duration:.2s}@keyframes _modal-appearance_1hqka_1{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}._root_1hqka_1 ._close_1hqka_26{position:absolute;top:calc(var(--quant) * 2);right:calc(var(--quant) * 2.5);z-index:1}._root_1hqka_1 ._header_1hqka_32{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 4)}._root_1hqka_1 ._header_1hqka_32 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}._root_1hqka_1 ._footer_1hqka_42{padding-top:calc(var(--quant) * 6)}
+._root_w22bc_1{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) * 50);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden;animation-name:_modal-appearance_w22bc_1;animation-duration:.2s}@media (min-width: 768px){._root_w22bc_1{min-width:calc(var(--quant) * 80)}}@media (min-width: 1280px){._root_w22bc_1{min-width:calc(var(--quant) * 100)}}@keyframes _modal-appearance_w22bc_1{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}._root_w22bc_1 ._close_w22bc_36{position:absolute;top:calc(var(--quant) * 2);right:calc(var(--quant) * 2.5);z-index:1}._root_w22bc_1 ._header_w22bc_42{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 4)}._root_w22bc_1 ._header_w22bc_42 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}._root_w22bc_1 ._footer_w22bc_52{padding-top:calc(var(--quant) * 6)}

package/dist/assets/Tabular.css

@@ -1 +1 @@
-._reset_cctkn_1{all:unset}._root_cctkn_5{display:flex;align-items:center;--notification-gap: var(--tabular-notification-gap, initial)}._root_cctkn_5._theme-dark_cctkn_10{--color: var(--color-tabular-color-dark)}._root_cctkn_5._theme-light_cctkn_13{--color: var(--color-tabular-color-light)}._root_cctkn_5 ._item_cctkn_16{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;height:var(--tabular-item-height, initial);cursor:pointer;padding:0 var(--tabular-item-padding, initial);color:var(--color);text-transform:uppercase;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal)}._root_cctkn_5 ._item_cctkn_16:disabled{opacity:.5;cursor:not-allowed}._root_cctkn_5 ._item_cctkn_16{transition:all .25s ease,outline-offset 0s,outline 0s}._root_cctkn_5 ._item_cctkn_16:not(:disabled)._active_cctkn_37{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset;font-weight:var(--font-weight-bold)}._root_cctkn_5 ._item_cctkn_16:not(:disabled):hover{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset}._root_cctkn_5 ._item_cctkn_16:not(:disabled):focus-visible,._root_cctkn_5 ._item_cctkn_16:not(:disabled):focus-visible:hover{box-shadow:0 0 0 var(--tabular-item-border-size, initial) var(--color) inset}._root_cctkn_5 ._item_cctkn_16:after{content:attr(data-text);content:attr(data-text)/"";height:0px;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal);text-transform:uppercase}@media speech{._root_cctkn_5 ._item_cctkn_16:after{display:none}}._root_cctkn_5 ._item_cctkn_16._hasNotification_cctkn_64:after{padding-right:calc(var(--notification-gap) + var(--quant))}._root_cctkn_5 ._item_cctkn_16 ._content_cctkn_67{display:inline-flex;align-items:flex-start;gap:var(--notification-gap)}
+._reset_17apb_1{all:unset}._root_17apb_5{display:flex;align-items:center;--notification-gap: var(--tabular-notification-gap, initial)}._root_17apb_5._theme-dark_17apb_10{--color: var(--color-tabular-color-dark)}._root_17apb_5._theme-light_17apb_13{--color: var(--color-tabular-color-light)}._root_17apb_5 ._item_17apb_16{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;height:var(--tabular-item-height, initial);cursor:pointer;padding:0 var(--tabular-item-padding, initial);color:var(--color);text-transform:capitalize;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal)}._root_17apb_5 ._item_17apb_16:disabled{opacity:.5;cursor:not-allowed}._root_17apb_5 ._item_17apb_16{transition:all .25s ease,outline-offset 0s,outline 0s}._root_17apb_5 ._item_17apb_16:not(:disabled)._active_17apb_37{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset;font-weight:var(--font-weight-bold)}._root_17apb_5 ._item_17apb_16:not(:disabled):hover{box-shadow:0 calc(-1 * var(--tabular-item-border-size, initial)) 0 0 var(--color) inset}._root_17apb_5 ._item_17apb_16:not(:disabled):focus-visible,._root_17apb_5 ._item_17apb_16:not(:disabled):focus-visible:hover{box-shadow:0 0 0 var(--tabular-item-border-size, initial) var(--color) inset}._root_17apb_5 ._item_17apb_16:after{content:attr(data-text);content:attr(data-text)/"";height:0px;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--font-weight-normal);font-size:var(--font-size-normal);text-transform:capitalize}@media speech{._root_17apb_5 ._item_17apb_16:after{display:none}}._root_17apb_5 ._item_17apb_16._hasNotification_17apb_64:after{padding-right:calc(var(--notification-gap) + var(--quant))}._root_17apb_5 ._item_17apb_16 ._content_17apb_67{display:inline-flex;align-items:flex-start;gap:var(--notification-gap)}

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

@@ -5,6 +5,7 @@ export interface ModalProps {
     children: React.ReactNode;
     onClose?: () => void;
     className?: string;
+    overlayClassName?: string;
     backdropClassName?: string;
     contentClassName?: string;
     disableBackdropClose?: boolean;

package/dist/components/Modal/Modal.js

@@ -1,69 +1,83 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import u from "react";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import N from "react";
 import "../Button/Button.js";
-import { ButtonBar as C } from "../Button/ButtonBar.js";
+import { ButtonBar as k } from "../Button/ButtonBar.js";
 import "../Button/LinkButton.js";
-import N from "../IconButton/IconButton.js";
+import y from "../IconButton/IconButton.js";
 import { Overlay as t } from "../Overlay/Overlay.js";
-import { Text as d } from "../Text/Text.js";
-import { clsx as m } from "../../utils/clsx.js";
+import { Text as m } from "../Text/Text.js";
+import { clsx as l } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as y } from "../../utils/hooks/useKeyboardClose.js";
+import { useKeyboardClose as w } from "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-import '../../assets/Modal.css';const B = "_root_1hqka_1", q = "_close_1hqka_26", x = "_header_1hqka_32", g = "_footer_1hqka_42", s = {
+import '../../assets/Modal.css';const B = "_root_w22bc_1", v = "_close_w22bc_36", x = "_header_w22bc_42", g = "_footer_w22bc_52", r = {
   root: B,
-  "modal-appearance": "_modal-appearance_1hqka_1",
-  close: q,
+  "modal-appearance": "_modal-appearance_w22bc_1",
+  close: v,
   header: x,
   footer: g
 };
-function p(l) {
+function p(c) {
   const {
     onClose: o,
-    children: a,
+    children: s,
     className: e,
+    overlayClassName: b,
     backdropClassName: f,
-    contentClassName: h,
-    ariaDescribedby: _,
-    ariaLabelledby: b,
-    disableBackdropClose: i = !1,
-    disableFocusLock: k = !1
-  } = l, n = u.useCallback(() => {
-    i || !o || o();
-  }, [o, i]);
-  return y(n), /* @__PURE__ */ c(t, { children: [
-    /* @__PURE__ */ r(t.Backdrop, { onClick: n, className: f }),
-    /* @__PURE__ */ r(t.Content, { className: h, disableFocusLock: k, children: /* @__PURE__ */ c(
-      "div",
+    contentClassName: _,
+    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: [
+    /* @__PURE__ */ a(
+      t.Backdrop,
       {
-        role: "dialog",
-        "aria-describedby": _,
-        "aria-labelledby": b,
-        className: m(s.root, e),
-        children: [
-          !!o && /* @__PURE__ */ r(N, { className: s.close, name: "Close", onClick: o }),
-          a
-        ]
+        onClick: d,
+        className: l(r.backdrop, f)
       }
-    ) })
+    ),
+    /* @__PURE__ */ a(
+      t.Content,
+      {
+        className: _,
+        disableFocusLock: C,
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            role: "dialog",
+            "aria-describedby": h,
+            "aria-labelledby": u,
+            className: l(r.root, e),
+            children: [
+              !!o && /* @__PURE__ */ a(y, { className: r.close, name: "Close", onClick: o }),
+              s
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 p.Header = function(o) {
   const {
-    title: a,
+    title: s,
     description: e
   } = o;
-  return /* @__PURE__ */ c("div", { className: s.header, children: [
-    /* @__PURE__ */ r(
-      d,
+  return /* @__PURE__ */ i("div", { className: r.header, children: [
+    /* @__PURE__ */ a(
+      m,
       {
         weight: "bold",
         size: "large",
-        children: a
+        children: s
       }
     ),
-    e && /* @__PURE__ */ r(
-      d,
+    e && /* @__PURE__ */ a(
+      m,
       {
         size: "small",
         color: "secondary",
@@ -74,10 +88,10 @@ p.Header = function(o) {
 };
 p.Footer = function(o) {
   const {
-    className: a,
+    className: s,
     ...e
   } = o;
-  return /* @__PURE__ */ r(C, { ...e, className: m(s.footer, a) });
+  return /* @__PURE__ */ a(k, { ...e, className: l(r.footer, s) });
 };
 export {
   p as Modal

package/dist/components/Tabular/Tabular.js

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import h, { createElement as v } from "react";
-import { Dot as C } from "../Dot/Dot.js";
-import { clsx as k } from "../../utils/clsx.js";
-import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5", I = "_item_cctkn_16", R = "_active_cctkn_37", g = "_hasNotification_cctkn_64", T = "_content_cctkn_67", a = {
-  reset: p,
+import f, { createElement as k } from "react";
+import { Dot as v } from "../Dot/Dot.js";
+import { clsx as h } from "../../utils/clsx.js";
+import '../../assets/Tabular.css';const C = "_reset_17apb_1", x = "_root_17apb_5", I = "_item_17apb_16", R = "_active_17apb_37", g = "_hasNotification_17apb_64", T = "_content_17apb_67", e = {
+  reset: C,
   root: x,
-  "theme-dark": "_theme-dark_cctkn_10",
-  "theme-light": "_theme-light_cctkn_13",
+  "theme-dark": "_theme-dark_17apb_10",
+  "theme-light": "_theme-light_17apb_13",
   item: I,
   active: R,
   hasNotification: g,
@@ -14,77 +14,77 @@ import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5
 };
 function m(_) {
   const {
-    items: i,
+    items: s,
     activeItem: o,
-    onActivate: e,
-    itemClassName: c,
-    ...n
-  } = _, s = h.useCallback((t) => {
-    e && e(t);
-  }, [e]);
-  return /* @__PURE__ */ r(m.Root, { ...n, children: i.map((t) => /* @__PURE__ */ v(
+    onActivate: a,
+    itemClassName: i,
+    ...c
+  } = _, n = f.useCallback((t) => {
+    a && a(t);
+  }, [a]);
+  return /* @__PURE__ */ r(m.Root, { ...c, children: s.map((t) => /* @__PURE__ */ k(
     m.Item,
     {
       ...t,
-      className: c,
+      className: i,
       key: t.id,
       active: t.id === o,
-      onClick: s
+      onClick: n
     }
   )) });
 }
-m.Root = function(i) {
+m.Root = function(s) {
   const {
     children: o,
-    className: e,
-    ariaLabel: c,
-    tabIndex: n,
-    theme: s = "dark",
+    className: a,
+    ariaLabel: i,
+    tabIndex: c,
+    theme: n = "dark",
     role: t = "tablist"
-  } = i, l = k(a.root, a[`theme-${s}`], e);
+  } = s, l = h(e.root, e[`theme-${n}`], a);
   return /* @__PURE__ */ r(
     "div",
     {
       role: t,
-      "aria-label": c,
-      tabIndex: n,
+      "aria-label": i,
+      tabIndex: c,
       className: l,
       children: o
     }
   );
 };
-m.Item = function(i) {
+m.Item = function(s) {
   const {
     id: o,
-    label: e,
-    onClick: c,
-    ariaLabel: n,
-    ariaControls: s,
+    label: a,
+    onClick: i,
+    ariaLabel: c,
+    ariaControls: n,
     className: t,
     active: l = !1,
-    disabled: d = !1,
-    hasNotification: f = !1
-  } = i, b = h.useCallback(() => {
-    d || c(o);
-  }, [d, c, o]), N = k(a.reset, a.item, t, {
-    [a.active]: l,
-    [a.hasNotification]: f
+    disabled: b = !1,
+    hasNotification: d = !1
+  } = s, p = f.useCallback(() => {
+    b || i(o);
+  }, [b, i, o]), N = h(e.reset, e.item, t, {
+    [e.active]: l,
+    [e.hasNotification]: d
   });
   return /* @__PURE__ */ r(
     "button",
     {
-      disabled: d,
+      disabled: b,
       type: "button",
       role: "tab",
       className: N,
-      onClick: b,
-      "aria-label": n,
-      "aria-controls": s,
-      "data-text": e,
+      onClick: p,
+      "aria-label": c,
+      "aria-controls": n,
+      "data-text": a,
       "aria-selected": l,
-      children: /* @__PURE__ */ u("span", { className: a.content, children: [
-        e,
-        f && /* @__PURE__ */ r(C, { color: "green", className: a.notification })
+      children: /* @__PURE__ */ u("span", { className: e.content, children: [
+        a,
+        d && /* @__PURE__ */ r(v, { color: "green", className: e.notification })
       ] })
     }
   );

package/package.json

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