Skip to content

Commit 0443283

Browse files
shadcnshadcn
authored
feat: new components (#8334)
* feat: add field.tsx and update blocks * feat: add input group * feat: implement button group * fix * fix * wip * fix: button group * feat: update field * fix * feat * feat: cooked * fix * chore: build registry * feat: add kbd component * chore: update input group demo * feat: update kbd component * feat: add empty * feat: add spinner * refactor: input group * feat: blocks * fix * fix: app sidebar * feat: add label to app sidebar * fix * fix * fix * fix * fix * feat * feat * fix * docs: button group * feat: add docs * docs: kbd * docs: empty * fix * docs * docs * feat: add sink link * fix * fix * docs * feat: add new page * fix * fix * fix * fix * fix * fix * feat: add registration form * fix: chat settings * fix * fix preview * fix examples * feat: add changelog * fix * fix * fix * fix * fix * feat(www): add t3 versions * chore: build registry * fix * fix * fix * feat: inline code examples for llm * fix * feat: home * fix * fix * fix * fix * fix * chore: changelog * fix * fix * fix * fix: callout * fix
1 parent 77e6f28 commit 0443283

File tree

512 files changed

+38453
-5248
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

512 files changed

+38453
-5248
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,8 @@
88
"<node_internals>/**",
99
"**/node_modules/**",
1010
"**/fixtures/**"
11-
]
11+
],
12+
"files.exclude": {
13+
"apps/www": true
14+
}
1215
}

‎apps/v4/app/(app)/(root)/components/appearance-settings.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
"use client"
2+
3+
import { IconMinus, IconPlus } from "@tabler/icons-react"
4+
import { CheckIcon } from "lucide-react"
5+
6+
import { useThemeConfig } from "@/components/active-theme"
7+
import { Button } from "@/registry/new-york-v4/ui/button"
8+
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
9+
import {
10+
Field,
11+
FieldContent,
12+
FieldDescription,
13+
FieldGroup,
14+
FieldLabel,
15+
FieldLegend,
16+
FieldSeparator,
17+
FieldSet,
18+
FieldTitle,
19+
} from "@/registry/new-york-v4/ui/field"
20+
import { Input } from "@/registry/new-york-v4/ui/input"
21+
import { Label } from "@/registry/new-york-v4/ui/label"
22+
import {
23+
RadioGroup,
24+
RadioGroupItem,
25+
} from "@/registry/new-york-v4/ui/radio-group"
26+
import { Switch } from "@/registry/new-york-v4/ui/switch"
27+
28+
const accents = [
29+
{
30+
name: "Blue",
31+
value: "blue",
32+
},
33+
{
34+
name: "Amber",
35+
value: "amber",
36+
},
37+
{
38+
name: "Green",
39+
value: "green",
40+
},
41+
{
42+
name: "Rose",
43+
value: "rose",
44+
},
45+
]
46+
47+
export function AppearanceSettings() {
48+
const { activeTheme, setActiveTheme } = useThemeConfig()
49+
return (
50+
<FieldSet>
51+
<FieldGroup>
52+
<FieldSet>
53+
<FieldLegend>Compute Environment</FieldLegend>
54+
<FieldDescription>
55+
Select the compute environment for your cluster.
56+
</FieldDescription>
57+
<RadioGroup defaultValue="kubernetes">
58+
<FieldLabel htmlFor="kubernetes-r2h">
59+
<Field orientation="horizontal">
60+
<FieldContent>
61+
<FieldTitle>Kubernetes</FieldTitle>
62+
<FieldDescription>
63+
Run GPU workloads on a K8s configured cluster. This is the
64+
default.
65+
</FieldDescription>
66+
</FieldContent>
67+
<RadioGroupItem
68+
value="kubernetes"
69+
id="kubernetes-r2h"
70+
aria-label="Kubernetes"
71+
/>
72+
</Field>
73+
</FieldLabel>
74+
<FieldLabel htmlFor="vm-z4k">
75+
<Field orientation="horizontal">
76+
<FieldContent>
77+
<FieldTitle>Virtual Machine</FieldTitle>
78+
<FieldDescription>
79+
Access a VM configured cluster to run workloads. (Coming
80+
soon)
81+
</FieldDescription>
82+
</FieldContent>
83+
<RadioGroupItem
84+
value="vm"
85+
id="vm-z4k"
86+
aria-label="Virtual Machine"
87+
/>
88+
</Field>
89+
</FieldLabel>
90+
</RadioGroup>
91+
</FieldSet>
92+
<FieldSeparator />
93+
<Field orientation="horizontal">
94+
<FieldContent>
95+
<FieldTitle>Accent</FieldTitle>
96+
<FieldDescription>Select the accent color.</FieldDescription>
97+
</FieldContent>
98+
<FieldSet aria-label="Accent">
99+
<RadioGroup
100+
className="flex flex-wrap gap-2"
101+
value={activeTheme}
102+
onValueChange={setActiveTheme}
103+
>
104+
{accents.map((accent) => (
105+
<Label
106+
htmlFor={accent.value}
107+
key={accent.value}
108+
data-theme={accent.value}
109+
className="flex size-6 items-center justify-center rounded-full data-[theme=amber]:bg-amber-600 data-[theme=blue]:bg-blue-700 data-[theme=green]:bg-green-600 data-[theme=rose]:bg-rose-600"
110+
>
111+
<RadioGroupItem
112+
id={accent.value}
113+
value={accent.value}
114+
aria-label={accent.name}
115+
className="peer sr-only"
116+
/>
117+
<CheckIcon className="hidden size-4 stroke-white peer-data-[state=checked]:block" />
118+
</Label>
119+
))}
120+
</RadioGroup>
121+
</FieldSet>
122+
</Field>
123+
<FieldSeparator />
124+
<Field orientation="horizontal">
125+
<FieldContent>
126+
<FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
127+
<FieldDescription>You can add more later.</FieldDescription>
128+
</FieldContent>
129+
<ButtonGroup>
130+
<Input
131+
id="number-of-gpus-f6l"
132+
placeholder="8"
133+
size={3}
134+
className="h-8 !w-14 font-mono"
135+
maxLength={3}
136+
/>
137+
<Button
138+
variant="outline"
139+
size="icon-sm"
140+
type="button"
141+
aria-label="Decrement"
142+
>
143+
<IconMinus />
144+
</Button>
145+
<Button
146+
variant="outline"
147+
size="icon-sm"
148+
type="button"
149+
aria-label="Increment"
150+
>
151+
<IconPlus />
152+
</Button>
153+
</ButtonGroup>
154+
</Field>
155+
<FieldSeparator />
156+
<Field orientation="horizontal">
157+
<FieldContent>
158+
<FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
159+
<FieldDescription>
160+
Allow the wallpaper to be tinted.
161+
</FieldDescription>
162+
</FieldContent>
163+
<Switch id="tinting" defaultChecked />
164+
</Field>
165+
</FieldGroup>
166+
</FieldSet>
167+
)
168+
}

