jvetrau-ds 0.1.5 → 0.1.7

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 (11) hide show
  1. package/base.css +188 -0
  2. package/index.d.cts +2 -23
  3. package/index.d.ts +2 -23
  4. package/layouts.cjs +100 -0
  5. package/layouts.cjs.map +1 -0
  6. package/layouts.d.cts +25 -0
  7. package/layouts.d.ts +25 -0
  8. package/layouts.js +96 -0
  9. package/layouts.js.map +1 -0
  10. package/package.json +7 -1
  11. package/styles.css +7 -7
package/base.css ADDED
@@ -0,0 +1,188 @@
1
+ /* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
2
+
3
+
4
+
5
+ /* src/base/reset.css */
6
+ *,
7
+ *::before,
8
+ *::after {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ html {
13
+ -webkit-text-size-adjust: 100%;
14
+ }
15
+
16
+ body {
17
+ margin: 0;
18
+ }
19
+
20
+ /* src/base/color.css */
21
+ html,
22
+ body {
23
+ /* color */
24
+ --body-bg: var(--color-bg);
25
+ --body-color: var(--color-text);
26
+
27
+ background: var(--body-bg);
28
+ color: var(--body-color);
29
+ }
30
+
31
+ /* src/base/typography.css */
32
+ body {
33
+ /* typography */
34
+ --body-font-family: var(--font-body-family);
35
+ --body-font-size: var(--font-body);
36
+ --body-font-weight: var(--font-body-weight);
37
+ --body-line-height: var(--font-body-line);
38
+ --body-letter-spacing: var(--font-body-letter-spacing);
39
+
40
+ font-family: var(--body-font-family);
41
+ font-size: var(--body-font-size);
42
+ font-weight: var(--body-font-weight);
43
+ line-height: var(--body-line-height);
44
+ letter-spacing: var(--body-letter-spacing);
45
+
46
+ /* size */
47
+
48
+ /* border */
49
+
50
+ /* depth */
51
+
52
+ /* motion */
53
+ font-synthesis: none;
54
+ text-rendering: optimizeLegibility;
55
+ -webkit-font-smoothing: antialiased;
56
+ -moz-osx-font-smoothing: grayscale;
57
+ }
58
+
59
+ h1 {
60
+ /* typography */
61
+ --h1-font-family: var(--font-h1-family);
62
+ --h1-font-size: var(--font-h1);
63
+ --h1-font-weight: var(--font-h1-weight);
64
+ --h1-line-height: var(--font-h1-line);
65
+ --h1-letter-spacing: var(--font-h1-letter-spacing);
66
+
67
+ font-family: var(--h1-font-family);
68
+ font-size: var(--h1-font-size);
69
+ font-weight: var(--h1-font-weight);
70
+ line-height: var(--h1-line-height);
71
+ letter-spacing: var(--h1-letter-spacing);
72
+
73
+ /* size */
74
+ --h1-margin: var(--font-h1-margin);
75
+
76
+ margin: 0 0 var(--h1-margin);
77
+
78
+ /* border */
79
+
80
+ /* depth */
81
+
82
+ /* motion */
83
+ }
84
+
85
+ h2 {
86
+ /* typography */
87
+ --h2-font-family: var(--font-h2-family);
88
+ --h2-font-size: var(--font-h2);
89
+ --h2-font-weight: var(--font-h2-weight);
90
+ --h2-line-height: var(--font-h2-line);
91
+ --h2-letter-spacing: var(--font-h2-letter-spacing);
92
+
93
+ font-family: var(--h2-font-family);
94
+ font-size: var(--h2-font-size);
95
+ font-weight: var(--h2-font-weight);
96
+ line-height: var(--h2-line-height);
97
+ letter-spacing: var(--h2-letter-spacing);
98
+
99
+ /* size */
100
+ --h2-margin: var(--font-h2-margin);
101
+
102
+ margin: 0 0 var(--h2-margin);
103
+
104
+ /* border */
105
+
106
+ /* depth */
107
+
108
+ /* motion */
109
+ }
110
+
111
+ h3 {
112
+ /* typography */
113
+ --h3-font-family: var(--font-h3-family);
114
+ --h3-font-size: var(--font-h3);
115
+ --h3-font-weight: var(--font-h3-weight);
116
+ --h3-line-height: var(--font-h3-line);
117
+ --h3-letter-spacing: var(--font-h3-letter-spacing);
118
+
119
+ font-family: var(--h3-font-family);
120
+ font-size: var(--h3-font-size);
121
+ font-weight: var(--h3-font-weight);
122
+ line-height: var(--h3-line-height);
123
+ letter-spacing: var(--h3-letter-spacing);
124
+
125
+ /* size */
126
+ --h3-margin: var(--font-h3-margin);
127
+
128
+ margin: 0 0 var(--h3-margin);
129
+
130
+ /* border */
131
+
132
+ /* depth */
133
+
134
+ /* motion */
135
+ }
136
+
137
+ h4 {
138
+ /* typography */
139
+ --h4-font-family: var(--font-h4-family);
140
+ --h4-font-size: var(--font-h4);
141
+ --h4-font-weight: var(--font-h4-weight);
142
+ --h4-line-height: var(--font-h4-line);
143
+ --h4-letter-spacing: var(--font-h4-letter-spacing);
144
+
145
+ font-family: var(--h4-font-family);
146
+ font-size: var(--h4-font-size);
147
+ font-weight: var(--h4-font-weight);
148
+ line-height: var(--h4-line-height);
149
+ letter-spacing: var(--h4-letter-spacing);
150
+
151
+ /* size */
152
+ --h4-margin: var(--font-h4-margin);
153
+
154
+ margin: 0 0 var(--h4-margin);
155
+
156
+ /* border */
157
+
158
+ /* depth */
159
+
160
+ /* motion */
161
+ }
162
+
163
+ p {
164
+ /* typography */
165
+ --p-font-family: var(--font-body-family);
166
+ --p-font-size: var(--font-body);
167
+ --p-font-weight: var(--font-body-weight);
168
+ --p-line-height: var(--font-body-line);
169
+ --p-letter-spacing: var(--font-body-letter-spacing);
170
+
171
+ font-family: var(--p-font-family);
172
+ font-size: var(--p-font-size);
173
+ font-weight: var(--p-font-weight);
174
+ line-height: var(--p-line-height);
175
+ letter-spacing: var(--p-letter-spacing);
176
+
177
+ /* size */
178
+ --p-margin: var(--font-body-margin);
179
+
180
+ margin: 0 0 var(--p-margin);
181
+
182
+ /* border */
183
+
184
+ /* depth */
185
+
186
+ /* motion */
187
+ }
188
+
package/index.d.cts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { I as IconName } from './public-BFgsu4P2.cjs';
3
3
  export { Footer, FooterProps, Header, HeaderProps, ScreenHeader, ScreenHeaderProps } from './patterns.cjs';
4
+ export { LayoutBase, LayoutBaseProps, LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth, LayoutSidebar, LayoutSidebarProps } from './layouts.cjs';
4
5
 
5
6
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
7
  state?: 'default' | 'primary';
@@ -177,28 +178,6 @@ interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
177
178
  }
