@cfx-dev/ui-components 2.0.9 → 2.0.10
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/dist/assets/Flex.css +1 -1
- package/dist/assets/FlexShowcase.css +1 -0
- package/dist/assets/Pad.css +1 -1
- package/dist/assets/Separator.css +1 -1
- package/dist/assets/Spacer.css +1 -1
- package/dist/components/Layout/Flex/Flex.d.ts +2 -2
- package/dist/components/Layout/Flex/Flex.js +58 -59
- package/dist/components/Layout/Flex/FlexShowcase.d.ts +6 -0
- package/dist/components/Layout/Flex/FlexShowcase.js +19 -0
- package/dist/components/Layout/Pad/Pad.js +30 -29
- package/dist/components/Separator/Separator.js +32 -31
- package/dist/components/Spacer/Spacer.js +21 -20
- package/dist/components/ui.d.ts +3 -1
- package/dist/components/ui.js +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/styles-scss/_ui.scss +29 -31
- package/dist/styles-scss/tokens.scss +1 -14
- package/package.json +1 -1
package/dist/assets/Flex.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_w5him_1{display:flex;flex-direction:row}._root_w5him_1._full-width_w5him_5{width:100%}._root_w5him_1._full-height_w5him_8{height:100%}._root_w5him_1._centered_w5him_11{align-items:center;justify-content:center}._root_w5him_1._centered-axis_w5him_15{align-items:center}._root_w5him_1._centered-cross-axis_w5him_18{justify-content:center}._root_w5him_1._baseline-axis_w5him_21{align-items:baseline}._root_w5him_1._baseline-cross-axis_w5him_24{justify-content:baseline}._root_w5him_1._reverse-order_w5him_27{flex-direction:row-reverse}._root_w5him_1._vertical_w5him_30{flex-direction:column}._root_w5him_1._vertical_w5him_30._reverse-order_w5him_27{flex-direction:column-reverse}._root_w5him_1._repell_w5him_36{justify-content:space-between}._root_w5him_1._wrap_w5him_39{flex-wrap:wrap}._root_w5him_1._align-to-end_w5him_42{justify-content:flex-end}._root_w5him_1._align-to-end-axis_w5him_45{align-items:flex-end}._root_w5him_1._space-between_w5him_48{justify-content:space-between}._root_w5him_1._stretch_w5him_51{justify-content:stretch}._root_w5him_1._stretch_w5him_51>*{flex-grow:1}._root_w5him_1._stretch_w5him_51._horizontal_w5him_57>*{width:1px}._root_w5him_1._stretch_w5him_51._vertical_w5him_30>*{height:1px}._root_w5him_1._gap-none_w5him_63{gap:var(--offset-none)}._root_w5him_1._gap-hairthin_w5him_66{gap:var(--offset-hairthin)}._root_w5him_1._gap-thin_w5him_69{gap:var(--offset-thin)}._root_w5him_1._gap-xxsmall_w5him_72{gap:var(--offset-xxsmall)}._root_w5him_1._gap-xsmall_w5him_75{gap:var(--offset-xsmall)}._root_w5him_1._gap-small_w5him_78{gap:var(--offset-small)}._root_w5him_1._gap-normal_w5him_81{gap:var(--offset-normal)}._root_w5him_1._gap-medium_w5him_84{gap:var(--offset-medium)}._root_w5him_1._gap-large_w5him_87{gap:var(--offset-large)}._root_w5him_1._gap-xlarge_w5him_90{gap:var(--offset-xlarge)}._root_w5him_1._gap-safezone_w5him_93{gap:var(--offset-safezone)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._box_1118n_1{width:calc(var(--quant) * 4);height:calc(var(--quant) * 4);border-radius:var(--border-radius-normal);background-color:rgba(var(--color-accent),1)}
|
package/dist/assets/Pad.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_1aquh_1._offset-none_1aquh_1{--padding-offset: var(--offset-none)}._root_1aquh_1._offset-hairthin_1aquh_4{--padding-offset: var(--offset-hairthin)}._root_1aquh_1._offset-thin_1aquh_7{--padding-offset: var(--offset-thin)}._root_1aquh_1._offset-xxsmall_1aquh_10{--padding-offset: var(--offset-xxsmall)}._root_1aquh_1._offset-xsmall_1aquh_13{--padding-offset: var(--offset-xsmall)}._root_1aquh_1._offset-small_1aquh_16{--padding-offset: var(--offset-small)}._root_1aquh_1._offset-normal_1aquh_19{--padding-offset: var(--offset-normal)}._root_1aquh_1._offset-medium_1aquh_22{--padding-offset: var(--offset-medium)}._root_1aquh_1._offset-large_1aquh_25{--padding-offset: var(--offset-large)}._root_1aquh_1._offset-xlarge_1aquh_28{--padding-offset: var(--offset-xlarge)}._root_1aquh_1._offset-safezone_1aquh_31{--padding-offset: var(--offset-safezone)}._root_1aquh_1._only-top_1aquh_34{padding-top:var(--padding-offset)}._root_1aquh_1._only-left_1aquh_37{padding-left:var(--padding-offset)}._root_1aquh_1._only-right_1aquh_40{padding-right:var(--padding-offset)}._root_1aquh_1._only-bottom_1aquh_43{padding-bottom:var(--padding-offset)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_dsunb_1{width:100%}._root_dsunb_1._separator-offset-none_dsunb_4{height:var(--offset-none)}._root_dsunb_1._separator-offset-hairthin_dsunb_7{height:var(--offset-hairthin)}._root_dsunb_1._separator-offset-thin_dsunb_10{height:var(--offset-thin)}._root_dsunb_1._separator-offset-xxsmall_dsunb_13{height:var(--offset-xxsmall)}._root_dsunb_1._separator-offset-xsmall_dsunb_16{height:var(--offset-xsmall)}._root_dsunb_1._separator-offset-small_dsunb_19{height:var(--offset-small)}._root_dsunb_1._separator-offset-normal_dsunb_22{height:var(--offset-normal)}._root_dsunb_1._separator-offset-medium_dsunb_25{height:var(--offset-medium)}._root_dsunb_1._separator-offset-large_dsunb_28{height:var(--offset-large)}._root_dsunb_1._separator-offset-xlarge_dsunb_31{height:var(--offset-xlarge)}._root_dsunb_1._separator-offset-safezone_dsunb_34{height:var(--offset-safezone)}._root_dsunb_1 ._separator_dsunb_4{width:100%;height:2px;background-color:var(--color-separator-background)}._root_dsunb_1 ._content_dsunb_42{height:2px}._root_dsunb_1._thin_dsunb_45 ._separator_dsunb_4,._root_dsunb_1._thin_dsunb_45 ._content_dsunb_42{height:1px}._root_dsunb_1._vertical_dsunb_51{width:auto;height:100%}._root_dsunb_1._vertical_dsunb_51._separator-offset-none_dsunb_4{width:var(--offset-none)}._root_dsunb_1._vertical_dsunb_51._separator-offset-hairthin_dsunb_7{width:var(--offset-hairthin)}._root_dsunb_1._vertical_dsunb_51._separator-offset-thin_dsunb_10{width:var(--offset-thin)}._root_dsunb_1._vertical_dsunb_51._separator-offset-xxsmall_dsunb_13{width:var(--offset-xxsmall)}._root_dsunb_1._vertical_dsunb_51._separator-offset-xsmall_dsunb_16{width:var(--offset-xsmall)}._root_dsunb_1._vertical_dsunb_51._separator-offset-small_dsunb_19{width:var(--offset-small)}._root_dsunb_1._vertical_dsunb_51._separator-offset-normal_dsunb_22{width:var(--offset-normal)}._root_dsunb_1._vertical_dsunb_51._separator-offset-medium_dsunb_25{width:var(--offset-medium)}._root_dsunb_1._vertical_dsunb_51._separator-offset-large_dsunb_28{width:var(--offset-large)}._root_dsunb_1._vertical_dsunb_51._separator-offset-xlarge_dsunb_31{width:var(--offset-xlarge)}._root_dsunb_1._vertical_dsunb_51._separator-offset-safezone_dsunb_34{width:var(--offset-safezone)}._root_dsunb_1._vertical_dsunb_51 ._separator_dsunb_4{width:2px;height:100%}._root_dsunb_1._vertical_dsunb_51 ._content_dsunb_42{height:auto}._root_dsunb_1._vertical_dsunb_51._thin_dsunb_45 ._separator_dsunb_4{width:1px}._root_dsunb_1._text_dsunb_98{display:flex;align-items:center;gap:var(--offset-normal);color:var(--color-separator-text)}._root_dsunb_1._text_dsunb_98 ._separator_dsunb_4{flex-grow:1}._root_dsunb_1._text_dsunb_98 ._content_dsunb_42{flex-shrink:0;display:flex;align-items:center;justify-content:center}._root_dsunb_1._text_dsunb_98._vertical_dsunb_51{flex-direction:column}
|
package/dist/assets/Spacer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_x8a9c_1._horizontal_x8a9c_1{width:100%}._root_x8a9c_1._horizontal_x8a9c_1._size-none_x8a9c_4{height:var(--offset-none)}._root_x8a9c_1._horizontal_x8a9c_1._size-hairthin_x8a9c_7{height:var(--offset-hairthin)}._root_x8a9c_1._horizontal_x8a9c_1._size-thin_x8a9c_10{height:var(--offset-thin)}._root_x8a9c_1._horizontal_x8a9c_1._size-xxsmall_x8a9c_13{height:var(--offset-xxsmall)}._root_x8a9c_1._horizontal_x8a9c_1._size-xsmall_x8a9c_16{height:var(--offset-xsmall)}._root_x8a9c_1._horizontal_x8a9c_1._size-small_x8a9c_19{height:var(--offset-small)}._root_x8a9c_1._horizontal_x8a9c_1._size-normal_x8a9c_22{height:var(--offset-normal)}._root_x8a9c_1._horizontal_x8a9c_1._size-medium_x8a9c_25{height:var(--offset-medium)}._root_x8a9c_1._horizontal_x8a9c_1._size-large_x8a9c_28{height:var(--offset-large)}._root_x8a9c_1._horizontal_x8a9c_1._size-xlarge_x8a9c_31{height:var(--offset-xlarge)}._root_x8a9c_1._horizontal_x8a9c_1._size-safezone_x8a9c_34{height:var(--offset-safezone)}._root_x8a9c_1._vertical_x8a9c_37{height:100%}._root_x8a9c_1._vertical_x8a9c_37._size-none_x8a9c_4{width:var(--offset-none)}._root_x8a9c_1._vertical_x8a9c_37._size-hairthin_x8a9c_7{width:var(--offset-hairthin)}._root_x8a9c_1._vertical_x8a9c_37._size-thin_x8a9c_10{width:var(--offset-thin)}._root_x8a9c_1._vertical_x8a9c_37._size-xxsmall_x8a9c_13{width:var(--offset-xxsmall)}._root_x8a9c_1._vertical_x8a9c_37._size-xsmall_x8a9c_16{width:var(--offset-xsmall)}._root_x8a9c_1._vertical_x8a9c_37._size-small_x8a9c_19{width:var(--offset-small)}._root_x8a9c_1._vertical_x8a9c_37._size-normal_x8a9c_22{width:var(--offset-normal)}._root_x8a9c_1._vertical_x8a9c_37._size-medium_x8a9c_25{width:var(--offset-medium)}._root_x8a9c_1._vertical_x8a9c_37._size-large_x8a9c_28{width:var(--offset-large)}._root_x8a9c_1._vertical_x8a9c_37._size-xlarge_x8a9c_31{width:var(--offset-xlarge)}._root_x8a9c_1._vertical_x8a9c_37._size-safezone_x8a9c_34{width:var(--offset-safezone)}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { OffesetType } from '../../ui';
|
|
2
3
|
|
|
3
4
|
export interface FlexProps {
|
|
4
5
|
fullWidth?: boolean;
|
|
@@ -6,13 +7,12 @@ export interface FlexProps {
|
|
|
6
7
|
centered?: boolean | 'axis' | 'cross-axis' | 'baseline-axis' | 'baseline-cross-axis';
|
|
7
8
|
vertical?: boolean;
|
|
8
9
|
reverseOrder?: boolean;
|
|
9
|
-
repell?: boolean;
|
|
10
10
|
stretch?: boolean;
|
|
11
11
|
wrap?: boolean;
|
|
12
12
|
spaceBetween?: boolean;
|
|
13
13
|
alignToEnd?: boolean;
|
|
14
14
|
alignToEndAxis?: boolean;
|
|
15
|
-
gap?:
|
|
15
|
+
gap?: OffesetType;
|
|
16
16
|
children?: React.ReactNode;
|
|
17
17
|
className?: string;
|
|
18
18
|
}
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { clsx as
|
|
4
|
-
import { FlexRestricter as
|
|
5
|
-
import '../../../assets/Flex.css';const
|
|
6
|
-
root:
|
|
7
|
-
"full-width": "_full-
|
|
8
|
-
"full-height": "_full-
|
|
9
|
-
centered:
|
|
10
|
-
"centered-axis": "_centered-
|
|
11
|
-
"centered-cross-axis": "_centered-cross-
|
|
12
|
-
"baseline-axis": "_baseline-
|
|
13
|
-
"baseline-cross-axis": "_baseline-cross-
|
|
14
|
-
"reverse-order": "_reverse-
|
|
15
|
-
vertical:
|
|
16
|
-
repell:
|
|
17
|
-
wrap:
|
|
18
|
-
"align-to-end": "_align-to-
|
|
19
|
-
"align-to-end-axis": "_align-to-end-
|
|
20
|
-
"space-between": "_space-
|
|
21
|
-
stretch:
|
|
22
|
-
horizontal:
|
|
23
|
-
"gap-none": "_gap-
|
|
24
|
-
"gap-hairthin": "_gap-
|
|
25
|
-
"gap-thin": "_gap-
|
|
26
|
-
"gap-xxsmall": "_gap-
|
|
27
|
-
"gap-xsmall": "_gap-
|
|
28
|
-
"gap-small": "_gap-
|
|
29
|
-
"gap-normal": "_gap-
|
|
30
|
-
"gap-
|
|
31
|
-
"gap-
|
|
32
|
-
"gap-
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import u from "react";
|
|
3
|
+
import { clsx as b } from "../../../utils/clsx.js";
|
|
4
|
+
import { FlexRestricter as v } from "./FlexRestricter.js";
|
|
5
|
+
import '../../../assets/Flex.css';const z = "_root_w5him_1", R = "_centered_w5him_11", F = "_vertical_w5him_30", C = "_repell_w5him_36", N = "_wrap_w5him_39", E = "_stretch_w5him_51", T = "_horizontal_w5him_57", e = {
|
|
6
|
+
root: z,
|
|
7
|
+
"full-width": "_full-width_w5him_5",
|
|
8
|
+
"full-height": "_full-height_w5him_8",
|
|
9
|
+
centered: R,
|
|
10
|
+
"centered-axis": "_centered-axis_w5him_15",
|
|
11
|
+
"centered-cross-axis": "_centered-cross-axis_w5him_18",
|
|
12
|
+
"baseline-axis": "_baseline-axis_w5him_21",
|
|
13
|
+
"baseline-cross-axis": "_baseline-cross-axis_w5him_24",
|
|
14
|
+
"reverse-order": "_reverse-order_w5him_27",
|
|
15
|
+
vertical: F,
|
|
16
|
+
repell: C,
|
|
17
|
+
wrap: N,
|
|
18
|
+
"align-to-end": "_align-to-end_w5him_42",
|
|
19
|
+
"align-to-end-axis": "_align-to-end-axis_w5him_45",
|
|
20
|
+
"space-between": "_space-between_w5him_48",
|
|
21
|
+
stretch: E,
|
|
22
|
+
horizontal: T,
|
|
23
|
+
"gap-none": "_gap-none_w5him_63",
|
|
24
|
+
"gap-hairthin": "_gap-hairthin_w5him_66",
|
|
25
|
+
"gap-thin": "_gap-thin_w5him_69",
|
|
26
|
+
"gap-xxsmall": "_gap-xxsmall_w5him_72",
|
|
27
|
+
"gap-xsmall": "_gap-xsmall_w5him_75",
|
|
28
|
+
"gap-small": "_gap-small_w5him_78",
|
|
29
|
+
"gap-normal": "_gap-normal_w5him_81",
|
|
30
|
+
"gap-medium": "_gap-medium_w5him_84",
|
|
31
|
+
"gap-large": "_gap-large_w5him_87",
|
|
32
|
+
"gap-xlarge": "_gap-xlarge_w5him_90",
|
|
33
|
+
"gap-safezone": "_gap-safezone_w5him_93"
|
|
33
34
|
};
|
|
34
|
-
function
|
|
35
|
+
function j(r, i) {
|
|
35
36
|
const {
|
|
36
|
-
fullWidth:
|
|
37
|
-
fullHeight:
|
|
37
|
+
fullWidth: _ = !1,
|
|
38
|
+
fullHeight: n = !1,
|
|
38
39
|
vertical: t = !1,
|
|
39
40
|
centered: a = !1,
|
|
40
|
-
|
|
41
|
-
stretch: x = !1,
|
|
41
|
+
stretch: o = !1,
|
|
42
42
|
wrap: c = !1,
|
|
43
|
-
alignToEnd:
|
|
44
|
-
alignToEndAxis:
|
|
45
|
-
spaceBetween:
|
|
46
|
-
reverseOrder:
|
|
47
|
-
gap:
|
|
48
|
-
children:
|
|
49
|
-
className:
|
|
50
|
-
} =
|
|
51
|
-
[e["full-width"]]:
|
|
52
|
-
[e["full-height"]]:
|
|
43
|
+
alignToEnd: h = !1,
|
|
44
|
+
alignToEndAxis: m = !1,
|
|
45
|
+
spaceBetween: p = !1,
|
|
46
|
+
reverseOrder: w = !1,
|
|
47
|
+
gap: g = "normal",
|
|
48
|
+
children: d,
|
|
49
|
+
className: x
|
|
50
|
+
} = r, f = b(e.root, x, e[`gap-${g}`], {
|
|
51
|
+
[e["full-width"]]: _,
|
|
52
|
+
[e["full-height"]]: n,
|
|
53
53
|
[e.centered]: a === !0,
|
|
54
54
|
[e["centered-axis"]]: a === "axis",
|
|
55
55
|
[e["centered-cross-axis"]]: a === "cross-axis",
|
|
@@ -57,22 +57,21 @@ function A(l, s) {
|
|
|
57
57
|
[e["baseline-cross-axis"]]: a === "baseline-cross-axis",
|
|
58
58
|
[e.vertical]: t,
|
|
59
59
|
[e.horizontal]: !t,
|
|
60
|
-
[e.
|
|
61
|
-
[e.stretch]: x,
|
|
60
|
+
[e.stretch]: o,
|
|
62
61
|
[e.wrap]: c,
|
|
63
|
-
[e["align-to-end"]]:
|
|
64
|
-
[e["align-to-end-axis"]]:
|
|
65
|
-
[e["space-between"]]:
|
|
66
|
-
[e["reverse-order"]]:
|
|
62
|
+
[e["align-to-end"]]: h,
|
|
63
|
+
[e["align-to-end-axis"]]: m,
|
|
64
|
+
[e["space-between"]]: p,
|
|
65
|
+
[e["reverse-order"]]: w
|
|
67
66
|
});
|
|
68
|
-
return /* @__PURE__ */
|
|
67
|
+
return /* @__PURE__ */ s("div", { ref: i, className: f, children: d });
|
|
69
68
|
}
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
children:
|
|
69
|
+
const A = u.forwardRef(j), l = A;
|
|
70
|
+
l.Restricted = function({
|
|
71
|
+
children: i
|
|
73
72
|
}) {
|
|
74
|
-
return /* @__PURE__ */
|
|
73
|
+
return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(v, { children: i }) });
|
|
75
74
|
};
|
|
76
75
|
export {
|
|
77
|
-
|
|
76
|
+
l as Flex
|
|
78
77
|
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FlexProps } from './Flex';
|
|
3
|
+
|
|
4
|
+
declare function FlexShowcase(props: FlexProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const _default: React.MemoExoticComponent<typeof FlexShowcase>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as e, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import l from "react";
|
|
3
|
+
import { Flex as s } from "./Flex.js";
|
|
4
|
+
import '../../../assets/FlexShowcase.css';const t = "_box_1118n_1", o = {
|
|
5
|
+
box: t
|
|
6
|
+
};
|
|
7
|
+
function r(a) {
|
|
8
|
+
return /* @__PURE__ */ e(s, { gap: "large", vertical: !0, children: /* @__PURE__ */ c(s, { ...a, children: [
|
|
9
|
+
/* @__PURE__ */ e("div", { className: o.box }),
|
|
10
|
+
/* @__PURE__ */ e("div", { className: o.box }),
|
|
11
|
+
/* @__PURE__ */ e("div", { className: o.box }),
|
|
12
|
+
/* @__PURE__ */ e("div", { className: o.box }),
|
|
13
|
+
/* @__PURE__ */ e("div", { className: o.box })
|
|
14
|
+
] }) });
|
|
15
|
+
}
|
|
16
|
+
const d = l.memo(r);
|
|
17
|
+
export {
|
|
18
|
+
d as default
|
|
19
|
+
};
|
|
@@ -1,39 +1,40 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as u } from "../../../utils/clsx.js";
|
|
3
|
-
import '../../../assets/Pad.css';const i = "
|
|
3
|
+
import '../../../assets/Pad.css';const i = "_root_1aquh_1", o = {
|
|
4
4
|
root: i,
|
|
5
|
-
"offset-none": "_offset-
|
|
6
|
-
"offset-hairthin": "_offset-
|
|
7
|
-
"offset-thin": "_offset-
|
|
8
|
-
"offset-xxsmall": "_offset-
|
|
9
|
-
"offset-xsmall": "_offset-
|
|
10
|
-
"offset-small": "_offset-
|
|
11
|
-
"offset-normal": "_offset-
|
|
12
|
-
"offset-
|
|
13
|
-
"offset-
|
|
14
|
-
"offset-
|
|
15
|
-
"
|
|
16
|
-
"only-
|
|
17
|
-
"only-
|
|
18
|
-
"only-
|
|
5
|
+
"offset-none": "_offset-none_1aquh_1",
|
|
6
|
+
"offset-hairthin": "_offset-hairthin_1aquh_4",
|
|
7
|
+
"offset-thin": "_offset-thin_1aquh_7",
|
|
8
|
+
"offset-xxsmall": "_offset-xxsmall_1aquh_10",
|
|
9
|
+
"offset-xsmall": "_offset-xsmall_1aquh_13",
|
|
10
|
+
"offset-small": "_offset-small_1aquh_16",
|
|
11
|
+
"offset-normal": "_offset-normal_1aquh_19",
|
|
12
|
+
"offset-medium": "_offset-medium_1aquh_22",
|
|
13
|
+
"offset-large": "_offset-large_1aquh_25",
|
|
14
|
+
"offset-xlarge": "_offset-xlarge_1aquh_28",
|
|
15
|
+
"offset-safezone": "_offset-safezone_1aquh_31",
|
|
16
|
+
"only-top": "_only-top_1aquh_34",
|
|
17
|
+
"only-left": "_only-left_1aquh_37",
|
|
18
|
+
"only-right": "_only-right_1aquh_40",
|
|
19
|
+
"only-bottom": "_only-bottom_1aquh_43"
|
|
19
20
|
};
|
|
20
|
-
function
|
|
21
|
+
function x(l) {
|
|
21
22
|
const {
|
|
22
|
-
top:
|
|
23
|
-
left:
|
|
23
|
+
top: f = !1,
|
|
24
|
+
left: e = !1,
|
|
24
25
|
right: s = !1,
|
|
25
|
-
bottom:
|
|
26
|
-
size:
|
|
27
|
-
children:
|
|
28
|
-
className:
|
|
29
|
-
} =
|
|
30
|
-
[o["only-top"]]:
|
|
31
|
-
[o["only-left"]]:
|
|
32
|
-
[o["only-right"]]:
|
|
33
|
-
[o["only-bottom"]]:
|
|
26
|
+
bottom: _ = !1,
|
|
27
|
+
size: a = "normal",
|
|
28
|
+
children: n,
|
|
29
|
+
className: h
|
|
30
|
+
} = l, t = !(f || e || s || _), r = u(o.root, h, o[`offset-${a}`], {
|
|
31
|
+
[o["only-top"]]: t || f,
|
|
32
|
+
[o["only-left"]]: t || e,
|
|
33
|
+
[o["only-right"]]: t || s,
|
|
34
|
+
[o["only-bottom"]]: t || _
|
|
34
35
|
});
|
|
35
|
-
return /* @__PURE__ */ m("div", { className:
|
|
36
|
+
return /* @__PURE__ */ m("div", { className: r, children: n });
|
|
36
37
|
}
|
|
37
38
|
export {
|
|
38
|
-
|
|
39
|
+
x as Pad
|
|
39
40
|
};
|
|
@@ -1,40 +1,41 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as _, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as l } from "../../utils/clsx.js";
|
|
3
|
-
import '../../assets/Separator.css';const
|
|
4
|
-
root:
|
|
5
|
-
"separator-offset-none": "_separator-offset-
|
|
6
|
-
"separator-offset-hairthin": "_separator-offset-
|
|
7
|
-
"separator-offset-thin": "_separator-offset-
|
|
8
|
-
"separator-offset-xxsmall": "_separator-offset-
|
|
9
|
-
"separator-offset-xsmall": "_separator-offset-
|
|
10
|
-
"separator-offset-small": "_separator-offset-
|
|
11
|
-
"separator-offset-normal": "_separator-offset-
|
|
12
|
-
"separator-offset-
|
|
13
|
-
"separator-offset-
|
|
14
|
-
"separator-offset-
|
|
15
|
-
separator:
|
|
3
|
+
import '../../assets/Separator.css';const p = "_root_dsunb_1", i = "_separator_dsunb_4", c = "_content_dsunb_42", d = "_thin_dsunb_45", m = "_vertical_dsunb_51", u = "_text_dsunb_98", s = {
|
|
4
|
+
root: p,
|
|
5
|
+
"separator-offset-none": "_separator-offset-none_dsunb_4",
|
|
6
|
+
"separator-offset-hairthin": "_separator-offset-hairthin_dsunb_7",
|
|
7
|
+
"separator-offset-thin": "_separator-offset-thin_dsunb_10",
|
|
8
|
+
"separator-offset-xxsmall": "_separator-offset-xxsmall_dsunb_13",
|
|
9
|
+
"separator-offset-xsmall": "_separator-offset-xsmall_dsunb_16",
|
|
10
|
+
"separator-offset-small": "_separator-offset-small_dsunb_19",
|
|
11
|
+
"separator-offset-normal": "_separator-offset-normal_dsunb_22",
|
|
12
|
+
"separator-offset-medium": "_separator-offset-medium_dsunb_25",
|
|
13
|
+
"separator-offset-large": "_separator-offset-large_dsunb_28",
|
|
14
|
+
"separator-offset-xlarge": "_separator-offset-xlarge_dsunb_31",
|
|
15
|
+
"separator-offset-safezone": "_separator-offset-safezone_dsunb_34",
|
|
16
|
+
separator: i,
|
|
16
17
|
content: c,
|
|
17
|
-
thin:
|
|
18
|
-
vertical:
|
|
19
|
-
text:
|
|
18
|
+
thin: d,
|
|
19
|
+
vertical: m,
|
|
20
|
+
text: u
|
|
20
21
|
};
|
|
21
|
-
function
|
|
22
|
+
function h(o) {
|
|
22
23
|
const {
|
|
23
|
-
content:
|
|
24
|
+
content: a,
|
|
24
25
|
thin: r = !1,
|
|
25
|
-
vertical:
|
|
26
|
-
offset:
|
|
27
|
-
} =
|
|
28
|
-
[
|
|
29
|
-
[
|
|
30
|
-
[
|
|
26
|
+
vertical: n = !1,
|
|
27
|
+
offset: f = "none"
|
|
28
|
+
} = o, e = l(s.root, s[`separator-offset-${f}`], {
|
|
29
|
+
[s.text]: !!a,
|
|
30
|
+
[s.thin]: r,
|
|
31
|
+
[s.vertical]: n
|
|
31
32
|
});
|
|
32
|
-
return
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
-
] }) : /* @__PURE__ */
|
|
33
|
+
return a ? /* @__PURE__ */ _("div", { className: e, children: [
|
|
34
|
+
/* @__PURE__ */ t("div", { className: s.separator }),
|
|
35
|
+
/* @__PURE__ */ t("div", { className: s.content, children: a }),
|
|
36
|
+
/* @__PURE__ */ t("div", { className: s.separator })
|
|
37
|
+
] }) : /* @__PURE__ */ t("div", { className: e, children: /* @__PURE__ */ t("div", { className: s.separator }) });
|
|
37
38
|
}
|
|
38
39
|
export {
|
|
39
|
-
|
|
40
|
+
h as Separator
|
|
40
41
|
};
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as l } from "../../utils/clsx.js";
|
|
3
|
-
import '../../assets/Spacer.css';const r = "
|
|
3
|
+
import '../../assets/Spacer.css';const r = "_root_x8a9c_1", z = "_horizontal_x8a9c_1", c = "_vertical_x8a9c_37", e = {
|
|
4
4
|
root: r,
|
|
5
|
-
horizontal:
|
|
6
|
-
"size-none": "_size-
|
|
7
|
-
"size-hairthin": "_size-
|
|
8
|
-
"size-thin": "_size-
|
|
9
|
-
"size-xxsmall": "_size-
|
|
10
|
-
"size-xsmall": "_size-
|
|
11
|
-
"size-small": "_size-
|
|
12
|
-
"size-normal": "_size-
|
|
13
|
-
"size-
|
|
14
|
-
"size-
|
|
15
|
-
"size-
|
|
5
|
+
horizontal: z,
|
|
6
|
+
"size-none": "_size-none_x8a9c_4",
|
|
7
|
+
"size-hairthin": "_size-hairthin_x8a9c_7",
|
|
8
|
+
"size-thin": "_size-thin_x8a9c_10",
|
|
9
|
+
"size-xxsmall": "_size-xxsmall_x8a9c_13",
|
|
10
|
+
"size-xsmall": "_size-xsmall_x8a9c_16",
|
|
11
|
+
"size-small": "_size-small_x8a9c_19",
|
|
12
|
+
"size-normal": "_size-normal_x8a9c_22",
|
|
13
|
+
"size-medium": "_size-medium_x8a9c_25",
|
|
14
|
+
"size-large": "_size-large_x8a9c_28",
|
|
15
|
+
"size-xlarge": "_size-xlarge_x8a9c_31",
|
|
16
|
+
"size-safezone": "_size-safezone_x8a9c_34",
|
|
16
17
|
vertical: c
|
|
17
18
|
};
|
|
18
|
-
function x(
|
|
19
|
+
function x(s) {
|
|
19
20
|
const {
|
|
20
|
-
size:
|
|
21
|
-
vertical:
|
|
22
|
-
} =
|
|
23
|
-
[
|
|
24
|
-
[
|
|
21
|
+
size: i = "normal",
|
|
22
|
+
vertical: a = !1
|
|
23
|
+
} = s, _ = l(e.root, e[`size-${i}`], {
|
|
24
|
+
[e.horizontal]: !a,
|
|
25
|
+
[e.vertical]: a
|
|
25
26
|
});
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
+
return /* @__PURE__ */ o("div", { className: _ });
|
|
27
28
|
}
|
|
28
29
|
export {
|
|
29
30
|
x as Spacer
|
package/dist/components/ui.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { TextProps } from './Text/Text.types';
|
|
2
2
|
|
|
3
|
+
export type OffesetType = 'none' | 'hairthin' | 'thin' | 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'medium' | 'large' | 'xlarge' | 'safezone';
|
|
4
|
+
export type MediaQueryType = 'initial' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
3
5
|
export declare namespace ui {
|
|
4
6
|
/**
|
|
5
7
|
* Returns CSS value of quant value with applied multiplier
|
|
6
8
|
*/
|
|
7
9
|
function q(multiplier?: number): string;
|
|
8
|
-
function offset(size
|
|
10
|
+
function offset(size: OffesetType): string;
|
|
9
11
|
function fontSize(size?: TextProps['size']): string;
|
|
10
12
|
function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
|
|
11
13
|
function color(name: string, variantRaw?: string | number, alpha?: number): string;
|
package/dist/components/ui.js
CHANGED
package/dist/main.d.ts
CHANGED
|
@@ -84,4 +84,5 @@ export type { PopoverProps } from './components/Popover';
|
|
|
84
84
|
export type { AvatarProps, AvatarSize } from './components/Avatar';
|
|
85
85
|
export { OnScreenSensor } from './components/OnScreenSensor';
|
|
86
86
|
export { ui } from './components/ui';
|
|
87
|
+
export type { OffesetType, MediaQueryType } from './components/ui';
|
|
87
88
|
export { Symbols } from './components/Symbols';
|
|
@@ -235,36 +235,25 @@ $cfxui-color-alpha: (
|
|
|
235
235
|
background-attachment: $topLayerAttachement, scroll, fixed, fixed;
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
+
$offsets: (
|
|
239
|
+
'none': 0px,
|
|
240
|
+
'hairthin': 1px,
|
|
241
|
+
'thin': 2px,
|
|
242
|
+
'xxsmall': q(.25),
|
|
243
|
+
'xsmall': q(.5),
|
|
244
|
+
'small': q(1),
|
|
245
|
+
'normal': q(2),
|
|
246
|
+
'medium': q(2.5),
|
|
247
|
+
'large': q(4),
|
|
248
|
+
'xlarge': q(6),
|
|
249
|
+
'safezone': q(8),
|
|
250
|
+
);
|
|
251
|
+
|
|
238
252
|
@mixin offset-classes($prefix: 'offset', $property: 'gap') {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
#{$property}: offset('hairthin');
|
|
244
|
-
}
|
|
245
|
-
&.#{$prefix}-thin {
|
|
246
|
-
#{$property}: offset('thin');
|
|
247
|
-
}
|
|
248
|
-
&.#{$prefix}-xxsmall {
|
|
249
|
-
#{$property}: offset('xxsmall');
|
|
250
|
-
}
|
|
251
|
-
&.#{$prefix}-xsmall {
|
|
252
|
-
#{$property}: offset('xsmall');
|
|
253
|
-
}
|
|
254
|
-
&.#{$prefix}-small {
|
|
255
|
-
#{$property}: offset('small');
|
|
256
|
-
}
|
|
257
|
-
&.#{$prefix}-normal {
|
|
258
|
-
#{$property}: offset('normal');
|
|
259
|
-
}
|
|
260
|
-
&.#{$prefix}-large {
|
|
261
|
-
#{$property}: offset('large');
|
|
262
|
-
}
|
|
263
|
-
&.#{$prefix}-xlarge {
|
|
264
|
-
#{$property}: offset('xlarge');
|
|
265
|
-
}
|
|
266
|
-
&.#{$prefix}-safezone {
|
|
267
|
-
#{$property}: offset('safezone');
|
|
253
|
+
@each $name, $value in $offsets {
|
|
254
|
+
&.#{$prefix}-#{$name} {
|
|
255
|
+
#{$property}: offset('#{$name}');
|
|
256
|
+
}
|
|
268
257
|
}
|
|
269
258
|
}
|
|
270
259
|
|
|
@@ -321,6 +310,7 @@ $zindexMap: (
|
|
|
321
310
|
}
|
|
322
311
|
|
|
323
312
|
$mediaMap: (
|
|
313
|
+
'initial': 0px,
|
|
324
314
|
'xxsmall': 360px,
|
|
325
315
|
'xsmall': 640px,
|
|
326
316
|
'small': 768px,
|
|
@@ -331,7 +321,11 @@ $mediaMap: (
|
|
|
331
321
|
|
|
332
322
|
@mixin media-max($size: 'medium', $fix: 'empty') {
|
|
333
323
|
@if $fix == 'empty' {
|
|
334
|
-
@
|
|
324
|
+
@if $size == 'initial' {
|
|
325
|
+
@content;
|
|
326
|
+
} @else {
|
|
327
|
+
@media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
|
|
328
|
+
}
|
|
335
329
|
} @else {
|
|
336
330
|
@media (min-width: $fix) { @content; }
|
|
337
331
|
}
|
|
@@ -339,7 +333,11 @@ $mediaMap: (
|
|
|
339
333
|
|
|
340
334
|
@mixin media-min($size: 'medium', $fix: 'empty') {
|
|
341
335
|
@if $fix == 'empty' {
|
|
342
|
-
@
|
|
336
|
+
@if $size == 'initial' {
|
|
337
|
+
@content;
|
|
338
|
+
} @else {
|
|
339
|
+
@media (min-width: map.get($mediaMap, $size)) { @content; }
|
|
340
|
+
}
|
|
343
341
|
} @else {
|
|
344
342
|
@media (min-width: $fix) { @content; }
|
|
345
343
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
@use "ui";
|
|
3
|
+
@import "ui";
|
|
3
4
|
|
|
4
5
|
@mixin border-radius-tokens() {
|
|
5
6
|
@include ui.def('border-radius-none', 0);
|
|
@@ -48,20 +49,6 @@
|
|
|
48
49
|
@include ui.define-color-token('text-a75', ui.color('primary', $alpha: .75));
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
$offsets: (
|
|
52
|
-
'none': 0px,
|
|
53
|
-
'hairthin': 1px,
|
|
54
|
-
'thin': 2px,
|
|
55
|
-
'xxsmall': ui.q(.25),
|
|
56
|
-
'xsmall': ui.q(.5),
|
|
57
|
-
'small': ui.q(1),
|
|
58
|
-
'normal': ui.q(2),
|
|
59
|
-
'medium': ui.q(2.5),
|
|
60
|
-
'large': ui.q(4),
|
|
61
|
-
'xlarge': ui.q(6),
|
|
62
|
-
'safezone': ui.q(8),
|
|
63
|
-
);
|
|
64
|
-
|
|
65
52
|
@mixin offset-tokens() {
|
|
66
53
|
@each $name, $value in $offsets {
|
|
67
54
|
@include ui.def('offset-#{$name}', $value);
|