Konfigurācija

Globāli iestatījumi katrai Zephora komponentei — vienreiz ietiniet savu lietotni ar ZephoraConfigProvider un konfigurējiet locale, pārklājuma z-index slāņus, portāla konteineru un headless noklusējumu.

Iestatīšana

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	Tips	Noklusējums	Apraksts
`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.

Konfigurācijas lasīšana

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 slāņi

Komponentes savu kārtošanas secību ņem no CSS mainīgajiem ar iebūvētām rezerves vērtībām, tāpēc tos var pārregulēt gan provider, gan vienkāršs 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;
}

Tumšais režīms

@zephora/theme tiek piegādāts ar automātiskiem tumšā režīma palīgiem. useColorScheme hook atrisina shēmu (ar mode: "system" tas dzīvi seko OS izvēlei) un pēc noklusējuma piemēro atrisināto motīvu globāli:

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	Tips	Noklusējums	Apraksts
`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.

Zemāka līmeņa primitīvi arī tiek eksportēti:

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();

SSR bez FOUC

Servera renderēšanai colorSchemeCss(light?, dark?) izveido statisku stila lapu, kas pārslēdz motīvus atbilstoši OS izvēlei — nav nepareizā motīva uzplaiksnījuma, nav nepieciešams JavaScript pirms zīmēšanas. data-zephora-scheme iestatīšana uz <html> pārraksta media vaicājumu (savienojiet to ar lietotāja pārslēdzēju):

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

Slotu classNames

Vairāku slotu komponentes (Dialog, Sheet, Tabs, Card, Popover, Tooltip…) atklāj katram slotam paredzētu klašu līgumu: sakne pieņem classNames, kas tipizēts kā Partial<Record<<Name>Slot, string>> (slotu nosaukumu union'i, piemēram, DialogSlot, tiek eksportēti). Slotu klases tiek pievienotas pēc moduļa klasēm un nav atkarīgas no unstyled — tās darbojas gan stilizētajā, gan nestilizētajā režīmā; nestilizētajā režīmā tās ir vienīgās klases. classNames.root apvienojas kopā ar esošo className prop, kas turpina mērķēt uz sakni un tiek piemērots pēdējais. Saliktām komponentēm classNames tiek iestatīts vienreiz uz saknes un caur context nogādāts daļām.

Servera komponentes

Publicētais @zephora/react komplekts tiek piegādāts ar "use client" direktīvu, tāpēc jūs varat importēt komponentes tieši React Server Component kokos (Next.js app router), pašiem nepievienojot direktīvu — katra Zephora komponente ir klienta komponente.