{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "type": "registry:ui",
  "title": "Grid",
  "description": "Flex-wrap grid with columns, gap and span items.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json"
  ],
  "files": [
    {
      "path": "registry/shared/ui/grid.tsx",
      "type": "registry:ui",
      "target": "components/ui/grid.tsx",
      "content": "import {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { View, type DimensionValue, type ViewProps } from 'react-native';\nimport { cn, spacingValue, type SpacingToken } from '@/lib/utils';\n\nconst GridContext = createContext({ columns: 1, row: 0, col: 0 });\n\nexport interface GridProps extends ViewProps {\n  /** Track count for the implicit row — each cell is `span / columns` wide. */\n  columns?: number;\n  /** Gutters — token or pixel value. */\n  gap?: SpacingToken | number;\n  rowGap?: SpacingToken | number;\n  columnGap?: SpacingToken | number;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface GridItemProps extends ViewProps {\n  /** Tracks this cell occupies (1..columns). Defaults to 1. */\n  span?: number;\n  /** Tracks to skip before this cell. */\n  offset?: number;\n  className?: string;\n  children?: ReactNode;\n}\n\nfunction toPct(n: number): DimensionValue {\n  return `${n}%`;\n}\n\n/**\n * Responsive grid using symmetric gutters to prevent horizontal screen overflow.\n * Children without an explicit `GridItem` are wrapped as one-track cells.\n */\nexport function Grid({\n  columns = 1,\n  gap = 0,\n  rowGap,\n  columnGap,\n  className,\n  children,\n  style,\n  ...props\n}: GridProps) {\n  const col = spacingValue(columnGap ?? gap);\n  const row = spacingValue(rowGap ?? gap);\n\n  const cells = Children.map(children, (child) =>\n    isValidElement(child) && (child as ReactElement).type === GridItem ? (\n      child\n    ) : (\n      <GridItem>{child}</GridItem>\n    )\n  );\n\n  return (\n    <GridContext.Provider value={{ columns, row, col }}>\n      <View\n        className={cn('flex-row flex-wrap', className)}\n        style={[\n          {\n            marginHorizontal: -col / 2,\n            marginVertical: -row / 2,\n          },\n          style,\n        ]}\n        {...props}\n      >\n        {cells}\n      </View>\n    </GridContext.Provider>\n  );\n}\n\nexport function GridItem({\n  span = 1,\n  offset,\n  className,\n  style,\n  children,\n  ...props\n}: GridItemProps) {\n  const { columns, row, col } = useContext(GridContext);\n  const width = (Math.min(span, columns) / columns) * 100;\n  return (\n    <View\n      className={cn(className)}\n      style={[\n        {\n          width: toPct(width),\n          paddingHorizontal: col / 2,\n          paddingVertical: row / 2,\n          marginLeft: offset ? toPct((offset / columns) * 100) : undefined,\n        },\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </View>\n  );\n}\n"
    }
  ]
}