@shipfox/react-ui 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/components/index.d.ts +1 -0
  2. package/dist/components/index.js +1 -0
  3. package/dist/components/slider/index.d.ts +2 -0
  4. package/dist/components/slider/index.js +3 -0
  5. package/dist/components/slider/slider.d.ts +10 -0
  6. package/dist/components/slider/slider.js +38 -0
  7. package/dist/styles.css +1 -1
  8. package/package.json +4 -4
  9. package/dist/colors.stories.js +0 -61
  10. package/dist/components/alert/alert.stories.js +0 -227
  11. package/dist/components/avatar/avatar.stories.js +0 -267
  12. package/dist/components/badge/badge.stories.js +0 -802
  13. package/dist/components/button/button-link.stories.js +0 -127
  14. package/dist/components/button/button.stories.js +0 -187
  15. package/dist/components/button/icon-button.stories.js +0 -344
  16. package/dist/components/button-group/button-group.stories.js +0 -644
  17. package/dist/components/card/card.stories.js +0 -216
  18. package/dist/components/checkbox/checkbox.stories.js +0 -566
  19. package/dist/components/code-block/code-block.stories.js +0 -341
  20. package/dist/components/combobox/combobox.stories.js +0 -191
  21. package/dist/components/command/command.stories.js +0 -228
  22. package/dist/components/confetti/confetti.stories.js +0 -41
  23. package/dist/components/count-up/count-up.stories.js +0 -568
  24. package/dist/components/dashboard/components/charts/bar-chart.stories.js +0 -287
  25. package/dist/components/dashboard/components/charts/line-chart.stories.js +0 -257
  26. package/dist/components/dashboard/dashboard.stories.js +0 -23
  27. package/dist/components/date-picker/date-picker.stories.js +0 -349
  28. package/dist/components/dropdown-input/dropdown-input.stories.js +0 -240
  29. package/dist/components/dropdown-menu/dropdown-menu.stories.js +0 -462
  30. package/dist/components/dynamic-item/dynamic-item.stories.js +0 -385
  31. package/dist/components/empty-state/empty-state.stories.js +0 -74
  32. package/dist/components/form/form.stories.js +0 -587
  33. package/dist/components/icon/icon.stories.js +0 -38
  34. package/dist/components/inline-tips/inline-tips.stories.js +0 -219
  35. package/dist/components/input/input.stories.js +0 -265
  36. package/dist/components/interval-selector/interval-selector.stories.js +0 -232
  37. package/dist/components/item/item.stories.js +0 -239
  38. package/dist/components/kbd/kbd.stories.js +0 -119
  39. package/dist/components/label/label.stories.js +0 -105
  40. package/dist/components/modal/modal.stories.js +0 -566
  41. package/dist/components/search/search.stories.js +0 -630
  42. package/dist/components/select/select.stories.js +0 -393
  43. package/dist/components/sheet/sheet.stories.js +0 -368
  44. package/dist/components/skeleton/skeleton.stories.js +0 -345
  45. package/dist/components/table/table.stories.js +0 -302
  46. package/dist/components/tabs/tabs.stories.js +0 -179
  47. package/dist/components/textarea/textarea.stories.js +0 -339
  48. package/dist/components/toast/toast.stories.js +0 -326
  49. package/dist/components/tooltip/tooltip.stories.js +0 -560
  50. package/dist/components/typography/code.stories.js +0 -54
  51. package/dist/components/typography/header.stories.js +0 -34
  52. package/dist/components/typography/text.stories.js +0 -105
  53. package/dist/onboarding/sign-in.stories.js +0 -101
