"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { XIcon } from "@kineticui/icons"; export type WhatsNewSlide = { title: string; body: React.ReactNode; media?: React.ReactNode; tag?: string }; export type WhatsNewProps = { slides: WhatsNewSlide[]; /** Version string; once seen it's stored so the dialog doesn't re-open. */ version: string; /** Force open (controlled). */ open?: boolean; onOpenChange?: (open: boolean) => void; /** Auto-open for users who haven't seen this version. */ autoOpen?: boolean; storageKey?: string; cta?: { label: string; onClick: () => void }; }; /** "What's new" release dialog: swipeable feature slides with media, dots, keyboard nav and seen-version memory. */ export function WhatsNew({ slides, version, open: controlled, onOpenChange, autoOpen = true, storageKey = "kn-whats-new", cta }: WhatsNewProps) { const [inner, setInner] = React.useState(false); const open = controlled ?? inner; const [i, setI] = React.useState(0); const [dir, setDir] = React.useState(1); const setOpen = (o: boolean) => { if (controlled === undefined) setInner(o); onOpenChange?.(o); if (!o) { try { localStorage.setItem(storageKey, version); } catch { /* ignore */ } } }; React.useEffect(() => { if (!autoOpen || controlled !== undefined) return; try { if (localStorage.getItem(storageKey) !== version) setInner(true); } catch { /* ignore */ } }, [autoOpen, controlled, storageKey, version]); React.useEffect(() => { if (open) setI(0); }, [open]); const go = (n: number) => { if (n < 0 || n >= slides.length) return; setDir(n > i ? 1 : -1); setI(n); }; const s = slides[i]!; const last = i === slides.length - 1; return ( { if (e.key === "ArrowRight") go(i + 1); if (e.key === "ArrowLeft") go(i - 1); }} className="fixed left-1/2 top-1/2 z-50 w-[min(480px,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-3xl border border-border-strong bg-surface-raised shadow-overlay outline-none data-[state=open]:animate-[kn-dialog-in_0.3s_var(--ease-kn-spring)]" > { if (info.offset.x < -60) go(i + 1); if (info.offset.x > 60) go(i - 1); }} >

{s.media}

{s.tag ?? `New in ${version}`} {s.title}

{s.body}

{slides.map((_, k) => (

{i > 0 ? : null}

); }

What's New

Installation

Exports