@cfx-dev/ui-components 4.2.19 → 4.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/README.md +20 -7
  2. package/dist/components/Accordion/Accordion.d.ts +1 -7
  3. package/dist/components/Accordion/index.d.ts +1 -0
  4. package/dist/components/BackdropPortal/BackdropPortal.d.ts +2 -0
  5. package/dist/components/BackdropPortal/BackdropPortal.js +7 -5
  6. package/dist/components/BackdropPortal/index.d.ts +2 -0
  7. package/dist/components/BackdropPortal/index.js +5 -0
  8. package/dist/components/Badge/index.d.ts +1 -1
  9. package/dist/components/ClipboardButton/ClipboardButton.d.ts +3 -3
  10. package/dist/components/ClipboardButton/ClipboardButton.js +10 -9
  11. package/dist/components/ControlBox/ControlBox.d.ts +2 -0
  12. package/dist/components/ControlBox/ControlBox.js +10 -9
  13. package/dist/components/ControlBox/index.d.ts +2 -0
  14. package/dist/components/ControlBox/index.js +4 -0
  15. package/dist/components/CountryFlag/CountryFlag.d.ts +2 -0
  16. package/dist/components/CountryFlag/CountryFlag.js +14 -13
  17. package/dist/components/CountryFlag/index.d.ts +2 -0
  18. package/dist/components/CountryFlag/index.js +4 -0
  19. package/dist/components/Decorate/Decorate.d.ts +2 -0
  20. package/dist/components/Decorate/Decorate.js +15 -14
  21. package/dist/components/Decorate/index.d.ts +2 -0
  22. package/dist/components/Decorate/index.js +4 -0
  23. package/dist/components/DropdownSelect/DropdownSelect.js +802 -1040
  24. package/dist/components/DropdownSelect/index.d.ts +1 -0
  25. package/dist/components/Flyout/Flyout.d.ts +2 -1
  26. package/dist/components/Flyout/index.d.ts +2 -0
  27. package/dist/components/Flyout/index.js +5 -0
  28. package/dist/components/IconButton/IconButton.d.ts +2 -3
  29. package/dist/components/IconButton/index.d.ts +1 -1
  30. package/dist/components/Indicator/index.d.ts +2 -0
  31. package/dist/components/Indicator/index.js +4 -0
  32. package/dist/components/Input/index.d.ts +1 -1
  33. package/dist/components/InputDropzone/index.d.ts +3 -3
  34. package/dist/components/InputDropzone/index.js +3 -3
  35. package/dist/components/Interactive/index.d.ts +2 -0
  36. package/dist/components/Interactive/index.js +4 -0
  37. package/dist/components/Island/index.d.ts +2 -0
  38. package/dist/components/Island/index.js +5 -0
  39. package/dist/components/Layout/Box/Box.d.ts +1 -0
  40. package/dist/components/Layout/Box/Box.js +2 -1
  41. package/dist/components/Layout/Box/index.d.ts +2 -0
  42. package/dist/components/Layout/Box/index.js +5 -0
  43. package/dist/components/Layout/Center/index.d.ts +2 -0
  44. package/dist/components/Layout/Center/index.js +4 -0
  45. package/dist/components/Layout/Flex/Flex.d.ts +3 -3
  46. package/dist/components/Layout/Flex/Flex.types.d.ts +7 -0
  47. package/dist/components/Layout/Flex/Flex.types.js +6 -5
  48. package/dist/components/Layout/Flex/index.d.ts +5 -0
  49. package/dist/components/Layout/Flex/index.js +6 -0
  50. package/dist/components/Layout/Pad/index.d.ts +2 -0
  51. package/dist/components/Layout/Pad/index.js +4 -0
  52. package/dist/components/Layout/Page/index.d.ts +2 -0
  53. package/dist/components/Layout/Page/index.js +4 -0
  54. package/dist/components/Loaf/index.d.ts +2 -0
  55. package/dist/components/Loaf/index.js +4 -0
  56. package/dist/components/NavList/index.d.ts +2 -0
  57. package/dist/components/NavList/index.js +4 -0
  58. package/dist/components/Overlay/index.d.ts +2 -0
  59. package/dist/components/Overlay/index.js +5 -0
  60. package/dist/components/PremiumBadge/index.d.ts +2 -0
  61. package/dist/components/PremiumBadge/index.js +4 -0
  62. package/dist/components/Prose/Prose.d.ts +1 -2
  63. package/dist/components/Prose/index.d.ts +2 -0
  64. package/dist/components/Prose/index.js +4 -0
  65. package/dist/components/Radio/index.d.ts +2 -0
  66. package/dist/components/Radio/index.js +4 -0
  67. package/dist/components/Select/Select.js +1 -1
  68. package/dist/components/Separator/index.d.ts +2 -0
  69. package/dist/components/Separator/index.js +4 -0
  70. package/dist/components/Shroud/index.d.ts +2 -0
  71. package/dist/components/Shroud/index.js +4 -0
  72. package/dist/components/Skeleton/Skeleton.d.ts +1 -1
  73. package/dist/components/Skeleton/index.d.ts +1 -0
  74. package/dist/components/Slider/Slider.js +294 -374
  75. package/dist/components/Spacer/index.d.ts +2 -0
  76. package/dist/components/Spacer/index.js +4 -0
  77. package/dist/components/Style/index.d.ts +2 -0
  78. package/dist/components/Style/index.js +5 -0
  79. package/dist/components/Table/Table.d.ts +13 -4
  80. package/dist/components/Table/Table.js +2 -1
  81. package/dist/components/Table/index.d.ts +2 -2
  82. package/dist/components/Table/index.js +5 -2
  83. package/dist/components/Text/Text.types.d.ts +2 -1
  84. package/dist/components/Text/index.d.ts +1 -1
  85. package/dist/components/Textarea/index.d.ts +2 -0
  86. package/dist/components/Textarea/index.js +4 -0
  87. package/dist/components/Title/Title.d.ts +5 -4
  88. package/dist/components/Title/Title.js +4 -2
  89. package/dist/components/Title/index.d.ts +2 -0
  90. package/dist/components/Title/index.js +7 -0
  91. package/dist/index-AweK2ufS.js +171 -0
  92. package/dist/{index-DBus3GoO.js → index-Bz27DCHt.js} +2 -2
  93. package/dist/main.d.ts +92 -69
  94. package/dist/main.js +185 -173
  95. package/package.json +1 -1
  96. package/dist/index-CjTSD6zB.js +0 -161
