@sonamu-kit/react-components 0.1.0 → 0.1.2

package/src/components/ui/async-select.tsx

@@ -1,186 +0,0 @@
-"use client";
-
-import * as React from "react";
-import CheckIcon from "~icons/lucide/check";
-import ChevronsUpDownIcon from "~icons/lucide/chevrons-up-down";
-import Loader2Icon from "~icons/lucide/loader2";
-import XCircleIcon from "~icons/lucide/x-circle";
-
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "./command";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-
-export interface AsyncSelectOption<T = unknown> {
-  value: T;
-  label: string;
-}
-
-export interface AsyncSelectProps<T = number> {
-  /** 선택 옵션 배열 */
-  options: AsyncSelectOption<T>[];
-  /** 현재 선택된 값 */
-  value?: T | null;
-  /** 값 변경 핸들러 */
-  onValueChange?: (value: T | undefined) => void;
-  /** 로딩 상태 */
-  isLoading?: boolean;
-  /** placeholder 텍스트 */
-  placeholder?: string;
-  /** 검색 입력 placeholder */
-  searchPlaceholder?: string;
-  /** 결과 없음 텍스트 */
-  emptyText?: string;
-  /** 로딩 중 텍스트 */
-  loadingText?: string;
-  /** clearable 옵션 */
-  clearable?: boolean;
-  /** 비활성화 */
-  disabled?: boolean;
-  /** 추가 className */
-  className?: string;
-  /** 검색어 변경 핸들러 (서버 검색용) */
-  onSearch?: (keyword: string) => void;
-  /** 검색 디바운스 시간 (ms) */
-  searchDebounce?: number;
-}
-
-export function AsyncSelect<T = number>({
-  options,
-  value,
-  onValueChange,
-  isLoading = false,
-  placeholder = "Select...",
-  searchPlaceholder = "Search...",
-  emptyText = "No results found.",
-  loadingText = "Loading...",
-  clearable = false,
-  disabled = false,
-  className,
-  onSearch,
-  searchDebounce = 300,
-}: AsyncSelectProps<T>) {
-  const [open, setOpen] = React.useState(false);
-  const [keyword, setKeyword] = React.useState("");
-
-  // 검색어 디바운스
-  React.useEffect(() => {
-    if (!onSearch) return;
-
-    const timer = setTimeout(() => {
-      onSearch(keyword);
-    }, searchDebounce);
-
-    return () => clearTimeout(timer);
-  }, [keyword, onSearch, searchDebounce]);
-
-  const selectedOption = React.useMemo(
-    () => options.find((opt) => opt.value === value),
-    [options, value],
-  );
-
-  const handleSelect = (selectedValue: T | undefined) => {
-    onValueChange?.(selectedValue);
-    setOpen(false);
-  };
-
-  const handleClear = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onValueChange?.(undefined);
-    setOpen(false);
-  };
-
-  // value가 실제로 유효한 값인지 확인 (null, undefined, 빈 문자열 제외)
-  const hasValue = value !== null && value !== undefined && value !== "";
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled || isLoading}
-          className={cn(
-            "w-full justify-between hover:bg-background! hover:text-foreground! dark:hover:bg-input/30!",
-            className,
-          )}
-        >
-          <span className="flex-1 truncate text-left">
-            {isLoading ? (
-              <Loader2Icon className="h-4 w-4 animate-spin" />
-            ) : selectedOption ? (
-              selectedOption.label
-            ) : (
-              <span className="text-muted-foreground">{placeholder}</span>
-            )}
-          </span>
-          <div className="flex items-center gap-1 shrink-0 pl-2">
-            {clearable && hasValue && (
-              <span
-                className="flex items-center justify-center cursor-pointer"
-                onMouseDown={(e) => e.stopPropagation()}
-                onClick={handleClear}
-              >
-                <XCircleIcon className="h-4 w-4 opacity-50 hover:opacity-100 transition-opacity" />
-              </span>
-            )}
-            <ChevronsUpDownIcon className="h-4 w-4 shrink-0 opacity-50" />
-          </div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command shouldFilter={false}>
-          <CommandInput
-            placeholder={searchPlaceholder}
-            value={keyword}
-            onValueChange={setKeyword}
-          />
-          <CommandList>
-            <CommandEmpty>{isLoading ? loadingText : emptyText}</CommandEmpty>
-            <CommandGroup>
-              {clearable && (
-                <CommandItem
-                  value="__all__"
-                  onSelect={() => handleSelect(undefined)}
-                  className="cursor-pointer hover:bg-accent"
-                >
-                  <CheckIcon
-                    className={cn("mr-2 h-4 w-4", !hasValue ? "opacity-100" : "opacity-0")}
-                  />
-                  ALL
-                </CommandItem>
-              )}
-              {options.map((option) => (
-                <CommandItem
-                  key={String(option.value)}
-                  value={String(option.value)}
-                  onSelect={() => handleSelect(option.value)}
-                  className="cursor-pointer"
-                >
-                  <CheckIcon
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value === option.value ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                  {option.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-AsyncSelect.displayName = "AsyncSelect";

package/src/components/ui/avatar.tsx

@@ -1,45 +0,0 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as React from "react";
-
-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-muted",
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -1,38 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-  return (
-    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -1,102 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import ChevronRightIcon from "~icons/lucide/chevron-right";
-import MoreHorizontalIcon from "~icons/lucide/more-horizontal";
-
-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 overflow-wrap-anywhere 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]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRightIcon />}
-  </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}
-  >
-    <MoreHorizontalIcon className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};

package/src/components/ui/button.tsx

@@ -1,54 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-button gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-button px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-button",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Button = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-      asChild?: boolean;
-    }
->(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/components/ui/calendar.tsx

@@ -1,193 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { type DateRange, DayPicker } from "react-day-picker";
-import ChevronLeftIcon from "~icons/lucide/chevron-left";
-import ChevronRightIcon from "~icons/lucide/chevron-right";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "./button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: React.ComponentProps<typeof DayPicker>) {
-  const getInitialMonth = () => {
-    if (props.mode === "range") {
-      const rangeValue = props.selected as DateRange | undefined;
-      return rangeValue?.from || new Date();
-    }
-    return (props.selected as Date | undefined) || new Date();
-  };
-
-  const getInitialSecondMonth = () => {
-    const firstMonth = getInitialMonth();
-    const secondMonth = new Date(firstMonth);
-    secondMonth.setMonth(secondMonth.getMonth() + 1);
-    return secondMonth;
-  };
-
-  const [firstMonth, setFirstMonth] = React.useState<Date>(getInitialMonth());
-  const [secondMonth, setSecondMonth] = React.useState<Date>(getInitialSecondMonth());
-
-  React.useEffect(() => {
-    if (props.selected) {
-      if (props.mode === "range") {
-        const rangeValue = props.selected as DateRange | undefined;
-        if (rangeValue?.from) {
-          setFirstMonth(rangeValue.from);
-          const newSecondMonth = new Date(rangeValue.from);
-          newSecondMonth.setMonth(newSecondMonth.getMonth() + 1);
-          setSecondMonth(newSecondMonth);
-        }
-      } else {
-        const dateValue = props.selected as Date | undefined;
-        if (dateValue) {
-          setFirstMonth(dateValue);
-        }
-      }
-    }
-  }, [props.selected, props.mode]);
-
-  // Generate years from 1900 to current year + 10
-  const years = Array.from({ length: new Date().getFullYear() - 1900 + 11 }, (_, i) => 1900 + i);
-  const months = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-
-  const isRangeMode = props.mode === "range" && props.numberOfMonths === 2;
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      month={firstMonth}
-      onMonthChange={setFirstMonth}
-      classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium hidden",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-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 mx-auto",
-        head_row: "flex justify-center",
-        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2 justify-center",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100",
-        ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRightIcon className={cn("size-4", className)} {...props} />
-        ),
-        Caption: ({ displayMonth, displayIndex }) => {
-          // Determine which month state to use based on displayIndex
-          const currentDisplayMonth =
-            isRangeMode && displayIndex === 1 ? secondMonth : displayMonth;
-          const displayYear = currentDisplayMonth.getFullYear();
-          const displayMonthIndex = currentDisplayMonth.getMonth();
-
-          const handleMonthChange = (value: string | undefined | null) => {
-            if (!value) return;
-            const newDate = new Date(currentDisplayMonth);
-            newDate.setMonth(parseInt(value));
-
-            if (isRangeMode && displayIndex === 1) {
-              setSecondMonth(newDate);
-            } else {
-              setFirstMonth(newDate);
-            }
-          };
-
-          const handleYearChange = (value: string | undefined | null) => {
-            if (!value) return;
-            const newDate = new Date(currentDisplayMonth);
-            newDate.setFullYear(parseInt(value));
-
-            if (isRangeMode && displayIndex === 1) {
-              setSecondMonth(newDate);
-            } else {
-              setFirstMonth(newDate);
-            }
-          };
-
-          return (
-            <div className="flex justify-center pt-1 relative items-center w-full gap-2 px-10">
-              <Select value={displayMonthIndex.toString()} onValueChange={handleMonthChange}>
-                <SelectTrigger className="h-7 text-xs w-[110px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {months.map((month, index) => (
-                    <SelectItem key={month} value={index.toString()}>
-                      {month}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Select value={displayYear.toString()} onValueChange={handleYearChange}>
-                <SelectTrigger className="h-7 text-xs w-[90px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent className="max-h-[200px]">
-                  {years.reverse().map((year) => (
-                    <SelectItem key={year} value={year.toString()}>
-                      {year}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          );
-        },
-      }}
-      {...props}
-    />
-  );
-}
-
-export { Calendar };
-export type { DateRange };

package/src/components/ui/card.tsx

@@ -1,65 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-card border",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return <h4 data-slot="card-title" className={cn("leading-none", className)} {...props} />;
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <p data-slot="card-description" className={cn("text-muted-foreground", className)} {...props} />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("px-6 last:pb-6", className)} {...props} />;
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };