@cfx-dev/ui-components 1.0.0 → 2.0.1

package/dist/components/Avatar/AvatarShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function AvatarShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AvatarShowcase>;
+export default _default;

package/dist/components/Avatar/AvatarShowcase.js

@@ -0,0 +1,33 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import a from "react";
+import { Flex as l } from "../Layout/Flex/Flex.js";
+import { Text as t } from "../Text/Text.js";
+import { Avatar as i } from "./Avatar.js";
+function u() {
+  return /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
+    /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(t, { size: "large", children: "small" }),
+      /* @__PURE__ */ e(i, { size: "small" })
+    ] }),
+    /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(t, { size: "large", children: "normal" }),
+      /* @__PURE__ */ e(i, { size: "normal" })
+    ] }),
+    /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(t, { size: "large", children: "large" }),
+      /* @__PURE__ */ e(i, { size: "large" })
+    ] }),
+    /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(t, { size: "large", children: "xxxlarge" }),
+      /* @__PURE__ */ e(i, { size: "xxxlarge" })
+    ] }),
+    /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
+      /* @__PURE__ */ e(t, { size: "large", children: "Rounded" }),
+      /* @__PURE__ */ e(i, { size: "large", rounded: !0 })
+    ] })
+  ] });
+}
+const s = a.memo(u);
+export {
+  s as default
+};

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1,4 @@
+import { Avatar as o } from "./Avatar.js";
+export {
+  o as Avatar
+};

package/dist/components/BackdropPortal/BackdropPortal.js

