@revikornmann/muka-ui 0.18.0 → 0.20.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 +81 -60
- package/cli/bin/muka-ui.js +12 -5
- package/cli/commands/brand.js +33 -14
- package/cli/commands/init.js +21 -17
- package/cli/commands/install-skill.js +84 -26
- package/cli/templates/AGENTS.md +128 -0
- package/cli/templates/CLAUDE.md +8 -88
- package/cli/templates/muka-ui-guidelines.md +50 -14
- package/dist/cjs/components/ActionSheet/ActionSheet.css +4 -4
- package/dist/cjs/components/BottomBar/BottomBar.css +0 -3
- package/dist/cjs/components/Breadcrumb/Breadcrumb.css +26 -2
- package/dist/cjs/components/Combobox/Combobox.css +116 -132
- package/dist/cjs/components/Combobox/Combobox.js +175 -52
- package/dist/cjs/components/Combobox/Combobox.js.map +1 -1
- package/dist/cjs/components/Combobox/index.js.map +1 -1
- package/dist/cjs/components/ContextSelect/ContextSelect.css +4 -4
- package/dist/cjs/components/DocumentViewer/DocumentViewer.css +2 -2
- package/dist/cjs/components/DropdownSelect/DropdownSelect.css +225 -0
- package/dist/cjs/components/DropdownSelect/DropdownSelect.js +106 -0
- package/dist/cjs/components/DropdownSelect/DropdownSelect.js.map +1 -0
- package/dist/cjs/components/DropdownSelect/index.js +6 -0
- package/dist/cjs/components/DropdownSelect/index.js.map +1 -0
- package/dist/cjs/components/EmptyState/EmptyState.css +8 -8
- package/dist/cjs/components/FAB/FAB.css +1 -1
- package/dist/cjs/components/FileUpload/FileUpload.css +10 -10
- package/dist/cjs/components/Icon/custom/ArrowReturnIcon.js +11 -0
- package/dist/cjs/components/Icon/custom/ArrowReturnIcon.js.map +1 -0
- package/dist/cjs/components/Icon/iconRegistry.js +14 -1
- package/dist/cjs/components/Icon/iconRegistry.js.map +1 -1
- package/dist/cjs/components/Input/Input.css +47 -10
- package/dist/cjs/components/Input/Input.js +14 -3
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Label/Label.css +1 -1
- package/dist/cjs/components/LicensePlateInput/LicensePlateInput.css +1 -1
- package/dist/cjs/components/Menu/Menu.css +124 -38
- package/dist/cjs/components/Menu/Menu.js +283 -25
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.css +15 -15
- package/dist/cjs/components/PhotoUploader/PhotoUploader.css +4 -4
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.css +10 -6
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js +27 -16
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/cjs/components/ProgressTracker/ProgressTracker.css +273 -22
- package/dist/cjs/components/ProgressTracker/ProgressTracker.js +109 -9
- package/dist/cjs/components/ProgressTracker/ProgressTracker.js.map +1 -1
- package/dist/cjs/components/Scrollbar/Scrollbar.css +7 -6
- package/dist/cjs/components/SearchInput/SearchInput.css +4 -4
- package/dist/cjs/components/Select/Select.css +2 -2
- package/dist/cjs/components/SmsOtpField/SmsOtpField.css +2 -2
- package/dist/cjs/components/SpecList/SpecList.css +8 -8
- package/dist/cjs/components/Spinner/Spinner.css +1 -1
- package/dist/cjs/components/SwipeActions/SwipeActions.css +6 -6
- package/dist/cjs/components/Table/Table.css +3 -3
- package/dist/cjs/components/Table/TablePagination.css +1 -1
- package/dist/cjs/components/Tabs/Tabs.css +6 -6
- package/dist/cjs/components/Textarea/Textarea.css +2 -2
- package/dist/cjs/components/Waveform/Waveform.css +1 -1
- package/dist/cjs/components/index.js +5 -3
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/ActionSheet/ActionSheet.css +4 -4
- package/dist/esm/components/BottomBar/BottomBar.css +0 -3
- package/dist/esm/components/Breadcrumb/Breadcrumb.css +26 -2
- package/dist/esm/components/Combobox/Combobox.css +116 -132
- package/dist/esm/components/Combobox/Combobox.js +177 -54
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/index.js +1 -1
- package/dist/esm/components/Combobox/index.js.map +1 -1
- package/dist/esm/components/ContextSelect/ContextSelect.css +4 -4
- package/dist/esm/components/DocumentViewer/DocumentViewer.css +2 -2
- package/dist/esm/components/DropdownSelect/DropdownSelect.css +225 -0
- package/dist/esm/components/DropdownSelect/DropdownSelect.js +102 -0
- package/dist/esm/components/DropdownSelect/DropdownSelect.js.map +1 -0
- package/dist/esm/components/DropdownSelect/index.js +2 -0
- package/dist/esm/components/DropdownSelect/index.js.map +1 -0
- package/dist/esm/components/EmptyState/EmptyState.css +8 -8
- package/dist/esm/components/FAB/FAB.css +1 -1
- package/dist/esm/components/FileUpload/FileUpload.css +10 -10
- package/dist/esm/components/Icon/custom/ArrowReturnIcon.js +7 -0
- package/dist/esm/components/Icon/custom/ArrowReturnIcon.js.map +1 -0
- package/dist/esm/components/Icon/iconRegistry.js +14 -1
- package/dist/esm/components/Icon/iconRegistry.js.map +1 -1
- package/dist/esm/components/Input/Input.css +47 -10
- package/dist/esm/components/Input/Input.js +14 -3
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Label/Label.css +1 -1
- package/dist/esm/components/LicensePlateInput/LicensePlateInput.css +1 -1
- package/dist/esm/components/Menu/Menu.css +124 -38
- package/dist/esm/components/Menu/Menu.js +284 -26
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.css +15 -15
- package/dist/esm/components/PhotoUploader/PhotoUploader.css +4 -4
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css +10 -6
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +27 -16
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/esm/components/ProgressTracker/ProgressTracker.css +273 -22
- package/dist/esm/components/ProgressTracker/ProgressTracker.js +110 -10
- package/dist/esm/components/ProgressTracker/ProgressTracker.js.map +1 -1
- package/dist/esm/components/Scrollbar/Scrollbar.css +7 -6
- package/dist/esm/components/SearchInput/SearchInput.css +4 -4
- package/dist/esm/components/Select/Select.css +2 -2
- package/dist/esm/components/SmsOtpField/SmsOtpField.css +2 -2
- package/dist/esm/components/SpecList/SpecList.css +8 -8
- package/dist/esm/components/Spinner/Spinner.css +1 -1
- package/dist/esm/components/SwipeActions/SwipeActions.css +6 -6
- package/dist/esm/components/Table/Table.css +3 -3
- package/dist/esm/components/Table/TablePagination.css +1 -1
- package/dist/esm/components/Tabs/Tabs.css +6 -6
- package/dist/esm/components/Textarea/Textarea.css +2 -2
- package/dist/esm/components/Waveform/Waveform.css +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/ActionSheet.css +4 -4
- package/dist/styles/components/BottomBar.css +0 -3
- package/dist/styles/components/Breadcrumb.css +26 -2
- package/dist/styles/components/Combobox.css +116 -132
- package/dist/styles/components/ContextSelect.css +4 -4
- package/dist/styles/components/DocumentViewer.css +2 -2
- package/dist/styles/components/DropdownSelect.css +225 -0
- package/dist/styles/components/EmptyState.css +8 -8
- package/dist/styles/components/FAB.css +1 -1
- package/dist/styles/components/FileUpload.css +10 -10
- package/dist/styles/components/Input.css +47 -10
- package/dist/styles/components/Label.css +1 -1
- package/dist/styles/components/LicensePlateInput.css +1 -1
- package/dist/styles/components/Menu.css +124 -38
- package/dist/styles/components/Pagination.css +15 -15
- package/dist/styles/components/PhotoUploader.css +4 -4
- package/dist/styles/components/ProgressAccordeon.css +10 -6
- package/dist/styles/components/ProgressTracker.css +273 -22
- package/dist/styles/components/Scrollbar.css +7 -6
- package/dist/styles/components/SearchInput.css +4 -4
- package/dist/styles/components/Select.css +2 -2
- package/dist/styles/components/SmsOtpField.css +2 -2
- package/dist/styles/components/SpecList.css +8 -8
- package/dist/styles/components/Spinner.css +1 -1
- package/dist/styles/components/SwipeActions.css +6 -6
- package/dist/styles/components/Table.css +3 -3
- package/dist/styles/components/Tabs.css +6 -6
- package/dist/styles/components/Textarea.css +2 -2
- package/dist/styles/components/Typography.css +89 -0
- package/dist/styles/components/Waveform.css +1 -1
- package/dist/styles/index.css +1167 -462
- package/dist/styles/muka-dark.css +1167 -462
- package/dist/styles/muka-light.css +1167 -462
- package/dist/styles/tokens-bouwplan-dark.css +5 -4
- package/dist/styles/tokens-bouwplan-light.css +5 -4
- package/dist/styles/tokens-fscl-dark.css +25 -24
- package/dist/styles/tokens-fscl-light.css +25 -24
- package/dist/styles/tokens-grip-dark.css +4 -3
- package/dist/styles/tokens-grip-light.css +4 -3
- package/dist/styles/tokens-muka-dark.css +4 -3
- package/dist/styles/tokens-muka-light.css +4 -3
- package/dist/styles/tokens-wireframe-dark.css +49 -48
- package/dist/styles/tokens-wireframe-light.css +49 -48
- package/dist/styles/wireframe-dark.css +1212 -507
- package/dist/styles/wireframe-light.css +1212 -507
- package/dist/types/components/Combobox/Combobox.d.ts +38 -38
- package/dist/types/components/Combobox/Combobox.d.ts.map +1 -1
- package/dist/types/components/Combobox/index.d.ts +1 -1
- package/dist/types/components/Combobox/index.d.ts.map +1 -1
- package/dist/types/components/DropdownSelect/DropdownSelect.d.ts +71 -0
- package/dist/types/components/DropdownSelect/DropdownSelect.d.ts.map +1 -0
- package/dist/types/components/DropdownSelect/index.d.ts +2 -0
- package/dist/types/components/DropdownSelect/index.d.ts.map +1 -0
- package/dist/types/components/Icon/custom/ArrowReturnIcon.d.ts +9 -0
- package/dist/types/components/Icon/custom/ArrowReturnIcon.d.ts.map +1 -0
- package/dist/types/components/Icon/iconRegistry.d.ts.map +1 -1
- package/dist/types/components/Input/Input.d.ts +5 -0
- package/dist/types/components/Input/Input.d.ts.map +1 -1
- package/dist/types/components/Menu/Menu.d.ts +42 -2
- package/dist/types/components/Menu/Menu.d.ts.map +1 -1
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts +17 -12
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -1
- package/dist/types/components/ProgressTracker/ProgressTracker.d.ts +29 -8
- package/dist/types/components/ProgressTracker/ProgressTracker.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/index.d.ts.map +1 -1
- package/docs/consumers/README.md +116 -37
- package/docs/consumers/brand.md +261 -0
- package/docs/consumers/figma-console-mcp.md +116 -0
- package/docs/consumers/setup-instructions.md +98 -12
- package/docs/consumers/skills.md +79 -0
- package/package.json +5 -6
- package/scripts/postinstall-nudge.js +8 -4
- package/skills/add-brand/SKILL.md +204 -0
- package/skills/add-brand/reference.md +160 -0
- package/skills/figma-to-code/SKILL.md +127 -0
- package/skills/pull-from-figma/SKILL.md +123 -0
- package/skills/push-to-figma/SKILL.md +172 -0
- package/skills/setup-muka/SKILL.md +73 -13
- package/tokens/README.md +39 -17
- package/tokens/t2-alias/brand/bouwplan/fonts.json +1 -1
- package/tokens/t2-alias/brand/fscl/fonts.json +3 -3
- package/tokens/t2-alias/brand/wireframe/fonts.json +2 -2
- package/tokens/t4-components/menu.json +8 -3
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
line-height: var(--text-label-sm-lineHeight);
|
|
66
66
|
border: 1px solid var(--color-border-default);
|
|
67
67
|
border-radius: var(--border-radius-md);
|
|
68
|
-
background-color: var(--color-surface-
|
|
68
|
+
background-color: var(--color-surface-level0);
|
|
69
69
|
color: var(--color-text-default-default);
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
|
|
211
211
|
.muka-documentviewer__thumbnail-label {
|
|
212
212
|
font-family: var(--alias-font-brand-family);
|
|
213
|
-
font-size: var(--text-label-xs-fontSize);
|
|
213
|
+
font-size: var(--text-label-xs-regular-fontSize);
|
|
214
214
|
color: var(--color-text-default-default);
|
|
215
215
|
font-weight: var(--alias-font-brand-weight-medium);
|
|
216
216
|
}
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
|
|
2
|
+
|
|
3
|
+
.muka-dropdown-select {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: var(--spacing-2);
|
|
7
|
+
min-width: 200px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.muka-dropdown-select--full-width {
|
|
11
|
+
width: 100%;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.muka-dropdown-select__label {
|
|
15
|
+
color: var(--color-text-default-default);
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.muka-dropdown-select__label--sm {
|
|
20
|
+
font-family: var(--text-label-sm-semibold-fontFamily);
|
|
21
|
+
font-weight: var(--text-label-sm-semibold-fontWeight);
|
|
22
|
+
font-size: var(--text-label-sm-semibold-fontSize);
|
|
23
|
+
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.muka-dropdown-select__label--md {
|
|
27
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
28
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
29
|
+
font-size: var(--text-label-md-semibold-fontSize);
|
|
30
|
+
line-height: var(--text-label-md-semibold-lineHeight);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.muka-dropdown-select__label--lg {
|
|
34
|
+
font-family: var(--text-label-lg-semibold-fontFamily);
|
|
35
|
+
font-weight: var(--text-label-lg-semibold-fontWeight);
|
|
36
|
+
font-size: var(--text-label-lg-semibold-fontSize);
|
|
37
|
+
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.muka-dropdown-select__required {
|
|
41
|
+
color: var(--color-state-error-default);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.muka-dropdown-select__field {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: var(--spacing-1);
|
|
48
|
+
width: 100%;
|
|
49
|
+
position: relative;
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
background-color: var(--input-field-color-default-background);
|
|
52
|
+
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
53
|
+
border-radius: var(--input-field-radius-lg);
|
|
54
|
+
padding: var(--spacing-2);
|
|
55
|
+
padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem));
|
|
56
|
+
text-align: left;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
color: var(--color-text-default-default);
|
|
59
|
+
transition: border-color 0.12s ease, background-color 0.12s ease;
|
|
60
|
+
-webkit-tap-highlight-color: transparent;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.muka-dropdown-select__field::after {
|
|
64
|
+
content: '';
|
|
65
|
+
position: absolute;
|
|
66
|
+
inset: 0;
|
|
67
|
+
border-radius: inherit;
|
|
68
|
+
box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
|
|
69
|
+
pointer-events: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.muka-dropdown-select__field--sm {
|
|
73
|
+
min-height: var(--input-field-height-sm);
|
|
74
|
+
border-radius: var(--input-field-radius-sm);
|
|
75
|
+
padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.muka-dropdown-select__field--md {
|
|
79
|
+
min-height: var(--input-field-height-default);
|
|
80
|
+
border-radius: var(--input-field-radius-md);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.muka-dropdown-select__field--lg {
|
|
84
|
+
min-height: var(--input-field-height-lg);
|
|
85
|
+
border-radius: var(--input-field-radius-lg);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
|
|
89
|
+
border-width: var(--border-width-bold);
|
|
90
|
+
border-color: var(--input-field-color-focus-border);
|
|
91
|
+
background-color: var(--input-field-color-focus-background);
|
|
92
|
+
padding: calc(var(--spacing-2) - 1px);
|
|
93
|
+
padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem) - 1px);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
|
|
97
|
+
padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem) - 1px);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
|
|
101
|
+
border-color: var(--color-state-error-contrast);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.muka-dropdown-select__field--disabled {
|
|
105
|
+
opacity: 0.5;
|
|
106
|
+
cursor: not-allowed;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.muka-dropdown-select__content {
|
|
110
|
+
position: relative;
|
|
111
|
+
z-index: 1;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex: 1 1 auto;
|
|
114
|
+
min-width: 0;
|
|
115
|
+
align-items: center;
|
|
116
|
+
/* Let empty-field / value clicks reach the full-field MenuTrigger underneath. */
|
|
117
|
+
pointer-events: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.muka-dropdown-select__placeholder {
|
|
121
|
+
color: var(--color-text-subtle-default);
|
|
122
|
+
font-family: var(--text-label-md-regular-fontFamily);
|
|
123
|
+
font-size: var(--text-label-md-regular-fontSize);
|
|
124
|
+
font-weight: var(--text-label-md-regular-fontWeight);
|
|
125
|
+
line-height: var(--text-label-md-regular-lineHeight);
|
|
126
|
+
padding-inline: var(--spacing-1);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.muka-dropdown-select__value {
|
|
130
|
+
font-family: var(--text-label-md-regular-fontFamily);
|
|
131
|
+
font-size: var(--text-label-md-regular-fontSize);
|
|
132
|
+
font-weight: var(--text-label-md-regular-fontWeight);
|
|
133
|
+
line-height: var(--text-label-md-regular-lineHeight);
|
|
134
|
+
padding-inline: var(--spacing-1);
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
text-overflow: ellipsis;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.muka-dropdown-select__chips {
|
|
141
|
+
display: flex;
|
|
142
|
+
flex: 1 1 auto;
|
|
143
|
+
flex-wrap: wrap;
|
|
144
|
+
gap: var(--spacing-2);
|
|
145
|
+
align-items: flex-start;
|
|
146
|
+
min-width: 0;
|
|
147
|
+
/* Chip remove controls must remain clickable above the field hit target. */
|
|
148
|
+
pointer-events: auto;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.muka-dropdown-select__field--multiline {
|
|
152
|
+
align-items: flex-start;
|
|
153
|
+
min-height: 7rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.muka-dropdown-select__menu-button {
|
|
157
|
+
position: absolute;
|
|
158
|
+
inset: 0;
|
|
159
|
+
z-index: 0;
|
|
160
|
+
display: inline-flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
width: auto;
|
|
164
|
+
height: auto;
|
|
165
|
+
padding: 0;
|
|
166
|
+
padding-right: var(--spacing-2);
|
|
167
|
+
border: none;
|
|
168
|
+
border-radius: inherit;
|
|
169
|
+
background: transparent;
|
|
170
|
+
color: var(--color-text-subtle-default);
|
|
171
|
+
cursor: pointer;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.muka-dropdown-select__field--multiline .muka-dropdown-select__menu-button {
|
|
175
|
+
align-items: flex-start;
|
|
176
|
+
padding-top: calc(var(--spacing-2) + 8px);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.muka-dropdown-select__chevron {
|
|
180
|
+
display: inline-flex;
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
width: var(--size-2xl, 2rem);
|
|
184
|
+
height: var(--size-2xl, 2rem);
|
|
185
|
+
pointer-events: none;
|
|
186
|
+
color: var(--color-text-subtle-default);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.muka-dropdown-select__chevron .muka-icon,
|
|
190
|
+
.muka-dropdown-select__menu-button:hover .muka-dropdown-select__chevron,
|
|
191
|
+
.muka-dropdown-select__menu-button:hover .muka-icon {
|
|
192
|
+
color: var(--color-text-subtle-default);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.muka-dropdown-select__field--sm .muka-dropdown-select__chevron {
|
|
196
|
+
width: var(--size-xl, 1.5rem);
|
|
197
|
+
height: var(--size-xl, 1.5rem);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.muka-dropdown-select__menu-button:focus-visible {
|
|
201
|
+
outline: 2px solid var(--color-border-focus, var(--color-action-default));
|
|
202
|
+
outline-offset: 2px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.muka-dropdown-select__helper {
|
|
206
|
+
margin: 0;
|
|
207
|
+
color: var(--color-text-subtle-default);
|
|
208
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
209
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
210
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
211
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.muka-dropdown-select__error {
|
|
215
|
+
margin: 0;
|
|
216
|
+
color: var(--color-state-error-default);
|
|
217
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
218
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
219
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
220
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.muka-dropdown-select__menu {
|
|
224
|
+
/* Uses Menu min-width (280px); grows with long labels; left-aligned to the field. */
|
|
225
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { Chip } from '../Chip';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { Menu, MenuCheckboxItem, MenuContent, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuTrigger, } from '../Menu';
|
|
7
|
+
import './DropdownSelect.css';
|
|
8
|
+
/**
|
|
9
|
+
* DropdownSelect — form select built on Menu (Figma "Dropdown Menu").
|
|
10
|
+
*
|
|
11
|
+
* Fixed options with optional search + scrollbar. Single-select shows the
|
|
12
|
+
* chosen label; multi-select renders dismissible chips and trailing checkmarks
|
|
13
|
+
* in the menu.
|
|
14
|
+
*
|
|
15
|
+
* Not the native `<Select>` — use that for simple platform-native fields.
|
|
16
|
+
* Not free-text — use `Combobox` for creatable chip input.
|
|
17
|
+
*/
|
|
18
|
+
export const DropdownSelect = ({ options, value, onValueChange, multiple = false, placeholder = 'Select item...', label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, required = false, searchable = true, searchPlaceholder = 'Search', scrollbar = false, open: openProp, onOpenChange, defaultOpen, name, id, 'aria-label': ariaLabel, className = '', }) => {
|
|
19
|
+
const generatedId = useId();
|
|
20
|
+
const fieldId = id || name || generatedId;
|
|
21
|
+
const helperTextId = `${fieldId}-helper`;
|
|
22
|
+
const errorMessageId = `${fieldId}-error`;
|
|
23
|
+
const fieldRef = useRef(null);
|
|
24
|
+
const [menuWidth, setMenuWidth] = useState(undefined);
|
|
25
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
|
|
26
|
+
const isControlled = openProp !== undefined;
|
|
27
|
+
const open = isControlled ? openProp : uncontrolledOpen;
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const el = fieldRef.current;
|
|
30
|
+
if (!el || typeof ResizeObserver === 'undefined')
|
|
31
|
+
return;
|
|
32
|
+
const update = () => setMenuWidth(el.offsetWidth);
|
|
33
|
+
update();
|
|
34
|
+
const observer = new ResizeObserver(update);
|
|
35
|
+
observer.observe(el);
|
|
36
|
+
return () => observer.disconnect();
|
|
37
|
+
}, []);
|
|
38
|
+
const handleOpenChange = (next) => {
|
|
39
|
+
if (disabled)
|
|
40
|
+
return;
|
|
41
|
+
if (!isControlled)
|
|
42
|
+
setUncontrolledOpen(next);
|
|
43
|
+
onOpenChange?.(next);
|
|
44
|
+
};
|
|
45
|
+
const selectedValues = useMemo(() => {
|
|
46
|
+
if (multiple) {
|
|
47
|
+
return Array.isArray(value) ? value : value ? [value] : [];
|
|
48
|
+
}
|
|
49
|
+
if (typeof value === 'string' && value)
|
|
50
|
+
return [value];
|
|
51
|
+
return [];
|
|
52
|
+
}, [multiple, value]);
|
|
53
|
+
const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
|
|
54
|
+
const selectedOptions = useMemo(() => selectedValues
|
|
55
|
+
.map((v) => options.find((o) => o.value === v))
|
|
56
|
+
.filter((o) => Boolean(o)), [options, selectedValues]);
|
|
57
|
+
const showError = error && errorMessage;
|
|
58
|
+
const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
|
|
59
|
+
const rootClasses = [
|
|
60
|
+
'muka-dropdown-select',
|
|
61
|
+
fullWidth && 'muka-dropdown-select--full-width',
|
|
62
|
+
className,
|
|
63
|
+
]
|
|
64
|
+
.filter(Boolean)
|
|
65
|
+
.join(' ');
|
|
66
|
+
const fieldClasses = [
|
|
67
|
+
'muka-dropdown-select__field',
|
|
68
|
+
`muka-dropdown-select__field--${size}`,
|
|
69
|
+
open && 'muka-dropdown-select__field--focused',
|
|
70
|
+
error && 'muka-dropdown-select__field--error',
|
|
71
|
+
disabled && 'muka-dropdown-select__field--disabled',
|
|
72
|
+
selectedOptions.length > 1 && 'muka-dropdown-select__field--multiline',
|
|
73
|
+
]
|
|
74
|
+
.filter(Boolean)
|
|
75
|
+
.join(' ');
|
|
76
|
+
const removeValue = (next) => {
|
|
77
|
+
if (!multiple) {
|
|
78
|
+
onValueChange?.('');
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
onValueChange?.(selectedValues.filter((v) => v !== next));
|
|
82
|
+
};
|
|
83
|
+
const toggleMulti = (optionValue, checked) => {
|
|
84
|
+
if (checked) {
|
|
85
|
+
if (selectedSet.has(optionValue))
|
|
86
|
+
return;
|
|
87
|
+
onValueChange?.([...selectedValues, optionValue]);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
onValueChange?.(selectedValues.filter((v) => v !== optionValue));
|
|
91
|
+
};
|
|
92
|
+
const singleValue = !multiple ? selectedValues[0] ?? '' : undefined;
|
|
93
|
+
return (_jsxs("div", { className: rootClasses, children: [label && (_jsxs("label", { className: `muka-dropdown-select__label muka-dropdown-select__label--${size}`, htmlFor: fieldId, children: [label, required && (_jsxs("span", { className: "muka-dropdown-select__required", "aria-hidden": "true", children: [' ', "*"] }))] })), _jsxs(Menu, { trigger: "click", open: open, onOpenChange: handleOpenChange, defaultOpen: defaultOpen, modal: false, children: [_jsxs("div", { ref: fieldRef, className: fieldClasses, children: [_jsx(MenuTrigger, { asChild: true, disabled: disabled, children: _jsx("button", { type: "button", id: fieldId, name: name, className: "muka-dropdown-select__menu-button", disabled: disabled, "aria-haspopup": "menu", "aria-expanded": open, "aria-describedby": describedBy, "aria-label": ariaLabel || label || placeholder, children: _jsx("span", { className: "muka-dropdown-select__chevron", children: _jsx(Icon, { name: "arrow-drop-up-down", size: size === 'sm' ? 'xs' : 'md' }) }) }) }), _jsx("div", { className: "muka-dropdown-select__content", children: selectedOptions.length === 0 ? (_jsx("span", { className: "muka-dropdown-select__placeholder", children: placeholder })) : multiple ? (_jsx("span", { className: "muka-dropdown-select__chips", children: selectedOptions.map((option) => (_jsx(Chip, { variant: "info", size: "md", removeButtonLabel: `Remove ${option.label}`, onRemove: (e) => {
|
|
94
|
+
e.preventDefault();
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
removeValue(option.value);
|
|
97
|
+
}, children: option.label }, option.value))) })) : (_jsx("span", { className: "muka-dropdown-select__value", children: selectedOptions[0].label })) })] }), _jsxs(MenuContent, { align: "start", side: "bottom", sideOffset: 4, searchable: searchable, scrollbar: scrollbar, className: "muka-dropdown-select__menu", style: menuWidth && menuWidth > 280
|
|
98
|
+
? { minWidth: menuWidth }
|
|
99
|
+
: undefined, onCloseAutoFocus: (event) => event.preventDefault(), children: [searchable && (_jsx(MenuSearch, { placeholder: searchPlaceholder, size: size === 'sm' ? 'sm' : 'md' })), multiple ? (options.map((option) => (_jsx(MenuCheckboxItem, { checked: selectedSet.has(option.value), onCheckedChange: (checked) => toggleMulti(option.value, checked), disabled: option.disabled, indicator: "trailing", textValue: option.label, children: option.label }, option.value)))) : (_jsx(MenuRadioGroup, { value: singleValue, onValueChange: (next) => onValueChange?.(next), children: options.map((option) => (_jsx(MenuRadioItem, { value: option.value, disabled: option.disabled, indicator: "check", textValue: option.label, children: option.label }, option.value))) }))] })] }), showError && (_jsx("p", { className: "muka-dropdown-select__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-dropdown-select__helper", id: helperTextId, children: helperText }))] }));
|
|
100
|
+
};
|
|
101
|
+
export default DropdownSelect;
|
|
102
|
+
//# sourceMappingURL=DropdownSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownSelect.js","sourceRoot":"","sources":["../../../../components/DropdownSelect/DropdownSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DropdownSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,GAGf,MAAM,kBAAkB,CAAC"}
|
|
@@ -80,10 +80,10 @@
|
|
|
80
80
|
.muka-emptystate__title {
|
|
81
81
|
color: var(--emptystate-title-color);
|
|
82
82
|
margin: 0;
|
|
83
|
-
font-family: var(--text-heading-
|
|
84
|
-
font-weight: var(--text-heading-
|
|
85
|
-
font-size: var(--text-heading-
|
|
86
|
-
line-height: var(--text-heading-
|
|
83
|
+
font-family: var(--text-heading-sm-fontFamily);
|
|
84
|
+
font-weight: var(--text-heading-sm-fontWeight);
|
|
85
|
+
font-size: var(--text-heading-sm-fontSize);
|
|
86
|
+
line-height: var(--text-heading-sm-lineHeight);
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
.muka-emptystate--sm .muka-emptystate__title {
|
|
@@ -94,10 +94,10 @@
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
.muka-emptystate--lg .muka-emptystate__title {
|
|
97
|
-
font-family: var(--text-heading-
|
|
98
|
-
font-weight: var(--text-heading-
|
|
99
|
-
font-size: var(--text-heading-
|
|
100
|
-
line-height: var(--text-heading-
|
|
97
|
+
font-family: var(--text-heading-md-fontFamily);
|
|
98
|
+
font-weight: var(--text-heading-md-fontWeight);
|
|
99
|
+
font-size: var(--text-heading-md-fontSize);
|
|
100
|
+
line-height: var(--text-heading-md-lineHeight);
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
/* Description */
|
|
@@ -118,10 +118,10 @@
|
|
|
118
118
|
|
|
119
119
|
/* Text */
|
|
120
120
|
.muka-fileupload__text {
|
|
121
|
-
font-family: var(--text-body-
|
|
122
|
-
font-size: var(--text-body-
|
|
123
|
-
font-weight: var(--text-body-
|
|
124
|
-
line-height: var(--text-body-
|
|
121
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
122
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
123
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
124
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
125
125
|
color: var(--color-text-default-default);
|
|
126
126
|
}
|
|
127
127
|
|
|
@@ -204,10 +204,10 @@
|
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
.muka-fileupload-item__name {
|
|
207
|
-
font-family: var(--text-body-sm-
|
|
208
|
-
font-size: var(--text-body-sm-
|
|
209
|
-
font-weight: var(--text-body-sm-
|
|
210
|
-
line-height: var(--text-body-sm-
|
|
207
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
208
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
209
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
210
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
211
211
|
color: var(--fileupload-item-color-default-foreground);
|
|
212
212
|
white-space: nowrap;
|
|
213
213
|
overflow: hidden;
|
|
@@ -243,11 +243,11 @@
|
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
.muka-fileupload-item__status-icon--success {
|
|
246
|
-
color: var(--color-
|
|
246
|
+
color: var(--fileupload-item-color-success-foreground);
|
|
247
247
|
}
|
|
248
248
|
|
|
249
249
|
.muka-fileupload-item__status-icon--error {
|
|
250
|
-
color: var(--color-
|
|
250
|
+
color: var(--fileupload-item-color-error-foreground);
|
|
251
251
|
}
|
|
252
252
|
|
|
253
253
|
.muka-fileupload-item__remove {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Custom icon from Figma: arrow-return (Dropdown Menu Item focus / Combobox enter hint).
|
|
4
|
+
* Rounded return/enter glyph — not available as a single Remix export.
|
|
5
|
+
*/
|
|
6
|
+
export const ArrowReturnIcon = ({ className }) => (_jsx("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: _jsx("path", { d: "M17 4C19.7614 4 22 6.23858 22 9V11C22 13.7614 19.7614 16 17 16H6.82812L9.36426 18.5361L7.9502 19.9502L3 15L7.9502 10.0498L9.36426 11.4639L6.82812 14H17L17.1543 13.9961C18.7394 13.9158 20 12.6051 20 11V9C20 7.39489 18.7394 6.08421 17.1543 6.00391L17 6H13V4H17Z", fill: "currentColor" }) }));
|
|
7
|
+
//# sourceMappingURL=ArrowReturnIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ArrowReturnIcon.js","sourceRoot":"","sources":["../../../../../components/Icon/custom/ArrowReturnIcon.tsx"],"names":[],"mappings":";AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAqC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClF,cACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,YAElB,eACE,CAAC,EAAC,qQAAqQ,EACvQ,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAC"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import * as RemixIcons from '@remixicon/react';
|
|
2
2
|
import { ArrowDropUpDownIcon } from './custom/ArrowDropUpDownIcon';
|
|
3
|
+
import { ArrowReturnIcon } from './custom/ArrowReturnIcon';
|
|
3
4
|
/**
|
|
4
5
|
* Convert PascalCase to kebab-case
|
|
5
|
-
* e.g., "ArrowLeftS" -> "arrow-left-s"
|
|
6
|
+
* e.g., "ArrowLeftS" -> "arrow-left-s", "Home4" -> "home-4"
|
|
6
7
|
*/
|
|
7
8
|
function toKebabCase(str) {
|
|
8
9
|
return str
|
|
9
10
|
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
|
|
10
11
|
.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
|
|
12
|
+
.replace(/([a-zA-Z])(\d+)/g, '$1-$2')
|
|
11
13
|
.toLowerCase();
|
|
12
14
|
}
|
|
13
15
|
const NullComponent = function NullIcon() {
|
|
@@ -80,6 +82,17 @@ iconRegistry['arrow-drop-up-down'] = {
|
|
|
80
82
|
line: ArrowDropUpDownIcon,
|
|
81
83
|
fill: ArrowDropUpDownIcon,
|
|
82
84
|
};
|
|
85
|
+
iconRegistry['arrow-return'] = {
|
|
86
|
+
line: ArrowReturnIcon,
|
|
87
|
+
fill: ArrowReturnIcon,
|
|
88
|
+
};
|
|
89
|
+
// Alias digit-hyphen names without the hyphen (home-4 → home4) for older call sites
|
|
90
|
+
for (const key of Object.keys(iconRegistry)) {
|
|
91
|
+
const compact = key.replace(/-(\d+)/g, '$1');
|
|
92
|
+
if (compact !== key && !iconRegistry[compact]) {
|
|
93
|
+
iconRegistry[compact] = iconRegistry[key];
|
|
94
|
+
}
|
|
95
|
+
}
|
|
83
96
|
export function getIconComponent(name, variant) {
|
|
84
97
|
const entry = iconRegistry[name];
|
|
85
98
|
if (!entry)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconRegistry.js","sourceRoot":"","sources":["../../../../components/Icon/iconRegistry.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,UAAU,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"iconRegistry.js","sourceRoot":"","sources":["../../../../components/Icon/iconRegistry.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,UAAU,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAO3D;;;GAGG;AACH,SAAS,WAAW,CAAC,GAAW;IAC9B,OAAO,GAAG;SACP,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;SACtC,OAAO,CAAC,sBAAsB,EAAE,OAAO,CAAC;SACxC,OAAO,CAAC,kBAAkB,EAAE,OAAO,CAAC;SACpC,WAAW,EAAE,CAAC;AACnB,CAAC;AAED,MAAM,aAAa,GAAgD,SAAS,QAAQ;IAClF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAsC,EAAE,CAAC;AAElE,4CAA4C;AAC5C,oEAAoE;AACpE,MAAM,WAAW,GAAG,UAAyE,CAAC;AAE9F,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AAC7C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;IAC5C,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAE1C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,SAAS;IAC3C,IAAI,OAAO,SAAS,KAAK,UAAU;QAAE,SAAS;IAE9C,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE3C,IAAI,QAAgB,CAAC;IACrB,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;QACrB,iDAAiD;QACjD,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;SAAM,CAAC;QACN,kDAAkD;QAClD,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,MAAM,SAAS,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAExC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,YAAY,CAAC,SAAS,CAAC,GAAG;YACxB,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC;IAC3C,CAAC;SAAM,IAAI,MAAM,EAAE,CAAC;QAClB,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC;IAC3C,CAAC;SAAM,CAAC;QACN,uDAAuD;QACvD,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC;QACzC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC;IAC3C,CAAC;AACH,CAAC;AAED,kEAAkE;AAClE,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAC/C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;IAC7C,MAAM,KAAK,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;QACjE,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAC1B,CAAC;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;QACxE,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAC1B,CAAC;AACH,CAAC;AAED,6DAA6D;AAC7D,YAAY,CAAC,oBAAoB,CAAC,GAAG;IACnC,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,YAAY,CAAC,cAAc,CAAC,GAAG;IAC7B,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,eAAe;CACtB,CAAC;AAEF,oFAAoF;AACpF,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAC7C,IAAI,OAAO,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;QAC9C,YAAY,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAC5C,CAAC;AACH,CAAC;AAID,MAAM,UAAU,gBAAgB,CAC9B,IAAc,EACd,OAAwB;IAExB,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACjC,IAAI,CAAC,KAAK;QAAE,OAAO,aAAa,CAAC;IACjC,OAAO,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;AACtD,CAAC"}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.muka-input__required {
|
|
42
|
-
color: var(--color-state-error-
|
|
42
|
+
color: var(--color-state-error-default);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.muka-input__label--sm + .muka-input__field--disabled,
|
|
@@ -163,27 +163,58 @@
|
|
|
163
163
|
color: var(--input-field-color-disabled-foreground);
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
/* Icons */
|
|
166
|
+
/* Icons — Figma inputfield content: sm 16px, md 20px, lg 24px. */
|
|
167
167
|
.muka-input__icon {
|
|
168
168
|
display: inline-flex;
|
|
169
169
|
align-items: center;
|
|
170
|
+
justify-content: center;
|
|
170
171
|
flex-shrink: 0;
|
|
171
172
|
color: var(--color-text-subtle-default);
|
|
172
|
-
width: var(--icon-size-
|
|
173
|
-
height: var(--icon-size-
|
|
173
|
+
width: var(--icon-size-sm);
|
|
174
|
+
height: var(--icon-size-sm);
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
.muka-input__field--sm .muka-input__icon {
|
|
177
|
-
width: var(--icon-size-
|
|
178
|
-
height: var(--icon-size-
|
|
178
|
+
width: var(--icon-size-xs);
|
|
179
|
+
height: var(--icon-size-xs);
|
|
179
180
|
}
|
|
180
181
|
|
|
181
182
|
.muka-input__field--lg .muka-input__icon {
|
|
182
|
-
width: var(--icon-size-
|
|
183
|
-
height: var(--icon-size-
|
|
183
|
+
width: var(--icon-size-default);
|
|
184
|
+
height: var(--icon-size-default);
|
|
184
185
|
}
|
|
185
186
|
|
|
186
|
-
.muka-
|
|
187
|
+
.muka-input__clear {
|
|
188
|
+
display: inline-flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
justify-content: center;
|
|
191
|
+
flex-shrink: 0;
|
|
192
|
+
width: var(--size-2xl, 2rem);
|
|
193
|
+
height: var(--size-2xl, 2rem);
|
|
194
|
+
padding: 0;
|
|
195
|
+
border: none;
|
|
196
|
+
background: transparent;
|
|
197
|
+
color: var(--color-text-subtle-default);
|
|
198
|
+
cursor: pointer;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.muka-input__field--sm .muka-input__clear {
|
|
202
|
+
width: var(--size-xl, 1.5rem);
|
|
203
|
+
height: var(--size-xl, 1.5rem);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Icon sets its own color; pin the glyph to text subtle, including hover. */
|
|
207
|
+
.muka-input__icon .muka-icon,
|
|
208
|
+
.muka-input__clear .muka-icon,
|
|
209
|
+
.muka-input__clear:hover,
|
|
210
|
+
.muka-input__clear:hover .muka-icon {
|
|
211
|
+
color: var(--color-text-subtle-default);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.muka-input__field--disabled .muka-input__icon,
|
|
215
|
+
.muka-input__field--disabled .muka-input__icon .muka-icon,
|
|
216
|
+
.muka-input__field--disabled .muka-input__clear,
|
|
217
|
+
.muka-input__field--disabled .muka-input__clear .muka-icon {
|
|
187
218
|
color: var(--input-field-color-disabled-foreground);
|
|
188
219
|
}
|
|
189
220
|
|
|
@@ -192,6 +223,12 @@
|
|
|
192
223
|
height: 100%;
|
|
193
224
|
}
|
|
194
225
|
|
|
226
|
+
.muka-input__native::-webkit-search-cancel-button,
|
|
227
|
+
.muka-input__native::-webkit-search-decoration {
|
|
228
|
+
-webkit-appearance: none;
|
|
229
|
+
appearance: none;
|
|
230
|
+
}
|
|
231
|
+
|
|
195
232
|
/* Helper text */
|
|
196
233
|
.muka-input__helper {
|
|
197
234
|
font-family: var(--text-label-sm-regular-fontFamily);
|
|
@@ -208,6 +245,6 @@
|
|
|
208
245
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
209
246
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
210
247
|
line-height: var(--text-label-sm-regular-lineHeight);
|
|
211
|
-
color: var(--color-state-error-
|
|
248
|
+
color: var(--color-state-error-default);
|
|
212
249
|
margin: 0;
|
|
213
250
|
}
|