{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page",
  "title": "Page",
  "description": "Screen wrapper with width presets and a PageHeader with back link, badges and actions.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@ikas/button",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/page.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ArrowLeftIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nconst pageVariants = cva(\"mx-auto flex w-full flex-col gap-6 px-4 py-6 sm:px-6\", {\n  variants: {\n    /** Max content width. narrow for settings, wide for tables. */\n    width: {\n      /** Forms and settings. Keeps line length readable. */\n      narrow: \"max-w-3xl\",\n      /** Most app screens. */\n      default: \"max-w-5xl\",\n      /** Tables with many columns, dashboards. */\n      wide: \"max-w-7xl\",\n      full: \"max-w-none\",\n    },\n  },\n  defaultVariants: {\n    width: \"default\",\n  },\n})\n\n/** Outer frame of every app screen. Holds a PageHeader and content. */\nfunction Page({\n  className,\n  width,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof pageVariants>) {\n  return (\n    <div\n      data-slot=\"page\"\n      data-width={width ?? \"default\"}\n      className={cn(pageVariants({ width }), className)}\n      {...props}\n    />\n  )\n}\n\ntype PageHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** Badges or meta shown next to the title, e.g. order status. */\n  badges?: React.ReactNode\n  /** Renders a back button. Pass an element (e.g. next/link) via `back.asChild`. */\n  back?:\n    | { label?: string; onClick: () => void }\n    | { label?: string; href: string; asChild?: false }\n    | { label?: string; children: React.ReactElement; asChild: true }\n  /** Right aligned actions. Put the primary button last. */\n  actions?: React.ReactNode\n}\n\n/** Title row of a Page with back link, badges and actions. */\nfunction PageHeader({\n  className,\n  title,\n  description,\n  badges,\n  back,\n  actions,\n  ...props\n}: PageHeaderProps) {\n  return (\n    <header\n      data-slot=\"page-header\"\n      className={cn(\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-start gap-3\">\n        {back && <PageBackButton {...back} />}\n        <div className=\"flex min-w-0 flex-col gap-1\">\n          <div className=\"flex min-h-8 flex-wrap items-center gap-x-2.5 gap-y-1\">\n            <h1 className=\"truncate font-heading text-xl font-semibold tracking-[-0.01em] text-foreground\">\n              {title}\n            </h1>\n            {badges}\n          </div>\n          {description && (\n            <p className=\"max-w-prose text-sm text-muted-foreground\">{description}</p>\n          )}\n        </div>\n      </div>\n      {actions && (\n        <div data-slot=\"page-header-actions\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n          {actions}\n        </div>\n      )}\n    </header>\n  )\n}\n\nfunction PageBackButton(props: NonNullable<PageHeaderProps[\"back\"]>) {\n  const label = props.label ?? \"Geri\"\n  const icon = <ArrowLeftIcon />\n\n  if (\"asChild\" in props && props.asChild) {\n    return (\n      <Button variant=\"outline\" size=\"icon-sm\" aria-label={label} asChild>\n        {React.cloneElement(props.children, undefined, icon)}\n      </Button>\n    )\n  }\n  if (\"href\" in props) {\n    return (\n      <Button variant=\"outline\" size=\"icon-sm\" aria-label={label} asChild>\n        <a href={props.href}>{icon}</a>\n      </Button>\n    )\n  }\n  return (\n    <Button variant=\"outline\" size=\"icon-sm\" aria-label={label} onClick={props.onClick}>\n      {icon}\n    </Button>\n  )\n}\n\nexport { Page, PageHeader, pageVariants, type PageHeaderProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/page.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/page",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}