{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-gridlist",
  "type": "registry:ui",
  "title": "GridList",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwind-merge",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-checkbox.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/GridList.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  GridList as AriaGridList,\n  GridListItem as AriaGridListItem,\n  GridListHeader as AriaGridListHeader,\n  Button,\n  type GridListItemProps,\n  type GridListProps\n} from 'react-aria-components/GridList';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {tv} from 'tailwind-variants';\nimport {Checkbox} from '@/registry/react-aria/ui/Checkbox';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\nimport {type HTMLAttributes} from 'react';\nimport {twMerge} from 'tailwind-merge';\n\nexport function GridList<T>({children, ...props}: GridListProps<T>) {\n  let isHorizontal =\n    (props as {orientation?: 'horizontal' | 'vertical'}).orientation === 'horizontal';\n  return (\n    <AriaGridList\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        isHorizontal\n          ? 'flex flex-row flex-nowrap overflow-x-auto relative w-full max-w-[500px] bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg font-sans empty:flex empty:items-center empty:justify-center empty:italic empty:text-sm'\n          : 'overflow-auto w-[200px] relative bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg font-sans empty:flex empty:items-center empty:justify-center empty:italic empty:text-sm'\n      )}>\n      {children}\n    </AriaGridList>\n  );\n}\n\nconst itemStyles = tv({\n  extend: focusRing,\n  base: [\n    'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-neutral-900 dark:text-neutral-200 border-transparent -outline-offset-2',\n    '[[data-orientation=vertical]_&]:border-t [[data-orientation=vertical]_&]:dark:border-t-neutral-700 [[data-orientation=vertical]_&]:first:border-t-0 [[data-orientation=vertical]_&]:first:rounded-t-lg [[data-orientation=vertical]_&]:last:rounded-b-lg',\n    '[[data-orientation=horizontal]_&]:border-l [[data-orientation=horizontal]_&]:dark:border-l-neutral-700 [[data-orientation=horizontal]_&]:first:border-l-0 [[data-orientation=horizontal]_&]:first:rounded-s-lg [[data-orientation=horizontal]_&]:last:rounded-e-lg [[data-orientation=horizontal]_&]:flex-shrink-0'\n  ].join(' '),\n  variants: {\n    isSelected: {\n      false:\n        'hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-700/60 dark:pressed:bg-neutral-700/60',\n      true: [\n        'bg-blue-100 dark:bg-blue-700/30 hover:bg-blue-200 pressed:bg-blue-200 dark:hover:bg-blue-700/40 dark:pressed:bg-blue-700/40 z-20',\n        '[[data-orientation=vertical]_&]:border-y-blue-200 [[data-orientation=vertical]_&]:dark:border-y-blue-900',\n        '[[data-orientation=horizontal]_&]:border-x-blue-200 [[data-orientation=horizontal]_&]:dark:border-x-blue-900 '\n      ].join(' ')\n    },\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText] z-10'\n    }\n  }\n});\n\nexport function GridListItem({children, ...props}: GridListItemProps) {\n  let textValue = typeof children === 'string' ? children : undefined;\n  return (\n    <AriaGridListItem textValue={textValue} {...props} className={itemStyles}>\n      {composeRenderProps(\n        children,\n        (children, {selectionMode, selectionBehavior, allowsDragging}) => (\n          <>\n            {/* Add elements for drag and drop and selection. */}\n            {allowsDragging && <Button slot=\"drag\">≡</Button>}\n            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n              <Checkbox slot=\"selection\" />\n            )}\n            {children}\n          </>\n        )\n      )}\n    </AriaGridListItem>\n  );\n}\n\nexport function GridListHeader({children, ...props}: HTMLAttributes<HTMLElement>) {\n  return (\n    <AriaGridListHeader\n      {...props}\n      className={twMerge(\n        'text-sm font-semibold text-neutral-500 dark:text-neutral-300 px-4 py-1 -mt-px z-10 bg-neutral-100/60 dark:bg-neutral-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-neutral-100 border-y border-y-neutral-200 dark:border-y-neutral-700',\n        props.className\n      )}>\n      {children}\n    </AriaGridListHeader>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}