{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-notification",
  "type": "registry:ui",
  "description": "Polished notification surface for local AnimatePresence use with rim variants and glyph stagger",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/halo-notification.tsx",
      "content": "\"use client\"\n\n/**\n * Polished notification surface (`HaloPolishedToastSurface`) and\n * {@link HaloPolishedNotification} — slide + fade shell for local\n * `<AnimatePresence>` use. Self-contained {@link HaloCard}, rim variants, and\n * glyph stagger (no imports from `halo-card.tsx`). App-wide Sonner toasts:\n * `@/components/cult-pro/halo-toast`.\n */\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { XIcon } from \"lucide-react\"\nimport {\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Rim + card chrome (self-contained; no halo-card import) ─── */\n\nconst paddingClass = {\n  none: \"\",\n  sm: \"p-4\",\n  md: \"p-6\",\n  lg: \"p-8\",\n} as const\n\nconst BORDER_TRAIL_LOOP_MS = 5250\n\n/** Inner corner radius for content inside `rounded-2xl` + `p-px` (concentric nested radii). */\nconst CARD_INNER_RADIUS_CLASS = \"rounded-[calc(1rem-1px)]\"\n\nexport type RimVariant = \"default\" | \"success\" | \"destructive\"\n\nconst RIM_BLOB_GRADIENTS: Record<\n  RimVariant,\n  { primaryBg: string; secondaryBg: string; tertiaryBg: string }\n> = {\n  default: {\n    primaryBg: \"linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)\",\n    secondaryBg: \"linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)\",\n    tertiaryBg: \"linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)\",\n  },\n  success: {\n    primaryBg:\n      \"linear-gradient(90deg, #047857, #059669, #10b981, #14b8a6, #0d9488)\",\n    secondaryBg: \"linear-gradient(90deg, #34d399, #6ee7b7, #2dd4bf, #5eead4)\",\n    tertiaryBg: \"linear-gradient(90deg, #065f46, #047857, #0f766e)\",\n  },\n  destructive: {\n    primaryBg:\n      \"linear-gradient(90deg, #991b1b, #dc2626, #e11d48, #f43f5e, #be123c)\",\n    secondaryBg: \"linear-gradient(90deg, #fb7185, #fda4af, #f87171, #fecdd3)\",\n    tertiaryBg: \"linear-gradient(90deg, #7f1d1d, #b91c1c, #dc2626)\",\n  },\n}\n\ninterface BorderTrailChrome {\n  ambientGradient: string\n  ambientGlow: string\n  coreGradient: string\n  coreGlow: string\n}\n\nconst RIM_BORDER_TRAIL: Record<RimVariant, BorderTrailChrome> = {\n  default: {\n    ambientGradient:\n      \"linear-gradient(90deg, transparent 0%, rgba(255,0,128,0) 6%, rgba(255,0,128,0.38) 24%, rgba(121,40,202,0.5) 50%, rgba(0,212,255,0.42) 76%, rgba(0,212,255,0) 94%, transparent 100%)\",\n    coreGradient:\n      \"linear-gradient(90deg, transparent 0%, rgba(255,0,128,0.72) 20%, rgba(200,140,255,0.92) 50%, rgba(0,212,255,0.78) 80%, transparent 100%)\",\n    ambientGlow:\n      \"0 0 22px rgba(121,40,202,0.28), 0 0 44px rgba(0,212,255,0.18), 0 0 2px rgba(255,255,255,0.12)\",\n    coreGlow:\n      \"0 0 14px rgba(255,0,128,0.35), 0 0 28px rgba(0,212,255,0.32), inset 0 0 1px rgba(255,255,255,0.22)\",\n  },\n  success: {\n    ambientGradient:\n      \"linear-gradient(90deg, transparent 0%, rgba(5,150,105,0) 6%, rgba(16,185,129,0.36) 24%, rgba(20,184,166,0.48) 50%, rgba(13,148,136,0.4) 76%, rgba(13,148,136,0) 94%, transparent 100%)\",\n    coreGradient:\n      \"linear-gradient(90deg, transparent 0%, rgba(5,150,105,0.68) 20%, rgba(52,211,153,0.88) 50%, rgba(20,184,166,0.8) 80%, transparent 100%)\",\n    ambientGlow:\n      \"0 0 22px rgba(16,185,129,0.32), 0 0 44px rgba(13,148,136,0.22), 0 0 2px rgba(255,255,255,0.1)\",\n    coreGlow:\n      \"0 0 14px rgba(5,150,105,0.42), 0 0 28px rgba(20,184,166,0.4), inset 0 0 1px rgba(255,255,255,0.2)\",\n  },\n  destructive: {\n    ambientGradient:\n      \"linear-gradient(90deg, transparent 0%, rgba(220,38,38,0) 6%, rgba(220,38,38,0.4) 24%, rgba(244,63,94,0.52) 50%, rgba(190,18,60,0.44) 76%, rgba(190,18,60,0) 94%, transparent 100%)\",\n    coreGradient:\n      \"linear-gradient(90deg, transparent 0%, rgba(220,38,38,0.75) 20%, rgba(251,113,133,0.9) 50%, rgba(244,63,94,0.82) 80%, transparent 100%)\",\n    ambientGlow:\n      \"0 0 22px rgba(220,38,38,0.35), 0 0 44px rgba(244,63,94,0.24), 0 0 2px rgba(255,255,255,0.08)\",\n    coreGlow:\n      \"0 0 14px rgba(220,38,38,0.48), 0 0 28px rgba(244,63,94,0.4), inset 0 0 1px rgba(255,255,255,0.16)\",\n  },\n}\n\nfunction NotificationCardBorderTrail({\n  active,\n  rimVariant = \"default\",\n}: {\n  active: boolean\n  rimVariant?: RimVariant\n}) {\n  const progress = useMotionValue(0)\n  const offsetDistance = useTransform(progress, (v: number) => {\n    const wrapped = ((v % 100) + 100) % 100\n    return `${wrapped}%`\n  })\n\n  useEffect(() => {\n    if (!active) {\n      return\n    }\n    let rafId = 0\n    let last = performance.now()\n    const tick = (now: number) => {\n      const dt = now - last\n      last = now\n      const next = progress.get() + (dt / BORDER_TRAIL_LOOP_MS) * 100\n      progress.set(((next % 100) + 100) % 100)\n      rafId = requestAnimationFrame(tick)\n    }\n    rafId = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(rafId)\n  }, [active, progress])\n\n  const pathCornerRadiusPx = 16\n  const trailLengthPx = 184\n  const trailThicknessPx = 32\n\n  const trailBox = {\n    height: trailThicknessPx,\n    offsetPath: `rect(0 auto auto 0 round ${pathCornerRadiusPx}px)`,\n    width: trailLengthPx,\n  } as const\n\n  const trail = RIM_BORDER_TRAIL[rimVariant]\n\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]\",\n        active ? \"visible opacity-100\" : \"invisible opacity-0\"\n      )}\n    >\n      <motion.div\n        className=\"absolute opacity-95 dark:opacity-[0.98]\"\n        style={{\n          ...trailBox,\n          filter: \"blur(12px)\",\n          offsetDistance,\n        }}\n      >\n        <div\n          className=\"size-full rounded-[999px]\"\n          style={{\n            background: trail.ambientGradient,\n            boxShadow: trail.ambientGlow,\n          }}\n        />\n      </motion.div>\n      <motion.div\n        className=\"absolute dark:opacity-[0.94]\"\n        style={{\n          ...trailBox,\n          filter: \"blur(4px)\",\n          offsetDistance,\n        }}\n      >\n        <div\n          className=\"size-full rounded-[999px]\"\n          style={{\n            background: trail.coreGradient,\n            boxShadow: trail.coreGlow,\n          }}\n        />\n      </motion.div>\n    </div>\n  )\n}\n\nfunction notificationBorderGlowConfig(\n  translucent: boolean,\n  rimEmphasis: boolean,\n  rimVariant: RimVariant = \"default\"\n) {\n  let idleOpacity: number\n  if (translucent) {\n    idleOpacity = rimEmphasis ? 0.92 : 0.72\n  } else {\n    idleOpacity = rimEmphasis ? 0.78 : 0.5\n  }\n  const gradients = RIM_BLOB_GRADIENTS[rimVariant]\n  return {\n    opacityIdle: idleOpacity,\n    primaryBg: gradients.primaryBg,\n    secondaryBg: gradients.secondaryBg,\n    tertiaryBg: gradients.tertiaryBg,\n    primaryLeft: [\"-5%\", \"75%\", \"-5%\"],\n    secondaryLeft: [\"65%\", \"10%\", \"65%\"],\n    tertiaryLeft: [\"25%\", \"55%\", \"25%\"],\n    durationMain: 6,\n    durationSec: 5,\n    durationTer: 4,\n  }\n}\n\ntype NotificationBorderGlowState = ReturnType<\n  typeof notificationBorderGlowConfig\n>\n\nfunction NotificationCardRimBlobs({\n  borderGlow,\n  reduceMotion,\n}: {\n  borderGlow: NotificationBorderGlowState\n  reduceMotion: boolean\n}) {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 overflow-hidden\",\n        CARD_INNER_RADIUS_CLASS\n      )}\n    >\n      <motion.div\n        animate={{\n          opacity: reduceMotion\n            ? borderGlow.opacityIdle * 0.82\n            : borderGlow.opacityIdle,\n        }}\n        className=\"absolute inset-x-0 bottom-0 h-[58%]\"\n        transition={{ duration: 0.25, ease: \"easeOut\" }}\n      >\n        <motion.div\n          animate={{\n            left: borderGlow.primaryLeft,\n          }}\n          className=\"-bottom-10 absolute h-32 w-88 blur-2xl\"\n          style={{\n            background: borderGlow.primaryBg,\n          }}\n          transition={{\n            duration: reduceMotion ? 0.01 : borderGlow.durationMain,\n            repeat: reduceMotion ? 0 : Number.POSITIVE_INFINITY,\n            ease: \"easeInOut\",\n          }}\n        />\n        <motion.div\n          animate={{\n            left: borderGlow.secondaryLeft,\n          }}\n          className=\"-bottom-7 absolute h-24 w-52 blur-2xl\"\n          style={{\n            background: borderGlow.secondaryBg,\n          }}\n          transition={{\n            duration: reduceMotion ? 0.01 : borderGlow.durationSec,\n            repeat: reduceMotion ? 0 : Number.POSITIVE_INFINITY,\n            ease: \"easeInOut\",\n          }}\n        />\n        <motion.div\n          animate={{\n            left: borderGlow.tertiaryLeft,\n          }}\n          className=\"-bottom-5 absolute h-20 w-44 blur-xl\"\n          style={{\n            background: borderGlow.tertiaryBg,\n          }}\n          transition={{\n            duration: reduceMotion ? 0.01 : borderGlow.durationTer,\n            repeat: reduceMotion ? 0 : Number.POSITIVE_INFINITY,\n            ease: \"easeInOut\",\n          }}\n        />\n      </motion.div>\n    </div>\n  )\n}\n\nfunction notificationFillBackgroundFor(\n  translucent: boolean,\n  interactive: boolean,\n  rimEmphasis: boolean\n) {\n  if (translucent) {\n    if (interactive && rimEmphasis) {\n      return \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 88%, transparent) 0%, color-mix(in oklch, var(--card) 74%, transparent) 100%)\"\n    }\n    return \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 82%, transparent) 0%, color-mix(in oklch, var(--card) 70%, transparent) 100%)\"\n  }\n  if (interactive && rimEmphasis) {\n    return \"linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 90%, var(--muted)) 100%)\"\n  }\n  return \"linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 94%, var(--muted)) 100%)\"\n}\n\ninterface NotificationHaloCardProps extends ComponentProps<\"div\"> {\n  children: ReactNode\n  translucent?: boolean\n  interactive?: boolean\n  padding?: keyof typeof paddingClass\n  rimVariant?: RimVariant\n}\n\nconst HaloCard = forwardRef<HTMLDivElement, NotificationHaloCardProps>(\n  function HaloCard(\n    {\n      children,\n      className,\n      translucent = true,\n      interactive = true,\n      padding = \"md\",\n      rimVariant = \"default\",\n      \"aria-label\": ariaLabel = \"Card\",\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      ...props\n    },\n    ref\n  ) {\n    const [isHovered, setIsHovered] = useState(false)\n    const [isFocusedWithin, setIsFocusedWithin] = useState(false)\n    const reduceMotion = useReducedMotion() ?? false\n\n    const rimEmphasis = interactive && (isHovered || isFocusedWithin)\n\n    const borderGlow = useMemo(\n      () => notificationBorderGlowConfig(translucent, rimEmphasis, rimVariant),\n      [translucent, rimEmphasis, rimVariant]\n    )\n\n    const fillBackground = useMemo(\n      () =>\n        notificationFillBackgroundFor(translucent, interactive, rimEmphasis),\n      [translucent, interactive, rimEmphasis]\n    )\n\n    const showTrailChrome = interactive && !reduceMotion\n    const trailActive = isHovered || isFocusedWithin\n\n    return (\n      // biome-ignore lint/a11y/noNoninteractiveElementInteractions: hover drives animated rim; focusable controls render in children.\n      // biome-ignore lint/a11y/useSemanticElements: not a form group; fieldset would be incorrect for layout chrome.\n      <div\n        aria-label={ariaLabel}\n        className={cn(\"relative w-full max-w-full\", className)}\n        data-slot=\"notification-halo-card\"\n        onBlur={(e) => {\n          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n            setIsFocusedWithin(false)\n          }\n          onBlur?.(e)\n        }}\n        onFocus={(e) => {\n          if (interactive) {\n            setIsFocusedWithin(true)\n          }\n          onFocus?.(e)\n        }}\n        onMouseEnter={(e) => {\n          if (interactive) {\n            setIsHovered(true)\n          }\n          onMouseEnter?.(e)\n        }}\n        onMouseLeave={(e) => {\n          setIsHovered(false)\n          onMouseLeave?.(e)\n        }}\n        ref={ref}\n        role=\"group\"\n        {...props}\n      >\n        <div className=\"relative rounded-2xl p-px\">\n          <NotificationCardRimBlobs\n            borderGlow={borderGlow}\n            reduceMotion={reduceMotion}\n          />\n\n          <div\n            className={cn(\n              \"relative z-0 flex flex-col gap-6 border border-border/90\",\n              CARD_INNER_RADIUS_CLASS,\n              \"shadow-[0_1px_0_rgba(255,255,255,0.1)_inset,0_1px_2px_rgba(0,0,0,0.04),0_4px_14px_rgba(0,0,0,0.05)]\",\n              \"dark:border-border dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_1px_2px_rgba(0,0,0,0.35),0_4px_20px_rgba(0,0,0,0.35)]\",\n              \"outline-none transition-[background-color,backdrop-filter,border-color,box-shadow] duration-200 ease-out\",\n              interactive &&\n                \"fine-hover:hover:border-ring/50 fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.14)_inset,0_1px_2px_rgba(0,0,0,0.09),0_4px_14px_rgba(0,0,0,0.11)]\",\n              interactive &&\n                \"dark:fine-hover:hover:border-zinc-500/60 dark:fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_1px_2px_rgba(0,0,0,0.42),0_4px_20px_rgba(0,0,0,0.48)]\",\n              interactive &&\n                \"focus-within:border-ring/70 focus-within:shadow-[0_1px_0_rgba(255,255,255,0.14)_inset,0_1px_2px_rgba(0,0,0,0.09),0_4px_14px_rgba(0,0,0,0.11)]\",\n              interactive &&\n                \"dark:focus-within:border-zinc-500/55 dark:focus-within:shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_1px_2px_rgba(0,0,0,0.42),0_4px_20px_rgba(0,0,0,0.48)]\",\n              translucent && \"backdrop-blur-xl backdrop-saturate-150\",\n              padding !== \"none\" && paddingClass[padding]\n            )}\n            data-slot=\"notification-halo-card-surface\"\n            style={{ background: fillBackground }}\n          >\n            {children}\n          </div>\n\n          {showTrailChrome ? (\n            <div\n              className={cn(\n                \"pointer-events-none absolute inset-0 z-10\",\n                CARD_INNER_RADIUS_CLASS\n              )}\n            >\n              <NotificationCardBorderTrail\n                active={trailActive}\n                rimVariant={rimVariant}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    )\n  }\n)\n\nHaloCard.displayName = \"HaloCard\"\n\n/* ─── Notification surface ─── */\n\nconst GLYPH_STAGGER_SEC = 0.018\nconst GLYPH_DURATION_SEC = 0.16\n\nfunction StaggeredGlyphLine({\n  as: Tag = \"span\",\n  className,\n  delayChildrenSec = 0,\n  messageKey,\n  reduceMotion,\n  text,\n}: {\n  as?: \"span\" | \"p\"\n  className?: string\n  delayChildrenSec?: number\n  /** Bump when the message identity changes so stagger replays. */\n  messageKey: string\n  reduceMotion: boolean\n  text: string\n}) {\n  const chars = useMemo(() => {\n    const counts = new Map<string, number>()\n    return Array.from(text, (char) => {\n      const count = counts.get(char) ?? 0\n      counts.set(char, count + 1)\n      return { char, key: `${char}-${count}` }\n    })\n  }, [text])\n\n  if (reduceMotion) {\n    return <Tag className={className}>{text}</Tag>\n  }\n\n  const MotionOuter = Tag === \"p\" ? motion.p : motion.span\n\n  return (\n    <MotionOuter\n      animate=\"visible\"\n      className={cn(Tag === \"p\" && \"block\", className)}\n      initial=\"hidden\"\n      key={`${messageKey}-${text}`}\n      variants={{\n        hidden: {},\n        visible: {\n          transition: {\n            delayChildren: delayChildrenSec,\n            staggerChildren: GLYPH_STAGGER_SEC,\n          },\n        },\n      }}\n    >\n      {chars.map((glyph) => (\n        <motion.span\n          className=\"inline\"\n          key={glyph.key}\n          transition={{\n            duration: GLYPH_DURATION_SEC,\n            ease: \"easeOut\",\n          }}\n          variants={{\n            hidden: { opacity: 0 },\n            visible: { opacity: 1 },\n          }}\n        >\n          {glyph.char}\n        </motion.span>\n      ))}\n    </MotionOuter>\n  )\n}\n\nfunction approximatePriorLineStaggerEndSec(\n  text: string,\n  reduceMotion: boolean\n) {\n  if (reduceMotion || text.length === 0) {\n    return 0\n  }\n  const n = text.length\n  const gapCount = Math.max(0, n - 1)\n  return gapCount * GLYPH_STAGGER_SEC + GLYPH_DURATION_SEC\n}\n\nexport interface HaloPolishedToastSurfaceProps {\n  title: string\n  description?: string\n  /**\n   * Change when the notification shows a new message so title/body stagger replay.\n   * Defaults to `title` + `description` (stable for identical copy).\n   */\n  messageKey?: string\n  /** `status` for non-urgent updates; `alert` for urgent/interruptive content. */\n  politeness?: \"status\" | \"alert\"\n  onDismiss?: () => void\n  /** Forwarded to the local `HaloCard`. */\n  translucent?: boolean\n  /** Rim blob + border-trail palette (success / error vs default). */\n  rimVariant?: RimVariant\n  className?: string\n}\n\n/**\n * Card + staggered text + optional dismiss — use inside Sonner `toast.custom`, or wrap with\n * `HaloPolishedNotification` for local AnimatePresence.\n */\nexport function HaloPolishedToastSurface({\n  title,\n  description,\n  messageKey: messageKeyProp,\n  politeness = \"status\",\n  onDismiss,\n  translucent = true,\n  rimVariant = \"default\",\n  className,\n}: HaloPolishedToastSurfaceProps) {\n  const reduceMotion = useReducedMotion() ?? false\n  const messageKey = messageKeyProp ?? `${title}\\0${description ?? \"\"}`\n\n  const bodyDelaySec = useMemo(\n    () => approximatePriorLineStaggerEndSec(title, reduceMotion) * 0.35,\n    [title, reduceMotion]\n  )\n\n  const ariaLive = politeness === \"alert\" ? \"assertive\" : \"polite\"\n\n  return (\n    <div\n      aria-live={ariaLive}\n      className={cn(\"w-full\", className)}\n      role={politeness === \"alert\" ? \"alert\" : \"status\"}\n    >\n      <HaloCard\n        aria-label={politeness === \"alert\" ? \"Alert\" : \"Notification\"}\n        className=\"text-left\"\n        interactive={Boolean(onDismiss)}\n        padding=\"sm\"\n        rimVariant={rimVariant}\n        translucent={translucent}\n      >\n        <div className=\"flex gap-3\">\n          <div className=\"min-w-0 flex-1 space-y-1.5\">\n            <StaggeredGlyphLine\n              as=\"p\"\n              className=\"text-balance font-semibold text-foreground text-sm leading-snug antialiased\"\n              messageKey={messageKey}\n              reduceMotion={reduceMotion}\n              text={title}\n            />\n            {description ? (\n              <StaggeredGlyphLine\n                as=\"p\"\n                className=\"text-pretty text-muted-foreground text-sm leading-relaxed\"\n                delayChildrenSec={bodyDelaySec}\n                messageKey={messageKey}\n                reduceMotion={reduceMotion}\n                text={description}\n              />\n            ) : null}\n          </div>\n          {onDismiss ? (\n            <ButtonPrimitive\n              aria-label=\"Dismiss notification\"\n              className={cn(\n                \"-mt-1 -mr-1 relative inline-flex size-8 shrink-0 items-center justify-center rounded-full\",\n                \"text-muted-foreground transition-colors\",\n                \"fine-hover:hover:bg-muted/80 fine-hover:hover:text-foreground\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n              )}\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <XIcon aria-hidden className=\"size-4\" />\n            </ButtonPrimitive>\n          ) : null}\n        </div>\n      </HaloCard>\n    </div>\n  )\n}\n\nconst ENTER_EXIT_SEC = 0.2\nconst ENTER_EXIT_SEC_REDUCED = 0.12\n\nconst slideOffsetPx = 12\n\nexport interface HaloPolishedNotificationProps\n  extends HaloPolishedToastSurfaceProps,\n    Omit<ComponentProps<typeof motion.div>, \"children\" | \"title\"> {\n  /** Slide direction for enter/exit (`transform: translateY`). */\n  slideFrom?: \"top\" | \"bottom\"\n}\n\nexport const HaloPolishedNotification = forwardRef<\n  HTMLDivElement,\n  HaloPolishedNotificationProps\n>(function HaloPolishedNotification(\n  {\n    title,\n    description,\n    messageKey,\n    politeness,\n    onDismiss,\n    slideFrom = \"bottom\",\n    translucent,\n    rimVariant,\n    className,\n    ...motionProps\n  },\n  ref\n) {\n  const reduceMotion = useReducedMotion() ?? false\n  const travelY = slideFrom === \"top\" ? -slideOffsetPx : slideOffsetPx\n  const duration = reduceMotion ? ENTER_EXIT_SEC_REDUCED : ENTER_EXIT_SEC\n  const { animate, exit, initial, transition, ...restMotionProps } = motionProps\n\n  return (\n    <motion.div\n      animate={animate ?? { opacity: 1, y: 0 }}\n      exit={exit ?? { opacity: 0, y: travelY }}\n      initial={initial ?? { opacity: 0, y: travelY }}\n      ref={ref}\n      transition={transition ?? { duration, ease: \"easeOut\" }}\n      {...restMotionProps}\n    >\n      <HaloPolishedToastSurface\n        className={className}\n        description={description}\n        messageKey={messageKey}\n        onDismiss={onDismiss}\n        politeness={politeness}\n        rimVariant={rimVariant}\n        title={title}\n        translucent={translucent}\n      />\n    </motion.div>\n  )\n})\n\nHaloPolishedNotification.displayName = \"HaloPolishedNotification\"\n",
      "type": "registry:ui"
    }
  ]
}