@cfx-dev/ui-components 4.2.20 → 4.2.22

package/dist/components/Accordion/Accordion.d.ts

@@ -1,21 +1,15 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
 
-export interface AccordionContextProps {
-    openItems: Record<string, boolean>;
-    toggleItem: (id: string) => void;
-    rootWidth: null | number;
-}
 export interface AccordionProps {
     className?: string;
 }
 export declare const Accordion: React.FC<React.PropsWithChildren<AccordionProps>>;
 export declare const AccordionItem: React.FC<React.PropsWithChildren>;
 export declare const AccordionHeader: React.FC<React.PropsWithChildren>;
-interface AccordionTriggerProps {
+export interface AccordionTriggerProps {
     text: string;
     iconLeft?: IconName;
 }
 export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
 export declare const AccordionContent: React.FC<React.PropsWithChildren>;
-export {};

package/dist/components/Accordion/Accordion.js

@@ -2,7 +2,7 @@ import { jsx as c, jsxs as v } from "react/jsx-runtime";
 import e from "react";
 import { Icon as A } from "../Icon/Icon.js";
 import { Text as b } from "../Text/Text.js";
-import { ui as I } from "../ui.js";
+import { ui as I } from "../../utils/ui/ui.js";
 import { clsx as w } from "../../utils/clsx.js";
 import { debounce as R } from "../../utils/execution.js";
 import { minmax as y } from "../../utils/math.js";

package/dist/components/Accordion/AccordionShowcase.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import h from "react";
 import { Flex as a } from "../Layout/Flex/Flex.js";
 import { Text as c } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Accordion as l, AccordionItem as o, AccordionHeader as i, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
 function s() {
   return /* @__PURE__ */ e(a, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [

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

@@ -1 +1,2 @@
 export { Accordion, AccordionTrigger, AccordionHeader, AccordionItem, AccordionContent, } from './Accordion';
+export type { AccordionTriggerProps, AccordionProps } from './Accordion';

package/dist/components/Avatar/AvatarShowcase.js

@@ -2,7 +2,7 @@ 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 "../ui.js";
+import "../../utils/ui/ui.js";
 import { Avatar as i } from "./Avatar.js";
 function u() {
   return /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [

package/dist/components/BackdropPortal/BackdropPortal.d.ts

@@ -5,3 +5,5 @@ export interface BackdropPortalProps {
     children?: React.ReactNode;
 }
 export declare function BackdropPortal({ children, }: BackdropPortalProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BackdropPortal>;
+export default _default;

package/dist/components/BackdropPortal/BackdropPortal.js

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

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

@@ -0,0 +1,2 @@
+export { default as BackdropPortal, BACKDROP_OUTLET_ID } from './BackdropPortal';
+export type { BackdropPortalProps } from './BackdropPortal';

package/dist/components/BackdropPortal/index.js

@@ -0,0 +1,5 @@
+import { BACKDROP_OUTLET_ID as r, default as t } from "./BackdropPortal.js";
+export {
+  r as BACKDROP_OUTLET_ID,
+  t as BackdropPortal
+};

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

@@ -1,10 +1,17 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
+import { ColorType } from '../../utils/ui';
 
-export type BadgeColor = 'success' | 'neutral' | 'warning' | 'error';
+export declare enum BadgeColorEnum {
+    success = "success",
+    neutral = "neutral",
+    warning = "warning",
+    error = "error"
+}
+export type BadgeColor = keyof typeof BadgeColorEnum;
 export type BadgeSize = 'small' | 'normal';
 export interface BadgeProps {
-    color?: BadgeColor;
+    color?: BadgeColor | ColorType;
     size?: BadgeSize;
     icon?: IconName;
     children?: React.ReactNode;

package/dist/components/Badge/Badge.js

@@ -1,30 +1,57 @@
-import { jsxs as i, jsx as f } from "react/jsx-runtime";
-import m from "react";
-import { Icon as u } from "../Icon/Icon.js";
-import { clsx as d } from "../../utils/clsx.js";
-const x = "cfxui__Badge__root__73dcc", g = "cfxui__Badge__success__b5ae3", B = "cfxui__Badge__hoverable__4b089", b = "cfxui__Badge__neutral__6ac4e", h = "cfxui__Badge__warning__72699", v = "cfxui__Badge__error__7e5f9", p = "cfxui__Badge__small__a1a55", w = "cfxui__Badge__icon__4e25f", o = {
-  root: x,
-  success: g,
-  hoverable: B,
-  neutral: b,
-  warning: h,
-  error: v,
-  small: p,
-  icon: w
-}, I = m.forwardRef(function(e, c) {
+import { jsxs as x, jsx as b } from "react/jsx-runtime";
+import p from "react";
+import { Icon as v } from "../Icon/Icon.js";
+import { clsx as h } from "../../utils/clsx.js";
+import { getColor as c } from "../../utils/color.js";
+import { isInEnum as a } from "../../utils/enum.js";
+import "../../utils/ui/ui.js";
+import { ColorEnum as B } from "../../utils/ui/ui.types.js";
+const w = "cfxui__Badge__root__73dcc", N = "cfxui__Badge__hoverable__4b089", y = "cfxui__Badge__success__b5ae3", j = "cfxui__Badge__neutral__6ac4e", z = "cfxui__Badge__warning__72699", I = "cfxui__Badge__error__7e5f9", R = "cfxui__Badge__small__a1a55", C = "cfxui__Badge__icon__4e25f", e = {
+  root: w,
+  hoverable: N,
+  success: y,
+  neutral: j,
+  warning: z,
+  error: I,
+  small: R,
+  icon: C
+};
+var _ = /* @__PURE__ */ ((o) => (o.success = "success", o.neutral = "neutral", o.warning = "warning", o.error = "error", o))(_ || {});
+const K = p.forwardRef(function(n, t) {
   const {
-    color: s = "success",
-    size: a = "normal",
-    children: r,
-    icon: _,
-    className: n,
-    hoverable: t = !1
-  } = e, l = d(o.root, n, o[s], o[a], { [o.hoverable]: t });
-  return /* @__PURE__ */ i("div", { ref: c, className: l, children: [
-    r,
-    !!_ && /* @__PURE__ */ f(u, { size: "xxsmall", name: _, className: o.icon })
+    color: r = "success",
+    size: i = "normal",
+    children: l,
+    icon: s,
+    className: m,
+    hoverable: f = !1
+  } = n, u = a(r, _) ? e[r] : void 0, g = a(r, B) ? {
+    "--badge-color": c({
+      color: r
+    }),
+    "--badge-bg-color": c({
+      color: r,
+      opacity: 0.2
+    }),
+    "--badge-bg-hover-color": c({
+      color: r,
+      opacity: 0.4
+    })
+  } : {}, d = h(
+    e.root,
+    m,
+    u,
+    e[i],
+    {
+      [e.hoverable]: f
+    }
+  );
+  return /* @__PURE__ */ x("div", { ref: t, className: d, style: g, children: [
+    l,
+    !!s && /* @__PURE__ */ b(v, { size: "xxsmall", name: s, className: e.icon })
   ] });
 });
 export {
-  I as Badge
+  K as Badge,
+  _ as BadgeColorEnum
 };

package/dist/components/Badge/BadgeShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import o from "react";
 import { Flex as l } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Badge as c } from "./Badge.js";
 function n() {
   return /* @__PURE__ */ e(l, { gap: "large", vertical: !0, children: [

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

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

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -4,7 +4,7 @@ import { Icon as k } from "../Icon/Icon.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as w } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { clsx as h } from "../../utils/clsx.js";
 import { s as l } from "../../BurgerMenu.module-CyY93Y4u.js";
 function K({

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a, { useState as s, useCallback as u } from "react";
 import { Flex as t } from "../Layout/Flex/Flex.js";
 import { Text as m } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { BurgerMenu as c } from "./BurgerMenu.js";
 import { BurgerMenuButton as g } from "./BurgerMenuButton.js";
 const d = [

package/dist/components/Button/ButtonShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Button as r } from "./Button.js";
 import { ButtonBar as o } from "./ButtonBar.js";
 import { LinkButton as c } from "./LinkButton.js";

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

@@ -2,7 +2,7 @@ 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 interface CheckboxProps extends CheckboxUi.CheckboxProps, GetColorProps {
+export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>, GetColorProps {
     id?: string;
     size?: CheckboxSize;
     rootClassName?: string;

package/dist/components/ClipboardButton/ClipboardButton.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { ButtonProps } from '../Button/Button';
-import { FixedOn } from '../Title/Title';
+import { ButtonProps } from '../Button';
+import { TitleFixedOn } from '../Title';
 import { UseClipboardProps } from '../../utils/hooks';
 
 export type ClipboardButtonProps = ButtonProps & UseClipboardProps & {
-    fixedOn?: FixedOn;
+    fixedOn?: TitleFixedOn;
 };
 declare const _default: React.NamedExoticComponent<ClipboardButtonProps>;
 export default _default;

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -1,8 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import c from "react";
 import { Button as C } from "../Button/Button.js";
-import { Title as _ } from "../Title/Title.js";
-import { clsx as f } from "../../utils/clsx.js";
+import { clsx as _ } from "../../utils/clsx.js";
+import "../Button/LinkButton.js";
+import { Title as f } from "../Title/Title.js";
 import { noop as u } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
@@ -19,25 +20,25 @@ function h(o) {
     textToCopy: j,
     fixedOn: n,
     onClick: t = u,
-    ...l
+    ...p
   } = o, {
-    copied: p,
+    copied: l,
     handleClick: i,
     title: m
   } = b(o), d = c.useCallback((s) => {
     t(s), i();
-  }, [i, t]), a = f(e.root, { [e.copied]: p });
+  }, [i, t]), a = _(e.root, { [e.copied]: l });
   return /* @__PURE__ */ r(
-    _,
+    f,
     {
       title: m,
       fixedOn: n,
       rootClassName: a,
-      children: /* @__PURE__ */ r(C, { ...l, onClick: d })
+      children: /* @__PURE__ */ r(C, { ...p, onClick: d })
     }
   );
 }
-const z = c.memo(h);
+const A = c.memo(h);
 export {
-  z as default
+  A as default
 };

package/dist/components/ControlBox/ControlBox.d.ts

@@ -7,3 +7,5 @@ export interface ControlBoxProps {
     children: React.ReactNode;
 }
 export declare const ControlBox: React.ForwardRefExoticComponent<ControlBoxProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ControlBoxProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/components/ControlBox/ControlBox.js

@@ -1,19 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import c from "react";
+import { jsx as c } from "react/jsx-runtime";
+import r from "react";
 import { clsx as m } from "../../utils/clsx.js";
 const e = "cfxui__ControlBox__root__6a08c", x = "cfxui__ControlBox__small__8beb2", f = "cfxui__ControlBox__normal__e3aa5", i = "cfxui__ControlBox__large__1039d", o = {
   root: e,
   small: x,
   normal: f,
   large: i
-}, p = c.forwardRef(function(r, t) {
+}, u = r.forwardRef(function(t, l) {
   const {
     size: _ = "normal",
-    className: l,
-    children: a
-  } = r, n = m(o.root, l, o[_]);
-  return /* @__PURE__ */ s("div", { ref: t, className: n, children: a });
-});
+    className: a,
+    children: n
+  } = t, s = m(o.root, a, o[_]);
+  return /* @__PURE__ */ c("div", { ref: l, className: s, children: n });
+}), g = r.memo(u);
 export {
-  p as ControlBox
+  u as ControlBox,
+  g as default
 };

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

@@ -0,0 +1,2 @@
+export { default as ControlBox } from './ControlBox';
+export type { ControlBoxProps } from './ControlBox';

package/dist/components/ControlBox/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./ControlBox.js";
+export {
+  t as ControlBox
+};

package/dist/components/CountryFlag/CountryFlag.d.ts

@@ -7,3 +7,5 @@ export interface CountryFlagProps {
     forceShow?: boolean;
 }
 export declare const CountryFlag: React.ForwardRefExoticComponent<CountryFlagProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CountryFlagProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/components/CountryFlag/CountryFlag.js

@@ -1,21 +1,22 @@
 import { jsx as t } from "react/jsx-runtime";
-import l from "react";
+import r from "react";
 import { Title as f } from "../Title/Title.js";
-import { clsx as i } from "../../utils/clsx.js";
-const m = "cfxui__CountryFlag__root__95489", u = {
-  root: m
-}, y = l.forwardRef(function(r, e) {
+import { clsx as m } from "../../utils/clsx.js";
+const i = "cfxui__CountryFlag__root__95489", u = {
+  root: i
+}, _ = r.forwardRef(function(a, e) {
   const {
     country: o,
     className: s,
-    title: a,
-    forceShow: n = !1
-  } = r;
-  if (!n && (o === "001" || o === "AQ" || o === "aq"))
+    title: n,
+    forceShow: l = !1
+  } = a;
+  if (!l && (o === "001" || o === "AQ" || o === "aq"))
     return null;
-  const c = i(u.root, s, `fi-${o.toLowerCase()}`);
-  return /* @__PURE__ */ t(f, { title: a, children: /* @__PURE__ */ t("div", { ref: e, className: c }) });
-});
+  const c = m(u.root, s, `fi-${o.toLowerCase()}`);
+  return /* @__PURE__ */ t(f, { title: n, children: /* @__PURE__ */ t("div", { ref: e, className: c }) });
+}), x = r.memo(_);
 export {
-  y as CountryFlag
+  _ as CountryFlag,
+  x as default
 };

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

@@ -0,0 +1,2 @@
+export { default as CountryFlag } from './CountryFlag';
+export type { CountryFlagProps } from './CountryFlag';

package/dist/components/CountryFlag/index.js

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

package/dist/components/Decorate/Decorate.d.ts

@@ -7,3 +7,5 @@ export interface DecorateProps {
     decoratorClassName?: string;
 }
 export declare const Decorate: React.ForwardRefExoticComponent<DecorateProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DecorateProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/components/Decorate/Decorate.js

@@ -1,20 +1,21 @@
-import { jsxs as n, jsx as m } from "react/jsx-runtime";
-import f from "react";
+import { jsxs as _, jsx as f } from "react/jsx-runtime";
+import a from "react";
 import { clsx as t } from "../../utils/clsx.js";
-const i = "cfxui__Decorate__root__8f2af", l = "cfxui__Decorate__decorator__db06a", c = {
-  root: i,
-  decorator: l
-}, h = f.forwardRef(function(o, e) {
+const l = "cfxui__Decorate__root__8f2af", i = "cfxui__Decorate__decorator__db06a", e = {
+  root: l,
+  decorator: i
+}, u = a.forwardRef(function(o, c) {
   const {
     decorator: r,
-    children: a,
-    className: s
-  } = o, d = t(c.root, s), _ = t(c.decorator, o.decoratorClassName);
-  return /* @__PURE__ */ n("div", { ref: e, className: d, children: [
-    a,
-    !!r && /* @__PURE__ */ m("div", { className: _, children: r })
+    children: s,
+    className: d
+  } = o, m = t(e.root, d), n = t(e.decorator, o.decoratorClassName);
+  return /* @__PURE__ */ _("div", { ref: c, className: m, children: [
+    s,
+    !!r && /* @__PURE__ */ f("div", { className: n, children: r })
   ] });
-});
+}), C = a.memo(u);
 export {
-  h as Decorate
+  u as Decorate,
+  C as default
 };

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

@@ -0,0 +1,2 @@
+export { default as Decorate } from './Decorate';
+export type { DecorateProps } from './Decorate';

package/dist/components/Decorate/index.js

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

package/dist/components/DropdownSelect/DropdownSelect.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { IconSize } from '../Icon';
 import { InputSize } from '../Input';
 import { SelectOption } from '../Select';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export declare const ICON_SIZE_MAP: Record<InputSize, IconSize>;
 export interface DropdownSelectProps<T = string> {