{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "splitter",
  "type": "registry:ui",
  "title": "Splitter",
  "description": "دو پنل با مرز قابل‌کشیدن؛ با کیبورد: ←→ (یا ↑↓) پنج درصد، Home/End کمینه و بیشینه",
  "dependencies": [
    "@kashi-ui/persian@^1.8.0"
  ],
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json"
  ],
  "files": [
    {
      "path": "registry/kashi/Splitter.tsx",
      "type": "registry:ui",
      "target": "components/kashi/Splitter.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode } from \"react\";\nimport { toFaDigits } from \"@kashi-ui/persian\";\nimport { cx } from \"./cx\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport interface SplitterProps {\n  /** دقیقاً دو فرزند: پنل ابتدا و پنل انتها */\n  children: [ReactNode, ReactNode];\n  /** «horizontal» کنار هم، «vertical» زیر هم @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** اندازهٔ پنل اول به درصد */\n  size?: number;\n  defaultSize?: number;\n  onSizeChange?: (percent: number) => void;\n  /** @default 15 */\n  min?: number;\n  /** @default 85 */\n  max?: number;\n  /** نام دستگیره، مثل «اندازهٔ فهرست فایل‌ها» @default «تغییر اندازهٔ پنل‌ها» */\n  label?: string;\n  /** ارتفاع ظرف در حالت افقی */\n  height?: string;\n  className?: string;\n}\n\n/** دو پنل با مرز قابل‌کشیدن؛ با کیبورد: ←→ (یا ↑↓) پنج درصد، Home/End کمینه و بیشینه */\nexport function Splitter({ children, orientation = \"horizontal\", size, defaultSize = 40, onSizeChange, min = 15, max = 85, label, height, className }: SplitterProps) {\n  const { messages: M, n } = useKashi();\n  label ??= M.splitter.label;\n  const [inner, setInner] = useState(defaultSize);\n  const current = size ?? inner;\n  const [dragging, setDragging] = useState(false);\n  const box = useRef<HTMLDivElement>(null);\n  const vertical = orientation === \"vertical\";\n  const set = (p: number) => {\n    const v = Math.round(Math.min(max, Math.max(min, p)) * 10) / 10;\n    if (size === undefined) setInner(v);\n    onSizeChange?.(v);\n  };\n  const fromPointer = (e: PointerEvent) => {\n    const r = box.current!.getBoundingClientRect();\n    if (vertical) return set(((e.clientY - r.top) / r.height) * 100);\n    // در RTL پنل اول سمت راست است\n    const rtl = getComputedStyle(box.current!).direction === \"rtl\";\n    set(((rtl ? r.right - e.clientX : e.clientX - r.left) / r.width) * 100);\n  };\n  const onKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    const rtl = getComputedStyle(e.currentTarget).direction === \"rtl\";\n    const keys: Record<string, number> = vertical\n      ? { ArrowUp: -5, ArrowDown: 5 }\n      : { ArrowLeft: rtl ? 5 : -5, ArrowRight: rtl ? -5 : 5 };\n    if (e.key in keys) set(current + keys[e.key]);\n    else if (e.key === \"Home\") set(min);\n    else if (e.key === \"End\") set(max);\n    else return;\n    e.preventDefault();\n  };\n  return (\n    <div\n      ref={box}\n      className={cx(\"k-splitter\", vertical && \"k-splitter--vertical\", className)}\n      data-dragging={dragging ? \"\" : undefined}\n      style={{ blockSize: height } as CSSProperties}\n    >\n      <div className=\"k-splitter__pane\" style={vertical ? { blockSize: `${current}%` } : { inlineSize: `${current}%` }}>{children[0]}</div>\n      <div\n        className=\"k-splitter__handle\"\n        role=\"separator\"\n        tabIndex={0}\n        aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n        aria-valuenow={current}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuetext={M.common.percent(n(Math.round(current)))}\n        aria-label={label}\n        data-dragging={dragging ? \"\" : undefined}\n        onKeyDown={onKey}\n        onPointerDown={(e) => {\n          e.currentTarget.setPointerCapture(e.pointerId);\n          setDragging(true);\n        }}\n        onPointerMove={(e) => dragging && fromPointer(e)}\n        onPointerUp={() => setDragging(false)}\n        onPointerCancel={() => setDragging(false)}\n        onDoubleClick={() => set(defaultSize)}\n      />\n      <div className=\"k-splitter__pane\">{children[1]}</div>\n    </div>\n  );\n}\n"
    }
  ]
}