{
  "name": "disclosure-card",
  "type": "registry:ui",
  "componentName": "disclosure",
  "description": "Card-based disclosure component with expanded content.",
  "files": [
    {
      "path": "disclosure-card.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport {\n  Disclosure,\n  DisclosureContent,\n  DisclosureTrigger,\n} from '@/components/core/disclosure';\nimport {\n  motion,\n  type Transition,\n  type Variant,\n  type Variants,\n} from 'motion/react';\n\nexport function DisclosureCard() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const imageVariants: Variants = {\n    collapsed: { scale: 1, filter: 'blur(0px)' },\n    expanded: { scale: 1.1, filter: 'blur(3px)' },\n  };\n\n  const contentVariants: { expanded: Variant; collapsed: Variant } = {\n    collapsed: { opacity: 0, y: 0 },\n    expanded: { opacity: 1, y: 0 },\n  };\n\n  const transition: Transition = {\n    type: 'spring',\n    stiffness: 26.7,\n    damping: 4.1,\n    mass: 0.2,\n  };\n\n  return (\n    <div className='relative h-[350px] w-[290px] overflow-hidden rounded-xl'>\n      <div onClick={() => setIsOpen(!isOpen)}>\n        <motion.img\n          src='https://images.beta.cosmos.so/5b21c112-ed1d-45cd-baf0-38186a15af8e?format=jpeg'\n          alt='Les others studio - Que la montagne est belle ⛰'\n          className='pointer-events-none h-auto w-full select-none'\n          animate={isOpen ? 'expanded' : 'collapsed'}\n          variants={imageVariants}\n          transition={transition}\n        />\n      </div>\n      <Disclosure\n        onOpenChange={setIsOpen}\n        open={isOpen}\n        className='absolute bottom-0 left-0 right-0 rounded-xl bg-zinc-900 px-4 pt-2 dark:bg-zinc-50'\n        variants={contentVariants}\n        transition={transition}\n      >\n        <DisclosureTrigger>\n          <button\n            className='w-full pb-2 text-left text-[14px] font-medium text-white dark:text-zinc-900'\n            type='button'\n            onClick={() => setIsOpen(!isOpen)}\n          >\n            lesothers.studio\n          </button>\n        </DisclosureTrigger>\n        <DisclosureContent>\n          <div className='flex flex-col pb-4 text-[13px] text-zinc-300 dark:text-zinc-700'>\n            <p>How beautiful the mountain is 🗻</p>\n            <p className='line-clamp-3'>\n              The “This is trail running” campaign highlights the new trail\n              collection from <strong className='font-medium'>@salomon</strong>,\n              trying to touch the (strong) sensations experienced by runners.\n              With each model, its natural environment. To capture the Pulsar\n              Trail Pro 2 in real conditions, we chose to take the athletes\n              trudging in the French Alps, at 2,000 meters altitude.\n            </p>\n            <button\n              className='mt-3 w-full rounded-[4px] border border-zinc-700 bg-zinc-900 px-4 py-1 text-zinc-50 transition-colors duration-300 hover:bg-zinc-800'\n              type='button'\n            >\n              Learn More\n            </button>\n          </div>\n        </DisclosureContent>\n      </Disclosure>\n    </div>\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"
    }
  ]
}