# @fayegram-ai/faye-ui/provider

Public exports and dependency-resolved component properties, with usage and rendering guidance.

## Import

```tsx
import { FayeUIProvider, useColorScheme, useEnvironment } from '@fayegram-ai/faye-ui/provider';
```

[Usage and behavior guide](/docs/theming/) · [API JSON](/api/packages/provider/index.json)

This entry declares a client boundary. Follow the rendering guide for framework integration.

## Public exports

| Name | Kind | Resolved declaration type |
|---|---|---|
| `FayeUIProvider` | value | `({ accessibility, interaction, children, initialPreference, serverScheme, storageKey, store: externalStore, density, direction, locale, catalogs, themeId, axes, motion, variables, profiles, settings, ownerDocument, portalContainer, nonce, applyToDocument }: FayeUIProviderProps) => import("react").JSX.Element` |
| `useColorScheme` | value | `() => { setPreference: (value: ColorPreference) => void; preference: ColorPreference; scheme: Scheme; }` |
| `useEnvironment` | value | `() => Environment & { message: MessageFormatter; }` |
| `useVisualScope` | value | `() => VisualScope` |
| `useAccessibilityPreferences` | value | `() => AccessibilityPreferences` |
| `useInputModality` | value | `(ownerDocument?: Document) => InputModality` |
| `ThemeScope` | value | `({ accessibility, interaction, scheme, density, direction, themeId, axes, motion, variables, mode, profiles, settings, children, style, className, ...props }: ThemeScopeProps) => import("react").JSX.Element` |
| `PortalTheme` | value | `({ children }: { children: ReactNode; }) => import("react").JSX.Element` |
| `ComponentStyleScope` | value | `<N extends string>({ name, variants, children }: { name: N; variants: VisualVariants<N>; children: ReactNode; }) => import("react").JSX.Element` |
| `useComponentStyle` | value | `(name: string, part?: string, instance?: Readonly<Record<string, string \| undefined>>) => { className: string \| undefined; variants: Readonly<Record<string, string>>; attributes: { [k: string]: string; }; }` |
| `useConfiguredProps` | value | `<T extends object>(name: string, part: string, props: T, libraryDefaults?: Partial<T>) => T` |
| `useInteractionVisuals` | value | `(options?: InteractionOptions) => { attributes: { "data-faye-ui-interaction-variant": import("@fayegram-ai/faye-ui/contracts").InteractionVariant; "data-faye-ui-interaction-level": import("@fayegram-ai/faye-ui/contracts").InteractionLevel; "data-faye-ui-track-effect": "expand" \| "highlight" \| "none"; "data-faye-ui-track-highlight": true \| undefined; }; style: CSSProperties; }` |
| `InputModality` | type | `InputModality` |
| `TokenVariables` | type | `Readonly<Record<'--faye-ui-${string}', string>>` |
| `VisualScope` | type | `VisualScope` |
| `Environment` | type | `Environment` |
| `ComponentConfiguration` | type | `ComponentConfiguration` |
| `FayeUIProviderProps` | type | `FayeUIProviderProps` |
| `ThemeScopeProps` | type | `ThemeScopeProps` |
| `isColorPreference` | value | `(value: unknown) => value is ColorPreference` |
| `createPreferenceStore` | value | `(initial?: ColorPreference, serverScheme?: Scheme, storageKey?: string) => PreferenceStore` |
| `PreferenceSnapshot` | type | `PreferenceSnapshot` |
| `PreferenceStore` | type | `PreferenceStore` |
| `styledPart` | value | `<C extends ElementType, N extends string>(Component: C, name: N, part: string, defaults?: Partial<ComponentPropsWithRef<C>>) => { (input: ComponentPropsWithRef<C> & { variants?: VisualVariants<N>; }): ReactElement; displayName: string; }` |
| `componentSettings` | value | `<C extends ElementType>(component: string, part: string, _type: C, defaults: Partial<ComponentPropsWithRef<C>>) => ComponentSettings` |
| `mergeConfiguredProps` | value | `<T extends object>(defaults: Readonly<Record<string, unknown>> \| undefined, instance: T) => T` |
| `mergeComponentSettings` | value | `(base: Readonly<Record<string, ComponentSettings>>, entries: readonly ComponentSettings[]) => Readonly<Record<string, ComponentSettings>>` |
| `ComponentSettings` | type | `ComponentSettings` |
| `readComputedTokens` | value | `<const Names extends readonly string[]>(element: Element, names: Names) => Readonly<Record<Names[number], string>>` |
| `mergeComponentProfiles` | value | `(base: Readonly<Record<string, ComponentProfile>>, entries: readonly ComponentProfile[]) => Readonly<Record<string, ComponentProfile>>` |
| `mergeVariantValues` | value | `(...sources: readonly (Readonly<Record<string, string \| undefined>> \| undefined)[]) => Readonly<Record<string, string>>` |



## Defaults and customization

Defaults and native behavior are documented in the linked family guide. This reference does not infer a default from an optional property.

Use semantic tokens, public part hooks and customization sheets. Keep visual configuration separate from application state.

## State, events and accessibility

For interactive controls, pair a controlled value/open prop with its corresponding change callback; default props initialize uncontrolled state. Keep application validation and submission policy explicit. Name controls with visible labels, name icon-only actions on the button, and preserve focus and dismissal behavior when replacing parts. Use native form names and submit/reset types where supported. See the usage guide for component-specific behavior and live examples.

## Declaration authority

Generated from `packages/faye-ui/dist/provider/index.d.ts` after the semantic package build. Common native/React attributes are intentionally omitted from property tables. Generic overloads, discriminated unions and complete inherited attributes remain authoritative in installed TypeScript declarations. [React DOM attributes](https://react.dev/reference/react-dom/components/common) and [Base UI component contracts](https://base-ui.com/react/overview/quick-start) describe the inherited foundations.