{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "A customizable collapsible component",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/collapsible/index.tsx",
      "content": "\"use client\";\r\n\r\nimport { useMemo } from \"react\";\r\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\n\r\nconst cssAnimationPresets = {\r\n  none: \"transition-none\",\r\n  scale: [\r\n    `[transition-property:scale,opacity,height] [will-change:scale,opacity,height] origin-top`,\r\n    `data-starting-style:scale-80 data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:opacity-0 data-ending-style:h-0 data-ending-style:scale-80`,\r\n  ],\r\n  fade: [\r\n    `[transition-property:opacity,height] [will-change:opacity,height]`,\r\n    `data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:opacity-0 data-ending-style:h-0`,\r\n  ],\r\n  slideOutside: [\r\n    `[transition-property:translate,opacity,height] [will-change:translate,opacity,height]`,\r\n    `data-starting-style:opacity-0 data-starting-style:translate-y-[18px] data-ending-style:translate-y-[18px] data-ending-style:opacity-0 data-ending-style:h-0 data-starting-style:h-0 `,\r\n  ],\r\n  slideInside: [\r\n    `[transition-property:translate,opacity,height] [will-change:translate,opacity,height]`,\r\n    `data-starting-style:opacity-0 data-starting-style:translate-y-[-18px] data-ending-style:translate-y-[-18px] data-ending-style:opacity-0 data-ending-style:h-0 data-starting-style:h-0 `,\r\n  ],\r\n  motion: [\r\n    `[transition-property:translate,scale,opacity,rotateX,rotateY,transform,height] [will-change:translate,scale,opacity,rotateX,rotateY,transform,height] `,\r\n    `[transform:perspective(1000px)] origin-top`,\r\n    `data-starting-style:translate-y-[7px] data-starting-style:opacity-0 data-starting-style:scale-[0.26] data-starting-style:rotate-x-[70deg] data-ending-style:translate-y-[7px] data-ending-style:opacity-0 data-ending-style:scale-[0.26] data-ending-style:rotate-x-[70deg] data-starting-style:h-0 data-ending-style:h-0`,\r\n  ],\r\n  motionBlur: [\r\n    `[transition-property:translate,scale,opacity,rotateX,rotateY,transform,filter,height] [will-change:translate,scale,opacity,rotateX,rotateY,transform,filter,height] origin-top`,\r\n    `[transform:perspective(1000px)]`,\r\n    `data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,\r\n    `data-starting-style:translate-y-[7px] data-starting-style:opacity-0 data-starting-style:scale-[0.26] data-starting-style:rotate-x-[70deg] data-ending-style:translate-y-[7px] data-ending-style:opacity-0 data-ending-style:scale-[0.26] data-ending-style:rotate-x-[70deg] data-starting-style:h-0 data-ending-style:h-0`,\r\n  ],\r\n  perspective: [\r\n    `[transition-property:opacity,rotateX,rotateY,transform,height] [will-change:opacity,rotateX,rotateY,transform,height]`,\r\n    `[transform:perspective(1000px)] origin-top`,\r\n    `data-starting-style:h-0 data-ending-style:h-0`,\r\n    `data-starting-style:opacity-0 data-ending-style:opacity-0`,\r\n    `data-starting-style:-rotate-x-[90deg] data-ending-style:-rotate-x-[90deg]`,\r\n  ],\r\n  perspectiveBlur: [\r\n    `[transition-property:opacity,rotateX,rotateY,transform,height,filter] [will-change:opacity,rotateX,rotateY,transform,height,filter]`,\r\n    `[transform:perspective(1000px)] origin-top`,\r\n    `data-starting-style:h-0 data-ending-style:h-0`,\r\n    `data-starting-style:opacity-0 data-ending-style:opacity-0`,\r\n    `data-starting-style:-rotate-x-[90deg] data-ending-style:-rotate-x-[90deg]`,\r\n    `data-starting-style:blur-[9px] data-ending-style:blur-[9px]`,\r\n  ],\r\n};\r\n\r\nconst cssTransitionPresets = {\r\n  inExpo: `duration-[0.35s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,\r\n  outExpo: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,\r\n  inOutExpo: `duration-[0.35s] ease-[cubic-bezier(1,0,0,1)]`,\r\n  anticipate: `duration-[0.35s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,\r\n  quickOut: `duration-[0.35s] ease-out`,\r\n  overshootOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,\r\n  swiftOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,\r\n  snappyOut: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,\r\n  in: `duration-[0.35s] ease-[cubic-bezier(0.42,0,1,1)]`,\r\n  out: `duration-[0.35s] ease-[cubic-bezier(0,0,0.58,1)]`,\r\n  inOut: `duration-[0.25s] ease-[cubic-bezier(0.42,0,0.58,1)]`,\r\n  outIn: `duration-[0.35s] ease-[cubic-bezier(0.1,0.7,0.9,0.5)]`,\r\n  inQuad: `duration-[0.35s] ease-[cubic-bezier(0.55,0.085,0.68,0.53)]`,\r\n  outQuad: `duration-[0.25s] ease-[cubic-bezier(0.25,0.46,0.45,0.94)]`,\r\n  inOutQuad: `duration-[0.32s] ease-[cubic-bezier(0.455,0.03,0.515,0.955)]`,\r\n  inCubic: `duration-[0.35s] ease-[cubic-bezier(0.55,0.055,0.675,0.19)]`,\r\n  outCubic: `duration-[0.35s] ease-[cubic-bezier(0.215,0.61,0.355,1)]`,\r\n  inOutCubic: `duration-[0.35s] ease-[cubic-bezier(0.645,0.045,0.355,1)]`,\r\n  inQuart: `duration-[0.35s] ease-[cubic-bezier(0.895,0.03,0.685,0.22)]`,\r\n  outQuart: `duration-[0.35s] ease-[cubic-bezier(0.165,0.84,0.44,1)]`,\r\n  inOutQuart: `duration-[0.35s] ease-[cubic-bezier(0.77,0,0.175,1)]`,\r\n  inQuint: `duration-[0.35s] ease-[cubic-bezier(0.755,0.05,0.855,0.06)]`,\r\n  outQuint: `duration-[0.35s] ease-[cubic-bezier(0.23,1,0.32,1)]`,\r\n  inOutQuint: `duration-[0.35s] ease-[cubic-bezier(0.86,0,0.07,1)]`,\r\n  inCirc: `duration-[0.35s] ease-[cubic-bezier(0.6,0.04,0.98,0.335)]`,\r\n  outCirc: `duration-[0.35s] ease-[cubic-bezier(0.075,0.82,0.165,1)]`,\r\n  inOutCirc: `duration-[0.35s] ease-[cubic-bezier(0.785,0.135,0.15,0.86)]`,\r\n  inOutBase: `duration-[0.35s] ease-[cubic-bezier(0.25,0.1,0.25,1)]`,\r\n};\r\n\r\ntype CSSAnimationPresets = keyof typeof cssAnimationPresets;\r\ntype CSSTransitionPresets = keyof typeof cssTransitionPresets;\r\n\r\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\r\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\r\n}\r\n\r\nfunction CollapsibleTrigger({\r\n  className,\r\n  ...props\r\n}: CollapsiblePrimitive.Trigger.Props) {\r\n  return (\r\n    <CollapsiblePrimitive.Trigger\r\n      data-slot=\"collapsible-trigger\"\r\n      className={cn(\"cursor-pointer\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface CollapsiblePanelProps extends CollapsiblePrimitive.Panel.Props {\r\n  animationPreset?: CSSAnimationPresets;\r\n  transitionPreset?: CSSTransitionPresets;\r\n  reduceMotion?: boolean;\r\n}\r\n\r\nfunction CollapsiblePanel({\r\n  className,\r\n  animationPreset = \"fade\",\r\n  transitionPreset = \"outQuint\",\r\n  reduceMotion = false,\r\n  ...props\r\n}: CollapsiblePanelProps) {\r\n  const cssAnimationConfig = useMemo(() => {\r\n    if (reduceMotion) return \"none\";\r\n\r\n    if (animationPreset) {\r\n      return cssAnimationPresets[animationPreset];\r\n    }\r\n\r\n    return cssAnimationPresets.scale;\r\n  }, [animationPreset, reduceMotion]);\r\n\r\n  const cssTransitionConfig = useMemo(() => {\r\n    if (reduceMotion) return \"none\";\r\n\r\n    if (transitionPreset) {\r\n      return cssTransitionPresets[transitionPreset];\r\n    }\r\n\r\n    return cssTransitionPresets.snappyOut;\r\n  }, [transitionPreset, reduceMotion]);\r\n\r\n  return (\r\n    <CollapsiblePrimitive.Panel\r\n      data-slot=\"collapsible-panel\"\r\n      className={cn(\r\n        \"[&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) overflow-hidden\",\r\n        cssAnimationConfig,\r\n        cssTransitionConfig,\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Collapsible, CollapsibleTrigger, CollapsiblePanel };\r\n",
      "type": "registry:ui",
      "target": "components/ui/collapsible.tsx"
    }
  ]
}