دکمه‌ای که با یه فشار، فیوزی رو روشن می‌کنه و تا ته سوختن فرصتِ بازگرداندن می‌ده؛ وقتی فیوز تموم شد، کار ثبت می‌شه.

وابستگی‌ها

نوع تعامل

روی دکمه بزن؛ دورِ قرص یه حلقه‌ی روشن شروع می‌کنه به سوختن و برچسب به «بازگرداندن» عوض می‌شه. تا وقتی فیوز می‌سوزه، یه کلیک یا `Escape` کار رو برمی‌گردونه. اگه بذاری فیوز تموم شه، تیک می‌آد و کار ثبت می‌شه. با ماوس، اگه نشانگر رو روی دکمه نگه داری فیوز منجمد می‌مونه و با رفتنش ادامه پیدا می‌کنه — همون رفتارِ مرجع.

پراپ‌ها

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

نصب

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

نمونه

"use client";

import { useState } from "react";
import FuseButton from "@/components/farsify/fuse-button";

export function ArchiveButton() {
  const [archived, setArchived] = useState(false);

  return (
    <FuseButton
      label={archived ? "بازگردانی" : "بایگانی"}
      undoLabel="بازگرداندن"
      doneLabel="بایگانی شد"
      onCommit={() => setArchived(true)}
      onUndo={() => setArchived(false)}
    />
  );
}

// پنجره‌ی کوتاه‌تر — فیوز در دو ثانیه می‌سوزد
<FuseButton undoWindow={2000} label="حذف" doneLabel="حذف شد" fuseColor="#e5484d" />

// خطی روی لبه‌ی پایین، به‌جای حلقه‌ی دورِ قرص
<FuseButton fuse="bottom" fuseThickness={2} />

// ثبت فقط پس از پایانِ فیوز — بدونِ راهِ بازگرداندنِ میانِ راه
<FuseButton commitOn="fuseEnd" settle="stay" label="ارسال" doneLabel="ارسال شد" />

نکته‌ها

• `commitOn` معنیِ `label` رو تعیین می‌کنه: با `press` برچسب باید اعلامِ کنش باشه («حذف»)، با `fuseEnd` می‌تونه یه دعوت باشه («برای حذف بزن»).
• با `settle="stay"` صورتِ پایانی می‌مونه؛ برای اجرای دوباره باید کامپوننت رو با یه `key` تازه دوباره سوار کنی — خودِ مرجع هم همین قرارداد رو داره.
• `pauseOnHover` فقط روی نشانگرِ ماوس کار می‌کنه؛ روی لمس، برداشتنِ انگشت یعنی ادامه‌ی فیوز — چون لمس مفهومِ «هاور» رو نداره.
• برای کنشِ برگشت‌ناپذیر `commitOn="fuseEnd"` رو نذار و به‌جاش توی `onCommit` صبر کن: با `press`، کاربر تا آخرین لحظه راهِ بازگرداندن داره.
• `disabled` بازگرداندنِ وسطِ فیوز رو نمی‌بنده — این عمدیه: کسی که کار رو شروع کرده باید بتونه لغوش کنه.
• فیوز با WAAPI می‌سوزه، نه با CSS؛ پس `undoWindow` فیزیکِ حرکته، نه فقط مدتِ نمایش. کم‌کردنش پنجره‌ی بازگرداندن رو واقعاً کوتاه می‌کنه.
• این پورت راست‌به‌چپ نمی‌شه: چیدمان وسط‌چینه و فیوز مثلِ مرجع از سمتِ چپ تهی می‌شه. فقط متن‌ها فارسی شدن.

مجوز

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