@@ -1,13 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useOutlet as c } from "../../utils/hooks.js";
-const e = "backdrop-outlet";
-function n({
+import "react";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import { useOutlet as p } from "../../utils/hooks/useOutlet.js";
+const m = "backdrop-outlet";
+function a({
   children: t
 }) {
-  const o = c(e);
+  const o = p(m);
   return /* @__PURE__ */ r(o, { children: t });
 }
 export {
-  e as BACKDROP_OUTLET_ID,
-  n as BackdropPortal
+  m as BACKDROP_OUTLET_ID,
+  a as BackdropPortal
 };

package/dist/components/Badge/Badge.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
+import { IconName } from '../Icon';
 
-export type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export type BadgeColor = 'success' | 'neutral' | 'warning' | 'error';
 export interface BadgeProps {
     color?: BadgeColor;
+    icon?: IconName;
     children?: React.ReactNode;
     className?: string;
+    hoverable?: boolean;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge/Badge.js

@@ -1,18 +1,28 @@
-import { jsx as m } from "react/jsx-runtime";
-import _ from "react";
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import m from "react";
+import { Icon as u } from "../Icon/Icon.js";
 import { clsx as f } from "../../utils/clsx.js";
-import '../../assets/Badge.css';const l = "_root_11j4y_1", n = "_primary_11j4y_16", o = {
-  root: l,
-  default: "_default_11j4y_11",
-  primary: n
-}, y = _.forwardRef(function(r, t) {
+import '../../assets/Badge.css';const d = "_root_15tkr_1", h = "_success_15tkr_13", k = "_hoverable_15tkr_17", v = "_neutral_15tkr_20", b = "_warning_15tkr_24", g = "_error_15tkr_31", p = "_icon_15tkr_39", o = {
+  root: d,
+  success: h,
+  hoverable: k,
+  neutral: v,
+  warning: b,
+  error: g,
+  icon: p
+}, R = m.forwardRef(function(s, e) {
   const {
-    color: a = "default",
-    children: s,
-    className: e
-  } = r, c = f(o.root, e, o[a]);
-  return /* @__PURE__ */ m("div", { ref: t, className: c, children: s });
+    color: t = "success",
+    children: c,
+    icon: r,
+    className: n,
+    hoverable: a = !1
+  } = s, _ = f(o.root, n, o[t], { [o.hoverable]: a });
+  return /* @__PURE__ */ l("div", { ref: e, className: _, children: [
+    c,
+    !!r && /* @__PURE__ */ i(u, { name: r, className: o.icon })
+  ] });
 });
 export {
-  y as Badge
+  R as Badge
 };

package/dist/components/Badge/BadgeShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function BadgeShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BadgeShowcase>;
+export default _default;

package/dist/components/Badge/BadgeShowcase.js

@@ -0,0 +1,56 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import n from "react";
+import { Flex as c } from "../Layout/Flex/Flex.js";
+import { Text as l } from "../Text/Text.js";
+import { Badge as i } from "./Badge.js";
+function o() {
+  return /* @__PURE__ */ e(c, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(l, { children: "Success" }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        i,
+        {
+          color: "success",
+          children: /* @__PURE__ */ r("p", { children: "success" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(l, { children: "Neutral" }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        i,
+        {
+          color: "neutral",
+          children: /* @__PURE__ */ r("p", { children: "neutral" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(l, { children: "Warning with hoverable" }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        i,
+        {
+          color: "warning",
+          icon: "MoreInfo",
+          hoverable: !0,
+          children: /* @__PURE__ */ r("p", { children: "warning" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(l, { children: "Error" }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        i,
+        {
+          color: "error",
+          icon: "MoreInfo",
+          children: /* @__PURE__ */ r("p", { children: "error" })
+        }
+      ) })
+    ] })
+  ] });
+}
+const u = n.memo(o);
+export {
+  u as default
+};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeColor, BadgeProps, } from './Badge';

package/dist/components/Badge/index.js

@@ -0,0 +1,4 @@
+import { Badge as r } from "./Badge.js";
+export {
+  r as Badge
+};

package/dist/components/Button/Button.d.ts

@@ -1,21 +1,19 @@
 import { default as React } from 'react';
+import { IconName } from '../Icon';
 
-export type ButtonTheme = 'default' | 'default-blurred' | 'primary' | 'transparent';
-export type ButtonSize = 'normal' | 'small' | 'large';
+export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'default';
 export interface ButtonProps {
     text?: React.ReactNode;
     title?: string;
     type?: HTMLButtonElement['type'];
-    icon?: React.ReactNode;
+    icon?: IconName;
     theme?: ButtonTheme;
-    size?: ButtonSize;
-    straightCorners?: boolean;
     disabled?: boolean;
     autofocus?: boolean;
     tabIndex?: number;
     className?: string;
-    fullWidth?: boolean;
     ariaLabel?: string;
+    fullWidth?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseUp?: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/Button/Button.js

@@ -1,105 +1,105 @@
-import { jsx as c, jsxs as j, Fragment as w } from "react/jsx-runtime";
-import b from "react";
-import { clsx as z } from "../../utils/clsx.js";
-import { noop as p } from "../../utils/functional.js";
-import { s as t } from "../../Button.module-Z6njvP9Z.js";
-function F(a) {
+import { jsx as i, jsxs as k, Fragment as B } from "react/jsx-runtime";
+import _ from "react";
+import { Icon as I } from "../Icon/Icon.js";
+import { clsx as M } from "../../utils/clsx.js";
+import { noop as h } from "../../utils/functional.js";
+import '../../assets/Button.css';const j = "_root_1a4gc_1", w = "_fullWidth_1a4gc_32", F = "_primary_1a4gc_52", R = "_secondary_1a4gc_73", v = "_icon_1a4gc_115", D = "_decorator_1a4gc_120", t = {
+  root: j,
+  fullWidth: w,
+  primary: F,
+  secondary: R,
+  "on-light": "_on-light_1a4gc_94",
+  icon: v,
+  decorator: D
+};
+function L(c) {
   const {
-    text: e = null,
-    icon: l = null,
-    decorator: o = null
-  } = a;
-  return /* @__PURE__ */ j(w, { children: [
-    !!l && /* @__PURE__ */ c("span", { className: t["icon-node"], children: l }),
-    e,
-    !!o && /* @__PURE__ */ c("div", { className: t.decorator, children: o })
+    text: o = null,
+    icon: e,
+    decorator: n = null
+  } = c;
+  return /* @__PURE__ */ k(B, { children: [
+    o,
+    !!e && /* @__PURE__ */ i(I, { name: e }),
+    !!n && /* @__PURE__ */ i("div", { className: t.decorator, children: n })
   ] });
 }
-function I(a) {
+function U(c) {
   const {
-    text: e = null,
-    icon: l = null,
-    theme: o = "default",
-    size: s = "normal",
-    disabled: f = !1,
-    straightCorners: d = !1,
-    className: r = "",
-    autofocus: u = !1,
-    fullWidth: i = !1,
-    tabIndex: n
-  } = a;
-  return z(t.root, t[o], t[s], r, {
-    [t.disabled]: f,
-    [t.icon]: !!l && (e === null || typeof e > "u"),
-    [t.text]: !!e,
-    [t.autofocus]: u || typeof n < "u",
-    [t["straight-borders"]]: d,
-    [t.fullWidth]: i
+    text: o = null,
+    icon: e,
+    theme: n = "default",
+    disabled: l = !1,
+    className: u = "",
+    autofocus: d = !1,
+    fullWidth: r = !1,
+    tabIndex: s
+  } = c;
+  return M(t.root, t[n], u, {
+    [t.disabled]: l,
+    [t.icon]: !!e && (o === null || typeof o > "u"),
+    [t.text]: !!o,
+    [t.autofocus]: d || typeof s < "u",
+    [t.fullWidth]: r
   });
 }
-const U = b.forwardRef(function(e, l) {
+const H = _.forwardRef(function(o, e) {
   const {
-    text: o = null,
-    icon: s = null,
-    title: f = "",
+    text: n = null,
+    icon: l,
+    title: u = "",
     type: d = "button",
     className: r = "",
-    theme: u = "default",
-    size: i = "normal",
-    disabled: n = !1,
-    straightCorners: x = !1,
-    onClick: C = p,
-    onMouseDown: g = p,
-    onMouseUp: k = p,
-    autofocus: m = !1,
-    fullWidth: N = !1,
-    tabIndex: h,
-    ariaLabel: B = ""
-  } = e, y = b.useMemo(() => I({
-    text: o,
-    icon: s,
-    theme: u,
-    size: i,
-    disabled: n,
-    straightCorners: x,
+    theme: s = "default",
+    disabled: a = !1,
+    onClick: p = h,
+    onMouseDown: b = h,
+    onMouseUp: x = h,
+    autofocus: f = !1,
+    tabIndex: m,
+    fullWidth: g = !1,
+    ariaLabel: y = ""
+  } = o, C = _.useMemo(() => U({
+    text: n,
+    icon: l,
+    theme: s,
+    disabled: a,
     className: r,
-    autofocus: m,
-    fullWidth: N,
-    tabIndex: h
+    autofocus: f,
+    fullWidth: g,
+    tabIndex: m
   }), [
-    m,
+    f,
     r,
+    g,
+    a,
+    l,
+    m,
     n,
-    N,
-    s,
-    i,
-    x,
-    h,
-    o,
-    u
-  ]), M = b.useCallback((W) => {
-    n || C(W);
-  }, [n, C]);
-  return /* @__PURE__ */ c(
+    s
+  ]), N = _.useCallback((W) => {
+    a || p(W);
+  }, [a, p]);
+  return /* @__PURE__ */ i(
     "button",
     {
-      ref: l,
-      disabled: n,
-      className: y,
-      onClick: M,
-      onMouseDown: g,
-      onMouseUp: k,
-      autoFocus: m,
-      tabIndex: h,
-      title: f,
+      ref: e,
+      disabled: a,
+      className: C,
+      onClick: N,
+      onMouseDown: b,
+      onMouseUp: x,
+      autoFocus: f,
+      tabIndex: m,
+      title: u,
       type: d,
-      "aria-label": B,
-      children: /* @__PURE__ */ c(F, { ...e })
+      "aria-label": y,
+      children: /* @__PURE__ */ i(L, { ...o })
     }
   );
 });
 export {
-  U as Button,
-  F as ButtonContent,
-  I as getButtonClassName
+  H as Button,
+  L as ButtonContent,
+  U as getButtonClassName
 };

package/dist/components/Button/ButtonBar.d.ts

@@ -1,5 +1,6 @@
-export interface ButtonBarProps {
-    children?: React.ReactNode;
+export interface ButtonBarProps extends React.PropsWithChildren {
     className?: string;
+    justify?: 'start' | 'center' | 'end';
+    align?: 'start' | 'center' | 'end';
 }
 export declare function ButtonBar(props: ButtonBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonBar.js

@@ -1,13 +1,31 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as s } from "../../utils/clsx.js";
-import { s as a } from "../../Button.module-Z6njvP9Z.js";
-function e(r) {
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as o } from "../../utils/clsx.js";
+import '../../assets/ButtonBar.css';const i = "_bar_4bu59_1", l = {
+  bar: i
+}, t = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+function u(e) {
   const {
-    children: o,
-    className: t
-  } = r;
-  return /* @__PURE__ */ m("div", { className: s(a.bar, t), children: o });
+    children: n,
+    className: r,
+    justify: s = "center",
+    align: a = "center"
+  } = e;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: o(l.bar, r),
+      style: {
+        justifyContent: t[s],
+        alignItems: t[a]
+      },
+      children: n
+    }
+  );
 }
 export {
-  e as ButtonBar
+  u as ButtonBar
 };

package/dist/components/Button/ButtonShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function ButtonShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ButtonShowcase>;
+export default _default;

package/dist/components/Button/ButtonShowcase.js

@@ -0,0 +1,89 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { Flex as i } from "../Layout/Flex/Flex.js";
+import { Text as n } from "../Text/Text.js";
+import { Button as r } from "./Button.js";
+import { ButtonBar as c } from "./ButtonBar.js";
+function o() {
+  return /* @__PURE__ */ t(i, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Default" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        r,
+        {
+          text: "Sign In",
+          theme: "default",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Primary" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        r,
+        {
+          text: "Sign In",
+          theme: "primary",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Secondary" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        r,
+        {
+          text: "Sign In",
+          theme: "secondary",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "On Light" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        r,
+        {
+          text: "Sign In",
+          theme: "on-light",
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "No Icon" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        r,
+        {
+          text: "Sign In",
+          theme: "default"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Full Width" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        r,
+        {
+          text: "Sign In",
+          theme: "default",
+          fullWidth: !0,
+          icon: "Users"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { 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" })
+      ] }) })
+    ] })
+  ] });
+}
+const g = l.memo(o);
+export {
+  g as default
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,6 @@
+export { Button, ButtonContent, getButtonClassName, } from './Button';
+export { ButtonBar } from './ButtonBar';
+export { LinkButton } from './LinkButton';
+export type { ButtonTheme, ButtonProps, } from './Button';
+export type { ButtonBarProps } from './ButtonBar';
+export type { LinkButtonProps } from './LinkButton';

package/dist/components/Button/index.js

@@ -0,0 +1,10 @@
+import { Button as n, ButtonContent as r, getButtonClassName as e } from "./Button.js";
+import { ButtonBar as u } from "./ButtonBar.js";
+import { LinkButton as a } from "./LinkButton.js";
+export {
+  n as Button,
+  u as ButtonBar,
+  r as ButtonContent,
+  a as LinkButton,
+  e as getButtonClassName
+};

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

@@ -1,12 +1,13 @@
 import { default as React } from 'react';
-
-export type CheckboxSize = 'normal' | 'large';
-export interface CheckboxProps {
-    value: boolean;
-    onChange: (value: boolean) => void;
+import { GetColorProps } from '../../utils/color';
+import * as CheckboxUi from '@radix-ui/react-checkbox';
+export type CheckboxSize = 'small' | 'normal' | 'large';
+export interface CheckboxProps extends CheckboxUi.CheckboxProps, GetColorProps {
+    id?: string;
     size?: CheckboxSize;
-    label?: React.ReactNode;
-    disabled?: boolean;
-    className?: string;
+    rootClassName?: string;
+    indicatorClassName?: string;
 }
-export declare const Checkbox: React.NamedExoticComponent<CheckboxProps>;
+declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Checkbox>;
+export default _default;