@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/components/DropdownSelect/DropdownSelectShowcase.js

@@ -1,10 +1,10 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import r from "react";
-import t from "../Flex/Flex.js";
+import l from "../Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { DropdownSelect as a } from "./DropdownSelect.js";
-const n = [
+const u = [
   {
     value: "value_all",
     label: "all"
@@ -19,29 +19,28 @@ const n = [
   }
 ];
 function d() {
-  const [c, i] = r.useState(void 0), [u, s] = r.useState(void 0);
-  return /* @__PURE__ */ l(t, { gap: "large", vertical: !0, pb: 20, children: [
-    /* @__PURE__ */ l(t, { gap: "normal", vertical: !0, children: [
+  const [c, i] = r.useState(void 0), [n, s] = r.useState(void 0);
+  return /* @__PURE__ */ t(l, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ t(l, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(o, { children: "Default Select Input" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         a,
         {
-          options: n,
+          options: u,
           onChange: i,
           value: c,
           name: "DropdownSelect"
         }
       ) })
     ] }),
-    /* @__PURE__ */ l(t, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(l, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(o, { children: "Full Width Select Input" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         a,
         {
-          size: "large",
-          options: n,
+          options: u,
           fullWidth: !0,
-          value: u,
+          value: n,
           onChange: s
         }
       ) })

package/dist/components/Flyout/Flyout.d.ts

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 export declare const FLYOUT_OUTLET_ID = "flyout-outlet";
 export declare const FLYOUT_ROOT_ID = "cfxui-root";
 export declare const FLYOUT_ROOT_SHRINK_CLASSNAME = "shrink";
-export type FlyoutSize = 'normal' | 'small' | 'xsmall' | 'xxsmall';
+export type FlyoutSize = 'medium' | 'small' | 'xsmall' | 'xxsmall';
 export type FlyoutTheme = 'default' | 'legacy';
 export interface FlyoutProps extends React.PropsWithChildren {
     disabled?: boolean;

package/dist/components/Flyout/Flyout.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as m } from "react/jsx-runtime";
 import y from "react";
 import { F as x } from "../../Combination-N-vN9BB-.js";
 import F from "../Button/Button.js";
-import { clsx as s } from "../../utils/clsx.js";
+import { clsx as c } from "../../utils/clsx.js";
 import "../../utils/links.js";
 import { Interactive as k } from "../Interactive/Interactive.js";
 import { noop as b } from "../../utils/functional.js";
@@ -22,7 +22,7 @@ const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O
   "holder-appearance-btu": "cfxui__Flyout__holder-appearance-btu__84100",
   "holder-appearance-rtl": "cfxui__Flyout__holder-appearance-rtl__3ccf2",
   "theme-legacy": "cfxui__Flyout__theme-legacy__a3452",
-  "size-normal": "cfxui__Flyout__size-normal__e1165",
+  "size-medium": "cfxui__Flyout__size-medium__1fc09",
   "size-small": "cfxui__Flyout__size-small__038a5",
   "size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
   "size-xxsmall": "cfxui__Flyout__size-xxsmall__33712",
@@ -31,8 +31,8 @@ const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O
 function S(i) {
   const {
     disabled: t = !1,
-    size: a = "normal",
-    theme: c = "default",
+    size: a = "medium",
+    theme: s = "default",
     onClose: l = b,
     children: r,
     holderClassName: u,
@@ -45,10 +45,10 @@ function S(i) {
     const _ = document.getElementById(H);
     return _ == null || _.classList.add(n), () => _ == null ? void 0 : _.classList.remove(n);
   }, [t]), N(l);
-  const h = s(
+  const h = c(
     e.root,
     e[`size-${a}`],
-    e[`theme-${c}`],
+    e[`theme-${s}`],
     {
       [e.active]: !t
     },
@@ -56,18 +56,18 @@ function S(i) {
   );
   return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ m("div", { className: h, children: [
     /* @__PURE__ */ o(k, { showPointer: !1, className: e.backdrop, onClick: l }),
-    /* @__PURE__ */ o("div", { className: s(e.mask, f), children: /* @__PURE__ */ o("div", { className: s(e.holder, u), children: /* @__PURE__ */ o(x, { disabled: t, className: e.content, children: r }) }) })
+    /* @__PURE__ */ o("div", { className: c(e.mask, f), children: /* @__PURE__ */ o("div", { className: c(e.holder, u), children: /* @__PURE__ */ o(x, { disabled: t, className: e.content, children: r }) }) })
   ] }) });
 }
 S.Header = function(t) {
   const {
     onClose: a,
-    children: c,
+    children: s,
     ref: l,
     className: r
   } = t;
-  return /* @__PURE__ */ m("div", { ref: l, className: s(e.header, r), children: [
-    /* @__PURE__ */ o("div", { className: e.title, children: c }),
+  return /* @__PURE__ */ m("div", { ref: l, className: c(e.header, r), children: [
+    /* @__PURE__ */ o("div", { className: e.title, children: s }),
     !!a && /* @__PURE__ */ o(F, { icon: "Close", onClick: a })
   ] });
 };

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { IconName } from '../Icons';
+import { StateType } from '../StyledInput/StyledInput';
+
+export interface FormFieldProps {
+    state?: StateType;
+    message?: string;
+    label?: string;
+    required?: boolean;
+    icon?: IconName;
+    title?: string;
+    children?: React.ReactNode;
+}
+export interface FieldLabelProps {
+    label: string | undefined;
+    required: boolean | undefined;
+    icon: IconName | undefined;
+    title: string | undefined;
+}
+export declare function FormField(props: FormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FormField/FormField.js

@@ -0,0 +1,68 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import n from "../Flex/Flex.js";
+import { Icon as d } from "../Icon/Icon.js";
+import { Text as a } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import { Title as x } from "../Title/Title.js";
+const p = "cfxui__FormField__root__c1a77", F = "cfxui__FormField__message__9c489", h = "cfxui__FormField__fieldMessage__383a7", s = {
+  root: p,
+  message: F,
+  fieldMessage: h
+};
+function b(e) {
+  return e === "success" ? "green" : e === "error" ? "red" : "secondary";
+}
+function I(e) {
+  return e === "success" ? "Tick" : "Close";
+}
+function y(e) {
+  const {
+    label: o,
+    required: l,
+    icon: c,
+    title: t
+  } = e;
+  return /* @__PURE__ */ r(x, { title: t, children: /* @__PURE__ */ i(n, { direction: "row", alignItems: "center", justifyContent: "center", className: s.fieldMessage, children: [
+    /* @__PURE__ */ r(a, { color: "secondary", className: s.fieldLabel, weight: "bold", size: "xsmall", letterSpacing: "xlarge", children: o && o.toLocaleUpperCase() }),
+    c && /* @__PURE__ */ r(d, { name: c, size: "small", color: "secondary" }),
+    l && /* @__PURE__ */ r(a, { color: "red", children: "*" })
+  ] }) });
+}
+function T(e) {
+  const {
+    state: o = "default",
+    message: l,
+    label: c,
+    required: t,
+    icon: u,
+    title: f,
+    children: _
+  } = e, m = b(o), g = I(o);
+  return /* @__PURE__ */ i(
+    n,
+    {
+      className: s.root,
+      direction: "column",
+      alignItems: "baseline",
+      children: [
+        /* @__PURE__ */ r(
+          y,
+          {
+            label: c,
+            required: t,
+            icon: u,
+            title: f
+          }
+        ),
+        _,
+        o !== "default" && l && /* @__PURE__ */ i(n, { alignItems: "center", className: s.message, children: [
+          /* @__PURE__ */ r(d, { name: g, color: m }),
+          /* @__PURE__ */ r(a, { color: m, size: "xxsmall", children: l })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  T as FormField
+};

package/dist/components/FormField/FormFieldShowcase.d.ts

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

package/dist/components/FormField/FormFieldShowcase.js

@@ -0,0 +1,59 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import o from "react";
+import t from "../Flex/Flex.js";
+import i from "../Input/Input.js";
+import "../Button/Button.js";
+import "../../utils/links.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import "../../index-Cl_RnsqN.js";
+import "../../utils/ui/ui.js";
+import { Text as l } from "../Text/Text.js";
+import { FormField as c } from "./FormField.js";
+function s() {
+  return /* @__PURE__ */ r(t, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Default" }),
+      /* @__PURE__ */ e(c, { state: "error", children: /* @__PURE__ */ e(i, {}) })
+    ] }),
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Success" }),
+      /* @__PURE__ */ e(c, { state: "success", message: "This is a success message", children: /* @__PURE__ */ e(i, { state: "success" }) })
+    ] }),
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Error" }),
+      /* @__PURE__ */ e(c, { state: "error", message: "Error Message", children: /* @__PURE__ */ e(i, { state: "error", placeholder: "Placeholder" }) })
+    ] }),
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Label" }),
+      /* @__PURE__ */ e(c, { label: "label", children: /* @__PURE__ */ e(i, {}) })
+    ] }),
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Required" }),
+      /* @__PURE__ */ e(c, { required: !0, children: /* @__PURE__ */ e(i, {}) })
+    ] }),
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Icon with title" }),
+      /* @__PURE__ */ e(c, { icon: "MoreInfo", title: "This is a title", children: /* @__PURE__ */ e(i, {}) })
+    ] }),
+    /* @__PURE__ */ r(t, { vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Everything" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Field label",
+          icon: "MoreInfo",
+          required: !0,
+          state: "error",
+          message: "This is an error message",
+          title: "title",
+          children: /* @__PURE__ */ e(i, { state: "error" })
+        }
+      )
+    ] })
+  ] });
+}
+const x = o.memo(s);
+export {
+  x as default
+};

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

