{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vertical-split",
  "title": "Vertical split",
  "description": "A slide layout with two rows split vertically",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/slide-cn/vertical-split.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\n/**\n * VerticalSplit\n * This is a \"Layout Component\"\n * It is used to dictate how content is layed out in a given slide\n *\n * Responsibilities:\n * - Split content Verically, creating two halfs - Top and Bottom\n * - Allows you to split by a ratio. The prop ratio needs to be between 0.2 and 0.8. The content is split in the ratio \"ratio : (1-ratio)\"\n *\n * Usage:\n * ```tsx\n * <Deck>\n *\t<Slide>\n *\t\t<VerticalSplit ratio=0.7>\n *\t\t\t<VerticalSplit.Top>This content takes up 70% of the space</VerticalSplit.Top>\n *\t\t\t<VerticalSplit.Bottom>This content takes up only 30% of the space</VerticalSplit.Bottom>\n *\t\t</VerticalSplit>\n *\t</Slide>\n * </Deck>\n * ```\n */\n\ninterface VerticalSplitProps extends React.ComponentProps<\"div\"> {\n\tratio?: number;\n}\n\nexport function VerticalSplit({ children, ratio = 0.5, className, style, ...props }: VerticalSplitProps) {\n\tconst clampedRatio = Math.max(0.2, Math.min(0.8, ratio));\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"grid h-full w-full\", className)}\n\t\t\tstyle={{\n\t\t\t\tgridTemplateRows: `${clampedRatio * 100}% ${(1 - clampedRatio) * 100}%`,\n\t\t\t\t...style,\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\n\nVerticalSplit.Top = function Top({ children, className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\n\t)\n}\n\nVerticalSplit.Bottom = function Bottom({ children, className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\n\t)\n}\n",
      "type": "registry:component",
      "target": "components/ui/slide-cn/vertical-split.tsx"
    }
  ],
  "type": "registry:component"
}