# @fayegram-ai/faye-ui/core

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

## Import

```tsx
import { cx, composeEventHandlers, stateClass } from '@fayegram-ai/faye-ui/core';
```

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

This entry has no declared client boundary; individual exported behavior still follows its rendering contract.

## Public exports

| Name | Kind | Resolved declaration type |
|---|---|---|
| `cx` | value | `(...classes: readonly ClassValue[]) => string` |
| `composeEventHandlers` | value | `<E extends { defaultPrevented: boolean; }>(consumer: ((event: E) => void) \| undefined, internal: (event: E) => void) => (event: E) => void` |
| `stateClass` | value | `<S>(base: string, custom?: string \| ((state: S) => string \| undefined)) => string \| ((state: S) => string)` |
| `ClassValue` | type | `ClassValue` |
| `Box` | value | `<E extends ElementType = "div">({ as, p, px, py, className, ...props }: BoxProps<E>) => import("react").ReactElement<any, string \| import("react").JSXElementConstructor<any>>` |
| `BoxOwnProps` | type | `BoxOwnProps` |
| `BoxProps` | type | `BoxProps<E>` |
| `Text` | value | `({ as, size, tone, weight, variant, profile, truncate, balance, className, ...props }: TextProps) => import("react").DetailedReactHTMLElement<{ className: string; "data-variant": string; "data-size": string \| undefined; "data-tone": string; "data-weight": string \| undefined; "data-truncate": true \| undefined; "data-balance": true \| undefined; ref?: Ref<HTMLElement>; defaultChecked?: boolean \| undefined; defaultValue?: string \| number \| readonly string[] \| undefined; suppressContentEditableWarning?: boolean \| undefined; suppressHydrationWarning?: boolean \| undefined; accessKey?: string \| undefined; autoCapitalize?: "off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| undefined \| (string & {}); autoFocus?: boolean \| undefined; contentEditable?: (boolean \| "true" \| "false") \| "inher… (full type in API JSON)` |
| `Heading` | value | `({ level, size, variant, profile, className, ...props }: HeadingProps) => import("react").DetailedReactHTMLElement<{ className: string; "data-variant": string; "data-size": string \| undefined; ref?: Ref<HTMLHeadingElement>; defaultChecked?: boolean \| undefined; defaultValue?: string \| number \| readonly string[] \| undefined; suppressContentEditableWarning?: boolean \| undefined; suppressHydrationWarning?: boolean \| undefined; accessKey?: string \| undefined; autoCapitalize?: "off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| undefined \| (string & {}); autoFocus?: boolean \| undefined; contentEditable?: (boolean \| "true" \| "false") \| "inherit" \| "plaintext-only" \| undefined; contextMenu?: string \| undefined; dir?: string \| undefined; draggable?: (boolean \| "true" \| "false") \| undefi… (full type in API JSON)` |
| `TextProps` | type | `TextProps` |
| `HeadingProps` | type | `HeadingProps` |
| `TextVariantOverrides` | type | `TextVariantOverrides` |
| `TextToneOverrides` | type | `TextToneOverrides` |
| `TextSizeOverrides` | type | `TextSizeOverrides` |
| `TextWeightOverrides` | type | `TextWeightOverrides` |
| `Surface` | value | `({ variant, padding, profile, className, ...props }: SurfaceProps) => import("react").JSX.Element` |
| `Card` | value | `({ profile, variant, padding, className, ...props }: SurfaceProps) => import("react").JSX.Element` |
| `CardHeader` | value | `({ profile, avatar, action, className, children, ...props }: CardPartProps & { avatar?: ReactNode; action?: ReactNode; }) => import("react").JSX.Element` |
| `CardBody` | value | `({ profile, className, ...props }: CardPartProps) => import("react").JSX.Element` |
| `CardFooter` | value | `({ className, ...props }: CardPartProps) => import("react").JSX.Element` |
| `CardTitle` | value | `({ profile, className, level, ...props }: HTMLAttributes<HTMLHeadingElement> & { profile?: ComponentProfile; level?: 1 \| 2 \| 3 \| 4 \| 5 \| 6; ref?: Ref<HTMLHeadingElement>; }) => import("react").JSX.Element` |
| `CardDescription` | value | `({ profile, className, ...props }: HTMLAttributes<HTMLParagraphElement> & { profile?: ComponentProfile; ref?: Ref<HTMLParagraphElement>; }) => import("react").JSX.Element` |
| `CardMedia` | value | `({ profile, className, ratio, style, children, ...props }: CardPartProps & { ratio?: number; }) => import("react").JSX.Element` |
| `CardActions` | value | `({ profile, className, ...props }: CardPartProps) => import("react").JSX.Element` |
| `CardPrimaryAction` | value | `({ profile, className, ...props }: CardPrimaryActionProps) => import("react").JSX.Element` |
| `SurfaceProps` | type | `SurfaceProps` |
| `CardPartProps` | type | `CardPartProps` |
| `CardPrimaryActionProps` | type | `CardPrimaryActionProps` |
| `VisuallyHidden` | value | `({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react").JSX.Element` |
| `SkipLink` | value | `({ href, children, className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => import("react").JSX.Element` |
| `Separator` | value | `({ orientation, decorative, textAlign, children, className, ...props }: SeparatorProps) => import("react").JSX.Element` |
| `SeparatorProps` | type | `SeparatorProps` |
| `Code` | value | `({ className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element` |
| `Kbd` | value | `({ className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element` |
| `profilePart` | value | `(profile: ComponentProfile \| undefined, component: string, part?: string, instance?: Readonly<Record<string, string \| undefined>>) => { className: string \| undefined; variants: Record<string, string>; attributes: { [k: string]: string; }; }` |
| `Icon` | value | `({ icon, size, label, mirrorInRtl, className, children, ...props }: IconProps) => import("react").JSX.Element` |
| `IconBaseProps` | type | `IconBaseProps` |
| `IconProps` | type | `IconProps` |
| `ScopedBaseline` | value | `({ profile, className, ...props }: HTMLAttributes<HTMLDivElement> & { profile?: ComponentProfile; }) => import("react").JSX.Element` |



## 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/core/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.