{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "setting-row",
  "title": "Setting Row",
  "description": "One setting row: title, description and its control aligned right.",
  "registryDependencies": [
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/setting-row.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SettingRowProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** id of the control so the title acts as its label. */\n  htmlFor?: string\n  /** The control: Switch, Select, Button... */\n  control: React.ReactNode\n}\n\n/**\n * One setting with its control aligned right.\n * Stack inside a Card with `divide-y` for a settings list.\n */\nfunction SettingRow({ className, title, description, htmlFor, control, ...props }: SettingRowProps) {\n  const Title = htmlFor ? \"label\" : \"p\"\n\n  return (\n    <div\n      data-slot=\"setting-row\"\n      className={cn(\"flex items-start justify-between gap-6 py-3.5 first:pt-0 last:pb-0\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-0.5\">\n        <Title htmlFor={htmlFor} className=\"text-sm font-medium text-foreground\">\n          {title}\n        </Title>\n        {description && <p className=\"text-[13px] text-muted-foreground\">{description}</p>}\n      </div>\n      <div className=\"flex shrink-0 items-center pt-0.5\">{control}</div>\n    </div>\n  )\n}\n\nexport { SettingRow, type SettingRowProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/setting-row.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/setting-row",
  "categories": [
    "forms",
    "layout"
  ],
  "type": "registry:component"
}