thread-ui 0.6.0 → 0.7.1
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/README.md +1 -1
- package/dist/components/data-display/data-display-controls/data-display-controls.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.js +48 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.js.map +1 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.d.ts +19 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.js +2 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.js.map +1 -0
- package/dist/components/data-display/data-display-controls/index.d.ts +3 -0
- package/dist/components/data-display/data-display-controls/index.js +3 -0
- package/dist/components/data-display/data-display-controls/index.js.map +1 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.js +41 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.d.ts +21 -5
- package/dist/components/data-display/filter-controls/index.d.ts +4 -2
- package/dist/components/data-display/filter-controls/index.js +3 -1
- package/dist/components/data-display/filter-controls/index.js.map +1 -1
- package/dist/components/data-display/filter-controls/use-filter-controls.d.ts +1 -1
- package/dist/components/data-display/filter-controls/use-filter-controls.js +14 -5
- package/dist/components/data-display/filter-controls/use-filter-controls.js.map +1 -1
- package/dist/components/data-display/filter-controls/{filter-controls.d.ts → variants/filter-controls.d.ts} +2 -2
- package/dist/components/data-display/filter-controls/variants/filter-controls.js +52 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.d.ts +13 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js +77 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js.map +1 -0
- package/dist/components/data-display/index.d.ts +1 -0
- package/dist/components/data-display/index.js +1 -0
- package/dist/components/data-display/index.js.map +1 -1
- package/dist/components/data-display/sort-controls/sort-controls.d.ts +1 -1
- package/dist/components/data-display/sort-controls/sort-controls.js +21 -14
- package/dist/components/data-display/sort-controls/sort-controls.js.map +1 -1
- package/dist/components/data-display/sort-controls/sort-controls.types.d.ts +7 -1
- package/dist/components/data-display/sort-controls/use-sort-controls.d.ts +1 -1
- package/dist/components/data-display/sort-controls/use-sort-controls.js +2 -2
- package/dist/components/data-display/sort-controls/use-sort-controls.js.map +1 -1
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.d.ts +1 -1
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js +2 -2
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js.map +1 -1
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.types.d.ts +3 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.d.ts +1 -1
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js +2 -2
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js.map +1 -1
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.d.ts +2 -1
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.d.ts +1 -1
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js +3 -3
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/file-upload-content.js +12 -12
- package/dist/components/form-elements/file-upload/components/file-upload-content.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/file-upload-preview.js +35 -35
- package/dist/components/form-elements/file-upload/components/file-upload-preview.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/item-previews.js +22 -22
- package/dist/components/form-elements/file-upload/components/item-previews.js.map +1 -1
- package/dist/components/form-elements/form-label/form-label.js +19 -19
- package/dist/components/form-elements/form-label/form-label.js.map +1 -1
- package/dist/components/form-elements/input-wrapper.js +8 -8
- package/dist/components/form-elements/input-wrapper.js.map +1 -1
- package/dist/components/form-elements/number-input/number-input.js +55 -55
- package/dist/components/form-elements/number-input/number-input.js.map +1 -1
- package/dist/components/form-elements/text-input/text-input.js +4 -4
- package/dist/components/form-elements/text-input/text-input.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.js +23 -21
- package/dist/components/layouts/column-layout/column-layout.js.map +1 -1
- package/dist/components/layouts/footer/footer.js +38 -38
- package/dist/components/layouts/footer/footer.js.map +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.js +14 -14
- package/dist/components/layouts/masonry-layout/masonry-layout.js.map +1 -1
- package/dist/components/media/info-card/info-card.js +51 -51
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/media-card/media-card.js +133 -119
- package/dist/components/media/media-card/media-card.js.map +1 -1
- package/dist/components/navigation/nav-menu/items/base-item/base-item.js +38 -38
- package/dist/components/navigation/nav-menu/items/base-item/base-item.js.map +1 -1
- package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js +58 -58
- package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js.map +1 -1
- package/dist/components/navigation/nav-menu/nav-menu.js +104 -104
- package/dist/components/navigation/nav-menu/nav-menu.js.map +1 -1
- package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js +41 -41
- package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js.map +1 -1
- package/dist/components/navigation/side-nav/side-nav.js +15 -15
- package/dist/components/navigation/side-nav/side-nav.js.map +1 -1
- package/dist/components/typography/page-header/page-header.js +14 -14
- package/dist/components/typography/page-header/page-header.js.map +1 -1
- package/dist/components/ui/button/button.d.ts +1 -1
- package/dist/components/ui/button/button.js +2 -2
- package/dist/components/ui/button/button.js.map +1 -1
- package/dist/components/ui/button/button.types.d.ts +2 -0
- package/dist/components/ui/card/card.js +72 -72
- package/dist/components/ui/card/card.js.map +1 -1
- package/dist/components/ui/divider/divider.js +24 -22
- package/dist/components/ui/divider/divider.js.map +1 -1
- package/dist/components/ui/loaders/dots-loader/dots-loader.js +46 -46
- package/dist/components/ui/loaders/dots-loader/dots-loader.js.map +1 -1
- package/dist/components/ui/loaders/skeleton/skeleton.js +17 -17
- package/dist/components/ui/loaders/skeleton/skeleton.js.map +1 -1
- package/dist/components/ui/loaders/spin-loader/spin-loader.js +28 -28
- package/dist/components/ui/loaders/spin-loader/spin-loader.js.map +1 -1
- package/dist/components/ui/modal/components/modal-content.js +79 -79
- package/dist/components/ui/modal/components/modal-content.js.map +1 -1
- package/dist/components/ui/modal/modal.js +26 -14
- package/dist/components/ui/modal/modal.js.map +1 -1
- package/dist/components/ui/toggle/toggle.js +37 -48
- package/dist/components/ui/toggle/toggle.js.map +1 -1
- package/dist/styled-system/styles.css +1 -1
- package/dist/styles/panda.css +1 -1
- package/dist/theme/css-name-configurations/theme-css-names.d.ts +13 -1
- package/dist/types/theme/theme.types.d.ts +17 -17
- package/dist/types/utility/index.d.ts +1 -0
- package/dist/types/utility/type-production.types.d.ts +4 -0
- package/dist/types/utility/type-production.types.js +2 -0
- package/dist/types/utility/type-production.types.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/data-display/filter-controls/filter-controls.js +0 -39
- package/dist/components/data-display/filter-controls/filter-controls.js.map +0 -1
|
@@ -3,6 +3,110 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { useEffect, useState } from 'react';
|
|
4
4
|
import { NavIconItem, NavItem, NavDropdownItem } from './items';
|
|
5
5
|
import { css, cx } from '../../../styled-system/css';
|
|
6
|
+
const style = {
|
|
7
|
+
header: css({
|
|
8
|
+
position: 'sticky',
|
|
9
|
+
top: '0px',
|
|
10
|
+
width: '100%',
|
|
11
|
+
display: 'flex',
|
|
12
|
+
alignItems: 'center',
|
|
13
|
+
height: '80px',
|
|
14
|
+
backgroundColor: 'background',
|
|
15
|
+
borderBottomWidth: '1px',
|
|
16
|
+
borderBottomColor: 'structure',
|
|
17
|
+
zIndex: '40',
|
|
18
|
+
}),
|
|
19
|
+
nav: css({
|
|
20
|
+
width: '100%',
|
|
21
|
+
marginRight: 'auto',
|
|
22
|
+
marginLeft: 'auto',
|
|
23
|
+
paddingRight: '32px',
|
|
24
|
+
paddingLeft: '32px',
|
|
25
|
+
position: 'relative',
|
|
26
|
+
display: 'flex',
|
|
27
|
+
columnGap: '20px',
|
|
28
|
+
justifyContent: { base: 'space-between ', lg: 'flex-start' },
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
}),
|
|
31
|
+
menuItemBlock: css({
|
|
32
|
+
animationDuration: '300ms',
|
|
33
|
+
animationTimingFunction: 'linear',
|
|
34
|
+
position: { base: 'absolute', lg: 'relative' },
|
|
35
|
+
top: { base: '100%', lg: '0px' },
|
|
36
|
+
left: '0px',
|
|
37
|
+
borderBottomWidth: '1px',
|
|
38
|
+
backgroundColor: { base: 'background', lg: 'transparent' },
|
|
39
|
+
borderColor: 'structure',
|
|
40
|
+
paddingTop: { base: '32px', lg: '0px' },
|
|
41
|
+
paddingBottom: { base: '32px', lg: '0px' },
|
|
42
|
+
paddingLeft: { base: '20px', md: '48px', lg: '0px' },
|
|
43
|
+
paddingRight: { base: '20px', md: '48px', lg: '0px' },
|
|
44
|
+
borderStyle: { base: 'solid', lg: 'none' },
|
|
45
|
+
width: { base: '100%', lg: 'max-content' },
|
|
46
|
+
display: { base: 'block', lg: 'flex' },
|
|
47
|
+
columnGap: '24px',
|
|
48
|
+
transitionProperty: { base: '', md: 'none' },
|
|
49
|
+
}),
|
|
50
|
+
menuOpenItemBlock: css({
|
|
51
|
+
transitionDuration: '300ms',
|
|
52
|
+
transitionTimingFunction: 'linear',
|
|
53
|
+
visibility: 'visible',
|
|
54
|
+
opacity: 1,
|
|
55
|
+
transform: 'translateY(0)',
|
|
56
|
+
}),
|
|
57
|
+
menuCloseItemBlock: css({
|
|
58
|
+
transitionDuration: '300ms',
|
|
59
|
+
transitionTimingFunction: 'linear',
|
|
60
|
+
transform: {
|
|
61
|
+
base: 'translateY(2.5rem)',
|
|
62
|
+
lg: 'translateY(0)',
|
|
63
|
+
},
|
|
64
|
+
opacity: { base: '0', lg: '1' },
|
|
65
|
+
visibility: { base: 'hidden', lg: 'visible' },
|
|
66
|
+
}),
|
|
67
|
+
itemList: css({
|
|
68
|
+
display: 'flex',
|
|
69
|
+
flexDirection: { base: 'column', lg: 'row' },
|
|
70
|
+
gap: '24px',
|
|
71
|
+
alignItems: { base: 'stretch', lg: 'center' },
|
|
72
|
+
width: { base: 'auto', lg: '100%' },
|
|
73
|
+
justifyContent: { base: 'flex-center', lg: 'center' },
|
|
74
|
+
}),
|
|
75
|
+
menuControl: css({
|
|
76
|
+
display: { base: 'flex', lg: 'none' },
|
|
77
|
+
alignItems: 'center',
|
|
78
|
+
}),
|
|
79
|
+
menuControlButton: css({
|
|
80
|
+
outline: '2px solid transparent',
|
|
81
|
+
outlineOffset: '2px',
|
|
82
|
+
borderLeftWidth: '1px',
|
|
83
|
+
borderLeftColor: 'gray.main',
|
|
84
|
+
paddingLeft: '12px',
|
|
85
|
+
position: 'relative',
|
|
86
|
+
paddingTop: '12px',
|
|
87
|
+
paddingBottom: '12px',
|
|
88
|
+
}),
|
|
89
|
+
menuCross: css({
|
|
90
|
+
animationDuration: '300ms',
|
|
91
|
+
display: 'flex',
|
|
92
|
+
height: '2px',
|
|
93
|
+
width: '24px',
|
|
94
|
+
borderRadius: 'sm',
|
|
95
|
+
backgroundColor: 'gray.dark',
|
|
96
|
+
transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
|
|
97
|
+
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
98
|
+
transitionDuration: '300ms',
|
|
99
|
+
}),
|
|
100
|
+
menuCrossBottom: css({
|
|
101
|
+
marginTop: '8px',
|
|
102
|
+
}),
|
|
103
|
+
menuCrossTopOpen: css({
|
|
104
|
+
transform: 'translate(0, 0.324rem) rotate(45deg)',
|
|
105
|
+
}),
|
|
106
|
+
menuCrossBottomOpen: css({
|
|
107
|
+
transform: 'translate(0, -0.324rem) rotate(-45deg)',
|
|
108
|
+
}),
|
|
109
|
+
};
|
|
6
110
|
/**
|
|
7
111
|
* Sticky site navigation with a logo, nav links, dropdown menus, and a mobile hamburger toggle.
|
|
8
112
|
* Closes on outside click and on viewport resize.
|
|
@@ -50,110 +154,6 @@ export const NavMenu = ({ logo, items }) => {
|
|
|
50
154
|
document.removeEventListener('click', handleOutsideClick);
|
|
51
155
|
};
|
|
52
156
|
}, []);
|
|
53
|
-
const style = {
|
|
54
|
-
header: css({
|
|
55
|
-
position: 'sticky',
|
|
56
|
-
top: '0px',
|
|
57
|
-
width: '100%',
|
|
58
|
-
display: 'flex',
|
|
59
|
-
alignItems: 'center',
|
|
60
|
-
height: '80px',
|
|
61
|
-
backgroundColor: 'background',
|
|
62
|
-
borderBottomWidth: '1px',
|
|
63
|
-
borderBottomColor: 'structure',
|
|
64
|
-
zIndex: '40',
|
|
65
|
-
}),
|
|
66
|
-
nav: css({
|
|
67
|
-
width: '100%',
|
|
68
|
-
marginRight: 'auto',
|
|
69
|
-
marginLeft: 'auto',
|
|
70
|
-
paddingRight: '32px',
|
|
71
|
-
paddingLeft: '32px',
|
|
72
|
-
position: 'relative',
|
|
73
|
-
display: 'flex',
|
|
74
|
-
columnGap: '20px',
|
|
75
|
-
justifyContent: { base: 'space-between ', lg: 'flex-start' },
|
|
76
|
-
alignItems: 'center',
|
|
77
|
-
}),
|
|
78
|
-
menuItemBlock: css({
|
|
79
|
-
animationDuration: '300ms',
|
|
80
|
-
animationTimingFunction: 'linear',
|
|
81
|
-
position: { base: 'absolute', lg: 'relative' },
|
|
82
|
-
top: { base: '100%', lg: '0px' },
|
|
83
|
-
left: '0px',
|
|
84
|
-
borderBottomWidth: '1px',
|
|
85
|
-
backgroundColor: { base: 'background', lg: 'transparent' },
|
|
86
|
-
borderColor: 'structure',
|
|
87
|
-
paddingTop: { base: '32px', lg: '0px' },
|
|
88
|
-
paddingBottom: { base: '32px', lg: '0px' },
|
|
89
|
-
paddingLeft: { base: '20px', md: '48px', lg: '0px' },
|
|
90
|
-
paddingRight: { base: '20px', md: '48px', lg: '0px' },
|
|
91
|
-
borderStyle: { base: 'solid', lg: 'none' },
|
|
92
|
-
width: { base: '100%', lg: 'max-content' },
|
|
93
|
-
display: { base: 'block', lg: 'flex' },
|
|
94
|
-
columnGap: '24px',
|
|
95
|
-
transitionProperty: { base: '', md: 'none' },
|
|
96
|
-
}),
|
|
97
|
-
menuOpenItemBlock: css({
|
|
98
|
-
transitionDuration: '300ms',
|
|
99
|
-
transitionTimingFunction: 'linear',
|
|
100
|
-
visibility: 'visible',
|
|
101
|
-
opacity: 1,
|
|
102
|
-
transform: 'translateY(0)',
|
|
103
|
-
}),
|
|
104
|
-
menuCloseItemBlock: css({
|
|
105
|
-
transitionDuration: '300ms',
|
|
106
|
-
transitionTimingFunction: 'linear',
|
|
107
|
-
transform: {
|
|
108
|
-
base: 'translateY(2.5rem)',
|
|
109
|
-
lg: 'translateY(0)',
|
|
110
|
-
},
|
|
111
|
-
opacity: { base: '0', lg: '1' },
|
|
112
|
-
visibility: { base: 'hidden', lg: 'visible' },
|
|
113
|
-
}),
|
|
114
|
-
itemList: css({
|
|
115
|
-
display: 'flex',
|
|
116
|
-
flexDirection: { base: 'column', lg: 'row' },
|
|
117
|
-
gap: '24px',
|
|
118
|
-
alignItems: { base: 'stretch', lg: 'center' },
|
|
119
|
-
width: { base: 'auto', lg: '100%' },
|
|
120
|
-
justifyContent: { base: 'flex-center', lg: 'center' },
|
|
121
|
-
}),
|
|
122
|
-
menuControl: css({
|
|
123
|
-
display: { base: 'flex', lg: 'none' },
|
|
124
|
-
alignItems: 'center',
|
|
125
|
-
}),
|
|
126
|
-
menuControlButton: css({
|
|
127
|
-
outline: '2px solid transparent',
|
|
128
|
-
outlineOffset: '2px',
|
|
129
|
-
borderLeftWidth: '1px',
|
|
130
|
-
borderLeftColor: 'gray.main',
|
|
131
|
-
paddingLeft: '12px',
|
|
132
|
-
position: 'relative',
|
|
133
|
-
paddingTop: '12px',
|
|
134
|
-
paddingBottom: '12px',
|
|
135
|
-
}),
|
|
136
|
-
menuCross: css({
|
|
137
|
-
animationDuration: '300ms',
|
|
138
|
-
display: 'flex',
|
|
139
|
-
height: '2px',
|
|
140
|
-
width: '24px',
|
|
141
|
-
borderRadius: 'sm',
|
|
142
|
-
backgroundColor: 'gray.dark',
|
|
143
|
-
transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
|
|
144
|
-
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
145
|
-
transitionDuration: '300ms',
|
|
146
|
-
}),
|
|
147
|
-
menuCrossBottom: css({
|
|
148
|
-
marginTop: '8px',
|
|
149
|
-
}),
|
|
150
|
-
menuCrossTopOpen: css({
|
|
151
|
-
transform: 'translate(0, 0.324rem) rotate(45deg)',
|
|
152
|
-
}),
|
|
153
|
-
menuCrossBottomOpen: css({
|
|
154
|
-
transform: 'translate(0, -0.324rem) rotate(-45deg)',
|
|
155
|
-
}),
|
|
156
|
-
};
|
|
157
157
|
const _renderNavItem = ({ href, title }) => {
|
|
158
158
|
return _jsx(NavItem, { href: href, title: title }, title);
|
|
159
159
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-menu.js","sourceRoot":"","sources":["../../../../src/components/navigation/nav-menu/nav-menu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAsC,eAAe,EAAE,MAAM,SAAS,CAAC;AACpG,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAE9C
|
|
1
|
+
{"version":3,"file":"nav-menu.js","sourceRoot":"","sources":["../../../../src/components/navigation/nav-menu/nav-menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,51 +4,51 @@ import { LinkWrapper } from '../../../../internal-components';
|
|
|
4
4
|
import { usePathname } from '../../../../hooks';
|
|
5
5
|
import { Icon } from '../../../../components';
|
|
6
6
|
import { css, cva } from '../../../../styled-system/css';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
7
|
+
const styles = {
|
|
8
|
+
link: cva({
|
|
9
|
+
base: {
|
|
10
|
+
display: 'flex',
|
|
11
|
+
gap: '8px',
|
|
12
|
+
width: '100%',
|
|
13
|
+
alignItems: 'center',
|
|
14
|
+
paddingX: '16px',
|
|
15
|
+
paddingY: '8px',
|
|
16
|
+
marginY: '4px',
|
|
17
|
+
marginX: 'auto',
|
|
18
|
+
borderWidth: 'md',
|
|
19
|
+
borderColor: 'background',
|
|
20
|
+
backgroundColor: 'background',
|
|
21
|
+
borderRadius: '20px',
|
|
22
|
+
borderStyle: 'solid',
|
|
23
|
+
_hover: {
|
|
24
|
+
borderColor: 'primary.main',
|
|
25
|
+
color: 'primary.main',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
variants: {
|
|
29
|
+
isActive: {
|
|
30
|
+
true: {
|
|
31
|
+
color: 'text.inverted',
|
|
32
|
+
backgroundColor: 'primary.main',
|
|
28
33
|
borderColor: 'primary.main',
|
|
29
|
-
|
|
34
|
+
_hover: { backgroundColor: 'primary.light', color: 'text.inverted' },
|
|
30
35
|
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
true: {
|
|
35
|
-
color: 'text.inverted',
|
|
36
|
-
backgroundColor: 'primary.main',
|
|
37
|
-
borderColor: 'primary.main',
|
|
38
|
-
_hover: { backgroundColor: 'primary.light', color: 'text.inverted' },
|
|
39
|
-
},
|
|
40
|
-
false: {
|
|
41
|
-
color: 'text.standard',
|
|
42
|
-
backgroundColor: 'background',
|
|
43
|
-
},
|
|
36
|
+
false: {
|
|
37
|
+
color: 'text.standard',
|
|
38
|
+
backgroundColor: 'background',
|
|
44
39
|
},
|
|
45
40
|
},
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
41
|
+
},
|
|
42
|
+
}),
|
|
43
|
+
linkContents: css({
|
|
44
|
+
display: { base: 'none', lg: 'block' },
|
|
45
|
+
color: 'inherit',
|
|
46
|
+
}),
|
|
47
|
+
};
|
|
48
|
+
export const SideNavItem = ({ title, path, icon, onClick, basePath = '' }) => {
|
|
49
|
+
const currentPath = usePathname();
|
|
50
|
+
const fullPath = path === '/' && basePath ? basePath : `${basePath}${path}`;
|
|
51
|
+
const isActive = path === '/' ? currentPath === fullPath : currentPath.startsWith(fullPath);
|
|
52
52
|
return (_jsxs(LinkWrapper, { link: fullPath, className: styles.link({ isActive }), onClick: onClick, children: [_jsx(Icon, { name: icon, size: 24, filled: isActive }), _jsx("p", { className: styles.linkContents, children: title })] }));
|
|
53
53
|
};
|
|
54
54
|
//# sourceMappingURL=side-nav-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-nav-item.js","sourceRoot":"","sources":["../../../../../src/components/navigation/side-nav/side-nav-item/side-nav-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,
|
|
1
|
+
{"version":3,"file":"side-nav-item.js","sourceRoot":"","sources":["../../../../../src/components/navigation/side-nav/side-nav-item/side-nav-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,GAAG,CAAC;QACT,IAAI,EAAE;YACL,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,YAAY;YACzB,eAAe,EAAE,YAAY;YAC7B,YAAY,EAAE,MAAM;YACpB,WAAW,EAAE,OAAO;YACpB,MAAM,EAAE;gBACP,WAAW,EAAE,cAAc;gBAC3B,KAAK,EAAE,cAAc;aACrB;SACD;QACD,QAAQ,EAAE;YACT,QAAQ,EAAE;gBACT,IAAI,EAAE;oBACL,KAAK,EAAE,eAAe;oBACtB,eAAe,EAAE,cAAc;oBAC/B,WAAW,EAAE,cAAc;oBAC3B,MAAM,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;iBACpE;gBACD,KAAK,EAAE;oBACN,KAAK,EAAE,eAAe;oBACtB,eAAe,EAAE,YAAY;iBAC7B;aACD;SACD;KACD,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;QACjB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE;QACtC,KAAK,EAAE,SAAS;KAChB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,GAAG,EAAE,EAAoB,EAAE,EAAE;IAC9F,MAAM,WAAW,GAAG,WAAW,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,IAAI,EAAE,CAAC;IAC5E,MAAM,QAAQ,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE5F,OAAO,CACN,MAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,aAClF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAI,EAChD,YAAG,SAAS,EAAE,MAAM,CAAC,YAAY,YAAG,KAAK,GAAK,IACjC,CACd,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { css } from '../../../styled-system/css';
|
|
4
4
|
import { SideNavItem } from './side-nav-item';
|
|
5
|
+
const styles = {
|
|
6
|
+
navBar: css({
|
|
7
|
+
width: { base: '16px', lg: '175px' },
|
|
8
|
+
display: 'flex',
|
|
9
|
+
flexDirection: 'column',
|
|
10
|
+
gap: '16px',
|
|
11
|
+
paddingY: '8px',
|
|
12
|
+
}),
|
|
13
|
+
linksBlock: css({
|
|
14
|
+
display: 'flex',
|
|
15
|
+
width: { base: '100%', lg: '95%' },
|
|
16
|
+
marginX: 'auto',
|
|
17
|
+
flexDirection: 'column',
|
|
18
|
+
}),
|
|
19
|
+
};
|
|
5
20
|
/**
|
|
6
21
|
* Vertical side navigation for dashboards. Collapses to a narrow icon-only rail on small screens.
|
|
7
22
|
*
|
|
@@ -13,21 +28,6 @@ import { SideNavItem } from './side-nav-item';
|
|
|
13
28
|
* />
|
|
14
29
|
*/
|
|
15
30
|
export const SideNav = ({ logo, links, controls, basePath = '' }) => {
|
|
16
|
-
const styles = {
|
|
17
|
-
navBar: css({
|
|
18
|
-
width: { base: '16px', lg: '175px' },
|
|
19
|
-
display: 'flex',
|
|
20
|
-
flexDirection: 'column',
|
|
21
|
-
gap: '16px',
|
|
22
|
-
paddingY: '8px',
|
|
23
|
-
}),
|
|
24
|
-
linksBlock: css({
|
|
25
|
-
display: 'flex',
|
|
26
|
-
width: { base: '100%', lg: '95%' },
|
|
27
|
-
marginX: 'auto',
|
|
28
|
-
flexDirection: 'column',
|
|
29
|
-
}),
|
|
30
|
-
};
|
|
31
31
|
return (_jsxs("nav", { className: styles.navBar, children: [logo && logo, _jsx("div", { className: styles.linksBlock, children: links.map((link) => (_jsx(SideNavItem, { ...link, basePath: basePath }, link.title))) })] }));
|
|
32
32
|
};
|
|
33
33
|
//# sourceMappingURL=side-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/navigation/side-nav/side-nav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C
|
|
1
|
+
{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../../../src/components/navigation/side-nav/side-nav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,MAAM,MAAM,GAAG;IACd,MAAM,EAAE,GAAG,CAAC;QACX,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE;QACpC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,KAAK;KACf,CAAC;IACF,UAAU,EAAE,GAAG,CAAC;QACf,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE;QAClC,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACvB,CAAC;CACF,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAgB,EAAE,EAAE;IACjF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,IAAI,IAAI,IAAI,EACb,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAC/B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACpB,KAAC,WAAW,OAAsB,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAAxC,IAAI,CAAC,KAAK,CAAkC,CAC9D,CAAC,GACG,IACD,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -2,6 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { css, cx } from '../../../styled-system/css';
|
|
3
3
|
import { container } from '../../../styled-system/patterns';
|
|
4
4
|
import { Divider, Subtitle, Title } from '../../../components';
|
|
5
|
+
const styles = {
|
|
6
|
+
container: cx(container(), css({
|
|
7
|
+
marginY: '20px',
|
|
8
|
+
})),
|
|
9
|
+
caption: css({
|
|
10
|
+
width: { md: '50%' },
|
|
11
|
+
paddingX: { md: '8px' },
|
|
12
|
+
marginX: 'auto',
|
|
13
|
+
}),
|
|
14
|
+
spacer: css({
|
|
15
|
+
display: 'inline-block',
|
|
16
|
+
marginRight: '32px',
|
|
17
|
+
}),
|
|
18
|
+
};
|
|
5
19
|
/**
|
|
6
20
|
* Page-level header with a title, optional caption, and a divider.
|
|
7
21
|
*
|
|
@@ -9,20 +23,6 @@ import { Divider, Subtitle, Title } from '../../../components';
|
|
|
9
23
|
* <PageHeader title="Our Team" caption="Meet the people behind the product." center />
|
|
10
24
|
*/
|
|
11
25
|
export const PageHeader = ({ title, caption, center }) => {
|
|
12
|
-
const styles = {
|
|
13
|
-
container: cx(container(), css({
|
|
14
|
-
marginY: '20px',
|
|
15
|
-
})),
|
|
16
|
-
caption: css({
|
|
17
|
-
width: { md: '50%' },
|
|
18
|
-
paddingX: { md: '8px' },
|
|
19
|
-
marginX: 'auto',
|
|
20
|
-
}),
|
|
21
|
-
spacer: css({
|
|
22
|
-
display: 'inline-block',
|
|
23
|
-
marginRight: '32px',
|
|
24
|
-
}),
|
|
25
|
-
};
|
|
26
26
|
return (_jsxs("div", { className: styles.container, children: [_jsx(Title, { align: "center", inline: true, children: title }), caption && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("div", { className: styles.caption, children: _jsxs(Subtitle, { align: center ? 'center' : 'left', children: [!center && _jsx("span", { className: styles.spacer }), caption] }) })] })), _jsx(Divider, { width: "33%" })] }));
|
|
27
27
|
};
|
|
28
28
|
//# sourceMappingURL=page-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/typography/page-header/page-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAO,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAExD
|
|
1
|
+
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../../src/components/typography/page-header/page-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAO,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,EAAE,CACZ,SAAS,EAAE,EACX,GAAG,CAAC;QACH,OAAO,EAAE,MAAM;KACf,CAAC,CACF;IACD,OAAO,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;QACpB,QAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;QACvB,OAAO,EAAE,MAAM;KACf,CAAC;IACF,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,MAAM;KACnB,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAmB,EAAE,EAAE;IACzE,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,kBAC1B,KAAK,GACC,EACP,OAAO,IAAI,CACX,8BACC,cAAM,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC7B,MAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,aACzC,CAAC,MAAM,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAS,EAClD,OAAO,IACE,GACN,IACJ,CACH,EACD,KAAC,OAAO,IAAC,KAAK,EAAC,KAAK,GAAG,IAClB,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -7,4 +7,4 @@ import { ButtonProps } from './button.types';
|
|
|
7
7
|
* Save Changes
|
|
8
8
|
* </Button>
|
|
9
9
|
*/
|
|
10
|
-
export declare const Button: ({ children, fullWidth, color, size, onClick, type, margin, text, disabled, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const Button: ({ ariaLabel, children, fullWidth, color, size, onClick, type, margin, text, disabled, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,7 +8,7 @@ import { button } from '../../../styled-system/recipes';
|
|
|
8
8
|
* Save Changes
|
|
9
9
|
* </Button>
|
|
10
10
|
*/
|
|
11
|
-
export const Button = ({ children, fullWidth = false, color = 'primary', size = 'md', onClick, type = 'button', margin, text = false, disabled = false, }) => {
|
|
11
|
+
export const Button = ({ ariaLabel, children, fullWidth = false, color = 'primary', size = 'md', onClick, type = 'button', margin, text = false, disabled = false, }) => {
|
|
12
12
|
const buttonClasses = button({
|
|
13
13
|
color,
|
|
14
14
|
size,
|
|
@@ -16,6 +16,6 @@ export const Button = ({ children, fullWidth = false, color = 'primary', size =
|
|
|
16
16
|
disabled,
|
|
17
17
|
textVariant: text,
|
|
18
18
|
});
|
|
19
|
-
return (_jsx("button", { type: type, className: buttonClasses, onClick: disabled ? undefined : onClick, style: margin ? { margin } : undefined, children: children }));
|
|
19
|
+
return (_jsx("button", { "aria-label": ariaLabel, type: type, className: buttonClasses, onClick: disabled ? undefined : onClick, style: margin ? { margin } : undefined, children: children }));
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,GACH,EAAE,EAAE;IACjB,MAAM,aAAa,GAAG,MAAM,CAAC;QAC5B,KAAK;QACL,IAAI;QACJ,SAAS;QACT,QAAQ;QACR,WAAW,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,OAAO,CACN,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,GACH,EAAE,EAAE;IACjB,MAAM,aAAa,GAAG,MAAM,CAAC;QAC5B,KAAK;QACL,IAAI;QACJ,SAAS;QACT,QAAQ;QACR,WAAW,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,OAAO,CACN,+BACa,SAAS,EACrB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,YAErC,QAAQ,GACD,CACT,CAAC;AACH,CAAC,CAAC"}
|