{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "type": "registry:ui",
  "title": "Bento Grid",
  "description": "Bento-style grid layout for feature galleries with mixed sizes.",
  "dependencies": [
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/bento-grid.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Animated bento grid layout component.\n * @author Saasflare™\n * A responsive grid layout with staggered entrance animations, inspired by\n * the Apple-style bento grid. Items can span multiple columns/rows.\n * @module packages/ui/components/ui/bento-grid\n * @package ui\n *\n * @component\n * @example\n * import { BentoGrid, BentoGridItem } from '@saasflare/ui';\n * <BentoGrid>\n *   <BentoGridItem colSpan={2}>Wide card</BentoGridItem>\n *   <BentoGridItem rowSpan={2}>Tall card</BentoGridItem>\n *   <BentoGridItem>Standard card</BentoGridItem>\n * </BentoGrid>\n *\n * @example\n * // Custom grid columns\n * <BentoGrid columns={4} gap={6}>\n *   <BentoGridItem colSpan={2} rowSpan={2}>Featured</BentoGridItem>\n *   <BentoGridItem>Small 1</BentoGridItem>\n *   <BentoGridItem>Small 2</BentoGridItem>\n * </BentoGrid>\n */\n\nimport { type ReactNode } from \"react\"\nimport { m } from \"motion/react\"\nimport { cn } from \"@saasflare/ui\"\nimport { springGentle, useSaasflareMotion } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the BentoGrid container. */\nexport interface BentoGridProps extends SaasflareComponentProps {\n  /** Grid items. */\n  children: ReactNode\n  /** Number of columns at md+ breakpoint. Default: `3` */\n  columns?: 2 | 3 | 4\n  /** Gap between items in Tailwind spacing units (4 = 1rem). Default: `4` */\n  gap?: number\n  /** Additional class names. */\n  className?: string\n}\n\n/** Column class map for the grid container. */\nconst COL_MAP: Record<number, string> = {\n  2: \"md:grid-cols-2\",\n  3: \"md:grid-cols-3\",\n  4: \"md:grid-cols-4\",\n}\n\n/**\n * Responsive bento-style grid container with staggered item entrance.\n *\n * - Items animate in with a staggered fade+slide\n * - Supports 2, 3, or 4 column layouts (1 column on mobile)\n * - Items can span multiple columns/rows via BentoGridItem\n *\n * @component\n * @package ui\n */\nexport function BentoGrid({\n  children,\n  columns = 3,\n  gap = 4,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n}: BentoGridProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1\",\n        COL_MAP[columns],\n        className,\n      )}\n      style={{ gap: `${gap * 0.25}rem` }}\n      data-slot=\"bento-grid\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      {children}\n    </div>\n  )\n}\n\n/** Props for a BentoGridItem. */\nexport interface BentoGridItemProps extends SaasflareComponentProps {\n  /** Item content. */\n  children: ReactNode\n  /** Number of columns to span (1–4). Default: `1` */\n  colSpan?: 1 | 2 | 3 | 4\n  /** Number of rows to span (1–3). Default: `1` */\n  rowSpan?: 1 | 2 | 3\n  /** Stagger delay index (multiply by 0.08 for delay). Default: `0` */\n  index?: number\n  /** Additional class names. */\n  className?: string\n}\n\n/** Tailwind column span classes. */\nconst COL_SPAN_MAP: Record<number, string> = {\n  1: \"\",\n  2: \"md:col-span-2\",\n  3: \"md:col-span-3\",\n  4: \"md:col-span-4\",\n}\n\n/** Tailwind row span classes. */\nconst ROW_SPAN_MAP: Record<number, string> = {\n  1: \"\",\n  2: \"md:row-span-2\",\n  3: \"md:row-span-3\",\n}\n\n/**\n * Individual item within a BentoGrid.\n *\n * - Supports column and row spanning\n * - Animates in with a staggered fade + vertical slide\n * - Pass `index` for stagger ordering\n *\n * @component\n * @package ui\n */\nexport function BentoGridItem({\n  children,\n  colSpan = 1,\n  rowSpan = 1,\n  index = 0,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n}: BentoGridItemProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springGentle)\n\n  return (\n    <m.div\n      initial={motion.disabled ? false : { opacity: 0, y: 16 }}\n      whileInView={motion.disabled ? undefined : { opacity: 1, y: 0 }}\n      viewport={{ once: true, margin: \"-60px\" }}\n      transition={motion.disabled ? motion.transition : { ...springGentle, delay: index * 0.08 }}\n      data-slot=\"bento-grid-item\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"rounded-xl border surface-card p-6 text-card-foreground\",\n        \"transition-all duration-200 hover:-translate-y-px hover:shadow-md\",\n        \"motion-reduce:hover:transform-none\",\n        COL_SPAN_MAP[colSpan],\n        ROW_SPAN_MAP[rowSpan],\n        className,\n      )}\n    >\n      {children}\n    </m.div>\n  )\n}\n",
      "target": "components/ui/bento-grid.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/bento-grid.json"
  }
}