یه کلید که دستگیره‌اش با کشیدن کش می‌آد و وقتی رهاش کنی، فنر می‌ندازدش به یه سر.

وابستگی‌ها

نوع تعامل

می‌تونی مثل هر کلیدی روش کلیک کنی، یا دستگیره رو بگیری و بکشی. همون‌طور که می‌کشی، دستگیره به اندازه‌ی سرعتِ حرکتت کشیده می‌شه ولی پهن‌تر نمی‌شه، و وضعیت همون لحظه‌ی عبور از وسط عوض می‌شه. با رهاکردن، فنر می‌ندازدش به نزدیک‌ترین سر. با آمدنِ نشانگر روش کمی بزرگ می‌شه و Escape وسطِ کشیدن همه‌چیز رو به حالتِ قبل برمی‌گردونه.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import { useState } from "react";
import { SquishSwitch } from "@/components/farsify/squish-switch";

export function AutoSave() {
  const [on, setOn] = useState(false);

  return (
    <SquishSwitch
      checked={on}
      onChange={setOn}
      ariaLabel="ذخیره‌ی خودکار"
    />
  );
}

// بدون کنترل — روشن از اول
<SquishSwitch label="اعلان‌ها" defaultChecked />

// رنگ برند و کشش بیشتر
<SquishSwitch
  label="همگام‌سازی خودکار"
  trackOnColor="var(--color-brand)"
  thumbOnColor="#ffffff"
  stretch={60}
  speed={70}
/>

نکته‌ها

• برای کلیدهای پرتکرار `speed` رو حدود ۷۰ بذار تا حرکت آروم‌تر شه؛ سرعتِ بالا برای کلیدهاییه که کاربر باهاشون «بازی» می‌کنه.
• اگه `stretch` رو صفر کنی و `hoverScale` رو ۱، یه کلیدِ معمولیِ تمیز می‌مونه — بدونِ کشش و بدونِ واکنشِ نشانگر.
• رنگ‌ها رو با متغیرِ CSS هم می‌تونی بدی: `trackOnColor="var(--color-brand)"`.

مجوز

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