{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layout",
  "title": "Layout",
  "description": "Column presets (main-aside, half, third) and numbered SettingsGroup sections for settings screens.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/layout.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst layoutVariants = cva(\"grid w-full items-start gap-5\", {\n  variants: {\n    /** Column split. Every option stacks to one column on mobile. */\n    columns: {\n      /** Single column stack. */\n      one: \"grid-cols-1\",\n      /** Main content plus a narrow aside (2/3 + 1/3). Detail pages. */\n      \"main-aside\": \"grid-cols-1 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]\",\n      /** Two equal columns. */\n      half: \"grid-cols-1 md:grid-cols-2\",\n      /** Three equal columns. Stat rows, card grids. */\n      third: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n    },\n  },\n  defaultVariants: {\n    columns: \"one\",\n  },\n})\n\n/** Responsive grid of LayoutColumns inside a Page. */\nfunction Layout({\n  className,\n  columns,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof layoutVariants>) {\n  return (\n    <div data-slot=\"layout\" className={cn(layoutVariants({ columns }), className)} {...props} />\n  )\n}\n\nfunction LayoutColumn({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"layout-column\" className={cn(\"flex min-w-0 flex-col gap-5\", className)} {...props} />\n  )\n}\n\ntype SettingsGroupProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Group name, rendered as an h2. */\n  label: React.ReactNode\n  /** One or two sentences on what the settings in this group change. */\n  hint?: React.ReactNode\n  /** Optional step index shown above the label in mono, e.g. \"01\". Use it on long settings pages. */\n  index?: string\n}\n\n/**\n * A group of related settings: label column on the left with a ruled top\n * edge, controls on the right. Stack several inside a narrow Page; number them\n * with `index` when the page has a section nav.\n */\nfunction SettingsGroup({ className, label, hint, index, children, ...props }: SettingsGroupProps) {\n  return (\n    <section\n      data-slot=\"settings-group\"\n      className={cn(\"grid grid-cols-1 gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-8\", className)}\n      {...props}\n    >\n      <div\n        data-slot=\"settings-group-label\"\n        className=\"relative flex flex-col gap-1 border-t border-border pt-3 before:absolute before:-top-px before:left-0 before:h-0.5 before:w-6 before:rounded-full before:bg-foreground\"\n      >\n        {index && (\n          <span data-slot=\"settings-group-index\" className=\"font-mono text-[11px] font-medium text-muted-foreground tabular-nums\">\n            {index}\n          </span>\n        )}\n        <h2 className=\"font-heading text-[15px] font-semibold text-foreground\">{label}</h2>\n        {hint && <p className=\"text-sm text-muted-foreground\">{hint}</p>}\n      </div>\n      <div className=\"flex min-w-0 flex-col gap-4\">{children}</div>\n    </section>\n  )\n}\n\nexport { Layout, LayoutColumn, SettingsGroup, layoutVariants, type SettingsGroupProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/layout.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/layout",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}