Seadistus

Globaalsed seaded igale Zephora komponendile — mähi oma rakendus üks kord ZephoraConfigProvider-iga ja seadista locale, overlay z-index kihid, portaalikonteiner ja headless vaikeväärtus.

Seadistus

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	Tüüp	Vaikimisi	Kirjeldus
`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.

Konfiguratsiooni lugemine

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 kihid

Komponendid võtavad oma virnastusjärjekorra sisseehitatud tagavaraväärtustega CSS muutujatest, nii et nii provider kui ka tavaline CSS saavad neid ümber häälestada:

: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;
}

Tume režiim

@zephora/theme tarnib automaatsed tumeda režiimi abifunktsioonid. useColorScheme hook lahendab skeemi (mode: "system" korral järgib see operatsioonisüsteemi eelistust reaalajas) ja rakendab vaikimisi lahendatud teema globaalselt:

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	Tüüp	Vaikimisi	Kirjeldus
`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.

Ka madalama taseme primitiivid on eksporditud:

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-vaba SSR

Serveripoolseks renderdamiseks ehitab colorSchemeCss(light?, dark?) staatilise stiililehe, mis vahetab teemasid operatsioonisüsteemi eelistusega — vale teema ei vilgu, enne joonistamist pole JavaScripti vaja. data-zephora-scheme seadmine <html>-il ülekirjutab meediapäringu (ühenda see kasutaja lülitiga):

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

Mitme slotiga komponendid (Dialog, Sheet, Tabs, Card, Popover, Tooltip…) pakuvad slotipõhist klassilepingut: juur aktsepteerib classNames, mis on tüübitud kui Partial<Record<<Name>Slot, string>> (slotinime union'id nagu DialogSlot on eksporditud). Slotiklassid lisatakse pärast mooduliklasse ja neid ei piira unstyled — need töötavad nii stiliseeritud kui ka stiliseerimata režiimis; stiliseerimata režiimis on need ainsad klassid. classNames.root liidetakse olemasoleva className prop'i kõrvale, mis jätkab juure sihtimist ja rakendatakse viimasena. Liitkomponentide puhul seatakse classNames juurel üks kord ja kantakse osadele konteksti kaudu.

Serverikomponendid

Avaldatud @zephora/react pakett tarnitakse "use client" direktiiviga, nii et saad importida komponente otse React Server Component puudesse (Next.js app router) ilma direktiivi ise lisamata — iga Zephora komponent on kliendikomponent.