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

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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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 };