@altimateai/ui-components 0.0.57 → 0.0.58-beta.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/dist/CoachForm.js +975 -973
- package/dist/Stack.js +700 -634
- package/dist/TagsInput.js +3307 -2696
- package/dist/chatbotV2/index.d.ts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/lineage/index.js +273 -273
- package/dist/main.js +145 -145
- package/dist/redux-toolkit.modern.js +1 -1
- package/dist/shadcn/index.d.ts +15 -2
- package/dist/shadcn/index.js +344 -338
- package/dist/storybook/InputGroup.stories.tsx +352 -0
- package/dist/{types-Bg8l4_6q.d.ts → types-Bm5uFaKK.d.ts} +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,352 @@
|
|
|
1
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
+
import {
|
|
3
|
+
InputGroup,
|
|
4
|
+
InputGroupAddon,
|
|
5
|
+
InputGroupButton,
|
|
6
|
+
InputGroupText,
|
|
7
|
+
InputGroupInput,
|
|
8
|
+
InputGroupTextarea,
|
|
9
|
+
} from "../shadcn";
|
|
10
|
+
import {
|
|
11
|
+
IconSearch,
|
|
12
|
+
IconMail,
|
|
13
|
+
IconUser,
|
|
14
|
+
IconCreditCard,
|
|
15
|
+
IconCopy,
|
|
16
|
+
IconX,
|
|
17
|
+
IconGlobe,
|
|
18
|
+
IconLoader2,
|
|
19
|
+
IconCornerDownLeft,
|
|
20
|
+
IconBrandJavascript,
|
|
21
|
+
IconRefresh,
|
|
22
|
+
IconInfoCircle,
|
|
23
|
+
IconPlus,
|
|
24
|
+
IconCheck,
|
|
25
|
+
IconArrowUp,
|
|
26
|
+
} from "@tabler/icons-react";
|
|
27
|
+
import { Tooltip } from "../shadcn";
|
|
28
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../shadcn";
|
|
29
|
+
import { Separator } from "../shadcn";
|
|
30
|
+
|
|
31
|
+
export default {
|
|
32
|
+
title: "Shadcn/Components/InputGroup",
|
|
33
|
+
component: InputGroup,
|
|
34
|
+
parameters: {
|
|
35
|
+
layout: "centered",
|
|
36
|
+
},
|
|
37
|
+
argTypes: {
|
|
38
|
+
className: {
|
|
39
|
+
control: "text",
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
} as Meta<typeof InputGroup>;
|
|
43
|
+
|
|
44
|
+
export const Default: StoryFn = () => (
|
|
45
|
+
<div className="al-grid al-w-full al-max-w-sm al-gap-6">
|
|
46
|
+
<InputGroup>
|
|
47
|
+
<InputGroupInput placeholder="Search..." />
|
|
48
|
+
<InputGroupAddon>
|
|
49
|
+
<IconSearch />
|
|
50
|
+
</InputGroupAddon>
|
|
51
|
+
<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
|
|
52
|
+
</InputGroup>
|
|
53
|
+
<InputGroup>
|
|
54
|
+
<InputGroupInput placeholder="example.com" className="!al-pl-1" />
|
|
55
|
+
<InputGroupAddon>
|
|
56
|
+
<InputGroupText>https://</InputGroupText>
|
|
57
|
+
</InputGroupAddon>
|
|
58
|
+
<InputGroupAddon align="inline-end">
|
|
59
|
+
<Tooltip title="This is content in a tooltip.">
|
|
60
|
+
<InputGroupButton className="!al-rounded-full" size="icon">
|
|
61
|
+
<IconInfoCircle />
|
|
62
|
+
</InputGroupButton>
|
|
63
|
+
</Tooltip>
|
|
64
|
+
</InputGroupAddon>
|
|
65
|
+
</InputGroup>
|
|
66
|
+
<InputGroup>
|
|
67
|
+
<InputGroupInput placeholder="Card number" />
|
|
68
|
+
<InputGroupAddon>
|
|
69
|
+
<IconCreditCard />
|
|
70
|
+
</InputGroupAddon>
|
|
71
|
+
<InputGroupAddon align="inline-end">
|
|
72
|
+
<IconCheck />
|
|
73
|
+
</InputGroupAddon>
|
|
74
|
+
</InputGroup>
|
|
75
|
+
<InputGroup>
|
|
76
|
+
<InputGroupTextarea placeholder="Ask, Search or Chat..." />
|
|
77
|
+
<InputGroupAddon align="block-end">
|
|
78
|
+
<InputGroupButton variant="outline" className="!al-rounded-full" size="icon">
|
|
79
|
+
<IconPlus />
|
|
80
|
+
</InputGroupButton>
|
|
81
|
+
<DropdownMenu>
|
|
82
|
+
<DropdownMenuTrigger asChild>
|
|
83
|
+
<InputGroupButton variant="ghost">Auto</InputGroupButton>
|
|
84
|
+
</DropdownMenuTrigger>
|
|
85
|
+
<DropdownMenuContent side="top" align="start" className="[--radius:0.95rem]">
|
|
86
|
+
<DropdownMenuItem>Auto</DropdownMenuItem>
|
|
87
|
+
<DropdownMenuItem>Agent</DropdownMenuItem>
|
|
88
|
+
<DropdownMenuItem>Manual</DropdownMenuItem>
|
|
89
|
+
</DropdownMenuContent>
|
|
90
|
+
</DropdownMenu>
|
|
91
|
+
<InputGroupText className="al-ml-auto">52% used</InputGroupText>
|
|
92
|
+
<Separator orientation="vertical" className="!al-h-4" />
|
|
93
|
+
<InputGroupButton variant="default" className="!al-rounded-full" size="icon" disabled>
|
|
94
|
+
<IconArrowUp />
|
|
95
|
+
<span className="al-sr-only">Send</span>
|
|
96
|
+
</InputGroupButton>
|
|
97
|
+
</InputGroupAddon>
|
|
98
|
+
</InputGroup>
|
|
99
|
+
<InputGroup>
|
|
100
|
+
<InputGroupInput placeholder="@shadcn" />
|
|
101
|
+
<InputGroupAddon align="inline-end">
|
|
102
|
+
<div className="al-bg-primary al-text-primary-foreground al-flex al-size-4 al-items-center al-justify-center al-rounded-full">
|
|
103
|
+
<IconCheck className="al-size-3" />
|
|
104
|
+
</div>
|
|
105
|
+
</InputGroupAddon>
|
|
106
|
+
</InputGroup>
|
|
107
|
+
</div>
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
// Alignment Variations
|
|
111
|
+
export const AlignmentVariations: StoryFn = () => (
|
|
112
|
+
<div className="al-w-96 al-space-y-6">
|
|
113
|
+
<div>
|
|
114
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Inline Start</label>
|
|
115
|
+
<InputGroup>
|
|
116
|
+
<InputGroupAddon align="inline-start">
|
|
117
|
+
<IconSearch className="al-size-4" />
|
|
118
|
+
</InputGroupAddon>
|
|
119
|
+
<InputGroupInput placeholder="Search..." />
|
|
120
|
+
</InputGroup>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div>
|
|
124
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Inline End</label>
|
|
125
|
+
<InputGroup>
|
|
126
|
+
<InputGroupInput placeholder="Search..." />
|
|
127
|
+
<InputGroupAddon align="inline-end">
|
|
128
|
+
<IconSearch className="al-size-4" />
|
|
129
|
+
</InputGroupAddon>
|
|
130
|
+
</InputGroup>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div>
|
|
134
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Block Start</label>
|
|
135
|
+
<InputGroup>
|
|
136
|
+
<InputGroupAddon align="block-start">
|
|
137
|
+
<IconUser className="al-size-4" />
|
|
138
|
+
<InputGroupText>Profile Information</InputGroupText>
|
|
139
|
+
</InputGroupAddon>
|
|
140
|
+
<InputGroupInput placeholder="Enter your name" />
|
|
141
|
+
</InputGroup>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div>
|
|
145
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Block End</label>
|
|
146
|
+
<InputGroup>
|
|
147
|
+
<InputGroupInput placeholder="Enter description" />
|
|
148
|
+
<InputGroupAddon align="block-end">
|
|
149
|
+
<InputGroupText>Additional details</InputGroupText>
|
|
150
|
+
</InputGroupAddon>
|
|
151
|
+
</InputGroup>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
);
|
|
155
|
+
|
|
156
|
+
// Button Variations
|
|
157
|
+
export const ButtonVariations: StoryFn = () => (
|
|
158
|
+
<div className="al-w-96 al-space-y-4">
|
|
159
|
+
<InputGroup>
|
|
160
|
+
<InputGroupInput placeholder="Enter text to copy" defaultValue="https://example.com" />
|
|
161
|
+
<InputGroupAddon align="inline-end">
|
|
162
|
+
<InputGroupButton>
|
|
163
|
+
<IconCopy className="al-size-4" />
|
|
164
|
+
</InputGroupButton>
|
|
165
|
+
</InputGroupAddon>
|
|
166
|
+
</InputGroup>
|
|
167
|
+
|
|
168
|
+
<InputGroup>
|
|
169
|
+
<InputGroupAddon>
|
|
170
|
+
<IconSearch className="al-size-4" />
|
|
171
|
+
</InputGroupAddon>
|
|
172
|
+
<InputGroupInput placeholder="Search..." />
|
|
173
|
+
<InputGroupAddon align="inline-end">
|
|
174
|
+
<InputGroupButton variant="secondary" className="!al-border-none" size="xs">
|
|
175
|
+
Search
|
|
176
|
+
</InputGroupButton>
|
|
177
|
+
</InputGroupAddon>
|
|
178
|
+
</InputGroup>
|
|
179
|
+
</div>
|
|
180
|
+
);
|
|
181
|
+
|
|
182
|
+
// Text Variations
|
|
183
|
+
export const TextVariations: StoryFn = () => (
|
|
184
|
+
<div className="al-w-96 al-space-y-4">
|
|
185
|
+
<InputGroup>
|
|
186
|
+
<InputGroupAddon>
|
|
187
|
+
<InputGroupText>$</InputGroupText>
|
|
188
|
+
</InputGroupAddon>
|
|
189
|
+
<InputGroupInput type="number" placeholder="0.00" />
|
|
190
|
+
<InputGroupAddon align="inline-end">
|
|
191
|
+
<InputGroupText>USD</InputGroupText>
|
|
192
|
+
</InputGroupAddon>
|
|
193
|
+
</InputGroup>
|
|
194
|
+
|
|
195
|
+
<InputGroup>
|
|
196
|
+
<InputGroupAddon>
|
|
197
|
+
<InputGroupText>https://</InputGroupText>
|
|
198
|
+
</InputGroupAddon>
|
|
199
|
+
<InputGroupInput placeholder="example.com" />
|
|
200
|
+
<InputGroupAddon align="inline-end">
|
|
201
|
+
<InputGroupText>.com</InputGroupText>
|
|
202
|
+
</InputGroupAddon>
|
|
203
|
+
</InputGroup>
|
|
204
|
+
|
|
205
|
+
<InputGroup>
|
|
206
|
+
<InputGroupInput placeholder="Username" />
|
|
207
|
+
<InputGroupAddon align="inline-end">
|
|
208
|
+
<InputGroupText>@example.com</InputGroupText>
|
|
209
|
+
</InputGroupAddon>
|
|
210
|
+
</InputGroup>
|
|
211
|
+
|
|
212
|
+
<InputGroup>
|
|
213
|
+
<InputGroupAddon>
|
|
214
|
+
<InputGroupText>+1</InputGroupText>
|
|
215
|
+
</InputGroupAddon>
|
|
216
|
+
<InputGroupInput type="tel" placeholder="(555) 123-4567" />
|
|
217
|
+
</InputGroup>
|
|
218
|
+
</div>
|
|
219
|
+
);
|
|
220
|
+
|
|
221
|
+
// Complex Interactions
|
|
222
|
+
export const ComplexInteractions: StoryFn = () => (
|
|
223
|
+
<div className="al-w-96 al-space-y-4">
|
|
224
|
+
<InputGroup>
|
|
225
|
+
<InputGroupAddon>
|
|
226
|
+
<IconGlobe className="al-size-4" />
|
|
227
|
+
</InputGroupAddon>
|
|
228
|
+
<InputGroupInput placeholder="Enter website URL" />
|
|
229
|
+
<InputGroupAddon align="inline-end">
|
|
230
|
+
<InputGroupButton variant="outline" size="xs">
|
|
231
|
+
Validate
|
|
232
|
+
</InputGroupButton>
|
|
233
|
+
<InputGroupButton size="icon">
|
|
234
|
+
<IconCopy className="al-size-3" />
|
|
235
|
+
</InputGroupButton>
|
|
236
|
+
</InputGroupAddon>
|
|
237
|
+
</InputGroup>
|
|
238
|
+
|
|
239
|
+
<InputGroup>
|
|
240
|
+
<InputGroupAddon>
|
|
241
|
+
<InputGroupText>Search</InputGroupText>
|
|
242
|
+
<IconSearch className="al-size-4" />
|
|
243
|
+
</InputGroupAddon>
|
|
244
|
+
<InputGroupInput placeholder="Type to search..." />
|
|
245
|
+
<InputGroupAddon align="inline-end">
|
|
246
|
+
<InputGroupButton variant="ghost" size="icon">
|
|
247
|
+
<IconX className="al-size-3" />
|
|
248
|
+
</InputGroupButton>
|
|
249
|
+
<InputGroupText>⌘K</InputGroupText>
|
|
250
|
+
</InputGroupAddon>
|
|
251
|
+
</InputGroup>
|
|
252
|
+
|
|
253
|
+
<InputGroup>
|
|
254
|
+
<InputGroupAddon>
|
|
255
|
+
<InputGroupButton variant="ghost" size="xs">
|
|
256
|
+
<IconLoader2 className="al-size-4 al-animate-spin" />
|
|
257
|
+
</InputGroupButton>
|
|
258
|
+
</InputGroupAddon>
|
|
259
|
+
<InputGroupInput placeholder="Processing..." disabled />
|
|
260
|
+
</InputGroup>
|
|
261
|
+
</div>
|
|
262
|
+
);
|
|
263
|
+
|
|
264
|
+
// Textarea Variations
|
|
265
|
+
export const TextareaVariations: StoryFn = () => (
|
|
266
|
+
<div className="al-w-96 al-space-y-4">
|
|
267
|
+
<div className="al-grid al-w-full al-max-w-md al-gap-4">
|
|
268
|
+
<InputGroup>
|
|
269
|
+
<InputGroupTextarea
|
|
270
|
+
id="textarea-code-32"
|
|
271
|
+
placeholder="console.log('Hello, world!');"
|
|
272
|
+
className="al-min-h-[200px]"
|
|
273
|
+
/>
|
|
274
|
+
<InputGroupAddon align="block-end" className="al-border-t">
|
|
275
|
+
<InputGroupText>Line 1, Column 1</InputGroupText>
|
|
276
|
+
<InputGroupButton size="sm" className="al-ml-auto" variant="default">
|
|
277
|
+
Run <IconCornerDownLeft />
|
|
278
|
+
</InputGroupButton>
|
|
279
|
+
</InputGroupAddon>
|
|
280
|
+
<InputGroupAddon align="block-start" className="al-border-b">
|
|
281
|
+
<InputGroupText className="al-font-mono al-font-medium">
|
|
282
|
+
<IconBrandJavascript />
|
|
283
|
+
script.js
|
|
284
|
+
</InputGroupText>
|
|
285
|
+
<InputGroupButton className="al-ml-auto" size="icon">
|
|
286
|
+
<IconRefresh />
|
|
287
|
+
</InputGroupButton>
|
|
288
|
+
<InputGroupButton variant="ghost" size="icon">
|
|
289
|
+
<IconCopy />
|
|
290
|
+
</InputGroupButton>
|
|
291
|
+
</InputGroupAddon>
|
|
292
|
+
</InputGroup>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
);
|
|
296
|
+
|
|
297
|
+
// State Variations
|
|
298
|
+
export const StateVariations: StoryFn = () => (
|
|
299
|
+
<div className="al-w-96 al-space-y-4">
|
|
300
|
+
<div>
|
|
301
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Normal State</label>
|
|
302
|
+
<InputGroup>
|
|
303
|
+
<InputGroupAddon>
|
|
304
|
+
<IconMail className="al-size-4" />
|
|
305
|
+
</InputGroupAddon>
|
|
306
|
+
<InputGroupInput placeholder="Normal input" />
|
|
307
|
+
</InputGroup>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div>
|
|
311
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Disabled State</label>
|
|
312
|
+
<InputGroup data-disabled="true">
|
|
313
|
+
<InputGroupAddon>
|
|
314
|
+
<IconMail className="al-size-4" />
|
|
315
|
+
</InputGroupAddon>
|
|
316
|
+
<InputGroupInput placeholder="Disabled input" disabled />
|
|
317
|
+
<InputGroupAddon align="inline-end">
|
|
318
|
+
<InputGroupButton disabled>
|
|
319
|
+
<IconCopy className="al-size-4" />
|
|
320
|
+
</InputGroupButton>
|
|
321
|
+
</InputGroupAddon>
|
|
322
|
+
</InputGroup>
|
|
323
|
+
</div>
|
|
324
|
+
|
|
325
|
+
<div>
|
|
326
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Error State</label>
|
|
327
|
+
<InputGroup>
|
|
328
|
+
<InputGroupAddon>
|
|
329
|
+
<IconMail className="al-size-4" />
|
|
330
|
+
</InputGroupAddon>
|
|
331
|
+
<InputGroupInput
|
|
332
|
+
placeholder="Error input"
|
|
333
|
+
aria-invalid="true"
|
|
334
|
+
defaultValue="invalid-email"
|
|
335
|
+
/>
|
|
336
|
+
</InputGroup>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div>
|
|
340
|
+
<label className="al-text-sm al-font-medium al-block al-mb-2">Success State</label>
|
|
341
|
+
<InputGroup>
|
|
342
|
+
<InputGroupAddon>
|
|
343
|
+
<IconMail className="al-size-4" />
|
|
344
|
+
</InputGroupAddon>
|
|
345
|
+
<InputGroupInput placeholder="Success input" defaultValue="valid@example.com" />
|
|
346
|
+
<InputGroupAddon align="inline-end">
|
|
347
|
+
<InputGroupText className="al-text-green-600">✓</InputGroupText>
|
|
348
|
+
</InputGroupAddon>
|
|
349
|
+
</InputGroup>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
);
|