@cfx-dev/ui-components 4.2.20 → 4.2.22

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

@@ -0,0 +1,86 @@
+export declare enum ColorEnum {
+    accent = "accent",
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    green = "green",
+    yellow = "yellow",
+    red = "red",
+    argentum = "argentum",
+    aurum = "aurum",
+    platinum = "platinum",
+    bg = "bg",
+    'bg-light' = "bg-light",
+    'bg-dark' = "bg-dark",
+    'bg-dark-grey' = "bg-dark-grey",
+    'bg-black' = "bg-black"
+}
+export type ColorType = keyof typeof ColorEnum;
+export declare enum TextSizeEnum {
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    xxlarge = "xxlarge",
+    xxxlarge = "xxxlarge"
+}
+export type TextSize = keyof typeof TextSizeEnum;
+export declare enum BorderRadiusEnum {
+    none = "none",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    pill = "pill"
+}
+export type BorderRadiusType = keyof typeof BorderRadiusEnum;
+export declare enum ZIndexEnum {
+    zero = "zero",
+    first = "first",
+    second = "second",
+    max = "max"
+}
+export type ZIndexType = keyof typeof ZIndexEnum;
+export declare enum OffsetEnum {
+    none = "none",
+    hairthin = "hairthin",
+    thin = "thin",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    safezone = "safezone"
+}
+export type OffsetType = keyof typeof OffsetEnum;
+export declare enum MediaQueryEnum {
+    initial = "initial",
+    small = "small",
+    'small-medium' = "small-medium",
+    medium = "medium",
+    'medium-large' = "medium-large",
+    large = "large",
+    xlarge = "xlarge"
+}
+export type MediaQueryType = keyof typeof MediaQueryEnum;
+export type ResponsiveValueType<T = string | number> = T | {
+    [key in MediaQueryType]?: T;
+};
+export type ResponsiveOffsetType = ResponsiveValueType<OffsetType | number>;
+export interface MPProps {
+    m?: ResponsiveOffsetType;
+    mt?: ResponsiveOffsetType;
+    mr?: ResponsiveOffsetType;
+    mb?: ResponsiveOffsetType;
+    ml?: ResponsiveOffsetType;
+    p?: ResponsiveOffsetType;
+    pt?: ResponsiveOffsetType;
+    pr?: ResponsiveOffsetType;
+    pb?: ResponsiveOffsetType;
+    pl?: ResponsiveOffsetType;
+}

package/dist/utils/ui/ui.types.js

@@ -0,0 +1,9 @@
+var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), r = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l))(r || {}), g = /* @__PURE__ */ ((l) => (l.none = "none", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.pill = "pill", l))(g || {}), x = /* @__PURE__ */ ((l) => (l.zero = "zero", l.first = "first", l.second = "second", l.max = "max", l))(x || {}), e = /* @__PURE__ */ ((l) => (l.none = "none", l.hairthin = "hairthin", l.thin = "thin", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.safezone = "safezone", l))(e || {}), i = /* @__PURE__ */ ((l) => (l.initial = "initial", l.small = "small", l["small-medium"] = "small-medium", l.medium = "medium", l["medium-large"] = "medium-large", l.large = "large", l.xlarge = "xlarge", l))(i || {});
+export {
+  g as BorderRadiusEnum,
+  a as ColorEnum,
+  i as MediaQueryEnum,
+  e as OffsetEnum,
+  r as TextSizeEnum,
+  x as ZIndexEnum
+};

package/package.json

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

package/dist/components/ui.js

