blodemd 0.0.5 → 0.0.7

package/docs/components/mdx/tooltip.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { ReactNode } from "react";
+
+interface TooltipProps {
+  tip: string;
+  headline?: string;
+  cta?: string;
+  href?: string;
+  children: ReactNode;
+}
+
+export const Tooltip = ({
+  tip,
+  headline,
+  cta,
+  href,
+  children,
+}: TooltipProps) => {
+  const [open, setOpen] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+  const show = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpen(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 150);
+  }, []);
+
+  return (
+    <span className="relative inline-block">
+      <button
+        className="cursor-help border-b border-dashed border-muted-foreground bg-transparent p-0 text-inherit"
+        onBlur={hide}
+        onFocus={show}
+        onMouseEnter={show}
+        onMouseLeave={hide}
+        type="button"
+      >
+        {children}
+      </button>
+      {open ? (
+        <span
+          className="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-64 -translate-x-1/2 rounded-lg border border-border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md"
+          onMouseEnter={show}
+          onMouseLeave={hide}
+          role="tooltip"
+        >
+          {headline ? (
+            <span className="mb-1 block font-semibold">{headline}</span>
+          ) : null}
+          <span className="block">{tip}</span>
+          {cta && href ? (
+            <a
+              className="mt-1 block text-primary hover:underline"
+              href={href}
+              rel="noopener noreferrer"
+            >
+              {cta}
+            </a>
+          ) : null}
+        </span>
+      ) : null}
+    </span>
+  );
+};

package/docs/components/mdx/tree.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface TreeFileProps {
+  name: string;
+}
+
+export const TreeFile = ({ name }: TreeFileProps) => (
+  <div className="flex items-center gap-2 py-0.5 pl-5 text-sm">
+    <svg
+      aria-hidden
+      className="size-4 shrink-0 text-muted-foreground"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 2v4a2 2 0 0 0 2 2h4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+    <span className="text-foreground">{name}</span>
+  </div>
+);
+
+interface TreeFolderProps {
+  name: string;
+  defaultOpen?: boolean;
+  openable?: boolean;
+  children?: ReactNode;
+}
+
+export const TreeFolder = ({
+  name,
+  defaultOpen = false,
+  openable = true,
+  children,
+}: TreeFolderProps) => {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const toggle = useCallback(() => {
+    if (openable) {
+      setOpen((prev) => !prev);
+    }
+  }, [openable]);
+
+  return (
+    <div>
+      <button
+        className={cn(
+          "flex w-full items-center gap-2 py-0.5 text-sm border-none bg-transparent text-left",
+          openable && "cursor-pointer hover:bg-accent/50 rounded"
+        )}
+        disabled={!openable}
+        onClick={toggle}
+        type="button"
+      >
+        <svg
+          aria-hidden
+          className={cn(
+            "size-3 shrink-0 text-muted-foreground transition-transform",
+            open && "rotate-90"
+          )}
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+        <svg
+          aria-hidden
+          className="size-4 shrink-0 text-muted-foreground"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          viewBox="0 0 24 24"
+        >
+          {open ? (
+            <path
+              d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          ) : (
+            <path
+              d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          )}
+        </svg>
+        <span className="font-medium text-foreground">{name}</span>
+      </button>
+      {open && children ? (
+        <div className="ml-3 border-l border-border pl-2">{children}</div>
+      ) : null}
+    </div>
+  );
+};
+
+const TreeRoot = ({ children }: { children: ReactNode }) => (
+  <div className="my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
+    {children}
+  </div>
+);
+
+export const Tree = Object.assign(TreeRoot, {
+  File: TreeFile,
+  Folder: TreeFolder,
+});

package/docs/components/mdx/type-table.tsx

