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:T3b9b,"use client"; import { Crown } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { wrap } from "popmotion"; import { useEffect, useMemo, useRef, useState } from "react"; export interface ResponsiveSize { "2xl"?: number | string; base?: number | string; lg?: number | string; md?: number | string; sm?: number | string; xl?: number | string; } const breakpoints = { "2xl": 1536, lg: 1024, md: 768, sm: 640, xl: 1280, } as const; const DEFAULT_CARD_WIDTH = 240; const DEFAULT_ASPECT_RATIO = 1.5625; // 5:8 ratio (500/320) // Base sizes for responsive scaling (based on DEFAULT_CARD_WIDTH = 240) const BASE_BADGE_FONT_SIZE = 12; const BASE_BADGE_PADDING_X = 12; const BASE_BADGE_PADDING_Y = 3; const BASE_BADGE_ICON_SIZE = 14; const BASE_TITLE_FONT_SIZE = 18; const BASE_SUBTITLE_FONT_SIZE = 12; const BASE_LOCATION_FONT_SIZE = 12; const BASE_AVATAR_SIZE = 24; const BASE_CONTENT_PADDING = 24; const BASE_BADGE_TOP = 16; const BASE_BADGE_LEFT = 16; const BASE_BADGE_GAP = 8; const BASE_AVATAR_GAP = 8; const BASE_AVATAR_MARGIN_BOTTOM = 8; const BASE_TITLE_MARGIN_BOTTOM = 4; const BASE_LINE_HEIGHT = 1.4; const BADGE_PADDING_Y_SCALE_FACTOR = 0.7; // Reduce vertical padding scaling for more compact badges // Minimum sizes to ensure readability const MIN_BADGE_FONT_SIZE = 10; const MIN_BADGE_PADDING_X = 8; const MIN_BADGE_PADDING_Y = 1; const MIN_BADGE_ICON_SIZE = 12; const MIN_TITLE_FONT_SIZE = 14; const MIN_SUBTITLE_FONT_SIZE = 10; const MIN_LOCATION_FONT_SIZE = 10; const MIN_AVATAR_SIZE = 20; const MIN_CONTENT_PADDING = 12; const MIN_BADGE_TOP = 8; const MIN_BADGE_LEFT = 8; const MIN_BADGE_GAP = 4; const MIN_AVATAR_GAP = 4; const MIN_AVATAR_MARGIN_BOTTOM = 4; const MIN_TITLE_MARGIN_BOTTOM = 2; function formatSize(size: number | string): string { return typeof size === "number" ? `${size}px` : size; } function getInitialSize( size: number | string | ResponsiveSize | undefined, defaultValue: number | string ): string { if (!size) { return formatSize(defaultValue); } if (typeof size === "number" || typeof size === "string") { return formatSize(size); } // Responsive object - start with base or first available value if (size.base !== undefined) { return formatSize(size.base); } return formatSize(defaultValue); } function getSizeForBreakpoint( size: ResponsiveSize, width: number ): number | string | undefined { if (width >= breakpoints["2xl"]) { return size["2xl"] ?? size.xl ?? size.lg ?? size.md ?? size.sm ?? size.base; } if (width >= breakpoints.xl) { return size.xl ?? size.lg ?? size.md ?? size.sm ?? size.base; } if (width >= breakpoints.lg) { return size.lg ?? size.md ?? size.sm ?? size.base; } if (width >= breakpoints.md) { return size.md ?? size.sm ?? size.base; } if (width >= breakpoints.sm) { return size.sm ?? size.base; } return size.base; } function useResponsiveSize( size: number | string | ResponsiveSize | undefined, defaultValue: number | string ): string { const [currentSize, setCurrentSize] = useState(() => getInitialSize(size, defaultValue) ); useEffect(() => { if (!size || typeof size === "number" || typeof size === "string") { return; } const updateSize = () => { const width = window.innerWidth; const selectedSize = getSizeForBreakpoint(size, width); if (selectedSize !== undefined) { const newSize = formatSize(selectedSize); setCurrentSize(newSize); } }; updateSize(); window.addEventListener("resize", updateSize); return () => window.removeEventListener("resize", updateSize); }, [size]); return currentSize; } function parseSize(size: string): number { const num = Number.parseFloat(size); return Number.isNaN(num) ? 0 : num; } function calculateHeightFromWidth(width: string, aspectRatio: number): string { const widthNum = parseSize(width); if (widthNum === 0) { return width; } const heightNum = widthNum * aspectRatio; return `${heightNum}px`; } export interface Participant { avatar: string; } export interface Event { backgroundClassName?: string; badge?: string; id: number; image?: string; location: string; participants?: Participant[]; subtitle?: string; title?: string; } export interface AppleInvitesProps { activeIndex?: number; aspectRatio?: number; cardClassName?: string; cardHeight?: number | string | ResponsiveSize; cardWidth?: number | string | ResponsiveSize; className?: string; events: Event[]; interval?: number; onChange?: (index: number) => void; } export default function AppleInvites({ events, interval = 3000, className = "", cardClassName = "", activeIndex: controlledIndex, onChange, cardWidth = DEFAULT_CARD_WIDTH, cardHeight, aspectRatio = DEFAULT_ASPECT_RATIO, }: AppleInvitesProps) { const shouldReduceMotion = useReducedMotion(); const [internalPage, setInternalPage] = useState(0); const [direction, setDirection] = useState(0); const responsiveWidth = useResponsiveSize(cardWidth, DEFAULT_CARD_WIDTH); const variants = useMemo( () => ({ center: { opacity: 1, rotate: 0, scale: 1, transition: shouldReduceMotion ? { duration: 0 } : { damping: 30, duration: 0.25, stiffness: 300, type: "spring" as const, }, x: "-50%", zIndex: 3, }, hidden: { opacity: 0, transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.3 }, zIndex: 1, }, left: { opacity: 0.8, rotate: -12, scale: 0.9, transition: shouldReduceMotion ? { duration: 0 } : { damping: 30, duration: 0.25, stiffness: 300, type: "spring" as const, }, x: "-130%", zIndex: 2, }, right: { opacity: 0.8, rotate: 12, scale: 0.9, transition: shouldReduceMotion ? { duration: 0 } : { damping: 30, duration: 0.25, stiffness: 300, type: "spring" as const, }, x: "30%", zIndex: 2, }, }), [shouldReduceMotion] ); const explicitHeight = useResponsiveSize( cardHeight, calculateHeightFromWidth(responsiveWidth, aspectRatio) ); const [calculatedHeight, setCalculatedHeight] = useState(() => calculateHeightFromWidth(responsiveWidth, aspectRatio) ); // Update calculated height when width changes (if using aspect ratio) useEffect(() => { if (cardHeight === undefined) { setCalculatedHeight( calculateHeightFromWidth(responsiveWidth, aspectRatio) ); } }, [responsiveWidth, aspectRatio, cardHeight]); const responsiveHeight = cardHeight === undefined ? calculatedHeight : explicitHeight; // Calculate responsive sizes based on card width const cardWidthNum = parseSize(responsiveWidth); const scaleFactor = cardWidthNum / DEFAULT_CARD_WIDTH; // Responsive sizes for internal content const badgeFontSize = Math.max( MIN_BADGE_FONT_SIZE, Math.round(BASE_BADGE_FONT_SIZE * scaleFactor) ); const badgePaddingX = Math.max( MIN_BADGE_PADDING_X, Math.round(BASE_BADGE_PADDING_X * scaleFactor) ); // Use a more aggressive scaling for vertical padding to keep it compact // Scale padding Y less aggressively to keep badges more compact const badgePaddingY = Math.max( MIN_BADGE_PADDING_Y, Math.round( BASE_BADGE_PADDING_Y * scaleFactor * BADGE_PADDING_Y_SCALE_FACTOR ) ); const badgeIconSize = Math.max( MIN_BADGE_ICON_SIZE, Math.round(BASE_BADGE_ICON_SIZE * scaleFactor) ); const titleFontSize = Math.max( MIN_TITLE_FONT_SIZE, Math.round(BASE_TITLE_FONT_SIZE * scaleFactor) ); const subtitleFontSize = Math.max( MIN_SUBTITLE_FONT_SIZE, Math.round(BASE_SUBTITLE_FONT_SIZE * scaleFactor) ); const locationFontSize = Math.max( MIN_LOCATION_FONT_SIZE, Math.round(BASE_LOCATION_FONT_SIZE * scaleFactor) ); const avatarSize = Math.max( MIN_AVATAR_SIZE, Math.round(BASE_AVATAR_SIZE * scaleFactor) ); const contentPadding = Math.max( MIN_CONTENT_PADDING, Math.round(BASE_CONTENT_PADDING * scaleFactor) ); const badgeTop = Math.max( MIN_BADGE_TOP, Math.round(BASE_BADGE_TOP * scaleFactor) ); const badgeLeft = Math.max( MIN_BADGE_LEFT, Math.round(BASE_BADGE_LEFT * scaleFactor) ); const badgeGap = Math.max( MIN_BADGE_GAP, Math.round(BASE_BADGE_GAP * scaleFactor) ); const avatarGap = Math.max( MIN_AVATAR_GAP, Math.round(BASE_AVATAR_GAP * scaleFactor) ); const avatarMarginBottom = Math.max( MIN_AVATAR_MARGIN_BOTTOM, Math.round(BASE_AVATAR_MARGIN_BOTTOM * scaleFactor) ); const titleMarginBottom = Math.max( MIN_TITLE_MARGIN_BOTTOM, Math.round(BASE_TITLE_MARGIN_BOTTOM * scaleFactor) ); const page = controlledIndex === undefined ? internalPage : controlledIndex; const setPage = (val: number, dir: number) => { if (onChange) { onChange(val); } else { setInternalPage(val); setDirection(dir); } }; const activeIndex = wrap(0, events.length, page); const setPageRef = useRef(setPage); useEffect(() => { setPageRef.current = setPage; }); useEffect(() => { const timer = setInterval(() => { setPageRef.current(page + 1, 1); }, interval); return () => clearInterval(timer); }, [page, interval]); const visibleEvents = [-1, 0, 1].map( (offset) => events[wrap(0, events.length, activeIndex + offset)] ); const getVariant = (index: number) => { if (index === 1) { return "center"; } if (index === 0) { return "left"; } return "right"; }; const renderBackground = (event: Event) => { if (event.backgroundClassName) { return

; } if (event.image) { return (

); } return null; }; return (

{visibleEvents.map((event, index) => (

{renderBackground(event)} {/* Badge */}

{event.badge}

{/* Content */}

{/* Participant Avatars */}

{event.participants?.map((participant, idx) => (

))}

{event.title ? (

{event.title}

) : null} {event.subtitle ? (

{event.subtitle}

) : null}

{event.location}

))}

); } 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","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","popmotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/popmotion","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":"popmotion"}]]}]}]]}],["$","$L51",null,{"namespace":"@smoothui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"index.tsx","content":"$53","type":"registry:ui","target":"components/smoothui/apple-invites/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]