Skip to content

Commit 77c2667

Browse files
nelsonlaidevnelsonlaidev
authored
chore: merge pull request #1136 
2 parents c435c1a + 8f026e6 commit 77c2667

25 files changed

+794
-32
lines changed

‎apps/docs/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
"cmdk": "1.1.1",
2828
"cva": "1.0.0-beta.4",
2929
"embla-carousel-react": "8.6.0",
30-
"fumadocs-core": "16.0.5",
31-
"fumadocs-mdx": "13.0.2",
32-
"fumadocs-ui": "16.0.5",
30+
"fumadocs-core": "16.0.6",
31+
"fumadocs-mdx": "13.0.3",
32+
"fumadocs-ui": "16.0.6",
3333
"hast-util-to-jsx-runtime": "2.3.6",
3434
"input-otp": "1.4.2",
3535
"lucide-react": "0.548.0",
@@ -40,6 +40,7 @@
4040
"react-day-picker": "9.11.1",
4141
"react-dom": "19.2.0",
4242
"react-resizable-panels": "3.0.6",
43+
"recharts": "2.15.4",
4344
"shiki": "3.14.0",
4445
"sonner": "2.0.7",
4546
"vaul": "1.1.2"

‎apps/docs/src/components/demos/checkbox.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Checkbox } from '../ui/checkbox'
2+
import { Label } from '../ui/label'
3+
4+
const CheckboxDemo = () => {
5+
return (
6+
<div className='flex flex-col gap-6'>
7+
<div className='flex items-center gap-3'>
8+
<Checkbox id='terms' />
9+
<Label htmlFor='terms'>Accept terms and conditions</Label>
10+
</div>
11+
<div className='flex items-start gap-3'>
12+
<Checkbox id='terms-2' defaultChecked />
13+
<div className='grid gap-2'>
14+
<Label htmlFor='terms-2'>Accept terms and conditions</Label>
15+
<p className='text-sm text-muted-foreground'>
16+
By clicking this checkbox, you agree to the terms and conditions.
17+
</p>
18+
</div>
19+
</div>
20+
<div className='flex items-start gap-3'>
21+
<Checkbox id='toggle' disabled />
22+
<Label htmlFor='toggle'>Enable notifications</Label>
23+
</div>
24+
<Label className='flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-aria-checked:border-blue-600 has-aria-checked:bg-blue-50 dark:has-aria-checked:border-blue-900 dark:has-aria-checked:bg-blue-950'>
25+
<Checkbox
26+
id='toggle-2'
27+
defaultChecked
28+
className='data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700'
29+
/>
30+
<div className='grid gap-1.5 font-normal'>
31+
<p className='text-sm leading-none font-medium'>Enable notifications</p>
32+
<p className='text-sm text-muted-foreground'>You can enable or disable notifications at any time.</p>
33+
</div>
34+
</Label>
35+
</div>
36+
)
37+
}
38+
39+
export default CheckboxDemo

‎apps/docs/src/components/demos/collapsible.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
'use client'
2+
3+
import { ChevronsUpDownIcon } from 'lucide-react'
4+
import { useState } from 'react'
5+
6+
import { Button } from '../ui/button'
7+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'
8+
9+
const CollapsibleDemo = () => {
10+
const [isOpen, setIsOpen] = useState(false)
11+
12+
return (
13+
<Collapsible open={isOpen} onOpenChange={setIsOpen} className='flex w-[350px] flex-col gap-2'>
14+
<div className='flex items-center justify-between gap-4 px-4'>
15+
<h4 className='text-sm font-semibold'>@peduarte starred 3 repositories</h4>
16+
<CollapsibleTrigger asChild>
17+
<Button variant='ghost' size='icon' className='size-8'>
18+
<ChevronsUpDownIcon />
19+
<span className='sr-only'>Toggle</span>
20+
</Button>
21+
</CollapsibleTrigger>
22+
</div>
23+
<div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/primitives</div>
24+
<CollapsibleContent className='flex flex-col gap-2'>
25+
<div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/colors</div>
26+
<div className='rounded-md border px-4 py-2 font-mono text-sm'>@stitches/react</div>
27+
</CollapsibleContent>
28+
</Collapsible>
29+
)
30+
}
31+
32+
export default CollapsibleDemo

