@vvedantb/ui 0.17.1 → 0.18.1

package/src/ui/badge.tsx

@@ -1,26 +1,36 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
 
-const badgeVariants = cva(
-  "inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-xs font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background",
-  {
-    variants: {
-      variant: {
-        default: "border-border bg-default text-foreground",
-        secondary: "border-separator bg-default text-default-foreground",
-        destructive: "border-danger/25 bg-danger/12 text-danger",
-        // Neutral border with a faint danger tint, e.g. a revoked or expired status.
-        "destructive-soft": "border-border bg-danger/10 text-danger",
-        outline: "border-separator bg-transparent text-muted-foreground",
-        success: "border-success/25 bg-success/12 text-success",
-        warning: "border-warning/25 bg-warning/12 text-warning",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
+const badgeBaseClasses =
+  "inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-xs font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background";
+
+const badgeVariantClasses = {
+  default: "border-border bg-default text-foreground",
+  secondary: "border-separator bg-default text-default-foreground",
+  destructive: "border-danger/25 bg-danger/12 text-danger",
+  // Neutral border with a faint danger tint, e.g. a revoked or expired status.
+  "destructive-soft": "border-border bg-danger/10 text-danger",
+  outline: "border-separator bg-transparent text-muted-foreground",
+  success: "border-success/25 bg-success/12 text-success",
+  warning: "border-warning/25 bg-warning/12 text-warning",
+};
+
+const badgeVariants = cva(badgeBaseClasses, {
+  variants: {
+    variant: badgeVariantClasses,
+  },
+  defaultVariants: {
+    variant: "default",
   },
-);
+});
+
+/** `UiConfig.Badge`: each given class string replaces the built-in one. */
+export interface BadgeConfig {
+  classes?: {
+    base?: string;
+    variant?: Partial<Record<keyof typeof badgeVariantClasses, string>>;
+  };
+}
 
 export interface BadgeProps
   extends
@@ -28,8 +38,22 @@ export interface BadgeProps
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
+  const classes = useUiConfig("Badge")?.classes;
+  const merge = useCn();
+  const v = variant ?? "default";
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div
+      className={
+        classes
+          ? merge(
+              classes.base ?? badgeBaseClasses,
+              classes.variant?.[v] ?? badgeVariantClasses[v],
+              className,
+            )
+          : merge(badgeVariants({ variant }), className)
+      }
+      {...props}
+    />
   );
 }
 

package/src/ui/border-beam.tsx

@@ -0,0 +1,97 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { AnimatePresence, m } from "motion/react";
+
+import { cn } from "../utils/cn";
+import { tokenTransition } from "../motion/presets";
+import { assignRef } from "../utils/ref";
+import { useAnimOffscreenRef } from "../utils/runtimeVisibility";
+import { useCn } from "./ui-config";
+
+export type BorderBeamSize = "sm" | "md" | "lg";
+
+/** Beam colour: neutral, the in-progress hue, or a two-colour sweep. */
+export type BorderBeamColorVariant = "mono" | "progress" | "colorful";
+
+export type BorderBeamProps = ComponentPropsWithRef<"div"> & {
+  children: ReactNode;
+  /**
+   * Runs the beam while true. Toggle this rather than mounting/unmounting
+   * <BorderBeam/> — the wrapper is a real DOM node, so conditional rendering
+   * would remount the whole subtree.
+   */
+  active: boolean;
+  size?: BorderBeamSize;
+  colorVariant?: BorderBeamColorVariant;
+  /**
+   * Wrapper classes. Give it the same radius as the child (e.g. `rounded-control`)
+   * — the beam inherits the wrapper's radius.
+   */
+  className?: string;
+};
+
+// `beam-*`, not `border-beam-*` — tailwind-merge reads a `border-` prefix as a
+// border-colour utility and would drop the base class as a variant conflict.
+const sizeClass: Record<BorderBeamSize, string> = {
+  sm: "beam-sm",
+  md: "",
+  lg: "beam-lg",
+};
+
+const colorClass: Record<BorderBeamColorVariant, string> = {
+  mono: "",
+  progress: "beam-progress",
+  colorful: "beam-colorful",
+};
+
+/**
+ * Wraps a surface in a hairline of light that travels around its border while
+ * `active`. The child needs an opaque background: it is what hides the
+ * gradient's interior so only the ring reads.
+ *
+ * The beam is CSS: import `@vvedantb/ui/tokens/css/border-beam.css` (or ship
+ * your own `.beam-*` rules). Colours are CSS variables on the wrapper or any
+ * ancestor: `--beam-color` (mono), `--beam-progress-color` (progress) and
+ * `--beam-colorful-from` / `--beam-colorful-to` (colorful).
+ *
+ * Spreads the rest props and ref onto the wrapper div so the whole thing can
+ * sit under a Radix `asChild` trigger.
+ */
+export function BorderBeam({
+  children,
+  active,
+  size = "md",
+  colorVariant = "mono",
+  className,
+  ref,
+  ...rest
+}: BorderBeamProps) {
+  const setOffscreen = useAnimOffscreenRef<HTMLDivElement>();
+  const merge = useCn();
+  return (
+    <div
+      className={merge("relative", className)}
+      ref={(node) => {
+        setOffscreen(node);
+        assignRef(ref, node);
+      }}
+      {...rest}
+    >
+      <AnimatePresence initial={false}>
+        {active ? (
+          <m.span
+            aria-hidden="true"
+            data-anim-chrome=""
+            className={cn("beam-root", sizeClass[size], colorClass[colorVariant])}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={tokenTransition.slow}
+          >
+            <span className="beam" />
+          </m.span>
+        ) : null}
+      </AnimatePresence>
+      {children}
+    </div>
+  );
+}

package/src/ui/button-group.tsx

@@ -2,37 +2,60 @@ import type * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 
-import { cn } from "../utils/cn";
 import { Separator } from "./separator";
+import { useCn, useUiConfig } from "./ui-config";
 
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
+/** `UiConfig.ButtonGroup`: each given class string replaces the built-in one. */
+export interface ButtonGroupConfig {
+  classes?: {
+    base?: string;
+    orientation?: Partial<Record<"horizontal" | "vertical", string>>;
+    text?: string;
+    separator?: string;
+  };
+}
+
+const buttonGroupBaseClasses =
+  "flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-md has-[>[data-slot=button-group]]:gap-2";
+
+const buttonGroupOrientationClasses = {
+  horizontal:
+    "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+  vertical:
+    "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+};
+
+const buttonGroupVariants = cva(buttonGroupBaseClasses, {
+  variants: {
+    orientation: buttonGroupOrientationClasses,
+  },
+  defaultVariants: {
+    orientation: "horizontal",
   },
-);
+});
 
 function ButtonGroup({
   className,
   orientation,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  const classes = useUiConfig("ButtonGroup")?.classes;
+  const merge = useCn();
+  const o = orientation ?? "horizontal";
   return (
     <div
       role="group"
       data-slot="button-group"
       data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
+      className={
+        classes
+          ? merge(
+              classes.base ?? buttonGroupBaseClasses,
+              classes.orientation?.[o] ?? buttonGroupOrientationClasses[o],
+              className,
+            )
+          : merge(buttonGroupVariants({ orientation }), className)
+      }
       {...props}
     />
   );
@@ -46,11 +69,14 @@ function ButtonGroupText({
   asChild?: boolean;
 }) {
   const Comp = asChild ? Slot.Root : "div";
+  const base = useUiConfig("ButtonGroup")?.classes?.text;
+  const merge = useCn();
 
   return (
     <Comp
-      className={cn(
-        "bg-surface-secondary flex items-center gap-2 rounded-md px-4 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+      className={merge(
+        base ??
+          "bg-surface-secondary flex items-center gap-2 rounded-md px-4 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -63,12 +89,15 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }: React.ComponentProps<typeof Separator>) {
+  const base = useUiConfig("ButtonGroup")?.classes?.separator;
+  const merge = useCn();
   return (
     <Separator
       data-slot="button-group-separator"
       orientation={orientation}
-      className={cn(
-        "bg-separator relative m-0! self-stretch data-[orientation=vertical]:h-auto",
+      className={merge(
+        base ??
+          "bg-separator relative m-0! self-stretch data-[orientation=vertical]:h-auto",
         className,
       )}
       {...props}

package/src/ui/button.tsx

@@ -1,45 +1,63 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
+import { Spinner } from "./spinner";
+import { useCn, useUiConfig } from "./ui-config";
 
 const ghostClass =
   "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground";
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90",
-        destructive:
-          "bg-[oklch(47.2%_0.195_25.7)] text-white hover:bg-[oklch(42.5%_0.185_25.7)]",
-        outline:
-          "border border-border bg-transparent text-foreground hover:bg-default",
-        secondary: "bg-default text-default-foreground hover:bg-default/78",
-        ghost: ghostClass,
-        link: "text-primary underline-offset-4 hover:underline active:scale-100",
-        // Ghost plus an override; tailwind-merge drops the clashing ghost classes.
-        flat: `${ghostClass} bg-transparent text-muted hover:bg-surface-tertiary hover:text-foreground`, // check-tokens-allow: text-muted
-        success: `${ghostClass} bg-success text-success-foreground hover:bg-success/90`,
-        warning: `${ghostClass} bg-warning text-warning-foreground hover:bg-warning/90`,
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-8 rounded-lg px-3 text-xs max-sm:hit-target",
-        lg: "h-11 px-6",
-        icon: "h-10 w-10",
-        "icon-sm": "h-8 w-8 rounded-lg max-sm:hit-target",
-        "icon-xs": "h-7 w-7 rounded-md hit-target",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
+const buttonBaseClasses =
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
+
+const buttonVariantClasses = {
+  default:
+    "bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90",
+  destructive:
+    "bg-[oklch(47.2%_0.195_25.7)] text-white hover:bg-[oklch(42.5%_0.185_25.7)]",
+  outline:
+    "border border-border bg-transparent text-foreground hover:bg-default",
+  secondary: "bg-default text-default-foreground hover:bg-default/78",
+  ghost: ghostClass,
+  link: "text-primary underline-offset-4 hover:underline active:scale-100",
+  // Ghost plus an override; tailwind-merge drops the clashing ghost classes.
+  flat: `${ghostClass} bg-transparent text-muted hover:bg-surface-tertiary hover:text-foreground`, // check-tokens-allow: text-muted
+  success: `${ghostClass} bg-success text-success-foreground hover:bg-success/90`,
+  warning: `${ghostClass} bg-warning text-warning-foreground hover:bg-warning/90`,
+};
+
+const buttonSizeClasses = {
+  default: "h-10 px-4 py-2",
+  xs: "h-7 rounded-md px-2 text-xs hit-target [&_svg:not([class*='size-'])]:size-3.5",
+  sm: "h-8 rounded-lg px-3 text-xs max-sm:hit-target",
+  lg: "h-11 px-6",
+  icon: "h-10 w-10",
+  "icon-sm": "h-8 w-8 rounded-lg max-sm:hit-target",
+  "icon-xs": "h-7 w-7 rounded-md hit-target",
+};
+
+const buttonVariants = cva(buttonBaseClasses, {
+  variants: {
+    variant: buttonVariantClasses,
+    size: buttonSizeClasses,
   },
-);
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type ButtonVariant = keyof typeof buttonVariantClasses;
+type ButtonSize = keyof typeof buttonSizeClasses;
+
+/** `UiConfig.Button`: each given class string replaces the built-in one. */
+export interface ButtonConfig {
+  classes?: {
+    base?: string;
+    variant?: Partial<Record<ButtonVariant, string>>;
+    size?: Partial<Record<ButtonSize, string>>;
+  };
+}
 
 export interface ButtonProps
   extends
@@ -54,31 +72,35 @@ export interface ButtonProps
   loading?: boolean;
 }
 
-function ButtonSpinner() {
-  return (
-    <svg className="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c3.042 1.135 5.824 3 7.938l3-2.647z" />
-    </svg>
-  );
-}
-
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     { className, variant, size, asChild = false, startContent, endContent, loading, children, ...props },
     ref,
   ) => {
     const Comp = asChild ? Slot : "button";
+    const classes = useUiConfig("Button")?.classes;
+    const merge = useCn();
+    const v = variant ?? "default";
+    const s = size ?? "default";
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={
+          classes
+            ? merge(
+                classes.base ?? buttonBaseClasses,
+                classes.variant?.[v] ?? buttonVariantClasses[v],
+                classes.size?.[s] ?? buttonSizeClasses[s],
+                className,
+              )
+            : merge(buttonVariants({ variant, size, className }))
+        }
         ref={ref}
         {...props}
         {...(loading ? { disabled: true, "data-loading": "true" } : null)}
       >
         {asChild ? children : (
           <>
-            {loading ? <ButtonSpinner /> : startContent}
+            {loading ? <Spinner variant="ring" /> : startContent}
             {children}
             {endContent}
           </>

package/src/ui/calendar.tsx

@@ -6,6 +6,9 @@ import {
 } from "@tabler/icons-react";
 import {
   type Chevron,
+  type ClassNames,
+  type CustomComponents,
+  type DayButton,
   DayPicker,
   type Root,
   getDefaultClassNames,
@@ -14,6 +17,18 @@ import { cn } from "../utils/cn";
 import {
   pickerFocusClass,
 } from "./_picker-classes";
+import { useCn, useUiConfig } from "./ui-config";
+
+/**
+ * `UiConfig.Calendar`. `classes.base` replaces the built-in root `className`
+ * classes; every other key replaces the built-in value of that DayPicker
+ * `classNames` key (a caller `classNames` still wins). `components` is the
+ * default for the prop, applied over the built-in Root and Chevron.
+ */
+export interface CalendarConfig {
+  classes?: Partial<ClassNames> & { base?: string };
+  components?: Partial<CustomComponents>;
+}
 
 // shadcn's v9 calendar on package tokens: no background of its own (it takes
 // the popover or card surface it sits on), selected days use the picker
@@ -57,14 +72,19 @@ function Calendar({
   ...props
 }: React.ComponentProps<typeof DayPicker>) {
   const defaultClassNames = getDefaultClassNames();
+  const config = useUiConfig("Calendar");
+  const merge = useCn();
+  const { base, ...configClassNames } = config?.classes ?? {};
 
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn(
-        "group/calendar p-1 text-foreground [--cell-size:--spacing(8)]",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+      className={merge(
+        base ?? [
+          "group/calendar p-1 text-foreground [--cell-size:--spacing(8)]",
+          String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+          String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        ],
         className,
       )}
       captionLayout={captionLayout}
@@ -146,11 +166,13 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-lg", defaultClassNames.range_end),
         hidden: cn("invisible", defaultClassNames.hidden),
+        ...configClassNames,
         ...classNames,
       }}
       components={{
         Root: CalendarRoot,
         Chevron: CalendarChevron,
+        ...config?.components,
         ...components,
       }}
       {...props}
@@ -158,4 +180,25 @@ function Calendar({
   );
 }
 
-export { Calendar };
+/**
+ * DayPicker's day button plus `data-selected`, so its classes can style the
+ * selected day on the button itself (`data-[selected=true]:bg-primary`).
+ * Pass it as `components.DayButton` (or through `UiConfig.Calendar.components`).
+ */
+function CalendarDayButton({
+  day: _day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+
+  // DayPicker decides which day has focus; moving DOM focus to match is what
+  // its own DayButton does.
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return <button ref={ref} data-selected={modifiers.selected} {...props} />;
+}
+
+export { Calendar, CalendarDayButton };

package/src/ui/card.tsx

@@ -1,5 +1,28 @@
 import * as React from "react";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+export interface CardConfig {
+  /** Replaces the built-in classes of a part. A part left out keeps its default. */
+  classes?: {
+    root?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    content?: string;
+    footer?: string;
+    action?: string;
+  };
+}
+
+/** The app's class string for `part` (else `fallback`), merged with the caller `className`. */
+function useCardClass(
+  part: keyof NonNullable<CardConfig["classes"]>,
+  fallback: string,
+  className: string | undefined,
+): string {
+  const merge = useCn();
+  return merge(useUiConfig("Card")?.classes?.[part] ?? fallback, className);
+}
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -7,10 +30,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-lg bg-surface-card text-surface-foreground",
-      className,
-    )}
+    className={useCardClass("root", "rounded-lg bg-surface-card text-surface-foreground", className)}
     {...props}
   />
 ));
@@ -22,18 +42,67 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={useCardClass("header", "flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
 ));
 CardHeader.displayName = "CardHeader";
 
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={useCardClass("title", "font-semibold leading-none tracking-[-0.02em]", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={useCardClass("description", "text-sm text-muted-foreground", 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} />
+  <div ref={ref} className={useCardClass("content", "p-6 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
-export { Card, CardHeader, CardContent };
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={useCardClass("footer", "flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+/** Top-right slot of a grid header (`grid-cols-[1fr_auto]`): spans the title and description rows. */
+const CardAction = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={useCardClass("action", "col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+    {...props}
+  />
+));
+CardAction.displayName = "CardAction";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction };