@cfx-dev/ui-components 4.5.13 → 4.5.15

package/dist/components/Checkbox/Checkbox.d.ts

@@ -2,11 +2,16 @@ import { default as React } from 'react';
 import { GetColorProps } from '../../utils/color';
 import * as CheckboxUi from '@radix-ui/react-checkbox';
 export type CheckboxSize = 'small' | 'normal' | 'large';
+export type CheckboxCheckedType = CheckboxUi.CheckedState;
 export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>, GetColorProps {
     id?: string;
     size?: CheckboxSize;
     rootClassName?: string;
     indicatorClassName?: string;
+    iconClassName?: string;
+    squareClassName?: string;
+    checkedClassName?: string;
+    iconSquare?: React.ComponentType;
     iconIndicator?: React.ComponentType;
     name?: string;
 }

package/dist/components/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
-import { jsx as a, jsxs as w, Fragment as $ } from "react/jsx-runtime";
-import * as u from "react";
+import { jsx as s, jsxs as w, Fragment as $ } from "react/jsx-runtime";
+import * as l from "react";
 import G from "react";
-import { c as K, P as E, d as X, u as B, e as q, f as J } from "../../index-DCuJlMqr.js";
+import { c as K, P as g, d as X, u as B, e as q, f as J } from "../../index-DCuJlMqr.js";
 import { u as Q } from "../../index-BZPx6jYI.js";
 import { P as V } from "../../index-DWzyrn_L.js";
 import "../Icons/cfx-icons/Close.js";
@@ -55,139 +55,139 @@ import "../Icons/cfx-icons-big/Subscriptions.js";
 import "../Icons/cfx-icons-big/Upload.js";
 import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
-import { clsx as g } from "../../utils/clsx.js";
+import { clsx as N } from "../../utils/clsx.js";
 import { getColor as Z } from "../../utils/color.js";
-var y = "Checkbox", [ee, ko] = K(y), [oe, N] = ee(y);
+var R = "Checkbox", [ee, ho] = K(R), [oe, E] = ee(R);
 function te(o) {
   const {
-    __scopeCheckbox: i,
-    checked: c,
-    children: d,
-    defaultChecked: t,
+    __scopeCheckbox: a,
+    checked: n,
+    children: m,
+    defaultChecked: r,
     disabled: e,
     form: f,
     name: _,
-    onCheckedChange: m,
+    onCheckedChange: d,
     required: h,
-    value: l = "on",
+    value: C = "on",
     // @ts-expect-error
-    internal_do_not_use_render: r
-  } = o, [p, v] = X({
-    prop: c,
-    defaultProp: t ?? !1,
-    onChange: m,
-    caller: y
-  }), [k, b] = u.useState(null), [I, n] = u.useState(null), s = u.useRef(!1), R = k ? !!f || !!k.closest("form") : (
+    internal_do_not_use_render: p
+  } = o, [i, b] = X({
+    prop: n,
+    defaultProp: r ?? !1,
+    onChange: d,
+    caller: R
+  }), [u, k] = l.useState(null), [I, t] = l.useState(null), c = l.useRef(!1), y = u ? !!f || !!u.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
   ), P = {
-    checked: p,
+    checked: i,
     disabled: e,
-    setChecked: v,
-    control: k,
-    setControl: b,
+    setChecked: b,
+    control: u,
+    setControl: k,
     name: _,
     form: f,
-    value: l,
-    hasConsumerStoppedPropagationRef: s,
+    value: C,
+    hasConsumerStoppedPropagationRef: c,
     required: h,
-    defaultChecked: x(t) ? !1 : t,
-    isFormControl: R,
+    defaultChecked: v(r) ? !1 : r,
+    isFormControl: y,
     bubbleInput: I,
-    setBubbleInput: n
+    setBubbleInput: t
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(
     oe,
     {
-      scope: i,
+      scope: a,
       ...P,
-      children: re(r) ? r(P) : d
+      children: re(p) ? p(P) : m
     }
   );
 }
