@cfx-dev/ui-components 4.2.23 → 4.3.0

package/dist/utils/mergeRefs.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 
-export declare function mergeRefs<T = any>(...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]): React.RefCallback<T>;
+export declare function mergeRefs<T = unknown>(...refs: (React.RefCallback<T> | React.RefObject<T> | undefined | null)[]): React.RefCallback<T>;

package/dist/utils/mergeRefs.js

@@ -1,7 +1,7 @@
 function o(...e) {
   return (t) => {
     e.forEach((n) => {
-      typeof n == "function" ? n(t) : n != null && (n.current = t);
+      typeof n == "function" ? n(t) : n && (n.current = t);
     });
   };
 }

package/dist/utils/ui/ui.d.ts

@@ -35,6 +35,7 @@ export declare namespace ui {
     export const getOffsetStyles: (name: string, value?: ResponsiveValueType<OffsetType | number>) => import("react").CSSProperties;
     type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
     export function callAllMPProps<T extends object>(props: Partial<MPProps>, callback: CallbackType<T>): T;
+    export const optimizeMPProps: (props: Partial<MPProps>) => Partial<MPProps>;
     export const getAllMPStyles: (props: Partial<MPProps>) => React.CSSProperties;
     export const getAllMPClassnames: (props: Partial<MPProps>) => string;
     export {};

package/dist/utils/ui/ui.js

@@ -1,68 +1,77 @@
-import { clsx as d } from "../clsx.js";
-var g;
+import { clsx as m } from "../clsx.js";
+var d;
 ((t) => {
-  function i(e = 1) {
+  function f(e = 1) {
     return `calc(var(--quant) * ${e})`;
   }
-  t.q = i;
-  function u(e) {
+  t.q = f;
+  function p(e) {
     return `var(--offset-${e})`;
   }
-  t.offset = u;
+  t.offset = p;
   function b(e = "normal") {
     return `var(--font-size-${e})`;
   }
   t.fontSize = b;
-  function m(e = "first") {
+  function y(e = "first") {
     return `var(--zindex-${e})`;
   }
-  t.zindex = m;
-  function y(e = "normal") {
+  t.zindex = y;
+  function g(e = "normal") {
     return `var(--line-height-${e})`;
   }
-  t.lineHeight = y;
-  function h(e = "normal") {
+  t.lineHeight = g;
+  function x(e = "normal") {
     return `var(--border-radius-${e})`;
   }
-  t.borderRadius = h;
-  function x(e, r, o = 1) {
+  t.borderRadius = x;
+  function h(e, r, o = 1) {
     let n = r;
     return n === "pure" && (n = ""), typeof n == "number" && (n = `${n}`), `rgba(var(--color-${e}${n ? `-${n}` : ""}), ${o})`;
   }
-  t.color = x, ((e) => {
+  t.color = h, ((e) => {
     e.fullWidth = "util-full-width", e.fullHeight = "util-full-height", e.flexGrow = "util-flex-grow", e.flexNoShrink = "util-flex-no-shrink", e.userSelectableText = "util-text-selectable", e.zIndex9000 = "util-z-index-9000";
   })(t.cls || (t.cls = {})), t.pc = (e) => `${e}%`, t.px = (e) => `${e}px`, t.ch = (e) => `${e}ch`, t.em = (e) => `${e}em`, t.rem = (e) => `${e}rem`, t.vh = (e) => `${e}vh`, t.vw = (e) => `${e}vw`, t.url = (e) => `url(${e})`;
-  function f(e) {
-    return e == null ? "" : typeof e == "number" ? i(e) : e.toString();
+  function l(e) {
+    return e == null ? "" : typeof e == "number" ? f(e) : e.toString();
   }
-  t.defaultResponsiveValueFormatter = f;
-  function $(e, r, o = f) {
-    return r == null ? {} : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [s, l]) => (n[`--${e}-${s}`] = o(l), n), {}) : {
+  t.defaultResponsiveValueFormatter = l;
+  function u(e, r, o = l) {
+    return r == null ? {} : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [i, s]) => (n[`--${e}-${i}`] = o(s), n), {}) : {
       [`--${e}-initial`]: o(r)
     };
   }
-  t.getResponsiveStyles = $;
-  function a(e, r) {
-    return r == null ? "" : typeof r == "object" && !Array.isArray(r) ? d(Object.keys(r).map((o) => `ui-${e}-${o}`)) : `ui-${e}-initial`;
+  t.getResponsiveStyles = u;
+  function c(e, r) {
+    return r == null ? "" : typeof r == "object" && !Array.isArray(r) ? m(Object.keys(r).map((o) => `ui-${e}-${o}`)) : `ui-${e}-initial`;
   }
-  t.getResponsiveClassnames = a;
-  function R(e, r, o = f) {
-    return r == null ? [] : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [s, l]) => (n.push(`${e}-${s}-${o(l)}`), n), []) : [`${e}-initial-${o(r)}`];
+  t.getResponsiveClassnames = c;
+  function P(e, r, o = l) {
+    return r == null ? [] : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [i, s]) => (n.push(`${e}-${i}-${o(s)}`), n), []) : [`${e}-initial-${o(r)}`];
   }
-  t.getResponsiveFlatClassnames = R;
-  function c(e) {
-    return typeof e == "number" ? i(e) : u(e);
+  t.getResponsiveFlatClassnames = P;
+  function $(e) {
+    return typeof e == "number" ? f(e) : p(e);
   }
-  t.offsetResponsiveValueFormatter = c, t.getOffsetStyles = (e, r) => $(e, r, c);
-  function p(e, r) {
-    return Object.entries(e).reduce((o, [n, s]) => (Object.assign(o, r(n, s)), o), {});
+  t.offsetResponsiveValueFormatter = $, t.getOffsetStyles = (e, r) => u(e, r, $);
+  function a(e, r) {
+    return Object.entries(e).reduce((o, [n, i]) => (Object.assign(o, r(n, i)), o), {});
   }
-  t.callAllMPProps = p, t.getAllMPStyles = (e) => p(e, t.getOffsetStyles), t.getAllMPClassnames = (e) => d(
-    Object.entries(e).map(
-      ([r, o]) => a(r, o)
+  t.callAllMPProps = a, t.optimizeMPProps = (e) => {
+    const {
+      px: r,
+      py: o,
+      mx: n,
+      my: i,
+      ...s
+    } = e;
+    return r && (s.pr = r, s.pl = r), o && (s.pt = o, s.pb = o), n && (s.mr = n, s.ml = n), i && (s.mt = i, s.mb = i), s;
+  }, t.getAllMPStyles = (e) => a((0, t.optimizeMPProps)(e), t.getOffsetStyles), t.getAllMPClassnames = (e) => m(
+    Object.entries((0, t.optimizeMPProps)(e)).map(
+      ([r, o]) => c(r, o)
     )
   );
-})(g || (g = {}));
+})(d || (d = {}));
 export {
-  g as ui
+  d as ui
 };

package/dist/utils/ui/ui.types.d.ts

@@ -78,9 +78,13 @@ export interface MPProps {
     mr?: ResponsiveOffsetType;
     mb?: ResponsiveOffsetType;
     ml?: ResponsiveOffsetType;
+    my?: ResponsiveOffsetType;
+    mx?: ResponsiveOffsetType;
     p?: ResponsiveOffsetType;
     pt?: ResponsiveOffsetType;
     pr?: ResponsiveOffsetType;
     pb?: ResponsiveOffsetType;
     pl?: ResponsiveOffsetType;
+    py?: ResponsiveOffsetType;
+    px?: ResponsiveOffsetType;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.2.23",
+  "version": "4.3.0",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",
@@ -31,8 +31,8 @@
     "@radix-ui/react-switch": "^1.1.0",
     "autolinker": "^3.14.3",
     "flag-icons": "^6.1.1",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.2.3",
     "react-focus-lock": "^2.9.1",
     "react-icons": "^4.4.0",
@@ -51,13 +51,14 @@
     "@storybook/react-vite": "^8.1.5",
     "@storybook/test": "^8.1.5",
     "@types/node": "^20.12.13",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.4.1",
+    "remark-gfm": "^4.0.1",
     "sass": "^1.77.4",
     "storybook": "^8.1.5",
     "typescript": "^5.2.2",