178
179
  declare const Avatar: React.FC<AvatarProps>;
179
180
 
180
- type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
181
- interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
182
- width?: LayoutFoundationWidth;
183
- }
184
- declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
185
-
186
- interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
187
- width?: LayoutFoundationWidth;
188
- header?: React.ReactNode;
189
- footer?: React.ReactNode;
190
- }
191
- declare const LayoutBase: React.FC<LayoutBaseProps>;
192
-
193
- interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
194
- width?: LayoutFoundationWidth;
195
- header?: React.ReactNode;
196
- screenHeader?: React.ReactNode;
197
- sidebar?: React.ReactNode;
198
- footer?: React.ReactNode;
199
- }
200
- declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
201
-
202
181
  interface AttachmentItem {
203
182
  id: string;
204
183
  name: string;
@@ -214,4 +193,4 @@ interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
214
193
  }
215
194
  declare const Attachment: React.FC<AttachmentProps>;
216
195
 
217
- export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
196
+ export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
package/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { I as IconName } from './public-BFgsu4P2.js';
3
3
  export { Footer, FooterProps, Header, HeaderProps, ScreenHeader, ScreenHeaderProps } from './patterns.js';
4
+ export { LayoutBase, LayoutBaseProps, LayoutFoundation, LayoutFoundationProps, LayoutFoundationWidth, LayoutSidebar, LayoutSidebarProps } from './layouts.js';
4
5
 
5
6
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
7
  state?: 'default' | 'primary';
@@ -177,28 +178,6 @@ interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
177
178
  }
178
179
  declare const Avatar: React.FC<AvatarProps>;
179
180
 
