"use client" import { createContext, useCallback, useContext, useMemo, type ComponentProps, type HTMLAttributes, type MouseEventHandler, } from "react" import Image from "next/image" import { useControllableState } from "@radix-ui/react-use-controllable-state" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" // ============================================================================ // Tokens — optional chrome for demos / quick styling // ============================================================================ /** Border + shadow stack using theme tokens so elevation reads in light and dark. */ export const cutoutCardSurfaceShadowClassName = cn( "border border-border/80 dark:border-border/60", "shadow-[0px_1px_2px_-1px_color-mix(in_oklab,var(--foreground)_8%,transparent),0px_4px_8px_-2px_color-mix(in_oklab,var(--foreground)_6%,transparent),0px_8px_16px_-4px_color-mix(in_oklab,var(--foreground)_5%,transparent)]", "transition-[box-shadow,border-color] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", "hover:border-border hover:shadow-[0px_2px_4px_-1px_color-mix(in_oklab,var(--foreground)_10%,transparent),0px_8px_16px_-4px_color-mix(in_oklab,var(--foreground)_8%,transparent),0px_16px_32px_-8px_color-mix(in_oklab,var(--foreground)_6%,transparent)]" ) export const cutoutCardSurfaceClassName = cn( "group/cutout relative cursor-pointer overflow-hidden rounded-[28px] bg-card text-card-foreground", cutoutCardSurfaceShadowClassName ) /** Staggered text/footer entrance inside `CutoutCardContent` — use with `motion.div` children. */ export function useCutoutContentStaggerVariants() { const reduceMotion = useReducedMotion() return useMemo(() => { if (reduceMotion) { return { container: { hidden: {}, show: { transition: { staggerChildren: 0.03, delayChildren: 0 }, }, }, item: { hidden: { opacity: 0 }, show: { opacity: 1, transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] }, }, }, } as const } return { container: { hidden: {}, show: { transition: { staggerChildren: 0.055, delayChildren: 0.06 }, }, }, item: { hidden: { opacity: 0, y: 12, filter: "blur(5px)" }, show: { opacity: 1, y: 0, filter: "blur(0px)", transition: { type: "spring", duration: 0.48, bounce: 0.14 }, }, }, } as const }, [reduceMotion]) } const CORNER_PATH = "M0 200C155.996 199.961 200.029 156.308 200 0V200H0Z" // ============================================================================ // Context // ============================================================================ export interface CutoutCardContextValue { hovered: boolean setHovered: (next: boolean) => void } const CutoutCardContext = createContext(null) export function useCutoutCard() { const ctx = useContext(CutoutCardContext) if (!ctx) { throw new Error("useCutoutCard must be used within ") } return ctx } export function useOptionalCutoutCard() { return useContext(CutoutCardContext) } // ============================================================================ // Root // ============================================================================ export type CutoutCardProps = Omit< ComponentProps, "defaultValue" > & { /** When set, hover state is controlled by the parent. */ hovered?: boolean /** Initial hover state when uncontrolled. */ defaultHovered?: boolean /** Called when pointer hover changes (after internal state updates). */ onHoveredChange?: (hovered: boolean) => void /** * When true (default), pointer enter/leave on the root update hover state. * Set false if you only drive hover programmatically or via CSS. */ trackPointerHover?: boolean } export function CutoutCard({ className, hovered: hoveredProp, defaultHovered = false, onHoveredChange, trackPointerHover = true, onMouseEnter, onMouseLeave, children, ...props }: CutoutCardProps) { const reduceMotion = useReducedMotion() const [hovered, setHovered] = useControllableState({ prop: hoveredProp, defaultProp: defaultHovered, onChange: onHoveredChange, }) const setHoveredStable = useCallback( (next: boolean) => { setHovered(next) }, [setHovered] ) const ctx = useMemo( () => ({ hovered: hovered ?? false, setHovered: setHoveredStable, }), [hovered, setHoveredStable] ) const handleMouseEnter: MouseEventHandler = (e) => { onMouseEnter?.(e) if (e.defaultPrevented || !trackPointerHover) { return } setHoveredStable(true) } const handleMouseLeave: MouseEventHandler = (e) => { onMouseLeave?.(e) if (e.defaultPrevented || !trackPointerHover) { return } setHoveredStable(false) } return ( {children} ) } // ============================================================================ // Layout primitives // ============================================================================ export type CutoutCardMediaProps = HTMLAttributes export function CutoutCardMedia({ className, ...props }: CutoutCardMediaProps) { return (

) } export type CutoutCardImageProps = ComponentProps /** Uses `fill` by default; parent `CutoutCardMedia` should be `relative` with a defined block size. */ export function CutoutCardImage({ className, alt = "", fill = true, sizes = "(max-width: 768px) 100vw, 28rem", ...props }: CutoutCardImageProps) { return ( {alt}

) } export type CutoutCardOverlayProps = HTMLAttributes export function CutoutCardOverlay({ className, ...props }: CutoutCardOverlayProps) { return (

) } export type CutoutCardContentProps = HTMLAttributes export function CutoutCardContent({ className, ...props }: CutoutCardContentProps) { return (

) } export type CutoutCardFooterProps = HTMLAttributes export function CutoutCardFooter({ className, ...props }: CutoutCardFooterProps) { return (

) } // ============================================================================ // Cutout geometry // ============================================================================ export type CutoutCornerProps = ComponentProps<"svg"> & { /** Pixel width/height of the SVG viewBox (square). */ size?: number } export function CutoutCorner({ className, size = 32, viewBox = "0 0 200 200", ...props }: CutoutCornerProps) { return ( <> {/* biome-ignore lint/a11y/noSvgWithoutTitle: decorative corner mask; hidden from AT via aria-hidden */} ) } export type CutoutCardInsetLabelProps = HTMLAttributes /** Absolutely positioned strip (e.g. bottom-left “Featured”); add corners as siblings inside. Static (no entrance motion) to avoid compositing seams next to the media edge. */ export function CutoutCardInsetLabel({ className, ...props }: CutoutCardInsetLabelProps) { return (

) } export type CutoutCardPinProps = HTMLAttributes /** Corner badge shell (e.g. top-right “New”); add corners as siblings inside. Static (no entrance motion). */ export function CutoutCardPin({ className, ...props }: CutoutCardPinProps) { return (

) } // ============================================================================ // Context-sensitive action region // ============================================================================ export type CutoutCardActionProps = ComponentProps & { /** * When true (default), visibility follows card hover from context. * Set false to always show the region. */ revealOnHover?: boolean } export function CutoutCardAction({ className, revealOnHover = true, ...props }: CutoutCardActionProps) { const { hovered } = useCutoutCard() const reduceMotion = useReducedMotion() const visible = !revealOnHover || hovered return ( ) }

Cutout Card

Instalação

Dependências