‎apps/docs/src/components/demos/command.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from 'lucide-react'
2+
3+
import {
4+
Command,
5+
CommandEmpty,
6+
CommandGroup,
7+
CommandInput,
8+
CommandItem,
9+
CommandList,
10+
CommandSeparator,
11+
CommandShortcut
12+
} from '../ui/command'
13+
14+
const CommandDemo = () => {
15+
return (
16+
<Command className='max-w-[450px] rounded-lg border shadow-md'>
17+
<CommandInput placeholder='Type a command or search...' />
18+
<CommandList>
19+
<CommandEmpty>No results found.</CommandEmpty>
20+
<CommandGroup heading='Suggestions'>
21+
<CommandItem>
22+
<CalendarIcon />
23+
<span>Calendar</span>
24+
</CommandItem>
25+
<CommandItem>
26+
<SmileIcon />
27+
<span>Search Emoji</span>
28+
</CommandItem>
29+
<CommandItem disabled>
30+
<CalculatorIcon />
31+
<span>Calculator</span>
32+
</CommandItem>
33+
</CommandGroup>
34+
<CommandSeparator />
35+
<CommandGroup heading='Settings'>
36+
<CommandItem>
37+
<UserIcon />
38+
<span>Profile</span>
39+
<CommandShortcut>⌘P</CommandShortcut>
40+
</CommandItem>
41+
<CommandItem>
42+
<CreditCardIcon />
43+
<span>Billing</span>
44+
<CommandShortcut>⌘B</CommandShortcut>
45+
</CommandItem>
46+
<CommandItem>
47+
<SettingsIcon />
48+
<span>Settings</span>
49+
<CommandShortcut>⌘S</CommandShortcut>
50+
</CommandItem>
51+
</CommandGroup>
52+
</CommandList>
53+
</Command>
54+
)
55+
}
56+
57+
export default CommandDemo

‎apps/docs/src/components/demos/context-menu.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {
2+
ContextMenu,
3+
ContextMenuCheckboxItem,
4+
ContextMenuContent,
5+
ContextMenuItem,
6+
ContextMenuLabel,
7+
ContextMenuRadioGroup,
8+
ContextMenuRadioItem,
9+
ContextMenuSeparator,
10+
ContextMenuShortcut,
11+
ContextMenuSub,
12+
ContextMenuSubContent,
13+
ContextMenuSubTrigger,
14+
ContextMenuTrigger
15+
} from '../ui/context-menu'
16+
17+
const ContextMenuDemo = () => {
18+
return (
19+
<ContextMenu>
20+
<ContextMenuTrigger className='flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm'>
21+
Right click here
22+
</ContextMenuTrigger>
23+
<ContextMenuContent className='w-52'>
24+
<ContextMenuItem inset>
25+
Back
26+
<ContextMenuShortcut>⌘[</ContextMenuShortcut>
27+
</ContextMenuItem>
28+
<ContextMenuItem inset disabled>
29+
Forward
30+
<ContextMenuShortcut>⌘]</ContextMenuShortcut>
31+
</ContextMenuItem>
32+
<ContextMenuItem inset>
33+
Reload
34+
<ContextMenuShortcut>⌘R</ContextMenuShortcut>
35+
</ContextMenuItem>
36+
<ContextMenuSub>
37+
<ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
38+
<ContextMenuSubContent className='w-44'>
39+
<ContextMenuItem>Save Page...</ContextMenuItem>
40+
<ContextMenuItem>Create Shortcut...</ContextMenuItem>
41+
<ContextMenuItem>Name Window...</ContextMenuItem>
42+
<ContextMenuSeparator />
43+
<ContextMenuItem>Developer Tools</ContextMenuItem>
44+
<ContextMenuSeparator />
45+
<ContextMenuItem variant='destructive'>Delete</ContextMenuItem>
46+
</ContextMenuSubContent>
47+
</ContextMenuSub>
48+
<ContextMenuSeparator />
49+
<ContextMenuCheckboxItem checked>Show Bookmarks</ContextMenuCheckboxItem>
50+
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
51+
<ContextMenuSeparator />
52+
<ContextMenuRadioGroup value='pedro'>
53+
<ContextMenuLabel inset>People</ContextMenuLabel>
54+
<ContextMenuRadioItem value='pedro'>Pedro Duarte</ContextMenuRadioItem>
55+
<ContextMenuRadioItem value='colm'>Colm Tuite</ContextMenuRadioItem>
56+
</ContextMenuRadioGroup>
57+
</ContextMenuContent>
58+
</ContextMenu>
59+
)
60+
}
61+
62+
export default ContextMenuDemo

‎apps/docs/src/components/demos/dialog.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Button } from '../ui/button'
2+
import {
3+
Dialog,
4+
DialogClose,
5+
DialogContent,
6+
DialogDescription,
7+
DialogFooter,
8+
DialogHeader,
9+
DialogTitle,
10+
DialogTrigger
11+
} from '../ui/dialog'
12+
import { Input } from '../ui/input'
13+
import { Label } from '../ui/label'
14+
15+
const DialogDemo = () => {
16+
return (
17+
<Dialog>
18+
<form>
19+
<DialogTrigger asChild>
20+
<Button variant='outline'>Open Dialog</Button>
21+
</DialogTrigger>
22+
<DialogContent className='sm:max-w-[425px]'>
23+
<DialogHeader>
24+
<DialogTitle>Edit profile</DialogTitle>
25+
<DialogDescription>Make changes to your profile here. Click save when you&apos;re done.</DialogDescription>
26+
</DialogHeader>
27+
<div className='grid gap-4'>
28+
<div className='grid gap-3'>
29+
<Label htmlFor='name-1'>Name</Label>
30+
<Input id='name-1' name='name' defaultValue='Pedro Duarte' />
31+
</div>
32+
<div className='grid gap-3'>
33+
<Label htmlFor='username-1'>Username</Label>
34+
<Input id='username-1' name='username' defaultValue='@peduarte' />
35+
</div>
36+
</div>
37+
<DialogFooter>
38+
<DialogClose asChild>
39+
<Button variant='outline'>Cancel</Button>
40+
</DialogClose>
41+
<Button type='submit'>Save changes</Button>
42+
</DialogFooter>
43+
</DialogContent>
44+
</form>
45+
</Dialog>
46+
)
47+
}
48+
49+
export default DialogDemo