180
- type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
181
- interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
182
- width?: LayoutFoundationWidth;
183
- }
184
- declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
185
-
186
- interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
187
- width?: LayoutFoundationWidth;
188
- header?: React.ReactNode;
189
- footer?: React.ReactNode;
190
- }
191
- declare const LayoutBase: React.FC<LayoutBaseProps>;
192
-
193
- interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
194
- width?: LayoutFoundationWidth;
195
- header?: React.ReactNode;
196
- screenHeader?: React.ReactNode;
197
- sidebar?: React.ReactNode;
198
- footer?: React.ReactNode;
199
- }
200
- declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
201
-
202
181
  interface AttachmentItem {
203
182
  id: string;
204
183
  name: string;
@@ -214,4 +193,4 @@ interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
214
193
  }
215
194
  declare const Attachment: React.FC<AttachmentProps>;
216
195
 
217
- export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
196
+ export { Attachment, type AttachmentItem, type AttachmentProps, Avatar, type AvatarProps, Button, ButtonIcon, type ButtonIconProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Dropdown, type DropdownProps, Field, type FieldProps, Input, type InputProps, Logo, type LogoProps, Menu, type MenuProps, Panel, type PanelProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichEdit, type RichEditProps, Search, type SearchProps, Select, type SelectProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Video, type VideoProps };
package/layouts.cjs ADDED
@@ -0,0 +1,100 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+
5
+ // src/components/helpers/classnames.ts
6
+ function classnames(...args) {
7
+ const classes = [];
8
+ args.forEach((arg) => {
9
+ if (!arg) return;
10
+ if (typeof arg === "string") {
11
+ classes.push(arg);
12
+ return;
13
+ }
14
+ for (const key in arg) {
15
+ if (arg[key]) {
16
+ classes.push(key);
17
+ }
18
+ }
19
+ });
20
+ return classes.join(" ");
21
+ }
22
+ var LayoutFoundation = ({
23
+ width = "default",
24
+ className = "",
25
+ children,
26
+ ...props
27
+ }) => {
28
+ const classes = classnames("layout-foundation", className, {
29
+ "layout-foundation--narrow": width === "narrow",
30
+ "layout-foundation--wide": width === "wide",
31
+ "layout-foundation--full": width === "full"
32
+ });
33
+ return /* @__PURE__ */ jsxRuntime.jsx(
34
+ "div",
35
+ {
36
+ className: classes,
37
+ ...props,
38
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-foundation__grid", children })
39
+ }
40
+ );
41
+ };
42
+ var foundation_default = LayoutFoundation;
43
+ var LayoutBase = ({
44
+ width = "default",
45
+ header,
46
+ footer,
47
+ children,
48
+ className = "",
49
+ ...props
50
+ }) => {
51
+ return /* @__PURE__ */ jsxRuntime.jsxs(
52
+ foundation_default,
53
+ {
54
+ width,
55
+ className,
56
+ ...props,
57
+ children: [
58
+ header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__header", children: header }),
59
+ /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-base__main", children }),
60
+ footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
61
+ ]
62
+ }
63
+ );
64
+ };
65
+ var base_default = LayoutBase;
66
+ var LayoutSidebar = ({
67
+ width = "wide",
68
+ header,
69
+ screenHeader,
70
+ sidebar,
71
+ footer,
72
+ children,
73
+ className = "",
74
+ ...props
75
+ }) => {
76
+ return /* @__PURE__ */ jsxRuntime.jsxs(
77
+ foundation_default,
78
+ {
79
+ width,
80
+ className,
81
+ ...props,
82
+ children: [
83
+ header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__header", children: header }),
84
+ screenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
85
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-sidebar__body", children: [
86
+ /* @__PURE__ */ jsxRuntime.jsx("main", { className: "layout-sidebar__main", children }),
87
+ sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "layout-sidebar__side", children: sidebar })
88
+ ] }),
89
+ footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__footer", children: footer })
90
+ ]
91
+ }
92
+ );
93
+ };
94
+ var sidebar_default = LayoutSidebar;
95
+
96
+ exports.LayoutBase = base_default;
97
+ exports.LayoutFoundation = foundation_default;
98
+ exports.LayoutSidebar = sidebar_default;
99
+ //# sourceMappingURL=layouts.cjs.map
100
+ //# sourceMappingURL=layouts.cjs.map
package/layouts.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/helpers/classnames.ts","../src/layouts/foundation/foundation.tsx","../src/layouts/base/base.tsx","../src/layouts/sidebar/sidebar.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"layouts.cjs","sourcesContent":["type ClassValue = string | undefined | null | false;\n\nexport function classnames(\n ...args: (ClassValue | Record<string, boolean | undefined | null>)[]\n) {\n const classes: string[] = [];\n\n args.forEach(arg => {\n if (!arg) return;\n\n if (typeof arg === 'string') {\n classes.push(arg);\n return;\n }\n\n for (const key in arg) {\n if (arg[key]) {\n classes.push(key);\n }\n }\n });\n\n return classes.join(' ');\n}","import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n | 'narrow'\n | 'default'\n | 'wide'\n | 'full';\n\nexport interface LayoutFoundationProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n width = 'default',\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames('layout-foundation', className, {\n 'layout-foundation--narrow': width === 'narrow',\n 'layout-foundation--wide': width === 'wide',\n 'layout-foundation--full': width === 'full',\n });\n\n return (\n <div\n className={classes}\n {...props}\n >\n <div className=\"layout-foundation__grid\">\n {children}\n </div>\n </div>\n );\n};\n\nexport default LayoutFoundation;","import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n return (\n <LayoutFoundation\n width={width}\n className={className}\n {...props}\n >\n {header && (\n <div className=\"layout-base__header\">\n {header}\n </div>\n )}\n\n <main className=\"layout-base__main\">\n {children}\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;","import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\n\nexport interface LayoutSidebarProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n header?: React.ReactNode;\n screenHeader?: React.ReactNode;\n sidebar?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutSidebar: React.FC<LayoutSidebarProps> = ({\n width = 'wide',\n header,\n screenHeader,\n sidebar,\n footer,\n children,\n className = '',\n ...props\n}) => {\n return (\n <LayoutFoundation\n width={width}\n className={className}\n {...props}\n >\n {header && (\n <div className=\"layout-sidebar__header\">\n {header}\n </div>\n )}\n\n {screenHeader && (\n <div className=\"layout-sidebar__screen-header\">\n {screenHeader}\n </div>\n )}\n\n <div className=\"layout-sidebar__body\">\n <main className=\"layout-sidebar__main\">\n {children}\n </main>\n\n {sidebar && (\n <aside className=\"layout-sidebar__side\">\n {sidebar}\n </aside>\n )}\n </div>\n\n {footer && (\n <div className=\"layout-sidebar__footer\">\n {footer}\n </div>\n )}\n </LayoutFoundation>\n );\n};\n\nexport default LayoutSidebar;"]}
package/layouts.d.cts ADDED
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+
3
+ type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
4
+ interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ width?: LayoutFoundationWidth;
6
+ }
7
+ declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
8
+
9
+ interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
10
+ width?: LayoutFoundationWidth;
11
+ header?: React.ReactNode;
12
+ footer?: React.ReactNode;
13
+ }
14
+ declare const LayoutBase: React.FC<LayoutBaseProps>;
15
+
16
+ interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
17
+ width?: LayoutFoundationWidth;
18
+ header?: React.ReactNode;
19
+ screenHeader?: React.ReactNode;
20
+ sidebar?: React.ReactNode;
21
+ footer?: React.ReactNode;
22
+ }
23
+ declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
24
+
25
+ export { LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps };
package/layouts.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+
3
+ type LayoutFoundationWidth = 'narrow' | 'default' | 'wide' | 'full';
4
+ interface LayoutFoundationProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ width?: LayoutFoundationWidth;
6
+ }
7
+ declare const LayoutFoundation: React.FC<LayoutFoundationProps>;
8
+
9
+ interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
10
+ width?: LayoutFoundationWidth;
11
+ header?: React.ReactNode;
12
+ footer?: React.ReactNode;
13
+ }
14
+ declare const LayoutBase: React.FC<LayoutBaseProps>;
15
+
16
+ interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
17
+ width?: LayoutFoundationWidth;
18
+ header?: React.ReactNode;
19
+ screenHeader?: React.ReactNode;
20
+ sidebar?: React.ReactNode;
21
+ footer?: React.ReactNode;
22
+ }
23
+ declare const LayoutSidebar: React.FC<LayoutSidebarProps>;
24
+
25
+ export { LayoutBase, type LayoutBaseProps, LayoutFoundation, type LayoutFoundationProps, type LayoutFoundationWidth, LayoutSidebar, type LayoutSidebarProps };
package/layouts.js ADDED
@@ -0,0 +1,96 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+
3
+ // src/components/helpers/classnames.ts
4
+ function classnames(...args) {
5
+ const classes = [];
6
+ args.forEach((arg) => {
7
+ if (!arg) return;
8
+ if (typeof arg === "string") {
9
+ classes.push(arg);
10
+ return;
11
+ }
12
+ for (const key in arg) {
13
+ if (arg[key]) {
14
+ classes.push(key);
15
+ }
16
+ }
17
+ });
18
+ return classes.join(" ");
19
+ }
20
+ var LayoutFoundation = ({
21
+ width = "default",
22
+ className = "",
23
+ children,
24
+ ...props
25
+ }) => {
26
+ const classes = classnames("layout-foundation", className, {
27
+ "layout-foundation--narrow": width === "narrow",
28
+ "layout-foundation--wide": width === "wide",
29
+ "layout-foundation--full": width === "full"
30
+ });
31
+ return /* @__PURE__ */ jsx(
32
+ "div",
33
+ {
34
+ className: classes,
35
+ ...props,
36
+ children: /* @__PURE__ */ jsx("div", { className: "layout-foundation__grid", children })
37
+ }
38
+ );
39
+ };
40
+ var foundation_default = LayoutFoundation;
41
+ var LayoutBase = ({
42
+ width = "default",
43
+ header,
44
+ footer,
45
+ children,
46
+ className = "",
47
+ ...props
48
+ }) => {
49
+ return /* @__PURE__ */ jsxs(
50
+ foundation_default,
51
+ {
52
+ width,
53
+ className,
54
+ ...props,
55
+ children: [
56
+ header && /* @__PURE__ */ jsx("div", { className: "layout-base__header", children: header }),
57
+ /* @__PURE__ */ jsx("main", { className: "layout-base__main", children }),
58
+ footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
59
+ ]
60
+ }
61
+ );
62
+ };
63
+ var base_default = LayoutBase;
64
+ var LayoutSidebar = ({
65
+ width = "wide",
66
+ header,
67
+ screenHeader,
68
+ sidebar,
69
+ footer,
70
+ children,
71
+ className = "",
72
+ ...props
73
+ }) => {
74
+ return /* @__PURE__ */ jsxs(
75
+ foundation_default,
76
+ {
77
+ width,
78
+ className,
79
+ ...props,
80
+ children: [
81
+ header && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__header", children: header }),
82
+ screenHeader && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
83
+ /* @__PURE__ */ jsxs("div", { className: "layout-sidebar__body", children: [
84
+ /* @__PURE__ */ jsx("main", { className: "layout-sidebar__main", children }),
85
+ sidebar && /* @__PURE__ */ jsx("aside", { className: "layout-sidebar__side", children: sidebar })
86
+ ] }),
87
+ footer && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__footer", children: footer })
88
+ ]
89
+ }
90
+ );
91
+ };
92
+ var sidebar_default = LayoutSidebar;
93
+
94
+ export { base_default as LayoutBase, foundation_default as LayoutFoundation, sidebar_default as LayoutSidebar };
95
+ //# sourceMappingURL=layouts.js.map
96
+ //# sourceMappingURL=layouts.js.map
package/layouts.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/helpers/classnames.ts","../src/layouts/foundation/foundation.tsx","../src/layouts/base/base.tsx","../src/layouts/sidebar/sidebar.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"layouts.js","sourcesContent":["type ClassValue = string | undefined | null | false;\n\nexport function classnames(\n ...args: (ClassValue | Record<string, boolean | undefined | null>)[]\n) {\n const classes: string[] = [];\n\n args.forEach(arg => {\n if (!arg) return;\n\n if (typeof arg === 'string') {\n classes.push(arg);\n return;\n }\n\n for (const key in arg) {\n if (arg[key]) {\n classes.push(key);\n }\n }\n });\n\n return classes.join(' ');\n}","import React from 'react';\nimport './foundation.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutFoundationWidth =\n | 'narrow'\n | 'default'\n | 'wide'\n | 'full';\n\nexport interface LayoutFoundationProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n}\n\nconst LayoutFoundation: React.FC<LayoutFoundationProps> = ({\n width = 'default',\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames('layout-foundation', className, {\n 'layout-foundation--narrow': width === 'narrow',\n 'layout-foundation--wide': width === 'wide',\n 'layout-foundation--full': width === 'full',\n });\n\n return (\n <div\n className={classes}\n {...props}\n >\n <div className=\"layout-foundation__grid\">\n {children}\n </div>\n </div>\n );\n};\n\nexport default LayoutFoundation;","import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n return (\n <LayoutFoundation\n width={width}\n className={className}\n {...props}\n >\n {header && (\n <div className=\"layout-base__header\">\n {header}\n </div>\n )}\n\n <main className=\"layout-base__main\">\n {children}\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;","import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\n\nexport interface LayoutSidebarProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n header?: React.ReactNode;\n screenHeader?: React.ReactNode;\n sidebar?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutSidebar: React.FC<LayoutSidebarProps> = ({\n width = 'wide',\n header,\n screenHeader,\n sidebar,\n footer,\n children,\n className = '',\n ...props\n}) => {\n return (\n <LayoutFoundation\n width={width}\n className={className}\n {...props}\n >\n {header && (\n <div className=\"layout-sidebar__header\">\n {header}\n </div>\n )}\n\n {screenHeader && (\n <div className=\"layout-sidebar__screen-header\">\n {screenHeader}\n </div>\n )}\n\n <div className=\"layout-sidebar__body\">\n <main className=\"layout-sidebar__main\">\n {children}\n </main>\n\n {sidebar && (\n <aside className=\"layout-sidebar__side\">\n {sidebar}\n </aside>\n )}\n </div>\n\n {footer && (\n <div className=\"layout-sidebar__footer\">\n {footer}\n </div>\n )}\n </LayoutFoundation>\n );\n};\n\nexport default LayoutSidebar;"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jvetrau-ds",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "Multi-brand React design system with semantic tokens",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -23,6 +23,11 @@
23
23
  "import": "./patterns.js",
24
24
  "require": "./patterns.cjs"
25
25
  },