@@ -0,0 +1 @@
+export { FormField } from './FormField';

package/dist/components/FormField/index.js

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

package/dist/components/Icon/Icon.d.ts

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
 import { IconName } from '../Icons';
-import { TextColorProps, ResponsiveTextSize } from '../Text';
+import { TextColorProps } from '../Text';
+import { ResponsiveIconSize } from '../Text/Text.types';
 import { ResponsiveValueType } from '../../utils/ui';
+import { IconSizeType } from '../../utils/ui/ui.types';
 
-export type IconSize = ResponsiveTextSize;
+export type IconSize = IconSizeType;
 export interface IconProps extends TextColorProps {
     as?: React.ElementType;
     size?: ResponsiveValueType<IconSize>;
@@ -11,4 +13,6 @@ export interface IconProps extends TextColorProps {
     ref?: React.Ref<HTMLDivElement>;
     name: IconName;
 }
+export declare const iconSizeResponsiveValueFormatter: (val: ResponsiveIconSize) => string;
+export declare const iconStrokeWidthResponsiveValueFormatter: (val: ResponsiveIconSize) => string;
 export declare function Icon(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.js

@@ -1,41 +1,42 @@
-import { jsx as r } from "react/jsx-runtime";
-import n from "react";
-import { I as u } from "../../cfxIcons-B4SQ4Ljd.js";
-import "../Icons/cfx-icons-big/Like.js";
-import "../Icons/cfx-icons-big/Subscriptions.js";
-import "../Icons/cfx-icons-big/Upload.js";
-import "../Icons/cfx-icons-big/Warning.js";
-import "../Icons/cfx-icons-big/Confirm.js";
-import { textSizeResponsiveValueFormatter as c, getTextOpacity as R } from "../Text/Text.js";
+import { jsx as m } from "react/jsx-runtime";
+import c from "react";
+import { I as h } from "../../cfxIcons-0xD_EEXT.js";
+import { I as _ } from "../../cfxIconsXLarge-D0vz6Yd_.js";
+import { getTextOpacity as d } from "../Text/Text.js";
 import { ui as t } from "../../utils/ui/ui.js";
+import { IconSizeEnum as f } from "../../utils/ui/ui.types.js";
 import { clsx as a } from "../../utils/clsx.js";
-import { getColor as h } from "../../utils/color.js";
-const C = "cfxui__Icon__root__6c380", v = {
-  root: C
-};
-function b(e) {
+import { getColor as C } from "../../utils/color.js";
+const I = "cfxui__Icon__root__6c380", S = {
+  root: I
+}, p = (o) => o in f ? `var(--icon-size-${o})` : typeof o == "number" ? t.q(o) : o, x = (o) => o in f ? `var(--icon-stroke-${o})` : typeof o == "number" ? t.q(o) : o;
+function $(o) {
   const {
-    as: p = "div",
-    size: o = "normal",
-    opacity: i,
+    as: u = "div",
+    size: e = "small",
+    opacity: r,
     className: l,
-    name: f,
-    ref: y
-  } = e, m = a(
-    t.getResponsiveClassnames("width", o),
-    t.getResponsiveClassnames("height", o)
-  ), s = n.useMemo(() => ({
-    ...t.getResponsiveStyles("width", o, c),
-    ...t.getResponsiveStyles("height", o, c)
-  }), [o]), _ = n.useMemo(() => ({
-    color: h({
-      ...e,
-      opacity: R(i)
+    name: n,
+    ref: g
+  } = o, i = a(
+    t.getResponsiveClassnames("width", e),
+    t.getResponsiveClassnames("height", e),
+    t.getResponsiveClassnames("stroke-width", e)
+  ), s = c.useMemo(() => ({
+    ...t.getResponsiveStyles("width", e, p),
+    ...t.getResponsiveStyles("height", e, p),
+    ...t.getResponsiveStyles("stroke-width", e, x)
+  }), [e]), y = c.useMemo(() => ({
+    color: C({
+      ...o,
+      opacity: d(r)
     }),
     ...s
-  }), [i, e, s]), g = u[f];
-  return /* @__PURE__ */ r(p, { ref: y, style: _, className: a(v.root, l, m), children: /* @__PURE__ */ r(g, { className: m, style: s }) });
+  }), [r, o, s]), R = e === "xlarge" ? _[n] : h[n];
+  return /* @__PURE__ */ m(u, { ref: g, style: y, className: a(S.root, l, i), children: /* @__PURE__ */ m(R, { className: i, style: s }) });
 }
 export {
-  b as Icon
+  $ as Icon,
+  p as iconSizeResponsiveValueFormatter,
+  x as iconStrokeWidthResponsiveValueFormatter
 };

package/dist/components/IconButton/IconButton.js

@@ -16,7 +16,7 @@ function k(n) {
     disabled: r,
     ariaLabel: s,
     areaSize: _ = "small",
-    size: u = "xxsmall",
+    size: u = "small",
     color: m = "primary",
     colorToken: i,
     opacity: l,

package/dist/components/Icons/Icons.types.d.ts

@@ -1,4 +1,2 @@
-import * as Icons from './cfxIcons';
-import * as IconsBig from './cfxIconsBig';
+import * as Icons from './cfxIconsXLarge';
 export type IconName = keyof typeof Icons;
-export type IconBigName = keyof typeof IconsBig;