@rudra-studio/rudra-layout 1.0.17 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/components/AspectRatio/index.d.ts +64 -0
  2. package/components/AspectRatio/index.js +12 -0
  3. package/components/Container/index.d.ts +17 -0
  4. package/components/Container/index.js +27 -0
  5. package/components/Flex/index.d.ts +98 -0
  6. package/components/Flex/index.js +12 -0
  7. package/components/Grid/index.d.ts +132 -25
  8. package/components/Grid/index.js +5 -5
  9. package/components/ScrollArea/index.d.ts +104 -0
  10. package/components/ScrollArea/index.js +12 -0
  11. package/components/Section/index.d.ts +111 -0
  12. package/components/Section/index.js +12 -0
  13. package/components/Stack/index.d.ts +21 -52
  14. package/components/Stack/index.js +42 -6
  15. package/index.d.ts +12 -2
  16. package/index.js +15 -10
  17. package/package.json +1 -1
package/components/AspectRatio/index.d.ts ADDED
@@ -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;
package/components/AspectRatio/index.js ADDED
@@ -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 };
package/components/Container/index.d.ts ADDED
@@ -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;
package/components/Container/index.js ADDED
@@ -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 };
package/components/Flex/index.d.ts ADDED
@@ -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;
package/components/Flex/index.js ADDED
@@ -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 };
package/components/Grid/index.d.ts CHANGED
@@ -1,31 +1,138 @@
1
1
  import { default as React } from 'react';
2
- export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
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
- /** @type|class
5
- * @schema [{
6
- * "key": "Columns",
7
- * "prefix": "grid-cols",
8
- * "type": "select",
9
- * "options": [
10
- * {"key": "1", "label": "1 Column"},
11
- * {"key": "2", "label": "2 Columns"},
12
- * {"key": "3", "label": "3 Columns"},
13
- * {"key": "4", "label": "4 Columns"},
14
- * {"key": "[repeat(auto-fit,minmax(250px,1fr))]", "label": "Auto-Fit (Cards)"}
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({ className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
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({ className: t = "", children: n, ...r }) {
5
- return /* @__PURE__ */ e("div", {
6
- className: `grid w-full ${t}`.trim(),
7
- ...r,
8
- children: n
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
package/components/ScrollArea/index.d.ts ADDED
@@ -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;
package/components/ScrollArea/index.js ADDED
@@ -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 };
package/components/Section/index.d.ts ADDED
@@ -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;
package/components/Section/index.js ADDED
@@ -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 };
package/components/Stack/index.d.ts CHANGED
@@ -1,57 +1,26 @@
1
1
  import { default as React } from 'react';
2
- export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
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
- /** *@type|class
5
- * @schema [{
6
- * "key": "Direction",
7
- * "prefix": "flex",
8
- * "type": "select",
9
- * "options": [
10
- * {"key": "row", "label": "Row"},
11
- * {"key": "col", "label": "Column"}
12
- * ]
13
- * },{
14
- * "key": "Align Items (Cross Axis)",
15
- * "prefix": "items",
16
- * "type": "select",
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({ className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
26
+ export default function Stack({ children, as, direction, gap, align, justify, wrap, className, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
package/components/Stack/index.js CHANGED
@@ -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
- function t({ className: t = "", children: n, ...r }) {
5
- return /* @__PURE__ */ e("div", {
6
- className: `flex w-full ${t}`.trim(),
7
- ...r,
8
- children: n
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 { t as default };
48
+ export { a as default };
package/index.d.ts CHANGED
@@ -1,16 +1,26 @@
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 { GridProps } from './components/Grid';
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 { StackProps } from './components/Stack';
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';
package/index.js CHANGED
@@ -1,10 +1,15 @@
1
- import e from "./components/Box/index.js";
2
- import t from "./components/Carousel/index.js";
3
- import n from "./components/DataCarousel/index.js";
4
- import r from "./components/Grid/index.js";
5
- import i from "./components/Repeater/index.js";
6
- import a from "./components/RepeaterTable/index.js";
7
- import o from "./components/Stack/index.js";
8
- import s from "./components/StructuredGrid/index.js";
9
- import c from "./components/Table/index.js";
10
- export { e as Box, s as ComplexGrid, c as DataTable, r as Grid, i as Repeater, n as RepeaterCarousel, a as RepeaterTable, t as RudraCarousel, o as Stack };
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
+ 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 };
package/package.json CHANGED
@@ -42,5 +42,5 @@
42
42
  },
43
43
  "types": "./index.d.ts",
44
44
  "unpkg": "./index.umd.js",
45
- "version": "1.0.17"
45
+ "version": "1.0.18"
46
46
  }