51: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"] 52: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"] 53:T3666,"use client"; import { Slot } from "@radix-ui/react-slot"; import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type CSSProperties, type MouseEvent, type Ref, } from "react"; import { useMediaQuery } from "@/registry/default/hooks/use-media-query"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } type FlipCardTriggerMode = "hover" | "click" | "manual"; type FlipCardAxis = "x" | "y"; type FlipCardSide = "front" | "back"; interface FlipCardContextValue { flipped: boolean; toggle: () => void; trigger: FlipCardTriggerMode; axis: FlipCardAxis; duration: number; easing: string; id: string; } const FlipCardContext = createContext(null); function useFlipCard(part: string) { const context = useContext(FlipCardContext); if (!context) throw new Error(`${part} must be used inside .`); return context; } // A tap on one of these is the control's own business, not a request to flip. const INTERACTIVE = "a[href], button, input, select, textarea, label, summary, [role='button'], [role='link'], [contenteditable='true']"; const TABBABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])"; /** The face of this card (not of a nested one) on the given side. */ function faceOf(root: HTMLElement, side: FlipCardSide) { return root.querySelector(`:scope > [data-slot="flip-card-${side}"]`); } /** Where focus goes when the face holding it turns away: a trigger first, then anything tabbable. */ function focusTarget(root: HTMLElement, face: HTMLElement) { const own = (element: Element) => element.closest('[data-slot="flip-card"]') === root; const triggers = [...face.querySelectorAll('[data-slot="flip-card-trigger"]')]; return triggers.find(own) ?? [...face.querySelectorAll(TABBABLE)].find(own) ?? null; } interface FlipCardProps extends ComponentProps<"div"> { /** Whether the back is showing (controlled). */ flipped?: boolean; /** Whether the back shows at first (uncontrolled). */ defaultFlipped?: boolean; /** Called with the next value whenever a trigger, or a tap in hover mode, asks to flip. */ onFlippedChange?: (flipped: boolean) => void; /** * What turns the card. "hover": the pointer over it or focus inside it, with * CSS alone; on touch screens a tap toggles. "click": only a FlipCardTrigger. * "manual": nothing on the card itself, drive it with `flipped`. */ trigger?: FlipCardTriggerMode; /** "y" turns it like a page, "x" tips it over its horizontal axis. */ axis?: FlipCardAxis; /** How long the turn takes, in ms. */ duration?: number; /** Distance to the viewer, in px: lower values give a deeper 3D turn. */ perspective?: number; /** CSS timing function of the turn. */ easing?: string; } /** * A card with two faces that turns over in 3D: stickers that flip on hover, * a weekly grid whose cells turn one after another, tiles in a bento. Both * faces sit in the same grid cell, so the card takes the size of the larger * one and does not jump. Only `transform` and `opacity` animate; with * `prefers-reduced-motion` the faces crossfade instead of turning. * * `trigger="hover"` (default) is CSS: the card turns while the pointer is * over it or focus is inside it, so it works without JavaScript. On touch * screens (`hover: none`) a tap on the card toggles it; taps on links and * buttons inside are left alone. Both faces stay readable and focusable in * this mode, since hovering only changes how they are shown: screen readers * read the front then the back, and tabbing to a link on the back turns the * card so it is visible. Put links and buttons on the back, not the front: a * focused control on the front would turn away. `data-state` follows the * tap / `flipped` state, not the hover. * * `trigger="click"` and `"manual"` are state driven: the face turned away is * `inert` and `aria-hidden`, so it cannot be reached or read, and when it held * focus, focus moves to the first trigger (or control) on the face that * turned up. In "click" mode give each face a FlipCardTrigger. In "manual" * mode the card listens to nothing: set `flipped` yourself (a * FlipCardTrigger still reports through `onFlippedChange`). * * @example * // Hover * * * Parrot sticker

* * * Get this sticker * * * * @example * // Click, with a trigger on each face * * * * Plan * * * * * * * * Everything in the plan… * * * * * * * * @example * // Manual: a weekly grid the consumer staggers * const [revealed, setRevealed] = useState(0); * useEffect(() => { * if (revealed >= days.length) return; * const timer = setTimeout(() => setRevealed((count) => count + 1), 120); * return () => clearTimeout(timer); * }, [revealed]); *

* {days.map((day, index) => ( * * {day.label} * {day.value} * * ))} *

