@licklist/design 0.78.5-dev.107 → 0.78.5-dev.108

package/src/v2/shadcn/components/ui/aspect-ratio.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AspectRatio } from './aspect-ratio'
+
+export default {
+  title: 'v2/Shadcn/AspectRatio',
+  component: AspectRatio,
+  parameters: { layout: 'padded' },
+} as Meta<typeof AspectRatio>
+
+type Story = StoryObj<typeof AspectRatio>
+
+export const Ratio16by9: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <AspectRatio ratio={16 / 9}>
+        <div className="flex h-full w-full items-center justify-center rounded-md bg-surface-secondary text-label-secondary text-sm">
+          16:9 Aspect Ratio
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+}
+
+export const Square: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <AspectRatio ratio={1}>
+        <div className="flex h-full w-full items-center justify-center rounded-md bg-surface-secondary text-label-secondary text-sm">
+          1:1 Square
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+}
+
+export const Ratio4by3: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <AspectRatio ratio={4 / 3}>
+        <div className="flex h-full w-full items-center justify-center rounded-md bg-surface-secondary text-label-secondary text-sm">
+          4:3 Aspect Ratio
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+}

package/src/v2/shadcn/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/src/v2/shadcn/components/ui/avatar.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Avatar, AvatarImage, AvatarFallback } from './avatar'
+
+export default {
+  title: 'v2/Shadcn/Avatar',
+  component: Avatar,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Avatar>
+
+type Story = StoryObj<typeof Avatar>
+
+export const WithImage: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="/broken-image.jpg" alt="User" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar className="h-6 w-6"><AvatarFallback className="text-xs">XS</AvatarFallback></Avatar>
+      <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">SM</AvatarFallback></Avatar>
+      <Avatar><AvatarFallback>MD</AvatarFallback></Avatar>
+      <Avatar className="h-12 w-12"><AvatarFallback>LG</AvatarFallback></Avatar>
+    </div>
+  ),
+}

package/src/v2/shadcn/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "../../lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-surface-secondary", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/v2/shadcn/components/ui/badge.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Badge } from './badge'
+
+export default {
+  title: 'v2/Shadcn/Badge',
+  component: Badge,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Badge>
+
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = { args: { children: 'Default', variant: 'default' } }
+export const Secondary: Story = { args: { children: 'Secondary', variant: 'secondary' } }
+export const Destructive: Story = { args: { children: 'Destructive', variant: 'destructive' } }
+export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } }
+export const Success: Story = { args: { children: 'Active', variant: 'success' } }
+export const Warning: Story = { args: { children: 'Pending', variant: 'warning' } }

package/src/v2/shadcn/components/ui/badge.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-border-action focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-fill-action text-label-white hover:bg-fill-action-hover",
+        secondary: "border-transparent bg-surface-secondary text-label-primary hover:bg-surface-tertiary",
+        destructive: "border-transparent bg-fill-danger text-label-white hover:bg-fill-danger",
+        outline: "text-label-primary",
+        mono: "border-transparent bg-surface-tertiary text-label-primary font-mono font-medium",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/v2/shadcn/components/ui/breadcrumb.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb'
+
+function BreadcrumbDefault() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Profile</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+function BreadcrumbWithEllipsis() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Category</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Current Page</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+function BreadcrumbTwoLevels() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Users</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+export default {
+  title: 'v2/Shadcn/Breadcrumb',
+  component: Breadcrumb,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Breadcrumb>
+
+type Story = StoryObj<typeof Breadcrumb>
+
+export const Default: Story = {
+  render: () => React.createElement(BreadcrumbDefault),
+}
+
+export const WithEllipsis: Story = {
+  render: () => React.createElement(BreadcrumbWithEllipsis),
+}
+
+export const TwoLevels: Story = {
+  render: () => React.createElement(BreadcrumbTwoLevels),
+}

package/src/v2/shadcn/components/ui/breadcrumb.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { IconChevronRight, IconThreeDots } from "../../../icons";
+
+import { cn } from "../../lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <IconChevronRight className="fill-fill-secondary" />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <IconThreeDots className="h-4 w-4 fill-fill-primary" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/v2/shadcn/components/ui/button.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+
+export default {
+  title: 'v2/Shadcn/Button',
+  component: Button,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Button>
+
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = { args: { children: 'Button', variant: 'default' } }
+export const Destructive: Story = { args: { children: 'Delete', variant: 'destructive' } }
+export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } }
+export const Secondary: Story = { args: { children: 'Secondary', variant: 'secondary' } }
+export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } }
+export const Link: Story = { args: { children: 'Link', variant: 'link' } }
+export const Small: Story = { args: { children: 'Small', size: 'sm' } }
+export const Large: Story = { args: { children: 'Large', size: 'lg' } }
+export const Disabled: Story = { args: { children: 'Disabled', disabled: true } }

