@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/primitives/card.tsx

@@ -0,0 +1,618 @@
+import React, { forwardRef, createContext, useContext } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '~/components/catalyst-ui'
+
+// #endregion ===========================================================================
+// CARD CONTEXT
+// #region =========================================================================
+interface CardContextValue {
+  variant?: string
+  size?: string
+  interactive?: boolean
+}
+
+const CardContext = createContext<CardContextValue>({})
+
+const useCardContext = () => useContext(CardContext)
+
+// #endregion ===========================================================================
+// CARD VARIANTS
+// #region ============================================================================
+const cardVariants = cva(
+  "rounded-lg transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground shadow-lg hover:shadow-xl",
+        elevated: "bg-surface-container-low shadow-md hover:shadow-lg active:shadow-sm",
+        filled: "bg-primary text-on-primary shadow-sm hover:shadow-md active:shadow-sm",
+        tonal: "bg-secondary-container text-on-secondary-container hover:shadow-sm active:shadow-none",
+        outlined: "border border-outline text-primary hover:bg-primary/8 active:bg-primary/12",
+        ghost: "bg-transparent border-0 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        gradient: "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm",
+        glass: "bg-background/20 backdrop-blur-md border border-border/50 text-foreground hover:bg-background/30",
+        dashed: "bg-transparent border-2 border-dashed border-border hover:border-primary/50",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        link: "bg-transparent text-primary underline-offset-4 hover:underline hover:text-foreground",
+        styled: "transition duration-300 border-2 border-border text-foreground rounded-md bg-primary hover:bg-muted",
+        reverted: "transition duration-300 border-2 border-border text-foreground rounded-md bg-background hover:bg-primary",
+        success: "bg-green-600 text-white shadow-sm hover:bg-green-700 active:shadow-none",
+        warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:shadow-none",
+        info: "bg-blue-600 text-white shadow-sm hover:bg-blue-700 active:shadow-none",
+        soft: "bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30",
+        shine: "bg-primary text-primary-foreground relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700",
+        pulse: "bg-primary text-primary-foreground animate-pulse hover:animate-none shadow-md hover:shadow-lg",
+      },
+      size: {
+        sm: "p-3 text-sm",
+        default: "p-6",
+        lg: "p-8 text-lg",
+        xl: "p-10 text-xl",
+        icon: "p-4 aspect-square flex items-center justify-center",
+      },
+      interactive: {
+        true: "cursor-pointer hover:scale-[1.02] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        false: "",
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      interactive: false,
+      align: "left",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// CARD HEADER VARIANTS
+// #region ===========================================================================
+const cardHeaderVariants = cva(
+  "flex flex-col",
+  {
+    variants: {
+      spacing: {
+        none: "p-0 space-y-0",
+        compact: "p-3 space-y-1",
+        default: "p-6 space-y-1.5",
+        spacious: "p-8 space-y-2",
+      },
+      align: {
+        left: "items-start text-left",
+        center: "items-center text-center",
+        right: "items-end text-right",
+      },
+    },
+    defaultVariants: {
+      spacing: "default",
+      align: "left",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// CARD TITLE VARIANTS
+// #region ===========================================================================
+const cardTitleVariants = cva(
+  "font-semibold leading-none tracking-tight",
+  {
+    variants: {
+      size: {
+        sm: "text-base",
+        default: "text-2xl",
+        lg: "text-3xl",
+        xl: "text-4xl",
+      },
+      weight: {
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      weight: "semibold",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// CARD DESCRIPTION VARIANTS
+// #region ===========================================================================
+const cardDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        default: "text-sm",
+        base: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// CARD CONTENT VARIANTS
+// #region ===========================================================================
+const cardContentVariants = cva(
+  "",
+  {
+    variants: {
+      padding: {
+        none: "p-0",
+        sm: "p-3",
+        default: "p-6 pt-0",
+        lg: "p-8 pt-0",
+      },
+      spacing: {
+        none: "space-y-0",
+        tight: "space-y-2",
+        default: "space-y-4",
+        loose: "space-y-6",
+      },
+    },
+    defaultVariants: {
+      padding: "default",
+      spacing: "default",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// CARD FOOTER VARIANTS
+// #region ===========================================================================
+const cardFooterVariants = cva(
+  "flex p-6 pt-0",
+  {
+    variants: {
+      layout: {
+        row: "flex-row",
+        column: "flex-col",
+        "row-reverse": "flex-row-reverse",
+        "column-reverse": "flex-col-reverse",
+      },
+      justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly",
+      },
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+      },
+      gap: {
+        none: "gap-0",
+        sm: "gap-2",
+        default: "gap-3",
+        md: "gap-4",
+        lg: "gap-6",
+      },
+    },
+    defaultVariants: {
+      layout: "row",
+      justify: "start",
+      align: "center",
+      gap: "default",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// CARD ACTION VARIANTS
+// #region ===========================================================================
+const cardActionVariants = cva(
+  "col-start-2 row-span-2 row-start-1",
+  {
+    variants: {
+      position: {
+        default: "self-start justify-self-end",
+        "top-right": "self-start justify-self-end",
+        "top-left": "self-start justify-self-start",
+        "bottom-right": "self-end justify-self-end",
+        "bottom-left": "self-end justify-self-start",
+        center: "self-center justify-self-center",
+      },
+    },
+    defaultVariants: {
+      position: "default",
+    },
+  }
+)
+
+// #endregion ===========================================================================
+// TYPE DEFINITIONS
+// #region ===========================================================================
+interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+interface CardHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardHeaderVariants> {}
+
+interface CardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement>,
+    VariantProps<typeof cardTitleVariants> {}
+
+interface CardDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof cardDescriptionVariants> {}
+
+interface CardContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardContentVariants> {}
+
+interface CardFooterProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardFooterVariants> {}
+
+interface CardActionProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardActionVariants> {}
+
+// #endregion ===========================================================================
+// CARD COMPONENT
+// #region ===========================================================================
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, size, interactive, align, children, ...props }, ref) => {
+    const contextValue: CardContextValue = { variant, size, interactive }
+    
+    return (
+      <CardContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          className={cn(cardVariants({ variant, size, interactive, align }), className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </CardContext.Provider>
+    )
+  }
+)
+Card.displayName = 'Card'
+
+// #endregion ===========================================================================
+// CARD HEADER COMPONENT
+// #region ===========================================================================
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, spacing, align, ...props }, ref) => {
+    const context = useCardContext()
+    
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          cardHeaderVariants({ 
+            spacing, 
+            align: align || (context.variant === 'default' ? 'left' : undefined)
+          }), 
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+CardHeader.displayName = 'CardHeader'
+
+// #endregion ===========================================================================
+// CARD TITLE COMPONENT
+// #region ===========================================================================
+const CardTitle = React.forwardRef<HTMLParagraphElement, CardTitleProps>(
+  ({ className, size, weight, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn(cardTitleVariants({ size, weight }), className)}
+      {...props}
+    />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+// #endregion ===========================================================================
+// CARD DESCRIPTION COMPONENT
+// #region ===========================================================================
+const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
+  ({ className, size, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn(cardDescriptionVariants({ size }), className)}
+      {...props}
+    />
+  )
+)
+CardDescription.displayName = 'CardDescription'
+
+// #endregion ===========================================================================
+// CARD ACTION COMPONENT
+// #region ===========================================================================
+const CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(
+  ({ className, position, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-action"
+      className={cn(cardActionVariants({ position }), className)}
+      {...props}
+    />
+  )
+)
+CardAction.displayName = 'CardAction'
+
+// #endregion ===========================================================================
+// CARD CONTENT COMPONENT
+// #region ===========================================================================
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, padding, spacing, ...props }, ref) => (
+    <div 
+      ref={ref} 
+      className={cn(cardContentVariants({ padding, spacing }), className)} 
+      {...props} 
+    />
+  )
+)
+CardContent.displayName = 'CardContent'
+
+// #endregion ===========================================================================
+// CARD FOOTER COMPONENT
+// #region ===========================================================================
+const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, layout, justify, align, gap, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardFooterVariants({ layout, justify, align, gap }), className)}
+      {...props}
+    />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+// #endregion ===========================================================================
+// CARD IMAGE COMPONENT
+// #region ===========================================================================
+interface CardImageProps extends CardProps {
+  imgSrc: string;
+  imgAlt: string;
+  title: string;
+  description: string;
+  actionText?: string;
+  actionTo?: string;
+  onActionClick?: () => void;
+}
+
+const CardImage = forwardRef<HTMLDivElement, CardImageProps>(
+  ({ 
+    className, 
+    imgSrc, 
+    imgAlt, 
+    title, 
+    description, 
+    actionText, 
+    actionTo, 
+    onActionClick,
+    variant,
+    size,
+    interactive,
+    ...props 
+  }, ref) => {
+    const ActionElement = actionTo ? 'a' : 'button';
+    
+    return (
+      <Card
+        ref={ref}
+        variant={variant}
+        size={size}
+        interactive={interactive}
+        className={cn("overflow-hidden", className)}
+        {...props}
+      >
+        <div className="aspect-video overflow-hidden">
+          <img
+            src={imgSrc}
+            alt={imgAlt}
+            className="h-full w-full object-cover transition-all hover:scale-105"
+          />
+        </div>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </CardHeader>
+        {actionText && (
+          <CardFooter>
+            <ActionElement
+              {...(actionTo ? { href: actionTo } : { onClick: onActionClick })}
+              className="text-primary hover:underline"
+            >
+              {actionText}
+            </ActionElement>
+          </CardFooter>
+        )}
+      </Card>
+    );
+  }
+);
+CardImage.displayName = "CardImage";
+
+// #endregion ===========================================================================
+// CARD HEART COMPONENT
+// #region ===========================================================================
+interface CardHeartProps {
+  filled: boolean;
+  className?: string;
+}
+
+function CardHeart({ filled, className }: CardHeartProps) {
+  return filled ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.218l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
+    </svg>
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+      />
+    </svg>
+  );
+}
+
+// #endregion ===========================================================================
+// CARD PRODUCT COMPONENT
+// #region ===========================================================================
+interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  image: string;
+  category: string;
+  rating: number;
+}
+
+interface CardProductProps extends CardProps {
+  product: Product;
+  onAddToCart: (productId: string) => void;
+  onToggleFavorite: (productId: string) => void;
+  isFavorite?: boolean;
+}
+
+const CardProduct = forwardRef<HTMLDivElement, CardProductProps>(
+  ({ 
+    className, 
+    product, 
+    onAddToCart, 
+    onToggleFavorite, 
+    isFavorite = false,
+    variant,
+    size,
+    interactive,
+    ...props 
+  }, ref) => {
+    return (
+      <Card
+        ref={ref}
+        variant={variant}
+        size={size}
+        interactive={interactive}
+        className={cn("group overflow-hidden", className)}
+        {...props}
+      >
+        <div className="relative aspect-square overflow-hidden">
+          <img
+            src={product.image}
+            alt={product.name}
+            className="h-full w-full object-cover transition-all group-hover:scale-105"
+          />
+          <button
+            onClick={() => onToggleFavorite(product.id)}
+            className="absolute top-2 right-2 rounded-full bg-background/80 p-2 backdrop-blur-sm transition-all hover:bg-background"
+            aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+          >
+            <CardHeart filled={isFavorite} className="h-4 w-4" />
+          </button>
+        </div>
+        <CardHeader spacing="compact">
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle size="sm">{product.name}</CardTitle>
+              <CardDescription size="sm">{product.category}</CardDescription>
+            </div>
+            <div className="text-lg font-semibold">${product.price.toFixed(2)}</div>
+          </div>
+        </CardHeader>
+        <CardContent padding="sm">
+          <p className="line-clamp-2 text-sm text-muted-foreground">
+            {product.description}
+          </p>
+        </CardContent>
+        <CardFooter padding="sm">
+          <button
+            onClick={() => onAddToCart(product.id)}
+            className="w-full rounded-md bg-primary py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            Add to Cart
+          </button>
+        </CardFooter>
+      </Card>
+    );
+  }
+);
+CardProduct.displayName = "CardProduct";
+
+// #endregion ===========================================================================
+// EXPORTS
+// #region ===========================================================================
+export function CardGroup({ variant, className, children }: any) {
+  switch (variant) {
+    case 'vertical':
+      return (
+        <div className={cn('flex flex-col *:rounded-none *:shadow-none *:not-last:border-b-0 *:first:rounded-t-xl *:last:rounded-b-xl', className)}>
+          {children}
+        </div>
+      )
+    default:
+      return (
+        <div className={cn('flex *:rounded-none *:shadow-none max-xl:flex-col max-xl:*:not-last:border-b-0 max-xl:*:first:rounded-t-xl max-xl:*:last:rounded-b-xl xl:*:not-last:border-r-0 xl:*:first:rounded-l-xl xl:*:last:rounded-r-xl', className)}>
+          {children}
+        </div>
+      )
+  }
+}
+
+export { 
+  Card, 
+  CardHeader, 
+  CardFooter, 
+  CardTitle, 
+  CardDescription, 
+  CardAction,
+  CardContent, 
+  CardImage, 
+  CardHeart, 
+  CardProduct,
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+  cardActionVariants,
+  useCardContext,
+  type CardProps,
+  type CardHeaderProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
+  type CardFooterProps,
+  type CardActionProps,
+}