@@ -0,0 +1,71 @@
+interface TypeField {
+  description?: string;
+  type?: string;
+  optional?: boolean;
+  required?: boolean;
+  default?: string;
+}
+
+export const TypeTable = ({ type }: { type: Record<string, TypeField> }) => {
+  const entries = Object.entries(type ?? {}).map(([name, field]) => ({
+    name,
+    ...field,
+  }));
+  const hasDefault = entries.some((entry) => entry.default);
+
+  return (
+    <div className="no-scrollbar my-4 w-full overflow-y-auto rounded-xl border border-border">
+      <table className="relative w-full overflow-hidden border-none text-sm">
+        <thead>
+          <tr>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Field
+            </th>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Type
+            </th>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Description
+            </th>
+            <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+              Required
+            </th>
+            {hasDefault ? (
+              <th className="border-b border-border bg-background/70 px-3 py-2.5 text-left text-xs uppercase tracking-wider text-muted-foreground">
+                Default
+              </th>
+            ) : null}
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry) => {
+            const required = entry.required ?? !entry.optional;
+            return (
+              <tr key={entry.name}>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  <code className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-xs">
+                    {entry.name}
+                  </code>
+                </td>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  {entry.type ?? "\u2014"}
+                </td>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  {entry.description ?? ""}
+                </td>
+                <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                  {required ? "Yes" : "Optional"}
+                </td>
+                {hasDefault ? (
+                  <td className="border-b border-border px-3 py-2.5 text-left align-top">
+                    {entry.default ?? "\u2014"}
+                  </td>
+                ) : null}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/docs/components/mdx/update.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+interface UpdateProps {
+  label: string;
+  description?: string;
+  tags?: string[];
+  children: ReactNode;
+}
+
+export const Update = ({ label, description, tags, children }: UpdateProps) => {
+  const anchorId = label.toLowerCase().replaceAll(/\s+/g, "-");
+
+  return (
+    <div
+      className="relative border-b border-border py-8 first:pt-0 last:border-b-0"
+      id={anchorId}
+    >
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <a
+          className="text-lg font-semibold text-foreground hover:underline"
+          href={`#${anchorId}`}
+        >
+          {label}
+        </a>
+        {description ? (
+          <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
+            {description}
+          </span>
+        ) : null}
+        {tags?.map((tag) => (
+          <span
+            className="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary"
+            key={tag}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+      <div className="prose prose-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {children}
+      </div>
+    </div>
+  );
+};

package/docs/components/mdx/video.tsx

@@ -0,0 +1,12 @@
+export const Video = ({ src }: { src: string }) => (
+  <div className="relative overflow-hidden rounded-xl border border-border bg-black pt-[56.25%]">
+    <iframe
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      className="absolute inset-0 h-full w-full border-0"
+      sandbox="allow-popups allow-presentation allow-scripts"
+      src={src}
+      title="Video"
+    />
+  </div>
+);

package/docs/components/mdx/view.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { isValidElement, useCallback, useMemo, useState } from "react";
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ViewItemProps {
+  title: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+export const View = ({ children }: ViewItemProps) => children as ReactElement;
+
+interface ViewGroupProps {
+  children: ReactNode;
+}
+
+export const ViewGroup = ({ children }: ViewGroupProps) => {
+  const items = useMemo(() => {
+    const nodes = Array.isArray(children) ? children : [children];
+    return nodes.filter(
+      (child): child is ReactElement<ViewItemProps> =>
+        isValidElement<ViewItemProps>(child) && child.type === View
+    );
+  }, [children]);
+
+  const [active, setActive] = useState(0);
+
+  const handleSelect = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    const index = Number(event.currentTarget.dataset.index ?? "0");
+    setActive(index);
+  }, []);
+
+  if (!items.length) {
+    return children as ReactElement;
+  }
+
+  return (
+    <div className="my-4">
+      <div className="mb-4 flex flex-wrap gap-2">
+        {items.map((item, index) => (
+          <button
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+              index === active
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:text-foreground"
+            )}
+            data-index={index}
+            key={item.props.title}
+            onClick={handleSelect}
+            type="button"
+          >
+            {item.props.icon ? (
+              <span className="shrink-0">{item.props.icon}</span>
+            ) : null}
+            {item.props.title}
+          </button>
+        ))}
+      </div>
+      <div>{items[active]}</div>
+    </div>
+  );
+};

package/docs/components/providers.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export const Providers = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider
+    attribute="class"
+    defaultTheme="system"
+    disableTransitionOnChange
+    enableColorScheme
+    storageKey="theme"
+  >
+    {children}
+  </ThemeProvider>
+);

package/docs/components/ui/breadcrumb.tsx

@@ -0,0 +1,92 @@
+import { Slot } from "radix-ui";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = ({ ...props }: ComponentProps<"nav">) => (
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+);
+
+const BreadcrumbList = ({ className, ...props }: ComponentProps<"ol">) => (
+  <ol
+    data-slot="breadcrumb-list"
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground break-words sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+);
+
+const BreadcrumbItem = ({ className, ...props }: ComponentProps<"li">) => (
+  <li
+    data-slot="breadcrumb-item"
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+);
+
+const BreadcrumbLink = ({
+  asChild,
+  className,
+  ...props
+}: ComponentProps<"a"> & { asChild?: boolean }) => {
+  const Comp = asChild ? Slot.Root : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+};
+
+const BreadcrumbPage = ({ className, ...props }: ComponentProps<"span">) => (
+  <span
+    data-slot="breadcrumb-page"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+);
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<"li">) => (
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    )}
+  </li>
+);
+
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/docs/components/ui/button.tsx

