{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-split",
  "title": "Horizontal split",
  "description": "A slide layout with two columns split horizontally",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/slide-cn/horizontal-split.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\n\n/**\n * HorizontalSplit\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 Horizontally, creating two halfs - left and right\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 * - In a mobile screen, the content is stacked vertically instead. Meaning, this turns into a vertical split on a mobile screen\n *\n * Usage:\n * ```tsx\n * <Deck>\n *\t<Slide>\n *\t\t<HorizontalSplit ratio=0.7>\n *\t\t\t<HorizontalSplit.Left>This content takes up 70% of the space</HorizontalSplit.Left>\n *\t\t\t<HorizontalSplit.Right>This content takes up only 30% of the space</HorizontalSplit.Right>\n *\t\t</HorizontalSplit>\n *\t</Slide>\n * </Deck>\n * ```\n */\n\ninterface HorizontalSplitProps extends React.ComponentProps<\"div\"> {\n\tratio?: number;\n}\n\nexport function HorizontalSplit({ children, ratio = 0.5, className, style, ...props }: HorizontalSplitProps) {\n\tconst clampedRatio = Math.max(0.2, Math.min(0.8, ratio));\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"grid h-full w-full grid-cols-1 md:grid-cols-[var(--split-ratio)_1fr] items-center\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\t\"--split-ratio\": `${clampedRatio * 100}%`,\n\t\t\t\t...style,\n\t\t\t} as React.CSSProperties}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\n\nHorizontalSplit.Left = function Left({ 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\t)\n}\n\nHorizontalSplit.Right = function Right({ 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\t)\n}\n",
      "type": "registry:component",
      "target": "components/ui/slide-cn/horizontal-split.tsx"
    }
  ],
  "type": "registry:component"
}