@7onic-ui/react 0.3.1 → 0.3.2
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 +7 -9
- package/llms.txt +338 -409
- package/package.json +4 -2
package/llms.txt
CHANGED
|
@@ -112,9 +112,7 @@ import { Badge as BadgeIcon } from 'lucide-react'
|
|
|
112
112
|
Place `<Toaster />` once in your root layout file. Without this, `toast()` calls will not render.
|
|
113
113
|
|
|
114
114
|
```tsx
|
|
115
|
-
import { Toaster } from '@7onic-ui/react'
|
|
116
|
-
|
|
117
|
-
// In your root layout (e.g., app/layout.tsx)
|
|
115
|
+
import { Toaster } from '@7onic-ui/react'// In your root layout (e.g., app/layout.tsx)
|
|
118
116
|
<body>
|
|
119
117
|
{children}
|
|
120
118
|
<Toaster position="bottom-right" />
|
|
@@ -231,9 +229,7 @@ style={{ color: '#333', padding: '20px' }}
|
|
|
231
229
|
w-4 h-4, w-5 h-5 → icon-sm, icon-md
|
|
232
230
|
|
|
233
231
|
// ❌ Radix direct import
|
|
234
|
-
import * as Dialog from '@radix-ui/react-dialog' → import {
|
|
235
|
-
|
|
236
|
-
// ❌ Unnecessary component wrappers
|
|
232
|
+
import * as Dialog from '@radix-ui/react-dialog' → import { Badge, Button, Card, Input, Table } from '@7onic-ui/react'// ❌ Unnecessary component wrappers
|
|
237
233
|
function MyButton(props) { return <Button {...props} /> } → Use Button directly
|
|
238
234
|
```
|
|
239
235
|
|
|
@@ -273,7 +269,7 @@ The token system covers all UI needs out of the box. As AI, use existing tokens
|
|
|
273
269
|
If the user needs custom values beyond existing tokens, they will handle it separately.
|
|
274
270
|
Customization guide: https://7onic.design/components/theming
|
|
275
271
|
|
|
276
|
-
**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `
|
|
272
|
+
**Never modify generated token files** — these are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from: `variables.css`, `light.css`, `dark.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
|
|
277
273
|
|
|
278
274
|
### Self-Check (after writing ANY code)
|
|
279
275
|
|
|
@@ -379,7 +375,7 @@ For detailed token reference, see: https://7onic.design/llms.txt
|
|
|
379
375
|
|
|
380
376
|
```tsx
|
|
381
377
|
// All components from single package
|
|
382
|
-
import { Button, Card, Input,
|
|
378
|
+
import { Button, Card, Input, toast } from '@7onic-ui/react'
|
|
383
379
|
```
|
|
384
380
|
|
|
385
381
|
## Component Import
|
|
@@ -387,9 +383,7 @@ import { Button, Card, Input, Toast } from '@7onic-ui/react'
|
|
|
387
383
|
All components use Named imports. Works in every environment (Next.js App Router RSC, Client Components, Pages Router, Vite, CRA, CJS).
|
|
388
384
|
|
|
389
385
|
```tsx
|
|
390
|
-
import { Card,
|
|
391
|
-
|
|
392
|
-
<Card>
|
|
386
|
+
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@7onic-ui/react'<Card>
|
|
393
387
|
<CardHeader>
|
|
394
388
|
<CardTitle>Title</CardTitle>
|
|
395
389
|
<CardDescription>Description</CardDescription>
|
|
@@ -422,9 +416,7 @@ Badge, Button, ButtonGroup, Checkbox, Divider, IconButton, Input, Progress, Skel
|
|
|
422
416
|
### Button
|
|
423
417
|
|
|
424
418
|
```tsx
|
|
425
|
-
import { Button } from '@7onic-ui/react'
|
|
426
|
-
|
|
427
|
-
<Button variant="solid" color="primary" size="default">Submit</Button>
|
|
419
|
+
import { Button } from '@7onic-ui/react'<Button variant="solid" color="primary" size="default">Submit</Button>
|
|
428
420
|
<Button variant="outline" color="default" leftIcon={<Icon />}>Cancel</Button>
|
|
429
421
|
<Button loading>Processing...</Button>
|
|
430
422
|
<Button variant="link" color="primary">Learn more</Button>
|
|
@@ -453,9 +445,7 @@ import { Button } from '@7onic-ui/react'
|
|
|
453
445
|
### IconButton
|
|
454
446
|
|
|
455
447
|
```tsx
|
|
456
|
-
import { IconButton } from '@7onic-ui/react'
|
|
457
|
-
|
|
458
|
-
<IconButton variant="ghost" size="default" aria-label="Settings">
|
|
448
|
+
import { IconButton } from '@7onic-ui/react'<IconButton variant="ghost" size="default" aria-label="Settings">
|
|
459
449
|
<SettingsIcon />
|
|
460
450
|
</IconButton>
|
|
461
451
|
```
|
|
@@ -478,9 +468,7 @@ import { IconButton } from '@7onic-ui/react'
|
|
|
478
468
|
### ButtonGroup
|
|
479
469
|
|
|
480
470
|
```tsx
|
|
481
|
-
import { Button, ButtonGroup } from '@7onic-ui/react'
|
|
482
|
-
|
|
483
|
-
<ButtonGroup variant="outline" size="default" attached>
|
|
471
|
+
import { Button, ButtonGroup } from '@7onic-ui/react'<ButtonGroup variant="outline" size="default" attached>
|
|
484
472
|
<Button>Left</Button>
|
|
485
473
|
<Button>Center</Button>
|
|
486
474
|
<Button>Right</Button>
|
|
@@ -504,9 +492,7 @@ Provides context — child Buttons inherit variant/size/radius automatically.
|
|
|
504
492
|
### Input
|
|
505
493
|
|
|
506
494
|
```tsx
|
|
507
|
-
import { Input } from '@7onic-ui/react'
|
|
508
|
-
|
|
509
|
-
<Input placeholder="Email" size="default" />
|
|
495
|
+
import { Input } from '@7onic-ui/react'<Input placeholder="Email" size="default" />
|
|
510
496
|
<Input variant="filled" leftIcon={<SearchIcon />} />
|
|
511
497
|
<Input error rightIcon={<AlertIcon />} />
|
|
512
498
|
```
|
|
@@ -528,9 +514,7 @@ import { Input } from '@7onic-ui/react'
|
|
|
528
514
|
### Textarea
|
|
529
515
|
|
|
530
516
|
```tsx
|
|
531
|
-
import { Textarea } from '@7onic-ui/react'
|
|
532
|
-
|
|
533
|
-
<Textarea placeholder="Message" rows={4} resize="vertical" />
|
|
517
|
+
import { Textarea } from '@7onic-ui/react'<Textarea placeholder="Message" rows={4} resize="vertical" />
|
|
534
518
|
```
|
|
535
519
|
|
|
536
520
|
| Prop | Type | Default | Description |
|
|
@@ -548,20 +532,18 @@ import { Textarea } from '@7onic-ui/react'
|
|
|
548
532
|
### Select
|
|
549
533
|
|
|
550
534
|
```tsx
|
|
551
|
-
import { Select } from '@7onic-ui/react'
|
|
552
|
-
|
|
553
|
-
<
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
<
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
</Select.Group>
|
|
564
|
-
</Select.Content>
|
|
535
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@7onic-ui/react'<Select>
|
|
536
|
+
<SelectTrigger>
|
|
537
|
+
<SelectValue placeholder="Choose option" />
|
|
538
|
+
</SelectTrigger>
|
|
539
|
+
<SelectContent>
|
|
540
|
+
<SelectItem value="a">Option A</SelectItem>
|
|
541
|
+
<SelectItem value="b">Option B</SelectItem>
|
|
542
|
+
<SelectGroup>
|
|
543
|
+
<SelectLabel>Group</SelectLabel>
|
|
544
|
+
<SelectItem value="c">Option C</SelectItem>
|
|
545
|
+
</SelectGroup>
|
|
546
|
+
</SelectContent>
|
|
565
547
|
</Select>
|
|
566
548
|
```
|
|
567
549
|
|
|
@@ -580,18 +562,16 @@ import { Select } from '@7onic-ui/react'
|
|
|
580
562
|
### DropdownMenu
|
|
581
563
|
|
|
582
564
|
```tsx
|
|
583
|
-
import { DropdownMenu } from '@7onic-ui/react'
|
|
584
|
-
|
|
585
|
-
<DropdownMenu>
|
|
586
|
-
<DropdownMenu.Trigger asChild>
|
|
565
|
+
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@7onic-ui/react'<DropdownMenu>
|
|
566
|
+
<DropdownMenuTrigger asChild>
|
|
587
567
|
<Button variant="outline">Options</Button>
|
|
588
|
-
</
|
|
589
|
-
<
|
|
590
|
-
<
|
|
591
|
-
<
|
|
592
|
-
<
|
|
593
|
-
<
|
|
594
|
-
</
|
|
568
|
+
</DropdownMenuTrigger>
|
|
569
|
+
<DropdownMenuContent>
|
|
570
|
+
<DropdownMenuItem>Edit</DropdownMenuItem>
|
|
571
|
+
<DropdownMenuItem>Duplicate</DropdownMenuItem>
|
|
572
|
+
<DropdownMenuSeparator />
|
|
573
|
+
<DropdownMenuItem className="text-error">Delete</DropdownMenuItem>
|
|
574
|
+
</DropdownMenuContent>
|
|
595
575
|
</DropdownMenu>
|
|
596
576
|
```
|
|
597
577
|
|
|
@@ -609,9 +589,7 @@ import { DropdownMenu } from '@7onic-ui/react'
|
|
|
609
589
|
### Checkbox
|
|
610
590
|
|
|
611
591
|
```tsx
|
|
612
|
-
import { Checkbox } from '@7onic-ui/react'
|
|
613
|
-
|
|
614
|
-
<Checkbox label="Accept terms" />
|
|
592
|
+
import { Checkbox } from '@7onic-ui/react'<Checkbox label="Accept terms" />
|
|
615
593
|
<Checkbox size="lg" color="primary" checked />
|
|
616
594
|
<Checkbox checked="indeterminate" />
|
|
617
595
|
```
|
|
@@ -633,12 +611,10 @@ import { Checkbox } from '@7onic-ui/react'
|
|
|
633
611
|
### RadioGroup
|
|
634
612
|
|
|
635
613
|
```tsx
|
|
636
|
-
import { RadioGroup } from '@7onic-ui/react'
|
|
637
|
-
|
|
638
|
-
<
|
|
639
|
-
<
|
|
640
|
-
<RadioGroup.Item value="b" label="Option B" />
|
|
641
|
-
<RadioGroup.Item value="c" label="Option C" disabled />
|
|
614
|
+
import { RadioGroup, RadioGroupItem } from '@7onic-ui/react'<RadioGroup defaultValue="a">
|
|
615
|
+
<RadioGroupItem value="a" label="Option A" />
|
|
616
|
+
<RadioGroupItem value="b" label="Option B" />
|
|
617
|
+
<RadioGroupItem value="c" label="Option C" disabled />
|
|
642
618
|
</RadioGroup>
|
|
643
619
|
```
|
|
644
620
|
|
|
@@ -659,9 +635,7 @@ import { RadioGroup } from '@7onic-ui/react'
|
|
|
659
635
|
### Switch
|
|
660
636
|
|
|
661
637
|
```tsx
|
|
662
|
-
import { Switch } from '@7onic-ui/react'
|
|
663
|
-
|
|
664
|
-
<Switch label="Notifications" />
|
|
638
|
+
import { Switch } from '@7onic-ui/react'<Switch label="Notifications" />
|
|
665
639
|
<Switch size="lg" color="primary" defaultChecked />
|
|
666
640
|
<Switch startLabel="Off" endLabel="On" />
|
|
667
641
|
```
|
|
@@ -686,9 +660,7 @@ import { Switch } from '@7onic-ui/react'
|
|
|
686
660
|
### Toggle
|
|
687
661
|
|
|
688
662
|
```tsx
|
|
689
|
-
import { Toggle } from '@7onic-ui/react'
|
|
690
|
-
|
|
691
|
-
<Toggle variant="default" aria-label="Bold">
|
|
663
|
+
import { Toggle } from '@7onic-ui/react'<Toggle variant="default" aria-label="Bold">
|
|
692
664
|
<BoldIcon />
|
|
693
665
|
</Toggle>
|
|
694
666
|
<Toggle variant="outline" pressed>Active</Toggle>
|
|
@@ -711,12 +683,10 @@ import { Toggle } from '@7onic-ui/react'
|
|
|
711
683
|
### ToggleGroup
|
|
712
684
|
|
|
713
685
|
```tsx
|
|
714
|
-
import { ToggleGroup } from '@7onic-ui/react'
|
|
715
|
-
|
|
716
|
-
<
|
|
717
|
-
<
|
|
718
|
-
<ToggleGroup.Item value="center"><AlignCenterIcon /></ToggleGroup.Item>
|
|
719
|
-
<ToggleGroup.Item value="right"><AlignRightIcon /></ToggleGroup.Item>
|
|
686
|
+
import { ToggleGroup, ToggleGroupItem } from '@7onic-ui/react'<ToggleGroup type="single" defaultValue="center">
|
|
687
|
+
<ToggleGroupItem value="left"><AlignLeftIcon /></ToggleGroupItem>
|
|
688
|
+
<ToggleGroupItem value="center"><AlignCenterIcon /></ToggleGroupItem>
|
|
689
|
+
<ToggleGroupItem value="right"><AlignRightIcon /></ToggleGroupItem>
|
|
720
690
|
</ToggleGroup>
|
|
721
691
|
```
|
|
722
692
|
|
|
@@ -739,12 +709,10 @@ import { ToggleGroup } from '@7onic-ui/react'
|
|
|
739
709
|
### Segmented
|
|
740
710
|
|
|
741
711
|
```tsx
|
|
742
|
-
import { Segmented } from '@7onic-ui/react'
|
|
743
|
-
|
|
744
|
-
<
|
|
745
|
-
<
|
|
746
|
-
<Segmented.Item value="active">Active</Segmented.Item>
|
|
747
|
-
<Segmented.Item value="inactive">Inactive</Segmented.Item>
|
|
712
|
+
import { Segmented, SegmentedItem } from '@7onic-ui/react'<Segmented defaultValue="all">
|
|
713
|
+
<SegmentedItem value="all">All</SegmentedItem>
|
|
714
|
+
<SegmentedItem value="active">Active</SegmentedItem>
|
|
715
|
+
<SegmentedItem value="inactive">Inactive</SegmentedItem>
|
|
748
716
|
</Segmented>
|
|
749
717
|
```
|
|
750
718
|
|
|
@@ -766,9 +734,7 @@ import { Segmented } from '@7onic-ui/react'
|
|
|
766
734
|
### Slider
|
|
767
735
|
|
|
768
736
|
```tsx
|
|
769
|
-
import { Slider } from '@7onic-ui/react'
|
|
770
|
-
|
|
771
|
-
<Slider defaultValue={[50]} showTooltip="auto" />
|
|
737
|
+
import { Slider } from '@7onic-ui/react'<Slider defaultValue={[50]} showTooltip="auto" />
|
|
772
738
|
<Slider defaultValue={[20, 80]} color="primary" />
|
|
773
739
|
```
|
|
774
740
|
|
|
@@ -793,18 +759,16 @@ import { Slider } from '@7onic-ui/react'
|
|
|
793
759
|
### Field (Form Wrapper)
|
|
794
760
|
|
|
795
761
|
```tsx
|
|
796
|
-
import { Field, Input, Textarea } from '@7onic-ui/react'
|
|
797
|
-
|
|
798
|
-
<Field error="Invalid email">
|
|
799
|
-
<Field.Label required>Email</Field.Label>
|
|
762
|
+
import { Field, FieldCharCount, FieldError, FieldLabel, Input, Textarea } from '@7onic-ui/react'<Field error="Invalid email">
|
|
763
|
+
<FieldLabel required>Email</FieldLabel>
|
|
800
764
|
<Input placeholder="you@example.com" />
|
|
801
|
-
<
|
|
765
|
+
<FieldError />
|
|
802
766
|
</Field>
|
|
803
767
|
|
|
804
768
|
<Field>
|
|
805
|
-
<
|
|
769
|
+
<FieldLabel>Bio</FieldLabel>
|
|
806
770
|
<Textarea placeholder="Tell us about yourself" maxLength={200} />
|
|
807
|
-
<
|
|
771
|
+
<FieldCharCount />
|
|
808
772
|
</Field>
|
|
809
773
|
```
|
|
810
774
|
|
|
@@ -824,19 +788,17 @@ import { Field, Input, Textarea } from '@7onic-ui/react'
|
|
|
824
788
|
### Avatar
|
|
825
789
|
|
|
826
790
|
```tsx
|
|
827
|
-
import { Avatar } from '@7onic-ui/react'
|
|
828
|
-
|
|
829
|
-
<
|
|
830
|
-
<Avatar.Image src="/photo.jpg" alt="User" />
|
|
831
|
-
<Avatar.Fallback name="John Doe" colorized />
|
|
791
|
+
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@7onic-ui/react'<Avatar size="default">
|
|
792
|
+
<AvatarImage src="/photo.jpg" alt="User" />
|
|
793
|
+
<AvatarFallback name="John Doe" colorized />
|
|
832
794
|
</Avatar>
|
|
833
795
|
|
|
834
|
-
<
|
|
835
|
-
<Avatar><
|
|
836
|
-
<Avatar><
|
|
837
|
-
<Avatar><
|
|
838
|
-
<Avatar><
|
|
839
|
-
</
|
|
796
|
+
<AvatarGroup max={3}>
|
|
797
|
+
<Avatar><AvatarImage src="/a.jpg" /><AvatarFallback>A</AvatarFallback></Avatar>
|
|
798
|
+
<Avatar><AvatarImage src="/b.jpg" /><AvatarFallback>B</AvatarFallback></Avatar>
|
|
799
|
+
<Avatar><AvatarImage src="/c.jpg" /><AvatarFallback>C</AvatarFallback></Avatar>
|
|
800
|
+
<Avatar><AvatarFallback>+2</AvatarFallback></Avatar>
|
|
801
|
+
</AvatarGroup>
|
|
840
802
|
```
|
|
841
803
|
|
|
842
804
|
| Prop (Root) | Type | Default | Description |
|
|
@@ -864,9 +826,7 @@ import { Avatar } from '@7onic-ui/react'
|
|
|
864
826
|
### Badge
|
|
865
827
|
|
|
866
828
|
```tsx
|
|
867
|
-
import { Badge } from '@7onic-ui/react'
|
|
868
|
-
|
|
869
|
-
<Badge variant="solid" color="primary">New</Badge>
|
|
829
|
+
import { Badge } from '@7onic-ui/react'<Badge variant="solid" color="primary">New</Badge>
|
|
870
830
|
<Badge variant="subtle" color="success" dot>Active</Badge>
|
|
871
831
|
<Badge variant="outline" removable onRemove={() => {}}>Tag</Badge>
|
|
872
832
|
```
|
|
@@ -888,17 +848,15 @@ import { Badge } from '@7onic-ui/react'
|
|
|
888
848
|
### Card
|
|
889
849
|
|
|
890
850
|
```tsx
|
|
891
|
-
import { Card } from '@7onic-ui/react'
|
|
892
|
-
|
|
893
|
-
<
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
<
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
</
|
|
900
|
-
<Card.Content>Main content</Card.Content>
|
|
901
|
-
<Card.Footer>Footer actions</Card.Footer>
|
|
851
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle, IconButton } from '@7onic-ui/react'<Card variant="default" interactive>
|
|
852
|
+
<CardImage src="/cover.jpg" overlay overlayOpacity={40} />
|
|
853
|
+
<CardHeader>
|
|
854
|
+
<CardTitle icon={<StarIcon />}>Featured</CardTitle>
|
|
855
|
+
<CardDescription>Card description</CardDescription>
|
|
856
|
+
<CardAction><IconButton variant="ghost"><MoreIcon /></IconButton></CardAction>
|
|
857
|
+
</CardHeader>
|
|
858
|
+
<CardContent>Main content</CardContent>
|
|
859
|
+
<CardFooter>Footer actions</CardFooter>
|
|
902
860
|
</Card>
|
|
903
861
|
```
|
|
904
862
|
|
|
@@ -923,21 +881,19 @@ import { Card } from '@7onic-ui/react'
|
|
|
923
881
|
### Table
|
|
924
882
|
|
|
925
883
|
```tsx
|
|
926
|
-
import { Table } from '@7onic-ui/react'
|
|
927
|
-
|
|
928
|
-
<
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
</Table.Row>
|
|
940
|
-
</Table.Body>
|
|
884
|
+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@7onic-ui/react'<Table variant="default" stickyHeader>
|
|
885
|
+
<TableHeader>
|
|
886
|
+
<TableRow>
|
|
887
|
+
<TableHead sortable sortDirection="asc" onSort={() => {}}>Name</TableHead>
|
|
888
|
+
<TableHead align="right">Amount</TableHead>
|
|
889
|
+
</TableRow>
|
|
890
|
+
</TableHeader>
|
|
891
|
+
<TableBody>
|
|
892
|
+
<TableRow interactive>
|
|
893
|
+
<TableCell>John</TableCell>
|
|
894
|
+
<TableCell align="right">$100</TableCell>
|
|
895
|
+
</TableRow>
|
|
896
|
+
</TableBody>
|
|
941
897
|
</Table>
|
|
942
898
|
```
|
|
943
899
|
|
|
@@ -972,15 +928,13 @@ import { Table } from '@7onic-ui/react'
|
|
|
972
928
|
### Tabs
|
|
973
929
|
|
|
974
930
|
```tsx
|
|
975
|
-
import { Tabs } from '@7onic-ui/react'
|
|
976
|
-
|
|
977
|
-
<
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
</
|
|
982
|
-
<Tabs.Content value="tab1">Content 1</Tabs.Content>
|
|
983
|
-
<Tabs.Content value="tab2">Content 2</Tabs.Content>
|
|
931
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@7onic-ui/react'<Tabs defaultValue="tab1">
|
|
932
|
+
<TabsList variant="line" size="default">
|
|
933
|
+
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
934
|
+
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
935
|
+
</TabsList>
|
|
936
|
+
<TabsContent value="tab1">Content 1</TabsContent>
|
|
937
|
+
<TabsContent value="tab2">Content 2</TabsContent>
|
|
984
938
|
</Tabs>
|
|
985
939
|
```
|
|
986
940
|
|
|
@@ -999,17 +953,15 @@ import { Tabs } from '@7onic-ui/react'
|
|
|
999
953
|
### Accordion
|
|
1000
954
|
|
|
1001
955
|
```tsx
|
|
1002
|
-
import { Accordion } from '@7onic-ui/react'
|
|
1003
|
-
|
|
1004
|
-
<
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
<Accordion.Content>Content 2</Accordion.Content>
|
|
1012
|
-
</Accordion.Item>
|
|
956
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@7onic-ui/react'<Accordion type="single" collapsible defaultValue="item-1">
|
|
957
|
+
<AccordionItem value="item-1">
|
|
958
|
+
<AccordionTrigger>Section 1</AccordionTrigger>
|
|
959
|
+
<AccordionContent>Content 1</AccordionContent>
|
|
960
|
+
</AccordionItem>
|
|
961
|
+
<AccordionItem value="item-2">
|
|
962
|
+
<AccordionTrigger>Section 2</AccordionTrigger>
|
|
963
|
+
<AccordionContent>Content 2</AccordionContent>
|
|
964
|
+
</AccordionItem>
|
|
1013
965
|
</Accordion>
|
|
1014
966
|
```
|
|
1015
967
|
|
|
@@ -1028,9 +980,7 @@ import { Accordion } from '@7onic-ui/react'
|
|
|
1028
980
|
### Divider
|
|
1029
981
|
|
|
1030
982
|
```tsx
|
|
1031
|
-
import { Divider } from '@7onic-ui/react'
|
|
1032
|
-
|
|
1033
|
-
<Divider />
|
|
983
|
+
import { Divider } from '@7onic-ui/react'<Divider />
|
|
1034
984
|
<Divider variant="dashed" color="muted" />
|
|
1035
985
|
<Divider label="OR" labelPosition="center" />
|
|
1036
986
|
<Divider orientation="vertical" />
|
|
@@ -1052,26 +1002,24 @@ import { Divider } from '@7onic-ui/react'
|
|
|
1052
1002
|
### Modal
|
|
1053
1003
|
|
|
1054
1004
|
```tsx
|
|
1055
|
-
import { Modal,
|
|
1056
|
-
|
|
1057
|
-
<Modal>
|
|
1058
|
-
<Modal.Trigger asChild>
|
|
1005
|
+
import { Button, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger } from '@7onic-ui/react'<Modal>
|
|
1006
|
+
<ModalTrigger asChild>
|
|
1059
1007
|
<Button>Open Modal</Button>
|
|
1060
|
-
</
|
|
1061
|
-
<
|
|
1062
|
-
<
|
|
1063
|
-
<
|
|
1064
|
-
<
|
|
1065
|
-
<
|
|
1066
|
-
<
|
|
1067
|
-
</
|
|
1068
|
-
<
|
|
1069
|
-
<
|
|
1070
|
-
<
|
|
1008
|
+
</ModalTrigger>
|
|
1009
|
+
<ModalPortal>
|
|
1010
|
+
<ModalOverlay />
|
|
1011
|
+
<ModalContent size="md">
|
|
1012
|
+
<ModalHeader>
|
|
1013
|
+
<ModalTitle>Confirm</ModalTitle>
|
|
1014
|
+
<ModalDescription>Are you sure?</ModalDescription>
|
|
1015
|
+
</ModalHeader>
|
|
1016
|
+
<ModalBody>Modal body content</ModalBody>
|
|
1017
|
+
<ModalFooter>
|
|
1018
|
+
<ModalClose asChild><Button variant="outline">Cancel</Button></ModalClose>
|
|
1071
1019
|
<Button color="primary">Confirm</Button>
|
|
1072
|
-
</
|
|
1073
|
-
</
|
|
1074
|
-
</
|
|
1020
|
+
</ModalFooter>
|
|
1021
|
+
</ModalContent>
|
|
1022
|
+
</ModalPortal>
|
|
1075
1023
|
</Modal>
|
|
1076
1024
|
```
|
|
1077
1025
|
|
|
@@ -1090,26 +1038,24 @@ import { Modal, Button } from '@7onic-ui/react'
|
|
|
1090
1038
|
### AlertModal
|
|
1091
1039
|
|
|
1092
1040
|
```tsx
|
|
1093
|
-
import { AlertModal, Button } from '@7onic-ui/react'
|
|
1094
|
-
|
|
1095
|
-
<AlertModal>
|
|
1096
|
-
<AlertModal.Trigger asChild>
|
|
1041
|
+
import { AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, Button } from '@7onic-ui/react'<AlertModal>
|
|
1042
|
+
<AlertModalTrigger asChild>
|
|
1097
1043
|
<Button color="destructive">Delete</Button>
|
|
1098
|
-
</
|
|
1099
|
-
<
|
|
1100
|
-
<
|
|
1101
|
-
<
|
|
1102
|
-
<
|
|
1103
|
-
<
|
|
1104
|
-
<
|
|
1105
|
-
</
|
|
1106
|
-
<
|
|
1107
|
-
<
|
|
1108
|
-
<
|
|
1109
|
-
<
|
|
1110
|
-
</
|
|
1111
|
-
</
|
|
1112
|
-
</
|
|
1044
|
+
</AlertModalTrigger>
|
|
1045
|
+
<AlertModalPortal>
|
|
1046
|
+
<AlertModalOverlay />
|
|
1047
|
+
<AlertModalContent size="sm">
|
|
1048
|
+
<AlertModalHeader>
|
|
1049
|
+
<AlertModalTitle>Delete item?</AlertModalTitle>
|
|
1050
|
+
<AlertModalDescription>This action cannot be undone.</AlertModalDescription>
|
|
1051
|
+
</AlertModalHeader>
|
|
1052
|
+
<AlertModalBody>Further confirmation details</AlertModalBody>
|
|
1053
|
+
<AlertModalFooter>
|
|
1054
|
+
<AlertModalCancel asChild><Button variant="outline">Cancel</Button></AlertModalCancel>
|
|
1055
|
+
<AlertModalAction asChild><Button color="destructive">Delete</Button></AlertModalAction>
|
|
1056
|
+
</AlertModalFooter>
|
|
1057
|
+
</AlertModalContent>
|
|
1058
|
+
</AlertModalPortal>
|
|
1113
1059
|
</AlertModal>
|
|
1114
1060
|
```
|
|
1115
1061
|
|
|
@@ -1126,24 +1072,22 @@ import { AlertModal, Button } from '@7onic-ui/react'
|
|
|
1126
1072
|
### Drawer
|
|
1127
1073
|
|
|
1128
1074
|
```tsx
|
|
1129
|
-
import { Drawer,
|
|
1130
|
-
|
|
1131
|
-
<Drawer>
|
|
1132
|
-
<Drawer.Trigger asChild>
|
|
1075
|
+
import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '@7onic-ui/react'<Drawer>
|
|
1076
|
+
<DrawerTrigger asChild>
|
|
1133
1077
|
<Button>Open Drawer</Button>
|
|
1134
|
-
</
|
|
1135
|
-
<
|
|
1136
|
-
<
|
|
1137
|
-
<
|
|
1138
|
-
<
|
|
1139
|
-
<
|
|
1140
|
-
</
|
|
1141
|
-
<
|
|
1142
|
-
<
|
|
1143
|
-
<
|
|
1144
|
-
</
|
|
1145
|
-
</
|
|
1146
|
-
</
|
|
1078
|
+
</DrawerTrigger>
|
|
1079
|
+
<DrawerPortal>
|
|
1080
|
+
<DrawerOverlay />
|
|
1081
|
+
<DrawerContent side="right" size="md">
|
|
1082
|
+
<DrawerHeader>
|
|
1083
|
+
<DrawerTitle>Settings</DrawerTitle>
|
|
1084
|
+
</DrawerHeader>
|
|
1085
|
+
<DrawerBody>Content</DrawerBody>
|
|
1086
|
+
<DrawerFooter>
|
|
1087
|
+
<DrawerClose asChild><Button variant="outline">Close</Button></DrawerClose>
|
|
1088
|
+
</DrawerFooter>
|
|
1089
|
+
</DrawerContent>
|
|
1090
|
+
</DrawerPortal>
|
|
1147
1091
|
</Drawer>
|
|
1148
1092
|
```
|
|
1149
1093
|
|
|
@@ -1160,21 +1104,19 @@ import { Drawer, Button } from '@7onic-ui/react'
|
|
|
1160
1104
|
### Tooltip
|
|
1161
1105
|
|
|
1162
1106
|
```tsx
|
|
1163
|
-
import { Tooltip } from '@7onic-ui/react'
|
|
1164
|
-
|
|
1165
|
-
<Tooltip.Provider>
|
|
1107
|
+
import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from '@7onic-ui/react'<TooltipProvider>
|
|
1166
1108
|
<Tooltip>
|
|
1167
|
-
<
|
|
1109
|
+
<TooltipTrigger asChild>
|
|
1168
1110
|
<Button>Hover me</Button>
|
|
1169
|
-
</
|
|
1170
|
-
<
|
|
1171
|
-
<
|
|
1111
|
+
</TooltipTrigger>
|
|
1112
|
+
<TooltipPortal>
|
|
1113
|
+
<TooltipContent side="top" showArrow>
|
|
1172
1114
|
Tooltip text
|
|
1173
|
-
<
|
|
1174
|
-
</
|
|
1175
|
-
</
|
|
1115
|
+
<TooltipArrow />
|
|
1116
|
+
</TooltipContent>
|
|
1117
|
+
</TooltipPortal>
|
|
1176
1118
|
</Tooltip>
|
|
1177
|
-
</
|
|
1119
|
+
</TooltipProvider>
|
|
1178
1120
|
```
|
|
1179
1121
|
|
|
1180
1122
|
| Prop (Root) | Type | Default | Description |
|
|
@@ -1197,18 +1139,16 @@ import { Tooltip } from '@7onic-ui/react'
|
|
|
1197
1139
|
### Popover
|
|
1198
1140
|
|
|
1199
1141
|
```tsx
|
|
1200
|
-
import { Popover,
|
|
1201
|
-
|
|
1202
|
-
<Popover>
|
|
1203
|
-
<Popover.Trigger asChild>
|
|
1142
|
+
import { Button, Popover, PopoverArrow, PopoverContent, PopoverPortal, PopoverTrigger } from '@7onic-ui/react'<Popover>
|
|
1143
|
+
<PopoverTrigger asChild>
|
|
1204
1144
|
<Button variant="outline">Open</Button>
|
|
1205
|
-
</
|
|
1206
|
-
<
|
|
1207
|
-
<
|
|
1208
|
-
<
|
|
1145
|
+
</PopoverTrigger>
|
|
1146
|
+
<PopoverPortal>
|
|
1147
|
+
<PopoverContent side="bottom" showArrow showClose>
|
|
1148
|
+
<PopoverArrow />
|
|
1209
1149
|
<p>Popover content</p>
|
|
1210
|
-
</
|
|
1211
|
-
</
|
|
1150
|
+
</PopoverContent>
|
|
1151
|
+
</PopoverPortal>
|
|
1212
1152
|
</Popover>
|
|
1213
1153
|
```
|
|
1214
1154
|
|
|
@@ -1229,15 +1169,13 @@ import { Popover, Button } from '@7onic-ui/react'
|
|
|
1229
1169
|
### Alert
|
|
1230
1170
|
|
|
1231
1171
|
```tsx
|
|
1232
|
-
import { Alert } from '@7onic-ui/react'
|
|
1233
|
-
|
|
1234
|
-
<
|
|
1235
|
-
<Alert.Title>Success</Alert.Title>
|
|
1236
|
-
<Alert.Description>Operation completed.</Alert.Description>
|
|
1172
|
+
import { Alert, AlertDescription, AlertTitle } from '@7onic-ui/react'<Alert color="success" closable onClose={() => {}}>
|
|
1173
|
+
<AlertTitle>Success</AlertTitle>
|
|
1174
|
+
<AlertDescription>Operation completed.</AlertDescription>
|
|
1237
1175
|
</Alert>
|
|
1238
1176
|
|
|
1239
1177
|
<Alert variant="filled" color="error" icon={<ErrorIcon />}>
|
|
1240
|
-
<
|
|
1178
|
+
<AlertTitle>Error</AlertTitle>
|
|
1241
1179
|
</Alert>
|
|
1242
1180
|
```
|
|
1243
1181
|
|
|
@@ -1259,9 +1197,7 @@ import { Alert } from '@7onic-ui/react'
|
|
|
1259
1197
|
### Toast (Imperative API)
|
|
1260
1198
|
|
|
1261
1199
|
```tsx
|
|
1262
|
-
import { Toaster, toast } from '@7onic-ui/react'
|
|
1263
|
-
|
|
1264
|
-
// 1. Add Toaster provider to your app layout (once)
|
|
1200
|
+
import { Toaster, toast } from '@7onic-ui/react'// 1. Add Toaster provider to your app layout (once)
|
|
1265
1201
|
<Toaster position="bottom-right" />
|
|
1266
1202
|
|
|
1267
1203
|
// 2. Call toast() anywhere
|
|
@@ -1309,9 +1245,7 @@ toast.dismiss() // Dismiss all
|
|
|
1309
1245
|
### Progress
|
|
1310
1246
|
|
|
1311
1247
|
```tsx
|
|
1312
|
-
import { Progress } from '@7onic-ui/react'
|
|
1313
|
-
|
|
1314
|
-
<Progress value={65} showValue />
|
|
1248
|
+
import { Progress } from '@7onic-ui/react'<Progress value={65} showValue />
|
|
1315
1249
|
<Progress type="circular" value={75} color="primary" />
|
|
1316
1250
|
<Progress variant="striped" animated value={50} />
|
|
1317
1251
|
```
|
|
@@ -1333,9 +1267,7 @@ import { Progress } from '@7onic-ui/react'
|
|
|
1333
1267
|
### Spinner
|
|
1334
1268
|
|
|
1335
1269
|
```tsx
|
|
1336
|
-
import { Spinner } from '@7onic-ui/react'
|
|
1337
|
-
|
|
1338
|
-
<Spinner />
|
|
1270
|
+
import { Spinner } from '@7onic-ui/react'<Spinner />
|
|
1339
1271
|
<Spinner variant="dots" size="lg" color="primary" />
|
|
1340
1272
|
<Spinner variant="bars" speed="slow" />
|
|
1341
1273
|
<Spinner variant="orbit" orbitStyle="morph" />
|
|
@@ -1355,9 +1287,7 @@ import { Spinner } from '@7onic-ui/react'
|
|
|
1355
1287
|
### Skeleton
|
|
1356
1288
|
|
|
1357
1289
|
```tsx
|
|
1358
|
-
import { Skeleton } from '@7onic-ui/react'
|
|
1359
|
-
|
|
1360
|
-
<Skeleton variant="text" count={3} />
|
|
1290
|
+
import { Skeleton } from '@7onic-ui/react'<Skeleton variant="text" count={3} />
|
|
1361
1291
|
<Skeleton variant="circular" width={48} height={48} />
|
|
1362
1292
|
<Skeleton variant="rectangular" width="100%" height={200} />
|
|
1363
1293
|
|
|
@@ -1385,22 +1315,20 @@ import { Skeleton } from '@7onic-ui/react'
|
|
|
1385
1315
|
### Breadcrumb
|
|
1386
1316
|
|
|
1387
1317
|
```tsx
|
|
1388
|
-
import { Breadcrumb } from '@7onic-ui/react'
|
|
1389
|
-
|
|
1390
|
-
<
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
</Breadcrumb.Item>
|
|
1403
|
-
</Breadcrumb.List>
|
|
1318
|
+
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@7onic-ui/react'<Breadcrumb>
|
|
1319
|
+
<BreadcrumbList>
|
|
1320
|
+
<BreadcrumbItem>
|
|
1321
|
+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
|
|
1322
|
+
</BreadcrumbItem>
|
|
1323
|
+
<BreadcrumbSeparator />
|
|
1324
|
+
<BreadcrumbItem>
|
|
1325
|
+
<BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
|
|
1326
|
+
</BreadcrumbItem>
|
|
1327
|
+
<BreadcrumbSeparator />
|
|
1328
|
+
<BreadcrumbItem>
|
|
1329
|
+
<BreadcrumbPage>Current</BreadcrumbPage>
|
|
1330
|
+
</BreadcrumbItem>
|
|
1331
|
+
</BreadcrumbList>
|
|
1404
1332
|
</Breadcrumb>
|
|
1405
1333
|
```
|
|
1406
1334
|
|
|
@@ -1419,20 +1347,18 @@ import { Breadcrumb } from '@7onic-ui/react'
|
|
|
1419
1347
|
### Pagination
|
|
1420
1348
|
|
|
1421
1349
|
```tsx
|
|
1422
|
-
import { Pagination } from '@7onic-ui/react'
|
|
1423
|
-
|
|
1424
|
-
{/* Quick mode — withControls (default: true), withEdges (default: false) */}
|
|
1350
|
+
import { Pagination, PaginationContent, PaginationItems, PaginationNext, PaginationPrevious } from '@7onic-ui/react'{/* Quick mode — withControls (default: true), withEdges (default: false) */}
|
|
1425
1351
|
<Pagination total={10} defaultValue={1} />
|
|
1426
1352
|
<Pagination total={10} defaultValue={1} withEdges />
|
|
1427
1353
|
<Pagination total={10} defaultValue={1} withControls={false} />
|
|
1428
1354
|
|
|
1429
1355
|
{/* Compound mode (custom layout) */}
|
|
1430
1356
|
<Pagination total={20} value={page} onChange={setPage}>
|
|
1431
|
-
<
|
|
1432
|
-
<
|
|
1433
|
-
<
|
|
1434
|
-
<
|
|
1435
|
-
</
|
|
1357
|
+
<PaginationContent>
|
|
1358
|
+
<PaginationPrevious />
|
|
1359
|
+
<PaginationItems />
|
|
1360
|
+
<PaginationNext />
|
|
1361
|
+
</PaginationContent>
|
|
1436
1362
|
</Pagination>
|
|
1437
1363
|
```
|
|
1438
1364
|
|
|
@@ -1460,34 +1386,32 @@ import { Pagination } from '@7onic-ui/react'
|
|
|
1460
1386
|
### NavigationMenu
|
|
1461
1387
|
|
|
1462
1388
|
```tsx
|
|
1463
|
-
import { NavigationMenu } from '@7onic-ui/react'
|
|
1464
|
-
|
|
1465
|
-
{/* Horizontal (header) */}
|
|
1389
|
+
import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from '@7onic-ui/react'{/* Horizontal (header) */}
|
|
1466
1390
|
<NavigationMenu orientation="horizontal">
|
|
1467
|
-
<
|
|
1468
|
-
<
|
|
1469
|
-
<
|
|
1470
|
-
</
|
|
1471
|
-
<
|
|
1472
|
-
<
|
|
1473
|
-
<
|
|
1474
|
-
<
|
|
1475
|
-
<
|
|
1476
|
-
</
|
|
1477
|
-
</
|
|
1478
|
-
</
|
|
1479
|
-
<
|
|
1391
|
+
<NavigationMenuList>
|
|
1392
|
+
<NavigationMenuItem>
|
|
1393
|
+
<NavigationMenuLink href="/" active>Home</NavigationMenuLink>
|
|
1394
|
+
</NavigationMenuItem>
|
|
1395
|
+
<NavigationMenuItem>
|
|
1396
|
+
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
|
|
1397
|
+
<NavigationMenuContent>
|
|
1398
|
+
<NavigationMenuLink href="/product-a">Product A</NavigationMenuLink>
|
|
1399
|
+
<NavigationMenuLink href="/product-b">Product B</NavigationMenuLink>
|
|
1400
|
+
</NavigationMenuContent>
|
|
1401
|
+
</NavigationMenuItem>
|
|
1402
|
+
</NavigationMenuList>
|
|
1403
|
+
<NavigationMenuViewport />
|
|
1480
1404
|
</NavigationMenu>
|
|
1481
1405
|
|
|
1482
1406
|
{/* Vertical (sidebar) */}
|
|
1483
1407
|
<NavigationMenu orientation="vertical" size="default">
|
|
1484
|
-
<
|
|
1485
|
-
<
|
|
1486
|
-
<
|
|
1487
|
-
<
|
|
1488
|
-
</
|
|
1489
|
-
</
|
|
1490
|
-
</
|
|
1408
|
+
<NavigationMenuList>
|
|
1409
|
+
<NavigationMenuGroup label="Main">
|
|
1410
|
+
<NavigationMenuItem>
|
|
1411
|
+
<NavigationMenuLink href="/" icon={<HomeIcon />} active>Dashboard</NavigationMenuLink>
|
|
1412
|
+
</NavigationMenuItem>
|
|
1413
|
+
</NavigationMenuGroup>
|
|
1414
|
+
</NavigationMenuList>
|
|
1491
1415
|
</NavigationMenu>
|
|
1492
1416
|
```
|
|
1493
1417
|
|
|
@@ -1527,44 +1451,42 @@ import { NavigationMenu } from '@7onic-ui/react'
|
|
|
1527
1451
|
All chart types use the Chart namespace:
|
|
1528
1452
|
|
|
1529
1453
|
```tsx
|
|
1530
|
-
import {
|
|
1531
|
-
|
|
1532
|
-
const chartConfig = {
|
|
1454
|
+
import { ChartArea, ChartBar, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis } from '@7onic-ui/react/chart'const chartConfig = {
|
|
1533
1455
|
revenue: { label: 'Revenue', color: 'var(--color-chart-1)' },
|
|
1534
1456
|
profit: { label: 'Profit', color: 'var(--color-chart-2)' },
|
|
1535
1457
|
}
|
|
1536
1458
|
|
|
1537
1459
|
{/* Line Chart */}
|
|
1538
1460
|
<Chart config={chartConfig} className="h-[300px]">
|
|
1539
|
-
<
|
|
1540
|
-
<
|
|
1541
|
-
<
|
|
1542
|
-
<
|
|
1543
|
-
<
|
|
1544
|
-
<
|
|
1461
|
+
<ChartXAxis dataKey="month" />
|
|
1462
|
+
<ChartYAxis />
|
|
1463
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1464
|
+
<ChartLegend content={<ChartLegendContent />} />
|
|
1465
|
+
<ChartLine dataKey="revenue" type="monotone" />
|
|
1466
|
+
<ChartLine dataKey="profit" type="monotone" variant="dashed" />
|
|
1545
1467
|
</Chart>
|
|
1546
1468
|
|
|
1547
1469
|
{/* Bar Chart */}
|
|
1548
1470
|
<Chart config={chartConfig} className="h-[300px]" hoverFade>
|
|
1549
|
-
<
|
|
1550
|
-
<
|
|
1551
|
-
<
|
|
1552
|
-
<
|
|
1553
|
-
<
|
|
1471
|
+
<ChartXAxis dataKey="month" />
|
|
1472
|
+
<ChartYAxis />
|
|
1473
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1474
|
+
<ChartBar dataKey="revenue" radius="md" />
|
|
1475
|
+
<ChartBar dataKey="profit" radius="md" />
|
|
1554
1476
|
</Chart>
|
|
1555
1477
|
|
|
1556
1478
|
{/* Area Chart */}
|
|
1557
1479
|
<Chart config={chartConfig} className="h-[300px]">
|
|
1558
|
-
<
|
|
1559
|
-
<
|
|
1560
|
-
<
|
|
1561
|
-
<
|
|
1480
|
+
<ChartXAxis dataKey="month" />
|
|
1481
|
+
<ChartYAxis />
|
|
1482
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1483
|
+
<ChartArea dataKey="revenue" type="monotone" variant="gradient" />
|
|
1562
1484
|
</Chart>
|
|
1563
1485
|
|
|
1564
1486
|
{/* Pie Chart */}
|
|
1565
1487
|
<Chart config={chartConfig} className="h-[300px]">
|
|
1566
|
-
<
|
|
1567
|
-
<
|
|
1488
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1489
|
+
<ChartPie data={data} dataKey="value" nameKey="name" variant="donut" label="outside" />
|
|
1568
1490
|
</Chart>
|
|
1569
1491
|
```
|
|
1570
1492
|
|
|
@@ -1629,16 +1551,14 @@ type ChartConfig = {
|
|
|
1629
1551
|
### MetricCard
|
|
1630
1552
|
|
|
1631
1553
|
```tsx
|
|
1632
|
-
import { MetricCard } from '@7onic-ui/react'
|
|
1633
|
-
|
|
1634
|
-
<
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
<
|
|
1640
|
-
<MetricCard.Trend direction="up">+12.5%</MetricCard.Trend>
|
|
1641
|
-
<MetricCard.Description>vs. last month</MetricCard.Description>
|
|
1554
|
+
import { MetricCard, MetricCardDescription, MetricCardHeader, MetricCardSymbol, MetricCardTitle, MetricCardTrend, MetricCardValue } from '@7onic-ui/react'<MetricCard>
|
|
1555
|
+
<MetricCardHeader>
|
|
1556
|
+
<MetricCardTitle>Revenue</MetricCardTitle>
|
|
1557
|
+
<MetricCardSymbol><DollarIcon /></MetricCardSymbol>
|
|
1558
|
+
</MetricCardHeader>
|
|
1559
|
+
<MetricCardValue animated>$12,450</MetricCardValue>
|
|
1560
|
+
<MetricCardTrend direction="up">+12.5%</MetricCardTrend>
|
|
1561
|
+
<MetricCardDescription>vs. last month</MetricCardDescription>
|
|
1642
1562
|
</MetricCard>
|
|
1643
1563
|
```
|
|
1644
1564
|
|
|
@@ -1701,7 +1621,7 @@ Before creating custom UI, check if 7onic already has it:
|
|
|
1701
1621
|
import { Button, Card, Input, toast } from '@7onic-ui/react'
|
|
1702
1622
|
|
|
1703
1623
|
// ✅ Chart components use a separate entry point (recharts is optional)
|
|
1704
|
-
import {
|
|
1624
|
+
import { ChartBar } from '@7onic-ui/react/chart'
|
|
1705
1625
|
|
|
1706
1626
|
// ❌ Never import from internal paths
|
|
1707
1627
|
import { Button } from '@7onic-ui/react/components/button' // WRONG
|
|
@@ -1719,16 +1639,16 @@ Compound components have **required sub-components**. Missing them causes errors
|
|
|
1719
1639
|
**Modal — required structure:**
|
|
1720
1640
|
```tsx
|
|
1721
1641
|
<Modal>
|
|
1722
|
-
<
|
|
1723
|
-
<
|
|
1724
|
-
<
|
|
1725
|
-
<
|
|
1726
|
-
<
|
|
1727
|
-
<
|
|
1728
|
-
</
|
|
1729
|
-
<
|
|
1730
|
-
</
|
|
1731
|
-
</
|
|
1642
|
+
<ModalTrigger>...</ModalTrigger>
|
|
1643
|
+
<ModalPortal> {/* ← Required for correct z-index */}
|
|
1644
|
+
<ModalOverlay /> {/* ← Required for backdrop */}
|
|
1645
|
+
<ModalContent>
|
|
1646
|
+
<ModalHeader>
|
|
1647
|
+
<ModalTitle>...</ModalTitle>
|
|
1648
|
+
</ModalHeader>
|
|
1649
|
+
<ModalBody>...</ModalBody>
|
|
1650
|
+
</ModalContent>
|
|
1651
|
+
</ModalPortal>
|
|
1732
1652
|
</Modal>
|
|
1733
1653
|
```
|
|
1734
1654
|
|
|
@@ -1736,14 +1656,14 @@ Compound components have **required sub-components**. Missing them causes errors
|
|
|
1736
1656
|
|
|
1737
1657
|
**Tooltip — Provider required:**
|
|
1738
1658
|
```tsx
|
|
1739
|
-
<
|
|
1659
|
+
<TooltipProvider> {/* ← Required, wrap app once */}
|
|
1740
1660
|
<Tooltip>
|
|
1741
|
-
<
|
|
1742
|
-
<
|
|
1743
|
-
<
|
|
1744
|
-
</
|
|
1661
|
+
<TooltipTrigger>...</TooltipTrigger>
|
|
1662
|
+
<TooltipPortal>
|
|
1663
|
+
<TooltipContent>...</TooltipContent>
|
|
1664
|
+
</TooltipPortal>
|
|
1745
1665
|
</Tooltip>
|
|
1746
|
-
</
|
|
1666
|
+
</TooltipProvider>
|
|
1747
1667
|
```
|
|
1748
1668
|
|
|
1749
1669
|
**Toast — imperative API, no compound structure:**
|
|
@@ -1772,14 +1692,14 @@ toast.success('Done')
|
|
|
1772
1692
|
</Button>
|
|
1773
1693
|
|
|
1774
1694
|
// ✅ DropdownMenu item as link
|
|
1775
|
-
<
|
|
1695
|
+
<DropdownMenuItem asChild>
|
|
1776
1696
|
<Link href="/settings">Settings</Link>
|
|
1777
|
-
</
|
|
1697
|
+
</DropdownMenuItem>
|
|
1778
1698
|
|
|
1779
1699
|
// ✅ Breadcrumb as Next.js Link
|
|
1780
|
-
<
|
|
1700
|
+
<BreadcrumbLink asChild>
|
|
1781
1701
|
<Link href="/">Home</Link>
|
|
1782
|
-
</
|
|
1702
|
+
</BreadcrumbLink>
|
|
1783
1703
|
```
|
|
1784
1704
|
|
|
1785
1705
|
**Use `asChild` when combining 7onic components with routing `<Link>`.**
|
|
@@ -1821,20 +1741,18 @@ Components that support `asChild`: Button, IconButton, Badge, Card, Modal.Trigge
|
|
|
1821
1741
|
**Use Field wrapper** for labeled form elements with validation:
|
|
1822
1742
|
|
|
1823
1743
|
```tsx
|
|
1824
|
-
import { Field, Input, Textarea
|
|
1825
|
-
|
|
1826
|
-
{/* Text input with label + error */}
|
|
1744
|
+
import { Field, FieldCharCount, FieldError, FieldLabel, Input, Textarea } from '@7onic-ui/react'{/* Text input with label + error */}
|
|
1827
1745
|
<Field error={errors.email}>
|
|
1828
|
-
<
|
|
1746
|
+
<FieldLabel required>Email</FieldLabel>
|
|
1829
1747
|
<Input placeholder="you@example.com" />
|
|
1830
|
-
<
|
|
1748
|
+
<FieldError />
|
|
1831
1749
|
</Field>
|
|
1832
1750
|
|
|
1833
1751
|
{/* Textarea with character count */}
|
|
1834
1752
|
<Field>
|
|
1835
|
-
<
|
|
1753
|
+
<FieldLabel>Bio</FieldLabel>
|
|
1836
1754
|
<Textarea maxLength={200} />
|
|
1837
|
-
<
|
|
1755
|
+
<FieldCharCount />
|
|
1838
1756
|
</Field>
|
|
1839
1757
|
```
|
|
1840
1758
|
|
|
@@ -1878,10 +1796,10 @@ const chartConfig = {
|
|
|
1878
1796
|
|
|
1879
1797
|
**All overlays use Portal for correct stacking:**
|
|
1880
1798
|
```tsx
|
|
1881
|
-
<
|
|
1882
|
-
<
|
|
1883
|
-
<
|
|
1884
|
-
</
|
|
1799
|
+
<ModalPortal>
|
|
1800
|
+
<ModalOverlay />
|
|
1801
|
+
<ModalContent>...</ModalContent>
|
|
1802
|
+
</ModalPortal>
|
|
1885
1803
|
```
|
|
1886
1804
|
|
|
1887
1805
|
**Z-index hierarchy (automatic via tokens) — never set custom z-index:**
|
|
@@ -1912,7 +1830,7 @@ const chartConfig = {
|
|
|
1912
1830
|
<IconButton aria-label="Close"><XIcon /></IconButton>
|
|
1913
1831
|
|
|
1914
1832
|
<Field>
|
|
1915
|
-
<
|
|
1833
|
+
<FieldLabel>Email</FieldLabel>
|
|
1916
1834
|
<Input />
|
|
1917
1835
|
</Field>
|
|
1918
1836
|
```
|
|
@@ -2012,9 +1930,7 @@ But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`
|
|
|
2012
1930
|
### TypingIndicator
|
|
2013
1931
|
|
|
2014
1932
|
```tsx
|
|
2015
|
-
import { TypingIndicator } from '@7onic-ui/react'
|
|
2016
|
-
|
|
2017
|
-
{/* Default — dots, muted, default size */}
|
|
1933
|
+
import { TypingIndicator } from '@7onic-ui/react'{/* Default — dots, muted, default size */}
|
|
2018
1934
|
<TypingIndicator />
|
|
2019
1935
|
|
|
2020
1936
|
{/* Cursor variant */}
|
|
@@ -2050,33 +1966,31 @@ import { TypingIndicator } from '@7onic-ui/react'
|
|
|
2050
1966
|
### QuickReply
|
|
2051
1967
|
|
|
2052
1968
|
```tsx
|
|
2053
|
-
import { QuickReply } from '@7onic-ui/react'
|
|
2054
|
-
|
|
2055
|
-
{/* Basic suggested replies */}
|
|
1969
|
+
import { QuickReply, QuickReplyItem } from '@7onic-ui/react'{/* Basic suggested replies */}
|
|
2056
1970
|
<QuickReply aria-label="Suggested replies">
|
|
2057
|
-
<
|
|
2058
|
-
<
|
|
2059
|
-
<
|
|
1971
|
+
<QuickReplyItem>About payment</QuickReplyItem>
|
|
1972
|
+
<QuickReplyItem>Shipping info</QuickReplyItem>
|
|
1973
|
+
<QuickReplyItem>Return policy</QuickReplyItem>
|
|
2060
1974
|
</QuickReply>
|
|
2061
1975
|
|
|
2062
1976
|
{/* Primary color, filled variant */}
|
|
2063
1977
|
<QuickReply color="primary" variant="filled" aria-label="Quick replies">
|
|
2064
|
-
<
|
|
2065
|
-
<
|
|
1978
|
+
<QuickReplyItem>Payment</QuickReplyItem>
|
|
1979
|
+
<QuickReplyItem>Shipping</QuickReplyItem>
|
|
2066
1980
|
</QuickReply>
|
|
2067
1981
|
|
|
2068
1982
|
{/* Wrap layout for FAQ */}
|
|
2069
1983
|
<QuickReply layout="wrap" aria-label="FAQ topics">
|
|
2070
|
-
<
|
|
2071
|
-
<
|
|
2072
|
-
<
|
|
2073
|
-
<
|
|
1984
|
+
<QuickReplyItem>Payments</QuickReplyItem>
|
|
1985
|
+
<QuickReplyItem>Shipping</QuickReplyItem>
|
|
1986
|
+
<QuickReplyItem>Returns</QuickReplyItem>
|
|
1987
|
+
<QuickReplyItem>Account</QuickReplyItem>
|
|
2074
1988
|
</QuickReply>
|
|
2075
1989
|
|
|
2076
1990
|
{/* With icon */}
|
|
2077
1991
|
<QuickReply aria-label="Actions">
|
|
2078
|
-
<
|
|
2079
|
-
<
|
|
1992
|
+
<QuickReplyItem icon={<MessageCircle />}>Contact us</QuickReplyItem>
|
|
1993
|
+
<QuickReplyItem icon={<Package />}>Track order</QuickReplyItem>
|
|
2080
1994
|
</QuickReply>
|
|
2081
1995
|
```
|
|
2082
1996
|
|
|
@@ -2101,29 +2015,27 @@ import { QuickReply } from '@7onic-ui/react'
|
|
|
2101
2015
|
### ChatInput
|
|
2102
2016
|
|
|
2103
2017
|
```tsx
|
|
2104
|
-
import { ChatInput } from '@7onic-ui/react'
|
|
2105
|
-
|
|
2106
|
-
{/* Basic uncontrolled */}
|
|
2018
|
+
import { ChatInput, ChatInputField, ChatInputSubmit } from '@7onic-ui/react'{/* Basic uncontrolled */}
|
|
2107
2019
|
<ChatInput onSubmit={(value) => console.log(value)}>
|
|
2108
|
-
<
|
|
2109
|
-
<
|
|
2020
|
+
<ChatInputField placeholder="Ask me anything..." />
|
|
2021
|
+
<ChatInputSubmit />
|
|
2110
2022
|
</ChatInput>
|
|
2111
2023
|
|
|
2112
2024
|
{/* Controlled mode */}
|
|
2113
2025
|
const [value, setValue] = useState('')
|
|
2114
2026
|
<ChatInput onSubmit={(v) => { handleSend(v); setValue('') }}>
|
|
2115
|
-
<
|
|
2027
|
+
<ChatInputField
|
|
2116
2028
|
value={value}
|
|
2117
2029
|
onChange={(e) => setValue(e.target.value)}
|
|
2118
2030
|
placeholder="Ask me anything..."
|
|
2119
2031
|
/>
|
|
2120
|
-
<
|
|
2032
|
+
<ChatInputSubmit />
|
|
2121
2033
|
</ChatInput>
|
|
2122
2034
|
|
|
2123
2035
|
{/* With loading state + stop */}
|
|
2124
2036
|
<ChatInput onSubmit={handleSubmit}>
|
|
2125
|
-
<
|
|
2126
|
-
<
|
|
2037
|
+
<ChatInputField placeholder="Ask me anything..." />
|
|
2038
|
+
<ChatInputSubmit
|
|
2127
2039
|
loading={isLoading}
|
|
2128
2040
|
onStop={() => abortController.abort()}
|
|
2129
2041
|
/>
|
|
@@ -2131,26 +2043,26 @@ const [value, setValue] = useState('')
|
|
|
2131
2043
|
|
|
2132
2044
|
{/* Character count */}
|
|
2133
2045
|
<ChatInput onSubmit={(value) => console.log(value)}>
|
|
2134
|
-
<
|
|
2135
|
-
<
|
|
2046
|
+
<ChatInputField placeholder="Ask me anything..." showCount maxLength={500} />
|
|
2047
|
+
<ChatInputSubmit />
|
|
2136
2048
|
</ChatInput>
|
|
2137
2049
|
|
|
2138
2050
|
{/* Filled variant, large, custom radius */}
|
|
2139
2051
|
<ChatInput variant="filled" size="lg" radius="2xl" onSubmit={(v) => console.log(v)}>
|
|
2140
|
-
<
|
|
2141
|
-
<
|
|
2052
|
+
<ChatInputField placeholder="Ask me anything..." maxRows={6} />
|
|
2053
|
+
<ChatInputSubmit />
|
|
2142
2054
|
</ChatInput>
|
|
2143
2055
|
|
|
2144
2056
|
{/* Inline layout (single-line field + button side by side) */}
|
|
2145
2057
|
<ChatInput layout="inline" radius="full" onSubmit={(value) => console.log(value)}>
|
|
2146
|
-
<
|
|
2147
|
-
<
|
|
2058
|
+
<ChatInputField placeholder="Message..." />
|
|
2059
|
+
<ChatInputSubmit />
|
|
2148
2060
|
</ChatInput>
|
|
2149
2061
|
|
|
2150
2062
|
{/* Inline with custom button radius */}
|
|
2151
2063
|
<ChatInput layout="inline" radius="xl" onSubmit={handleSubmit}>
|
|
2152
|
-
<
|
|
2153
|
-
<
|
|
2064
|
+
<ChatInputField placeholder="Message..." />
|
|
2065
|
+
<ChatInputSubmit buttonRadius="full" loading={isLoading} onStop={handleStop} />
|
|
2154
2066
|
</ChatInput>
|
|
2155
2067
|
```
|
|
2156
2068
|
|
|
@@ -2181,29 +2093,27 @@ const [value, setValue] = useState('')
|
|
|
2181
2093
|
### ChatMessage
|
|
2182
2094
|
|
|
2183
2095
|
```tsx
|
|
2184
|
-
import { ChatMessage } from '@7onic-ui/react'
|
|
2185
|
-
|
|
2186
|
-
{/* Assistant message */}
|
|
2096
|
+
import { ChatMessage, ChatMessageAvatar, ChatMessageContent, ChatMessageFooter } from '@7onic-ui/react'{/* Assistant message */}
|
|
2187
2097
|
<ChatMessage role="assistant">
|
|
2188
|
-
<
|
|
2098
|
+
<ChatMessageAvatar />
|
|
2189
2099
|
<div className="flex flex-col gap-1">
|
|
2190
|
-
<
|
|
2191
|
-
<
|
|
2100
|
+
<ChatMessageContent>How can I help you today?</ChatMessageContent>
|
|
2101
|
+
<ChatMessageFooter timestamp="12:34" />
|
|
2192
2102
|
</div>
|
|
2193
2103
|
</ChatMessage>
|
|
2194
2104
|
|
|
2195
2105
|
{/* User message with status */}
|
|
2196
2106
|
<ChatMessage role="user">
|
|
2197
2107
|
<div className="flex flex-col gap-1 items-end">
|
|
2198
|
-
<
|
|
2199
|
-
<
|
|
2108
|
+
<ChatMessageContent>Thank you for your help!</ChatMessageContent>
|
|
2109
|
+
<ChatMessageFooter timestamp="12:34" status="read" />
|
|
2200
2110
|
</div>
|
|
2201
2111
|
</ChatMessage>
|
|
2202
2112
|
|
|
2203
2113
|
{/* Typing animation */}
|
|
2204
2114
|
<ChatMessage role="assistant" typing>
|
|
2205
|
-
<
|
|
2206
|
-
<
|
|
2115
|
+
<ChatMessageAvatar />
|
|
2116
|
+
<ChatMessageContent />
|
|
2207
2117
|
</ChatMessage>
|
|
2208
2118
|
|
|
2209
2119
|
{/* Custom avatar + hover actions */}
|
|
@@ -2211,29 +2121,29 @@ import { ChatMessage } from '@7onic-ui/react'
|
|
|
2211
2121
|
role="assistant"
|
|
2212
2122
|
actions={<button aria-label="Copy">...</button>}
|
|
2213
2123
|
>
|
|
2214
|
-
<
|
|
2124
|
+
<ChatMessageAvatar initials="AI" />
|
|
2215
2125
|
<div className="flex flex-col gap-1">
|
|
2216
|
-
<
|
|
2217
|
-
<
|
|
2126
|
+
<ChatMessageContent>Response text here.</ChatMessageContent>
|
|
2127
|
+
<ChatMessageFooter timestamp="12:34" />
|
|
2218
2128
|
</div>
|
|
2219
2129
|
</ChatMessage>
|
|
2220
2130
|
|
|
2221
2131
|
{/* User bubble with muted color (common pattern) */}
|
|
2222
2132
|
<ChatMessage role="user" color="muted">
|
|
2223
2133
|
<div className="flex flex-col gap-1 items-end">
|
|
2224
|
-
<
|
|
2225
|
-
<
|
|
2134
|
+
<ChatMessageContent>Message text</ChatMessageContent>
|
|
2135
|
+
<ChatMessageFooter timestamp="12:34" status="read" />
|
|
2226
2136
|
</div>
|
|
2227
2137
|
</ChatMessage>
|
|
2228
2138
|
|
|
2229
2139
|
{/* History (flat) layout — full-width, no footer */}
|
|
2230
2140
|
<div className="flex flex-col gap-3">
|
|
2231
2141
|
<ChatMessage role="assistant" variant="flat">
|
|
2232
|
-
<
|
|
2233
|
-
<
|
|
2142
|
+
<ChatMessageAvatar />
|
|
2143
|
+
<ChatMessageContent className="w-full">Here is the answer.</ChatMessageContent>
|
|
2234
2144
|
</ChatMessage>
|
|
2235
2145
|
<ChatMessage role="user" variant="flat" color="muted">
|
|
2236
|
-
<
|
|
2146
|
+
<ChatMessageContent className="w-full">Thanks!</ChatMessageContent>
|
|
2237
2147
|
</ChatMessage>
|
|
2238
2148
|
</div>
|
|
2239
2149
|
```
|
|
@@ -2268,10 +2178,11 @@ import { ChatMessage } from '@7onic-ui/react'
|
|
|
2268
2178
|
|
|
2269
2179
|
## Compound Recipe (opt-in self-wrapper)
|
|
2270
2180
|
|
|
2271
|
-
v0.3.0+ library exports Named only (`<CardHeader>`). To restore dot-notation (`<Card.Header>`) in your project, add a
|
|
2181
|
+
v0.3.0+ library exports Named only (`<CardHeader>`). To restore dot-notation (`<Card.Header>`) in your project, add a wrapper file. File location is flexible (`src/lib/card.tsx`, `lib/card.tsx`, `src/components/compound/card.tsx`, etc.) — pick one. Adjust the import source to match your install method:
|
|
2182
|
+
|
|
2183
|
+
### If installed via npm (`npm install @7onic-ui/react`)
|
|
2272
2184
|
|
|
2273
2185
|
```tsx
|
|
2274
|
-
// lib/card.tsx
|
|
2275
2186
|
'use client'
|
|
2276
2187
|
import {
|
|
2277
2188
|
Card as CardBase,
|
|
@@ -2284,9 +2195,27 @@ export const Card = Object.assign(CardBase, {
|
|
|
2284
2195
|
Description: CardDescription, Content: CardContent,
|
|
2285
2196
|
Footer: CardFooter, Image: CardImage, Action: CardAction,
|
|
2286
2197
|
})
|
|
2287
|
-
// Then: <Card.Header>, <Card.Title>, etc. — Client Components only.
|
|
2288
2198
|
```
|
|
2289
2199
|
|
|
2200
|
+
### If installed via CLI (`npx 7onic add card`)
|
|
2201
|
+
|
|
2202
|
+
```tsx
|
|
2203
|
+
'use client'
|
|
2204
|
+
import {
|
|
2205
|
+
Card as CardBase,
|
|
2206
|
+
CardHeader, CardTitle, CardDescription,
|
|
2207
|
+
CardContent, CardFooter, CardImage, CardAction,
|
|
2208
|
+
} from '@/components/ui/card'
|
|
2209
|
+
|
|
2210
|
+
export const Card = Object.assign(CardBase, {
|
|
2211
|
+
Header: CardHeader, Title: CardTitle,
|
|
2212
|
+
Description: CardDescription, Content: CardContent,
|
|
2213
|
+
Footer: CardFooter, Image: CardImage, Action: CardAction,
|
|
2214
|
+
})
|
|
2215
|
+
```
|
|
2216
|
+
|
|
2217
|
+
Then: `<Card.Header>`, `<Card.Title>`, etc. — Client Components only.
|
|
2218
|
+
|
|
2290
2219
|
**Rules**:
|
|
2291
2220
|
- Wrapper file must start with `'use client'` — Next.js Client Manifest cannot track `Object.assign` properties across RSC boundaries.
|
|
2292
2221
|
- Recipe works only in Client Components. Server Components must use Named imports (`<CardHeader>`).
|