@7onic-ui/react 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +7 -9
  2. package/llms.txt +365 -415
  3. package/package.json +4 -2
package/llms.txt CHANGED
@@ -53,8 +53,6 @@ npm install @7onic-ui/react @7onic-ui/tokens lucide-react
53
53
  @import "@7onic-ui/tokens/tailwind/v4-theme.css";
54
54
  ```
55
55
 
56
- > **Vite + Tailwind v4**: `npx 7onic init` auto-injects `@import "tailwindcss"` if not present, and automatically configures the `@/` path alias (patches `tsconfig.app.json` + `vite.config.ts`, installs `@types/node`). `npx 7onic add` auto-injects `@source "./components/ui"` (or relative path) so Tailwind scans your component files. No manual setup needed.
57
-
58
56
  **Existing project with Tailwind v3** (detect from tailwind.config.js):
59
57
  ```css
60
58
  /* globals.css */
@@ -77,16 +75,37 @@ module.exports = {
77
75
  }
78
76
  ```
79
77
 
80
- **2-3. Apply user's answers:**
78
+ **2-3. Vite users only — clean up `src/index.css`:**
79
+
80
+ Vite's default template generates CSS that overrides 7onic token styles. Two paths:
81
+
82
+ - **CLI path (`npx 7onic init`) — recommended**: auto-handles all cleanup below, plus injects `@import "tailwindcss"` (v4), configures `@/` path alias (patches `tsconfig.app.json` + `vite.config.ts`, installs `@types/node`), and `npx 7onic add` auto-injects `@source "./components/ui"`. Prompts user, creates `.bak` backup.
83
+ - **npm-only path (manual)**: delete the following blocks from `src/index.css`:
84
+ - `:root { font-family: system-ui, ... }` block
85
+ - `body { display: flex; place-items: center; ... }` block
86
+ - `button { background-color: #1a1a1a; ... }` block and all other element-level rules (`a { color: #646cff }`, etc.)
87
+ - `@media (prefers-color-scheme: light) { ... }` block
88
+
89
+ After deletion, `src/index.css` should contain only the token imports added in step 2-2. For v4 also add `@import "tailwindcss"` at the top, and configure `@/` alias manually.
90
+
91
+ **2-4. Apply user's answers:**
81
92
 
82
93
  - Dark mode = yes → implement dark mode toggle (see below)
83
- - Custom font → load font (next/font for Next.js, CDN for Vite) + set `--font-family-sans`
94
+ - Custom font → load font:
95
+ - **Next.js**: use `next/font/google`
96
+ - **Vite / Remix**: use Fontsource (`npm install @fontsource/inter`, then `import '@fontsource/inter/400.css'` in `src/main.tsx`) or Google Fonts CDN
97
+ - Then set `--font-family-sans` in CSS
84
98
  - Locale includes Japanese → load Noto Sans JP font
99
+ - Fontsource: `npm install @fontsource/noto-sans-jp` → import in `src/main.tsx` (Vite) or `app/layout.tsx` (Next.js)
100
+ - CDN: Google Fonts link tag in `index.html`
85
101
  - Locale includes Korean → load Noto Sans KR font
102
+ - Fontsource: `npm install @fontsource/noto-sans-kr` → import in `src/main.tsx` (Vite) or `app/layout.tsx` (Next.js)
103
+ - CDN: Google Fonts link tag in `index.html`
86
104
 
87
- **2-4. Verify setup is complete before writing any UI code:**
105
+ **2-5. Verify setup is complete before writing any UI code:**
88
106
  - [ ] Packages installed (@7onic-ui/react, @7onic-ui/tokens, lucide-react)
89
- - [ ] globals.css has ALL required imports in correct order
107
+ - [ ] globals.css / src/index.css has ALL required imports in correct order
108
+ - [ ] (Vite only) Vite template CSS blocks deleted from src/index.css
90
109
  - [ ] Dark mode toggle (if selected)
91
110
  - [ ] Font loaded (if custom)
92
111
  - [ ] CJK fonts loaded (if applicable)
@@ -112,9 +131,7 @@ import { Badge as BadgeIcon } from 'lucide-react'
112
131
  Place `<Toaster />` once in your root layout file. Without this, `toast()` calls will not render.
113
132
 
114
133
  ```tsx
115
- import { Toaster } from '@7onic-ui/react'
116
-
117
- // In your root layout (e.g., app/layout.tsx)
134
+ import { Toaster } from '@7onic-ui/react'// In your root layout (e.g., app/layout.tsx)
118
135
  <body>
119
136
  {children}
120
137
  <Toaster position="bottom-right" />
@@ -231,9 +248,7 @@ style={{ color: '#333', padding: '20px' }}
231
248
  w-4 h-4, w-5 h-5 → icon-sm, icon-md
232
249
 
233
250
  // ❌ Radix direct import
234
- import * as Dialog from '@radix-ui/react-dialog' → import { Modal } from '@7onic-ui/react'
235
-
236
- // ❌ Unnecessary component wrappers
251
+ import * as Dialog from '@radix-ui/react-dialog' → import { Badge, Button, Card, Input, Table } from '@7onic-ui/react'// ❌ Unnecessary component wrappers
237
252
  function MyButton(props) { return <Button {...props} /> } → Use Button directly
238
253
  ```
239
254
 
@@ -273,7 +288,7 @@ The token system covers all UI needs out of the box. As AI, use existing tokens
273
288
  If the user needs custom values beyond existing tokens, they will handle it separately.
274
289
  Customization guide: https://7onic.design/components/theming
275
290
 
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`, `reset.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
291
+ **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
292
 
278
293
  ### Self-Check (after writing ANY code)
279
294
 
@@ -379,7 +394,7 @@ For detailed token reference, see: https://7onic.design/llms.txt
379
394
 
380
395
  ```tsx
381
396
  // All components from single package
382
- import { Button, Card, Input, Toast } from '@7onic-ui/react'
397
+ import { Button, Card, Input, toast } from '@7onic-ui/react'
383
398
  ```
384
399
 
385
400
  ## Component Import
@@ -387,9 +402,7 @@ import { Button, Card, Input, Toast } from '@7onic-ui/react'
387
402
  All components use Named imports. Works in every environment (Next.js App Router RSC, Client Components, Pages Router, Vite, CRA, CJS).
388
403
 
389
404
  ```tsx
390
- import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@7onic-ui/react'
391
-
392
- <Card>
405
+ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@7onic-ui/react'<Card>
393
406
  <CardHeader>
394
407
  <CardTitle>Title</CardTitle>
395
408
  <CardDescription>Description</CardDescription>
@@ -422,9 +435,7 @@ Badge, Button, ButtonGroup, Checkbox, Divider, IconButton, Input, Progress, Skel
422
435
  ### Button
423
436
 
424
437
  ```tsx
425
- import { Button } from '@7onic-ui/react'
426
-
427
- <Button variant="solid" color="primary" size="default">Submit</Button>
438
+ import { Button } from '@7onic-ui/react'<Button variant="solid" color="primary" size="default">Submit</Button>
428
439
  <Button variant="outline" color="default" leftIcon={<Icon />}>Cancel</Button>
429
440
  <Button loading>Processing...</Button>
430
441
  <Button variant="link" color="primary">Learn more</Button>
@@ -453,9 +464,7 @@ import { Button } from '@7onic-ui/react'
453
464
  ### IconButton
454
465
 
455
466
  ```tsx
456
- import { IconButton } from '@7onic-ui/react'
457
-
458
- <IconButton variant="ghost" size="default" aria-label="Settings">
467
+ import { IconButton } from '@7onic-ui/react'<IconButton variant="ghost" size="default" aria-label="Settings">
459
468
  <SettingsIcon />
460
469
  </IconButton>
461
470
  ```
@@ -478,9 +487,7 @@ import { IconButton } from '@7onic-ui/react'
478
487
  ### ButtonGroup
479
488
 
480
489
  ```tsx
481
- import { Button, ButtonGroup } from '@7onic-ui/react'
482
-
483
- <ButtonGroup variant="outline" size="default" attached>
490
+ import { Button, ButtonGroup } from '@7onic-ui/react'<ButtonGroup variant="outline" size="default" attached>
484
491
  <Button>Left</Button>
485
492
  <Button>Center</Button>
486
493
  <Button>Right</Button>
@@ -504,9 +511,7 @@ Provides context — child Buttons inherit variant/size/radius automatically.
504
511
  ### Input
505
512
 
506
513
  ```tsx
507
- import { Input } from '@7onic-ui/react'
508
-
509
- <Input placeholder="Email" size="default" />
514
+ import { Input } from '@7onic-ui/react'<Input placeholder="Email" size="default" />
510
515
  <Input variant="filled" leftIcon={<SearchIcon />} />
511
516
  <Input error rightIcon={<AlertIcon />} />
512
517
  ```
@@ -528,9 +533,7 @@ import { Input } from '@7onic-ui/react'
528
533
  ### Textarea
529
534
 
530
535
  ```tsx
531
- import { Textarea } from '@7onic-ui/react'
532
-
533
- <Textarea placeholder="Message" rows={4} resize="vertical" />
536
+ import { Textarea } from '@7onic-ui/react'<Textarea placeholder="Message" rows={4} resize="vertical" />
534
537
  ```
535
538
 
536
539
  | Prop | Type | Default | Description |
@@ -548,20 +551,18 @@ import { Textarea } from '@7onic-ui/react'
548
551
  ### Select
549
552
 
550
553
  ```tsx
551
- import { Select } from '@7onic-ui/react'
552
-
553
- <Select>
554
- <Select.Trigger>
555
- <Select.Value placeholder="Choose option" />
556
- </Select.Trigger>
557
- <Select.Content>
558
- <Select.Item value="a">Option A</Select.Item>
559
- <Select.Item value="b">Option B</Select.Item>
560
- <Select.Group>
561
- <Select.Label>Group</Select.Label>
562
- <Select.Item value="c">Option C</Select.Item>
563
- </Select.Group>
564
- </Select.Content>
554
+ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@7onic-ui/react'<Select>
555
+ <SelectTrigger>
556
+ <SelectValue placeholder="Choose option" />
557
+ </SelectTrigger>
558
+ <SelectContent>
559
+ <SelectItem value="a">Option A</SelectItem>
560
+ <SelectItem value="b">Option B</SelectItem>
561
+ <SelectGroup>
562
+ <SelectLabel>Group</SelectLabel>
563
+ <SelectItem value="c">Option C</SelectItem>
564
+ </SelectGroup>
565
+ </SelectContent>
565
566
  </Select>
566
567
  ```
567
568
 
@@ -580,18 +581,16 @@ import { Select } from '@7onic-ui/react'
580
581
  ### DropdownMenu
581
582
 
582
583
  ```tsx
583
- import { DropdownMenu } from '@7onic-ui/react'
584
-
585
- <DropdownMenu>
586
- <DropdownMenu.Trigger asChild>
584
+ import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@7onic-ui/react'<DropdownMenu>
585
+ <DropdownMenuTrigger asChild>
587
586
  <Button variant="outline">Options</Button>
588
- </DropdownMenu.Trigger>
589
- <DropdownMenu.Content>
590
- <DropdownMenu.Item>Edit</DropdownMenu.Item>
591
- <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
592
- <DropdownMenu.Separator />
593
- <DropdownMenu.Item className="text-error">Delete</DropdownMenu.Item>
594
- </DropdownMenu.Content>
587
+ </DropdownMenuTrigger>
588
+ <DropdownMenuContent>
589
+ <DropdownMenuItem>Edit</DropdownMenuItem>
590
+ <DropdownMenuItem>Duplicate</DropdownMenuItem>
591
+ <DropdownMenuSeparator />
592
+ <DropdownMenuItem className="text-error">Delete</DropdownMenuItem>
593
+ </DropdownMenuContent>
595
594
  </DropdownMenu>
596
595
  ```
597
596
 
@@ -609,9 +608,7 @@ import { DropdownMenu } from '@7onic-ui/react'
609
608
  ### Checkbox
610
609
 
611
610
  ```tsx
612
- import { Checkbox } from '@7onic-ui/react'
613
-
614
- <Checkbox label="Accept terms" />
611
+ import { Checkbox } from '@7onic-ui/react'<Checkbox label="Accept terms" />
615
612
  <Checkbox size="lg" color="primary" checked />
616
613
  <Checkbox checked="indeterminate" />
617
614
  ```
@@ -633,12 +630,10 @@ import { Checkbox } from '@7onic-ui/react'
633
630
  ### RadioGroup
634
631
 
635
632
  ```tsx
636
- import { RadioGroup } from '@7onic-ui/react'
637
-
638
- <RadioGroup defaultValue="a">
639
- <RadioGroup.Item value="a" label="Option A" />
640
- <RadioGroup.Item value="b" label="Option B" />
641
- <RadioGroup.Item value="c" label="Option C" disabled />
633
+ import { RadioGroup, RadioGroupItem } from '@7onic-ui/react'<RadioGroup defaultValue="a">
634
+ <RadioGroupItem value="a" label="Option A" />
635
+ <RadioGroupItem value="b" label="Option B" />
636
+ <RadioGroupItem value="c" label="Option C" disabled />
642
637
  </RadioGroup>
643
638
  ```
644
639
 
@@ -659,9 +654,7 @@ import { RadioGroup } from '@7onic-ui/react'
659
654
  ### Switch
660
655
 
661
656
  ```tsx
662
- import { Switch } from '@7onic-ui/react'
663
-
664
- <Switch label="Notifications" />
657
+ import { Switch } from '@7onic-ui/react'<Switch label="Notifications" />
665
658
  <Switch size="lg" color="primary" defaultChecked />
666
659
  <Switch startLabel="Off" endLabel="On" />
667
660
  ```
@@ -686,9 +679,7 @@ import { Switch } from '@7onic-ui/react'
686
679
  ### Toggle
687
680
 
688
681
  ```tsx
689
- import { Toggle } from '@7onic-ui/react'
690
-
691
- <Toggle variant="default" aria-label="Bold">
682
+ import { Toggle } from '@7onic-ui/react'<Toggle variant="default" aria-label="Bold">
692
683
  <BoldIcon />
693
684
  </Toggle>
694
685
  <Toggle variant="outline" pressed>Active</Toggle>
@@ -711,12 +702,10 @@ import { Toggle } from '@7onic-ui/react'
711
702
  ### ToggleGroup
712
703
 
713
704
  ```tsx
714
- import { ToggleGroup } from '@7onic-ui/react'
715
-
716
- <ToggleGroup type="single" defaultValue="center">
717
- <ToggleGroup.Item value="left"><AlignLeftIcon /></ToggleGroup.Item>
718
- <ToggleGroup.Item value="center"><AlignCenterIcon /></ToggleGroup.Item>
719
- <ToggleGroup.Item value="right"><AlignRightIcon /></ToggleGroup.Item>
705
+ import { ToggleGroup, ToggleGroupItem } from '@7onic-ui/react'<ToggleGroup type="single" defaultValue="center">
706
+ <ToggleGroupItem value="left"><AlignLeftIcon /></ToggleGroupItem>
707
+ <ToggleGroupItem value="center"><AlignCenterIcon /></ToggleGroupItem>
708
+ <ToggleGroupItem value="right"><AlignRightIcon /></ToggleGroupItem>
720
709
  </ToggleGroup>
721
710
  ```
722
711
 
@@ -739,12 +728,10 @@ import { ToggleGroup } from '@7onic-ui/react'
739
728
  ### Segmented
740
729
 
741
730
  ```tsx
742
- import { Segmented } from '@7onic-ui/react'
743
-
744
- <Segmented defaultValue="all">
745
- <Segmented.Item value="all">All</Segmented.Item>
746
- <Segmented.Item value="active">Active</Segmented.Item>
747
- <Segmented.Item value="inactive">Inactive</Segmented.Item>
731
+ import { Segmented, SegmentedItem } from '@7onic-ui/react'<Segmented defaultValue="all">
732
+ <SegmentedItem value="all">All</SegmentedItem>
733
+ <SegmentedItem value="active">Active</SegmentedItem>
734
+ <SegmentedItem value="inactive">Inactive</SegmentedItem>
748
735
  </Segmented>
749
736
  ```
750
737
 
@@ -766,9 +753,7 @@ import { Segmented } from '@7onic-ui/react'
766
753
  ### Slider
767
754
 
768
755
  ```tsx
769
- import { Slider } from '@7onic-ui/react'
770
-
771
- <Slider defaultValue={[50]} showTooltip="auto" />
756
+ import { Slider } from '@7onic-ui/react'<Slider defaultValue={[50]} showTooltip="auto" />
772
757
  <Slider defaultValue={[20, 80]} color="primary" />
773
758
  ```
774
759
 
@@ -793,18 +778,16 @@ import { Slider } from '@7onic-ui/react'
793
778
  ### Field (Form Wrapper)
794
779
 
795
780
  ```tsx
796
- import { Field, Input, Textarea } from '@7onic-ui/react'
797
-
798
- <Field error="Invalid email">
799
- <Field.Label required>Email</Field.Label>
781
+ import { Field, FieldCharCount, FieldError, FieldLabel, Input, Textarea } from '@7onic-ui/react'<Field error="Invalid email">
782
+ <FieldLabel required>Email</FieldLabel>
800
783
  <Input placeholder="you@example.com" />
801
- <Field.Error />
784
+ <FieldError />
802
785
  </Field>
803
786
 
804
787
  <Field>
805
- <Field.Label>Bio</Field.Label>
788
+ <FieldLabel>Bio</FieldLabel>
806
789
  <Textarea placeholder="Tell us about yourself" maxLength={200} />
807
- <Field.CharCount />
790
+ <FieldCharCount />
808
791
  </Field>
809
792
  ```
810
793
 
@@ -824,19 +807,17 @@ import { Field, Input, Textarea } from '@7onic-ui/react'
824
807
  ### Avatar
825
808
 
826
809
  ```tsx
827
- import { Avatar } from '@7onic-ui/react'
828
-
829
- <Avatar size="default">
830
- <Avatar.Image src="/photo.jpg" alt="User" />
831
- <Avatar.Fallback name="John Doe" colorized />
810
+ import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@7onic-ui/react'<Avatar size="default">
811
+ <AvatarImage src="/photo.jpg" alt="User" />
812
+ <AvatarFallback name="John Doe" colorized />
832
813
  </Avatar>
833
814
 
834
- <Avatar.Group max={3}>
835
- <Avatar><Avatar.Image src="/a.jpg" /><Avatar.Fallback>A</Avatar.Fallback></Avatar>
836
- <Avatar><Avatar.Image src="/b.jpg" /><Avatar.Fallback>B</Avatar.Fallback></Avatar>
837
- <Avatar><Avatar.Image src="/c.jpg" /><Avatar.Fallback>C</Avatar.Fallback></Avatar>
838
- <Avatar><Avatar.Fallback>+2</Avatar.Fallback></Avatar>
839
- </Avatar.Group>
815
+ <AvatarGroup max={3}>
816
+ <Avatar><AvatarImage src="/a.jpg" /><AvatarFallback>A</AvatarFallback></Avatar>
817
+ <Avatar><AvatarImage src="/b.jpg" /><AvatarFallback>B</AvatarFallback></Avatar>
818
+ <Avatar><AvatarImage src="/c.jpg" /><AvatarFallback>C</AvatarFallback></Avatar>
819
+ <Avatar><AvatarFallback>+2</AvatarFallback></Avatar>
820
+ </AvatarGroup>
840
821
  ```
841
822
 
842
823
  | Prop (Root) | Type | Default | Description |
@@ -864,9 +845,7 @@ import { Avatar } from '@7onic-ui/react'
864
845
  ### Badge
865
846
 
866
847
  ```tsx
867
- import { Badge } from '@7onic-ui/react'
868
-
869
- <Badge variant="solid" color="primary">New</Badge>
848
+ import { Badge } from '@7onic-ui/react'<Badge variant="solid" color="primary">New</Badge>
870
849
  <Badge variant="subtle" color="success" dot>Active</Badge>
871
850
  <Badge variant="outline" removable onRemove={() => {}}>Tag</Badge>
872
851
  ```
@@ -888,17 +867,15 @@ import { Badge } from '@7onic-ui/react'
888
867
  ### Card
889
868
 
890
869
  ```tsx
891
- import { Card } from '@7onic-ui/react'
892
-
893
- <Card variant="default" interactive>
894
- <Card.Image src="/cover.jpg" overlay overlayOpacity={40} />
895
- <Card.Header>
896
- <Card.Title icon={<StarIcon />}>Featured</Card.Title>
897
- <Card.Description>Card description</Card.Description>
898
- <Card.Action><IconButton variant="ghost"><MoreIcon /></IconButton></Card.Action>
899
- </Card.Header>
900
- <Card.Content>Main content</Card.Content>
901
- <Card.Footer>Footer actions</Card.Footer>
870
+ import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle, IconButton } from '@7onic-ui/react'<Card variant="default" interactive>
871
+ <CardImage src="/cover.jpg" overlay overlayOpacity={40} />
872
+ <CardHeader>
873
+ <CardTitle icon={<StarIcon />}>Featured</CardTitle>
874
+ <CardDescription>Card description</CardDescription>
875
+ <CardAction><IconButton variant="ghost"><MoreIcon /></IconButton></CardAction>
876
+ </CardHeader>
877
+ <CardContent>Main content</CardContent>
878
+ <CardFooter>Footer actions</CardFooter>
902
879
  </Card>
903
880
  ```
904
881
 
@@ -923,21 +900,19 @@ import { Card } from '@7onic-ui/react'
923
900
  ### Table
924
901
 
925
902
  ```tsx
926
- import { Table } from '@7onic-ui/react'
927
-
928
- <Table variant="default" stickyHeader>
929
- <Table.Header>
930
- <Table.Row>
931
- <Table.Head sortable sortDirection="asc" onSort={() => {}}>Name</Table.Head>
932
- <Table.Head align="right">Amount</Table.Head>
933
- </Table.Row>
934
- </Table.Header>
935
- <Table.Body>
936
- <Table.Row interactive>
937
- <Table.Cell>John</Table.Cell>
938
- <Table.Cell align="right">$100</Table.Cell>
939
- </Table.Row>
940
- </Table.Body>
903
+ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@7onic-ui/react'<Table variant="default" stickyHeader>
904
+ <TableHeader>
905
+ <TableRow>
906
+ <TableHead sortable sortDirection="asc" onSort={() => {}}>Name</TableHead>
907
+ <TableHead align="right">Amount</TableHead>
908
+ </TableRow>
909
+ </TableHeader>
910
+ <TableBody>
911
+ <TableRow interactive>
912
+ <TableCell>John</TableCell>
913
+ <TableCell align="right">$100</TableCell>
914
+ </TableRow>
915
+ </TableBody>
941
916
  </Table>
942
917
  ```
943
918
 
@@ -972,15 +947,13 @@ import { Table } from '@7onic-ui/react'
972
947
  ### Tabs
973
948
 
974
949
  ```tsx
975
- import { Tabs } from '@7onic-ui/react'
976
-
977
- <Tabs defaultValue="tab1">
978
- <Tabs.List variant="line" size="default">
979
- <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
980
- <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
981
- </Tabs.List>
982
- <Tabs.Content value="tab1">Content 1</Tabs.Content>
983
- <Tabs.Content value="tab2">Content 2</Tabs.Content>
950
+ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@7onic-ui/react'<Tabs defaultValue="tab1">
951
+ <TabsList variant="line" size="default">
952
+ <TabsTrigger value="tab1">Tab 1</TabsTrigger>
953
+ <TabsTrigger value="tab2">Tab 2</TabsTrigger>
954
+ </TabsList>
955
+ <TabsContent value="tab1">Content 1</TabsContent>
956
+ <TabsContent value="tab2">Content 2</TabsContent>
984
957
  </Tabs>
985
958
  ```
986
959
 
@@ -999,17 +972,15 @@ import { Tabs } from '@7onic-ui/react'
999
972
  ### Accordion
1000
973
 
1001
974
  ```tsx
1002
- import { Accordion } from '@7onic-ui/react'
1003
-
1004
- <Accordion type="single" collapsible defaultValue="item-1">
1005
- <Accordion.Item value="item-1">
1006
- <Accordion.Trigger>Section 1</Accordion.Trigger>
1007
- <Accordion.Content>Content 1</Accordion.Content>
1008
- </Accordion.Item>
1009
- <Accordion.Item value="item-2">
1010
- <Accordion.Trigger>Section 2</Accordion.Trigger>
1011
- <Accordion.Content>Content 2</Accordion.Content>
1012
- </Accordion.Item>
975
+ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@7onic-ui/react'<Accordion type="single" collapsible defaultValue="item-1">
976
+ <AccordionItem value="item-1">
977
+ <AccordionTrigger>Section 1</AccordionTrigger>
978
+ <AccordionContent>Content 1</AccordionContent>
979
+ </AccordionItem>
980
+ <AccordionItem value="item-2">
981
+ <AccordionTrigger>Section 2</AccordionTrigger>
982
+ <AccordionContent>Content 2</AccordionContent>
983
+ </AccordionItem>
1013
984
  </Accordion>
1014
985
  ```
1015
986
 
@@ -1028,9 +999,7 @@ import { Accordion } from '@7onic-ui/react'
1028
999
  ### Divider
1029
1000
 
1030
1001
  ```tsx
1031
- import { Divider } from '@7onic-ui/react'
1032
-
1033
- <Divider />
1002
+ import { Divider } from '@7onic-ui/react'<Divider />
1034
1003
  <Divider variant="dashed" color="muted" />
1035
1004
  <Divider label="OR" labelPosition="center" />
1036
1005
  <Divider orientation="vertical" />
@@ -1052,26 +1021,24 @@ import { Divider } from '@7onic-ui/react'
1052
1021
  ### Modal
1053
1022
 
1054
1023
  ```tsx
1055
- import { Modal, Button } from '@7onic-ui/react'
1056
-
1057
- <Modal>
1058
- <Modal.Trigger asChild>
1024
+ import { Button, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger } from '@7onic-ui/react'<Modal>
1025
+ <ModalTrigger asChild>
1059
1026
  <Button>Open Modal</Button>
1060
- </Modal.Trigger>
1061
- <Modal.Portal>
1062
- <Modal.Overlay />
1063
- <Modal.Content size="md">
1064
- <Modal.Header>
1065
- <Modal.Title>Confirm</Modal.Title>
1066
- <Modal.Description>Are you sure?</Modal.Description>
1067
- </Modal.Header>
1068
- <Modal.Body>Modal body content</Modal.Body>
1069
- <Modal.Footer>
1070
- <Modal.Close asChild><Button variant="outline">Cancel</Button></Modal.Close>
1027
+ </ModalTrigger>
1028
+ <ModalPortal>
1029
+ <ModalOverlay />
1030
+ <ModalContent size="md">
1031
+ <ModalHeader>
1032
+ <ModalTitle>Confirm</ModalTitle>
1033
+ <ModalDescription>Are you sure?</ModalDescription>
1034
+ </ModalHeader>
1035
+ <ModalBody>Modal body content</ModalBody>
1036
+ <ModalFooter>
1037
+ <ModalClose asChild><Button variant="outline">Cancel</Button></ModalClose>
1071
1038
  <Button color="primary">Confirm</Button>
1072
- </Modal.Footer>
1073
- </Modal.Content>
1074
- </Modal.Portal>
1039
+ </ModalFooter>
1040
+ </ModalContent>
1041
+ </ModalPortal>
1075
1042
  </Modal>
1076
1043
  ```
1077
1044
 
@@ -1090,26 +1057,24 @@ import { Modal, Button } from '@7onic-ui/react'
1090
1057
  ### AlertModal
1091
1058
 
1092
1059
  ```tsx
1093
- import { AlertModal, Button } from '@7onic-ui/react'
1094
-
1095
- <AlertModal>
1096
- <AlertModal.Trigger asChild>
1060
+ import { AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, Button } from '@7onic-ui/react'<AlertModal>
1061
+ <AlertModalTrigger asChild>
1097
1062
  <Button color="destructive">Delete</Button>
1098
- </AlertModal.Trigger>
1099
- <AlertModal.Portal>
1100
- <AlertModal.Overlay />
1101
- <AlertModal.Content size="sm">
1102
- <AlertModal.Header>
1103
- <AlertModal.Title>Delete item?</AlertModal.Title>
1104
- <AlertModal.Description>This action cannot be undone.</AlertModal.Description>
1105
- </AlertModal.Header>
1106
- <AlertModal.Body>Further confirmation details</AlertModal.Body>
1107
- <AlertModal.Footer>
1108
- <AlertModal.Cancel asChild><Button variant="outline">Cancel</Button></AlertModal.Cancel>
1109
- <AlertModal.Action asChild><Button color="destructive">Delete</Button></AlertModal.Action>
1110
- </AlertModal.Footer>
1111
- </AlertModal.Content>
1112
- </AlertModal.Portal>
1063
+ </AlertModalTrigger>
1064
+ <AlertModalPortal>
1065
+ <AlertModalOverlay />
1066
+ <AlertModalContent size="sm">
1067
+ <AlertModalHeader>
1068
+ <AlertModalTitle>Delete item?</AlertModalTitle>
1069
+ <AlertModalDescription>This action cannot be undone.</AlertModalDescription>
1070
+ </AlertModalHeader>
1071
+ <AlertModalBody>Further confirmation details</AlertModalBody>
1072
+ <AlertModalFooter>
1073
+ <AlertModalCancel asChild><Button variant="outline">Cancel</Button></AlertModalCancel>
1074
+ <AlertModalAction asChild><Button color="destructive">Delete</Button></AlertModalAction>
1075
+ </AlertModalFooter>
1076
+ </AlertModalContent>
1077
+ </AlertModalPortal>
1113
1078
  </AlertModal>
1114
1079
  ```
1115
1080
 
@@ -1126,24 +1091,22 @@ import { AlertModal, Button } from '@7onic-ui/react'
1126
1091
  ### Drawer
1127
1092
 
1128
1093
  ```tsx
1129
- import { Drawer, Button } from '@7onic-ui/react'
1130
-
1131
- <Drawer>
1132
- <Drawer.Trigger asChild>
1094
+ import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '@7onic-ui/react'<Drawer>
1095
+ <DrawerTrigger asChild>
1133
1096
  <Button>Open Drawer</Button>
1134
- </Drawer.Trigger>
1135
- <Drawer.Portal>
1136
- <Drawer.Overlay />
1137
- <Drawer.Content side="right" size="md">
1138
- <Drawer.Header>
1139
- <Drawer.Title>Settings</Drawer.Title>
1140
- </Drawer.Header>
1141
- <Drawer.Body>Content</Drawer.Body>
1142
- <Drawer.Footer>
1143
- <Drawer.Close asChild><Button variant="outline">Close</Button></Drawer.Close>
1144
- </Drawer.Footer>
1145
- </Drawer.Content>
1146
- </Drawer.Portal>
1097
+ </DrawerTrigger>
1098
+ <DrawerPortal>
1099
+ <DrawerOverlay />
1100
+ <DrawerContent side="right" size="md">
1101
+ <DrawerHeader>
1102
+ <DrawerTitle>Settings</DrawerTitle>
1103
+ </DrawerHeader>
1104
+ <DrawerBody>Content</DrawerBody>
1105
+ <DrawerFooter>
1106
+ <DrawerClose asChild><Button variant="outline">Close</Button></DrawerClose>
1107
+ </DrawerFooter>
1108
+ </DrawerContent>
1109
+ </DrawerPortal>
1147
1110
  </Drawer>
1148
1111
  ```
1149
1112
 
@@ -1160,21 +1123,19 @@ import { Drawer, Button } from '@7onic-ui/react'
1160
1123
  ### Tooltip
1161
1124
 
1162
1125
  ```tsx
1163
- import { Tooltip } from '@7onic-ui/react'
1164
-
1165
- <Tooltip.Provider>
1126
+ import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from '@7onic-ui/react'<TooltipProvider>
1166
1127
  <Tooltip>
1167
- <Tooltip.Trigger asChild>
1128
+ <TooltipTrigger asChild>
1168
1129
  <Button>Hover me</Button>
1169
- </Tooltip.Trigger>
1170
- <Tooltip.Portal>
1171
- <Tooltip.Content side="top" showArrow>
1130
+ </TooltipTrigger>
1131
+ <TooltipPortal>
1132
+ <TooltipContent side="top" showArrow>
1172
1133
  Tooltip text
1173
- <Tooltip.Arrow />
1174
- </Tooltip.Content>
1175
- </Tooltip.Portal>
1134
+ <TooltipArrow />
1135
+ </TooltipContent>
1136
+ </TooltipPortal>
1176
1137
  </Tooltip>
1177
- </Tooltip.Provider>
1138
+ </TooltipProvider>
1178
1139
  ```
1179
1140
 
1180
1141
  | Prop (Root) | Type | Default | Description |
@@ -1197,18 +1158,16 @@ import { Tooltip } from '@7onic-ui/react'
1197
1158
  ### Popover
1198
1159
 
1199
1160
  ```tsx
1200
- import { Popover, Button } from '@7onic-ui/react'
1201
-
1202
- <Popover>
1203
- <Popover.Trigger asChild>
1161
+ import { Button, Popover, PopoverArrow, PopoverContent, PopoverPortal, PopoverTrigger } from '@7onic-ui/react'<Popover>
1162
+ <PopoverTrigger asChild>
1204
1163
  <Button variant="outline">Open</Button>
1205
- </Popover.Trigger>
1206
- <Popover.Portal>
1207
- <Popover.Content side="bottom" showArrow showClose>
1208
- <Popover.Arrow />
1164
+ </PopoverTrigger>
1165
+ <PopoverPortal>
1166
+ <PopoverContent side="bottom" showArrow showClose>
1167
+ <PopoverArrow />
1209
1168
  <p>Popover content</p>
1210
- </Popover.Content>
1211
- </Popover.Portal>
1169
+ </PopoverContent>
1170
+ </PopoverPortal>
1212
1171
  </Popover>
1213
1172
  ```
1214
1173
 
@@ -1229,15 +1188,13 @@ import { Popover, Button } from '@7onic-ui/react'
1229
1188
  ### Alert
1230
1189
 
1231
1190
  ```tsx
1232
- import { Alert } from '@7onic-ui/react'
1233
-
1234
- <Alert color="success" closable onClose={() => {}}>
1235
- <Alert.Title>Success</Alert.Title>
1236
- <Alert.Description>Operation completed.</Alert.Description>
1191
+ import { Alert, AlertDescription, AlertTitle } from '@7onic-ui/react'<Alert color="success" closable onClose={() => {}}>
1192
+ <AlertTitle>Success</AlertTitle>
1193
+ <AlertDescription>Operation completed.</AlertDescription>
1237
1194
  </Alert>
1238
1195
 
1239
1196
  <Alert variant="filled" color="error" icon={<ErrorIcon />}>
1240
- <Alert.Title>Error</Alert.Title>
1197
+ <AlertTitle>Error</AlertTitle>
1241
1198
  </Alert>
1242
1199
  ```
1243
1200
 
@@ -1259,9 +1216,7 @@ import { Alert } from '@7onic-ui/react'
1259
1216
  ### Toast (Imperative API)
1260
1217
 
1261
1218
  ```tsx
1262
- import { Toaster, toast } from '@7onic-ui/react'
1263
-
1264
- // 1. Add Toaster provider to your app layout (once)
1219
+ import { Toaster, toast } from '@7onic-ui/react'// 1. Add Toaster provider to your app layout (once)
1265
1220
  <Toaster position="bottom-right" />
1266
1221
 
1267
1222
  // 2. Call toast() anywhere
@@ -1309,9 +1264,7 @@ toast.dismiss() // Dismiss all
1309
1264
  ### Progress
1310
1265
 
1311
1266
  ```tsx
1312
- import { Progress } from '@7onic-ui/react'
1313
-
1314
- <Progress value={65} showValue />
1267
+ import { Progress } from '@7onic-ui/react'<Progress value={65} showValue />
1315
1268
  <Progress type="circular" value={75} color="primary" />
1316
1269
  <Progress variant="striped" animated value={50} />
1317
1270
  ```
@@ -1333,9 +1286,7 @@ import { Progress } from '@7onic-ui/react'
1333
1286
  ### Spinner
1334
1287
 
1335
1288
  ```tsx
1336
- import { Spinner } from '@7onic-ui/react'
1337
-
1338
- <Spinner />
1289
+ import { Spinner } from '@7onic-ui/react'<Spinner />
1339
1290
  <Spinner variant="dots" size="lg" color="primary" />
1340
1291
  <Spinner variant="bars" speed="slow" />
1341
1292
  <Spinner variant="orbit" orbitStyle="morph" />
@@ -1355,9 +1306,7 @@ import { Spinner } from '@7onic-ui/react'
1355
1306
  ### Skeleton
1356
1307
 
1357
1308
  ```tsx
1358
- import { Skeleton } from '@7onic-ui/react'
1359
-
1360
- <Skeleton variant="text" count={3} />
1309
+ import { Skeleton } from '@7onic-ui/react'<Skeleton variant="text" count={3} />
1361
1310
  <Skeleton variant="circular" width={48} height={48} />
1362
1311
  <Skeleton variant="rectangular" width="100%" height={200} />
1363
1312
 
@@ -1385,22 +1334,20 @@ import { Skeleton } from '@7onic-ui/react'
1385
1334
  ### Breadcrumb
1386
1335
 
1387
1336
  ```tsx
1388
- import { Breadcrumb } from '@7onic-ui/react'
1389
-
1390
- <Breadcrumb>
1391
- <Breadcrumb.List>
1392
- <Breadcrumb.Item>
1393
- <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
1394
- </Breadcrumb.Item>
1395
- <Breadcrumb.Separator />
1396
- <Breadcrumb.Item>
1397
- <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
1398
- </Breadcrumb.Item>
1399
- <Breadcrumb.Separator />
1400
- <Breadcrumb.Item>
1401
- <Breadcrumb.Page>Current</Breadcrumb.Page>
1402
- </Breadcrumb.Item>
1403
- </Breadcrumb.List>
1337
+ import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@7onic-ui/react'<Breadcrumb>
1338
+ <BreadcrumbList>
1339
+ <BreadcrumbItem>
1340
+ <BreadcrumbLink href="/">Home</BreadcrumbLink>
1341
+ </BreadcrumbItem>
1342
+ <BreadcrumbSeparator />
1343
+ <BreadcrumbItem>
1344
+ <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
1345
+ </BreadcrumbItem>
1346
+ <BreadcrumbSeparator />
1347
+ <BreadcrumbItem>
1348
+ <BreadcrumbPage>Current</BreadcrumbPage>
1349
+ </BreadcrumbItem>
1350
+ </BreadcrumbList>
1404
1351
  </Breadcrumb>
1405
1352
  ```
1406
1353
 
@@ -1419,20 +1366,18 @@ import { Breadcrumb } from '@7onic-ui/react'
1419
1366
  ### Pagination
1420
1367
 
1421
1368
  ```tsx
1422
- import { Pagination } from '@7onic-ui/react'
1423
-
1424
- {/* Quick mode — withControls (default: true), withEdges (default: false) */}
1369
+ import { Pagination, PaginationContent, PaginationItems, PaginationNext, PaginationPrevious } from '@7onic-ui/react'{/* Quick mode — withControls (default: true), withEdges (default: false) */}
1425
1370
  <Pagination total={10} defaultValue={1} />
1426
1371
  <Pagination total={10} defaultValue={1} withEdges />
1427
1372
  <Pagination total={10} defaultValue={1} withControls={false} />
1428
1373
 
1429
1374
  {/* Compound mode (custom layout) */}
1430
1375
  <Pagination total={20} value={page} onChange={setPage}>
1431
- <Pagination.Content>
1432
- <Pagination.Previous />
1433
- <Pagination.Items />
1434
- <Pagination.Next />
1435
- </Pagination.Content>
1376
+ <PaginationContent>
1377
+ <PaginationPrevious />
1378
+ <PaginationItems />
1379
+ <PaginationNext />
1380
+ </PaginationContent>
1436
1381
  </Pagination>
1437
1382
  ```
1438
1383
 
@@ -1460,34 +1405,32 @@ import { Pagination } from '@7onic-ui/react'
1460
1405
  ### NavigationMenu
1461
1406
 
1462
1407
  ```tsx
1463
- import { NavigationMenu } from '@7onic-ui/react'
1464
-
1465
- {/* Horizontal (header) */}
1408
+ import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from '@7onic-ui/react'{/* Horizontal (header) */}
1466
1409
  <NavigationMenu orientation="horizontal">
1467
- <NavigationMenu.List>
1468
- <NavigationMenu.Item>
1469
- <NavigationMenu.Link href="/" active>Home</NavigationMenu.Link>
1470
- </NavigationMenu.Item>
1471
- <NavigationMenu.Item>
1472
- <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
1473
- <NavigationMenu.Content>
1474
- <NavigationMenu.Link href="/product-a">Product A</NavigationMenu.Link>
1475
- <NavigationMenu.Link href="/product-b">Product B</NavigationMenu.Link>
1476
- </NavigationMenu.Content>
1477
- </NavigationMenu.Item>
1478
- </NavigationMenu.List>
1479
- <NavigationMenu.Viewport />
1410
+ <NavigationMenuList>
1411
+ <NavigationMenuItem>
1412
+ <NavigationMenuLink href="/" active>Home</NavigationMenuLink>
1413
+ </NavigationMenuItem>
1414
+ <NavigationMenuItem>
1415
+ <NavigationMenuTrigger>Products</NavigationMenuTrigger>
1416
+ <NavigationMenuContent>
1417
+ <NavigationMenuLink href="/product-a">Product A</NavigationMenuLink>
1418
+ <NavigationMenuLink href="/product-b">Product B</NavigationMenuLink>
1419
+ </NavigationMenuContent>
1420
+ </NavigationMenuItem>
1421
+ </NavigationMenuList>
1422
+ <NavigationMenuViewport />
1480
1423
  </NavigationMenu>
1481
1424
 
1482
1425
  {/* Vertical (sidebar) */}
1483
1426
  <NavigationMenu orientation="vertical" size="default">
1484
- <NavigationMenu.List>
1485
- <NavigationMenu.Group label="Main">
1486
- <NavigationMenu.Item>
1487
- <NavigationMenu.Link href="/" icon={<HomeIcon />} active>Dashboard</NavigationMenu.Link>
1488
- </NavigationMenu.Item>
1489
- </NavigationMenu.Group>
1490
- </NavigationMenu.List>
1427
+ <NavigationMenuList>
1428
+ <NavigationMenuGroup label="Main">
1429
+ <NavigationMenuItem>
1430
+ <NavigationMenuLink href="/" icon={<HomeIcon />} active>Dashboard</NavigationMenuLink>
1431
+ </NavigationMenuItem>
1432
+ </NavigationMenuGroup>
1433
+ </NavigationMenuList>
1491
1434
  </NavigationMenu>
1492
1435
  ```
1493
1436
 
@@ -1527,44 +1470,42 @@ import { NavigationMenu } from '@7onic-ui/react'
1527
1470
  All chart types use the Chart namespace:
1528
1471
 
1529
1472
  ```tsx
1530
- import { Chart } from '@7onic-ui/react/chart'
1531
-
1532
- const chartConfig = {
1473
+ import { ChartArea, ChartBar, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis } from '@7onic-ui/react/chart'const chartConfig = {
1533
1474
  revenue: { label: 'Revenue', color: 'var(--color-chart-1)' },
1534
1475
  profit: { label: 'Profit', color: 'var(--color-chart-2)' },
1535
1476
  }
1536
1477
 
1537
1478
  {/* Line Chart */}
1538
1479
  <Chart config={chartConfig} className="h-[300px]">
1539
- <Chart.XAxis dataKey="month" />
1540
- <Chart.YAxis />
1541
- <Chart.Tooltip content={<Chart.TooltipContent />} />
1542
- <Chart.Legend content={<Chart.LegendContent />} />
1543
- <Chart.Line dataKey="revenue" type="monotone" />
1544
- <Chart.Line dataKey="profit" type="monotone" variant="dashed" />
1480
+ <ChartXAxis dataKey="month" />
1481
+ <ChartYAxis />
1482
+ <ChartTooltip content={<ChartTooltipContent />} />
1483
+ <ChartLegend content={<ChartLegendContent />} />
1484
+ <ChartLine dataKey="revenue" type="monotone" />
1485
+ <ChartLine dataKey="profit" type="monotone" variant="dashed" />
1545
1486
  </Chart>
1546
1487
 
1547
1488
  {/* Bar Chart */}
1548
1489
  <Chart config={chartConfig} className="h-[300px]" hoverFade>
1549
- <Chart.XAxis dataKey="month" />
1550
- <Chart.YAxis />
1551
- <Chart.Tooltip content={<Chart.TooltipContent />} />
1552
- <Chart.Bar dataKey="revenue" radius="md" />
1553
- <Chart.Bar dataKey="profit" radius="md" />
1490
+ <ChartXAxis dataKey="month" />
1491
+ <ChartYAxis />
1492
+ <ChartTooltip content={<ChartTooltipContent />} />
1493
+ <ChartBar dataKey="revenue" radius="md" />
1494
+ <ChartBar dataKey="profit" radius="md" />
1554
1495
  </Chart>
1555
1496
 
1556
1497
  {/* Area Chart */}
1557
1498
  <Chart config={chartConfig} className="h-[300px]">
1558
- <Chart.XAxis dataKey="month" />
1559
- <Chart.YAxis />
1560
- <Chart.Tooltip content={<Chart.TooltipContent />} />
1561
- <Chart.Area dataKey="revenue" type="monotone" variant="gradient" />
1499
+ <ChartXAxis dataKey="month" />
1500
+ <ChartYAxis />
1501
+ <ChartTooltip content={<ChartTooltipContent />} />
1502
+ <ChartArea dataKey="revenue" type="monotone" variant="gradient" />
1562
1503
  </Chart>
1563
1504
 
1564
1505
  {/* Pie Chart */}
1565
1506
  <Chart config={chartConfig} className="h-[300px]">
1566
- <Chart.Tooltip content={<Chart.TooltipContent />} />
1567
- <Chart.Pie data={data} dataKey="value" nameKey="name" variant="donut" label="outside" />
1507
+ <ChartTooltip content={<ChartTooltipContent />} />
1508
+ <ChartPie data={data} dataKey="value" nameKey="name" variant="donut" label="outside" />
1568
1509
  </Chart>
1569
1510
  ```
1570
1511
 
@@ -1629,16 +1570,14 @@ type ChartConfig = {
1629
1570
  ### MetricCard
1630
1571
 
1631
1572
  ```tsx
1632
- import { MetricCard } from '@7onic-ui/react'
1633
-
1634
- <MetricCard>
1635
- <MetricCard.Header>
1636
- <MetricCard.Title>Revenue</MetricCard.Title>
1637
- <MetricCard.Symbol><DollarIcon /></MetricCard.Symbol>
1638
- </MetricCard.Header>
1639
- <MetricCard.Value animated>$12,450</MetricCard.Value>
1640
- <MetricCard.Trend direction="up">+12.5%</MetricCard.Trend>
1641
- <MetricCard.Description>vs. last month</MetricCard.Description>
1573
+ import { MetricCard, MetricCardDescription, MetricCardHeader, MetricCardSymbol, MetricCardTitle, MetricCardTrend, MetricCardValue } from '@7onic-ui/react'<MetricCard>
1574
+ <MetricCardHeader>
1575
+ <MetricCardTitle>Revenue</MetricCardTitle>
1576
+ <MetricCardSymbol><DollarIcon /></MetricCardSymbol>
1577
+ </MetricCardHeader>
1578
+ <MetricCardValue animated>$12,450</MetricCardValue>
1579
+ <MetricCardTrend direction="up">+12.5%</MetricCardTrend>
1580
+ <MetricCardDescription>vs. last month</MetricCardDescription>
1642
1581
  </MetricCard>
1643
1582
  ```
1644
1583
 
@@ -1701,7 +1640,7 @@ Before creating custom UI, check if 7onic already has it:
1701
1640
  import { Button, Card, Input, toast } from '@7onic-ui/react'
1702
1641
 
1703
1642
  // ✅ Chart components use a separate entry point (recharts is optional)
1704
- import { Chart } from '@7onic-ui/react/chart'
1643
+ import { ChartBar } from '@7onic-ui/react/chart'
1705
1644
 
1706
1645
  // ❌ Never import from internal paths
1707
1646
  import { Button } from '@7onic-ui/react/components/button' // WRONG
@@ -1719,16 +1658,16 @@ Compound components have **required sub-components**. Missing them causes errors
1719
1658
  **Modal — required structure:**
1720
1659
  ```tsx
1721
1660
  <Modal>
1722
- <Modal.Trigger>...</Modal.Trigger>
1723
- <Modal.Portal> {/* ← Required for correct z-index */}
1724
- <Modal.Overlay /> {/* ← Required for backdrop */}
1725
- <Modal.Content>
1726
- <Modal.Header>
1727
- <Modal.Title>...</Modal.Title>
1728
- </Modal.Header>
1729
- <Modal.Body>...</Modal.Body>
1730
- </Modal.Content>
1731
- </Modal.Portal>
1661
+ <ModalTrigger>...</ModalTrigger>
1662
+ <ModalPortal> {/* ← Required for correct z-index */}
1663
+ <ModalOverlay /> {/* ← Required for backdrop */}
1664
+ <ModalContent>
1665
+ <ModalHeader>
1666
+ <ModalTitle>...</ModalTitle>
1667
+ </ModalHeader>
1668
+ <ModalBody>...</ModalBody>
1669
+ </ModalContent>
1670
+ </ModalPortal>
1732
1671
  </Modal>
1733
1672
  ```
1734
1673
 
@@ -1736,14 +1675,14 @@ Compound components have **required sub-components**. Missing them causes errors
1736
1675
 
1737
1676
  **Tooltip — Provider required:**
1738
1677
  ```tsx
1739
- <Tooltip.Provider> {/* ← Required, wrap app once */}
1678
+ <TooltipProvider> {/* ← Required, wrap app once */}
1740
1679
  <Tooltip>
1741
- <Tooltip.Trigger>...</Tooltip.Trigger>
1742
- <Tooltip.Portal>
1743
- <Tooltip.Content>...</Tooltip.Content>
1744
- </Tooltip.Portal>
1680
+ <TooltipTrigger>...</TooltipTrigger>
1681
+ <TooltipPortal>
1682
+ <TooltipContent>...</TooltipContent>
1683
+ </TooltipPortal>
1745
1684
  </Tooltip>
1746
- </Tooltip.Provider>
1685
+ </TooltipProvider>
1747
1686
  ```
1748
1687
 
1749
1688
  **Toast — imperative API, no compound structure:**
@@ -1772,14 +1711,14 @@ toast.success('Done')
1772
1711
  </Button>
1773
1712
 
1774
1713
  // ✅ DropdownMenu item as link
1775
- <DropdownMenu.Item asChild>
1714
+ <DropdownMenuItem asChild>
1776
1715
  <Link href="/settings">Settings</Link>
1777
- </DropdownMenu.Item>
1716
+ </DropdownMenuItem>
1778
1717
 
1779
1718
  // ✅ Breadcrumb as Next.js Link
1780
- <Breadcrumb.Link asChild>
1719
+ <BreadcrumbLink asChild>
1781
1720
  <Link href="/">Home</Link>
1782
- </Breadcrumb.Link>
1721
+ </BreadcrumbLink>
1783
1722
  ```
1784
1723
 
1785
1724
  **Use `asChild` when combining 7onic components with routing `<Link>`.**
@@ -1821,20 +1760,18 @@ Components that support `asChild`: Button, IconButton, Badge, Card, Modal.Trigge
1821
1760
  **Use Field wrapper** for labeled form elements with validation:
1822
1761
 
1823
1762
  ```tsx
1824
- import { Field, Input, Textarea, Checkbox } from '@7onic-ui/react'
1825
-
1826
- {/* Text input with label + error */}
1763
+ import { Field, FieldCharCount, FieldError, FieldLabel, Input, Textarea } from '@7onic-ui/react'{/* Text input with label + error */}
1827
1764
  <Field error={errors.email}>
1828
- <Field.Label required>Email</Field.Label>
1765
+ <FieldLabel required>Email</FieldLabel>
1829
1766
  <Input placeholder="you@example.com" />
1830
- <Field.Error />
1767
+ <FieldError />
1831
1768
  </Field>
1832
1769
 
1833
1770
  {/* Textarea with character count */}
1834
1771
  <Field>
1835
- <Field.Label>Bio</Field.Label>
1772
+ <FieldLabel>Bio</FieldLabel>
1836
1773
  <Textarea maxLength={200} />
1837
- <Field.CharCount />
1774
+ <FieldCharCount />
1838
1775
  </Field>
1839
1776
  ```
1840
1777
 
@@ -1878,10 +1815,10 @@ const chartConfig = {
1878
1815
 
1879
1816
  **All overlays use Portal for correct stacking:**
1880
1817
  ```tsx
1881
- <Modal.Portal>
1882
- <Modal.Overlay />
1883
- <Modal.Content>...</Modal.Content>
1884
- </Modal.Portal>
1818
+ <ModalPortal>
1819
+ <ModalOverlay />
1820
+ <ModalContent>...</ModalContent>
1821
+ </ModalPortal>
1885
1822
  ```
1886
1823
 
1887
1824
  **Z-index hierarchy (automatic via tokens) — never set custom z-index:**
@@ -1912,7 +1849,7 @@ const chartConfig = {
1912
1849
  <IconButton aria-label="Close"><XIcon /></IconButton>
1913
1850
 
1914
1851
  <Field>
1915
- <Field.Label>Email</Field.Label>
1852
+ <FieldLabel>Email</FieldLabel>
1916
1853
  <Input />
1917
1854
  </Field>
1918
1855
  ```
@@ -1965,6 +1902,8 @@ But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`
1965
1902
 
1966
1903
  ## Quick Reference Table
1967
1904
 
1905
+ > 40 entries below. 4 chart types (bar-chart, line-chart, area-chart, pie-chart) share one source — all listed as "Chart" here. Field is a form utility sub-component with no dedicated page. Total: 42 component pages on the docs site.
1906
+
1968
1907
  | Component | Type | Variants | Sizes | Colors | Key Feature |
1969
1908
  |---|---|---|---|---|---|
1970
1909
  | Button | Standalone | solid/outline/ghost/link | xs/sm/md/default/lg | default/primary/secondary/destructive | loading, icons, press effect |
@@ -2012,9 +1951,7 @@ But if YOUR code uses React hooks (`useState`, `useEffect`) or event handlers (`
2012
1951
  ### TypingIndicator
2013
1952
 
2014
1953
  ```tsx
2015
- import { TypingIndicator } from '@7onic-ui/react'
2016
-
2017
- {/* Default — dots, muted, default size */}
1954
+ import { TypingIndicator } from '@7onic-ui/react'{/* Default — dots, muted, default size */}
2018
1955
  <TypingIndicator />
2019
1956
 
2020
1957
  {/* Cursor variant */}
@@ -2050,33 +1987,31 @@ import { TypingIndicator } from '@7onic-ui/react'
2050
1987
  ### QuickReply
2051
1988
 
2052
1989
  ```tsx
2053
- import { QuickReply } from '@7onic-ui/react'
2054
-
2055
- {/* Basic suggested replies */}
1990
+ import { QuickReply, QuickReplyItem } from '@7onic-ui/react'{/* Basic suggested replies */}
2056
1991
  <QuickReply aria-label="Suggested replies">
2057
- <QuickReply.Item>About payment</QuickReply.Item>
2058
- <QuickReply.Item>Shipping info</QuickReply.Item>
2059
- <QuickReply.Item>Return policy</QuickReply.Item>
1992
+ <QuickReplyItem>About payment</QuickReplyItem>
1993
+ <QuickReplyItem>Shipping info</QuickReplyItem>
1994
+ <QuickReplyItem>Return policy</QuickReplyItem>
2060
1995
  </QuickReply>
2061
1996
 
2062
1997
  {/* Primary color, filled variant */}
2063
1998
  <QuickReply color="primary" variant="filled" aria-label="Quick replies">
2064
- <QuickReply.Item>Payment</QuickReply.Item>
2065
- <QuickReply.Item>Shipping</QuickReply.Item>
1999
+ <QuickReplyItem>Payment</QuickReplyItem>
2000
+ <QuickReplyItem>Shipping</QuickReplyItem>
2066
2001
  </QuickReply>
2067
2002
 
2068
2003
  {/* Wrap layout for FAQ */}
2069
2004
  <QuickReply layout="wrap" aria-label="FAQ topics">
2070
- <QuickReply.Item>Payments</QuickReply.Item>
2071
- <QuickReply.Item>Shipping</QuickReply.Item>
2072
- <QuickReply.Item>Returns</QuickReply.Item>
2073
- <QuickReply.Item>Account</QuickReply.Item>
2005
+ <QuickReplyItem>Payments</QuickReplyItem>
2006
+ <QuickReplyItem>Shipping</QuickReplyItem>
2007
+ <QuickReplyItem>Returns</QuickReplyItem>
2008
+ <QuickReplyItem>Account</QuickReplyItem>
2074
2009
  </QuickReply>
2075
2010
 
2076
2011
  {/* With icon */}
2077
2012
  <QuickReply aria-label="Actions">
2078
- <QuickReply.Item icon={<MessageCircle />}>Contact us</QuickReply.Item>
2079
- <QuickReply.Item icon={<Package />}>Track order</QuickReply.Item>
2013
+ <QuickReplyItem icon={<MessageCircle />}>Contact us</QuickReplyItem>
2014
+ <QuickReplyItem icon={<Package />}>Track order</QuickReplyItem>
2080
2015
  </QuickReply>
2081
2016
  ```
2082
2017
 
@@ -2101,29 +2036,27 @@ import { QuickReply } from '@7onic-ui/react'
2101
2036
  ### ChatInput
2102
2037
 
2103
2038
  ```tsx
2104
- import { ChatInput } from '@7onic-ui/react'
2105
-
2106
- {/* Basic uncontrolled */}
2039
+ import { ChatInput, ChatInputField, ChatInputSubmit } from '@7onic-ui/react'{/* Basic uncontrolled */}
2107
2040
  <ChatInput onSubmit={(value) => console.log(value)}>
2108
- <ChatInput.Field placeholder="Ask me anything..." />
2109
- <ChatInput.Submit />
2041
+ <ChatInputField placeholder="Ask me anything..." />
2042
+ <ChatInputSubmit />
2110
2043
  </ChatInput>
2111
2044
 
2112
2045
  {/* Controlled mode */}
2113
2046
  const [value, setValue] = useState('')
2114
2047
  <ChatInput onSubmit={(v) => { handleSend(v); setValue('') }}>
2115
- <ChatInput.Field
2048
+ <ChatInputField
2116
2049
  value={value}
2117
2050
  onChange={(e) => setValue(e.target.value)}
2118
2051
  placeholder="Ask me anything..."
2119
2052
  />
2120
- <ChatInput.Submit />
2053
+ <ChatInputSubmit />
2121
2054
  </ChatInput>
2122
2055
 
2123
2056
  {/* With loading state + stop */}
2124
2057
  <ChatInput onSubmit={handleSubmit}>
2125
- <ChatInput.Field placeholder="Ask me anything..." />
2126
- <ChatInput.Submit
2058
+ <ChatInputField placeholder="Ask me anything..." />
2059
+ <ChatInputSubmit
2127
2060
  loading={isLoading}
2128
2061
  onStop={() => abortController.abort()}
2129
2062
  />
@@ -2131,26 +2064,26 @@ const [value, setValue] = useState('')
2131
2064
 
2132
2065
  {/* Character count */}
2133
2066
  <ChatInput onSubmit={(value) => console.log(value)}>
2134
- <ChatInput.Field placeholder="Ask me anything..." showCount maxLength={500} />
2135
- <ChatInput.Submit />
2067
+ <ChatInputField placeholder="Ask me anything..." showCount maxLength={500} />
2068
+ <ChatInputSubmit />
2136
2069
  </ChatInput>
2137
2070
 
2138
2071
  {/* Filled variant, large, custom radius */}
2139
2072
  <ChatInput variant="filled" size="lg" radius="2xl" onSubmit={(v) => console.log(v)}>
2140
- <ChatInput.Field placeholder="Ask me anything..." maxRows={6} />
2141
- <ChatInput.Submit />
2073
+ <ChatInputField placeholder="Ask me anything..." maxRows={6} />
2074
+ <ChatInputSubmit />
2142
2075
  </ChatInput>
2143
2076
 
2144
2077
  {/* Inline layout (single-line field + button side by side) */}
2145
2078
  <ChatInput layout="inline" radius="full" onSubmit={(value) => console.log(value)}>
2146
- <ChatInput.Field placeholder="Message..." />
2147
- <ChatInput.Submit />
2079
+ <ChatInputField placeholder="Message..." />
2080
+ <ChatInputSubmit />
2148
2081
  </ChatInput>
2149
2082
 
2150
2083
  {/* Inline with custom button radius */}
2151
2084
  <ChatInput layout="inline" radius="xl" onSubmit={handleSubmit}>
2152
- <ChatInput.Field placeholder="Message..." />
2153
- <ChatInput.Submit buttonRadius="full" loading={isLoading} onStop={handleStop} />
2085
+ <ChatInputField placeholder="Message..." />
2086
+ <ChatInputSubmit buttonRadius="full" loading={isLoading} onStop={handleStop} />
2154
2087
  </ChatInput>
2155
2088
  ```
2156
2089
 
@@ -2181,29 +2114,27 @@ const [value, setValue] = useState('')
2181
2114
  ### ChatMessage
2182
2115
 
2183
2116
  ```tsx
2184
- import { ChatMessage } from '@7onic-ui/react'
2185
-
2186
- {/* Assistant message */}
2117
+ import { ChatMessage, ChatMessageAvatar, ChatMessageContent, ChatMessageFooter } from '@7onic-ui/react'{/* Assistant message */}
2187
2118
  <ChatMessage role="assistant">
2188
- <ChatMessage.Avatar />
2119
+ <ChatMessageAvatar />
2189
2120
  <div className="flex flex-col gap-1">
2190
- <ChatMessage.Content>How can I help you today?</ChatMessage.Content>
2191
- <ChatMessage.Footer timestamp="12:34" />
2121
+ <ChatMessageContent>How can I help you today?</ChatMessageContent>
2122
+ <ChatMessageFooter timestamp="12:34" />
2192
2123
  </div>
2193
2124
  </ChatMessage>
2194
2125
 
2195
2126
  {/* User message with status */}
2196
2127
  <ChatMessage role="user">
2197
2128
  <div className="flex flex-col gap-1 items-end">
2198
- <ChatMessage.Content>Thank you for your help!</ChatMessage.Content>
2199
- <ChatMessage.Footer timestamp="12:34" status="read" />
2129
+ <ChatMessageContent>Thank you for your help!</ChatMessageContent>
2130
+ <ChatMessageFooter timestamp="12:34" status="read" />
2200
2131
  </div>
2201
2132
  </ChatMessage>
2202
2133
 
2203
2134
  {/* Typing animation */}
2204
2135
  <ChatMessage role="assistant" typing>
2205
- <ChatMessage.Avatar />
2206
- <ChatMessage.Content />
2136
+ <ChatMessageAvatar />
2137
+ <ChatMessageContent />
2207
2138
  </ChatMessage>
2208
2139
 
2209
2140
  {/* Custom avatar + hover actions */}
@@ -2211,29 +2142,29 @@ import { ChatMessage } from '@7onic-ui/react'
2211
2142
  role="assistant"
2212
2143
  actions={<button aria-label="Copy">...</button>}
2213
2144
  >
2214
- <ChatMessage.Avatar initials="AI" />
2145
+ <ChatMessageAvatar initials="AI" />
2215
2146
  <div className="flex flex-col gap-1">
2216
- <ChatMessage.Content>Response text here.</ChatMessage.Content>
2217
- <ChatMessage.Footer timestamp="12:34" />
2147
+ <ChatMessageContent>Response text here.</ChatMessageContent>
2148
+ <ChatMessageFooter timestamp="12:34" />
2218
2149
  </div>
2219
2150
  </ChatMessage>
2220
2151
 
2221
2152
  {/* User bubble with muted color (common pattern) */}
2222
2153
  <ChatMessage role="user" color="muted">
2223
2154
  <div className="flex flex-col gap-1 items-end">
2224
- <ChatMessage.Content>Message text</ChatMessage.Content>
2225
- <ChatMessage.Footer timestamp="12:34" status="read" />
2155
+ <ChatMessageContent>Message text</ChatMessageContent>
2156
+ <ChatMessageFooter timestamp="12:34" status="read" />
2226
2157
  </div>
2227
2158
  </ChatMessage>
2228
2159
 
2229
2160
  {/* History (flat) layout — full-width, no footer */}
2230
2161
  <div className="flex flex-col gap-3">
2231
2162
  <ChatMessage role="assistant" variant="flat">
2232
- <ChatMessage.Avatar />
2233
- <ChatMessage.Content className="w-full">Here is the answer.</ChatMessage.Content>
2163
+ <ChatMessageAvatar />
2164
+ <ChatMessageContent className="w-full">Here is the answer.</ChatMessageContent>
2234
2165
  </ChatMessage>
2235
2166
  <ChatMessage role="user" variant="flat" color="muted">
2236
- <ChatMessage.Content className="w-full">Thanks!</ChatMessage.Content>
2167
+ <ChatMessageContent className="w-full">Thanks!</ChatMessageContent>
2237
2168
  </ChatMessage>
2238
2169
  </div>
2239
2170
  ```
@@ -2268,10 +2199,11 @@ import { ChatMessage } from '@7onic-ui/react'
2268
2199
 
2269
2200
  ## Compound Recipe (opt-in self-wrapper)
2270
2201
 
2271
- v0.3.0+ library exports Named only (`<CardHeader>`). To restore dot-notation (`<Card.Header>`) in your project, add a 5-line wrapper file:
2202
+ 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:
2203
+
2204
+ ### If installed via npm (`npm install @7onic-ui/react`)
2272
2205
 
2273
2206
  ```tsx
2274
- // lib/card.tsx
2275
2207
  'use client'
2276
2208
  import {
2277
2209
  Card as CardBase,
@@ -2284,9 +2216,27 @@ export const Card = Object.assign(CardBase, {
2284
2216
  Description: CardDescription, Content: CardContent,
2285
2217
  Footer: CardFooter, Image: CardImage, Action: CardAction,
2286
2218
  })
2287
- // Then: <Card.Header>, <Card.Title>, etc. — Client Components only.
2288
2219
  ```
2289
2220
 
2221
+ ### If installed via CLI (`npx 7onic add card`)
2222
+
2223
+ ```tsx
2224
+ 'use client'
2225
+ import {
2226
+ Card as CardBase,
2227
+ CardHeader, CardTitle, CardDescription,
2228
+ CardContent, CardFooter, CardImage, CardAction,
2229
+ } from '@/components/ui/card'
2230
+
2231
+ export const Card = Object.assign(CardBase, {
2232
+ Header: CardHeader, Title: CardTitle,
2233
+ Description: CardDescription, Content: CardContent,
2234
+ Footer: CardFooter, Image: CardImage, Action: CardAction,
2235
+ })
2236
+ ```
2237
+
2238
+ Then: `<Card.Header>`, `<Card.Title>`, etc. — Client Components only.
2239
+
2290
2240
  **Rules**:
2291
2241
  - Wrapper file must start with `'use client'` — Next.js Client Manifest cannot track `Object.assign` properties across RSC boundaries.
2292
2242
  - Recipe works only in Client Components. Server Components must use Named imports (`<CardHeader>`).