‎apps/v4/app/(app)/(root)/components/button-group-demo.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import {
5+
ArchiveIcon,
6+
ArrowLeftIcon,
7+
CalendarPlusIcon,
8+
ClockIcon,
9+
ListFilterPlusIcon,
10+
MailCheckIcon,
11+
MoreHorizontalIcon,
12+
TagIcon,
13+
Trash2Icon,
14+
} from "lucide-react"
15+
16+
import { Button } from "@/registry/new-york-v4/ui/button"
17+
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
18+
import {
19+
DropdownMenu,
20+
DropdownMenuContent,
21+
DropdownMenuGroup,
22+
DropdownMenuItem,
23+
DropdownMenuRadioGroup,
24+
DropdownMenuRadioItem,
25+
DropdownMenuSeparator,
26+
DropdownMenuSub,
27+
DropdownMenuSubContent,
28+
DropdownMenuSubTrigger,
29+
DropdownMenuTrigger,
30+
} from "@/registry/new-york-v4/ui/dropdown-menu"
31+
32+
export function ButtonGroupDemo() {
33+
const [label, setLabel] = React.useState("personal")
34+
35+
return (
36+
<ButtonGroup>
37+
<ButtonGroup className="hidden sm:flex">
38+
<Button variant="outline" size="icon-sm" aria-label="Go Back">
39+
<ArrowLeftIcon />
40+
</Button>
41+
</ButtonGroup>
42+
<ButtonGroup>
43+
<Button variant="outline" size="sm">
44+
Archive
45+
</Button>
46+
<Button variant="outline" size="sm">
47+
Report
48+
</Button>
49+
</ButtonGroup>
50+
<ButtonGroup>
51+
<Button variant="outline" size="sm">
52+
Snooze
53+
</Button>
54+
<DropdownMenu>
55+
<DropdownMenuTrigger asChild>
56+
<Button variant="outline" size="icon-sm" aria-label="More Options">
57+
<MoreHorizontalIcon />
58+
</Button>
59+
</DropdownMenuTrigger>
60+
<DropdownMenuContent align="end" className="w-48 [--radius:1rem]">
61+
<DropdownMenuGroup>
62+
<DropdownMenuItem>
63+
<MailCheckIcon />
64+
Mark as Read
65+
</DropdownMenuItem>
66+
<DropdownMenuItem>
67+
<ArchiveIcon />
68+
Archive
69+
</DropdownMenuItem>
70+
</DropdownMenuGroup>
71+
<DropdownMenuSeparator />
72+
<DropdownMenuGroup>
73+
<DropdownMenuItem>
74+
<ClockIcon />
75+
Snooze
76+
</DropdownMenuItem>
77+
<DropdownMenuItem>
78+
<CalendarPlusIcon />
79+
Add to Calendar
80+
</DropdownMenuItem>
81+
<DropdownMenuItem>
82+
<ListFilterPlusIcon />
83+
Add to List
84+
</DropdownMenuItem>
85+
<DropdownMenuSub>
86+
<DropdownMenuSubTrigger>
87+
<TagIcon />
88+
Label As...
89+
</DropdownMenuSubTrigger>
90+
<DropdownMenuSubContent>
91+
<DropdownMenuRadioGroup
92+
value={label}
93+
onValueChange={setLabel}
94+
>
95+
<DropdownMenuRadioItem value="personal">
96+
Personal
97+
</DropdownMenuRadioItem>
98+
<DropdownMenuRadioItem value="work">
99+
Work
100+
</DropdownMenuRadioItem>
101+
<DropdownMenuRadioItem value="other">
102+
Other
103+
</DropdownMenuRadioItem>
104+
</DropdownMenuRadioGroup>
105+
</DropdownMenuSubContent>
106+
</DropdownMenuSub>
107+
</DropdownMenuGroup>
108+
<DropdownMenuSeparator />
109+
<DropdownMenuGroup>
110+
<DropdownMenuItem variant="destructive">
111+
<Trash2Icon />
112+
Trash
113+
</DropdownMenuItem>
114+
</DropdownMenuGroup>
115+
</DropdownMenuContent>
116+
</DropdownMenu>
117+
</ButtonGroup>
118+
</ButtonGroup>
119+
)
120+
}

