@cfx-dev/ui-components 2.1.4 → 2.1.6
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/Rail-nVRissv6.js +81 -0
- package/dist/assets/Button.css +1 -1
- package/dist/assets/Rail.css +1 -1
- package/dist/assets/global.css +1 -1
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.js +55 -54
- package/dist/components/Button/ButtonShowcase.js +43 -21
- package/dist/components/Layout/Scrollable/Rail.js +1 -1
- package/dist/components/Layout/Scrollable/Scrollable.js +1 -1
- package/dist/components/Layout/Scrollable/VirtualScrollable.js +1 -1
- package/dist/components/Layout/Scrollable/index.js +1 -1
- package/dist/main.js +1 -1
- package/dist/styles-scss/_ui.scss +19 -4
- package/dist/styles-scss/tokens.scss +13 -0
- package/package.json +1 -1
- package/dist/Rail-rtPENZs2.js +0 -81
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsx as S } from "react/jsx-runtime";
|
|
2
|
+
import r from "react";
|
|
3
|
+
import { Interactive as C } from "./components/Interactive/Interactive.js";
|
|
4
|
+
import { clsx as v } from "./utils/clsx.js";
|
|
5
|
+
import { clamp01 as b } from "./utils/math.js";
|
|
6
|
+
import './assets/Rail.css';const P = "_virtual_tl3f9_1", T = "_root_tl3f9_5", R = "_rail_tl3f9_12", M = "_active_tl3f9_12", y = "_scroller_tl3f9_15", z = "_content_tl3f9_26", E = "_thumb_tl3f9_40", a = {
|
|
7
|
+
virtual: P,
|
|
8
|
+
root: T,
|
|
9
|
+
rail: R,
|
|
10
|
+
active: M,
|
|
11
|
+
scroller: y,
|
|
12
|
+
"no-x-scroll": "_no-x-scroll_tl3f9_20",
|
|
13
|
+
"no-y-scroll": "_no-y-scroll_tl3f9_23",
|
|
14
|
+
content: z,
|
|
15
|
+
thumb: E,
|
|
16
|
+
"axis-x": "_axis-x_tl3f9_51",
|
|
17
|
+
"axis-y": "_axis-y_tl3f9_60"
|
|
18
|
+
}, L = {
|
|
19
|
+
pos: 0,
|
|
20
|
+
ratio: 1,
|
|
21
|
+
height: 0,
|
|
22
|
+
offset: 0,
|
|
23
|
+
dragging: !1,
|
|
24
|
+
dragStartAtCursor: 0,
|
|
25
|
+
dragStartAtPos: 0,
|
|
26
|
+
movementMultiplier: 1
|
|
27
|
+
};
|
|
28
|
+
function Y(h) {
|
|
29
|
+
const {
|
|
30
|
+
axis: l,
|
|
31
|
+
pos: s,
|
|
32
|
+
size: o,
|
|
33
|
+
scrollSize: m,
|
|
34
|
+
rootRef: _,
|
|
35
|
+
setRootActive: n,
|
|
36
|
+
minThumbSize: i
|
|
37
|
+
} = h, [x, d] = r.useState(!1), t = r.useRef({ ...L }), e = r.useMemo(() => l === "x" ? {
|
|
38
|
+
sizeCSS: "width",
|
|
39
|
+
offsetCSSTransform: "translateX",
|
|
40
|
+
scrollToSide: "left",
|
|
41
|
+
mousePosAxis: "clientX"
|
|
42
|
+
} : {
|
|
43
|
+
sizeCSS: "height",
|
|
44
|
+
offsetCSSTransform: "translateY",
|
|
45
|
+
scrollToSide: "top",
|
|
46
|
+
mousePosAxis: "clientY"
|
|
47
|
+
}, [l]), p = {
|
|
48
|
+
[e.sizeCSS]: `${t.current.height}px`,
|
|
49
|
+
transform: `${e.offsetCSSTransform}(${t.current.offset}px)`
|
|
50
|
+
}, A = r.useCallback((f) => {
|
|
51
|
+
t.current.dragging = !0, t.current.dragStartAtPos = t.current.pos, t.current.dragStartAtCursor = f[e.mousePosAxis], d(!0), n(!0);
|
|
52
|
+
}, [e.mousePosAxis, n]), c = r.useCallback((f) => {
|
|
53
|
+
var g;
|
|
54
|
+
if (!t.current.dragging)
|
|
55
|
+
return;
|
|
56
|
+
const w = f[e.mousePosAxis] - t.current.dragStartAtCursor;
|
|
57
|
+
(g = _.current) == null || g.scrollTo({
|
|
58
|
+
[e.scrollToSide]: t.current.dragStartAtPos + w * t.current.movementMultiplier,
|
|
59
|
+
behavior: "auto"
|
|
60
|
+
});
|
|
61
|
+
}, [e.mousePosAxis, e.scrollToSide, _]), u = r.useCallback(() => {
|
|
62
|
+
t.current.dragging && (t.current.dragging = !1, d(!1), n(!1));
|
|
63
|
+
}, [n]);
|
|
64
|
+
return r.useEffect(() => {
|
|
65
|
+
t.current.pos = s, t.current.ratio = b(o / m), t.current.height = o * t.current.ratio, t.current.offset = s * t.current.ratio, t.current.height < i && (t.current.height = i, t.current.offset = s * t.current.ratio * ((o - i) / o)), t.current.movementMultiplier = 1 / t.current.ratio;
|
|
66
|
+
}, [i, s, m, o]), r.useEffect(() => (window.addEventListener("mousemove", c), window.addEventListener("mouseup", u), () => {
|
|
67
|
+
window.removeEventListener("mousemove", c), window.removeEventListener("mouseup", u);
|
|
68
|
+
}), [c, u]), /* @__PURE__ */ S("div", { className: v(a.rail, a[`axis-${l}`]), children: /* @__PURE__ */ S(
|
|
69
|
+
C,
|
|
70
|
+
{
|
|
71
|
+
showPointer: !1,
|
|
72
|
+
style: p,
|
|
73
|
+
className: v(a.thumb, { [a.active]: x }),
|
|
74
|
+
onMouseDown: A
|
|
75
|
+
}
|
|
76
|
+
) });
|
|
77
|
+
}
|
|
78
|
+
export {
|
|
79
|
+
Y as R,
|
|
80
|
+
a as s
|
|
81
|
+
};
|
package/dist/assets/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_1hwl6_1{flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--offset-small);--height: var(--control-height-large);height:var(--height);min-width:var(--control-height-large);padding:var(--offset-xxsmall) calc(var(--quant) * 5);border:none;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-xxsmall);line-height:1.1;letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:solid 1.5px;border-radius:var(--border-radius-small);--color: var(--color-button-text);--border-color: var(--color-button-border);--background-color: var(--color-button-background);color:var(--color);border-color:var(--border-color);background-color:var(--background-color)}._root_1hwl6_1{transition:background-color .25s ease,color .25s ease,outline-offset 0s,outline 0s}._root_1hwl6_1._fullWidth_1hwl6_35{width:100%;flex-shrink:1}._root_1hwl6_1:disabled{cursor:not-allowed;opacity:.5}._root_1hwl6_1:not(:disabled):hover{--border-color: var(--color-button-hover-border);--background-color: var(--color-button-hover-background)}._root_1hwl6_1:not(:disabled):active{--border-color: var(--color-button-active-border);--background-color: var(--color-button-active-background);transform:translateY(1px)}._root_1hwl6_1:not(:disabled):focus-visible:not(:active):not(:hover){box-shadow:0 0 0 2px var(--color-button-focus-outline)}._root_1hwl6_1._primary_1hwl6_55{-webkit-backdrop-filter:none;backdrop-filter:none;--color: var(--color-button-primary-text);--border-color: var(--color-button-primary-border);--background-color: var(--color-button-primary-background)}._root_1hwl6_1._primary_1hwl6_55:disabled{--color: var(--color-button-primary-disabled-text);--border-color: var(--color-button-primary-disabled-border);--background-color: var(--color-button-primary-disabled-background)}._root_1hwl6_1._primary_1hwl6_55:not(:disabled):hover{--color: var(--color-button-primary-hover-text);--border-color: var(--color-button-primary-hover-border);--background-color: var(--color-button-primary-hover-background)}._root_1hwl6_1._primary_1hwl6_55:not(:disabled):active{--color: var(--color-button-primary-active-text);--border-color: var(--color-button-primary-active-border);--background-color: var(--color-button-primary-active-background)}._root_1hwl6_1._secondary_1hwl6_76{-webkit-backdrop-filter:none;backdrop-filter:none;--color: var(--color-button-secondary-text);--border-color: var(--color-button-secondary-border);--background-color: var(--color-button-secondary-background)}._root_1hwl6_1._secondary_1hwl6_76:disabled{--color: var(--color-button-secondary-disabled-text);--border-color: var(--color-button-secondary-disabled-border);--background-color: var(--color-button-secondary-disabled-background)}._root_1hwl6_1._secondary_1hwl6_76:not(:disabled):hover{--color: var(--color-button-secondary-hover-text);--border-color: var(--color-button-secondary-hover-border);--background-color: var(--color-button-secondary-hover-background)}._root_1hwl6_1._secondary_1hwl6_76:not(:disabled):active{--color: var(--color-button-secondary-active-text);--border-color: var(--color-button-secondary-active-border);--background-color: var(--color-button-secondary-active-background)}._root_1hwl6_1._on-light_1hwl6_97{-webkit-backdrop-filter:none;backdrop-filter:none;--color: var(--color-button-onlight-text);--border-color: var(--color-button-onlight-border);--background-color: var(--color-button-onlight-background)}._root_1hwl6_1._on-light_1hwl6_97:disabled{--color: var(--color-button-onlight-disabled-text);--border-color: var(--color-button-onlight-disabled-border);--background-color: var(--color-button-onlight-disabled-background)}._root_1hwl6_1._on-light_1hwl6_97:not(:disabled):hover{--color: var(--color-button-onlight-hover-text);--border-color: var(--color-button-onlight-hover-border);--background-color: var(--color-button-onlight-hover-background)}._root_1hwl6_1._on-light_1hwl6_97:not(:disabled):active{--color: var(--color-button-onlight-active-text);--border-color: var(--color-button-onlight-active-border);--background-color: var(--color-button-onlight-active-background)}._root_1hwl6_1._linked_1hwl6_118{--height: calc(var(--quant) * 4);-webkit-backdrop-filter:none;backdrop-filter:none;text-transform:none;min-width:0;padding:0 var(--offset-small);--color: var(--color-button-linked-text);--border-color: var(--color-button-linked-border);--background-color: var(--color-button-linked-background)}._root_1hwl6_1._linked_1hwl6_118:disabled{--color: var(--color-button-linked-disabled-text);--border-color: var(--color-button-linked-disabled-border);--background-color: var(--color-button-linked-disabled-background)}._root_1hwl6_1._linked_1hwl6_118:not(:disabled):hover{--color: var(--color-button-linked-hover-text);--border-color: var(--color-button-linked-hover-border);--background-color: var(--color-button-linked-hover-background)}._root_1hwl6_1._linked_1hwl6_118:not(:disabled):active{--color: var(--color-button-linked-active-text);--border-color: var(--color-button-linked-active-border);--background-color: var(--color-button-linked-active-background)}._root_1hwl6_1._quicklink_1hwl6_143{-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:space-between;--color: var(--color-button-quicklink-text);--border-color: var(--color-button-quicklink-border);--background-color: var(--color-button-quicklink-background)}._root_1hwl6_1._quicklink_1hwl6_143 ._icon_1hwl6_150{position:relative;right:0}._root_1hwl6_1._quicklink_1hwl6_143 ._icon_1hwl6_150{transition:right .25s ease,outline-offset 0s,outline 0s}._root_1hwl6_1._quicklink_1hwl6_143:disabled{--color: var(--color-button-quicklink-disabled-text);--border-color: var(--color-button-quicklink-disabled-border);--background-color: var(--color-button-quicklink-disabled-background)}._root_1hwl6_1._quicklink_1hwl6_143:not(:disabled):hover{--color: var(--color-button-quicklink-hover-text);--border-color: var(--color-button-quicklink-hover-border);--background-color: var(--color-button-quicklink-hover-background)}._root_1hwl6_1._quicklink_1hwl6_143:not(:disabled):hover ._icon_1hwl6_150{right:calc(-1 * calc(var(--quant) * .5))}._root_1hwl6_1._quicklink_1hwl6_143:not(:disabled):active{--color: var(--color-button-quicklink-active-text);--border-color: var(--color-button-quicklink-active-border);--background-color: var(--color-button-quicklink-active-background)}._root_1hwl6_1._icononly_1hwl6_175{padding:0;width:var(--height);line-height:0}._root_1hwl6_1 ._decorator_1hwl6_180{position:absolute;top:2px;left:2px;display:flex;align-items:center;justify-content:center;width:0;height:0}
|
package/dist/assets/Rail.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._virtual_tl3f9_1{overflow:hidden}._root_tl3f9_5{position:relative;display:flex;width:100%;height:100%;overflow:hidden}._root_tl3f9_5:hover>._rail_tl3f9_12,._root_tl3f9_5._active_tl3f9_12>._rail_tl3f9_12{opacity:1}._root_tl3f9_5 ._scroller_tl3f9_15{flex-grow:1;overflow:auto;scrollbar-width:none}._root_tl3f9_5 ._scroller_tl3f9_15._no-x-scroll_tl3f9_20{overflow-x:hidden}._root_tl3f9_5 ._scroller_tl3f9_15._no-y-scroll_tl3f9_23{overflow-y:hidden}._root_tl3f9_5 ._scroller_tl3f9_15 ._content_tl3f9_26{position:relative;will-change:transform}._root_tl3f9_5 ._scroller_tl3f9_15::-webkit-scrollbar{width:0;height:0}._root_tl3f9_5 ._rail_tl3f9_12{position:absolute;opacity:0;transition:opacity .2s ease;z-index:2}._root_tl3f9_5 ._rail_tl3f9_12 ._thumb_tl3f9_40{will-change:transform,opacity;border-radius:var(--border-radius-pill);background-color:var(--color-scrollable-thumb-background)}._root_tl3f9_5 ._rail_tl3f9_12 ._thumb_tl3f9_40:hover{background-color:var(--color-scrollable-thumb-hover-background)}._root_tl3f9_5 ._rail_tl3f9_12 ._thumb_tl3f9_40:active{background-color:var(--color-scrollable-thumb-active-background)}._root_tl3f9_5 ._rail_tl3f9_12._axis-x_tl3f9_51{left:0;right:0;bottom:var(--scrollable-thumb-x-offset, initial);height:var(--scrollable-thumb-size, initial)}._root_tl3f9_5 ._rail_tl3f9_12._axis-x_tl3f9_51 ._thumb_tl3f9_40{height:100%}._root_tl3f9_5 ._rail_tl3f9_12._axis-y_tl3f9_60{top:0;right:var(--scrollable-thumb-y-offset, initial);bottom:0;width:var(--scrollable-thumb-size, initial)}._root_tl3f9_5 ._rail_tl3f9_12._axis-y_tl3f9_60 ._thumb_tl3f9_40{width:100%}
|