{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "grid-list",
  "title": "grid-list",
  "description": "grid-list",
  "dependencies": [
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/checkbox"
  ],
  "files": [
    {
      "path": "src/components/ui/grid-list.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"react-aria-components/Button\"\nimport type { GridListItemProps, GridListProps } from \"react-aria-components/GridList\"\nimport {\n  GridList as GridListPrimitive,\n  GridListHeader as GridListHeaderPrimitive,\n  GridListItem as GridListItemPrimitive,\n  GridListSection as GridListSectionPrimitive,\n} from \"react-aria-components/GridList\"\nimport { Text, type TextProps } from \"react-aria-components/Text\"\nimport { cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport { Checkbox, CheckboxField } from \"./checkbox\"\n\nexport function GridList<T extends object>({ className, ...props }: GridListProps<T>) {\n  return (\n    <GridListPrimitive\n      data-slot=\"grid-list\"\n      className={cx(\n        \"relative divide-y overflow-hidden rounded-lg border bg-background *:drop-target:border-accent sm:text-sm/6 dark:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function GridListSection<T extends object>({\n  className,\n  ...props\n}: React.ComponentProps<typeof GridListSectionPrimitive<T>>) {\n  return (\n    <GridListSectionPrimitive\n      data-slot=\"grid-list-section\"\n      className={cn(\"divide-y\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function GridListHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof GridListHeaderPrimitive>) {\n  return (\n    <GridListHeaderPrimitive\n      data-slot=\"grid-list-header\"\n      className={cn(\"px-3 py-2.5 font-semibold text-sm/6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function GridListItem({ className, children, ...props }: GridListItemProps) {\n  const textValue = typeof children === \"string\" ? children : undefined\n  return (\n    <GridListItemPrimitive\n      textValue={textValue}\n      {...props}\n      className={cx(\n        \"group relative min-w-0 px-3 py-2.5 outline-hidden [--me-icon:--spacing(2)]\",\n        \"flex min-w-0 cursor-default items-center gap-2 sm:gap-2.5\",\n        \"dragging:cursor-grab dragging:opacity-70 dragging:**:[[slot=drag]]:text-foreground\",\n        \"hover:bg-accent/50 **:[svg:not([data-slot='check-indicator'])]:size-5 **:[svg:not([data-slot='check-indicator'])]:shrink-0 **:[svg:not([data-slot='check-indicator'])]:text-muted-foreground sm:**:[svg:not([data-slot='check-indicator'])]:size-4\",\n        \"selected:bg-accent/40 selected:text-foreground selected:hover:bg-accent/80 selected:**:[.text-muted-foreground]:text-accent-foreground/80\",\n        \"href\" in props && \"cursor-pointer\",\n        className\n      )}\n    >\n      {(values) => (\n        <>\n          {values.allowsDragging && (\n            <Button slot=\"drag\">\n              <svg\n                data-slot=\"drag-icon\"\n                className=\"size-5 text-muted-foreground sm:size-4\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M11 5.5C11 6.32843 10.3284 7 9.5 7C8.67157 7 8 6.32843 8 5.5C8 4.67157 8.67157 4 9.5 4C10.3284 4 11 4.67157 11 5.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M16 5.5C16 6.32843 15.3284 7 14.5 7C13.6716 7 13 6.32843 13 5.5C13 4.67157 13.6716 4 14.5 4C15.3284 4 16 4.67157 16 5.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M11 18.5C11 19.3284 10.3284 20 9.5 20C8.67157 20 8 19.3284 8 18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M16 18.5C16 19.3284 15.3284 20 14.5 20C13.6716 20 13 19.3284 13 18.5C13 17.6716 13.6716 17 14.5 17C15.3284 17 16 17.6716 16 18.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M11 12C11 12.8284 10.3284 13.5 9.5 13.5C8.67157 13.5 8 12.8284 8 12C8 11.1716 8.67157 10.5 9.5 10.5C10.3284 10.5 11 11.1716 11 12Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M16 12C16 12.8284 15.3284 13.5 14.5 13.5C13.6716 13.5 13 12.8284 13 12C13 11.1716 13.6716 10.5 14.5 10.5C15.3284 10.5 16 11.1716 16 12Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </Button>\n          )}\n\n          {values.selectionMode === \"multiple\" && values.selectionBehavior === \"toggle\" && (\n            <CheckboxField className=\"gap-x-0\" slot=\"selection\">\n              <Checkbox className=\"col-span-1\" />\n            </CheckboxField>\n          )}\n          {typeof children === \"function\" ? children(values) : children}\n        </>\n      )}\n    </GridListItemPrimitive>\n  )\n}\n\nexport function GridListEmptyState({ ref, className, ...props }: React.ComponentProps<\"div\">) {\n  return <div ref={ref} className={cn(\"p-6\", className)} {...props} />\n}\n\nexport function GridListSpacer({ className, ref, ...props }: React.ComponentProps<\"div\">) {\n  return <div ref={ref} aria-hidden className={cn(\"-ms-4 flex-1\", className)} {...props} />\n}\n\nexport function GridListStart({ className, ref, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"relative flex items-center gap-x-2.5 sm:gap-x-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport interface GridListTextProps extends TextProps {\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport function GridListLabel({ className, ref, ...props }: GridListTextProps) {\n  return <Text ref={ref} className={cn(\"font-medium\", className)} {...props} />\n}\n\nexport function GridListDescription({ className, ref, ...props }: GridListTextProps) {\n  return (\n    <Text\n      slot=\"description\"\n      ref={ref}\n      className={cn(\"font-normal text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport type { GridListItemProps, GridListProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}