কনফিগারেশন

প্রতিটি Zephora কম্পোনেন্টের জন্য গ্লোবাল সেটিংস — আপনার অ্যাপকে একবার ZephoraConfigProvider দিয়ে মুড়ে দিন এবং locale, overlay z-index স্তর, portal কন্টেইনার ও headless ডিফল্ট কনফিগার করুন।

সেটআপ

import { ZephoraConfigProvider } from "@zephora/react";

export default function App() {
  return (
    <ZephoraConfigProvider
      locale="tr"
      zIndex={{ modal: 2000, toast: 2100 }}
      appendTo={typeof document !== "undefined" ? document.body : null}
      unstyled={false}
    >
      <YourApp />
    </ZephoraConfigProvider>
  );
}

ZephoraConfigProvider props

Prop	টাইপ	ডিফল্ট	বিবরণ
`locale`	`string`	`"en"`	Active locale for component UI strings. Only "en" is embedded; load others from @zephora/theme/locales/* (module or JSON) and register with addLocale().
`zIndex`	`{ dropdown?, overlay?, modal?, popover?, toast?, tooltip?: number }`	—	Overrides the layering of floating elements. Written as --z-index-* CSS variables on the root element.
`appendTo`	`HTMLElement \| null`	`document.body`	Container that Portal-based overlays (Dialog, Select menus, Tooltip…) render into.
`unstyled`	`boolean`	`false`	Makes every component headless by default for Tailwind-first apps. A per-component unstyled prop still wins.

কনফিগ পড়া

import { useZephoraConfig, useLocale } from "@zephora/react";

function MyField() {
  const config = useZephoraConfig(); // { locale, zIndex, appendTo, unstyled }
  const { t, messages, locale } = useLocale();
  return <button aria-label={t("close")} />;
}

z-index স্তর

কম্পোনেন্টগুলো তাদের স্ট্যাকিং ক্রম বিল্ট-ইন ফলব্যাকসহ CSS ভেরিয়েবল থেকে নেয়, তাই provider ও সাধারণ CSS উভয়েই সেগুলো পুনরায় সমন্বয় করতে পারে:

:root {
  --z-index-dropdown: 1000;
  --z-index-overlay: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-toast: 1070;
  --z-index-tooltip: 1080;
}

ডার্ক মোড

@zephora/theme স্বয়ংক্রিয় ডার্ক-মোড হেল্পার নিয়ে আসে। useColorScheme hook একটি স্কিম সমাধান করে (mode: "system" দিয়ে এটি OS পছন্দ সরাসরি অনুসরণ করে) এবং ডিফল্টভাবে সমাধানকৃত থিম গ্লোবালি প্রয়োগ করে:

import { useColorScheme } from "@zephora/theme";

function App() {
  // mode: "light" | "dark" | "system" (default "system")
  const { scheme, theme } = useColorScheme({ mode: "system" });
  return <span>Active scheme: {scheme}</span>;
}

useColorScheme(options) props

Prop	টাইপ	ডিফল্ট	বিবরণ
`mode`	`"light" \| "dark" \| "system"`	`"system"`	"system" follows the OS preference live; "light"/"dark" force a scheme.
`light / dark`	`Theme`	`lightTheme / darkTheme`	Theme objects used for each scheme.
`apply`	`boolean`	`true`	Write the resolved theme to document.documentElement via applyTheme.
`→ returns`	`{ scheme: "light" \| "dark"; theme: Theme }`	—	The resolved scheme and the theme object in effect.

নিম্ন-স্তরের প্রিমিটিভগুলোও এক্সপোর্ট করা হয়:

import { getSystemColorScheme, watchSystemColorScheme } from "@zephora/theme";

// Reads the OS color scheme (SSR-safe; defaults to "light").
const scheme = getSystemColorScheme(); // "light" | "dark"

// Subscribes to OS changes. Returns an unsubscribe function.
const stop = watchSystemColorScheme((next) => console.log(next));
stop();

FOUC-মুক্ত SSR

সার্ভার রেন্ডারিংয়ের জন্য colorSchemeCss(light?, dark?) একটি স্ট্যাটিক স্টাইলশিট তৈরি করে যা OS পছন্দ অনুযায়ী থিম বদলায় — ভুল থিমের ঝলক নেই, পেইন্টের আগে কোনো JavaScript দরকার নেই। <html>-এ data-zephora-scheme সেট করলে মিডিয়া কোয়েরি ওভাররাইড হয় (এটি একটি ইউজার টগলের সাথে সংযুক্ত করুন):

import { colorSchemeCss } from "@zephora/theme";

// Next.js app router — app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <style dangerouslySetInnerHTML={{ __html: colorSchemeCss() }} />
      </head>
      <body>{children}</body>
    </html>
  );
}

Slot classNames

মাল্টি-স্লট কম্পোনেন্ট (Dialog, Sheet, Tabs, Card, Popover, Tooltip…) প্রতি স্লটের জন্য একটি ক্লাস চুক্তি উন্মুক্ত করে: root classNames গ্রহণ করে যা Partial<Record<<Name>Slot, string>> হিসেবে টাইপড (DialogSlot-এর মতো স্লট-নাম union এক্সপোর্ট করা হয়)। স্লট ক্লাসগুলো মডিউল ক্লাসের পরে যুক্ত হয় এবং unstyled দ্বারা নিয়ন্ত্রিত নয় — সেগুলো স্টাইলড ও unstyled উভয় মোডেই কাজ করে; unstyled মোডে সেগুলোই একমাত্র ক্লাস। classNames.root বিদ্যমান className prop-এর পাশাপাশি মার্জ হয়, যা root-কে টার্গেট করতে থাকে এবং সবশেষে প্রয়োগ হয়। কম্পাউন্ড কম্পোনেন্টের জন্য classNames root-এ একবার সেট করা হয় এবং context-এর মাধ্যমে অংশগুলোতে বাহিত হয়।

সার্ভার কম্পোনেন্ট

প্রকাশিত @zephora/react বান্ডল একটি "use client" ডিরেক্টিভসহ আসে, তাই আপনি নিজে ডিরেক্টিভ যোগ না করেই কম্পোনেন্টগুলো সরাসরি React Server Component ট্রি-তে (Next.js app router) ইম্পোর্ট করতে পারেন — প্রতিটি Zephora কম্পোনেন্ট একটি ক্লায়েন্ট কম্পোনেন্ট।