@cfx-dev/ui-components 4.5.22 → 5.0.2

package/dist/components/Title/TitleShowcase.js

@@ -1,23 +1,103 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import i from "react";
-import r from "../Flex/Flex.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import n from "react";
+import t from "../Flex/Flex.js";
+import { Icon as r } from "../Icon/Icon.js";
 import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { Title as l } from "./Title.js";
-function m() {
-  return /* @__PURE__ */ e(r, { gap: "large", vertical: !0, children: /* @__PURE__ */ t(r, { gap: "normal", vertical: !0, children: [
-    /* @__PURE__ */ e(o, { children: "Hover case" }),
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      l,
-      {
-        title: "This is a title",
-        fixedOn: "bottom",
-        children: /* @__PURE__ */ e("span", { style: { marginTop: "100px" }, children: "Hover me" })
-      }
-    ) })
-  ] }) });
+function d() {
+  return /* @__PURE__ */ i(t, { gap: "xxxlarge", vertical: !0, children: [
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Icon" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This can be used for tooltips",
+          fixedOn: "top",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Top" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the top",
+          fixedOn: "top",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Bottom" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the bottom",
+          fixedOn: "bottom",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Left" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the left",
+          fixedOn: "left",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Right" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the right",
+          fixedOn: "right",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Top-left" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the top-left",
+          fixedOn: "top-left",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Bottom-left" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the bottom-left",
+          fixedOn: "bottom-left",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Bottom-right" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        l,
+        {
+          title: "This should be on the bottom-right",
+          fixedOn: "bottom-right",
+          children: /* @__PURE__ */ e(r, { name: "MoreInfo" })
+        }
+      ) })
+    ] })
+  ] });
 }
-const f = i.memo(m);
+const s = n.memo(d);
 export {
-  f as default
+  s as default
 };

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 
 export declare enum ToggleGroupSizeEnum {
-    normal = "normal",
+    small = "small",
     large = "large"
 }
 export type ToggleGroupSizeType = keyof typeof ToggleGroupSizeEnum;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as d } from "react/jsx-runtime";
 import p from "react";
 import { clsx as g } from "../../utils/clsx.js";
