{
  "name": "disclosure-basic",
  "type": "registry:ui",
  "componentName": "disclosure",
  "description": "Basic implementation of the disclosure component.",
  "files": [
    {
      "path": "disclosure-basic.tsx",
      "content": "import {\n  Disclosure,\n  DisclosureContent,\n  DisclosureTrigger,\n} from '@/components/core/disclosure';\n\nexport function DisclosureBasic() {\n  return (\n    <Disclosure className='w-[330px] rounded-md border border-zinc-200 px-3 dark:border-zinc-700'>\n      <DisclosureTrigger>\n        <button className='w-full py-2 text-left text-sm' type='button'>\n          Show more\n        </button>\n      </DisclosureTrigger>\n      <DisclosureContent>\n        <div className='overflow-hidden pb-3'>\n          <div className='pt-1 font-mono text-sm'>\n            <p>\n              This example demonstrates how you can use{' '}\n              <strong className='font-bold'>Disclosure</strong> component.\n            </p>\n            <pre className='mt-2 rounded-md bg-zinc-100 p-2 text-xs dark:bg-zinc-950'>\n              {`function DisclosureBasic() {\\n  return (\\n    <Disclosure>\\n      <DisclosureTrigger>\\n        <button type='button'>\\n          Show more\\n        </button>\\n      </DisclosureTrigger>\\n      <DisclosureContent>\\n        <div>hey</div>\\n      </DisclosureContent>\\n    </Disclosure>\\n  );`}\n            </pre>\n          </div>\n        </div>\n      </DisclosureContent>\n    </Disclosure>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/disclosure.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport {\n  AnimatePresence,\n  motion,\n  MotionConfig,\n  Transition,\n  Variant,\n  Variants,\n} from 'motion/react';\nimport { createContext, useContext, useState, useId, useEffect } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DisclosureContextType = {\n  open: boolean;\n  toggle: () => void;\n  variants?: { expanded: Variant; collapsed: Variant };\n};\n\nconst DisclosureContext = createContext<DisclosureContextType | undefined>(\n  undefined\n);\n\nexport type DisclosureProviderProps = {\n  children: React.ReactNode;\n  open: boolean;\n  onOpenChange?: (open: boolean) => void;\n  variants?: { expanded: Variant; collapsed: Variant };\n};\n\nfunction DisclosureProvider({\n  children,\n  open: openProp,\n  onOpenChange,\n  variants,\n}: DisclosureProviderProps) {\n  const [internalOpenValue, setInternalOpenValue] = useState<boolean>(openProp);\n\n  useEffect(() => {\n    setInternalOpenValue(openProp);\n  }, [openProp]);\n\n  const toggle = () => {\n    const newOpen = !internalOpenValue;\n    setInternalOpenValue(newOpen);\n    if (onOpenChange) {\n      onOpenChange(newOpen);\n    }\n  };\n\n  return (\n    <DisclosureContext.Provider\n      value={{\n        open: internalOpenValue,\n        toggle,\n        variants,\n      }}\n    >\n      {children}\n    </DisclosureContext.Provider>\n  );\n}\n\nfunction useDisclosure() {\n  const context = useContext(DisclosureContext);\n  if (!context) {\n    throw new Error('useDisclosure must be used within a DisclosureProvider');\n  }\n  return context;\n}\n\nexport type DisclosureProps = {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children: React.ReactNode;\n  className?: string;\n  variants?: { expanded: Variant; collapsed: Variant };\n  transition?: Transition;\n};\n\nexport function Disclosure({\n  open: openProp = false,\n  onOpenChange,\n  children,\n  className,\n  transition,\n  variants,\n}: DisclosureProps) {\n  return (\n    <MotionConfig transition={transition}>\n      <div className={className}>\n        <DisclosureProvider\n          open={openProp}\n          onOpenChange={onOpenChange}\n          variants={variants}\n        >\n          {React.Children.toArray(children)[0]}\n          {React.Children.toArray(children)[1]}\n        </DisclosureProvider>\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport function DisclosureTrigger({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const { toggle, open } = useDisclosure();\n\n  return (\n    <>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n\n        const element =\n          child as React.ReactElement<React.HTMLAttributes<HTMLElement>>;\n        const childProps = element.props;\n\n        return React.cloneElement(element, {\n              onClick: toggle,\n              role: 'button',\n              'aria-expanded': open,\n              tabIndex: 0,\n              onKeyDown: (e: { key: string; preventDefault: () => void }) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  toggle();\n                }\n              },\n              className: cn(\n                className,\n                childProps.className\n              ),\n              ...childProps,\n            });\n      })}\n    </>\n  );\n}\n\nexport function DisclosureContent({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const { open, variants } = useDisclosure();\n  const uniqueId = useId();\n\n  const BASE_VARIANTS: Variants = {\n    expanded: {\n      height: 'auto',\n      opacity: 1,\n    },\n    collapsed: {\n      height: 0,\n      opacity: 0,\n    },\n  };\n\n  const combinedVariants = {\n    expanded: { ...BASE_VARIANTS.expanded, ...variants?.expanded },\n    collapsed: { ...BASE_VARIANTS.collapsed, ...variants?.collapsed },\n  };\n\n  return (\n    <div className={cn('overflow-hidden', className)}>\n      <AnimatePresence initial={false}>\n        {open && (\n          <motion.div\n            id={uniqueId}\n            initial='collapsed'\n            animate='expanded'\n            exit='collapsed'\n            variants={combinedVariants}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nconst disclosure = {\n  Disclosure,\n  DisclosureProvider,\n  DisclosureTrigger,\n  DisclosureContent,\n};\n\nexport default disclosure;\n",
      "type": "registry:ui"
    }
  ]
}