snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx

@@ -0,0 +1,202 @@
+"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:flex style-sera:md:hidden">
+                Alert Dialog
+              </span>
+              <span className="flex md:hidden style-sera:md:flex">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&apos;t allow</AlertDialogCancel>
+                <AlertDialogAction>Allow</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+          <ButtonGroup>
+            <Button variant="outline">
+              <span className="style-sera:hidden">Button Group</span>
+              <span className="hidden style-sera:block">Group</span>
+            </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-fit">
+                <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>
+  )
+}