@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,618 +0,0 @@
-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,
-}