Usanidi

Mipangilio ya kimataifa kwa kila kijenzi cha Zephora — funga programu yako mara moja kwa ZephoraConfigProvider na usanidi locale, tabaka za z-index za overlay, kontena ya portal na chaguomsingi la headless.

Usanidi

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	Aina	Chaguomsingi	Maelezo
`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.

Kusoma usanidi

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

Tabaka za z-index

Vijenzi huchukua mpangilio wao wa mrundikano kutoka vigezo vya CSS vyenye chaguo-mbadala vilivyojengwa ndani, hivyo provider na CSS sahili vinaweza kuvirekebisha upya:

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

Mandhari ya giza

@zephora/theme hutolewa na wasaidizi wa mandhari-ya-giza otomatiki. Hook ya useColorScheme husuluhisha skimu (kwa mode: "system" hufuata upendeleo wa mfumo wa uendeshaji papo hapo) na kwa chaguomsingi hutumia mandhari iliyosuluhishwa kimataifa:

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	Aina	Chaguomsingi	Maelezo
`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.

Primitivi za kiwango cha chini pia hutolewa nje:

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 isiyo na FOUC

Kwa render ya seva, colorSchemeCss(light?, dark?) hujenga faili tuli ya mitindo inayobadilisha mandhari kwa upendeleo wa mfumo wa uendeshaji — hakuna mwako wa mandhari isiyo sahihi, hakuna JavaScript inayohitajika kabla ya paint. Kuweka data-zephora-scheme kwenye <html> hubadilisha media query (iunganishe na kigeuzi cha mtumiaji):

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

Vijenzi vyenye slot nyingi (Dialog, Sheet, Tabs, Card, Popover, Tooltip…) hufichua mkataba wa darasa kwa kila slot: mzizi hukubali classNames iliyoandikwa kama Partial<Record<<Name>Slot, string>> (miungano ya jina-la-slot kama DialogSlot hutolewa nje). Madarasa ya slot huongezwa baada ya madarasa ya moduli na hayadhibitiwi na unstyled — hufanya kazi katika hali zote za mitindo na zisizo na mitindo; katika hali isiyo na mitindo ndiyo madarasa pekee. classNames.root huunganishwa pamoja na prop iliyopo ya className, ambayo huendelea kulenga mzizi na hutumika mwisho. Kwa vijenzi vya mchanganyiko, classNames huwekwa mara moja kwenye mzizi na hubebwa hadi kwenye sehemu kupitia context.

Vijenzi vya seva

Bundle iliyochapishwa ya @zephora/react hutolewa na maagizo ya "use client", hivyo unaweza kuingiza vijenzi moja kwa moja ndani ya miti ya React Server Component (Next.js app router) bila kuongeza maagizo mwenyewe — kila kijenzi cha Zephora ni kijenzi cha mteja.