@@ -1,73 +0,0 @@
-import { clsx as $ } from "../utils/clsx.js";
-var j = /* @__PURE__ */ ((r) => (r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.medium = "medium", r.large = "large", r.xlarge = "xlarge", r.xxlarge = "xxlarge", r.xxxlarge = "xxxlarge", r))(j || {}), R = /* @__PURE__ */ ((r) => (r.none = "none", r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.pill = "pill", r))(R || {}), u = /* @__PURE__ */ ((r) => (r.zero = "zero", r.first = "first", r.second = "second", r.max = "max", r))(u || {}), F = /* @__PURE__ */ ((r) => (r.none = "none", r.hairthin = "hairthin", r.thin = "thin", r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.medium = "medium", r.large = "large", r.xlarge = "xlarge", r.safezone = "safezone", r))(F || {}), P = /* @__PURE__ */ ((r) => (r.initial = "initial", r.small = "small", r["small-medium"] = "small-medium", r.medium = "medium", r["medium-large"] = "medium-large", r.large = "large", r.xlarge = "xlarge", r))(P || {}), p;
-((r) => {
-  function s(e = 1) {
-    return `calc(var(--quant) * ${e})`;
-  }
-  r.q = s;
-  function f(e) {
-    return `var(--offset-${e})`;
-  }
-  r.offset = f;
-  function h(e = "normal") {
-    return `var(--font-size-${e})`;
-  }
-  r.fontSize = h;
-  function b(e = "first") {
-    return `var(--zindex-${e})`;
-  }
-  r.zindex = b;
-  function d(e = "normal") {
-    return `var(--line-height-${e})`;
-  }
-  r.lineHeight = d;
-  function v(e = "normal") {
-    return `var(--border-radius-${e})`;
-  }
-  r.borderRadius = v;
-  function y(e, l, n = 1) {
-    let t = l;
-    return t === "pure" && (t = ""), typeof t == "number" && (t = `${t}`), `rgba(var(--color-${e}${t ? `-${t}` : ""}), ${n})`;
-  }
-  r.color = y, ((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";
-  })(r.cls || (r.cls = {})), r.pc = (e) => `${e}%`, r.px = (e) => `${e}px`, r.ch = (e) => `${e}ch`, r.em = (e) => `${e}em`, r.rem = (e) => `${e}rem`, r.vh = (e) => `${e}vh`, r.vw = (e) => `${e}vw`, r.url = (e) => `url(${e})`;
-  function a(e) {
-    return e == null ? "" : typeof e == "number" ? s(e) : e.toString();
-  }
-  r.defaultResponsiveValueFormatter = a;
-  function x(e, l, n = a) {
-    return l == null ? {} : typeof l == "object" && !Array.isArray(l) ? Object.entries(l).reduce((t, [o, i]) => (t[`--${e}-${o}`] = n(i), t), {}) : {
-      [`--${e}-initial`]: n(l)
-    };
-  }
-  r.getResponsiveStyles = x;
-  function g(e, l) {
-    return l == null ? "" : typeof l == "object" && !Array.isArray(l) ? $(Object.keys(l).map((n) => `ui-${e}-${n}`)) : `ui-${e}-initial`;
-  }
-  r.getResponsiveClassnames = g;
-  function A(e, l, n = a) {
-    return l == null ? [] : typeof l == "object" && !Array.isArray(l) ? Object.entries(l).reduce((t, [o, i]) => (t.push(`${e}-${o}-${n(i)}`), t), []) : [`${e}-initial-${n(l)}`];
-  }
-  r.getResponsiveFlatClassnames = A;
-  function m(e) {
-    return typeof e == "number" ? s(e) : f(e);
-  }
-  r.offsetResponsiveValueFormatter = m, r.getOffsetStyles = (e, l) => x(e, l, m);
-  function c(e, l) {
-    return Object.entries(e).reduce((n, [t, o]) => (Object.assign(n, l(t, o)), n), {});
-  }
-  r.callAllMPProps = c, r.getAllMPStyles = (e) => c(e, r.getOffsetStyles), r.getAllMPClassnames = (e) => $(
-    Object.entries(e).map(
-      ([l, n]) => g(l, n)
-    )
-  );
-})(p || (p = {}));
-export {
-  R as BorderRadiusEnum,
-  P as MediaQueryEnum,
-  F as OffsetEnum,
-  j as TextSizeEnum,
-  u as ZIndexEnum,
-  p as ui
-};

package/dist/index-CjTSD6zB.js

