Expandable Card

import React from 'react';
import { ExpandableCard } from '@/components/ui/ExpandableCard';

export default function ExpandableDemo() {
  return (
    <div className="flex min-h-screen items-center justify-center p-8 bg-background">
      <div className="w-full max-w-sm">
        <ExpandableCard
          duration={360}
          cardContent={
            <div className="rounded-2xl border border-border bg-card p-6 shadow-lg transition-all hover:border-primary/50">
              <span className="font-mono text-xs font-bold text-primary">CLICK TO EXPAND</span>
              <h4 className="mt-2 text-lg font-bold text-foreground">FLIP Morphing Card</h4>
              <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
                Hardware-accelerated layout morphing with zero Framer Motion dependencies.
              </p>
            </div>
          }
          expandedContent={
            <div className="space-y-4">
              <span className="font-mono text-xs font-bold text-primary">EXPANDED MODAL DIALOG</span>
              <h3 className="text-2xl font-black text-foreground">Analytical FLIP Kinetics</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">
                The card measures its initial trigger geometry and smoothly morphs into a centered dialog before reversing seamlessly upon dismissal.
              </p>
              <div className="rounded-xl border border-border bg-muted/30 p-4 font-mono text-xs text-muted-foreground">
                Press ESC or click the backdrop to close
              </div>
            </div>
          }
        />
      </div>
    </div>
  );
}

import * as React from 'react';
import * as ExpandableCardPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface ExpandableCardProps extends React.ComponentPropsWithoutRef<typeof ExpandableCardPrimitive.ExpandableCard> {
  className?: string;
}

export const ExpandableCard = React.forwardRef<HTMLDivElement, ExpandableCardProps>(
  ({ className, children, ...props }, ref) => (
    <ExpandableCardPrimitive.ExpandableCard
      ref={ref}
      className={clsx(
        'relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-shadow hover:shadow-md cursor-pointer',
        className
      )}
      {...props}
    >
      {children}
    </ExpandableCardPrimitive.ExpandableCard>
  )
);
ExpandableCard.displayName = 'ExpandableCard';

export const ExpandableRoot = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <ExpandableCardPrimitive.Root
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </ExpandableCardPrimitive.Root>
  )
);
ExpandableRoot.displayName = 'ExpandableRoot';

export const ExpandableTrigger = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <ExpandableCardPrimitive.Trigger
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </ExpandableCardPrimitive.Trigger>
  )
);
ExpandableTrigger.displayName = 'ExpandableTrigger';

export const ExpandableContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <ExpandableCardPrimitive.Content
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </ExpandableCardPrimitive.Content>
  )
);
ExpandableContent.displayName = 'ExpandableContent';

export const ExpandableClose = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <ExpandableCardPrimitive.Close
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </ExpandableCardPrimitive.Close>
  )
);
ExpandableClose.displayName = 'ExpandableClose';