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:T134f,import * as React from "react"; import { cn } from "@/lib/utils"; import "./staggered-entrance.css"; type CssVariableStyle = React.CSSProperties & Record<`--${string}`, string>; type StaggeredEntranceAxis = "x" | "y"; type StaggeredEntranceKey = (item: TItem, index: number) => React.Key; type StaggeredEntranceClassName = | string | ((item: TItem, index: number) => string | undefined); type StaggeredEntranceStyle = | React.CSSProperties | ((item: TItem, index: number) => React.CSSProperties | undefined); export type StaggeredEntranceProps = Omit< React.ComponentProps<"div">, "children" > & { as?: React.ElementType; itemAs?: React.ElementType; children?: React.ReactNode; items?: readonly TItem[]; renderItem?: (item: TItem, index: number) => React.ReactNode; delay?: number | string; duration?: number | string; initialDelay?: number | string; staggerOffset?: number; axis?: StaggeredEntranceAxis; distance?: number | string; /** Scale each item animates *from* before settling at 1. */ fromScale?: number; /** Opacity each item animates *from* before settling at 1. */ fromOpacity?: number; reverse?: boolean; disabled?: boolean; getItemKey?: StaggeredEntranceKey; itemClassName?: StaggeredEntranceClassName; itemStyle?: StaggeredEntranceStyle; }; export type StaggeredEntranceItemProps = React.ComponentProps<"div"> & { as?: React.ElementType; index?: number; }; export function StaggeredEntrance({ as: Component = "div", itemAs = "div", children, items, renderItem, getItemKey, delay = 80, duration = 500, initialDelay = 0, staggerOffset = 0, axis = "y", distance = 10, fromScale = 1, fromOpacity = 0, reverse = false, disabled = false, itemClassName, itemStyle, className, style, ...props }: StaggeredEntranceProps) { const entries = React.useMemo( () => items ? items.map((item, index) => ({ item, content: renderItem ? renderItem(item, index) : (item as React.ReactNode), })) : React.Children.toArray(children).map((child) => ({ item: child as TItem, content: child, })), [children, items, renderItem] ); const count = entries.length; const resolvedDistance = toCssLength(distance); const staggeredEntranceStyle: CssVariableStyle = { "--staggered-entrance-delay": toCssTime(delay), "--staggered-entrance-duration": toCssTime(duration), "--staggered-entrance-initial-delay": toCssTime(initialDelay), "--staggered-entrance-from-x": axis === "x" ? resolvedDistance : "0px", "--staggered-entrance-from-y": axis === "y" ? resolvedDistance : "0px", "--staggered-entrance-from-scale": String(fromScale), "--staggered-entrance-from-opacity": String(fromOpacity), ...style, }; return ( {entries.map(({ item, content }, index) => { const resolvedIndex = reverse ? count - index - 1 : index; const key = getItemKey ? getItemKey(item, index) : getFallbackKey(content, index); return ( {content} ); })} ); } export function StaggeredEntranceItem({ as: Component = "div", index, className, style, ...props }: StaggeredEntranceItemProps) { const itemStyle: CssVariableStyle = index === undefined ? (style as CssVariableStyle) : { "--staggered-entrance-index": String(index), ...style }; return ( ); } function toCssTime(value: number | string) { return typeof value === "number" ? `${value}ms` : value; } function toCssLength(value: number | string) { return typeof value === "number" ? `${value}px` : value; } function resolveValue( value: TValue | ((item: TItem, index: number) => TValue | undefined), item: TItem, index: number ) { return typeof value === "function" ? (value as (item: TItem, index: number) => TValue | undefined)(item, index) : value; } function getFallbackKey(content: React.ReactNode, index: number) { return React.isValidElement(content) && content.key != null ? content.key : index; } 54:T68f,/* Defaults are layered for customization. Normal unlayered styles and utilities in a later layer can override them. */ @layer components { .staggered-entrance { --staggered-entrance-delay: 80ms; --staggered-entrance-duration: 500ms; --staggered-entrance-initial-delay: 0ms; --staggered-entrance-ease: cubic-bezier(0.23, 1, 0.32, 1); --staggered-entrance-from-x: 0px; --staggered-entrance-from-y: 10px; --staggered-entrance-from-scale: 1; --staggered-entrance-from-opacity: 0; } .staggered-entrance-item { animation-name: staggered-entrance-enter; animation-duration: var(--staggered-entrance-duration); animation-timing-function: var(--staggered-entrance-ease); animation-fill-mode: both; animation-delay: calc( var(--staggered-entrance-initial-delay) + (var(--staggered-entrance-delay) * var(--staggered-entrance-index, 0)) ); } @keyframes staggered-entrance-enter { from { opacity: var(--staggered-entrance-from-opacity); transform: translate3d( var(--staggered-entrance-from-x), var(--staggered-entrance-from-y), 0 ) scale(var(--staggered-entrance-from-scale)); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } } /* Motion guards override ordinary customization, including inline timing. Keep these outside the defaults layer; only motion declarations are important. */ .staggered-entrance[data-disabled="true"] .staggered-entrance-item { animation: none !important; } @media (prefers-reduced-motion: reduce) { .staggered-entrance-item { animation: none !important; } } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/base/ui/staggered-entrance.tsx","content":"$53","type":"registry:ui","target":"@ui/staggered-entrance.tsx"},{"path":"registry/base/ui/staggered-entrance.css","content":"$54","type":"registry:file","target":"@ui/staggered-entrance.css"}],"className":"h-[70svh] min-h-80"}]]}]