{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-section",
  "title": "Toggle Section",
  "description": "Feature section with an on/off switch that reveals its settings when on.",
  "registryDependencies": [
    "@ikas/collapse",
    "@ikas/switch",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/toggle-section.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Collapse } from \"@/components/ikas/collapse\"\n\ntype ToggleSectionProps = Omit<React.ComponentProps<\"section\">, \"title\" | \"onChange\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** Leading 16px icon in a muted tile. */\n  icon?: React.ReactNode\n  /** Badge or meta shown after the title, e.g. a status. */\n  meta?: React.ReactNode\n  checked: boolean\n  onCheckedChange: (checked: boolean) => void\n  disabled?: boolean\n  /** Settings revealed while the section is on. Leave empty for a plain on/off feature. */\n  children?: React.ReactNode\n}\n\n/**\n * An opt-in feature: a switch in the header, its settings revealed underneath\n * only while it is on. The most common block in ikas app settings\n * (widgets, events, automations, channels).\n */\nfunction ToggleSection({ title, description, icon, meta, checked, onCheckedChange, disabled, children, className, ...props }: ToggleSectionProps) {\n  const id = React.useId()\n\n  return (\n    <section\n      data-slot=\"toggle-section\"\n      data-state={checked ? \"on\" : \"off\"}\n      className={cn(\"flex flex-col rounded-xl bg-card shadow-card transition-shadow duration-150\", className)}\n      {...props}\n    >\n      <div className=\"flex items-start gap-3 p-4\">\n        {icon && (\n          <span\n            className={cn(\n              \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-icon transition-colors duration-150 [&_svg]:size-4\",\n              checked && \"bg-foreground text-background\"\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <label htmlFor={`${id}-switch`} className=\"text-sm font-medium\">\n              {title}\n            </label>\n            {meta}\n          </div>\n          {description && <p className=\"text-[13px] text-muted-foreground\">{description}</p>}\n        </div>\n        <Switch\n          id={`${id}-switch`}\n          className=\"mt-0.5\"\n          checked={checked}\n          onCheckedChange={onCheckedChange}\n          disabled={disabled}\n          aria-controls={children ? `${id}-body` : undefined}\n          aria-expanded={children ? checked : undefined}\n        />\n      </div>\n      {children && (\n        <Collapse open={checked} id={`${id}-body`}>\n          <div className=\"border-t px-4 py-4\">{children}</div>\n        </Collapse>\n      )}\n    </section>\n  )\n}\n\nexport { ToggleSection, type ToggleSectionProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/toggle-section.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/toggle-section",
  "categories": [
    "forms",
    "layout"
  ],
  "type": "registry:component"
}