دکمه‌ای که فقط با نگه‌داشتن پر می‌شه؛ رهاکردنِ زودهنگام خالیش می‌کنه و لبه‌ی پر شدن با موجِ آب جلو می‌ره.

وابستگی‌ها

نوع تعامل

دکمه رو نگه دار تا از یه لبه پر شه؛ رهاکردن قبل از پایان، با همون نرمی خالیش می‌کنه و اگه کمتر از ۲۵۰ میلی‌ثانیه بوده، یه ضربه حساب می‌شه. Space و Enter هم نگه‌داشتن رو شروع می‌کنن و Escape لغو می‌کنه. بیرون‌رفتنِ نشانگر یا مخفی‌شدنِ پنجره هم لغو می‌کنه تا نیمه‌کاره تأیید نشه. بعد از کامل‌شدن، لیبل با محو/blur به «حذف شد» می‌ره و اگه `resetAfter` مثبت باشه دکمه به idle برمی‌گرده.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import HoldButton from "@/components/farsify/hold-button";

export function DeleteAccount() {
  return (
    <HoldButton
      holdTime={2000}
      onHold={() => deleteAccount()}
      onTap={() => toast("برای حذف، نگه دارید")}
    >
      برای حذف نگه دارید
    </HoldButton>
  );
}

// کنشِ دیگر و متنِ تمام‌شده‌ی خودش — رهاشده پس از تأیید، روی «ارسال شد» می‌ماند
<HoldButton doneLabel="ارسال شد" resetAfter={0}>
  برای ارسال نگه دارید
</HoldButton>

// دکمه‌ی بلند و باریک: پر شدن از پایین، موجِ افقی، بی‌هاله
<HoldButton
  size="lg"
  radius={999}
  fillDirection="up"
  waveAmplitude={10}
  glow={false}
  pressScale={0.94}
/>

نکته‌ها

• `onHold` رو برای کارِ نهایی بذار و `onTap` رو برای پیامِ راهنما («برای حذف، نگه دار») — مرجع همین دو رو از هم جدا می‌کنه و ضربه هرگز تأیید حساب نمی‌شه.
• `holdTime` رو کوتاه‌تر از ۶۰۰ms نذار؛ زیرِ اون ضربه و نگه‌داشتن از هم تشخیص داده نمی‌شن و کاربر بی‌این‌که بخواد حذف می‌کنه. خودِ مرجع هم پیش‌فرض رو ۲۰۰۰ms گرفته.
• اگه می‌خوای دکمه بعد از تأیید روی «حذف شد» بمونه، `resetAfter={0}` بده — وگرنه بعد از ۱۲۰۰ms خودش به idle برمی‌گرده. برای ردیف‌های لیست، صفر معمولاً درست‌تره.
• توی فارسی جهتِ پر شدن **قلاب نمی‌شه**: `fillDirection="right"` از لبه‌ی شروعِ جمله پر می‌کنه و همون چیزیه که چشمِ فارسی‌خوان انتظار داره؛ «up» برای دکمه‌های بلند و باریکه.
• متنِ صفحه‌خوان خودکار از `holdTime` ساخته می‌شه («برای تأیید، ۲ ثانیه نگه دار») و با ارقامِ فارسی اعلام می‌شه؛ برای کنش‌های غیر از حذف، `children` و `doneLabel` رو عوض کن — لازم نیست متنِ کمکی رو دستی بدی.
• با `prefers-reduced-motion` موج و پالس خاموش می‌شن و پر شدن فقط با تغییرِ شفافیت نشون داده می‌شه؛ منطقِ نگه‌داشتن و زمان‌بندی دست‌نخورده می‌مونه.

مجوز

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