@cfx-dev/ui-components 4.5.22 → 5.0.2

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ButtonBarProps } from '../Button';
-import { IconBigName } from '../Icons';
+import { IconName } from '../Icons';
 import { ColorType } from '../../utils/ui';
 
 export declare enum ModalThemeEnum {
@@ -32,7 +32,7 @@ export declare namespace Modal {
 }
 export interface ModalHeaderIconProps {
     theme?: ModalThemeType;
-    iconName?: IconBigName;
+    iconName?: IconName;
     iconColor?: ColorType;
 }
 type ModalHeaderIconType = {
@@ -42,7 +42,7 @@ type ModalHeaderIconType = {
     icon?: never;
 } | {
     theme?: never;
-    iconName: IconBigName;
+    iconName: IconName;
     iconColor?: ColorType;
     icon?: never;
 } | {

package/dist/components/Modal/Modal.js

@@ -1,15 +1,15 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import B from "react";
+import M from "react";
 import "../Button/Button.js";
-import { ButtonBar as M } from "../Button/ButtonBar.js";
+import { ButtonBar as B } from "../Button/ButtonBar.js";
 import "../../utils/links.js";
-import g from "../Flex/Flex.js";
+import h from "../Flex/Flex.js";
 import { clsx as i } from "../../utils/clsx.js";
-import { IconBig as w } from "../IconBig/IconBig.js";
+import { Icon as w } from "../Icon/Icon.js";
 import O from "../IconButton/IconButton.js";
-import { Overlay as u } from "../Overlay/Overlay.js";
+import { Overlay as f } from "../Overlay/Overlay.js";
 import { Text as b } from "../Text/Text.js";
-import { ui as C } from "../../utils/ui/ui.js";
+import { ui as g } from "../../utils/ui/ui.js";
 import { ColorEnum as z } from "../../utils/ui/ui.types.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
@@ -22,7 +22,7 @@ const H = "cfxui__Modal__root__53283", I = "cfxui__Modal__colored__649d1", L = "
   footer: j
 };
 var A = /* @__PURE__ */ ((o) => (o.default = "default", o.danger = "danger", o.success = "success", o.warning = "warning", o))(A || {});
-const h = {
+const C = {
   default: void 0,
   danger: "red",
   success: "green",
@@ -36,27 +36,27 @@ function N(o) {
     children: t,
     className: s,
     overlayClassName: m,
-    backdropClassName: f,
+    backdropClassName: u,
     contentClassName: y,
     ariaDescribedby: v,
     ariaLabelledby: x,
     disableBackdropClose: _ = !1,
     disableFocusLock: k = !1
-  } = o, p = B.useCallback(() => {
+  } = o, p = M.useCallback(() => {
     _ || !e || e();
   }, [e, _]);
   F(p);
-  const n = c || h[r];
-  return /* @__PURE__ */ d(u, { className: i(l.overlay, m), children: [
+  const n = c || C[r];
+  return /* @__PURE__ */ d(f, { className: i(l.overlay, m), children: [
     /* @__PURE__ */ a(
-      u.Backdrop,
+      f.Backdrop,
       {
         onClick: p,
-        className: i(l.backdrop, f)
+        className: i(l.backdrop, u)
       }
     ),
     /* @__PURE__ */ a(
-      u.Content,
+      f.Content,
       {
         className: y,
         disableFocusLock: k,
@@ -70,8 +70,8 @@ function N(o) {
               [l.colored]: !!n
             }),
             style: {
-              "--modal-color": n ? C.color(n) : void 0,
-              "--modal-color-bg": n ? C.color(n, void 0, 0.2) : void 0
+              "--modal-color": n ? g.color(n) : void 0,
+              "--modal-color-bg": n ? g.color(n, void 0, 0.2) : void 0
             },
             children: [
               !!e && /* @__PURE__ */ a(O, { areaSize: "large", className: l.close, name: "Close", onClick: e }),
@@ -86,9 +86,9 @@ function N(o) {
 function D(o) {
   switch (o) {
     case "danger":
-      return "Warni";
+      return "Warning";
     case "success":
-      return "Confirm";
+      return "Tick";
     default:
       return;
   }
@@ -101,13 +101,13 @@ function P(o) {
   } = o;
   if (!c && !r)
     return null;
-  const t = c || D(r), s = e || h[r] || z.primary;
-  return t ? /* @__PURE__ */ a(g, { centered: !0, children: /* @__PURE__ */ a(
+  const t = c || D(r), s = e || C[r] || z.primary;
+  return t ? /* @__PURE__ */ a(h, { centered: !0, children: /* @__PURE__ */ a(
     w,
     {
       name: t,
       color: s,
-      size: "normal"
+      size: "xlarge"
     }
   ) }) : null;
 }
@@ -118,15 +118,15 @@ N.Header = function(r) {
     theme: t = "default",
     icon: s,
     iconName: m,
-    iconColor: f
+    iconColor: u
   } = r;
-  return /* @__PURE__ */ d(g, { vertical: !0, gap: "large", children: [
+  return /* @__PURE__ */ d(h, { vertical: !0, gap: "large", children: [
     s || /* @__PURE__ */ a(
       P,
       {
         theme: t,
         iconName: m,
-        iconColor: f
+        iconColor: u
       }
     ),
     /* @__PURE__ */ d("div", { className: l.header, children: [
@@ -155,10 +155,10 @@ N.Footer = function(r) {
     className: c,
     ...e
   } = r;
-  return /* @__PURE__ */ a(M, { ...e, className: i(l.footer, c) });
+  return /* @__PURE__ */ a(B, { ...e, className: i(l.footer, c) });
 };
 export {
-  h as MODAL_THEME_TO_COLOR_MAP,
+  C as MODAL_THEME_TO_COLOR_MAP,
   N as Modal,
   A as ModalThemeEnum
 };

package/dist/components/Modal/ModalShowcase.js

@@ -1,17 +1,17 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import r from "react";
+import i from "react";
 import n from "../Box/Box.js";
 import "../../utils/ui/ui.js";
-import i from "../Button/Button.js";
+import l from "../Button/Button.js";
 import "../../utils/links.js";
 import c from "../Input/Input.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
 import { LOREM_IPSUM as p } from "../../utils/loremipsum.js";
-import { Modal as l } from "./Modal.js";
+import { Modal as r } from "./Modal.js";
 function s() {
-  const [a, d] = r.useState(!1), t = r.useCallback(() => d((m) => !m), []);
+  const [a, d] = i.useState(!1), t = i.useCallback(() => d((m) => !m), []);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -22,12 +22,12 @@ function s() {
       children: [
         /* @__PURE__ */ o("div", { id: "backdrop" }),
         /* @__PURE__ */ o("div", { id: "overlay-outlet" }),
-        /* @__PURE__ */ o(i, { theme: "primary", onClick: t, text: "Toggle Modal" }),
-        a && /* @__PURE__ */ e(l, { onClose: t, children: [
+        /* @__PURE__ */ o(l, { theme: "primary", onClick: t, text: "Toggle Modal" }),
+        a && /* @__PURE__ */ e(r, { onClose: t, children: [
           /* @__PURE__ */ o(
-            l.Header,
+            r.Header,
             {
-              iconName: "Subscriptions",
+              iconName: "Users",
               iconColor: "accent",
               title: "Modal Title",
               description: "Modal Description"
@@ -37,9 +37,9 @@ function s() {
           "Modal content:",
           " ",
           p,
-          /* @__PURE__ */ e(l.Footer, { children: [
+          /* @__PURE__ */ e(r.Footer, { children: [
             /* @__PURE__ */ o(
-              i,
+              l,
               {
                 fullWidth: !0,
                 theme: "secondary",
@@ -48,7 +48,7 @@ function s() {
               }
             ),
             /* @__PURE__ */ o(
-              i,
+              l,
               {
                 fullWidth: !0,
                 theme: "primary",
@@ -62,7 +62,7 @@ function s() {
     }
   );
 }
-const w = r.memo(s);
+const b = i.memo(s);
 export {
-  w as default
+  b as default
 };

package/dist/components/Pagination/Pagination.js

@@ -3,14 +3,14 @@ import c from "react";
 import d from "../Button/Button.js";
 import { clsx as m } from "../../utils/clsx.js";
 import "../../utils/links.js";
-const p = "cfxui__Pagination__root__c5025", x = "cfxui__Pagination__button__87663", N = "cfxui__Pagination__current__2cd39", w = "cfxui__Pagination__buttonBack__cb0e5", B = "cfxui__Pagination__buttonForward__4a51e", F = "cfxui__Pagination__ellipsis__9f336", y = "cfxui__Pagination__dot__70f66", a = {
+const p = "cfxui__Pagination__root__c5025", x = "cfxui__Pagination__button__87663", N = "cfxui__Pagination__current__2cd39", w = "cfxui__Pagination__buttonBack__cb0e5", y = "cfxui__Pagination__buttonForward__4a51e", B = "cfxui__Pagination__ellipsis__9f336", F = "cfxui__Pagination__dot__70f66", a = {
   root: p,
   button: x,
   current: N,
   buttonBack: w,
-  buttonForward: B,
-  ellipsis: F,
-  dot: y
+  buttonForward: y,
+  ellipsis: B,
+  dot: F
 };
 function h() {
   return /* @__PURE__ */ l("span", { className: a.ellipsis, children: [
@@ -31,7 +31,7 @@ function _(u) {
   return /* @__PURE__ */ n(
     d,
     {
-      theme: o ? "default" : "secondary",
+      theme: o ? "tertiary" : "secondary",
       text: t.toString(),
       disabled: e,
       onClick: r,

package/dist/components/RSC/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { BoxProps } from '../Box';
-import { ResponsiveOffsetType, ResponsiveValueType } from '../../../utils/ui';
+import { ResponsiveSizeUnitType, ResponsiveValueType } from '../../../utils/ui';
 import { FlexAlignItemsType, FlexCentredType, FlexDirectionType, FlexJustifyContentType, FlexWrapType } from './Flex.types';
 
 export interface FlexProps extends BoxProps {
@@ -11,7 +11,7 @@ export interface FlexProps extends BoxProps {
     spaceBetween?: boolean;
     alignToEnd?: boolean;
     alignToEndAxis?: boolean;
-    gap?: ResponsiveOffsetType;
+    gap?: ResponsiveSizeUnitType;
     direction?: ResponsiveValueType<FlexDirectionType>;
     alignItems?: ResponsiveValueType<FlexAlignItemsType>;
     justifyContent?: ResponsiveValueType<FlexJustifyContentType>;

package/dist/components/RSC/Flex/Flex.js

@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
 import A from "../Box/Box.js";
 import { clsx as v } from "../../../utils/clsx.js";
 import { ui as n } from "../../../utils/ui/ui.js";
-const C = "cfxui__Flex__root__d860a", F = "cfxui__Flex__centered__e911c", b = "cfxui__Flex__centeredAxis__a7613", w = "cfxui__Flex__centeredCrossAxis__11477", y = "cfxui__Flex__baselineAxis__5a93c", h = "cfxui__Flex__baselineCrossAxis__b3c28", E = "cfxui__Flex__reverseOrder__3d910", T = "cfxui__Flex__vertical__552db", R = "cfxui__Flex__alignToEnd__a45a8", B = "cfxui__Flex__alignToEndAxis__80f62", O = "cfxui__Flex__spaceBetween__b5438", S = "cfxui__Flex__stretch__5c1ce", j = "cfxui__Flex__horizontal__d64f7", s = {
+const C = "cfxui__Flex__root__d860a", F = "cfxui__Flex__centered__e911c", b = "cfxui__Flex__centeredAxis__a7613", w = "cfxui__Flex__centeredCrossAxis__11477", y = "cfxui__Flex__baselineAxis__5a93c", h = "cfxui__Flex__baselineCrossAxis__b3c28", E = "cfxui__Flex__reverseOrder__3d910", T = "cfxui__Flex__vertical__552db", R = "cfxui__Flex__alignToEnd__a45a8", B = "cfxui__Flex__alignToEndAxis__80f62", S = "cfxui__Flex__spaceBetween__b5438", j = "cfxui__Flex__stretch__5c1ce", O = "cfxui__Flex__horizontal__d64f7", s = {
   root: C,
   centered: F,
   centeredAxis: b,
@@ -13,14 +13,14 @@ const C = "cfxui__Flex__root__d860a", F = "cfxui__Flex__centered__e911c", b = "c
   vertical: T,
   alignToEnd: R,
   alignToEndAxis: B,
-  spaceBetween: O,
-  stretch: S,
-  horizontal: j
+  spaceBetween: S,
+  stretch: j,
+  horizontal: O
 };
-function N(e) {
+function z(e) {
   return e == null ? "" : typeof e == "boolean" ? e ? "wrap" : "nowrap" : e.toString();
 }
-function z(e) {
+function N(e) {
   const {
     centered: t = !1,
     vertical: i = !1,
@@ -31,8 +31,8 @@ function z(e) {
     alignToEndAxis: l = !1,
     className: _,
     gap: x,
-    direction: f,
-    alignItems: d,
+    direction: d,
+    alignItems: f,
     justifyContent: g,
     wrap: u
   } = e;
@@ -40,8 +40,8 @@ function z(e) {
     s.root,
     _,
     n.getResponsiveClassnames("gap", x),
-    n.getResponsiveClassnames("flex-direction", f),
-    n.getResponsiveClassnames("align-items", d),
+    n.getResponsiveClassnames("flex-direction", d),
+    n.getResponsiveClassnames("align-items", f),
     n.getResponsiveClassnames("justify-content", g),
     n.getResponsiveClassnames("flex-wrap", u),
     {
@@ -69,11 +69,11 @@ function I(e) {
     wrap: a
   } = e;
   return {
-    ...n.getOffsetStyles("gap", t),
+    ...n.getSizeStyles("gap", t),
     ...n.getResponsiveStyles("flex-direction", i),
     ...n.getResponsiveStyles("align-items", r),
     ...n.getResponsiveStyles("justify-content", o),
-    ...n.getResponsiveStyles("flex-wrap", a, N)
+    ...n.getResponsiveStyles("flex-wrap", a, z)
   };
 }
 function P(e) {
@@ -87,8 +87,8 @@ function P(e) {
     alignToEndAxis: l,
     children: _,
     className: x,
-    gap: f,
-    direction: d,
+    gap: d,
+    direction: f,
     alignItems: g,
     justifyContent: u,
     wrap: W,
@@ -99,7 +99,7 @@ function P(e) {
 function H(e) {
   const {
     children: t
-  } = e, i = z(e), r = I(e);
+  } = e, i = N(e), r = I(e);
   return /* @__PURE__ */ m(
     A,
     {
@@ -112,8 +112,8 @@ function H(e) {
 }
 export {
   H as default,
-  N as flexWrapResponsiveFormatter,
+  z as flexWrapResponsiveFormatter,
   P as getBoxProps,
-  z as getFlexClassNames,
+  N as getFlexClassNames,
   I as getFlexStyles
 };

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export type RadioSize = 'normal' | 'large';
+export type RadioSize = 'medium' | 'large';
 export interface RadioProps {
     checked: boolean;
     onChange: (value: boolean) => void;

package/dist/components/Radio/Radio.js

@@ -1,45 +1,45 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import a from "react";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import o from "react";
 import { clsx as h } from "../../utils/clsx.js";
 const R = "cfxui__Radio__root__05f1c", p = "cfxui__Radio__indicator__2181e", z = "cfxui__Radio__disabled__c411f", e = {
   root: R,
-  "size-normal": "cfxui__Radio__size-normal__6dccc",
+  "size-medium": "cfxui__Radio__size-medium__f0b80",
   "size-large": "cfxui__Radio__size-large__0a074",
   indicator: p,
   disabled: z
 };
 let t = 1;
-function N(d) {
+function N(c) {
   const {
-    checked: i,
+    checked: a,
     onChange: n,
     label: _,
-    size: l = "normal",
+    size: l = "medium",
     className: r,
     disabled: s = !1,
-    name: f
-  } = d, m = a.useRef(t);
-  a.useEffect(() => {
+    name: m
+  } = c, f = o.useRef(t);
+  o.useEffect(() => {
     t += 1;
   }, []);
   const u = () => {
-    n(!i);
-  }, c = a.useId(), x = h(e.root, r, e[`size-${l}`], { [e.disabled]: s });
-  return /* @__PURE__ */ b("label", { className: x, htmlFor: c, children: [
-    /* @__PURE__ */ o(
+    n(!a);
+  }, d = o.useId(), b = h(e.root, r, e[`size-${l}`], { [e.disabled]: s });
+  return /* @__PURE__ */ x("label", { className: b, htmlFor: d, children: [
+    /* @__PURE__ */ i(
       "input",
       {
         type: "radio",
-        tabIndex: m.current,
-        checked: i,
+        tabIndex: f.current,
+        checked: a,
         disabled: s,
         onChange: u,
-        id: c,
-        name: f
+        id: d,
+        name: m
       }
     ),
-    /* @__PURE__ */ o("div", { className: e.indicator }),
-    /* @__PURE__ */ o("div", { className: e.label, children: _ })
+    /* @__PURE__ */ i("div", { className: e.indicator }),
+    /* @__PURE__ */ i("div", { className: e.label, children: _ })
   ] });
 }
 export {

package/dist/components/Range/RangeShowcase.js

@@ -1,14 +1,14 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import r from "../Flex/Flex.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import a from "../Flex/Flex.js";
 import { Text as t } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import i from "./RangeWithInputs.js";
-function g() {
-  return /* @__PURE__ */ a(r, { gap: "large", vertical: !0, pb: 20, children: [
-    /* @__PURE__ */ a(r, { gap: "normal", vertical: !0, children: [
+import r from "./RangeWithInputs.js";
+function d() {
+  return /* @__PURE__ */ i(a, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ i(a, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(t, { children: "Range With Inputs" }),
       /* @__PURE__ */ e(
-        i,
+        r,
         {
           defaultValue: [55, 100],
           max: 200,
@@ -19,10 +19,10 @@ function g() {
         }
       )
     ] }),
-    /* @__PURE__ */ a(r, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ i(a, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(t, { children: "Disabled: Range With Inputs" }),
       /* @__PURE__ */ e(
-        i,
+        r,
         {
           defaultValue: [55, 100],
           max: 200,
@@ -37,5 +37,5 @@ function g() {
   ] });
 }
 export {
-  g as default
+  d as default
 };

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,4 @@
 import { default as React } from 'react';
-import { InputSize } from '../Input';
-import { ResponsiveValueType } from '../../utils/ui';
 
 export interface SelectOption<T> {
     value: T;
@@ -13,7 +11,6 @@ export interface SelectProps<T = string> {
     className?: string;
     placeholder?: React.ReactNode;
     disabled?: boolean;
-    size?: ResponsiveValueType<InputSize>;
     fullWidth?: boolean;
 }
 export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;