@cfx-dev/ui-components 2.1.24 → 3.0.1

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 (149) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +38 -38
  3. package/dist/{Rail-nVRissv6.js → Rail-XT5PwAlx.js} +1 -1
  4. package/dist/assets/all_css.css +55 -0
  5. package/dist/components/Accordion/Accordion.js +1 -1
  6. package/dist/components/Avatar/Avatar.js +1 -1
  7. package/dist/components/Badge/Badge.js +1 -1
  8. package/dist/components/Button/Button.js +1 -1
  9. package/dist/components/Button/ButtonBar.js +1 -1
  10. package/dist/components/Checkbox/Checkbox.js +1 -1
  11. package/dist/components/ClipboardButton/ClipboardButton.js +1 -1
  12. package/dist/components/ControlBox/ControlBox.js +1 -1
  13. package/dist/components/CountryFlag/CountryFlag.js +1 -1
  14. package/dist/components/Decorate/Decorate.js +1 -1
  15. package/dist/components/Dot/Dot.js +1 -1
  16. package/dist/components/Flyout/Flyout.js +1 -1
  17. package/dist/components/Icon/Icon.js +1 -1
  18. package/dist/components/IconBig/IconBig.js +1 -1
  19. package/dist/components/IconButton/IconButton.js +1 -1
  20. package/dist/components/Indicator/Indicator.js +1 -1
  21. package/dist/components/InfoPanel/InfoPanel.js +1 -1
  22. package/dist/components/Input/Input.js +1 -1
  23. package/dist/components/Input/RichInput.js +1 -1
  24. package/dist/components/InputDropzone/InputDropzone.js +1 -1
  25. package/dist/components/InputDropzone/ItemPreview.js +1 -1
  26. package/dist/components/Interactive/Interactive.js +1 -1
  27. package/dist/components/Island/Island.js +1 -1
  28. package/dist/components/Layout/Box/Box.js +1 -1
  29. package/dist/components/Layout/Center/Center.js +1 -1
  30. package/dist/components/Layout/Flex/Flex.js +1 -1
  31. package/dist/components/Layout/Flex/FlexRestricter.js +1 -1
  32. package/dist/components/Layout/Flex/FlexShowcase.js +1 -1
  33. package/dist/components/Layout/Pad/Pad.js +1 -1
  34. package/dist/components/Layout/Page/Page.js +1 -1
  35. package/dist/components/Layout/Scrollable/Rail.js +1 -1
  36. package/dist/components/Layout/Scrollable/Scrollable.js +1 -1
  37. package/dist/components/Layout/Scrollable/VirtualScrollable.js +1 -1
  38. package/dist/components/Layout/Scrollable/index.js +1 -1
  39. package/dist/components/Link/Link.js +1 -1
  40. package/dist/components/Loaf/Loaf.js +1 -1
  41. package/dist/components/Logos/LogosShowcase.js +2 -2
  42. package/dist/components/Logos/cfx/CompositeLogo.js +74 -14
  43. package/dist/components/Modal/Modal.js +1 -1
  44. package/dist/components/NavList/NavList.js +1 -1
  45. package/dist/components/Overlay/Overlay.js +1 -1
  46. package/dist/components/Popover/Popover.js +1 -1
  47. package/dist/components/Popover/PopoverShowcase.js +1 -1
  48. package/dist/components/PremiumBadge/PremiumBadge.js +1 -1
  49. package/dist/components/Prose/Prose.js +1 -1
  50. package/dist/components/Radio/Radio.js +1 -1
  51. package/dist/components/Select/Select.js +1 -1
  52. package/dist/components/Separator/Separator.js +1 -1
  53. package/dist/components/Shroud/Shroud.js +1 -1
  54. package/dist/components/Skeleton/Skeleton.js +1 -1
  55. package/dist/components/Spacer/Spacer.js +1 -1
  56. package/dist/components/Switch/Switch.js +1 -1
  57. package/dist/components/Table/Table.js +1 -1
  58. package/dist/components/Tabular/Tabular.js +1 -1
  59. package/dist/components/Text/Text.js +1 -1
  60. package/dist/components/Text/TextShowcase.js +1 -1
  61. package/dist/components/Textarea/Textarea.js +1 -1
  62. package/dist/components/Title/Title.js +1 -1
  63. package/dist/components/ToggleGroup/ToggleGroup.js +1 -1
  64. package/dist/main.js +1 -1
  65. package/dist/styles-scss/_colors.scss +211 -211
  66. package/dist/styles-scss/_typography.scss +51 -51
  67. package/dist/styles-scss/_ui.scss +359 -359
  68. package/dist/styles-scss/global.scss +142 -142
  69. package/dist/styles-scss/themes/theme_cfx.scss +32 -32
  70. package/dist/styles-scss/themes/theme_fivem.scss +32 -32
  71. package/dist/styles-scss/themes/theme_redm.scss +32 -32
  72. package/dist/styles-scss/themes/theme_wireframe.scss +32 -32
  73. package/dist/styles-scss/themes.scss +3 -3
  74. package/dist/styles-scss/tokens.scss +409 -409
  75. package/package.json +70 -71
  76. package/dist/assets/ColorShowcase.css +0 -1
  77. package/dist/assets/ColorVariationsShowcase.css +0 -1
  78. package/dist/assets/ColorsShowcase.css +0 -1
  79. package/dist/assets/ControlHeightShowcase.css +0 -1
  80. package/dist/assets/OffsetShowcase.css +0 -1
  81. package/dist/assets/QuantShowcase.css +0 -1
  82. package/dist/style-guide/Colors/ColorShowcase.d.ts +0 -21
  83. package/dist/style-guide/Colors/ColorShowcase.js +0 -1881
  84. package/dist/style-guide/Colors/ColorVariationsShowcase.d.ts +0 -5
  85. package/dist/style-guide/Colors/ColorVariationsShowcase.js +0 -43
  86. package/dist/style-guide/Colors/ColorsShowcase.d.ts +0 -5
  87. package/dist/style-guide/Colors/ColorsShowcase.js +0 -43
  88. package/dist/style-guide/Layout/ControlHeightShowcase.d.ts +0 -5
  89. package/dist/style-guide/Layout/ControlHeightShowcase.js +0 -27
  90. package/dist/style-guide/Layout/OffsetShowcase.d.ts +0 -5
  91. package/dist/style-guide/Layout/OffsetShowcase.js +0 -32
  92. package/dist/style-guide/Layout/QuantShowcase.d.ts +0 -5
  93. package/dist/style-guide/Layout/QuantShowcase.js +0 -36
  94. /package/dist/assets/{Accordion.css → css/Accordion.css} +0 -0
  95. /package/dist/assets/{Avatar.css → css/Avatar.css} +0 -0
  96. /package/dist/assets/{Badge.css → css/Badge.css} +0 -0
  97. /package/dist/assets/{Box.css → css/Box.css} +0 -0
  98. /package/dist/assets/{Button.css → css/Button.css} +0 -0
  99. /package/dist/assets/{ButtonBar.css → css/ButtonBar.css} +0 -0
  100. /package/dist/assets/{Center.css → css/Center.css} +0 -0
  101. /package/dist/assets/{Checkbox.css → css/Checkbox.css} +0 -0
  102. /package/dist/assets/{ClipboardButton.css → css/ClipboardButton.css} +0 -0
  103. /package/dist/assets/{ControlBox.css → css/ControlBox.css} +0 -0
  104. /package/dist/assets/{CountryFlag.css → css/CountryFlag.css} +0 -0
  105. /package/dist/assets/{Decorate.css → css/Decorate.css} +0 -0
  106. /package/dist/assets/{Dot.css → css/Dot.css} +0 -0
  107. /package/dist/assets/{Flex.css → css/Flex.css} +0 -0
  108. /package/dist/assets/{FlexRestricter.css → css/FlexRestricter.css} +0 -0
  109. /package/dist/assets/{FlexShowcase.css → css/FlexShowcase.css} +0 -0
  110. /package/dist/assets/{Flyout.css → css/Flyout.css} +0 -0
  111. /package/dist/assets/{Icon.css → css/Icon.css} +0 -0
  112. /package/dist/assets/{IconBig.css → css/IconBig.css} +0 -0
  113. /package/dist/assets/{IconButton.css → css/IconButton.css} +0 -0
  114. /package/dist/assets/{Indicator.css → css/Indicator.css} +0 -0
  115. /package/dist/assets/{InfoPanel.css → css/InfoPanel.css} +0 -0
  116. /package/dist/assets/{Input.css → css/Input.css} +0 -0
  117. /package/dist/assets/{InputDropzone.css → css/InputDropzone.css} +0 -0
  118. /package/dist/assets/{Interactive.css → css/Interactive.css} +0 -0
  119. /package/dist/assets/{Island.css → css/Island.css} +0 -0
  120. /package/dist/assets/{ItemPreview.css → css/ItemPreview.css} +0 -0
  121. /package/dist/assets/{Link.css → css/Link.css} +0 -0
  122. /package/dist/assets/{Loaf.css → css/Loaf.css} +0 -0
  123. /package/dist/assets/{Modal.css → css/Modal.css} +0 -0
  124. /package/dist/assets/{NavList.css → css/NavList.css} +0 -0
  125. /package/dist/assets/{Overlay.css → css/Overlay.css} +0 -0
  126. /package/dist/assets/{Pad.css → css/Pad.css} +0 -0
  127. /package/dist/assets/{Page.css → css/Page.css} +0 -0
  128. /package/dist/assets/{Popover.css → css/Popover.css} +0 -0
  129. /package/dist/assets/{PopoverShowcase.css → css/PopoverShowcase.css} +0 -0
  130. /package/dist/assets/{PremiumBadge.css → css/PremiumBadge.css} +0 -0
  131. /package/dist/assets/{Prose.css → css/Prose.css} +0 -0
  132. /package/dist/assets/{Radio.css → css/Radio.css} +0 -0
  133. /package/dist/assets/{Rail.css → css/Rail.css} +0 -0
  134. /package/dist/assets/{RichInput.css → css/RichInput.css} +0 -0
  135. /package/dist/assets/{Select.css → css/Select.css} +0 -0
  136. /package/dist/assets/{Separator.css → css/Separator.css} +0 -0
  137. /package/dist/assets/{Shroud.css → css/Shroud.css} +0 -0
  138. /package/dist/assets/{Skeleton.css → css/Skeleton.css} +0 -0
  139. /package/dist/assets/{Spacer.css → css/Spacer.css} +0 -0
  140. /package/dist/assets/{Switch.css → css/Switch.css} +0 -0
  141. /package/dist/assets/{Table.css → css/Table.css} +0 -0
  142. /package/dist/assets/{Tabular.css → css/Tabular.css} +0 -0
  143. /package/dist/assets/{Text.css → css/Text.css} +0 -0
  144. /package/dist/assets/{TextShowcase.css → css/TextShowcase.css} +0 -0
  145. /package/dist/assets/{Textarea.css → css/Textarea.css} +0 -0
  146. /package/dist/assets/{Title.css → css/Title.css} +0 -0
  147. /package/dist/assets/{ToggleGroup.css → css/ToggleGroup.css} +0 -0
  148. /package/dist/assets/{global.css → general/global.css} +0 -0
  149. /package/dist/assets/{themes.css → general/themes.css} +0 -0
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- declare function ColorVariationsShowcase(): import("react/jsx-runtime").JSX.Element;
4
- declare const _default: React.MemoExoticComponent<typeof ColorVariationsShowcase>;
5
- export default _default;
@@ -1,43 +0,0 @@
1
- import { jsxs as c, jsx as s } from "react/jsx-runtime";
2
- import e from "react";
3
- import M, { COLOR_NAMES as r, THEME_NAMES as i, COLOR_LUMINANCES as m } from "./ColorShowcase.js";
4
- import { Select as t } from "../../components/Select/Select.js";
5
- import '../../assets/ColorVariationsShowcase.css';const O = "_root_1rsbp_1", g = "_controls_1rsbp_1", u = {
6
- root: O,
7
- controls: g
8
- };
9
- function L() {
10
- const [n, h] = e.useState(r[0]), [a, C] = e.useState(i[0]), [l, p] = e.useState(m[0]), _ = e.useMemo(() => r.map((o) => ({
11
- value: o,
12
- label: o
13
- })), []), S = e.useMemo(() => i.map((o) => ({
14
- value: o,
15
- label: o
16
- })), []), d = e.useMemo(() => m.map((o) => ({
17
- value: o,
18
- label: o
19
- })), []), b = e.useCallback((o) => {
20
- h(o);
21
- }, []), v = e.useCallback((o) => {
22
- C(o);
23
- }, []), f = e.useCallback((o) => {
24
- p(o);
25
- }, []);
26
- return /* @__PURE__ */ c("div", { className: u.root, children: [
27
- /* @__PURE__ */ c("div", { className: u.controls, children: [
28
- "Color ",
29
- /* @__PURE__ */ s(t, { options: _, value: n, onChange: b }),
30
- " ",
31
- " Theme ",
32
- /* @__PURE__ */ s(t, { options: S, value: a, onChange: v }),
33
- " ",
34
- " Luminance ",
35
- /* @__PURE__ */ s(t, { options: d, value: l, onChange: f })
36
- ] }),
37
- /* @__PURE__ */ s(M, { color: n, theme: a, luminance: l })
38
- ] });
39
- }
40
- const x = e.memo(L);
41
- export {
42
- x as default
43
- };
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- declare function ColorsShowcase(): import("react/jsx-runtime").JSX.Element;
4
- declare const _default: React.MemoExoticComponent<typeof ColorsShowcase>;
5
- export default _default;
@@ -1,43 +0,0 @@
1
- import { jsxs as _, jsx as c, Fragment as e } from "react/jsx-runtime";
2
- import a from "react";
3
- import f, { THEME_NAMES as d, COLOR_NAMES as n } from "./ColorShowcase.js";
4
- import '../../assets/ColorsShowcase.css';const i = "_root_dind7_349", x = "_colorLableTop_dind7_355", t = "_colorLableLeft_dind7_363", r = {
5
- "cfxui-theme-cfx": "_cfxui-theme-cfx_dind7_1",
6
- "cfx-color-primary": "_cfx-color-primary_dind7_279",
7
- "cfx-color-success": "_cfx-color-success_dind7_282",
8
- "cfx-color-warning": "_cfx-color-warning_dind7_285",
9
- "cfx-color-error": "_cfx-color-error_dind7_288",
10
- "cfx-color-teal": "_cfx-color-teal_dind7_291",
11
- "cfx-color-aurum": "_cfx-color-aurum_dind7_294",
12
- "cfx-color-silver": "_cfx-color-silver_dind7_297",
13
- "cfx-color-accent": "_cfx-color-accent_dind7_300",
14
- "cfx-color-secondary": "_cfx-color-secondary_dind7_306",
15
- "cfx-color-tertiary": "_cfx-color-tertiary_dind7_309",
16
- "cfx-color-green": "_cfx-color-green_dind7_312",
17
- "cfx-color-yellow": "_cfx-color-yellow_dind7_315",
18
- "cfx-color-red": "_cfx-color-red_dind7_318",
19
- "cfx-color-argentum": "_cfx-color-argentum_dind7_321",
20
- "cfx-color-platinum": "_cfx-color-platinum_dind7_327",
21
- "cfx-color-bg": "_cfx-color-bg_dind7_330",
22
- "cfx-color-bg-light": "_cfx-color-bg-light_dind7_333",
23
- "cfx-color-bg-dark": "_cfx-color-bg-dark_dind7_336",
24
- "cfx-color-bg-dark-grey": "_cfx-color-bg-dark-grey_dind7_339",
25
- "cfx-color-bg-black": "_cfx-color-bg-black_dind7_342",
26
- root: i,
27
- colorLableTop: x,
28
- colorLableLeft: t
29
- };
30
- function s() {
31
- return /* @__PURE__ */ _("div", { className: r.root, children: [
32
- /* @__PURE__ */ c("div", { className: r.colorLableTop, children: " " }),
33
- d.map((o) => /* @__PURE__ */ c("div", { className: r.colorLableTop, children: o }, o)),
34
- n.map((o) => /* @__PURE__ */ _(e, { children: [
35
- /* @__PURE__ */ c("div", { className: r.colorLableLeft, children: o }),
36
- d.map((l) => /* @__PURE__ */ c(f, { color: o, theme: l, alpha: "100" }, `ColorShowcase${l}`))
37
- ] }))
38
- ] });
39
- }
40
- const p = a.memo(s);
41
- export {
42
- p as default
43
- };
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- declare function ControlHeightShowcase(): import("react/jsx-runtime").JSX.Element;
4
- declare const _default: React.MemoExoticComponent<typeof ControlHeightShowcase>;
5
- export default _default;
@@ -1,27 +0,0 @@
1
- import { jsx as e, jsxs as s } from "react/jsx-runtime";
2
- import a from "react";
3
- import '../../assets/ControlHeightShowcase.css';const c = "_showcaseBlock_m08sq_4", h = "_showcaseBlockLabel_m08sq_11", n = "_root_m08sq_53", i = "_controlheightBlockOuter_m08sq_65", l = {
4
- showcaseBlock: c,
5
- showcaseBlockLabel: h,
6
- "var-controlheight-xxsmall": "_var-controlheight-xxsmall_m08sq_17",
7
- "var-controlheight-xsmall": "_var-controlheight-xsmall_m08sq_23",
8
- "var-controlheight-small": "_var-controlheight-small_m08sq_29",
9
- "var-controlheight-normal": "_var-controlheight-normal_m08sq_35",
10
- "var-controlheight-large": "_var-controlheight-large_m08sq_41",
11
- "var-controlheight-xlarge": "_var-controlheight-xlarge_m08sq_47",
12
- root: n,
13
- controlheightBlockOuter: i
14
- }, _ = Object.entries(l).reduce((o, [t, r]) => (t.startsWith("var-controlheight") && o.push({
15
- label: t.replace("var-controlheight-", "").replace(/-/g, ""),
16
- value: r
17
- }), o), []);
18
- function m() {
19
- return /* @__PURE__ */ e("div", { className: l.root, children: _.map((o) => /* @__PURE__ */ s("div", { className: l.showcaseBlock, children: [
20
- /* @__PURE__ */ e("div", { className: l.controlheightBlockOuter, children: /* @__PURE__ */ e("div", { className: o.value }) }),
21
- /* @__PURE__ */ e("div", { className: l.showcaseBlockLabel, children: o.label })
22
- ] }, o.value)) });
23
- }
24
- const u = a.memo(m);
25
- export {
26
- u as default
27
- };
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- declare function OffsetShowcase(): import("react/jsx-runtime").JSX.Element;
4
- declare const _default: React.MemoExoticComponent<typeof OffsetShowcase>;
5
- export default _default;
@@ -1,32 +0,0 @@
1
- import { jsx as o, jsxs as f } from "react/jsx-runtime";
2
- import t from "react";
3
- import '../../assets/OffsetShowcase.css';const l = "_showcaseBlock_1r16g_4", _ = "_showcaseBlockLabel_1r16g_11", c = "_root_1r16g_83", v = "_offsetBlockOuter_1r16g_95", s = {
4
- showcaseBlock: l,
5
- showcaseBlockLabel: _,
6
- "var-offset-none": "_var-offset-none_1r16g_17",
7
- "var-offset-hairthin": "_var-offset-hairthin_1r16g_23",
8
- "var-offset-thin": "_var-offset-thin_1r16g_29",
9
- "var-offset-xxsmall": "_var-offset-xxsmall_1r16g_35",
10
- "var-offset-xsmall": "_var-offset-xsmall_1r16g_41",
11
- "var-offset-small": "_var-offset-small_1r16g_47",
12
- "var-offset-normal": "_var-offset-normal_1r16g_53",
13
- "var-offset-medium": "_var-offset-medium_1r16g_59",
14
- "var-offset-large": "_var-offset-large_1r16g_65",
15
- "var-offset-xlarge": "_var-offset-xlarge_1r16g_71",
16
- "var-offset-safezone": "_var-offset-safezone_1r16g_77",
17
- root: c,
18
- offsetBlockOuter: v
19
- }, n = Object.entries(s).reduce((e, [a, r]) => (a.startsWith("var-offset") && e.push({
20
- label: a.replace("var-offset-", "").replace(/-/g, ""),
21
- value: r
22
- }), e), []);
23
- function h() {
24
- return /* @__PURE__ */ o("div", { className: s.root, children: n.map((e) => /* @__PURE__ */ f("div", { className: s.showcaseBlock, children: [
25
- /* @__PURE__ */ o("div", { className: s.offsetBlockOuter, children: /* @__PURE__ */ o("div", { className: e.value }) }),
26
- /* @__PURE__ */ o("div", { className: s.showcaseBlockLabel, children: e.label })
27
- ] }, e.value)) });
28
- }
29
- const g = t.memo(h);
30
- export {
31
- g as default
32
- };
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- declare function QuantShowcase(): import("react/jsx-runtime").JSX.Element;
4
- declare const _default: React.MemoExoticComponent<typeof QuantShowcase>;
5
- export default _default;
@@ -1,36 +0,0 @@
1
- import { jsx as o, jsxs as l } from "react/jsx-runtime";
2
- import r from "react";
3
- import '../../assets/QuantShowcase.css';const t = "_showcaseBlock_a7dbr_1", _ = "_showcaseBlockLabel_a7dbr_8", s = "_root_a7dbr_80", u = "_quantBlockOuter_a7dbr_92", n = {
4
- showcaseBlock: t,
5
- showcaseBlockLabel: _,
6
- "quantBlockInner-1": "_quantBlockInner-1_a7dbr_14",
7
- "quantBlockInner-2": "_quantBlockInner-2_a7dbr_20",
8
- "quantBlockInner-3": "_quantBlockInner-3_a7dbr_26",
9
- "quantBlockInner-4": "_quantBlockInner-4_a7dbr_32",
10
- "quantBlockInner-5": "_quantBlockInner-5_a7dbr_38",
11
- "quantBlockInner-6": "_quantBlockInner-6_a7dbr_44",
12
- "quantBlockInner-7": "_quantBlockInner-7_a7dbr_50",
13
- "quantBlockInner-8": "_quantBlockInner-8_a7dbr_56",
14
- "quantBlockInner-9": "_quantBlockInner-9_a7dbr_62",
15
- "quantBlockInner-10": "_quantBlockInner-10_a7dbr_68",
16
- "quantBlockInner-05": "_quantBlockInner-05_a7dbr_74",
17
- root: s,
18
- quantBlockOuter: u
19
- }, e = Array.from({ length: 10 }, (a, c) => ({
20
- label: String(c + 1),
21
- value: String(c + 1)
22
- }));
23
- e.unshift({
24
- label: "0.5",
25
- value: "05"
26
- });
27
- function k() {
28
- return /* @__PURE__ */ o("div", { className: n.root, children: e.map((a) => /* @__PURE__ */ l("div", { className: n.showcaseBlock, children: [
29
- /* @__PURE__ */ o("div", { className: n.quantBlockOuter, children: /* @__PURE__ */ o("div", { className: n[`quantBlockInner-${a.value}`] }) }),
30
- /* @__PURE__ */ o("div", { className: n.showcaseBlockLabel, children: a.label })
31
- ] }, a.value)) });
32
- }
33
- const d = r.memo(k);
34
- export {
35
- d as default
36
- };
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes