{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stack",
  "type": "registry:ui",
  "title": "Stack",
  "description": "@interlace/ui — stack primitive (shadcn-compatible).",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "theme"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/stack.tsx",
      "target": "components/ui/stack.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n/**\n * `<Stack>` / `<Cluster>` — gap rhythm from LAYOUT_PHILOSOPHY.md §3.\n *\n * `Stack` lays children out vertically; `Cluster` lays them out\n * horizontally with wrap. Both pull their gap token from the six-step\n * scale:\n *\n * Gap maps to the foundation `--spacing-*` tokens (DS-owned, not Tailwind's\n * default scale — R19), shared with `<Grid>` so the two stay rhythm-consistent:\n *\n *   | token  | px  | class      | use                          |\n *   | ------ | --- | ---------- | ---------------------------- |\n *   | `xs`   |  8  | `gap-xs`   | Inline chips                 |\n *   | `sm`   | 16  | `gap-sm`   | Cards, mobile padding        |\n *   | `md`   | 24  | `gap-md`   | Card-grid gaps, header→grid  |\n *   | `lg`   | 40  | `gap-lg`   | Mobile section gaps          |\n *   | `xl`   | 64  | `gap-xl`   | Desktop section gaps         |\n *   | `2xl`  | 96  | `gap-2xl`  | Hero / CTA breathing room    |\n */\n\nconst stackVariants = cva('flex', {\n  variants: {\n    direction: {\n      vertical: 'flex-col',\n      horizontal: 'flex-row flex-wrap',\n    },\n    gap: {\n      xs: 'gap-xs',\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      stretch: 'items-stretch',\n      baseline: 'items-baseline',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n    },\n  },\n  defaultVariants: {\n    direction: 'vertical',\n    gap: 'md',\n  },\n});\n\ntype StackProps = React.ComponentProps<'div'> &\n  Omit<VariantProps<typeof stackVariants>, 'direction'> & {\n    direction?: 'vertical' | 'horizontal';\n    render?: useRender.RenderProp;\n  };\n\nfunction Stack({\n  className,\n  direction = 'vertical',\n  gap,\n  align,\n  justify,\n  render,\n  ...props\n}: StackProps) {\n  const element = useRender({\n    render: render ?? <div />,\n    props: {\n      'data-slot': 'stack',\n      'data-direction': direction,\n      'data-gap': gap ?? undefined,\n      'data-align': align ?? undefined,\n      'data-justify': justify ?? undefined,\n      className: cn(\n        stackVariants({ direction, gap, align, justify }),\n        className,\n      ),\n      ...props,\n    },\n  });\n\n  return element;\n}\n\n/**\n * `<Cluster>` — horizontal Stack with wrap. Sugar for tag rows, chip rows,\n * button rows. Use Stack with `direction=\"horizontal\"` if you need more\n * control.\n */\nfunction Cluster({\n  className,\n  gap = 'sm',\n  align = 'center',\n  ...props\n}: Omit<StackProps, 'direction'>) {\n  return (\n    <Stack\n      direction=\"horizontal\"\n      gap={gap}\n      align={align}\n      className={className}\n      data-slot=\"cluster\"\n      {...props}\n    />\n  );\n}\n\nexport { Stack, Cluster, stackVariants };\nexport type { StackProps };\n"
    }
  ]
}