-const x = "cfxui__ToggleGroup__unsetAll__6911e", h = "cfxui__ToggleGroup__root__fb460", v = "cfxui__ToggleGroup__disabled__75462", G = "cfxui__ToggleGroup__fullWidth__0c589", T = "cfxui__ToggleGroup__large__ad624", C = "cfxui__ToggleGroup__options__7bc0c", W = "cfxui__ToggleGroup__option__8436c", k = "cfxui__ToggleGroup__active__84da0", N = "cfxui__ToggleGroup__multiline__6b784", o = {
+const x = "cfxui__ToggleGroup__unsetAll__6911e", h = "cfxui__ToggleGroup__root__fb460", v = "cfxui__ToggleGroup__disabled__75462", G = "cfxui__ToggleGroup__fullWidth__0c589", T = "cfxui__ToggleGroup__large__ad624", C = "cfxui__ToggleGroup__options__7bc0c", W = "cfxui__ToggleGroup__option__8436c", k = "cfxui__ToggleGroup__active__84da0", N = "cfxui__ToggleGroup__multiline__6b784", l = {
   unsetAll: x,
   root: h,
   disabled: v,
@@ -12,52 +12,52 @@ const x = "cfxui__ToggleGroup__unsetAll__6911e", h = "cfxui__ToggleGroup__root__
   active: k,
   multiline: N
 };
-var A = /* @__PURE__ */ ((t) => (t.normal = "normal", t.large = "large", t))(A || {});
-const y = p.memo(function(s) {
+var A = /* @__PURE__ */ ((t) => (t.small = "small", t.large = "large", t))(A || {});
+const y = p.memo(function(_) {
   const {
     option: e,
     onClick: i,
     active: c = !1,
     disabled: n = !1
-  } = s, {
-    value: l,
+  } = _, {
+    value: o,
     label: a,
-    icon: _
+    icon: s
   } = e, u = p.useCallback(() => {
-    i(l);
-  }, [i, l]);
+    i(o);
+  }, [i, o]);
   return /* @__PURE__ */ m(
     "button",
     {
       type: "button",
-      className: g(o.unsetAll, o.option, {
-        [o.active]: c
+      className: g(l.unsetAll, l.option, {
+        [l.active]: c
       }),
       tabIndex: n ? 0 : 1,
       onClick: u,
       disabled: n,
       children: [
-        _ || null,
+        s || null,
         a
       ]
     },
-    l
+    o
   );
-}), I = p.memo(function(s) {
+}), I = p.memo(function(_) {
   const {
     value: e,
     options: i,
     onChange: c,
     className: n = "",
-    disabled: l = !1,
+    disabled: o = !1,
     multiline: a = !1,
-    fullWidth: _ = !1,
-    size: u = "normal",
+    fullWidth: s = !1,
+    size: u = "small",
     name: f
-  } = s, b = g(o.root, o[u], n, {
-    [o.disabled]: l,
-    [o.multiline]: a,
-    [o.fullWidth]: _
+  } = _, b = g(l.root, l[u], n, {
+    [l.disabled]: o,
+    [l.multiline]: a,
+    [l.fullWidth]: s
   });
   return /* @__PURE__ */ m("div", { className: b, children: [
     f && /* @__PURE__ */ d(
@@ -68,13 +68,13 @@ const y = p.memo(function(s) {
         value: e
       }
     ),
-    /* @__PURE__ */ d("div", { className: g(o.options, { [o.fullWidth]: _ }), children: i.map((r) => /* @__PURE__ */ d(
+    /* @__PURE__ */ d("div", { className: g(l.options, { [l.fullWidth]: s }), children: i.map((r) => /* @__PURE__ */ d(
       y,
       {
         option: r,
         onClick: c,
         active: r.value === e,
-        disabled: l
+        disabled: o
       },
       r.value
     )) })

package/dist/components/ToggleGroup/ToggleGroupShowcase.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import u from "react";
-import r from "../Flex/Flex.js";
-import { Text as o } from "../Text/Text.js";
+import a from "react";
+import i from "../Flex/Flex.js";
+import { Text as n } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { ToggleGroup as n } from "./ToggleGroup.js";
-const a = [
+import { ToggleGroup as o } from "./ToggleGroup.js";
+const d = [
   {
     value: "weekly",
     label: "Weekly"
@@ -13,85 +13,121 @@ const a = [
     value: "monthly",
     label: "Monthly"
   }
+], u = [
+  {
+    value: "weekly",
+    label: "Weekly"
+  },
+  {
+    value: "monthly",
+    label: "Monthly"
+  },
+  {
+    value: "yearly",
+    label: "Yearly"
+  }
 ];
-function d() {
-  const [i, t] = u.useState("weekly");
-  return /* @__PURE__ */ l(r, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(o, { children: "Default ToggleGroup" }),
+function h() {
+  const [r, t] = a.useState("weekly");
+  return /* @__PURE__ */ l(i, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Default ToggleGroup" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        n,
+        o,
         {
-          value: i,
+          value: r,
           onChange: t,
-          options: a
+          options: d
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(o, { children: "Full Width ToggleGroup" }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Full Width ToggleGroup" }),
       /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
-        n,
+        o,
         {
-          value: i,
+          value: r,
           onChange: t,
-          options: a,
+          options: d,
           fullWidth: !0
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(o, { children: "Disabled ToggleGroup" }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Disabled ToggleGroup" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        n,
+        o,
         {
-          value: i,
+          value: r,
           onChange: t,
-          options: a,
+          options: d,
           disabled: !0
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(o, { children: "Multiline ToggleGroup" }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Multiline ToggleGroup" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        n,
+        o,
         {
-          value: i,
+          value: r,
           onChange: t,
-          options: a,
+          options: d,
           multiline: !0
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(o, { children: "Multiline Full Width ToggleGroup" }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Multiline Full Width ToggleGroup" }),
       /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
-        n,
+        o,
         {
-          value: i,
+          value: r,
           onChange: t,
-          options: a,
+          options: d,
           multiline: !0,
           fullWidth: !0
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(o, { children: "ToggleGroup Size Large" }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "ToggleGroup Size Large" }),
       /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
-        n,
+        o,
         {
-          value: i,
+          value: r,
           onChange: t,
-          options: a,
+          options: d,
           size: "large"
         }
       ) })
+    ] }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "3 Items" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        o,
+        {
+          value: r,
+          onChange: t,
+          options: u
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "3 Items Full width" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        o,
+        {
+          value: r,
+          onChange: t,
+          options: u,
+          fullWidth: !0
+        }
+      ) })
     ] })
   ] });
 }
-const v = u.memo(d);
+const y = a.memo(h);
 export {
-  v as default
+  y as default
 };

package/dist/main.d.ts

@@ -15,8 +15,8 @@ export { debounce, throttle, } from './utils/execution';
 export type { SetTimeoutReturn } from './utils/execution';
 export { getColor } from './utils/color';
 export type { GetColorProps } from './utils/color';
-export { ui, OffsetEnum, MediaQueryEnum, MediaQueryValuesMap, BorderRadiusEnum, ZIndexEnum, ColorEnum, } from './utils/ui';
-export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, OpacityRange, } from './utils/ui';
+export { ui, OffsetEnum, MediaQueryEnum, MediaQueryValuesMap, BorderRadiusEnum, ZIndexEnum, ColorEnum, SpacerEnum, SpacingEnum, } from './utils/ui';
+export type { SpacerType, SpacingType, OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveSizeUnitType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, OpacityRange, } from './utils/ui';
 export { isInEnum } from './utils/enum';
 export { joaat32 } from './utils/joaat32';
 export { IconButton } from './components/IconButton';
@@ -51,12 +51,11 @@ export { Flyout, FLYOUT_OUTLET_ID, FLYOUT_ROOT_ID, FLYOUT_ROOT_SHRINK_CLASSNAME,
 export type { FlyoutSize, FlyoutProps } from './components/Flyout';
 export { Logos } from './components/Logos';
 export type { LogoNames } from './components/Logos';
-export { Icons, IconsBig } from './components/Icons';
-export type { IconName, IconBigName } from './components/Icons';
+export { Icons } from './components/Icons';
+export { IconsXLarge } from './components/Icons';
+export type { IconName } from './components/Icons';
 export { Icon } from './components/Icon';
 export type { IconProps, IconSize } from './components/Icon';
-export { IconBig } from './components/IconBig';
-export type { IconBigProps, IconBigSize } from './components/IconBig';
 export { Indicator } from './components/Indicator';
 export type { IndicatorProps } from './components/Indicator';
 export { InfoPanel } from './components/InfoPanel';