@@ -1,161 +0,0 @@
-import * as s from "react";
-import y from "react";
-import { jsx as h, Fragment as O } from "react/jsx-runtime";
-function w(e, t = []) {
-  let n = [];
-  function r(c, l) {
-    const i = s.createContext(l), a = n.length;
-    n = [...n, l];
-    const S = (R) => {
-      var d;
-      const { scope: C, children: f, ...u } = R, p = ((d = C == null ? void 0 : C[e]) == null ? void 0 : d[a]) || i, m = s.useMemo(() => u, Object.values(u));
-      return /* @__PURE__ */ h(p.Provider, { value: m, children: f });
-    };
-    S.displayName = c + "Provider";
-    function v(R, C) {
-      var p;
-      const f = ((p = C == null ? void 0 : C[e]) == null ? void 0 : p[a]) || i, u = s.useContext(f);
-      if (u) return u;
-      if (l !== void 0) return l;
-      throw new Error(`\`${R}\` must be used within \`${c}\``);
-    }
-    return [S, v];
-  }
-  const o = () => {
-    const c = n.map((l) => s.createContext(l));
-    return function(i) {
-      const a = (i == null ? void 0 : i[e]) || c;
-      return s.useMemo(
-        () => ({ [`__scope${e}`]: { ...i, [e]: a } }),
-        [i, a]
-      );
-    };
-  };
-  return o.scopeName = e, [r, b(o, ...t)];
-}
-function b(...e) {
-  const t = e[0];
-  if (e.length === 1) return t;
-  const n = () => {
-    const r = e.map((o) => ({
-      useScope: o(),
-      scopeName: o.scopeName
-    }));
-    return function(c) {
-      const l = r.reduce((i, { useScope: a, scopeName: S }) => {
-        const R = a(c)[`__scope${S}`];
-        return { ...i, ...R };
-      }, {});
-      return s.useMemo(() => ({ [`__scope${t.scopeName}`]: l }), [l]);
-    };
-  };
-  return n.scopeName = t.scopeName, n;
-}
-function _(e, t) {
-  if (typeof e == "function")
-    return e(t);
-  e != null && (e.current = t);
-}
-function A(...e) {
-  return (t) => {
-    let n = !1;
-    const r = e.map((o) => {
-      const c = _(o, t);
-      return !n && typeof c == "function" && (n = !0), c;
-    });
-    if (n)
-      return () => {
-        for (let o = 0; o < r.length; o++) {
-          const c = r[o];
-          typeof c == "function" ? c() : _(e[o], null);
-        }
-      };
-  };
-}
-function N(...e) {
-  return s.useCallback(A(...e), e);
-}
-var g = s.forwardRef((e, t) => {
-  const { children: n, ...r } = e, o = s.Children.toArray(n), c = o.find(V);
-  if (c) {
-    const l = c.props.children, i = o.map((a) => a === c ? s.Children.count(l) > 1 ? s.Children.only(null) : s.isValidElement(l) ? l.props.children : null : a);
-    return /* @__PURE__ */ h(M, { ...r, ref: t, children: s.isValidElement(l) ? s.cloneElement(l, void 0, i) : null });
-  }
-  return /* @__PURE__ */ h(M, { ...r, ref: t, children: n });
-});
-g.displayName = "Slot";
-var M = s.forwardRef((e, t) => {
-  const { children: n, ...r } = e;
-  if (s.isValidElement(n)) {
-    const o = j(n);
-    return s.cloneElement(n, {
-      ...$(r, n.props),
-      // @ts-ignore
-      ref: t ? A(t, o) : o
-    });
-  }
-  return s.Children.count(n) > 1 ? s.Children.only(null) : null;
-});
-M.displayName = "SlotClone";
-var T = ({ children: e }) => /* @__PURE__ */ h(O, { children: e });
-function V(e) {
-  return s.isValidElement(e) && e.type === T;
-}
-function $(e, t) {
-  const n = { ...t };
-  for (const r in t) {
-    const o = e[r], c = t[r];
-    /^on[A-Z]/.test(r) ? o && c ? n[r] = (...i) => {
-      c(...i), o(...i);
-    } : o && (n[r] = o) : r === "style" ? n[r] = { ...o, ...c } : r === "className" && (n[r] = [o, c].filter(Boolean).join(" "));
-  }
-  return { ...e, ...n };
-}
-function j(e) {
-  var r, o;
-  let t = (r = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : r.get, n = t && "isReactWarning" in t && t.isReactWarning;
-  return n ? e.ref : (t = (o = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : o.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
-}
-function L(e) {
-  const t = e + "CollectionProvider", [n, r] = w(t), [o, c] = n(
-    t,
-    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
-  ), l = (f) => {
-    const { scope: u, children: p } = f, m = y.useRef(null), d = y.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ h(o, { scope: u, itemMap: d, collectionRef: m, children: p });
-  };
-  l.displayName = t;
-  const i = e + "CollectionSlot", a = y.forwardRef(
-    (f, u) => {
-      const { scope: p, children: m } = f, d = c(i, p), x = N(u, d.collectionRef);
-      return /* @__PURE__ */ h(g, { ref: x, children: m });
-    }
-  );
-  a.displayName = i;
-  const S = e + "CollectionItemSlot", v = "data-radix-collection-item", R = y.forwardRef(
-    (f, u) => {
-      const { scope: p, children: m, ...d } = f, x = y.useRef(null), P = N(u, x), E = c(S, p);
-      return y.useEffect(() => (E.itemMap.set(x, { ref: x, ...d }), () => void E.itemMap.delete(x))), /* @__PURE__ */ h(g, { [v]: "", ref: P, children: m });
-    }
-  );
-  R.displayName = S;
-  function C(f) {
-    const u = c(e + "CollectionConsumer", f);
-    return y.useCallback(() => {
-      const m = u.collectionRef.current;
-      if (!m) return [];
-      const d = Array.from(m.querySelectorAll(`[${v}]`));
-      return Array.from(u.itemMap.values()).sort(
-        (E, I) => d.indexOf(E.ref.current) - d.indexOf(I.ref.current)
-      );
-    }, [u.collectionRef, u.itemMap]);
-  }
-  return [
-    { Provider: l, Slot: a, ItemSlot: R },
-    C,
-    r
-  ];
-}
-export {
-  L as c
-};