4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T463a,"use client" import * as React from "react" import { AlertTriangle, Bell, CheckCircle, Info } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" /* Styled alert-dialog "Illustration" family: 5 decorative confirmation modals. Same self-contained shell as the essentials alert-dialog-styled (no radix, no portal): fixed backdrop + centered fixed panel; a backdrop click, Escape or Cancel closes it; Confirm calls onConfirm first and then closes; the panel takes focus on open; AnimatePresence handles enter/exit, and under reduced motion it fades or switches instantly. The difference: a LARGE decorative full-width visual region above the panel (spotlight, badge, rings, gradient band, banner) - all built from tokens, no real image. Color comes ONLY from tokens, via alpha/gradient/radial color-mix(in oklab ...). */ export type StyledSize = "sm" | "md" | "lg" | "xl" export type StyledTone = "info" | "success" | "warning" | "danger" | "brand" /* Illustration bolgesinin hangi kompozisyonu cizecegini secen ayrimci. */ type IllustrationVariant = "spotlight" | "badge" | "circle" | "gradient" | "banner" const panelWidth: Record = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg", xl: "max-w-xl", } const bodyPad: Record = { sm: "p-4", md: "p-5", lg: "p-6", xl: "p-7", } /* Illustration bolgesinin yuksekligi size ile buyur. */ const artHeight: Record = { sm: "h-28", md: "h-32", lg: "h-36", xl: "h-40", } /* Confirm button tone mapping - the tone token drives it directly. */ const confirmTone: Record = { info: "bg-info text-info-foreground hover:bg-info/90", success: "bg-success text-success-foreground hover:bg-success/90", warning: "bg-warning text-warning-foreground hover:bg-warning/90", danger: "bg-danger text-danger-foreground hover:bg-danger/90", brand: "bg-brand text-brand-foreground hover:bg-brand/90", } /* Illustration ikon rengi tone token'ina baglanir. */ const artIconColor: Record = { info: "text-info", success: "text-success", warning: "text-warning-soft-foreground", danger: "text-danger", brand: "text-brand", } const cancelBtn = "inline-flex h-9 items-center justify-center rounded-md border border-border bg-transparent px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none" const confirmBtn = "inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none" type StyledAlertPublicProps = { size?: StyledSize trigger?: React.ReactNode title?: React.ReactNode description?: React.ReactNode confirmLabel?: string cancelLabel?: string onConfirm?: () => void className?: string open?: boolean defaultOpen?: boolean onOpenChange?: (o: boolean) => void } type IllustratedAlertCoreProps = StyledAlertPublicProps & { tone: StyledTone variant: IllustrationVariant icon: React.ReactNode } /* Tone token'indan olusan spotlight radial degeri (buyuk ustteki isik havuzu). */ function spotlightBg(tone: StyledTone) { const map: Record = { info: "bg-[radial-gradient(120%_140%_at_50%_120%,color-mix(in_oklab,var(--color-info)_30%,transparent),transparent_70%)]", success: "bg-[radial-gradient(120%_140%_at_50%_120%,color-mix(in_oklab,var(--color-success)_30%,transparent),transparent_70%)]", warning: "bg-[radial-gradient(120%_140%_at_50%_120%,color-mix(in_oklab,var(--color-warning)_32%,transparent),transparent_70%)]", danger: "bg-[radial-gradient(120%_140%_at_50%_120%,color-mix(in_oklab,var(--color-danger)_28%,transparent),transparent_70%)]", brand: "bg-[radial-gradient(120%_140%_at_50%_120%,color-mix(in_oklab,var(--color-brand)_28%,transparent),transparent_70%)]", } return map[tone] } /* Tone token'indan olusan gradient bant (soldan saga iki tonlu gecis). */ function gradientBg(tone: StyledTone) { const map: Record = { info: "bg-[linear-gradient(120deg,color-mix(in_oklab,var(--color-info)_36%,transparent),color-mix(in_oklab,var(--color-info)_10%,transparent))]", success: "bg-[linear-gradient(120deg,color-mix(in_oklab,var(--color-success)_36%,transparent),color-mix(in_oklab,var(--color-success)_10%,transparent))]", warning: "bg-[linear-gradient(120deg,color-mix(in_oklab,var(--color-warning)_38%,transparent),color-mix(in_oklab,var(--color-warning)_10%,transparent))]", danger: "bg-[linear-gradient(120deg,color-mix(in_oklab,var(--color-danger)_34%,transparent),color-mix(in_oklab,var(--color-danger)_10%,transparent))]", brand: "bg-[linear-gradient(120deg,color-mix(in_oklab,var(--color-brand)_34%,transparent),color-mix(in_oklab,var(--color-brand)_10%,transparent))]", } return map[tone] } /* Tone token'indan olusan yumusak dolgu (rozet / banner arka plani). */ function softFill(tone: StyledTone) { const map: Record = { info: "bg-[color-mix(in_oklab,var(--color-info)_16%,transparent)]", success: "bg-[color-mix(in_oklab,var(--color-success)_16%,transparent)]", warning: "bg-[color-mix(in_oklab,var(--color-warning)_18%,transparent)]", danger: "bg-[color-mix(in_oklab,var(--color-danger)_16%,transparent)]", brand: "bg-[color-mix(in_oklab,var(--color-brand)_16%,transparent)]", } return map[tone] } /* Tone token'indan olusan halka kenari (ic ice cemberler). */ function ringBorder(tone: StyledTone) { const map: Record = { info: "border-[color-mix(in_oklab,var(--color-info)_35%,transparent)]", success: "border-[color-mix(in_oklab,var(--color-success)_35%,transparent)]", warning: "border-[color-mix(in_oklab,var(--color-warning)_38%,transparent)]", danger: "border-[color-mix(in_oklab,var(--color-danger)_35%,transparent)]", brand: "border-[color-mix(in_oklab,var(--color-brand)_35%,transparent)]", } return map[tone] } /* Illustration area: a decorative top region per variant plus the tone icon in the middle. The motion gating lives here, because the reduce information comes from the core. */ function Illustration({ variant, tone, icon, size, reduce, }: { variant: IllustrationVariant tone: StyledTone icon: React.ReactNode size: StyledSize reduce: boolean }) { const iconReveal = reduce ? { initial: false as const, animate: { opacity: 1, scale: 1 } } : { initial: { opacity: 0, scale: 0.7 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.28, ease: "easeOut" as const, delay: 0.05 }, } const iconWrap = cn( "relative z-10 flex items-center justify-center [&_svg]:size-7 [&_svg]:shrink-0 [&_i]:text-3xl [&_i]:leading-none", artIconColor[tone] ) return (

{variant === "spotlight" ? ( <>

{icon} ) : null} {variant === "badge" ? ( {icon} ) : null} {variant === "circle" ? (

{icon}

) : null} {variant === "gradient" ? ( <>

{icon} ) : null} {variant === "banner" ? ( <>

{icon} ) : null}

) } /* Shared modal core: state management, backdrop, panel, escape, focus, motion. Identical to Essentials; it additionally renders an Illustration area on top. */ function IllustratedAlertDialog({ size = "md", trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, className, open, defaultOpen, onOpenChange, tone, variant, icon, }: IllustratedAlertCoreProps) { const reduce = useReducedMotion() ?? false const isControlled = open !== undefined const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false) const actualOpen = isControlled ? open : internalOpen const panelRef = React.useRef(null) const setOpen = React.useCallback( (next: boolean) => { if (!isControlled) setInternalOpen(next) onOpenChange?.(next) }, [isControlled, onOpenChange] ) React.useEffect(() => { if (!actualOpen) return const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false) } document.addEventListener("keydown", onKey) const raf = window.requestAnimationFrame(() => panelRef.current?.focus()) return () => { document.removeEventListener("keydown", onKey) window.cancelAnimationFrame(raf) } }, [actualOpen, setOpen]) const handleConfirm = () => { onConfirm?.() setOpen(false) } return ( {/* ARIA durumu tetikleyicinin KENDISINDE. Once yoktu: ekran okuyucu kullanicisi butonun bir dialog actigini ve acik olup olmadigini HIC bilmiyordu. Canli AX taramasiyla bulundu (grep gostermemisti). */} {React.isValidElement>(trigger) ? ( React.cloneElement(trigger, { "aria-haspopup": "dialog", "aria-expanded": actualOpen, onClick: (event: React.MouseEvent) => { trigger.props.onClick?.(event) setOpen(true) }, }) ) : ( )} {actualOpen ? ( <> setOpen(false)} initial={reduce ? false : { opacity: 0 }} animate={{ opacity: 1 }} exit={reduce ? { opacity: 1 } : { opacity: 0 }} transition={{ duration: 0.2, ease: "easeOut" }} />

) : null} ) } /* SpotlightAlert: ustte radial token spotlight isik havuzu, ortada yuzen daire icinde tone ikon. */ export function SpotlightAlert({ title = "You are in the spotlight", description = "Confirm to continue with this highlighted action.", ...props }: StyledAlertPublicProps) { return ( } title={title} description={description} {...props} /> ) } /* BadgeAlert: ustte buyuk token yumusak-daire rozet, icinde tone ikon. */ export function BadgeAlert({ title = "Badge earned", description = "Confirm to apply this change to your account.", ...props }: StyledAlertPublicProps) { return ( } title={title} description={description} {...props} /> ) } /* CircleAlert: ic ice token halkalar ortasinda tone ikon. */ export function CircleAlert({ title = "Heads up", description = "Please review this before you confirm the action.", ...props }: StyledAlertPublicProps) { return ( } title={title} description={description} {...props} /> ) } /* GradientAlert: ustte tone gradient bant, ortada yuzen kutu icinde tone ikon. */ export function GradientAlert({ title = "One more step", description = "Confirm to move forward with this action.", ...props }: StyledAlertPublicProps) { return ( } title={title} description={description} {...props} /> ) } /* BannerAlert: a full-width token banner on top (top line plus a soft fill) with a tone icon in the middle. */ export function BannerAlert({ title = "Delete this item?", description = "This action cannot be undone once confirmed.", confirmLabel = "Delete", ...props }: StyledAlertPublicProps) { return ( } title={title} description={description} confirmLabel={confirmLabel} {...props} /> ) } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion@^12.42.2",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion@^12.42.2"}]]}]}],["$","li","lucide-react@^1.23.0",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"lucide-react@^1.23.0"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@ai2/tokens"]}]]}],["$","$L50",null,{"sourceUrl":"https://ai2.design/r/alert-dialog-illustration.json","proxyUrl":"https://shadcnregistry.com/r/ai2/alert-dialog-illustration","itemId":"@ai2/alert-dialog-illustration"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/ai2/styled/alert-dialog-illustration.tsx","content":"$52","type":"registry:component","target":"components/ui/alert-dialog-illustration.tsx"}]}]]}],"$L53"]}]

Dialog Illustration Alert

Installation

Files

components

Styles