-var T = "CheckboxTrigger", M = u.forwardRef(
-  ({ __scopeCheckbox: o, onKeyDown: i, onClick: c, ...d }, t) => {
+var T = "CheckboxTrigger", M = l.forwardRef(
+  ({ __scopeCheckbox: o, onKeyDown: a, onClick: n, ...m }, r) => {
     const {
       control: e,
       value: f,
       disabled: _,
-      checked: m,
+      checked: d,
       required: h,
-      setControl: l,
-      setChecked: r,
-      hasConsumerStoppedPropagationRef: p,
-      isFormControl: v,
-      bubbleInput: k
-    } = N(T, o), b = B(t, l), I = u.useRef(m);
-    return u.useEffect(() => {
-      const n = e == null ? void 0 : e.form;
-      if (n) {
-        const s = () => r(I.current);
-        return n.addEventListener("reset", s), () => n.removeEventListener("reset", s);
+      setControl: C,
+      setChecked: p,
+      hasConsumerStoppedPropagationRef: i,
+      isFormControl: b,
+      bubbleInput: u
+    } = E(T, o), k = B(r, C), I = l.useRef(d);
+    return l.useEffect(() => {
+      const t = e == null ? void 0 : e.form;
+      if (t) {
+        const c = () => p(I.current);
+        return t.addEventListener("reset", c), () => t.removeEventListener("reset", c);
       }
-    }, [e, r]), /* @__PURE__ */ a(
-      E.button,
+    }, [e, p]), /* @__PURE__ */ s(
+      g.button,
       {
         type: "button",
         role: "checkbox",
-        "aria-checked": x(m) ? "mixed" : m,
+        "aria-checked": v(d) ? "mixed" : d,
         "aria-required": h,
-        "data-state": O(m),
+        "data-state": O(d),
         "data-disabled": _ ? "" : void 0,
         disabled: _,
         value: f,
-        ...d,
-        ref: b,
-        onKeyDown: q(i, (n) => {
-          n.key === "Enter" && n.preventDefault();
+        ...m,
+        ref: k,
+        onKeyDown: q(a, (t) => {
+          t.key === "Enter" && t.preventDefault();
         }),
-        onClick: q(c, (n) => {
-          r((s) => x(s) ? !0 : !s), k && v && (p.current = n.isPropagationStopped(), p.current || n.stopPropagation());
+        onClick: q(n, (t) => {
+          p((c) => v(c) ? !0 : !c), u && b && (i.current = t.isPropagationStopped(), i.current || t.stopPropagation());
         })
       }
     );
   }
 );
 M.displayName = T;
-var U = u.forwardRef(
-  (o, i) => {
+var U = l.forwardRef(
+  (o, a) => {
     const {
-      __scopeCheckbox: c,
-      name: d,
-      checked: t,
+      __scopeCheckbox: n,
+      name: m,
+      checked: r,
       defaultChecked: e,
       required: f,
       disabled: _,
-      value: m,
+      value: d,
       onCheckedChange: h,
-      form: l,
-      ...r
+      form: C,
+      ...p
     } = o;
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ s(
       te,
       {
-        __scopeCheckbox: c,
-        checked: t,
+        __scopeCheckbox: n,
+        checked: r,
         defaultChecked: e,
         disabled: _,
         required: f,
         onCheckedChange: h,
-        name: d,
-        form: l,
-        value: m,
-        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ w($, { children: [
-          /* @__PURE__ */ a(
+        name: m,
+        form: C,
+        value: d,
+        internal_do_not_use_render: ({ isFormControl: i }) => /* @__PURE__ */ w($, { children: [
+          /* @__PURE__ */ s(
             M,
             {
-              ...r,
-              ref: i,
-              __scopeCheckbox: c
+              ...p,
+              ref: a,
+              __scopeCheckbox: n
             }
           ),
-          p && /* @__PURE__ */ a(
+          i && /* @__PURE__ */ s(
             L,
             {
-              __scopeCheckbox: c
+              __scopeCheckbox: n
             }
           )
         ] })
@@ -195,21 +195,21 @@ var U = u.forwardRef(
     );
   }
 );
-U.displayName = y;
-var A = "CheckboxIndicator", D = u.forwardRef(
-  (o, i) => {
-    const { __scopeCheckbox: c, forceMount: d, ...t } = o, e = N(A, c);
-    return /* @__PURE__ */ a(
+U.displayName = R;
+var A = "CheckboxIndicator", D = l.forwardRef(
+  (o, a) => {
+    const { __scopeCheckbox: n, forceMount: m, ...r } = o, e = E(A, n);
+    return /* @__PURE__ */ s(
       V,
       {
-        present: d || x(e.checked) || e.checked === !0,
-        children: /* @__PURE__ */ a(
-          E.span,
+        present: m || v(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ s(
+          g.span,
           {
             "data-state": O(e.checked),
             "data-disabled": e.disabled ? "" : void 0,
-            ...t,
-            ref: i,
+            ...r,
+            ref: a,
             style: { pointerEvents: "none", ...o.style }
           }
         )
@@ -218,50 +218,50 @@ var A = "CheckboxIndicator", D = u.forwardRef(
   }
 );
 D.displayName = A;
-var F = "CheckboxBubbleInput", L = u.forwardRef(
-  ({ __scopeCheckbox: o, ...i }, c) => {
+var F = "CheckboxBubbleInput", L = l.forwardRef(
+  ({ __scopeCheckbox: o, ...a }, n) => {
     const {
-      control: d,
-      hasConsumerStoppedPropagationRef: t,
+      control: m,
+      hasConsumerStoppedPropagationRef: r,
       checked: e,
       defaultChecked: f,
       required: _,
-      disabled: m,
+      disabled: d,
       name: h,
-      value: l,
-      form: r,
-      bubbleInput: p,
-      setBubbleInput: v
-    } = N(F, o), k = B(c, v), b = Q(e), I = J(d);
-    u.useEffect(() => {
-      const s = p;
-      if (!s) return;
-      const R = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
-        R,
+      value: C,
+      form: p,
+      bubbleInput: i,
+      setBubbleInput: b
+    } = E(F, o), u = B(n, b), k = Q(e), I = J(m);
+    l.useEffect(() => {
+      const c = i;
+      if (!c) return;
+      const y = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
+        y,
         "checked"
-      ).set, j = !t.current;
-      if (b !== e && S) {
+      ).set, j = !r.current;
+      if (k !== e && S) {
         const H = new Event("click", { bubbles: j });
-        s.indeterminate = x(e), S.call(s, x(e) ? !1 : e), s.dispatchEvent(H);
+        c.indeterminate = v(e), S.call(c, v(e) ? !1 : e), c.dispatchEvent(H);
       }
-    }, [p, b, e, t]);
-    const n = u.useRef(x(e) ? !1 : e);
-    return /* @__PURE__ */ a(
-      E.input,
+    }, [i, k, e, r]);
+    const t = l.useRef(v(e) ? !1 : e);
+    return /* @__PURE__ */ s(
+      g.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: f ?? n.current,
+        defaultChecked: f ?? t.current,
         required: _,
-        disabled: m,
+        disabled: d,
         name: h,
-        value: l,
-        form: r,
-        ...i,
+        value: C,
+        form: p,
+        ...a,
         tabIndex: -1,
-        ref: k,
+        ref: u,
         style: {
-          ...i.style,
+          ...a.style,
           ...I,
           position: "absolute",
           pointerEvents: "none",
@@ -280,71 +280,81 @@ L.displayName = F;
 function re(o) {
   return typeof o == "function";
 }
-function x(o) {
+function v(o) {
   return o === "indeterminate";
 }
 function O(o) {
-  return x(o) ? "indeterminate" : o ? "checked" : "unchecked";
+  return v(o) ? "indeterminate" : o ? "checked" : "unchecked";
 }
-const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865aa", ie = "cfxui__Checkbox__square__029aa", se = "cfxui__Checkbox__indicator__2afc0", ae = "cfxui__Checkbox__checked__b4081", de = "cfxui__Checkbox__radioIcon__719e7", me = "cfxui__Checkbox__tickIcon__a7f19", C = {
+const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865aa", ie = "cfxui__Checkbox__square__029aa", ae = "cfxui__Checkbox__indicator__2afc0", se = "cfxui__Checkbox__radioIcon__719e7", me = "cfxui__Checkbox__tickIcon__a7f19", x = {
   rootUnset: ce,
   root: ne,
   square: ie,
-  indicator: se,
-  checked: ae,
+  indicator: ae,
   "size-small": "cfxui__Checkbox__size-small__02440",
-  radioIcon: de,
+  radioIcon: se,
   tickIcon: me,
   "size-normal": "cfxui__Checkbox__size-normal__700f4",
   "size-large": "cfxui__Checkbox__size-large__28529"
 };
-function pe(o) {
+function de(o) {
   const {
-    id: i,
-    size: c = "normal",
-    rootClassName: d,
-    indicatorClassName: t,
-    colorToken: e,
-    color: f,
-    opacity: _,
-    luminance: m,
-    checked: h,
-    name: l,
-    iconIndicator: r = z,
-    ...p
-  } = o, v = g(
-    C.root,
-    C.rootUnset,
-    C[`size-${c}`],
-    d
-  ), k = Z(o), b = g(
-    C.checked,
-    r === Y && C.tickIcon,
-    r === z && C.radioIcon
+    id: a,
+    size: n = "normal",
+    rootClassName: m,
+    indicatorClassName: r,
+    iconClassName: e,
+    checkedClassName: f,
+    squareClassName: _,
+    colorToken: d,
+    color: h,
+    opacity: C,
+    luminance: p,
+    checked: i,
+    name: b,
+    iconIndicator: u = z,
+    iconSquare: k = W,
+    ...I
+  } = o, t = Z(o), c = N(
+    x.root,
+    x.rootUnset,
+    x[`size-${n}`],
+    m,
+    {
+      [f || ""]: i
+    }
+  ), y = N(
+    x.checked,
+    e,
+    {
+      [x.tickIcon]: u === Y,
+      [x.radioIcon]: u === z
+    }
   );
   return /* @__PURE__ */ w(
     U,
     {
-      ...p,
-      id: i,
-      checked: h,
-      style: { color: k },
-      className: v,
+      ...I,
+      id: a,
+      checked: i,
+      style: { color: t },
+      className: c,
       children: [
-        l && /* @__PURE__ */ a(
+        b && /* @__PURE__ */ s(
           "input",
           {
             type: "hidden",
-            name: l
+            name: b,
+            value: i ? "on" : ""
           }
         ),
-        /* @__PURE__ */ a(W, { className: C.square }),
-        /* @__PURE__ */ a(D, { className: g(C.indicator, t), children: /* @__PURE__ */ a(r, { className: b }) })
+        /* @__PURE__ */ s(k, { className: N(x.square, _) }),
+        /* @__PURE__ */ s(D, { className: N(x.indicator, r), children: /* @__PURE__ */ s(u, { className: y }) })
       ]
     }
   );
 }
-const bo = G.memo(pe);
+const Co = G.memo(de);
 export {
-  bo as default
+  Co as default
 };

package/dist/components/Checkbox/CheckboxShowcase.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxProps } from './Checkbox';
+
+declare function CheckboxShowcase(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default CheckboxShowcase;

package/dist/components/Checkbox/CheckboxShowcase.js

@@ -0,0 +1,33 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "react";
+import i from "../Box/Box.js";
+import "../../utils/ui/ui.js";
+import h from "./Checkbox.js";
+const n = "cfxui__CheckboxShowcase__root__5c0e0", _ = "cfxui__CheckboxShowcase__checked__e49f9", k = "cfxui__CheckboxShowcase__icon__686ec", e = {
+  root: n,
+  checked: _,
+  icon: k
+};
+function l(s) {
+  const [a, c] = r.useState(!1);
+  return /* @__PURE__ */ o(i, { p: 2, children: /* @__PURE__ */ o(
+    h,
+    {
+      ...s,
+      id: "checkbox1",
+      name: "checkbox1",
+      checked: a,
+      onCheckedChange: c,
+      onClick: () => c((t) => !t),
+      size: "normal",
+      rootClassName: e.root,
+      indicatorClassName: e.indicator,
+      iconClassName: e.icon,
+      checkedClassName: e.checked,
+      squareClassName: e.square
+    }
+  ) });
+}
+export {
+  l as default
+};

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

@@ -9,7 +9,7 @@ export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';
 export type TextSpecificOpacity = '0' | '25' | '50' | '75' | '100';
 export type TextOpacity = TextSpecificOpacity | OpacityRange;
 export type TextAs = 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type TextLetterSpacing = 'normal' | 'large';
+export type TextLetterSpacing = 'normal' | 'large' | 'xlarge';
 export type TextFamaly = 'primary' | 'secondary';
 interface TextPropsBase {
     as?: TextAs;

package/dist/styles-scss/tokens.scss

@@ -60,6 +60,7 @@
   @include ui.def('font-weight-boldest', 900);
   @include ui.def('letter-spacing-normal', -0.025em);
   @include ui.def('letter-spacing-large', 0);
+  @include ui.def('letter-spacing-xlarge', 1px);
   @include ui.def('font-family-primary', 'HelveticaNowText');
   @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
   @include ui.define-color-token('text', ui.color('primary', 'pure'));

package/package.json

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