@cfx-dev/ui-components 4.2.12 → 4.2.14

package/dist/components/Text/Text.js

@@ -1,82 +1,87 @@
-import { jsx as f } from "react/jsx-runtime";
-import l from "react";
+import { jsx as l } from "react/jsx-runtime";
+import f from "react";
 import { ui as t, TextSizeEnum as _ } from "../ui.js";
-import { clsx as v } from "../../utils/clsx.js";
-import { getColor as z } from "../../utils/color.js";
-const w = "cfxui__Text__root__2fe11", A = "cfxui__Text__centered__4d7bd", E = "cfxui__Text__underlined__5860e", O = "cfxui__Text__truncated__417f4", F = "cfxui__Text__typographic__d8155", H = "cfxui__Text__block__cb1b6", r = {
-  root: w,
-  centered: A,
-  underlined: E,
-  truncated: O,
-  typographic: F,
-  block: H
-}, N = (e) => e in _ ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, $ = (e) => e in _ ? t.lineHeight(e) : typeof e == "number" ? t.q(e) : e, B = {
+import { clsx as w } from "../../utils/clsx.js";
+import { getColor as A } from "../../utils/color.js";
+const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "cfxui__Text__underlined__5860e", H = "cfxui__Text__strikethrough__e3ee3", N = "cfxui__Text__truncated__417f4", $ = "cfxui__Text__typographic__d8155", B = "cfxui__Text__block__cb1b6", n = {
+  root: E,
+  centered: O,
+  underlined: F,
+  strikethrough: H,
+  truncated: N,
+  typographic: $,
+  block: B
+}, P = (e) => e in _ ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, q = (e) => e in _ ? t.lineHeight(e) : typeof e == "number" ? t.q(e) : e, D = {
   0: 0,
   25: "var(--text-opacity-25)",
   50: "var(--text-opacity-50)",
   75: "var(--text-opacity-75)",
   100: 1
-}, P = {
+}, I = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6"
-}, q = (e, n = 1) => {
-  const o = typeof e == "string" && B[e];
-  return typeof o == "string" || typeof o == "number" ? o : n;
-}, D = "primary", I = l.forwardRef(function(n, o) {
+}, L = (e, o = 1) => {
+  const r = typeof e == "string" && D[e];
+  return typeof r == "string" || typeof r == "number" ? r : o;
+}, M = "primary", V = f.forwardRef(function(o, r) {
   const {
-    family: s,
+    family: c,
     size: i = "normal",
-    weight: p = "normal",
-    letterSpacing: u = "normal",
-    as: c = "span",
-    centered: m = !1,
-    truncated: d = !1,
-    typographic: h = !1,
-    uppercase: x = !1,
-    userSelectable: y = !1,
-    underlined: g = !1,
-    children: T,
-    className: b
-  } = n, R = c === "div", S = v(
-    r.root,
-    b,
+    weight: u = "normal",
+    letterSpacing: h = "normal",
+    as: s = "span",
+    centered: p = !1,
+    truncated: m = !1,
+    typographic: g = !1,
+    uppercase: d = !1,
+    userSelectable: x = !1,
+    underlined: y = !1,
+    strikethrough: T = !1,
+    children: b,
+    className: k,
+    style: R
+  } = o, S = s === "div", C = w(
+    n.root,
+    k,
     t.getResponsiveClassnames("font-size", i),
     t.getResponsiveClassnames("line-height", i),
     {
-      [r.block]: R,
-      [r.centered]: m,
-      [r.truncated]: d,
-      [r.underlined]: g,
-      [r.typographic]: h,
-      [t.cls.userSelectableText]: y
+      [n.block]: S,
+      [n.centered]: p,
+      [n.truncated]: m,
+      [n.underlined]: y,
+      [n.strikethrough]: T,
+      [n.typographic]: g,
+      [t.cls.userSelectableText]: x
     }
-  ), C = z({
-    ...n,
-    color: n.color || D,
-    opacity: q(n.opacity)
-  }), k = typeof s == "string" ? s : P[c] || "primary", a = {
-    color: C,
-    fontFamily: `var(--font-family-${k})`,
+  ), v = A({
+    ...o,
+    color: o.color || M,
+    opacity: L(o.opacity)
+  }), z = typeof c == "string" ? c : I[s] || "primary", a = {
+    color: v,
+    fontFamily: `var(--font-family-${z})`,
     lineHeight: `var(--line-height-${i})`,
-    letterSpacing: `var(--letter-spacing-${u})`,
-    fontWeight: `var(--font-weight-${p})`,
-    ...t.getResponsiveStyles("font-size", i, N),
-    ...t.getResponsiveStyles("line-height", i, $)
+    letterSpacing: `var(--letter-spacing-${h})`,
+    fontWeight: `var(--font-weight-${u})`,
+    ...t.getResponsiveStyles("font-size", i, P),
+    ...t.getResponsiveStyles("line-height", i, q),
+    ...R
   };
-  return x && (a.textTransform = "uppercase"), /* @__PURE__ */ f(c, { ref: o, dir: "auto", className: S, style: a, children: T });
-}), U = l.forwardRef(function(n, o) {
-  return /* @__PURE__ */ f(I, { ref: o, ...n, as: "div" });
+  return d && (a.textTransform = "uppercase"), /* @__PURE__ */ l(s, { ref: r, dir: "auto", className: C, style: a, children: b });
+}), J = f.forwardRef(function(o, r) {
+  return /* @__PURE__ */ l(V, { ref: r, ...o, as: "div" });
 });
 export {
-  D as DEFAULT_TEXT_COLOR,
-  B as TEXT_OPACITY_MAP,
-  I as Text,
-  U as TextBlock,
-  q as getTextOpacity,
-  $ as lineHeightResponsiveValueFormatter,
-  N as textSizeResponsiveValueFormatter
+  M as DEFAULT_TEXT_COLOR,
+  D as TEXT_OPACITY_MAP,
+  V as Text,
+  J as TextBlock,
+  L as getTextOpacity,
+  q as lineHeightResponsiveValueFormatter,
+  P as textSizeResponsiveValueFormatter
 };

package/dist/components/Text/Text.types.d.ts

@@ -21,12 +21,14 @@ interface TextPropsBase {
     userSelectable?: boolean;
     uppercase?: boolean;
     underlined?: boolean;
+    strikethrough?: boolean;
     size?: ResponsiveValueType<ResponsiveTextSize>;
     weight?: TextWeight;
     letterSpacing?: TextLetterSpacing;
     family?: 'primary' | 'secondary';
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface TextColorProps extends GetColorProps {
     opacity?: TextOpacity;

package/dist/index-CjTSD6zB.js

@@ -0,0 +1,161 @@
+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
+};

package/dist/{index-Bz27DCHt.js → index-DBus3GoO.js}

@@ -1330,11 +1330,11 @@ export {
   Xe as b,
   Ze as c,
   en as d,
-  Ke as e,
+  nn as e,
   Qe as f,
   on as g,
   tn as h,
-  nn as i,
+  Ke as i,
   Je as l,
   Ue as o,
   Ge as s,

package/dist/styles-scss/tokens.scss

@@ -135,7 +135,9 @@
 
 @mixin accordion-tokens() {
   @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: .1));
-  @include ui.define-color-token('accordion-background', ui.color('bg'));
+  @include ui.define-color-token('accordion-border-hover-color', ui.color('primary'));
+  @include ui.def('accordion-border-size', 1px);
+  @include ui.def('accordion-border-hover-size', ui.q(.25));
 }
 
 @mixin select-tokens() {

package/dist/utils/math.d.ts

@@ -1,2 +1,3 @@
 export declare function clamp01(n: number): number;
 export declare function clamp(n: number, min: number, max: number): number;
+export declare function minmax(n: number, min: number, max: number): number;

package/dist/utils/math.js

@@ -1,10 +1,14 @@
-function u(r) {
-  return r < 0 ? 0 : r > 1 ? 1 : r;
+function a(t) {
+  return t < 0 ? 0 : t > 1 ? 1 : t;
 }
-function a(r, t, n) {
-  return Math.min(n, Math.max(t, r));
+function i(t, n, r) {
+  return Math.min(r, Math.max(n, t));
+}
+function m(t, n, r) {
+  return Math.min(r, Math.max(n, t));
 }
 export {
-  a as clamp,
-  u as clamp01
+  i as clamp,
+  a as clamp01,
+  m as minmax
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.2.12",
+  "version": "4.2.14",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",
@@ -52,7 +52,7 @@
     "@storybook/test": "^8.1.5",
     "@types/node": "^20.12.13",
     "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",

package/dist/index-AweK2ufS.js

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