{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "materialize",
  "title": "Materialize",
  "description": "A surface that arrives like a material coming into focus: slightly smaller, softer, from its anchor, and leaves the same way.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils",
    "https://miseui.junsu4621.workers.dev/r/motion.json"
  ],
  "files": [
    {
      "path": "registry/miseui/ui/materialize.tsx",
      "content": "import type * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { SPRING_DEFAULT } from \"@/registry/miseui/lib/motion\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\n/** A surface arrives slightly smaller and softer, like glass coming into focus, never as a plain fade. */\nconst ENTER_SCALE = 0.96\nconst ENTER_BLUR_PX = 8\nconst ENTER_OFFSET_PX = 6\n\ninterface MaterializeProps extends Omit<React.ComponentProps<typeof motion.div>, \"children\"> {\n  /** Mount with the enter animation; unmount with the mirrored exit. */\n  show: boolean\n  /** Where the surface grows from, e.g. \"top left\" or \"50% 100%\". Anchor it to the trigger. */\n  origin?: string\n  children: React.ReactNode\n}\n\nfunction Materialize({ show, origin = \"center\", className, style, children, ...props }: MaterializeProps) {\n  const reduceMotion = useReducedMotion()\n  const hidden = reduceMotion\n    ? { opacity: 0 }\n    : { opacity: 0, scale: ENTER_SCALE, y: ENTER_OFFSET_PX, filter: `blur(${ENTER_BLUR_PX}px)` }\n  const visible = reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0, filter: \"blur(0px)\" }\n\n  return (\n    <AnimatePresence initial={false}>\n      {show && (\n        <motion.div\n          data-slot=\"materialize\"\n          data-reduced={reduceMotion ? \"true\" : \"false\"}\n          initial={hidden}\n          animate={visible}\n          exit={hidden}\n          transition={SPRING_DEFAULT}\n          style={{ transformOrigin: origin, ...style }}\n          className={cn(\"will-change-[transform,opacity,filter]\", className)}\n          {...props}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\nexport { Materialize, type MaterializeProps }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "transitions"
  ],
  "type": "registry:ui"
}