{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-base-files",
  "title": "Files",
  "description": "A component that allows you to display a list of files and folders.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@animate-ui/primitives-base-files"
  ],
  "files": [
    {
      "path": "registry/components/base/files/index.tsx",
      "content": "import * as React from 'react';\nimport { FolderIcon, FolderOpenIcon, FileIcon } from 'lucide-react';\n\nimport {\n  Files as FilesPrimitive,\n  FilesHighlight as FilesHighlightPrimitive,\n  FolderItem as FolderItemPrimitive,\n  FolderHeader as FolderHeaderPrimitive,\n  FolderTrigger as FolderTriggerPrimitive,\n  FolderHighlight as FolderHighlightPrimitive,\n  Folder as FolderPrimitive,\n  FolderIcon as FolderIconPrimitive,\n  FileLabel as FileLabelPrimitive,\n  FolderPanel as FolderPanelPrimitive,\n  FileHighlight as FileHighlightPrimitive,\n  File as FilePrimitive,\n  FileIcon as FileIconPrimitive,\n  type FilesProps as FilesPrimitiveProps,\n  type FolderItemProps as FolderItemPrimitiveProps,\n  type FolderPanelProps as FolderPanelPrimitiveProps,\n  type FileProps as FilePrimitiveProps,\n  type FileLabelProps as FileLabelPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/files';\nimport { cn } from '@/lib/utils';\n\ntype GitStatus = 'untracked' | 'modified' | 'deleted';\n\ntype FilesProps = FilesPrimitiveProps;\n\nfunction Files({ className, children, ...props }: FilesProps) {\n  return (\n    <FilesPrimitive className={cn('p-2 w-full', className)} {...props}>\n      <FilesHighlightPrimitive className=\"bg-accent rounded-lg pointer-events-none\">\n        {children}\n      </FilesHighlightPrimitive>\n    </FilesPrimitive>\n  );\n}\n\ntype SubFilesProps = FilesProps;\n\nfunction SubFiles(props: SubFilesProps) {\n  return <FilesPrimitive {...props} />;\n}\n\ntype FolderItemProps = FolderItemPrimitiveProps;\n\nfunction FolderItem(props: FolderItemProps) {\n  return <FolderItemPrimitive {...props} />;\n}\n\ntype FolderTriggerProps = FileLabelPrimitiveProps & {\n  gitStatus?: GitStatus;\n};\n\nfunction FolderTrigger({\n  children,\n  className,\n  gitStatus,\n  ...props\n}: FolderTriggerProps) {\n  return (\n    <FolderHeaderPrimitive>\n      <FolderTriggerPrimitive className=\"w-full text-start\">\n        <FolderHighlightPrimitive>\n          <FolderPrimitive className=\"flex items-center justify-between gap-2 p-2 pointer-events-none\">\n            <div\n              className={cn(\n                'flex items-center gap-2',\n                gitStatus === 'untracked' && 'text-green-400',\n                gitStatus === 'modified' && 'text-amber-400',\n                gitStatus === 'deleted' && 'text-red-400',\n              )}\n            >\n              <FolderIconPrimitive\n                closeIcon={<FolderIcon className=\"size-4.5\" />}\n                openIcon={<FolderOpenIcon className=\"size-4.5\" />}\n              />\n              <FileLabelPrimitive\n                className={cn('text-sm', className)}\n                {...props}\n              >\n                {children}\n              </FileLabelPrimitive>\n            </div>\n\n            {gitStatus && (\n              <span\n                className={cn(\n                  'rounded-full size-2',\n                  gitStatus === 'untracked' && 'bg-green-400',\n                  gitStatus === 'modified' && 'bg-amber-400',\n                  gitStatus === 'deleted' && 'bg-red-400',\n                )}\n              />\n            )}\n          </FolderPrimitive>\n        </FolderHighlightPrimitive>\n      </FolderTriggerPrimitive>\n    </FolderHeaderPrimitive>\n  );\n}\n\ntype FolderPanelProps = FolderPanelPrimitiveProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n  return (\n    <div className=\"relative ml-6 before:absolute before:-left-2 before:inset-y-0 before:w-px before:h-full before:bg-border\">\n      <FolderPanelPrimitive {...props} />\n    </div>\n  );\n}\n\ntype FileItemProps = FilePrimitiveProps & {\n  icon?: React.ElementType;\n  gitStatus?: GitStatus;\n};\n\nfunction FileItem({\n  icon: Icon = FileIcon,\n  className,\n  children,\n  gitStatus,\n  ...props\n}: FileItemProps) {\n  return (\n    <FileHighlightPrimitive>\n      <FilePrimitive\n        className={cn(\n          'flex items-center justify-between gap-2 p-2 pointer-events-none',\n          gitStatus === 'untracked' && 'text-green-400',\n          gitStatus === 'modified' && 'text-amber-400',\n          gitStatus === 'deleted' && 'text-red-400',\n        )}\n      >\n        <div className=\"flex items-center gap-2\">\n          <FileIconPrimitive>\n            <Icon className=\"size-4.5\" />\n          </FileIconPrimitive>\n          <FileLabelPrimitive className={cn('text-sm', className)} {...props}>\n            {children}\n          </FileLabelPrimitive>\n        </div>\n\n        {gitStatus && (\n          <span className=\"text-sm font-medium\">\n            {gitStatus === 'untracked' && 'U'}\n            {gitStatus === 'modified' && 'M'}\n            {gitStatus === 'deleted' && 'D'}\n          </span>\n        )}\n      </FilePrimitive>\n    </FileHighlightPrimitive>\n  );\n}\n\nexport {\n  Files,\n  FolderItem,\n  FolderTrigger,\n  FolderPanel,\n  FileItem,\n  SubFiles,\n  type FilesProps,\n  type FolderItemProps,\n  type FolderTriggerProps,\n  type FolderPanelProps,\n  type FileItemProps,\n  type SubFilesProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/base/files.tsx"
    }
  ],
  "type": "registry:ui"
}