{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter",
  "type": "registry:ui",
  "title": "Meter",
  "description": "سنجهٔ یک مقدار در برابر سقف، مثل فضای ذخیره یا سهمیهٔ پیامک؛ وضعیت با متن و آیکون، نه فقط رنگ",
  "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/Meter.tsx",
      "type": "registry:ui",
      "target": "components/kashi/Meter.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { formatNumber, toFaDigits } from \"@kashi-ui/persian\";\nimport { cx } from \"./cx\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport interface MeterProps {\n  label: ReactNode;\n  value: number;\n  /** @default 100 */\n  max?: number;\n  /** از این مقدار به بعد هشدار (زرد) @default ۸۰٪ max */\n  warning?: number;\n  /** از این مقدار به بعد بحرانی (قرمز) @default ۹۵٪ max */\n  critical?: number;\n  /** قالب مقدار، مثل «۴٫۲ گیگابایت» */\n  format?: (n: number) => string;\n  className?: string;\n  labels?: { ok?: string; warning?: string; critical?: string; of?: string };\n}\n\nconst Icon = ({ d }: { d: string }) => <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.8} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d={d} /></svg>;\n\n/** سنجهٔ یک مقدار در برابر سقف، مثل فضای ذخیره یا سهمیهٔ پیامک؛ وضعیت با متن و آیکون، نه فقط رنگ */\nexport function Meter({ label, value, max = 100, warning = max * 0.8, critical = max * 0.95, format, className, labels = {} }: MeterProps) {\n  const { messages: M, n, digits: D } = useKashi();\n  format ??= (x: number) => formatNumber(x, { digits: D });\n  const { ok = M.meter.ok, warning: warnText = M.meter.warning, critical: critText = M.meter.critical, of } = labels;\n  const v = Math.min(max, Math.max(0, value));\n  const status = v >= critical ? \"critical\" : v >= warning ? \"warning\" : \"ok\";\n  const pct = Math.round((v / max) * 100);\n  const text = { ok, warning: warnText, critical: critText }[status];\n  return (\n    <div className={cx(\"k-meter\", className)} data-status={status}>\n      <div className=\"k-meter__head\">\n        <span className=\"k-meter__label\">{label}</span>\n        <span className=\"k-meter__value\">{format(v)} <span>{of} {format(max)}</span></span>\n      </div>\n      <div\n        className=\"k-meter__track\"\n        role=\"meter\"\n        aria-valuenow={v}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuetext={`${of ? `${format(v)} ${of} ${format(max)}` : M.common.of(format(v), format(max))}${M.common.list}${M.common.percent(n(pct))}${M.common.list}${text}`}\n        aria-label={typeof label === \"string\" ? label : undefined}\n      >\n        <span className=\"k-meter__fill\" style={{ inlineSize: `${pct}%` }} />\n        <span className=\"k-meter__mark\" style={{ insetInlineStart: `${(warning / max) * 100}%` }} aria-hidden=\"true\" />\n      </div>\n      <p className=\"k-meter__status\" aria-hidden=\"true\">\n        <Icon d={status === \"ok\" ? \"m5 10.5 3.2 3L15 7\" : \"M10 3 2.5 16.5h15ZM10 8v4M10 14.5h.01\"} />\n        {text} · {M.common.percent(n(pct))}\n      </p>\n    </div>\n  );\n}\n"
    }
  ]
}