درجه‌ی چرخشی با دنباله‌ی دنباله‌دار: قوس با کشیدن پر می‌شه، سرِ نشانگر ذراتِ محو پشتِ سر می‌ذاره و عدد با ارقامِ فارسیِ عرض‌ثابت وسط می‌نشینه.

وابستگی‌ها

نوع تعامل

با فشردن و کشیدنِ دایره مقدار عوض می‌شه؛ رهاکردن با سرعت، مومنتوم می‌ده و فنر مقدار رو به نزدیک‌ترین پله می‌نشونه و کمی جهش می‌کنه. توی RTL صفر سمتِ راسته و مقدار به سمتِ چپ زیاد می‌شه؛ توی LTR برعکس. کلیدهای جهت هم کار می‌کنن — توی RTL `ArrowLeft` زیاد می‌کنه.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import { useState } from "react";
import { CometDial } from "@/components/farsify/comet-dial";

export function VolumeDial() {
  const [level, setLevel] = useState(62);

  return (
    <CometDial
      value={level}
      onChange={setLevel}
      onChangeEnd={(v) => save(v)}
      label="میزانِ صدا"
      unit="%"
    />
  );
}

// درجه، با دنباله‌ی بلندتر و ضخامتِ بیشتر
<CometDial unit="°" cometReach={240} thickness={7} accent="var(--color-brand)" />

// بدونِ یکا — فقط عددِ وسط، با فنرِ نرم‌تر
<CometDial unit="" speed={10} tapBounce={0.05} />

// صفحه‌ی غیرفعال، برای نمایشِ مقدارِ ثبت‌شده
<CometDial value={40} disabled label="تنظیمِ فعلی" />

نکته‌ها

• صفر توی RTL سمتِ راسته و مقدار به سمتِ چپ زیاد می‌شه — خواسته‌ی فارسی. این آینه‌سازی توی JS انجام می‌شه، پس کافیه صفحه `dir="rtl"` باشه؛ هیچ propِ `rtl`‌ای لازم نیست.
• ارقام به‌صورتِ فارسی رندر می‌شن و هر رقم توی جعبه‌ی عرض‌ثابتِ ۰٫۶۹۴em می‌نشینه؛ `tabular-nums` با قلمِ Peyda بی‌اثره و همین جعبه‌ها تنها چیزی‌ان که عدد رو موقعِ چرخیدن از لرزیدن نگه می‌دارن.
• برای واحدی غیر از درصد، `unit` رو عوض کن — `°`، `dB` یا رشته‌ی خالی. رشته‌ی خالی یعنی فقط عدد، و عدد خودش وسط می‌مونه.
• `onChangeEnd` جای مناسب برای ثبت توی سروره: با هر فریمِ کشیدن صدا زده نمی‌شه و فقط وقتی فنر نشست.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.