package/README.md CHANGED
@@ -5,35 +5,48 @@ Include design system, utils and reusable components.
5
5
  ```console
6
6
  yarn add @cfx-dev/ui-components
7
7
  ```
8
+
8
9
  or
9
10
  ```console
10
11
  npm install @cfx-dev/ui-components
11
12
  ```
12
13
 
13
14
  ## Usage
14
- In your bundler config add this sass option to use ui utils in styles:
15
- ```javascript
16
- additionalData: `@use "~@cfx-dev/ui-components/dist/styles-scss/ui" as ui;`,
15
+ Create file in your project `ui.scss`:
16
+ ```scss
17
+ @forward "~@cfx-dev/ui-components/dist/styles-scss/_ui.scss";
17
18
  ```
19
+
20
+ In your root js file import style files:
18
21
  ```javascript
22
+ // includes all css variables required for components
23
+ // can be replaced by css option from @cfx-dev/ui-components/dist/assets/general/global.css
19
24
  import '@cfx-dev/ui-components/dist/styles-scss/global.scss';
20
- ```
21
- Import default themes or take a look inside how to make your own:
22
- ```javascript
25
+ // set of default themes or you can create your own the same way as in this file
26
+ // can be replaced by css option from @cfx-dev/ui-components/dist/assets/general/themes.css
23
27
  import '@cfx-dev/ui-components/dist/styles-scss/themes.scss';
28
+ // you can import each component separatly or all in one file
29
+ import '@cfx-dev/ui-components/dist/assets/all_css.css';
24
30
  ```
31
+
25
32
  Add theme class name to body or root element
26
33
  ```javascript
27
34
  <body className="cfxui-theme-cfx">
28
35
  ```
36
+
29
37
  For some components you will need to define this variables in your root stiles:
30
38
  ```css
31
39
  html {
32
40
  --width: 100vw;
33
41
  --height: 100vh;
34
- --quant: calc(1rem * 0.25);
42
+ --quant: calc(1rem * 0.25); /* main measurement unit */
35
43
  }