‎apps/docs/src/components/demos/drawer.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
'use client'
2+
3+
import { MinusIcon, PlusIcon } from 'lucide-react'
4+
import { useState } from 'react'
5+
import { Bar, BarChart, ResponsiveContainer } from 'recharts'
6+
7+
import { Button } from '../ui/button'
8+
import {
9+
Drawer,
10+
DrawerClose,
11+
DrawerContent,
12+
DrawerDescription,
13+
DrawerFooter,
14+
DrawerHeader,
15+
DrawerTitle,
16+
DrawerTrigger
17+
} from '../ui/drawer'
18+
19+
const data = [
20+
{ goal: 400 },
21+
{ goal: 300 },
22+
{ goal: 200 },
23+
{ goal: 300 },
24+
{ goal: 200 },
25+
{ goal: 278 },
26+
{ goal: 189 },
27+
{ goal: 239 },
28+
{ goal: 300 },
29+
{ goal: 200 },
30+
{ goal: 278 },
31+
{ goal: 189 },
32+
{ goal: 349 }
33+
]
34+
35+
const DrawerDemo = () => {
36+
const [goal, setGoal] = useState(350)
37+
38+
const handleClick = (adjustment: number) => {
39+
setGoal(Math.max(200, Math.min(400, goal + adjustment)))
40+
}
41+
42+
return (
43+
<Drawer>
44+
<DrawerTrigger asChild>
45+
<Button variant='outline'>Open Drawer</Button>
46+
</DrawerTrigger>
47+
<DrawerContent>
48+
<div className='mx-auto w-full max-w-sm'>
49+
<DrawerHeader>
50+
<DrawerTitle>Move Goal</DrawerTitle>
51+
<DrawerDescription>Set your daily activity goal.</DrawerDescription>
52+
</DrawerHeader>
53+
<div className='p-4 pb-0'>
54+
<div className='flex items-center justify-center space-x-2'>
55+
<Button
56+
variant='outline'
57+
size='icon'
58+
className='size-8 shrink-0 rounded-full'
59+
onClick={() => {
60+
handleClick(-10)
61+
}}
62+
disabled={goal <= 200}
63+
>
64+
<MinusIcon />
65+
<span className='sr-only'>Decrease</span>
66+
</Button>
67+
<div className='flex-1 text-center'>
68+
<div className='text-7xl font-bold tracking-tighter'>{goal}</div>
69+
<div className='text-[0.70rem] text-muted-foreground uppercase'>Calories/day</div>
70+
</div>
71+
<Button
72+
variant='outline'
73+
size='icon'
74+
className='size-8 shrink-0 rounded-full'
75+
onClick={() => {
76+
handleClick(10)
77+
}}
78+
disabled={goal >= 400}
79+
>
80+
<PlusIcon />
81+
<span className='sr-only'>Increase</span>
82+
</Button>
83+
</div>
84+
<div className='mt-3 h-30'>
85+
<ResponsiveContainer width='100%' height='100%'>
86+
<BarChart data={data}>
87+
<Bar
88+
dataKey='goal'
89+
style={{
90+
fill: 'var(--foreground)',
91+
opacity: 0.9
92+
}}
93+
/>
94+
</BarChart>
95+
</ResponsiveContainer>
96+
</div>
97+
</div>
98+
<DrawerFooter>
99+
<Button>Submit</Button>
100+
<DrawerClose asChild>
101+
<Button variant='outline'>Cancel</Button>
102+
</DrawerClose>
103+
</DrawerFooter>
104+
</div>
105+
</DrawerContent>
106+
</Drawer>
107+
)
108+
}
109+
110+
export default DrawerDemo

‎apps/docs/src/components/demos/native-select.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NativeSelect, NativeSelectOption } from '../ui/native-select'
2+
3+
const NativeSelectDemo = () => {
4+
return (
5+
<NativeSelect>
6+
<NativeSelectOption value=''>Select status</NativeSelectOption>
7+
<NativeSelectOption value='todo'>Todo</NativeSelectOption>
8+
<NativeSelectOption value='in-progress'>In Progress</NativeSelectOption>
9+
<NativeSelectOption value='done'>Done</NativeSelectOption>
10+
<NativeSelectOption value='cancelled'>Cancelled</NativeSelectOption>
11+
</NativeSelect>
12+
)
13+
}
14+
15+
export default NativeSelectDemo

‎apps/docs/src/components/ui/command.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client'
2+
13
import { cn } from '@repo/ui/utils/cn'
24
import { Command as CommandPrimitive } from 'cmdk'
35
import { SearchIcon } from 'lucide-react'

0 commit comments

Comments
 (0)