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

apps/v4/app/(app)/(root)/cards/payments.tsx

@@ -0,0 +1,139 @@
+import {
+  ArrowRight01Icon,
+  Calendar03Icon,
+  MoreHorizontalCircle01Icon,
+  RefreshIcon,
+  Settings01Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/styles/base-rhea/ui/breadcrumb"
+import { Button } from "@/styles/base-rhea/ui/button"
+import { Card, CardContent, CardHeader } from "@/styles/base-rhea/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/base-rhea/ui/dropdown-menu"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/styles/base-rhea/ui/item"
+
+export function Payments() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-3">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button
+                      size="icon-sm"
+                      variant="ghost"
+                      aria-label="Account options"
+                    />
+                  }
+                >
+                  <HugeiconsIcon
+                    icon={MoreHorizontalCircle01Icon}
+                    strokeWidth={2}
+                  />
+                  <span className="sr-only">Account options</span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>Profile</DropdownMenuItem>
+                    <DropdownMenuItem>Statements</DropdownMenuItem>
+                    <DropdownMenuItem>Documents</DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Payments</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </CardHeader>
+      <CardContent>
+        <ItemGroup>
+          <div role="listitem" className="w-full">
+            <Item variant="muted" render={<a href="#" />}>
+              <ItemMedia variant="icon">
+                <HugeiconsIcon icon={Settings01Icon} strokeWidth={2} />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Change transfer limit</ItemTitle>
+                <ItemDescription>
+                  Adjust how much you can send from your balance.
+                </ItemDescription>
+              </ItemContent>
+              <HugeiconsIcon
+                icon={ArrowRight01Icon}
+                className="size-4 shrink-0 text-muted-foreground"
+                strokeWidth={2}
+              />
+            </Item>
+          </div>
+          <div role="listitem" className="w-full">
+            <Item variant="muted" render={<a href="#" />}>
+              <ItemMedia variant="icon">
+                <HugeiconsIcon icon={Calendar03Icon} strokeWidth={2} />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Scheduled transfers</ItemTitle>
+                <ItemDescription>
+                  Set up a transfer to send at a later date.
+                </ItemDescription>
+              </ItemContent>
+              <HugeiconsIcon
+                icon={ArrowRight01Icon}
+                className="size-4 shrink-0 text-muted-foreground"
+                strokeWidth={2}
+              />
+            </Item>
+          </div>
+          <div role="listitem" className="w-full">
+            <Item variant="muted" render={<a href="#" />}>
+              <ItemMedia variant="icon">
+                <HugeiconsIcon icon={RefreshIcon} strokeWidth={2} />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Recurring card payments</ItemTitle>
+                <ItemDescription>
+                  Manage your repeated card transactions.
+                </ItemDescription>
+              </ItemContent>
+              <HugeiconsIcon
+                icon={ArrowRight01Icon}
+                className="size-4 shrink-0 text-muted-foreground"
+                strokeWidth={2}
+              />
+            </Item>
+          </div>
+        </ItemGroup>
+      </CardContent>
+    </Card>
+  )
+}