36
44
  ```
37
45
 
46
+ If you are going with scss option you can use set of utils form _ui file. In your bundler config add this sass option to use ui utils in styles:
47
+ ```javascript
48
+ additionalData: `@use "@/styles/ui" as ui;`,
49
+ ```
50
+
38
51
  ## License
39
52
  This project is licensed under the MIT License.
package/dist/components/Accordion/Accordion.d.ts CHANGED
@@ -1,21 +1,15 @@
1
1
  import { default as React } from 'react';
2
2
  import { IconName } from '../Icon';
3
3
 
4
- export interface AccordionContextProps {
5
- openItems: Record<string, boolean>;
6
- toggleItem: (id: string) => void;
7
- rootWidth: null | number;
8
- }
9
4
  export interface AccordionProps {
10
5
  className?: string;
11
6
  }
12
7
  export declare const Accordion: React.FC<React.PropsWithChildren<AccordionProps>>;
13
8
  export declare const AccordionItem: React.FC<React.PropsWithChildren>;
14
9
  export declare const AccordionHeader: React.FC<React.PropsWithChildren>;
15
- interface AccordionTriggerProps {
10
+ export interface AccordionTriggerProps {
16
11
  text: string;
17
12
  iconLeft?: IconName;
18
13
  }
19
14
  export declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
20
15
  export declare const AccordionContent: React.FC<React.PropsWithChildren>;
21
- export {};
package/dist/components/Accordion/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { Accordion, AccordionTrigger, AccordionHeader, AccordionItem, AccordionContent, } from './Accordion';
2
+ export type { AccordionTriggerProps, AccordionProps } from './Accordion';
package/dist/components/BackdropPortal/BackdropPortal.d.ts CHANGED
@@ -5,3 +5,5 @@ export interface BackdropPortalProps {
5
5
  children?: React.ReactNode;
6
6
  }
7
7
  export declare function BackdropPortal({ children, }: BackdropPortalProps): import("react/jsx-runtime").JSX.Element;
8
+ declare const _default: React.MemoExoticComponent<typeof BackdropPortal>;
9
+ export default _default;
package/dist/components/BackdropPortal/BackdropPortal.js CHANGED
@@ -1,16 +1,18 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import "react";
2
+ import a from "react";
3
3
  import "../../utils/hooks/useGlobalKeyboardEvent.js";
4
4
  import "../../utils/hooks/useKeyboardClose.js";
5
- import { useOutlet as p } from "../../utils/hooks/useOutlet.js";
5
+ import { useOutlet as e } from "../../utils/hooks/useOutlet.js";
6
6
  const m = "backdrop-outlet";
7
- function a({
7
+ function p({
8
8
  children: t
9
9
  }) {
10
- const o = p(m);
10
+ const o = e(m);
11
11
  return /* @__PURE__ */ r(o, { children: t });
12
12
  }
13
+ const i = a.memo(p);
13
14
  export {
14
15
  m as BACKDROP_OUTLET_ID,
15
- a as BackdropPortal
16
+ p as BackdropPortal,
17
+ i as default
16
18
  };
package/dist/components/BackdropPortal/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as BackdropPortal, BACKDROP_OUTLET_ID } from './BackdropPortal';
2
+ export type { BackdropPortalProps } from './BackdropPortal';
package/dist/components/BackdropPortal/index.js ADDED
@@ -0,0 +1,5 @@
1
+ import { BACKDROP_OUTLET_ID as r, default as t } from "./BackdropPortal.js";
2
+ export {
3
+ r as BACKDROP_OUTLET_ID,
4
+ t as BackdropPortal
5
+ };
package/dist/components/Badge/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { Badge } from './Badge';
2
- export type { BadgeColor, BadgeProps, } from './Badge';
2
+ export type { BadgeColor, BadgeProps, BadgeSize, } from './Badge';
package/dist/components/ClipboardButton/ClipboardButton.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { default as React } from 'react';
2
- import { ButtonProps } from '../Button/Button';
3
- import { FixedOn } from '../Title/Title';
2
+ import { ButtonProps } from '../Button';
3
+ import { TitleFixedOn } from '../Title';
4
4
  import { UseClipboardProps } from '../../utils/hooks';
5
5
 
6
6
  export type ClipboardButtonProps = ButtonProps & UseClipboardProps & {
7
- fixedOn?: FixedOn;
7
+ fixedOn?: TitleFixedOn;
8
8
  };
9
9
  declare const _default: React.NamedExoticComponent<ClipboardButtonProps>;
10
10
  export default _default;
package/dist/components/ClipboardButton/ClipboardButton.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import c from "react";
3
3
  import { Button as C } from "../Button/Button.js";
4
- import { Title as _ } from "../Title/Title.js";
5
- import { clsx as f } from "../../utils/clsx.js";
4
+ import { clsx as _ } from "../../utils/clsx.js";
5
+ import "../Button/LinkButton.js";
6
+ import { Title as f } from "../Title/Title.js";
6
7
  import { noop as u } from "../../utils/functional.js";
7
8
  import "../../utils/hooks/useGlobalKeyboardEvent.js";
8
9
  import "../../utils/hooks/useKeyboardClose.js";
@@ -19,25 +20,25 @@ function h(o) {
19
20
  textToCopy: j,
20
21
  fixedOn: n,
21
22
  onClick: t = u,
22
- ...l
23
+ ...p
23
24
  } = o, {
24
- copied: p,
25
+ copied: l,
25
26
  handleClick: i,
26
27
  title: m
27
28
  } = b(o), d = c.useCallback((s) => {
28
29
  t(s), i();
29
- }, [i, t]), a = f(e.root, { [e.copied]: p });
30
+ }, [i, t]), a = _(e.root, { [e.copied]: l });
30
31
  return /* @__PURE__ */ r(
31
- _,
32
+ f,
32
33
  {
33
34
  title: m,
34
35
  fixedOn: n,
35
36
  rootClassName: a,
36
- children: /* @__PURE__ */ r(C, { ...l, onClick: d })
37
+ children: /* @__PURE__ */ r(C, { ...p, onClick: d })
37
38
  }
38
39
  );
39
40
  }
40
- const z = c.memo(h);
41
+ const A = c.memo(h);
41
42
  export {
42
- z as default
43
+ A as default
43
44
  };
package/dist/components/ControlBox/ControlBox.d.ts CHANGED
@@ -7,3 +7,5 @@ export interface ControlBoxProps {
7
7
  children: React.ReactNode;
8
8
  }
9
9
  export declare const ControlBox: React.ForwardRefExoticComponent<ControlBoxProps & React.RefAttributes<HTMLDivElement>>;
10
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ControlBoxProps & React.RefAttributes<HTMLDivElement>>>;
11
+ export default _default;
package/dist/components/ControlBox/ControlBox.js CHANGED
@@ -1,19 +1,20 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import c from "react";
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import r from "react";
3
3
  import { clsx as m } from "../../utils/clsx.js";
4
4
  const e = "cfxui__ControlBox__root__6a08c", x = "cfxui__ControlBox__small__8beb2", f = "cfxui__ControlBox__normal__e3aa5", i = "cfxui__ControlBox__large__1039d", o = {
5
5
  root: e,
6
6
  small: x,
7
7
  normal: f,
8
8
  large: i
9
- }, p = c.forwardRef(function(r, t) {
9
+ }, u = r.forwardRef(function(t, l) {
10
10
  const {
11
11
  size: _ = "normal",
12
- className: l,
13
- children: a
14
- } = r, n = m(o.root, l, o[_]);
15
- return /* @__PURE__ */ s("div", { ref: t, className: n, children: a });
16
- });
12
+ className: a,
13
+ children: n
14
+ } = t, s = m(o.root, a, o[_]);
15
+ return /* @__PURE__ */ c("div", { ref: l, className: s, children: n });
16
+ }), g = r.memo(u);
17
17
  export {
18
- p as ControlBox
18
+ u as ControlBox,
19
+ g as default
19
20
  };
package/dist/components/ControlBox/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as ControlBox } from './ControlBox';
2
+ export type { ControlBoxProps } from './ControlBox';
package/dist/components/ControlBox/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { default as t } from "./ControlBox.js";
2
+ export {
3
+ t as ControlBox
4
+ };
package/dist/components/CountryFlag/CountryFlag.d.ts CHANGED
@@ -7,3 +7,5 @@ export interface CountryFlagProps {
7
7
  forceShow?: boolean;
8
8
  }
9
9
  export declare const CountryFlag: React.ForwardRefExoticComponent<CountryFlagProps & React.RefAttributes<HTMLDivElement>>;
10
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CountryFlagProps & React.RefAttributes<HTMLDivElement>>>;
11
+ export default _default;
package/dist/components/CountryFlag/CountryFlag.js CHANGED
@@ -1,21 +1,22 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import l from "react";
2
+ import r from "react";
3
3
  import { Title as f } from "../Title/Title.js";
4
- import { clsx as i } from "../../utils/clsx.js";
5
- const m = "cfxui__CountryFlag__root__95489", u = {
6
- root: m
7
- }, y = l.forwardRef(function(r, e) {
4
+ import { clsx as m } from "../../utils/clsx.js";
5
+ const i = "cfxui__CountryFlag__root__95489", u = {
6
+ root: i
7
+ }, _ = r.forwardRef(function(a, e) {
8
8
  const {
9
9
  country: o,
10
10
  className: s,
11
- title: a,
12
- forceShow: n = !1
13
- } = r;
14
- if (!n && (o === "001" || o === "AQ" || o === "aq"))
11
+ title: n,
12
+ forceShow: l = !1
13
+ } = a;
14
+ if (!l && (o === "001" || o === "AQ" || o === "aq"))
15
15
  return null;
16
- const c = i(u.root, s, `fi-${o.toLowerCase()}`);
17
- return /* @__PURE__ */ t(f, { title: a, children: /* @__PURE__ */ t("div", { ref: e, className: c }) });
18
- });
16
+ const c = m(u.root, s, `fi-${o.toLowerCase()}`);
17
+ return /* @__PURE__ */ t(f, { title: n, children: /* @__PURE__ */ t("div", { ref: e, className: c }) });
18
+ }), x = r.memo(_);
19
19
  export {
20
- y as CountryFlag
20
+ _ as CountryFlag,
21
+ x as default
21
22
  };
package/dist/components/CountryFlag/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as CountryFlag } from './CountryFlag';
2
+ export type { CountryFlagProps } from './CountryFlag';
package/dist/components/CountryFlag/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { default as r } from "./CountryFlag.js";
2
+ export {
3
+ r as CountryFlag
4
+ };
package/dist/components/Decorate/Decorate.d.ts CHANGED
@@ -7,3 +7,5 @@ export interface DecorateProps {
7
7
  decoratorClassName?: string;
8
8
  }
9
9
  export declare const Decorate: React.ForwardRefExoticComponent<DecorateProps & React.RefAttributes<HTMLDivElement>>;
10
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DecorateProps & React.RefAttributes<HTMLDivElement>>>;
11
+ export default _default;
package/dist/components/Decorate/Decorate.js CHANGED
@@ -1,20 +1,21 @@
1
- import { jsxs as n, jsx as m } from "react/jsx-runtime";
2
- import f from "react";
1
+ import { jsxs as _, jsx as f } from "react/jsx-runtime";
2
+ import a from "react";
3
3
  import { clsx as t } from "../../utils/clsx.js";
4
- const i = "cfxui__Decorate__root__8f2af", l = "cfxui__Decorate__decorator__db06a", c = {
5
- root: i,
6
- decorator: l
7
- }, h = f.forwardRef(function(o, e) {
4
+ const l = "cfxui__Decorate__root__8f2af", i = "cfxui__Decorate__decorator__db06a", e = {
5
+ root: l,
6
+ decorator: i
7
+ }, u = a.forwardRef(function(o, c) {
8
8
  const {
9
9
  decorator: r,
10
- children: a,
11
- className: s
12
- } = o, d = t(c.root, s), _ = t(c.decorator, o.decoratorClassName);
13
- return /* @__PURE__ */ n("div", { ref: e, className: d, children: [
14
- a,
15
- !!r && /* @__PURE__ */ m("div", { className: _, children: r })
10
+ children: s,
11
+ className: d
12
+ } = o, m = t(e.root, d), n = t(e.decorator, o.decoratorClassName);
13
+ return /* @__PURE__ */ _("div", { ref: c, className: m, children: [
14
+ s,
15
+ !!r && /* @__PURE__ */ f("div", { className: n, children: r })
16
16
  ] });
17
- });
17
+ }), C = a.memo(u);
18
18
  export {
19
- h as Decorate
19
+ u as Decorate,
20
+ C as default
20
21
  };
package/dist/components/Decorate/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as Decorate } from './Decorate';
2
+ export type { DecorateProps } from './Decorate';
package/dist/components/Decorate/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { default as o } from "./Decorate.js";
2
+ export {
3
+ o as Decorate
4
+ };