*/ function FlipCard({ flipped: flippedProp, defaultFlipped = false, onFlippedChange, trigger = "hover", axis = "y", duration = 600, perspective = 1000, easing = "cubic-bezier(0.16, 1, 0.3, 1)", id: idProp, className, style, ref, children, ...props }: FlipCardProps) { const generatedId = useId(); const id = idProp ?? generatedId; const [uncontrolled, setUncontrolled] = useState(defaultFlipped); const controlled = flippedProp !== undefined; const flipped = controlled ? flippedProp : uncontrolled; const root = useRef(null); const mergedRef = useMemo(() => mergeRefs(ref, root), [ref]); // Set when a flip is requested while focus is inside, so a face that turns // away does not strand it even if the browser has already blurred it. const focusWasInside = useRef(false); const toggle = useCallback(() => { focusWasInside.current = root.current?.contains(document.activeElement) ?? false; const next = !flipped; if (!controlled) setUncontrolled(next); onFlippedChange?.(next); }, [controlled, flipped, onFlippedChange]); // Touch screens have no hover: a tap on the card toggles it instead. A // listener rather than onClick, since the card itself is not a control; // keyboard users turn it through focus. const cannotHover = useMediaQuery("(hover: none)"); useEffect(() => { const node = root.current; if (trigger !== "hover" || !cannotHover || !node) return; const handleClick = (event: globalThis.MouseEvent) => { if (event.defaultPrevented) return; const control = (event.target as Element | null)?.closest(INTERACTIVE); if (control && node.contains(control)) return; toggle(); }; node.addEventListener("click", handleClick); return () => node.removeEventListener("click", handleClick); }, [trigger, cannotHover, toggle]); // When the face holding focus turns away (and becomes inert), move focus to the one that turned up. useLayoutEffect(() => { const wasInside = focusWasInside.current; focusWasInside.current = false; const node = root.current; if (trigger === "hover" || !node) return; const hidden = faceOf(node, flipped ? "front" : "back"); const visible = faceOf(node, flipped ? "back" : "front"); if (!hidden || !visible) return; const active = document.activeElement; const stranded = (active !== null && hidden.contains(active)) || (wasInside && (active === null || active === document.body)); if (stranded) focusTarget(node, visible)?.focus(); }, [flipped, trigger]); const context = useMemo( () => ({ flipped, toggle, trigger, axis, duration, easing, id }), [flipped, toggle, trigger, axis, duration, easing, id] ); return (

{children}

); } // Whole class names, so Tailwind finds them. The front turns 0 → 180deg, the // back -180 → 0deg, both the same way round. const ROTATION: Record> = { y: { front: "motion-safe:[transform:rotateY(calc(var(--flip-card-turn)*180deg))]", back: "motion-safe:[transform:rotateY(calc(var(--flip-card-turn)*180deg_-_180deg))]", }, x: { front: "motion-safe:[transform:rotateX(calc(var(--flip-card-turn)*180deg))]", back: "motion-safe:[transform:rotateX(calc(var(--flip-card-turn)*180deg_-_180deg))]", }, }; // Reduced motion: no turn, the face that is away fades out instead. const CROSSFADE: Record = { front: "motion-reduce:[opacity:calc(1_-_var(--flip-card-turn))]", back: "motion-reduce:[opacity:var(--flip-card-turn)]", }; // The face towards the reader sits on top, so it takes the clicks even when // the other one is only faded out (reduced motion) or turned by hover. const STACKING: Record = { front: "[z-index:calc(1_-_var(--flip-card-turn))]", back: "[z-index:var(--flip-card-turn)]", }; interface FlipCardFaceProps extends ComponentProps<"div"> { /** Render the single child element (a Card, for example) as the face instead of a div. */ asChild?: boolean; } function FlipCardFace({ side, asChild = false, className, style, ...props }: FlipCardFaceProps & { side: FlipCardSide }) { const { flipped, trigger, axis, duration, easing } = useFlipCard( side === "front" ? "FlipCardFront" : "FlipCardBack" ); // Only state-driven modes hide the face that is away; in hover mode both stay readable. const away = trigger !== "hover" && flipped === (side === "front"); const Comp = asChild ? Slot : "div"; return ( ); } /** The side that shows first. */ function FlipCardFront(props: FlipCardFaceProps) { return ; } /** The side that turns up when the card flips. */ function FlipCardBack(props: FlipCardFaceProps) { return ; } interface FlipCardTriggerProps extends ComponentProps<"button"> { /** Render the single child element (your own Button) as the trigger. */ asChild?: boolean; } /** * A button that turns the card over. `aria-pressed` says whether the back is * showing and `aria-controls` points at the card (pass your own to change it). * With `trigger="click"`, put one on each face ("Show details" / "Back"). */ function FlipCardTrigger({ asChild = false, onClick, ...props }: FlipCardTriggerProps) { const { flipped, toggle, id } = useFlipCard("FlipCardTrigger"); const Comp = asChild ? Slot : "button"; return ( ) => { onClick?.(event); if (!event.defaultPrevented) toggle(); }} /> ); } export { FlipCard, FlipCardBack, FlipCardFront, FlipCardTrigger, type FlipCardFaceProps, type FlipCardProps, type FlipCardTriggerProps, }; 50:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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-slot"}]]}]}]]}],["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-media-query"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/flip-card.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]