26
+ "./layouts": {
27
+ "types": "./layouts.d.ts",
28
+ "import": "./layouts.js",
29
+ "require": "./layouts.cjs"
30
+ },
26
31
  "./icons": {
27
32
  "types": "./icons.d.ts",
28
33
  "import": "./icons.js",
@@ -33,6 +38,7 @@
33
38
  "import": "./tokens.js",
34
39
  "require": "./tokens.cjs"
35
40
  },
41
+ "./base.css": "./base.css",
36
42
  "./styles.css": "./styles.css",
37
43
  "./themes/*.css": "./themes/*.css",
38
44
  "./themes/*.scoped.css": "./themes/*.scoped.css",
package/styles.css CHANGED
@@ -2268,8 +2268,8 @@
2268
2268
  /* src/patterns/footer/footer.css */
2269
2269
  .footer {
2270
2270
  /* color */
2271
- color: var(--color-text);
2272
- background: var(--color-bg);
2271
+ /* color: var(--color-text);
2272
+ background: var(--color-bg);*/
2273
2273
  border-top:
2274
2274
  var(--border-size-width-min)
2275
2275
  solid
@@ -2467,7 +2467,7 @@
2467
2467
  /* src/patterns/screen-header/screen-header.css */
2468
2468
  .screen-header {
2469
2469
  /* color */
2470
- color: var(--color-text);
2470
+ /* color: var(--color-text);*/
2471
2471
 
2472
2472
  /* typography */
2473
2473
 
@@ -2515,11 +2515,11 @@
2515
2515
  /* color */
2516
2516
 
2517
2517
  /* typography */
2518
- font-family: var(--font-body-family);
2518
+ /* font-family: var(--font-body-family);
2519
2519
  font-size: var(--font-body);
2520
2520
  font-weight: var(--font-body-weight);
2521
2521
  line-height: var(--font-body-line);
2522
- letter-spacing: var(--font-body-letter-spacing);
2522
+ letter-spacing: var(--font-body-letter-spacing);*/
2523
2523
 
2524
2524
  /* size */
2525
2525
  width: 100%;
@@ -2536,11 +2536,11 @@
2536
2536
  /* color */
2537
2537
 
2538
2538
  /* typography */
2539
- font-family: var(--font-h1-family);
2539
+ /* font-family: var(--font-h1-family);
2540
2540
  font-size: var(--font-h1);
2541
2541
  font-weight: var(--font-h1-weight);
2542
2542
  line-height: var(--font-h1-line);
2543
- letter-spacing: var(--font-h1-letter-spacing);
2543
+ letter-spacing: var(--font-h1-letter-spacing);*/
2544
2544
 
2545
2545
  /* size */
2546
2546
  width: 100%;