package/src/v2/shadcn/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-action disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_img]:pointer-events-none [&_img]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-fill-action text-label-white hover:bg-fill-action-hover active:bg-fill-action-pressed min-w-[150px]",
+        destructive: "bg-fill-danger text-label-white hover:bg-fill-danger active:bg-fill-danger",
+        outline: "border border-border-primary bg-surface-primary text-label-primary hover:bg-surface-secondary hover:border-border-secondary",
+        secondary: "bg-surface-secondary text-label-primary hover:bg-surface-tertiary",
+        ghost: "border border-border-primary text-label-primary hover:bg-surface-tertiary",
+        cancel: "bg-surface-danger-soft text-label-danger hover:text-label-danger hover:bg-surface-danger-soft-hover",
+        link: "text-label-action underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2 [&_svg]:size-5 [&_img]:w-5 [&_img]:h-5",
+        sm: "h-9 rounded-md px-3 [&_svg]:size-5 [&_img]:w-5 [&_img]:h-5",
+        lg: "h-11 rounded-md px-6 [&_svg]:size-6 [&_img]:w-6 [&_img]:h-6",
+        icon: "h-10 w-10 [&_svg]:size-5 [&_img]:w-5 [&_img]:h-5",
+      },
+      withIcon: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      // With icon: asymmetric padding (less on icon side, more on text side)
+      { size: "default", withIcon: true, className: "pl-3 pr-4" },
+      { size: "sm", withIcon: true, className: "pl-2 pr-3" },
+      { size: "lg", withIcon: true, className: "pl-4 pr-8" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      withIcon: false,
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  withIcon?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, withIcon = false, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, withIcon, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/v2/shadcn/components/ui/calendar.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Calendar } from './calendar'
+
+function CalendarDefault() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border border-border-primary"
+    />
+  )
+}
+
+function CalendarWithRange() {
+  const [range, setRange] = React.useState<{ from: Date | undefined; to: Date | undefined }>({
+    from: undefined,
+    to: undefined,
+  })
+  return (
+    <Calendar
+      mode="range"
+      selected={range}
+      onSelect={(r: any) => setRange(r || { from: undefined, to: undefined })}
+      numberOfMonths={2}
+      className="rounded-md border border-border-primary"
+    />
+  )
+}
+
+function CalendarDisabled() {
+  return (
+    <Calendar
+      mode="single"
+      disabled
+      className="rounded-md border border-border-primary"
+    />
+  )
+}
+
+export default {
+  title: 'v2/Shadcn/Calendar',
+  component: Calendar,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Calendar>
+
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {
+  render: () => React.createElement(CalendarDefault),
+}
+
+export const WithRange: Story = {
+  render: () => React.createElement(CalendarWithRange),
+}
+
+export const Disabled: Story = {
+  render: () => React.createElement(CalendarDisabled),
+}

package/src/v2/shadcn/components/ui/calendar.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { IconChevronLeft, IconChevronRight } from "../../../icons";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-label-secondary rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-surface-primary-hover/50 [&:has([aria-selected])]:bg-surface-primary-hover first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-fill-action text-label-white hover:bg-fill-action-hover hover:text-label-white focus:bg-fill-action focus:text-label-white",
+        day_today: "bg-surface-primary-hover text-label-primary",
+        day_outside:
+          "day-outside text-label-secondary opacity-50 aria-selected:bg-surface-primary-hover/50 aria-selected:text-label-secondary aria-selected:opacity-30",
+        day_disabled: "text-label-secondary opacity-50",
+        day_range_middle: "aria-selected:bg-surface-primary-hover aria-selected:text-label-primary",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <IconChevronLeft className="h-4 w-4 fill-fill-primary" />,
+        IconRight: () => <IconChevronRight className="h-4 w-4 fill-fill-primary" />,
+      } as any}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/src/v2/shadcn/components/ui/card.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card'
+import { Button } from './button'
+
+export default {
+  title: 'v2/Shadcn/Card',
+  component: Card,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Card>
+
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">Card content area with any content.</p>
+      </CardContent>
+      <CardFooter className="flex justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Save</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Card className="w-80 p-6">
+      <p className="text-sm">A simple card with just content.</p>
+    </Card>
+  ),
+}

package/src/v2/shadcn/components/ui/card.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-label-secondary", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };