{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat",
  "type": "registry:ui",
  "title": "StatCard، StatGrid",
  "description": "کارت شاخص کلیدی (KPI) با روند؛ صفحه‌خوان روند را به شکل «۱۲٪ افزایش» می‌خواند",
  "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/Stat.tsx",
      "type": "registry:ui",
      "target": "components/kashi/Stat.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { toFaDigits } from \"@kashi-ui/persian\";\nimport { cx } from \"./cx\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport interface StatCardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  label: ReactNode;\n  value: ReactNode;\n  /** واحد کوچک کنار عدد، مثل «تومان» یا «نفر» */\n  unit?: ReactNode;\n  icon?: ReactNode;\n  /** درصد تغییر؛ مثبت افزایش، منفی کاهش */\n  change?: number;\n  /** برای شاخص‌هایی که کاهش در آن‌ها خوب است، مثل نرخ خطا */\n  invertTrend?: boolean;\n  /** متن کنار روند، مثل «نسبت به ماه قبل» */\n  caption?: ReactNode;\n  /** نمودار کوچک یا هر محتوای دیگر در پایین کارت */\n  children?: ReactNode;\n  labels?: { up?: string; down?: string; flat?: string };\n}\n\nconst Arrow = ({ dir }: { dir: \"up\" | \"down\" }) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.8} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    {dir === \"up\" ? <path d=\"M10 15V5m0 0-4 4m4-4 4 4\" /> : <path d=\"M10 5v10m0 0-4-4m4 4 4-4\" />}\n  </svg>\n);\n\n/** کارت شاخص کلیدی (KPI) با روند؛ صفحه‌خوان روند را به شکل «۱۲٪ افزایش» می‌خواند */\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(function StatCard(\n  { label, value, unit, icon, change, invertTrend, caption, children, labels = {}, className, ...rest },\n  ref,\n) {\n  const { messages: M, n } = useKashi();\n  const { up = M.stat.up, down = M.stat.down, flat = M.stat.flat } = labels;\n  const dir = change === undefined ? null : change > 0 ? \"up\" : change < 0 ? \"down\" : \"flat\";\n  // رنگ بر اساس خوب یا بد بودن، نه جهت\n  const good = dir === \"flat\" ? \"flat\" : (dir === \"up\") !== Boolean(invertTrend) ? \"up\" : \"down\";\n  const pct = change === undefined ? \"\" : M.common.percent(n(Math.abs(Math.round(change * 10) / 10)).replace(\".\", M.common.decimal));\n\n  return (\n    <div ref={ref} className={cx(\"k-stat\", className)} {...rest}>\n      <div className=\"k-stat__head\">\n        {icon && <span className=\"k-stat__icon\" aria-hidden=\"true\">{icon}</span>}\n        <p className=\"k-stat__label\">{label}</p>\n      </div>\n      <p className=\"k-stat__value\">\n        <span>{value}</span>\n        {unit && <span className=\"k-stat__unit\">{unit}</span>}\n      </p>\n      {(dir || caption) && (\n        <div className=\"k-stat__foot\">\n          {dir && (\n            <span className={`k-trend k-trend--${good}`}>\n              {dir !== \"flat\" && <Arrow dir={dir} />}\n              <span aria-hidden=\"true\">{dir === \"flat\" ? flat : pct}</span>\n              <span className=\"k-sr-only\">{dir === \"flat\" ? flat : `${pct} ${dir === \"up\" ? up : down}`}</span>\n            </span>\n          )}\n          {caption && <span>{caption}</span>}\n        </div>\n      )}\n      {children && <div className=\"k-stat__chart\">{children}</div>}\n    </div>\n  );\n});\n\nexport function StatGrid({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cx(\"k-stat-grid\", className)} {...rest} />;\n}\n"
    }
  ]
}