@chayns-ui/core 0.9.4 → 0.10.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/dist/accordion.css +3 -1
- package/dist/badge.css +28 -3
- package/dist/banner.css +2 -0
- package/dist/breadcrumb.css +63 -0
- package/dist/button.css +103 -35
- package/dist/card.css +39 -0
- package/dist/checkbox.css +3 -3
- package/dist/combo-box.css +2 -0
- package/dist/components/accordion/Accordion.d.ts +3 -4
- package/dist/components/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/accordion/Accordion.js +37 -23
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/accordion/Accordion.types.d.ts +7 -2
- package/dist/components/accordion/Accordion.types.d.ts.map +1 -1
- package/dist/components/accordion/Accordion.types.js +7 -1
- package/dist/components/accordion/Accordion.types.js.map +1 -1
- package/dist/components/accordion-group/AccordionGroup.d.ts.map +1 -1
- package/dist/components/accordion-group/AccordionGroup.js +1 -0
- package/dist/components/accordion-group/AccordionGroup.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +1 -0
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/Avatar.types.d.ts +9 -1
- package/dist/components/avatar/Avatar.types.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.types.js +17 -0
- package/dist/components/avatar/Avatar.types.js.map +1 -0
- package/dist/components/avatar-group/AvatarGroup.d.ts.map +1 -1
- package/dist/components/avatar-group/AvatarGroup.js +4 -3
- package/dist/components/avatar-group/AvatarGroup.js.map +1 -1
- package/dist/components/badge/Badge.d.ts.map +1 -1
- package/dist/components/badge/Badge.js +1 -0
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/Badge.types.d.ts +13 -0
- package/dist/components/badge/Badge.types.d.ts.map +1 -1
- package/dist/components/badge/Badge.types.js +16 -1
- package/dist/components/badge/Badge.types.js.map +1 -1
- package/dist/components/banner/Banner.d.ts.map +1 -1
- package/dist/components/banner/Banner.js +1 -0
- package/dist/components/banner/Banner.js.map +1 -1
- package/dist/components/banner/Banner.types.d.ts +7 -0
- package/dist/components/banner/Banner.types.d.ts.map +1 -1
- package/dist/components/banner/Banner.types.js +9 -1
- package/dist/components/banner/Banner.types.js.map +1 -1
- package/dist/components/breadcrumb/Breadcrumb.d.ts +4 -0
- package/dist/components/breadcrumb/Breadcrumb.d.ts.map +1 -0
- package/dist/components/breadcrumb/Breadcrumb.js +35 -0
- package/dist/components/breadcrumb/Breadcrumb.js.map +1 -0
- package/dist/components/breadcrumb/Breadcrumb.types.d.ts +13 -0
- package/dist/components/breadcrumb/Breadcrumb.types.d.ts.map +1 -0
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +1 -0
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/Button.types.d.ts +7 -0
- package/dist/components/button/Button.types.d.ts.map +1 -1
- package/dist/components/button/Button.types.js +9 -1
- package/dist/components/button/Button.types.js.map +1 -1
- package/dist/components/button/button-icon/ButtonIcon.d.ts.map +1 -1
- package/dist/components/button/button-icon/ButtonIcon.js +7 -3
- package/dist/components/button/button-icon/ButtonIcon.js.map +1 -1
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +2 -0
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +1 -0
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.js +27 -8
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/date-time-picker/DateTimePicker.d.ts.map +1 -1
- package/dist/components/date-time-picker/DateTimePicker.js +31 -239
- package/dist/components/date-time-picker/DateTimePicker.js.map +1 -1
- package/dist/components/date-time-picker/DateTimePicker.types.d.ts +12 -0
- package/dist/components/date-time-picker/DateTimePicker.types.d.ts.map +1 -1
- package/dist/components/date-time-picker/DateTimePicker.types.js +15 -1
- package/dist/components/date-time-picker/DateTimePicker.types.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-utils.d.ts +4 -0
- package/dist/components/date-time-picker/date-time-picker-utils.d.ts.map +1 -0
- package/dist/components/date-time-picker/date-time-picker-utils.js +19 -0
- package/dist/components/date-time-picker/date-time-picker-utils.js.map +1 -0
- package/dist/components/date-time-picker/hooks/useDateTimePickerValue.d.ts +37 -0
- package/dist/components/date-time-picker/hooks/useDateTimePickerValue.d.ts.map +1 -0
- package/dist/components/date-time-picker/hooks/useDateTimePickerValue.js +156 -0
- package/dist/components/date-time-picker/hooks/useDateTimePickerValue.js.map +1 -0
- package/dist/components/date-time-picker/sizer/PickerSizer.d.ts +7 -0
- package/dist/components/date-time-picker/sizer/PickerSizer.d.ts.map +1 -0
- package/dist/components/date-time-picker/sizer/PickerSizer.js +15 -0
- package/dist/components/date-time-picker/sizer/PickerSizer.js.map +1 -0
- package/dist/components/date-time-picker/wheel/Wheel.d.ts +14 -0
- package/dist/components/date-time-picker/wheel/Wheel.d.ts.map +1 -0
- package/dist/components/date-time-picker/wheel/Wheel.js +136 -0
- package/dist/components/date-time-picker/wheel/Wheel.js.map +1 -0
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +1 -0
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/list/List.d.ts +15 -10
- package/dist/components/list/List.d.ts.map +1 -1
- package/dist/components/list/List.js +19 -7
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/list/List.types.d.ts +2 -2
- package/dist/components/list/List.types.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +4 -0
- package/dist/components/pagination/Pagination.d.ts.map +1 -0
- package/dist/components/pagination/Pagination.js +57 -0
- package/dist/components/pagination/Pagination.js.map +1 -0
- package/dist/components/pagination/Pagination.types.d.ts +15 -0
- package/dist/components/pagination/Pagination.types.d.ts.map +1 -0
- package/dist/components/pagination/pagination-pages.d.ts +2 -0
- package/dist/components/pagination/pagination-pages.d.ts.map +1 -0
- package/dist/components/pagination/pagination-pages.js +35 -0
- package/dist/components/pagination/pagination-pages.js.map +1 -0
- package/dist/components/popup/Popup.d.ts +4 -1
- package/dist/components/popup/Popup.d.ts.map +1 -1
- package/dist/components/popup/Popup.js +25 -18
- package/dist/components/popup/Popup.js.map +1 -1
- package/dist/components/popup/PopupList.d.ts +4 -1
- package/dist/components/popup/PopupList.d.ts.map +1 -1
- package/dist/components/popup/PopupList.js +7 -1
- package/dist/components/popup/PopupList.js.map +1 -1
- package/dist/components/progress/Progress.d.ts.map +1 -1
- package/dist/components/progress/Progress.js +1 -0
- package/dist/components/progress/Progress.js.map +1 -1
- package/dist/components/progress/Progress.types.d.ts +1 -1
- package/dist/components/progress/Progress.types.d.ts.map +1 -1
- package/dist/components/radio-group/RadioGroup.d.ts.map +1 -1
- package/dist/components/radio-group/RadioGroup.js +2 -0
- package/dist/components/radio-group/RadioGroup.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js +78 -25
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.types.d.ts +1 -1
- package/dist/components/segmented-control/SegmentedControl.types.d.ts.map +1 -1
- package/dist/components/segmented-control/SegmentedControlContext.d.ts +2 -0
- package/dist/components/segmented-control/SegmentedControlContext.d.ts.map +1 -1
- package/dist/components/segmented-control/SegmentedControlContext.js.map +1 -1
- package/dist/components/skeleton/Skeleton.d.ts.map +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -0
- package/dist/components/skeleton/Skeleton.js.map +1 -1
- package/dist/components/skeleton/Skeleton.types.d.ts +6 -0
- package/dist/components/skeleton/Skeleton.types.d.ts.map +1 -1
- package/dist/components/skeleton/Skeleton.types.js +8 -1
- package/dist/components/skeleton/Skeleton.types.js.map +1 -1
- package/dist/components/slider/Slider.d.ts +4 -0
- package/dist/components/slider/Slider.d.ts.map +1 -0
- package/dist/components/slider/Slider.js +61 -0
- package/dist/components/slider/Slider.js.map +1 -0
- package/dist/components/slider/Slider.types.d.ts +10 -0
- package/dist/components/slider/Slider.types.d.ts.map +1 -0
- package/dist/components/spinner/Spinner.d.ts.map +1 -1
- package/dist/components/spinner/Spinner.js +1 -0
- package/dist/components/spinner/Spinner.js.map +1 -1
- package/dist/components/split-button/SplitButton.d.ts.map +1 -1
- package/dist/components/split-button/SplitButton.js +2 -1
- package/dist/components/split-button/SplitButton.js.map +1 -1
- package/dist/components/stepper/Stepper.d.ts +4 -0
- package/dist/components/stepper/Stepper.d.ts.map +1 -0
- package/dist/components/stepper/Stepper.js +60 -0
- package/dist/components/stepper/Stepper.js.map +1 -0
- package/dist/components/stepper/Stepper.types.d.ts +27 -0
- package/dist/components/stepper/Stepper.types.d.ts.map +1 -0
- package/dist/components/stepper/Stepper.types.js +25 -0
- package/dist/components/stepper/Stepper.types.js.map +1 -0
- package/dist/components/stepper/stepper-values.d.ts +6 -0
- package/dist/components/stepper/stepper-values.d.ts.map +1 -0
- package/dist/components/stepper/stepper-values.js +26 -0
- package/dist/components/stepper/stepper-values.js.map +1 -0
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +1 -0
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/text-area/TextArea.d.ts.map +1 -1
- package/dist/components/text-area/TextArea.js +1 -0
- package/dist/components/text-area/TextArea.js.map +1 -1
- package/dist/components/text-field/TextField.d.ts.map +1 -1
- package/dist/components/text-field/TextField.js +1 -0
- package/dist/components/text-field/TextField.js.map +1 -1
- package/dist/components/tooltip/Tooltip.d.ts +4 -0
- package/dist/components/tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/tooltip/Tooltip.js +75 -0
- package/dist/components/tooltip/Tooltip.js.map +1 -0
- package/dist/components/tooltip/Tooltip.types.d.ts +12 -0
- package/dist/components/tooltip/Tooltip.types.d.ts.map +1 -0
- package/dist/components/tooltip/hooks/useTooltipInteraction.d.ts +11 -0
- package/dist/components/tooltip/hooks/useTooltipInteraction.d.ts.map +1 -0
- package/dist/components/tooltip/hooks/useTooltipInteraction.js +59 -0
- package/dist/components/tooltip/hooks/useTooltipInteraction.js.map +1 -0
- package/dist/components/tooltip/tooltip-trigger-props.d.ts +4 -0
- package/dist/components/tooltip/tooltip-trigger-props.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip-trigger-props.js +25 -0
- package/dist/components/tooltip/tooltip-trigger-props.js.map +1 -0
- package/dist/date-time-picker.css +33 -2
- package/dist/hooks/useOverlayPosition.d.ts +4 -0
- package/dist/hooks/useOverlayPosition.d.ts.map +1 -0
- package/dist/hooks/useOverlayPosition.js +60 -0
- package/dist/hooks/useOverlayPosition.js.map +1 -0
- package/dist/index.d.ts +21 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -7
- package/dist/pagination.css +54 -0
- package/dist/popup.css +4 -0
- package/dist/progress.css +1 -1
- package/dist/segmented-control.css +2 -0
- package/dist/slider.css +109 -0
- package/dist/split-button.css +2 -79
- package/dist/stepper.css +77 -0
- package/dist/styles.css +5 -0
- package/dist/tooltip.css +68 -0
- package/dist/utils/native-ref.d.ts +4 -0
- package/dist/utils/native-ref.d.ts.map +1 -0
- package/dist/utils/native-ref.js +24 -0
- package/dist/utils/native-ref.js.map +1 -0
- package/package.json +7 -2
package/dist/accordion.css
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import url('./button.css');
|
|
2
|
+
|
|
1
3
|
@layer chayns.components {
|
|
2
4
|
.chayns-accordion {
|
|
3
5
|
box-sizing: border-box;
|
|
@@ -10,7 +12,7 @@
|
|
|
10
12
|
background: var(--surface);
|
|
11
13
|
}
|
|
12
14
|
|
|
13
|
-
.chayns-accordion--wrapped {
|
|
15
|
+
.chayns-accordion--wrapped:not(.chayns-accordion--grouped) {
|
|
14
16
|
overflow: hidden;
|
|
15
17
|
border: 1px solid var(--border);
|
|
16
18
|
border-radius: 10px;
|
package/dist/badge.css
CHANGED
|
@@ -10,6 +10,13 @@
|
|
|
10
10
|
font-size: var(--fs-caption);
|
|
11
11
|
font-weight: 500;
|
|
12
12
|
line-height: 1.2;
|
|
13
|
+
transition:
|
|
14
|
+
background 0.2s ease,
|
|
15
|
+
color 0.2s ease,
|
|
16
|
+
border-color 0.2s ease,
|
|
17
|
+
box-shadow 0.2s ease,
|
|
18
|
+
transform 0.15s ease,
|
|
19
|
+
filter 0.2s ease;
|
|
13
20
|
}
|
|
14
21
|
|
|
15
22
|
.chayns-badge--md {
|
|
@@ -31,16 +38,34 @@
|
|
|
31
38
|
.chayns-badge--success {
|
|
32
39
|
/* stylelint-disable-next-line custom-property-pattern */
|
|
33
40
|
background: var(--success-bg);
|
|
34
|
-
color: var(--success);
|
|
41
|
+
color: var(--on-success);
|
|
35
42
|
}
|
|
36
43
|
|
|
37
44
|
.chayns-badge--warning {
|
|
38
45
|
background: var(--warning-bg);
|
|
39
|
-
color: var(--warning);
|
|
46
|
+
color: var(--on-warning);
|
|
40
47
|
}
|
|
41
48
|
|
|
42
49
|
.chayns-badge--danger {
|
|
43
50
|
background: var(--danger-bg);
|
|
44
|
-
color: var(--danger);
|
|
51
|
+
color: var(--on-danger);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (hover: hover) {
|
|
55
|
+
.chayns-badge:hover {
|
|
56
|
+
transform: translateY(-2px);
|
|
57
|
+
filter: saturate(1.18);
|
|
58
|
+
box-shadow: 0 5px 12px -5px rgb(16 40 46 / 30%);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@media (prefers-reduced-motion: reduce) {
|
|
63
|
+
.chayns-badge {
|
|
64
|
+
transition: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.chayns-badge:hover {
|
|
68
|
+
transform: none;
|
|
69
|
+
}
|
|
45
70
|
}
|
|
46
71
|
}
|
package/dist/banner.css
CHANGED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@import url('./button.css');
|
|
2
|
+
|
|
3
|
+
@layer chayns.components {
|
|
4
|
+
.chayns-breadcrumb {
|
|
5
|
+
min-inline-size: 0;
|
|
6
|
+
overflow-x: auto;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.chayns-breadcrumb__list {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: var(--k9);
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
list-style: none;
|
|
16
|
+
font-size: var(--fs-body);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.chayns-breadcrumb__item {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex: none;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: var(--k9);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.chayns-breadcrumb__link,
|
|
27
|
+
.chayns-breadcrumb__current {
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: var(--k6);
|
|
31
|
+
min-block-size: max(24px, var(--k24));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.chayns-breadcrumb__link {
|
|
35
|
+
color: var(--text-2);
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.chayns-breadcrumb__current {
|
|
40
|
+
color: var(--text);
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.chayns-breadcrumb__separator {
|
|
45
|
+
color: var(--text-2);
|
|
46
|
+
font-size: var(--icon);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.chayns-breadcrumb__link:hover {
|
|
50
|
+
text-decoration: underline;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (width <= 640px) {
|
|
54
|
+
.chayns-breadcrumb__list,
|
|
55
|
+
.chayns-breadcrumb__item {
|
|
56
|
+
gap: var(--k6);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.chayns-breadcrumb__link:focus-visible {
|
|
61
|
+
outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
|
|
62
|
+
}
|
|
63
|
+
}
|
package/dist/button.css
CHANGED
|
@@ -24,6 +24,10 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.chayns-button {
|
|
27
|
+
transition:
|
|
28
|
+
transform 0.14s ease,
|
|
29
|
+
box-shadow 0.18s ease,
|
|
30
|
+
filter 0.18s ease;
|
|
27
31
|
gap: var(--sp-2);
|
|
28
32
|
padding-block: var(--btn-py);
|
|
29
33
|
padding-inline: var(--btn-px);
|
|
@@ -61,33 +65,7 @@
|
|
|
61
65
|
|
|
62
66
|
:where(.chayns-button--danger, .chayns-icon-button--danger) {
|
|
63
67
|
background: var(--danger-bg);
|
|
64
|
-
color: var(--danger);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
:where(.chayns-button, .chayns-icon-button):active:not(:disabled) {
|
|
68
|
-
transform: scale(0.96);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:where(.chayns-icon-button):active:not(:disabled) {
|
|
72
|
-
transform: scale(0.96);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
:where(.chayns-button--primary, .chayns-icon-button--primary):active:not(:disabled) {
|
|
76
|
-
background: var(--accent-active);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
:where(.chayns-button--outline, .chayns-icon-button--outline):active:not(:disabled) {
|
|
80
|
-
background: var(--accent);
|
|
81
|
-
color: var(--on-accent);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
:where(.chayns-button--ghost, .chayns-icon-button--ghost):active:not(:disabled) {
|
|
85
|
-
background: var(--surface-alt);
|
|
86
|
-
color: var(--accent);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
:where(.chayns-button--danger, .chayns-icon-button--danger):active:not(:disabled) {
|
|
90
|
-
background: var(--danger-bg-hover);
|
|
68
|
+
color: var(--on-danger);
|
|
91
69
|
}
|
|
92
70
|
|
|
93
71
|
:where(.chayns-button, .chayns-icon-button):disabled {
|
|
@@ -95,6 +73,7 @@
|
|
|
95
73
|
cursor: not-allowed;
|
|
96
74
|
box-shadow: none;
|
|
97
75
|
transform: none;
|
|
76
|
+
filter: none;
|
|
98
77
|
}
|
|
99
78
|
|
|
100
79
|
:where(
|
|
@@ -116,6 +95,7 @@
|
|
|
116
95
|
}
|
|
117
96
|
|
|
118
97
|
.chayns-button-icon {
|
|
98
|
+
pointer-events: none;
|
|
119
99
|
display: inline-flex;
|
|
120
100
|
align-items: center;
|
|
121
101
|
justify-content: center;
|
|
@@ -139,17 +119,46 @@
|
|
|
139
119
|
animation: chayns-button-spin 0.8s linear infinite;
|
|
140
120
|
}
|
|
141
121
|
|
|
142
|
-
:where(
|
|
122
|
+
:where(
|
|
123
|
+
.chayns-button,
|
|
124
|
+
.chayns-icon-button,
|
|
125
|
+
.chayns-split-button__trigger,
|
|
126
|
+
.chayns-stepper__button,
|
|
127
|
+
.chayns-pagination__arrow,
|
|
128
|
+
.chayns-segmented-control__segment,
|
|
129
|
+
.chayns-popup-list__item,
|
|
130
|
+
.chayns-combo-box__trigger,
|
|
131
|
+
.chayns-banner__close,
|
|
132
|
+
.chayns-breadcrumb__link,
|
|
133
|
+
.chayns-accordion__header
|
|
134
|
+
):active:not(:disabled)
|
|
143
135
|
.chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
|
|
144
136
|
display: none;
|
|
145
137
|
}
|
|
146
138
|
|
|
147
|
-
:where(
|
|
139
|
+
:where(
|
|
140
|
+
.chayns-button,
|
|
141
|
+
.chayns-icon-button,
|
|
142
|
+
.chayns-split-button__trigger,
|
|
143
|
+
.chayns-stepper__button,
|
|
144
|
+
.chayns-pagination__arrow,
|
|
145
|
+
.chayns-segmented-control__segment,
|
|
146
|
+
.chayns-popup-list__item,
|
|
147
|
+
.chayns-combo-box__trigger,
|
|
148
|
+
.chayns-banner__close,
|
|
149
|
+
.chayns-breadcrumb__link,
|
|
150
|
+
.chayns-accordion__header
|
|
151
|
+
):active:not(:disabled)
|
|
148
152
|
.chayns-button-icon__weight--active {
|
|
149
153
|
display: inline-flex;
|
|
150
154
|
}
|
|
151
155
|
|
|
152
156
|
@media (hover: hover) {
|
|
157
|
+
.chayns-button:hover:not(:disabled) {
|
|
158
|
+
filter: brightness(1.06);
|
|
159
|
+
transform: translateY(-1px);
|
|
160
|
+
}
|
|
161
|
+
|
|
153
162
|
:where(.chayns-button--primary, .chayns-icon-button--primary):hover:not(:disabled) {
|
|
154
163
|
background: var(--accent-hover);
|
|
155
164
|
box-shadow: var(--shadow-btn-hover);
|
|
@@ -173,41 +182,100 @@
|
|
|
173
182
|
transform: translateY(-1px);
|
|
174
183
|
}
|
|
175
184
|
|
|
176
|
-
|
|
185
|
+
.chayns-icon-button:hover:not(:disabled) {
|
|
186
|
+
transform: translateY(-2px);
|
|
187
|
+
box-shadow: 0 7px 16px -6px rgb(var(--accent-rgb), 0.55);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
:where(
|
|
191
|
+
.chayns-button,
|
|
192
|
+
.chayns-icon-button,
|
|
193
|
+
.chayns-split-button__trigger,
|
|
194
|
+
.chayns-stepper__button,
|
|
195
|
+
.chayns-pagination__arrow,
|
|
196
|
+
.chayns-segmented-control__segment,
|
|
197
|
+
.chayns-popup-list__item,
|
|
198
|
+
.chayns-combo-box__trigger,
|
|
199
|
+
.chayns-banner__close,
|
|
200
|
+
.chayns-breadcrumb__link,
|
|
201
|
+
.chayns-accordion__header
|
|
202
|
+
):hover:not(:disabled)
|
|
177
203
|
.chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
|
|
178
204
|
display: none;
|
|
179
205
|
}
|
|
180
206
|
|
|
181
|
-
:where(
|
|
207
|
+
:where(
|
|
208
|
+
.chayns-button,
|
|
209
|
+
.chayns-icon-button,
|
|
210
|
+
.chayns-split-button__trigger,
|
|
211
|
+
.chayns-stepper__button,
|
|
212
|
+
.chayns-pagination__arrow,
|
|
213
|
+
.chayns-segmented-control__segment,
|
|
214
|
+
.chayns-popup-list__item,
|
|
215
|
+
.chayns-combo-box__trigger,
|
|
216
|
+
.chayns-banner__close,
|
|
217
|
+
.chayns-breadcrumb__link,
|
|
218
|
+
.chayns-accordion__header
|
|
219
|
+
):hover:not(:disabled)
|
|
182
220
|
.chayns-button-icon__weight--active {
|
|
183
221
|
display: inline-flex;
|
|
184
222
|
}
|
|
185
223
|
}
|
|
186
224
|
|
|
187
|
-
:
|
|
225
|
+
:is(.chayns-button, .chayns-icon-button):active:not(:disabled) {
|
|
226
|
+
transform: translateY(0) scale(0.97);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.chayns-icon-button:active:not(:disabled) {
|
|
230
|
+
transform: translateY(0) scale(0.9);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
:where(.chayns-button--primary, .chayns-icon-button--primary):active:not(:disabled) {
|
|
234
|
+
background: var(--accent-active);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
:where(.chayns-button--outline, .chayns-icon-button--outline):active:not(:disabled) {
|
|
238
|
+
background: var(--accent);
|
|
239
|
+
color: var(--on-accent);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
:where(.chayns-button--ghost, .chayns-icon-button--ghost):active:not(:disabled) {
|
|
243
|
+
background: var(--surface-alt);
|
|
244
|
+
color: var(--accent);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
:where(.chayns-button--danger, .chayns-icon-button--danger):active:not(:disabled) {
|
|
248
|
+
background: var(--danger-bg-hover);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
:is(.chayns-button, .chayns-icon-button):focus-visible:not(:disabled) {
|
|
188
252
|
outline: none;
|
|
189
253
|
box-shadow: 0 0 0 var(--focus-ring-size)
|
|
190
254
|
rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
|
|
191
255
|
}
|
|
192
256
|
|
|
193
|
-
:
|
|
257
|
+
:is(.chayns-button--primary, .chayns-icon-button--primary):focus-visible:not(:disabled) {
|
|
194
258
|
box-shadow:
|
|
195
259
|
0 0 0 var(--focus-ring-size) rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong)),
|
|
196
260
|
var(--shadow-btn);
|
|
197
261
|
}
|
|
198
262
|
|
|
199
263
|
@media (forced-colors: active) {
|
|
200
|
-
:
|
|
264
|
+
:is(.chayns-button, .chayns-icon-button):focus-visible:not(:disabled) {
|
|
201
265
|
outline: var(--focus-ring-size) solid ButtonText;
|
|
202
266
|
outline-offset: 1px;
|
|
203
267
|
}
|
|
204
268
|
}
|
|
205
269
|
|
|
206
270
|
@media (prefers-reduced-motion: reduce) {
|
|
207
|
-
:
|
|
271
|
+
:is(.chayns-button, .chayns-icon-button) {
|
|
208
272
|
transition: none;
|
|
209
273
|
}
|
|
210
274
|
|
|
275
|
+
:is(.chayns-button, .chayns-icon-button):is(:hover, :active):not(:disabled) {
|
|
276
|
+
transform: none;
|
|
277
|
+
}
|
|
278
|
+
|
|
211
279
|
:where(.chayns-button--loading, .chayns-icon-button--loading) .chayns-button-icon {
|
|
212
280
|
animation: none;
|
|
213
281
|
}
|
package/dist/card.css
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import url('./button.css');
|
|
2
|
+
|
|
1
3
|
@layer chayns.components {
|
|
2
4
|
.chayns-card {
|
|
3
5
|
box-sizing: border-box;
|
|
@@ -6,6 +8,9 @@
|
|
|
6
8
|
background: var(--surface);
|
|
7
9
|
border: 1px solid var(--border);
|
|
8
10
|
border-radius: 16px;
|
|
11
|
+
transition:
|
|
12
|
+
transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
13
|
+
box-shadow 0.22s ease;
|
|
9
14
|
}
|
|
10
15
|
|
|
11
16
|
.chayns-card__header {
|
|
@@ -26,6 +31,11 @@
|
|
|
26
31
|
place-items: center;
|
|
27
32
|
border-radius: 8px;
|
|
28
33
|
background: var(--surface-alt);
|
|
34
|
+
color: var(--accent);
|
|
35
|
+
transition:
|
|
36
|
+
transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
37
|
+
background 0.22s ease,
|
|
38
|
+
color 0.22s ease;
|
|
29
39
|
}
|
|
30
40
|
|
|
31
41
|
.chayns-card__header-content {
|
|
@@ -35,6 +45,35 @@
|
|
|
35
45
|
@media (hover: hover) {
|
|
36
46
|
.chayns-card:hover {
|
|
37
47
|
box-shadow: var(--shadow-hover);
|
|
48
|
+
transform: translateY(-4px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.chayns-card:hover .chayns-card__header-icon {
|
|
52
|
+
transform: scale(1.08);
|
|
53
|
+
background: var(--accent);
|
|
54
|
+
color: var(--on-accent);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.chayns-card:hover
|
|
58
|
+
.chayns-card__header-icon
|
|
59
|
+
.chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
|
|
60
|
+
display: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.chayns-card:hover .chayns-card__header-icon .chayns-button-icon__weight--active {
|
|
64
|
+
display: inline-flex;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@media (prefers-reduced-motion: reduce) {
|
|
69
|
+
.chayns-card,
|
|
70
|
+
.chayns-card__header-icon {
|
|
71
|
+
transition: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.chayns-card:hover,
|
|
75
|
+
.chayns-card:hover .chayns-card__header-icon {
|
|
76
|
+
transform: none;
|
|
38
77
|
}
|
|
39
78
|
}
|
|
40
79
|
}
|
package/dist/checkbox.css
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
transition: all 0.15s ease;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.chayns-checkbox__control > i {
|
|
38
|
+
.chayns-checkbox__control > :is(i, svg) {
|
|
39
39
|
opacity: 0;
|
|
40
40
|
transform: scale(0.4);
|
|
41
41
|
transition:
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
background: var(--accent);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.chayns-checkbox__input:checked + .chayns-checkbox__control > i {
|
|
51
|
+
.chayns-checkbox__input:checked + .chayns-checkbox__control > :is(i, svg) {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transform: scale(1);
|
|
54
54
|
}
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
@media (prefers-reduced-motion: reduce) {
|
|
90
|
-
.chayns-checkbox__control > i {
|
|
90
|
+
.chayns-checkbox__control > :is(i, svg) {
|
|
91
91
|
transition: none;
|
|
92
92
|
}
|
|
93
93
|
}
|
package/dist/combo-box.css
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import type { AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionPartProps, AccordionProps } from './Accordion.types.js';
|
|
2
|
-
declare function HeadContent({ className, subtitle, title }: AccordionHeadContentProps): import("react").JSX.Element;
|
|
3
2
|
declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
|
|
4
3
|
Content: import("react").ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
4
|
Head: import("react").ForwardRefExoticComponent<Omit<AccordionHeadProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>> & {
|
|
6
|
-
Content:
|
|
7
|
-
Leading: (
|
|
8
|
-
Trailing: (
|
|
5
|
+
Content: import("react").ForwardRefExoticComponent<Omit<AccordionHeadContentProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
6
|
+
Leading: import("react").ForwardRefExoticComponent<Omit<AccordionPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
7
|
+
Trailing: import("react").ForwardRefExoticComponent<Omit<AccordionPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
9
8
|
};
|
|
10
9
|
};
|
|
11
10
|
export default Accordion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAC;AAuM9B,QAAA,MAAM,SAAS;;;;;;;CAOb,CAAC;AASH,eAAe,SAAS,CAAC"}
|
|
@@ -1,26 +1,29 @@
|
|
|
1
|
+
import ButtonIcon from "../button/button-icon/ButtonIcon.js";
|
|
1
2
|
import { AccordionDepthContext, AccordionGroupContext, AccordionItemContext, useAccordionItemContext } from "./AccordionContext.js";
|
|
2
3
|
import { Children, createElement, forwardRef, isValidElement, useContext, useId, useState } from "react";
|
|
3
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
5
|
//#region src/components/accordion/Accordion.tsx
|
|
5
|
-
function
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
function createHeadPart(name) {
|
|
7
|
+
const HeadPart = forwardRef(function HeadPart({ children, className, ...spanProps }, ref) {
|
|
8
|
+
useAccordionItemContext(`Head.${name}`);
|
|
9
|
+
return /* @__PURE__ */ jsx("span", {
|
|
10
|
+
...spanProps,
|
|
11
|
+
className: [`chayns-accordion__${name.toLowerCase()}`, className].filter(Boolean).join(" "),
|
|
12
|
+
ref,
|
|
13
|
+
children
|
|
14
|
+
});
|
|
10
15
|
});
|
|
16
|
+
HeadPart.displayName = `Accordion.Head.${name}`;
|
|
17
|
+
return HeadPart;
|
|
11
18
|
}
|
|
12
|
-
var HeadLeading = (
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
});
|
|
16
|
-
var HeadTrailing = (props) => /* @__PURE__ */ jsx(Part, {
|
|
17
|
-
...props,
|
|
18
|
-
name: "trailing"
|
|
19
|
-
});
|
|
20
|
-
function HeadContent({ className, subtitle, title }) {
|
|
19
|
+
var HeadLeading = createHeadPart("Leading");
|
|
20
|
+
var HeadTrailing = createHeadPart("Trailing");
|
|
21
|
+
var HeadContent = forwardRef(function HeadContent({ className, subtitle, title, ...spanProps }, ref) {
|
|
21
22
|
useAccordionItemContext("Head.Content");
|
|
22
23
|
return /* @__PURE__ */ jsxs("span", {
|
|
24
|
+
...spanProps,
|
|
23
25
|
className: ["chayns-accordion__head-content", className].filter(Boolean).join(" "),
|
|
26
|
+
ref,
|
|
24
27
|
children: [/* @__PURE__ */ jsx("span", {
|
|
25
28
|
className: "chayns-accordion__title",
|
|
26
29
|
children: title
|
|
@@ -29,7 +32,7 @@ function HeadContent({ className, subtitle, title }) {
|
|
|
29
32
|
children: subtitle
|
|
30
33
|
}) : null]
|
|
31
34
|
});
|
|
32
|
-
}
|
|
35
|
+
});
|
|
33
36
|
var AccordionHead = forwardRef(function AccordionHead({ children, className, onClick, ...buttonProps }, ref) {
|
|
34
37
|
const { disabled, headerId, isOpen, onToggle, panelId } = useAccordionItemContext("Head");
|
|
35
38
|
function handleClick(event) {
|
|
@@ -46,9 +49,10 @@ var AccordionHead = forwardRef(function AccordionHead({ children, className, onC
|
|
|
46
49
|
onClick: handleClick,
|
|
47
50
|
ref,
|
|
48
51
|
type: "button",
|
|
49
|
-
children: [/* @__PURE__ */ jsx("
|
|
52
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
50
53
|
"aria-hidden": "true",
|
|
51
|
-
className: "chayns-accordion__chevron
|
|
54
|
+
className: "chayns-accordion__chevron",
|
|
55
|
+
children: /* @__PURE__ */ jsx(ButtonIcon, { icon: "fa-chevron-right" })
|
|
52
56
|
}), children]
|
|
53
57
|
});
|
|
54
58
|
});
|
|
@@ -72,9 +76,12 @@ var AccordionContent = forwardRef(function AccordionContent({ children, classNam
|
|
|
72
76
|
className: "chayns-accordion__inner",
|
|
73
77
|
children: /* @__PURE__ */ jsx("div", {
|
|
74
78
|
className: "chayns-accordion__content",
|
|
75
|
-
children: /* @__PURE__ */ jsx(
|
|
76
|
-
value:
|
|
77
|
-
children
|
|
79
|
+
children: /* @__PURE__ */ jsx(AccordionGroupContext.Provider, {
|
|
80
|
+
value: null,
|
|
81
|
+
children: /* @__PURE__ */ jsx(AccordionDepthContext.Provider, {
|
|
82
|
+
value: depth + 1,
|
|
83
|
+
children
|
|
84
|
+
})
|
|
78
85
|
})
|
|
79
86
|
})
|
|
80
87
|
})
|
|
@@ -88,7 +95,7 @@ var AccordionRoot = forwardRef(function Accordion({ appearance = "default", chil
|
|
|
88
95
|
const headerId = `${baseId}-header`;
|
|
89
96
|
const panelId = `${baseId}-panel`;
|
|
90
97
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
91
|
-
const isGrouped = group !== null
|
|
98
|
+
const isGrouped = group !== null;
|
|
92
99
|
const isOpen = isGrouped ? group.isOpen(baseId) : open ?? uncontrolledOpen;
|
|
93
100
|
const wrapped = depth > 0;
|
|
94
101
|
const isList = appearance === "list";
|
|
@@ -101,13 +108,14 @@ var AccordionRoot = forwardRef(function Accordion({ appearance = "default", chil
|
|
|
101
108
|
if (open === void 0) setUncontrolledOpen(nextOpen);
|
|
102
109
|
onOpenChange?.(nextOpen);
|
|
103
110
|
}
|
|
104
|
-
const variantClassName = isGrouped ? "chayns-accordion--grouped" : wrapped ? "chayns-accordion--wrapped" : "chayns-accordion--standalone";
|
|
105
111
|
const directChildren = Children.toArray(children);
|
|
106
112
|
const compoundHead = directChildren.find((child) => isValidElement(child) && child.type === AccordionHead);
|
|
107
113
|
const hasCompoundLeading = isValidElement(compoundHead) && Children.toArray(compoundHead.props.children).some((child) => isValidElement(child) && child.type === HeadLeading);
|
|
108
114
|
const rootClassName = [
|
|
109
115
|
"chayns-accordion",
|
|
110
|
-
|
|
116
|
+
isGrouped ? "chayns-accordion--grouped" : null,
|
|
117
|
+
wrapped ? "chayns-accordion--wrapped" : null,
|
|
118
|
+
!isGrouped && !wrapped ? "chayns-accordion--standalone" : null,
|
|
111
119
|
isOpen ? "chayns-accordion--open" : null,
|
|
112
120
|
disabled ? "chayns-accordion--disabled" : null,
|
|
113
121
|
leading || hasCompoundLeading ? "chayns-accordion--has-leading" : null,
|
|
@@ -146,6 +154,12 @@ var Accordion = Object.assign(AccordionRoot, {
|
|
|
146
154
|
Trailing: HeadTrailing
|
|
147
155
|
})
|
|
148
156
|
});
|
|
157
|
+
Object.assign(HeadLeading, { displayName: "Accordion.Head.Leading" });
|
|
158
|
+
Object.assign(HeadTrailing, { displayName: "Accordion.Head.Trailing" });
|
|
159
|
+
Object.assign(HeadContent, { displayName: "Accordion.Head.Content" });
|
|
160
|
+
AccordionHead.displayName = "Accordion.Head";
|
|
161
|
+
AccordionContent.displayName = "Accordion.Content";
|
|
162
|
+
AccordionRoot.displayName = "Accordion";
|
|
149
163
|
//#endregion
|
|
150
164
|
export { Accordion as default };
|
|
151
165
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import {\n Children,\n createElement,\n forwardRef,\n isValidElement,\n useContext,\n useId,\n useState,\n} from 'react';\nimport type { MouseEvent, ReactElement } from 'react';\n\nimport {\n AccordionDepthContext,\n AccordionGroupContext,\n AccordionItemContext,\n useAccordionItemContext,\n} from './AccordionContext.js';\nimport type {\n AccordionContentProps,\n AccordionHeadContentProps,\n AccordionHeadProps,\n AccordionPartProps,\n AccordionProps,\n} from './Accordion.types.js';\n\nfunction Part({ children, className, name }: AccordionPartProps & { name: string }) {\n useAccordionItemContext(name);\n return (\n <span\n className={[`chayns-accordion__${name.toLowerCase()}`, className].filter(Boolean).join(' ')}\n >\n {children}\n </span>\n );\n}\n\nconst HeadLeading = (props: AccordionPartProps) => <Part {...props} name=\"leading\" />;\nconst HeadTrailing = (props: AccordionPartProps) => <Part {...props} name=\"trailing\" />;\n\nfunction HeadContent({ className, subtitle, title }: AccordionHeadContentProps) {\n useAccordionItemContext('Head.Content');\n\n return (\n <span className={['chayns-accordion__head-content', className].filter(Boolean).join(' ')}>\n <span className=\"chayns-accordion__title\">{title}</span>\n {subtitle ? <span className=\"chayns-accordion__subtitle\">{subtitle}</span> : null}\n </span>\n );\n}\n\nconst AccordionHead = forwardRef<HTMLButtonElement, AccordionHeadProps>(function AccordionHead(\n { children, className, onClick, ...buttonProps },\n ref,\n) {\n const { disabled, headerId, isOpen, onToggle, panelId } = useAccordionItemContext('Head');\n\n function handleClick(event: MouseEvent<HTMLButtonElement>) {\n onClick?.(event);\n if (!event.defaultPrevented) onToggle();\n }\n\n return (\n <button\n {...buttonProps}\n aria-controls={panelId}\n aria-expanded={isOpen}\n className={['chayns-accordion__header', className].filter(Boolean).join(' ')}\n disabled={disabled}\n id={headerId}\n onClick={handleClick}\n ref={ref}\n type=\"button\"\n >\n <i aria-hidden=\"true\" className=\"chayns-accordion__chevron far fa-chevron-right\" />\n {children}\n </button>\n );\n});\n\nconst AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n function AccordionContent({ children, className, ...panelProps }, ref) {\n const depth = useContext(AccordionDepthContext);\n const { headerId, isOpen, panelId } = useAccordionItemContext('Content');\n\n return (\n <div\n {...panelProps}\n aria-hidden={!isOpen}\n aria-labelledby={headerId}\n className={['chayns-accordion__panel', className].filter(Boolean).join(' ')}\n id={panelId}\n inert={!isOpen}\n ref={ref}\n role=\"region\"\n style={{ ...panelProps.style, gridTemplateRows: isOpen ? '1fr' : '0fr' }}\n >\n <div className=\"chayns-accordion__inner\">\n <div className=\"chayns-accordion__content\">\n <AccordionDepthContext.Provider value={depth + 1}>\n {children}\n </AccordionDepthContext.Provider>\n </div>\n </div>\n </div>\n );\n },\n);\n\nconst AccordionRoot = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n {\n appearance = 'default',\n children,\n className,\n defaultOpen = false,\n disabled = false,\n id,\n leading,\n onOpenChange,\n open,\n subtitle,\n title,\n ...rootProps\n },\n ref,\n) {\n const depth = useContext(AccordionDepthContext);\n const group = useContext(AccordionGroupContext);\n const generatedId = useId();\n const baseId = id ?? generatedId;\n const headerId = `${baseId}-header`;\n const panelId = `${baseId}-panel`;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const isGrouped = group !== null && depth === 0;\n const isOpen = isGrouped ? group.isOpen(baseId) : (open ?? uncontrolledOpen);\n const wrapped = depth > 0;\n const isList = appearance === 'list';\n\n function handleToggle() {\n if (isGrouped) {\n group.toggle(baseId);\n return;\n }\n\n const nextOpen = !isOpen;\n if (open === undefined) setUncontrolledOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n\n const variantClassName = isGrouped\n ? 'chayns-accordion--grouped'\n : wrapped\n ? 'chayns-accordion--wrapped'\n : 'chayns-accordion--standalone';\n const directChildren = Children.toArray(children);\n const compoundHead = directChildren.find(\n (child) => isValidElement(child) && child.type === AccordionHead,\n );\n const hasCompoundLeading =\n isValidElement(compoundHead) &&\n Children.toArray((compoundHead as ReactElement<AccordionHeadProps>).props.children).some(\n (child) => isValidElement(child) && child.type === HeadLeading,\n );\n const rootClassName = [\n 'chayns-accordion',\n variantClassName,\n isOpen ? 'chayns-accordion--open' : null,\n disabled ? 'chayns-accordion--disabled' : null,\n leading || hasCompoundLeading ? 'chayns-accordion--has-leading' : null,\n isList ? 'chayns-accordion--list' : null,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const hasCompoundHead = compoundHead !== undefined;\n const compoundContent = directChildren.find(\n (child) => isValidElement(child) && child.type === AccordionContent,\n );\n const hasCompoundContent = compoundContent !== undefined;\n const panelChildren = children;\n\n return (\n <div {...rootProps} className={rootClassName} id={id} ref={ref}>\n <AccordionItemContext.Provider\n value={{ disabled, headerId, isOpen, onToggle: handleToggle, panelId }}\n >\n {hasCompoundHead ? (\n compoundHead\n ) : (\n <AccordionHead>\n {leading ? <HeadLeading>{leading}</HeadLeading> : null}\n <HeadContent title={title} subtitle={subtitle} />\n </AccordionHead>\n )}\n {hasCompoundContent ? (\n createElement(AccordionContent, {\n ...(compoundContent as ReactElement<AccordionContentProps>).props,\n })\n ) : (\n <AccordionContent>{panelChildren}</AccordionContent>\n )}\n </AccordionItemContext.Provider>\n </div>\n );\n});\n\nconst Accordion = Object.assign(AccordionRoot, {\n Content: AccordionContent,\n Head: Object.assign(AccordionHead, {\n Content: HeadContent,\n Leading: HeadLeading,\n Trailing: HeadTrailing,\n }),\n});\n\nexport default Accordion;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":[],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport {\n Children,\n createElement,\n forwardRef,\n isValidElement,\n useContext,\n useId,\n useState,\n} from 'react';\nimport type { MouseEvent, ReactElement } from 'react';\n\nimport {\n AccordionDepthContext,\n AccordionGroupContext,\n AccordionItemContext,\n useAccordionItemContext,\n} from './AccordionContext.js';\nimport type {\n AccordionContentProps,\n AccordionHeadContentProps,\n AccordionHeadProps,\n AccordionPartProps,\n AccordionProps,\n} from './Accordion.types.js';\n\nfunction createHeadPart(name: 'Leading' | 'Trailing') {\n const HeadPart = forwardRef<HTMLSpanElement, AccordionPartProps>(function HeadPart(\n { children, className, ...spanProps },\n ref,\n ) {\n useAccordionItemContext(`Head.${name}`);\n return (\n <span\n {...spanProps}\n className={[`chayns-accordion__${name.toLowerCase()}`, className].filter(Boolean).join(' ')}\n ref={ref}\n >\n {children}\n </span>\n );\n });\n HeadPart.displayName = `Accordion.Head.${name}`;\n return HeadPart;\n}\n\nconst HeadLeading = createHeadPart('Leading');\nconst HeadTrailing = createHeadPart('Trailing');\n\nconst HeadContent = forwardRef<HTMLSpanElement, AccordionHeadContentProps>(function HeadContent(\n { className, subtitle, title, ...spanProps },\n ref,\n) {\n useAccordionItemContext('Head.Content');\n return (\n <span\n {...spanProps}\n className={['chayns-accordion__head-content', className].filter(Boolean).join(' ')}\n ref={ref}\n >\n <span className=\"chayns-accordion__title\">{title}</span>\n {subtitle ? <span className=\"chayns-accordion__subtitle\">{subtitle}</span> : null}\n </span>\n );\n});\n\nconst AccordionHead = forwardRef<HTMLButtonElement, AccordionHeadProps>(function AccordionHead(\n { children, className, onClick, ...buttonProps },\n ref,\n) {\n const { disabled, headerId, isOpen, onToggle, panelId } = useAccordionItemContext('Head');\n\n function handleClick(event: MouseEvent<HTMLButtonElement>) {\n onClick?.(event);\n if (!event.defaultPrevented) onToggle();\n }\n\n return (\n <button\n {...buttonProps}\n aria-controls={panelId}\n aria-expanded={isOpen}\n className={['chayns-accordion__header', className].filter(Boolean).join(' ')}\n disabled={disabled}\n id={headerId}\n onClick={handleClick}\n ref={ref}\n type=\"button\"\n >\n <span aria-hidden=\"true\" className=\"chayns-accordion__chevron\">\n <ButtonIcon icon=\"fa-chevron-right\" />\n </span>\n {children}\n </button>\n );\n});\n\nconst AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n function AccordionContent({ children, className, ...panelProps }, ref) {\n const depth = useContext(AccordionDepthContext);\n const { headerId, isOpen, panelId } = useAccordionItemContext('Content');\n\n return (\n <div\n {...panelProps}\n aria-hidden={!isOpen}\n aria-labelledby={headerId}\n className={['chayns-accordion__panel', className].filter(Boolean).join(' ')}\n id={panelId}\n inert={!isOpen}\n ref={ref}\n role=\"region\"\n style={{ ...panelProps.style, gridTemplateRows: isOpen ? '1fr' : '0fr' }}\n >\n <div className=\"chayns-accordion__inner\">\n <div className=\"chayns-accordion__content\">\n <AccordionGroupContext.Provider value={null}>\n <AccordionDepthContext.Provider value={depth + 1}>\n {children}\n </AccordionDepthContext.Provider>\n </AccordionGroupContext.Provider>\n </div>\n </div>\n </div>\n );\n },\n);\n\nconst AccordionRoot = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n {\n appearance = 'default',\n children,\n className,\n defaultOpen = false,\n disabled = false,\n id,\n leading,\n onOpenChange,\n open,\n subtitle,\n title,\n ...rootProps\n },\n ref,\n) {\n const depth = useContext(AccordionDepthContext);\n const group = useContext(AccordionGroupContext);\n const generatedId = useId();\n const baseId = id ?? generatedId;\n const headerId = `${baseId}-header`;\n const panelId = `${baseId}-panel`;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const isGrouped = group !== null;\n const isOpen = isGrouped ? group.isOpen(baseId) : (open ?? uncontrolledOpen);\n const wrapped = depth > 0;\n const isList = appearance === 'list';\n\n function handleToggle() {\n if (isGrouped) {\n group.toggle(baseId);\n return;\n }\n\n const nextOpen = !isOpen;\n if (open === undefined) setUncontrolledOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n\n const directChildren = Children.toArray(children);\n const compoundHead = directChildren.find(\n (child) => isValidElement(child) && child.type === AccordionHead,\n );\n const hasCompoundLeading =\n isValidElement(compoundHead) &&\n Children.toArray((compoundHead as ReactElement<AccordionHeadProps>).props.children).some(\n (child) => isValidElement(child) && child.type === HeadLeading,\n );\n const rootClassName = [\n 'chayns-accordion',\n isGrouped ? 'chayns-accordion--grouped' : null,\n wrapped ? 'chayns-accordion--wrapped' : null,\n !isGrouped && !wrapped ? 'chayns-accordion--standalone' : null,\n isOpen ? 'chayns-accordion--open' : null,\n disabled ? 'chayns-accordion--disabled' : null,\n leading || hasCompoundLeading ? 'chayns-accordion--has-leading' : null,\n isList ? 'chayns-accordion--list' : null,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const hasCompoundHead = compoundHead !== undefined;\n const compoundContent = directChildren.find(\n (child) => isValidElement(child) && child.type === AccordionContent,\n );\n const hasCompoundContent = compoundContent !== undefined;\n const panelChildren = children;\n\n return (\n <div {...rootProps} className={rootClassName} id={id} ref={ref}>\n <AccordionItemContext.Provider\n value={{ disabled, headerId, isOpen, onToggle: handleToggle, panelId }}\n >\n {hasCompoundHead ? (\n compoundHead\n ) : (\n <AccordionHead>\n {leading ? <HeadLeading>{leading}</HeadLeading> : null}\n <HeadContent title={title} subtitle={subtitle} />\n </AccordionHead>\n )}\n {hasCompoundContent ? (\n createElement(AccordionContent, {\n ...(compoundContent as ReactElement<AccordionContentProps>).props,\n })\n ) : (\n <AccordionContent>{panelChildren}</AccordionContent>\n )}\n </AccordionItemContext.Provider>\n </div>\n );\n});\n\nconst Accordion = Object.assign(AccordionRoot, {\n Content: AccordionContent,\n Head: Object.assign(AccordionHead, {\n Content: HeadContent,\n Leading: HeadLeading,\n Trailing: HeadTrailing,\n }),\n});\n\nObject.assign(HeadLeading, { displayName: 'Accordion.Head.Leading' });\nObject.assign(HeadTrailing, { displayName: 'Accordion.Head.Trailing' });\nObject.assign(HeadContent, { displayName: 'Accordion.Head.Content' });\nAccordionHead.displayName = 'Accordion.Head';\nAccordionContent.displayName = 'Accordion.Content';\nAccordionRoot.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import type { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
/** Named configuration values; existing literal props and value lists remain supported. */
|
|
3
|
+
export declare enum AccordionAppearances {
|
|
4
|
+
Default = "default",
|
|
5
|
+
List = "list"
|
|
6
|
+
}
|
|
2
7
|
export declare const ACCORDION_APPEARANCES: readonly ["default", "list"];
|
|
3
8
|
export type AccordionAppearance = (typeof ACCORDION_APPEARANCES)[number];
|
|
4
9
|
/**
|
|
@@ -90,12 +95,12 @@ export interface AccordionGroupProps extends Omit<ComponentPropsWithRef<'div'>,
|
|
|
90
95
|
export interface AccordionHeadProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
|
|
91
96
|
children?: ReactNode;
|
|
92
97
|
}
|
|
93
|
-
export interface AccordionHeadContentProps {
|
|
98
|
+
export interface AccordionHeadContentProps extends Omit<ComponentPropsWithRef<'span'>, 'title' | 'children'> {
|
|
94
99
|
title: ReactNode;
|
|
95
100
|
subtitle?: ReactNode;
|
|
96
101
|
className?: string;
|
|
97
102
|
}
|
|
98
|
-
export interface AccordionPartProps {
|
|
103
|
+
export interface AccordionPartProps extends ComponentPropsWithRef<'span'> {
|
|
99
104
|
children?: ReactNode;
|
|
100
105
|
className?: string;
|
|
101
106
|
}
|