thread-ui 0.5.0 → 0.7.0
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 +10 -2
- 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 +2 -0
- package/dist/components/data-display/data-display-controls/index.js +2 -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 +91 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.js +2 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.js.map +1 -0
- package/dist/components/data-display/filter-controls/index.d.ts +4 -0
- package/dist/components/data-display/filter-controls/index.js +4 -0
- package/dist/components/data-display/filter-controls/index.js.map +1 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.d.ts +23 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.js +98 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.d.ts +10 -0
- 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 +3 -0
- package/dist/components/data-display/index.js +4 -0
- package/dist/components/data-display/index.js.map +1 -0
- package/dist/components/data-display/sort-controls/index.d.ts +3 -0
- package/dist/components/data-display/sort-controls/index.js +3 -0
- package/dist/components/data-display/sort-controls/index.js.map +1 -0
- package/dist/components/data-display/sort-controls/sort-controls.d.ts +11 -0
- package/dist/components/data-display/sort-controls/sort-controls.js +58 -0
- package/dist/components/data-display/sort-controls/sort-controls.js.map +1 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.d.ts +68 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.js +2 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.js.map +1 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.d.ts +23 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.js +94 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.js.map +1 -0
- package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.d.ts +1 -1
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js +41 -0
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js.map +1 -0
- package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.d.ts +7 -9
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.types.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.d.ts +8 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js +46 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.d.ts +26 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.js +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/index.js +3 -0
- package/dist/components/form-elements/dropdowns/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.js +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.d.ts +15 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js +55 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.d.ts +25 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js.map +1 -0
- 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.d.ts +1 -1
- package/dist/components/form-elements/form-label/form-label.js +35 -9
- package/dist/components/form-elements/form-label/form-label.js.map +1 -1
- package/dist/components/form-elements/form-label/form-label.types.d.ts +3 -0
- package/dist/components/form-elements/index.d.ts +2 -2
- package/dist/components/form-elements/index.js +2 -2
- package/dist/components/form-elements/index.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/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.d.ts +1 -1
- package/dist/components/layouts/column-layout/column-layout.js +25 -22
- package/dist/components/layouts/column-layout/column-layout.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.types.d.ts +4 -1
- package/dist/components/layouts/container/container.d.ts +11 -0
- package/dist/components/layouts/container/container.js +28 -0
- package/dist/components/layouts/container/container.js.map +1 -0
- package/dist/components/layouts/container/container.types.d.ts +11 -0
- package/dist/components/layouts/container/container.types.js +2 -0
- package/dist/components/layouts/container/container.types.js.map +1 -0
- package/dist/components/layouts/container/index.d.ts +2 -0
- package/dist/components/layouts/container/index.js +2 -0
- package/dist/components/layouts/container/index.js.map +1 -0
- package/dist/components/layouts/footer/footer.js +38 -38
- package/dist/components/layouts/footer/footer.js.map +1 -1
- package/dist/components/layouts/index.d.ts +1 -0
- package/dist/components/layouts/index.js +1 -0
- package/dist/components/layouts/index.js.map +1 -1
- package/dist/components/layouts/layout-component.types.d.ts +9 -0
- package/dist/components/layouts/layout-component.types.js +2 -0
- package/dist/components/layouts/layout-component.types.js.map +1 -0
- package/dist/components/layouts/layout-wrapper.d.ts +7 -0
- package/dist/components/layouts/layout-wrapper.js +9 -0
- package/dist/components/layouts/layout-wrapper.js.map +1 -0
- package/dist/components/layouts/masonry-layout/masonry-layout.d.ts +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.js +18 -18
- package/dist/components/layouts/masonry-layout/masonry-layout.js.map +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.types.d.ts +3 -2
- package/dist/components/media/info-card/info-card.js +51 -52
- 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.d.ts +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 +42 -42
- 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/typography/typography.d.ts +10 -8
- package/dist/components/typography/typography.js +42 -8
- package/dist/components/typography/typography.js.map +1 -1
- package/dist/components/ui/button/button-recipe.js +90 -6
- package/dist/components/ui/button/button-recipe.js.map +1 -1
- package/dist/components/ui/button/button.d.ts +1 -1
- package/dist/components/ui/button/button.js +3 -2
- package/dist/components/ui/button/button.js.map +1 -1
- package/dist/components/ui/button/button.types.d.ts +5 -1
- 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/icon/icon.d.ts +1 -1
- package/dist/components/ui/icon/icon.js +1 -1
- package/dist/components/ui/icon-button/icon-button.d.ts +1 -1
- package/dist/components/ui/icon-button/icon-button.js +4 -7
- package/dist/components/ui/icon-button/icon-button.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 +80 -80
- package/dist/components/ui/modal/components/modal-content.js.map +1 -1
- package/dist/components/ui/modal/modal.js +33 -15
- package/dist/components/ui/modal/modal.js.map +1 -1
- package/dist/components/ui/modal/modal.types.d.ts +2 -0
- package/dist/components/ui/toggle/toggle.js +37 -48
- package/dist/components/ui/toggle/toggle.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.js +4 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-click-outside/index.d.ts +1 -0
- package/dist/hooks/use-click-outside/index.js +2 -0
- package/dist/hooks/use-click-outside/index.js.map +1 -0
- package/dist/hooks/use-click-outside/use-click-outside.d.ts +10 -0
- package/dist/hooks/use-click-outside/use-click-outside.js +26 -0
- package/dist/hooks/use-click-outside/use-click-outside.js.map +1 -0
- package/dist/hooks/use-dismiss/index.d.ts +1 -0
- package/dist/hooks/use-dismiss/index.js +2 -0
- package/dist/hooks/use-dismiss/index.js.map +1 -0
- package/dist/hooks/use-dismiss/use-dismiss.d.ts +13 -0
- package/dist/hooks/use-dismiss/use-dismiss.js +42 -0
- package/dist/hooks/use-dismiss/use-dismiss.js.map +1 -0
- package/dist/hooks/use-pathname/index.js.map +1 -0
- package/dist/hooks/use-pathname/use-pathname.d.ts +8 -0
- package/dist/{utils/hooks → hooks}/use-pathname/use-pathname.js +7 -0
- package/dist/hooks/use-pathname/use-pathname.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.d.ts +2 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.js +12 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.js.map +1 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.d.ts +9 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.js +2 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.js.map +1 -0
- package/dist/internal-components/conditional-wrapper/index.d.ts +2 -0
- package/dist/internal-components/conditional-wrapper/index.js +2 -0
- package/dist/internal-components/conditional-wrapper/index.js.map +1 -0
- package/dist/internal-components/image/render-image.js.map +1 -1
- package/dist/internal-components/index.d.ts +3 -1
- package/dist/internal-components/index.js +3 -1
- package/dist/internal-components/index.js.map +1 -1
- package/dist/internal-components/optional-icon-button/index.d.ts +2 -0
- package/dist/internal-components/optional-icon-button/index.js +2 -0
- package/dist/internal-components/optional-icon-button/index.js.map +1 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.d.ts +2 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.js +9 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.js.map +1 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.d.ts +4 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.js +2 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.js.map +1 -0
- package/dist/styled-system/recipes/button.d.ts +2 -1
- package/dist/styled-system/recipes/button.mjs +114 -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/colors/utility-color-options.types.d.ts +2 -0
- package/dist/types/image/image.types.d.ts +2 -0
- package/dist/types/theme/theme.types.d.ts +37 -23
- package/dist/types/utility/deep-partial.types.d.ts +1 -0
- 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/dist/utils/index.d.ts +0 -1
- package/dist/utils/index.js +0 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/theme-utilities/get-utility-icon-size/get-utility-icon-size.js +4 -4
- package/dist/utils/theme-utilities/get-utility-icon-size/get-utility-icon-size.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/form-elements/dropdown/dropdown.js +0 -83
- package/dist/components/form-elements/dropdown/dropdown.js.map +0 -1
- package/dist/components/form-elements/dropdown/dropdown.types.js.map +0 -1
- package/dist/components/form-elements/dropdown/index.js.map +0 -1
- package/dist/utils/hooks/index.d.ts +0 -2
- package/dist/utils/hooks/index.js +0 -3
- package/dist/utils/hooks/index.js.map +0 -1
- package/dist/utils/hooks/use-outside-close-click/index.d.ts +0 -1
- package/dist/utils/hooks/use-outside-close-click/index.js +0 -2
- package/dist/utils/hooks/use-outside-close-click/index.js.map +0 -1
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.d.ts +0 -2
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.js +0 -16
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.js.map +0 -1
- package/dist/utils/hooks/use-pathname/index.js.map +0 -1
- package/dist/utils/hooks/use-pathname/use-pathname.d.ts +0 -1
- package/dist/utils/hooks/use-pathname/use-pathname.js.map +0 -1
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.js +0 -0
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/index.d.ts +0 -0
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/index.js +0 -0
- /package/dist/{utils/hooks → hooks}/use-pathname/index.d.ts +0 -0
- /package/dist/{utils/hooks → hooks}/use-pathname/index.js +0 -0
|
@@ -6,7 +6,7 @@ import { getColoredTextColor } from '../../utils';
|
|
|
6
6
|
* @example
|
|
7
7
|
* <Title align="center">Welcome</Title>
|
|
8
8
|
*/
|
|
9
|
-
export const Title = ({ children, align = 'left', inline = false, color = 'standard', }) => {
|
|
9
|
+
export const Title = ({ children, align = 'left', inline = false, color = 'standard', truncate = false, }) => {
|
|
10
10
|
const styles = {
|
|
11
11
|
fontSize: '3rem',
|
|
12
12
|
fontWeight: 700,
|
|
@@ -14,6 +14,11 @@ export const Title = ({ children, align = 'left', inline = false, color = 'stand
|
|
|
14
14
|
marginBottom: inline ? 0 : '40px',
|
|
15
15
|
textAlign: align,
|
|
16
16
|
color: getColoredTextColor(color),
|
|
17
|
+
...(truncate && {
|
|
18
|
+
overflow: 'hidden',
|
|
19
|
+
whiteSpace: 'nowrap',
|
|
20
|
+
textOverflow: 'ellipsis',
|
|
21
|
+
}),
|
|
17
22
|
};
|
|
18
23
|
return _jsx("h1", { style: styles, children: children });
|
|
19
24
|
};
|
|
@@ -23,7 +28,7 @@ export const Title = ({ children, align = 'left', inline = false, color = 'stand
|
|
|
23
28
|
* @example
|
|
24
29
|
* <H1>Page Title</H1>
|
|
25
30
|
*/
|
|
26
|
-
export const H1 = ({ children, align = 'left', color = 'standard', inline = false, }) => {
|
|
31
|
+
export const H1 = ({ children, align = 'left', color = 'standard', inline = false, truncate = false, }) => {
|
|
27
32
|
const styles = {
|
|
28
33
|
fontSize: '2rem',
|
|
29
34
|
fontWeight: 600,
|
|
@@ -31,6 +36,11 @@ export const H1 = ({ children, align = 'left', color = 'standard', inline = fals
|
|
|
31
36
|
marginBottom: inline ? 0 : '32px',
|
|
32
37
|
textAlign: align,
|
|
33
38
|
color: getColoredTextColor(color),
|
|
39
|
+
...(truncate && {
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
whiteSpace: 'nowrap',
|
|
42
|
+
textOverflow: 'ellipsis',
|
|
43
|
+
}),
|
|
34
44
|
};
|
|
35
45
|
return _jsx("h1", { style: styles, children: children });
|
|
36
46
|
};
|
|
@@ -40,7 +50,7 @@ export const H1 = ({ children, align = 'left', color = 'standard', inline = fals
|
|
|
40
50
|
* @example
|
|
41
51
|
* <H2>Section Title</H2>
|
|
42
52
|
*/
|
|
43
|
-
export const H2 = ({ children, align = 'left', color = 'standard', inline = false, }) => {
|
|
53
|
+
export const H2 = ({ children, align = 'left', color = 'standard', inline = false, truncate = false, }) => {
|
|
44
54
|
const styles = {
|
|
45
55
|
fontSize: '1.5rem',
|
|
46
56
|
fontWeight: 600,
|
|
@@ -48,6 +58,11 @@ export const H2 = ({ children, align = 'left', color = 'standard', inline = fals
|
|
|
48
58
|
marginBottom: inline ? 0 : '24px',
|
|
49
59
|
textAlign: align,
|
|
50
60
|
color: getColoredTextColor(color),
|
|
61
|
+
...(truncate && {
|
|
62
|
+
overflow: 'hidden',
|
|
63
|
+
whiteSpace: 'nowrap',
|
|
64
|
+
textOverflow: 'ellipsis',
|
|
65
|
+
}),
|
|
51
66
|
};
|
|
52
67
|
return _jsx("h2", { style: styles, children: children });
|
|
53
68
|
};
|
|
@@ -57,7 +72,7 @@ export const H2 = ({ children, align = 'left', color = 'standard', inline = fals
|
|
|
57
72
|
* @example
|
|
58
73
|
* <H3>Subsection Title</H3>
|
|
59
74
|
*/
|
|
60
|
-
export const H3 = ({ children, align = 'left', color = 'standard', inline = false, }) => {
|
|
75
|
+
export const H3 = ({ children, align = 'left', color = 'standard', inline = false, truncate = false, }) => {
|
|
61
76
|
const styles = {
|
|
62
77
|
fontSize: '1.25rem',
|
|
63
78
|
fontWeight: 600,
|
|
@@ -65,6 +80,11 @@ export const H3 = ({ children, align = 'left', color = 'standard', inline = fals
|
|
|
65
80
|
marginBottom: inline ? 0 : '16px',
|
|
66
81
|
textAlign: align,
|
|
67
82
|
color: getColoredTextColor(color),
|
|
83
|
+
...(truncate && {
|
|
84
|
+
overflow: 'hidden',
|
|
85
|
+
whiteSpace: 'nowrap',
|
|
86
|
+
textOverflow: 'ellipsis',
|
|
87
|
+
}),
|
|
68
88
|
};
|
|
69
89
|
return _jsx("h3", { style: styles, children: children });
|
|
70
90
|
};
|
|
@@ -73,6 +93,9 @@ const TEXT_SIZES = {
|
|
|
73
93
|
xs: '0.75rem',
|
|
74
94
|
sm: '0.875rem',
|
|
75
95
|
md: '1rem',
|
|
96
|
+
lg: '1.125rem',
|
|
97
|
+
xl: '1.25rem',
|
|
98
|
+
xxl: '1.375rem',
|
|
76
99
|
};
|
|
77
100
|
/**
|
|
78
101
|
* Body text. Renders as `p` by default or `span` when `inline` is true.
|
|
@@ -80,14 +103,20 @@ const TEXT_SIZES = {
|
|
|
80
103
|
* @example
|
|
81
104
|
* <Text size="sm" bold>Important note</Text>
|
|
82
105
|
*/
|
|
83
|
-
export const Text = ({ children, align = 'left', inline = false, color = 'standard', bold = false, size = 'md', }) => {
|
|
106
|
+
export const Text = ({ children, align = 'left', inline = false, color = 'standard', bold = false, size = 'md', truncate = false, }) => {
|
|
84
107
|
const Component = inline ? 'span' : 'p';
|
|
85
108
|
const styles = {
|
|
86
109
|
fontSize: TEXT_SIZES[size],
|
|
87
|
-
fontWeight: bold ? 600 :
|
|
110
|
+
fontWeight: bold ? 600 : 400,
|
|
88
111
|
lineHeight: 1.5,
|
|
112
|
+
marginBottom: inline ? 0 : '0.25em',
|
|
89
113
|
textAlign: align,
|
|
90
114
|
color: getColoredTextColor(color),
|
|
115
|
+
...(truncate && {
|
|
116
|
+
overflow: 'hidden',
|
|
117
|
+
whiteSpace: 'nowrap',
|
|
118
|
+
textOverflow: 'ellipsis',
|
|
119
|
+
}),
|
|
91
120
|
};
|
|
92
121
|
return _jsx(Component, { style: styles, children: children });
|
|
93
122
|
};
|
|
@@ -97,13 +126,18 @@ export const Text = ({ children, align = 'left', inline = false, color = 'standa
|
|
|
97
126
|
* @example
|
|
98
127
|
* <Subtitle>Last updated March 2025</Subtitle>
|
|
99
128
|
*/
|
|
100
|
-
export const Subtitle = ({ children, align = 'left', color = 'text-secondary', }) => {
|
|
129
|
+
export const Subtitle = ({ children, align = 'left', color = 'text-secondary', truncate = false, }) => {
|
|
101
130
|
const styles = {
|
|
102
131
|
display: 'block',
|
|
103
|
-
fontSize: '
|
|
132
|
+
fontSize: '0.875rem',
|
|
104
133
|
marginTop: '0.2em',
|
|
105
134
|
textAlign: align,
|
|
106
135
|
color: getColoredTextColor(color),
|
|
136
|
+
...(truncate && {
|
|
137
|
+
overflow: 'hidden',
|
|
138
|
+
whiteSpace: 'nowrap',
|
|
139
|
+
textOverflow: 'ellipsis',
|
|
140
|
+
}),
|
|
107
141
|
};
|
|
108
142
|
return _jsx("span", { style: styles, children: children });
|
|
109
143
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ export const buttonRecipe = defineRecipe({
|
|
|
13
13
|
cursor: 'pointer',
|
|
14
14
|
userSelect: 'none',
|
|
15
15
|
height: 'fit-content',
|
|
16
|
+
whiteSpace: 'nowrap',
|
|
16
17
|
},
|
|
17
18
|
variants: {
|
|
18
19
|
color: {
|
|
@@ -97,19 +98,32 @@ export const buttonRecipe = defineRecipe({
|
|
|
97
98
|
borderColor: 'text.standard',
|
|
98
99
|
},
|
|
99
100
|
},
|
|
101
|
+
neutral: {
|
|
102
|
+
backgroundColor: 'background',
|
|
103
|
+
borderColor: 'structure',
|
|
104
|
+
color: 'text.standard',
|
|
105
|
+
_hover: {
|
|
106
|
+
backgroundColor: 'elevated',
|
|
107
|
+
color: 'text.standard',
|
|
108
|
+
borderColor: 'structure',
|
|
109
|
+
},
|
|
110
|
+
},
|
|
100
111
|
},
|
|
101
112
|
size: {
|
|
102
113
|
sm: {
|
|
103
|
-
|
|
104
|
-
|
|
114
|
+
gap: '1', // 4px
|
|
115
|
+
fontSize: '0.5rem', // 8px
|
|
116
|
+
padding: '1', // 4px
|
|
105
117
|
},
|
|
106
118
|
md: {
|
|
107
|
-
|
|
108
|
-
|
|
119
|
+
gap: '2', // 8px
|
|
120
|
+
fontSize: '1rem', // 16px
|
|
121
|
+
padding: '2', // 8px
|
|
109
122
|
},
|
|
110
123
|
lg: {
|
|
111
|
-
|
|
112
|
-
|
|
124
|
+
gap: '3', // 12px
|
|
125
|
+
fontSize: '1.5rem', // 24px
|
|
126
|
+
padding: '3', // 12px
|
|
113
127
|
},
|
|
114
128
|
},
|
|
115
129
|
fullWidth: {
|
|
@@ -127,6 +141,16 @@ export const buttonRecipe = defineRecipe({
|
|
|
127
141
|
},
|
|
128
142
|
false: {},
|
|
129
143
|
},
|
|
144
|
+
textVariant: {
|
|
145
|
+
true: {
|
|
146
|
+
backgroundColor: 'background',
|
|
147
|
+
borderColor: 'transparent',
|
|
148
|
+
border: 'none',
|
|
149
|
+
_hover: {
|
|
150
|
+
textDecoration: 'underline',
|
|
151
|
+
},
|
|
152
|
+
},
|
|
153
|
+
},
|
|
130
154
|
},
|
|
131
155
|
compoundVariants: [
|
|
132
156
|
// Disabled state overrides for all colors except black
|
|
@@ -230,6 +254,66 @@ export const buttonRecipe = defineRecipe({
|
|
|
230
254
|
},
|
|
231
255
|
},
|
|
232
256
|
},
|
|
257
|
+
{
|
|
258
|
+
textVariant: true,
|
|
259
|
+
disabled: true,
|
|
260
|
+
css: {
|
|
261
|
+
_hover: {
|
|
262
|
+
textDecoration: 'none',
|
|
263
|
+
},
|
|
264
|
+
},
|
|
265
|
+
},
|
|
266
|
+
// textVariant color overrides — inherit the color's main value as text color
|
|
267
|
+
{
|
|
268
|
+
textVariant: true,
|
|
269
|
+
color: 'primary',
|
|
270
|
+
css: { color: 'primary.main', _hover: { color: 'primary.main' } },
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
textVariant: true,
|
|
274
|
+
color: 'secondary',
|
|
275
|
+
css: { color: 'secondary.main', _hover: { color: 'secondary.main' } },
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
textVariant: true,
|
|
279
|
+
color: 'tertiary',
|
|
280
|
+
css: { color: 'tertiary.main', _hover: { color: 'tertiary.main' } },
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
textVariant: true,
|
|
284
|
+
color: 'gray',
|
|
285
|
+
css: { color: 'gray.main', _hover: { color: 'gray.main' } },
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
textVariant: true,
|
|
289
|
+
color: 'success',
|
|
290
|
+
css: { color: 'success.main', _hover: { color: 'success.main' } },
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
textVariant: true,
|
|
294
|
+
color: 'error',
|
|
295
|
+
css: { color: 'error.main', _hover: { color: 'error.main' } },
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
textVariant: true,
|
|
299
|
+
color: 'info',
|
|
300
|
+
css: { color: 'info.main', _hover: { color: 'info.main' } },
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
textVariant: true,
|
|
304
|
+
color: 'neutral',
|
|
305
|
+
css: { color: 'text.standard', _hover: { color: 'text.standard' } },
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
textVariant: true,
|
|
309
|
+
color: 'black',
|
|
310
|
+
css: { color: 'black', _hover: { color: 'black' } },
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
textVariant: true,
|
|
314
|
+
color: 'text',
|
|
315
|
+
css: { color: 'text.standard', _hover: { color: 'text.standard' } },
|
|
316
|
+
},
|
|
233
317
|
],
|
|
234
318
|
defaultVariants: {
|
|
235
319
|
color: 'primary',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-recipe.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button-recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC;IACxC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,4BAA4B;QACxC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"button-recipe.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button-recipe.ts"],"names":[],"mappings":"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"}
|
|
@@ -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, 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,13 +8,14 @@ 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, 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,
|
|
15
15
|
fullWidth,
|
|
16
16
|
disabled,
|
|
17
|
+
textVariant: text,
|
|
17
18
|
});
|
|
18
|
-
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 }));
|
|
19
20
|
};
|
|
20
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,QAAQ,GAAG,KAAK,GACH,EAAE,EAAE;IACjB,MAAM,aAAa,GAAG,MAAM,CAAC;QAC5B,KAAK;QACL,IAAI;QACJ,SAAS;QACT,QAAQ;
|
|
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"}
|
|
@@ -4,7 +4,7 @@ export type ButtonProps = {
|
|
|
4
4
|
/** Stretches the button to fill its container @default `false` */
|
|
5
5
|
fullWidth?: boolean;
|
|
6
6
|
/** Color variant @default `'primary'` */
|
|
7
|
-
color?:
|
|
7
|
+
color?: UtilityColorOptions | 'neutral';
|
|
8
8
|
/** HTML button type @default `'button'` */
|
|
9
9
|
type?: 'button' | 'submit' | 'reset';
|
|
10
10
|
/** Click handler. Not called when `disabled` is true */
|
|
@@ -13,7 +13,11 @@ export type ButtonProps = {
|
|
|
13
13
|
margin?: string;
|
|
14
14
|
/** Size variant @default `'md'` */
|
|
15
15
|
size?: UtilitySizeOptions;
|
|
16
|
+
/** Render as text variant @default `'false'` */
|
|
17
|
+
text?: boolean;
|
|
16
18
|
/** Disables the button and suppresses click events @default `false` */
|
|
17
19
|
disabled?: boolean;
|
|
20
|
+
/** Accessibility Label to be added to Button */
|
|
21
|
+
ariaLabel?: string;
|
|
18
22
|
children: ReactNode;
|
|
19
23
|
};
|
|
@@ -2,88 +2,88 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { cva } from '../../../styled-system/css';
|
|
3
3
|
import { H3 } from '../../../components/typography';
|
|
4
4
|
import { Divider } from '../divider';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
5
|
+
const styles = {
|
|
6
|
+
cardContainer: cva({
|
|
7
|
+
base: {
|
|
8
|
+
borderWidth: 'sm',
|
|
9
|
+
borderColor: 'structure',
|
|
10
|
+
padding: {
|
|
11
|
+
base: '5',
|
|
12
|
+
},
|
|
13
|
+
marginX: 'auto',
|
|
14
|
+
maxWidth: '850px',
|
|
15
|
+
width: {
|
|
16
|
+
base: '100%',
|
|
17
|
+
md: '75%',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
variants: {
|
|
21
|
+
size: {
|
|
22
|
+
sm: {
|
|
23
|
+
borderRadius: 'sm',
|
|
24
|
+
maxWidth: '600px',
|
|
21
25
|
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
md: {
|
|
27
|
+
borderRadius: 'md',
|
|
28
|
+
},
|
|
29
|
+
lg: {
|
|
30
|
+
borderRadius: 'lg',
|
|
27
31
|
},
|
|
28
32
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
borderRadius: 'sm',
|
|
33
|
-
maxWidth: '600px',
|
|
34
|
-
},
|
|
35
|
-
md: {
|
|
36
|
-
borderRadius: 'md',
|
|
37
|
-
},
|
|
38
|
-
lg: {
|
|
39
|
-
borderRadius: 'lg',
|
|
40
|
-
},
|
|
33
|
+
surfaceColor: {
|
|
34
|
+
background: {
|
|
35
|
+
backgroundColor: 'background',
|
|
41
36
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
backgroundColor: 'background',
|
|
45
|
-
},
|
|
46
|
-
surface: {
|
|
47
|
-
backgroundColor: 'surface',
|
|
48
|
-
},
|
|
49
|
-
elevated: {
|
|
50
|
-
backgroundColor: 'elevated',
|
|
51
|
-
},
|
|
37
|
+
surface: {
|
|
38
|
+
backgroundColor: 'surface',
|
|
52
39
|
},
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
56
|
-
},
|
|
57
|
-
false: {
|
|
58
|
-
boxShadow: 'none',
|
|
59
|
-
},
|
|
40
|
+
elevated: {
|
|
41
|
+
backgroundColor: 'elevated',
|
|
60
42
|
},
|
|
61
43
|
},
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
title: cva({
|
|
69
|
-
variants: {
|
|
70
|
-
size: {
|
|
71
|
-
sm: {
|
|
72
|
-
marginBottom: '1',
|
|
73
|
-
},
|
|
74
|
-
md: {
|
|
75
|
-
marginBottom: '3',
|
|
76
|
-
},
|
|
77
|
-
lg: {
|
|
78
|
-
marginBottom: '3',
|
|
79
|
-
},
|
|
44
|
+
shadow: {
|
|
45
|
+
true: {
|
|
46
|
+
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
47
|
+
},
|
|
48
|
+
false: {
|
|
49
|
+
boxShadow: 'none',
|
|
80
50
|
},
|
|
81
51
|
},
|
|
82
|
-
|
|
83
|
-
|
|
52
|
+
},
|
|
53
|
+
defaultVariants: {
|
|
54
|
+
size: 'md',
|
|
55
|
+
surfaceColor: 'background',
|
|
56
|
+
shadow: true,
|
|
57
|
+
},
|
|
58
|
+
}),
|
|
59
|
+
title: cva({
|
|
60
|
+
variants: {
|
|
61
|
+
size: {
|
|
62
|
+
sm: {
|
|
63
|
+
marginBottom: '1',
|
|
64
|
+
},
|
|
65
|
+
md: {
|
|
66
|
+
marginBottom: '3',
|
|
67
|
+
},
|
|
68
|
+
lg: {
|
|
69
|
+
marginBottom: '3',
|
|
70
|
+
},
|
|
84
71
|
},
|
|
85
|
-
}
|
|
86
|
-
|
|
72
|
+
},
|
|
73
|
+
defaultVariants: {
|
|
74
|
+
size: 'md',
|
|
75
|
+
},
|
|
76
|
+
}),
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* General-purpose content card container with optional title, divider, shadow, and surface color variants.
|
|
80
|
+
*
|
|
81
|
+
* @example
|
|
82
|
+
* <Card title={{ text: 'Details', divider: true }} size="md" shadow>
|
|
83
|
+
* <div>Card content here</div>
|
|
84
|
+
* </Card>
|
|
85
|
+
*/
|
|
86
|
+
export const Card = ({ surfaceColor = 'background', children, size = 'md', shadow = true, title, }) => {
|
|
87
87
|
return (_jsxs("div", { className: styles.cardContainer({ size, surfaceColor, shadow }), children: [title && (_jsxs("div", { className: styles.title({ size }), children: [_jsx(H3, { align: title.align, inline: true, children: title.text }), title?.divider && _jsx(Divider, {})] })), _jsx("div", { children: children })] }));
|
|
88
88
|
};
|
|
89
89
|
//# sourceMappingURL=card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/ui/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/ui/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,GAAG;IACd,aAAa,EAAE,GAAG,CAAC;QAClB,IAAI,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,WAAW;YACxB,OAAO,EAAE;gBACR,IAAI,EAAE,GAAG;aACT;YACD,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE;gBACN,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,KAAK;aACT;SACD;QACD,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,YAAY,EAAE,IAAI;oBAClB,QAAQ,EAAE,OAAO;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,IAAI;iBAClB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,IAAI;iBAClB;aACD;YACD,YAAY,EAAE;gBACb,UAAU,EAAE;oBACX,eAAe,EAAE,YAAY;iBAC7B;gBACD,OAAO,EAAE;oBACR,eAAe,EAAE,SAAS;iBAC1B;gBACD,QAAQ,EAAE;oBACT,eAAe,EAAE,UAAU;iBAC3B;aACD;YACD,MAAM,EAAE;gBACP,IAAI,EAAE;oBACL,SAAS,EAAE,+BAA+B;iBAC1C;gBACD,KAAK,EAAE;oBACN,SAAS,EAAE,MAAM;iBACjB;aACD;SACD;QACD,eAAe,EAAE;YAChB,IAAI,EAAE,IAAI;YACV,YAAY,EAAE,YAAY;YAC1B,MAAM,EAAE,IAAI;SACZ;KACD,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;gBACD,EAAE,EAAE;oBACH,YAAY,EAAE,GAAG;iBACjB;aACD;SACD;QACD,eAAe,EAAE;YAChB,IAAI,EAAE,IAAI;SACV;KACD,CAAC;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACpB,YAAY,GAAG,YAAY,EAC3B,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GACM,EAAE,EAAE;IACf,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,aAClE,KAAK,IAAI,CACT,eAAK,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,aACrC,KAAC,EAAE,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,kBAC5B,KAAK,CAAC,IAAI,GACP,EACJ,KAAK,EAAE,OAAO,IAAI,KAAC,OAAO,KAAG,IACzB,CACN,EACD,wBAAM,QAAQ,GAAO,IAChB,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -1,25 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { css, cva, cx } from '../../../styled-system/css';
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
weight: {
|
|
6
|
-
light: { height: '0.5px' },
|
|
7
|
-
standard: { height: '1px' },
|
|
8
|
-
heavy: { height: '2px' },
|
|
9
|
-
},
|
|
10
|
-
},
|
|
11
|
-
defaultVariants: {
|
|
12
|
-
weight: 'standard',
|
|
13
|
-
},
|
|
14
|
-
});
|
|
15
|
-
/**
|
|
16
|
-
* Horizontal rule with configurable width, vertical margin, and weight.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* <Divider width="50%" marginY="12px" weight="light" />
|
|
20
|
-
*/
|
|
21
|
-
export const Divider = ({ width, marginY, weight }) => {
|
|
22
|
-
const styles = {
|
|
3
|
+
const styles = {
|
|
4
|
+
core: {
|
|
23
5
|
base: css({
|
|
24
6
|
marginX: 'auto',
|
|
25
7
|
backgroundColor: 'structure',
|
|
@@ -30,12 +12,32 @@ export const Divider = ({ width, marginY, weight }) => {
|
|
|
30
12
|
width: css({
|
|
31
13
|
width: '75%',
|
|
32
14
|
}),
|
|
33
|
-
}
|
|
15
|
+
},
|
|
16
|
+
dividerWeight: cva({
|
|
17
|
+
variants: {
|
|
18
|
+
weight: {
|
|
19
|
+
light: { height: '0.5px' },
|
|
20
|
+
standard: { height: '1px' },
|
|
21
|
+
heavy: { height: '2px' },
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
weight: 'standard',
|
|
26
|
+
},
|
|
27
|
+
}),
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Horizontal rule with configurable width, vertical margin, and weight.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* <Divider width="50%" marginY="12px" weight="light" />
|
|
34
|
+
*/
|
|
35
|
+
export const Divider = ({ width, marginY, weight }) => {
|
|
34
36
|
const staticStyles = {
|
|
35
37
|
...(width && { width }),
|
|
36
38
|
...(marginY && { marginTop: marginY, marginBottom: marginY }),
|
|
37
39
|
};
|
|
38
|
-
const className = cx(styles.base, dividerWeight({ weight }), !marginY && styles.marginY, !width && styles.width);
|
|
40
|
+
const className = cx(styles.core.base, styles.dividerWeight({ weight }), !marginY && styles.core.marginY, !width && styles.core.width);
|
|
39
41
|
return _jsx("div", { style: staticStyles, className: className });
|
|
40
42
|
};
|
|
41
43
|
//# sourceMappingURL=divider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/ui/divider/divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAGnD,MAAM,
|
|
1
|
+
{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/ui/divider/divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAGnD,MAAM,MAAM,GAAG;IACd,IAAI,EAAE;QACL,IAAI,EAAE,GAAG,CAAC;YACT,OAAO,EAAE,MAAM;YACf,eAAe,EAAE,WAAW;SAC5B,CAAC;QACF,OAAO,EAAE,GAAG,CAAC;YACZ,OAAO,EAAE,MAAM;SACf,CAAC;QACF,KAAK,EAAE,GAAG,CAAC;YACV,KAAK,EAAE,KAAK;SACZ,CAAC;KACF;IACD,aAAa,EAAE,GAAG,CAAC;QAClB,QAAQ,EAAE;YACT,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;gBAC1B,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;gBAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;aACxB;SACD;QACD,eAAe,EAAE;YAChB,MAAM,EAAE,UAAU;SAClB;KACD,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAgB,EAAE,EAAE;IACnE,MAAM,YAAY,GAAkB;QACnC,GAAG,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC;QACvB,GAAG,CAAC,OAAO,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;KAC7D,CAAC;IAEF,MAAM,SAAS,GAAG,EAAE,CACnB,MAAM,CAAC,IAAI,CAAC,IAAI,EAChB,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,EAC/B,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAC3B,CAAC;IAEF,OAAO,cAAK,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AAC3D,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IconProps } from './icon.types';
|
|
2
2
|
/**
|
|
3
3
|
* Standard Icon component with utility color and size support.
|
|
4
|
-
*
|
|
4
|
+
* Utilizes PhosphorIcons (https://phosphoricons.com)
|
|
5
5
|
*
|
|
6
6
|
* @example
|
|
7
7
|
* <Icon name="Star" size={24} color="primary" filled />
|
|
@@ -4,7 +4,7 @@ import * as PhosphorIcons from '@phosphor-icons/react';
|
|
|
4
4
|
import { getUtilityColorValue } from '../../../utils';
|
|
5
5
|
/**
|
|
6
6
|
* Standard Icon component with utility color and size support.
|
|
7
|
-
*
|
|
7
|
+
* Utilizes PhosphorIcons (https://phosphoricons.com)
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* <Icon name="Star" size={24} color="primary" filled />
|
|
@@ -7,4 +7,4 @@ import { IconButtonProps } from './icon-button.types';
|
|
|
7
7
|
* Add Item
|
|
8
8
|
* </IconButton>
|
|
9
9
|
*/
|
|
10
|
-
export declare const IconButton: (
|
|
10
|
+
export declare const IconButton: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
|