@@ -0,0 +1,90 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding font-medium text-sm outline-none transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-45 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default:
+          "h-10 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        icon: "size-10",
+        "icon-lg": "size-11",
+        "icon-sm":
+          "size-9 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)]",
+        "icon-xs":
+          "size-8 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
+        input:
+          "h-[var(--field-height)] gap-2 rounded-[var(--field-radius)] px-[var(--field-padding-x)] py-[var(--field-padding-y)]",
+        "input-sm":
+          "h-[var(--field-height-sm)] gap-2 rounded-[var(--field-radius)] px-[var(--field-padding-x)] py-[var(--field-padding-y)]",
+        lg: "h-11 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5",
+        sm: "h-9 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-8 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+      },
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/95 aria-pressed:bg-primary/95",
+        destructive:
+          "bg-red-600 text-white hover:bg-red-700 focus-visible:border-red-600 focus-visible:ring-red-500/30 active:bg-red-800 aria-pressed:bg-red-800 dark:bg-red-500 dark:aria-pressed:bg-red-300 dark:active:bg-red-300 dark:hover:bg-red-400",
+        destructiveSecondary:
+          "border-red-200 text-red-700 hover:bg-red-50 active:bg-red-100 aria-pressed:bg-red-100 dark:border-red-800 dark:text-red-300 dark:aria-pressed:bg-red-950 dark:active:bg-red-950 dark:hover:bg-red-950/60",
+        ghost:
+          "hover:bg-muted hover:text-foreground active:bg-muted/80 aria-expanded:bg-muted aria-pressed:bg-muted/80 dark:aria-pressed:bg-muted/60 dark:active:bg-muted/60 dark:hover:bg-muted/50",
+        input:
+          "border-input bg-card font-normal font-sans text-base text-foreground leading-snug shadow-input hover:border-input-hover focus-visible:ring-2 focus-visible:ring-ring/15 focus-visible:ring-offset-1 focus-visible:ring-offset-background active:border-input-hover/80 aria-pressed:border-input-hover aria-invalid:border-destructive-foreground data-[placeholder]:text-placeholder-foreground",
+        link: "text-primary underline-offset-4 hover:underline active:opacity-80 aria-pressed:underline aria-pressed:opacity-80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground active:bg-muted/80 aria-expanded:bg-muted aria-pressed:bg-muted/80 dark:border-input dark:bg-input/30 dark:aria-pressed:bg-input/60 dark:active:bg-input/60 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/85 active:bg-secondary/75 aria-expanded:bg-secondary aria-pressed:bg-secondary/75",
+        success:
+          "bg-green-600 text-white hover:bg-green-700 focus-visible:border-green-600 focus-visible:ring-green-500/30 active:bg-green-800 aria-pressed:bg-green-800 dark:bg-green-500 dark:aria-pressed:bg-green-300 dark:active:bg-green-300 dark:hover:bg-green-400",
+        successSecondary:
+          "border-green-200 text-green-700 hover:bg-green-50 active:bg-green-100 aria-pressed:bg-green-100 dark:border-green-800 dark:text-green-300 dark:aria-pressed:bg-green-950 dark:active:bg-green-950 dark:hover:bg-green-950/60",
+        warning:
+          "bg-yellow-600 text-white hover:bg-yellow-700 focus-visible:border-yellow-600 focus-visible:ring-yellow-500/30 active:bg-yellow-800 aria-pressed:bg-yellow-800 dark:bg-yellow-500 dark:text-yellow-950 dark:aria-pressed:bg-yellow-300 dark:active:bg-yellow-300 dark:hover:bg-yellow-400",
+        warningSecondary:
+          "border-yellow-200 text-yellow-700 hover:bg-yellow-50 active:bg-yellow-100 aria-pressed:bg-yellow-100 dark:border-yellow-800 dark:text-yellow-300 dark:aria-pressed:bg-yellow-950 dark:active:bg-yellow-950 dark:hover:bg-yellow-950/60",
+      },
+    },
+  }
+);
+
+const Button = ({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  children,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) =>
+  useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(buttonVariants({ className, size, variant })),
+      },
+      asChild ? props : { ...props, children }
+    ),
+    render: asChild ? (children as React.ReactElement) : undefined,
+    state: {
+      size,
+      slot: "button",
+      variant,
+    },
+  });
+
+export { Button, buttonVariants };

package/docs/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = ({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) => (
+  <div
+    className={cn(
+      "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-card-foreground text-sm ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+      className
+    )}
+    data-size={size}
+    data-slot="card"
+    {...props}
+  />
+);
+
+const CardHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+      className
+    )}
+    data-slot="card-header"
+    {...props}
+  />
+);
+
+const CardTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "font-medium text-base leading-snug group-data-[size=sm]/card:text-sm",
+      className
+    )}
+    data-slot="card-title"
+    {...props}
+  />
+);
+
+const CardDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => (
+  <div
+    className={cn("text-muted-foreground text-sm", className)}
+    data-slot="card-description"
+    {...props}
+  />
+);
+
+const CardAction = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+      className
+    )}
+    data-slot="card-action"
+    {...props}
+  />
+);
+
+const CardContent = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+    data-slot="card-content"
+    {...props}
+  />
+);
+
+const CardFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+      className
+    )}
+    data-slot="card-footer"
+    {...props}
+  />
+);
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};