@7onic-ui/react 0.3.0 → 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 +11 -16
- package/llms.txt +340 -417
- package/package.json +4 -2
package/llms.txt
CHANGED
|
@@ -77,22 +77,16 @@ module.exports = {
|
|
|
77
77
|
}
|
|
78
78
|
```
|
|
79
79
|
|
|
80
|
-
**2-3.
|
|
81
|
-
```html
|
|
82
|
-
<body class="bg-background text-foreground">
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
**2-4. Apply user's answers:**
|
|
80
|
+
**2-3. Apply user's answers:**
|
|
86
81
|
|
|
87
82
|
- Dark mode = yes → implement dark mode toggle (see below)
|
|
88
83
|
- Custom font → load font (next/font for Next.js, CDN for Vite) + set `--font-family-sans`
|
|
89
84
|
- Locale includes Japanese → load Noto Sans JP font
|
|
90
85
|
- Locale includes Korean → load Noto Sans KR font
|
|
91
86
|
|
|
92
|
-
**2-
|
|
87
|
+
**2-4. Verify setup is complete before writing any UI code:**
|
|
93
88
|
- [ ] Packages installed (@7onic-ui/react, @7onic-ui/tokens, lucide-react)
|
|
94
89
|
- [ ] globals.css has ALL required imports in correct order
|
|
95
|
-
- [ ] Body has `bg-background text-foreground`
|
|
96
90
|
- [ ] Dark mode toggle (if selected)
|
|
97
91
|
- [ ] Font loaded (if custom)
|
|
98
92
|
- [ ] CJK fonts loaded (if applicable)
|
|
@@ -118,10 +112,8 @@ import { Badge as BadgeIcon } from 'lucide-react'
|
|
|
118
112
|
Place `<Toaster />` once in your root layout file. Without this, `toast()` calls will not render.
|
|
119
113
|
|
|
120
114
|
```tsx
|
|
121
|
-
import { Toaster } from '@7onic-ui/react'
|
|
122
|
-
|
|
123
|
-
// In your root layout (e.g., app/layout.tsx)
|
|
124
|
-
<body className="bg-background text-foreground">
|
|
115
|
+
import { Toaster } from '@7onic-ui/react'// In your root layout (e.g., app/layout.tsx)
|
|
116
|
+
<body>
|
|
125
117
|
{children}
|
|
126
118
|
<Toaster position="bottom-right" />
|
|
127
119
|
</body>
|
|
@@ -237,9 +229,7 @@ style={{ color: '#333', padding: '20px' }}
|
|
|
237
229
|
w-4 h-4, w-5 h-5 → icon-sm, icon-md
|
|
238
230
|
|
|
239
231
|
// ❌ Radix direct import
|
|
240
|
-
import * as Dialog from '@radix-ui/react-dialog' → import {
|
|
241
|
-
|
|
242
|
-
// ❌ 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
|
|
243
233
|
function MyButton(props) { return <Button {...props} /> } → Use Button directly
|
|
244
234
|
```
|
|
245
235
|
|
|
@@ -385,7 +375,7 @@ For detailed token reference, see: https://7onic.design/llms.txt
|
|
|
385
375
|
|
|
386
376
|
```tsx
|
|
387
377
|
// All components from single package
|
|
388
|
-
import { Button, Card, Input,
|
|
378
|
+
import { Button, Card, Input, toast } from '@7onic-ui/react'
|
|
389
379
|
```
|
|
390
380
|
|
|
391
381
|
## Component Import
|
|
@@ -393,9 +383,7 @@ import { Button, Card, Input, Toast } from '@7onic-ui/react'
|
|
|
393
383
|
All components use Named imports. Works in every environment (Next.js App Router RSC, Client Components, Pages Router, Vite, CRA, CJS).
|
|
394
384
|
|
|
395
385
|
```tsx
|
|
396
|
-
import { Card,
|
|
397
|
-
|
|
398
|
-
<Card>
|
|
386
|
+
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@7onic-ui/react'<Card>
|
|
399
387
|
<CardHeader>
|
|
400
388
|
<CardTitle>Title</CardTitle>
|
|
401
389
|
<CardDescription>Description</CardDescription>
|
|
@@ -428,9 +416,7 @@ Badge, Button, ButtonGroup, Checkbox, Divider, IconButton, Input, Progress, Skel
|
|
|
428
416
|
### Button
|
|
429
417
|
|
|
430
418
|
```tsx
|
|
431
|
-
import { Button } from '@7onic-ui/react'
|
|
432
|
-
|
|
433
|
-
<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>
|
|
434
420
|
<Button variant="outline" color="default" leftIcon={<Icon />}>Cancel</Button>
|
|
435
421
|
<Button loading>Processing...</Button>
|
|
436
422
|
<Button variant="link" color="primary">Learn more</Button>
|
|
@@ -459,9 +445,7 @@ import { Button } from '@7onic-ui/react'
|
|
|
459
445
|
### IconButton
|
|
460
446
|
|
|
461
447
|
```tsx
|
|
462
|
-
import { IconButton } from '@7onic-ui/react'
|
|
463
|
-
|
|
464
|
-
<IconButton variant="ghost" size="default" aria-label="Settings">
|
|
448
|
+
import { IconButton } from '@7onic-ui/react'<IconButton variant="ghost" size="default" aria-label="Settings">
|
|
465
449
|
<SettingsIcon />
|
|
466
450
|
</IconButton>
|
|
467
451
|
```
|
|
@@ -484,9 +468,7 @@ import { IconButton } from '@7onic-ui/react'
|
|
|
484
468
|
### ButtonGroup
|
|
485
469
|
|
|
486
470
|
```tsx
|
|
487
|
-
import { Button, ButtonGroup } from '@7onic-ui/react'
|
|
488
|
-
|
|
489
|
-
<ButtonGroup variant="outline" size="default" attached>
|
|
471
|
+
import { Button, ButtonGroup } from '@7onic-ui/react'<ButtonGroup variant="outline" size="default" attached>
|
|
490
472
|
<Button>Left</Button>
|
|
491
473
|
<Button>Center</Button>
|
|
492
474
|
<Button>Right</Button>
|
|
@@ -510,9 +492,7 @@ Provides context — child Buttons inherit variant/size/radius automatically.
|
|
|
510
492
|
### Input
|
|
511
493
|
|
|
512
494
|
```tsx
|
|
513
|
-
import { Input } from '@7onic-ui/react'
|
|
514
|
-
|
|
515
|
-
<Input placeholder="Email" size="default" />
|
|
495
|
+
import { Input } from '@7onic-ui/react'<Input placeholder="Email" size="default" />
|
|
516
496
|
<Input variant="filled" leftIcon={<SearchIcon />} />
|
|
517
497
|
<Input error rightIcon={<AlertIcon />} />
|
|
518
498
|
```
|
|
@@ -534,9 +514,7 @@ import { Input } from '@7onic-ui/react'
|
|
|
534
514
|
### Textarea
|
|
535
515
|
|
|
536
516
|
```tsx
|
|
537
|
-
import { Textarea } from '@7onic-ui/react'
|
|
538
|
-
|
|
539
|
-
<Textarea placeholder="Message" rows={4} resize="vertical" />
|
|
517
|
+
import { Textarea } from '@7onic-ui/react'<Textarea placeholder="Message" rows={4} resize="vertical" />
|
|
540
518
|
```
|
|
541
519
|
|
|
542
520
|
| Prop | Type | Default | Description |
|
|
@@ -554,20 +532,18 @@ import { Textarea } from '@7onic-ui/react'
|
|
|
554
532
|
### Select
|
|
555
533
|
|
|
556
534
|
```tsx
|
|
557
|
-
import { Select } from '@7onic-ui/react'
|
|
558
|
-
|
|
559
|
-
<
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
<
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
</Select.Group>
|
|
570
|
-
</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>
|
|
571
547
|
</Select>
|
|
572
548
|
```
|
|
573
549
|
|
|
@@ -586,18 +562,16 @@ import { Select } from '@7onic-ui/react'
|
|
|
586
562
|
### DropdownMenu
|
|
587
563
|
|
|
588
564
|
```tsx
|
|
589
|
-
import { DropdownMenu } from '@7onic-ui/react'
|
|
590
|
-
|
|
591
|
-
<DropdownMenu>
|
|
592
|
-
<DropdownMenu.Trigger asChild>
|
|
565
|
+
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@7onic-ui/react'<DropdownMenu>
|
|
566
|
+
<DropdownMenuTrigger asChild>
|
|
593
567
|
<Button variant="outline">Options</Button>
|
|
594
|
-
</
|
|
595
|
-
<
|
|
596
|
-
<
|
|
597
|
-
<
|
|
598
|
-
<
|
|
599
|
-
<
|
|
600
|
-
</
|
|
568
|
+
</DropdownMenuTrigger>
|
|
569
|
+
<DropdownMenuContent>
|
|
570
|
+
<DropdownMenuItem>Edit</DropdownMenuItem>
|
|
571
|
+
<DropdownMenuItem>Duplicate</DropdownMenuItem>
|
|
572
|
+
<DropdownMenuSeparator />
|
|
573
|
+
<DropdownMenuItem className="text-error">Delete</DropdownMenuItem>
|
|
574
|
+
</DropdownMenuContent>
|
|
601
575
|
</DropdownMenu>
|
|
602
576
|
```
|
|
603
577
|
|
|
@@ -615,9 +589,7 @@ import { DropdownMenu } from '@7onic-ui/react'
|
|
|
615
589
|
### Checkbox
|
|
616
590
|
|
|
617
591
|
```tsx
|
|
618
|
-
import { Checkbox } from '@7onic-ui/react'
|
|
619
|
-
|
|
620
|
-
<Checkbox label="Accept terms" />
|
|
592
|
+
import { Checkbox } from '@7onic-ui/react'<Checkbox label="Accept terms" />
|
|
621
593
|
<Checkbox size="lg" color="primary" checked />
|
|
622
594
|
<Checkbox checked="indeterminate" />
|
|
623
595
|
```
|
|
@@ -639,12 +611,10 @@ import { Checkbox } from '@7onic-ui/react'
|
|
|
639
611
|
### RadioGroup
|
|
640
612
|
|
|
641
613
|
```tsx
|
|
642
|
-
import { RadioGroup } from '@7onic-ui/react'
|
|
643
|
-
|
|
644
|
-
<
|
|
645
|
-
<
|
|
646
|
-
<RadioGroup.Item value="b" label="Option B" />
|
|
647
|
-
<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 />
|
|
648
618
|
</RadioGroup>
|
|
649
619
|
```
|
|
650
620
|
|
|
@@ -665,9 +635,7 @@ import { RadioGroup } from '@7onic-ui/react'
|
|
|
665
635
|
### Switch
|
|
666
636
|
|
|
667
637
|
```tsx
|
|
668
|
-
import { Switch } from '@7onic-ui/react'
|
|
669
|
-
|
|
670
|
-
<Switch label="Notifications" />
|
|
638
|
+
import { Switch } from '@7onic-ui/react'<Switch label="Notifications" />
|
|
671
639
|
<Switch size="lg" color="primary" defaultChecked />
|
|
672
640
|
<Switch startLabel="Off" endLabel="On" />
|
|
673
641
|
```
|
|
@@ -692,9 +660,7 @@ import { Switch } from '@7onic-ui/react'
|
|
|
692
660
|
### Toggle
|
|
693
661
|
|
|
694
662
|
```tsx
|
|
695
|
-
import { Toggle } from '@7onic-ui/react'
|
|
696
|
-
|
|
697
|
-
<Toggle variant="default" aria-label="Bold">
|
|
663
|
+
import { Toggle } from '@7onic-ui/react'<Toggle variant="default" aria-label="Bold">
|
|
698
664
|
<BoldIcon />
|
|
699
665
|
</Toggle>
|
|
700
666
|
<Toggle variant="outline" pressed>Active</Toggle>
|
|
@@ -717,12 +683,10 @@ import { Toggle } from '@7onic-ui/react'
|
|
|
717
683
|
### ToggleGroup
|
|
718
684
|
|
|
719
685
|
```tsx
|
|
720
|
-
import { ToggleGroup } from '@7onic-ui/react'
|
|
721
|
-
|
|
722
|
-
<
|
|
723
|
-
<
|
|
724
|
-
<ToggleGroup.Item value="center"><AlignCenterIcon /></ToggleGroup.Item>
|
|
725
|
-
<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>
|
|
726
690
|
</ToggleGroup>
|
|
727
691
|
```
|
|
728
692
|
|
|
@@ -745,12 +709,10 @@ import { ToggleGroup } from '@7onic-ui/react'
|
|
|
745
709
|
### Segmented
|
|
746
710
|
|
|
747
711
|
```tsx
|
|
748
|
-
import { Segmented } from '@7onic-ui/react'
|
|
749
|
-
|
|
750
|
-
<
|
|
751
|
-
<
|
|
752
|
-
<Segmented.Item value="active">Active</Segmented.Item>
|
|
753
|
-
<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>
|
|
754
716
|
</Segmented>
|
|
755
717
|
```
|
|
756
718
|
|
|
@@ -772,9 +734,7 @@ import { Segmented } from '@7onic-ui/react'
|
|
|
772
734
|
### Slider
|
|
773
735
|
|
|
774
736
|
```tsx
|
|
775
|
-
import { Slider } from '@7onic-ui/react'
|
|
776
|
-
|
|
777
|
-
<Slider defaultValue={[50]} showTooltip="auto" />
|
|
737
|
+
import { Slider } from '@7onic-ui/react'<Slider defaultValue={[50]} showTooltip="auto" />
|
|
778
738
|
<Slider defaultValue={[20, 80]} color="primary" />
|
|
779
739
|
```
|
|
780
740
|
|
|
@@ -799,18 +759,16 @@ import { Slider } from '@7onic-ui/react'
|
|
|
799
759
|
### Field (Form Wrapper)
|
|
800
760
|
|
|
801
761
|
```tsx
|
|
802
|
-
import { Field, Input, Textarea } from '@7onic-ui/react'
|
|
803
|
-
|
|
804
|
-
<Field error="Invalid email">
|
|
805
|
-
<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>
|
|
806
764
|
<Input placeholder="you@example.com" />
|
|
807
|
-
<
|
|
765
|
+
<FieldError />
|
|
808
766
|
</Field>
|
|
809
767
|
|
|
810
768
|
<Field>
|
|
811
|
-
<
|
|
769
|
+
<FieldLabel>Bio</FieldLabel>
|
|
812
770
|
<Textarea placeholder="Tell us about yourself" maxLength={200} />
|
|
813
|
-
<
|
|
771
|
+
<FieldCharCount />
|
|
814
772
|
</Field>
|
|
815
773
|
```
|
|
816
774
|
|
|
@@ -830,19 +788,17 @@ import { Field, Input, Textarea } from '@7onic-ui/react'
|
|
|
830
788
|
### Avatar
|
|
831
789
|
|
|
832
790
|
```tsx
|
|
833
|
-
import { Avatar } from '@7onic-ui/react'
|
|
834
|
-
|
|
835
|
-
<
|
|
836
|
-
<Avatar.Image src="/photo.jpg" alt="User" />
|
|
837
|
-
<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 />
|
|
838
794
|
</Avatar>
|
|
839
795
|
|
|
840
|
-
<
|
|
841
|
-
<Avatar><
|
|
842
|
-
<Avatar><
|
|
843
|
-
<Avatar><
|
|
844
|
-
<Avatar><
|
|
845
|
-
</
|
|
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>
|
|
846
802
|
```
|
|
847
803
|
|
|
848
804
|
| Prop (Root) | Type | Default | Description |
|
|
@@ -870,9 +826,7 @@ import { Avatar } from '@7onic-ui/react'
|
|
|
870
826
|
### Badge
|
|
871
827
|
|
|
872
828
|
```tsx
|
|
873
|
-
import { Badge } from '@7onic-ui/react'
|
|
874
|
-
|
|
875
|
-
<Badge variant="solid" color="primary">New</Badge>
|
|
829
|
+
import { Badge } from '@7onic-ui/react'<Badge variant="solid" color="primary">New</Badge>
|
|
876
830
|
<Badge variant="subtle" color="success" dot>Active</Badge>
|
|
877
831
|
<Badge variant="outline" removable onRemove={() => {}}>Tag</Badge>
|
|
878
832
|
```
|
|
@@ -894,17 +848,15 @@ import { Badge } from '@7onic-ui/react'
|
|
|
894
848
|
### Card
|
|
895
849
|
|
|
896
850
|
```tsx
|
|
897
|
-
import { Card } from '@7onic-ui/react'
|
|
898
|
-
|
|
899
|
-
<
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
<
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
</
|
|
906
|
-
<Card.Content>Main content</Card.Content>
|
|
907
|
-
<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>
|
|
908
860
|
</Card>
|
|
909
861
|
```
|
|
910
862
|
|
|
@@ -929,21 +881,19 @@ import { Card } from '@7onic-ui/react'
|
|
|
929
881
|
### Table
|
|
930
882
|
|
|
931
883
|
```tsx
|
|
932
|
-
import { Table } from '@7onic-ui/react'
|
|
933
|
-
|
|
934
|
-
<
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
</Table.Row>
|
|
946
|
-
</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>
|
|
947
897
|
</Table>
|
|
948
898
|
```
|
|
949
899
|
|
|
@@ -978,15 +928,13 @@ import { Table } from '@7onic-ui/react'
|
|
|
978
928
|
### Tabs
|
|
979
929
|
|
|
980
930
|
```tsx
|
|
981
|
-
import { Tabs } from '@7onic-ui/react'
|
|
982
|
-
|
|
983
|
-
<
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
</
|
|
988
|
-
<Tabs.Content value="tab1">Content 1</Tabs.Content>
|
|
989
|
-
<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>
|
|
990
938
|
</Tabs>
|
|
991
939
|
```
|
|
992
940
|
|
|
@@ -1005,17 +953,15 @@ import { Tabs } from '@7onic-ui/react'
|
|
|
1005
953
|
### Accordion
|
|
1006
954
|
|
|
1007
955
|
```tsx
|
|
1008
|
-
import { Accordion } from '@7onic-ui/react'
|
|
1009
|
-
|
|
1010
|
-
<
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
<Accordion.Content>Content 2</Accordion.Content>
|
|
1018
|
-
</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>
|
|
1019
965
|
</Accordion>
|
|
1020
966
|
```
|
|
1021
967
|
|
|
@@ -1034,9 +980,7 @@ import { Accordion } from '@7onic-ui/react'
|
|
|
1034
980
|
### Divider
|
|
1035
981
|
|
|
1036
982
|
```tsx
|
|
1037
|
-
import { Divider } from '@7onic-ui/react'
|
|
1038
|
-
|
|
1039
|
-
<Divider />
|
|
983
|
+
import { Divider } from '@7onic-ui/react'<Divider />
|
|
1040
984
|
<Divider variant="dashed" color="muted" />
|
|
1041
985
|
<Divider label="OR" labelPosition="center" />
|
|
1042
986
|
<Divider orientation="vertical" />
|
|
@@ -1058,26 +1002,24 @@ import { Divider } from '@7onic-ui/react'
|
|
|
1058
1002
|
### Modal
|
|
1059
1003
|
|
|
1060
1004
|
```tsx
|
|
1061
|
-
import { Modal,
|
|
1062
|
-
|
|
1063
|
-
<Modal>
|
|
1064
|
-
<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>
|
|
1065
1007
|
<Button>Open Modal</Button>
|
|
1066
|
-
</
|
|
1067
|
-
<
|
|
1068
|
-
<
|
|
1069
|
-
<
|
|
1070
|
-
<
|
|
1071
|
-
<
|
|
1072
|
-
<
|
|
1073
|
-
</
|
|
1074
|
-
<
|
|
1075
|
-
<
|
|
1076
|
-
<
|
|
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>
|
|
1077
1019
|
<Button color="primary">Confirm</Button>
|
|
1078
|
-
</
|
|
1079
|
-
</
|
|
1080
|
-
</
|
|
1020
|
+
</ModalFooter>
|
|
1021
|
+
</ModalContent>
|
|
1022
|
+
</ModalPortal>
|
|
1081
1023
|
</Modal>
|
|
1082
1024
|
```
|
|
1083
1025
|
|
|
@@ -1096,26 +1038,24 @@ import { Modal, Button } from '@7onic-ui/react'
|
|
|
1096
1038
|
### AlertModal
|
|
1097
1039
|
|
|
1098
1040
|
```tsx
|
|
1099
|
-
import { AlertModal, Button } from '@7onic-ui/react'
|
|
1100
|
-
|
|
1101
|
-
<AlertModal>
|
|
1102
|
-
<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>
|
|
1103
1043
|
<Button color="destructive">Delete</Button>
|
|
1104
|
-
</
|
|
1105
|
-
<
|
|
1106
|
-
<
|
|
1107
|
-
<
|
|
1108
|
-
<
|
|
1109
|
-
<
|
|
1110
|
-
<
|
|
1111
|
-
</
|
|
1112
|
-
<
|
|
1113
|
-
<
|
|
1114
|
-
<
|
|
1115
|
-
<
|
|
1116
|
-
</
|
|
1117
|
-
</
|
|
1118
|
-
</
|
|
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>
|
|
1119
1059
|
</AlertModal>
|
|
1120
1060
|
```
|
|
1121
1061
|
|
|
@@ -1132,24 +1072,22 @@ import { AlertModal, Button } from '@7onic-ui/react'
|
|
|
1132
1072
|
### Drawer
|
|
1133
1073
|
|
|
1134
1074
|
```tsx
|
|
1135
|
-
import { Drawer,
|
|
1136
|
-
|
|
1137
|
-
<Drawer>
|
|
1138
|
-
<Drawer.Trigger asChild>
|
|
1075
|
+
import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '@7onic-ui/react'<Drawer>
|
|
1076
|
+
<DrawerTrigger asChild>
|
|
1139
1077
|
<Button>Open Drawer</Button>
|
|
1140
|
-
</
|
|
1141
|
-
<
|
|
1142
|
-
<
|
|
1143
|
-
<
|
|
1144
|
-
<
|
|
1145
|
-
<
|
|
1146
|
-
</
|
|
1147
|
-
<
|
|
1148
|
-
<
|
|
1149
|
-
<
|
|
1150
|
-
</
|
|
1151
|
-
</
|
|
1152
|
-
</
|
|
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>
|
|
1153
1091
|
</Drawer>
|
|
1154
1092
|
```
|
|
1155
1093
|
|
|
@@ -1166,21 +1104,19 @@ import { Drawer, Button } from '@7onic-ui/react'
|
|
|
1166
1104
|
### Tooltip
|
|
1167
1105
|
|
|
1168
1106
|
```tsx
|
|
1169
|
-
import { Tooltip } from '@7onic-ui/react'
|
|
1170
|
-
|
|
1171
|
-
<Tooltip.Provider>
|
|
1107
|
+
import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from '@7onic-ui/react'<TooltipProvider>
|
|
1172
1108
|
<Tooltip>
|
|
1173
|
-
<
|
|
1109
|
+
<TooltipTrigger asChild>
|
|
1174
1110
|
<Button>Hover me</Button>
|
|
1175
|
-
</
|
|
1176
|
-
<
|
|
1177
|
-
<
|
|
1111
|
+
</TooltipTrigger>
|
|
1112
|
+
<TooltipPortal>
|
|
1113
|
+
<TooltipContent side="top" showArrow>
|
|
1178
1114
|
Tooltip text
|
|
1179
|
-
<
|
|
1180
|
-
</
|
|
1181
|
-
</
|
|
1115
|
+
<TooltipArrow />
|
|
1116
|
+
</TooltipContent>
|
|
1117
|
+
</TooltipPortal>
|
|
1182
1118
|
</Tooltip>
|
|
1183
|
-
</
|
|
1119
|
+
</TooltipProvider>
|
|
1184
1120
|
```
|
|
1185
1121
|
|
|
1186
1122
|
| Prop (Root) | Type | Default | Description |
|
|
@@ -1203,18 +1139,16 @@ import { Tooltip } from '@7onic-ui/react'
|
|
|
1203
1139
|
### Popover
|
|
1204
1140
|
|
|
1205
1141
|
```tsx
|
|
1206
|
-
import { Popover,
|
|
1207
|
-
|
|
1208
|
-
<Popover>
|
|
1209
|
-
<Popover.Trigger asChild>
|
|
1142
|
+
import { Button, Popover, PopoverArrow, PopoverContent, PopoverPortal, PopoverTrigger } from '@7onic-ui/react'<Popover>
|
|
1143
|
+
<PopoverTrigger asChild>
|
|
1210
1144
|
<Button variant="outline">Open</Button>
|
|
1211
|
-
</
|
|
1212
|
-
<
|
|
1213
|
-
<
|
|
1214
|
-
<
|
|
1145
|
+
</PopoverTrigger>
|
|
1146
|
+
<PopoverPortal>
|
|
1147
|
+
<PopoverContent side="bottom" showArrow showClose>
|
|
1148
|
+
<PopoverArrow />
|
|
1215
1149
|
<p>Popover content</p>
|
|
1216
|
-
</
|
|
1217
|
-
</
|
|
1150
|
+
</PopoverContent>
|
|
1151
|
+
</PopoverPortal>
|
|
1218
1152
|
</Popover>
|
|
1219
1153
|
```
|
|
1220
1154
|
|
|
@@ -1235,15 +1169,13 @@ import { Popover, Button } from '@7onic-ui/react'
|
|
|
1235
1169
|
### Alert
|
|
1236
1170
|
|
|
1237
1171
|
```tsx
|
|
1238
|
-
import { Alert } from '@7onic-ui/react'
|
|
1239
|
-
|
|
1240
|
-
<
|
|
1241
|
-
<Alert.Title>Success</Alert.Title>
|
|
1242
|
-
<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>
|
|
1243
1175
|
</Alert>
|
|
1244
1176
|
|
|
1245
1177
|
<Alert variant="filled" color="error" icon={<ErrorIcon />}>
|
|
1246
|
-
<
|
|
1178
|
+
<AlertTitle>Error</AlertTitle>
|
|
1247
1179
|
</Alert>
|
|
1248
1180
|
```
|
|
1249
1181
|
|
|
@@ -1265,9 +1197,7 @@ import { Alert } from '@7onic-ui/react'
|
|
|
1265
1197
|
### Toast (Imperative API)
|
|
1266
1198
|
|
|
1267
1199
|
```tsx
|
|
1268
|
-
import { Toaster, toast } from '@7onic-ui/react'
|
|
1269
|
-
|
|
1270
|
-
// 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)
|
|
1271
1201
|
<Toaster position="bottom-right" />
|
|
1272
1202
|
|
|
1273
1203
|
// 2. Call toast() anywhere
|
|
@@ -1315,9 +1245,7 @@ toast.dismiss() // Dismiss all
|
|
|
1315
1245
|
### Progress
|
|
1316
1246
|
|
|
1317
1247
|
```tsx
|
|
1318
|
-
import { Progress } from '@7onic-ui/react'
|
|
1319
|
-
|
|
1320
|
-
<Progress value={65} showValue />
|
|
1248
|
+
import { Progress } from '@7onic-ui/react'<Progress value={65} showValue />
|
|
1321
1249
|
<Progress type="circular" value={75} color="primary" />
|
|
1322
1250
|
<Progress variant="striped" animated value={50} />
|
|
1323
1251
|
```
|
|
@@ -1339,9 +1267,7 @@ import { Progress } from '@7onic-ui/react'
|
|
|
1339
1267
|
### Spinner
|
|
1340
1268
|
|
|
1341
1269
|
```tsx
|
|
1342
|
-
import { Spinner } from '@7onic-ui/react'
|
|
1343
|
-
|
|
1344
|
-
<Spinner />
|
|
1270
|
+
import { Spinner } from '@7onic-ui/react'<Spinner />
|
|
1345
1271
|
<Spinner variant="dots" size="lg" color="primary" />
|
|
1346
1272
|
<Spinner variant="bars" speed="slow" />
|
|
1347
1273
|
<Spinner variant="orbit" orbitStyle="morph" />
|
|
@@ -1361,9 +1287,7 @@ import { Spinner } from '@7onic-ui/react'
|
|
|
1361
1287
|
### Skeleton
|
|
1362
1288
|
|
|
1363
1289
|
```tsx
|
|
1364
|
-
import { Skeleton } from '@7onic-ui/react'
|
|
1365
|
-
|
|
1366
|
-
<Skeleton variant="text" count={3} />
|
|
1290
|
+
import { Skeleton } from '@7onic-ui/react'<Skeleton variant="text" count={3} />
|
|
1367
1291
|
<Skeleton variant="circular" width={48} height={48} />
|
|
1368
1292
|
<Skeleton variant="rectangular" width="100%" height={200} />
|
|
1369
1293
|
|
|
@@ -1391,22 +1315,20 @@ import { Skeleton } from '@7onic-ui/react'
|
|
|
1391
1315
|
### Breadcrumb
|
|
1392
1316
|
|
|
1393
1317
|
```tsx
|
|
1394
|
-
import { Breadcrumb } from '@7onic-ui/react'
|
|
1395
|
-
|
|
1396
|
-
<
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
</Breadcrumb.Item>
|
|
1409
|
-
</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>
|
|
1410
1332
|
</Breadcrumb>
|
|
1411
1333
|
```
|
|
1412
1334
|
|
|
@@ -1425,20 +1347,18 @@ import { Breadcrumb } from '@7onic-ui/react'
|
|
|
1425
1347
|
### Pagination
|
|
1426
1348
|
|
|
1427
1349
|
```tsx
|
|
1428
|
-
import { Pagination } from '@7onic-ui/react'
|
|
1429
|
-
|
|
1430
|
-
{/* 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) */}
|
|
1431
1351
|
<Pagination total={10} defaultValue={1} />
|
|
1432
1352
|
<Pagination total={10} defaultValue={1} withEdges />
|
|
1433
1353
|
<Pagination total={10} defaultValue={1} withControls={false} />
|
|
1434
1354
|
|
|
1435
1355
|
{/* Compound mode (custom layout) */}
|
|
1436
1356
|
<Pagination total={20} value={page} onChange={setPage}>
|
|
1437
|
-
<
|
|
1438
|
-
<
|
|
1439
|
-
<
|
|
1440
|
-
<
|
|
1441
|
-
</
|
|
1357
|
+
<PaginationContent>
|
|
1358
|
+
<PaginationPrevious />
|
|
1359
|
+
<PaginationItems />
|
|
1360
|
+
<PaginationNext />
|
|
1361
|
+
</PaginationContent>
|
|
1442
1362
|
</Pagination>
|
|
1443
1363
|
```
|
|
1444
1364
|
|
|
@@ -1466,34 +1386,32 @@ import { Pagination } from '@7onic-ui/react'
|
|
|
1466
1386
|
### NavigationMenu
|
|
1467
1387
|
|
|
1468
1388
|
```tsx
|
|
1469
|
-
import { NavigationMenu } from '@7onic-ui/react'
|
|
1470
|
-
|
|
1471
|
-
{/* Horizontal (header) */}
|
|
1389
|
+
import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from '@7onic-ui/react'{/* Horizontal (header) */}
|
|
1472
1390
|
<NavigationMenu orientation="horizontal">
|
|
1473
|
-
<
|
|
1474
|
-
<
|
|
1475
|
-
<
|
|
1476
|
-
</
|
|
1477
|
-
<
|
|
1478
|
-
<
|
|
1479
|
-
<
|
|
1480
|
-
<
|
|
1481
|
-
<
|
|
1482
|
-
</
|
|
1483
|
-
</
|
|
1484
|
-
</
|
|
1485
|
-
<
|
|
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 />
|
|
1486
1404
|
</NavigationMenu>
|
|
1487
1405
|
|
|
1488
1406
|
{/* Vertical (sidebar) */}
|
|
1489
1407
|
<NavigationMenu orientation="vertical" size="default">
|
|
1490
|
-
<
|
|
1491
|
-
<
|
|
1492
|
-
<
|
|
1493
|
-
<
|
|
1494
|
-
</
|
|
1495
|
-
</
|
|
1496
|
-
</
|
|
1408
|
+
<NavigationMenuList>
|
|
1409
|
+
<NavigationMenuGroup label="Main">
|
|
1410
|
+
<NavigationMenuItem>
|
|
1411
|
+
<NavigationMenuLink href="/" icon={<HomeIcon />} active>Dashboard</NavigationMenuLink>
|
|
1412
|
+
</NavigationMenuItem>
|
|
1413
|
+
</NavigationMenuGroup>
|
|
1414
|
+
</NavigationMenuList>
|
|
1497
1415
|
</NavigationMenu>
|
|
1498
1416
|
```
|
|
1499
1417
|
|
|
@@ -1533,44 +1451,42 @@ import { NavigationMenu } from '@7onic-ui/react'
|
|
|
1533
1451
|
All chart types use the Chart namespace:
|
|
1534
1452
|
|
|
1535
1453
|
```tsx
|
|
1536
|
-
import {
|
|
1537
|
-
|
|
1538
|
-
const chartConfig = {
|
|
1454
|
+
import { ChartArea, ChartBar, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis } from '@7onic-ui/react/chart'const chartConfig = {
|
|
1539
1455
|
revenue: { label: 'Revenue', color: 'var(--color-chart-1)' },
|
|
1540
1456
|
profit: { label: 'Profit', color: 'var(--color-chart-2)' },
|
|
1541
1457
|
}
|
|
1542
1458
|
|
|
1543
1459
|
{/* Line Chart */}
|
|
1544
1460
|
<Chart config={chartConfig} className="h-[300px]">
|
|
1545
|
-
<
|
|
1546
|
-
<
|
|
1547
|
-
<
|
|
1548
|
-
<
|
|
1549
|
-
<
|
|
1550
|
-
<
|
|
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" />
|
|
1551
1467
|
</Chart>
|
|
1552
1468
|
|
|
1553
1469
|
{/* Bar Chart */}
|
|
1554
1470
|
<Chart config={chartConfig} className="h-[300px]" hoverFade>
|
|
1555
|
-
<
|
|
1556
|
-
<
|
|
1557
|
-
<
|
|
1558
|
-
<
|
|
1559
|
-
<
|
|
1471
|
+
<ChartXAxis dataKey="month" />
|
|
1472
|
+
<ChartYAxis />
|
|
1473
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1474
|
+
<ChartBar dataKey="revenue" radius="md" />
|
|
1475
|
+
<ChartBar dataKey="profit" radius="md" />
|
|
1560
1476
|
</Chart>
|
|
1561
1477
|
|
|
1562
1478
|
{/* Area Chart */}
|
|
1563
1479
|
<Chart config={chartConfig} className="h-[300px]">
|
|
1564
|
-
<
|
|
1565
|
-
<
|
|
1566
|
-
<
|
|
1567
|
-
<
|
|
1480
|
+
<ChartXAxis dataKey="month" />
|
|
1481
|
+
<ChartYAxis />
|
|
1482
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1483
|
+
<ChartArea dataKey="revenue" type="monotone" variant="gradient" />
|
|
1568
1484
|
</Chart>
|
|
1569
1485
|
|
|
1570
1486
|
{/* Pie Chart */}
|
|
1571
1487
|
<Chart config={chartConfig} className="h-[300px]">
|
|
1572
|
-
<
|
|
1573
|
-
<
|
|
1488
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
1489
|
+
<ChartPie data={data} dataKey="value" nameKey="name" variant="donut" label="outside" />
|
|
1574
1490
|
</Chart>
|
|
1575
1491
|
```
|
|
1576
1492
|
|
|
@@ -1635,16 +1551,14 @@ type ChartConfig = {
|
|
|
1635
1551
|
### MetricCard
|
|
1636
1552
|
|
|
1637
1553
|
```tsx
|
|
1638
|
-
import { MetricCard } from '@7onic-ui/react'
|
|
1639
|
-
|
|
1640
|
-
<
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
<
|
|
1646
|
-
<MetricCard.Trend direction="up">+12.5%</MetricCard.Trend>
|
|
1647
|
-
<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>
|
|
1648
1562
|
</MetricCard>
|
|
1649
1563
|
```
|
|
1650
1564
|
|
|
@@ -1707,7 +1621,7 @@ Before creating custom UI, check if 7onic already has it:
|
|
|
1707
1621
|
import { Button, Card, Input, toast } from '@7onic-ui/react'
|
|
1708
1622
|
|
|
1709
1623
|
// ✅ Chart components use a separate entry point (recharts is optional)
|
|
1710
|
-
import {
|
|
1624
|
+
import { ChartBar } from '@7onic-ui/react/chart'
|
|
1711
1625
|
|
|
1712
1626
|
// ❌ Never import from internal paths
|
|
1713
1627
|
import { Button } from '@7onic-ui/react/components/button' // WRONG
|
|
@@ -1725,16 +1639,16 @@ Compound components have **required sub-components**. Missing them causes errors
|
|
|
1725
1639
|
**Modal — required structure:**
|
|
1726
1640
|
```tsx
|
|
1727
1641
|
<Modal>
|
|
1728
|
-
<
|
|
1729
|
-
<
|
|
1730
|
-
<
|
|
1731
|
-
<
|
|
1732
|
-
<
|
|
1733
|
-
<
|
|
1734
|
-
</
|
|
1735
|
-
<
|
|
1736
|
-
</
|
|
1737
|
-
</
|
|
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>
|
|
1738
1652
|
</Modal>
|
|
1739
1653
|
```
|
|
1740
1654
|
|
|
@@ -1742,14 +1656,14 @@ Compound components have **required sub-components**. Missing them causes errors
|
|
|
1742
1656
|
|
|
1743
1657
|
**Tooltip — Provider required:**
|
|
1744
1658
|
```tsx
|
|
1745
|
-
<
|
|
1659
|
+
<TooltipProvider> {/* ← Required, wrap app once */}
|
|
1746
1660
|
<Tooltip>
|
|
1747
|
-
<
|
|
1748
|
-
<
|
|
1749
|
-
<
|
|
1750
|
-
</
|
|
1661
|
+
<TooltipTrigger>...</TooltipTrigger>
|
|
1662
|
+
<TooltipPortal>
|
|
1663
|
+
<TooltipContent>...</TooltipContent>
|
|
1664
|
+
</TooltipPortal>
|
|
1751
1665
|
</Tooltip>
|
|
1752
|
-
</
|
|
1666
|
+
</TooltipProvider>
|
|
1753
1667
|
```
|
|
1754
1668
|
|
|
1755
1669
|
**Toast — imperative API, no compound structure:**
|
|
@@ -1778,14 +1692,14 @@ toast.success('Done')
|
|
|
1778
1692
|
</Button>
|
|
1779
1693
|
|
|
1780
1694
|
// ✅ DropdownMenu item as link
|
|
1781
|
-
<
|
|
1695
|
+
<DropdownMenuItem asChild>
|
|
1782
1696
|
<Link href="/settings">Settings</Link>
|
|
1783
|
-
</
|
|
1697
|
+
</DropdownMenuItem>
|
|
1784
1698
|
|
|
1785
1699
|
// ✅ Breadcrumb as Next.js Link
|
|
1786
|
-
<
|
|
1700
|
+
<BreadcrumbLink asChild>
|
|
1787
1701
|
<Link href="/">Home</Link>
|
|
1788
|
-
</
|
|
1702
|
+
</BreadcrumbLink>
|
|
1789
1703
|
```
|
|
1790
1704
|
|
|
1791
1705
|
**Use `asChild` when combining 7onic components with routing `<Link>`.**
|
|
@@ -1827,20 +1741,18 @@ Components that support `asChild`: Button, IconButton, Badge, Card, Modal.Trigge
|
|
|
1827
1741
|
**Use Field wrapper** for labeled form elements with validation:
|
|
1828
1742
|
|
|
1829
1743
|
```tsx
|
|
1830
|
-
import { Field, Input, Textarea
|
|
1831
|
-
|
|
1832
|
-
{/* Text input with label + error */}
|
|
1744
|
+
import { Field, FieldCharCount, FieldError, FieldLabel, Input, Textarea } from '@7onic-ui/react'{/* Text input with label + error */}
|
|
1833
1745
|
<Field error={errors.email}>
|
|
1834
|
-
<
|
|
1746
|
+
<FieldLabel required>Email</FieldLabel>
|
|
1835
1747
|
<Input placeholder="you@example.com" />
|
|
1836
|
-
<
|
|
1748
|
+
<FieldError />
|
|
1837
1749
|
</Field>
|
|
1838
1750
|
|
|
1839
1751
|
{/* Textarea with character count */}
|
|
1840
1752
|
<Field>
|
|
1841
|
-
<
|
|
1753
|
+
<FieldLabel>Bio</FieldLabel>
|
|
1842
1754
|
<Textarea maxLength={200} />
|
|
1843
|
-
<
|
|
1755
|
+
<FieldCharCount />
|
|
1844
1756
|
</Field>
|
|
1845
1757
|
```
|
|
1846
1758
|
|
|
@@ -1884,10 +1796,10 @@ const chartConfig = {
|
|
|
1884
1796
|
|
|
1885
1797
|
**All overlays use Portal for correct stacking:**
|
|
1886
1798
|
```tsx
|
|
1887
|
-
<
|
|
1888
|
-
<
|
|
1889
|
-
<
|
|
1890
|
-
</
|
|
1799
|
+
<ModalPortal>
|
|
1800
|
+
<ModalOverlay />
|
|
1801
|
+
<ModalContent>...</ModalContent>
|
|
1802
|
+
</ModalPortal>
|
|
1891
1803
|
```
|
|
1892
1804
|
|
|
1893
1805
|
**Z-index hierarchy (automatic via tokens) — never set custom z-index:**
|
|
@@ -1918,7 +1830,7 @@ const chartConfig = {
|
|
|
1918
1830
|
<IconButton aria-label="Close"><XIcon /></IconButton>
|
|
1919
1831
|
|
|
1920
1832
|
<Field>
|
|
1921
|
-
<
|
|
1833
|
+
<FieldLabel>Email</FieldLabel>
|
|
1922
1834
|
<Input />
|
|
1923
1835
|
</Field>
|
|
1924
1836
|
```
|
|
@@ -2018,9 +1930,7 @@ But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`
|
|
|
2018
1930
|
### TypingIndicator
|
|
2019
1931
|
|
|
2020
1932
|
```tsx
|
|
2021
|
-
import { TypingIndicator } from '@7onic-ui/react'
|
|
2022
|
-
|
|
2023
|
-
{/* Default — dots, muted, default size */}
|
|
1933
|
+
import { TypingIndicator } from '@7onic-ui/react'{/* Default — dots, muted, default size */}
|
|
2024
1934
|
<TypingIndicator />
|
|
2025
1935
|
|
|
2026
1936
|
{/* Cursor variant */}
|
|
@@ -2056,33 +1966,31 @@ import { TypingIndicator } from '@7onic-ui/react'
|
|
|
2056
1966
|
### QuickReply
|
|
2057
1967
|
|
|
2058
1968
|
```tsx
|
|
2059
|
-
import { QuickReply } from '@7onic-ui/react'
|
|
2060
|
-
|
|
2061
|
-
{/* Basic suggested replies */}
|
|
1969
|
+
import { QuickReply, QuickReplyItem } from '@7onic-ui/react'{/* Basic suggested replies */}
|
|
2062
1970
|
<QuickReply aria-label="Suggested replies">
|
|
2063
|
-
<
|
|
2064
|
-
<
|
|
2065
|
-
<
|
|
1971
|
+
<QuickReplyItem>About payment</QuickReplyItem>
|
|
1972
|
+
<QuickReplyItem>Shipping info</QuickReplyItem>
|
|
1973
|
+
<QuickReplyItem>Return policy</QuickReplyItem>
|
|
2066
1974
|
</QuickReply>
|
|
2067
1975
|
|
|
2068
1976
|
{/* Primary color, filled variant */}
|
|
2069
1977
|
<QuickReply color="primary" variant="filled" aria-label="Quick replies">
|
|
2070
|
-
<
|
|
2071
|
-
<
|
|
1978
|
+
<QuickReplyItem>Payment</QuickReplyItem>
|
|
1979
|
+
<QuickReplyItem>Shipping</QuickReplyItem>
|
|
2072
1980
|
</QuickReply>
|
|
2073
1981
|
|
|
2074
1982
|
{/* Wrap layout for FAQ */}
|
|
2075
1983
|
<QuickReply layout="wrap" aria-label="FAQ topics">
|
|
2076
|
-
<
|
|
2077
|
-
<
|
|
2078
|
-
<
|
|
2079
|
-
<
|
|
1984
|
+
<QuickReplyItem>Payments</QuickReplyItem>
|
|
1985
|
+
<QuickReplyItem>Shipping</QuickReplyItem>
|
|
1986
|
+
<QuickReplyItem>Returns</QuickReplyItem>
|
|
1987
|
+
<QuickReplyItem>Account</QuickReplyItem>
|
|
2080
1988
|
</QuickReply>
|
|
2081
1989
|
|
|
2082
1990
|
{/* With icon */}
|
|
2083
1991
|
<QuickReply aria-label="Actions">
|
|
2084
|
-
<
|
|
2085
|
-
<
|
|
1992
|
+
<QuickReplyItem icon={<MessageCircle />}>Contact us</QuickReplyItem>
|
|
1993
|
+
<QuickReplyItem icon={<Package />}>Track order</QuickReplyItem>
|
|
2086
1994
|
</QuickReply>
|
|
2087
1995
|
```
|
|
2088
1996
|
|
|
@@ -2107,29 +2015,27 @@ import { QuickReply } from '@7onic-ui/react'
|
|
|
2107
2015
|
### ChatInput
|
|
2108
2016
|
|
|
2109
2017
|
```tsx
|
|
2110
|
-
import { ChatInput } from '@7onic-ui/react'
|
|
2111
|
-
|
|
2112
|
-
{/* Basic uncontrolled */}
|
|
2018
|
+
import { ChatInput, ChatInputField, ChatInputSubmit } from '@7onic-ui/react'{/* Basic uncontrolled */}
|
|
2113
2019
|
<ChatInput onSubmit={(value) => console.log(value)}>
|
|
2114
|
-
<
|
|
2115
|
-
<
|
|
2020
|
+
<ChatInputField placeholder="Ask me anything..." />
|
|
2021
|
+
<ChatInputSubmit />
|
|
2116
2022
|
</ChatInput>
|
|
2117
2023
|
|
|
2118
2024
|
{/* Controlled mode */}
|
|
2119
2025
|
const [value, setValue] = useState('')
|
|
2120
2026
|
<ChatInput onSubmit={(v) => { handleSend(v); setValue('') }}>
|
|
2121
|
-
<
|
|
2027
|
+
<ChatInputField
|
|
2122
2028
|
value={value}
|
|
2123
2029
|
onChange={(e) => setValue(e.target.value)}
|
|
2124
2030
|
placeholder="Ask me anything..."
|
|
2125
2031
|
/>
|
|
2126
|
-
<
|
|
2032
|
+
<ChatInputSubmit />
|
|
2127
2033
|
</ChatInput>
|
|
2128
2034
|
|
|
2129
2035
|
{/* With loading state + stop */}
|
|
2130
2036
|
<ChatInput onSubmit={handleSubmit}>
|
|
2131
|
-
<
|
|
2132
|
-
<
|
|
2037
|
+
<ChatInputField placeholder="Ask me anything..." />
|
|
2038
|
+
<ChatInputSubmit
|
|
2133
2039
|
loading={isLoading}
|
|
2134
2040
|
onStop={() => abortController.abort()}
|
|
2135
2041
|
/>
|
|
@@ -2137,26 +2043,26 @@ const [value, setValue] = useState('')
|
|
|
2137
2043
|
|
|
2138
2044
|
{/* Character count */}
|
|
2139
2045
|
<ChatInput onSubmit={(value) => console.log(value)}>
|
|
2140
|
-
<
|
|
2141
|
-
<
|
|
2046
|
+
<ChatInputField placeholder="Ask me anything..." showCount maxLength={500} />
|
|
2047
|
+
<ChatInputSubmit />
|
|
2142
2048
|
</ChatInput>
|
|
2143
2049
|
|
|
2144
2050
|
{/* Filled variant, large, custom radius */}
|
|
2145
2051
|
<ChatInput variant="filled" size="lg" radius="2xl" onSubmit={(v) => console.log(v)}>
|
|
2146
|
-
<
|
|
2147
|
-
<
|
|
2052
|
+
<ChatInputField placeholder="Ask me anything..." maxRows={6} />
|
|
2053
|
+
<ChatInputSubmit />
|
|
2148
2054
|
</ChatInput>
|
|
2149
2055
|
|
|
2150
2056
|
{/* Inline layout (single-line field + button side by side) */}
|
|
2151
2057
|
<ChatInput layout="inline" radius="full" onSubmit={(value) => console.log(value)}>
|
|
2152
|
-
<
|
|
2153
|
-
<
|
|
2058
|
+
<ChatInputField placeholder="Message..." />
|
|
2059
|
+
<ChatInputSubmit />
|
|
2154
2060
|
</ChatInput>
|
|
2155
2061
|
|
|
2156
2062
|
{/* Inline with custom button radius */}
|
|
2157
2063
|
<ChatInput layout="inline" radius="xl" onSubmit={handleSubmit}>
|
|
2158
|
-
<
|
|
2159
|
-
<
|
|
2064
|
+
<ChatInputField placeholder="Message..." />
|
|
2065
|
+
<ChatInputSubmit buttonRadius="full" loading={isLoading} onStop={handleStop} />
|
|
2160
2066
|
</ChatInput>
|
|
2161
2067
|
```
|
|
2162
2068
|
|
|
@@ -2187,29 +2093,27 @@ const [value, setValue] = useState('')
|
|
|
2187
2093
|
### ChatMessage
|
|
2188
2094
|
|
|
2189
2095
|
```tsx
|
|
2190
|
-
import { ChatMessage } from '@7onic-ui/react'
|
|
2191
|
-
|
|
2192
|
-
{/* Assistant message */}
|
|
2096
|
+
import { ChatMessage, ChatMessageAvatar, ChatMessageContent, ChatMessageFooter } from '@7onic-ui/react'{/* Assistant message */}
|
|
2193
2097
|
<ChatMessage role="assistant">
|
|
2194
|
-
<
|
|
2098
|
+
<ChatMessageAvatar />
|
|
2195
2099
|
<div className="flex flex-col gap-1">
|
|
2196
|
-
<
|
|
2197
|
-
<
|
|
2100
|
+
<ChatMessageContent>How can I help you today?</ChatMessageContent>
|
|
2101
|
+
<ChatMessageFooter timestamp="12:34" />
|
|
2198
2102
|
</div>
|
|
2199
2103
|
</ChatMessage>
|
|
2200
2104
|
|
|
2201
2105
|
{/* User message with status */}
|
|
2202
2106
|
<ChatMessage role="user">
|
|
2203
2107
|
<div className="flex flex-col gap-1 items-end">
|
|
2204
|
-
<
|
|
2205
|
-
<
|
|
2108
|
+
<ChatMessageContent>Thank you for your help!</ChatMessageContent>
|
|
2109
|
+
<ChatMessageFooter timestamp="12:34" status="read" />
|
|
2206
2110
|
</div>
|
|
2207
2111
|
</ChatMessage>
|
|
2208
2112
|
|
|
2209
2113
|
{/* Typing animation */}
|
|
2210
2114
|
<ChatMessage role="assistant" typing>
|
|
2211
|
-
<
|
|
2212
|
-
<
|
|
2115
|
+
<ChatMessageAvatar />
|
|
2116
|
+
<ChatMessageContent />
|
|
2213
2117
|
</ChatMessage>
|
|
2214
2118
|
|
|
2215
2119
|
{/* Custom avatar + hover actions */}
|
|
@@ -2217,29 +2121,29 @@ import { ChatMessage } from '@7onic-ui/react'
|
|
|
2217
2121
|
role="assistant"
|
|
2218
2122
|
actions={<button aria-label="Copy">...</button>}
|
|
2219
2123
|
>
|
|
2220
|
-
<
|
|
2124
|
+
<ChatMessageAvatar initials="AI" />
|
|
2221
2125
|
<div className="flex flex-col gap-1">
|
|
2222
|
-
<
|
|
2223
|
-
<
|
|
2126
|
+
<ChatMessageContent>Response text here.</ChatMessageContent>
|
|
2127
|
+
<ChatMessageFooter timestamp="12:34" />
|
|
2224
2128
|
</div>
|
|
2225
2129
|
</ChatMessage>
|
|
2226
2130
|
|
|
2227
2131
|
{/* User bubble with muted color (common pattern) */}
|
|
2228
2132
|
<ChatMessage role="user" color="muted">
|
|
2229
2133
|
<div className="flex flex-col gap-1 items-end">
|
|
2230
|
-
<
|
|
2231
|
-
<
|
|
2134
|
+
<ChatMessageContent>Message text</ChatMessageContent>
|
|
2135
|
+
<ChatMessageFooter timestamp="12:34" status="read" />
|
|
2232
2136
|
</div>
|
|
2233
2137
|
</ChatMessage>
|
|
2234
2138
|
|
|
2235
2139
|
{/* History (flat) layout — full-width, no footer */}
|
|
2236
2140
|
<div className="flex flex-col gap-3">
|
|
2237
2141
|
<ChatMessage role="assistant" variant="flat">
|
|
2238
|
-
<
|
|
2239
|
-
<
|
|
2142
|
+
<ChatMessageAvatar />
|
|
2143
|
+
<ChatMessageContent className="w-full">Here is the answer.</ChatMessageContent>
|
|
2240
2144
|
</ChatMessage>
|
|
2241
2145
|
<ChatMessage role="user" variant="flat" color="muted">
|
|
2242
|
-
<
|
|
2146
|
+
<ChatMessageContent className="w-full">Thanks!</ChatMessageContent>
|
|
2243
2147
|
</ChatMessage>
|
|
2244
2148
|
</div>
|
|
2245
2149
|
```
|
|
@@ -2274,10 +2178,11 @@ import { ChatMessage } from '@7onic-ui/react'
|
|
|
2274
2178
|
|
|
2275
2179
|
## Compound Recipe (opt-in self-wrapper)
|
|
2276
2180
|
|
|
2277
|
-
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`)
|
|
2278
2184
|
|
|
2279
2185
|
```tsx
|
|
2280
|
-
// lib/card.tsx
|
|
2281
2186
|
'use client'
|
|
2282
2187
|
import {
|
|
2283
2188
|
Card as CardBase,
|
|
@@ -2290,9 +2195,27 @@ export const Card = Object.assign(CardBase, {
|
|
|
2290
2195
|
Description: CardDescription, Content: CardContent,
|
|
2291
2196
|
Footer: CardFooter, Image: CardImage, Action: CardAction,
|
|
2292
2197
|
})
|
|
2293
|
-
// Then: <Card.Header>, <Card.Title>, etc. — Client Components only.
|
|
2294
2198
|
```
|
|
2295
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
|
+
|
|
2296
2219
|
**Rules**:
|
|
2297
2220
|
- Wrapper file must start with `'use client'` — Next.js Client Manifest cannot track `Object.assign` properties across RSC boundaries.
|
|
2298
2221
|
- Recipe works only in Client Components. Server Components must use Named imports (`<CardHeader>`).
|