@solostylist/ui-kit 1.0.165 → 1.0.166
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 +13 -13
- package/dist/Download-UsLvGg3y.js +8 -0
- package/dist/main.d.ts +2 -0
- package/dist/main.js +169 -167
- package/dist/s-accordion/package.json +5 -5
- package/dist/s-action-overlay/package.json +5 -5
- package/dist/s-ai-tool-bar/index.js +4 -0
- package/dist/s-ai-tool-bar/package.json +5 -0
- package/dist/s-ai-tool-bar/s-ai-tool-bar.d.ts +104 -0
- package/dist/s-ai-tool-bar/s-ai-tool-bar.js +480 -0
- package/dist/s-avatar/package.json +5 -5
- package/dist/s-blur-text/package.json +5 -5
- package/dist/s-breadcrumbs/package.json +5 -5
- package/dist/s-button/package.json +5 -5
- package/dist/s-carousel/package.json +4 -4
- package/dist/s-category-card/package.json +4 -4
- package/dist/s-chat-input/package.json +5 -5
- package/dist/s-chat-message/s-chat-message.js +30 -31
- package/dist/s-chip/package.json +5 -5
- package/dist/s-comment-message/package.json +5 -5
- package/dist/s-image-comparison/package.json +5 -5
- package/dist/s-image-modal/package.json +5 -5
- package/dist/s-radial-pulse-animate/package.json +5 -5
- package/dist/s-rating/package.json +5 -5
- package/dist/s-review/package.json +5 -5
- package/dist/s-scroll-reveal/package.json +5 -5
- package/dist/s-scroll-to-top/package.json +5 -5
- package/dist/s-tabs/package.json +3 -3
- package/dist/s-text-shimmer/package.json +4 -4
- package/dist/s-theme-demo/package.json +5 -5
- package/dist/s-theme-switch/package.json +4 -4
- package/dist/s-typewriter-text/package.json +5 -5
- package/dist/theme/components/alert.d.ts +1440 -1440
- package/dist/theme/components/button.d.ts +2156 -2156
- package/dist/theme/components/chip.d.ts +2 -2
- package/package.json +113 -113
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
## Installation
|
|
2
|
-
|
|
3
|
-
You can install it with npm:
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
npm i @solostylist/ui-kit
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
## Usage
|
|
10
|
-
|
|
11
|
-
```javascript
|
|
12
|
-
import { STextField } from '@solostylist/ui-kit';
|
|
13
|
-
```
|
|
1
|
+
## Installation
|
|
2
|
+
|
|
3
|
+
You can install it with npm:
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm i @solostylist/ui-kit
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```javascript
|
|
12
|
+
import { STextField } from '@solostylist/ui-kit';
|
|
13
|
+
```
|
package/dist/main.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ export { default as SAccordion } from './s-accordion/index';
|
|
|
2
2
|
export type { SAccordionProps } from './s-accordion/index';
|
|
3
3
|
export { default as SActionOverlay } from './s-action-overlay/index';
|
|
4
4
|
export type { SActionOverlayProps, IActionOverlay } from './s-action-overlay/index';
|
|
5
|
+
export { default as SAiToolBar } from './s-ai-tool-bar/index';
|
|
6
|
+
export type { SAiToolBarProps, SAiToolBarInput } from './s-ai-tool-bar/index';
|
|
5
7
|
export { default as SAutocomplete } from './s-autocomplete/index';
|
|
6
8
|
export type { SAutocompleteProps } from './s-autocomplete/index';
|
|
7
9
|
export { default as SAvatar } from './s-avatar/index';
|
package/dist/main.js
CHANGED
|
@@ -1,175 +1,177 @@
|
|
|
1
1
|
import { default as t } from "./s-accordion/s-accordion.js";
|
|
2
2
|
import { default as l } from "./s-action-overlay/s-action-overlay.js";
|
|
3
|
-
import { default as m } from "./s-
|
|
4
|
-
import { default as u } from "./s-
|
|
5
|
-
import { default as d } from "./s-
|
|
6
|
-
import { default as i } from "./s-
|
|
7
|
-
import { default as g } from "./s-button
|
|
8
|
-
import { default as T } from "./s-
|
|
9
|
-
import { default as P } from "./s-
|
|
10
|
-
import { default as b } from "./s-chat-
|
|
11
|
-
import { default as y } from "./s-
|
|
12
|
-
import { default as I } from "./s-
|
|
3
|
+
import { default as m } from "./s-ai-tool-bar/s-ai-tool-bar.js";
|
|
4
|
+
import { default as u } from "./s-autocomplete/s-autocomplete.js";
|
|
5
|
+
import { default as d } from "./s-avatar/s-avatar.js";
|
|
6
|
+
import { default as i } from "./s-breadcrumbs/s-breadcrumbs.js";
|
|
7
|
+
import { default as g } from "./s-button/s-button.js";
|
|
8
|
+
import { default as T } from "./s-button-link/s-button-link.js";
|
|
9
|
+
import { default as P } from "./s-carousel/s-carousel.js";
|
|
10
|
+
import { default as b } from "./s-chat-input/s-chat-input.js";
|
|
11
|
+
import { default as y } from "./s-chat-message/s-chat-message.js";
|
|
12
|
+
import { default as I } from "./s-comment-message/s-comment-message.js";
|
|
13
|
+
import { default as h } from "./s-text-editor/s-text-editor.js";
|
|
13
14
|
import "./s-text-editor/s-text-editor-toolbar.js";
|
|
14
|
-
import { default as
|
|
15
|
-
import { default as
|
|
16
|
-
import { default as
|
|
17
|
-
import { default as
|
|
18
|
-
import { DialogConfirmProvider as
|
|
19
|
-
import { DialogMessageProvider as
|
|
20
|
-
import { default as
|
|
21
|
-
import { default as
|
|
22
|
-
import { default as
|
|
23
|
-
import { default as
|
|
24
|
-
import { default as
|
|
25
|
-
import { default as
|
|
26
|
-
import { default as
|
|
27
|
-
import { default as
|
|
28
|
-
import { default as
|
|
29
|
-
import { default as
|
|
30
|
-
import { default as
|
|
31
|
-
import { default as
|
|
32
|
-
import { default as
|
|
33
|
-
import { default as
|
|
34
|
-
import { default as
|
|
35
|
-
import { default as
|
|
36
|
-
import { default as
|
|
37
|
-
import { default as
|
|
38
|
-
import { default as
|
|
39
|
-
import { default as
|
|
40
|
-
import { default as
|
|
41
|
-
import { default as
|
|
42
|
-
import { default as
|
|
43
|
-
import { SStripeCVC as
|
|
44
|
-
import { default as
|
|
45
|
-
import { default as
|
|
46
|
-
import { default as
|
|
47
|
-
import { default as
|
|
48
|
-
import { default as
|
|
49
|
-
import { default as
|
|
50
|
-
import { default as
|
|
51
|
-
import { default as
|
|
52
|
-
import { default as
|
|
53
|
-
import { default as
|
|
54
|
-
import { default as
|
|
55
|
-
import { MediaItem as
|
|
56
|
-
import { default as
|
|
57
|
-
import { default as
|
|
58
|
-
import { default as
|
|
59
|
-
import { default as
|
|
60
|
-
import { default as
|
|
61
|
-
import { default as
|
|
62
|
-
import { default as
|
|
63
|
-
import { default as
|
|
64
|
-
import { default as
|
|
65
|
-
import { default as
|
|
66
|
-
import { default as
|
|
67
|
-
import { default as
|
|
68
|
-
import { default as
|
|
69
|
-
import { default as
|
|
70
|
-
import { SLanguagePopover as
|
|
71
|
-
import { default as
|
|
72
|
-
import { useDialog as
|
|
73
|
-
import { usePopover as
|
|
15
|
+
import { default as B } from "./s-checkbox/s-checkbox.js";
|
|
16
|
+
import { default as F } from "./s-chip/s-chip.js";
|
|
17
|
+
import { default as E } from "./s-chips/s-chips.js";
|
|
18
|
+
import { default as R } from "./s-data-table/s-data-table.js";
|
|
19
|
+
import { DialogConfirmProvider as N, default as O, useDialogConfirm as j } from "./s-dialog-confirm/s-dialog-confirm.js";
|
|
20
|
+
import { DialogMessageProvider as Z, default as q, useDialogMessage as H } from "./s-dialog-message/s-dialog-message.js";
|
|
21
|
+
import { default as K } from "./s-error/s-error.js";
|
|
22
|
+
import { default as U } from "./s-empty/s-empty.js";
|
|
23
|
+
import { default as X } from "./s-flex-box/s-flex-box.js";
|
|
24
|
+
import { default as _ } from "./s-two-pane-layout/s-two-pane-layout.js";
|
|
25
|
+
import { default as ee } from "./s-dialog/s-dialog.js";
|
|
26
|
+
import { default as re } from "./s-error-layout/s-error-layout.js";
|
|
27
|
+
import { default as te } from "./s-file-dropzone/s-file-dropzone.js";
|
|
28
|
+
import { default as le } from "./s-file-icon/s-file-icon.js";
|
|
29
|
+
import { default as me } from "./s-i18n-provider/s-i18n-provider.js";
|
|
30
|
+
import { default as ue } from "./s-icon-button/s-icon-button.js";
|
|
31
|
+
import { default as de } from "./s-label/s-label.js";
|
|
32
|
+
import { default as ie } from "./s-multi-select/s-multi-select.js";
|
|
33
|
+
import { default as ge } from "./s-no-ssr/s-no-ssr.js";
|
|
34
|
+
import { default as Te } from "./s-overlay-scrollbar/s-overlay-scrollbar.js";
|
|
35
|
+
import { default as Pe } from "./s-text-field/s-text-field.js";
|
|
36
|
+
import { default as be } from "./s-pagination/s-pagination.js";
|
|
37
|
+
import { default as ye } from "./s-select/s-select.js";
|
|
38
|
+
import { default as Ie } from "./s-select-list/s-select-list.js";
|
|
39
|
+
import { default as he } from "./s-skeleton/s-skeleton.js";
|
|
40
|
+
import { default as Be } from "./s-tip/s-tip.js";
|
|
41
|
+
import { default as Fe } from "./s-text-truncation/s-text-truncation.js";
|
|
42
|
+
import { default as Ee, SnackbarMessageProvider as ze, useSnackbarMessage as Re } from "./s-snackbar-message/s-snackbar-message.js";
|
|
43
|
+
import { default as Ne } from "./s-form/s-form.js";
|
|
44
|
+
import { SStripeCVC as je, SStripeExpiry as Ve, SStripeNumber as Ze, StripeTextField as qe } from "./s-stripe/s-stripe.js";
|
|
45
|
+
import { default as Je } from "./s-theme-provider/s-theme-provider.js";
|
|
46
|
+
import { default as Qe } from "./s-theme-switch/s-theme-switch.js";
|
|
47
|
+
import { default as We } from "./s-datetime-picker/s-datetime-picker.js";
|
|
48
|
+
import { default as Ye } from "./s-date-picker/s-date-picker.js";
|
|
49
|
+
import { default as $e } from "./s-localization-provider/s-localization-provider.js";
|
|
50
|
+
import { default as oo } from "./s-gradient-icon/s-gradient-icon.js";
|
|
51
|
+
import { default as ao } from "./s-glow-button/s-glow-button.js";
|
|
52
|
+
import { default as fo } from "./s-moving-border/s-moving-border.js";
|
|
53
|
+
import { default as so } from "./s-scroll-reveal/s-scroll-reveal.js";
|
|
54
|
+
import { default as po } from "./s-spotlight-cursor/s-spotlight-cursor.js";
|
|
55
|
+
import { default as So } from "./s-copyable-text/s-copyable-text.js";
|
|
56
|
+
import { MediaItem as io, default as no } from "./s-gallery/s-gallery.js";
|
|
57
|
+
import { default as co } from "./s-image-modal/s-image-modal.js";
|
|
58
|
+
import { default as Co } from "./s-lazy-image/s-lazy-image.js";
|
|
59
|
+
import { default as vo } from "./s-image-comparison/s-image-comparison.js";
|
|
60
|
+
import { default as Lo } from "./s-zoom-image/s-zoom-image.js";
|
|
61
|
+
import { default as Do } from "./s-item-not-found/s-item-not-found.js";
|
|
62
|
+
import { default as Mo } from "./s-category-card/s-category-card.js";
|
|
63
|
+
import { default as ko } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
|
|
64
|
+
import { default as Ao } from "./s-rating/s-rating.js";
|
|
65
|
+
import { default as wo } from "./s-review/s-review.js";
|
|
66
|
+
import { default as zo } from "./s-tabs/s-tabs.js";
|
|
67
|
+
import { default as Go } from "./s-tabs/s-tab.js";
|
|
68
|
+
import { default as Oo } from "./s-tabs/s-tab-panel.js";
|
|
69
|
+
import { default as Vo } from "./s-text-shimmer/s-text-shimmer.js";
|
|
70
|
+
import { default as qo } from "./s-typewriter-text/s-typewriter-text.js";
|
|
71
|
+
import { SLanguagePopover as Jo, default as Ko, defaultLanguageOptions as Qo } from "./s-language-switcher/s-language-switcher.js";
|
|
72
|
+
import { default as Wo } from "./s-scroll-to-top/s-scroll-to-top.js";
|
|
73
|
+
import { useDialog as Yo } from "./hooks/use-dialog.js";
|
|
74
|
+
import { usePopover as $o } from "./hooks/use-popover.js";
|
|
74
75
|
import "react";
|
|
75
|
-
import { useScrollAnimation as
|
|
76
|
-
import { useIsPassedPosition as
|
|
77
|
-
import { formatDatePosted as
|
|
78
|
-
import { bytesToSize as
|
|
79
|
-
import { LogLevel as
|
|
80
|
-
import { default as
|
|
76
|
+
import { useScrollAnimation as or } from "./hooks/use-scroll-animation.js";
|
|
77
|
+
import { useIsPassedPosition as ar } from "./hooks/use-is-passed-position.js";
|
|
78
|
+
import { formatDatePosted as fr } from "./utils/dayjs.js";
|
|
79
|
+
import { bytesToSize as sr } from "./utils/bytes-to-size.js";
|
|
80
|
+
import { LogLevel as pr, Logger as ur, createLogger as Sr, logger as dr } from "./utils/logger.js";
|
|
81
|
+
import { default as ir } from "dayjs";
|
|
81
82
|
export {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
N as DialogConfirmProvider,
|
|
84
|
+
Z as DialogMessageProvider,
|
|
85
|
+
pr as LogLevel,
|
|
86
|
+
ur as Logger,
|
|
87
|
+
io as MediaItem,
|
|
87
88
|
t as SAccordion,
|
|
88
89
|
l as SActionOverlay,
|
|
89
|
-
m as
|
|
90
|
-
u as
|
|
91
|
-
d as
|
|
92
|
-
i as
|
|
93
|
-
g as
|
|
94
|
-
T as
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
b as
|
|
98
|
-
|
|
99
|
-
B as
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
re as
|
|
113
|
-
te as
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
me as
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
ie as
|
|
132
|
-
ge as
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
ko as
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
ye as
|
|
141
|
-
Ie as
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
Go as
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
Je as
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
$o as
|
|
174
|
-
|
|
90
|
+
m as SAiToolBar,
|
|
91
|
+
u as SAutocomplete,
|
|
92
|
+
d as SAvatar,
|
|
93
|
+
i as SBreadcrumbs,
|
|
94
|
+
g as SButton,
|
|
95
|
+
T as SButtonLink,
|
|
96
|
+
P as SCarousel,
|
|
97
|
+
Mo as SCategoryCard,
|
|
98
|
+
b as SChatInput,
|
|
99
|
+
y as SChatMessage,
|
|
100
|
+
B as SCheckbox,
|
|
101
|
+
F as SChip,
|
|
102
|
+
E as SChips,
|
|
103
|
+
I as SCommentMessage,
|
|
104
|
+
So as SCopyableText,
|
|
105
|
+
R as SDataTable,
|
|
106
|
+
Ye as SDatePicker,
|
|
107
|
+
We as SDateTimePicker,
|
|
108
|
+
ee as SDialog,
|
|
109
|
+
O as SDialogConfirm,
|
|
110
|
+
q as SDialogMessage,
|
|
111
|
+
U as SEmpty,
|
|
112
|
+
K as SError,
|
|
113
|
+
re as SErrorLayout,
|
|
114
|
+
te as SFileDropzone,
|
|
115
|
+
le as SFileIcon,
|
|
116
|
+
X as SFlexBox,
|
|
117
|
+
Ne as SForm,
|
|
118
|
+
no as SGallery,
|
|
119
|
+
ao as SGlowButton,
|
|
120
|
+
oo as SGradientIcon,
|
|
121
|
+
me as SI18nProvider,
|
|
122
|
+
ue as SIconButton,
|
|
123
|
+
vo as SImageComparison,
|
|
124
|
+
co as SImageModal,
|
|
125
|
+
Do as SItemNotFound,
|
|
126
|
+
de as SLabel,
|
|
127
|
+
Jo as SLanguagePopover,
|
|
128
|
+
Ko as SLanguageSwitcher,
|
|
129
|
+
Co as SLazyImage,
|
|
130
|
+
$e as SLocalizationProvider,
|
|
131
|
+
fo as SMovingBorder,
|
|
132
|
+
ie as SMultiSelect,
|
|
133
|
+
ge as SNoSsr,
|
|
134
|
+
Te as SOverlayScrollbar,
|
|
135
|
+
be as SPagination,
|
|
136
|
+
ko as SRadialPulseAnimate,
|
|
137
|
+
Ao as SRating,
|
|
138
|
+
wo as SReview,
|
|
139
|
+
so as SScrollReveal,
|
|
140
|
+
Wo as SScrollToTop,
|
|
141
|
+
ye as SSelect,
|
|
142
|
+
Ie as SSelectList,
|
|
143
|
+
he as SSkeleton,
|
|
144
|
+
Ee as SSnackbarMessage,
|
|
145
|
+
po as SSpotlightCursor,
|
|
146
|
+
je as SStripeCVC,
|
|
147
|
+
Ve as SStripeExpiry,
|
|
148
|
+
Ze as SStripeNumber,
|
|
149
|
+
Go as STab,
|
|
150
|
+
Oo as STabPanel,
|
|
151
|
+
zo as STabs,
|
|
152
|
+
h as STextEditor,
|
|
153
|
+
Pe as STextField,
|
|
154
|
+
Vo as STextShimmer,
|
|
155
|
+
Fe as STextTruncation,
|
|
156
|
+
Je as SThemeProvider,
|
|
157
|
+
Qe as SThemeSwitch,
|
|
158
|
+
Be as STip,
|
|
159
|
+
_ as STwoPaneLayout,
|
|
160
|
+
qo as STypewriterText,
|
|
161
|
+
Lo as SZoomImage,
|
|
162
|
+
ze as SnackbarMessageProvider,
|
|
163
|
+
qe as StripeTextField,
|
|
164
|
+
sr as bytesToSize,
|
|
165
|
+
Sr as createLogger,
|
|
166
|
+
ir as dayjs,
|
|
167
|
+
Qo as defaultLanguageOptions,
|
|
168
|
+
fr as formatDatePosted,
|
|
169
|
+
dr as logger,
|
|
170
|
+
Yo as useDialog,
|
|
171
|
+
j as useDialogConfirm,
|
|
172
|
+
H as useDialogMessage,
|
|
173
|
+
ar as useIsPassedPosition,
|
|
174
|
+
$o as usePopover,
|
|
175
|
+
or as useScrollAnimation,
|
|
176
|
+
Re as useSnackbarMessage
|
|
175
177
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
{
|
|
2
|
-
"main": "./index.js",
|
|
3
|
-
"types": "./index.d.ts",
|
|
4
|
-
"sideEffects": false
|
|
5
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"main": "./index.js",
|
|
3
|
+
"types": "./index.d.ts",
|
|
4
|
+
"sideEffects": false
|
|
5
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
{
|
|
2
|
-
"main": "./index.js",
|
|
3
|
-
"types": "./index.d.ts",
|
|
4
|
-
"sideEffects": false
|
|
5
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"main": "./index.js",
|
|
3
|
+
"types": "./index.d.ts",
|
|
4
|
+
"sideEffects": false
|
|
5
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Configuration for individual toolbar input fields
|
|
4
|
+
*/
|
|
5
|
+
export interface SAiToolBarInput {
|
|
6
|
+
/** Unique identifier for the input */
|
|
7
|
+
key: string;
|
|
8
|
+
/** Display label for the input */
|
|
9
|
+
label: string;
|
|
10
|
+
/** Input type */
|
|
11
|
+
type: 'textarea' | 'slider' | 'image' | 'number';
|
|
12
|
+
/** Whether the input is required */
|
|
13
|
+
required?: boolean;
|
|
14
|
+
/** Default value for the input */
|
|
15
|
+
defaultValue?: any;
|
|
16
|
+
/** Placeholder text (for textarea/number inputs) */
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
/** Minimum value (for slider/number inputs) */
|
|
19
|
+
min?: number;
|
|
20
|
+
/** Maximum value (for slider/number inputs) */
|
|
21
|
+
max?: number;
|
|
22
|
+
/** Step value (for slider/number inputs) */
|
|
23
|
+
step?: number;
|
|
24
|
+
/** Minimum rows for textarea */
|
|
25
|
+
minRows?: number;
|
|
26
|
+
/** Maximum rows for textarea */
|
|
27
|
+
maxRows?: number;
|
|
28
|
+
/** Allow multiple images (for image inputs) */
|
|
29
|
+
multiple?: boolean;
|
|
30
|
+
/** Maximum number of images (for image inputs with multiple=true) */
|
|
31
|
+
maxImages?: number;
|
|
32
|
+
/** Custom renderer for the input */
|
|
33
|
+
renderInput?: (props: {
|
|
34
|
+
value: any;
|
|
35
|
+
onChange: (value: any) => void;
|
|
36
|
+
isExpanded: boolean;
|
|
37
|
+
onFocus: () => void;
|
|
38
|
+
onBlur: () => void;
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
}) => React.ReactNode;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Props interface for SAiToolBar component
|
|
44
|
+
*/
|
|
45
|
+
export interface SAiToolBarProps {
|
|
46
|
+
/** Configuration for input fields */
|
|
47
|
+
inputs?: SAiToolBarInput[];
|
|
48
|
+
/** Callback when process button is clicked */
|
|
49
|
+
onProcess?: () => void;
|
|
50
|
+
/** Callback when reset button is clicked */
|
|
51
|
+
onReset?: () => void;
|
|
52
|
+
/** Callback when download button is clicked */
|
|
53
|
+
onDownload?: () => void;
|
|
54
|
+
/** Whether the toolbar is in processing state */
|
|
55
|
+
processing?: boolean;
|
|
56
|
+
/** Whether the toolbar is in uploading state */
|
|
57
|
+
uploading?: boolean;
|
|
58
|
+
/** Input values controlled externally */
|
|
59
|
+
inputValues?: Record<string, any>;
|
|
60
|
+
/** Callback when input values change */
|
|
61
|
+
onInputChange?: (key: string, value: any, file?: File) => void;
|
|
62
|
+
/** Custom action buttons between inputs and standard actions */
|
|
63
|
+
customActionButtons?: React.ReactNode;
|
|
64
|
+
/** Hide the main process button */
|
|
65
|
+
hideProcessButton?: boolean;
|
|
66
|
+
/** Override to disable the process button */
|
|
67
|
+
processButtonDisabled?: boolean;
|
|
68
|
+
/** Function to check if an input should be disabled */
|
|
69
|
+
getInputDisabled?: (inputKey: string) => boolean;
|
|
70
|
+
/** Tooltip for process button */
|
|
71
|
+
processTooltip?: string;
|
|
72
|
+
/** Tooltip for download button */
|
|
73
|
+
downloadTooltip?: string;
|
|
74
|
+
/** Tooltip for reset button */
|
|
75
|
+
resetTooltip?: string;
|
|
76
|
+
/** Tooltip for info button */
|
|
77
|
+
infoTooltip?: string;
|
|
78
|
+
/** Info dialog title */
|
|
79
|
+
infoTitle?: string;
|
|
80
|
+
/** Info dialog content */
|
|
81
|
+
infoContent?: React.ReactNode;
|
|
82
|
+
/** Position of the toolbar */
|
|
83
|
+
position?: 'bottom' | 'top';
|
|
84
|
+
/** Use relative positioning within container instead of fixed viewport positioning */
|
|
85
|
+
relative?: boolean;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* SAiToolBar - A dynamic floating toolbar for AI tools with expandable inputs and action buttons.
|
|
89
|
+
*
|
|
90
|
+
* Key features:
|
|
91
|
+
* - Dynamic width calculation based on inputs and expanded state
|
|
92
|
+
* - Smooth expand/collapse animations on hover and focus
|
|
93
|
+
* - Support for multiple input types (text, number, slider, custom)
|
|
94
|
+
* - Portal rendering for proper z-index handling
|
|
95
|
+
* - Configurable action buttons
|
|
96
|
+
* - Built-in validation for required inputs
|
|
97
|
+
* - Info dialog integration
|
|
98
|
+
* - Responsive to processing and uploading states
|
|
99
|
+
*
|
|
100
|
+
* @param props - SAiToolBarProps for toolbar configuration
|
|
101
|
+
* @returns JSX.Element - Floating toolbar with inputs and action buttons
|
|
102
|
+
*/
|
|
103
|
+
declare const SAiToolBar: ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, }: SAiToolBarProps) => React.JSX.Element;
|
|
104
|
+
export default SAiToolBar;
|