@solostylist/ui-kit 1.0.165 → 1.0.167
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 +4 -0
- package/dist/main.js +171 -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 +114 -0
- package/dist/s-ai-tool-bar/s-ai-tool-bar.js +513 -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-pixel-reveal/index.d.ts +2 -0
- package/dist/s-pixel-reveal/index.js +4 -0
- package/dist/s-pixel-reveal/package.json +5 -0
- package/dist/s-pixel-reveal/s-pixel-reveal.d.ts +13 -0
- package/dist/s-pixel-reveal/s-pixel-reveal.js +151 -0
- 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 +1436 -1436
- package/dist/theme/components/button.d.ts +2150 -2150
- 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';
|
|
@@ -96,6 +98,8 @@ export { default as SGlowButton } from './s-glow-button/index';
|
|
|
96
98
|
export type { SGlowButtonProps } from './s-glow-button/index';
|
|
97
99
|
export { default as SMovingBorder } from './s-moving-border/index';
|
|
98
100
|
export type { SMovingBorderProps } from './s-moving-border/index';
|
|
101
|
+
export { default as SPixelReveal } from './s-pixel-reveal/index';
|
|
102
|
+
export type { SPixelRevealProps } from './s-pixel-reveal/index';
|
|
99
103
|
export { default as SScrollReveal } from './s-scroll-reveal/index';
|
|
100
104
|
export type { SScrollRevealProps } from './s-scroll-reveal/index';
|
|
101
105
|
export { default as SSpotlightCursor } from './s-spotlight-cursor/index';
|
package/dist/main.js
CHANGED
|
@@ -1,175 +1,179 @@
|
|
|
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
|
|
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 C } 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 {
|
|
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 {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
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 z } 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 Ce } 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 Re, useSnackbarMessage as ze } 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-pixel-reveal/s-pixel-reveal.js";
|
|
54
|
+
import { default as po } from "./s-scroll-reveal/s-scroll-reveal.js";
|
|
55
|
+
import { default as So } from "./s-spotlight-cursor/s-spotlight-cursor.js";
|
|
56
|
+
import { default as io } from "./s-copyable-text/s-copyable-text.js";
|
|
57
|
+
import { MediaItem as go, default as co } from "./s-gallery/s-gallery.js";
|
|
58
|
+
import { default as Po } from "./s-image-modal/s-image-modal.js";
|
|
59
|
+
import { default as vo } from "./s-lazy-image/s-lazy-image.js";
|
|
60
|
+
import { default as Lo } from "./s-image-comparison/s-image-comparison.js";
|
|
61
|
+
import { default as Do } from "./s-zoom-image/s-zoom-image.js";
|
|
62
|
+
import { default as Mo } from "./s-item-not-found/s-item-not-found.js";
|
|
63
|
+
import { default as ko } from "./s-category-card/s-category-card.js";
|
|
64
|
+
import { default as Ao } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
|
|
65
|
+
import { default as wo } from "./s-rating/s-rating.js";
|
|
66
|
+
import { default as Ro } from "./s-review/s-review.js";
|
|
67
|
+
import { default as Go } from "./s-tabs/s-tabs.js";
|
|
68
|
+
import { default as Oo } from "./s-tabs/s-tab.js";
|
|
69
|
+
import { default as Vo } from "./s-tabs/s-tab-panel.js";
|
|
70
|
+
import { default as qo } from "./s-text-shimmer/s-text-shimmer.js";
|
|
71
|
+
import { default as Jo } from "./s-typewriter-text/s-typewriter-text.js";
|
|
72
|
+
import { SLanguagePopover as Qo, default as Uo, defaultLanguageOptions as Wo } from "./s-language-switcher/s-language-switcher.js";
|
|
73
|
+
import { default as Yo } from "./s-scroll-to-top/s-scroll-to-top.js";
|
|
74
|
+
import { useDialog as $o } from "./hooks/use-dialog.js";
|
|
75
|
+
import { usePopover as or } from "./hooks/use-popover.js";
|
|
74
76
|
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
|
|
77
|
+
import { useScrollAnimation as ar } from "./hooks/use-scroll-animation.js";
|
|
78
|
+
import { useIsPassedPosition as fr } from "./hooks/use-is-passed-position.js";
|
|
79
|
+
import { formatDatePosted as sr } from "./utils/dayjs.js";
|
|
80
|
+
import { bytesToSize as pr } from "./utils/bytes-to-size.js";
|
|
81
|
+
import { LogLevel as Sr, Logger as dr, createLogger as xr, logger as ir } from "./utils/logger.js";
|
|
82
|
+
import { default as gr } from "dayjs";
|
|
81
83
|
export {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
N as DialogConfirmProvider,
|
|
85
|
+
Z as DialogMessageProvider,
|
|
86
|
+
Sr as LogLevel,
|
|
87
|
+
dr as Logger,
|
|
88
|
+
go as MediaItem,
|
|
87
89
|
t as SAccordion,
|
|
88
90
|
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
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
je as
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
91
|
+
m as SAiToolBar,
|
|
92
|
+
u as SAutocomplete,
|
|
93
|
+
d as SAvatar,
|
|
94
|
+
i as SBreadcrumbs,
|
|
95
|
+
g as SButton,
|
|
96
|
+
T as SButtonLink,
|
|
97
|
+
C as SCarousel,
|
|
98
|
+
ko as SCategoryCard,
|
|
99
|
+
b as SChatInput,
|
|
100
|
+
y as SChatMessage,
|
|
101
|
+
B as SCheckbox,
|
|
102
|
+
F as SChip,
|
|
103
|
+
E as SChips,
|
|
104
|
+
I as SCommentMessage,
|
|
105
|
+
io as SCopyableText,
|
|
106
|
+
z as SDataTable,
|
|
107
|
+
Ye as SDatePicker,
|
|
108
|
+
We as SDateTimePicker,
|
|
109
|
+
ee as SDialog,
|
|
110
|
+
O as SDialogConfirm,
|
|
111
|
+
q as SDialogMessage,
|
|
112
|
+
U as SEmpty,
|
|
113
|
+
K as SError,
|
|
114
|
+
re as SErrorLayout,
|
|
115
|
+
te as SFileDropzone,
|
|
116
|
+
le as SFileIcon,
|
|
117
|
+
X as SFlexBox,
|
|
118
|
+
Ne as SForm,
|
|
119
|
+
co as SGallery,
|
|
120
|
+
ao as SGlowButton,
|
|
121
|
+
oo as SGradientIcon,
|
|
122
|
+
me as SI18nProvider,
|
|
123
|
+
ue as SIconButton,
|
|
124
|
+
Lo as SImageComparison,
|
|
125
|
+
Po as SImageModal,
|
|
126
|
+
Mo as SItemNotFound,
|
|
127
|
+
de as SLabel,
|
|
128
|
+
Qo as SLanguagePopover,
|
|
129
|
+
Uo as SLanguageSwitcher,
|
|
130
|
+
vo as SLazyImage,
|
|
131
|
+
$e as SLocalizationProvider,
|
|
132
|
+
fo as SMovingBorder,
|
|
133
|
+
ie as SMultiSelect,
|
|
134
|
+
ge as SNoSsr,
|
|
135
|
+
Te as SOverlayScrollbar,
|
|
136
|
+
be as SPagination,
|
|
137
|
+
so as SPixelReveal,
|
|
138
|
+
Ao as SRadialPulseAnimate,
|
|
139
|
+
wo as SRating,
|
|
140
|
+
Ro as SReview,
|
|
141
|
+
po as SScrollReveal,
|
|
142
|
+
Yo as SScrollToTop,
|
|
143
|
+
ye as SSelect,
|
|
144
|
+
Ie as SSelectList,
|
|
145
|
+
he as SSkeleton,
|
|
146
|
+
Ee as SSnackbarMessage,
|
|
147
|
+
So as SSpotlightCursor,
|
|
148
|
+
je as SStripeCVC,
|
|
149
|
+
Ve as SStripeExpiry,
|
|
150
|
+
Ze as SStripeNumber,
|
|
151
|
+
Oo as STab,
|
|
152
|
+
Vo as STabPanel,
|
|
153
|
+
Go as STabs,
|
|
154
|
+
h as STextEditor,
|
|
155
|
+
Ce as STextField,
|
|
156
|
+
qo as STextShimmer,
|
|
157
|
+
Fe as STextTruncation,
|
|
158
|
+
Je as SThemeProvider,
|
|
159
|
+
Qe as SThemeSwitch,
|
|
160
|
+
Be as STip,
|
|
161
|
+
_ as STwoPaneLayout,
|
|
162
|
+
Jo as STypewriterText,
|
|
163
|
+
Do as SZoomImage,
|
|
164
|
+
Re as SnackbarMessageProvider,
|
|
165
|
+
qe as StripeTextField,
|
|
166
|
+
pr as bytesToSize,
|
|
167
|
+
xr as createLogger,
|
|
168
|
+
gr as dayjs,
|
|
169
|
+
Wo as defaultLanguageOptions,
|
|
170
|
+
sr as formatDatePosted,
|
|
171
|
+
ir as logger,
|
|
172
|
+
$o as useDialog,
|
|
173
|
+
j as useDialogConfirm,
|
|
174
|
+
H as useDialogMessage,
|
|
175
|
+
fr as useIsPassedPosition,
|
|
176
|
+
or as usePopover,
|
|
177
|
+
ar as useScrollAnimation,
|
|
178
|
+
ze as useSnackbarMessage
|
|
175
179
|
};
|
|
@@ -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,114 @@
|
|
|
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' | 'select';
|
|
12
|
+
/** Whether the input is required */
|
|
13
|
+
required?: boolean;
|
|
14
|
+
/** Default value for the input */
|
|
15
|
+
defaultValue?: any;
|
|
16
|
+
/** Placeholder text (for textarea/number/select 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
|
+
/** Select options (for select inputs) */
|
|
33
|
+
options?: any[];
|
|
34
|
+
/** Key to extract label from option objects (for select inputs) */
|
|
35
|
+
optionLabel?: string;
|
|
36
|
+
/** Key to extract value from option objects (for select inputs) */
|
|
37
|
+
optionValue?: string;
|
|
38
|
+
/** Enable search functionality in select dropdown */
|
|
39
|
+
searchable?: boolean;
|
|
40
|
+
/** Placeholder for search input in select dropdown */
|
|
41
|
+
searchPlaceholder?: string;
|
|
42
|
+
/** Custom renderer for the input */
|
|
43
|
+
renderInput?: (props: {
|
|
44
|
+
value: any;
|
|
45
|
+
onChange: (value: any) => void;
|
|
46
|
+
isExpanded: boolean;
|
|
47
|
+
onFocus: () => void;
|
|
48
|
+
onBlur: () => void;
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
}) => React.ReactNode;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Props interface for SAiToolBar component
|
|
54
|
+
*/
|
|
55
|
+
export interface SAiToolBarProps {
|
|
56
|
+
/** Configuration for input fields */
|
|
57
|
+
inputs?: SAiToolBarInput[];
|
|
58
|
+
/** Callback when process button is clicked */
|
|
59
|
+
onProcess?: () => void;
|
|
60
|
+
/** Callback when reset button is clicked */
|
|
61
|
+
onReset?: () => void;
|
|
62
|
+
/** Callback when download button is clicked */
|
|
63
|
+
onDownload?: () => void;
|
|
64
|
+
/** Whether the toolbar is in processing state */
|
|
65
|
+
processing?: boolean;
|
|
66
|
+
/** Whether the toolbar is in uploading state */
|
|
67
|
+
uploading?: boolean;
|
|
68
|
+
/** Input values controlled externally */
|
|
69
|
+
inputValues?: Record<string, any>;
|
|
70
|
+
/** Callback when input values change */
|
|
71
|
+
onInputChange?: (key: string, value: any, file?: File) => void;
|
|
72
|
+
/** Custom action buttons between inputs and standard actions */
|
|
73
|
+
customActionButtons?: React.ReactNode;
|
|
74
|
+
/** Hide the main process button */
|
|
75
|
+
hideProcessButton?: boolean;
|
|
76
|
+
/** Override to disable the process button */
|
|
77
|
+
processButtonDisabled?: boolean;
|
|
78
|
+
/** Function to check if an input should be disabled */
|
|
79
|
+
getInputDisabled?: (inputKey: string) => boolean;
|
|
80
|
+
/** Tooltip for process button */
|
|
81
|
+
processTooltip?: string;
|
|
82
|
+
/** Tooltip for download button */
|
|
83
|
+
downloadTooltip?: string;
|
|
84
|
+
/** Tooltip for reset button */
|
|
85
|
+
resetTooltip?: string;
|
|
86
|
+
/** Tooltip for info button */
|
|
87
|
+
infoTooltip?: string;
|
|
88
|
+
/** Info dialog title */
|
|
89
|
+
infoTitle?: string;
|
|
90
|
+
/** Info dialog content */
|
|
91
|
+
infoContent?: React.ReactNode;
|
|
92
|
+
/** Position of the toolbar */
|
|
93
|
+
position?: 'bottom' | 'top';
|
|
94
|
+
/** Use relative positioning within container instead of fixed viewport positioning */
|
|
95
|
+
relative?: boolean;
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* SAiToolBar - A dynamic floating toolbar for AI tools with expandable inputs and action buttons.
|
|
99
|
+
*
|
|
100
|
+
* Key features:
|
|
101
|
+
* - Dynamic width calculation based on inputs and expanded state
|
|
102
|
+
* - Smooth expand/collapse animations on hover and focus
|
|
103
|
+
* - Support for multiple input types (text, number, slider, custom)
|
|
104
|
+
* - Portal rendering for proper z-index handling
|
|
105
|
+
* - Configurable action buttons
|
|
106
|
+
* - Built-in validation for required inputs
|
|
107
|
+
* - Info dialog integration
|
|
108
|
+
* - Responsive to processing and uploading states
|
|
109
|
+
*
|
|
110
|
+
* @param props - SAiToolBarProps for toolbar configuration
|
|
111
|
+
* @returns JSX.Element - Floating toolbar with inputs and action buttons
|
|
112
|
+
*/
|
|
113
|
+
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;
|
|
114
|
+
export default SAiToolBar;
|