@lobehub/ui 5.19.0 → 5.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Accordion/Accordion.mjs +2 -2
- package/es/Accordion/Accordion.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs +2 -2
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/Checkbox/Checkbox.mjs +2 -2
- package/es/Checkbox/Checkbox.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs +2 -2
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeEditor/CodeEditor.mjs +2 -2
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +2 -2
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/DraggablePanel/DraggablePanel.mjs +2 -2
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs +2 -2
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs +2 -2
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs +3 -3
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs +2 -2
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs +2 -2
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs +2 -2
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/Toc/TocMobile.mjs +2 -2
- package/es/Toc/TocMobile.mjs.map +1 -1
- package/es/base-ui/Button/style.mjs +72 -12
- package/es/base-ui/Button/style.mjs.map +1 -1
- package/es/base-ui/Segmented/Segmented.mjs +2 -2
- package/es/base-ui/Segmented/Segmented.mjs.map +1 -1
- package/es/base-ui/Switch/atoms.mjs +2 -2
- package/es/base-ui/Switch/atoms.mjs.map +1 -1
- package/es/base-ui/Tabs/Tabs.mjs +2 -2
- package/es/base-ui/Tabs/Tabs.mjs.map +1 -1
- package/es/chat/EditableMessage/EditableMessage.mjs +3 -3
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +3 -3
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/mobile/TabBar/TabBar.mjs +2 -2
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -105,9 +105,15 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
105
105
|
opacity: 1;
|
|
106
106
|
`,
|
|
107
107
|
variantDefault: css`
|
|
108
|
-
color: ${cssVar.colorText};
|
|
109
108
|
background: ${cssVar.colorBgContainer};
|
|
110
109
|
|
|
110
|
+
/* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */
|
|
111
|
+
&,
|
|
112
|
+
&:hover,
|
|
113
|
+
&:active {
|
|
114
|
+
color: ${cssVar.colorText};
|
|
115
|
+
}
|
|
116
|
+
|
|
111
117
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
112
118
|
border-color: ${cssVar.colorPrimaryBorder};
|
|
113
119
|
color: ${cssVar.colorPrimaryText};
|
|
@@ -115,9 +121,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
115
121
|
`,
|
|
116
122
|
variantPrimary: css`
|
|
117
123
|
border-color: ${cssVar.colorPrimary};
|
|
118
|
-
color: ${cssVar.colorBgLayout};
|
|
119
124
|
background: ${cssVar.colorPrimary};
|
|
120
125
|
|
|
126
|
+
&,
|
|
127
|
+
&:hover,
|
|
128
|
+
&:active {
|
|
129
|
+
color: ${cssVar.colorBgLayout};
|
|
130
|
+
}
|
|
131
|
+
|
|
121
132
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
122
133
|
border-color: ${cssVar.colorPrimaryHover};
|
|
123
134
|
background: ${cssVar.colorPrimaryHover};
|
|
@@ -130,9 +141,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
130
141
|
`,
|
|
131
142
|
variantDashed: css`
|
|
132
143
|
border-style: dashed;
|
|
133
|
-
color: ${cssVar.colorText};
|
|
134
144
|
background: ${cssVar.colorBgContainer};
|
|
135
145
|
|
|
146
|
+
&,
|
|
147
|
+
&:hover,
|
|
148
|
+
&:active {
|
|
149
|
+
color: ${cssVar.colorText};
|
|
150
|
+
}
|
|
151
|
+
|
|
136
152
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
137
153
|
border-color: ${cssVar.colorPrimaryBorder};
|
|
138
154
|
color: ${cssVar.colorPrimaryText};
|
|
@@ -140,9 +156,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
140
156
|
`,
|
|
141
157
|
variantFill: css`
|
|
142
158
|
border-color: transparent;
|
|
143
|
-
color: ${cssVar.colorText};
|
|
144
159
|
background: ${cssVar.colorFillTertiary};
|
|
145
160
|
|
|
161
|
+
&,
|
|
162
|
+
&:hover,
|
|
163
|
+
&:active {
|
|
164
|
+
color: ${cssVar.colorText};
|
|
165
|
+
}
|
|
166
|
+
|
|
146
167
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
147
168
|
background: ${cssVar.colorFillSecondary};
|
|
148
169
|
}
|
|
@@ -153,9 +174,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
153
174
|
`,
|
|
154
175
|
variantText: css`
|
|
155
176
|
border-color: transparent;
|
|
156
|
-
color: ${cssVar.colorText};
|
|
157
177
|
background: transparent;
|
|
158
178
|
|
|
179
|
+
&,
|
|
180
|
+
&:hover,
|
|
181
|
+
&:active {
|
|
182
|
+
color: ${cssVar.colorText};
|
|
183
|
+
}
|
|
184
|
+
|
|
159
185
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
160
186
|
background: ${cssVar.colorFillSecondary};
|
|
161
187
|
}
|
|
@@ -163,9 +189,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
163
189
|
variantLink: css`
|
|
164
190
|
padding-inline: 0;
|
|
165
191
|
border-color: transparent;
|
|
166
|
-
color: ${cssVar.colorPrimary};
|
|
167
192
|
background: transparent;
|
|
168
193
|
|
|
194
|
+
&,
|
|
195
|
+
&:hover,
|
|
196
|
+
&:active {
|
|
197
|
+
color: ${cssVar.colorPrimary};
|
|
198
|
+
}
|
|
199
|
+
|
|
169
200
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
170
201
|
color: ${cssVar.colorPrimaryHover};
|
|
171
202
|
background: transparent;
|
|
@@ -173,9 +204,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
173
204
|
`,
|
|
174
205
|
dangerOutlined: css`
|
|
175
206
|
border-color: ${cssVar.colorError};
|
|
176
|
-
color: ${cssVar.colorError};
|
|
177
207
|
background: ${cssVar.colorBgContainer};
|
|
178
208
|
|
|
209
|
+
&,
|
|
210
|
+
&:hover,
|
|
211
|
+
&:active {
|
|
212
|
+
color: ${cssVar.colorError};
|
|
213
|
+
}
|
|
214
|
+
|
|
179
215
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
180
216
|
border-color: ${cssVar.colorErrorHover};
|
|
181
217
|
color: ${cssVar.colorErrorHover};
|
|
@@ -184,9 +220,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
184
220
|
`,
|
|
185
221
|
dangerSolid: css`
|
|
186
222
|
border-color: ${cssVar.colorError};
|
|
187
|
-
color: ${cssVar.colorBgLayout};
|
|
188
223
|
background: ${cssVar.colorError};
|
|
189
224
|
|
|
225
|
+
&,
|
|
226
|
+
&:hover,
|
|
227
|
+
&:active {
|
|
228
|
+
color: ${cssVar.colorBgLayout};
|
|
229
|
+
}
|
|
230
|
+
|
|
190
231
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
191
232
|
border-color: ${cssVar.colorErrorHover};
|
|
192
233
|
background: ${cssVar.colorErrorHover};
|
|
@@ -213,7 +254,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
213
254
|
}
|
|
214
255
|
`,
|
|
215
256
|
dangerInline: css`
|
|
216
|
-
|
|
257
|
+
&,
|
|
258
|
+
&:hover,
|
|
259
|
+
&:active {
|
|
260
|
+
color: ${cssVar.colorError};
|
|
261
|
+
}
|
|
217
262
|
|
|
218
263
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
219
264
|
color: ${cssVar.colorErrorHover};
|
|
@@ -221,9 +266,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
221
266
|
`,
|
|
222
267
|
ghostDefault: css`
|
|
223
268
|
border-color: rgb(255 255 255 / 65%);
|
|
224
|
-
color: #fff;
|
|
225
269
|
background: transparent;
|
|
226
270
|
|
|
271
|
+
&,
|
|
272
|
+
&:hover,
|
|
273
|
+
&:active {
|
|
274
|
+
color: #fff;
|
|
275
|
+
}
|
|
276
|
+
|
|
227
277
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
228
278
|
border-color: #fff;
|
|
229
279
|
background: color-mix(in srgb, currentcolor 8%, transparent);
|
|
@@ -238,9 +288,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
238
288
|
`,
|
|
239
289
|
ghostPrimary: css`
|
|
240
290
|
border-color: ${cssVar.colorPrimary};
|
|
241
|
-
color: ${cssVar.colorPrimary};
|
|
242
291
|
background: transparent;
|
|
243
292
|
|
|
293
|
+
&,
|
|
294
|
+
&:hover,
|
|
295
|
+
&:active {
|
|
296
|
+
color: ${cssVar.colorPrimary};
|
|
297
|
+
}
|
|
298
|
+
|
|
244
299
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
245
300
|
border-color: ${cssVar.colorPrimaryHover};
|
|
246
301
|
color: ${cssVar.colorPrimaryHover};
|
|
@@ -253,9 +308,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
253
308
|
`,
|
|
254
309
|
ghostDanger: css`
|
|
255
310
|
border-color: ${cssVar.colorError};
|
|
256
|
-
color: ${cssVar.colorError};
|
|
257
311
|
background: transparent;
|
|
258
312
|
|
|
313
|
+
&,
|
|
314
|
+
&:hover,
|
|
315
|
+
&:active {
|
|
316
|
+
color: ${cssVar.colorError};
|
|
317
|
+
}
|
|
318
|
+
|
|
259
319
|
&:hover:not(:disabled, [aria-disabled='true']) {
|
|
260
320
|
border-color: ${cssVar.colorErrorHover};
|
|
261
321
|
color: ${cssVar.colorErrorHover};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n base: css`\n cursor: pointer;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n border: 1px solid ${cssVar.colorBorder};\n\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n\n transition:\n color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n\n sizeSmall: css`\n height: 24px;\n padding-inline: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n\n sizeMiddle: css`\n height: 32px;\n padding-inline: 14px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 13px;\n `,\n\n sizeLarge: css`\n height: 40px;\n padding-inline: 16px;\n border-radius: ${cssVar.borderRadius};\n font-size: 14px;\n `,\n\n shapeCircle: css`\n padding-inline: 0;\n border-radius: 50%;\n `,\n\n shapeRound: css`\n border-radius: 999px;\n `,\n\n block: css`\n width: 100%;\n `,\n\n iconEnd: css`\n flex-direction: row-reverse;\n `,\n\n iconOnlySmall: css`\n width: 24px;\n padding-inline: 0;\n `,\n\n iconOnlyMiddle: css`\n width: 32px;\n padding-inline: 0;\n `,\n\n iconOnlyLarge: css`\n width: 40px;\n padding-inline: 0;\n `,\n\n iconBox: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n\n spinnerSlot: css`\n overflow: hidden;\n\n width: 0;\n margin-inline-end: -6px;\n\n opacity: 0;\n\n transition:\n width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n `,\n\n spinnerSlotEnd: css`\n margin-inline: -6px 0;\n `,\n\n spinnerSlotShow: css`\n width: 12px;\n margin-inline: 0;\n opacity: 1;\n `,\n\n variantDefault: css`\n color: ${cssVar.colorText};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantPrimary: css`\n border-color: ${cssVar.colorPrimary};\n color: ${cssVar.colorBgLayout};\n background: ${cssVar.colorPrimary};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n variantDashed: css`\n border-style: dashed;\n color: ${cssVar.colorText};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantFill: css`\n border-color: transparent;\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFill};\n }\n `,\n\n variantText: css`\n border-color: transparent;\n color: ${cssVar.colorText};\n background: transparent;\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n variantLink: css`\n padding-inline: 0;\n border-color: transparent;\n color: ${cssVar.colorPrimary};\n background: transparent;\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryHover};\n background: transparent;\n }\n `,\n\n dangerOutlined: css`\n border-color: ${cssVar.colorError};\n color: ${cssVar.colorError};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorBgContainer};\n }\n `,\n\n dangerSolid: css`\n border-color: ${cssVar.colorError};\n color: ${cssVar.colorBgLayout};\n background: ${cssVar.colorError};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n\n dangerFill: css`\n border-color: transparent;\n color: ${cssVar.colorError};\n background: ${cssVar.colorErrorBg};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorBgHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorBgHover};\n }\n `,\n\n dangerInline: css`\n color: ${cssVar.colorError};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n }\n `,\n\n ghostDefault: css`\n border-color: rgb(255 255 255 / 65%);\n color: #fff;\n background: transparent;\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: #fff;\n background: color-mix(in srgb, currentcolor 8%, transparent);\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: color-mix(in srgb, currentcolor 14%, transparent);\n }\n `,\n\n ghostDashed: css`\n border-style: dashed;\n `,\n\n ghostPrimary: css`\n border-color: ${cssVar.colorPrimary};\n color: ${cssVar.colorPrimary};\n background: transparent;\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryHover};\n color: ${cssVar.colorPrimaryHover};\n background: color-mix(in srgb, currentcolor 8%, transparent);\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: color-mix(in srgb, currentcolor 14%, transparent);\n }\n `,\n\n ghostDanger: css`\n border-color: ${cssVar.colorError};\n color: ${cssVar.colorError};\n background: transparent;\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n color: ${cssVar.colorErrorHover};\n background: color-mix(in srgb, currentcolor 8%, transparent);\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: color-mix(in srgb, currentcolor 14%, transparent);\n }\n `,\n\n spinner: css`\n @keyframes base-button-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 12px;\n height: 12px;\n border: 1.5px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: base-button-spin 0.6s linear infinite;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;wBASa,OAAO,YAAY;;;;;;;;;;;;;;;8BAeb,OAAO,mBAAmB;;;;;;;;;;CAWtD,WAAW,GAAG;;;qBAGK,OAAO,eAAe;;;CAIzC,YAAY,GAAG;;;qBAGI,OAAO,eAAe;;;CAIzC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAIvC,aAAa,GAAG;;;;CAKhB,YAAY,GAAG;;;CAIf,OAAO,GAAG;;;CAIV,SAAS,GAAG;;;CAIZ,eAAe,GAAG;;;;CAKlB,gBAAgB,GAAG;;;;CAKnB,eAAe,GAAG;;;;CAKlB,SAAS,GAAG;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;;;CAchB,gBAAgB,GAAG;;;CAInB,iBAAiB,GAAG;;;;;CAMpB,gBAAgB,GAAG;aACR,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;oBACD,OAAO,aAAa;aAC3B,OAAO,cAAc;kBAChB,OAAO,aAAa;;;sBAGhB,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;aAEP,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,aAAa,GAAG;;aAEL,OAAO,UAAU;kBACZ,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,aAAa,GAAG;;aAEL,OAAO,UAAU;;;;oBAIV,OAAO,mBAAmB;;;CAI5C,aAAa,GAAG;;;aAGL,OAAO,aAAa;;;;eAIlB,OAAO,kBAAkB;;;;CAKtC,gBAAgB,GAAG;oBACD,OAAO,WAAW;aACzB,OAAO,WAAW;kBACb,OAAO,iBAAiB;;;sBAGpB,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;oBAClB,OAAO,iBAAiB;;;CAI1C,aAAa,GAAG;oBACE,OAAO,WAAW;aACzB,OAAO,cAAc;kBAChB,OAAO,WAAW;;;sBAGd,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,YAAY,GAAG;;aAEJ,OAAO,WAAW;kBACb,OAAO,aAAa;;;eAGvB,OAAO,gBAAgB;oBAClB,OAAO,kBAAkB;;;;eAI9B,OAAO,iBAAiB;oBACnB,OAAO,kBAAkB;;;CAI3C,cAAc,GAAG;aACN,OAAO,WAAW;;;eAGhB,OAAO,gBAAgB;;;CAIpC,cAAc,GAAG;;;;;;;;;;;;;;CAejB,aAAa,GAAG;;;CAIhB,cAAc,GAAG;oBACC,OAAO,aAAa;aAC3B,OAAO,aAAa;;;;sBAIX,OAAO,kBAAkB;eAChC,OAAO,kBAAkB;;;;;;;;CAStC,aAAa,GAAG;oBACE,OAAO,WAAW;aACzB,OAAO,WAAW;;;;sBAIT,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;;;;;;;;CASpC,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBb,EAAE"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n base: css`\n cursor: pointer;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n border: 1px solid ${cssVar.colorBorder};\n\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n\n transition:\n color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n\n sizeSmall: css`\n height: 24px;\n padding-inline: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n\n sizeMiddle: css`\n height: 32px;\n padding-inline: 14px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 13px;\n `,\n\n sizeLarge: css`\n height: 40px;\n padding-inline: 16px;\n border-radius: ${cssVar.borderRadius};\n font-size: 14px;\n `,\n\n shapeCircle: css`\n padding-inline: 0;\n border-radius: 50%;\n `,\n\n shapeRound: css`\n border-radius: 999px;\n `,\n\n block: css`\n width: 100%;\n `,\n\n iconEnd: css`\n flex-direction: row-reverse;\n `,\n\n iconOnlySmall: css`\n width: 24px;\n padding-inline: 0;\n `,\n\n iconOnlyMiddle: css`\n width: 32px;\n padding-inline: 0;\n `,\n\n iconOnlyLarge: css`\n width: 40px;\n padding-inline: 0;\n `,\n\n iconBox: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n\n spinnerSlot: css`\n overflow: hidden;\n\n width: 0;\n margin-inline-end: -6px;\n\n opacity: 0;\n\n transition:\n width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n `,\n\n spinnerSlotEnd: css`\n margin-inline: -6px 0;\n `,\n\n spinnerSlotShow: css`\n width: 12px;\n margin-inline: 0;\n opacity: 1;\n `,\n\n variantDefault: css`\n background: ${cssVar.colorBgContainer};\n\n /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantPrimary: css`\n border-color: ${cssVar.colorPrimary};\n background: ${cssVar.colorPrimary};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorBgLayout};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n variantDashed: css`\n border-style: dashed;\n background: ${cssVar.colorBgContainer};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantFill: css`\n border-color: transparent;\n background: ${cssVar.colorFillTertiary};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFill};\n }\n `,\n\n variantText: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n variantLink: css`\n padding-inline: 0;\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorPrimary};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryHover};\n background: transparent;\n }\n `,\n\n dangerOutlined: css`\n border-color: ${cssVar.colorError};\n background: ${cssVar.colorBgContainer};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorBgContainer};\n }\n `,\n\n dangerSolid: css`\n border-color: ${cssVar.colorError};\n background: ${cssVar.colorError};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorBgLayout};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n\n dangerFill: css`\n border-color: transparent;\n color: ${cssVar.colorError};\n background: ${cssVar.colorErrorBg};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorBgHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorBgHover};\n }\n `,\n\n dangerInline: css`\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n }\n `,\n\n ghostDefault: css`\n border-color: rgb(255 255 255 / 65%);\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: #fff;\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: #fff;\n background: color-mix(in srgb, currentcolor 8%, transparent);\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: color-mix(in srgb, currentcolor 14%, transparent);\n }\n `,\n\n ghostDashed: css`\n border-style: dashed;\n `,\n\n ghostPrimary: css`\n border-color: ${cssVar.colorPrimary};\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorPrimary};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryHover};\n color: ${cssVar.colorPrimaryHover};\n background: color-mix(in srgb, currentcolor 8%, transparent);\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: color-mix(in srgb, currentcolor 14%, transparent);\n }\n `,\n\n ghostDanger: css`\n border-color: ${cssVar.colorError};\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n color: ${cssVar.colorErrorHover};\n background: color-mix(in srgb, currentcolor 8%, transparent);\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: color-mix(in srgb, currentcolor 14%, transparent);\n }\n `,\n\n spinner: css`\n @keyframes base-button-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 12px;\n height: 12px;\n border: 1.5px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: base-button-spin 0.6s linear infinite;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;wBASa,OAAO,YAAY;;;;;;;;;;;;;;;8BAeb,OAAO,mBAAmB;;;;;;;;;;CAWtD,WAAW,GAAG;;;qBAGK,OAAO,eAAe;;;CAIzC,YAAY,GAAG;;;qBAGI,OAAO,eAAe;;;CAIzC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAIvC,aAAa,GAAG;;;;CAKhB,YAAY,GAAG;;;CAIf,OAAO,GAAG;;;CAIV,SAAS,GAAG;;;CAIZ,eAAe,GAAG;;;;CAKlB,gBAAgB,GAAG;;;;CAKnB,eAAe,GAAG;;;;CAKlB,SAAS,GAAG;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;;;CAchB,gBAAgB,GAAG;;;CAInB,iBAAiB,GAAG;;;;;CAMpB,gBAAgB,GAAG;kBACH,OAAO,iBAAiB;;;;;;eAM3B,OAAO,UAAU;;;;sBAIV,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;oBACD,OAAO,aAAa;kBACtB,OAAO,aAAa;;;;;eAKvB,OAAO,cAAc;;;;sBAId,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;kBAEF,OAAO,iBAAiB;;;;;eAK3B,OAAO,UAAU;;;;sBAIV,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,aAAa,GAAG;;kBAEA,OAAO,kBAAkB;;;;;eAK5B,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,aAAa,GAAG;;;;;;;eAOH,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;CAI5C,aAAa,GAAG;;;;;;;;eAQH,OAAO,aAAa;;;;eAIpB,OAAO,kBAAkB;;;;CAKtC,gBAAgB,GAAG;oBACD,OAAO,WAAW;kBACpB,OAAO,iBAAiB;;;;;eAK3B,OAAO,WAAW;;;;sBAIX,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;oBAClB,OAAO,iBAAiB;;;CAI1C,aAAa,GAAG;oBACE,OAAO,WAAW;kBACpB,OAAO,WAAW;;;;;eAKrB,OAAO,cAAc;;;;sBAId,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,YAAY,GAAG;;aAEJ,OAAO,WAAW;kBACb,OAAO,aAAa;;;eAGvB,OAAO,gBAAgB;oBAClB,OAAO,kBAAkB;;;;eAI9B,OAAO,iBAAiB;oBACnB,OAAO,kBAAkB;;;CAI3C,cAAc,GAAG;;;;eAIJ,OAAO,WAAW;;;;eAIlB,OAAO,gBAAgB;;;CAIpC,cAAc,GAAG;;;;;;;;;;;;;;;;;;;CAoBjB,aAAa,GAAG;;;CAIhB,cAAc,GAAG;oBACC,OAAO,aAAa;;;;;;eAMzB,OAAO,aAAa;;;;sBAIb,OAAO,kBAAkB;eAChC,OAAO,kBAAkB;;;;;;;;CAStC,aAAa,GAAG;oBACE,OAAO,WAAW;;;;;;eAMvB,OAAO,WAAW;;;;sBAIX,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;;;;;;;;CASpC,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBb,EAAE"}
|
|
@@ -3,14 +3,14 @@ import { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabe
|
|
|
3
3
|
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { cx } from "antd-style";
|
|
6
|
-
import
|
|
6
|
+
import useControlledState from "use-merge-value";
|
|
7
7
|
//#region src/base-ui/Segmented/Segmented.tsx
|
|
8
8
|
const normalizeOption = (option) => typeof option === "string" ? {
|
|
9
9
|
label: option,
|
|
10
10
|
value: option
|
|
11
11
|
} : option;
|
|
12
12
|
const Segmented = ({ block = false, className, classNames, defaultValue, disabled = false, glass = false, id, name, onChange, options, ref, shadow = false, size = "middle", style, styles: customStyles, value, variant = "filled", vertical = false }) => {
|
|
13
|
-
const [innerValue, setInnerValue] =
|
|
13
|
+
const [innerValue, setInnerValue] = useControlledState(defaultValue, {
|
|
14
14
|
defaultValue,
|
|
15
15
|
onChange: (next) => {
|
|
16
16
|
if (next != null) onChange?.(next);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segmented.mjs","names":[
|
|
1
|
+
{"version":3,"file":"Segmented.mjs","names":[],"sources":["../../../src/base-ui/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport {\n type CSSProperties,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport {\n SegmentedIndicator,\n SegmentedItem,\n SegmentedItemIcon,\n SegmentedItemLabel,\n SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n block = false,\n className,\n classNames,\n defaultValue,\n disabled = false,\n glass = false,\n id,\n name,\n onChange,\n options,\n ref,\n shadow = false,\n size = 'middle',\n style,\n styles: customStyles,\n value,\n variant = 'filled',\n vertical = false,\n}: SegmentedProps<Value>) => {\n const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n defaultValue,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value,\n });\n\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n listRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n\n const normalizedOptions = useMemo(\n () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n [options],\n );\n\n const updateIndicator = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n if (!active) {\n list.style.setProperty('--active-item-width', '0px');\n list.style.setProperty('--active-item-height', '0px');\n return;\n }\n list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n }, []);\n\n useLayoutEffect(() => {\n updateIndicator();\n }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n useEffect(() => {\n const list = listRef.current;\n if (!list || typeof ResizeObserver === 'undefined') return;\n const ro = new ResizeObserver(() => updateIndicator());\n ro.observe(list);\n return () => ro.disconnect();\n }, [updateIndicator]);\n\n const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n return (\n <SegmentedRoot<Value>\n block={block}\n className={cx(classNames?.root, className)}\n disabled={disabled}\n glass={glass}\n id={id}\n orientation={vertical ? 'vertical' : 'horizontal'}\n ref={mergedRef}\n shadow={shadow}\n style={rootStyle}\n value={groupValue}\n variant={variant}\n onValueChange={(next) => {\n const picked = next[0];\n if (picked != null) setInnerValue(picked);\n }}\n >\n <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n {normalizedOptions.map((opt) => (\n <SegmentedItem<Value>\n aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n block={block}\n className={cx(classNames?.item, opt.className)}\n data-segmented-item=\"\"\n disabled={disabled || opt.disabled}\n key={opt.value}\n name={name}\n size={size}\n style={customStyles?.item}\n title={opt.title}\n value={opt.value}\n >\n {opt.icon != null && (\n <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n {opt.icon}\n </SegmentedItemIcon>\n )}\n {opt.label != null && (\n <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n {opt.label}\n </SegmentedItemLabel>\n )}\n </SegmentedItem>\n ))}\n </SegmentedRoot>\n );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":";;;;;;;AAsBA,MAAM,mBACJ,WAEA,OAAO,WAAW,WAAW;CAAE,OAAO;CAAQ,OAAO;CAAQ,GAAG;AAElE,MAAM,aAA4C,EAChD,QAAQ,OACR,WACA,YACA,cACA,WAAW,OACX,QAAQ,OACR,IACA,MACA,UACA,SACA,KACA,SAAS,OACT,OAAO,UACP,OACA,QAAQ,cACR,OACA,UAAU,UACV,WAAW,YACgB;CAC3B,MAAM,CAAC,YAAY,iBAAiB,mBAAsC,cAAc;EACtF;EACA,WAAW,SAAS;AAClB,OAAI,QAAQ,KAAM,YAAW,KAAK;;EAEpC;EACD,CAAC;CAEF,MAAM,UAAU,OAA8B,KAAK;CAEnD,MAAM,YAAY,aACf,SAAgC;AAC/B,UAAQ,UAAU;AAClB,MAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;WAC/B,IAAM,KAA+C,UAAU;IAE1E,CAAC,IAAI,CACN;CAED,MAAM,oBAAoB,eACjB,WAAW,EAAE,EAAE,KAAK,MAAM,gBAAuB,EAAE,CAAC,EAC3D,CAAC,QAAQ,CACV;CAED,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,OAAO,QAAQ;AACrB,MAAI,CAAC,KAAM;EACX,MAAM,SAAS,KAAK,cAA2B,sCAAsC;AACrF,MAAI,CAAC,QAAQ;AACX,QAAK,MAAM,YAAY,uBAAuB,MAAM;AACpD,QAAK,MAAM,YAAY,wBAAwB,MAAM;AACrD;;AAEF,OAAK,MAAM,YAAY,sBAAsB,GAAG,OAAO,WAAW,IAAI;AACtE,OAAK,MAAM,YAAY,qBAAqB,GAAG,OAAO,UAAU,IAAI;AACpE,OAAK,MAAM,YAAY,uBAAuB,GAAG,OAAO,YAAY,IAAI;AACxE,OAAK,MAAM,YAAY,wBAAwB,GAAG,OAAO,aAAa,IAAI;IACzE,EAAE,CAAC;AAEN,uBAAsB;AACpB,mBAAiB;IAChB;EAAC;EAAY;EAAmB;EAAU;EAAM;EAAO;EAAgB,CAAC;AAE3E,iBAAgB;EACd,MAAM,OAAO,QAAQ;AACrB,MAAI,CAAC,QAAQ,OAAO,mBAAmB,YAAa;EACpD,MAAM,KAAK,IAAI,qBAAqB,iBAAiB,CAAC;AACtD,KAAG,QAAQ,KAAK;AAChB,eAAa,GAAG,YAAY;IAC3B,CAAC,gBAAgB,CAAC;CAErB,MAAM,aAAa,cAAwB,cAAc,OAAO,CAAC,WAAW,GAAG,EAAE,EAAG,CAAC,WAAW,CAAC;CAEjG,MAAM,YAA2B;EAAE,GAAG;EAAO,GAAG,cAAc;EAAM;AAEpE,QACE,qBAAC,eAAD;EACS;EACP,WAAW,GAAG,YAAY,MAAM,UAAU;EAChC;EACH;EACH;EACJ,aAAa,WAAW,aAAa;EACrC,KAAK;EACG;EACR,OAAO;EACP,OAAO;EACE;EACT,gBAAgB,SAAS;GACvB,MAAM,SAAS,KAAK;AACpB,OAAI,UAAU,KAAM,eAAc,OAAO;;YAd7C,CAiBE,oBAAC,oBAAD;GAAoB,WAAW,YAAY;GAAW,OAAO,cAAc;GAAa,CAAA,EACvF,kBAAkB,KAAK,QACtB,qBAAC,eAAD;GACE,cAAY,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,KAAA;GACjD;GACP,WAAW,GAAG,YAAY,MAAM,IAAI,UAAU;GAC9C,uBAAoB;GACpB,UAAU,YAAY,IAAI;GAEpB;GACA;GACN,OAAO,cAAc;GACrB,OAAO,IAAI;GACX,OAAO,IAAI;aAXb,CAaG,IAAI,QAAQ,QACX,oBAAC,mBAAD;IAAmB,WAAW,YAAY;IAAU,OAAO,cAAc;cACtE,IAAI;IACa,CAAA,EAErB,IAAI,SAAS,QACZ,oBAAC,oBAAD;IAAoB,WAAW,YAAY;IAAW,OAAO,cAAc;cACxE,IAAI;IACc,CAAA,CAET;KAjBT,IAAI,MAiBK,CAChB,CACY;;;AAIpB,UAAU,cAAc"}
|
|
@@ -5,7 +5,7 @@ import { createContext, use, useMemo, useRef, useState } from "react";
|
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { cx } from "antd-style";
|
|
7
7
|
import { useReducedMotion } from "motion/react";
|
|
8
|
-
import
|
|
8
|
+
import useControlledState from "use-merge-value";
|
|
9
9
|
import { Switch } from "@base-ui/react/switch";
|
|
10
10
|
//#region src/base-ui/Switch/atoms.tsx
|
|
11
11
|
const SwitchContext = createContext(null);
|
|
@@ -18,7 +18,7 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
|
|
|
18
18
|
const Motion = useMotionComponent();
|
|
19
19
|
const [isPressed, setIsPressed] = useState(false);
|
|
20
20
|
const lastEventRef = useRef(null);
|
|
21
|
-
const [isChecked, setIsChecked] =
|
|
21
|
+
const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {
|
|
22
22
|
defaultValue: defaultChecked,
|
|
23
23
|
onChange: (value) => {
|
|
24
24
|
if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport { useReducedMotion } from 'motion/react';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n ...rest\n}: SwitchRootInternalProps) => {\n const Motion = useMotionComponent();\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const baseClassName = rootVariants({ size });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n (rest as any).onKeyDown?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <Motion.button\n {...rest}\n className={cx(baseClassName, className)}\n initial={false}\n whileTap=\"tap\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onTap={() => setIsPressed(false)}\n onTapCancel={() => setIsPressed(false)}\n onTapStart={() => setIsPressed(true)}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n pressedAnimation,\n size = 'default',\n transition = { damping: 24, stiffness: 360, type: 'spring' },\n children,\n ...rest\n}: SwitchThumbProps) => {\n const Motion = useMotionComponent();\n const { isPressed } = useSwitchContext();\n const shouldReduceMotion = useReducedMotion();\n const baseClassName = thumbVariants({ size });\n\n const defaultPressedAnimation = {\n width: size === 'small' ? 16 : 22,\n };\n\n const effectiveAnimate =\n !shouldReduceMotion && isPressed ? pressedAnimation || defaultPressedAnimation : undefined;\n const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;\n\n return (\n <Switch.Thumb\n render={\n <Motion.span\n layout\n animate={effectiveAnimate}\n className={cx(baseClassName, className)}\n transition={effectiveTransition}\n {...rest}\n >\n {children}\n </Motion.span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n if (position === 'thumb') return styles.iconThumb;\n if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n size = 'default',\n transition = { bounce: 0, type: 'spring' },\n ...rest\n}: SwitchIconProps) => {\n const Motion = useMotionComponent();\n const { isChecked } = useSwitchContext();\n const shouldReduceMotion = useReducedMotion();\n\n const isAnimated = useMemo(() => {\n if (position === 'right') return !isChecked;\n if (position === 'left') return isChecked;\n if (position === 'thumb') return true;\n return false;\n }, [position, isChecked]);\n\n const positionClass = getIconPositionClass(position, size);\n const effectiveTransition = shouldReduceMotion ? { duration: 0 } : transition;\n\n return (\n <Motion.span\n animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n className={cx(styles.icon, positionClass, className)}\n transition={effectiveTransition}\n {...rest}\n >\n {children}\n </Motion.span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}
|
package/es/base-ui/Tabs/Tabs.mjs
CHANGED
|
@@ -3,10 +3,10 @@ import { styles } from "./style.mjs";
|
|
|
3
3
|
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from "./atoms.mjs";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { cx } from "antd-style";
|
|
6
|
-
import
|
|
6
|
+
import useControlledState from "use-merge-value";
|
|
7
7
|
//#region src/base-ui/Tabs/Tabs.tsx
|
|
8
8
|
const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onChange, orientation = "horizontal", ref, size = "middle", style, styles: customStyles, variant = "rounded" }) => {
|
|
9
|
-
const [value, setValue] =
|
|
9
|
+
const [value, setValue] = useControlledState(defaultActiveKey ?? null, {
|
|
10
10
|
defaultValue: defaultActiveKey,
|
|
11
11
|
onChange: (next) => {
|
|
12
12
|
if (next != null) onChange?.(next);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.mjs","names":[
|
|
1
|
+
{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../src/base-ui/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from './atoms';\nimport { styles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({\n activeKey,\n className,\n classNames,\n defaultActiveKey,\n items,\n onChange,\n orientation = 'horizontal',\n ref,\n size = 'middle',\n style,\n styles: customStyles,\n variant = 'rounded',\n}) => {\n const [value, setValue] = useControlledState<string | null>(defaultActiveKey ?? null, {\n defaultValue: defaultActiveKey,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value: activeKey,\n });\n\n const hasPanels = items?.some((item) => item.children != null);\n\n return (\n <TabsRoot\n className={cx(styles.root, classNames?.root, className)}\n orientation={orientation}\n ref={ref}\n size={size}\n style={{ ...style, ...customStyles?.root }}\n value={value}\n variant={variant}\n onValueChange={(next) => setValue(next ?? null)}\n >\n <TabsList className={cx(classNames?.list)} style={customStyles?.list}>\n <TabsIndicator className={cx(classNames?.indicator)} style={customStyles?.indicator} />\n {items?.map((item) => (\n <TabsTab\n className={cx(classNames?.tab)}\n disabled={item.disabled}\n key={item.key}\n style={customStyles?.tab}\n value={item.key}\n >\n {item.icon}\n {item.label}\n </TabsTab>\n ))}\n </TabsList>\n {hasPanels &&\n items?.map((item) => (\n <TabsPanel\n className={cx(classNames?.panel)}\n key={item.key}\n style={customStyles?.panel}\n value={item.key}\n >\n {item.children}\n </TabsPanel>\n ))}\n </TabsRoot>\n );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;AAUA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,CAAC,OAAO,YAAY,mBAAkC,oBAAoB,MAAM;EACpF,cAAc;EACd,WAAW,SAAS;AAClB,OAAI,QAAQ,KAAM,YAAW,KAAK;;EAEpC,OAAO;EACR,CAAC;CAEF,MAAM,YAAY,OAAO,MAAM,SAAS,KAAK,YAAY,KAAK;AAE9D,QACE,qBAAC,UAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,UAAU;EAC1C;EACR;EACC;EACN,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;GAAM;EACnC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,KAAK;YARjD,CAUE,qBAAC,UAAD;GAAU,WAAW,GAAG,YAAY,KAAK;GAAE,OAAO,cAAc;aAAhE,CACE,oBAAC,eAAD;IAAe,WAAW,GAAG,YAAY,UAAU;IAAE,OAAO,cAAc;IAAa,CAAA,EACtF,OAAO,KAAK,SACX,qBAAC,SAAD;IACE,WAAW,GAAG,YAAY,IAAI;IAC9B,UAAU,KAAK;IAEf,OAAO,cAAc;IACrB,OAAO,KAAK;cALd,CAOG,KAAK,MACL,KAAK,MACE;MANH,KAAK,IAMF,CACV,CACO;MACV,aACC,OAAO,KAAK,SACV,oBAAC,WAAD;GACE,WAAW,GAAG,YAAY,MAAM;GAEhC,OAAO,cAAc;GACrB,OAAO,KAAK;aAEX,KAAK;GACI,EALL,KAAK,IAKA,CACZ,CACK;;;AAIf,KAAK,cAAc"}
|
|
@@ -5,14 +5,14 @@ import MessageModal from "../MessageModal/MessageModal.mjs";
|
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
|
-
import
|
|
8
|
+
import useControlledState from "use-merge-value";
|
|
9
9
|
//#region src/chat/EditableMessage/EditableMessage.tsx
|
|
10
10
|
const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {
|
|
11
|
-
const [isEdit, setTyping] =
|
|
11
|
+
const [isEdit, setTyping] = useControlledState(false, {
|
|
12
12
|
onChange: onEditingChange,
|
|
13
13
|
value: editing
|
|
14
14
|
});
|
|
15
|
-
const [expand, setExpand] =
|
|
15
|
+
const [expand, setExpand] = useControlledState(false, {
|
|
16
16
|
onChange: onOpenChange,
|
|
17
17
|
value: openModal
|
|
18
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableMessage.mjs","names":[
|
|
1
|
+
{"version":3,"file":"EditableMessage.mjs","names":[],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n ({\n value,\n onChange,\n classNames = {},\n onEditingChange,\n editing,\n openModal,\n onOpenChange,\n placeholder,\n showEditWhenEmpty = false,\n styles: customStyles,\n className,\n style,\n height,\n variant,\n editButtonSize,\n text,\n fullFeaturedCodeBlock,\n model,\n fontSize,\n language = 'markdown',\n markdownProps,\n }) => {\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [expand, setExpand] = useControlledState<boolean>(false, {\n onChange: onOpenChange,\n value: openModal,\n });\n\n const isAutoSize = height === 'auto';\n\n const input = (\n <MessageInput\n shortcut\n className={cx(className, classNames?.input)}\n classNames={classNames}\n defaultValue={value}\n editButtonSize={editButtonSize}\n height={height}\n language={language}\n placeholder={placeholder}\n styles={customStyles}\n text={text}\n variant={variant}\n style={{\n ...style,\n ...customStyles?.input,\n }}\n onCancel={() => setTyping(false)}\n onConfirm={(text) => {\n onChange?.(text);\n setTyping(false);\n }}\n />\n );\n\n if (!value && showEditWhenEmpty) return input;\n\n return (\n <>\n {!expand && isEdit ? (\n input\n ) : (\n <Markdown\n className={cx(className, classNames?.markdown)}\n fontSize={fontSize}\n fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n variant={'chat'}\n style={{\n height: isAutoSize ? 'unset' : height,\n ...style,\n ...customStyles?.markdown,\n }}\n {...markdownProps}\n >\n {value || placeholder || ''}\n </Markdown>\n )}\n {expand && (\n <MessageModal\n editing={isEdit}\n extra={model?.extra}\n footer={model?.footer}\n height={height}\n language={language}\n open={expand}\n placeholder={placeholder}\n text={text}\n value={value}\n onChange={onChange}\n onEditingChange={setTyping}\n onOpenChange={(e) => {\n setExpand(e);\n setTyping(false);\n }}\n />\n )}\n </>\n );\n },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,EAAE,EACf,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAW,GAAG,WAAW,YAAY,MAAM;EAC/B;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACD,gBAAgB,UAAU,MAAM;EAChC,YAAY,SAAS;AACnB,cAAW,KAAK;AAChB,aAAU,MAAM;;EAElB,CAAA;AAGJ,KAAI,CAAC,SAAS,kBAAmB,QAAO;AAExC,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAW,GAAG,WAAW,YAAY,SAAS;EACpC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;GAClB;EACD,GAAI;YAEH,SAAS,eAAe;EAChB,CAAA,EAEZ,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;AACnB,aAAU,EAAE;AACZ,aAAU,MAAM;;EAElB,CAAA,CAEH,EAAA,CAAA;EAGR;AAED,gBAAgB,cAAc"}
|
|
@@ -11,16 +11,16 @@ import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
|
|
|
11
11
|
import { memo, useState } from "react";
|
|
12
12
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useResponsive } from "antd-style";
|
|
14
|
-
import
|
|
14
|
+
import useControlledState from "use-merge-value";
|
|
15
15
|
//#region src/chat/MessageModal/MessageModal.tsx
|
|
16
16
|
const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenChange, onEditingChange, placeholder, value, language = "markdown", onChange, text, footer, extra }) => {
|
|
17
17
|
const { mobile } = useResponsive();
|
|
18
18
|
const { t } = useTranslation(messageModal_default);
|
|
19
|
-
const [isEdit, setTyping] =
|
|
19
|
+
const [isEdit, setTyping] = useControlledState(false, {
|
|
20
20
|
onChange: onEditingChange,
|
|
21
21
|
value: editing
|
|
22
22
|
});
|
|
23
|
-
const [showModal, setShowModal] =
|
|
23
|
+
const [showModal, setShowModal] = useControlledState(false, {
|
|
24
24
|
onChange: onOpenChange,
|
|
25
25
|
value: open
|
|
26
26
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","
|
|
1
|
+
{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","Flexbox","textStyles"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport { styles as textStyles } from '@/chat/MessageInput/style';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\n\nimport { type MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n ({\n panelRef,\n editing,\n open,\n height = '75vh',\n onOpenChange,\n onEditingChange,\n placeholder,\n value,\n language = 'markdown',\n onChange,\n text,\n footer,\n extra,\n }) => {\n const { mobile } = useResponsive();\n const { t } = useTranslation(messageModalMessages);\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [showModal, setShowModal] = useControlledState(false, {\n onChange: onOpenChange,\n value: open,\n });\n\n const [temporaryValue, setMessage] = useState(value);\n\n const confirmText = text?.confirm ?? t('messageModal.confirm');\n const cancelText = text?.cancel ?? t('messageModal.cancel');\n const editText = text?.edit ?? t('messageModal.edit');\n\n const modalFooter = isEdit ? (\n <Flexbox direction={'horizontal-reverse'} gap={8}>\n <Button\n type=\"primary\"\n onClick={() => {\n setTyping(false);\n onChange?.(temporaryValue);\n setMessage(value);\n }}\n >\n {confirmText}\n </Button>\n <Button\n onClick={() => {\n setTyping(false);\n setMessage(value);\n }}\n >\n {cancelText}\n </Button>\n </Flexbox>\n ) : (\n footer\n );\n\n return (\n <Modal\n allowFullscreen\n destroyOnHidden\n cancelText={cancelText}\n footer={modalFooter}\n height={height}\n okText={editText}\n open={showModal}\n panelRef={panelRef}\n title={text?.title}\n onOk={() => setTyping(true)}\n onCancel={() => {\n setShowModal(false);\n setTyping(false);\n setMessage(value);\n }}\n >\n {isEdit ? (\n mobile ? (\n <TextArea\n autoSize\n className={textStyles}\n defaultValue={temporaryValue}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onChange={(value) => setMessage(value.target.value)}\n />\n ) : (\n <CodeEditor\n className={textStyles}\n defaultValue={temporaryValue}\n language={language}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onValueChange={(value) => setMessage(value)}\n />\n )\n ) : (\n <>\n {extra}\n <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n </>\n )}\n </Modal>\n );\n },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,mBAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAAC,OAAD;EACE,iBAAA;EACA,iBAAA;EACY;EACZ,QA9BgB,SAClB,qBAACC,mBAAD;GAAS,WAAW;GAAsB,KAAK;aAA/C,CACE,oBAAC,QAAD;IACE,MAAK;IACL,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;cAGlB;IACM,CAAA,EACT,oBAAC,QAAD;IACE,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;IACM,CAAA,CACD;OAEV;EASU;EACR,QAAQ;EACR,MAAM;EACI;EACV,OAAO,MAAM;EACb,YAAY,UAAU,KAAK;EAC3B,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;YAGlB,SACC,SACE,oBAAC,UAAD;GACE,UAAA;GACA,WAAWC;GACX,cAAc;GACD;GACb,OAAO;GACP,SAAS;GACT,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,UAAU,WAAW,MAAM,OAAO,MAAM;GACnD,CAAA,GAEF,oBAAC,YAAD;GACE,WAAWA;GACX,cAAc;GACJ;GACG;GACb,OAAO;GACP,SAAS;GACT,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,UAAU,WAAW,MAAM;GAC3C,CAAA,GAGJ,qBAAA,YAAA,EAAA,UAAA,CACG,OACD,oBAAC,UAAD;GAAU,SAAS;aAAS,OAAO,SAAS,YAAY;GAAY,CAAA,CACnE,EAAA,CAAA;EAEC,CAAA;EAGb;AAED,aAAa,cAAc"}
|
|
@@ -5,10 +5,10 @@ import { styles } from "./style.mjs";
|
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
|
-
import
|
|
8
|
+
import useControlledState from "use-merge-value";
|
|
9
9
|
//#region src/mobile/TabBar/TabBar.tsx
|
|
10
10
|
const TabBar = memo(({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {
|
|
11
|
-
const [currentActive, setCurrentActive] =
|
|
11
|
+
const [currentActive, setCurrentActive] = useControlledState(defaultActiveKey || items[0].key, {
|
|
12
12
|
defaultValue: defaultActiveKey,
|
|
13
13
|
onChange,
|
|
14
14
|
value: activeKey
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.mjs","names":["Flexbox"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n const [currentActive, setCurrentActive] = useMergeState<string>(\n defaultActiveKey || items[0].key,\n {\n defaultValue: defaultActiveKey,\n onChange,\n value: activeKey,\n },\n );\n\n return (\n <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n <Flexbox\n horizontal\n align={'center'}\n className={cx(styles.inner, className)}\n justify={'space-around'}\n >\n {items.map((item) => {\n const active = item.key === currentActive;\n return (\n <Flexbox\n align={'center'}\n className={cx(styles.tab, active && styles.active)}\n gap={4}\n justify={'center'}\n key={item.key}\n onClick={() => {\n setCurrentActive(item.key);\n item?.onClick?.();\n }}\n >\n <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n </Flexbox>\n <div className={styles.title}>\n {typeof item.title === 'function' ? item.title(active) : item.title}\n </div>\n </Flexbox>\n );\n })}\n </Flexbox>\n {safeArea && <SafeArea position={'bottom'} />}\n </Flexbox>\n );\n },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"TabBar.mjs","names":["useMergeState","Flexbox"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n const [currentActive, setCurrentActive] = useMergeState<string>(\n defaultActiveKey || items[0].key,\n {\n defaultValue: defaultActiveKey,\n onChange,\n value: activeKey,\n },\n );\n\n return (\n <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n <Flexbox\n horizontal\n align={'center'}\n className={cx(styles.inner, className)}\n justify={'space-around'}\n >\n {items.map((item) => {\n const active = item.key === currentActive;\n return (\n <Flexbox\n align={'center'}\n className={cx(styles.tab, active && styles.active)}\n gap={4}\n justify={'center'}\n key={item.key}\n onClick={() => {\n setCurrentActive(item.key);\n item?.onClick?.();\n }}\n >\n <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n </Flexbox>\n <div className={styles.title}>\n {typeof item.title === 'function' ? item.title(active) : item.title}\n </div>\n </Flexbox>\n );\n })}\n </Flexbox>\n {safeArea && <SafeArea position={'bottom'} />}\n </Flexbox>\n );\n },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoBA,mBACxC,oBAAoB,MAAM,GAAG,KAC7B;EACE,cAAc;EACd;EACA,OAAO;EACR,CACF;AAED,QACE,qBAACC,mBAAD;EAAS,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,UAAU;EAAO;EAAK,GAAI;YAAjF,CACE,oBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,UAAU;GACtC,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;AAC5B,WACE,qBAACA,mBAAD;KACE,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,OAAO;KAClD,KAAK;KACL,SAAS;KAET,eAAe;AACb,uBAAiB,KAAK,IAAI;AAC1B,YAAM,WAAW;;eARrB,CAWE,oBAACA,mBAAD;MAAS,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,OAAO,GAAG,KAAK;MACpD,CAAA,EACV,oBAAC,OAAD;MAAK,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,OAAO,GAAG,KAAK;MAC1D,CAAA,CACE;OAZH,KAAK,IAYF;KAEZ;GACM,CAAA,EACT,YAAY,oBAAC,UAAD,EAAU,UAAU,UAAY,CAAA,CACrC;;EAGf;AAED,OAAO,cAAc"}
|