{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "title": "Drawer",
  "description": "کشو",
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/icons.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json",
    "https://kashi.sepantapouya.com/r/modal.json"
  ],
  "files": [
    {
      "path": "registry/kashi/Drawer.tsx",
      "type": "registry:ui",
      "target": "components/kashi/Drawer.tsx",
      "content": "\"use client\";\n\nimport { useId, useRef, type ReactNode } from \"react\";\nimport { cx } from \"./cx\";\nimport { CloseIcon } from \"./icons\";\nimport { useKashi } from \"./KashiProvider\";\nimport { useModalDialog } from \"./modal\";\n\nexport interface DrawerProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description?: ReactNode;\n  /** سمت باز شدن؛ در RTL «start» سمت راست است @default \"end\" */\n  side?: \"start\" | \"end\";\n  /** پهنا: sm ۲۰، md ۲۶، lg ۳۶ رم؛ full تمام صفحه @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\" | \"full\";\n  /** دکمه‌های پایین کشو؛ همیشه دیده می‌شوند و محتوا زیرشان اسکرول می‌خورد */\n  footer?: ReactNode;\n  /** بستن با کلیک روی پس‌زمینه @default true */\n  dismissible?: boolean;\n  /** @default \"بستن\" */\n  closeLabel?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * کشوی کناری روی <dialog> بومی: فیلترها، جزئیات یک ردیف، تنظیمات یا منوی گوشی.\n * فوکوس داخل کشو می‌ماند، Esc می‌بندد و با انیمیشن خروج بسته می‌شود.\n */\nexport function Drawer({\n  open, onOpenChange, title, description, side = \"end\", size = \"md\", footer, dismissible = true, closeLabel, className, children,\n}: DrawerProps) {\n  const { messages: M } = useKashi();\n  closeLabel ??= M.common.close;\n  const ref = useRef<HTMLDialogElement>(null);\n  const id = useId();\n  const { restoreFocus } = useModalDialog(ref, open);\n\n  return (\n    <dialog\n      ref={ref}\n      data-placement={side}\n      className={cx(\"k-dialog k-drawer\", `k-dialog--${side}`, size !== \"md\" && `k-drawer--${size}`, className)}\n      aria-labelledby={`${id}-title`}\n      aria-describedby={description ? `${id}-desc` : undefined}\n      onClose={() => {\n        if (open) onOpenChange(false);\n        restoreFocus();\n      }}\n      onCancel={(e) => {\n        e.preventDefault();\n        onOpenChange(false);\n      }}\n      onClick={(e) => {\n        if (dismissible && e.target === ref.current) onOpenChange(false);\n      }}\n    >\n      <div className=\"k-dialog__header k-drawer__header\">\n        <div className=\"k-dialog__heading\">\n          <h2 className=\"k-dialog__title\" id={`${id}-title`}>{title}</h2>\n          {description && <p className=\"k-dialog__description\" id={`${id}-desc`}>{description}</p>}\n        </div>\n        <button type=\"button\" className=\"k-btn k-btn--tertiary k-btn--icon k-btn--sm k-dialog__close\" aria-label={closeLabel} onClick={() => onOpenChange(false)}>\n          <CloseIcon />\n        </button>\n      </div>\n      <div className=\"k-dialog__body k-drawer__body\">{children}</div>\n      {footer && <div className=\"k-dialog__footer k-drawer__footer\">{footer}</div>}\n    </dialog>\n  );\n}\n"
    }
  ]
}