@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/components/Button/ButtonShowcase.js

@@ -1,39 +1,39 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import l from "react";
-import n from "../Flex/Flex.js";
-import { Text as i } from "../Text/Text.js";
+import c from "react";
+import r from "../Flex/Flex.js";
+import { Text as n } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import r from "./Button.js";
-import { ButtonBar as c } from "./ButtonBar.js";
-import { LinkButton as o } from "./LinkButton.js";
-function a() {
-  return /* @__PURE__ */ t(n, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Default Icon Right" }),
+import i from "./Button.js";
+import { ButtonBar as d } from "./ButtonBar.js";
+import { LinkButton as l } from "./LinkButton.js";
+function h() {
+  return /* @__PURE__ */ t(r, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Default Icon Right" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
-          theme: "default",
+          theme: "tertiary",
           icon: "Users"
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Default Icon Left" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Default Icon Left" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
-          theme: "default",
+          theme: "tertiary",
           iconLeft: "Users"
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Primary" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
           theme: "primary",
@@ -41,10 +41,10 @@ function a() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Secondary" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
           theme: "secondary",
@@ -52,10 +52,21 @@ function a() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "On Light" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Tertiary (Default)" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
+        {
+          text: "Sign In",
+          theme: "tertiary",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "On Light" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
         {
           text: "Sign In",
           theme: "on-light",
@@ -63,10 +74,10 @@ function a() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Quick Link" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Quick Link" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
           theme: "quicklink",
@@ -74,33 +85,45 @@ function a() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "No Icon" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
-          theme: "default"
+          theme: "tertiary"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Disabled" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          text: "Sign In",
+          theme: "tertiary",
+          disabled: !0,
+          icon: "Users"
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Full Width" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Sign In",
-          theme: "default",
+          theme: "tertiary",
           fullWidth: !0,
           icon: "Users"
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Linked" }),
-      /* @__PURE__ */ t(n, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Linked" }),
+      /* @__PURE__ */ t(r, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
         /* @__PURE__ */ e(
-          r,
+          i,
           {
             text: "Sign In",
             theme: "linked",
@@ -108,7 +131,7 @@ function a() {
           }
         ),
         /* @__PURE__ */ e(
-          r,
+          i,
           {
             disabled: !0,
             text: "Copy",
@@ -118,10 +141,10 @@ function a() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "LinkButton - look like button but its anchor" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "LinkButton - look like button but its anchor" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        o,
+        l,
         {
           to: "/",
           text: "Sign In",
@@ -130,29 +153,29 @@ function a() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Button Bar" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ e(r, { text: "Sign In", theme: "primary", icon: "Users" }),
-        /* @__PURE__ */ e(r, { text: "Register", theme: "secondary", icon: "Users" }),
-        /* @__PURE__ */ e(r, { text: "Sign Out", theme: "on-light", icon: "Users" }),
-        /* @__PURE__ */ e(r, { text: "Create Account", theme: "default", icon: "Users" })
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Button Bar" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(d, { children: [
+        /* @__PURE__ */ e(i, { text: "Sign In", theme: "primary", icon: "Users" }),
+        /* @__PURE__ */ e(i, { text: "Register", theme: "secondary", icon: "Users" }),
+        /* @__PURE__ */ e(i, { text: "Sign Out", theme: "on-light", icon: "Users" }),
+        /* @__PURE__ */ e(i, { text: "Create Account", theme: "tertiary", icon: "Users" })
       ] }) })
     ] }),
-    /* @__PURE__ */ t(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(i, { children: "Long text" }),
+    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Long text" }),
       /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
-        r,
+        i,
         {
           text: "Long text that should wrap around",
-          theme: "default",
+          theme: "tertiary",
           icon: "Users"
         }
       ) })
     ] })
   ] });
 }
-const v = l.memo(a);
+const x = c.memo(h);
 export {
-  v as default
+  x as default
 };

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

@@ -1,8 +1,10 @@
 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 CheckboxSize = 'small' | 'medium' | 'large';
 export type CheckboxCheckedType = CheckboxUi.CheckedState;
+export type CheckboxThemeType = 'primary' | 'secondary';
+export type CheckedType = 'checked' | 'unchecked';
 export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>, GetColorProps {
     id?: string;
     size?: CheckboxSize;
@@ -14,6 +16,7 @@ export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>,
     iconSquare?: React.ComponentType;
     iconIndicator?: React.ComponentType;
     name?: string;
+    theme?: CheckboxThemeType;
 }
 declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Checkbox>;