mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-02 13:07:46 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
198 lines
6.9 KiB
TypeScript
198 lines
6.9 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/registry/bases/base/ui/alert-dialog"
|
|
import { Badge } from "@/registry/bases/base/ui/badge"
|
|
import { Button } from "@/registry/bases/base/ui/button"
|
|
import { ButtonGroup } from "@/registry/bases/base/ui/button-group"
|
|
import { Card, CardContent } from "@/registry/bases/base/ui/card"
|
|
import { Checkbox } from "@/registry/bases/base/ui/checkbox"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/registry/bases/base/ui/dropdown-menu"
|
|
import { Field, FieldGroup } from "@/registry/bases/base/ui/field"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
InputGroupText,
|
|
} from "@/registry/bases/base/ui/input-group"
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemTitle,
|
|
} from "@/registry/bases/base/ui/item"
|
|
import {
|
|
RadioGroup,
|
|
RadioGroupItem,
|
|
} from "@/registry/bases/base/ui/radio-group"
|
|
import { Slider } from "@/registry/bases/base/ui/slider"
|
|
import { Switch } from "@/registry/bases/base/ui/switch"
|
|
import { Textarea } from "@/registry/bases/base/ui/textarea"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export function UIElements() {
|
|
const [sliderValue, setSliderValue] = React.useState<number[]>([500])
|
|
const handleSliderValueChange = React.useCallback(
|
|
(value: number | readonly number[]) => {
|
|
if (typeof value === "number") {
|
|
setSliderValue([value])
|
|
} else {
|
|
setSliderValue([...value])
|
|
}
|
|
},
|
|
[]
|
|
)
|
|
|
|
return (
|
|
<Card className="w-full">
|
|
<CardContent className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button>Button</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="outline">Outline</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
</div>
|
|
<Item variant="outline">
|
|
<ItemContent>
|
|
<ItemTitle>Two-factor authentication</ItemTitle>
|
|
<ItemDescription className="text-pretty xl:hidden 2xl:block">
|
|
Verify via email or phone number.
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
<ItemActions className="hidden md:flex">
|
|
<Button size="sm" variant="secondary">
|
|
Enable
|
|
</Button>
|
|
</ItemActions>
|
|
</Item>
|
|
</div>
|
|
<Slider
|
|
value={sliderValue}
|
|
onValueChange={handleSliderValueChange}
|
|
max={1000}
|
|
min={0}
|
|
step={10}
|
|
className="flex-1"
|
|
aria-label="Slider"
|
|
/>
|
|
<FieldGroup>
|
|
<Field>
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Name" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>
|
|
<IconPlaceholder
|
|
lucide="SearchIcon"
|
|
tabler="IconSearch"
|
|
hugeicons="Search01Icon"
|
|
phosphor="MagnifyingGlassIcon"
|
|
remixicon="RiSearchLine"
|
|
/>
|
|
</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</Field>
|
|
<Field className="flex-1">
|
|
<Textarea placeholder="Message" className="resize-none" />
|
|
</Field>
|
|
</FieldGroup>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex gap-2">
|
|
<Badge>Badge</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="outline">Outline</Badge>
|
|
</div>
|
|
<RadioGroup defaultValue="apple" className="ml-auto flex w-fit gap-3">
|
|
<RadioGroupItem value="apple" />
|
|
<RadioGroupItem value="banana" />
|
|
</RadioGroup>
|
|
<div className="flex gap-3">
|
|
<Checkbox defaultChecked />
|
|
<Checkbox />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<AlertDialog>
|
|
<AlertDialogTrigger render={<Button variant="outline" />}>
|
|
<span className="hidden md:block">Alert Dialog</span>
|
|
<span className="block md:hidden">Dialog</span>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent size="sm">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Do you want to allow the USB accessory to connect to this
|
|
device and your data?
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Don't allow</AlertDialogCancel>
|
|
<AlertDialogAction>Allow</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
<ButtonGroup>
|
|
<Button variant="outline">Button Group</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button variant="outline" size="icon" />}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="ChevronUpIcon"
|
|
tabler="IconChevronUp"
|
|
hugeicons="ArrowUp01Icon"
|
|
phosphor="CaretUpIcon"
|
|
remixicon="RiArrowUpSLine"
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" side="top" className="w-40">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem>Mute Conversation</DropdownMenuItem>
|
|
<DropdownMenuItem>Mark as Read</DropdownMenuItem>
|
|
<DropdownMenuItem>Block User</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Conversation</DropdownMenuLabel>
|
|
<DropdownMenuItem>Share Conversation</DropdownMenuItem>
|
|
<DropdownMenuItem>Copy Conversation</DropdownMenuItem>
|
|
<DropdownMenuItem>Report Conversation</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem variant="destructive">
|
|
Delete Conversation
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</ButtonGroup>
|
|
<Switch defaultChecked className="ml-auto" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|