@cfx-dev/ui-components 3.0.0 → 3.0.2
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.
- package/LICENSE +20 -20
- package/README.md +38 -38
- package/dist/components/Logos/LogosShowcase.js +2 -2
- package/dist/components/Logos/cfx/CompositeLogo.js +74 -14
- package/dist/components/Tabular/Tabular.d.ts +1 -1
- package/dist/components/Tabular/TabularShowcase.js +33 -15
- package/dist/styles-scss/_colors.scss +211 -211
- package/dist/styles-scss/_typography.scss +51 -51
- package/dist/styles-scss/_ui.scss +359 -359
- package/dist/styles-scss/global.scss +142 -142
- package/dist/styles-scss/themes/theme_cfx.scss +32 -32
- package/dist/styles-scss/themes/theme_fivem.scss +32 -32
- package/dist/styles-scss/themes/theme_redm.scss +32 -32
- package/dist/styles-scss/themes/theme_wireframe.scss +32 -32
- package/dist/styles-scss/themes.scss +3 -3
- package/dist/styles-scss/tokens.scss +409 -409
- package/package.json +70 -70
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 FiveM
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 FiveM
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
# UI Component Library
|
|
2
|
-
Include design system, utils and reusable components.
|
|
3
|
-
|
|
4
|
-
## Instalation
|
|
5
|
-
```console
|
|
6
|
-
yarn add @cfx-dev/ui-components
|
|
7
|
-
```
|
|
8
|
-
or
|
|
9
|
-
```console
|
|
10
|
-
npm install @cfx-dev/ui-components
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## 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;`,
|
|
17
|
-
```
|
|
18
|
-
```javascript
|
|
19
|
-
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
|
|
23
|
-
import '@cfx-dev/ui-components/dist/styles-scss/themes.scss';
|
|
24
|
-
```
|
|
25
|
-
Add theme class name to body or root element
|
|
26
|
-
```javascript
|
|
27
|
-
<body className="cfxui-theme-cfx">
|
|
28
|
-
```
|
|
29
|
-
For some components you will need to define this variables in your root stiles:
|
|
30
|
-
```css
|
|
31
|
-
html {
|
|
32
|
-
--width: 100vw;
|
|
33
|
-
--height: 100vh;
|
|
34
|
-
--quant: calc(1rem * 0.25);
|
|
35
|
-
}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## License
|
|
1
|
+
# UI Component Library
|
|
2
|
+
Include design system, utils and reusable components.
|
|
3
|
+
|
|
4
|
+
## Instalation
|
|
5
|
+
```console
|
|
6
|
+
yarn add @cfx-dev/ui-components
|
|
7
|
+
```
|
|
8
|
+
or
|
|
9
|
+
```console
|
|
10
|
+
npm install @cfx-dev/ui-components
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 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;`,
|
|
17
|
+
```
|
|
18
|
+
```javascript
|
|
19
|
+
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
|
|
23
|
+
import '@cfx-dev/ui-components/dist/styles-scss/themes.scss';
|
|
24
|
+
```
|
|
25
|
+
Add theme class name to body or root element
|
|
26
|
+
```javascript
|
|
27
|
+
<body className="cfxui-theme-cfx">
|
|
28
|
+
```
|
|
29
|
+
For some components you will need to define this variables in your root stiles:
|
|
30
|
+
```css
|
|
31
|
+
html {
|
|
32
|
+
--width: 100vw;
|
|
33
|
+
--height: 100vh;
|
|
34
|
+
--quant: calc(1rem * 0.25);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## License
|
|
39
39
|
This project is licensed under the MIT License.
|
|
@@ -1,23 +1,83 @@
|
|
|
1
1
|
import { jsxs as t, jsx as C } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
function
|
|
4
|
-
return /* @__PURE__ */ t("svg", {
|
|
5
|
-
/* @__PURE__ */ C(
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import H from "react";
|
|
3
|
+
function L() {
|
|
4
|
+
return /* @__PURE__ */ t("svg", { viewBox: "0 0 503 83", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
5
|
+
/* @__PURE__ */ C(
|
|
6
|
+
"path",
|
|
7
|
+
{
|
|
8
|
+
fill: "white",
|
|
9
|
+
d: "M116 0H120V81H116V0Z"
|
|
10
|
+
}
|
|
11
|
+
),
|
|
12
|
+
/* @__PURE__ */ C(
|
|
13
|
+
"path",
|
|
14
|
+
{
|
|
15
|
+
fill: "white",
|
|
16
|
+
d: "M12.3016 12L34.082 12.0516C38.6343 12.0172 42.0333 12.7374 44.2775 14.2109C47.0202 16.0172 48.3893 19.1234 48.3893 23.5308C48.3893 30.7877 44.9904 34.8996 38.1924 35.8651V35.967C41.19 36.7059 42.7055 39.1636 42.7389 43.34C42.7389 45.4792 42.6577 48.2195 42.4969 51.5595C42.4969 53.8006 42.975 55.7389 43.9342 57.3745H31.9986C31.4408 56.7762 31.1626 55.5581 31.1626 53.7174C31.3915 50.6413 31.5045 48.1191 31.5045 46.1492C31.5045 42.1707 29.5732 40.1808 25.7121 40.1808H17.9897L14.6212 56.274H3L12.3016 12ZM22.1551 21.2267L19.9239 31.9096H29.1849C34.3616 31.9096 36.9652 29.8867 37 25.8407C37 22.7647 34.905 21.2267 30.7149 21.2267H22.1551Z"
|
|
17
|
+
}
|
|
18
|
+
),
|
|
19
|
+
/* @__PURE__ */ C(
|
|
20
|
+
"path",
|
|
21
|
+
{
|
|
22
|
+
fill: "white",
|
|
23
|
+
d: "M56.4565 57.4247L54.134 42.5337L45.5163 57.3228L31.9015 57.2812L40.3178 66.2539L33.0968 82L48.5342 72.7217L60.0178 81.6442L57.8937 66.8551L71.1579 57.4247H56.4565ZM57.1505 76.6829L48.6835 70.1133L37.9432 76.5294L42.891 65.8465L36.9073 59.4806H46.7536L52.9387 48.8063L54.6266 59.5825H64.3715L55.5626 65.7963L57.1505 76.6829Z"
|
|
24
|
+
}
|
|
25
|
+
),
|
|
8
26
|
/* @__PURE__ */ t("g", { clipPath: "url(#clip0_223_2228)", children: [
|
|
9
|
-
/* @__PURE__ */ C(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
27
|
+
/* @__PURE__ */ C(
|
|
28
|
+
"path",
|
|
29
|
+
{
|
|
30
|
+
fill: "white",
|
|
31
|
+
d: "M230.499 9H218.02L219.054 21.8535H207.645L208.679 9H196.306L166 73H203.491L204.721 57.7933H221.96L223.19 73H260.788L230.481 9H230.499ZM205.594 47.2039L207.217 27.2017H219.5L221.122 47.2039H205.594Z"
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ C(
|
|
35
|
+
"path",
|
|
36
|
+
{
|
|
37
|
+
fill: "white",
|
|
38
|
+
d: "M303.77 69C296.5 69 290.548 66.4685 285.93 61.4056C281.312 56.3256 279.002 49.5351 279.002 41C279.002 32.4649 281.312 25.6744 285.93 20.5944C290.548 15.5315 296.483 13 303.77 13C309.397 13 314.272 14.5394 318.411 17.584C322.55 20.6286 325.27 25.2639 326.57 31.4386H320.173C319.01 27.0257 316.991 23.81 314.084 21.8088C311.176 19.8076 307.738 18.7984 303.77 18.7984C298.296 18.7984 293.918 20.7654 290.599 24.6995C287.281 28.6335 285.639 34.0727 285.639 41C285.639 47.9273 287.298 53.3494 290.599 57.3005C293.918 61.2346 298.296 63.2016 303.77 63.2016C307.892 63.2016 311.552 61.9359 314.751 59.4044C317.966 56.8729 319.899 53.1784 320.549 48.3036H326.878C326.228 54.923 323.696 60.0373 319.283 63.6121C314.87 67.204 309.705 69 303.787 69H303.77Z"
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
/* @__PURE__ */ C(
|
|
42
|
+
"path",
|
|
43
|
+
{
|
|
44
|
+
fill: "white",
|
|
45
|
+
d: "M349.37 19.3286C345.915 19.3286 344.17 21.1588 344.17 24.8192V28.9585H352.449V34.2266H344.17V67.7856H338.15V34.2266H331.753V28.9585H338.15V24.9731C338.15 17.7037 341.759 14.0605 348.994 14.0605C350.345 14.0605 351.628 14.1118 352.825 14.2144V19.3286H349.37Z"
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
/* @__PURE__ */ C(
|
|
49
|
+
"path",
|
|
50
|
+
{
|
|
51
|
+
fill: "white",
|
|
52
|
+
d: "M391.67 28.9585L377.593 47.9273L392.422 67.8027H385.341L383.237 64.8607C380.021 60.2938 376.994 56.0861 374.137 52.2205C369.93 57.8992 366.834 62.124 364.884 64.9462L362.849 67.8027H355.853L370.682 47.9273L356.605 28.9585H363.687L366.697 33.0977C369.656 37.1173 372.17 40.6237 374.223 43.6341C376.789 40.025 379.286 36.5015 381.749 33.0977L384.691 28.9585H391.687H391.67Z"
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
/* @__PURE__ */ C(
|
|
56
|
+
"path",
|
|
57
|
+
{
|
|
58
|
+
fill: "white",
|
|
59
|
+
d: "M405.285 67.7856H397.69V60.2596H405.285V67.7856Z"
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
/* @__PURE__ */ C(
|
|
63
|
+
"path",
|
|
64
|
+
{
|
|
65
|
+
fill: "white",
|
|
66
|
+
d: "M432.908 28.3598C433.712 28.3598 434.396 28.3769 434.944 28.4282V34.2266H433.439C429.47 34.2266 426.357 35.2016 424.1 37.1686C421.842 39.1185 420.713 41.9578 420.713 45.6695V67.8027H414.692V28.9585H420.405V35.8002C423.056 30.84 427.23 28.3427 432.891 28.3427L432.908 28.3598Z"
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
/* @__PURE__ */ C(
|
|
70
|
+
"path",
|
|
71
|
+
{
|
|
72
|
+
fill: "white",
|
|
73
|
+
d: "M456.016 68.6921C450.646 68.6921 446.301 66.8619 442.966 63.2016C439.63 59.5412 437.954 54.598 437.954 48.372C437.954 42.146 439.596 37.3396 442.88 33.628C446.164 29.9163 450.492 28.0519 455.863 28.0519C461.233 28.0519 465.8 29.9847 468.965 33.8503C472.129 37.7159 473.702 42.5565 473.702 48.372V50.4759H444.197C444.505 54.7349 445.685 57.9334 447.772 60.0373C449.859 62.1411 452.647 63.2016 456.17 63.2016C461.541 63.2016 464.979 60.7899 466.484 55.9835H472.728C471.718 59.7978 469.803 62.8766 466.963 65.2028C464.124 67.529 460.481 68.7092 456.016 68.7092V68.6921ZM444.351 45.0538H467.237C466.929 41.7013 465.8 38.9304 463.816 36.7752C461.832 34.62 459.181 33.5425 455.88 33.5425C452.767 33.5425 450.201 34.5174 448.166 36.4844C446.13 38.4343 444.864 41.3079 444.368 45.0709L444.351 45.0538Z"
|
|
74
|
+
}
|
|
75
|
+
)
|
|
16
76
|
] }),
|
|
17
77
|
/* @__PURE__ */ C("defs", { children: /* @__PURE__ */ C("clipPath", { id: "clip0_223_2228", children: /* @__PURE__ */ C("rect", { width: "335.003", height: "74", fill: "white", transform: "translate(168 4)" }) }) })
|
|
18
78
|
] });
|
|
19
79
|
}
|
|
20
|
-
const h =
|
|
80
|
+
const h = H.memo(L);
|
|
21
81
|
export {
|
|
22
82
|
h as default
|
|
23
83
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
1
|
+
import { jsxs as e, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import a from "react";
|
|
3
|
+
import { Flex as i } from "../Layout/Flex/Flex.js";
|
|
4
|
+
import { Text as m } from "../Text/Text.js";
|
|
5
|
+
import { Tabular as r } from "./Tabular.js";
|
|
4
6
|
const l = [
|
|
5
7
|
{
|
|
6
8
|
id: "item1",
|
|
@@ -30,18 +32,34 @@ const l = [
|
|
|
30
32
|
disabled: !0
|
|
31
33
|
}
|
|
32
34
|
];
|
|
33
|
-
function
|
|
34
|
-
const [
|
|
35
|
-
return /* @__PURE__ */
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
35
|
+
function d() {
|
|
36
|
+
const [o, c] = a.useState("item1"), [n, s] = a.useState(void 0);
|
|
37
|
+
return /* @__PURE__ */ e(i, { gap: "large", vertical: !0, children: [
|
|
38
|
+
/* @__PURE__ */ e(i, { gap: "normal", vertical: !0, children: [
|
|
39
|
+
/* @__PURE__ */ t(m, { children: "With default activeItem" }),
|
|
40
|
+
/* @__PURE__ */ t(
|
|
41
|
+
r,
|
|
42
|
+
{
|
|
43
|
+
items: l,
|
|
44
|
+
activeItem: o,
|
|
45
|
+
onActivate: c
|
|
46
|
+
}
|
|
47
|
+
)
|
|
48
|
+
] }),
|
|
49
|
+
/* @__PURE__ */ e(i, { gap: "normal", vertical: !0, children: [
|
|
50
|
+
/* @__PURE__ */ t(m, { children: "Without activeItem" }),
|
|
51
|
+
/* @__PURE__ */ t(
|
|
52
|
+
r,
|
|
53
|
+
{
|
|
54
|
+
items: l,
|
|
55
|
+
activeItem: n,
|
|
56
|
+
onActivate: s
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
] })
|
|
60
|
+
] });
|
|
43
61
|
}
|
|
44
|
-
const
|
|
62
|
+
const b = a.memo(d);
|
|
45
63
|
export {
|
|
46
|
-
|
|
64
|
+
b as default
|
|
47
65
|
};
|