{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "side-nav",
  "type": "registry:ui",
  "title": "SideNav",
  "description": "ناوبری کناری پنل مدیریت با گروه، زیرمنو، نشان و حالت جمع‌شده",
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json"
  ],
  "files": [
    {
      "path": "registry/kashi/SideNav.tsx",
      "type": "registry:ui",
      "target": "components/kashi/SideNav.tsx",
      "content": "\"use client\";\n\nimport { useId, useState, type ReactNode } from \"react\";\nimport { cx } from \"./cx\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport interface SideNavItem {\n  label: string;\n  href?: string;\n  icon?: ReactNode;\n  /** نشان کنار مورد، مثل تعداد */\n  badge?: ReactNode;\n  current?: boolean;\n  onClick?: () => void;\n  /** زیرمنو؛ مورد والد به دکمهٔ باز و بسته تبدیل می‌شود */\n  items?: SideNavItem[];\n}\n\nexport interface SideNavSection {\n  label?: string;\n  items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n  sections: SideNavSection[];\n  header?: ReactNode;\n  footer?: ReactNode;\n  /** فقط آیکون‌ها؛ نام هر مورد با aria-label و title حفظ می‌شود */\n  collapsed?: boolean;\n  /** @default \"اصلی\" */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\nconst Chevron = () => (\n  <svg className=\"k-sidenav__chevron\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.7} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 8 4 4 4-4\" /></svg>\n);\n\nconst hasCurrent = (it: SideNavItem): boolean => Boolean(it.current || it.items?.some(hasCurrent));\n\nfunction Item({ item, collapsed }: { item: SideNavItem; collapsed?: boolean }) {\n  const id = useId();\n  // زیرمنویی که صفحهٔ فعلی در آن است از اول باز است\n  const [open, setOpen] = useState(() => Boolean(item.items?.some(hasCurrent)));\n  const a11y = collapsed ? { \"aria-label\": item.label, title: item.label } : {};\n  const inner = (\n    <>\n      {item.icon}\n      <span className=\"k-sidenav__text\">{item.label}</span>\n      {item.badge}\n    </>\n  );\n\n  if (item.items?.length) {\n    return (\n      <li>\n        <button type=\"button\" className=\"k-sidenav__item\" aria-expanded={open} aria-controls={`${id}-sub`} onClick={() => setOpen((o) => !o)} {...a11y}>\n          {inner}\n          <Chevron />\n        </button>\n        <ul className=\"k-sidenav__sub\" id={`${id}-sub`} role=\"list\" hidden={!open}>\n          {item.items.map((s) => <Item key={s.label} item={s} collapsed={collapsed} />)}\n        </ul>\n      </li>\n    );\n  }\n\n  const props = { className: \"k-sidenav__item\", \"aria-current\": item.current ? (\"page\" as const) : undefined, onClick: item.onClick, ...a11y };\n  return <li>{item.href ? <a href={item.href} {...props}>{inner}</a> : <button type=\"button\" {...props}>{inner}</button>}</li>;\n}\n\n/** ناوبری کناری پنل مدیریت با گروه، زیرمنو، نشان و حالت جمع‌شده */\nexport function SideNav({ sections, header, footer, collapsed, \"aria-label\": ariaLabel, className }: SideNavProps) {\n  const { messages: M } = useKashi();\n  ariaLabel ??= M.sideNav.label;\n  const id = useId();\n  return (\n    <nav className={cx(\"k-sidenav\", collapsed && \"k-sidenav--collapsed\", className)} aria-label={ariaLabel}>\n      {header && <div className=\"k-sidenav__header\">{header}</div>}\n      {sections.map((sec, i) => (\n        <div key={sec.label ?? i}>\n          {sec.label && <p className=\"k-sidenav__label\" id={`${id}-s${i}`}>{sec.label}</p>}\n          <ul className=\"k-sidenav__group\" role=\"list\" aria-labelledby={sec.label ? `${id}-s${i}` : undefined}>\n            {sec.items.map((it) => <Item key={it.label} item={it} collapsed={collapsed} />)}\n          </ul>\n        </div>\n      ))}\n      {footer && <div className=\"k-sidenav__footer\">{footer}</div>}\n    </nav>\n  );\n}\n"
    }
  ]
}