{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapse",
  "title": "Collapse",
  "description": "Animates content open and closed between zero and full height.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/motion"
  ],
  "files": [
    {
      "path": "registry/ikas/collapse.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { FADE_IN, FADE_OUT, INSTANT, springOrInstant } from \"@/lib/motion\"\n\ntype CollapseProps = {\n  open: boolean\n  children: React.ReactNode\n  /** Classes for the inner content wrapper. Put padding here, not on the animated element. */\n  className?: string\n  /** id of the panel, for the trigger's aria-controls. */\n  id?: string\n}\n\n/**\n * The parent's row gap when it stacks its children (flex column or grid).\n * A mounted-but-0px Collapse still gets that gap; when it unmounts after the\n * exit animation the gap vanishes at once, which reads as a second jump.\n */\nfunction useParentRowGap(ref: React.RefObject<HTMLElement | null>) {\n  const [gap, setGap] = React.useState(0)\n\n  React.useLayoutEffect(() => {\n    const parent = ref.current?.parentElement\n    if (!parent) return\n    const style = getComputedStyle(parent)\n    const stacks = (style.display.includes(\"flex\") && style.flexDirection.startsWith(\"column\")) || style.display.includes(\"grid\")\n    setGap(stacks ? parseFloat(style.rowGap) || 0 : 0)\n  }, [ref])\n\n  return gap\n}\n\nfunction CollapsePanel({ children, className, id }: Omit<CollapseProps, \"open\">) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const gap = useParentRowGap(ref)\n\n  return (\n    <motion.div\n      ref={ref}\n      id={id}\n      data-slot=\"collapse\"\n      initial={{ height: 0, overflow: \"hidden\" }}\n      animate={{ height: \"auto\", transitionEnd: { overflow: \"visible\" } }}\n      exit={{ height: 0, overflow: \"hidden\" }}\n      transition={springOrInstant(reduce)}\n      // Absorb the parent's gap into the animated height: the panel pulls itself\n      // up by the gap and pads it back inside, so open and close are one motion.\n      style={{ marginTop: -gap }}\n    >\n      <motion.div\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1, transition: reduce ? INSTANT : FADE_IN }}\n        exit={{ opacity: 0, transition: reduce ? INSTANT : FADE_OUT }}\n        style={{ paddingTop: gap }}\n      >\n        <div className={className}>{children}</div>\n      </motion.div>\n    </motion.div>\n  )\n}\n\n/**\n * Animates height between 0 and auto. Content fades in after the space opens\n * and out before it closes. Works inside gapped stacks (Card, FieldGroup) without\n * a jump at the end. Pair the trigger's aria-expanded / aria-controls with `id`.\n */\nfunction Collapse({ open, children, className, id }: CollapseProps) {\n  return (\n    <AnimatePresence initial={false}>\n      {open && (\n        <CollapsePanel key=\"collapse\" className={className} id={id}>\n          {children}\n        </CollapsePanel>\n      )}\n    </AnimatePresence>\n  )\n}\n\nexport { Collapse, type CollapseProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/collapse.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/collapse",
  "categories": [
    "motion",
    "layout"
  ],
  "type": "registry:component"
}