50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2abb,"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/80 dark:border-border/60 border", "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 bg-card text-card-foreground relative cursor-pointer overflow-hidden rounded-[28px]", 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 ( ) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-use-controllable-state"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/cutout-card.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]