package/dist/components/button-group/button-group.stories.js DELETED
@@ -1,644 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { Button } from '../button/index.js';
4
- import { Icon } from '../icon/index.js';
5
- import { Input } from '../input/index.js';
6
- import { Popover, PopoverContent, PopoverTrigger } from '../popover/index.js';
7
- import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select/index.js';
8
- import { Textarea } from '../textarea/index.js';
9
- import { Code, Header } from '../typography/index.js';
10
- import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './button-group.js';
11
- const meta = {
12
- title: 'Components/ButtonGroup',
13
- component: ButtonGroup,
14
- tags: [
15
- 'autodocs'
16
- ],
17
- parameters: {
18
- docs: {
19
- description: {
20
- component: 'A container that groups related buttons together with consistent styling. Automatically styles Button, Input, Select, and Textarea children without requiring manual className overrides. Separators are recommended for visual hierarchy.'
21
- }
22
- }
23
- },
24
- argTypes: {
25
- orientation: {
26
- control: 'select',
27
- options: [
28
- 'horizontal',
29
- 'vertical'
30
- ],
31
- description: 'The orientation of the button group',
32
- defaultValue: 'horizontal'
33
- }
34
- }
35
- };
36
- export default meta;
37
- function SelectExample() {
38
- const [currency, setCurrency] = useState('$');
39
- return /*#__PURE__*/ _jsxs("div", {
40
- className: "inline-flex gap-8",
41
- children: [
42
- /*#__PURE__*/ _jsxs(ButtonGroup, {
43
- className: "w-280",
44
- "aria-label": "Currency converter",
45
- children: [
46
- /*#__PURE__*/ _jsxs(Select, {
47
- value: currency,
48
- onValueChange: setCurrency,
49
- children: [
50
- /*#__PURE__*/ _jsx(SelectTrigger, {
51
- className: "w-80 font-mono text-foreground-neutral-subtle",
52
- "aria-label": "Select currency",
53
- children: /*#__PURE__*/ _jsx(SelectValue, {})
54
- }),
55
- /*#__PURE__*/ _jsxs(SelectContent, {
56
- align: "start",
57
- children: [
58
- /*#__PURE__*/ _jsx(SelectItem, {
59
- value: "$",
60
- children: "$ USD"
61
- }),
62
- /*#__PURE__*/ _jsx(SelectItem, {
63
- value: "€",
64
- children: "€ EUR"
65
- }),
66
- /*#__PURE__*/ _jsx(SelectItem, {
67
- value: "£",
68
- children: "£ GBP"
69
- }),
70
- /*#__PURE__*/ _jsx(SelectItem, {
71
- value: "¥",
72
- children: "¥ JPY"
73
- })
74
- ]
75
- })
76
- ]
77
- }),
78
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
79
- /*#__PURE__*/ _jsx(Input, {
80
- placeholder: "10.00",
81
- pattern: "[0-9]*",
82
- "aria-label": "Amount"
83
- })
84
- ]
85
- }),
86
- /*#__PURE__*/ _jsx(ButtonGroup, {
87
- "aria-label": "Send action",
88
- children: /*#__PURE__*/ _jsx(Button, {
89
- variant: "secondary",
90
- "aria-label": "Send",
91
- children: /*#__PURE__*/ _jsx(Icon, {
92
- name: "arrowRightLine",
93
- className: "size-16 text-foreground-neutral-subtle"
94
- })
95
- })
96
- })
97
- ]
98
- });
99
- }
100
- function PopoverExample() {
101
- const [open, setOpen] = useState(false);
102
- return /*#__PURE__*/ _jsxs(ButtonGroup, {
103
- "aria-label": "Copilot actions",
104
- children: [
105
- /*#__PURE__*/ _jsxs(ButtonGroupText, {
106
- children: [
107
- /*#__PURE__*/ _jsx(Icon, {
108
- name: "sparklingLine",
109
- className: "size-16"
110
- }),
111
- "Copilot"
112
- ]
113
- }),
114
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
115
- /*#__PURE__*/ _jsxs(Popover, {
116
- open: open,
117
- onOpenChange: setOpen,
118
- children: [
119
- /*#__PURE__*/ _jsx(PopoverTrigger, {
120
- asChild: true,
121
- children: /*#__PURE__*/ _jsx(Button, {
122
- variant: "secondary",
123
- size: "sm",
124
- className: "!text-foreground-neutral-subtle",
125
- "aria-label": "Open Copilot options",
126
- children: /*#__PURE__*/ _jsx(Icon, {
127
- name: "arrowDownSLine",
128
- className: "size-16"
129
- })
130
- })
131
- }),
132
- /*#__PURE__*/ _jsxs(PopoverContent, {
133
- align: "end",
134
- className: "w-320 p-0 rounded-12",
135
- children: [
136
- /*#__PURE__*/ _jsx("div", {
137
- className: "px-16 py-12 border-b border-border-neutral-strong",
138
- children: /*#__PURE__*/ _jsx(Header, {
139
- variant: "h4",
140
- className: "text-sm font-medium",
141
- children: "Agent Tasks"
142
- })
143
- }),
144
- /*#__PURE__*/ _jsxs("div", {
145
- className: "p-16 flex flex-col gap-12",
146
- children: [
147
- /*#__PURE__*/ _jsx(Textarea, {
148
- placeholder: "Describe your task in natural language.",
149
- className: "min-h-80 resize-none",
150
- "aria-label": "Task description"
151
- }),
152
- /*#__PURE__*/ _jsxs("div", {
153
- className: "flex flex-col gap-8",
154
- children: [
155
- /*#__PURE__*/ _jsx(Code, {
156
- variant: "label",
157
- className: "font-medium text-foreground-neutral-base",
158
- children: "Start a new task with Copilot"
159
- }),
160
- /*#__PURE__*/ _jsx(Code, {
161
- variant: "paragraph",
162
- className: "text-foreground-neutral-subtle text-xs",
163
- children: "Describe your task in natural language. Copilot will work in the background and open a pull request for your review."
164
- })
165
- ]
166
- })
167
- ]
168
- })
169
- ]
170
- })
171
- ]
172
- })
173
- ]
174
- });
175
- }
176
- export const Default = {
177
- render: ()=>/*#__PURE__*/ _jsxs("div", {
178
- className: "flex flex-col gap-24",
179
- children: [
180
- /*#__PURE__*/ _jsxs("div", {
181
- className: "flex flex-col gap-8",
182
- children: [
183
- /*#__PURE__*/ _jsx(Code, {
184
- variant: "label",
185
- className: "text-foreground-neutral-subtle",
186
- children: "Basic Button Group"
187
- }),
188
- /*#__PURE__*/ _jsxs(ButtonGroup, {
189
- "aria-label": "Playback controls",
190
- children: [
191
- /*#__PURE__*/ _jsx(Button, {
192
- variant: "secondary",
193
- size: "sm",
194
- "aria-label": "Rewind",
195
- children: /*#__PURE__*/ _jsx(Icon, {
196
- name: "rewindFill",
197
- className: "size-14 text-foreground-neutral-subtle"
198
- })
199
- }),
200
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
201
- /*#__PURE__*/ _jsx(Button, {
202
- variant: "secondary",
203
- size: "sm",
204
- "aria-label": "Play",
205
- children: /*#__PURE__*/ _jsx(Icon, {
206
- name: "playFill",
207
- className: "size-14 text-foreground-neutral-subtle"
208
- })
209
- }),
210
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
211
- /*#__PURE__*/ _jsx(Button, {
212
- variant: "secondary",
213
- size: "sm",
214
- "aria-label": "Speed",
215
- children: /*#__PURE__*/ _jsx(Icon, {
216
- name: "speedFill",
217
- className: "size-14 text-foreground-neutral-subtle"
218
- })
219
- })
220
- ]
221
- })
222
- ]
223
- }),
224
- /*#__PURE__*/ _jsxs("div", {
225
- className: "flex flex-col gap-12",
226
- children: [
227
- /*#__PURE__*/ _jsx(Code, {
228
- variant: "label",
229
- className: "text-foreground-neutral-subtle",
230
- children: "Sizes"
231
- }),
232
- /*#__PURE__*/ _jsxs("div", {
233
- className: "flex flex-col gap-8",
234
- children: [
235
- /*#__PURE__*/ _jsxs(ButtonGroup, {
236
- "aria-label": "Small buttons",
237
- children: [
238
- /*#__PURE__*/ _jsx(Button, {
239
- variant: "secondary",
240
- size: "sm",
241
- "aria-label": "Cut",
242
- children: /*#__PURE__*/ _jsx(Icon, {
243
- name: "rewindFill",
244
- className: "size-14 text-foreground-neutral-subtle"
245
- })
246
- }),
247
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
248
- /*#__PURE__*/ _jsx(Button, {
249
- variant: "secondary",
250
- size: "sm",
251
- "aria-label": "Copy",
252
- children: /*#__PURE__*/ _jsx(Icon, {
253
- name: "playFill",
254
- className: "size-14 text-foreground-neutral-subtle"
255
- })
256
- }),
257
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
258
- /*#__PURE__*/ _jsx(Button, {
259
- variant: "secondary",
260
- size: "sm",
261
- "aria-label": "Paste",
262
- children: /*#__PURE__*/ _jsx(Icon, {
263
- name: "speedFill",
264
- className: "size-14 text-foreground-neutral-subtle"
265
- })
266
- })
267
- ]
268
- }),
269
- /*#__PURE__*/ _jsxs(ButtonGroup, {
270
- "aria-label": "Medium buttons",
271
- children: [
272
- /*#__PURE__*/ _jsx(Button, {
273
- variant: "secondary",
274
- size: "md",
275
- "aria-label": "Cut",
276
- children: /*#__PURE__*/ _jsx(Icon, {
277
- name: "rewindFill",
278
- className: "size-16 text-foreground-neutral-subtle"
279
- })
280
- }),
281
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
282
- /*#__PURE__*/ _jsx(Button, {
283
- variant: "secondary",
284
- size: "md",
285
- "aria-label": "Copy",
286
- children: /*#__PURE__*/ _jsx(Icon, {
287
- name: "playFill",
288
- className: "size-16 text-foreground-neutral-subtle"
289
- })
290
- }),
291
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
292
- /*#__PURE__*/ _jsx(Button, {
293
- variant: "secondary",
294
- size: "md",
295
- "aria-label": "Paste",
296
- children: /*#__PURE__*/ _jsx(Icon, {
297
- name: "speedFill",
298
- className: "size-16 text-foreground-neutral-subtle"
299
- })
300
- })
301
- ]
302
- }),
303
- /*#__PURE__*/ _jsxs(ButtonGroup, {
304
- "aria-label": "Large buttons",
305
- children: [
306
- /*#__PURE__*/ _jsx(Button, {
307
- variant: "secondary",
308
- size: "lg",
309
- "aria-label": "Cut",
310
- children: /*#__PURE__*/ _jsx(Icon, {
311
- name: "rewindFill",
312
- className: "size-16 text-foreground-neutral-subtle"
313
- })
314
- }),
315
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
316
- /*#__PURE__*/ _jsx(Button, {
317
- variant: "secondary",
318
- size: "lg",
319
- "aria-label": "Copy",
320
- children: /*#__PURE__*/ _jsx(Icon, {
321
- name: "playFill",
322
- className: "size-16 text-foreground-neutral-subtle"
323
- })
324
- }),
325
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
326
- /*#__PURE__*/ _jsx(Button, {
327
- variant: "secondary",
328
- size: "lg",
329
- "aria-label": "Paste",
330
- children: /*#__PURE__*/ _jsx(Icon, {
331
- name: "speedFill",
332
- className: "size-16 text-foreground-neutral-subtle"
333
- })
334
- })
335
- ]
336
- })
337
- ]
338
- })
339
- ]
340
- }),
341
- /*#__PURE__*/ _jsxs("div", {
342
- className: "flex flex-col gap-8",
343
- children: [
344
- /*#__PURE__*/ _jsx(Code, {
345
- variant: "label",
346
- className: "text-foreground-neutral-subtle",
347
- children: "Orientation"
348
- }),
349
- /*#__PURE__*/ _jsxs("div", {
350
- className: "flex gap-24 items-start",
351
- children: [
352
- /*#__PURE__*/ _jsxs(ButtonGroup, {
353
- "aria-label": "Horizontal",
354
- children: [
355
- /*#__PURE__*/ _jsx(Button, {
356
- variant: "secondary",
357
- size: "sm",
358
- "aria-label": "Zoom in",
359
- children: /*#__PURE__*/ _jsx(Icon, {
360
- name: "addLine",
361
- className: "size-16 text-foreground-neutral-subtle"
362
- })
363
- }),
364
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
365
- /*#__PURE__*/ _jsx(Button, {
366
- variant: "secondary",
367
- size: "sm",
368
- "aria-label": "Zoom out",
369
- children: /*#__PURE__*/ _jsx(Icon, {
370
- name: "subtractLine",
371
- className: "size-16 text-foreground-neutral-subtle"
372
- })
373
- })
374
- ]
375
- }),
376
- /*#__PURE__*/ _jsxs(ButtonGroup, {
377
- orientation: "vertical",
378
- className: "h-fit w-fit",
379
- "aria-label": "Vertical",
380
- children: [
381
- /*#__PURE__*/ _jsx(Button, {
382
- variant: "secondary",
383
- size: "sm",
384
- "aria-label": "Increase",
385
- children: /*#__PURE__*/ _jsx(Icon, {
386
- name: "addLine",
387
- className: "size-16 text-foreground-neutral-subtle"
388
- })
389
- }),
390
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {
391
- orientation: "horizontal"
392
- }),
393
- /*#__PURE__*/ _jsx(Button, {
394
- variant: "secondary",
395
- size: "sm",
396
- "aria-label": "Decrease",
397
- children: /*#__PURE__*/ _jsx(Icon, {
398
- name: "subtractLine",
399
- className: "size-16 text-foreground-neutral-subtle"
400
- })
401
- })
402
- ]
403
- })
404
- ]
405
- })
406
- ]
407
- }),
408
- /*#__PURE__*/ _jsxs("div", {
409
- className: "flex flex-col gap-8",
410
- children: [
411
- /*#__PURE__*/ _jsx(Code, {
412
- variant: "label",
413
- className: "text-foreground-neutral-subtle",
414
- children: "Split Button"
415
- }),
416
- /*#__PURE__*/ _jsxs(ButtonGroup, {
417
- "aria-label": "Save actions",
418
- children: [
419
- /*#__PURE__*/ _jsx(Button, {
420
- variant: "secondary",
421
- size: "sm",
422
- className: " !text-foreground-neutral-subtle",
423
- children: "Save"
424
- }),
425
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
426
- /*#__PURE__*/ _jsx(Button, {
427
- variant: "secondary",
428
- size: "sm",
429
- "aria-label": "More options",
430
- children: /*#__PURE__*/ _jsx(Icon, {
431
- name: "arrowDownSLine",
432
- className: "size-16 text-foreground-neutral-subtle"
433
- })
434
- })
435
- ]
436
- })
437
- ]
438
- }),
439
- /*#__PURE__*/ _jsxs("div", {
440
- className: "flex flex-col gap-8",
441
- children: [
442
- /*#__PURE__*/ _jsx(Code, {
443
- variant: "label",
444
- className: "text-foreground-neutral-subtle",
445
- children: "With Input"
446
- }),
447
- /*#__PURE__*/ _jsxs(ButtonGroup, {
448
- className: "w-320",
449
- "aria-label": "Search",
450
- children: [
451
- /*#__PURE__*/ _jsx(Input, {
452
- placeholder: "Search...",
453
- "aria-label": "Search input"
454
- }),
455
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
456
- /*#__PURE__*/ _jsx(Button, {
457
- variant: "secondary",
458
- "aria-label": "Submit search",
459
- children: /*#__PURE__*/ _jsx(Icon, {
460
- name: "searchLine",
461
- className: "size-16 text-foreground-neutral-subtle"
462
- })
463
- })
464
- ]
465
- })
466
- ]
467
- }),
468
- /*#__PURE__*/ _jsxs("div", {
469
- className: "flex flex-col gap-8",
470
- children: [
471
- /*#__PURE__*/ _jsx(Code, {
472
- variant: "label",
473
- className: "text-foreground-neutral-subtle",
474
- children: "Quantity Selector"
475
- }),
476
- /*#__PURE__*/ _jsxs(ButtonGroup, {
477
- className: "w-280",
478
- "aria-label": "Quantity selector",
479
- children: [
480
- /*#__PURE__*/ _jsx(Button, {
481
- variant: "secondary",
482
- "aria-label": "Decrease",
483
- children: /*#__PURE__*/ _jsx(Icon, {
484
- name: "subtractLine",
485
- className: "size-16 text-foreground-neutral-subtle"
486
- })
487
- }),
488
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
489
- /*#__PURE__*/ _jsx(Input, {
490
- placeholder: "1",
491
- className: "text-center",
492
- "aria-label": "Quantity"
493
- }),
494
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
495
- /*#__PURE__*/ _jsx(Button, {
496
- variant: "secondary",
497
- "aria-label": "Increase",
498
- children: /*#__PURE__*/ _jsx(Icon, {
499
- name: "addLine",
500
- className: "size-16 text-foreground-neutral-subtle"
501
- })
502
- })
503
- ]
504
- })
505
- ]
506
- }),
507
- /*#__PURE__*/ _jsxs("div", {
508
- className: "flex flex-col gap-8",
509
- children: [
510
- /*#__PURE__*/ _jsx(Code, {
511
- variant: "label",
512
- className: "text-foreground-neutral-subtle",
513
- children: "With Select"
514
- }),
515
- /*#__PURE__*/ _jsx(SelectExample, {})
516
- ]
517
- }),
518
- /*#__PURE__*/ _jsxs("div", {
519
- className: "flex flex-col gap-8",
520
- children: [
521
- /*#__PURE__*/ _jsx(Code, {
522
- variant: "label",
523
- className: "text-foreground-neutral-subtle",
524
- children: "With Popover"
525
- }),
526
- /*#__PURE__*/ _jsx(PopoverExample, {})
527
- ]
528
- }),
529
- /*#__PURE__*/ _jsxs("div", {
530
- className: "flex flex-col gap-8",
531
- children: [
532
- /*#__PURE__*/ _jsx(Code, {
533
- variant: "label",
534
- className: "text-foreground-neutral-subtle",
535
- children: "Nested Groups"
536
- }),
537
- /*#__PURE__*/ _jsxs("div", {
538
- className: "inline-flex gap-8",
539
- children: [
540
- /*#__PURE__*/ _jsxs(ButtonGroup, {
541
- "aria-label": "Page selection",
542
- children: [
543
- /*#__PURE__*/ _jsx(Button, {
544
- variant: "transparent",
545
- className: "w-42 !text-foreground-neutral-subtle",
546
- "aria-label": "Page 1",
547
- children: "1"
548
- }),
549
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
550
- /*#__PURE__*/ _jsx(Button, {
551
- variant: "transparent",
552
- className: "w-42 !text-foreground-neutral-subtle",
553
- "aria-label": "Page 2",
554
- children: "2"
555
- }),
556
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
557
- /*#__PURE__*/ _jsx(Button, {
558
- variant: "transparent",
559
- className: "w-42 !text-foreground-neutral-subtle",
560
- "aria-label": "Page 3",
561
- children: "3"
562
- }),
563
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
564
- /*#__PURE__*/ _jsx(Button, {
565
- variant: "transparent",
566
- className: "w-42 !text-foreground-neutral-subtle",
567
- "aria-label": "Page 4",
568
- children: "4"
569
- }),
570
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
571
- /*#__PURE__*/ _jsx(Button, {
572
- variant: "transparent",
573
- className: "w-42 !text-foreground-neutral-subtle",
574
- "aria-label": "Page 5",
575
- children: "5"
576
- })
577
- ]
578
- }),
579
- /*#__PURE__*/ _jsxs(ButtonGroup, {
580
- "aria-label": "Pagination controls",
581
- children: [
582
- /*#__PURE__*/ _jsx(Button, {
583
- variant: "transparent",
584
- "aria-label": "Previous page",
585
- children: /*#__PURE__*/ _jsx(Icon, {
586
- name: "arrowLeftSLine",
587
- className: "size-16 text-foreground-neutral-subtle"
588
- })
589
- }),
590
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
591
- /*#__PURE__*/ _jsx(Button, {
592
- variant: "transparent",
593
- "aria-label": "Next page",
594
- children: /*#__PURE__*/ _jsx(Icon, {
595
- name: "arrowRightSLine",
596
- className: "size-16 text-foreground-neutral-subtle"
597
- })
598
- })
599
- ]
600
- })
601
- ]
602
- })
603
- ]
604
- }),
605
- /*#__PURE__*/ _jsxs("div", {
606
- className: "flex flex-col gap-8",
607
- children: [
608
- /*#__PURE__*/ _jsx(Code, {
609
- variant: "label",
610
- className: "text-foreground-neutral-subtle",
611
- children: "Disabled State"
612
- }),
613
- /*#__PURE__*/ _jsxs(ButtonGroup, {
614
- "aria-label": "Button group with disabled state",
615
- children: [
616
- /*#__PURE__*/ _jsx(Button, {
617
- variant: "secondary",
618
- size: "sm",
619
- className: " !text-foreground-neutral-subtle",
620
- children: "Enabled"
621
- }),
622
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
623
- /*#__PURE__*/ _jsx(Button, {
624
- variant: "secondary",
625
- size: "sm",
626
- disabled: true,
627
- children: "Disabled"
628
- }),
629
- /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
630
- /*#__PURE__*/ _jsx(Button, {
631
- variant: "secondary",
632
- size: "sm",
633
- className: " !text-foreground-neutral-subtle",
634
- children: "Enabled"
635
- })
636
- ]
637
- })
638
- ]
639
- })
640
- ]
641
- })
642
- };
643
-
644
- //# sourceMappingURL=button-group.stories.js.map