jvetrau-ds 0.2.22 → 0.2.23
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/avatar-upload/avatar-upload.cjs +2 -1
- package/components/avatar-upload/avatar-upload.cjs.map +1 -1
- package/components/avatar-upload/avatar-upload.js +2 -1
- package/components/avatar-upload/avatar-upload.js.map +1 -1
- package/layouts/base/base.cjs +3 -1
- package/layouts/base/base.cjs.map +1 -1
- package/layouts/base/base.css +18 -1
- package/layouts/base/base.d.ts +2 -0
- package/layouts/base/base.js +3 -1
- package/layouts/base/base.js.map +1 -1
- package/layouts/sidebar/sidebar.cjs +6 -1
- package/layouts/sidebar/sidebar.cjs.map +1 -1
- package/layouts/sidebar/sidebar.css +18 -1
- package/layouts/sidebar/sidebar.d.ts +2 -0
- package/layouts/sidebar/sidebar.js +6 -1
- package/layouts/sidebar/sidebar.js.map +1 -1
- package/package.json +1 -1
- package/styles.css +34 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":["React","classnames","jsxs","jsx","Avatar","Button"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,eAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WACJA,sBAAA,CAAM,MAAA;AAAA,IACJ;AAAA,GACF;AAEF,EAAA,MAAM,OAAA,GAAUA,uBAAM,KAAA,EAAM;AAE5B,EAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAE1B,EAAA,MAAM,QAAA,GACJ,KAAA,KAAU,IAAA,IACV,KAAA,KAAU,MAAA;AAEZ,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,eAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,yBAAA,EACE,UAAA;AAAA,MACF,wBAAA,EACE,OAAA;AAAA,MACF,sBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,UAAA,EAAY;AACd,MAAA;AAAA,IACF;AAEA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CACvB,KAAA,KACG;AACH,IAAA,MAAM,QAAQ,KAAA,CAAM,aAAA;AACpB,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,GAAQ,CAAC,CAAA;AAO5B,IAAA,KAAA,CAAM,KAAA,GAAQ,EAAA;AAEd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,OAAA,GACrB,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAErB,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,WAAA,EAAW,gBAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uBAAA;AAAA,YACV,GAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":["React","classnames","jsxs","jsx","Avatar","Button"],"mappings":"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","file":"avatar-upload.cjs","sourcesContent":["import React from 'react';\n\nimport './avatar-upload.css';\nimport Avatar from '../avatar/avatar';\nimport Button from '../button/button';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarUploadProps\n extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'children'\n > {\n src?: string;\n initials?: string;\n alt?: string;\n accept?: string;\n disabled?: boolean;\n loading?: boolean;\n error?: React.ReactNode;\n selectLabel: React.ReactNode;\n onFileSelect: (file: File) => void;\n}\n\nconst AvatarUpload: React.FC<\n AvatarUploadProps\n> = ({\n src,\n initials,\n alt,\n accept,\n disabled = false,\n loading = false,\n error,\n selectLabel,\n onFileSelect,\n className = '',\n ...props\n}) => {\n const inputRef =\n React.useRef<HTMLInputElement>(\n null,\n );\n\n const reactId = React.useId();\n\n const errorId = `${reactId}-error`;\n\n const hasError =\n error !== null &&\n error !== undefined;\n\n const isDisabled =\n disabled || loading;\n\n const classes = classnames(\n 'avatar-upload',\n className,\n {\n 'avatar-upload--disabled':\n isDisabled,\n 'avatar-upload--loading':\n loading,\n 'avatar-upload--error':\n hasError,\n },\n );\n\n const handleSelectClick = () => {\n if (isDisabled) {\n return;\n }\n\n inputRef.current?.click();\n };\n\n const handleFileChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const input = event.currentTarget;\n const file = input.files?.[0];\n\n /*\n * Reset the native input after reading\n * the selected file so the same file\n * can be selected again later.\n */\n input.value = '';\n\n if (!file) {\n return;\n }\n\n onFileSelect(file);\n };\n\n const resolvedAriaBusy = loading\n ? true\n : props['aria-busy'];\n\n return (\n <div\n {...props}\n className={classes}\n aria-busy={resolvedAriaBusy}\n >\n <Avatar\n className=\"avatar-upload__avatar\"\n src={src}\n initials={initials}\n alt={alt}\n size=\"preview\"\n />\n\n <input\n ref={inputRef}\n className=\"avatar-upload__input\"\n type=\"file\"\n accept={accept}\n disabled={isDisabled}\n onChange={handleFileChange}\n />\n\n <Button\n className=\"avatar-upload__button\"\n type=\"button\"\n rank=\"link\"\n disabled={isDisabled}\n aria-describedby={\n hasError\n ? errorId\n : undefined\n }\n onClick={handleSelectClick}\n >\n {selectLabel}\n </Button>\n\n {hasError && (\n <div\n className=\"avatar-upload__error\"\n id={errorId}\n role=\"alert\"\n >\n {error}\n </div>\n )}\n </div>\n );\n};\n\nexport default AvatarUpload;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,eAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WACJ,KAAA,CAAM,MAAA;AAAA,IACJ;AAAA,GACF;AAEF,EAAA,MAAM,OAAA,GAAU,MAAM,KAAA,EAAM;AAE5B,EAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAE1B,EAAA,MAAM,QAAA,GACJ,KAAA,KAAU,IAAA,IACV,KAAA,KAAU,MAAA;AAEZ,EAAA,MAAM,aACJ,QAAA,IAAY,OAAA;AAEd,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,eAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,yBAAA,EACE,UAAA;AAAA,MACF,wBAAA,EACE,OAAA;AAAA,MACF,sBAAA,EACE;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,UAAA,EAAY;AACd,MAAA;AAAA,IACF;AAEA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CACvB,KAAA,KACG;AACH,IAAA,MAAM,QAAQ,KAAA,CAAM,aAAA;AACpB,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,GAAQ,CAAC,CAAA;AAO5B,IAAA,KAAA,CAAM,KAAA,GAAQ,EAAA;AAEd,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,OAAA,GACrB,IAAA,GACA,KAAA,CAAM,WAAW,CAAA;AAErB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,WAAA,EAAW,gBAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,uBAAA;AAAA,YACV,GAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/avatar-upload/avatar-upload.tsx"],"names":[],"mappings":"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","file":"avatar-upload.js","sourcesContent":["import React from 'react';\n\nimport './avatar-upload.css';\nimport Avatar from '../avatar/avatar';\nimport Button from '../button/button';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AvatarUploadProps\n extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'children'\n > {\n src?: string;\n initials?: string;\n alt?: string;\n accept?: string;\n disabled?: boolean;\n loading?: boolean;\n error?: React.ReactNode;\n selectLabel: React.ReactNode;\n onFileSelect: (file: File) => void;\n}\n\nconst AvatarUpload: React.FC<\n AvatarUploadProps\n> = ({\n src,\n initials,\n alt,\n accept,\n disabled = false,\n loading = false,\n error,\n selectLabel,\n onFileSelect,\n className = '',\n ...props\n}) => {\n const inputRef =\n React.useRef<HTMLInputElement>(\n null,\n );\n\n const reactId = React.useId();\n\n const errorId = `${reactId}-error`;\n\n const hasError =\n error !== null &&\n error !== undefined;\n\n const isDisabled =\n disabled || loading;\n\n const classes = classnames(\n 'avatar-upload',\n className,\n {\n 'avatar-upload--disabled':\n isDisabled,\n 'avatar-upload--loading':\n loading,\n 'avatar-upload--error':\n hasError,\n },\n );\n\n const handleSelectClick = () => {\n if (isDisabled) {\n return;\n }\n\n inputRef.current?.click();\n };\n\n const handleFileChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const input = event.currentTarget;\n const file = input.files?.[0];\n\n /*\n * Reset the native input after reading\n * the selected file so the same file\n * can be selected again later.\n */\n input.value = '';\n\n if (!file) {\n return;\n }\n\n onFileSelect(file);\n };\n\n const resolvedAriaBusy = loading\n ? true\n : props['aria-busy'];\n\n return (\n <div\n {...props}\n className={classes}\n aria-busy={resolvedAriaBusy}\n >\n <Avatar\n className=\"avatar-upload__avatar\"\n src={src}\n initials={initials}\n alt={alt}\n size=\"preview\"\n />\n\n <input\n ref={inputRef}\n className=\"avatar-upload__input\"\n type=\"file\"\n accept={accept}\n disabled={isDisabled}\n onChange={handleFileChange}\n />\n\n <Button\n className=\"avatar-upload__button\"\n type=\"button\"\n rank=\"link\"\n disabled={isDisabled}\n aria-describedby={\n hasError\n ? errorId\n : undefined\n }\n onClick={handleSelectClick}\n >\n {selectLabel}\n </Button>\n\n {hasError && (\n <div\n className=\"avatar-upload__error\"\n id={errorId}\n role=\"alert\"\n >\n {error}\n </div>\n )}\n </div>\n );\n};\n\nexport default AvatarUpload;\n"]}
|
package/layouts/base/base.cjs
CHANGED
|
@@ -13,6 +13,7 @@ const LayoutBase = ({
|
|
|
13
13
|
width = "default",
|
|
14
14
|
headerAlign = "start",
|
|
15
15
|
mainAlign = "start",
|
|
16
|
+
contentAlign = "start",
|
|
16
17
|
header,
|
|
17
18
|
footer,
|
|
18
19
|
children,
|
|
@@ -23,7 +24,8 @@ const LayoutBase = ({
|
|
|
23
24
|
const contentClasses = classnames.classnames("layout-base__content", "", {
|
|
24
25
|
"layout-base__content--narrow": width === "narrow",
|
|
25
26
|
"layout-base__content--wide": width === "wide",
|
|
26
|
-
"layout-base__content--full": width === "full"
|
|
27
|
+
"layout-base__content--full": width === "full",
|
|
28
|
+
"layout-base__content--align-center": contentAlign === "center"
|
|
27
29
|
});
|
|
28
30
|
const headerClasses = classnames.classnames("layout-base__header", "", {
|
|
29
31
|
"layout-base__header--align-center": headerAlign === "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseContentAlign =\n | 'start'\n | 'center';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n headerAlign?: LayoutBaseHeaderAlign;\n mainAlign?: LayoutBaseMainAlign;\n contentAlign?: LayoutBaseContentAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n headerAlign = 'start',\n mainAlign = 'start',\n contentAlign = 'start',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const classes = classnames('layout-base', className, {});\n\n const contentClasses = classnames('layout-base__content', '', {\n 'layout-base__content--narrow': width === 'narrow',\n 'layout-base__content--wide': width === 'wide',\n 'layout-base__content--full': width === 'full',\n 'layout-base__content--align-center': contentAlign === 'center',\n });\n\n const headerClasses = classnames('layout-base__header', '', {\n 'layout-base__header--align-center': headerAlign === 'center',\n 'layout-base__header--align-end': headerAlign === 'end',\n });\n\n const mainClasses = classnames('layout-base__main', '', {\n 'layout-base__main--align-center': mainAlign === 'center',\n 'layout-base__main--align-end': mainAlign === 'end',\n });\n\n return (\n <LayoutFoundation\n width=\"full\"\n className={classes}\n {...props}\n >\n {header && (\n <div className={headerClasses}>\n {header}\n </div>\n )}\n\n <main className={mainClasses}>\n <div className={contentClasses}>\n {children}\n </div>\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;\n"]}
|
package/layouts/base/base.css
CHANGED
|
@@ -123,6 +123,23 @@
|
|
|
123
123
|
max-width: none;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
+
.layout-base__content--align-center {
|
|
127
|
+
/* color */
|
|
128
|
+
|
|
129
|
+
/* typography */
|
|
130
|
+
|
|
131
|
+
/* size */
|
|
132
|
+
display: flex;
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
align-items: center;
|
|
135
|
+
|
|
136
|
+
/* border */
|
|
137
|
+
|
|
138
|
+
/* depth */
|
|
139
|
+
|
|
140
|
+
/* motion */
|
|
141
|
+
}
|
|
142
|
+
|
|
126
143
|
.layout-base__footer {
|
|
127
144
|
/* color */
|
|
128
145
|
|
|
@@ -136,4 +153,4 @@
|
|
|
136
153
|
/* depth */
|
|
137
154
|
|
|
138
155
|
/* motion */
|
|
139
|
-
}
|
|
156
|
+
}
|
package/layouts/base/base.d.ts
CHANGED
|
@@ -3,10 +3,12 @@ import { type LayoutFoundationWidth } from '../foundation';
|
|
|
3
3
|
import './base.css';
|
|
4
4
|
export type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
|
|
5
5
|
export type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
6
|
+
export type LayoutBaseContentAlign = 'start' | 'center';
|
|
6
7
|
export interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
8
|
width?: LayoutFoundationWidth;
|
|
8
9
|
headerAlign?: LayoutBaseHeaderAlign;
|
|
9
10
|
mainAlign?: LayoutBaseMainAlign;
|
|
11
|
+
contentAlign?: LayoutBaseContentAlign;
|
|
10
12
|
header?: React.ReactNode;
|
|
11
13
|
footer?: React.ReactNode;
|
|
12
14
|
}
|
package/layouts/base/base.js
CHANGED
|
@@ -7,6 +7,7 @@ const LayoutBase = ({
|
|
|
7
7
|
width = "default",
|
|
8
8
|
headerAlign = "start",
|
|
9
9
|
mainAlign = "start",
|
|
10
|
+
contentAlign = "start",
|
|
10
11
|
header,
|
|
11
12
|
footer,
|
|
12
13
|
children,
|
|
@@ -17,7 +18,8 @@ const LayoutBase = ({
|
|
|
17
18
|
const contentClasses = classnames("layout-base__content", "", {
|
|
18
19
|
"layout-base__content--narrow": width === "narrow",
|
|
19
20
|
"layout-base__content--wide": width === "wide",
|
|
20
|
-
"layout-base__content--full": width === "full"
|
|
21
|
+
"layout-base__content--full": width === "full",
|
|
22
|
+
"layout-base__content--align-center": contentAlign === "center"
|
|
21
23
|
});
|
|
22
24
|
const headerClasses = classnames("layout-base__header", "", {
|
|
23
25
|
"layout-base__header--align-center": headerAlign === "center",
|
package/layouts/base/base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;AA+BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,OAAA;AAAA,EACZ,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,aAAA,EAAe,SAAA,EAAW,EAAE,CAAA;AAEvD,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,UAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseHeaderAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseContentAlign =\n | 'start'\n | 'center';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n headerAlign?: LayoutBaseHeaderAlign;\n mainAlign?: LayoutBaseMainAlign;\n contentAlign?: LayoutBaseContentAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n headerAlign = 'start',\n mainAlign = 'start',\n contentAlign = 'start',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const classes = classnames('layout-base', className, {});\n\n const contentClasses = classnames('layout-base__content', '', {\n 'layout-base__content--narrow': width === 'narrow',\n 'layout-base__content--wide': width === 'wide',\n 'layout-base__content--full': width === 'full',\n 'layout-base__content--align-center': contentAlign === 'center',\n });\n\n const headerClasses = classnames('layout-base__header', '', {\n 'layout-base__header--align-center': headerAlign === 'center',\n 'layout-base__header--align-end': headerAlign === 'end',\n });\n\n const mainClasses = classnames('layout-base__main', '', {\n 'layout-base__main--align-center': mainAlign === 'center',\n 'layout-base__main--align-end': mainAlign === 'end',\n });\n\n return (\n <LayoutFoundation\n width=\"full\"\n className={classes}\n {...props}\n >\n {header && (\n <div className={headerClasses}>\n {header}\n </div>\n )}\n\n <main className={mainClasses}>\n <div className={contentClasses}>\n {children}\n </div>\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;\n"]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var LayoutFoundation = require('../foundation');
|
|
5
5
|
require('./sidebar.css');
|
|
6
|
+
var classnames = require('../../components/helpers/classnames');
|
|
6
7
|
|
|
7
8
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
9
|
|
|
@@ -10,6 +11,7 @@ var LayoutFoundation__default = /*#__PURE__*/_interopDefault(LayoutFoundation);
|
|
|
10
11
|
|
|
11
12
|
const LayoutSidebar = ({
|
|
12
13
|
width = "wide",
|
|
14
|
+
contentAlign = "start",
|
|
13
15
|
header,
|
|
14
16
|
screenHeader,
|
|
15
17
|
sidebar,
|
|
@@ -18,6 +20,9 @@ const LayoutSidebar = ({
|
|
|
18
20
|
className = "",
|
|
19
21
|
...props
|
|
20
22
|
}) => {
|
|
23
|
+
const mainClasses = classnames.classnames("layout-sidebar__main", "", {
|
|
24
|
+
"layout-sidebar__main--align-center": contentAlign === "center"
|
|
25
|
+
});
|
|
21
26
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
22
27
|
LayoutFoundation__default.default,
|
|
23
28
|
{
|
|
@@ -28,7 +33,7 @@ const LayoutSidebar = ({
|
|
|
28
33
|
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__header", children: header }),
|
|
29
34
|
screenHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
|
|
30
35
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-sidebar__body", children: [
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsx("main", { className:
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClasses, children }),
|
|
32
37
|
sidebar && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "layout-sidebar__side", children: sidebar })
|
|
33
38
|
] }),
|
|
34
39
|
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-sidebar__footer", children: footer })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":["jsxs","LayoutFoundation","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":["classnames","jsxs","LayoutFoundation","jsx"],"mappings":";;;;;;;;;;;AAqBA,MAAM,gBAA8C,CAAC;AAAA,EACnD,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IACzD,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,YAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGFF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,EACd,QAAA,EACH,CAAA;AAAA,UAEC,OAAA,oBACCA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"sidebar.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutSidebarContentAlign =\n | 'start'\n | 'center';\n\nexport interface LayoutSidebarProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n contentAlign?: LayoutSidebarContentAlign;\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 contentAlign = 'start',\n header,\n screenHeader,\n sidebar,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const mainClasses = classnames('layout-sidebar__main', '', {\n 'layout-sidebar__main--align-center': contentAlign === 'center',\n });\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={mainClasses}>\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;\n"]}
|
|
@@ -47,6 +47,23 @@
|
|
|
47
47
|
/* motion */
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
.layout-sidebar__main--align-center {
|
|
51
|
+
/* color */
|
|
52
|
+
|
|
53
|
+
/* typography */
|
|
54
|
+
|
|
55
|
+
/* size */
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
align-items: center;
|
|
59
|
+
|
|
60
|
+
/* border */
|
|
61
|
+
|
|
62
|
+
/* depth */
|
|
63
|
+
|
|
64
|
+
/* motion */
|
|
65
|
+
}
|
|
66
|
+
|
|
50
67
|
.layout-sidebar__main > .panel + .panel {
|
|
51
68
|
/* color */
|
|
52
69
|
|
|
@@ -98,4 +115,4 @@
|
|
|
98
115
|
.layout-sidebar__side {
|
|
99
116
|
grid-column: 1 / -1;
|
|
100
117
|
}
|
|
101
|
-
}
|
|
118
|
+
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type LayoutFoundationWidth } from '../foundation';
|
|
3
3
|
import './sidebar.css';
|
|
4
|
+
export type LayoutSidebarContentAlign = 'start' | 'center';
|
|
4
5
|
export interface LayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
6
|
width?: LayoutFoundationWidth;
|
|
7
|
+
contentAlign?: LayoutSidebarContentAlign;
|
|
6
8
|
header?: React.ReactNode;
|
|
7
9
|
screenHeader?: React.ReactNode;
|
|
8
10
|
sidebar?: React.ReactNode;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import LayoutFoundation from '../foundation';
|
|
3
3
|
import './sidebar.css';
|
|
4
|
+
import { classnames } from '../../components/helpers/classnames';
|
|
4
5
|
|
|
5
6
|
const LayoutSidebar = ({
|
|
6
7
|
width = "wide",
|
|
8
|
+
contentAlign = "start",
|
|
7
9
|
header,
|
|
8
10
|
screenHeader,
|
|
9
11
|
sidebar,
|
|
@@ -12,6 +14,9 @@ const LayoutSidebar = ({
|
|
|
12
14
|
className = "",
|
|
13
15
|
...props
|
|
14
16
|
}) => {
|
|
17
|
+
const mainClasses = classnames("layout-sidebar__main", "", {
|
|
18
|
+
"layout-sidebar__main--align-center": contentAlign === "center"
|
|
19
|
+
});
|
|
15
20
|
return /* @__PURE__ */ jsxs(
|
|
16
21
|
LayoutFoundation,
|
|
17
22
|
{
|
|
@@ -22,7 +27,7 @@ const LayoutSidebar = ({
|
|
|
22
27
|
header && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__header", children: header }),
|
|
23
28
|
screenHeader && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__screen-header", children: screenHeader }),
|
|
24
29
|
/* @__PURE__ */ jsxs("div", { className: "layout-sidebar__body", children: [
|
|
25
|
-
/* @__PURE__ */ jsx("main", { className:
|
|
30
|
+
/* @__PURE__ */ jsx("main", { className: mainClasses, children }),
|
|
26
31
|
sidebar && /* @__PURE__ */ jsx("aside", { className: "layout-sidebar__side", children: sidebar })
|
|
27
32
|
] }),
|
|
28
33
|
footer && /* @__PURE__ */ jsx("div", { className: "layout-sidebar__footer", children: footer })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/sidebar/sidebar.tsx"],"names":[],"mappings":";;;;;AAqBA,MAAM,gBAA8C,CAAC;AAAA,EACnD,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA,GAAe,OAAA;AAAA,EACf,MAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IACzD,sCAAsC,YAAA,KAAiB;AAAA,GACxD,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAGD,YAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCACZ,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAGF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,EACd,QAAA,EACH,CAAA;AAAA,UAEC,OAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,wBACd,QAAA,EAAA,OAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"sidebar.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './sidebar.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutSidebarContentAlign =\n | 'start'\n | 'center';\n\nexport interface LayoutSidebarProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n contentAlign?: LayoutSidebarContentAlign;\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 contentAlign = 'start',\n header,\n screenHeader,\n sidebar,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const mainClasses = classnames('layout-sidebar__main', '', {\n 'layout-sidebar__main--align-center': contentAlign === 'center',\n });\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={mainClasses}>\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;\n"]}
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -6214,6 +6214,23 @@
|
|
|
6214
6214
|
max-width: none;
|
|
6215
6215
|
}
|
|
6216
6216
|
|
|
6217
|
+
.layout-base__content--align-center {
|
|
6218
|
+
/* color */
|
|
6219
|
+
|
|
6220
|
+
/* typography */
|
|
6221
|
+
|
|
6222
|
+
/* size */
|
|
6223
|
+
display: flex;
|
|
6224
|
+
flex-direction: column;
|
|
6225
|
+
align-items: center;
|
|
6226
|
+
|
|
6227
|
+
/* border */
|
|
6228
|
+
|
|
6229
|
+
/* depth */
|
|
6230
|
+
|
|
6231
|
+
/* motion */
|
|
6232
|
+
}
|
|
6233
|
+
|
|
6217
6234
|
.layout-base__footer {
|
|
6218
6235
|
/* color */
|
|
6219
6236
|
|
|
@@ -6363,6 +6380,23 @@
|
|
|
6363
6380
|
/* motion */
|
|
6364
6381
|
}
|
|
6365
6382
|
|
|
6383
|
+
.layout-sidebar__main--align-center {
|
|
6384
|
+
/* color */
|
|
6385
|
+
|
|
6386
|
+
/* typography */
|
|
6387
|
+
|
|
6388
|
+
/* size */
|
|
6389
|
+
display: flex;
|
|
6390
|
+
flex-direction: column;
|
|
6391
|
+
align-items: center;
|
|
6392
|
+
|
|
6393
|
+
/* border */
|
|
6394
|
+
|
|
6395
|
+
/* depth */
|
|
6396
|
+
|
|
6397
|
+
/* motion */
|
|
6398
|
+
}
|
|
6399
|
+
|
|
6366
6400
|
.layout-sidebar__main > .panel + .panel {
|
|
6367
6401
|
/* color */
|
|
6368
6402
|
|