कॉन्फ़िगरेशन

हर 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.

निचले स्तर के primitive भी एक्सपोर्ट किए जाते हैं:

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…) प्रति-स्लॉट क्लास अनुबंध प्रदान करते हैं: रूट Partial<Record<<Name>Slot, string>> के रूप में टाइप किए गए classNames को स्वीकार करता है (DialogSlot जैसे स्लॉट-नाम union एक्सपोर्ट किए जाते हैं)। स्लॉट क्लासेज़ मॉड्यूल क्लासेज़ के बाद जोड़ी जाती हैं और unstyled पर निर्भर नहीं हैं — वे स्टाइल किए गए और बिना-स्टाइल दोनों मोड में काम करती हैं; बिना-स्टाइल मोड में वही एकमात्र क्लासेज़ होती हैं। classNames.root मौजूदा className prop के साथ मर्ज होती है, जो रूट को लक्षित करती रहती है और सबसे अंत में लागू होती है। कंपाउंड कंपोनेंट के लिए, classNames रूट पर एक बार सेट होती है और context के ज़रिए हिस्सों तक पहुँचाई जाती है।

सर्वर कंपोनेंट

प्रकाशित @zephora/react बंडल एक "use client" निर्देश के साथ आता है, इसलिए आप कंपोनेंट को सीधे React Server Component ट्री (Next.js app router) के अंदर बिना ख़ुद निर्देश जोड़े इम्पोर्ट कर सकते हैं — हर Zephora कंपोनेंट एक क्लाइंट कंपोनेंट है।