@cfx-dev/ui-components 4.3.5 → 4.3.7

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

@@ -1,18 +1,30 @@
 import { default as React } from 'react';
 
-export interface ToggleGroupOption {
+export declare enum ToggleGroupSizeEnum {
+    normal = "normal",
+    large = "large"
+}
+export type ToggleGroupSizeType = keyof typeof ToggleGroupSizeEnum;
+export interface ToggleGroupOptionType {
     value: string;
     label: React.ReactNode;
     icon?: React.ReactNode;
-    description?: string;
 }
+export interface ToggleGroupOptionProps {
+    option: ToggleGroupOptionType;
+    onClick: (value: string) => void;
+    active?: boolean;
+    disabled?: boolean;
+}
+export declare const ToggleGroupOption: React.NamedExoticComponent<ToggleGroupOptionProps>;
 export interface ToggleGroupProps {
     value: string;
-    options: ToggleGroupOption[];
-    onChange: <T extends string>(value: T) => void;
+    options: ToggleGroupOptionType[];
+    onChange: (value: string) => void;
     className?: string;
     disabled?: boolean;
     multiline?: boolean;
     fullWidth?: boolean;
+    size?: ToggleGroupSizeType;
 }
 export declare const ToggleGroup: React.NamedExoticComponent<ToggleGroupProps>;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,68 +1,77 @@
-import { jsxs as d, jsx as p } from "react/jsx-runtime";
-import n from "react";
-import { Interactive as C } from "../Interactive/Interactive.js";
-import { clsx as _ } from "../../utils/clsx.js";
-const M = "cfxui__ToggleGroup__root__fb460", D = "cfxui__ToggleGroup__disabled__75462", j = "cfxui__ToggleGroup__descripted__8e168", k = "cfxui__ToggleGroup__fullWidth__0c589", E = "cfxui__ToggleGroup__description__9429c", L = "cfxui__ToggleGroup__options__7bc0c", O = "cfxui__ToggleGroup__option__8436c", S = "cfxui__ToggleGroup__active__84da0", w = "cfxui__ToggleGroup__multiline__6b784", o = {
-  root: M,
-  disabled: D,
-  descripted: j,
-  fullWidth: k,
-  description: E,
-  options: L,
-  option: O,
-  active: S,
-  multiline: w
-}, f = (r, s) => {
-  var e;
-  return ((e = s.find((i) => i.value === r)) == null ? void 0 : e.description) || "";
-}, z = n.memo(function(s) {
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+import g from "react";
+import { clsx as f } from "../../utils/clsx.js";
+const b = "cfxui__ToggleGroup__unsetAll__6911e", x = "cfxui__ToggleGroup__root__fb460", v = "cfxui__ToggleGroup__disabled__75462", h = "cfxui__ToggleGroup__fullWidth__0c589", G = "cfxui__ToggleGroup__large__ad624", T = "cfxui__ToggleGroup__options__7bc0c", C = "cfxui__ToggleGroup__option__8436c", W = "cfxui__ToggleGroup__active__84da0", k = "cfxui__ToggleGroup__multiline__6b784", o = {
+  unsetAll: b,
+  root: x,
+  disabled: v,
+  fullWidth: h,
+  large: G,
+  options: T,
+  option: C,
+  active: W,
+  multiline: k
+};
+var N = /* @__PURE__ */ ((t) => (t.normal = "normal", t.large = "large", t))(N || {});
+const A = g.memo(function(_) {
+  const {
+    option: s,
+    onClick: e,
+    active: c = !1,
+    disabled: i = !1
+  } = _, {
+    value: l,
+    label: a,
+    icon: n
+  } = s, u = g.useCallback(() => {
+    e(l);
+  }, [e, l]);
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      className: f(o.unsetAll, o.option, {
+        [o.active]: c
+      }),
+      tabIndex: i ? 0 : 1,
+      onClick: u,
+      disabled: i,
+      children: [
+        n || null,
+        a
+      ]
+    },
+    l
+  );
+}), w = g.memo(function(_) {
   const {
-    value: e,
-    options: i,
-    onChange: u,
-    className: m = "",
-    disabled: g = !1,
-    multiline: h = !1,
-    fullWidth: a = !1
-  } = s, [c, l] = n.useState(f(e, i)), v = n.useMemo(
-    () => i.map((t, G) => {
-      const T = () => {
-        u(t.value);
-      }, b = () => {
-        l(t.description || "");
-      }, N = () => {
-        l(f(e, i));
-      }, W = _(o.option, {
-        [o.active]: t.value === e
-      });
-      return /* @__PURE__ */ d(
-        C,
-        {
-          className: W,
-          tabIndex: G,
-          onClick: T,
-          onMouseEnter: b,
-          onMouseLeave: N,
-          children: [
-            t.icon || null,
-            t.label
-          ]
-        },
-        t.value
-      );
-    }),
-    [e, i, u, l]
-  ), x = _(o.root, m, {
-    [o.disabled]: g,
-    [o.descripted]: c,
-    [o.multiline]: h,
-    [o.fullWidth]: a
+    value: s,
+    options: e,
+    onChange: c,
+    className: i = "",
+    disabled: l = !1,
+    multiline: a = !1,
+    fullWidth: n = !1,
+    size: u = "normal"
+    /* normal */
+  } = _, p = f(o.root, o[u], i, {
+    [o.disabled]: l,
+    [o.multiline]: a,
+    [o.fullWidth]: n
   });
-  return /* @__PURE__ */ d("div", { className: x, children: [
-    /* @__PURE__ */ p("div", { className: _(o.options, { [o.fullWidth]: a }), children: v }),
-    c && /* @__PURE__ */ p("div", { className: o.description, children: c })
-  ] });
+  return /* @__PURE__ */ d("div", { className: p, children: /* @__PURE__ */ d("div", { className: f(o.options, { [o.fullWidth]: n }), children: e.map((r) => /* @__PURE__ */ d(
+    A,
+    {
+      option: r,
+      onClick: c,
+      active: r.value === s,
+      disabled: l
+    },
+    r.value
+  )) }) });
 });
 export {
-  z as ToggleGroup
+  w as ToggleGroup,
+  A as ToggleGroupOption,
+  N as ToggleGroupSizeEnum
 };

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 a } from "../Text/Text.js";
+import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { ToggleGroup as i } from "./ToggleGroup.js";
-const n = [
+import { ToggleGroup as n } from "./ToggleGroup.js";
+const a = [
   {
     value: "weekly",
     label: "Weekly"
@@ -14,47 +14,84 @@ const n = [
     label: "Monthly"
   }
 ];
-function c() {
-  const [o, t] = u.useState("weekly");
+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(a, { children: "Default ToggleGroup" }),
+      /* @__PURE__ */ e(o, { children: "Default ToggleGroup" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        i,
+        n,
         {
-          value: o,
+          value: i,
           onChange: t,
-          options: n
+          options: a
         }
       ) })
     ] }),
     /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Full Width ToggleGroup" }),
