உள்ளமைவு

ஒவ்வொரு Zephora காம்பொனென்டுக்குமான global அமைப்புகள் — உங்கள் ஆப்-ஐ ஒரு முறை 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.

config-ஐப் படித்தல்

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 அடுக்குகள்

காம்பொனென்ட்கள் தங்கள் அடுக்கு வரிசையை உள்ளமைந்த fallback-களுடன் கூடிய 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 தானியங்கி இருண்ட-பயன்முறை helper-களுடன் வழங்கப்படுகிறது. useColorScheme hook ஒரு scheme-ஐ தீர்க்கிறது (mode: "system" உடன் அது OS விருப்பத்தை நேரலையில் பின்பற்றுகிறது) மற்றும் இயல்பாக தீர்க்கப்பட்ட தீமை global-ஆக பயன்படுத்துகிறது:

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-களும் export செய்யப்படுகின்றன:

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 விருப்பத்துடன் தீம்களை மாற்றும் நிலையான stylesheet-ஐ உருவாக்குகிறது — தவறான தீம் மின்னல் இல்லை, paint-க்கு முன் JavaScript தேவையில்லை. <html>-இல் data-zephora-scheme-ஐ அமைப்பது media query-ஐ override செய்கிறது (அதை ஒரு user toggle-உடன் இணைக்கவும்):

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

பல-slot காம்பொனென்ட்கள் (Dialog, Sheet, Tabs, Card, Popover, Tooltip…) slot ஒன்றுக்கான ஒரு class ஒப்பந்தத்தை வெளிப்படுத்துகின்றன: root ஆனது Partial<Record<<Name>Slot, string>> எனத் type செய்யப்பட்ட classNames-ஐ ஏற்கிறது (DialogSlot போன்ற slot-பெயர் union-கள் export செய்யப்படுகின்றன). Slot class-கள் module class-களுக்குப் பிறகு சேர்க்கப்படுகின்றன, மேலும் unstyled-ஆல் கட்டுப்படுத்தப்படுவதில்லை — அவை styled மற்றும் unstyled இரு பயன்முறைகளிலும் வேலை செய்கின்றன; unstyled பயன்முறையில் அவை மட்டுமே class-கள். classNames.root ஆனது தற்போதுள்ள className prop-உடன் இணைகிறது, இது தொடர்ந்து root-ஐ இலக்காகக் கொண்டு கடைசியாகப் பயன்படுத்தப்படுகிறது. கூட்டு காம்பொனென்ட்களுக்கு, classNames ஒரு முறை root-இல் அமைக்கப்பட்டு context வழியாகப் பகுதிகளுக்குக் கொண்டு செல்லப்படுகிறது.

சர்வர் காம்பொனென்ட்கள்

வெளியிடப்பட்ட @zephora/react bundle ஒரு "use client" directive-உடன் வழங்கப்படுகிறது, எனவே directive-ஐ நீங்களே சேர்க்காமல் காம்பொனென்ட்களை React Server Component மரங்களுக்குள் (Next.js app router) நேரடியாக இறக்குமதி செய்யலாம் — ஒவ்வொரு Zephora காம்பொனென்டும் ஒரு client காம்பொனென்ட்.