@rudra-studio/rudra-layout 1.0.17 → 1.0.19
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/components/AspectRatio/index.d.ts +64 -0
- package/components/AspectRatio/index.js +12 -0
- package/components/Container/index.d.ts +17 -0
- package/components/Container/index.js +27 -0
- package/components/Flex/index.d.ts +98 -0
- package/components/Flex/index.js +12 -0
- package/components/Grid/index.d.ts +132 -25
- package/components/Grid/index.js +5 -5
- package/components/ScrollArea/index.d.ts +104 -0
- package/components/ScrollArea/index.js +12 -0
- package/components/Section/index.d.ts +111 -0
- package/components/Section/index.js +12 -0
- package/components/Stack/index.d.ts +21 -52
- package/components/Stack/index.js +42 -6
- package/components/VirtualList/index.d.ts +94 -0
- package/components/VirtualList/index.js +127 -0
- package/index.d.ts +14 -2
- package/index.js +16 -10
- package/package.json +1 -1
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type AspectRatioElement = "div" | "section" | "figure";
|
|
3
|
+
export interface AspectRatioProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** @select|div|section|figure */
|
|
6
|
+
as?: AspectRatioElement;
|
|
7
|
+
/**
|
|
8
|
+
* @type|class
|
|
9
|
+
* @schema [
|
|
10
|
+
* {
|
|
11
|
+
* "key":"Aspect Ratio",
|
|
12
|
+
* "prefix":"aspect",
|
|
13
|
+
* "type":"select",
|
|
14
|
+
* "options":[
|
|
15
|
+
* {"key":"auto","label":"Auto"},
|
|
16
|
+
* {"key":"square","label":"1:1 Square"},
|
|
17
|
+
* {"key":"video","label":"16:9 Video"},
|
|
18
|
+
* {"key":"[4/3]","label":"4:3"},
|
|
19
|
+
* {"key":"[3/2]","label":"3:2"},
|
|
20
|
+
* {"key":"[21/9]","label":"21:9"},
|
|
21
|
+
* {"key":"[9/16]","label":"9:16 Portrait"}
|
|
22
|
+
* ]
|
|
23
|
+
* },
|
|
24
|
+
* {
|
|
25
|
+
* "key":"Width",
|
|
26
|
+
* "prefix":"w",
|
|
27
|
+
* "type":"select",
|
|
28
|
+
* "options":[
|
|
29
|
+
* {"key":"auto","label":"Auto"},
|
|
30
|
+
* {"key":"full","label":"Full Width"},
|
|
31
|
+
* {"key":"1/2","label":"50%"},
|
|
32
|
+
* {"key":"2/3","label":"66%"},
|
|
33
|
+
* {"key":"3/4","label":"75%"}
|
|
34
|
+
* ]
|
|
35
|
+
* },
|
|
36
|
+
* {
|
|
37
|
+
* "key":"Overflow",
|
|
38
|
+
* "prefix":"overflow",
|
|
39
|
+
* "type":"select",
|
|
40
|
+
* "options":[
|
|
41
|
+
* {"key":"visible","label":"Visible"},
|
|
42
|
+
* {"key":"hidden","label":"Hidden"},
|
|
43
|
+
* {"key":"auto","label":"Auto"}
|
|
44
|
+
* ]
|
|
45
|
+
* },
|
|
46
|
+
* {
|
|
47
|
+
* "key":"Radius",
|
|
48
|
+
* "prefix":"rounded",
|
|
49
|
+
* "type":"select",
|
|
50
|
+
* "options":[
|
|
51
|
+
* {"key":"none","label":"None"},
|
|
52
|
+
* {"key":"sm","label":"Small"},
|
|
53
|
+
* {"key":"md","label":"Medium"},
|
|
54
|
+
* {"key":"lg","label":"Large"},
|
|
55
|
+
* {"key":"xl","label":"Extra Large"},
|
|
56
|
+
* {"key":"2xl","label":"2XL"},
|
|
57
|
+
* {"key":"full","label":"Full"}
|
|
58
|
+
* ]
|
|
59
|
+
* }
|
|
60
|
+
* ]
|
|
61
|
+
*/
|
|
62
|
+
className?: string;
|
|
63
|
+
}
|
|
64
|
+
export default function AspectRatio({ children, as, className, ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/AspectRatio/index.tsx
|
|
4
|
+
function t({ children: t, as: n = "div", className: r = "", ...i }) {
|
|
5
|
+
return /* @__PURE__ */ e(n, {
|
|
6
|
+
...i,
|
|
7
|
+
className: ["relative w-full overflow-hidden", r].filter(Boolean).join(" "),
|
|
8
|
+
children: t
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { t as default };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ContainerElement = "div" | "main" | "section" | "article" | "aside" | "header" | "footer";
|
|
3
|
+
export type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
|
|
4
|
+
export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
/** @select|div|main|section|article|aside|header|footer */
|
|
7
|
+
as?: ContainerElement;
|
|
8
|
+
/** @select|sm|md|lg|xl|2xl|full|none */
|
|
9
|
+
maxWidth?: ContainerMaxWidth;
|
|
10
|
+
centered?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* @type|class
|
|
13
|
+
* @schema [{"key":"Width","prefix":"w","type":"select","options":[{"key":"auto","label":"Auto"},{"key":"full","label":"Full Width"},{"key":"screen","label":"Screen"}]},{"key":"Padding X","prefix":"px","type":"select","options":[{"key":"0","label":"None"},{"key":"2","label":"Small"},{"key":"4","label":"Medium"},{"key":"6","label":"Large"},{"key":"8","label":"Extra Large"},{"key":"12","label":"2XL"}]},{"key":"Padding Y","prefix":"py","type":"select","options":[{"key":"0","label":"None"},{"key":"2","label":"Small"},{"key":"4","label":"Medium"},{"key":"6","label":"Large"},{"key":"8","label":"Extra Large"},{"key":"12","label":"2XL"}]},{"key":"Background","prefix":"bg","type":"select","options":[{"key":"transparent","label":"Transparent"},{"key":"white","label":"White"},{"key":"gray-50","label":"Gray 50"},{"key":"gray-100","label":"Gray 100"},{"key":"gray-900","label":"Gray 900"},{"key":"black","label":"Black"}]},{"key":"Min Height","prefix":"min-h","type":"select","options":[{"key":"0","label":"None"},{"key":"full","label":"Full"},{"key":"screen","label":"Screen"}]}]
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
export default function Container({ children, as, maxWidth, centered, className, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/Container/index.tsx
|
|
4
|
+
var t = {
|
|
5
|
+
sm: "max-w-screen-sm",
|
|
6
|
+
md: "max-w-screen-md",
|
|
7
|
+
lg: "max-w-screen-lg",
|
|
8
|
+
xl: "max-w-screen-xl",
|
|
9
|
+
"2xl": "max-w-screen-2xl",
|
|
10
|
+
full: "max-w-full",
|
|
11
|
+
none: ""
|
|
12
|
+
};
|
|
13
|
+
function n({ children: n, as: r = "div", maxWidth: i = "xl", centered: a = !0, className: o = "", ...s }) {
|
|
14
|
+
let c = r, l = [
|
|
15
|
+
"w-full",
|
|
16
|
+
t[i],
|
|
17
|
+
a ? "mx-auto" : "",
|
|
18
|
+
o
|
|
19
|
+
].filter(Boolean).join(" ");
|
|
20
|
+
return /* @__PURE__ */ e(c, {
|
|
21
|
+
...s,
|
|
22
|
+
className: l,
|
|
23
|
+
children: n
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
export { n as default };
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type FlexElement = "div" | "section" | "article" | "main" | "aside" | "nav";
|
|
3
|
+
export interface FlexProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** @select|div|section|article|main|aside|nav */
|
|
6
|
+
as?: FlexElement;
|
|
7
|
+
/**
|
|
8
|
+
* @type|class
|
|
9
|
+
* @schema [
|
|
10
|
+
* {
|
|
11
|
+
* "key":"Direction",
|
|
12
|
+
* "prefix":"flex",
|
|
13
|
+
* "type":"select",
|
|
14
|
+
* "options":[
|
|
15
|
+
* {"key":"row","label":"Row"},
|
|
16
|
+
* {"key":"row-reverse","label":"Row Reverse"},
|
|
17
|
+
* {"key":"col","label":"Column"},
|
|
18
|
+
* {"key":"col-reverse","label":"Column Reverse"}
|
|
19
|
+
* ]
|
|
20
|
+
* },
|
|
21
|
+
* {
|
|
22
|
+
* "key":"Align",
|
|
23
|
+
* "prefix":"items",
|
|
24
|
+
* "type":"select",
|
|
25
|
+
* "options":[
|
|
26
|
+
* {"key":"start","label":"Start"},
|
|
27
|
+
* {"key":"center","label":"Center"},
|
|
28
|
+
* {"key":"end","label":"End"},
|
|
29
|
+
* {"key":"stretch","label":"Stretch"},
|
|
30
|
+
* {"key":"baseline","label":"Baseline"}
|
|
31
|
+
* ]
|
|
32
|
+
* },
|
|
33
|
+
* {
|
|
34
|
+
* "key":"Justify",
|
|
35
|
+
* "prefix":"justify",
|
|
36
|
+
* "type":"select",
|
|
37
|
+
* "options":[
|
|
38
|
+
* {"key":"start","label":"Start"},
|
|
39
|
+
* {"key":"center","label":"Center"},
|
|
40
|
+
* {"key":"end","label":"End"},
|
|
41
|
+
* {"key":"between","label":"Space Between"},
|
|
42
|
+
* {"key":"around","label":"Space Around"},
|
|
43
|
+
* {"key":"evenly","label":"Space Evenly"}
|
|
44
|
+
* ]
|
|
45
|
+
* },
|
|
46
|
+
* {
|
|
47
|
+
* "key":"Wrap",
|
|
48
|
+
* "prefix":"flex",
|
|
49
|
+
* "type":"select",
|
|
50
|
+
* "options":[
|
|
51
|
+
* {"key":"nowrap","label":"No Wrap"},
|
|
52
|
+
* {"key":"wrap","label":"Wrap"},
|
|
53
|
+
* {"key":"wrap-reverse","label":"Wrap Reverse"}
|
|
54
|
+
* ]
|
|
55
|
+
* },
|
|
56
|
+
* {
|
|
57
|
+
* "key":"Gap",
|
|
58
|
+
* "prefix":"gap",
|
|
59
|
+
* "type":"select",
|
|
60
|
+
* "options":[
|
|
61
|
+
* {"key":"0","label":"None"},
|
|
62
|
+
* {"key":"1","label":"1"},
|
|
63
|
+
* {"key":"2","label":"2"},
|
|
64
|
+
* {"key":"3","label":"3"},
|
|
65
|
+
* {"key":"4","label":"4"},
|
|
66
|
+
* {"key":"6","label":"6"},
|
|
67
|
+
* {"key":"8","label":"8"},
|
|
68
|
+
* {"key":"10","label":"10"},
|
|
69
|
+
* {"key":"12","label":"12"}
|
|
70
|
+
* ]
|
|
71
|
+
* },
|
|
72
|
+
* {
|
|
73
|
+
* "key":"Width",
|
|
74
|
+
* "prefix":"w",
|
|
75
|
+
* "type":"select",
|
|
76
|
+
* "options":[
|
|
77
|
+
* {"key":"auto","label":"Auto"},
|
|
78
|
+
* {"key":"full","label":"Full"},
|
|
79
|
+
* {"key":"screen","label":"Screen"}
|
|
80
|
+
* ]
|
|
81
|
+
* },
|
|
82
|
+
* {
|
|
83
|
+
* "key":"Padding",
|
|
84
|
+
* "prefix":"p",
|
|
85
|
+
* "type":"select",
|
|
86
|
+
* "options":[
|
|
87
|
+
* {"key":"0","label":"None"},
|
|
88
|
+
* {"key":"2","label":"Small"},
|
|
89
|
+
* {"key":"4","label":"Medium"},
|
|
90
|
+
* {"key":"6","label":"Large"},
|
|
91
|
+
* {"key":"8","label":"Extra Large"}
|
|
92
|
+
* ]
|
|
93
|
+
* }
|
|
94
|
+
* ]
|
|
95
|
+
*/
|
|
96
|
+
className?: string;
|
|
97
|
+
}
|
|
98
|
+
export default function Flex({ children, as, className, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/Flex/index.tsx
|
|
4
|
+
function t({ children: t, as: n = "div", className: r = "", ...i }) {
|
|
5
|
+
return /* @__PURE__ */ e(n, {
|
|
6
|
+
...i,
|
|
7
|
+
className: ["flex", r].filter(Boolean).join(" "),
|
|
8
|
+
children: t
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { t as default };
|
|
@@ -1,31 +1,138 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export type GridElement = "div" | "section" | "article" | "main" | "aside";
|
|
3
|
+
export interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
3
4
|
children?: React.ReactNode;
|
|
4
|
-
/** @
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
5
|
+
/** @select|div|section|article|main|aside */
|
|
6
|
+
as?: GridElement;
|
|
7
|
+
/**
|
|
8
|
+
* @type|class
|
|
9
|
+
* @schema [
|
|
10
|
+
* {
|
|
11
|
+
* "key":"Columns",
|
|
12
|
+
* "prefix":"grid-cols",
|
|
13
|
+
* "type":"select",
|
|
14
|
+
* "options":[
|
|
15
|
+
* {"key":"1","label":"1 Column"},
|
|
16
|
+
* {"key":"2","label":"2 Columns"},
|
|
17
|
+
* {"key":"3","label":"3 Columns"},
|
|
18
|
+
* {"key":"4","label":"4 Columns"},
|
|
19
|
+
* {"key":"5","label":"5 Columns"},
|
|
20
|
+
* {"key":"6","label":"6 Columns"},
|
|
21
|
+
* {"key":"12","label":"12 Columns"}
|
|
22
|
+
* ]
|
|
23
|
+
* },
|
|
24
|
+
* {
|
|
25
|
+
* "key":"Rows",
|
|
26
|
+
* "prefix":"grid-rows",
|
|
27
|
+
* "type":"select",
|
|
28
|
+
* "options":[
|
|
29
|
+
* {"key":"1","label":"1 Row"},
|
|
30
|
+
* {"key":"2","label":"2 Rows"},
|
|
31
|
+
* {"key":"3","label":"3 Rows"},
|
|
32
|
+
* {"key":"4","label":"4 Rows"},
|
|
33
|
+
* {"key":"5","label":"5 Rows"},
|
|
34
|
+
* {"key":"6","label":"6 Rows"}
|
|
35
|
+
* ]
|
|
36
|
+
* },
|
|
37
|
+
* {
|
|
38
|
+
* "key":"Gap",
|
|
39
|
+
* "prefix":"gap",
|
|
40
|
+
* "type":"select",
|
|
41
|
+
* "options":[
|
|
42
|
+
* {"key":"0","label":"None"},
|
|
43
|
+
* {"key":"1","label":"1"},
|
|
44
|
+
* {"key":"2","label":"2"},
|
|
45
|
+
* {"key":"3","label":"3"},
|
|
46
|
+
* {"key":"4","label":"4"},
|
|
47
|
+
* {"key":"6","label":"6"},
|
|
48
|
+
* {"key":"8","label":"8"},
|
|
49
|
+
* {"key":"10","label":"10"},
|
|
50
|
+
* {"key":"12","label":"12"}
|
|
51
|
+
* ]
|
|
52
|
+
* },
|
|
53
|
+
* {
|
|
54
|
+
* "key":"Column Gap",
|
|
55
|
+
* "prefix":"gap-x",
|
|
56
|
+
* "type":"select",
|
|
57
|
+
* "options":[
|
|
58
|
+
* {"key":"0","label":"None"},
|
|
59
|
+
* {"key":"2","label":"Small"},
|
|
60
|
+
* {"key":"4","label":"Medium"},
|
|
61
|
+
* {"key":"6","label":"Large"},
|
|
62
|
+
* {"key":"8","label":"Extra Large"}
|
|
63
|
+
* ]
|
|
64
|
+
* },
|
|
65
|
+
* {
|
|
66
|
+
* "key":"Row Gap",
|
|
67
|
+
* "prefix":"gap-y",
|
|
68
|
+
* "type":"select",
|
|
69
|
+
* "options":[
|
|
70
|
+
* {"key":"0","label":"None"},
|
|
71
|
+
* {"key":"2","label":"Small"},
|
|
72
|
+
* {"key":"4","label":"Medium"},
|
|
73
|
+
* {"key":"6","label":"Large"},
|
|
74
|
+
* {"key":"8","label":"Extra Large"}
|
|
75
|
+
* ]
|
|
76
|
+
* },
|
|
77
|
+
* {
|
|
78
|
+
* "key":"Align Items",
|
|
79
|
+
* "prefix":"items",
|
|
80
|
+
* "type":"select",
|
|
81
|
+
* "options":[
|
|
82
|
+
* {"key":"start","label":"Start"},
|
|
83
|
+
* {"key":"center","label":"Center"},
|
|
84
|
+
* {"key":"end","label":"End"},
|
|
85
|
+
* {"key":"stretch","label":"Stretch"}
|
|
86
|
+
* ]
|
|
87
|
+
* },
|
|
88
|
+
* {
|
|
89
|
+
* "key":"Justify Items",
|
|
90
|
+
* "prefix":"justify-items",
|
|
91
|
+
* "type":"select",
|
|
92
|
+
* "options":[
|
|
93
|
+
* {"key":"start","label":"Start"},
|
|
94
|
+
* {"key":"center","label":"Center"},
|
|
95
|
+
* {"key":"end","label":"End"},
|
|
96
|
+
* {"key":"stretch","label":"Stretch"}
|
|
97
|
+
* ]
|
|
98
|
+
* },
|
|
99
|
+
* {
|
|
100
|
+
* "key":"Auto Flow",
|
|
101
|
+
* "prefix":"grid-flow",
|
|
102
|
+
* "type":"select",
|
|
103
|
+
* "options":[
|
|
104
|
+
* {"key":"row","label":"Row"},
|
|
105
|
+
* {"key":"col","label":"Column"},
|
|
106
|
+
* {"key":"dense","label":"Dense"},
|
|
107
|
+
* {"key":"row-dense","label":"Row Dense"},
|
|
108
|
+
* {"key":"col-dense","label":"Column Dense"}
|
|
109
|
+
* ]
|
|
110
|
+
* },
|
|
111
|
+
* {
|
|
112
|
+
* "key":"Width",
|
|
113
|
+
* "prefix":"w",
|
|
114
|
+
* "type":"select",
|
|
115
|
+
* "options":[
|
|
116
|
+
* {"key":"auto","label":"Auto"},
|
|
117
|
+
* {"key":"full","label":"Full Width"},
|
|
118
|
+
* {"key":"screen","label":"Screen"}
|
|
119
|
+
* ]
|
|
120
|
+
* },
|
|
121
|
+
* {
|
|
122
|
+
* "key":"Padding",
|
|
123
|
+
* "prefix":"p",
|
|
124
|
+
* "type":"select",
|
|
125
|
+
* "options":[
|
|
126
|
+
* {"key":"0","label":"None"},
|
|
127
|
+
* {"key":"2","label":"Small"},
|
|
128
|
+
* {"key":"4","label":"Medium"},
|
|
129
|
+
* {"key":"6","label":"Large"},
|
|
130
|
+
* {"key":"8","label":"Extra Large"},
|
|
131
|
+
* {"key":"12","label":"2XL"}
|
|
132
|
+
* ]
|
|
133
|
+
* }
|
|
15
134
|
* ]
|
|
16
|
-
* },{
|
|
17
|
-
* "key": "Gap",
|
|
18
|
-
* "prefix": "gap",
|
|
19
|
-
* "type": "select",
|
|
20
|
-
* "options": [
|
|
21
|
-
* {"key": "0", "label": "None (0px)"},
|
|
22
|
-
* {"key": "4", "label": "Small (16px)"},
|
|
23
|
-
* {"key": "6", "label": "Medium (24px)"},
|
|
24
|
-
* {"key": "8", "label": "Large (32px)"},
|
|
25
|
-
* {"key": "12", "label": "Extra Large (48px)"}
|
|
26
|
-
* ]
|
|
27
|
-
* }]
|
|
28
135
|
*/
|
|
29
136
|
className?: string;
|
|
30
137
|
}
|
|
31
|
-
export default function Grid({
|
|
138
|
+
export default function Grid({ children, as, className, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
|
package/components/Grid/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import "react";
|
|
2
2
|
import { jsx as e } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/Grid/index.tsx
|
|
4
|
-
function t({
|
|
5
|
-
return /* @__PURE__ */ e(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
children:
|
|
4
|
+
function t({ children: t, as: n = "div", className: r = "", ...i }) {
|
|
5
|
+
return /* @__PURE__ */ e(n, {
|
|
6
|
+
...i,
|
|
7
|
+
className: ["grid", r].filter(Boolean).join(" "),
|
|
8
|
+
children: t
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
//#endregion
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ScrollAreaElement = "div" | "section" | "article" | "aside";
|
|
3
|
+
export interface ScrollAreaProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** @select|div|section|article|aside */
|
|
6
|
+
as?: ScrollAreaElement;
|
|
7
|
+
/**
|
|
8
|
+
* @type|class
|
|
9
|
+
* @schema [
|
|
10
|
+
* {
|
|
11
|
+
* "key":"Overflow X",
|
|
12
|
+
* "prefix":"overflow-x",
|
|
13
|
+
* "type":"select",
|
|
14
|
+
* "options":[
|
|
15
|
+
* {"key":"auto","label":"Auto"},
|
|
16
|
+
* {"key":"scroll","label":"Scroll"},
|
|
17
|
+
* {"key":"hidden","label":"Hidden"},
|
|
18
|
+
* {"key":"visible","label":"Visible"}
|
|
19
|
+
* ]
|
|
20
|
+
* },
|
|
21
|
+
* {
|
|
22
|
+
* "key":"Overflow Y",
|
|
23
|
+
* "prefix":"overflow-y",
|
|
24
|
+
* "type":"select",
|
|
25
|
+
* "options":[
|
|
26
|
+
* {"key":"auto","label":"Auto"},
|
|
27
|
+
* {"key":"scroll","label":"Scroll"},
|
|
28
|
+
* {"key":"hidden","label":"Hidden"},
|
|
29
|
+
* {"key":"visible","label":"Visible"}
|
|
30
|
+
* ]
|
|
31
|
+
* },
|
|
32
|
+
* {
|
|
33
|
+
* "key":"Width",
|
|
34
|
+
* "prefix":"w",
|
|
35
|
+
* "type":"select",
|
|
36
|
+
* "options":[
|
|
37
|
+
* {"key":"auto","label":"Auto"},
|
|
38
|
+
* {"key":"full","label":"Full Width"},
|
|
39
|
+
* {"key":"screen","label":"Screen"}
|
|
40
|
+
* ]
|
|
41
|
+
* },
|
|
42
|
+
* {
|
|
43
|
+
* "key":"Height",
|
|
44
|
+
* "prefix":"h",
|
|
45
|
+
* "type":"select",
|
|
46
|
+
* "options":[
|
|
47
|
+
* {"key":"auto","label":"Auto"},
|
|
48
|
+
* {"key":"32","label":"Small"},
|
|
49
|
+
* {"key":"48","label":"Medium"},
|
|
50
|
+
* {"key":"64","label":"Large"},
|
|
51
|
+
* {"key":"96","label":"Extra Large"},
|
|
52
|
+
* {"key":"full","label":"Full Height"},
|
|
53
|
+
* {"key":"screen","label":"Screen"}
|
|
54
|
+
* ]
|
|
55
|
+
* },
|
|
56
|
+
* {
|
|
57
|
+
* "key":"Max Height",
|
|
58
|
+
* "prefix":"max-h",
|
|
59
|
+
* "type":"select",
|
|
60
|
+
* "options":[
|
|
61
|
+
* {"key":"32","label":"Small"},
|
|
62
|
+
* {"key":"48","label":"Medium"},
|
|
63
|
+
* {"key":"64","label":"Large"},
|
|
64
|
+
* {"key":"96","label":"Extra Large"},
|
|
65
|
+
* {"key":"screen","label":"Screen"}
|
|
66
|
+
* ]
|
|
67
|
+
* },
|
|
68
|
+
* {
|
|
69
|
+
* "key":"Padding",
|
|
70
|
+
* "prefix":"p",
|
|
71
|
+
* "type":"select",
|
|
72
|
+
* "options":[
|
|
73
|
+
* {"key":"0","label":"None"},
|
|
74
|
+
* {"key":"2","label":"Small"},
|
|
75
|
+
* {"key":"4","label":"Medium"},
|
|
76
|
+
* {"key":"6","label":"Large"},
|
|
77
|
+
* {"key":"8","label":"Extra Large"}
|
|
78
|
+
* ]
|
|
79
|
+
* },
|
|
80
|
+
* {
|
|
81
|
+
* "key":"Scroll Snap",
|
|
82
|
+
* "prefix":"snap",
|
|
83
|
+
* "type":"select",
|
|
84
|
+
* "options":[
|
|
85
|
+
* {"key":"none","label":"None"},
|
|
86
|
+
* {"key":"x","label":"Horizontal"},
|
|
87
|
+
* {"key":"y","label":"Vertical"},
|
|
88
|
+
* {"key":"both","label":"Both"}
|
|
89
|
+
* ]
|
|
90
|
+
* },
|
|
91
|
+
* {
|
|
92
|
+
* "key":"Scroll Behavior",
|
|
93
|
+
* "prefix":"scroll",
|
|
94
|
+
* "type":"select",
|
|
95
|
+
* "options":[
|
|
96
|
+
* {"key":"auto","label":"Auto"},
|
|
97
|
+
* {"key":"smooth","label":"Smooth"}
|
|
98
|
+
* ]
|
|
99
|
+
* }
|
|
100
|
+
* ]
|
|
101
|
+
*/
|
|
102
|
+
className?: string;
|
|
103
|
+
}
|
|
104
|
+
export default function ScrollArea({ children, as, className, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/ScrollArea/index.tsx
|
|
4
|
+
function t({ children: t, as: n = "div", className: r = "", ...i }) {
|
|
5
|
+
return /* @__PURE__ */ e(n, {
|
|
6
|
+
...i,
|
|
7
|
+
className: ["overflow-auto", r].filter(Boolean).join(" "),
|
|
8
|
+
children: t
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { t as default };
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type SectionElement = "section" | "div" | "main" | "article" | "aside";
|
|
3
|
+
export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** @select|section|div|main|article|aside */
|
|
6
|
+
as?: SectionElement;
|
|
7
|
+
/**
|
|
8
|
+
* @type|class
|
|
9
|
+
* @schema [
|
|
10
|
+
* {
|
|
11
|
+
* "key":"Width",
|
|
12
|
+
* "prefix":"w",
|
|
13
|
+
* "type":"select",
|
|
14
|
+
* "options":[
|
|
15
|
+
* {"key":"auto","label":"Auto"},
|
|
16
|
+
* {"key":"full","label":"Full Width"},
|
|
17
|
+
* {"key":"screen","label":"Screen"}
|
|
18
|
+
* ]
|
|
19
|
+
* },
|
|
20
|
+
* {
|
|
21
|
+
* "key":"Min Height",
|
|
22
|
+
* "prefix":"min-h",
|
|
23
|
+
* "type":"select",
|
|
24
|
+
* "options":[
|
|
25
|
+
* {"key":"0","label":"None"},
|
|
26
|
+
* {"key":"full","label":"Full"},
|
|
27
|
+
* {"key":"screen","label":"Screen"}
|
|
28
|
+
* ]
|
|
29
|
+
* },
|
|
30
|
+
* {
|
|
31
|
+
* "key":"Padding X",
|
|
32
|
+
* "prefix":"px",
|
|
33
|
+
* "type":"select",
|
|
34
|
+
* "options":[
|
|
35
|
+
* {"key":"0","label":"None"},
|
|
36
|
+
* {"key":"2","label":"Small"},
|
|
37
|
+
* {"key":"4","label":"Medium"},
|
|
38
|
+
* {"key":"6","label":"Large"},
|
|
39
|
+
* {"key":"8","label":"Extra Large"},
|
|
40
|
+
* {"key":"12","label":"2XL"},
|
|
41
|
+
* {"key":"16","label":"3XL"}
|
|
42
|
+
* ]
|
|
43
|
+
* },
|
|
44
|
+
* {
|
|
45
|
+
* "key":"Padding Y",
|
|
46
|
+
* "prefix":"py",
|
|
47
|
+
* "type":"select",
|
|
48
|
+
* "options":[
|
|
49
|
+
* {"key":"0","label":"None"},
|
|
50
|
+
* {"key":"2","label":"Small"},
|
|
51
|
+
* {"key":"4","label":"Medium"},
|
|
52
|
+
* {"key":"6","label":"Large"},
|
|
53
|
+
* {"key":"8","label":"Extra Large"},
|
|
54
|
+
* {"key":"12","label":"2XL"},
|
|
55
|
+
* {"key":"16","label":"3XL"},
|
|
56
|
+
* {"key":"20","label":"4XL"},
|
|
57
|
+
* {"key":"24","label":"5XL"}
|
|
58
|
+
* ]
|
|
59
|
+
* },
|
|
60
|
+
* {
|
|
61
|
+
* "key":"Background",
|
|
62
|
+
* "prefix":"bg",
|
|
63
|
+
* "type":"select",
|
|
64
|
+
* "options":[
|
|
65
|
+
* {"key":"transparent","label":"Transparent"},
|
|
66
|
+
* {"key":"white","label":"White"},
|
|
67
|
+
* {"key":"gray-50","label":"Gray 50"},
|
|
68
|
+
* {"key":"gray-100","label":"Gray 100"},
|
|
69
|
+
* {"key":"gray-900","label":"Gray 900"},
|
|
70
|
+
* {"key":"black","label":"Black"}
|
|
71
|
+
* ]
|
|
72
|
+
* },
|
|
73
|
+
* {
|
|
74
|
+
* "key":"Text Color",
|
|
75
|
+
* "prefix":"text",
|
|
76
|
+
* "type":"select",
|
|
77
|
+
* "options":[
|
|
78
|
+
* {"key":"gray-900","label":"Dark"},
|
|
79
|
+
* {"key":"gray-700","label":"Gray"},
|
|
80
|
+
* {"key":"white","label":"White"},
|
|
81
|
+
* {"key":"black","label":"Black"}
|
|
82
|
+
* ]
|
|
83
|
+
* },
|
|
84
|
+
* {
|
|
85
|
+
* "key":"Overflow",
|
|
86
|
+
* "prefix":"overflow",
|
|
87
|
+
* "type":"select",
|
|
88
|
+
* "options":[
|
|
89
|
+
* {"key":"visible","label":"Visible"},
|
|
90
|
+
* {"key":"hidden","label":"Hidden"},
|
|
91
|
+
* {"key":"auto","label":"Auto"},
|
|
92
|
+
* {"key":"scroll","label":"Scroll"}
|
|
93
|
+
* ]
|
|
94
|
+
* },
|
|
95
|
+
* {
|
|
96
|
+
* "key":"Position",
|
|
97
|
+
* "prefix":"",
|
|
98
|
+
* "type":"select",
|
|
99
|
+
* "options":[
|
|
100
|
+
* {"key":"static","label":"Static"},
|
|
101
|
+
* {"key":"relative","label":"Relative"},
|
|
102
|
+
* {"key":"absolute","label":"Absolute"},
|
|
103
|
+
* {"key":"fixed","label":"Fixed"},
|
|
104
|
+
* {"key":"sticky","label":"Sticky"}
|
|
105
|
+
* ]
|
|
106
|
+
* }
|
|
107
|
+
* ]
|
|
108
|
+
*/
|
|
109
|
+
className?: string;
|
|
110
|
+
}
|
|
111
|
+
export default function Section({ children, as, className, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/Section/index.tsx
|
|
4
|
+
function t({ children: t, as: n = "section", className: r = "", ...i }) {
|
|
5
|
+
return /* @__PURE__ */ e(n, {
|
|
6
|
+
...i,
|
|
7
|
+
className: ["w-full", r].filter(Boolean).join(" "),
|
|
8
|
+
children: t
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { t as default };
|
|
@@ -1,57 +1,26 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export type StackElement = "div" | "section" | "article" | "main" | "aside" | "nav";
|
|
3
|
+
export type StackDirection = "vertical" | "horizontal";
|
|
4
|
+
export type StackGap = "0" | "1" | "2" | "3" | "4" | "6" | "8" | "10" | "12";
|
|
5
|
+
export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
|
|
6
|
+
export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
|
|
7
|
+
export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className"> {
|
|
3
8
|
children?: React.ReactNode;
|
|
4
|
-
/**
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
*
|
|
17
|
-
* "options": [
|
|
18
|
-
* {"key": "start", "label": "Start"},
|
|
19
|
-
* {"key": "center", "label": "Center"},
|
|
20
|
-
* {"key": "end", "label": "End"},
|
|
21
|
-
* {"key": "stretch", "label": "Stretch"}
|
|
22
|
-
* ]
|
|
23
|
-
* },{
|
|
24
|
-
* "key": "Justify Content (Main Axis)",
|
|
25
|
-
* "prefix": "justify",
|
|
26
|
-
* "type": "select",
|
|
27
|
-
* "options": [
|
|
28
|
-
* {"key": "start", "label": "Start"},
|
|
29
|
-
* {"key": "center", "label": "Center"},
|
|
30
|
-
* {"key": "end", "label": "End"},
|
|
31
|
-
* {"key": "between", "label": "Space Between"},
|
|
32
|
-
* {"key": "around", "label": "Space Around"}
|
|
33
|
-
* ]
|
|
34
|
-
* },{
|
|
35
|
-
* "key": "Gap",
|
|
36
|
-
* "prefix": "gap",
|
|
37
|
-
* "type": "select",
|
|
38
|
-
* "options": [
|
|
39
|
-
* {"key": "0", "label": "None (0px)"},
|
|
40
|
-
* {"key": "2", "label": "Small (8px)"},
|
|
41
|
-
* {"key": "4", "label": "Medium (16px)"},
|
|
42
|
-
* {"key": "8", "label": "Large (32px)"},
|
|
43
|
-
* {"key": "12", "label": "Extra Large (48px)"}
|
|
44
|
-
* ]
|
|
45
|
-
* },{
|
|
46
|
-
* "key": "Wrap Content",
|
|
47
|
-
* "prefix": "flex",
|
|
48
|
-
* "type": "select",
|
|
49
|
-
* "options": [
|
|
50
|
-
* {"key": "wrap", "label": "Wrap"},
|
|
51
|
-
* {"key": "nowrap", "label": "No Wrap"}
|
|
52
|
-
* ]
|
|
53
|
-
* }]
|
|
9
|
+
/** @select|div|section|article|main|aside|nav */
|
|
10
|
+
as?: StackElement;
|
|
11
|
+
/** @select|vertical|horizontal */
|
|
12
|
+
direction?: StackDirection;
|
|
13
|
+
/** @select|0|1|2|3|4|6|8|10|12 */
|
|
14
|
+
gap?: StackGap;
|
|
15
|
+
/** @select|start|center|end|stretch|baseline */
|
|
16
|
+
align?: StackAlign;
|
|
17
|
+
/** @select|start|center|end|between|around|evenly */
|
|
18
|
+
justify?: StackJustify;
|
|
19
|
+
wrap?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* @type|class
|
|
22
|
+
* @schema [{"key":"Width","prefix":"w","type":"select","options":[{"key":"auto","label":"Auto"},{"key":"full","label":"Full Width"},{"key":"screen","label":"Screen"}]},{"key":"Height","prefix":"h","type":"select","options":[{"key":"auto","label":"Auto"},{"key":"full","label":"Full Height"},{"key":"screen","label":"Screen"}]},{"key":"Padding","prefix":"p","type":"select","options":[{"key":"0","label":"None"},{"key":"2","label":"Small"},{"key":"4","label":"Medium"},{"key":"6","label":"Large"},{"key":"8","label":"Extra Large"},{"key":"12","label":"2XL"}]},{"key":"Background","prefix":"bg","type":"select","options":[{"key":"transparent","label":"Transparent"},{"key":"white","label":"White"},{"key":"gray-50","label":"Gray 50"},{"key":"gray-100","label":"Gray 100"},{"key":"gray-900","label":"Gray 900"},{"key":"black","label":"Black"}]}]
|
|
54
23
|
*/
|
|
55
24
|
className?: string;
|
|
56
25
|
}
|
|
57
|
-
export default function Stack({
|
|
26
|
+
export default function Stack({ children, as, direction, gap, align, justify, wrap, className, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,48 @@
|
|
|
1
1
|
import "react";
|
|
2
2
|
import { jsx as e } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/Stack/index.tsx
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
var t = {
|
|
5
|
+
vertical: "flex-col",
|
|
6
|
+
horizontal: "flex-row"
|
|
7
|
+
}, n = {
|
|
8
|
+
0: "gap-0",
|
|
9
|
+
1: "gap-1",
|
|
10
|
+
2: "gap-2",
|
|
11
|
+
3: "gap-3",
|
|
12
|
+
4: "gap-4",
|
|
13
|
+
6: "gap-6",
|
|
14
|
+
8: "gap-8",
|
|
15
|
+
10: "gap-10",
|
|
16
|
+
12: "gap-12"
|
|
17
|
+
}, r = {
|
|
18
|
+
start: "items-start",
|
|
19
|
+
center: "items-center",
|
|
20
|
+
end: "items-end",
|
|
21
|
+
stretch: "items-stretch",
|
|
22
|
+
baseline: "items-baseline"
|
|
23
|
+
}, i = {
|
|
24
|
+
start: "justify-start",
|
|
25
|
+
center: "justify-center",
|
|
26
|
+
end: "justify-end",
|
|
27
|
+
between: "justify-between",
|
|
28
|
+
around: "justify-around",
|
|
29
|
+
evenly: "justify-evenly"
|
|
30
|
+
};
|
|
31
|
+
function a({ children: a, as: o = "div", direction: s = "vertical", gap: c = "4", align: l = "stretch", justify: u = "start", wrap: d = !1, className: f = "", ...p }) {
|
|
32
|
+
let m = o, h = [
|
|
33
|
+
"flex",
|
|
34
|
+
t[s],
|
|
35
|
+
n[c],
|
|
36
|
+
r[l],
|
|
37
|
+
i[u],
|
|
38
|
+
d ? "flex-wrap" : "flex-nowrap",
|
|
39
|
+
f
|
|
40
|
+
].filter(Boolean).join(" ");
|
|
41
|
+
return /* @__PURE__ */ e(m, {
|
|
42
|
+
...p,
|
|
43
|
+
className: h,
|
|
44
|
+
children: a
|
|
9
45
|
});
|
|
10
46
|
}
|
|
11
47
|
//#endregion
|
|
12
|
-
export {
|
|
48
|
+
export { a as default };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface VirtualListRenderContext {
|
|
3
|
+
item: any;
|
|
4
|
+
index: number;
|
|
5
|
+
}
|
|
6
|
+
export interface VirtualListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
|
|
7
|
+
/**
|
|
8
|
+
* List data.
|
|
9
|
+
*
|
|
10
|
+
* @type|json
|
|
11
|
+
*/
|
|
12
|
+
items?: any[];
|
|
13
|
+
/**
|
|
14
|
+
* Item renderer.
|
|
15
|
+
*
|
|
16
|
+
* @nodeFunction
|
|
17
|
+
*/
|
|
18
|
+
children?: React.ReactNode | ((context: VirtualListRenderContext) => React.ReactNode);
|
|
19
|
+
/**
|
|
20
|
+
* Height of one item in pixels.
|
|
21
|
+
*/
|
|
22
|
+
itemHeight?: number;
|
|
23
|
+
/**
|
|
24
|
+
* Visible list height.
|
|
25
|
+
*/
|
|
26
|
+
height?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Additional items rendered above
|
|
29
|
+
* and below the viewport.
|
|
30
|
+
*/
|
|
31
|
+
overscan?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Gap between rows.
|
|
34
|
+
*/
|
|
35
|
+
gap?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Index to scroll to.
|
|
38
|
+
*
|
|
39
|
+
* Updating this prop scrolls
|
|
40
|
+
* the list to that item.
|
|
41
|
+
*/
|
|
42
|
+
scrollToIndex?: number;
|
|
43
|
+
/**
|
|
44
|
+
* @select|start|center|end
|
|
45
|
+
*/
|
|
46
|
+
scrollAlignment?: "start" | "center" | "end";
|
|
47
|
+
/**
|
|
48
|
+
* Initial scroll index.
|
|
49
|
+
*/
|
|
50
|
+
initialScrollIndex?: number;
|
|
51
|
+
/**
|
|
52
|
+
* Trigger onEndReached when this many
|
|
53
|
+
* items remain below the visible range.
|
|
54
|
+
*/
|
|
55
|
+
endReachedThreshold?: number;
|
|
56
|
+
/**
|
|
57
|
+
* Empty builder message.
|
|
58
|
+
*/
|
|
59
|
+
emptyText?: string;
|
|
60
|
+
/**
|
|
61
|
+
* @type|class
|
|
62
|
+
*/
|
|
63
|
+
className?: string;
|
|
64
|
+
/**
|
|
65
|
+
* @type|class
|
|
66
|
+
*/
|
|
67
|
+
itemClassName?: string;
|
|
68
|
+
/**
|
|
69
|
+
* @type|class
|
|
70
|
+
*/
|
|
71
|
+
contentClassName?: string;
|
|
72
|
+
/**
|
|
73
|
+
* @type|complex
|
|
74
|
+
* @schema {"type":"object"}
|
|
75
|
+
*/
|
|
76
|
+
customAttributes?: Record<string, string>;
|
|
77
|
+
/**
|
|
78
|
+
* @type|function
|
|
79
|
+
*/
|
|
80
|
+
onScrollChange?: (scrollTop: number) => void;
|
|
81
|
+
/**
|
|
82
|
+
* @type|function
|
|
83
|
+
*/
|
|
84
|
+
onVisibleRangeChange?: (startIndex: number, endIndex: number) => void;
|
|
85
|
+
/**
|
|
86
|
+
* @type|function
|
|
87
|
+
*/
|
|
88
|
+
onEndReached?: () => void;
|
|
89
|
+
/**
|
|
90
|
+
* @type|function
|
|
91
|
+
*/
|
|
92
|
+
onItemClick?: (item: any, index: number) => void;
|
|
93
|
+
}
|
|
94
|
+
export default function VirtualList({ items, children, itemHeight, height, overscan, gap, scrollToIndex, scrollAlignment, initialScrollIndex, endReachedThreshold, emptyText, className, itemClassName, contentClassName, customAttributes, onScrollChange, onVisibleRangeChange, onEndReached, onItemClick, style, ...props }: VirtualListProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
|
|
2
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/VirtualList/index.tsx
|
|
4
|
+
function a(e, t, n) {
|
|
5
|
+
return Math.max(t, Math.min(n, e));
|
|
6
|
+
}
|
|
7
|
+
function o({ items: o = [], children: s, itemHeight: c = 56, height: l = 400, overscan: u = 3, gap: d = 0, scrollToIndex: f, scrollAlignment: p = "start", initialScrollIndex: m = 0, endReachedThreshold: h = 3, emptyText: g = "Add list items", className: _ = "w-full", itemClassName: v = "", contentClassName: y = "", customAttributes: b = {}, onScrollChange: x, onVisibleRangeChange: S, onEndReached: C, onItemClick: w, style: T, ...E }) {
|
|
8
|
+
let D = n(null), O = n(!1), [k, A] = r(0), j = Math.max(1, c), M = Math.max(0, d), N = j + M, P = o.length > 0 ? o.length * N - M : 0, F = Math.max(1, Math.ceil(l / N)), I = Math.floor(k / N), L = a(I - Math.max(0, u), 0, Math.max(0, o.length - 1)), R = a(I + F + Math.max(0, u), 0, Math.max(0, o.length - 1)), z = t(() => {
|
|
9
|
+
if (o.length === 0) return [];
|
|
10
|
+
let e = [];
|
|
11
|
+
for (let t = L; t <= R; t++) e.push({
|
|
12
|
+
item: o[t],
|
|
13
|
+
index: t
|
|
14
|
+
});
|
|
15
|
+
return e;
|
|
16
|
+
}, [
|
|
17
|
+
o,
|
|
18
|
+
L,
|
|
19
|
+
R
|
|
20
|
+
]), B = (e) => {
|
|
21
|
+
let t = a(e, 0, Math.max(0, o.length - 1)) * N;
|
|
22
|
+
return p === "center" ? Math.max(0, t - l / 2 + j / 2) : p === "end" ? Math.max(0, t - l + j) : t;
|
|
23
|
+
}, V = (e, t = "auto") => {
|
|
24
|
+
let n = D.current;
|
|
25
|
+
!n || o.length === 0 || n.scrollTo({
|
|
26
|
+
top: B(e),
|
|
27
|
+
behavior: t
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
return e(() => {
|
|
31
|
+
if (o.length === 0 || m <= 0) return;
|
|
32
|
+
let e = requestAnimationFrame(() => {
|
|
33
|
+
V(m);
|
|
34
|
+
});
|
|
35
|
+
return () => {
|
|
36
|
+
cancelAnimationFrame(e);
|
|
37
|
+
};
|
|
38
|
+
}, []), e(() => {
|
|
39
|
+
f !== void 0 && V(f, "smooth");
|
|
40
|
+
}, [
|
|
41
|
+
f,
|
|
42
|
+
o.length,
|
|
43
|
+
N,
|
|
44
|
+
l,
|
|
45
|
+
p
|
|
46
|
+
]), e(() => {
|
|
47
|
+
if (o.length === 0) return;
|
|
48
|
+
let e = a(I, 0, o.length - 1), t = a(I + F - 1, 0, o.length - 1);
|
|
49
|
+
S?.(e, t), o.length - 1 - t <= Math.max(0, h) ? O.current || (O.current = !0, C?.()) : O.current = !1;
|
|
50
|
+
}, [
|
|
51
|
+
I,
|
|
52
|
+
F,
|
|
53
|
+
o.length,
|
|
54
|
+
h
|
|
55
|
+
]), o.length === 0 ? /* @__PURE__ */ i("div", {
|
|
56
|
+
className: _,
|
|
57
|
+
...b,
|
|
58
|
+
...E,
|
|
59
|
+
style: {
|
|
60
|
+
width: "100%",
|
|
61
|
+
height: l,
|
|
62
|
+
display: "flex",
|
|
63
|
+
alignItems: "center",
|
|
64
|
+
justifyContent: "center",
|
|
65
|
+
padding: 16,
|
|
66
|
+
border: "1px dashed #d1d5db",
|
|
67
|
+
borderRadius: 8,
|
|
68
|
+
color: "#9ca3af",
|
|
69
|
+
fontSize: 13,
|
|
70
|
+
boxSizing: "border-box",
|
|
71
|
+
...T
|
|
72
|
+
},
|
|
73
|
+
children: typeof s == "function" ? s({
|
|
74
|
+
item: null,
|
|
75
|
+
index: 0
|
|
76
|
+
}) : g
|
|
77
|
+
}) : /* @__PURE__ */ i("div", {
|
|
78
|
+
ref: D,
|
|
79
|
+
className: _,
|
|
80
|
+
...b,
|
|
81
|
+
...E,
|
|
82
|
+
onScroll: (e) => {
|
|
83
|
+
let t = e.currentTarget.scrollTop;
|
|
84
|
+
A(t), x?.(t);
|
|
85
|
+
},
|
|
86
|
+
style: {
|
|
87
|
+
position: "relative",
|
|
88
|
+
width: "100%",
|
|
89
|
+
height: l,
|
|
90
|
+
overflowY: "auto",
|
|
91
|
+
overflowX: "hidden",
|
|
92
|
+
WebkitOverflowScrolling: "touch",
|
|
93
|
+
boxSizing: "border-box",
|
|
94
|
+
...T
|
|
95
|
+
},
|
|
96
|
+
children: /* @__PURE__ */ i("div", {
|
|
97
|
+
className: y,
|
|
98
|
+
style: {
|
|
99
|
+
position: "relative",
|
|
100
|
+
width: "100%",
|
|
101
|
+
height: P,
|
|
102
|
+
minHeight: P,
|
|
103
|
+
boxSizing: "border-box"
|
|
104
|
+
},
|
|
105
|
+
children: z.map(({ item: e, index: t }) => /* @__PURE__ */ i("div", {
|
|
106
|
+
className: v,
|
|
107
|
+
"data-index": t,
|
|
108
|
+
onClick: () => w?.(e, t),
|
|
109
|
+
style: {
|
|
110
|
+
position: "absolute",
|
|
111
|
+
top: t * N,
|
|
112
|
+
left: 0,
|
|
113
|
+
right: 0,
|
|
114
|
+
height: j,
|
|
115
|
+
overflow: "hidden",
|
|
116
|
+
boxSizing: "border-box"
|
|
117
|
+
},
|
|
118
|
+
children: typeof s == "function" ? s({
|
|
119
|
+
item: e,
|
|
120
|
+
index: t
|
|
121
|
+
}) : s
|
|
122
|
+
}, e?.id ?? t))
|
|
123
|
+
})
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
//#endregion
|
|
127
|
+
export { o as default };
|
package/index.d.ts
CHANGED
|
@@ -1,18 +1,30 @@
|
|
|
1
|
+
export type { AspectRatioElement, AspectRatioProps } from './components/AspectRatio';
|
|
2
|
+
export { default as AspectRatio } from './components/AspectRatio';
|
|
1
3
|
export type { BoxProps } from './components/Box';
|
|
2
4
|
export { default as Box } from './components/Box';
|
|
3
5
|
export type { RudraCarouselProps } from './components/Carousel';
|
|
4
6
|
export { default as RudraCarousel } from './components/Carousel';
|
|
7
|
+
export type { ContainerElement, ContainerMaxWidth, ContainerProps } from './components/Container';
|
|
8
|
+
export { default as Container } from './components/Container';
|
|
5
9
|
export type { RepeaterCarouselProps } from './components/DataCarousel';
|
|
6
10
|
export { default as RepeaterCarousel } from './components/DataCarousel';
|
|
7
|
-
export type {
|
|
11
|
+
export type { FlexElement, FlexProps } from './components/Flex';
|
|
12
|
+
export { default as Flex } from './components/Flex';
|
|
13
|
+
export type { GridElement, GridProps } from './components/Grid';
|
|
8
14
|
export { default as Grid } from './components/Grid';
|
|
9
15
|
export type { RepeaterProps } from './components/Repeater';
|
|
10
16
|
export { default as Repeater } from './components/Repeater';
|
|
11
17
|
export type { RepeaterTableProps } from './components/RepeaterTable';
|
|
12
18
|
export { default as RepeaterTable } from './components/RepeaterTable';
|
|
13
|
-
export type {
|
|
19
|
+
export type { ScrollAreaElement, ScrollAreaProps } from './components/ScrollArea';
|
|
20
|
+
export { default as ScrollArea } from './components/ScrollArea';
|
|
21
|
+
export type { SectionElement, SectionProps } from './components/Section';
|
|
22
|
+
export { default as Section } from './components/Section';
|
|
23
|
+
export type { StackAlign, StackDirection, StackElement, StackGap, StackJustify, StackProps } from './components/Stack';
|
|
14
24
|
export { default as Stack } from './components/Stack';
|
|
15
25
|
export type { ComplexGridProps } from './components/StructuredGrid';
|
|
16
26
|
export { default as ComplexGrid } from './components/StructuredGrid';
|
|
17
27
|
export type { DataTableProps } from './components/Table';
|
|
18
28
|
export { default as DataTable } from './components/Table';
|
|
29
|
+
export type { VirtualListProps, VirtualListRenderContext } from './components/VirtualList';
|
|
30
|
+
export { default as VirtualList } from './components/VirtualList';
|
package/index.js
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import e from "./components/
|
|
2
|
-
import t from "./components/
|
|
3
|
-
import n from "./components/
|
|
4
|
-
import r from "./components/
|
|
5
|
-
import i from "./components/
|
|
6
|
-
import a from "./components/
|
|
7
|
-
import o from "./components/
|
|
8
|
-
import s from "./components/
|
|
9
|
-
import c from "./components/
|
|
10
|
-
|
|
1
|
+
import e from "./components/AspectRatio/index.js";
|
|
2
|
+
import t from "./components/Box/index.js";
|
|
3
|
+
import n from "./components/Carousel/index.js";
|
|
4
|
+
import r from "./components/Container/index.js";
|
|
5
|
+
import i from "./components/DataCarousel/index.js";
|
|
6
|
+
import a from "./components/Flex/index.js";
|
|
7
|
+
import o from "./components/Grid/index.js";
|
|
8
|
+
import s from "./components/Repeater/index.js";
|
|
9
|
+
import c from "./components/RepeaterTable/index.js";
|
|
10
|
+
import l from "./components/ScrollArea/index.js";
|
|
11
|
+
import u from "./components/Section/index.js";
|
|
12
|
+
import d from "./components/Stack/index.js";
|
|
13
|
+
import f from "./components/StructuredGrid/index.js";
|
|
14
|
+
import p from "./components/Table/index.js";
|
|
15
|
+
import m from "./components/VirtualList/index.js";
|
|
16
|
+
export { e as AspectRatio, t as Box, f as ComplexGrid, r as Container, p as DataTable, a as Flex, o as Grid, s as Repeater, i as RepeaterCarousel, c as RepeaterTable, n as RudraCarousel, l as ScrollArea, u as Section, d as Stack, m as VirtualList };
|
package/package.json
CHANGED