+      /* @__PURE__ */ e(o, { children: "Full Width ToggleGroup" }),
       /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
-        i,
+        n,
         {
-          value: o,
+          value: i,
           onChange: t,
-          options: n,
+          options: a,
           fullWidth: !0
         }
       ) })
     ] }),
     /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Disabled ToggleGroup" }),
+      /* @__PURE__ */ e(o, { children: "Disabled ToggleGroup" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        i,
+        n,
         {
-          value: o,
+          value: i,
           onChange: t,
-          options: n,
+          options: a,
           disabled: !0
         }
       ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Multiline ToggleGroup" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        n,
+        {
+          value: i,
+          onChange: t,
+          options: a,
+          multiline: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "Multiline Full Width ToggleGroup" }),
+      /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
+        n,
+        {
+          value: i,
+          onChange: t,
+          options: a,
+          multiline: !0,
+          fullWidth: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(o, { children: "ToggleGroup Size Large" }),
+      /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
+        n,
+        {
+          value: i,
+          onChange: t,
+          options: a,
+          size: "large"
+        }
+      ) })
     ] })
   ] });
 }
-const f = u.memo(c);
+const v = u.memo(d);
 export {
-  f as default
+  v as default
 };

package/dist/main.d.ts

@@ -4,7 +4,7 @@ export { getValue } from './utils/getValue';
 export type { ValueOrGetter } from './utils/getValue';
 export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, usePopoverController, useClipboardComponent, CLIPBOARD_TITLE_APPEARANCE, } from './utils/hooks';
 export type { OutletPosition, UseClipboardProps, } from './utils/hooks';
-export { formatDate } from './utils/formatDate';
+export { formatDate, formatLocaleDate, formatShortDate, } from './utils/formatDate';
 export { formatCurrency, FREE_PRICE_TEXT, CURRENCY_MAP, } from './utils/formatCurrency';
 export { noop, returnTrue, returnFalse, identity, invoke, } from './utils/functional';
 export { isExternalUrl, matchLinks, matchLinkNodes, defaultLinkReplacerx, defaultLinkReplacer, linkifyx, linkify, Linkify, } from './utils/links';