‏hiraki؛ کامپوننت Drawer ری‌اکت بدون وابستگی

hiraki (به ژاپنی 開き، یعنی «بازشدن») یه کامپوننت Drawer برای React ـه که فلسفه‌ش رو گذاشته روی «بدون وابستگی». به گفتهٔ سازنده، تنها چیزی که بهش نیاز داره خودِ React ـه؛ نه Radix، نه Framer Motion و نه هیچ رانتایم بیرونی دیگه‌ای. حجمش هم حدود ۱۰ کیلوبایت gzip شده‌ست.

از نظر امکانات، هر چهار جهت (بالا، پایین، چپ، راست) رو پشتیبانی می‌کنه و هر جهت، محور ژست، تشخیص اسکرول و ترنسفورم خودش رو درست هندل می‌کنه. ژست‌هاش «سرعت‌آگاه»ه: اگه سریع رها کنی کشو بیشتر سُر می‌خوره و اگه آروم ول کنی دقیق سرِ جاش می‌شینه.

یه ایدهٔ محوری hiraki جداکردن رفتار از ظاهره. هیچ فایل CSS و هیچ className آماده‌ای بهت تحمیل نمی‌کنه؛ رفتار رو نگه می‌داری و سطح ظاهری رو خودت با Tailwind، متغیرهای CSS یا پراپ style از نو طراحی می‌کنی. API ـش هم از نوع compound ـه: قطعه‌ها مثل Root، Content و Overlay رو کنار هم می‌چینی و فقط چیزی که لازم داری رو اضافه می‌کنی.

import { Drawer } from 'hiraki'

<Drawer.Root open={open} onOpenChange={setOpen}>
  <Drawer.Trigger asChild><button>Open</button></Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay />
    <Drawer.Content>
      <Drawer.Title>Hello</Drawer.Title>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

نقاط اسنپ رو هم با پیکسل، درصد یا مقدار content تعریف می‌کنی و می‌تونی چند موقعیت اسنپ هم‌زمان داشته باشی، به‌صورت کنترل‌شده یا کنترل‌نشده. انیمیشن‌ها هم محض CSS هستن با پریست‌های slide، spring، scale و morph، و به prefers-reduced-motion هم احترام می‌ذاره.

روی دسترس‌پذیری هم کار شده: نقش ARIA dialog، فوکوس‌ترپ، بستن با Escape، قفل اسکرول، یه فیکس برای Safari آی‌اواس و اعلان‌های اسکرین‌ریدر. پروژه هم با لایسنس MIT کاملاً اپن‌سورسه، بدون تله‌متری و بدون نسخهٔ پولی.

نکات کلیدی:

• کامپوننت Drawer برای React، بدون هیچ وابستگی جز خودِ React (~۱۰KB gzip)
• هر ۴ جهت، ژست‌های سرعت‌آگاه و نقاط اسنپ چندگانه
• جداسازی رفتار از ظاهر؛ استایل با Tailwind/متغیر CSS/پراپ style
• API از نوع compound (Root، Content، Overlay)
• دسترس‌پذیری کامل و انیمیشن محض CSS با احترام به prefers-reduced-motion