‎apps/v4/app/(app)/(root)/components/button-group-input-group.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { AudioLinesIcon, PlusIcon } from "lucide-react"
5+
6+
import { Button } from "@/registry/new-york-v4/ui/button"
7+
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
8+
import {
9+
InputGroup,
10+
InputGroupAddon,
11+
InputGroupButton,
12+
InputGroupInput,
13+
} from "@/registry/new-york-v4/ui/input-group"
14+
import {
15+
Tooltip,
16+
TooltipContent,
17+
TooltipTrigger,
18+
} from "@/registry/new-york-v4/ui/tooltip"
19+
20+
export function ButtonGroupInputGroup() {
21+
const [voiceEnabled, setVoiceEnabled] = React.useState(false)
22+
return (
23+
<ButtonGroup className="[--radius:9999rem]">
24+
<ButtonGroup>
25+
<Button variant="outline" size="icon" aria-label="Add">
26+
<PlusIcon />
27+
</Button>
28+
</ButtonGroup>
29+
<ButtonGroup className="flex-1">
30+
<InputGroup>
31+
<InputGroupInput
32+
placeholder={
33+
voiceEnabled ? "Record and send audio..." : "Send a message..."
34+
}
35+
disabled={voiceEnabled}
36+
/>
37+
<InputGroupAddon align="inline-end">
38+
<Tooltip>
39+
<TooltipTrigger asChild>
40+
<InputGroupButton
41+
onClick={() => setVoiceEnabled(!voiceEnabled)}
42+
data-active={voiceEnabled}
43+
className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
44+
aria-pressed={voiceEnabled}
45+
size="icon-xs"
46+
aria-label="Voice Mode"
47+
>
48+
<AudioLinesIcon />
49+
</InputGroupButton>
50+
</TooltipTrigger>
51+
<TooltipContent>Voice Mode</TooltipContent>
52+
</Tooltip>
53+
</InputGroupAddon>
54+
</InputGroup>
55+
</ButtonGroup>
56+
</ButtonGroup>
57+
)
58+
}

‎apps/v4/app/(app)/(root)/components/button-group-nested.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 { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
4+
5+
import { Button } from "@/registry/new-york-v4/ui/button"
6+
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
7+
8+
export function ButtonGroupNested() {
9+
return (
10+
<ButtonGroup>
11+
<ButtonGroup>
12+
<Button variant="outline" size="sm">
13+
1
14+
</Button>
15+
<Button variant="outline" size="sm">
16+
2
17+
</Button>
18+
<Button variant="outline" size="sm">
19+
3
20+
</Button>
21+
</ButtonGroup>
22+
<ButtonGroup>
23+
<Button variant="outline" size="icon-sm" aria-label="Previous">
24+
<ArrowLeftIcon />
25+
</Button>
26+
<Button variant="outline" size="icon-sm" aria-label="Next">
27+
<ArrowRightIcon />
28+
</Button>
29+
</ButtonGroup>
30+
</ButtonGroup>
31+
)
32+
}

0 commit comments

Comments
 (0)