{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "description": "A flexible grid system component for layout.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/grid.jsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/optics/lib/utils\";\nimport { Plus } from \"lucide-react\";\n\n// Crear el contexto\nconst GridContext = React.createContext(null);\n\n// Hook para usar el contexto\nconst useGridContext = () => {\n\tconst context = React.useContext(GridContext);\n\tif (!context) {\n\t\tthrow new Error(\"GridRow y GridItem deben estar dentro de GridContainer\");\n\t}\n\treturn context;\n};\n\n// Provider que envuelve el container\nexport const GridContainer = ({\n\tcols = 12,\n\trows = 1,\n\tgap = 0,\n\tborder = true,\n\tclassName = \"\",\n\tchildren = null,\n\t...props\n}) => {\n\tconst contextValue = {\n\t\tcols,\n\t\trows,\n\t\tgap,\n\t\tborder,\n\t\t...props,\n\t};\n\n\treturn (\n\t\t<GridContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={cn(`w-full grid`, className)}\n\t\t\t\tstyle={{\n\t\t\t\t\tgridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n\t\t\t\t\tgridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,\n\t\t\t\t\tgap,\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</GridContext.Provider>\n\t);\n};\n\nexport const GridRow = ({\n\tclassName = \"\",\n\tchildren = null,\n\tspan: paramSpan = 0,\n\tgap: paramGap = 0,\n\toverrideStyles = false,\n\tborderTop = true,\n\tborderBottom = true,\n\t...props\n}) => {\n\tconst { cols, gap: containerGap, border } = useGridContext();\n\tconst gap = paramGap || containerGap;\n\tconst span = paramSpan || cols;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t`w-full grid border-t last:border-b -mb-[1px] s`,\n\t\t\t\tgap > 0 && \"!border-b -mb-0\",\n\t\t\t\t!border && \"!border-0\",\n\t\t\t\t!borderTop && \"!border-t-0\",\n\t\t\t\t!borderBottom && \"!border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\toverrideStyles\n\t\t\t\t\t? undefined\n\t\t\t\t\t: {\n\t\t\t\t\t\t\tgridColumn: `span ${cols} / span ${span}`,\n\t\t\t\t\t\t\tgridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n\t\t\t\t\t\t\tgap,\n\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport const GridItem = ({\n\tclassName = \"\",\n\tchildren = null,\n\tspan = 1,\n\tborderLeft = true,\n\tborderRight = true,\n\tborderTop = false,\n\tborderBottom = false,\n\tdecorationTopLeft = false,\n\tdecorationTopRight = false,\n\tdecorationBottomLeft = false,\n\tdecorationBottomRight = false,\n\t...props\n}) => {\n\tconst { cols, border } = useGridContext();\n\tconst hasDecorations =\n\t\tdecorationTopLeft ||\n\t\tdecorationTopRight ||\n\t\tdecorationBottomLeft ||\n\t\tdecorationBottomRight;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t`border-l last:border-r flex items-center justify-center relative`,\n\t\t\t\t// Aspect square solo en desktop para evitar elementos muy pequeños en mobile\n\t\t\t\tspan === 1 && \"md:aspect-square\",\n\t\t\t\t// En mobile, asegurar altura mínima razonable solo si es aspect-square\n\t\t\t\tspan === 1 && \"min-h-[60px] md:min-h-0\",\n\t\t\t\t!borderLeft && \"!border-l-0\",\n\t\t\t\t!borderRight && \"!border-r-0\",\n\t\t\t\tborderTop && \"!border-t\",\n\t\t\t\tborderBottom && \"!border-b\",\n\t\t\t\t!border && \"!border-0\",\n\t\t\t\t// Prevenir overflow de contenido solo cuando no hay decoraciones\n\t\t\t\t!hasDecorations && \"overflow-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\tgridColumn: `span ${span} / span ${cols}`,\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\n\t\t\t{decorationTopLeft && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute -left-[1px] -top-[1px] z-10\",\n\t\t\t\t\t\tspan != 1 && \"\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[21px] rounded-full absolute -top-2.5\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[21px] h-[1px] rounded-full absolute -left-2.5\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{decorationTopRight && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute -right-[0px] -top-[1px] z-10\",\n\t\t\t\t\t\tspan != 1 && \"-right-[0px]\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[21px] rounded-full absolute -top-2.5\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[21px] h-[1px] rounded-full absolute -left-2.5\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{decorationBottomLeft && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute -left-[1px] -bottom-[0px] z-10\",\n\t\t\t\t\t\tspan != 1 && \"-left-[1px] bottom-[1px]\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[21px] rounded-full absolute -top-2.5\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[21px] h-[1px] rounded-full absolute -left-2.5\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{decorationBottomRight && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute -right-[0px] -bottom-[0px] z-10\",\n\t\t\t\t\t\tspan != 1 && \"bottom-[1px]\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[21px] rounded-full absolute -top-2.5\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[21px] h-[1px] rounded-full absolute -left-2.5\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nGridContainer.displayName = \"GridContainer\";\nGridRow.displayName = \"GridRow\";\nGridItem.displayName = \"GridItem\";\n",
      "type": "registry:component",
      "target": "components/optics/grid.jsx"
    }
  ],
  "type": "registry:component"
}