{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "Folder-TS-CSS",
	"title": "Folder",
	"description": "Interactive folder opens to reveal nested content smooth motion.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "Folder.css",
			"target": "@components/Folder.css",
			"content": ":root {\n  --folder-color: #70a1ff;\n  --folder-back-color: #4785ff;\n  --paper-1: #e6e6e6;\n  --paper-2: #f2f2f2;\n  --paper-3: #ffffff;\n}\n\n.folder {\n  transition: all 0.2s ease-in;\n  cursor: pointer;\n}\n\n.folder:not(.folder--click):hover {\n  transform: translateY(-8px);\n}\n\n.folder:not(.folder--click):hover .paper {\n  transform: translate(-50%, 0%);\n}\n\n.folder:not(.folder--click):hover .folder__front {\n  transform: skew(15deg) scaleY(0.6);\n}\n\n.folder:not(.folder--click):hover .right {\n  transform: skew(-15deg) scaleY(0.6);\n}\n\n.folder.open {\n  transform: translateY(-8px);\n}\n\n.folder.open .paper:nth-child(1) {\n  transform: translate(-120%, -70%) rotateZ(-15deg);\n}\n\n.folder.open .paper:nth-child(1):hover {\n  transform: translate(-120%, -70%) rotateZ(-15deg) scale(1.1);\n}\n\n.folder.open .paper:nth-child(2) {\n  transform: translate(10%, -70%) rotateZ(15deg);\n  height: 80%;\n}\n\n.folder.open .paper:nth-child(2):hover {\n  transform: translate(10%, -70%) rotateZ(15deg) scale(1.1);\n}\n\n.folder.open .paper:nth-child(3) {\n  transform: translate(-50%, -100%) rotateZ(5deg);\n  height: 80%;\n}\n\n.folder.open .paper:nth-child(3):hover {\n  transform: translate(-50%, -100%) rotateZ(5deg) scale(1.1);\n}\n\n.folder.open .folder__front {\n  transform: skew(15deg) scaleY(0.6);\n}\n\n.folder.open .right {\n  transform: skew(-15deg) scaleY(0.6);\n}\n\n.folder__back {\n  position: relative;\n  width: 100px;\n  height: 80px;\n  background: var(--folder-back-color);\n  border-radius: 0px 10px 10px 10px;\n}\n\n.folder__back::after {\n  position: absolute;\n  z-index: 0;\n  bottom: 98%;\n  left: 0;\n  content: '';\n  width: 30px;\n  height: 10px;\n  background: var(--folder-back-color);\n  border-radius: 5px 5px 0 0;\n}\n\n.paper {\n  position: absolute;\n  z-index: 2;\n  bottom: 10%;\n  left: 50%;\n  transform: translate(-50%, 10%);\n  width: 70%;\n  height: 80%;\n  background: var(--paper-1);\n  border-radius: 10px;\n  transition: all 0.3s ease-in-out;\n}\n\n.paper:nth-child(2) {\n  background: var(--paper-2);\n  width: 80%;\n  height: 70%;\n}\n\n.paper:nth-child(3) {\n  background: var(--paper-3);\n  width: 90%;\n  height: 60%;\n}\n\n.folder__front {\n  position: absolute;\n  z-index: 3;\n  width: 100%;\n  height: 100%;\n  background: var(--folder-color);\n  border-radius: 5px 10px 10px 10px;\n  transform-origin: bottom;\n  transition: all 0.3s ease-in-out;\n}\n\n.folder:focus-visible {\n  outline: 2px solid #ffffff;\n  outline-offset: 4px;\n  border-radius: 10px;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "Folder.tsx",
			"content": "import React, { useState } from 'react';\nimport './Folder.css';\n\ninterface FolderProps {\n  color?: string;\n  size?: number;\n  items?: React.ReactNode[];\n  className?: string;\n}\n\nconst darkenColor = (hex: string, percent: number): string => {\n  let color = hex.startsWith('#') ? hex.slice(1) : hex;\n  if (color.length === 3) {\n    color = color\n      .split('')\n      .map(c => c + c)\n      .join('');\n  }\n  const num = parseInt(color.slice(0, 6), 16);\n  let r = (num >> 16) & 0xff;\n  let g = (num >> 8) & 0xff;\n  let b = num & 0xff;\n  r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\n  g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\n  b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n};\n\nconst Folder: React.FC<FolderProps> = ({ color = '#5227FF', size = 1, items = [], className = '' }) => {\n  const maxItems = 3;\n  const papers = items.slice(0, maxItems);\n  while (papers.length < maxItems) {\n    papers.push(null);\n  }\n\n  const [open, setOpen] = useState(false);\n  const [paperOffsets, setPaperOffsets] = useState<{ x: number; y: number }[]>(\n    Array.from({ length: maxItems }, () => ({ x: 0, y: 0 }))\n  );\n\n  const folderBackColor = darkenColor(color, 0.08);\n  const paper1 = darkenColor('#ffffff', 0.1);\n  const paper2 = darkenColor('#ffffff', 0.05);\n  const paper3 = '#ffffff';\n\n  const handleClick = () => {\n    setOpen(prev => !prev);\n    if (open) {\n      setPaperOffsets(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n    }\n  };\n\n  const handlePaperMouseMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {\n    if (!open) return;\n    const rect = e.currentTarget.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const offsetX = (e.clientX - centerX) * 0.15;\n    const offsetY = (e.clientY - centerY) * 0.15;\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: offsetX, y: offsetY };\n      return newOffsets;\n    });\n  };\n\n  const handlePaperMouseLeave = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: 0, y: 0 };\n      return newOffsets;\n    });\n  };\n\n  const folderStyle: React.CSSProperties = {\n    '--folder-color': color,\n    '--folder-back-color': folderBackColor,\n    '--paper-1': paper1,\n    '--paper-2': paper2,\n    '--paper-3': paper3\n  } as React.CSSProperties;\n\n  const folderClassName = `folder ${open ? 'open' : ''}`.trim();\n  const scaleStyle = { transform: `scale(${size})` };\n\n  return (\n    <div style={scaleStyle} className={className}>\n      <div\n        className={folderClassName}\n        style={folderStyle}\n        onClick={handleClick}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleClick();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={open ? 'Close folder' : 'Open folder'}\n      >\n        <div className=\"folder__back\">\n          {papers.map((item, i) => (\n            <div\n              key={i}\n              className={`paper paper-${i + 1}`}\n              onMouseMove={e => handlePaperMouseMove(e, i)}\n              onMouseLeave={e => handlePaperMouseLeave(e, i)}\n              style={\n                open\n                  ? ({\n                      '--magnet-x': `${paperOffsets[i]?.x || 0}px`,\n                      '--magnet-y': `${paperOffsets[i]?.y || 0}px`\n                    } as React.CSSProperties)\n                  : {}\n              }\n            >\n              {item}\n            </div>\n          ))}\n          <div className=\"folder__front\"></div>\n          <div className=\"folder__front right\"></div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Folder;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}