# <a id="api-reference"></a>jg-react-ui API reference

Every export of `jg-react-ui@0.3.4`, 830 in all, with its signature, its errors, and an example. It's generated from the package's TSDoc.

## <a id="api-entry-main"></a>`jg-react-ui`

- Functions: [`Alert`](#api-Alert), [`AlertAction`](#api-AlertAction), [`AlertDescription`](#api-AlertDescription), [`AlertDialog`](#api-AlertDialog), [`AlertDialogAction`](#api-AlertDialogAction), [`AlertDialogContent`](#api-AlertDialogContent), [`AlertDialogDescription`](#api-AlertDialogDescription), [`AlertDialogFooter`](#api-AlertDialogFooter), [`AlertDialogHeader`](#api-AlertDialogHeader), [`AlertDialogTitle`](#api-AlertDialogTitle), [`AlertDialogTrigger`](#api-AlertDialogTrigger), [`AlertTitle`](#api-AlertTitle), [`Article`](#api-Article), [`ArticleHeader`](#api-ArticleHeader), [`AudioInput`](#api-AudioInput), [`Badge`](#api-Badge), [`Blockquote`](#api-Blockquote), [`ChatMarkdownEditor`](#api-ChatMarkdownEditor), [`Checkbox`](#api-Checkbox), [`CodeBlock`](#api-CodeBlock), [`CodeDiff`](#api-CodeDiff), [`CodeFileHeader`](#api-CodeFileHeader), [`CodePreferencesControls`](#api-CodePreferencesControls), [`CompactMarkdownEditor`](#api-CompactMarkdownEditor), [`ConfirmationDialog`](#api-ConfirmationDialog), [`CopyButton`](#api-CopyButton), [`Dialog`](#api-Dialog), [`DialogBody`](#api-DialogBody), [`DialogCancel`](#api-DialogCancel), [`DialogClose`](#api-DialogClose), [`DialogContent`](#api-DialogContent), [`DialogDescription`](#api-DialogDescription), [`DialogFooter`](#api-DialogFooter), [`DialogHeader`](#api-DialogHeader), [`DialogTitle`](#api-DialogTitle), [`DialogTrigger`](#api-DialogTrigger), [`Divider`](#api-Divider), [`Drawer`](#api-Drawer), [`DrawerBody`](#api-DrawerBody), [`DrawerClose`](#api-DrawerClose), [`DrawerContent`](#api-DrawerContent), [`DrawerDescription`](#api-DrawerDescription), [`DrawerFooter`](#api-DrawerFooter), [`DrawerHeader`](#api-DrawerHeader), [`DrawerTitle`](#api-DrawerTitle), [`DrawerTrigger`](#api-DrawerTrigger), [`DropdownMenu`](#api-DropdownMenu), [`DropdownMenuCheckboxItem`](#api-DropdownMenuCheckboxItem), [`DropdownMenuContent`](#api-DropdownMenuContent), [`DropdownMenuGroup`](#api-DropdownMenuGroup), [`DropdownMenuItem`](#api-DropdownMenuItem), [`DropdownMenuLabel`](#api-DropdownMenuLabel), [`DropdownMenuRadioGroup`](#api-DropdownMenuRadioGroup), [`DropdownMenuRadioItem`](#api-DropdownMenuRadioItem), [`DropdownMenuSeparator`](#api-DropdownMenuSeparator), [`DropdownMenuShortcut`](#api-DropdownMenuShortcut), [`DropdownMenuSub`](#api-DropdownMenuSub), [`DropdownMenuSubContent`](#api-DropdownMenuSubContent), [`DropdownMenuSubTrigger`](#api-DropdownMenuSubTrigger), [`DropdownMenuTrigger`](#api-DropdownMenuTrigger), [`EmptyState`](#api-EmptyState), [`EmptyStateDescription`](#api-EmptyStateDescription), [`EmptyStateTitle`](#api-EmptyStateTitle), [`ErrorFeedbackProvider`](#api-ErrorFeedbackProvider), [`Field`](#api-Field), [`FieldDescription`](#api-FieldDescription), [`FieldError`](#api-FieldError), [`FieldGroup`](#api-FieldGroup), [`FieldLegend`](#api-FieldLegend), [`FieldSet`](#api-FieldSet), [`FileUpload`](#api-FileUpload), [`FileUploadDialog`](#api-FileUploadDialog), [`formatRepositoryPath`](#api-formatRepositoryPath), [`getMarkdownImageDisplayWidth`](#api-getMarkdownImageDisplayWidth), [`getUiPreferencesStorageKey`](#api-getUiPreferencesStorageKey), [`GlobalErrorBoundary`](#api-GlobalErrorBoundary), [`GlobalErrorBoundaryView`](#api-GlobalErrorBoundaryView), [`Heading`](#api-Heading), [`IconTile`](#api-IconTile), [`ImageUploadField`](#api-ImageUploadField), [`Inline`](#api-Inline), [`InlineCode`](#api-InlineCode), [`Input`](#api-Input), [`isCodeBlockProse`](#api-isCodeBlockProse), [`KeyboardKey`](#api-KeyboardKey), [`Label`](#api-Label), [`LargeText`](#api-LargeText), [`LazyRouteProgress`](#api-LazyRouteProgress), [`Lead`](#api-Lead), [`ListItem`](#api-ListItem), [`LoadMoreButton`](#api-LoadMoreButton), [`Markdown`](#api-Markdown), [`MarkdownEditor`](#api-MarkdownEditor), [`MutedText`](#api-MutedText), [`OrderedList`](#api-OrderedList), [`PageDescription`](#api-PageDescription), [`PageHeader`](#api-PageHeader), [`PageHeaderMetadata`](#api-PageHeaderMetadata), [`PageHeaderRow`](#api-PageHeaderRow), [`PageHeaderTitleGroup`](#api-PageHeaderTitleGroup), [`PageShell`](#api-PageShell), [`PageTitle`](#api-PageTitle), [`Paragraph`](#api-Paragraph), [`parseYouTubeVideoUrl`](#api-parseYouTubeVideoUrl), [`Progress`](#api-Progress), [`QueryBoundary`](#api-QueryBoundary), [`QueryErrorAlert`](#api-QueryErrorAlert), [`QueryErrorToastr`](#api-QueryErrorToastr), [`QueryLoader`](#api-QueryLoader), [`RadioGroup`](#api-RadioGroup), [`RadioGroupItem`](#api-RadioGroupItem), [`RouterRoot`](#api-RouterRoot), [`Section`](#api-Section), [`Select`](#api-Select), [`SelectContent`](#api-SelectContent), [`SelectItem`](#api-SelectItem), [`SelectTrigger`](#api-SelectTrigger), [`SelectValue`](#api-SelectValue), [`SmallText`](#api-SmallText), [`Spinner`](#api-Spinner), [`Stack`](#api-Stack), [`Surface`](#api-Surface), [`Switch`](#api-Switch), [`Table`](#api-Table), [`TableCell`](#api-TableCell), [`TableContainer`](#api-TableContainer), [`TableHeaderCell`](#api-TableHeaderCell), [`TableRow`](#api-TableRow), [`Tabs`](#api-Tabs), [`TabsContent`](#api-TabsContent), [`TabsList`](#api-TabsList), [`TabsTrigger`](#api-TabsTrigger), [`Textarea`](#api-Textarea), [`TextLink`](#api-TextLink), [`ThemeInitializationScript`](#api-ThemeInitializationScript), [`ThemeProvider`](#api-ThemeProvider), [`ThemeToggleButton`](#api-ThemeToggleButton), [`Toastr`](#api-Toastr), [`Tooltip`](#api-Tooltip), [`TooltipContent`](#api-TooltipContent), [`TooltipProvider`](#api-TooltipProvider), [`TooltipTrigger`](#api-TooltipTrigger), [`UiPreferencesProvider`](#api-UiPreferencesProvider), [`UnorderedList`](#api-UnorderedList), [`useErrorFeedbackResolver`](#api-useErrorFeedbackResolver), [`useTheme`](#api-useTheme), [`useUiPreferences`](#api-useUiPreferences), [`useUiPreferencesCapabilities`](#api-useUiPreferencesCapabilities), [`WideMarkdownEditor`](#api-WideMarkdownEditor), [`YouTubeVideo`](#api-YouTubeVideo)
- Constants: [`alertVariants`](#api-alertVariants), [`APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME`](#api-APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME), [`APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME`](#api-APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME), [`AppThemeSchema`](#api-AppThemeSchema), [`AUDIO_INPUT_BYTES_PER_MEGABYTE`](#api-AUDIO_INPUT_BYTES_PER_MEGABYTE), [`AUDIO_INPUT_DEFAULT_MAX_BYTES`](#api-AUDIO_INPUT_DEFAULT_MAX_BYTES), [`AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS`](#api-AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS), [`badgeVariants`](#api-badgeVariants), [`Button`](#api-Button), [`buttonVariants`](#api-buttonVariants), [`CODE_DIFF_LANGUAGES`](#api-CODE_DIFF_LANGUAGES), [`CodeDiffViewSchema`](#api-CodeDiffViewSchema), [`codeFileStatusVariants`](#api-codeFileStatusVariants), [`COPY_BUTTON_FEEDBACK_DURATION_MS`](#api-COPY_BUTTON_FEEDBACK_DURATION_MS), [`DEFAULT_FORM_PROPS`](#api-DEFAULT_FORM_PROPS), [`DEFAULT_UI_PREFERENCES`](#api-DEFAULT_UI_PREFERENCES), [`DialogNavigationObserver`](#api-DialogNavigationObserver), [`DialogNavigationProvider`](#api-DialogNavigationProvider), [`ERRORS`](#api-ERRORS), [`headingVariants`](#api-headingVariants), [`iconTileVariants`](#api-iconTileVariants), [`LOAD_MORE_BUTTON_DEFAULT_LABEL`](#api-LOAD_MORE_BUTTON_DEFAULT_LABEL), [`LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL`](#api-LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL), [`MARKDOWN_EDITOR_ALL_TOOLS`](#api-MARKDOWN_EDITOR_ALL_TOOLS), [`MARKDOWN_EDITOR_AUTHORING_TOOLS`](#api-MARKDOWN_EDITOR_AUTHORING_TOOLS), [`MARKDOWN_EDITOR_LAYOUTS`](#api-MARKDOWN_EDITOR_LAYOUTS), [`MARKDOWN_EDITOR_PROSE_TOOLS`](#api-MARKDOWN_EDITOR_PROSE_TOOLS), [`MARKDOWN_EDITOR_TOOLS`](#api-MARKDOWN_EDITOR_TOOLS), [`ResolvedAppThemeSchema`](#api-ResolvedAppThemeSchema), [`UI_PREFERENCES_STORAGE_KEY`](#api-UI_PREFERENCES_STORAGE_KEY), [`UI_PREFERENCES_STORE_ID`](#api-UI_PREFERENCES_STORE_ID), [`UiPreferencesSchema`](#api-UiPreferencesSchema), [`useConfirmationDialogStore`](#api-useConfirmationDialogStore), [`useDialogNavigationDismissal`](#api-useDialogNavigationDismissal)
- Types: [`IAlertActionProps`](#api-IAlertActionProps), [`IAlertDescriptionProps`](#api-IAlertDescriptionProps), [`IAlertDialogActionProps`](#api-IAlertDialogActionProps), [`IAlertDialogContentProps`](#api-IAlertDialogContentProps), [`IAlertDialogDescriptionProps`](#api-IAlertDialogDescriptionProps), [`IAlertDialogFooterProps`](#api-IAlertDialogFooterProps), [`IAlertDialogHeaderProps`](#api-IAlertDialogHeaderProps), [`IAlertDialogProps`](#api-IAlertDialogProps), [`IAlertDialogTitleProps`](#api-IAlertDialogTitleProps), [`IAlertDialogTriggerProps`](#api-IAlertDialogTriggerProps), [`IAlertProps`](#api-IAlertProps), [`IAlertTitleProps`](#api-IAlertTitleProps), [`IAppTheme`](#api-IAppTheme), [`IArticleHeaderProps`](#api-IArticleHeaderProps), [`IArticleProps`](#api-IArticleProps), [`IAudioInputCancelHandler`](#api-IAudioInputCancelHandler), [`IAudioInputControls`](#api-IAudioInputControls), [`IAudioInputDialogOpenChangeHandler`](#api-IAudioInputDialogOpenChangeHandler), [`IAudioInputElapsedMsChangeHandler`](#api-IAudioInputElapsedMsChangeHandler), [`IAudioInputLimitProgress`](#api-IAudioInputLimitProgress), [`IAudioInputLimitProgressChangeHandler`](#api-IAudioInputLimitProgressChangeHandler), [`IAudioInputProps`](#api-IAudioInputProps), [`IAudioInputRecordedBytesChangeHandler`](#api-IAudioInputRecordedBytesChangeHandler), [`IAudioInputRecording`](#api-IAudioInputRecording), [`IAudioInputRecordingActiveChangeHandler`](#api-IAudioInputRecordingActiveChangeHandler), [`IAudioInputRecordingCancelHandler`](#api-IAudioInputRecordingCancelHandler), [`IAudioInputRecordingCompleteHandler`](#api-IAudioInputRecordingCompleteHandler), [`IAudioInputRecordingDataAvailableHandler`](#api-IAudioInputRecordingDataAvailableHandler), [`IAudioInputRecordingErrorHandler`](#api-IAudioInputRecordingErrorHandler), [`IAudioInputRecordingStartHandler`](#api-IAudioInputRecordingStartHandler), [`IAudioInputRecordingStopHandler`](#api-IAudioInputRecordingStopHandler), [`IAudioInputStatus`](#api-IAudioInputStatus), [`IAudioInputStatusChangeHandler`](#api-IAudioInputStatusChangeHandler), [`IAudioInputTranscribeHandler`](#api-IAudioInputTranscribeHandler), [`IAudioInputTranscriptionCompleteHandler`](#api-IAudioInputTranscriptionCompleteHandler), [`IAudioInputTranscriptionEditorVisibleChangeHandler`](#api-IAudioInputTranscriptionEditorVisibleChangeHandler), [`IAudioInputTranscriptionErrorHandler`](#api-IAudioInputTranscriptionErrorHandler), [`IAudioInputTranscriptionResultHandler`](#api-IAudioInputTranscriptionResultHandler), [`IAudioInputTranscriptionStatus`](#api-IAudioInputTranscriptionStatus), [`IAudioInputTranscriptionStatusChangeHandler`](#api-IAudioInputTranscriptionStatusChangeHandler), [`IAudioInputTranscriptionTextChangeHandler`](#api-IAudioInputTranscriptionTextChangeHandler), [`IBadgeProps`](#api-IBadgeProps), [`IBlockquoteProps`](#api-IBlockquoteProps), [`IButtonBadgeLocation`](#api-IButtonBadgeLocation), [`IButtonBadgeTheme`](#api-IButtonBadgeTheme), [`IButtonProps`](#api-IButtonProps), [`IChatMarkdownBlockFormat`](#api-IChatMarkdownBlockFormat), [`IChatMarkdownEditorControls`](#api-IChatMarkdownEditorControls), [`IChatMarkdownEditorProps`](#api-IChatMarkdownEditorProps), [`ICheckboxProps`](#api-ICheckboxProps), [`ICodeBlockProps`](#api-ICodeBlockProps), [`ICodeDiffLanguage`](#api-ICodeDiffLanguage), [`ICodeDiffProps`](#api-ICodeDiffProps), [`ICodeDiffView`](#api-ICodeDiffView), [`ICodeFileHeaderProps`](#api-ICodeFileHeaderProps), [`ICodeFileStatus`](#api-ICodeFileStatus), [`ICodePreferencesControlsProps`](#api-ICodePreferencesControlsProps), [`IConfirmationDialogCloseHandler`](#api-IConfirmationDialogCloseHandler), [`IConfirmationDialogStore`](#api-IConfirmationDialogStore), [`ICopyButtonProps`](#api-ICopyButtonProps), [`IDialogBodyProps`](#api-IDialogBodyProps), [`IDialogCancelProps`](#api-IDialogCancelProps), [`IDialogCloseProps`](#api-IDialogCloseProps), [`IDialogContentProps`](#api-IDialogContentProps), [`IDialogDescriptionProps`](#api-IDialogDescriptionProps), [`IDialogFooterProps`](#api-IDialogFooterProps), [`IDialogHeaderProps`](#api-IDialogHeaderProps), [`IDialogNavigationDismissalOptions`](#api-IDialogNavigationDismissalOptions), [`IDialogNavigationObserverProps`](#api-IDialogNavigationObserverProps), [`IDialogNavigationProviderProps`](#api-IDialogNavigationProviderProps), [`IDialogNavigationSessionReader`](#api-IDialogNavigationSessionReader), [`IDialogProps`](#api-IDialogProps), [`IDialogSize`](#api-IDialogSize), [`IDialogTitleProps`](#api-IDialogTitleProps), [`IDialogTriggerProps`](#api-IDialogTriggerProps), [`IDividerProps`](#api-IDividerProps), [`IDrawerBodyProps`](#api-IDrawerBodyProps), [`IDrawerCloseProps`](#api-IDrawerCloseProps), [`IDrawerContentProps`](#api-IDrawerContentProps), [`IDrawerDensity`](#api-IDrawerDensity), [`IDrawerDescriptionProps`](#api-IDrawerDescriptionProps), [`IDrawerFooterProps`](#api-IDrawerFooterProps), [`IDrawerHeaderProps`](#api-IDrawerHeaderProps), [`IDrawerProps`](#api-IDrawerProps), [`IDrawerSide`](#api-IDrawerSide), [`IDrawerSize`](#api-IDrawerSize), [`IDrawerTitleProps`](#api-IDrawerTitleProps), [`IDrawerTriggerProps`](#api-IDrawerTriggerProps), [`IDropdownMenuCheckboxItemProps`](#api-IDropdownMenuCheckboxItemProps), [`IDropdownMenuContentProps`](#api-IDropdownMenuContentProps), [`IDropdownMenuGroupProps`](#api-IDropdownMenuGroupProps), [`IDropdownMenuItemProps`](#api-IDropdownMenuItemProps), [`IDropdownMenuLabelProps`](#api-IDropdownMenuLabelProps), [`IDropdownMenuProps`](#api-IDropdownMenuProps), [`IDropdownMenuRadioGroupProps`](#api-IDropdownMenuRadioGroupProps), [`IDropdownMenuRadioItemProps`](#api-IDropdownMenuRadioItemProps), [`IDropdownMenuSeparatorProps`](#api-IDropdownMenuSeparatorProps), [`IDropdownMenuShortcutProps`](#api-IDropdownMenuShortcutProps), [`IDropdownMenuSubContentProps`](#api-IDropdownMenuSubContentProps), [`IDropdownMenuSubProps`](#api-IDropdownMenuSubProps), [`IDropdownMenuSubTriggerProps`](#api-IDropdownMenuSubTriggerProps), [`IDropdownMenuTriggerProps`](#api-IDropdownMenuTriggerProps), [`IEmptyStateDescriptionProps`](#api-IEmptyStateDescriptionProps), [`IEmptyStateProps`](#api-IEmptyStateProps), [`IEmptyStateTitleProps`](#api-IEmptyStateTitleProps), [`IErrorFeedbackProviderProps`](#api-IErrorFeedbackProviderProps), [`IErrorFeedbackResolver`](#api-IErrorFeedbackResolver), [`IExternalToastr`](#api-IExternalToastr), [`IFieldDescriptionProps`](#api-IFieldDescriptionProps), [`IFieldErrorProps`](#api-IFieldErrorProps), [`IFieldGroupProps`](#api-IFieldGroupProps), [`IFieldLegendProps`](#api-IFieldLegendProps), [`IFieldProps`](#api-IFieldProps), [`IFieldSetProps`](#api-IFieldSetProps), [`IFileUploadDialogDiscardHandler`](#api-IFileUploadDialogDiscardHandler), [`IFileUploadDialogProps`](#api-IFileUploadDialogProps), [`IFileUploadDialogSubmitHandler`](#api-IFileUploadDialogSubmitHandler), [`IFileUploadPreviewRenderer`](#api-IFileUploadPreviewRenderer), [`IFileUploadProps`](#api-IFileUploadProps), [`IGlobalErrorBoundaryClassNames`](#api-IGlobalErrorBoundaryClassNames), [`IGlobalErrorBoundaryProps`](#api-IGlobalErrorBoundaryProps), [`IGlobalErrorBoundaryRefreshHandler`](#api-IGlobalErrorBoundaryRefreshHandler), [`IGlobalErrorBoundaryViewProps`](#api-IGlobalErrorBoundaryViewProps), [`IHeadingLevel`](#api-IHeadingLevel), [`IHeadingProps`](#api-IHeadingProps), [`IHeadingRole`](#api-IHeadingRole), [`IIconTileProps`](#api-IIconTileProps), [`IIconTileSize`](#api-IIconTileSize), [`IIconTileTone`](#api-IIconTileTone), [`IImageUploadFieldCurrentImage`](#api-IImageUploadFieldCurrentImage), [`IImageUploadFieldProps`](#api-IImageUploadFieldProps), [`IInlineCodeProps`](#api-IInlineCodeProps), [`IInlineProps`](#api-IInlineProps), [`IInputProps`](#api-IInputProps), [`IKeyboardKeyProps`](#api-IKeyboardKeyProps), [`ILabelProps`](#api-ILabelProps), [`ILargeTextProps`](#api-ILargeTextProps), [`ILeadProps`](#api-ILeadProps), [`IListItemProps`](#api-IListItemProps), [`ILoadMoreButtonClassNames`](#api-ILoadMoreButtonClassNames), [`ILoadMoreButtonIconPlacement`](#api-ILoadMoreButtonIconPlacement), [`ILoadMoreButtonProps`](#api-ILoadMoreButtonProps), [`ILoadMoreButtonQuery`](#api-ILoadMoreButtonQuery), [`ILocalUiPreferencesProviderProps`](#api-ILocalUiPreferencesProviderProps), [`IMarkdownEditorLayout`](#api-IMarkdownEditorLayout), [`IMarkdownEditorProps`](#api-IMarkdownEditorProps), [`IMarkdownEditorTool`](#api-IMarkdownEditorTool), [`IMarkdownEditorVariantProps`](#api-IMarkdownEditorVariantProps), [`IMarkdownProps`](#api-IMarkdownProps), [`IMutedTextProps`](#api-IMutedTextProps), [`IOpenConfirmationDialogOptions`](#api-IOpenConfirmationDialogOptions), [`IOrderedListProps`](#api-IOrderedListProps), [`IPageDescriptionProps`](#api-IPageDescriptionProps), [`IPageHeaderMetadataProps`](#api-IPageHeaderMetadataProps), [`IPageHeaderProps`](#api-IPageHeaderProps), [`IPageHeaderRowProps`](#api-IPageHeaderRowProps), [`IPageHeaderTitleGroupProps`](#api-IPageHeaderTitleGroupProps), [`IPageShellProps`](#api-IPageShellProps), [`IPageTitleProps`](#api-IPageTitleProps), [`IParagraphProps`](#api-IParagraphProps), [`IProgressDeterminateProps`](#api-IProgressDeterminateProps), [`IProgressIndeterminateProps`](#api-IProgressIndeterminateProps), [`IProgressProps`](#api-IProgressProps), [`IQueryBoundaryErrorAlertProps`](#api-IQueryBoundaryErrorAlertProps), [`IQueryBoundaryLoaderProps`](#api-IQueryBoundaryLoaderProps), [`IQueryBoundaryLoadMoreButtonProps`](#api-IQueryBoundaryLoadMoreButtonProps), [`IQueryBoundaryProps`](#api-IQueryBoundaryProps), [`IQueryBoundaryQuery`](#api-IQueryBoundaryQuery), [`IQueryBoundaryRenderErrorAlert`](#api-IQueryBoundaryRenderErrorAlert), [`IQueryBoundaryRenderLoader`](#api-IQueryBoundaryRenderLoader), [`IQueryBoundaryRenderLoadMoreButton`](#api-IQueryBoundaryRenderLoadMoreButton), [`IQueryErrorAlertPresentation`](#api-IQueryErrorAlertPresentation), [`IQueryErrorAlertProps`](#api-IQueryErrorAlertProps), [`IQueryErrorAlertQuery`](#api-IQueryErrorAlertQuery), [`IQueryErrorToastrProps`](#api-IQueryErrorToastrProps), [`IQueryLoaderClassNames`](#api-IQueryLoaderClassNames), [`IQueryLoaderLayout`](#api-IQueryLoaderLayout), [`IQueryLoaderProps`](#api-IQueryLoaderProps), [`IQueryLoaderQuery`](#api-IQueryLoaderQuery), [`IQueryLoaderSize`](#api-IQueryLoaderSize), [`IRadioGroupItemProps`](#api-IRadioGroupItemProps), [`IRadioGroupProps`](#api-IRadioGroupProps), [`IReadOnlyUiPreferencesProviderProps`](#api-IReadOnlyUiPreferencesProviderProps), [`IRemoteUiPreferencesProviderProps`](#api-IRemoteUiPreferencesProviderProps), [`IResolvedAppTheme`](#api-IResolvedAppTheme), [`ISectionProps`](#api-ISectionProps), [`ISelectContentProps`](#api-ISelectContentProps), [`ISelectItemProps`](#api-ISelectItemProps), [`ISelectProps`](#api-ISelectProps), [`ISelectTriggerProps`](#api-ISelectTriggerProps), [`ISelectValueProps`](#api-ISelectValueProps), [`ISmallTextProps`](#api-ISmallTextProps), [`ISpinnerProps`](#api-ISpinnerProps), [`IStackProps`](#api-IStackProps), [`ISurfaceProps`](#api-ISurfaceProps), [`ISwitchProps`](#api-ISwitchProps), [`ITableCellProps`](#api-ITableCellProps), [`ITableContainerProps`](#api-ITableContainerProps), [`ITableHeaderCellProps`](#api-ITableHeaderCellProps), [`ITableProps`](#api-ITableProps), [`ITableRowProps`](#api-ITableRowProps), [`ITabsActivationMode`](#api-ITabsActivationMode), [`ITabsContentProps`](#api-ITabsContentProps), [`ITabsListProps`](#api-ITabsListProps), [`ITabsOverflowBehavior`](#api-ITabsOverflowBehavior), [`ITabsProps`](#api-ITabsProps), [`ITabsTriggerProps`](#api-ITabsTriggerProps), [`ITextareaProps`](#api-ITextareaProps), [`ITextLinkProps`](#api-ITextLinkProps), [`ITextLinkVariant`](#api-ITextLinkVariant), [`IThemeChangeRequestedHandler`](#api-IThemeChangeRequestedHandler), [`IThemeInitializationScriptProps`](#api-IThemeInitializationScriptProps), [`IThemeProviderProps`](#api-IThemeProviderProps), [`IThemeProviderState`](#api-IThemeProviderState), [`IThemeToggleButtonProps`](#api-IThemeToggleButtonProps), [`IToastrClassNames`](#api-IToastrClassNames), [`IToastrProps`](#api-IToastrProps), [`ITooltipContentProps`](#api-ITooltipContentProps), [`ITooltipProps`](#api-ITooltipProps), [`ITooltipProviderProps`](#api-ITooltipProviderProps), [`ITooltipTriggerProps`](#api-ITooltipTriggerProps), [`IUiPreferences`](#api-IUiPreferences), [`IUiPreferencesContextState`](#api-IUiPreferencesContextState), [`IUiPreferencesPersistenceAdapter`](#api-IUiPreferencesPersistenceAdapter), [`IUiPreferencesProviderProps`](#api-IUiPreferencesProviderProps), [`IUiPreferencesSuccessNotification`](#api-IUiPreferencesSuccessNotification), [`IUiPreferencesUpdateOptions`](#api-IUiPreferencesUpdateOptions), [`IUnorderedListProps`](#api-IUnorderedListProps), [`IYouTubeVideoDescriptor`](#api-IYouTubeVideoDescriptor), [`IYouTubeVideoId`](#api-IYouTubeVideoId), [`IYouTubeVideoProps`](#api-IYouTubeVideoProps)

### <a id="api-functions"></a>Functions in `jg-react-ui`

#### <a id="api-Alert"></a>`Alert`

*Function*

Renders an inline alert with shadcn-style composition and optional interactive behavior.

```ts
Alert(props: IAlertProps): ReactElement
```

**Parameters**

- `props` `IAlertProps`: The alert element props, interaction mode, and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the alert container with role="alert" by default for static alerts.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Alert } from 'jg-react-ui/components/alert';
const example = createElement(Alert, null, 'Example');
```

#### <a id="api-AlertAction"></a>`AlertAction`

*Function*

Renders an optional action slot in the top-right corner of an alert.

```ts
AlertAction(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The action wrapper props.

**Returns** `ReactElement`: A React element that renders the alert action container.

**Example**

```ts
import { createElement } from 'react';
import { AlertAction } from 'jg-react-ui/components/alert';
const example = createElement(AlertAction, null, 'Example');
```

#### <a id="api-AlertDescription"></a>`AlertDescription`

*Function*

Renders supporting copy for an alert.

```ts
AlertDescription(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The description element props.

**Returns** `ReactElement`: A React element that renders the alert description.

**Example**

```ts
import { createElement } from 'react';
import { AlertDescription } from 'jg-react-ui/components/alert';
const example = createElement(AlertDescription, null, 'Example');
```

#### <a id="api-AlertDialog"></a>`AlertDialog`

*Function*

Provides the alert dialog root state and accessibility context.

```ts
AlertDialog(props: IAlertDialogProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogProps`: The Base UI alert dialog root props.

**Returns** `ReactElement`: A React element that renders the alert dialog root.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogAction"></a>`AlertDialogAction`

*Function*

Renders the primary alert dialog action with shared button styling.

```ts
AlertDialogAction(props: IAlertDialogActionProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogActionProps`: The Base UI close props and button variants for the primary action.

**Returns** `ReactElement`: A React element that renders the alert dialog action button.

**Throws**

- AlertDialogAction asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogContent"></a>`AlertDialogContent`

*Function*

Renders the themed alert dialog content inside a portal.

```ts
AlertDialogContent(props: IAlertDialogContentProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogContentProps`: The Base UI alert dialog popup props.

**Returns** `ReactElement`: A React element that renders the alert dialog panel.

**Throws**

- AlertDialogContent requires direct AlertDialogHeader and AlertDialogFooter children.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogDescription"></a>`AlertDialogDescription`

*Function*

Provides supporting context for the alert dialog title.

```ts
AlertDialogDescription(props: DialogDescriptionProps): ReactElement
```

**Parameters**

- `props` `DialogDescriptionProps`: The Base UI alert dialog description props.

**Returns** `ReactElement`: A React element that renders the alert dialog description.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogFooter"></a>`AlertDialogFooter`

*Function*

Groups alert dialog actions in a responsive footer layout.

```ts
AlertDialogFooter(props: IAlertDialogFooterProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogFooterProps`: The alert dialog footer props.

**Returns** `ReactElement`: A React element that renders the alert dialog footer.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogHeader"></a>`AlertDialogHeader`

*Function*

Groups the alert dialog title, media, and description.

```ts
AlertDialogHeader(props: IAlertDialogHeaderProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogHeaderProps`: The alert dialog header props.

**Returns** `ReactElement`: A React element that renders the alert dialog header.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogTitle"></a>`AlertDialogTitle`

*Function*

Announces the primary alert dialog heading.

```ts
AlertDialogTitle(props: DialogTitleProps): ReactElement
```

**Parameters**

- `props` `DialogTitleProps`: The Base UI alert dialog title props.

**Returns** `ReactElement`: A React element that renders the alert dialog title.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertDialogTrigger"></a>`AlertDialogTrigger`

*Function*

Renders the interactive element that opens the alert dialog.

```ts
AlertDialogTrigger(props: IAlertDialogTriggerProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogTriggerProps`: The Base UI alert dialog trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the alert dialog trigger.

**Throws**

- AlertDialogTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-AlertTitle"></a>`AlertTitle`

*Function*

Renders the main title content for an alert.

```ts
AlertTitle(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The title element props.

**Returns** `ReactElement`: A React element that renders the alert title.

**Example**

```ts
import { createElement } from 'react';
import { AlertTitle } from 'jg-react-ui/components/alert';
const example = createElement(AlertTitle, null, 'Example');
```

#### <a id="api-Article"></a>`Article`

*Function*

Renders a readable article-width container.

```ts
Article(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The article element props.

**Returns** `ReactElement`: A React element that renders the article.

**Example**

```ts
import { createElement } from 'react';
import { Article } from 'jg-react-ui/components/typography';
const example = createElement(Article, { children: 'Project settings' });
```

#### <a id="api-ArticleHeader"></a>`ArticleHeader`

*Function*

Renders an article header with compact bottom spacing.

```ts
ArticleHeader(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The header element props.

**Returns** `ReactElement`: A React element that renders the article header.

**Example**

```ts
import { createElement } from 'react';
import { ArticleHeader } from 'jg-react-ui/components/typography';
const example = createElement(ArticleHeader, { children: 'Project settings' });
```

#### <a id="api-AudioInput"></a>`AudioInput`

*Function*

Renders a microphone trigger with a built-in audio dialog.

```ts
AudioInput(props: IAudioInputProps): ReactElement
```

**Parameters**

- `props` `IAudioInputProps`: The audio input configuration, lifecycle callbacks, and wrapper props.

**Returns** `ReactElement`: A React element that renders the audio recording control.

**Example**

```ts
import { createElement } from 'react';
import { AudioInput, type IAudioInputTranscribeHandler, type IAudioInputTranscriptionResultHandler } from 'jg-react-ui/components/audio-input';
declare const transcribe: IAudioInputTranscribeHandler;
declare const onTranscriptionResult: IAudioInputTranscriptionResultHandler;
const example = createElement(AudioInput, { transcribe, onTranscriptionResult });
```

#### <a id="api-Badge"></a>`Badge`

*Function*

Renders a compact status or metadata label using the shared badge variants.

```ts
Badge(props: IBadgeProps): ReactElement
```

**Parameters**

- `props` `IBadgeProps`: The badge element props, visual variant, and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the badge as a span or passes styling to its child.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Badge } from 'jg-react-ui/components/badge';
const example = createElement(Badge, null, 'Example');
```

#### <a id="api-Blockquote"></a>`Blockquote`

*Function*

Renders a prose blockquote with left-border treatment.

```ts
Blockquote(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The blockquote props.

**Returns** `ReactElement`: A React element that renders the blockquote.

**Example**

```ts
import { createElement } from 'react';
import { Blockquote } from 'jg-react-ui/components/typography';
const example = createElement(Blockquote, { children: 'Project settings' });
```

#### <a id="api-ChatMarkdownEditor"></a>`ChatMarkdownEditor`

*Function*

Renders the fixed-policy rich Markdown editor used by chat composer surfaces.

```ts
ChatMarkdownEditor(props: IChatMarkdownEditorProps): ReactElement
```

**Parameters**

- `props` `IChatMarkdownEditorProps`: The controlled value, serialized length limit, controls, and accessibility props.

**Returns** `ReactElement`: A compact, growing rich-text editor with block and selection formatting controls.

**Throws**

- ChatMarkdownEditor maxLength must be a positive safe integer.
- ChatMarkdownEditor maxEditorHeight must be a positive finite number.

**Example**

```ts
import { createElement } from 'react';
import { ChatMarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(ChatMarkdownEditor, { value: '', maxLength: 2048, onChange: () => {} });
```

#### <a id="api-Checkbox"></a>`Checkbox`

*Function*

Renders the shared checkbox control with a checked indicator.

```ts
Checkbox(props: ICheckboxProps): ReactElement
```

**Parameters**

- `props` `ICheckboxProps`: The Base UI checkbox props and indeterminate checked aliases.

**Returns** `ReactElement`: A React element that renders the checkbox.

**Throws**

- Checkbox asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Checkbox } from 'jg-react-ui/components/form';
const example = createElement(Checkbox, { 'aria-label': 'Receive updates' });
```

#### <a id="api-CodeBlock"></a>`CodeBlock`

*Function*

Renders a syntax-highlighted code block using the active theme.

```ts
CodeBlock(props: ICodeBlockProps): ReactElement
```

**Parameters**

- `props` `ICodeBlockProps`: The code block props, source metadata, language, wrapping, and code children.

**Returns** `ReactElement`: A React element that renders the code block.

**Example**

```ts
import { createElement } from 'react';
import { CodeBlock } from 'jg-react-ui/components/typography';
const example = createElement(CodeBlock, { language: 'typescript', filePath: 'src/agent.ts', children: 'const isReady = true;' });
```

#### <a id="api-CodeDiff"></a>`CodeDiff`

*Function*

Renders a theme-aware code diff with responsive split view and optional syntax highlighting.

```ts
CodeDiff(props: ICodeDiffProps): ReactElement
```

**Parameters**

- `props` `ICodeDiffProps`: The code diff content and optional viewer controls.

**Returns** `ReactElement`: A React element that renders the diff between two strings.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { createElement } from 'react';
import { CodeDiff } from 'jg-react-ui/components/code-diff';
const example = createElement(CodeDiff, { oldValue: 'const count = 1;', newValue: 'const count = 2;' });
```

#### <a id="api-CodeFileHeader"></a>`CodeFileHeader`

*Function*

Renders aligned source metadata, keeping the filename visible when its directory truncates.

```ts
CodeFileHeader(props: ICodeFileHeaderProps): ReactElement
```

**Parameters**

- `props` `ICodeFileHeaderProps`: The source path, authored metadata, status, and action slots.

**Returns** `ReactElement`: The source header.

**Example**

```ts
import { createElement } from 'react';
import { CodeFileHeader } from 'jg-react-ui/components/typography';
const example = createElement(CodeFileHeader, { filePath: 'src/agent.ts', fileStatus: 'modified' });
```

#### <a id="api-CodePreferencesControls"></a>`CodePreferencesControls`

*Function*

Renders compact menus that optimistically update shared code-view preferences.

```ts
CodePreferencesControls(
  props: ICodePreferencesControlsProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `ICodePreferencesControlsProps`: The visible preference menus, presentation, and current values.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A control group containing the enabled preference menus.

**Example**

```ts
import { createElement } from 'react';
import { CodePreferencesControls } from 'jg-react-ui/components/code-preferences-controls';
const example = createElement(CodePreferencesControls, { prefersWrappedCode: false, canChangePrefersWrappedCode: true, isInline: true });
```

#### <a id="api-CompactMarkdownEditor"></a>`CompactMarkdownEditor`

*Function*

Renders the compact markdown editor with controls scoped to narrow containers.

```ts
CompactMarkdownEditor(props: IMarkdownEditorVariantProps): ReactElement
```

**Parameters**

- `props` `IMarkdownEditorVariantProps`: The controlled editor props.

**Returns** `ReactElement`: A React element that renders the compact editor.

**Example**

```ts
import { createElement } from 'react';
import { CompactMarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(CompactMarkdownEditor, { value: '## Notes', onChange: () => {} });
```

#### <a id="api-ConfirmationDialog"></a>`ConfirmationDialog`

*Function*

Renders the root-mounted confirmation dialog shell and lets the dialog primitive manage portal presence.

```ts
ConfirmationDialog(): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for the shared confirmation dialog root.

**Example**

```ts
import { createElement } from 'react';
import { ConfirmationDialog } from 'jg-react-ui/components/confirmation-dialog';
const example = createElement(ConfirmationDialog, {});
```

#### <a id="api-CopyButton"></a>`CopyButton`

*Function*

Renders a copy command with optional visible text and copied feedback, copying through jg-clipboard's `copyText` and showing the copied state of jg-react's `useCopyFeedback`. The value can be a function that reads the text after the click, such as a document the page loads on demand.

```ts
CopyButton(props: ICopyButtonProps): ReactElement
```

**Parameters**

- `props` `ICopyButtonProps`: The text value to copy, or what reads it, and the shared button props to render.

**Returns** `ReactElement`: A React element that renders the copy command button.

**Throws**

- Button asChild requires exactly one valid React element child.
- `INVALID_COPY_FEEDBACK_DURATION`: The copy feedback duration must be a positive, finite number of seconds.

**Example**

```ts
import { createElement } from 'react';
import { CopyButton } from 'jg-react-ui/components/copy-button';
const example = createElement(CopyButton, { value: 'pnpm build', copyLabel: 'Copy build command', size: 'icon-touch' });
```

#### <a id="api-Dialog"></a>`Dialog`

*Function*

Provides the dialog root state and accessibility context.

```ts
Dialog(props: IDialogProps): ReactElement
```

**Parameters**

- `props` `IDialogProps`: The Base UI dialog root props.

**Returns** `ReactElement`: A React element that renders the dialog root.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogBody"></a>`DialogBody`

*Function*

Renders the only vertically scrollable region within a dialog surface.

```ts
DialogBody(props: IDialogBodyProps): ReactElement
```

**Parameters**

- `props` `IDialogBodyProps`: The body element props and padding variant.

**Returns** `ReactElement`: A React element that renders the dialog body.

**Throws**

- DialogBody must be rendered inside DialogContent.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogCancel"></a>`DialogCancel`

*Function*

Renders a semantic footer cancel control for page-like dialogs.

```ts
DialogCancel(
  props: IDialogCancelProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `IDialogCancelProps`: The dialog close props and optional slot rendering flag.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for medium and large dialogs, or null when a compact header owns dismissal.

**Throws**

- DialogCancel must be rendered inside DialogContent.
- DialogClose asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogClose"></a>`DialogClose`

*Function*

Renders the interactive element that closes the dialog.

```ts
DialogClose(props: IDialogCloseProps): ReactElement
```

**Parameters**

- `props` `IDialogCloseProps`: The Base UI dialog close props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the dialog close control.

**Throws**

- DialogClose asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogContent"></a>`DialogContent`

*Function*

Renders the themed dialog content inside a portal.

```ts
DialogContent(props: IDialogContentProps): ReactElement
```

**Parameters**

- `props` `IDialogContentProps`: The Base UI dialog popup props and shared dialog options.

**Returns** `ReactElement`: A React element that renders the dialog panel.

**Throws**

- DialogContent asChild requires exactly one valid React element child.
- DialogContent requires direct DialogHeader and DialogBody children, with one optional DialogFooter.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogDescription"></a>`DialogDescription`

*Function*

Provides optional supporting context for the dialog title.

```ts
DialogDescription(props: DialogDescriptionProps): ReactElement
```

**Parameters**

- `props` `DialogDescriptionProps`: The Base UI dialog description props.

**Returns** `ReactElement`: A React element that renders the dialog description.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogFooter"></a>`DialogFooter`

*Function*

Groups dialog actions in a responsive footer layout.

```ts
DialogFooter(props: IDialogFooterProps): ReactElement
```

**Parameters**

- `props` `IDialogFooterProps`: The dialog footer props.

**Returns** `ReactElement`: A React element that renders the dialog footer.

**Throws**

- DialogFooter must be rendered inside DialogContent.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogHeader"></a>`DialogHeader`

*Function*

Groups the dialog title, optional supporting context, and header actions.

```ts
DialogHeader(props: IDialogHeaderProps): ReactElement
```

**Parameters**

- `props` `IDialogHeaderProps`: The dialog header props.

**Returns** `ReactElement`: A React element that renders the dialog header.

**Throws**

- DialogHeader must be rendered inside DialogContent.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogTitle"></a>`DialogTitle`

*Function*

Announces the primary dialog heading.

```ts
DialogTitle(props: DialogTitleProps): ReactElement
```

**Parameters**

- `props` `DialogTitleProps`: The Base UI dialog title props.

**Returns** `ReactElement`: A React element that renders the dialog title.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-DialogTrigger"></a>`DialogTrigger`

*Function*

Renders the interactive element that opens the dialog.

```ts
DialogTrigger(props: IDialogTriggerProps): ReactElement
```

**Parameters**

- `props` `IDialogTriggerProps`: The Base UI dialog trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the dialog trigger.

**Throws**

- DialogTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-Divider"></a>`Divider`

*Function*

Renders a horizontal or vertical separator with the shared border token.

```ts
Divider(props: IDividerProps): ReactElement
```

**Parameters**

- `props` `IDividerProps`: The Base UI separator props and optional orientation.

**Returns** `ReactElement`: A React element that renders the divider.

**Example**

```ts
import { createElement } from 'react';
import { Divider } from 'jg-react-ui/components/divider';
const example = createElement(Divider, { decorative: false, 'aria-label': 'Section boundary' });
```

#### <a id="api-Drawer"></a>`Drawer`

*Function*

Provides a modal side drawer with swipe, focus, and controlled-state behavior.

```ts
Drawer(props: IDrawerProps): ReactElement
```

**Parameters**

- `props` `IDrawerProps`: The drawer root props and required side.

**Returns** `ReactElement`: A React element that renders the drawer root.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerBody"></a>`DrawerBody`

*Function*

Renders the drawer's vertically scrollable content region.

```ts
DrawerBody(props: IDrawerBodyProps): ReactElement
```

**Parameters**

- `props` `IDrawerBodyProps`: The body element props.

**Returns** `ReactElement`: A React element that renders the drawer body.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerClose"></a>`DrawerClose`

*Function*

Renders an interactive element that closes a drawer.

```ts
DrawerClose(props: IDrawerCloseProps): ReactElement
```

**Parameters**

- `props` `IDrawerCloseProps`: The drawer close props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the drawer close control.

**Throws**

- DrawerClose asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerContent"></a>`DrawerContent`

*Function*

Renders a responsive navigation surface with a fixed header and scrolling body.

```ts
DrawerContent(props: IDrawerContentProps): ReactElement
```

**Parameters**

- `props` `IDrawerContentProps`: The drawer popup props and required size.

**Returns** `ReactElement`: A React element that renders the drawer panel.

**Throws**

- DrawerContent must be rendered inside Drawer.
- DrawerContent requires direct DrawerHeader and DrawerBody children, with an optional trailing DrawerFooter.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerDescription"></a>`DrawerDescription`

*Function*

Provides supporting context for the drawer title.

```ts
DrawerDescription(props: DrawerDescriptionProps): ReactElement
```

**Parameters**

- `props` `DrawerDescriptionProps`: The Base UI drawer description props.

**Returns** `ReactElement`: A React element that renders the drawer description.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerFooter"></a>`DrawerFooter`

*Function*

Renders an optional fixed drawer footer below the scrolling body.

```ts
DrawerFooter(props: IDrawerFooterProps): ReactElement
```

**Parameters**

- `props` `IDrawerFooterProps`: The footer element props.

**Returns** `ReactElement`: A React element that renders the drawer footer.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerHeader"></a>`DrawerHeader`

*Function*

Groups the drawer title, description, and optional contextual actions.

```ts
DrawerHeader(props: IDrawerHeaderProps): ReactElement
```

**Parameters**

- `props` `IDrawerHeaderProps`: The drawer header props.

**Returns** `ReactElement`: A React element that renders the drawer header.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerTitle"></a>`DrawerTitle`

*Function*

Announces the drawer heading.

```ts
DrawerTitle(props: DrawerTitleProps): ReactElement
```

**Parameters**

- `props` `DrawerTitleProps`: The Base UI drawer title props.

**Returns** `ReactElement`: A React element that renders the drawer title.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DrawerTrigger"></a>`DrawerTrigger`

*Function*

Renders the interactive element that opens a drawer.

```ts
DrawerTrigger(props: IDrawerTriggerProps): ReactElement
```

**Parameters**

- `props` `IDrawerTriggerProps`: The drawer trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the drawer trigger.

**Throws**

- DrawerTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-DropdownMenu"></a>`DropdownMenu`

*Function*

Provides dropdown menu root state and positioning context.

```ts
DropdownMenu(props: IDropdownMenuProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuProps`: The Base UI menu root props and public callback aliases.

**Returns** `ReactElement`: A React element that renders the dropdown menu root.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenu } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenu, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuCheckboxItem"></a>`DropdownMenuCheckboxItem`

*Function*

Renders a dropdown menu checkbox item with a check indicator.

```ts
DropdownMenuCheckboxItem(props: IDropdownMenuCheckboxItemProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuCheckboxItemProps`: The checkbox item props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu checkbox item.

**Throws**

- DropdownMenuCheckboxItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuCheckboxItem } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuCheckboxItem, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuContent"></a>`DropdownMenuContent`

*Function*

Renders themed dropdown menu content inside a portal.

```ts
DropdownMenuContent(props: IDropdownMenuContentProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuContentProps`: The Base UI menu popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the dropdown menu content.

**Throws**

- DropdownMenuContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuContent } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuContent, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuGroup"></a>`DropdownMenuGroup`

*Function*

Groups related dropdown menu items.

```ts
DropdownMenuGroup(props: MenuGroupProps): ReactElement
```

**Parameters**

- `props` `MenuGroupProps`: The Base UI menu group props.

**Returns** `ReactElement`: A React element that renders the dropdown menu group.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuGroup } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuGroup, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuItem"></a>`DropdownMenuItem`

*Function*

Renders a selectable dropdown menu item.

```ts
DropdownMenuItem(props: IDropdownMenuItemProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuItemProps`: The menu item props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu item.

**Throws**

- DropdownMenuItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuItem } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuItem, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuLabel"></a>`DropdownMenuLabel`

*Function*

Renders a non-interactive dropdown menu label.

```ts
DropdownMenuLabel(props: IDropdownMenuLabelProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuLabelProps`: The label props and optional inset alignment.

**Returns** `ReactElement`: A React element that renders the dropdown menu label.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuLabel } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuLabel, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuRadioGroup"></a>`DropdownMenuRadioGroup`

*Function*

Provides selection state for dropdown menu radio items.

```ts
DropdownMenuRadioGroup(props: IDropdownMenuRadioGroupProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuRadioGroupProps`: The Base UI menu radio group props.

**Returns** `ReactElement`: A React element that renders the dropdown menu radio group.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuRadioGroup } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuRadioGroup, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuRadioItem"></a>`DropdownMenuRadioItem`

*Function*

Renders a dropdown menu radio item with a selection indicator.

```ts
DropdownMenuRadioItem(props: IDropdownMenuRadioItemProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuRadioItemProps`: The radio item props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu radio item.

**Throws**

- DropdownMenuRadioItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuRadioItem } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuRadioItem, { value: 'personal', children: 'Personal' });
```

#### <a id="api-DropdownMenuSeparator"></a>`DropdownMenuSeparator`

*Function*

Renders a visual divider between dropdown menu groups.

```ts
DropdownMenuSeparator(props: SeparatorProps): ReactElement
```

**Parameters**

- `props` `SeparatorProps`: The Base UI menu separator props.

**Returns** `ReactElement`: A React element that renders the dropdown menu separator.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSeparator } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSeparator, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuShortcut"></a>`DropdownMenuShortcut`

*Function*

Renders right-aligned shortcut text for a dropdown menu item.

```ts
DropdownMenuShortcut(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The shortcut span props.

**Returns** `ReactElement`: A React element that renders the dropdown menu shortcut.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuShortcut } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuShortcut, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuSub"></a>`DropdownMenuSub`

*Function*

Provides nested dropdown menu state.

```ts
DropdownMenuSub(props: IDropdownMenuSubProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuSubProps`: The Base UI submenu root props and public callback aliases.

**Returns** `ReactElement`: A React element that renders the dropdown menu sub root.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSub } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSub, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuSubContent"></a>`DropdownMenuSubContent`

*Function*

Renders nested dropdown menu content.

```ts
DropdownMenuSubContent(props: IDropdownMenuContentProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuContentProps`: The Base UI menu popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the dropdown menu sub content.

**Throws**

- DropdownMenuContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSubContent } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSubContent, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuSubTrigger"></a>`DropdownMenuSubTrigger`

*Function*

Renders the trigger that opens a nested dropdown menu.

```ts
DropdownMenuSubTrigger(props: IDropdownMenuSubTriggerProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuSubTriggerProps`: The sub trigger props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu sub trigger.

**Throws**

- DropdownMenuSubTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSubTrigger } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSubTrigger, { children: 'Project settings' });
```

#### <a id="api-DropdownMenuTrigger"></a>`DropdownMenuTrigger`

*Function*

Renders the interactive element that opens the dropdown menu.

```ts
DropdownMenuTrigger(props: IDropdownMenuTriggerProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuTriggerProps`: The Base UI menu trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the dropdown menu trigger.

**Throws**

- DropdownMenuTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuTrigger } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuTrigger, { children: 'Project settings' });
```

#### <a id="api-EmptyState"></a>`EmptyState`

*Function*

Renders a centered dashed container for an absent or filtered result.

```ts
EmptyState(props: IEmptyStateProps): ReactElement
```

**Parameters**

- `props` `IEmptyStateProps`: The container attributes, content, classes, and optional slotted child.

**Returns** `ReactElement`: A React element that renders the empty-state container.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { EmptyState } from 'jg-react-ui/components/empty-state';
const example = createElement(EmptyState, { children: 'No records found' });
```

#### <a id="api-EmptyStateDescription"></a>`EmptyStateDescription`

*Function*

Renders supporting empty-state guidance.

```ts
EmptyStateDescription(props: IEmptyStateDescriptionProps): ReactElement
```

**Parameters**

- `props` `IEmptyStateDescriptionProps`: The description attributes, content, classes, and optional slotted child.

**Returns** `ReactElement`: A React element that renders the empty-state description.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { EmptyStateDescription } from 'jg-react-ui/components/empty-state';
const example = createElement(EmptyStateDescription, { children: 'Upload a file to get started.' });
```

#### <a id="api-EmptyStateTitle"></a>`EmptyStateTitle`

*Function*

Renders the primary empty-state message.

```ts
EmptyStateTitle(props: IEmptyStateTitleProps): ReactElement
```

**Parameters**

- `props` `IEmptyStateTitleProps`: The title attributes, content, classes, and optional slotted child.

**Returns** `ReactElement`: A React element that renders the empty-state title.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { EmptyStateTitle } from 'jg-react-ui/components/empty-state';
const example = createElement(EmptyStateTitle, { children: 'No records found' });
```

#### <a id="api-ErrorFeedbackProvider"></a>`ErrorFeedbackProvider`

*Function*

Scopes application-owned error copy and access-loss policy to a React tree.

```ts
ErrorFeedbackProvider(props: IErrorFeedbackProviderProps): ReactElement
```

**Parameters**

- `props` `IErrorFeedbackProviderProps`: The optional resolver and children that consume it.

**Returns** `ReactElement`: The scoped error-feedback context, with stable identity for an unchanged resolver.

**Example**

```ts
import { createElement } from 'react';
import { createErrorFeedback } from 'jg-exception';
import { ErrorFeedbackProvider } from 'jg-react-ui/components/error-feedback-provider';
const resolver = createErrorFeedback({ fallbackMessage: 'Please try again.' });
const example = createElement(ErrorFeedbackProvider, { resolveErrorFeedback: resolver, children: 'App' });
```

#### <a id="api-Field"></a>`Field`

*Function*

Renders a vertical field wrapper for one label, control, and help text group.

```ts
Field(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The field wrapper props.

**Returns** `ReactElement`: A React element that renders the field.

**Example**

```ts
import { createElement } from 'react';
import { Field } from 'jg-react-ui/components/form';
const example = createElement(Field, { children: 'Project settings' });
```

#### <a id="api-FieldDescription"></a>`FieldDescription`

*Function*

Renders supporting help text for a field.

```ts
FieldDescription(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the field description.

**Example**

```ts
import { createElement } from 'react';
import { FieldDescription } from 'jg-react-ui/components/form';
const example = createElement(FieldDescription, { children: 'Project settings' });
```

#### <a id="api-FieldError"></a>`FieldError`

*Function*

Renders validation error text for a field.

```ts
FieldError(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the field error.

**Example**

```ts
import { createElement } from 'react';
import { FieldError } from 'jg-react-ui/components/form';
const example = createElement(FieldError, { children: 'Project settings' });
```

#### <a id="api-FieldGroup"></a>`FieldGroup`

*Function*

Renders a vertical group for multiple fields or choices.

```ts
FieldGroup(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The group wrapper props.

**Returns** `ReactElement`: A React element that renders the field group.

**Example**

```ts
import { createElement } from 'react';
import { FieldGroup } from 'jg-react-ui/components/form';
const example = createElement(FieldGroup, { children: 'Project settings' });
```

#### <a id="api-FieldLegend"></a>`FieldLegend`

*Function*

Renders a compact legend for grouped form controls.

```ts
FieldLegend(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The legend props.

**Returns** `ReactElement`: A React element that renders the field legend.

**Example**

```ts
import { createElement } from 'react';
import { FieldLegend } from 'jg-react-ui/components/form';
const example = createElement(FieldLegend, { children: 'Project settings' });
```

#### <a id="api-FieldSet"></a>`FieldSet`

*Function*

Renders a fieldset without browser default border spacing.

```ts
FieldSet(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The fieldset props.

**Returns** `ReactElement`: A React element that renders the fieldset.

**Example**

```ts
import { createElement } from 'react';
import { FieldSet } from 'jg-react-ui/components/form';
const example = createElement(FieldSet, { children: 'Project settings' });
```

#### <a id="api-FileUpload"></a>`FileUpload`

*Function*

Renders a transport-neutral file picker with validation, bounded concurrency, and progress. Collapses the selection area after uploading starts and preserves subsequent user toggles.

```ts
FileUpload<TResult>(props: IFileUploadProps<TResult>): ReactElement
```

**Parameters**

- `props` `IFileUploadProps<TResult>`: The file policy, injected upload handler, lifecycle callbacks, and presentation.

**Returns** `ReactElement`: A responsive, accessible file upload queue.

**Throws**

- `INVALID_FILE_UPLOAD_POLICY`: The accepted file types must be an array.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a string.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a file extension, such as .png, or a MIME type, such as image/png.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file size must be a positive integer of bytes.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file count must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum concurrent uploads must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum total size must be a positive integer of bytes, when given.

**Example**

```ts
import { createElement } from 'react';
import { FileUpload, type IFileUploadProps } from 'jg-react-ui/components/file-upload';
declare const uploadFile: IFileUploadProps<string>['uploadFile'];
const example = createElement(FileUpload<string>, { acceptedFileTypes: ['text/plain'], maxFileBytes: 4096, uploadFile });
```

#### <a id="api-FileUploadDialog"></a>`FileUploadDialog`

*Function*

Renders an immediate-upload queue and finalizes its successful results through the owning app. Explicitly reopening selection requires manual submission for the rest of the session.

```ts
FileUploadDialog<TResult>(props: IFileUploadDialogProps<TResult>): ReactElement
```

**Parameters**

- `props` `IFileUploadDialogProps<TResult>`: The dialog state, upload policy, finalization callbacks, and optional trigger.

**Returns** `ReactElement`: A responsive upload dialog with automatic and recoverable manual finalization.

**Throws**

- `INVALID_FILE_UPLOAD_POLICY`: The accepted file types must be an array.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a string.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a file extension, such as .png, or a MIME type, such as image/png.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file size must be a positive integer of bytes.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file count must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum concurrent uploads must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum total size must be a positive integer of bytes, when given.

**Example**

```ts
import { createElement } from 'react';
import { FileUploadDialog, type IFileUploadProps, type IFileUploadDialogSubmitHandler } from 'jg-react-ui/components/file-upload';
declare const uploadFile: IFileUploadProps<string>['uploadFile'];
declare const onSubmit: IFileUploadDialogSubmitHandler<string>;
const example = createElement(FileUploadDialog<string>, { fileUploadProps: { acceptedFileTypes: ['text/plain'], maxFileBytes: 4096, uploadFile }, onSubmit });
```

#### <a id="api-formatRepositoryPath"></a>`formatRepositoryPath`

*Function*

Formats a root-relative repository path for display by removing one leading slash. Copied values and native output keep the exact path.

```ts
formatRepositoryPath(path: string): string
```

**Parameters**

- `path` `string`: The repository path, such as `/workspace/project.md`.

**Returns** `string`: The display path, such as `workspace/project.md`.

**Example**

```ts
import { formatRepositoryPath } from 'jg-react-ui/components/inline-code';
const path = formatRepositoryPath('/workspace/project.md');
```

#### <a id="api-getMarkdownImageDisplayWidth"></a>`getMarkdownImageDisplayWidth`

*Function*

Reads a reserved width=<pixels> image title without interpreting ordinary title text.

```ts
getMarkdownImageDisplayWidth(title: string | undefined): number | undefined
```

**Parameters**

- `title` `string | undefined`: The optional title emitted by the Markdown image parser.

**Returns** `number | undefined`: A positive integer display width, or undefined for ordinary or invalid titles.

**Example**

```ts
import { getMarkdownImageDisplayWidth } from 'jg-react-ui/components/markdown';
getMarkdownImageDisplayWidth('width=560'); // => 560
```

#### <a id="api-getUiPreferencesStorageKey"></a>`getUiPreferencesStorageKey`

*Function*

Derives the raw preference key using jg-storage's namespace rules.

```ts
getUiPreferencesStorageKey(storageId?: string): string
```

**Parameters**

- `storageId?` `string`: The non-empty namespace containing letters, digits, underscores, or hyphens. Defaults to `UI_PREFERENCES_STORE_ID`.

**Returns** `string`: The raw localStorage key shared by persistence, storage events, and the pre-paint script.

**Throws**

- `UI_PREFERENCES_STORAGE_ID_INVALID`: UI preferences storage ID must be a non-empty string containing only letters, digits, underscores, and hyphens.

**Example**

```ts
import { getUiPreferencesStorageKey } from 'jg-react-ui/contracts';
const key = getUiPreferencesStorageKey('personal-hq');
```

#### <a id="api-GlobalErrorBoundary"></a>`GlobalErrorBoundary`

*Function*

Renders the route-level global error boundary using React Router's thrown error.

```ts
GlobalErrorBoundary(props: IGlobalErrorBoundaryProps): ReactElement
```

**Parameters**

- `props` `IGlobalErrorBoundaryProps`: Optional copy, styling, and refresh behavior overrides.

**Returns** `ReactElement`: A React element that renders the global error recovery screen.

**Example**

```ts
import { createElement } from 'react';
import { createBrowserRouter } from 'react-router';
import { GlobalErrorBoundary } from 'jg-react-ui/components/global-error-boundary';
const router = createBrowserRouter([{ path: '/', element: 'Home', errorElement: createElement(GlobalErrorBoundary) }]);
```

#### <a id="api-GlobalErrorBoundaryView"></a>`GlobalErrorBoundaryView`

*Function*

Renders the full-screen global error fallback from an explicit error value.

```ts
GlobalErrorBoundaryView(props: IGlobalErrorBoundaryViewProps): ReactElement
```

**Parameters**

- `props` `IGlobalErrorBoundaryViewProps`: The thrown error, optional copy, refresh handler, and root attributes.

**Returns** `ReactElement`: A React element that renders the global error recovery screen.

**Example**

```ts
import { createElement } from 'react';
import { GlobalErrorBoundaryView } from 'jg-react-ui/components/global-error-boundary';
const example = createElement(GlobalErrorBoundaryView, { error: new Error('Private diagnostics'), onRefreshClick: async () => undefined });
```

#### <a id="api-Heading"></a>`Heading`

*Function*

Renders a semantic heading for the supported typography scale.

```ts
Heading(props: IHeadingProps): ReactElement
```

**Parameters**

- `props` `IHeadingProps`: The heading props and required heading level.

**Returns** `ReactElement`: A React element that renders the selected heading element.

**Example**

```ts
import { createElement } from 'react';
import { Heading } from 'jg-react-ui/components/typography';
const example = createElement(Heading, { level: 2, children: 'Project settings' });
```

#### <a id="api-IconTile"></a>`IconTile`

*Function*

Renders the rounded-square tile that holds a leading icon, stacked media icon, or step number. The tile is decorative by default; pass `aria-hidden={false}` when its content, such as a step number, must be announced.

```ts
IconTile(props: IIconTileProps): ReactElement
```

**Parameters**

- `props` `IIconTileProps`: The span props, the named size, and the status tone.

**Returns** `ReactElement`: A React element that renders the icon tile.

**Example**

```ts
import { createElement } from 'react';
import { IconTile } from 'jg-react-ui/components/icon-tile';
const example = createElement(IconTile, null, 'Example');
```

#### <a id="api-ImageUploadField"></a>`ImageUploadField`

*Function*

Renders a controlled image asset card backed by the shared upload dialog.

```ts
ImageUploadField<TResult>(props: IImageUploadFieldProps<TResult>): ReactElement
```

**Parameters**

- `props` `IImageUploadFieldProps<TResult>`: The current image, upload policy, finalization callbacks, and presentation.

**Returns** `ReactElement`: A responsive asset card for choosing, replacing, or removing one image.

**Throws**

- `INVALID_FILE_UPLOAD_POLICY`: The accepted file types must be an array.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a string.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a file extension, such as .png, or a MIME type, such as image/png.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file size must be a positive integer of bytes.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file count must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum concurrent uploads must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum total size must be a positive integer of bytes, when given.

**Example**

```ts
import { createElement } from 'react';
import { ImageUploadField, type IImageUploadFieldProps } from 'jg-react-ui/components/file-upload';
declare const uploadFile: IImageUploadFieldProps<string>['uploadFile'];
declare const onSubmit: IImageUploadFieldProps<string>['onSubmit'];
const example = createElement(ImageUploadField<string>, { acceptedFileTypes: ['image/png'], maxFileBytes: 4096, uploadFile, onSubmit });
```

#### <a id="api-Inline"></a>`Inline`

*Function*

Renders a wrapping inline layout for compact controls and metadata.

```ts
Inline(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The div element props.

**Returns** `ReactElement`: A React element that renders the inline group.

**Example**

```ts
import { createElement } from 'react';
import { Inline } from 'jg-react-ui/components/layout';
const example = createElement(Inline, { children: 'Project details' });
```

#### <a id="api-InlineCode"></a>`InlineCode`

*Function*

Renders inline code with preferred breaks after `/`, `_`, `.` or `-`. Unbroken tokens can wrap when needed to fit the available width.

```ts
InlineCode(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The code element props.

**Returns** `ReactElement`: A React element that renders the inline code.

**Example**

```ts
import { createElement } from 'react';
import { InlineCode } from 'jg-react-ui/components/inline-code';
const example = createElement(InlineCode, { children: 'config/theme.ts' });
```

#### <a id="api-Input"></a>`Input`

*Function*

Renders the shared text input surface.

```ts
Input(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The native input props.

**Returns** `ReactElement`: A React element that renders the input.

**Example**

```ts
import { createElement } from 'react';
import { Input } from 'jg-react-ui/components/form';
const example = createElement(Input, { 'aria-label': 'Project name', name: 'projectName' });
```

#### <a id="api-isCodeBlockProse"></a>`isCodeBlockProse`

*Function*

Returns whether declared source metadata identifies prose that should wrap by default.

```ts
isCodeBlockProse(filePath?: string, language?: string): boolean
```

**Parameters**

- `filePath?` `string`: An optional repository path.
- `language?` `string`: An optional declared syntax identifier.

**Returns** `boolean`: Whether the source should wrap automatically.

**Example**

```ts
import { isCodeBlockProse } from 'jg-react-ui/components/typography';
isCodeBlockProse('README.md'); // => true
```

#### <a id="api-KeyboardKey"></a>`KeyboardKey`

*Function*

Renders keyboard shortcut text with keycap styling.

```ts
KeyboardKey(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The keyboard element props.

**Returns** `ReactElement`: A React element that renders the keyboard key.

**Example**

```ts
import { createElement } from 'react';
import { KeyboardKey } from 'jg-react-ui/components/typography';
const example = createElement(KeyboardKey, { children: 'Project settings' });
```

#### <a id="api-Label"></a>`Label`

*Function*

Renders an accessible native form label.

```ts
Label(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The native label props.

**Returns** `ReactElement`: A React element that renders the label.

**Example**

```ts
import { createElement } from 'react';
import { Label } from 'jg-react-ui/components/form';
const example = createElement(Label, { htmlFor: 'project-name', children: 'Project name' });
```

#### <a id="api-LargeText"></a>`LargeText`

*Function*

Renders larger emphasized inline prose.

```ts
LargeText(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the large text.

**Example**

```ts
import { createElement } from 'react';
import { LargeText } from 'jg-react-ui/components/typography';
const example = createElement(LargeText, { children: 'Project settings' });
```

#### <a id="api-LazyRouteProgress"></a>`LazyRouteProgress`

*Function*

Renders the fixed top indicator shown while a lazy route chunk is loading.

```ts
LazyRouteProgress(): ReactElement
```

**Returns** `ReactElement`: A React element that renders an indeterminate progress bar outside document flow.

**Example**

```ts
import { createElement } from 'react';
import { LazyRouteProgress } from 'jg-react-ui/components/lazy-route-progress';
const example = createElement(LazyRouteProgress);
```

#### <a id="api-Lead"></a>`Lead`

*Function*

Renders emphasized introductory prose.

```ts
Lead(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the lead text.

**Example**

```ts
import { createElement } from 'react';
import { Lead } from 'jg-react-ui/components/typography';
const example = createElement(Lead, { children: 'Project settings' });
```

#### <a id="api-ListItem"></a>`ListItem`

*Function*

Renders a prose list item.

```ts
ListItem(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The list item props.

**Returns** `ReactElement`: A React element that renders the list item.

**Example**

```ts
import { createElement } from 'react';
import { ListItem } from 'jg-react-ui/components/typography';
const example = createElement(ListItem, { children: 'Project settings' });
```

#### <a id="api-LoadMoreButton"></a>`LoadMoreButton`

*Function*

Renders a reusable load-more command with customizable idle and loading presentation. Visible text supplies its accessible name unless the corresponding ARIA label is explicitly set.

```ts
LoadMoreButton(
  props: ILoadMoreButtonProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `ILoadMoreButtonProps`: The infinite query plus load-more labels, icons, and shared button props.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element that renders the load-more control, or null when no page remains.

**Example**

```ts
import { createElement } from 'react';
import { LoadMoreButton } from 'jg-react-ui/components/load-more-button';
const example = createElement(LoadMoreButton, { query: { isError: false, hasNextPage: true, fetchNextPage: async () => undefined } });
```

#### <a id="api-Markdown"></a>`Markdown`

*Function*

Renders trusted markdown text through the shared typography system.

```ts
Markdown(props: IMarkdownProps): ReactElement
```

**Parameters**

- `props` `IMarkdownProps`: The markdown content and optional renderer overrides.

**Returns** `ReactElement`: A React element that renders the markdown document.

**Example**

```ts
import { createElement } from 'react';
import { Markdown } from 'jg-react-ui/components/markdown';
const example = createElement(Markdown, { children: '## Deployment\n\nReady to review.' });
```

#### <a id="api-MarkdownEditor"></a>`MarkdownEditor`

*Function*

Selects the compact or wide markdown editor from its available container width.

```ts
MarkdownEditor(props: IMarkdownEditorProps): ReactElement
```

**Parameters**

- `props` `IMarkdownEditorProps`: The controlled editor props and optional responsive layout override.

**Returns** `ReactElement`: A React element that renders the selected editor implementation.

**Example**

```ts
import { createElement } from 'react';
import { MarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(MarkdownEditor, { value: '## Notes', onChange: () => {} });
```

#### <a id="api-MutedText"></a>`MutedText`

*Function*

Renders lower-emphasis supporting prose.

```ts
MutedText(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the muted text.

**Example**

```ts
import { createElement } from 'react';
import { MutedText } from 'jg-react-ui/components/typography';
const example = createElement(MutedText, { children: 'Project settings' });
```

#### <a id="api-OrderedList"></a>`OrderedList`

*Function*

Renders a prose ordered list.

```ts
OrderedList(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The ordered list props.

**Returns** `ReactElement`: A React element that renders the ordered list.

**Example**

```ts
import { createElement } from 'react';
import { OrderedList } from 'jg-react-ui/components/typography';
const example = createElement(OrderedList, { children: 'Project settings' });
```

#### <a id="api-PageDescription"></a>`PageDescription`

*Function*

Renders supporting page-level description text.

```ts
PageDescription(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph element props.

**Returns** `ReactElement`: A React element that renders the page description.

**Example**

```ts
import { createElement } from 'react';
import { PageDescription } from 'jg-react-ui/components/layout';
const example = createElement(PageDescription, { children: 'Project details' });
```

#### <a id="api-PageHeader"></a>`PageHeader`

*Function*

Renders a page header region with shared responsive spacing.

```ts
PageHeader(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The header element props.

**Returns** `ReactElement`: A React element that renders the page header.

**Example**

```ts
import { createElement } from 'react';
import { PageHeader } from 'jg-react-ui/components/layout';
const example = createElement(PageHeader, { children: 'Project details' });
```

#### <a id="api-PageHeaderMetadata"></a>`PageHeaderMetadata`

*Function*

Renders page-level metadata beside the title across responsive layouts.

```ts
PageHeaderMetadata(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The metadata-group element props.

**Returns** `ReactElement`: A React element that renders the responsive metadata group.

**Example**

```ts
import { createElement } from 'react';
import { PageHeaderMetadata } from 'jg-react-ui/components/layout';
const example = createElement(PageHeaderMetadata, { children: 'Project details' });
```

#### <a id="api-PageHeaderRow"></a>`PageHeaderRow`

*Function*

Aligns the page title group with page-level actions across responsive layouts.

```ts
PageHeaderRow(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The header-row element props.

**Returns** `ReactElement`: A React element that renders the responsive header row.

**Example**

```ts
import { createElement } from 'react';
import { PageHeaderRow } from 'jg-react-ui/components/layout';
const example = createElement(PageHeaderRow, { children: 'Project details' });
```

#### <a id="api-PageHeaderTitleGroup"></a>`PageHeaderTitleGroup`

*Function*

Groups the page title and metadata on one responsive row.

```ts
PageHeaderTitleGroup(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The title-group element props.

**Returns** `ReactElement`: A React element that renders the responsive title group.

**Example**

```ts
import { createElement } from 'react';
import { PageHeaderTitleGroup } from 'jg-react-ui/components/layout';
const example = createElement(PageHeaderTitleGroup, { children: 'Project details' });
```

#### <a id="api-PageShell"></a>`PageShell`

*Function*

Renders the main page shell with shared app spacing and background.

```ts
PageShell(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The main element props.

**Returns** `ReactElement`: A React element that renders the page shell.

**Example**

```ts
import { createElement } from 'react';
import { PageShell } from 'jg-react-ui/components/layout';
const example = createElement(PageShell, { children: 'Project details' });
```

#### <a id="api-PageTitle"></a>`PageTitle`

*Function*

Renders the primary page heading.

```ts
PageTitle(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The heading element props.

**Returns** `ReactElement`: A React element that renders the page title.

**Example**

```ts
import { createElement } from 'react';
import { PageTitle } from 'jg-react-ui/components/layout';
const example = createElement(PageTitle, { children: 'Project details' });
```

#### <a id="api-Paragraph"></a>`Paragraph`

*Function*

Renders a default prose paragraph.

```ts
Paragraph(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the paragraph.

**Example**

```ts
import { createElement } from 'react';
import { Paragraph } from 'jg-react-ui/components/typography';
const example = createElement(Paragraph, { children: 'Project settings' });
```

#### <a id="api-parseYouTubeVideoUrl"></a>`parseYouTubeVideoUrl`

*Function*

Parses an authored URL into the retained single-video descriptor.

```ts
parseYouTubeVideoUrl(
  sourceUrl: unknown,
  title?: unknown,
): IYouTubeVideoDescriptor | null
```

**Parameters**

- `sourceUrl` `unknown`: The URL candidate.
- `title?` `unknown`: An optional plain-text label.

**Returns** `IYouTubeVideoDescriptor | null`: A validated descriptor, or null for unsupported input.

**Example**

```ts
import { parseYouTubeVideoUrl } from 'jg-react-ui/components/youtube-video';
const video = parseYouTubeVideoUrl('https://youtu.be/M7lc1UVf-VE', 'Walkthrough');
```

#### <a id="api-Progress"></a>`Progress`

*Function*

Renders a themed Base UI progress bar in determinate or indeterminate mode.

```ts
Progress(props: IProgressProps): ReactElement
```

**Parameters**

- `props` `IProgressProps`: The progress props for the desired mode.

**Returns** `ReactElement`: A React element that renders the track and animated indicator.

**Example**

```ts
import { createElement } from 'react';
import { Progress } from 'jg-react-ui/components/progress';
const example = createElement(Progress, { value: 32, 'aria-label': 'Upload progress' });
```

#### <a id="api-QueryBoundary"></a>`QueryBoundary`

*Function*

Composes query feedback while protecting content across initial and background resolution states.

```ts
QueryBoundary(props: IQueryBoundaryProps): ReactElement
```

**Parameters**

- `props` `IQueryBoundaryProps`: The shared query list, optional content, pass-through props, and render overrides.

**Returns** `ReactElement`: A React element containing the enabled query boundary slots.

**Example**

```ts
import { createElement } from 'react';
import { QueryBoundary } from 'jg-react-ui/components/query-boundary';
const query = { data: 'Current data', error: null, isError: false, isStale: false, isFetchedAfterMount: true, refetch: async () => undefined };
const example = createElement(QueryBoundary, { queries: [query], resolutionKey: 'records', children: 'Records' });
```

#### <a id="api-QueryErrorAlert"></a>`QueryErrorAlert`

*Function*

Renders an alert for failed queries with the first error message, code, and retry action.

```ts
QueryErrorAlert(
  props: IQueryErrorAlertProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `IQueryErrorAlertProps`: The failed query results and optional copy.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for the query error alert, or null when no query has failed.

**Example**

```ts
import { createElement } from 'react';
import { QueryErrorAlert } from 'jg-react-ui/components/query-error-alert';
const query = { error: new Error('Private diagnostics'), isError: true, refetch: async () => undefined };
const example = createElement(QueryErrorAlert, { presentation: 'blocking', queries: [query] });
```

#### <a id="api-QueryErrorToastr"></a>`QueryErrorToastr`

*Function*

Presents retained query failures through one persistent, retryable toast without affecting layout.

```ts
QueryErrorToastr(props: IQueryErrorToastrProps): null
```

**Parameters**

- `props` `IQueryErrorToastrProps`: The failed queries, stable toast identity, and optional recovery copy.

**Returns** `null`: No layout node. Feedback is published through the shared toastr host.

**Example**

```ts
import { createElement } from 'react';
import { QueryErrorToastr } from 'jg-react-ui/components/query-error-alert';
const query = { error: new Error('Private diagnostics'), isError: true, refetch: async () => undefined };
const example = createElement(QueryErrorToastr, { toastId: 'records-refresh', queries: [query] });
```

#### <a id="api-QueryLoader"></a>`QueryLoader`

*Function*

Renders a centered spinner while any provided query is loading or visibility is requested.

```ts
QueryLoader(
  props: IQueryLoaderProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `IQueryLoaderProps`: The structural query results and optional wrapper or spinner presentation.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for the loader, or null when every query has settled.

**Example**

```ts
import { createElement } from 'react';
import { QueryLoader } from 'jg-react-ui/components/query-loader';
const example = createElement(QueryLoader, { queries: [{ isError: false, isPending: true }], layout: 'dialog' });
```

#### <a id="api-RadioGroup"></a>`RadioGroup`

*Function*

Provides radio group state and layout.

```ts
RadioGroup(props: IRadioGroupProps): ReactElement
```

**Parameters**

- `props` `IRadioGroupProps`: The Base UI radio group props and keyboard options.

**Returns** `ReactElement`: A React element that renders the radio group.

**Example**

```ts
import { createElement } from 'react';
import { RadioGroup } from 'jg-react-ui/components/form';
const example = createElement(RadioGroup, { children: 'Project settings' });
```

#### <a id="api-RadioGroupItem"></a>`RadioGroupItem`

*Function*

Renders an individual radio option with a selected indicator.

```ts
RadioGroupItem(props: IRadioGroupItemProps): ReactElement
```

**Parameters**

- `props` `IRadioGroupItemProps`: The Base UI radio item props.

**Returns** `ReactElement`: A React element that renders the radio group item.

**Throws**

- RadioGroupItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { RadioGroupItem } from 'jg-react-ui/components/form';
const example = createElement(RadioGroupItem, { value: 'personal', 'aria-label': 'Personal workspace' });
```

#### <a id="api-RouterRoot"></a>`RouterRoot`

*Function*

Renders the route outlet with fixed top progress feedback during pending navigations.

```ts
RouterRoot(): ReactElement
```

**Returns** `ReactElement`: A React element that renders global router loading feedback and the matched route.

**Example**

```ts
import { createElement } from 'react';
import { createBrowserRouter } from 'react-router';
import { RouterRoot } from 'jg-react-ui/components/router-root';
const router = createBrowserRouter([{ element: createElement(RouterRoot), children: [{ path: '/', element: 'Home' }] }]);
```

#### <a id="api-Section"></a>`Section`

*Function*

Renders a prose section with consistent vertical spacing.

```ts
Section(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The section element props.

**Returns** `ReactElement`: A React element that renders the section.

**Example**

```ts
import { createElement } from 'react';
import { Section } from 'jg-react-ui/components/typography';
const example = createElement(Section, { children: 'Project settings' });
```

#### <a id="api-Select"></a>`Select`

*Function*

Provides select state through the Base UI select root.

```ts
Select(props: ISelectProps): ReactElement
```

**Parameters**

- `props` `ISelectProps`: The Base UI select root props and public callback aliases.

**Returns** `ReactElement`: A React element that renders the select root.

**Example**

```ts
import { createElement } from 'react';
import { Select } from 'jg-react-ui/components/form';
const example = createElement(Select, { children: 'Project settings' });
```

#### <a id="api-SelectContent"></a>`SelectContent`

*Function*

Renders themed select content inside a portal.

```ts
SelectContent(props: ISelectContentProps): ReactElement
```

**Parameters**

- `props` `ISelectContentProps`: The Base UI select popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the select content.

**Throws**

- SelectContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectContent } from 'jg-react-ui/components/form';
const example = createElement(SelectContent, { children: 'Project settings' });
```

#### <a id="api-SelectItem"></a>`SelectItem`

*Function*

Renders a select option with a check indicator.

```ts
SelectItem(props: ISelectItemProps): ReactElement
```

**Parameters**

- `props` `ISelectItemProps`: The Base UI select item props and optional text label alias.

**Returns** `ReactElement`: A React element that renders the select item.

**Throws**

- SelectItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectItem } from 'jg-react-ui/components/form';
const example = createElement(SelectItem, { value: 'personal', children: 'Personal' });
```

#### <a id="api-SelectTrigger"></a>`SelectTrigger`

*Function*

Renders the select trigger with the shared input surface styling.

```ts
SelectTrigger(props: ISelectTriggerProps): ReactElement
```

**Parameters**

- `props` `ISelectTriggerProps`: The Base UI select trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the select trigger.

**Throws**

- SelectTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectTrigger } from 'jg-react-ui/components/form';
const example = createElement(SelectTrigger, { children: 'Project settings' });
```

#### <a id="api-SelectValue"></a>`SelectValue`

*Function*

Renders selected select value text or placeholder content.

```ts
SelectValue(props: ISelectValueProps): ReactElement
```

**Parameters**

- `props` `ISelectValueProps`: The Base UI select value props.

**Returns** `ReactElement`: A React element that renders the select value.

**Throws**

- SelectValue asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectValue } from 'jg-react-ui/components/form';
const example = createElement(SelectValue, { children: 'Project settings' });
```

#### <a id="api-SmallText"></a>`SmallText`

*Function*

Renders small supporting text with block layout.

```ts
SmallText(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The small element props.

**Returns** `ReactElement`: A React element that renders the small text.

**Example**

```ts
import { createElement } from 'react';
import { SmallText } from 'jg-react-ui/components/typography';
const example = createElement(SmallText, { children: 'Project settings' });
```

#### <a id="api-Spinner"></a>`Spinner`

*Function*

Renders an accessible loading spinner using the shared icon size and animation.

```ts
Spinner(
  props: Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>,
): ReactElement
```

**Parameters**

- `props` `Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>`: The spinner icon props and optional accessibility overrides.

**Returns** `ReactElement`: A React element that renders the spinner.

**Example**

```ts
import { createElement } from 'react';
import { Spinner } from 'jg-react-ui/components/spinner';
const example = createElement(Spinner, { 'aria-label': 'Loading records' });
```

#### <a id="api-Stack"></a>`Stack`

*Function*

Renders a vertical layout stack for grouped content.

```ts
Stack(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The div element props.

**Returns** `ReactElement`: A React element that renders the stack.

**Example**

```ts
import { createElement } from 'react';
import { Stack } from 'jg-react-ui/components/layout';
const example = createElement(Stack, { children: 'Project details' });
```

#### <a id="api-Surface"></a>`Surface`

*Function*

Renders a section surface for framed app content.

```ts
Surface(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The section element props.

**Returns** `ReactElement`: A React element that renders the surface.

**Example**

```ts
import { createElement } from 'react';
import { Surface } from 'jg-react-ui/components/layout';
const example = createElement(Surface, { children: 'Project details' });
```

#### <a id="api-Switch"></a>`Switch`

*Function*

Renders a binary switch control, with a 44px target around it on touch screens.

```ts
Switch(props: ISwitchProps): ReactElement
```

**Parameters**

- `props` `ISwitchProps`: The Base UI switch props and shared size variant.

**Returns** `ReactElement`: A React element that renders the switch.

**Throws**

- Switch asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Switch } from 'jg-react-ui/components/form';
const example = createElement(Switch, { 'aria-label': 'Enable notifications' });
```

#### <a id="api-Table"></a>`Table`

*Function*

Renders a full-width prose table.

```ts
Table(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table props.

**Returns** `ReactElement`: A React element that renders the table.

**Example**

```ts
import { createElement } from 'react';
import { Table } from 'jg-react-ui/components/typography';
const example = createElement(Table, { children: 'Project settings' });
```

#### <a id="api-TableCell"></a>`TableCell`

*Function*

Renders a prose table body cell.

```ts
TableCell(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table cell props.

**Returns** `ReactElement`: A React element that renders the table cell.

**Example**

```ts
import { createElement } from 'react';
import { TableCell } from 'jg-react-ui/components/typography';
const example = createElement(TableCell, { children: 'Personal workspace' });
```

#### <a id="api-TableContainer"></a>`TableContainer`

*Function*

Renders a horizontally scrollable wrapper for prose tables.

```ts
TableContainer(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table container props.

**Returns** `ReactElement`: A React element that renders the table container.

**Example**

```ts
import { createElement } from 'react';
import { TableContainer } from 'jg-react-ui/components/typography';
const example = createElement(TableContainer, { children: 'Project settings' });
```

#### <a id="api-TableHeaderCell"></a>`TableHeaderCell`

*Function*

Renders a prose table header cell.

```ts
TableHeaderCell(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table header cell props.

**Returns** `ReactElement`: A React element that renders the table header cell.

**Example**

```ts
import { createElement } from 'react';
import { TableHeaderCell } from 'jg-react-ui/components/typography';
const example = createElement(TableHeaderCell, { scope: 'col', children: 'Name' });
```

#### <a id="api-TableRow"></a>`TableRow`

*Function*

Renders a prose table row.

```ts
TableRow(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table row props.

**Returns** `ReactElement`: A React element that renders the table row.

**Example**

```ts
import { createElement } from 'react';
import { TableRow } from 'jg-react-ui/components/typography';
const example = createElement(TableRow, { children: 'Project settings' });
```

#### <a id="api-Tabs"></a>`Tabs`

*Function*

Provides the tabs root state and orientation context.

```ts
Tabs(props: ITabsProps): ReactElement
```

**Parameters**

- `props` `ITabsProps`: The Base UI tabs root props and activation mode.

**Returns** `ReactElement`: A React element that renders the tabs root.

**Example**

```ts
import { createElement } from 'react';
import { Tabs } from 'jg-react-ui/components/tabs';
const example = createElement(Tabs, { children: 'Project settings' });
```

#### <a id="api-TabsContent"></a>`TabsContent`

*Function*

Renders the panel content associated with a selected tab.

```ts
TabsContent(props: ITabsContentProps): ReactElement
```

**Parameters**

- `props` `ITabsContentProps`: The Base UI tabs panel props and mount behavior.

**Returns** `ReactElement`: A React element that renders the tabs content.

**Example**

```ts
import { createElement } from 'react';
import { TabsContent } from 'jg-react-ui/components/tabs';
const example = createElement(TabsContent, { value: 'overview', children: 'Project overview' });
```

#### <a id="api-TabsList"></a>`TabsList`

*Function*

Renders the segmented control container for tab triggers.

```ts
TabsList(props: ITabsListProps): ReactElement
```

**Parameters**

- `props` `ITabsListProps`: The Base UI tabs list props.

**Returns** `ReactElement`: A React element that renders the tabs list.

**Example**

```ts
import { createElement } from 'react';
import { TabsList } from 'jg-react-ui/components/tabs';
const example = createElement(TabsList, { overflowBehavior: 'scroll', 'aria-label': 'Project views' });
```

#### <a id="api-TabsTrigger"></a>`TabsTrigger`

*Function*

Renders an individual tab selection control.

```ts
TabsTrigger(props: ITabsTriggerProps): ReactElement
```

**Parameters**

- `props` `ITabsTriggerProps`: The Base UI tabs trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the tabs trigger.

**Throws**

- TabsTrigger must be rendered inside TabsList.
- TabsTrigger with composite children requires title or aria-label when TabsList truncates.
- TabsTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TabsTrigger } from 'jg-react-ui/components/tabs';
const example = createElement(TabsTrigger, { value: 'overview', children: 'Overview' });
```

#### <a id="api-Textarea"></a>`Textarea`

*Function*

Renders the shared multiline text input surface.

```ts
Textarea(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The native textarea props.

**Returns** `ReactElement`: A React element that renders the textarea.

**Example**

```ts
import { createElement } from 'react';
import { Textarea } from 'jg-react-ui/components/form';
const example = createElement(Textarea, { 'aria-label': 'Project notes', name: 'notes' });
```

#### <a id="api-TextLink"></a>`TextLink`

*Function*

Renders a prose or standalone action link with shared interaction states.

```ts
TextLink(props: ITextLinkProps): ReactElement
```

**Parameters**

- `props` `ITextLinkProps`: The anchor props, visual variant, and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the text link.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TextLink } from 'jg-react-ui/components/text-link';
const example = createElement(TextLink, { href: '/settings', children: 'Settings' });
```

#### <a id="api-ThemeInitializationScript"></a>`ThemeInitializationScript`

*Function*

Renders the server-safe inline script that applies the persisted theme before hydration.

```ts
ThemeInitializationScript(props: IThemeInitializationScriptProps): ReactElement
```

**Parameters**

- `props` `IThemeInitializationScriptProps`: The script identity and CSP nonce.

**Returns** `ReactElement`: A React script element containing the package-owned initialization logic.

**Throws**

- `UI_PREFERENCES_STORAGE_ID_INVALID`: UI preferences storage ID must be a non-empty string containing only letters, digits, underscores, and hyphens.

**Example**

```ts
import { createElement } from 'react';
import { ThemeInitializationScript } from 'jg-react-ui/components/theme-provider';
const script = createElement(ThemeInitializationScript, { storageId: 'personal-hq', nonce: 'example-nonce' });
```

#### <a id="api-ThemeProvider"></a>`ThemeProvider`

*Function*

Provides persisted theme state and applies the resolved theme class to the document root.

```ts
ThemeProvider(props: IThemeProviderProps): ReactElement
```

**Parameters**

- `props` `IThemeProviderProps`: The provider props that configure children and transition behavior.

**Returns** `ReactElement`: A React element that renders the theme context provider.

**Example**

```ts
import { createElement } from 'react';
import { ThemeProvider } from 'jg-react-ui/components/theme-provider';
const app = createElement(ThemeProvider, { children: 'App' });
```

#### <a id="api-ThemeToggleButton"></a>`ThemeToggleButton`

*Function*

Renders an accessible action that toggles between the resolved light and dark themes.

```ts
ThemeToggleButton(props: IThemeToggleButtonProps): ReactElement
```

**Parameters**

- `props` `IThemeToggleButtonProps`: The shared Button styling, disabled state, and optional request callback.

**Returns** `ReactElement`: A React element that renders the theme toggle.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { createElement } from 'react';
import { ThemeToggleButton } from 'jg-react-ui/components/theme-provider';
const toggle = createElement(ThemeToggleButton, { size: 'icon-touch' });
```

#### <a id="api-Toastr"></a>`Toastr`

*Function*

Renders the shared toastr host with consumer theme tokens and status icon tiles.

```ts
Toastr(props: ToasterProps): ReactElement
```

**Parameters**

- `props` `ToasterProps`: Toastr props to merge with the shared theme-aware defaults.

**Returns** `ReactElement`: A React element that hosts toastr notifications for the current UI tree.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { createElement } from 'react';
import { Toastr } from 'jg-react-ui/components/toastr';
const host = createElement(Toastr, { position: 'bottom-right' });
```

#### <a id="api-Tooltip"></a>`Tooltip`

*Function*

Provides tooltip state for a trigger and content pair.

```ts
Tooltip(props: ITooltipProps): ReactElement
```

**Parameters**

- `props` `ITooltipProps`: The Base UI tooltip root props and public timing options.

**Returns** `ReactElement`: A React element that renders the tooltip root.

**Example**

```ts
import { createElement } from 'react';
import { Tooltip } from 'jg-react-ui/components/tooltip';
const example = createElement(Tooltip, { children: 'Project settings' });
```

#### <a id="api-TooltipContent"></a>`TooltipContent`

*Function*

Renders themed tooltip content inside a portal.

```ts
TooltipContent(props: ITooltipContentProps): ReactElement
```

**Parameters**

- `props` `ITooltipContentProps`: The Base UI tooltip popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the tooltip bubble.

**Throws**

- TooltipContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TooltipContent } from 'jg-react-ui/components/tooltip';
const example = createElement(TooltipContent, { children: 'Project settings' });
```

#### <a id="api-TooltipProvider"></a>`TooltipProvider`

*Function*

Provides shared tooltip timing defaults for a subtree.

```ts
TooltipProvider(props: ITooltipProviderProps): ReactElement
```

**Parameters**

- `props` `ITooltipProviderProps`: The Base UI tooltip provider props and public timing options.

**Returns** `ReactElement`: A React element that renders the tooltip provider.

**Example**

```ts
import { createElement } from 'react';
import { TooltipProvider } from 'jg-react-ui/components/tooltip';
const example = createElement(TooltipProvider, { children: 'Project settings' });
```

#### <a id="api-TooltipTrigger"></a>`TooltipTrigger`

*Function*

Renders the focusable or hoverable element that opens tooltip content.

```ts
TooltipTrigger(props: ITooltipTriggerProps): ReactElement
```

**Parameters**

- `props` `ITooltipTriggerProps`: The Base UI tooltip trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the tooltip trigger.

**Throws**

- TooltipTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TooltipTrigger } from 'jg-react-ui/components/tooltip';
const example = createElement(TooltipTrigger, { children: 'Project settings' });
```

#### <a id="api-UiPreferencesProvider"></a>`UiPreferencesProvider`

*Function*

Owns UI preference capability, optimistic state, persistence ordering, and rollback behavior.

```ts
UiPreferencesProvider(props: IUiPreferencesProviderProps): ReactElement
```

**Parameters**

- `props` `IUiPreferencesProviderProps`: The explicit persistence mode, initial preference snapshot, adapter, and children.

**Returns** `ReactElement`: A provider containing the shared UI preference lifecycle.

**Throws**

- `UI_PREFERENCES_STORAGE_ID_INVALID`: UI preferences storage ID must be a non-empty string containing only letters, digits, underscores, and hyphens.

**Example**

```ts
import { createElement } from 'react';
import { UiPreferencesProvider } from 'jg-react-ui/components/ui-preferences-provider';
const app = createElement(UiPreferencesProvider, { mode: 'local', storageId: 'personal-hq', children: 'App' });
```

#### <a id="api-UnorderedList"></a>`UnorderedList`

*Function*

Renders a prose unordered list.

```ts
UnorderedList(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The unordered list props.

**Returns** `ReactElement`: A React element that renders the unordered list.

**Example**

```ts
import { createElement } from 'react';
import { UnorderedList } from 'jg-react-ui/components/typography';
const example = createElement(UnorderedList, { children: 'Project settings' });
```

#### <a id="api-useErrorFeedbackResolver"></a>`useErrorFeedbackResolver`

*Function*

Reads the nearest safe error-feedback resolver, or the generic default outside a provider.

```ts
useErrorFeedbackResolver(): (error: unknown, overrides?: IErrorFeedbackOverrides) => IErrorFeedback
```

**Returns** `(error: unknown, overrides?: IErrorFeedbackOverrides) => IErrorFeedback`: The resolver for this React tree.

**Example**

```ts
import { useErrorFeedbackResolver } from 'jg-react-ui/components/error-feedback-provider';
const ErrorNotice = () => {
  const resolveErrorFeedback = useErrorFeedbackResolver();
  return resolveErrorFeedback(new Error('Private diagnostics')).message;
};
```

#### <a id="api-useTheme"></a>`useTheme`

*Function*

Reads the current theme context from the nearest theme provider.

```ts
useTheme(): IThemeProviderState
```

**Returns** `IThemeProviderState`: The current selected and resolved theme state.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { useTheme } from 'jg-react-ui/components/theme-provider';
const ResolvedTheme = () => useTheme().resolvedTheme;
```

#### <a id="api-useUiPreferences"></a>`useUiPreferences`

*Function*

Reads the current UI preferences and provider-owned update lifecycle.

```ts
useUiPreferences(): IUiPreferencesContextState
```

**Returns** `IUiPreferencesContextState`: The current preference snapshot, mutation capability, and pending state.

**Example**

```ts
import { useUiPreferences } from 'jg-react-ui/components/ui-preferences-provider';
const WrappingPreference = () => String(useUiPreferences().preferences.prefersWrappedCode);
```

#### <a id="api-useUiPreferencesCapabilities"></a>`useUiPreferencesCapabilities`

*Function*

Reads provider capabilities without subscribing to the complete preference snapshot.

```ts
useUiPreferencesCapabilities(): IUiPreferencesCapabilities
```

**Returns** `IUiPreferencesCapabilities`: The mutation capability and pending state owned by the nearest provider.

**Example**

```ts
import { useUiPreferencesCapabilities } from 'jg-react-ui/components/ui-preferences-provider';
const Capability = () => String(useUiPreferencesCapabilities().canUpdatePreferences);
```

#### <a id="api-WideMarkdownEditor"></a>`WideMarkdownEditor`

*Function*

Renders the established wide markdown editor with its existing Milkdown configuration.

```ts
WideMarkdownEditor(props: IMarkdownEditorVariantProps): ReactElement
```

**Parameters**

- `props` `IMarkdownEditorVariantProps`: The controlled editor props.

**Returns** `ReactElement`: A React element that renders the wide editor.

**Example**

```ts
import { createElement } from 'react';
import { WideMarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(WideMarkdownEditor, { value: '## Notes', onChange: () => {} });
```

#### <a id="api-YouTubeVideo"></a>`YouTubeVideo`

*Function*

Renders a validated YouTube video through the privacy-enhanced player origin.

```ts
YouTubeVideo(props: IYouTubeVideoProps): ReactElement
```

**Parameters**

- `props` `IYouTubeVideoProps`: The validated video identifier, title, optional autoplay request and wrapper classes.

**Returns** `ReactElement`: A responsive, lazy-loaded YouTube iframe.

**Throws**

- `INVALID_YOUTUBE_VIDEO_ID`: The YouTube video id must be 11 letters, digits, '-', or '_'.

**Example**

```ts
import { createElement } from 'react';
import { parseYouTubeVideoUrl, YouTubeVideo } from 'jg-react-ui/components/youtube-video';
const video = parseYouTubeVideoUrl('https://youtu.be/M7lc1UVf-VE', 'Walkthrough');
const example = video ? createElement(YouTubeVideo, { videoId: video.videoId, title: video.title }) : null;
```

### <a id="api-constants"></a>Constants in `jg-react-ui`

#### <a id="api-alertVariants"></a>`alertVariants`

*Constant*

Composes the retained alert variant classes.

```ts
const alertVariants: (props?: ConfigVariants<{ variant: { default: string; destructive: string; }; interaction: { static: string; redirect: string; action: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { alertVariants } from 'jg-react-ui/components/alert';
const styles = alertVariants({});
```

#### <a id="api-APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME"></a>`APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME`

*Constant*

Shared layout styling contract.

```ts
const APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME: "animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-out motion-reduce:animate-none"
```

#### <a id="api-APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME"></a>`APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME`

*Constant*

Shared layout styling contract.

```ts
const APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME: "animate-in fade-in-0 duration-200 ease-out motion-reduce:animate-none"
```

#### <a id="api-AppThemeSchema"></a>`AppThemeSchema`

*Constant*

Theme preferences accepted by shared UI consumers.

```ts
const AppThemeSchema: ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>
```

#### <a id="api-AUDIO_INPUT_BYTES_PER_MEGABYTE"></a>`AUDIO_INPUT_BYTES_PER_MEGABYTE`

*Constant*

Bytes in one mebibyte, used by the recording limit.

```ts
const AUDIO_INPUT_BYTES_PER_MEGABYTE: number
```

#### <a id="api-AUDIO_INPUT_DEFAULT_MAX_BYTES"></a>`AUDIO_INPUT_DEFAULT_MAX_BYTES`

*Constant*

Default recording cap in bytes.

```ts
const AUDIO_INPUT_DEFAULT_MAX_BYTES: number
```

#### <a id="api-AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS"></a>`AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS`

*Constant*

Requested interval in milliseconds between MediaRecorder chunks.

```ts
const AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS: number
```

#### <a id="api-badgeVariants"></a>`badgeVariants`

*Constant*

Composes the retained badge variant classes.

```ts
const badgeVariants: (props?: ConfigVariants<{ variant: { default: string; secondary: string; destructive: string; warning: string; success: string; outline: string; ghost: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { badgeVariants } from 'jg-react-ui/components/badge';
const styles = badgeVariants({});
```

#### <a id="api-Button"></a>`Button`

*Constant*

Renders the shared command button or passes its styles to a child element.

```ts
const Button: (__namedParameters: IButtonProps) => ReactElement & INativeButtonRenderComponent
```

**Example**

```ts
import { createElement } from 'react';
import { Button } from 'jg-react-ui/components/button';
const action = createElement(Button, { size: 'touch' }, 'Save changes');
```

#### <a id="api-buttonVariants"></a>`buttonVariants`

*Constant*

Builds the retained button variant and size classes.

```ts
const buttonVariants: (props?: ConfigVariants<{ variant: { default: string; outline: string; secondary: string; ghost: string; destructive: string; link: string; }; size: { default: string; touch: string; 'touch-lg': string; xs: string; sm: string; ... 6 more ...; 'icon-lg': string; }; }> & ClassProp) => string
```

**Example**

```ts
import { buttonVariants } from 'jg-react-ui/components/button';
const classes = buttonVariants({ variant: 'outline', size: 'touch' });
```

#### <a id="api-CODE_DIFF_LANGUAGES"></a>`CODE_DIFF_LANGUAGES`

*Constant*

Registered diff languages; text keeps literal content.

```ts
const CODE_DIFF_LANGUAGES: { bash: "bash"; json: "json"; jsx: "jsx"; markdown: "markdown"; python: "python"; text: "text"; tsx: "tsx"; typescript: "typescript" }
```

#### <a id="api-CodeDiffViewSchema"></a>`CodeDiffViewSchema`

*Constant*

Retained code-diff layouts.

```ts
const CodeDiffViewSchema: ZodEnum<{ split: "split"; unified: "unified" }>
```

#### <a id="api-codeFileStatusVariants"></a>`codeFileStatusVariants`

*Constant*

Builds semantic classes for a source file's change status.

```ts
const codeFileStatusVariants: (props?: ConfigVariants<{ status: { added: string; modified: string; removed: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { codeFileStatusVariants } from 'jg-react-ui/components/typography';
const classes = codeFileStatusVariants({ status: 'modified' });
```

#### <a id="api-COPY_BUTTON_FEEDBACK_DURATION_MS"></a>`COPY_BUTTON_FEEDBACK_DURATION_MS`

*Constant*

Default copied-checkmark feedback duration in milliseconds.

```ts
const COPY_BUTTON_FEEDBACK_DURATION_MS: 1400
```

#### <a id="api-DEFAULT_FORM_PROPS"></a>`DEFAULT_FORM_PROPS`

*Constant*

Source-compatible form validation defaults for application form controllers: a field is checked once it loses focus the first time, then at every change, so its error shows only after the operator left it and goes away as soon as they fix it.

```ts
const DEFAULT_FORM_PROPS: { mode: "onTouched" }
```

#### <a id="api-DEFAULT_UI_PREFERENCES"></a>`DEFAULT_UI_PREFERENCES`

*Constant*

Initial complete preference record.

```ts
const DEFAULT_UI_PREFERENCES: IUiPreferences
```

#### <a id="api-DialogNavigationObserver"></a>`DialogNavigationObserver`

*Constant*

Reports each committed navigation to the surrounding DialogNavigationProvider, in a layout effect, so open dialogs close before the new page's effects open its own. Render it once in the router's root route, and with `isErrorScreen` in its error element, so a route error closes the dialogs too. Outside a provider, it renders nothing and needs no router.

```ts
const DialogNavigationObserver: (props: IDialogNavigationObserverProps) => ReactElement | null
```

**Example**

```ts
import { createElement } from 'react';
import { createBrowserRouter, Outlet } from 'react-router';
import { DialogNavigationObserver } from 'jg-react-router';

export const router = createBrowserRouter([
  {
    path: '/',
    element: createElement('div', null, createElement(DialogNavigationObserver), createElement(Outlet)),
    errorElement: createElement(DialogNavigationObserver, { isErrorScreen: true }),
  },
]);
```

#### <a id="api-DialogNavigationProvider"></a>`DialogNavigationProvider`

*Constant*

Closes the dialogs that are open when a navigation commits, without touching history: each dialog host registers with useDialogNavigationDismissal, and a DialogNavigationObserver inside the router reports each committed location. It reads every open session before closing any, so a dialog that closes or replaces another can't make the provider skip or close the wrong one, and hosts that share a session close it once. Without a provider, the hook and the observer do nothing.

```ts
const DialogNavigationProvider: ({ children, }: IDialogNavigationProviderProps) => ReactElement
```

**Example**

```ts
import { createElement } from 'react';
import { RouterProvider, type createBrowserRouter } from 'react-router';
import { DialogNavigationProvider } from 'jg-react-router';

declare const router: ReturnType<typeof createBrowserRouter>;
declare const DialogHost: () => null;

// the router's root route renders <DialogNavigationObserver />
export const App = () =>
  createElement(
    DialogNavigationProvider,
    null,
    createElement(RouterProvider, { router }),
    createElement(DialogHost),
  );
```

#### <a id="api-ERRORS"></a>`ERRORS`

*Constant*

Owned UI configuration and recording failures exposed through the public error-code contract.

```ts
const ERRORS: { THEME_PROVIDER_MISSING: "THEME_PROVIDER_MISSING"; UI_PREFERENCES_STORAGE_ID_INVALID: "UI_PREFERENCES_STORAGE_ID_INVALID"; AUDIO_INPUT_MAX_BYTES_EXCEEDED: "AUDIO_INPUT_MAX_BYTES_EXCEEDED"; AUDIO_INPUT_RECORDING_FAILED: "AUDIO_INPUT_RECORDING_FAILED"; AUDIO_INPUT_UNSUPPORTED: "AUDIO_INPUT_UNSUPPORTED"; AUDIO_INPUT_MICROPHONE_ACCESS_FAILED: "AUDIO_INPUT_MICROPHONE_ACCESS_FAILED"; AUDIO_INPUT_TRANSCRIPTION_RESULT_FAILED: "AUDIO_INPUT_TRANSCRIPTION_RESULT_FAILED"; AUDIO_INPUT_TRANSCRIPTION_INVALID_RESULT: "AUDIO_INPUT_TRANSCRIPTION_INVALID_RESULT"; AUDIO_INPUT_TRANSCRIPTION_FAILED: "AUDIO_INPUT_TRANSCRIPTION_FAILED" }
```

#### <a id="api-headingVariants"></a>`headingVariants`

*Constant*

Builds statement typography independently from its semantic heading level.

```ts
const headingVariants: (props?: ConfigVariants<{ role: { display: string; 'public-page': string; section: string; 'product-page': string; 'product-statement': string; }; }> & ClassProp) => string
```

**Example**

```ts
import { headingVariants } from 'jg-react-ui/components/typography';
const classes = headingVariants({ role: 'section' });
```

#### <a id="api-iconTileVariants"></a>`iconTileVariants`

*Constant*

Composes the retained icon-tile variant classes.

```ts
const iconTileVariants: (props?: ConfigVariants<{ size: { sm: string; md: string; lg: string; }; tone: { neutral: string; brand: string; success: string; warning: string; destructive: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { iconTileVariants } from 'jg-react-ui/components/icon-tile';
const styles = iconTileVariants({});
```

#### <a id="api-LOAD_MORE_BUTTON_DEFAULT_LABEL"></a>`LOAD_MORE_BUTTON_DEFAULT_LABEL`

*Constant*

Default visible copy for the reusable pagination command.

```ts
const LOAD_MORE_BUTTON_DEFAULT_LABEL: "Load more"
```

#### <a id="api-LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL"></a>`LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL`

*Constant*

Default visible copy shown while the next page request is in flight.

```ts
const LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL: "Loading more"
```

#### <a id="api-MARKDOWN_EDITOR_ALL_TOOLS"></a>`MARKDOWN_EDITOR_ALL_TOOLS`

*Constant*

Complete default tool policy used when supportedTools is omitted.

```ts
const MARKDOWN_EDITOR_ALL_TOOLS: readonly ["text", "heading", "bold", "italic", "strikethrough", "inline-code", "link", "variable", "quote", "divider", "bullet-list", "ordered-list", "task-list", "code-block", "table", "table-alignment", "image", "youtube", "math"]
```

#### <a id="api-MARKDOWN_EDITOR_AUTHORING_TOOLS"></a>`MARKDOWN_EDITOR_AUTHORING_TOOLS`

*Constant*

Constrained document authoring tools, including variables, code and tables.

```ts
const MARKDOWN_EDITOR_AUTHORING_TOOLS: readonly ["text", "heading", "bold", "italic", "inline-code", "link", "variable", "quote", "bullet-list", "ordered-list", "code-block", "table"]
```

#### <a id="api-MARKDOWN_EDITOR_LAYOUTS"></a>`MARKDOWN_EDITOR_LAYOUTS`

*Constant*

Container-responsive and explicit document layouts.

```ts
const MARKDOWN_EDITOR_LAYOUTS: { Auto: "auto"; Compact: "compact"; Wide: "wide" }
```

#### <a id="api-MARKDOWN_EDITOR_PROSE_TOOLS"></a>`MARKDOWN_EDITOR_PROSE_TOOLS`

*Constant*

Prose authoring tools without template variables or code blocks, retaining inline code.

```ts
const MARKDOWN_EDITOR_PROSE_TOOLS: ("link" | "table" | "text" | "bold" | "heading" | "italic" | "bullet-list" | "inline-code" | "ordered-list" | "quote")[]
```

#### <a id="api-MARKDOWN_EDITOR_TOOLS"></a>`MARKDOWN_EDITOR_TOOLS`

*Constant*

Authoring tool identifiers for document editors.

```ts
const MARKDOWN_EDITOR_TOOLS: { Bold: "bold"; BulletList: "bullet-list"; CodeBlock: "code-block"; Divider: "divider"; Heading: "heading"; Image: "image"; InlineCode: "inline-code"; Italic: "italic"; Link: "link"; Math: "math"; OrderedList: "ordered-list"; Quote: "quote"; Strikethrough: "strikethrough"; Table: "table"; TableAlignment: "table-alignment"; TaskList: "task-list"; Text: "text"; Variable: "variable"; YouTube: "youtube" }
```

#### <a id="api-ResolvedAppThemeSchema"></a>`ResolvedAppThemeSchema`

*Constant*

Concrete color schemes after resolving the system preference.

```ts
const ResolvedAppThemeSchema: ZodEnum<{ light: "light"; dark: "dark" }>
```

#### <a id="api-UI_PREFERENCES_STORAGE_KEY"></a>`UI_PREFERENCES_STORAGE_KEY`

*Constant*

Raw storage key for interoperability with the UI preference store.

```ts
const UI_PREFERENCES_STORAGE_KEY: "jg-storage:jg-ui-preferences"
```

#### <a id="api-UI_PREFERENCES_STORE_ID"></a>`UI_PREFERENCES_STORE_ID`

*Constant*

Default namespace for UI preference persistence.

```ts
const UI_PREFERENCES_STORE_ID: "jg-ui-preferences"
```

#### <a id="api-UiPreferencesSchema"></a>`UiPreferencesSchema`

*Constant*

Complete stored UI preferences; harmless additional fields remain compatible.

```ts
const UiPreferencesSchema: ZodObject<{ theme: ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>; codeDiffView: ZodEnum<{ split: "split"; unified: "unified" }>; prefersWrappedCode: ZodBoolean; appInstallToastrDismissedAt: ZodNullable<ZodISODateTime> }, $strip>
```

#### <a id="api-useConfirmationDialogStore"></a>`useConfirmationDialogStore`

*Constant*

Stores the active root-mounted confirmation dialog session and completion callback.

```ts
const useConfirmationDialogStore: UseBoundStore<StoreApi<IConfirmationDialogStore>>
```

**Example**

```ts
import { useConfirmationDialogStore } from 'jg-react-ui/components/confirmation-dialog';
useConfirmationDialogStore.getState().openConfirmationDialog({
  title: 'Archive project?',
  onConfirmationDialogClose: (isConfirmed) => { void isConfirmed; },
});
```

#### <a id="api-useDialogNavigationDismissal"></a>`useDialogNavigationDismissal`

*Constant*

Closes a dialog when a navigation commits while its session is open, through the surrounding DialogNavigationProvider. It always calls the latest `getSession` and `onDismiss` the component committed, so they needn't be stable, and it closes the session only if `getSession` still returns the one that was open when the navigation committed. Outside a provider, it does nothing.

```ts
const useDialogNavigationDismissal: (options: IDialogNavigationDismissalOptions) => void
```

**Example**

```ts
import { useState } from 'react';
import { useDialogNavigationDismissal } from 'jg-react-router';

export const useConfirmDialog = () => {
  const [session, setSession] = useState<object | null>(null);
  useDialogNavigationDismissal({
    getSession: () => session,
    onDismiss: () => {
      setSession(null);
    },
  });
  return { isOpen: session !== null, open: () => setSession({}), close: () => setSession(null) };
};
```

### <a id="api-types"></a>Types in `jg-react-ui`

#### <a id="api-IAlertActionProps"></a>`IAlertActionProps`

*Type*

Action props wrap a short supplementary control in the top-right corner.

```ts
type IAlertActionProps = React.ComponentProps<'div'>;
```

#### <a id="api-IAlertDescriptionProps"></a>`IAlertDescriptionProps`

*Type*

Description props use phrasing content so alerts can render inside anchors or buttons.

```ts
type IAlertDescriptionProps = React.ComponentProps<'span'>;
```

#### <a id="api-IAlertDialogActionProps"></a>`IAlertDialogActionProps`

*Type*

Options and native attributes for AlertDialogAction.

```ts
type IAlertDialogActionProps = Omit<BaseAlertDialog.Close.Props, 'nativeButton' | 'render'> & VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
};
```

#### <a id="api-IAlertDialogContentProps"></a>`IAlertDialogContentProps`

*Type*

Options and native attributes for AlertDialogContent.

```ts
type IAlertDialogContentProps = Omit<BaseAlertDialog.Popup.Props, 'className' | 'render' | 'style'>;
```

#### <a id="api-IAlertDialogDescriptionProps"></a>`IAlertDialogDescriptionProps`

*Type*

Options and native attributes for AlertDialogDescription.

```ts
type IAlertDialogDescriptionProps = BaseAlertDialog.Description.Props;
```

#### <a id="api-IAlertDialogFooterProps"></a>`IAlertDialogFooterProps`

*Type*

Options and native attributes for AlertDialogFooter.

```ts
type IAlertDialogFooterProps = Omit<React.ComponentProps<'footer'>, 'className' | 'style'>;
```

#### <a id="api-IAlertDialogHeaderProps"></a>`IAlertDialogHeaderProps`

*Type*

Options and native attributes for AlertDialogHeader.

```ts
type IAlertDialogHeaderProps = Omit<React.ComponentProps<'header'>, 'className' | 'style'>;
```

#### <a id="api-IAlertDialogProps"></a>`IAlertDialogProps`

*Type*

Options and native attributes for AlertDialog.

```ts
type IAlertDialogProps = Omit<BaseAlertDialog.Root.Props, 'onOpenChange'> & {
    getNavigationSession?: IDialogNavigationSessionReader;
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-IAlertDialogTitleProps"></a>`IAlertDialogTitleProps`

*Type*

Options and native attributes for AlertDialogTitle.

```ts
type IAlertDialogTitleProps = BaseAlertDialog.Title.Props;
```

#### <a id="api-IAlertDialogTriggerProps"></a>`IAlertDialogTriggerProps`

*Type*

Options and native attributes for AlertDialogTrigger.

```ts
type IAlertDialogTriggerProps = Omit<BaseAlertDialog.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IAlertProps"></a>`IAlertProps`

*Type*

Alert props extend the div contract with shared variants and optional slot rendering.

```ts
type IAlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
    asChild?: boolean;
};
```

#### <a id="api-IAlertTitleProps"></a>`IAlertTitleProps`

*Type*

Title props use phrasing content so alerts can render inside anchors or buttons.

```ts
type IAlertTitleProps = React.ComponentProps<'span'>;
```

#### <a id="api-IAppTheme"></a>`IAppTheme`

*Type*

Validated preference contract.

```ts
type IAppTheme = z.infer<typeof AppThemeSchema>;
```

#### <a id="api-IArticleHeaderProps"></a>`IArticleHeaderProps`

*Type*

Native attributes and shared options for ArticleHeader.

```ts
type IArticleHeaderProps = React.ComponentProps<'header'>;
```

#### <a id="api-IArticleProps"></a>`IArticleProps`

*Type*

Native attributes and shared options for Article.

```ts
type IArticleProps = React.ComponentProps<'article'>;
```

#### <a id="api-IAudioInputCancelHandler"></a>`IAudioInputCancelHandler`

*Type*

Receives the explicit recorder cancel action.

```ts
type IAudioInputCancelHandler = () => void;
```

#### <a id="api-IAudioInputControls"></a>`IAudioInputControls`

*Type*

Imperative start, stop, restart, reset, and cancellation controls for the recording workflow.

```ts
type IAudioInputControls = {
    cancelRecording: () => void;
    restartRecording: () => void;
    resetRecording: () => void;
    startRecording: () => void;
    stopRecording: () => void;
};
```

**Members**

- `cancelRecording: () => void` (property)
- `restartRecording: () => void` (property)
- `resetRecording: () => void` (property)
- `startRecording: () => void` (property)
- `stopRecording: () => void` (property)

#### <a id="api-IAudioInputDialogOpenChangeHandler"></a>`IAudioInputDialogOpenChangeHandler`

*Type*

Receives requested changes to the built-in dialog open state.

```ts
type IAudioInputDialogOpenChangeHandler = (isDialogOpen: boolean) => void;
```

#### <a id="api-IAudioInputElapsedMsChangeHandler"></a>`IAudioInputElapsedMsChangeHandler`

*Type*

Receives the elapsed recording duration in milliseconds.

```ts
type IAudioInputElapsedMsChangeHandler = (elapsedMs: number) => void;
```

#### <a id="api-IAudioInputLimitProgress"></a>`IAudioInputLimitProgress`

*Type*

Observed recording bytes and normalized progress against the configured byte limit.

```ts
type IAudioInputLimitProgress = {
    maxBytes: number;
    percentage: number;
    progress: number;
    recordedBytes: number;
};
```

**Members**

- `maxBytes: number` (property)
- `percentage: number` (property)
- `progress: number` (property)
- `recordedBytes: number` (property)

#### <a id="api-IAudioInputLimitProgressChangeHandler"></a>`IAudioInputLimitProgressChangeHandler`

*Type*

Receives observed recording size and normalized limit progress.

```ts
type IAudioInputLimitProgressChangeHandler = (progress: IAudioInputLimitProgress) => void;
```

#### <a id="api-IAudioInputProps"></a>`IAudioInputProps`

*Type*

Microphone trigger, dialog, controlled recording and transcription state, provider callbacks, copy, and presentation.

```ts
type IAudioInputProps = IAudioInputRootProps & {
    autoStart?: boolean;
    cancelLabel?: string;
    cancelResetDelayMs?: number;
    closeButtonAriaLabel?: string;
    controlsRef?: Ref<IAudioInputControls>;
    defaultIsDialogOpen?: boolean;
    defaultIsRecording?: boolean;
    defaultIsTranscriptionEditorVisible?: boolean;
    defaultTranscription?: string;
    dialogDescription?: string;
    dialogTitle?: string;
    disabled?: boolean;
    isDialogOpen?: boolean;
    isErrorVisible?: boolean;
    isRecording?: boolean;
    isTranscriptionEditorVisible?: boolean;
    maxBytes?: number;
    onDialogOpenChange?: IAudioInputDialogOpenChangeHandler;
    onElapsedMsChange?: IAudioInputElapsedMsChangeHandler;
    onCancel?: IAudioInputCancelHandler;
    onLimitProgressChange?: IAudioInputLimitProgressChangeHandler;
    onRecordedBytesChange?: IAudioInputRecordedBytesChangeHandler;
    onRecordingActiveChange?: IAudioInputRecordingActiveChangeHandler;
    onRecordingCancel?: IAudioInputRecordingCancelHandler;
    onRecordingComplete?: IAudioInputRecordingCompleteHandler;
    onRecordingDataAvailable?: IAudioInputRecordingDataAvailableHandler;
    onRecordingError?: IAudioInputRecordingErrorHandler;
    onRecordingStart?: IAudioInputRecordingStartHandler;
    onRecordingStop?: IAudioInputRecordingStopHandler;
    onStatusChange?: IAudioInputStatusChangeHandler;
    onTranscriptionComplete?: IAudioInputTranscriptionCompleteHandler;
    onTranscriptionEditorVisibleChange?: IAudioInputTranscriptionEditorVisibleChangeHandler;
    onTranscriptionError?: IAudioInputTranscriptionErrorHandler;
    onTranscriptionResult?: IAudioInputTranscriptionResultHandler;
    onTranscriptionStatusChange?: IAudioInputTranscriptionStatusChangeHandler;
    onTranscriptionTextChange?: IAudioInputTranscriptionTextChangeHandler;
    preferredMimeType?: string;
    recorderClassName?: string;
    recorderRootClassName?: string;
    restartButtonAriaLabel?: string;
    restartButtonClassName?: string;
    retryLabel?: string;
    sendTranscriptionLabel?: string;
    statusLabels?: Partial<Record<IAudioInputStatus, string>>;
    transcribe?: IAudioInputTranscribeHandler;
    transcribeAndSendLabel?: string;
    transcribeLabel?: string;
    transcribeLimitRecordingLabel?: string;
    transcription?: string;
    transcriptionActionsClassName?: string;
    transcriptionPlaceholder?: string;
    transcriptionTextareaClassName?: string;
    transcriptionTextareaLabel?: string;
    triggerAriaLabel?: string;
    triggerButtonProps?: IAudioInputTriggerButtonProps;
    triggerClassName?: string;
    triggerSize?: IButtonProps['size'];
    triggerTitle?: string;
    triggerVariant?: IButtonProps['variant'];
};
```

#### <a id="api-IAudioInputRecordedBytesChangeHandler"></a>`IAudioInputRecordedBytesChangeHandler`

*Type*

Receives the total bytes observed from MediaRecorder chunks.

```ts
type IAudioInputRecordedBytesChangeHandler = (recordedBytes: number) => void;
```

#### <a id="api-IAudioInputRecording"></a>`IAudioInputRecording`

*Type*

Captured Blob, duration, portable file-name metadata, MIME type, and byte size.

```ts
type IAudioInputRecording = {
    blob: Blob;
    durationMs: number;
    fileName: string;
    mimeType: string;
    size: number;
};
```

**Members**

- `blob: Blob` (property)
- `durationMs: number` (property)
- `fileName: string` (property)
- `mimeType: string` (property)
- `size: number` (property)

#### <a id="api-IAudioInputRecordingActiveChangeHandler"></a>`IAudioInputRecordingActiveChangeHandler`

*Type*

Receives changes requested for the controlled recording state.

```ts
type IAudioInputRecordingActiveChangeHandler = (isRecording: boolean) => void;
```

#### <a id="api-IAudioInputRecordingCancelHandler"></a>`IAudioInputRecordingCancelHandler`

*Type*

Receives cancellation of an active recording or pending microphone request.

```ts
type IAudioInputRecordingCancelHandler = () => void;
```

#### <a id="api-IAudioInputRecordingCompleteHandler"></a>`IAudioInputRecordingCompleteHandler`

*Type*

Receives a retained recording after its microphone resources have been released.

```ts
type IAudioInputRecordingCompleteHandler = (recording: IAudioInputRecording) => void;
```

#### <a id="api-IAudioInputRecordingDataAvailableHandler"></a>`IAudioInputRecordingDataAvailableHandler`

*Type*

Receives an admitted audio chunk and the accumulated observed bytes.

```ts
type IAudioInputRecordingDataAvailableHandler = (chunk: Blob, recordedBytes: number) => void;
```

#### <a id="api-IAudioInputRecordingErrorHandler"></a>`IAudioInputRecordingErrorHandler`

*Type*

Receives recording diagnostics. Coded causes retain their code; visible feedback is resolved separately.

```ts
type IAudioInputRecordingErrorHandler = (error: Error) => void;
```

#### <a id="api-IAudioInputRecordingStartHandler"></a>`IAudioInputRecordingStartHandler`

*Type*

Receives a recording-start request before microphone permission is requested.

```ts
type IAudioInputRecordingStartHandler = () => void;
```

#### <a id="api-IAudioInputRecordingStopHandler"></a>`IAudioInputRecordingStopHandler`

*Type*

Receives a clean recorder stop before its completed recording is emitted.

```ts
type IAudioInputRecordingStopHandler = () => void;
```

#### <a id="api-IAudioInputStatus"></a>`IAudioInputStatus`

*Type*

Recorder lifecycle states exposed through callbacks and the rendered recording surface.

```ts
type IAudioInputStatus = 'idle' | 'requesting-permission' | 'recording' | 'complete' | 'error';
```

#### <a id="api-IAudioInputStatusChangeHandler"></a>`IAudioInputStatusChangeHandler`

*Type*

Receives each committed recorder status transition without render-time callback effects.

```ts
type IAudioInputStatusChangeHandler = (status: IAudioInputStatus) => void;
```

#### <a id="api-IAudioInputTranscribeHandler"></a>`IAudioInputTranscribeHandler`

*Type*

Transcribes a retained recording. The caller owns requests and deadlines; obsolete sessions ignore late results.

```ts
type IAudioInputTranscribeHandler = (recording: IAudioInputRecording) => Promise<string>;
```

#### <a id="api-IAudioInputTranscriptionCompleteHandler"></a>`IAudioInputTranscriptionCompleteHandler`

*Type*

Receives accepted transcription text together with its retained recording.

```ts
type IAudioInputTranscriptionCompleteHandler = (transcription: string, recording: IAudioInputRecording) => void;
```

#### <a id="api-IAudioInputTranscriptionEditorVisibleChangeHandler"></a>`IAudioInputTranscriptionEditorVisibleChangeHandler`

*Type*

Receives requested visibility changes for the review editor.

```ts
type IAudioInputTranscriptionEditorVisibleChangeHandler = (isTranscriptionEditorVisible: boolean) => void;
```

#### <a id="api-IAudioInputTranscriptionErrorHandler"></a>`IAudioInputTranscriptionErrorHandler`

*Type*

Receives transcription or result-delivery diagnostics separately from display-safe feedback.

```ts
type IAudioInputTranscriptionErrorHandler = (error: Error) => void;
```

#### <a id="api-IAudioInputTranscriptionResultHandler"></a>`IAudioInputTranscriptionResultHandler`

*Type*

Accepts authored text and its recording. Result retries reuse retained text without repeating transcription.

```ts
type IAudioInputTranscriptionResultHandler = (transcription: string, recording: IAudioInputRecording) => void | Promise<void>;
```

#### <a id="api-IAudioInputTranscriptionStatus"></a>`IAudioInputTranscriptionStatus`

*Type*

Transcription and result-delivery states, including editable and recoverable outcomes.

```ts
type IAudioInputTranscriptionStatus = 'idle' | 'transcribing' | 'ready' | 'sending' | 'sent' | 'error';
```

#### <a id="api-IAudioInputTranscriptionStatusChangeHandler"></a>`IAudioInputTranscriptionStatusChangeHandler`

*Type*

Receives transcription and delivery lifecycle changes.

```ts
type IAudioInputTranscriptionStatusChangeHandler = (status: IAudioInputTranscriptionStatus) => void;
```

#### <a id="api-IAudioInputTranscriptionTextChangeHandler"></a>`IAudioInputTranscriptionTextChangeHandler`

*Type*

Receives requested changes to the controlled transcription text.

```ts
type IAudioInputTranscriptionTextChangeHandler = (transcription: string) => void;
```

#### <a id="api-IBadgeProps"></a>`IBadgeProps`

*Type*

Badge props extend the span contract with shared variants and optional slot rendering.

```ts
type IBadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
    asChild?: boolean;
};
```

#### <a id="api-IBlockquoteProps"></a>`IBlockquoteProps`

*Type*

Native attributes and shared options for Blockquote.

```ts
type IBlockquoteProps = React.ComponentProps<'blockquote'>;
```

#### <a id="api-IButtonBadgeLocation"></a>`IButtonBadgeLocation`

*Type*

Places the count badge on one of the button corners.

```ts
type IButtonBadgeLocation = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
```

#### <a id="api-IButtonBadgeTheme"></a>`IButtonBadgeTheme`

*Type*

Semantic count badge themes.

```ts
type IButtonBadgeTheme = 'destructive' | 'outline' | 'primary' | 'secondary';
```

#### <a id="api-IButtonProps"></a>`IButtonProps`

*Type*

Native button props with visual variants, count badges, and optional child rendering.

```ts
type IButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
    badgeCount?: number;
    badgeLocation?: IButtonBadgeLocation;
    badgeTheme?: IButtonBadgeTheme;
    maxValue?: number;
};
```

#### <a id="api-IChatMarkdownBlockFormat"></a>`IChatMarkdownBlockFormat`

*Type*

Block formats supported by the fixed chat authoring policy.

```ts
type IChatMarkdownBlockFormat = 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'bullet-list' | 'ordered-list';
```

#### <a id="api-IChatMarkdownEditorControls"></a>`IChatMarkdownEditorControls`

*Type*

Synchronous chat operations that retain the controlled draft during initialization.

```ts
type IChatMarkdownEditorControls = {
    appendLiteralText: (text: string) => boolean;
    focus: () => void;
    getMarkdown: () => string;
};
```

**Members**

- `appendLiteralText: (text: string) => boolean` (property): Appends escaped text; returns false before readiness or when the result exceeds maxLength.
- `focus: () => void` (property): Focuses the editor once initialization has completed.
- `getMarkdown: () => string` (property): Reads live serialized Markdown, or the retained controlled draft during initialization.

#### <a id="api-IChatMarkdownEditorProps"></a>`IChatMarkdownEditorProps`

*Type*

Controlled, length-bounded chat props with optional external formatting placement.

```ts
type IChatMarkdownEditorProps = Pick<React.ComponentProps<'div'>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-required' | 'className'> & {
    controlsRef?: React.Ref<IChatMarkdownEditorControls>;
    disabled?: boolean;
    formattingContainer?: HTMLElement | null;
    isShiftEnterSubmit?: boolean;
    maxEditorHeight?: number;
    maxLength: number;
    onChange: (value: string) => void;
    onSubmitRequest?: (markdown: string) => void;
    placeholder?: string;
    value: string;
};
```

#### <a id="api-ICheckboxProps"></a>`ICheckboxProps`

*Type*

Native attributes and shared options for Checkbox.

```ts
type ICheckboxProps = Omit<BaseCheckbox.Root.Props, 'checked' | 'defaultChecked' | 'nativeButton' | 'onCheckedChange' | 'render'> & {
    asChild?: boolean;
    checked?: boolean | 'indeterminate';
    defaultChecked?: boolean | 'indeterminate';
    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
};
```

#### <a id="api-ICodeBlockProps"></a>`ICodeBlockProps`

*Type*

Source metadata, retained controls, and wrapping policies.

```ts
type ICodeBlockProps = Omit<React.ComponentPropsWithoutRef<'pre'>, 'children'> & {
    children: React.ReactNode;
    copyValue?: string | undefined;
    copyLabel?: string | undefined;
    filePath?: string | undefined;
    headerLabel?: React.ReactNode | undefined;
    headerRole?: React.ReactNode | undefined;
    headerMeta?: React.ReactNode | undefined;
    fileIcon?: React.ReactNode | undefined;
    fileStatus?: ICodeFileStatus | undefined;
    hasHeader?: boolean | undefined;
    hasCopyButton?: boolean | undefined;
    hasPreferencesControls?: boolean | undefined;
    hasSyntaxHighlighting?: boolean | undefined;
    language?: string | undefined;
    prefersWrappedCode?: boolean | undefined;
    shouldWrapContent?: boolean | undefined;
};
```

#### <a id="api-ICodeDiffLanguage"></a>`ICodeDiffLanguage`

*Type*

Supported languages registered by the diff highlighter.

```ts
type ICodeDiffLanguage = keyof typeof CODE_DIFF_LANGUAGES;
```

#### <a id="api-ICodeDiffProps"></a>`ICodeDiffProps`

*Type*

Viewer controls with package-owned syntax, theme, and responsive layout.

```ts
type ICodeDiffProps = Omit<ReactDiffViewerProps, 'compareMethod' | 'oldValue' | 'newValue' | 'renderContent' | 'useDarkTheme' | 'splitView'> & Pick<ICodeBlockProps, 'filePath' | 'fileIcon' | 'fileStatus' | 'headerLabel' | 'headerMeta'> & {
    className?: string;
    tabIndex?: number;
    codeDiffView?: ICodeDiffView;
    language?: ICodeDiffLanguage;
    newValue: string;
    oldValue: string;
    responsiveBreakpoint?: IBreakpoint;
};
```

#### <a id="api-ICodeDiffView"></a>`ICodeDiffView`

*Type*

Validated preference contract.

```ts
type ICodeDiffView = z.infer<typeof CodeDiffViewSchema>;
```

#### <a id="api-ICodeFileHeaderProps"></a>`ICodeFileHeaderProps`

*Type*

Source and diff headers share file metadata while their owners supply controls.

```ts
type ICodeFileHeaderProps = React.ComponentProps<'div'> & Pick<ICodeBlockProps, 'filePath' | 'headerLabel' | 'headerRole' | 'headerMeta' | 'fileIcon' | 'fileStatus'> & {
    actions?: React.ReactNode | undefined;
    languageLabel?: string | undefined;
};
```

#### <a id="api-ICodeFileStatus"></a>`ICodeFileStatus`

*Type*

Git file state displayed with a matching letter and color.

```ts
type ICodeFileStatus = 'added' | 'modified' | 'removed';
```

#### <a id="api-ICodePreferencesControlsProps"></a>`ICodePreferencesControlsProps`

*Type*

Code preference controls render only the preference groups enabled by their parent surface.

```ts
type ICodePreferencesControlsProps = {
    canChangeCodeDiffView?: boolean | undefined;
    canChangePrefersWrappedCode?: boolean | undefined;
    className?: string | undefined;
    codeDiffView?: ICodeDiffView | undefined;
    isInline?: boolean | undefined;
    prefersWrappedCode: boolean;
};
```

**Members**

- `canChangeCodeDiffView: boolean` (property)
- `canChangePrefersWrappedCode: boolean` (property)
- `className: string` (property)
- `codeDiffView: ICodeDiffView` (property)
- `isInline: boolean` (property)
- `prefersWrappedCode: boolean` (property)

#### <a id="api-IConfirmationDialogCloseHandler"></a>`IConfirmationDialogCloseHandler`

*Type*

Options and native attributes for ConfirmationDialogCloseHandler.

```ts
type IConfirmationDialogCloseHandler = (isConfirmed: true | undefined) => unknown;
```

#### <a id="api-IConfirmationDialogStore"></a>`IConfirmationDialogStore`

*Type*

Options and native attributes for ConfirmationDialogStore.

```ts
type IConfirmationDialogStore = IConfirmationDialogState & {
    openConfirmationDialog: (options: IOpenConfirmationDialogOptions) => void;
    closeConfirmationDialog: (isConfirmed: true | undefined) => void;
};
```

#### <a id="api-ICopyButtonProps"></a>`ICopyButtonProps`

*Type*

Copy button props keep the copy action and icon content owned by the component.

```ts
type ICopyButtonProps = Omit<IButtonProps, 'children' | 'onClick' | 'type' | 'value'> & {
    copiedFeedbackDuration?: number;
    copiedLabel?: string;
    copyLabel?: string;
    label?: string;
    value: string | (() => Promise<string>);
};
```

#### <a id="api-IDialogBodyProps"></a>`IDialogBodyProps`

*Type*

Options and native attributes for DialogBody.

```ts
type IDialogBodyProps = Omit<React.ComponentProps<'div'>, 'style'> & {
    padding?: 'default' | 'none';
};
```

#### <a id="api-IDialogCancelProps"></a>`IDialogCancelProps`

*Type*

Options and native attributes for DialogCancel.

```ts
type IDialogCancelProps = Omit<IDialogCloseProps, 'className' | 'style'>;
```

#### <a id="api-IDialogCloseProps"></a>`IDialogCloseProps`

*Type*

Options and native attributes for DialogClose.

```ts
type IDialogCloseProps = Omit<BaseDialog.Close.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IDialogContentProps"></a>`IDialogContentProps`

*Type*

Options and native attributes for DialogContent.

```ts
type IDialogContentProps = Omit<BaseDialog.Popup.Props, 'className' | 'initialFocus' | 'render' | 'style'> & {
    backButtonIcon?: React.ReactNode;
    backButtonAriaLabel?: string;
    closeButtonIcon?: React.ReactNode;
    closeButtonAriaLabel?: string;
    isCloseButtonVisible?: boolean;
    asChild?: boolean;
    forceMount?: BaseDialog.Portal.Props['keepMounted'];
    initialFocus?: BaseDialog.Popup.Props['initialFocus'] | 'dismiss-control';
    size: IDialogSize;
};
```

#### <a id="api-IDialogDescriptionProps"></a>`IDialogDescriptionProps`

*Type*

Options and native attributes for DialogDescription.

```ts
type IDialogDescriptionProps = BaseDialog.Description.Props;
```

#### <a id="api-IDialogFooterProps"></a>`IDialogFooterProps`

*Type*

Options and native attributes for DialogFooter.

```ts
type IDialogFooterProps = Omit<React.ComponentProps<'footer'>, 'className' | 'style'>;
```

#### <a id="api-IDialogHeaderProps"></a>`IDialogHeaderProps`

*Type*

Options and native attributes for DialogHeader.

```ts
type IDialogHeaderProps = Omit<React.ComponentProps<'header'>, 'className' | 'style'> & {
    actions?: React.ReactNode;
    leadingAction?: React.ReactNode;
    layout?: 'centered' | 'split';
};
```

#### <a id="api-IDialogNavigationDismissalOptions"></a>`IDialogNavigationDismissalOptions`

*Type*

Registers the current session identity and synchronous navigation cancellation.

```ts
type IDialogNavigationDismissalOptions = IRouterDialogNavigationDismissalOptions;
```

#### <a id="api-IDialogNavigationObserverProps"></a>`IDialogNavigationObserverProps`

*Type*

Marks a committed root error screen while observing router location changes.

```ts
type IDialogNavigationObserverProps = IRouterDialogNavigationObserverProps;
```

#### <a id="api-IDialogNavigationProviderProps"></a>`IDialogNavigationProviderProps`

*Type*

Shares navigation dismissal between a router and its persistent dialog hosts.

```ts
type IDialogNavigationProviderProps = IRouterDialogNavigationProviderProps;
```

#### <a id="api-IDialogNavigationSessionReader"></a>`IDialogNavigationSessionReader`

*Type*

Reads an opaque session identity that stays stable until the dialog closes.

```ts
type IDialogNavigationSessionReader = IRouterDialogNavigationSessionReader;
```

#### <a id="api-IDialogProps"></a>`IDialogProps`

*Type*

Options and native attributes for Dialog.

```ts
type IDialogProps = Omit<BaseDialog.Root.Props, 'disablePointerDismissal' | 'onOpenChange'> & {
    isDismissalDisabled?: boolean;
    isOverlayCloseEnabled?: boolean;
    getNavigationSession?: IDialogNavigationSessionReader;
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-IDialogSize"></a>`IDialogSize`

*Type*

Compact, medium, or large dialog geometry.

```ts
type IDialogSize = NonNullable<VariantProps<typeof dialogContentVariants>['size']>;
```

#### <a id="api-IDialogTitleProps"></a>`IDialogTitleProps`

*Type*

Options and native attributes for DialogTitle.

```ts
type IDialogTitleProps = BaseDialog.Title.Props;
```

#### <a id="api-IDialogTriggerProps"></a>`IDialogTriggerProps`

*Type*

Options and native attributes for DialogTrigger.

```ts
type IDialogTriggerProps = Omit<BaseDialog.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IDividerProps"></a>`IDividerProps`

*Type*

Divider props expose the shared decorative option with Base UI separator behavior.

```ts
type IDividerProps = React.ComponentProps<typeof BaseSeparator> & {
    decorative?: boolean;
};
```

#### <a id="api-IDrawerBodyProps"></a>`IDrawerBodyProps`

*Type*

Options and native attributes for DrawerBody.

```ts
type IDrawerBodyProps = Omit<React.ComponentProps<'div'>, 'style'>;
```

#### <a id="api-IDrawerCloseProps"></a>`IDrawerCloseProps`

*Type*

Options and native attributes for DrawerClose.

```ts
type IDrawerCloseProps = Omit<BaseDrawer.Close.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IDrawerContentProps"></a>`IDrawerContentProps`

*Type*

Options and native attributes for DrawerContent.

```ts
type IDrawerContentProps = Omit<BaseDrawer.Popup.Props, 'className' | 'render' | 'style'> & {
    closeButtonAriaLabel?: string;
    closeButtonIcon?: React.ReactNode;
    density?: IDrawerDensity;
    forceMount?: BaseDrawer.Portal.Props['keepMounted'];
    size: IDrawerSize;
    viewportStyle?: React.CSSProperties;
};
```

#### <a id="api-IDrawerDensity"></a>`IDrawerDensity`

*Type*

Coordinated header and body spacing.

```ts
type IDrawerDensity = NonNullable<VariantProps<typeof drawerHeaderVariants>['density']>;
```

#### <a id="api-IDrawerDescriptionProps"></a>`IDrawerDescriptionProps`

*Type*

Options and native attributes for DrawerDescription.

```ts
type IDrawerDescriptionProps = BaseDrawer.Description.Props;
```

#### <a id="api-IDrawerFooterProps"></a>`IDrawerFooterProps`

*Type*

Options and native attributes for DrawerFooter.

```ts
type IDrawerFooterProps = Omit<React.ComponentProps<'footer'>, 'style'>;
```

#### <a id="api-IDrawerHeaderProps"></a>`IDrawerHeaderProps`

*Type*

Options and native attributes for DrawerHeader.

```ts
type IDrawerHeaderProps = Omit<React.ComponentProps<'header'>, 'className' | 'style'> & {
    actions?: React.ReactNode;
};
```

#### <a id="api-IDrawerProps"></a>`IDrawerProps`

*Type*

Options and native attributes for Drawer.

```ts
type IDrawerProps = Omit<BaseDrawer.Root.Props, 'disablePointerDismissal' | 'onOpenChange' | 'swipeDirection'> & {
    isDismissalDisabled?: boolean;
    onOpenChange?: (open: boolean) => void;
    side: IDrawerSide;
};
```

#### <a id="api-IDrawerSide"></a>`IDrawerSide`

*Type*

Left or right edge placement.

```ts
type IDrawerSide = NonNullable<VariantProps<typeof drawerPopupVariants>['side']>;
```

#### <a id="api-IDrawerSize"></a>`IDrawerSize`

*Type*

Compact or medium drawer width.

```ts
type IDrawerSize = NonNullable<VariantProps<typeof drawerPopupVariants>['size']>;
```

#### <a id="api-IDrawerTitleProps"></a>`IDrawerTitleProps`

*Type*

Options and native attributes for DrawerTitle.

```ts
type IDrawerTitleProps = BaseDrawer.Title.Props;
```

#### <a id="api-IDrawerTriggerProps"></a>`IDrawerTriggerProps`

*Type*

Options and native attributes for DrawerTrigger.

```ts
type IDrawerTriggerProps = Omit<BaseDrawer.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IDropdownMenuCheckboxItemProps"></a>`IDropdownMenuCheckboxItemProps`

*Type*

Native attributes and shared options for DropdownMenuCheckboxItem.

```ts
type IDropdownMenuCheckboxItemProps = Omit<BaseMenu.CheckboxItem.Props, 'checked' | 'defaultChecked' | 'label' | 'nativeButton' | 'onCheckedChange' | 'onSelect' | 'render'> & VariantProps<typeof dropdownMenuItemVariants> & IDropdownMenuSelectableItemProps & {
    checked?: boolean | 'indeterminate';
    defaultChecked?: boolean | 'indeterminate';
    onCheckedChange?: (checked: boolean) => void;
};
```

#### <a id="api-IDropdownMenuContentProps"></a>`IDropdownMenuContentProps`

*Type*

Native attributes and shared options for DropdownMenuContent.

```ts
type IDropdownMenuContentProps = Omit<BaseMenu.Popup.Props, 'render'> & Pick<BaseMenu.Positioner.Props, 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
    asChild?: boolean;
    avoidCollisions?: boolean;
    forceMount?: BaseMenu.Portal.Props['keepMounted'];
    hideWhenDetached?: boolean;
    loop?: boolean;
    onCloseAutoFocus?: (event: Event) => void;
    onEscapeKeyDown?: (event: Event) => void;
    onFocusOutside?: (event: Event) => void;
    onInteractOutside?: (event: Event) => void;
    onPointerDownOutside?: (event: Event) => void;
    sticky?: 'partial' | 'always';
};
```

#### <a id="api-IDropdownMenuGroupProps"></a>`IDropdownMenuGroupProps`

*Type*

Native attributes and shared options for DropdownMenuGroup.

```ts
type IDropdownMenuGroupProps = BaseMenu.Group.Props;
```

#### <a id="api-IDropdownMenuItemProps"></a>`IDropdownMenuItemProps`

*Type*

Native attributes and shared options for DropdownMenuItem.

```ts
type IDropdownMenuItemProps = Omit<BaseMenu.Item.Props, 'label' | 'nativeButton' | 'onSelect' | 'render'> & VariantProps<typeof dropdownMenuItemVariants> & IDropdownMenuSelectableItemProps;
```

#### <a id="api-IDropdownMenuLabelProps"></a>`IDropdownMenuLabelProps`

*Type*

Native attributes and shared options for DropdownMenuLabel.

```ts
type IDropdownMenuLabelProps = React.ComponentProps<'div'> & {
    inset?: boolean;
};
```

#### <a id="api-IDropdownMenuProps"></a>`IDropdownMenuProps`

*Type*

Native attributes and shared options for DropdownMenu.

```ts
type IDropdownMenuProps = Omit<BaseMenu.Root.Props, 'onOpenChange'> & {
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-IDropdownMenuRadioGroupProps"></a>`IDropdownMenuRadioGroupProps`

*Type*

Native attributes and shared options for DropdownMenuRadioGroup.

```ts
type IDropdownMenuRadioGroupProps = Omit<BaseMenu.RadioGroup.Props, 'onValueChange'> & {
    onValueChange?: (value: string) => void;
};
```

#### <a id="api-IDropdownMenuRadioItemProps"></a>`IDropdownMenuRadioItemProps`

*Type*

Native attributes and shared options for DropdownMenuRadioItem.

```ts
type IDropdownMenuRadioItemProps = Omit<BaseMenu.RadioItem.Props, 'label' | 'nativeButton' | 'onSelect' | 'render' | 'value'> & VariantProps<typeof dropdownMenuItemVariants> & IDropdownMenuSelectableItemProps & {
    value: string;
};
```

#### <a id="api-IDropdownMenuSeparatorProps"></a>`IDropdownMenuSeparatorProps`

*Type*

Native attributes and shared options for DropdownMenuSeparator.

```ts
type IDropdownMenuSeparatorProps = BaseMenu.Separator.Props;
```

#### <a id="api-IDropdownMenuShortcutProps"></a>`IDropdownMenuShortcutProps`

*Type*

Native attributes and shared options for DropdownMenuShortcut.

```ts
type IDropdownMenuShortcutProps = React.ComponentProps<'span'>;
```

#### <a id="api-IDropdownMenuSubContentProps"></a>`IDropdownMenuSubContentProps`

*Type*

Native attributes and shared options for DropdownMenuSubContent.

```ts
type IDropdownMenuSubContentProps = IDropdownMenuContentProps;
```

#### <a id="api-IDropdownMenuSubProps"></a>`IDropdownMenuSubProps`

*Type*

Native attributes and shared options for DropdownMenuSub.

```ts
type IDropdownMenuSubProps = Omit<BaseMenu.SubmenuRoot.Props, 'onOpenChange'> & {
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-IDropdownMenuSubTriggerProps"></a>`IDropdownMenuSubTriggerProps`

*Type*

Native attributes and shared options for DropdownMenuSubTrigger.

```ts
type IDropdownMenuSubTriggerProps = Omit<BaseMenu.SubmenuTrigger.Props, 'label' | 'nativeButton' | 'render'> & {
    asChild?: boolean;
    inset?: boolean;
    label?: string;
    textValue?: string;
    variant?: VariantProps<typeof dropdownMenuItemVariants>['variant'];
};
```

#### <a id="api-IDropdownMenuTriggerProps"></a>`IDropdownMenuTriggerProps`

*Type*

Native attributes and shared options for DropdownMenuTrigger.

```ts
type IDropdownMenuTriggerProps = Omit<BaseMenu.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IEmptyStateDescriptionProps"></a>`IEmptyStateDescriptionProps`

*Type*

Native props for IEmptyStateDescriptionProps, retaining the source component contract.

```ts
type IEmptyStateDescriptionProps = React.ComponentProps<'p'> & {
    asChild?: boolean;
};
```

#### <a id="api-IEmptyStateProps"></a>`IEmptyStateProps`

*Type*

Empty-state slots preserve native attributes while supporting semantic child elements.

```ts
type IEmptyStateProps = React.ComponentProps<'div'> & {
    asChild?: boolean;
};
```

#### <a id="api-IEmptyStateTitleProps"></a>`IEmptyStateTitleProps`

*Type*

Native props for IEmptyStateTitleProps, retaining the source component contract.

```ts
type IEmptyStateTitleProps = React.ComponentProps<'p'> & {
    asChild?: boolean;
};
```

#### <a id="api-IErrorFeedbackProviderProps"></a>`IErrorFeedbackProviderProps`

*Type*

Scoped application policy and its rendered children.

```ts
type IErrorFeedbackProviderProps = {
    children: ReactNode;
    resolveErrorFeedback?: IErrorFeedbackResolver;
};
```

**Members**

- `children: ReactNode` (property)
- `resolveErrorFeedback: IErrorFeedbackResolver` (property)

#### <a id="api-IErrorFeedbackResolver"></a>`IErrorFeedbackResolver`

*Type*

Application-owned error copy, cancellation, and access-loss policy.

```ts
type IErrorFeedbackResolver = ReturnType<typeof createErrorFeedback>;
```

#### <a id="api-IExternalToastr"></a>`IExternalToastr`

*Type*

Exported toastr aliases keep Sonner implementation types behind the shared package API.

```ts
type IExternalToastr = SonnerExternalToast;
```

#### <a id="api-IFieldDescriptionProps"></a>`IFieldDescriptionProps`

*Type*

Native attributes and shared options for FieldDescription.

```ts
type IFieldDescriptionProps = React.ComponentProps<'p'>;
```

#### <a id="api-IFieldErrorProps"></a>`IFieldErrorProps`

*Type*

Native attributes and shared options for FieldError.

```ts
type IFieldErrorProps = React.ComponentProps<'p'>;
```

#### <a id="api-IFieldGroupProps"></a>`IFieldGroupProps`

*Type*

Native attributes and shared options for FieldGroup.

```ts
type IFieldGroupProps = React.ComponentProps<'div'>;
```

#### <a id="api-IFieldLegendProps"></a>`IFieldLegendProps`

*Type*

Native attributes and shared options for FieldLegend.

```ts
type IFieldLegendProps = React.ComponentProps<'legend'>;
```

#### <a id="api-IFieldProps"></a>`IFieldProps`

*Type*

Native attributes and shared options for Field.

```ts
type IFieldProps = React.ComponentProps<'div'>;
```

#### <a id="api-IFieldSetProps"></a>`IFieldSetProps`

*Type*

Native attributes and shared options for FieldSet.

```ts
type IFieldSetProps = React.ComponentProps<'fieldset'>;
```

#### <a id="api-IFileUploadDialogDiscardHandler"></a>`IFileUploadDialogDiscardHandler`

*Type*

Receives discarded successful uploads synchronously before their local queue records disappear.

```ts
type IFileUploadDialogDiscardHandler<TResult> = (items: readonly IFileUploadSucceededItem<TResult>[]) => void;
```

#### <a id="api-IFileUploadDialogProps"></a>`IFileUploadDialogProps`

*Type*

Controlled or default-open upload dialog with immediate transfers and recoverable finalization.

```ts
type IFileUploadDialogProps<TResult> = Omit<IDialogProps, 'children'> & {
    closeLabel?: string;
    fileUploadProps: IFileUploadDialogQueueProps<TResult>;
    onDiscard?: IFileUploadDialogDiscardHandler<TResult>;
    onSubmit: IFileUploadDialogSubmitHandler<TResult>;
    size?: IDialogSize;
    submitLabel?: string;
    title?: ReactNode;
    trigger?: ReactElement;
};
```

#### <a id="api-IFileUploadDialogSubmitHandler"></a>`IFileUploadDialogSubmitHandler`

*Type*

Finalizes a successful queue. Applications own idempotency and reconcile uncertain provider outcomes before retrying.

```ts
type IFileUploadDialogSubmitHandler<TResult> = (items: readonly IFileUploadSucceededItem<TResult>[]) => void | Promise<void>;
```

#### <a id="api-IFileUploadPreviewRenderer"></a>`IFileUploadPreviewRenderer`

*Type*

Optional preview content for one typed upload queue item.

```ts
type IFileUploadPreviewRenderer<TResult> = (item: IFileUploadItem<TResult>) => ReactNode;
```

#### <a id="api-IFileUploadProps"></a>`IFileUploadProps`

*Type*

Native field attributes, file admission policy, upload adapters, callbacks, and presentation.

```ts
type IFileUploadProps<TResult> = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'> & {
    acceptedFileTypes: readonly string[];
    allowDuplicateFiles?: boolean;
    autoUpload?: boolean;
    browseLabel?: string;
    cancelAllLabel?: string;
    controlsRef?: Ref<IFileUploadControls>;
    description?: ReactNode;
    disabled?: boolean;
    dropZoneClassName?: string;
    dropZoneLabel?: string;
    existingFiles?: readonly File[];
    hideUploadAreaLabel?: string;
    inputProps?: IFileUploadInputProps;
    isLabelVisible?: boolean;
    isPolicyVisible?: boolean;
    label?: ReactNode;
    listClassName?: string;
    maxConcurrentUploads?: number;
    maxFileBytes: number;
    maxFiles?: number;
    maxTotalBytes?: number;
    onFileRejected?: IFileUploadRejectedHandler;
    onItemsChange?: IFileUploadItemsChangeHandler<TResult>;
    onUploadCanceled?: IFileUploadCanceledHandler;
    onUploadFailure?: IFileUploadFailureHandler;
    onUploadSuccess?: IFileUploadSuccessHandler<TResult>;
    onUploadAreaExpand?: () => void;
    renderPreview?: IFileUploadPreviewRenderer<TResult>;
    replaceSingleFile?: boolean;
    showUploadAreaLabel?: string;
    startUploadsLabel?: string;
    statusLabels?: Partial<Record<IFileUploadStatus, string>>;
    uploadFile: IFileUploadHandler<TResult>;
    validateFile?: IFileUploadValidator;
};
```

#### <a id="api-IGlobalErrorBoundaryClassNames"></a>`IGlobalErrorBoundaryClassNames`

*Type*

Global error boundary class overrides target stable presentation slots.

```ts
type IGlobalErrorBoundaryClassNames = {
    root?: string;
    content?: string;
    status?: string;
    heading?: string;
    description?: string;
    errorMessage?: string;
    errorCode?: string;
    refreshButton?: string;
    refreshError?: string;
};
```

**Members**

- `root: string` (property)
- `content: string` (property)
- `status: string` (property)
- `heading: string` (property)
- `description: string` (property)
- `errorMessage: string` (property)
- `errorCode: string` (property)
- `refreshButton: string` (property)
- `refreshError: string` (property)

#### <a id="api-IGlobalErrorBoundaryProps"></a>`IGlobalErrorBoundaryProps`

*Type*

Route-level error boundary props allow copy and styling overrides.

```ts
type IGlobalErrorBoundaryProps = Omit<ComponentProps<'main'>, 'children'> & {
    classNames?: IGlobalErrorBoundaryClassNames;
    description?: ReactNode;
    heading?: ReactNode;
    refreshButtonLabel?: ReactNode;
    refreshingButtonLabel?: ReactNode;
    statusLabel?: ReactNode;
    onRefreshClick?: IGlobalErrorBoundaryRefreshHandler;
};
```

#### <a id="api-IGlobalErrorBoundaryRefreshHandler"></a>`IGlobalErrorBoundaryRefreshHandler`

*Type*

Global error refresh handlers recover through jg-sw's updateApp or docs-specific no-op previews.

```ts
type IGlobalErrorBoundaryRefreshHandler = () => Promise<void> | void;
```

#### <a id="api-IGlobalErrorBoundaryViewProps"></a>`IGlobalErrorBoundaryViewProps`

*Type*

Presentational error boundary props accept the error supplied by React Router or tests.

```ts
type IGlobalErrorBoundaryViewProps = IGlobalErrorBoundaryProps & {
    error: unknown;
};
```

#### <a id="api-IHeadingLevel"></a>`IHeadingLevel`

*Type*

Supported heading levels intentionally stop at h5 for the shared prose scale.

```ts
type IHeadingLevel = keyof typeof headingClassNames;
```

#### <a id="api-IHeadingProps"></a>`IHeadingProps`

*Type*

Native attributes and shared options for Heading.

```ts
type IHeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'role'> & {
    level: IHeadingLevel;
    role?: IHeadingRole | React.AriaRole | undefined;
};
```

#### <a id="api-IHeadingRole"></a>`IHeadingRole`

*Type*

Statement roles style headings independently from their semantic level.

```ts
type IHeadingRole = NonNullable<VariantProps<typeof headingVariants>['role']>;
```

#### <a id="api-IIconTileProps"></a>`IIconTileProps`

*Type*

Icon tile props extend the span contract; classname is reserved for layout such as margins or grid placement.

```ts
type IIconTileProps = React.ComponentProps<'span'> & {
    size?: IIconTileSize;
    tone?: IIconTileTone;
};
```

#### <a id="api-IIconTileSize"></a>`IIconTileSize`

*Type*

Named tile sizes follow the text beside the tile; components choose one and never invent another.

```ts
type IIconTileSize = 'sm' | 'md' | 'lg';
```

#### <a id="api-IIconTileTone"></a>`IIconTileTone`

*Type*

Tile tones carry status semantics; neutral tints from the surrounding text color.

```ts
type IIconTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'destructive';
```

#### <a id="api-IImageUploadFieldCurrentImage"></a>`IImageUploadFieldCurrentImage`

*Type*

Controlled image metadata. The consuming application owns the URL and its lifetime.

```ts
type IImageUploadFieldCurrentImage = {
    fileName: string;
    imageUrl: string;
};
```

**Members**

- `fileName: string` (property)
- `imageUrl: string` (property)

#### <a id="api-IImageUploadFieldProps"></a>`IImageUploadFieldProps`

*Type*

Controlled image field with single-file replacement, finalization, and removal callbacks.

```ts
type IImageUploadFieldProps<TResult> = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange' | 'onSubmit'> & Pick<IFileUploadProps<TResult>, 'acceptedFileTypes' | 'maxFileBytes' | 'onFileRejected' | 'onItemsChange' | 'onUploadCanceled' | 'onUploadFailure' | 'onUploadSuccess' | 'uploadFile' | 'validateFile'> & {
    chooseLabel?: string;
    currentImage?: IImageUploadFieldCurrentImage | null;
    description?: ReactNode;
    dialogTitle?: ReactNode;
    disabled?: boolean;
    error?: ReactNode;
    isLoading?: boolean;
    label?: ReactNode;
    onCurrentImageRemove?: () => void;
    onDiscard?: IFileUploadDialogDiscardHandler<TResult>;
    onSubmit: IFileUploadDialogSubmitHandler<TResult>;
    removeLabel?: string;
    replaceLabel?: string;
    submitLabel?: string;
};
```

#### <a id="api-IInlineCodeProps"></a>`IInlineCodeProps`

*Type*

Inline code props preserve the native semantic element contract

```ts
type IInlineCodeProps = React.ComponentProps<'code'>;
```

#### <a id="api-IInlineProps"></a>`IInlineProps`

*Type*

Options and native attributes for Inline.

```ts
type IInlineProps = React.ComponentProps<'div'>;
```

#### <a id="api-IInputProps"></a>`IInputProps`

*Type*

Native attributes and shared options for Input.

```ts
type IInputProps = React.ComponentProps<'input'>;
```

#### <a id="api-IKeyboardKeyProps"></a>`IKeyboardKeyProps`

*Type*

Native attributes and shared options for KeyboardKey.

```ts
type IKeyboardKeyProps = React.ComponentProps<'kbd'>;
```

#### <a id="api-ILabelProps"></a>`ILabelProps`

*Type*

Native attributes and shared options for Label.

```ts
type ILabelProps = React.ComponentProps<'label'>;
```

#### <a id="api-ILargeTextProps"></a>`ILargeTextProps`

*Type*

Native attributes and shared options for LargeText.

```ts
type ILargeTextProps = React.ComponentProps<'p'>;
```

#### <a id="api-ILeadProps"></a>`ILeadProps`

*Type*

Native attributes and shared options for Lead.

```ts
type ILeadProps = React.ComponentProps<'p'>;
```

#### <a id="api-IListItemProps"></a>`IListItemProps`

*Type*

Native attributes and shared options for ListItem.

```ts
type IListItemProps = React.ComponentProps<'li'>;
```

#### <a id="api-ILoadMoreButtonClassNames"></a>`ILoadMoreButtonClassNames`

*Type*

Load-more button slot class overrides target the button, icon, and visible label.

```ts
type ILoadMoreButtonClassNames = {
    button?: string;
    icon?: string;
    label?: string;
};
```

**Members**

- `button: string` (property)
- `icon: string` (property)
- `label: string` (property)

#### <a id="api-ILoadMoreButtonIconPlacement"></a>`ILoadMoreButtonIconPlacement`

*Type*

Load-more icon placement controls which side receives shared button icon spacing.

```ts
type ILoadMoreButtonIconPlacement = 'start' | 'end';
```

#### <a id="api-ILoadMoreButtonProps"></a>`ILoadMoreButtonProps`

*Type*

Load-more button props expose the query, copy, icon, slots, and shared button controls.

```ts
type ILoadMoreButtonProps = Omit<IButtonProps, 'asChild' | 'children' | 'className' | 'type'> & {
    className?: string;
    classNames?: ILoadMoreButtonClassNames;
    icon?: ReactNode;
    iconPlacement?: ILoadMoreButtonIconPlacement;
    label?: ReactNode;
    loadingAriaLabel?: string;
    loadingIcon?: ReactNode;
    loadingLabel?: ReactNode;
    query: ILoadMoreButtonQuery;
    shouldDisableWhenLoading?: boolean;
};
```

#### <a id="api-ILoadMoreButtonQuery"></a>`ILoadMoreButtonQuery`

*Type*

Load-more query shape stays data-library agnostic while matching infinite query result fields.

```ts
type ILoadMoreButtonQuery = IQueryExecutionState & {
    fetchNextPage: () => unknown;
};
```

#### <a id="api-ILocalUiPreferencesProviderProps"></a>`ILocalUiPreferencesProviderProps`

*Type*

Local mode enables controls and confirms changes in browser storage immediately.

```ts
type ILocalUiPreferencesProviderProps = IUiPreferencesProviderBaseProps & {
    initialPreferences?: IUiPreferences;
    mode: 'local';
};
```

#### <a id="api-IMarkdownEditorLayout"></a>`IMarkdownEditorLayout`

*Type*

An automatic container-responsive or explicit editor layout.

```ts
type IMarkdownEditorLayout = (typeof MARKDOWN_EDITOR_LAYOUTS)[keyof typeof MARKDOWN_EDITOR_LAYOUTS];
```

#### <a id="api-IMarkdownEditorProps"></a>`IMarkdownEditorProps`

*Type*

Controlled Markdown document props and authoring restrictions.

```ts
type IMarkdownEditorProps = Pick<React.ComponentProps<'div'>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-required' | 'className'> & {
    disabled?: boolean;
    layout?: IMarkdownEditorLayout;
    onChange: (value: string) => void;
    placeholder?: string;
    supportedTools?: ReadonlyArray<IMarkdownEditorTool>;
    value: string;
};
```

#### <a id="api-IMarkdownEditorTool"></a>`IMarkdownEditorTool`

*Type*

A tool accepted by the document editor authoring policy.

```ts
type IMarkdownEditorTool = (typeof MARKDOWN_EDITOR_ALL_TOOLS)[number];
```

#### <a id="api-IMarkdownEditorVariantProps"></a>`IMarkdownEditorVariantProps`

*Type*

Controlled document props with layout selected by the explicit component.

```ts
type IMarkdownEditorVariantProps = Omit<IMarkdownEditorProps, 'layout'>;
```

#### <a id="api-IMarkdownProps"></a>`IMarkdownProps`

*Type*

Markdown props keep the wrapper controlled while allowing component overrides.

```ts
type IMarkdownProps = Omit<Options, 'children' | 'components' | 'rehypePlugins' | 'remarkPlugins'> & {
    children: string;
    className?: string | undefined;
    components?: Components | undefined;
    prefersWrappedCode?: boolean | undefined;
    rehypePlugins?: NonNullable<Options['rehypePlugins']> | undefined;
    remarkPlugins?: NonNullable<Options['remarkPlugins']> | undefined;
    shouldOpenLinksInNewTab?: boolean | undefined;
};
```

#### <a id="api-IMutedTextProps"></a>`IMutedTextProps`

*Type*

Native attributes and shared options for MutedText.

```ts
type IMutedTextProps = React.ComponentProps<'p'>;
```

#### <a id="api-IOpenConfirmationDialogOptions"></a>`IOpenConfirmationDialogOptions`

*Type*

Options and native attributes for OpenConfirmationDialogOptions.

```ts
type IOpenConfirmationDialogOptions = {
    title?: React.ReactNode;
    description?: React.ReactNode;
    confirmText?: React.ReactNode;
    destructive?: boolean;
    onConfirmationDialogClose: IConfirmationDialogCloseHandler;
};
```

**Members**

- `title: React.ReactNode` (property)
- `description: React.ReactNode` (property)
- `confirmText: React.ReactNode` (property)
- `destructive: boolean` (property)
- `onConfirmationDialogClose: IConfirmationDialogCloseHandler` (property)

#### <a id="api-IOrderedListProps"></a>`IOrderedListProps`

*Type*

Native attributes and shared options for OrderedList.

```ts
type IOrderedListProps = React.ComponentProps<'ol'>;
```

#### <a id="api-IPageDescriptionProps"></a>`IPageDescriptionProps`

*Type*

Options and native attributes for PageDescription.

```ts
type IPageDescriptionProps = React.ComponentProps<'p'>;
```

#### <a id="api-IPageHeaderMetadataProps"></a>`IPageHeaderMetadataProps`

*Type*

Options and native attributes for PageHeaderMetadata.

```ts
type IPageHeaderMetadataProps = React.ComponentProps<'div'>;
```

#### <a id="api-IPageHeaderProps"></a>`IPageHeaderProps`

*Type*

Options and native attributes for PageHeader.

```ts
type IPageHeaderProps = React.ComponentProps<'header'>;
```

#### <a id="api-IPageHeaderRowProps"></a>`IPageHeaderRowProps`

*Type*

Options and native attributes for PageHeaderRow.

```ts
type IPageHeaderRowProps = React.ComponentProps<'div'>;
```

#### <a id="api-IPageHeaderTitleGroupProps"></a>`IPageHeaderTitleGroupProps`

*Type*

Options and native attributes for PageHeaderTitleGroup.

```ts
type IPageHeaderTitleGroupProps = React.ComponentProps<'div'>;
```

#### <a id="api-IPageShellProps"></a>`IPageShellProps`

*Type*

Options and native attributes for PageShell.

```ts
type IPageShellProps = React.ComponentProps<'main'>;
```

#### <a id="api-IPageTitleProps"></a>`IPageTitleProps`

*Type*

Options and native attributes for PageTitle.

```ts
type IPageTitleProps = React.ComponentProps<'h1'>;
```

#### <a id="api-IParagraphProps"></a>`IParagraphProps`

*Type*

Native attributes and shared options for Paragraph.

```ts
type IParagraphProps = React.ComponentProps<'p'>;
```

#### <a id="api-IProgressDeterminateProps"></a>`IProgressDeterminateProps`

*Type*

Determinate progress requires a concrete numeric value.

```ts
type IProgressDeterminateProps = IProgressBaseProps & {
    value: number;
    indeterminate?: false;
};
```

#### <a id="api-IProgressIndeterminateProps"></a>`IProgressIndeterminateProps`

*Type*

Indeterminate progress omits value so the two modes cannot be combined.

```ts
type IProgressIndeterminateProps = IProgressBaseProps & {
    indeterminate: true;
    value?: never;
};
```

#### <a id="api-IProgressProps"></a>`IProgressProps`

*Type*

Exported progress props keep determinate and indeterminate usage mutually exclusive.

```ts
type IProgressProps = IProgressDeterminateProps | IProgressIndeterminateProps;
```

#### <a id="api-IQueryBoundaryErrorAlertProps"></a>`IQueryBoundaryErrorAlertProps`

*Type*

Error alert props are passed through while QueryBoundary owns the shared query list.

```ts
type IQueryBoundaryErrorAlertProps = Omit<IQueryErrorAlertProps, 'presentation' | 'queries'>;
```

#### <a id="api-IQueryBoundaryLoaderProps"></a>`IQueryBoundaryLoaderProps`

*Type*

Loader props are passed through while QueryBoundary owns the shared query list.

```ts
type IQueryBoundaryLoaderProps = Omit<IQueryLoaderProps, 'isVisible' | 'queries'>;
```

#### <a id="api-IQueryBoundaryLoadMoreButtonProps"></a>`IQueryBoundaryLoadMoreButtonProps`

*Type*

Load-more props are passed through while QueryBoundary owns the first query as the source.

```ts
type IQueryBoundaryLoadMoreButtonProps = Omit<ILoadMoreButtonProps, 'query'>;
```

#### <a id="api-IQueryBoundaryProps"></a>`IQueryBoundaryProps`

*Type*

Query boundary props compose query feedback primitives around optional content.

```ts
type IQueryBoundaryProps = {
    children?: ReactNode;
    errorAlertProps?: false | IQueryBoundaryErrorAlertProps;
    loaderProps?: false | IQueryBoundaryLoaderProps;
    loadMoreButtonProps?: false | IQueryBoundaryLoadMoreButtonProps;
    queries: readonly IQueryBoundaryQuery[];
    resolutionKey: string;
    isInitialResolutionApproved?: boolean;
    renderErrorAlert?: IQueryBoundaryRenderErrorAlert;
    renderLoader?: IQueryBoundaryRenderLoader;
    renderLoadMoreButton?: IQueryBoundaryRenderLoadMoreButton;
};
```

**Members**

- `children: ReactNode` (property)
- `errorAlertProps: false | IQueryBoundaryErrorAlertProps` (property)
- `loaderProps: false | IQueryBoundaryLoaderProps` (property)
- `loadMoreButtonProps: false | IQueryBoundaryLoadMoreButtonProps` (property)
- `queries: readonly IQueryBoundaryQuery[]` (property)
- `resolutionKey: string` (property): changes identify a new logical query resolution that must earn initial visibility independently.
- `isInitialResolutionApproved: boolean` (property): trusted caller state can preserve an already-approved resolution across boundary remounts.
- `renderErrorAlert: IQueryBoundaryRenderErrorAlert` (property)
- `renderLoader: IQueryBoundaryRenderLoader` (property)
- `renderLoadMoreButton: IQueryBoundaryRenderLoadMoreButton` (property)

#### <a id="api-IQueryBoundaryQuery"></a>`IQueryBoundaryQuery`

*Type*

Query boundary accepts route query state and optional first-query pagination support.

```ts
type IQueryBoundaryQuery = IQueryErrorAlertQuery & IQueryExecutionState & {
    data: unknown;
    fetchNextPage?: () => unknown;
} & IQueryInitialResolutionState;
```

#### <a id="api-IQueryBoundaryRenderErrorAlert"></a>`IQueryBoundaryRenderErrorAlert`

*Type*

Render callbacks let consumers replace any default query feedback primitive.

```ts
type IQueryBoundaryRenderErrorAlert = (props: IQueryErrorAlertProps) => ReactNode;
```

#### <a id="api-IQueryBoundaryRenderLoader"></a>`IQueryBoundaryRenderLoader`

*Type*

Renderer for the loader slot.

```ts
type IQueryBoundaryRenderLoader = (props: IQueryLoaderProps) => ReactNode;
```

#### <a id="api-IQueryBoundaryRenderLoadMoreButton"></a>`IQueryBoundaryRenderLoadMoreButton`

*Type*

Renderer for the pagination slot.

```ts
type IQueryBoundaryRenderLoadMoreButton = (props: ILoadMoreButtonProps) => ReactNode;
```

#### <a id="api-IQueryErrorAlertPresentation"></a>`IQueryErrorAlertPresentation`

*Type*

Query error presentations distinguish blocking recovery from retained-content feedback.

```ts
type IQueryErrorAlertPresentation = 'blocking' | 'retained';
```

#### <a id="api-IQueryErrorAlertProps"></a>`IQueryErrorAlertProps`

*Type*

Query error alert props cover copy and failed query retrying.

```ts
type IQueryErrorAlertProps = Omit<ComponentProps<'div'>, 'title'> & {
    presentation: IQueryErrorAlertPresentation;
    queries: readonly IQueryErrorAlertQuery[];
    title?: string;
    fallbackMessage?: string;
    retryLabel?: string;
    retryingLabel?: string;
};
```

#### <a id="api-IQueryErrorAlertQuery"></a>`IQueryErrorAlertQuery`

*Type*

Structural query errors accepted from application-owned query clients.

```ts
type IQueryErrorAlertQuery = {
    error: unknown;
    isError: boolean;
    isFetching?: boolean;
    isRefetching?: boolean;
    refetch: () => Promise<unknown>;
};
```

**Members**

- `error: unknown` (property)
- `isError: boolean` (property)
- `isFetching: boolean` (property)
- `isRefetching: boolean` (property)
- `refetch: () => Promise<unknown>` (property)

#### <a id="api-IQueryErrorToastrProps"></a>`IQueryErrorToastrProps`

*Type*

Query error toastr props provide layout-free recovery for retained application content.

```ts
type IQueryErrorToastrProps = Pick<IQueryErrorAlertProps, 'queries' | 'retryLabel' | 'retryingLabel' | 'title' | 'fallbackMessage'> & {
    toastId: string | number;
};
```

#### <a id="api-IQueryLoaderClassNames"></a>`IQueryLoaderClassNames`

*Type*

Query loader class overrides target the wrapper and spinner separately.

```ts
type IQueryLoaderClassNames = {
    root?: string;
    spinner?: string;
};
```

**Members**

- `root: string` (property)
- `spinner: string` (property)

#### <a id="api-IQueryLoaderLayout"></a>`IQueryLoaderLayout`

*Type*

Query loader layout controls which surrounding surface owns vertical centering.

```ts
type IQueryLoaderLayout = keyof typeof QUERY_LOADER_LAYOUT_CLASS_NAMES;
```

#### <a id="api-IQueryLoaderProps"></a>`IQueryLoaderProps`

*Type*

Query loader props expose query state, wrapper attributes, and spinner presentation.

```ts
type IQueryLoaderProps = Omit<ComponentProps<'div'>, 'children'> & {
    queries: readonly IQueryLoaderQuery[];
    classNames?: IQueryLoaderClassNames;
    isVisible?: boolean;
    layout?: IQueryLoaderLayout;
    size?: IQueryLoaderSize;
};
```

#### <a id="api-IQueryLoaderQuery"></a>`IQueryLoaderQuery`

*Type*

Query loader query state follows the shared app-query execution flags.

```ts
type IQueryLoaderQuery = IQueryExecutionState;
```

#### <a id="api-IQueryLoaderSize"></a>`IQueryLoaderSize`

*Type*

Query loader size controls the spinner icon dimensions.

```ts
type IQueryLoaderSize = keyof typeof QUERY_LOADER_SPINNER_SIZE_CLASS_NAMES;
```

#### <a id="api-IRadioGroupItemProps"></a>`IRadioGroupItemProps`

*Type*

Native attributes and shared options for RadioGroupItem.

```ts
type IRadioGroupItemProps = Omit<BaseRadio.Root.Props<string>, 'nativeButton' | 'render' | 'value'> & {
    asChild?: boolean;
    value: string;
};
```

#### <a id="api-IRadioGroupProps"></a>`IRadioGroupProps`

*Type*

Native attributes and shared options for RadioGroup.

```ts
type IRadioGroupProps = Omit<BaseRadioGroup.Props<string>, 'onValueChange'> & {
    dir?: 'ltr' | 'rtl';
    loop?: boolean;
    onValueChange?: (value: string) => void;
    orientation?: 'horizontal' | 'vertical';
};
```

#### <a id="api-IReadOnlyUiPreferencesProviderProps"></a>`IReadOnlyUiPreferencesProviderProps`

*Type*

Read-only mode exposes preferences without granting mutation capability.

```ts
type IReadOnlyUiPreferencesProviderProps = IUiPreferencesProviderBaseProps & {
    initialPreferences?: IUiPreferences;
    mode: 'read-only';
};
```

#### <a id="api-IRemoteUiPreferencesProviderProps"></a>`IRemoteUiPreferencesProviderProps`

*Type*

Remote mode requires authoritative preferences and a rejecting async persistence adapter.

```ts
type IRemoteUiPreferencesProviderProps = IUiPreferencesProviderBaseProps & IUiPreferencesPersistenceAdapter & {
    initialPreferences: IUiPreferences;
    mode: 'remote';
};
```

#### <a id="api-IResolvedAppTheme"></a>`IResolvedAppTheme`

*Type*

Validated preference contract.

```ts
type IResolvedAppTheme = z.infer<typeof ResolvedAppThemeSchema>;
```

#### <a id="api-ISectionProps"></a>`ISectionProps`

*Type*

Native attributes and shared options for Section.

```ts
type ISectionProps = React.ComponentProps<'section'>;
```

#### <a id="api-ISelectContentProps"></a>`ISelectContentProps`

*Type*

Native attributes and shared options for SelectContent.

```ts
type ISelectContentProps = Omit<BaseSelect.Popup.Props, 'render'> & Pick<BaseSelect.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
    asChild?: boolean;
    avoidCollisions?: boolean;
    forceMount?: boolean;
    hideWhenDetached?: boolean;
    onCloseAutoFocus?: (event: Event) => void;
    onEscapeKeyDown?: (event: Event) => void;
    onFocusOutside?: (event: Event) => void;
    onInteractOutside?: (event: Event) => void;
    onPointerDownOutside?: (event: Event) => void;
    position?: 'item-aligned' | 'popper';
    sticky?: 'partial' | 'always';
};
```

#### <a id="api-ISelectItemProps"></a>`ISelectItemProps`

*Type*

Native attributes and shared options for SelectItem.

```ts
type ISelectItemProps = Omit<BaseSelect.Item.Props, 'label' | 'nativeButton' | 'render' | 'value'> & {
    asChild?: boolean;
    label?: string;
    textValue?: string;
    value: string;
};
```

#### <a id="api-ISelectProps"></a>`ISelectProps`

*Type*

Native attributes and shared options for Select.

```ts
type ISelectProps = Omit<BaseSelect.Root.Props<string>, 'defaultValue' | 'onOpenChange' | 'onValueChange' | 'value'> & {
    defaultValue?: string;
    onOpenChange?: (open: boolean) => void;
    onValueChange?: (value: string) => void;
    value?: string | null;
};
```

#### <a id="api-ISelectTriggerProps"></a>`ISelectTriggerProps`

*Type*

Native attributes and shared options for SelectTrigger.

```ts
type ISelectTriggerProps = Omit<BaseSelect.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-ISelectValueProps"></a>`ISelectValueProps`

*Type*

Native attributes and shared options for SelectValue.

```ts
type ISelectValueProps = Omit<BaseSelect.Value.Props, 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-ISmallTextProps"></a>`ISmallTextProps`

*Type*

Native attributes and shared options for SmallText.

```ts
type ISmallTextProps = React.ComponentProps<'small'>;
```

#### <a id="api-ISpinnerProps"></a>`ISpinnerProps`

*Type*

Spinner props reuse the Lucide icon contract while adding accessible loading defaults.

```ts
type ISpinnerProps = React.ComponentProps<typeof LoaderCircle>;
```

#### <a id="api-IStackProps"></a>`IStackProps`

*Type*

Options and native attributes for Stack.

```ts
type IStackProps = React.ComponentProps<'div'>;
```

#### <a id="api-ISurfaceProps"></a>`ISurfaceProps`

*Type*

Options and native attributes for Surface.

```ts
type ISurfaceProps = React.ComponentProps<'section'>;
```

#### <a id="api-ISwitchProps"></a>`ISwitchProps`

*Type*

Native attributes and shared options for Switch.

```ts
type ISwitchProps = Omit<BaseSwitch.Root.Props, 'nativeButton' | 'onCheckedChange' | 'render'> & {
    asChild?: boolean;
    onCheckedChange?: (checked: boolean) => void;
    size?: 'default' | 'sm';
};
```

#### <a id="api-ITableCellProps"></a>`ITableCellProps`

*Type*

Native attributes and shared options for TableCell.

```ts
type ITableCellProps = React.ComponentProps<'td'>;
```

#### <a id="api-ITableContainerProps"></a>`ITableContainerProps`

*Type*

Native attributes and shared options for TableContainer.

```ts
type ITableContainerProps = React.ComponentProps<'div'>;
```

#### <a id="api-ITableHeaderCellProps"></a>`ITableHeaderCellProps`

*Type*

Native attributes and shared options for TableHeaderCell.

```ts
type ITableHeaderCellProps = React.ComponentProps<'th'>;
```

#### <a id="api-ITableProps"></a>`ITableProps`

*Type*

Native attributes and shared options for Table.

```ts
type ITableProps = React.ComponentProps<'table'>;
```

#### <a id="api-ITableRowProps"></a>`ITableRowProps`

*Type*

Native attributes and shared options for TableRow.

```ts
type ITableRowProps = React.ComponentProps<'tr'>;
```

#### <a id="api-ITabsActivationMode"></a>`ITabsActivationMode`

*Type*

Tab activation modes supported by the shared tabs root.

```ts
type ITabsActivationMode = 'automatic' | 'manual';
```

#### <a id="api-ITabsContentProps"></a>`ITabsContentProps`

*Type*

Native attributes and shared options for TabsContent.

```ts
type ITabsContentProps = React.ComponentProps<typeof BaseTabs.Panel> & {
    forceMount?: boolean;
};
```

#### <a id="api-ITabsListProps"></a>`ITabsListProps`

*Type*

Native attributes and shared options for TabsList.

```ts
type ITabsListProps = React.ComponentProps<typeof BaseTabs.List> & {
    overflowBehavior: ITabsOverflowBehavior;
};
```

#### <a id="api-ITabsOverflowBehavior"></a>`ITabsOverflowBehavior`

*Type*

Scroll preserves complete natural-width labels; truncate is an explicit constrained exception.

```ts
type ITabsOverflowBehavior = 'scroll' | 'truncate';
```

#### <a id="api-ITabsProps"></a>`ITabsProps`

*Type*

Native attributes and shared options for Tabs.

```ts
type ITabsProps = Omit<React.ComponentProps<typeof BaseTabs.Root>, 'activationMode'> & {
    activationMode?: ITabsActivationMode;
};
```

#### <a id="api-ITabsTriggerProps"></a>`ITabsTriggerProps`

*Type*

Native attributes and shared options for TabsTrigger.

```ts
type ITabsTriggerProps = Omit<React.ComponentProps<typeof BaseTabs.Tab>, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-ITextareaProps"></a>`ITextareaProps`

*Type*

Native attributes and shared options for Textarea.

```ts
type ITextareaProps = React.ComponentProps<'textarea'>;
```

#### <a id="api-ITextLinkProps"></a>`ITextLinkProps`

*Type*

Native props for ITextLinkProps, retaining the source component contract.

```ts
type ITextLinkProps = React.ComponentProps<'a'> & {
    asChild?: boolean;
    variant?: ITextLinkVariant;
};
```

#### <a id="api-ITextLinkVariant"></a>`ITextLinkVariant`

*Type*

Text-link props preserve native anchor behavior and support slotted router links.

```ts
type ITextLinkVariant = keyof typeof TEXT_LINK_VARIANT_CLASS_NAMES;
```

#### <a id="api-IThemeChangeRequestedHandler"></a>`IThemeChangeRequestedHandler`

*Type*

Theme-toggle callbacks report the requested resolved theme after dispatch.

```ts
type IThemeChangeRequestedHandler = (nextTheme: IResolvedAppTheme) => void;
```

#### <a id="api-IThemeInitializationScriptProps"></a>`IThemeInitializationScriptProps`

*Type*

Initialization props expose only host-safe script attributes.

```ts
type IThemeInitializationScriptProps = Pick<React.ComponentProps<'script'>, 'id' | 'nonce'> & {
    storageId?: string;
};
```

#### <a id="api-IThemeProviderProps"></a>`IThemeProviderProps`

*Type*

Theme provider props configure children and transition behavior.

```ts
type IThemeProviderProps = {
    children: React.ReactNode;
    disableTransitionOnChange?: boolean;
};
```

**Members**

- `children: React.ReactNode` (property)
- `disableTransitionOnChange: boolean` (property)

#### <a id="api-IThemeProviderState"></a>`IThemeProviderState`

*Type*

Theme context state is the public contract returned by useTheme.

```ts
type IThemeProviderState = {
    theme: IAppTheme;
    resolvedTheme: IResolvedAppTheme;
    setTheme: (theme: IAppTheme) => void;
};
```

**Members**

- `theme: IAppTheme` (property)
- `resolvedTheme: IResolvedAppTheme` (property)
- `setTheme: (theme: IAppTheme) => void` (property)

#### <a id="api-IThemeToggleButtonProps"></a>`IThemeToggleButtonProps`

*Type*

Theme toggle props preserve Button styling while reserving theme-owned content and behavior.

```ts
type IThemeToggleButtonProps = Omit<IButtonProps, 'aria-label' | 'children' | 'onClick' | 'title'> & {
    onThemeChangeRequested?: IThemeChangeRequestedHandler;
};
```

#### <a id="api-IToastrClassNames"></a>`IToastrClassNames`

*Type*

Per-slot notification classes merged with the shared defaults.

```ts
type IToastrClassNames = SonnerToastClassnames;
```

#### <a id="api-IToastrProps"></a>`IToastrProps`

*Type*

Notification host props retaining Sonner configuration and overrides.

```ts
type IToastrProps = SonnerToasterProps;
```

#### <a id="api-ITooltipContentProps"></a>`ITooltipContentProps`

*Type*

Native attributes and shared options for TooltipContent.

```ts
type ITooltipContentProps = Omit<BaseTooltip.Popup.Props, 'render'> & Pick<BaseTooltip.Positioner.Props, 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
    asChild?: boolean;
    avoidCollisions?: boolean;
    forceMount?: BaseTooltip.Portal.Props['keepMounted'];
    hideWhenDetached?: boolean;
    sticky?: 'partial' | 'always';
};
```

#### <a id="api-ITooltipProps"></a>`ITooltipProps`

*Type*

Native attributes and shared options for Tooltip.

```ts
type ITooltipProps = Omit<BaseTooltip.Root.Props, 'disableHoverablePopup'> & {
    delayDuration?: BaseTooltip.Trigger.Props['delay'];
    disableHoverableContent?: boolean;
    disableHoverablePopup?: BaseTooltip.Root.Props['disableHoverablePopup'];
};
```

#### <a id="api-ITooltipProviderProps"></a>`ITooltipProviderProps`

*Type*

Native attributes and shared options for TooltipProvider.

```ts
type ITooltipProviderProps = Omit<BaseTooltip.Provider.Props, 'delay' | 'timeout'> & {
    delay?: BaseTooltip.Provider.Props['delay'];
    delayDuration?: BaseTooltip.Provider.Props['delay'];
    disableHoverableContent?: boolean;
    skipDelayDuration?: BaseTooltip.Provider.Props['timeout'];
    timeout?: BaseTooltip.Provider.Props['timeout'];
};
```

#### <a id="api-ITooltipTriggerProps"></a>`ITooltipTriggerProps`

*Type*

Native attributes and shared options for TooltipTrigger.

```ts
type ITooltipTriggerProps = Omit<BaseTooltip.Trigger.Props, 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-IUiPreferences"></a>`IUiPreferences`

*Type*

Validated preference contract.

```ts
type IUiPreferences = z.infer<typeof UiPreferencesSchema>;
```

#### <a id="api-IUiPreferencesContextState"></a>`IUiPreferencesContextState`

*Type*

Context state exposes the current snapshot and provider-owned update lifecycle.

```ts
type IUiPreferencesContextState = {
    canUpdatePreferences: boolean;
    isPreferencesUpdatePending: boolean;
    preferences: IUiPreferences;
    updatePreferences: (uiPreferencesPatch: IUiPreferencesPatch, options?: IUiPreferencesUpdateOptions) => void;
};
```

**Members**

- `canUpdatePreferences: boolean` (property)
- `isPreferencesUpdatePending: boolean` (property)
- `preferences: IUiPreferences` (property)
- `updatePreferences: (uiPreferencesPatch: IUiPreferencesPatch, options?: IUiPreferencesUpdateOptions) => void` (property)

#### <a id="api-IUiPreferencesPersistenceAdapter"></a>`IUiPreferencesPersistenceAdapter`

*Type*

Remote persistence adapters keep API and application cache ownership outside app-ui.

```ts
type IUiPreferencesPersistenceAdapter = {
    persistPreferences: (uiPreferences: IUiPreferences) => Promise<void>;
};
```

**Members**

- `persistPreferences: (uiPreferences: IUiPreferences) => Promise<void>` (property)

#### <a id="api-IUiPreferencesProviderProps"></a>`IUiPreferencesProviderProps`

*Type*

Provider props use an explicit mode so editable surfaces cannot silently skip persistence.

```ts
type IUiPreferencesProviderProps = ILocalUiPreferencesProviderProps | IReadOnlyUiPreferencesProviderProps | IRemoteUiPreferencesProviderProps;
```

#### <a id="api-IUiPreferencesSuccessNotification"></a>`IUiPreferencesSuccessNotification`

*Type*

Optional feedback shown only after the latest requested remote revision is confirmed.

```ts
type IUiPreferencesSuccessNotification = {
    title: string;
    description?: string;
};
```

**Members**

- `title: string` (property)
- `description: string` (property)

#### <a id="api-IUiPreferencesUpdateOptions"></a>`IUiPreferencesUpdateOptions`

*Type*

Per-update behavior that does not alter the persisted preference contract.

```ts
type IUiPreferencesUpdateOptions = {
    successNotification?: IUiPreferencesSuccessNotification;
};
```

**Members**

- `successNotification: IUiPreferencesSuccessNotification` (property)

#### <a id="api-IUnorderedListProps"></a>`IUnorderedListProps`

*Type*

Native attributes and shared options for UnorderedList.

```ts
type IUnorderedListProps = React.ComponentProps<'ul'>;
```

#### <a id="api-IYouTubeVideoDescriptor"></a>`IYouTubeVideoDescriptor`

*Type*

Canonical video URLs and accessible title.

```ts
type IYouTubeVideoDescriptor = {
    videoId: IYouTubeVideoId;
    watchUrl: string;
    embedUrl: string;
    title: string;
};
```

**Members**

- `videoId: IYouTubeVideoId` (property)
- `watchUrl: string` (property)
- `embedUrl: string` (property)
- `title: string` (property)

#### <a id="api-IYouTubeVideoId"></a>`IYouTubeVideoId`

*Type*

Validated identifier accepted by the fixed-origin player.

```ts
type IYouTubeVideoId = string & {
    [YOUTUBE_VIDEO_ID_TYPE]: true;
};
```

#### <a id="api-IYouTubeVideoProps"></a>`IYouTubeVideoProps`

*Type*

Props for the fixed-origin responsive YouTube player.

```ts
type IYouTubeVideoProps = {
    videoId: IYouTubeVideoId;
    title: string;
    className?: string | undefined;
    autoPlay?: boolean | undefined;
};
```

**Members**

- `videoId: IYouTubeVideoId` (property)
- `title: string` (property)
- `className: string` (property)
- `autoPlay: boolean` (property): autoplay is opt-in and remains subject to the browser's playback policy.

## <a id="api-entry-components/button"></a>`jg-react-ui/components/button`

- Constants: [`Button`](#api-components-button-Button), [`buttonVariants`](#api-components-button-buttonVariants)
- Types: [`IButtonBadgeLocation`](#api-components-button-IButtonBadgeLocation), [`IButtonBadgeTheme`](#api-components-button-IButtonBadgeTheme), [`IButtonProps`](#api-components-button-IButtonProps)

### <a id="api-components-button-constants"></a>Constants in `jg-react-ui/components/button`

#### <a id="api-components-button-Button"></a>`Button`

*Constant*

Renders the shared command button or passes its styles to a child element.

```ts
const Button: (__namedParameters: IButtonProps) => ReactElement & INativeButtonRenderComponent
```

**Example**

```ts
import { createElement } from 'react';
import { Button } from 'jg-react-ui/components/button';
const action = createElement(Button, { size: 'touch' }, 'Save changes');
```

#### <a id="api-components-button-buttonVariants"></a>`buttonVariants`

*Constant*

Builds the retained button variant and size classes.

```ts
const buttonVariants: (props?: ConfigVariants<{ variant: { default: string; outline: string; secondary: string; ghost: string; destructive: string; link: string; }; size: { default: string; touch: string; 'touch-lg': string; xs: string; sm: string; ... 6 more ...; 'icon-lg': string; }; }> & ClassProp) => string
```

**Example**

```ts
import { buttonVariants } from 'jg-react-ui/components/button';
const classes = buttonVariants({ variant: 'outline', size: 'touch' });
```

### <a id="api-components-button-types"></a>Types in `jg-react-ui/components/button`

#### <a id="api-components-button-IButtonBadgeLocation"></a>`IButtonBadgeLocation`

*Type*

Places the count badge on one of the button corners.

```ts
type IButtonBadgeLocation = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
```

#### <a id="api-components-button-IButtonBadgeTheme"></a>`IButtonBadgeTheme`

*Type*

Semantic count badge themes.

```ts
type IButtonBadgeTheme = 'destructive' | 'outline' | 'primary' | 'secondary';
```

#### <a id="api-components-button-IButtonProps"></a>`IButtonProps`

*Type*

Native button props with visual variants, count badges, and optional child rendering.

```ts
type IButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
    badgeCount?: number;
    badgeLocation?: IButtonBadgeLocation;
    badgeTheme?: IButtonBadgeTheme;
    maxValue?: number;
};
```

## <a id="api-entry-cn"></a>`jg-react-ui/cn`



## <a id="api-entry-contracts"></a>`jg-react-ui/contracts`

- Functions: [`getUiPreferencesStorageKey`](#api-contracts-getUiPreferencesStorageKey)
- Constants: [`AppThemeSchema`](#api-contracts-AppThemeSchema), [`CodeDiffViewSchema`](#api-contracts-CodeDiffViewSchema), [`DEFAULT_UI_PREFERENCES`](#api-contracts-DEFAULT_UI_PREFERENCES), [`ResolvedAppThemeSchema`](#api-contracts-ResolvedAppThemeSchema), [`UI_PREFERENCES_STORAGE_KEY`](#api-contracts-UI_PREFERENCES_STORAGE_KEY), [`UI_PREFERENCES_STORE_ID`](#api-contracts-UI_PREFERENCES_STORE_ID), [`UiPreferencesSchema`](#api-contracts-UiPreferencesSchema)
- Types: [`IAppTheme`](#api-contracts-IAppTheme), [`ICodeDiffView`](#api-contracts-ICodeDiffView), [`IErrorFeedbackResolver`](#api-contracts-IErrorFeedbackResolver), [`IResolvedAppTheme`](#api-contracts-IResolvedAppTheme), [`IUiPreferences`](#api-contracts-IUiPreferences)

### <a id="api-contracts-functions"></a>Functions in `jg-react-ui/contracts`

#### <a id="api-contracts-getUiPreferencesStorageKey"></a>`getUiPreferencesStorageKey`

*Function*

Derives the raw preference key using jg-storage's namespace rules.

```ts
getUiPreferencesStorageKey(storageId?: string): string
```

**Parameters**

- `storageId?` `string`: The non-empty namespace containing letters, digits, underscores, or hyphens. Defaults to `UI_PREFERENCES_STORE_ID`.

**Returns** `string`: The raw localStorage key shared by persistence, storage events, and the pre-paint script.

**Throws**

- `UI_PREFERENCES_STORAGE_ID_INVALID`: UI preferences storage ID must be a non-empty string containing only letters, digits, underscores, and hyphens.

**Example**

```ts
import { getUiPreferencesStorageKey } from 'jg-react-ui/contracts';
const key = getUiPreferencesStorageKey('personal-hq');
```

### <a id="api-contracts-constants"></a>Constants in `jg-react-ui/contracts`

#### <a id="api-contracts-AppThemeSchema"></a>`AppThemeSchema`

*Constant*

Theme preferences accepted by shared UI consumers.

```ts
const AppThemeSchema: ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>
```

#### <a id="api-contracts-CodeDiffViewSchema"></a>`CodeDiffViewSchema`

*Constant*

Retained code-diff layouts.

```ts
const CodeDiffViewSchema: ZodEnum<{ split: "split"; unified: "unified" }>
```

#### <a id="api-contracts-DEFAULT_UI_PREFERENCES"></a>`DEFAULT_UI_PREFERENCES`

*Constant*

Initial complete preference record.

```ts
const DEFAULT_UI_PREFERENCES: IUiPreferences
```

#### <a id="api-contracts-ResolvedAppThemeSchema"></a>`ResolvedAppThemeSchema`

*Constant*

Concrete color schemes after resolving the system preference.

```ts
const ResolvedAppThemeSchema: ZodEnum<{ light: "light"; dark: "dark" }>
```

#### <a id="api-contracts-UI_PREFERENCES_STORAGE_KEY"></a>`UI_PREFERENCES_STORAGE_KEY`

*Constant*

Raw storage key for interoperability with the UI preference store.

```ts
const UI_PREFERENCES_STORAGE_KEY: "jg-storage:jg-ui-preferences"
```

#### <a id="api-contracts-UI_PREFERENCES_STORE_ID"></a>`UI_PREFERENCES_STORE_ID`

*Constant*

Default namespace for UI preference persistence.

```ts
const UI_PREFERENCES_STORE_ID: "jg-ui-preferences"
```

#### <a id="api-contracts-UiPreferencesSchema"></a>`UiPreferencesSchema`

*Constant*

Complete stored UI preferences; harmless additional fields remain compatible.

```ts
const UiPreferencesSchema: ZodObject<{ theme: ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>; codeDiffView: ZodEnum<{ split: "split"; unified: "unified" }>; prefersWrappedCode: ZodBoolean; appInstallToastrDismissedAt: ZodNullable<ZodISODateTime> }, $strip>
```

### <a id="api-contracts-types"></a>Types in `jg-react-ui/contracts`

#### <a id="api-contracts-IAppTheme"></a>`IAppTheme`

*Type*

Validated preference contract.

```ts
type IAppTheme = z.infer<typeof AppThemeSchema>;
```

#### <a id="api-contracts-ICodeDiffView"></a>`ICodeDiffView`

*Type*

Validated preference contract.

```ts
type ICodeDiffView = z.infer<typeof CodeDiffViewSchema>;
```

#### <a id="api-contracts-IErrorFeedbackResolver"></a>`IErrorFeedbackResolver`

*Type*

Application-owned error copy, cancellation, and access-loss policy.

```ts
type IErrorFeedbackResolver = ReturnType<typeof createErrorFeedback>;
```

#### <a id="api-contracts-IResolvedAppTheme"></a>`IResolvedAppTheme`

*Type*

Validated preference contract.

```ts
type IResolvedAppTheme = z.infer<typeof ResolvedAppThemeSchema>;
```

#### <a id="api-contracts-IUiPreferences"></a>`IUiPreferences`

*Type*

Validated preference contract.

```ts
type IUiPreferences = z.infer<typeof UiPreferencesSchema>;
```

## <a id="api-entry-components/badge"></a>`jg-react-ui/components/badge`

- Functions: [`Badge`](#api-components-badge-Badge)
- Constants: [`badgeVariants`](#api-components-badge-badgeVariants)
- Types: [`IBadgeProps`](#api-components-badge-IBadgeProps)

### <a id="api-components-badge-functions"></a>Functions in `jg-react-ui/components/badge`

#### <a id="api-components-badge-Badge"></a>`Badge`

*Function*

Renders a compact status or metadata label using the shared badge variants.

```ts
Badge(props: IBadgeProps): ReactElement
```

**Parameters**

- `props` `IBadgeProps`: The badge element props, visual variant, and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the badge as a span or passes styling to its child.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Badge } from 'jg-react-ui/components/badge';
const example = createElement(Badge, null, 'Example');
```

### <a id="api-components-badge-constants"></a>Constants in `jg-react-ui/components/badge`

#### <a id="api-components-badge-badgeVariants"></a>`badgeVariants`

*Constant*

Composes the retained badge variant classes.

```ts
const badgeVariants: (props?: ConfigVariants<{ variant: { default: string; secondary: string; destructive: string; warning: string; success: string; outline: string; ghost: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { badgeVariants } from 'jg-react-ui/components/badge';
const styles = badgeVariants({});
```

### <a id="api-components-badge-types"></a>Types in `jg-react-ui/components/badge`

#### <a id="api-components-badge-IBadgeProps"></a>`IBadgeProps`

*Type*

Badge props extend the span contract with shared variants and optional slot rendering.

```ts
type IBadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/icon-tile"></a>`jg-react-ui/components/icon-tile`

- Functions: [`IconTile`](#api-components-icon-tile-IconTile)
- Constants: [`iconTileVariants`](#api-components-icon-tile-iconTileVariants)
- Types: [`IIconTileProps`](#api-components-icon-tile-IIconTileProps), [`IIconTileSize`](#api-components-icon-tile-IIconTileSize), [`IIconTileTone`](#api-components-icon-tile-IIconTileTone)

### <a id="api-components-icon-tile-functions"></a>Functions in `jg-react-ui/components/icon-tile`

#### <a id="api-components-icon-tile-IconTile"></a>`IconTile`

*Function*

Renders the rounded-square tile that holds a leading icon, stacked media icon, or step number. The tile is decorative by default; pass `aria-hidden={false}` when its content, such as a step number, must be announced.

```ts
IconTile(props: IIconTileProps): ReactElement
```

**Parameters**

- `props` `IIconTileProps`: The span props, the named size, and the status tone.

**Returns** `ReactElement`: A React element that renders the icon tile.

**Example**

```ts
import { createElement } from 'react';
import { IconTile } from 'jg-react-ui/components/icon-tile';
const example = createElement(IconTile, null, 'Example');
```

### <a id="api-components-icon-tile-constants"></a>Constants in `jg-react-ui/components/icon-tile`

#### <a id="api-components-icon-tile-iconTileVariants"></a>`iconTileVariants`

*Constant*

Composes the retained icon-tile variant classes.

```ts
const iconTileVariants: (props?: ConfigVariants<{ size: { sm: string; md: string; lg: string; }; tone: { neutral: string; brand: string; success: string; warning: string; destructive: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { iconTileVariants } from 'jg-react-ui/components/icon-tile';
const styles = iconTileVariants({});
```

### <a id="api-components-icon-tile-types"></a>Types in `jg-react-ui/components/icon-tile`

#### <a id="api-components-icon-tile-IIconTileProps"></a>`IIconTileProps`

*Type*

Icon tile props extend the span contract; classname is reserved for layout such as margins or grid placement.

```ts
type IIconTileProps = React.ComponentProps<'span'> & {
    size?: IIconTileSize;
    tone?: IIconTileTone;
};
```

#### <a id="api-components-icon-tile-IIconTileSize"></a>`IIconTileSize`

*Type*

Named tile sizes follow the text beside the tile; components choose one and never invent another.

```ts
type IIconTileSize = 'sm' | 'md' | 'lg';
```

#### <a id="api-components-icon-tile-IIconTileTone"></a>`IIconTileTone`

*Type*

Tile tones carry status semantics; neutral tints from the surrounding text color.

```ts
type IIconTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'destructive';
```

## <a id="api-entry-components/alert"></a>`jg-react-ui/components/alert`

- Functions: [`Alert`](#api-components-alert-Alert), [`AlertAction`](#api-components-alert-AlertAction), [`AlertDescription`](#api-components-alert-AlertDescription), [`AlertTitle`](#api-components-alert-AlertTitle)
- Constants: [`alertVariants`](#api-components-alert-alertVariants)
- Types: [`IAlertActionProps`](#api-components-alert-IAlertActionProps), [`IAlertDescriptionProps`](#api-components-alert-IAlertDescriptionProps), [`IAlertProps`](#api-components-alert-IAlertProps), [`IAlertTitleProps`](#api-components-alert-IAlertTitleProps)

### <a id="api-components-alert-functions"></a>Functions in `jg-react-ui/components/alert`

#### <a id="api-components-alert-Alert"></a>`Alert`

*Function*

Renders an inline alert with shadcn-style composition and optional interactive behavior.

```ts
Alert(props: IAlertProps): ReactElement
```

**Parameters**

- `props` `IAlertProps`: The alert element props, interaction mode, and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the alert container with role="alert" by default for static alerts.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Alert } from 'jg-react-ui/components/alert';
const example = createElement(Alert, null, 'Example');
```

#### <a id="api-components-alert-AlertAction"></a>`AlertAction`

*Function*

Renders an optional action slot in the top-right corner of an alert.

```ts
AlertAction(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The action wrapper props.

**Returns** `ReactElement`: A React element that renders the alert action container.

**Example**

```ts
import { createElement } from 'react';
import { AlertAction } from 'jg-react-ui/components/alert';
const example = createElement(AlertAction, null, 'Example');
```

#### <a id="api-components-alert-AlertDescription"></a>`AlertDescription`

*Function*

Renders supporting copy for an alert.

```ts
AlertDescription(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The description element props.

**Returns** `ReactElement`: A React element that renders the alert description.

**Example**

```ts
import { createElement } from 'react';
import { AlertDescription } from 'jg-react-ui/components/alert';
const example = createElement(AlertDescription, null, 'Example');
```

#### <a id="api-components-alert-AlertTitle"></a>`AlertTitle`

*Function*

Renders the main title content for an alert.

```ts
AlertTitle(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The title element props.

**Returns** `ReactElement`: A React element that renders the alert title.

**Example**

```ts
import { createElement } from 'react';
import { AlertTitle } from 'jg-react-ui/components/alert';
const example = createElement(AlertTitle, null, 'Example');
```

### <a id="api-components-alert-constants"></a>Constants in `jg-react-ui/components/alert`

#### <a id="api-components-alert-alertVariants"></a>`alertVariants`

*Constant*

Composes the retained alert variant classes.

```ts
const alertVariants: (props?: ConfigVariants<{ variant: { default: string; destructive: string; }; interaction: { static: string; redirect: string; action: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { alertVariants } from 'jg-react-ui/components/alert';
const styles = alertVariants({});
```

### <a id="api-components-alert-types"></a>Types in `jg-react-ui/components/alert`

#### <a id="api-components-alert-IAlertActionProps"></a>`IAlertActionProps`

*Type*

Action props wrap a short supplementary control in the top-right corner.

```ts
type IAlertActionProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-alert-IAlertDescriptionProps"></a>`IAlertDescriptionProps`

*Type*

Description props use phrasing content so alerts can render inside anchors or buttons.

```ts
type IAlertDescriptionProps = React.ComponentProps<'span'>;
```

#### <a id="api-components-alert-IAlertProps"></a>`IAlertProps`

*Type*

Alert props extend the div contract with shared variants and optional slot rendering.

```ts
type IAlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants> & {
    asChild?: boolean;
};
```

#### <a id="api-components-alert-IAlertTitleProps"></a>`IAlertTitleProps`

*Type*

Title props use phrasing content so alerts can render inside anchors or buttons.

```ts
type IAlertTitleProps = React.ComponentProps<'span'>;
```

## <a id="api-entry-components/error-feedback-provider"></a>`jg-react-ui/components/error-feedback-provider`

- Functions: [`ErrorFeedbackProvider`](#api-components-error-feedback-provider-ErrorFeedbackProvider), [`useErrorFeedbackResolver`](#api-components-error-feedback-provider-useErrorFeedbackResolver)
- Types: [`IErrorFeedbackProviderProps`](#api-components-error-feedback-provider-IErrorFeedbackProviderProps)

### <a id="api-components-error-feedback-provider-functions"></a>Functions in `jg-react-ui/components/error-feedback-provider`

#### <a id="api-components-error-feedback-provider-ErrorFeedbackProvider"></a>`ErrorFeedbackProvider`

*Function*

Scopes application-owned error copy and access-loss policy to a React tree.

```ts
ErrorFeedbackProvider(props: IErrorFeedbackProviderProps): ReactElement
```

**Parameters**

- `props` `IErrorFeedbackProviderProps`: The optional resolver and children that consume it.

**Returns** `ReactElement`: The scoped error-feedback context, with stable identity for an unchanged resolver.

**Example**

```ts
import { createElement } from 'react';
import { createErrorFeedback } from 'jg-exception';
import { ErrorFeedbackProvider } from 'jg-react-ui/components/error-feedback-provider';
const resolver = createErrorFeedback({ fallbackMessage: 'Please try again.' });
const example = createElement(ErrorFeedbackProvider, { resolveErrorFeedback: resolver, children: 'App' });
```

#### <a id="api-components-error-feedback-provider-useErrorFeedbackResolver"></a>`useErrorFeedbackResolver`

*Function*

Reads the nearest safe error-feedback resolver, or the generic default outside a provider.

```ts
useErrorFeedbackResolver(): (error: unknown, overrides?: IErrorFeedbackOverrides) => IErrorFeedback
```

**Returns** `(error: unknown, overrides?: IErrorFeedbackOverrides) => IErrorFeedback`: The resolver for this React tree.

**Example**

```ts
import { useErrorFeedbackResolver } from 'jg-react-ui/components/error-feedback-provider';
const ErrorNotice = () => {
  const resolveErrorFeedback = useErrorFeedbackResolver();
  return resolveErrorFeedback(new Error('Private diagnostics')).message;
};
```

### <a id="api-components-error-feedback-provider-types"></a>Types in `jg-react-ui/components/error-feedback-provider`

#### <a id="api-components-error-feedback-provider-IErrorFeedbackProviderProps"></a>`IErrorFeedbackProviderProps`

*Type*

Scoped application policy and its rendered children.

```ts
type IErrorFeedbackProviderProps = {
    children: ReactNode;
    resolveErrorFeedback?: IErrorFeedbackResolver;
};
```

**Members**

- `children: ReactNode` (property)
- `resolveErrorFeedback: IErrorFeedbackResolver` (property)

## <a id="api-entry-components/ui-preferences-provider"></a>`jg-react-ui/components/ui-preferences-provider`

- Functions: [`UiPreferencesProvider`](#api-components-ui-preferences-provider-UiPreferencesProvider), [`useUiPreferences`](#api-components-ui-preferences-provider-useUiPreferences), [`useUiPreferencesCapabilities`](#api-components-ui-preferences-provider-useUiPreferencesCapabilities)
- Types: [`ILocalUiPreferencesProviderProps`](#api-components-ui-preferences-provider-ILocalUiPreferencesProviderProps), [`IReadOnlyUiPreferencesProviderProps`](#api-components-ui-preferences-provider-IReadOnlyUiPreferencesProviderProps), [`IRemoteUiPreferencesProviderProps`](#api-components-ui-preferences-provider-IRemoteUiPreferencesProviderProps), [`IUiPreferencesContextState`](#api-components-ui-preferences-provider-IUiPreferencesContextState), [`IUiPreferencesPersistenceAdapter`](#api-components-ui-preferences-provider-IUiPreferencesPersistenceAdapter), [`IUiPreferencesProviderProps`](#api-components-ui-preferences-provider-IUiPreferencesProviderProps), [`IUiPreferencesSuccessNotification`](#api-components-ui-preferences-provider-IUiPreferencesSuccessNotification), [`IUiPreferencesUpdateOptions`](#api-components-ui-preferences-provider-IUiPreferencesUpdateOptions)

### <a id="api-components-ui-preferences-provider-functions"></a>Functions in `jg-react-ui/components/ui-preferences-provider`

#### <a id="api-components-ui-preferences-provider-UiPreferencesProvider"></a>`UiPreferencesProvider`

*Function*

Owns UI preference capability, optimistic state, persistence ordering, and rollback behavior.

```ts
UiPreferencesProvider(props: IUiPreferencesProviderProps): ReactElement
```

**Parameters**

- `props` `IUiPreferencesProviderProps`: The explicit persistence mode, initial preference snapshot, adapter, and children.

**Returns** `ReactElement`: A provider containing the shared UI preference lifecycle.

**Throws**

- `UI_PREFERENCES_STORAGE_ID_INVALID`: UI preferences storage ID must be a non-empty string containing only letters, digits, underscores, and hyphens.

**Example**

```ts
import { createElement } from 'react';
import { UiPreferencesProvider } from 'jg-react-ui/components/ui-preferences-provider';
const app = createElement(UiPreferencesProvider, { mode: 'local', storageId: 'personal-hq', children: 'App' });
```

#### <a id="api-components-ui-preferences-provider-useUiPreferences"></a>`useUiPreferences`

*Function*

Reads the current UI preferences and provider-owned update lifecycle.

```ts
useUiPreferences(): IUiPreferencesContextState
```

**Returns** `IUiPreferencesContextState`: The current preference snapshot, mutation capability, and pending state.

**Example**

```ts
import { useUiPreferences } from 'jg-react-ui/components/ui-preferences-provider';
const WrappingPreference = () => String(useUiPreferences().preferences.prefersWrappedCode);
```

#### <a id="api-components-ui-preferences-provider-useUiPreferencesCapabilities"></a>`useUiPreferencesCapabilities`

*Function*

Reads provider capabilities without subscribing to the complete preference snapshot.

```ts
useUiPreferencesCapabilities(): IUiPreferencesCapabilities
```

**Returns** `IUiPreferencesCapabilities`: The mutation capability and pending state owned by the nearest provider.

**Example**

```ts
import { useUiPreferencesCapabilities } from 'jg-react-ui/components/ui-preferences-provider';
const Capability = () => String(useUiPreferencesCapabilities().canUpdatePreferences);
```

### <a id="api-components-ui-preferences-provider-types"></a>Types in `jg-react-ui/components/ui-preferences-provider`

#### <a id="api-components-ui-preferences-provider-ILocalUiPreferencesProviderProps"></a>`ILocalUiPreferencesProviderProps`

*Type*

Local mode enables controls and confirms changes in browser storage immediately.

```ts
type ILocalUiPreferencesProviderProps = IUiPreferencesProviderBaseProps & {
    initialPreferences?: IUiPreferences;
    mode: 'local';
};
```

#### <a id="api-components-ui-preferences-provider-IReadOnlyUiPreferencesProviderProps"></a>`IReadOnlyUiPreferencesProviderProps`

*Type*

Read-only mode exposes preferences without granting mutation capability.

```ts
type IReadOnlyUiPreferencesProviderProps = IUiPreferencesProviderBaseProps & {
    initialPreferences?: IUiPreferences;
    mode: 'read-only';
};
```

#### <a id="api-components-ui-preferences-provider-IRemoteUiPreferencesProviderProps"></a>`IRemoteUiPreferencesProviderProps`

*Type*

Remote mode requires authoritative preferences and a rejecting async persistence adapter.

```ts
type IRemoteUiPreferencesProviderProps = IUiPreferencesProviderBaseProps & IUiPreferencesPersistenceAdapter & {
    initialPreferences: IUiPreferences;
    mode: 'remote';
};
```

#### <a id="api-components-ui-preferences-provider-IUiPreferencesContextState"></a>`IUiPreferencesContextState`

*Type*

Context state exposes the current snapshot and provider-owned update lifecycle.

```ts
type IUiPreferencesContextState = {
    canUpdatePreferences: boolean;
    isPreferencesUpdatePending: boolean;
    preferences: IUiPreferences;
    updatePreferences: (uiPreferencesPatch: IUiPreferencesPatch, options?: IUiPreferencesUpdateOptions) => void;
};
```

**Members**

- `canUpdatePreferences: boolean` (property)
- `isPreferencesUpdatePending: boolean` (property)
- `preferences: IUiPreferences` (property)
- `updatePreferences: (uiPreferencesPatch: IUiPreferencesPatch, options?: IUiPreferencesUpdateOptions) => void` (property)

#### <a id="api-components-ui-preferences-provider-IUiPreferencesPersistenceAdapter"></a>`IUiPreferencesPersistenceAdapter`

*Type*

Remote persistence adapters keep API and application cache ownership outside app-ui.

```ts
type IUiPreferencesPersistenceAdapter = {
    persistPreferences: (uiPreferences: IUiPreferences) => Promise<void>;
};
```

**Members**

- `persistPreferences: (uiPreferences: IUiPreferences) => Promise<void>` (property)

#### <a id="api-components-ui-preferences-provider-IUiPreferencesProviderProps"></a>`IUiPreferencesProviderProps`

*Type*

Provider props use an explicit mode so editable surfaces cannot silently skip persistence.

```ts
type IUiPreferencesProviderProps = ILocalUiPreferencesProviderProps | IReadOnlyUiPreferencesProviderProps | IRemoteUiPreferencesProviderProps;
```

#### <a id="api-components-ui-preferences-provider-IUiPreferencesSuccessNotification"></a>`IUiPreferencesSuccessNotification`

*Type*

Optional feedback shown only after the latest requested remote revision is confirmed.

```ts
type IUiPreferencesSuccessNotification = {
    title: string;
    description?: string;
};
```

**Members**

- `title: string` (property)
- `description: string` (property)

#### <a id="api-components-ui-preferences-provider-IUiPreferencesUpdateOptions"></a>`IUiPreferencesUpdateOptions`

*Type*

Per-update behavior that does not alter the persisted preference contract.

```ts
type IUiPreferencesUpdateOptions = {
    successNotification?: IUiPreferencesSuccessNotification;
};
```

**Members**

- `successNotification: IUiPreferencesSuccessNotification` (property)

## <a id="api-entry-components/theme-provider"></a>`jg-react-ui/components/theme-provider`

- Functions: [`ThemeInitializationScript`](#api-components-theme-provider-ThemeInitializationScript), [`ThemeProvider`](#api-components-theme-provider-ThemeProvider), [`ThemeToggleButton`](#api-components-theme-provider-ThemeToggleButton), [`useTheme`](#api-components-theme-provider-useTheme)
- Types: [`IThemeChangeRequestedHandler`](#api-components-theme-provider-IThemeChangeRequestedHandler), [`IThemeInitializationScriptProps`](#api-components-theme-provider-IThemeInitializationScriptProps), [`IThemeProviderProps`](#api-components-theme-provider-IThemeProviderProps), [`IThemeProviderState`](#api-components-theme-provider-IThemeProviderState), [`IThemeToggleButtonProps`](#api-components-theme-provider-IThemeToggleButtonProps)

### <a id="api-components-theme-provider-functions"></a>Functions in `jg-react-ui/components/theme-provider`

#### <a id="api-components-theme-provider-ThemeInitializationScript"></a>`ThemeInitializationScript`

*Function*

Renders the server-safe inline script that applies the persisted theme before hydration.

```ts
ThemeInitializationScript(props: IThemeInitializationScriptProps): ReactElement
```

**Parameters**

- `props` `IThemeInitializationScriptProps`: The script identity and CSP nonce.

**Returns** `ReactElement`: A React script element containing the package-owned initialization logic.

**Throws**

- `UI_PREFERENCES_STORAGE_ID_INVALID`: UI preferences storage ID must be a non-empty string containing only letters, digits, underscores, and hyphens.

**Example**

```ts
import { createElement } from 'react';
import { ThemeInitializationScript } from 'jg-react-ui/components/theme-provider';
const script = createElement(ThemeInitializationScript, { storageId: 'personal-hq', nonce: 'example-nonce' });
```

#### <a id="api-components-theme-provider-ThemeProvider"></a>`ThemeProvider`

*Function*

Provides persisted theme state and applies the resolved theme class to the document root.

```ts
ThemeProvider(props: IThemeProviderProps): ReactElement
```

**Parameters**

- `props` `IThemeProviderProps`: The provider props that configure children and transition behavior.

**Returns** `ReactElement`: A React element that renders the theme context provider.

**Example**

```ts
import { createElement } from 'react';
import { ThemeProvider } from 'jg-react-ui/components/theme-provider';
const app = createElement(ThemeProvider, { children: 'App' });
```

#### <a id="api-components-theme-provider-ThemeToggleButton"></a>`ThemeToggleButton`

*Function*

Renders an accessible action that toggles between the resolved light and dark themes.

```ts
ThemeToggleButton(props: IThemeToggleButtonProps): ReactElement
```

**Parameters**

- `props` `IThemeToggleButtonProps`: The shared Button styling, disabled state, and optional request callback.

**Returns** `ReactElement`: A React element that renders the theme toggle.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { createElement } from 'react';
import { ThemeToggleButton } from 'jg-react-ui/components/theme-provider';
const toggle = createElement(ThemeToggleButton, { size: 'icon-touch' });
```

#### <a id="api-components-theme-provider-useTheme"></a>`useTheme`

*Function*

Reads the current theme context from the nearest theme provider.

```ts
useTheme(): IThemeProviderState
```

**Returns** `IThemeProviderState`: The current selected and resolved theme state.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { useTheme } from 'jg-react-ui/components/theme-provider';
const ResolvedTheme = () => useTheme().resolvedTheme;
```

### <a id="api-components-theme-provider-types"></a>Types in `jg-react-ui/components/theme-provider`

#### <a id="api-components-theme-provider-IThemeChangeRequestedHandler"></a>`IThemeChangeRequestedHandler`

*Type*

Theme-toggle callbacks report the requested resolved theme after dispatch.

```ts
type IThemeChangeRequestedHandler = (nextTheme: IResolvedAppTheme) => void;
```

#### <a id="api-components-theme-provider-IThemeInitializationScriptProps"></a>`IThemeInitializationScriptProps`

*Type*

Initialization props expose only host-safe script attributes.

```ts
type IThemeInitializationScriptProps = Pick<React.ComponentProps<'script'>, 'id' | 'nonce'> & {
    storageId?: string;
};
```

#### <a id="api-components-theme-provider-IThemeProviderProps"></a>`IThemeProviderProps`

*Type*

Theme provider props configure children and transition behavior.

```ts
type IThemeProviderProps = {
    children: React.ReactNode;
    disableTransitionOnChange?: boolean;
};
```

**Members**

- `children: React.ReactNode` (property)
- `disableTransitionOnChange: boolean` (property)

#### <a id="api-components-theme-provider-IThemeProviderState"></a>`IThemeProviderState`

*Type*

Theme context state is the public contract returned by useTheme.

```ts
type IThemeProviderState = {
    theme: IAppTheme;
    resolvedTheme: IResolvedAppTheme;
    setTheme: (theme: IAppTheme) => void;
};
```

**Members**

- `theme: IAppTheme` (property)
- `resolvedTheme: IResolvedAppTheme` (property)
- `setTheme: (theme: IAppTheme) => void` (property)

#### <a id="api-components-theme-provider-IThemeToggleButtonProps"></a>`IThemeToggleButtonProps`

*Type*

Theme toggle props preserve Button styling while reserving theme-owned content and behavior.

```ts
type IThemeToggleButtonProps = Omit<IButtonProps, 'aria-label' | 'children' | 'onClick' | 'title'> & {
    onThemeChangeRequested?: IThemeChangeRequestedHandler;
};
```

## <a id="api-entry-components/toastr"></a>`jg-react-ui/components/toastr`

- Functions: [`Toastr`](#api-components-toastr-Toastr)
- Types: [`IExternalToastr`](#api-components-toastr-IExternalToastr), [`IToastrClassNames`](#api-components-toastr-IToastrClassNames), [`IToastrProps`](#api-components-toastr-IToastrProps)

### <a id="api-components-toastr-functions"></a>Functions in `jg-react-ui/components/toastr`

#### <a id="api-components-toastr-Toastr"></a>`Toastr`

*Function*

Renders the shared toastr host with consumer theme tokens and status icon tiles.

```ts
Toastr(props: ToasterProps): ReactElement
```

**Parameters**

- `props` `ToasterProps`: Toastr props to merge with the shared theme-aware defaults.

**Returns** `ReactElement`: A React element that hosts toastr notifications for the current UI tree.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { createElement } from 'react';
import { Toastr } from 'jg-react-ui/components/toastr';
const host = createElement(Toastr, { position: 'bottom-right' });
```

### <a id="api-components-toastr-types"></a>Types in `jg-react-ui/components/toastr`

#### <a id="api-components-toastr-IExternalToastr"></a>`IExternalToastr`

*Type*

Exported toastr aliases keep Sonner implementation types behind the shared package API.

```ts
type IExternalToastr = SonnerExternalToast;
```

#### <a id="api-components-toastr-IToastrClassNames"></a>`IToastrClassNames`

*Type*

Per-slot notification classes merged with the shared defaults.

```ts
type IToastrClassNames = SonnerToastClassnames;
```

#### <a id="api-components-toastr-IToastrProps"></a>`IToastrProps`

*Type*

Notification host props retaining Sonner configuration and overrides.

```ts
type IToastrProps = SonnerToasterProps;
```

## <a id="api-entry-errors"></a>`jg-react-ui/errors`

- Constants: [`ERRORS`](#api-errors-ERRORS)

### <a id="api-errors-constants"></a>Constants in `jg-react-ui/errors`

#### <a id="api-errors-ERRORS"></a>`ERRORS`

*Constant*

Owned UI configuration and recording failures exposed through the public error-code contract.

```ts
const ERRORS: { THEME_PROVIDER_MISSING: "THEME_PROVIDER_MISSING"; UI_PREFERENCES_STORAGE_ID_INVALID: "UI_PREFERENCES_STORAGE_ID_INVALID"; AUDIO_INPUT_MAX_BYTES_EXCEEDED: "AUDIO_INPUT_MAX_BYTES_EXCEEDED"; AUDIO_INPUT_RECORDING_FAILED: "AUDIO_INPUT_RECORDING_FAILED"; AUDIO_INPUT_UNSUPPORTED: "AUDIO_INPUT_UNSUPPORTED"; AUDIO_INPUT_MICROPHONE_ACCESS_FAILED: "AUDIO_INPUT_MICROPHONE_ACCESS_FAILED"; AUDIO_INPUT_TRANSCRIPTION_RESULT_FAILED: "AUDIO_INPUT_TRANSCRIPTION_RESULT_FAILED"; AUDIO_INPUT_TRANSCRIPTION_INVALID_RESULT: "AUDIO_INPUT_TRANSCRIPTION_INVALID_RESULT"; AUDIO_INPUT_TRANSCRIPTION_FAILED: "AUDIO_INPUT_TRANSCRIPTION_FAILED" }
```

## <a id="api-entry-components/divider"></a>`jg-react-ui/components/divider`

- Functions: [`Divider`](#api-components-divider-Divider)
- Types: [`IDividerProps`](#api-components-divider-IDividerProps)

### <a id="api-components-divider-functions"></a>Functions in `jg-react-ui/components/divider`

#### <a id="api-components-divider-Divider"></a>`Divider`

*Function*

Renders a horizontal or vertical separator with the shared border token.

```ts
Divider(props: IDividerProps): ReactElement
```

**Parameters**

- `props` `IDividerProps`: The Base UI separator props and optional orientation.

**Returns** `ReactElement`: A React element that renders the divider.

**Example**

```ts
import { createElement } from 'react';
import { Divider } from 'jg-react-ui/components/divider';
const example = createElement(Divider, { decorative: false, 'aria-label': 'Section boundary' });
```

### <a id="api-components-divider-types"></a>Types in `jg-react-ui/components/divider`

#### <a id="api-components-divider-IDividerProps"></a>`IDividerProps`

*Type*

Divider props expose the shared decorative option with Base UI separator behavior.

```ts
type IDividerProps = React.ComponentProps<typeof BaseSeparator> & {
    decorative?: boolean;
};
```

## <a id="api-entry-components/empty-state"></a>`jg-react-ui/components/empty-state`

- Functions: [`EmptyState`](#api-components-empty-state-EmptyState), [`EmptyStateDescription`](#api-components-empty-state-EmptyStateDescription), [`EmptyStateTitle`](#api-components-empty-state-EmptyStateTitle)
- Types: [`IEmptyStateDescriptionProps`](#api-components-empty-state-IEmptyStateDescriptionProps), [`IEmptyStateProps`](#api-components-empty-state-IEmptyStateProps), [`IEmptyStateTitleProps`](#api-components-empty-state-IEmptyStateTitleProps)

### <a id="api-components-empty-state-functions"></a>Functions in `jg-react-ui/components/empty-state`

#### <a id="api-components-empty-state-EmptyState"></a>`EmptyState`

*Function*

Renders a centered dashed container for an absent or filtered result.

```ts
EmptyState(props: IEmptyStateProps): ReactElement
```

**Parameters**

- `props` `IEmptyStateProps`: The container attributes, content, classes, and optional slotted child.

**Returns** `ReactElement`: A React element that renders the empty-state container.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { EmptyState } from 'jg-react-ui/components/empty-state';
const example = createElement(EmptyState, { children: 'No records found' });
```

#### <a id="api-components-empty-state-EmptyStateDescription"></a>`EmptyStateDescription`

*Function*

Renders supporting empty-state guidance.

```ts
EmptyStateDescription(props: IEmptyStateDescriptionProps): ReactElement
```

**Parameters**

- `props` `IEmptyStateDescriptionProps`: The description attributes, content, classes, and optional slotted child.

**Returns** `ReactElement`: A React element that renders the empty-state description.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { EmptyStateDescription } from 'jg-react-ui/components/empty-state';
const example = createElement(EmptyStateDescription, { children: 'Upload a file to get started.' });
```

#### <a id="api-components-empty-state-EmptyStateTitle"></a>`EmptyStateTitle`

*Function*

Renders the primary empty-state message.

```ts
EmptyStateTitle(props: IEmptyStateTitleProps): ReactElement
```

**Parameters**

- `props` `IEmptyStateTitleProps`: The title attributes, content, classes, and optional slotted child.

**Returns** `ReactElement`: A React element that renders the empty-state title.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { EmptyStateTitle } from 'jg-react-ui/components/empty-state';
const example = createElement(EmptyStateTitle, { children: 'No records found' });
```

### <a id="api-components-empty-state-types"></a>Types in `jg-react-ui/components/empty-state`

#### <a id="api-components-empty-state-IEmptyStateDescriptionProps"></a>`IEmptyStateDescriptionProps`

*Type*

Native props for IEmptyStateDescriptionProps, retaining the source component contract.

```ts
type IEmptyStateDescriptionProps = React.ComponentProps<'p'> & {
    asChild?: boolean;
};
```

#### <a id="api-components-empty-state-IEmptyStateProps"></a>`IEmptyStateProps`

*Type*

Empty-state slots preserve native attributes while supporting semantic child elements.

```ts
type IEmptyStateProps = React.ComponentProps<'div'> & {
    asChild?: boolean;
};
```

#### <a id="api-components-empty-state-IEmptyStateTitleProps"></a>`IEmptyStateTitleProps`

*Type*

Native props for IEmptyStateTitleProps, retaining the source component contract.

```ts
type IEmptyStateTitleProps = React.ComponentProps<'p'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/progress"></a>`jg-react-ui/components/progress`

- Functions: [`Progress`](#api-components-progress-Progress)
- Types: [`IProgressDeterminateProps`](#api-components-progress-IProgressDeterminateProps), [`IProgressIndeterminateProps`](#api-components-progress-IProgressIndeterminateProps), [`IProgressProps`](#api-components-progress-IProgressProps)

### <a id="api-components-progress-functions"></a>Functions in `jg-react-ui/components/progress`

#### <a id="api-components-progress-Progress"></a>`Progress`

*Function*

Renders a themed Base UI progress bar in determinate or indeterminate mode.

```ts
Progress(props: IProgressProps): ReactElement
```

**Parameters**

- `props` `IProgressProps`: The progress props for the desired mode.

**Returns** `ReactElement`: A React element that renders the track and animated indicator.

**Example**

```ts
import { createElement } from 'react';
import { Progress } from 'jg-react-ui/components/progress';
const example = createElement(Progress, { value: 32, 'aria-label': 'Upload progress' });
```

### <a id="api-components-progress-types"></a>Types in `jg-react-ui/components/progress`

#### <a id="api-components-progress-IProgressDeterminateProps"></a>`IProgressDeterminateProps`

*Type*

Determinate progress requires a concrete numeric value.

```ts
type IProgressDeterminateProps = IProgressBaseProps & {
    value: number;
    indeterminate?: false;
};
```

#### <a id="api-components-progress-IProgressIndeterminateProps"></a>`IProgressIndeterminateProps`

*Type*

Indeterminate progress omits value so the two modes cannot be combined.

```ts
type IProgressIndeterminateProps = IProgressBaseProps & {
    indeterminate: true;
    value?: never;
};
```

#### <a id="api-components-progress-IProgressProps"></a>`IProgressProps`

*Type*

Exported progress props keep determinate and indeterminate usage mutually exclusive.

```ts
type IProgressProps = IProgressDeterminateProps | IProgressIndeterminateProps;
```

## <a id="api-entry-components/spinner"></a>`jg-react-ui/components/spinner`

- Functions: [`Spinner`](#api-components-spinner-Spinner)
- Types: [`ISpinnerProps`](#api-components-spinner-ISpinnerProps)

### <a id="api-components-spinner-functions"></a>Functions in `jg-react-ui/components/spinner`

#### <a id="api-components-spinner-Spinner"></a>`Spinner`

*Function*

Renders an accessible loading spinner using the shared icon size and animation.

```ts
Spinner(
  props: Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>,
): ReactElement
```

**Parameters**

- `props` `Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>`: The spinner icon props and optional accessibility overrides.

**Returns** `ReactElement`: A React element that renders the spinner.

**Example**

```ts
import { createElement } from 'react';
import { Spinner } from 'jg-react-ui/components/spinner';
const example = createElement(Spinner, { 'aria-label': 'Loading records' });
```

### <a id="api-components-spinner-types"></a>Types in `jg-react-ui/components/spinner`

#### <a id="api-components-spinner-ISpinnerProps"></a>`ISpinnerProps`

*Type*

Spinner props reuse the Lucide icon contract while adding accessible loading defaults.

```ts
type ISpinnerProps = React.ComponentProps<typeof LoaderCircle>;
```

## <a id="api-entry-components/text-link"></a>`jg-react-ui/components/text-link`

- Functions: [`TextLink`](#api-components-text-link-TextLink)
- Types: [`ITextLinkProps`](#api-components-text-link-ITextLinkProps), [`ITextLinkVariant`](#api-components-text-link-ITextLinkVariant)

### <a id="api-components-text-link-functions"></a>Functions in `jg-react-ui/components/text-link`

#### <a id="api-components-text-link-TextLink"></a>`TextLink`

*Function*

Renders a prose or standalone action link with shared interaction states.

```ts
TextLink(props: ITextLinkProps): ReactElement
```

**Parameters**

- `props` `ITextLinkProps`: The anchor props, visual variant, and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the text link.

**Throws**

- asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TextLink } from 'jg-react-ui/components/text-link';
const example = createElement(TextLink, { href: '/settings', children: 'Settings' });
```

### <a id="api-components-text-link-types"></a>Types in `jg-react-ui/components/text-link`

#### <a id="api-components-text-link-ITextLinkProps"></a>`ITextLinkProps`

*Type*

Native props for ITextLinkProps, retaining the source component contract.

```ts
type ITextLinkProps = React.ComponentProps<'a'> & {
    asChild?: boolean;
    variant?: ITextLinkVariant;
};
```

#### <a id="api-components-text-link-ITextLinkVariant"></a>`ITextLinkVariant`

*Type*

Text-link props preserve native anchor behavior and support slotted router links.

```ts
type ITextLinkVariant = keyof typeof TEXT_LINK_VARIANT_CLASS_NAMES;
```

## <a id="api-entry-components/inline-code"></a>`jg-react-ui/components/inline-code`

- Functions: [`formatRepositoryPath`](#api-components-inline-code-formatRepositoryPath), [`InlineCode`](#api-components-inline-code-InlineCode)
- Types: [`IInlineCodeProps`](#api-components-inline-code-IInlineCodeProps)

### <a id="api-components-inline-code-functions"></a>Functions in `jg-react-ui/components/inline-code`

#### <a id="api-components-inline-code-formatRepositoryPath"></a>`formatRepositoryPath`

*Function*

Formats a root-relative repository path for display by removing one leading slash. Copied values and native output keep the exact path.

```ts
formatRepositoryPath(path: string): string
```

**Parameters**

- `path` `string`: The repository path, such as `/workspace/project.md`.

**Returns** `string`: The display path, such as `workspace/project.md`.

**Example**

```ts
import { formatRepositoryPath } from 'jg-react-ui/components/inline-code';
const path = formatRepositoryPath('/workspace/project.md');
```

#### <a id="api-components-inline-code-InlineCode"></a>`InlineCode`

*Function*

Renders inline code with preferred breaks after `/`, `_`, `.` or `-`. Unbroken tokens can wrap when needed to fit the available width.

```ts
InlineCode(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The code element props.

**Returns** `ReactElement`: A React element that renders the inline code.

**Example**

```ts
import { createElement } from 'react';
import { InlineCode } from 'jg-react-ui/components/inline-code';
const example = createElement(InlineCode, { children: 'config/theme.ts' });
```

### <a id="api-components-inline-code-types"></a>Types in `jg-react-ui/components/inline-code`

#### <a id="api-components-inline-code-IInlineCodeProps"></a>`IInlineCodeProps`

*Type*

Inline code props preserve the native semantic element contract

```ts
type IInlineCodeProps = React.ComponentProps<'code'>;
```

## <a id="api-entry-components/copy-button"></a>`jg-react-ui/components/copy-button`

- Functions: [`CopyButton`](#api-components-copy-button-CopyButton)
- Constants: [`COPY_BUTTON_FEEDBACK_DURATION_MS`](#api-components-copy-button-COPY_BUTTON_FEEDBACK_DURATION_MS)
- Types: [`ICopyButtonProps`](#api-components-copy-button-ICopyButtonProps)

### <a id="api-components-copy-button-functions"></a>Functions in `jg-react-ui/components/copy-button`

#### <a id="api-components-copy-button-CopyButton"></a>`CopyButton`

*Function*

Renders a copy command with optional visible text and copied feedback, copying through jg-clipboard's `copyText` and showing the copied state of jg-react's `useCopyFeedback`. The value can be a function that reads the text after the click, such as a document the page loads on demand.

```ts
CopyButton(props: ICopyButtonProps): ReactElement
```

**Parameters**

- `props` `ICopyButtonProps`: The text value to copy, or what reads it, and the shared button props to render.

**Returns** `ReactElement`: A React element that renders the copy command button.

**Throws**

- Button asChild requires exactly one valid React element child.
- `INVALID_COPY_FEEDBACK_DURATION`: The copy feedback duration must be a positive, finite number of seconds.

**Example**

```ts
import { createElement } from 'react';
import { CopyButton } from 'jg-react-ui/components/copy-button';
const example = createElement(CopyButton, { value: 'pnpm build', copyLabel: 'Copy build command', size: 'icon-touch' });
```

### <a id="api-components-copy-button-constants"></a>Constants in `jg-react-ui/components/copy-button`

#### <a id="api-components-copy-button-COPY_BUTTON_FEEDBACK_DURATION_MS"></a>`COPY_BUTTON_FEEDBACK_DURATION_MS`

*Constant*

Default copied-checkmark feedback duration in milliseconds.

```ts
const COPY_BUTTON_FEEDBACK_DURATION_MS: 1400
```

### <a id="api-components-copy-button-types"></a>Types in `jg-react-ui/components/copy-button`

#### <a id="api-components-copy-button-ICopyButtonProps"></a>`ICopyButtonProps`

*Type*

Copy button props keep the copy action and icon content owned by the component.

```ts
type ICopyButtonProps = Omit<IButtonProps, 'children' | 'onClick' | 'type' | 'value'> & {
    copiedFeedbackDuration?: number;
    copiedLabel?: string;
    copyLabel?: string;
    label?: string;
    value: string | (() => Promise<string>);
};
```

## <a id="api-entry-components/form"></a>`jg-react-ui/components/form`

- Functions: [`Checkbox`](#api-components-form-Checkbox), [`Field`](#api-components-form-Field), [`FieldDescription`](#api-components-form-FieldDescription), [`FieldError`](#api-components-form-FieldError), [`FieldGroup`](#api-components-form-FieldGroup), [`FieldLegend`](#api-components-form-FieldLegend), [`FieldSet`](#api-components-form-FieldSet), [`Input`](#api-components-form-Input), [`Label`](#api-components-form-Label), [`RadioGroup`](#api-components-form-RadioGroup), [`RadioGroupItem`](#api-components-form-RadioGroupItem), [`Select`](#api-components-form-Select), [`SelectContent`](#api-components-form-SelectContent), [`SelectItem`](#api-components-form-SelectItem), [`SelectTrigger`](#api-components-form-SelectTrigger), [`SelectValue`](#api-components-form-SelectValue), [`Switch`](#api-components-form-Switch), [`Textarea`](#api-components-form-Textarea)
- Constants: [`DEFAULT_FORM_PROPS`](#api-components-form-DEFAULT_FORM_PROPS)
- Types: [`ICheckboxProps`](#api-components-form-ICheckboxProps), [`IFieldDescriptionProps`](#api-components-form-IFieldDescriptionProps), [`IFieldErrorProps`](#api-components-form-IFieldErrorProps), [`IFieldGroupProps`](#api-components-form-IFieldGroupProps), [`IFieldLegendProps`](#api-components-form-IFieldLegendProps), [`IFieldProps`](#api-components-form-IFieldProps), [`IFieldSetProps`](#api-components-form-IFieldSetProps), [`IInputProps`](#api-components-form-IInputProps), [`ILabelProps`](#api-components-form-ILabelProps), [`IRadioGroupItemProps`](#api-components-form-IRadioGroupItemProps), [`IRadioGroupProps`](#api-components-form-IRadioGroupProps), [`ISelectContentProps`](#api-components-form-ISelectContentProps), [`ISelectItemProps`](#api-components-form-ISelectItemProps), [`ISelectProps`](#api-components-form-ISelectProps), [`ISelectTriggerProps`](#api-components-form-ISelectTriggerProps), [`ISelectValueProps`](#api-components-form-ISelectValueProps), [`ISwitchProps`](#api-components-form-ISwitchProps), [`ITextareaProps`](#api-components-form-ITextareaProps)

### <a id="api-components-form-functions"></a>Functions in `jg-react-ui/components/form`

#### <a id="api-components-form-Checkbox"></a>`Checkbox`

*Function*

Renders the shared checkbox control with a checked indicator.

```ts
Checkbox(props: ICheckboxProps): ReactElement
```

**Parameters**

- `props` `ICheckboxProps`: The Base UI checkbox props and indeterminate checked aliases.

**Returns** `ReactElement`: A React element that renders the checkbox.

**Throws**

- Checkbox asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Checkbox } from 'jg-react-ui/components/form';
const example = createElement(Checkbox, { 'aria-label': 'Receive updates' });
```

#### <a id="api-components-form-Field"></a>`Field`

*Function*

Renders a vertical field wrapper for one label, control, and help text group.

```ts
Field(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The field wrapper props.

**Returns** `ReactElement`: A React element that renders the field.

**Example**

```ts
import { createElement } from 'react';
import { Field } from 'jg-react-ui/components/form';
const example = createElement(Field, { children: 'Project settings' });
```

#### <a id="api-components-form-FieldDescription"></a>`FieldDescription`

*Function*

Renders supporting help text for a field.

```ts
FieldDescription(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the field description.

**Example**

```ts
import { createElement } from 'react';
import { FieldDescription } from 'jg-react-ui/components/form';
const example = createElement(FieldDescription, { children: 'Project settings' });
```

#### <a id="api-components-form-FieldError"></a>`FieldError`

*Function*

Renders validation error text for a field.

```ts
FieldError(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the field error.

**Example**

```ts
import { createElement } from 'react';
import { FieldError } from 'jg-react-ui/components/form';
const example = createElement(FieldError, { children: 'Project settings' });
```

#### <a id="api-components-form-FieldGroup"></a>`FieldGroup`

*Function*

Renders a vertical group for multiple fields or choices.

```ts
FieldGroup(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The group wrapper props.

**Returns** `ReactElement`: A React element that renders the field group.

**Example**

```ts
import { createElement } from 'react';
import { FieldGroup } from 'jg-react-ui/components/form';
const example = createElement(FieldGroup, { children: 'Project settings' });
```

#### <a id="api-components-form-FieldLegend"></a>`FieldLegend`

*Function*

Renders a compact legend for grouped form controls.

```ts
FieldLegend(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The legend props.

**Returns** `ReactElement`: A React element that renders the field legend.

**Example**

```ts
import { createElement } from 'react';
import { FieldLegend } from 'jg-react-ui/components/form';
const example = createElement(FieldLegend, { children: 'Project settings' });
```

#### <a id="api-components-form-FieldSet"></a>`FieldSet`

*Function*

Renders a fieldset without browser default border spacing.

```ts
FieldSet(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The fieldset props.

**Returns** `ReactElement`: A React element that renders the fieldset.

**Example**

```ts
import { createElement } from 'react';
import { FieldSet } from 'jg-react-ui/components/form';
const example = createElement(FieldSet, { children: 'Project settings' });
```

#### <a id="api-components-form-Input"></a>`Input`

*Function*

Renders the shared text input surface.

```ts
Input(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The native input props.

**Returns** `ReactElement`: A React element that renders the input.

**Example**

```ts
import { createElement } from 'react';
import { Input } from 'jg-react-ui/components/form';
const example = createElement(Input, { 'aria-label': 'Project name', name: 'projectName' });
```

#### <a id="api-components-form-Label"></a>`Label`

*Function*

Renders an accessible native form label.

```ts
Label(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The native label props.

**Returns** `ReactElement`: A React element that renders the label.

**Example**

```ts
import { createElement } from 'react';
import { Label } from 'jg-react-ui/components/form';
const example = createElement(Label, { htmlFor: 'project-name', children: 'Project name' });
```

#### <a id="api-components-form-RadioGroup"></a>`RadioGroup`

*Function*

Provides radio group state and layout.

```ts
RadioGroup(props: IRadioGroupProps): ReactElement
```

**Parameters**

- `props` `IRadioGroupProps`: The Base UI radio group props and keyboard options.

**Returns** `ReactElement`: A React element that renders the radio group.

**Example**

```ts
import { createElement } from 'react';
import { RadioGroup } from 'jg-react-ui/components/form';
const example = createElement(RadioGroup, { children: 'Project settings' });
```

#### <a id="api-components-form-RadioGroupItem"></a>`RadioGroupItem`

*Function*

Renders an individual radio option with a selected indicator.

```ts
RadioGroupItem(props: IRadioGroupItemProps): ReactElement
```

**Parameters**

- `props` `IRadioGroupItemProps`: The Base UI radio item props.

**Returns** `ReactElement`: A React element that renders the radio group item.

**Throws**

- RadioGroupItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { RadioGroupItem } from 'jg-react-ui/components/form';
const example = createElement(RadioGroupItem, { value: 'personal', 'aria-label': 'Personal workspace' });
```

#### <a id="api-components-form-Select"></a>`Select`

*Function*

Provides select state through the Base UI select root.

```ts
Select(props: ISelectProps): ReactElement
```

**Parameters**

- `props` `ISelectProps`: The Base UI select root props and public callback aliases.

**Returns** `ReactElement`: A React element that renders the select root.

**Example**

```ts
import { createElement } from 'react';
import { Select } from 'jg-react-ui/components/form';
const example = createElement(Select, { children: 'Project settings' });
```

#### <a id="api-components-form-SelectContent"></a>`SelectContent`

*Function*

Renders themed select content inside a portal.

```ts
SelectContent(props: ISelectContentProps): ReactElement
```

**Parameters**

- `props` `ISelectContentProps`: The Base UI select popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the select content.

**Throws**

- SelectContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectContent } from 'jg-react-ui/components/form';
const example = createElement(SelectContent, { children: 'Project settings' });
```

#### <a id="api-components-form-SelectItem"></a>`SelectItem`

*Function*

Renders a select option with a check indicator.

```ts
SelectItem(props: ISelectItemProps): ReactElement
```

**Parameters**

- `props` `ISelectItemProps`: The Base UI select item props and optional text label alias.

**Returns** `ReactElement`: A React element that renders the select item.

**Throws**

- SelectItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectItem } from 'jg-react-ui/components/form';
const example = createElement(SelectItem, { value: 'personal', children: 'Personal' });
```

#### <a id="api-components-form-SelectTrigger"></a>`SelectTrigger`

*Function*

Renders the select trigger with the shared input surface styling.

```ts
SelectTrigger(props: ISelectTriggerProps): ReactElement
```

**Parameters**

- `props` `ISelectTriggerProps`: The Base UI select trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the select trigger.

**Throws**

- SelectTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectTrigger } from 'jg-react-ui/components/form';
const example = createElement(SelectTrigger, { children: 'Project settings' });
```

#### <a id="api-components-form-SelectValue"></a>`SelectValue`

*Function*

Renders selected select value text or placeholder content.

```ts
SelectValue(props: ISelectValueProps): ReactElement
```

**Parameters**

- `props` `ISelectValueProps`: The Base UI select value props.

**Returns** `ReactElement`: A React element that renders the select value.

**Throws**

- SelectValue asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { SelectValue } from 'jg-react-ui/components/form';
const example = createElement(SelectValue, { children: 'Project settings' });
```

#### <a id="api-components-form-Switch"></a>`Switch`

*Function*

Renders a binary switch control, with a 44px target around it on touch screens.

```ts
Switch(props: ISwitchProps): ReactElement
```

**Parameters**

- `props` `ISwitchProps`: The Base UI switch props and shared size variant.

**Returns** `ReactElement`: A React element that renders the switch.

**Throws**

- Switch asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { Switch } from 'jg-react-ui/components/form';
const example = createElement(Switch, { 'aria-label': 'Enable notifications' });
```

#### <a id="api-components-form-Textarea"></a>`Textarea`

*Function*

Renders the shared multiline text input surface.

```ts
Textarea(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The native textarea props.

**Returns** `ReactElement`: A React element that renders the textarea.

**Example**

```ts
import { createElement } from 'react';
import { Textarea } from 'jg-react-ui/components/form';
const example = createElement(Textarea, { 'aria-label': 'Project notes', name: 'notes' });
```

### <a id="api-components-form-constants"></a>Constants in `jg-react-ui/components/form`

#### <a id="api-components-form-DEFAULT_FORM_PROPS"></a>`DEFAULT_FORM_PROPS`

*Constant*

Source-compatible form validation defaults for application form controllers: a field is checked once it loses focus the first time, then at every change, so its error shows only after the operator left it and goes away as soon as they fix it.

```ts
const DEFAULT_FORM_PROPS: { mode: "onTouched" }
```

### <a id="api-components-form-types"></a>Types in `jg-react-ui/components/form`

#### <a id="api-components-form-ICheckboxProps"></a>`ICheckboxProps`

*Type*

Native attributes and shared options for Checkbox.

```ts
type ICheckboxProps = Omit<BaseCheckbox.Root.Props, 'checked' | 'defaultChecked' | 'nativeButton' | 'onCheckedChange' | 'render'> & {
    asChild?: boolean;
    checked?: boolean | 'indeterminate';
    defaultChecked?: boolean | 'indeterminate';
    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
};
```

#### <a id="api-components-form-IFieldDescriptionProps"></a>`IFieldDescriptionProps`

*Type*

Native attributes and shared options for FieldDescription.

```ts
type IFieldDescriptionProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-form-IFieldErrorProps"></a>`IFieldErrorProps`

*Type*

Native attributes and shared options for FieldError.

```ts
type IFieldErrorProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-form-IFieldGroupProps"></a>`IFieldGroupProps`

*Type*

Native attributes and shared options for FieldGroup.

```ts
type IFieldGroupProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-form-IFieldLegendProps"></a>`IFieldLegendProps`

*Type*

Native attributes and shared options for FieldLegend.

```ts
type IFieldLegendProps = React.ComponentProps<'legend'>;
```

#### <a id="api-components-form-IFieldProps"></a>`IFieldProps`

*Type*

Native attributes and shared options for Field.

```ts
type IFieldProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-form-IFieldSetProps"></a>`IFieldSetProps`

*Type*

Native attributes and shared options for FieldSet.

```ts
type IFieldSetProps = React.ComponentProps<'fieldset'>;
```

#### <a id="api-components-form-IInputProps"></a>`IInputProps`

*Type*

Native attributes and shared options for Input.

```ts
type IInputProps = React.ComponentProps<'input'>;
```

#### <a id="api-components-form-ILabelProps"></a>`ILabelProps`

*Type*

Native attributes and shared options for Label.

```ts
type ILabelProps = React.ComponentProps<'label'>;
```

#### <a id="api-components-form-IRadioGroupItemProps"></a>`IRadioGroupItemProps`

*Type*

Native attributes and shared options for RadioGroupItem.

```ts
type IRadioGroupItemProps = Omit<BaseRadio.Root.Props<string>, 'nativeButton' | 'render' | 'value'> & {
    asChild?: boolean;
    value: string;
};
```

#### <a id="api-components-form-IRadioGroupProps"></a>`IRadioGroupProps`

*Type*

Native attributes and shared options for RadioGroup.

```ts
type IRadioGroupProps = Omit<BaseRadioGroup.Props<string>, 'onValueChange'> & {
    dir?: 'ltr' | 'rtl';
    loop?: boolean;
    onValueChange?: (value: string) => void;
    orientation?: 'horizontal' | 'vertical';
};
```

#### <a id="api-components-form-ISelectContentProps"></a>`ISelectContentProps`

*Type*

Native attributes and shared options for SelectContent.

```ts
type ISelectContentProps = Omit<BaseSelect.Popup.Props, 'render'> & Pick<BaseSelect.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
    asChild?: boolean;
    avoidCollisions?: boolean;
    forceMount?: boolean;
    hideWhenDetached?: boolean;
    onCloseAutoFocus?: (event: Event) => void;
    onEscapeKeyDown?: (event: Event) => void;
    onFocusOutside?: (event: Event) => void;
    onInteractOutside?: (event: Event) => void;
    onPointerDownOutside?: (event: Event) => void;
    position?: 'item-aligned' | 'popper';
    sticky?: 'partial' | 'always';
};
```

#### <a id="api-components-form-ISelectItemProps"></a>`ISelectItemProps`

*Type*

Native attributes and shared options for SelectItem.

```ts
type ISelectItemProps = Omit<BaseSelect.Item.Props, 'label' | 'nativeButton' | 'render' | 'value'> & {
    asChild?: boolean;
    label?: string;
    textValue?: string;
    value: string;
};
```

#### <a id="api-components-form-ISelectProps"></a>`ISelectProps`

*Type*

Native attributes and shared options for Select.

```ts
type ISelectProps = Omit<BaseSelect.Root.Props<string>, 'defaultValue' | 'onOpenChange' | 'onValueChange' | 'value'> & {
    defaultValue?: string;
    onOpenChange?: (open: boolean) => void;
    onValueChange?: (value: string) => void;
    value?: string | null;
};
```

#### <a id="api-components-form-ISelectTriggerProps"></a>`ISelectTriggerProps`

*Type*

Native attributes and shared options for SelectTrigger.

```ts
type ISelectTriggerProps = Omit<BaseSelect.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-components-form-ISelectValueProps"></a>`ISelectValueProps`

*Type*

Native attributes and shared options for SelectValue.

```ts
type ISelectValueProps = Omit<BaseSelect.Value.Props, 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-components-form-ISwitchProps"></a>`ISwitchProps`

*Type*

Native attributes and shared options for Switch.

```ts
type ISwitchProps = Omit<BaseSwitch.Root.Props, 'nativeButton' | 'onCheckedChange' | 'render'> & {
    asChild?: boolean;
    onCheckedChange?: (checked: boolean) => void;
    size?: 'default' | 'sm';
};
```

#### <a id="api-components-form-ITextareaProps"></a>`ITextareaProps`

*Type*

Native attributes and shared options for Textarea.

```ts
type ITextareaProps = React.ComponentProps<'textarea'>;
```

## <a id="api-entry-components/tabs"></a>`jg-react-ui/components/tabs`

- Functions: [`Tabs`](#api-components-tabs-Tabs), [`TabsContent`](#api-components-tabs-TabsContent), [`TabsList`](#api-components-tabs-TabsList), [`TabsTrigger`](#api-components-tabs-TabsTrigger)
- Types: [`ITabsActivationMode`](#api-components-tabs-ITabsActivationMode), [`ITabsContentProps`](#api-components-tabs-ITabsContentProps), [`ITabsListProps`](#api-components-tabs-ITabsListProps), [`ITabsOverflowBehavior`](#api-components-tabs-ITabsOverflowBehavior), [`ITabsProps`](#api-components-tabs-ITabsProps), [`ITabsTriggerProps`](#api-components-tabs-ITabsTriggerProps)

### <a id="api-components-tabs-functions"></a>Functions in `jg-react-ui/components/tabs`

#### <a id="api-components-tabs-Tabs"></a>`Tabs`

*Function*

Provides the tabs root state and orientation context.

```ts
Tabs(props: ITabsProps): ReactElement
```

**Parameters**

- `props` `ITabsProps`: The Base UI tabs root props and activation mode.

**Returns** `ReactElement`: A React element that renders the tabs root.

**Example**

```ts
import { createElement } from 'react';
import { Tabs } from 'jg-react-ui/components/tabs';
const example = createElement(Tabs, { children: 'Project settings' });
```

#### <a id="api-components-tabs-TabsContent"></a>`TabsContent`

*Function*

Renders the panel content associated with a selected tab.

```ts
TabsContent(props: ITabsContentProps): ReactElement
```

**Parameters**

- `props` `ITabsContentProps`: The Base UI tabs panel props and mount behavior.

**Returns** `ReactElement`: A React element that renders the tabs content.

**Example**

```ts
import { createElement } from 'react';
import { TabsContent } from 'jg-react-ui/components/tabs';
const example = createElement(TabsContent, { value: 'overview', children: 'Project overview' });
```

#### <a id="api-components-tabs-TabsList"></a>`TabsList`

*Function*

Renders the segmented control container for tab triggers.

```ts
TabsList(props: ITabsListProps): ReactElement
```

**Parameters**

- `props` `ITabsListProps`: The Base UI tabs list props.

**Returns** `ReactElement`: A React element that renders the tabs list.

**Example**

```ts
import { createElement } from 'react';
import { TabsList } from 'jg-react-ui/components/tabs';
const example = createElement(TabsList, { overflowBehavior: 'scroll', 'aria-label': 'Project views' });
```

#### <a id="api-components-tabs-TabsTrigger"></a>`TabsTrigger`

*Function*

Renders an individual tab selection control.

```ts
TabsTrigger(props: ITabsTriggerProps): ReactElement
```

**Parameters**

- `props` `ITabsTriggerProps`: The Base UI tabs trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the tabs trigger.

**Throws**

- TabsTrigger must be rendered inside TabsList.
- TabsTrigger with composite children requires title or aria-label when TabsList truncates.
- TabsTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TabsTrigger } from 'jg-react-ui/components/tabs';
const example = createElement(TabsTrigger, { value: 'overview', children: 'Overview' });
```

### <a id="api-components-tabs-types"></a>Types in `jg-react-ui/components/tabs`

#### <a id="api-components-tabs-ITabsActivationMode"></a>`ITabsActivationMode`

*Type*

Tab activation modes supported by the shared tabs root.

```ts
type ITabsActivationMode = 'automatic' | 'manual';
```

#### <a id="api-components-tabs-ITabsContentProps"></a>`ITabsContentProps`

*Type*

Native attributes and shared options for TabsContent.

```ts
type ITabsContentProps = React.ComponentProps<typeof BaseTabs.Panel> & {
    forceMount?: boolean;
};
```

#### <a id="api-components-tabs-ITabsListProps"></a>`ITabsListProps`

*Type*

Native attributes and shared options for TabsList.

```ts
type ITabsListProps = React.ComponentProps<typeof BaseTabs.List> & {
    overflowBehavior: ITabsOverflowBehavior;
};
```

#### <a id="api-components-tabs-ITabsOverflowBehavior"></a>`ITabsOverflowBehavior`

*Type*

Scroll preserves complete natural-width labels; truncate is an explicit constrained exception.

```ts
type ITabsOverflowBehavior = 'scroll' | 'truncate';
```

#### <a id="api-components-tabs-ITabsProps"></a>`ITabsProps`

*Type*

Native attributes and shared options for Tabs.

```ts
type ITabsProps = Omit<React.ComponentProps<typeof BaseTabs.Root>, 'activationMode'> & {
    activationMode?: ITabsActivationMode;
};
```

#### <a id="api-components-tabs-ITabsTriggerProps"></a>`ITabsTriggerProps`

*Type*

Native attributes and shared options for TabsTrigger.

```ts
type ITabsTriggerProps = Omit<React.ComponentProps<typeof BaseTabs.Tab>, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/dropdown-menu"></a>`jg-react-ui/components/dropdown-menu`

- Functions: [`DropdownMenu`](#api-components-dropdown-menu-DropdownMenu), [`DropdownMenuCheckboxItem`](#api-components-dropdown-menu-DropdownMenuCheckboxItem), [`DropdownMenuContent`](#api-components-dropdown-menu-DropdownMenuContent), [`DropdownMenuGroup`](#api-components-dropdown-menu-DropdownMenuGroup), [`DropdownMenuItem`](#api-components-dropdown-menu-DropdownMenuItem), [`DropdownMenuLabel`](#api-components-dropdown-menu-DropdownMenuLabel), [`DropdownMenuRadioGroup`](#api-components-dropdown-menu-DropdownMenuRadioGroup), [`DropdownMenuRadioItem`](#api-components-dropdown-menu-DropdownMenuRadioItem), [`DropdownMenuSeparator`](#api-components-dropdown-menu-DropdownMenuSeparator), [`DropdownMenuShortcut`](#api-components-dropdown-menu-DropdownMenuShortcut), [`DropdownMenuSub`](#api-components-dropdown-menu-DropdownMenuSub), [`DropdownMenuSubContent`](#api-components-dropdown-menu-DropdownMenuSubContent), [`DropdownMenuSubTrigger`](#api-components-dropdown-menu-DropdownMenuSubTrigger), [`DropdownMenuTrigger`](#api-components-dropdown-menu-DropdownMenuTrigger)
- Types: [`IDropdownMenuCheckboxItemProps`](#api-components-dropdown-menu-IDropdownMenuCheckboxItemProps), [`IDropdownMenuContentProps`](#api-components-dropdown-menu-IDropdownMenuContentProps), [`IDropdownMenuGroupProps`](#api-components-dropdown-menu-IDropdownMenuGroupProps), [`IDropdownMenuItemProps`](#api-components-dropdown-menu-IDropdownMenuItemProps), [`IDropdownMenuLabelProps`](#api-components-dropdown-menu-IDropdownMenuLabelProps), [`IDropdownMenuProps`](#api-components-dropdown-menu-IDropdownMenuProps), [`IDropdownMenuRadioGroupProps`](#api-components-dropdown-menu-IDropdownMenuRadioGroupProps), [`IDropdownMenuRadioItemProps`](#api-components-dropdown-menu-IDropdownMenuRadioItemProps), [`IDropdownMenuSeparatorProps`](#api-components-dropdown-menu-IDropdownMenuSeparatorProps), [`IDropdownMenuShortcutProps`](#api-components-dropdown-menu-IDropdownMenuShortcutProps), [`IDropdownMenuSubContentProps`](#api-components-dropdown-menu-IDropdownMenuSubContentProps), [`IDropdownMenuSubProps`](#api-components-dropdown-menu-IDropdownMenuSubProps), [`IDropdownMenuSubTriggerProps`](#api-components-dropdown-menu-IDropdownMenuSubTriggerProps), [`IDropdownMenuTriggerProps`](#api-components-dropdown-menu-IDropdownMenuTriggerProps)

### <a id="api-components-dropdown-menu-functions"></a>Functions in `jg-react-ui/components/dropdown-menu`

#### <a id="api-components-dropdown-menu-DropdownMenu"></a>`DropdownMenu`

*Function*

Provides dropdown menu root state and positioning context.

```ts
DropdownMenu(props: IDropdownMenuProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuProps`: The Base UI menu root props and public callback aliases.

**Returns** `ReactElement`: A React element that renders the dropdown menu root.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenu } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenu, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuCheckboxItem"></a>`DropdownMenuCheckboxItem`

*Function*

Renders a dropdown menu checkbox item with a check indicator.

```ts
DropdownMenuCheckboxItem(props: IDropdownMenuCheckboxItemProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuCheckboxItemProps`: The checkbox item props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu checkbox item.

**Throws**

- DropdownMenuCheckboxItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuCheckboxItem } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuCheckboxItem, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuContent"></a>`DropdownMenuContent`

*Function*

Renders themed dropdown menu content inside a portal.

```ts
DropdownMenuContent(props: IDropdownMenuContentProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuContentProps`: The Base UI menu popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the dropdown menu content.

**Throws**

- DropdownMenuContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuContent } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuContent, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuGroup"></a>`DropdownMenuGroup`

*Function*

Groups related dropdown menu items.

```ts
DropdownMenuGroup(props: MenuGroupProps): ReactElement
```

**Parameters**

- `props` `MenuGroupProps`: The Base UI menu group props.

**Returns** `ReactElement`: A React element that renders the dropdown menu group.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuGroup } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuGroup, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuItem"></a>`DropdownMenuItem`

*Function*

Renders a selectable dropdown menu item.

```ts
DropdownMenuItem(props: IDropdownMenuItemProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuItemProps`: The menu item props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu item.

**Throws**

- DropdownMenuItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuItem } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuItem, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuLabel"></a>`DropdownMenuLabel`

*Function*

Renders a non-interactive dropdown menu label.

```ts
DropdownMenuLabel(props: IDropdownMenuLabelProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuLabelProps`: The label props and optional inset alignment.

**Returns** `ReactElement`: A React element that renders the dropdown menu label.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuLabel } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuLabel, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuRadioGroup"></a>`DropdownMenuRadioGroup`

*Function*

Provides selection state for dropdown menu radio items.

```ts
DropdownMenuRadioGroup(props: IDropdownMenuRadioGroupProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuRadioGroupProps`: The Base UI menu radio group props.

**Returns** `ReactElement`: A React element that renders the dropdown menu radio group.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuRadioGroup } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuRadioGroup, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuRadioItem"></a>`DropdownMenuRadioItem`

*Function*

Renders a dropdown menu radio item with a selection indicator.

```ts
DropdownMenuRadioItem(props: IDropdownMenuRadioItemProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuRadioItemProps`: The radio item props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu radio item.

**Throws**

- DropdownMenuRadioItem asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuRadioItem } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuRadioItem, { value: 'personal', children: 'Personal' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuSeparator"></a>`DropdownMenuSeparator`

*Function*

Renders a visual divider between dropdown menu groups.

```ts
DropdownMenuSeparator(props: SeparatorProps): ReactElement
```

**Parameters**

- `props` `SeparatorProps`: The Base UI menu separator props.

**Returns** `ReactElement`: A React element that renders the dropdown menu separator.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSeparator } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSeparator, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuShortcut"></a>`DropdownMenuShortcut`

*Function*

Renders right-aligned shortcut text for a dropdown menu item.

```ts
DropdownMenuShortcut(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The shortcut span props.

**Returns** `ReactElement`: A React element that renders the dropdown menu shortcut.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuShortcut } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuShortcut, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuSub"></a>`DropdownMenuSub`

*Function*

Provides nested dropdown menu state.

```ts
DropdownMenuSub(props: IDropdownMenuSubProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuSubProps`: The Base UI submenu root props and public callback aliases.

**Returns** `ReactElement`: A React element that renders the dropdown menu sub root.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSub } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSub, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuSubContent"></a>`DropdownMenuSubContent`

*Function*

Renders nested dropdown menu content.

```ts
DropdownMenuSubContent(props: IDropdownMenuContentProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuContentProps`: The Base UI menu popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the dropdown menu sub content.

**Throws**

- DropdownMenuContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSubContent } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSubContent, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuSubTrigger"></a>`DropdownMenuSubTrigger`

*Function*

Renders the trigger that opens a nested dropdown menu.

```ts
DropdownMenuSubTrigger(props: IDropdownMenuSubTriggerProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuSubTriggerProps`: The sub trigger props and optional item variant settings.

**Returns** `ReactElement`: A React element that renders the dropdown menu sub trigger.

**Throws**

- DropdownMenuSubTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuSubTrigger } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuSubTrigger, { children: 'Project settings' });
```

#### <a id="api-components-dropdown-menu-DropdownMenuTrigger"></a>`DropdownMenuTrigger`

*Function*

Renders the interactive element that opens the dropdown menu.

```ts
DropdownMenuTrigger(props: IDropdownMenuTriggerProps): ReactElement
```

**Parameters**

- `props` `IDropdownMenuTriggerProps`: The Base UI menu trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the dropdown menu trigger.

**Throws**

- DropdownMenuTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { DropdownMenuTrigger } from 'jg-react-ui/components/dropdown-menu';
const example = createElement(DropdownMenuTrigger, { children: 'Project settings' });
```

### <a id="api-components-dropdown-menu-types"></a>Types in `jg-react-ui/components/dropdown-menu`

#### <a id="api-components-dropdown-menu-IDropdownMenuCheckboxItemProps"></a>`IDropdownMenuCheckboxItemProps`

*Type*

Native attributes and shared options for DropdownMenuCheckboxItem.

```ts
type IDropdownMenuCheckboxItemProps = Omit<BaseMenu.CheckboxItem.Props, 'checked' | 'defaultChecked' | 'label' | 'nativeButton' | 'onCheckedChange' | 'onSelect' | 'render'> & VariantProps<typeof dropdownMenuItemVariants> & IDropdownMenuSelectableItemProps & {
    checked?: boolean | 'indeterminate';
    defaultChecked?: boolean | 'indeterminate';
    onCheckedChange?: (checked: boolean) => void;
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuContentProps"></a>`IDropdownMenuContentProps`

*Type*

Native attributes and shared options for DropdownMenuContent.

```ts
type IDropdownMenuContentProps = Omit<BaseMenu.Popup.Props, 'render'> & Pick<BaseMenu.Positioner.Props, 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
    asChild?: boolean;
    avoidCollisions?: boolean;
    forceMount?: BaseMenu.Portal.Props['keepMounted'];
    hideWhenDetached?: boolean;
    loop?: boolean;
    onCloseAutoFocus?: (event: Event) => void;
    onEscapeKeyDown?: (event: Event) => void;
    onFocusOutside?: (event: Event) => void;
    onInteractOutside?: (event: Event) => void;
    onPointerDownOutside?: (event: Event) => void;
    sticky?: 'partial' | 'always';
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuGroupProps"></a>`IDropdownMenuGroupProps`

*Type*

Native attributes and shared options for DropdownMenuGroup.

```ts
type IDropdownMenuGroupProps = BaseMenu.Group.Props;
```

#### <a id="api-components-dropdown-menu-IDropdownMenuItemProps"></a>`IDropdownMenuItemProps`

*Type*

Native attributes and shared options for DropdownMenuItem.

```ts
type IDropdownMenuItemProps = Omit<BaseMenu.Item.Props, 'label' | 'nativeButton' | 'onSelect' | 'render'> & VariantProps<typeof dropdownMenuItemVariants> & IDropdownMenuSelectableItemProps;
```

#### <a id="api-components-dropdown-menu-IDropdownMenuLabelProps"></a>`IDropdownMenuLabelProps`

*Type*

Native attributes and shared options for DropdownMenuLabel.

```ts
type IDropdownMenuLabelProps = React.ComponentProps<'div'> & {
    inset?: boolean;
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuProps"></a>`IDropdownMenuProps`

*Type*

Native attributes and shared options for DropdownMenu.

```ts
type IDropdownMenuProps = Omit<BaseMenu.Root.Props, 'onOpenChange'> & {
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuRadioGroupProps"></a>`IDropdownMenuRadioGroupProps`

*Type*

Native attributes and shared options for DropdownMenuRadioGroup.

```ts
type IDropdownMenuRadioGroupProps = Omit<BaseMenu.RadioGroup.Props, 'onValueChange'> & {
    onValueChange?: (value: string) => void;
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuRadioItemProps"></a>`IDropdownMenuRadioItemProps`

*Type*

Native attributes and shared options for DropdownMenuRadioItem.

```ts
type IDropdownMenuRadioItemProps = Omit<BaseMenu.RadioItem.Props, 'label' | 'nativeButton' | 'onSelect' | 'render' | 'value'> & VariantProps<typeof dropdownMenuItemVariants> & IDropdownMenuSelectableItemProps & {
    value: string;
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuSeparatorProps"></a>`IDropdownMenuSeparatorProps`

*Type*

Native attributes and shared options for DropdownMenuSeparator.

```ts
type IDropdownMenuSeparatorProps = BaseMenu.Separator.Props;
```

#### <a id="api-components-dropdown-menu-IDropdownMenuShortcutProps"></a>`IDropdownMenuShortcutProps`

*Type*

Native attributes and shared options for DropdownMenuShortcut.

```ts
type IDropdownMenuShortcutProps = React.ComponentProps<'span'>;
```

#### <a id="api-components-dropdown-menu-IDropdownMenuSubContentProps"></a>`IDropdownMenuSubContentProps`

*Type*

Native attributes and shared options for DropdownMenuSubContent.

```ts
type IDropdownMenuSubContentProps = IDropdownMenuContentProps;
```

#### <a id="api-components-dropdown-menu-IDropdownMenuSubProps"></a>`IDropdownMenuSubProps`

*Type*

Native attributes and shared options for DropdownMenuSub.

```ts
type IDropdownMenuSubProps = Omit<BaseMenu.SubmenuRoot.Props, 'onOpenChange'> & {
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuSubTriggerProps"></a>`IDropdownMenuSubTriggerProps`

*Type*

Native attributes and shared options for DropdownMenuSubTrigger.

```ts
type IDropdownMenuSubTriggerProps = Omit<BaseMenu.SubmenuTrigger.Props, 'label' | 'nativeButton' | 'render'> & {
    asChild?: boolean;
    inset?: boolean;
    label?: string;
    textValue?: string;
    variant?: VariantProps<typeof dropdownMenuItemVariants>['variant'];
};
```

#### <a id="api-components-dropdown-menu-IDropdownMenuTriggerProps"></a>`IDropdownMenuTriggerProps`

*Type*

Native attributes and shared options for DropdownMenuTrigger.

```ts
type IDropdownMenuTriggerProps = Omit<BaseMenu.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/tooltip"></a>`jg-react-ui/components/tooltip`

- Functions: [`Tooltip`](#api-components-tooltip-Tooltip), [`TooltipContent`](#api-components-tooltip-TooltipContent), [`TooltipProvider`](#api-components-tooltip-TooltipProvider), [`TooltipTrigger`](#api-components-tooltip-TooltipTrigger)
- Types: [`ITooltipContentProps`](#api-components-tooltip-ITooltipContentProps), [`ITooltipProps`](#api-components-tooltip-ITooltipProps), [`ITooltipProviderProps`](#api-components-tooltip-ITooltipProviderProps), [`ITooltipTriggerProps`](#api-components-tooltip-ITooltipTriggerProps)

### <a id="api-components-tooltip-functions"></a>Functions in `jg-react-ui/components/tooltip`

#### <a id="api-components-tooltip-Tooltip"></a>`Tooltip`

*Function*

Provides tooltip state for a trigger and content pair.

```ts
Tooltip(props: ITooltipProps): ReactElement
```

**Parameters**

- `props` `ITooltipProps`: The Base UI tooltip root props and public timing options.

**Returns** `ReactElement`: A React element that renders the tooltip root.

**Example**

```ts
import { createElement } from 'react';
import { Tooltip } from 'jg-react-ui/components/tooltip';
const example = createElement(Tooltip, { children: 'Project settings' });
```

#### <a id="api-components-tooltip-TooltipContent"></a>`TooltipContent`

*Function*

Renders themed tooltip content inside a portal.

```ts
TooltipContent(props: ITooltipContentProps): ReactElement
```

**Parameters**

- `props` `ITooltipContentProps`: The Base UI tooltip popup props and public positioning options.

**Returns** `ReactElement`: A React element that renders the tooltip bubble.

**Throws**

- TooltipContent asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TooltipContent } from 'jg-react-ui/components/tooltip';
const example = createElement(TooltipContent, { children: 'Project settings' });
```

#### <a id="api-components-tooltip-TooltipProvider"></a>`TooltipProvider`

*Function*

Provides shared tooltip timing defaults for a subtree.

```ts
TooltipProvider(props: ITooltipProviderProps): ReactElement
```

**Parameters**

- `props` `ITooltipProviderProps`: The Base UI tooltip provider props and public timing options.

**Returns** `ReactElement`: A React element that renders the tooltip provider.

**Example**

```ts
import { createElement } from 'react';
import { TooltipProvider } from 'jg-react-ui/components/tooltip';
const example = createElement(TooltipProvider, { children: 'Project settings' });
```

#### <a id="api-components-tooltip-TooltipTrigger"></a>`TooltipTrigger`

*Function*

Renders the focusable or hoverable element that opens tooltip content.

```ts
TooltipTrigger(props: ITooltipTriggerProps): ReactElement
```

**Parameters**

- `props` `ITooltipTriggerProps`: The Base UI tooltip trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the tooltip trigger.

**Throws**

- TooltipTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement } from 'react';
import { TooltipTrigger } from 'jg-react-ui/components/tooltip';
const example = createElement(TooltipTrigger, { children: 'Project settings' });
```

### <a id="api-components-tooltip-types"></a>Types in `jg-react-ui/components/tooltip`

#### <a id="api-components-tooltip-ITooltipContentProps"></a>`ITooltipContentProps`

*Type*

Native attributes and shared options for TooltipContent.

```ts
type ITooltipContentProps = Omit<BaseTooltip.Popup.Props, 'render'> & Pick<BaseTooltip.Positioner.Props, 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'side' | 'sideOffset'> & {
    asChild?: boolean;
    avoidCollisions?: boolean;
    forceMount?: BaseTooltip.Portal.Props['keepMounted'];
    hideWhenDetached?: boolean;
    sticky?: 'partial' | 'always';
};
```

#### <a id="api-components-tooltip-ITooltipProps"></a>`ITooltipProps`

*Type*

Native attributes and shared options for Tooltip.

```ts
type ITooltipProps = Omit<BaseTooltip.Root.Props, 'disableHoverablePopup'> & {
    delayDuration?: BaseTooltip.Trigger.Props['delay'];
    disableHoverableContent?: boolean;
    disableHoverablePopup?: BaseTooltip.Root.Props['disableHoverablePopup'];
};
```

#### <a id="api-components-tooltip-ITooltipProviderProps"></a>`ITooltipProviderProps`

*Type*

Native attributes and shared options for TooltipProvider.

```ts
type ITooltipProviderProps = Omit<BaseTooltip.Provider.Props, 'delay' | 'timeout'> & {
    delay?: BaseTooltip.Provider.Props['delay'];
    delayDuration?: BaseTooltip.Provider.Props['delay'];
    disableHoverableContent?: boolean;
    skipDelayDuration?: BaseTooltip.Provider.Props['timeout'];
    timeout?: BaseTooltip.Provider.Props['timeout'];
};
```

#### <a id="api-components-tooltip-ITooltipTriggerProps"></a>`ITooltipTriggerProps`

*Type*

Native attributes and shared options for TooltipTrigger.

```ts
type ITooltipTriggerProps = Omit<BaseTooltip.Trigger.Props, 'render'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/typography"></a>`jg-react-ui/components/typography`

- Functions: [`Article`](#api-components-typography-Article), [`ArticleHeader`](#api-components-typography-ArticleHeader), [`Blockquote`](#api-components-typography-Blockquote), [`CodeBlock`](#api-components-typography-CodeBlock), [`CodeFileHeader`](#api-components-typography-CodeFileHeader), [`Heading`](#api-components-typography-Heading), [`isCodeBlockProse`](#api-components-typography-isCodeBlockProse), [`KeyboardKey`](#api-components-typography-KeyboardKey), [`LargeText`](#api-components-typography-LargeText), [`Lead`](#api-components-typography-Lead), [`ListItem`](#api-components-typography-ListItem), [`MutedText`](#api-components-typography-MutedText), [`OrderedList`](#api-components-typography-OrderedList), [`Paragraph`](#api-components-typography-Paragraph), [`Section`](#api-components-typography-Section), [`SmallText`](#api-components-typography-SmallText), [`Table`](#api-components-typography-Table), [`TableCell`](#api-components-typography-TableCell), [`TableContainer`](#api-components-typography-TableContainer), [`TableHeaderCell`](#api-components-typography-TableHeaderCell), [`TableRow`](#api-components-typography-TableRow), [`UnorderedList`](#api-components-typography-UnorderedList)
- Constants: [`codeFileStatusVariants`](#api-components-typography-codeFileStatusVariants), [`headingVariants`](#api-components-typography-headingVariants)
- Types: [`IArticleHeaderProps`](#api-components-typography-IArticleHeaderProps), [`IArticleProps`](#api-components-typography-IArticleProps), [`IBlockquoteProps`](#api-components-typography-IBlockquoteProps), [`ICodeBlockProps`](#api-components-typography-ICodeBlockProps), [`ICodeFileHeaderProps`](#api-components-typography-ICodeFileHeaderProps), [`ICodeFileStatus`](#api-components-typography-ICodeFileStatus), [`IHeadingLevel`](#api-components-typography-IHeadingLevel), [`IHeadingProps`](#api-components-typography-IHeadingProps), [`IHeadingRole`](#api-components-typography-IHeadingRole), [`IKeyboardKeyProps`](#api-components-typography-IKeyboardKeyProps), [`ILargeTextProps`](#api-components-typography-ILargeTextProps), [`ILeadProps`](#api-components-typography-ILeadProps), [`IListItemProps`](#api-components-typography-IListItemProps), [`IMutedTextProps`](#api-components-typography-IMutedTextProps), [`IOrderedListProps`](#api-components-typography-IOrderedListProps), [`IParagraphProps`](#api-components-typography-IParagraphProps), [`ISectionProps`](#api-components-typography-ISectionProps), [`ISmallTextProps`](#api-components-typography-ISmallTextProps), [`ITableCellProps`](#api-components-typography-ITableCellProps), [`ITableContainerProps`](#api-components-typography-ITableContainerProps), [`ITableHeaderCellProps`](#api-components-typography-ITableHeaderCellProps), [`ITableProps`](#api-components-typography-ITableProps), [`ITableRowProps`](#api-components-typography-ITableRowProps), [`IUnorderedListProps`](#api-components-typography-IUnorderedListProps)

### <a id="api-components-typography-functions"></a>Functions in `jg-react-ui/components/typography`

#### <a id="api-components-typography-Article"></a>`Article`

*Function*

Renders a readable article-width container.

```ts
Article(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The article element props.

**Returns** `ReactElement`: A React element that renders the article.

**Example**

```ts
import { createElement } from 'react';
import { Article } from 'jg-react-ui/components/typography';
const example = createElement(Article, { children: 'Project settings' });
```

#### <a id="api-components-typography-ArticleHeader"></a>`ArticleHeader`

*Function*

Renders an article header with compact bottom spacing.

```ts
ArticleHeader(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The header element props.

**Returns** `ReactElement`: A React element that renders the article header.

**Example**

```ts
import { createElement } from 'react';
import { ArticleHeader } from 'jg-react-ui/components/typography';
const example = createElement(ArticleHeader, { children: 'Project settings' });
```

#### <a id="api-components-typography-Blockquote"></a>`Blockquote`

*Function*

Renders a prose blockquote with left-border treatment.

```ts
Blockquote(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The blockquote props.

**Returns** `ReactElement`: A React element that renders the blockquote.

**Example**

```ts
import { createElement } from 'react';
import { Blockquote } from 'jg-react-ui/components/typography';
const example = createElement(Blockquote, { children: 'Project settings' });
```

#### <a id="api-components-typography-CodeBlock"></a>`CodeBlock`

*Function*

Renders a syntax-highlighted code block using the active theme.

```ts
CodeBlock(props: ICodeBlockProps): ReactElement
```

**Parameters**

- `props` `ICodeBlockProps`: The code block props, source metadata, language, wrapping, and code children.

**Returns** `ReactElement`: A React element that renders the code block.

**Example**

```ts
import { createElement } from 'react';
import { CodeBlock } from 'jg-react-ui/components/typography';
const example = createElement(CodeBlock, { language: 'typescript', filePath: 'src/agent.ts', children: 'const isReady = true;' });
```

#### <a id="api-components-typography-CodeFileHeader"></a>`CodeFileHeader`

*Function*

Renders aligned source metadata, keeping the filename visible when its directory truncates.

```ts
CodeFileHeader(props: ICodeFileHeaderProps): ReactElement
```

**Parameters**

- `props` `ICodeFileHeaderProps`: The source path, authored metadata, status, and action slots.

**Returns** `ReactElement`: The source header.

**Example**

```ts
import { createElement } from 'react';
import { CodeFileHeader } from 'jg-react-ui/components/typography';
const example = createElement(CodeFileHeader, { filePath: 'src/agent.ts', fileStatus: 'modified' });
```

#### <a id="api-components-typography-Heading"></a>`Heading`

*Function*

Renders a semantic heading for the supported typography scale.

```ts
Heading(props: IHeadingProps): ReactElement
```

**Parameters**

- `props` `IHeadingProps`: The heading props and required heading level.

**Returns** `ReactElement`: A React element that renders the selected heading element.

**Example**

```ts
import { createElement } from 'react';
import { Heading } from 'jg-react-ui/components/typography';
const example = createElement(Heading, { level: 2, children: 'Project settings' });
```

#### <a id="api-components-typography-isCodeBlockProse"></a>`isCodeBlockProse`

*Function*

Returns whether declared source metadata identifies prose that should wrap by default.

```ts
isCodeBlockProse(filePath?: string, language?: string): boolean
```

**Parameters**

- `filePath?` `string`: An optional repository path.
- `language?` `string`: An optional declared syntax identifier.

**Returns** `boolean`: Whether the source should wrap automatically.

**Example**

```ts
import { isCodeBlockProse } from 'jg-react-ui/components/typography';
isCodeBlockProse('README.md'); // => true
```

#### <a id="api-components-typography-KeyboardKey"></a>`KeyboardKey`

*Function*

Renders keyboard shortcut text with keycap styling.

```ts
KeyboardKey(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The keyboard element props.

**Returns** `ReactElement`: A React element that renders the keyboard key.

**Example**

```ts
import { createElement } from 'react';
import { KeyboardKey } from 'jg-react-ui/components/typography';
const example = createElement(KeyboardKey, { children: 'Project settings' });
```

#### <a id="api-components-typography-LargeText"></a>`LargeText`

*Function*

Renders larger emphasized inline prose.

```ts
LargeText(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the large text.

**Example**

```ts
import { createElement } from 'react';
import { LargeText } from 'jg-react-ui/components/typography';
const example = createElement(LargeText, { children: 'Project settings' });
```

#### <a id="api-components-typography-Lead"></a>`Lead`

*Function*

Renders emphasized introductory prose.

```ts
Lead(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the lead text.

**Example**

```ts
import { createElement } from 'react';
import { Lead } from 'jg-react-ui/components/typography';
const example = createElement(Lead, { children: 'Project settings' });
```

#### <a id="api-components-typography-ListItem"></a>`ListItem`

*Function*

Renders a prose list item.

```ts
ListItem(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The list item props.

**Returns** `ReactElement`: A React element that renders the list item.

**Example**

```ts
import { createElement } from 'react';
import { ListItem } from 'jg-react-ui/components/typography';
const example = createElement(ListItem, { children: 'Project settings' });
```

#### <a id="api-components-typography-MutedText"></a>`MutedText`

*Function*

Renders lower-emphasis supporting prose.

```ts
MutedText(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the muted text.

**Example**

```ts
import { createElement } from 'react';
import { MutedText } from 'jg-react-ui/components/typography';
const example = createElement(MutedText, { children: 'Project settings' });
```

#### <a id="api-components-typography-OrderedList"></a>`OrderedList`

*Function*

Renders a prose ordered list.

```ts
OrderedList(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The ordered list props.

**Returns** `ReactElement`: A React element that renders the ordered list.

**Example**

```ts
import { createElement } from 'react';
import { OrderedList } from 'jg-react-ui/components/typography';
const example = createElement(OrderedList, { children: 'Project settings' });
```

#### <a id="api-components-typography-Paragraph"></a>`Paragraph`

*Function*

Renders a default prose paragraph.

```ts
Paragraph(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph props.

**Returns** `ReactElement`: A React element that renders the paragraph.

**Example**

```ts
import { createElement } from 'react';
import { Paragraph } from 'jg-react-ui/components/typography';
const example = createElement(Paragraph, { children: 'Project settings' });
```

#### <a id="api-components-typography-Section"></a>`Section`

*Function*

Renders a prose section with consistent vertical spacing.

```ts
Section(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The section element props.

**Returns** `ReactElement`: A React element that renders the section.

**Example**

```ts
import { createElement } from 'react';
import { Section } from 'jg-react-ui/components/typography';
const example = createElement(Section, { children: 'Project settings' });
```

#### <a id="api-components-typography-SmallText"></a>`SmallText`

*Function*

Renders small supporting text with block layout.

```ts
SmallText(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The small element props.

**Returns** `ReactElement`: A React element that renders the small text.

**Example**

```ts
import { createElement } from 'react';
import { SmallText } from 'jg-react-ui/components/typography';
const example = createElement(SmallText, { children: 'Project settings' });
```

#### <a id="api-components-typography-Table"></a>`Table`

*Function*

Renders a full-width prose table.

```ts
Table(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table props.

**Returns** `ReactElement`: A React element that renders the table.

**Example**

```ts
import { createElement } from 'react';
import { Table } from 'jg-react-ui/components/typography';
const example = createElement(Table, { children: 'Project settings' });
```

#### <a id="api-components-typography-TableCell"></a>`TableCell`

*Function*

Renders a prose table body cell.

```ts
TableCell(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table cell props.

**Returns** `ReactElement`: A React element that renders the table cell.

**Example**

```ts
import { createElement } from 'react';
import { TableCell } from 'jg-react-ui/components/typography';
const example = createElement(TableCell, { children: 'Personal workspace' });
```

#### <a id="api-components-typography-TableContainer"></a>`TableContainer`

*Function*

Renders a horizontally scrollable wrapper for prose tables.

```ts
TableContainer(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table container props.

**Returns** `ReactElement`: A React element that renders the table container.

**Example**

```ts
import { createElement } from 'react';
import { TableContainer } from 'jg-react-ui/components/typography';
const example = createElement(TableContainer, { children: 'Project settings' });
```

#### <a id="api-components-typography-TableHeaderCell"></a>`TableHeaderCell`

*Function*

Renders a prose table header cell.

```ts
TableHeaderCell(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table header cell props.

**Returns** `ReactElement`: A React element that renders the table header cell.

**Example**

```ts
import { createElement } from 'react';
import { TableHeaderCell } from 'jg-react-ui/components/typography';
const example = createElement(TableHeaderCell, { scope: 'col', children: 'Name' });
```

#### <a id="api-components-typography-TableRow"></a>`TableRow`

*Function*

Renders a prose table row.

```ts
TableRow(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The table row props.

**Returns** `ReactElement`: A React element that renders the table row.

**Example**

```ts
import { createElement } from 'react';
import { TableRow } from 'jg-react-ui/components/typography';
const example = createElement(TableRow, { children: 'Project settings' });
```

#### <a id="api-components-typography-UnorderedList"></a>`UnorderedList`

*Function*

Renders a prose unordered list.

```ts
UnorderedList(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The unordered list props.

**Returns** `ReactElement`: A React element that renders the unordered list.

**Example**

```ts
import { createElement } from 'react';
import { UnorderedList } from 'jg-react-ui/components/typography';
const example = createElement(UnorderedList, { children: 'Project settings' });
```

### <a id="api-components-typography-constants"></a>Constants in `jg-react-ui/components/typography`

#### <a id="api-components-typography-codeFileStatusVariants"></a>`codeFileStatusVariants`

*Constant*

Builds semantic classes for a source file's change status.

```ts
const codeFileStatusVariants: (props?: ConfigVariants<{ status: { added: string; modified: string; removed: string; }; }> & ClassProp) => string
```

**Example**

```ts
import { codeFileStatusVariants } from 'jg-react-ui/components/typography';
const classes = codeFileStatusVariants({ status: 'modified' });
```

#### <a id="api-components-typography-headingVariants"></a>`headingVariants`

*Constant*

Builds statement typography independently from its semantic heading level.

```ts
const headingVariants: (props?: ConfigVariants<{ role: { display: string; 'public-page': string; section: string; 'product-page': string; 'product-statement': string; }; }> & ClassProp) => string
```

**Example**

```ts
import { headingVariants } from 'jg-react-ui/components/typography';
const classes = headingVariants({ role: 'section' });
```

### <a id="api-components-typography-types"></a>Types in `jg-react-ui/components/typography`

#### <a id="api-components-typography-IArticleHeaderProps"></a>`IArticleHeaderProps`

*Type*

Native attributes and shared options for ArticleHeader.

```ts
type IArticleHeaderProps = React.ComponentProps<'header'>;
```

#### <a id="api-components-typography-IArticleProps"></a>`IArticleProps`

*Type*

Native attributes and shared options for Article.

```ts
type IArticleProps = React.ComponentProps<'article'>;
```

#### <a id="api-components-typography-IBlockquoteProps"></a>`IBlockquoteProps`

*Type*

Native attributes and shared options for Blockquote.

```ts
type IBlockquoteProps = React.ComponentProps<'blockquote'>;
```

#### <a id="api-components-typography-ICodeBlockProps"></a>`ICodeBlockProps`

*Type*

Source metadata, retained controls, and wrapping policies.

```ts
type ICodeBlockProps = Omit<React.ComponentPropsWithoutRef<'pre'>, 'children'> & {
    children: React.ReactNode;
    copyValue?: string | undefined;
    copyLabel?: string | undefined;
    filePath?: string | undefined;
    headerLabel?: React.ReactNode | undefined;
    headerRole?: React.ReactNode | undefined;
    headerMeta?: React.ReactNode | undefined;
    fileIcon?: React.ReactNode | undefined;
    fileStatus?: ICodeFileStatus | undefined;
    hasHeader?: boolean | undefined;
    hasCopyButton?: boolean | undefined;
    hasPreferencesControls?: boolean | undefined;
    hasSyntaxHighlighting?: boolean | undefined;
    language?: string | undefined;
    prefersWrappedCode?: boolean | undefined;
    shouldWrapContent?: boolean | undefined;
};
```

#### <a id="api-components-typography-ICodeFileHeaderProps"></a>`ICodeFileHeaderProps`

*Type*

Source and diff headers share file metadata while their owners supply controls.

```ts
type ICodeFileHeaderProps = React.ComponentProps<'div'> & Pick<ICodeBlockProps, 'filePath' | 'headerLabel' | 'headerRole' | 'headerMeta' | 'fileIcon' | 'fileStatus'> & {
    actions?: React.ReactNode | undefined;
    languageLabel?: string | undefined;
};
```

#### <a id="api-components-typography-ICodeFileStatus"></a>`ICodeFileStatus`

*Type*

Git file state displayed with a matching letter and color.

```ts
type ICodeFileStatus = 'added' | 'modified' | 'removed';
```

#### <a id="api-components-typography-IHeadingLevel"></a>`IHeadingLevel`

*Type*

Supported heading levels intentionally stop at h5 for the shared prose scale.

```ts
type IHeadingLevel = keyof typeof headingClassNames;
```

#### <a id="api-components-typography-IHeadingProps"></a>`IHeadingProps`

*Type*

Native attributes and shared options for Heading.

```ts
type IHeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'role'> & {
    level: IHeadingLevel;
    role?: IHeadingRole | React.AriaRole | undefined;
};
```

#### <a id="api-components-typography-IHeadingRole"></a>`IHeadingRole`

*Type*

Statement roles style headings independently from their semantic level.

```ts
type IHeadingRole = NonNullable<VariantProps<typeof headingVariants>['role']>;
```

#### <a id="api-components-typography-IKeyboardKeyProps"></a>`IKeyboardKeyProps`

*Type*

Native attributes and shared options for KeyboardKey.

```ts
type IKeyboardKeyProps = React.ComponentProps<'kbd'>;
```

#### <a id="api-components-typography-ILargeTextProps"></a>`ILargeTextProps`

*Type*

Native attributes and shared options for LargeText.

```ts
type ILargeTextProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-typography-ILeadProps"></a>`ILeadProps`

*Type*

Native attributes and shared options for Lead.

```ts
type ILeadProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-typography-IListItemProps"></a>`IListItemProps`

*Type*

Native attributes and shared options for ListItem.

```ts
type IListItemProps = React.ComponentProps<'li'>;
```

#### <a id="api-components-typography-IMutedTextProps"></a>`IMutedTextProps`

*Type*

Native attributes and shared options for MutedText.

```ts
type IMutedTextProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-typography-IOrderedListProps"></a>`IOrderedListProps`

*Type*

Native attributes and shared options for OrderedList.

```ts
type IOrderedListProps = React.ComponentProps<'ol'>;
```

#### <a id="api-components-typography-IParagraphProps"></a>`IParagraphProps`

*Type*

Native attributes and shared options for Paragraph.

```ts
type IParagraphProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-typography-ISectionProps"></a>`ISectionProps`

*Type*

Native attributes and shared options for Section.

```ts
type ISectionProps = React.ComponentProps<'section'>;
```

#### <a id="api-components-typography-ISmallTextProps"></a>`ISmallTextProps`

*Type*

Native attributes and shared options for SmallText.

```ts
type ISmallTextProps = React.ComponentProps<'small'>;
```

#### <a id="api-components-typography-ITableCellProps"></a>`ITableCellProps`

*Type*

Native attributes and shared options for TableCell.

```ts
type ITableCellProps = React.ComponentProps<'td'>;
```

#### <a id="api-components-typography-ITableContainerProps"></a>`ITableContainerProps`

*Type*

Native attributes and shared options for TableContainer.

```ts
type ITableContainerProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-typography-ITableHeaderCellProps"></a>`ITableHeaderCellProps`

*Type*

Native attributes and shared options for TableHeaderCell.

```ts
type ITableHeaderCellProps = React.ComponentProps<'th'>;
```

#### <a id="api-components-typography-ITableProps"></a>`ITableProps`

*Type*

Native attributes and shared options for Table.

```ts
type ITableProps = React.ComponentProps<'table'>;
```

#### <a id="api-components-typography-ITableRowProps"></a>`ITableRowProps`

*Type*

Native attributes and shared options for TableRow.

```ts
type ITableRowProps = React.ComponentProps<'tr'>;
```

#### <a id="api-components-typography-IUnorderedListProps"></a>`IUnorderedListProps`

*Type*

Native attributes and shared options for UnorderedList.

```ts
type IUnorderedListProps = React.ComponentProps<'ul'>;
```

## <a id="api-entry-components/dialog"></a>`jg-react-ui/components/dialog`

- Functions: [`Dialog`](#api-components-dialog-Dialog), [`DialogBody`](#api-components-dialog-DialogBody), [`DialogCancel`](#api-components-dialog-DialogCancel), [`DialogClose`](#api-components-dialog-DialogClose), [`DialogContent`](#api-components-dialog-DialogContent), [`DialogDescription`](#api-components-dialog-DialogDescription), [`DialogFooter`](#api-components-dialog-DialogFooter), [`DialogHeader`](#api-components-dialog-DialogHeader), [`DialogTitle`](#api-components-dialog-DialogTitle), [`DialogTrigger`](#api-components-dialog-DialogTrigger)
- Types: [`IDialogBodyProps`](#api-components-dialog-IDialogBodyProps), [`IDialogCancelProps`](#api-components-dialog-IDialogCancelProps), [`IDialogCloseProps`](#api-components-dialog-IDialogCloseProps), [`IDialogContentProps`](#api-components-dialog-IDialogContentProps), [`IDialogDescriptionProps`](#api-components-dialog-IDialogDescriptionProps), [`IDialogFooterProps`](#api-components-dialog-IDialogFooterProps), [`IDialogHeaderProps`](#api-components-dialog-IDialogHeaderProps), [`IDialogProps`](#api-components-dialog-IDialogProps), [`IDialogSize`](#api-components-dialog-IDialogSize), [`IDialogTitleProps`](#api-components-dialog-IDialogTitleProps), [`IDialogTriggerProps`](#api-components-dialog-IDialogTriggerProps)

### <a id="api-components-dialog-functions"></a>Functions in `jg-react-ui/components/dialog`

#### <a id="api-components-dialog-Dialog"></a>`Dialog`

*Function*

Provides the dialog root state and accessibility context.

```ts
Dialog(props: IDialogProps): ReactElement
```

**Parameters**

- `props` `IDialogProps`: The Base UI dialog root props.

**Returns** `ReactElement`: A React element that renders the dialog root.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogBody"></a>`DialogBody`

*Function*

Renders the only vertically scrollable region within a dialog surface.

```ts
DialogBody(props: IDialogBodyProps): ReactElement
```

**Parameters**

- `props` `IDialogBodyProps`: The body element props and padding variant.

**Returns** `ReactElement`: A React element that renders the dialog body.

**Throws**

- DialogBody must be rendered inside DialogContent.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogCancel"></a>`DialogCancel`

*Function*

Renders a semantic footer cancel control for page-like dialogs.

```ts
DialogCancel(
  props: IDialogCancelProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `IDialogCancelProps`: The dialog close props and optional slot rendering flag.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for medium and large dialogs, or null when a compact header owns dismissal.

**Throws**

- DialogCancel must be rendered inside DialogContent.
- DialogClose asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogClose"></a>`DialogClose`

*Function*

Renders the interactive element that closes the dialog.

```ts
DialogClose(props: IDialogCloseProps): ReactElement
```

**Parameters**

- `props` `IDialogCloseProps`: The Base UI dialog close props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the dialog close control.

**Throws**

- DialogClose asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogContent"></a>`DialogContent`

*Function*

Renders the themed dialog content inside a portal.

```ts
DialogContent(props: IDialogContentProps): ReactElement
```

**Parameters**

- `props` `IDialogContentProps`: The Base UI dialog popup props and shared dialog options.

**Returns** `ReactElement`: A React element that renders the dialog panel.

**Throws**

- DialogContent asChild requires exactly one valid React element child.
- DialogContent requires direct DialogHeader and DialogBody children, with one optional DialogFooter.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogDescription"></a>`DialogDescription`

*Function*

Provides optional supporting context for the dialog title.

```ts
DialogDescription(props: DialogDescriptionProps): ReactElement
```

**Parameters**

- `props` `DialogDescriptionProps`: The Base UI dialog description props.

**Returns** `ReactElement`: A React element that renders the dialog description.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogFooter"></a>`DialogFooter`

*Function*

Groups dialog actions in a responsive footer layout.

```ts
DialogFooter(props: IDialogFooterProps): ReactElement
```

**Parameters**

- `props` `IDialogFooterProps`: The dialog footer props.

**Returns** `ReactElement`: A React element that renders the dialog footer.

**Throws**

- DialogFooter must be rendered inside DialogContent.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogHeader"></a>`DialogHeader`

*Function*

Groups the dialog title, optional supporting context, and header actions.

```ts
DialogHeader(props: IDialogHeaderProps): ReactElement
```

**Parameters**

- `props` `IDialogHeaderProps`: The dialog header props.

**Returns** `ReactElement`: A React element that renders the dialog header.

**Throws**

- DialogHeader must be rendered inside DialogContent.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogTitle"></a>`DialogTitle`

*Function*

Announces the primary dialog heading.

```ts
DialogTitle(props: DialogTitleProps): ReactElement
```

**Parameters**

- `props` `DialogTitleProps`: The Base UI dialog title props.

**Returns** `ReactElement`: A React element that renders the dialog title.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

#### <a id="api-components-dialog-DialogTrigger"></a>`DialogTrigger`

*Function*

Renders the interactive element that opens the dialog.

```ts
DialogTrigger(props: IDialogTriggerProps): ReactElement
```

**Parameters**

- `props` `IDialogTriggerProps`: The Base UI dialog trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the dialog trigger.

**Throws**

- DialogTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, DialogClose, DialogTrigger, DialogDescription, DialogCancel } from 'jg-react-ui/components/dialog';
const example = h(Dialog, null, h(DialogTrigger, null, 'Edit workspace'),
  h(DialogContent, { size: 'medium' },
    h(DialogHeader, null, h(DialogTitle, null, 'Workspace'), h(DialogDescription, null, 'Edit settings')),
    h(DialogBody, null, h('input', { 'aria-label': 'Workspace name' })),
    h(DialogFooter, null, h(DialogCancel, null, 'Cancel'), h(DialogClose, null, 'Done'))));
```

### <a id="api-components-dialog-types"></a>Types in `jg-react-ui/components/dialog`

#### <a id="api-components-dialog-IDialogBodyProps"></a>`IDialogBodyProps`

*Type*

Options and native attributes for DialogBody.

```ts
type IDialogBodyProps = Omit<React.ComponentProps<'div'>, 'style'> & {
    padding?: 'default' | 'none';
};
```

#### <a id="api-components-dialog-IDialogCancelProps"></a>`IDialogCancelProps`

*Type*

Options and native attributes for DialogCancel.

```ts
type IDialogCancelProps = Omit<IDialogCloseProps, 'className' | 'style'>;
```

#### <a id="api-components-dialog-IDialogCloseProps"></a>`IDialogCloseProps`

*Type*

Options and native attributes for DialogClose.

```ts
type IDialogCloseProps = Omit<BaseDialog.Close.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-components-dialog-IDialogContentProps"></a>`IDialogContentProps`

*Type*

Options and native attributes for DialogContent.

```ts
type IDialogContentProps = Omit<BaseDialog.Popup.Props, 'className' | 'initialFocus' | 'render' | 'style'> & {
    backButtonIcon?: React.ReactNode;
    backButtonAriaLabel?: string;
    closeButtonIcon?: React.ReactNode;
    closeButtonAriaLabel?: string;
    isCloseButtonVisible?: boolean;
    asChild?: boolean;
    forceMount?: BaseDialog.Portal.Props['keepMounted'];
    initialFocus?: BaseDialog.Popup.Props['initialFocus'] | 'dismiss-control';
    size: IDialogSize;
};
```

#### <a id="api-components-dialog-IDialogDescriptionProps"></a>`IDialogDescriptionProps`

*Type*

Options and native attributes for DialogDescription.

```ts
type IDialogDescriptionProps = BaseDialog.Description.Props;
```

#### <a id="api-components-dialog-IDialogFooterProps"></a>`IDialogFooterProps`

*Type*

Options and native attributes for DialogFooter.

```ts
type IDialogFooterProps = Omit<React.ComponentProps<'footer'>, 'className' | 'style'>;
```

#### <a id="api-components-dialog-IDialogHeaderProps"></a>`IDialogHeaderProps`

*Type*

Options and native attributes for DialogHeader.

```ts
type IDialogHeaderProps = Omit<React.ComponentProps<'header'>, 'className' | 'style'> & {
    actions?: React.ReactNode;
    leadingAction?: React.ReactNode;
    layout?: 'centered' | 'split';
};
```

#### <a id="api-components-dialog-IDialogProps"></a>`IDialogProps`

*Type*

Options and native attributes for Dialog.

```ts
type IDialogProps = Omit<BaseDialog.Root.Props, 'disablePointerDismissal' | 'onOpenChange'> & {
    isDismissalDisabled?: boolean;
    isOverlayCloseEnabled?: boolean;
    getNavigationSession?: IDialogNavigationSessionReader;
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-components-dialog-IDialogSize"></a>`IDialogSize`

*Type*

Compact, medium, or large dialog geometry.

```ts
type IDialogSize = NonNullable<VariantProps<typeof dialogContentVariants>['size']>;
```

#### <a id="api-components-dialog-IDialogTitleProps"></a>`IDialogTitleProps`

*Type*

Options and native attributes for DialogTitle.

```ts
type IDialogTitleProps = BaseDialog.Title.Props;
```

#### <a id="api-components-dialog-IDialogTriggerProps"></a>`IDialogTriggerProps`

*Type*

Options and native attributes for DialogTrigger.

```ts
type IDialogTriggerProps = Omit<BaseDialog.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/drawer"></a>`jg-react-ui/components/drawer`

- Functions: [`Drawer`](#api-components-drawer-Drawer), [`DrawerBody`](#api-components-drawer-DrawerBody), [`DrawerClose`](#api-components-drawer-DrawerClose), [`DrawerContent`](#api-components-drawer-DrawerContent), [`DrawerDescription`](#api-components-drawer-DrawerDescription), [`DrawerFooter`](#api-components-drawer-DrawerFooter), [`DrawerHeader`](#api-components-drawer-DrawerHeader), [`DrawerTitle`](#api-components-drawer-DrawerTitle), [`DrawerTrigger`](#api-components-drawer-DrawerTrigger)
- Types: [`IDrawerBodyProps`](#api-components-drawer-IDrawerBodyProps), [`IDrawerCloseProps`](#api-components-drawer-IDrawerCloseProps), [`IDrawerContentProps`](#api-components-drawer-IDrawerContentProps), [`IDrawerDensity`](#api-components-drawer-IDrawerDensity), [`IDrawerDescriptionProps`](#api-components-drawer-IDrawerDescriptionProps), [`IDrawerFooterProps`](#api-components-drawer-IDrawerFooterProps), [`IDrawerHeaderProps`](#api-components-drawer-IDrawerHeaderProps), [`IDrawerProps`](#api-components-drawer-IDrawerProps), [`IDrawerSide`](#api-components-drawer-IDrawerSide), [`IDrawerSize`](#api-components-drawer-IDrawerSize), [`IDrawerTitleProps`](#api-components-drawer-IDrawerTitleProps), [`IDrawerTriggerProps`](#api-components-drawer-IDrawerTriggerProps)

### <a id="api-components-drawer-functions"></a>Functions in `jg-react-ui/components/drawer`

#### <a id="api-components-drawer-Drawer"></a>`Drawer`

*Function*

Provides a modal side drawer with swipe, focus, and controlled-state behavior.

```ts
Drawer(props: IDrawerProps): ReactElement
```

**Parameters**

- `props` `IDrawerProps`: The drawer root props and required side.

**Returns** `ReactElement`: A React element that renders the drawer root.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerBody"></a>`DrawerBody`

*Function*

Renders the drawer's vertically scrollable content region.

```ts
DrawerBody(props: IDrawerBodyProps): ReactElement
```

**Parameters**

- `props` `IDrawerBodyProps`: The body element props.

**Returns** `ReactElement`: A React element that renders the drawer body.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerClose"></a>`DrawerClose`

*Function*

Renders an interactive element that closes a drawer.

```ts
DrawerClose(props: IDrawerCloseProps): ReactElement
```

**Parameters**

- `props` `IDrawerCloseProps`: The drawer close props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the drawer close control.

**Throws**

- DrawerClose asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerContent"></a>`DrawerContent`

*Function*

Renders a responsive navigation surface with a fixed header and scrolling body.

```ts
DrawerContent(props: IDrawerContentProps): ReactElement
```

**Parameters**

- `props` `IDrawerContentProps`: The drawer popup props and required size.

**Returns** `ReactElement`: A React element that renders the drawer panel.

**Throws**

- DrawerContent must be rendered inside Drawer.
- DrawerContent requires direct DrawerHeader and DrawerBody children, with an optional trailing DrawerFooter.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerDescription"></a>`DrawerDescription`

*Function*

Provides supporting context for the drawer title.

```ts
DrawerDescription(props: DrawerDescriptionProps): ReactElement
```

**Parameters**

- `props` `DrawerDescriptionProps`: The Base UI drawer description props.

**Returns** `ReactElement`: A React element that renders the drawer description.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerFooter"></a>`DrawerFooter`

*Function*

Renders an optional fixed drawer footer below the scrolling body.

```ts
DrawerFooter(props: IDrawerFooterProps): ReactElement
```

**Parameters**

- `props` `IDrawerFooterProps`: The footer element props.

**Returns** `ReactElement`: A React element that renders the drawer footer.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerHeader"></a>`DrawerHeader`

*Function*

Groups the drawer title, description, and optional contextual actions.

```ts
DrawerHeader(props: IDrawerHeaderProps): ReactElement
```

**Parameters**

- `props` `IDrawerHeaderProps`: The drawer header props.

**Returns** `ReactElement`: A React element that renders the drawer header.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerTitle"></a>`DrawerTitle`

*Function*

Announces the drawer heading.

```ts
DrawerTitle(props: DrawerTitleProps): ReactElement
```

**Parameters**

- `props` `DrawerTitleProps`: The Base UI drawer title props.

**Returns** `ReactElement`: A React element that renders the drawer title.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

#### <a id="api-components-drawer-DrawerTrigger"></a>`DrawerTrigger`

*Function*

Renders the interactive element that opens a drawer.

```ts
DrawerTrigger(props: IDrawerTriggerProps): ReactElement
```

**Parameters**

- `props` `IDrawerTriggerProps`: The drawer trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the drawer trigger.

**Throws**

- DrawerTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from 'jg-react-ui/components/drawer';
const example = h(Drawer, { side: 'right' }, h(DrawerTrigger, null, 'Navigation'),
  h(DrawerContent, { size: 'medium' },
    h(DrawerHeader, null, h(DrawerTitle, null, 'Workspace navigation'), h(DrawerDescription, null, 'Choose a workspace')),
    h(DrawerBody, null, h('a', { href: '/workspace' }, 'Workspace')),
    h(DrawerFooter, null, h(DrawerClose, null, 'Close navigation'))));
```

### <a id="api-components-drawer-types"></a>Types in `jg-react-ui/components/drawer`

#### <a id="api-components-drawer-IDrawerBodyProps"></a>`IDrawerBodyProps`

*Type*

Options and native attributes for DrawerBody.

```ts
type IDrawerBodyProps = Omit<React.ComponentProps<'div'>, 'style'>;
```

#### <a id="api-components-drawer-IDrawerCloseProps"></a>`IDrawerCloseProps`

*Type*

Options and native attributes for DrawerClose.

```ts
type IDrawerCloseProps = Omit<BaseDrawer.Close.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

#### <a id="api-components-drawer-IDrawerContentProps"></a>`IDrawerContentProps`

*Type*

Options and native attributes for DrawerContent.

```ts
type IDrawerContentProps = Omit<BaseDrawer.Popup.Props, 'className' | 'render' | 'style'> & {
    closeButtonAriaLabel?: string;
    closeButtonIcon?: React.ReactNode;
    density?: IDrawerDensity;
    forceMount?: BaseDrawer.Portal.Props['keepMounted'];
    size: IDrawerSize;
    viewportStyle?: React.CSSProperties;
};
```

#### <a id="api-components-drawer-IDrawerDensity"></a>`IDrawerDensity`

*Type*

Coordinated header and body spacing.

```ts
type IDrawerDensity = NonNullable<VariantProps<typeof drawerHeaderVariants>['density']>;
```

#### <a id="api-components-drawer-IDrawerDescriptionProps"></a>`IDrawerDescriptionProps`

*Type*

Options and native attributes for DrawerDescription.

```ts
type IDrawerDescriptionProps = BaseDrawer.Description.Props;
```

#### <a id="api-components-drawer-IDrawerFooterProps"></a>`IDrawerFooterProps`

*Type*

Options and native attributes for DrawerFooter.

```ts
type IDrawerFooterProps = Omit<React.ComponentProps<'footer'>, 'style'>;
```

#### <a id="api-components-drawer-IDrawerHeaderProps"></a>`IDrawerHeaderProps`

*Type*

Options and native attributes for DrawerHeader.

```ts
type IDrawerHeaderProps = Omit<React.ComponentProps<'header'>, 'className' | 'style'> & {
    actions?: React.ReactNode;
};
```

#### <a id="api-components-drawer-IDrawerProps"></a>`IDrawerProps`

*Type*

Options and native attributes for Drawer.

```ts
type IDrawerProps = Omit<BaseDrawer.Root.Props, 'disablePointerDismissal' | 'onOpenChange' | 'swipeDirection'> & {
    isDismissalDisabled?: boolean;
    onOpenChange?: (open: boolean) => void;
    side: IDrawerSide;
};
```

#### <a id="api-components-drawer-IDrawerSide"></a>`IDrawerSide`

*Type*

Left or right edge placement.

```ts
type IDrawerSide = NonNullable<VariantProps<typeof drawerPopupVariants>['side']>;
```

#### <a id="api-components-drawer-IDrawerSize"></a>`IDrawerSize`

*Type*

Compact or medium drawer width.

```ts
type IDrawerSize = NonNullable<VariantProps<typeof drawerPopupVariants>['size']>;
```

#### <a id="api-components-drawer-IDrawerTitleProps"></a>`IDrawerTitleProps`

*Type*

Options and native attributes for DrawerTitle.

```ts
type IDrawerTitleProps = BaseDrawer.Title.Props;
```

#### <a id="api-components-drawer-IDrawerTriggerProps"></a>`IDrawerTriggerProps`

*Type*

Options and native attributes for DrawerTrigger.

```ts
type IDrawerTriggerProps = Omit<BaseDrawer.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/alert-dialog"></a>`jg-react-ui/components/alert-dialog`

- Functions: [`AlertDialog`](#api-components-alert-dialog-AlertDialog), [`AlertDialogAction`](#api-components-alert-dialog-AlertDialogAction), [`AlertDialogContent`](#api-components-alert-dialog-AlertDialogContent), [`AlertDialogDescription`](#api-components-alert-dialog-AlertDialogDescription), [`AlertDialogFooter`](#api-components-alert-dialog-AlertDialogFooter), [`AlertDialogHeader`](#api-components-alert-dialog-AlertDialogHeader), [`AlertDialogTitle`](#api-components-alert-dialog-AlertDialogTitle), [`AlertDialogTrigger`](#api-components-alert-dialog-AlertDialogTrigger)
- Types: [`IAlertDialogActionProps`](#api-components-alert-dialog-IAlertDialogActionProps), [`IAlertDialogContentProps`](#api-components-alert-dialog-IAlertDialogContentProps), [`IAlertDialogDescriptionProps`](#api-components-alert-dialog-IAlertDialogDescriptionProps), [`IAlertDialogFooterProps`](#api-components-alert-dialog-IAlertDialogFooterProps), [`IAlertDialogHeaderProps`](#api-components-alert-dialog-IAlertDialogHeaderProps), [`IAlertDialogProps`](#api-components-alert-dialog-IAlertDialogProps), [`IAlertDialogTitleProps`](#api-components-alert-dialog-IAlertDialogTitleProps), [`IAlertDialogTriggerProps`](#api-components-alert-dialog-IAlertDialogTriggerProps)

### <a id="api-components-alert-dialog-functions"></a>Functions in `jg-react-ui/components/alert-dialog`

#### <a id="api-components-alert-dialog-AlertDialog"></a>`AlertDialog`

*Function*

Provides the alert dialog root state and accessibility context.

```ts
AlertDialog(props: IAlertDialogProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogProps`: The Base UI alert dialog root props.

**Returns** `ReactElement`: A React element that renders the alert dialog root.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogAction"></a>`AlertDialogAction`

*Function*

Renders the primary alert dialog action with shared button styling.

```ts
AlertDialogAction(props: IAlertDialogActionProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogActionProps`: The Base UI close props and button variants for the primary action.

**Returns** `ReactElement`: A React element that renders the alert dialog action button.

**Throws**

- AlertDialogAction asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogContent"></a>`AlertDialogContent`

*Function*

Renders the themed alert dialog content inside a portal.

```ts
AlertDialogContent(props: IAlertDialogContentProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogContentProps`: The Base UI alert dialog popup props.

**Returns** `ReactElement`: A React element that renders the alert dialog panel.

**Throws**

- AlertDialogContent requires direct AlertDialogHeader and AlertDialogFooter children.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogDescription"></a>`AlertDialogDescription`

*Function*

Provides supporting context for the alert dialog title.

```ts
AlertDialogDescription(props: DialogDescriptionProps): ReactElement
```

**Parameters**

- `props` `DialogDescriptionProps`: The Base UI alert dialog description props.

**Returns** `ReactElement`: A React element that renders the alert dialog description.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogFooter"></a>`AlertDialogFooter`

*Function*

Groups alert dialog actions in a responsive footer layout.

```ts
AlertDialogFooter(props: IAlertDialogFooterProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogFooterProps`: The alert dialog footer props.

**Returns** `ReactElement`: A React element that renders the alert dialog footer.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogHeader"></a>`AlertDialogHeader`

*Function*

Groups the alert dialog title, media, and description.

```ts
AlertDialogHeader(props: IAlertDialogHeaderProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogHeaderProps`: The alert dialog header props.

**Returns** `ReactElement`: A React element that renders the alert dialog header.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogTitle"></a>`AlertDialogTitle`

*Function*

Announces the primary alert dialog heading.

```ts
AlertDialogTitle(props: DialogTitleProps): ReactElement
```

**Parameters**

- `props` `DialogTitleProps`: The Base UI alert dialog title props.

**Returns** `ReactElement`: A React element that renders the alert dialog title.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

#### <a id="api-components-alert-dialog-AlertDialogTrigger"></a>`AlertDialogTrigger`

*Function*

Renders the interactive element that opens the alert dialog.

```ts
AlertDialogTrigger(props: IAlertDialogTriggerProps): ReactElement
```

**Parameters**

- `props` `IAlertDialogTriggerProps`: The Base UI alert dialog trigger props and optional slot rendering flag.

**Returns** `ReactElement`: A React element that renders the alert dialog trigger.

**Throws**

- AlertDialogTrigger asChild requires exactly one valid React element child.

**Example**

```ts
import { createElement as h } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction } from 'jg-react-ui/components/alert-dialog';
const example = h(AlertDialog, null, h(AlertDialogTrigger, null, 'Review change'),
  h(AlertDialogContent, null,
    h(AlertDialogHeader, null, h(AlertDialogTitle, null, 'Apply change?'), h(AlertDialogDescription, null, 'Review before continuing.')),
    h(AlertDialogFooter, null, h(AlertDialogAction, null, 'Apply change'))));
```

### <a id="api-components-alert-dialog-types"></a>Types in `jg-react-ui/components/alert-dialog`

#### <a id="api-components-alert-dialog-IAlertDialogActionProps"></a>`IAlertDialogActionProps`

*Type*

Options and native attributes for AlertDialogAction.

```ts
type IAlertDialogActionProps = Omit<BaseAlertDialog.Close.Props, 'nativeButton' | 'render'> & VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
};
```

#### <a id="api-components-alert-dialog-IAlertDialogContentProps"></a>`IAlertDialogContentProps`

*Type*

Options and native attributes for AlertDialogContent.

```ts
type IAlertDialogContentProps = Omit<BaseAlertDialog.Popup.Props, 'className' | 'render' | 'style'>;
```

#### <a id="api-components-alert-dialog-IAlertDialogDescriptionProps"></a>`IAlertDialogDescriptionProps`

*Type*

Options and native attributes for AlertDialogDescription.

```ts
type IAlertDialogDescriptionProps = BaseAlertDialog.Description.Props;
```

#### <a id="api-components-alert-dialog-IAlertDialogFooterProps"></a>`IAlertDialogFooterProps`

*Type*

Options and native attributes for AlertDialogFooter.

```ts
type IAlertDialogFooterProps = Omit<React.ComponentProps<'footer'>, 'className' | 'style'>;
```

#### <a id="api-components-alert-dialog-IAlertDialogHeaderProps"></a>`IAlertDialogHeaderProps`

*Type*

Options and native attributes for AlertDialogHeader.

```ts
type IAlertDialogHeaderProps = Omit<React.ComponentProps<'header'>, 'className' | 'style'>;
```

#### <a id="api-components-alert-dialog-IAlertDialogProps"></a>`IAlertDialogProps`

*Type*

Options and native attributes for AlertDialog.

```ts
type IAlertDialogProps = Omit<BaseAlertDialog.Root.Props, 'onOpenChange'> & {
    getNavigationSession?: IDialogNavigationSessionReader;
    onOpenChange?: (open: boolean) => void;
};
```

#### <a id="api-components-alert-dialog-IAlertDialogTitleProps"></a>`IAlertDialogTitleProps`

*Type*

Options and native attributes for AlertDialogTitle.

```ts
type IAlertDialogTitleProps = BaseAlertDialog.Title.Props;
```

#### <a id="api-components-alert-dialog-IAlertDialogTriggerProps"></a>`IAlertDialogTriggerProps`

*Type*

Options and native attributes for AlertDialogTrigger.

```ts
type IAlertDialogTriggerProps = Omit<BaseAlertDialog.Trigger.Props, 'nativeButton' | 'render'> & {
    asChild?: boolean;
};
```

## <a id="api-entry-components/confirmation-dialog"></a>`jg-react-ui/components/confirmation-dialog`

- Functions: [`ConfirmationDialog`](#api-components-confirmation-dialog-ConfirmationDialog)
- Constants: [`useConfirmationDialogStore`](#api-components-confirmation-dialog-useConfirmationDialogStore)
- Types: [`IConfirmationDialogCloseHandler`](#api-components-confirmation-dialog-IConfirmationDialogCloseHandler), [`IConfirmationDialogStore`](#api-components-confirmation-dialog-IConfirmationDialogStore), [`IOpenConfirmationDialogOptions`](#api-components-confirmation-dialog-IOpenConfirmationDialogOptions)

### <a id="api-components-confirmation-dialog-functions"></a>Functions in `jg-react-ui/components/confirmation-dialog`

#### <a id="api-components-confirmation-dialog-ConfirmationDialog"></a>`ConfirmationDialog`

*Function*

Renders the root-mounted confirmation dialog shell and lets the dialog primitive manage portal presence.

```ts
ConfirmationDialog(): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for the shared confirmation dialog root.

**Example**

```ts
import { createElement } from 'react';
import { ConfirmationDialog } from 'jg-react-ui/components/confirmation-dialog';
const example = createElement(ConfirmationDialog, {});
```

### <a id="api-components-confirmation-dialog-constants"></a>Constants in `jg-react-ui/components/confirmation-dialog`

#### <a id="api-components-confirmation-dialog-useConfirmationDialogStore"></a>`useConfirmationDialogStore`

*Constant*

Stores the active root-mounted confirmation dialog session and completion callback.

```ts
const useConfirmationDialogStore: UseBoundStore<StoreApi<IConfirmationDialogStore>>
```

**Example**

```ts
import { useConfirmationDialogStore } from 'jg-react-ui/components/confirmation-dialog';
useConfirmationDialogStore.getState().openConfirmationDialog({
  title: 'Archive project?',
  onConfirmationDialogClose: (isConfirmed) => { void isConfirmed; },
});
```

### <a id="api-components-confirmation-dialog-types"></a>Types in `jg-react-ui/components/confirmation-dialog`

#### <a id="api-components-confirmation-dialog-IConfirmationDialogCloseHandler"></a>`IConfirmationDialogCloseHandler`

*Type*

Options and native attributes for ConfirmationDialogCloseHandler.

```ts
type IConfirmationDialogCloseHandler = (isConfirmed: true | undefined) => unknown;
```

#### <a id="api-components-confirmation-dialog-IConfirmationDialogStore"></a>`IConfirmationDialogStore`

*Type*

Options and native attributes for ConfirmationDialogStore.

```ts
type IConfirmationDialogStore = IConfirmationDialogState & {
    openConfirmationDialog: (options: IOpenConfirmationDialogOptions) => void;
    closeConfirmationDialog: (isConfirmed: true | undefined) => void;
};
```

#### <a id="api-components-confirmation-dialog-IOpenConfirmationDialogOptions"></a>`IOpenConfirmationDialogOptions`

*Type*

Options and native attributes for OpenConfirmationDialogOptions.

```ts
type IOpenConfirmationDialogOptions = {
    title?: React.ReactNode;
    description?: React.ReactNode;
    confirmText?: React.ReactNode;
    destructive?: boolean;
    onConfirmationDialogClose: IConfirmationDialogCloseHandler;
};
```

**Members**

- `title: React.ReactNode` (property)
- `description: React.ReactNode` (property)
- `confirmText: React.ReactNode` (property)
- `destructive: boolean` (property)
- `onConfirmationDialogClose: IConfirmationDialogCloseHandler` (property)

## <a id="api-entry-components/dialog-navigation"></a>`jg-react-ui/components/dialog-navigation`

- Constants: [`DialogNavigationObserver`](#api-components-dialog-navigation-DialogNavigationObserver), [`DialogNavigationProvider`](#api-components-dialog-navigation-DialogNavigationProvider), [`useDialogNavigationDismissal`](#api-components-dialog-navigation-useDialogNavigationDismissal)
- Types: [`IDialogNavigationDismissalOptions`](#api-components-dialog-navigation-IDialogNavigationDismissalOptions), [`IDialogNavigationObserverProps`](#api-components-dialog-navigation-IDialogNavigationObserverProps), [`IDialogNavigationProviderProps`](#api-components-dialog-navigation-IDialogNavigationProviderProps), [`IDialogNavigationSessionReader`](#api-components-dialog-navigation-IDialogNavigationSessionReader)

### <a id="api-components-dialog-navigation-constants"></a>Constants in `jg-react-ui/components/dialog-navigation`

#### <a id="api-components-dialog-navigation-DialogNavigationObserver"></a>`DialogNavigationObserver`

*Constant*

Reports each committed navigation to the surrounding DialogNavigationProvider, in a layout effect, so open dialogs close before the new page's effects open its own. Render it once in the router's root route, and with `isErrorScreen` in its error element, so a route error closes the dialogs too. Outside a provider, it renders nothing and needs no router.

```ts
const DialogNavigationObserver: (props: IDialogNavigationObserverProps) => ReactElement | null
```

**Example**

```ts
import { createElement } from 'react';
import { createBrowserRouter, Outlet } from 'react-router';
import { DialogNavigationObserver } from 'jg-react-router';

export const router = createBrowserRouter([
  {
    path: '/',
    element: createElement('div', null, createElement(DialogNavigationObserver), createElement(Outlet)),
    errorElement: createElement(DialogNavigationObserver, { isErrorScreen: true }),
  },
]);
```

#### <a id="api-components-dialog-navigation-DialogNavigationProvider"></a>`DialogNavigationProvider`

*Constant*

Closes the dialogs that are open when a navigation commits, without touching history: each dialog host registers with useDialogNavigationDismissal, and a DialogNavigationObserver inside the router reports each committed location. It reads every open session before closing any, so a dialog that closes or replaces another can't make the provider skip or close the wrong one, and hosts that share a session close it once. Without a provider, the hook and the observer do nothing.

```ts
const DialogNavigationProvider: ({ children, }: IDialogNavigationProviderProps) => ReactElement
```

**Example**

```ts
import { createElement } from 'react';
import { RouterProvider, type createBrowserRouter } from 'react-router';
import { DialogNavigationProvider } from 'jg-react-router';

declare const router: ReturnType<typeof createBrowserRouter>;
declare const DialogHost: () => null;

// the router's root route renders <DialogNavigationObserver />
export const App = () =>
  createElement(
    DialogNavigationProvider,
    null,
    createElement(RouterProvider, { router }),
    createElement(DialogHost),
  );
```

#### <a id="api-components-dialog-navigation-useDialogNavigationDismissal"></a>`useDialogNavigationDismissal`

*Constant*

Closes a dialog when a navigation commits while its session is open, through the surrounding DialogNavigationProvider. It always calls the latest `getSession` and `onDismiss` the component committed, so they needn't be stable, and it closes the session only if `getSession` still returns the one that was open when the navigation committed. Outside a provider, it does nothing.

```ts
const useDialogNavigationDismissal: (options: IDialogNavigationDismissalOptions) => void
```

**Example**

```ts
import { useState } from 'react';
import { useDialogNavigationDismissal } from 'jg-react-router';

export const useConfirmDialog = () => {
  const [session, setSession] = useState<object | null>(null);
  useDialogNavigationDismissal({
    getSession: () => session,
    onDismiss: () => {
      setSession(null);
    },
  });
  return { isOpen: session !== null, open: () => setSession({}), close: () => setSession(null) };
};
```

### <a id="api-components-dialog-navigation-types"></a>Types in `jg-react-ui/components/dialog-navigation`

#### <a id="api-components-dialog-navigation-IDialogNavigationDismissalOptions"></a>`IDialogNavigationDismissalOptions`

*Type*

Registers the current session identity and synchronous navigation cancellation.

```ts
type IDialogNavigationDismissalOptions = IRouterDialogNavigationDismissalOptions;
```

#### <a id="api-components-dialog-navigation-IDialogNavigationObserverProps"></a>`IDialogNavigationObserverProps`

*Type*

Marks a committed root error screen while observing router location changes.

```ts
type IDialogNavigationObserverProps = IRouterDialogNavigationObserverProps;
```

#### <a id="api-components-dialog-navigation-IDialogNavigationProviderProps"></a>`IDialogNavigationProviderProps`

*Type*

Shares navigation dismissal between a router and its persistent dialog hosts.

```ts
type IDialogNavigationProviderProps = IRouterDialogNavigationProviderProps;
```

#### <a id="api-components-dialog-navigation-IDialogNavigationSessionReader"></a>`IDialogNavigationSessionReader`

*Type*

Reads an opaque session identity that stays stable until the dialog closes.

```ts
type IDialogNavigationSessionReader = IRouterDialogNavigationSessionReader;
```

## <a id="api-entry-components/layout"></a>`jg-react-ui/components/layout`

- Functions: [`Inline`](#api-components-layout-Inline), [`PageDescription`](#api-components-layout-PageDescription), [`PageHeader`](#api-components-layout-PageHeader), [`PageHeaderMetadata`](#api-components-layout-PageHeaderMetadata), [`PageHeaderRow`](#api-components-layout-PageHeaderRow), [`PageHeaderTitleGroup`](#api-components-layout-PageHeaderTitleGroup), [`PageShell`](#api-components-layout-PageShell), [`PageTitle`](#api-components-layout-PageTitle), [`Stack`](#api-components-layout-Stack), [`Surface`](#api-components-layout-Surface)
- Constants: [`APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME`](#api-components-layout-APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME), [`APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME`](#api-components-layout-APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME)
- Types: [`IInlineProps`](#api-components-layout-IInlineProps), [`IPageDescriptionProps`](#api-components-layout-IPageDescriptionProps), [`IPageHeaderMetadataProps`](#api-components-layout-IPageHeaderMetadataProps), [`IPageHeaderProps`](#api-components-layout-IPageHeaderProps), [`IPageHeaderRowProps`](#api-components-layout-IPageHeaderRowProps), [`IPageHeaderTitleGroupProps`](#api-components-layout-IPageHeaderTitleGroupProps), [`IPageShellProps`](#api-components-layout-IPageShellProps), [`IPageTitleProps`](#api-components-layout-IPageTitleProps), [`IStackProps`](#api-components-layout-IStackProps), [`ISurfaceProps`](#api-components-layout-ISurfaceProps)

### <a id="api-components-layout-functions"></a>Functions in `jg-react-ui/components/layout`

#### <a id="api-components-layout-Inline"></a>`Inline`

*Function*

Renders a wrapping inline layout for compact controls and metadata.

```ts
Inline(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The div element props.

**Returns** `ReactElement`: A React element that renders the inline group.

**Example**

```ts
import { createElement } from 'react';
import { Inline } from 'jg-react-ui/components/layout';
const example = createElement(Inline, { children: 'Project details' });
```

#### <a id="api-components-layout-PageDescription"></a>`PageDescription`

*Function*

Renders supporting page-level description text.

```ts
PageDescription(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The paragraph element props.

**Returns** `ReactElement`: A React element that renders the page description.

**Example**

```ts
import { createElement } from 'react';
import { PageDescription } from 'jg-react-ui/components/layout';
const example = createElement(PageDescription, { children: 'Project details' });
```

#### <a id="api-components-layout-PageHeader"></a>`PageHeader`

*Function*

Renders a page header region with shared responsive spacing.

```ts
PageHeader(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The header element props.

**Returns** `ReactElement`: A React element that renders the page header.

**Example**

```ts
import { createElement } from 'react';
import { PageHeader } from 'jg-react-ui/components/layout';
const example = createElement(PageHeader, { children: 'Project details' });
```

#### <a id="api-components-layout-PageHeaderMetadata"></a>`PageHeaderMetadata`

*Function*

Renders page-level metadata beside the title across responsive layouts.

```ts
PageHeaderMetadata(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The metadata-group element props.

**Returns** `ReactElement`: A React element that renders the responsive metadata group.

**Example**

```ts
import { createElement } from 'react';
import { PageHeaderMetadata } from 'jg-react-ui/components/layout';
const example = createElement(PageHeaderMetadata, { children: 'Project details' });
```

#### <a id="api-components-layout-PageHeaderRow"></a>`PageHeaderRow`

*Function*

Aligns the page title group with page-level actions across responsive layouts.

```ts
PageHeaderRow(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The header-row element props.

**Returns** `ReactElement`: A React element that renders the responsive header row.

**Example**

```ts
import { createElement } from 'react';
import { PageHeaderRow } from 'jg-react-ui/components/layout';
const example = createElement(PageHeaderRow, { children: 'Project details' });
```

#### <a id="api-components-layout-PageHeaderTitleGroup"></a>`PageHeaderTitleGroup`

*Function*

Groups the page title and metadata on one responsive row.

```ts
PageHeaderTitleGroup(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The title-group element props.

**Returns** `ReactElement`: A React element that renders the responsive title group.

**Example**

```ts
import { createElement } from 'react';
import { PageHeaderTitleGroup } from 'jg-react-ui/components/layout';
const example = createElement(PageHeaderTitleGroup, { children: 'Project details' });
```

#### <a id="api-components-layout-PageShell"></a>`PageShell`

*Function*

Renders the main page shell with shared app spacing and background.

```ts
PageShell(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The main element props.

**Returns** `ReactElement`: A React element that renders the page shell.

**Example**

```ts
import { createElement } from 'react';
import { PageShell } from 'jg-react-ui/components/layout';
const example = createElement(PageShell, { children: 'Project details' });
```

#### <a id="api-components-layout-PageTitle"></a>`PageTitle`

*Function*

Renders the primary page heading.

```ts
PageTitle(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The heading element props.

**Returns** `ReactElement`: A React element that renders the page title.

**Example**

```ts
import { createElement } from 'react';
import { PageTitle } from 'jg-react-ui/components/layout';
const example = createElement(PageTitle, { children: 'Project details' });
```

#### <a id="api-components-layout-Stack"></a>`Stack`

*Function*

Renders a vertical layout stack for grouped content.

```ts
Stack(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The div element props.

**Returns** `ReactElement`: A React element that renders the stack.

**Example**

```ts
import { createElement } from 'react';
import { Stack } from 'jg-react-ui/components/layout';
const example = createElement(Stack, { children: 'Project details' });
```

#### <a id="api-components-layout-Surface"></a>`Surface`

*Function*

Renders a section surface for framed app content.

```ts
Surface(props: DetailedHTMLProps): ReactElement
```

**Parameters**

- `props` `DetailedHTMLProps`: The section element props.

**Returns** `ReactElement`: A React element that renders the surface.

**Example**

```ts
import { createElement } from 'react';
import { Surface } from 'jg-react-ui/components/layout';
const example = createElement(Surface, { children: 'Project details' });
```

### <a id="api-components-layout-constants"></a>Constants in `jg-react-ui/components/layout`

#### <a id="api-components-layout-APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME"></a>`APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME`

*Constant*

Shared layout styling contract.

```ts
const APP_PAGE_CONTENT_HEAVY_LOAD_ANIMATION_CLASS_NAME: "animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-out motion-reduce:animate-none"
```

#### <a id="api-components-layout-APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME"></a>`APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME`

*Constant*

Shared layout styling contract.

```ts
const APP_PAGE_CONTENT_LIGHT_LOAD_ANIMATION_CLASS_NAME: "animate-in fade-in-0 duration-200 ease-out motion-reduce:animate-none"
```

### <a id="api-components-layout-types"></a>Types in `jg-react-ui/components/layout`

#### <a id="api-components-layout-IInlineProps"></a>`IInlineProps`

*Type*

Options and native attributes for Inline.

```ts
type IInlineProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-layout-IPageDescriptionProps"></a>`IPageDescriptionProps`

*Type*

Options and native attributes for PageDescription.

```ts
type IPageDescriptionProps = React.ComponentProps<'p'>;
```

#### <a id="api-components-layout-IPageHeaderMetadataProps"></a>`IPageHeaderMetadataProps`

*Type*

Options and native attributes for PageHeaderMetadata.

```ts
type IPageHeaderMetadataProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-layout-IPageHeaderProps"></a>`IPageHeaderProps`

*Type*

Options and native attributes for PageHeader.

```ts
type IPageHeaderProps = React.ComponentProps<'header'>;
```

#### <a id="api-components-layout-IPageHeaderRowProps"></a>`IPageHeaderRowProps`

*Type*

Options and native attributes for PageHeaderRow.

```ts
type IPageHeaderRowProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-layout-IPageHeaderTitleGroupProps"></a>`IPageHeaderTitleGroupProps`

*Type*

Options and native attributes for PageHeaderTitleGroup.

```ts
type IPageHeaderTitleGroupProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-layout-IPageShellProps"></a>`IPageShellProps`

*Type*

Options and native attributes for PageShell.

```ts
type IPageShellProps = React.ComponentProps<'main'>;
```

#### <a id="api-components-layout-IPageTitleProps"></a>`IPageTitleProps`

*Type*

Options and native attributes for PageTitle.

```ts
type IPageTitleProps = React.ComponentProps<'h1'>;
```

#### <a id="api-components-layout-IStackProps"></a>`IStackProps`

*Type*

Options and native attributes for Stack.

```ts
type IStackProps = React.ComponentProps<'div'>;
```

#### <a id="api-components-layout-ISurfaceProps"></a>`ISurfaceProps`

*Type*

Options and native attributes for Surface.

```ts
type ISurfaceProps = React.ComponentProps<'section'>;
```

## <a id="api-entry-components/global-error-boundary"></a>`jg-react-ui/components/global-error-boundary`

- Functions: [`GlobalErrorBoundary`](#api-components-global-error-boundary-GlobalErrorBoundary), [`GlobalErrorBoundaryView`](#api-components-global-error-boundary-GlobalErrorBoundaryView)
- Types: [`IGlobalErrorBoundaryClassNames`](#api-components-global-error-boundary-IGlobalErrorBoundaryClassNames), [`IGlobalErrorBoundaryProps`](#api-components-global-error-boundary-IGlobalErrorBoundaryProps), [`IGlobalErrorBoundaryRefreshHandler`](#api-components-global-error-boundary-IGlobalErrorBoundaryRefreshHandler), [`IGlobalErrorBoundaryViewProps`](#api-components-global-error-boundary-IGlobalErrorBoundaryViewProps)

### <a id="api-components-global-error-boundary-functions"></a>Functions in `jg-react-ui/components/global-error-boundary`

#### <a id="api-components-global-error-boundary-GlobalErrorBoundary"></a>`GlobalErrorBoundary`

*Function*

Renders the route-level global error boundary using React Router's thrown error.

```ts
GlobalErrorBoundary(props: IGlobalErrorBoundaryProps): ReactElement
```

**Parameters**

- `props` `IGlobalErrorBoundaryProps`: Optional copy, styling, and refresh behavior overrides.

**Returns** `ReactElement`: A React element that renders the global error recovery screen.

**Example**

```ts
import { createElement } from 'react';
import { createBrowserRouter } from 'react-router';
import { GlobalErrorBoundary } from 'jg-react-ui/components/global-error-boundary';
const router = createBrowserRouter([{ path: '/', element: 'Home', errorElement: createElement(GlobalErrorBoundary) }]);
```

#### <a id="api-components-global-error-boundary-GlobalErrorBoundaryView"></a>`GlobalErrorBoundaryView`

*Function*

Renders the full-screen global error fallback from an explicit error value.

```ts
GlobalErrorBoundaryView(props: IGlobalErrorBoundaryViewProps): ReactElement
```

**Parameters**

- `props` `IGlobalErrorBoundaryViewProps`: The thrown error, optional copy, refresh handler, and root attributes.

**Returns** `ReactElement`: A React element that renders the global error recovery screen.

**Example**

```ts
import { createElement } from 'react';
import { GlobalErrorBoundaryView } from 'jg-react-ui/components/global-error-boundary';
const example = createElement(GlobalErrorBoundaryView, { error: new Error('Private diagnostics'), onRefreshClick: async () => undefined });
```

### <a id="api-components-global-error-boundary-types"></a>Types in `jg-react-ui/components/global-error-boundary`

#### <a id="api-components-global-error-boundary-IGlobalErrorBoundaryClassNames"></a>`IGlobalErrorBoundaryClassNames`

*Type*

Global error boundary class overrides target stable presentation slots.

```ts
type IGlobalErrorBoundaryClassNames = {
    root?: string;
    content?: string;
    status?: string;
    heading?: string;
    description?: string;
    errorMessage?: string;
    errorCode?: string;
    refreshButton?: string;
    refreshError?: string;
};
```

**Members**

- `root: string` (property)
- `content: string` (property)
- `status: string` (property)
- `heading: string` (property)
- `description: string` (property)
- `errorMessage: string` (property)
- `errorCode: string` (property)
- `refreshButton: string` (property)
- `refreshError: string` (property)

#### <a id="api-components-global-error-boundary-IGlobalErrorBoundaryProps"></a>`IGlobalErrorBoundaryProps`

*Type*

Route-level error boundary props allow copy and styling overrides.

```ts
type IGlobalErrorBoundaryProps = Omit<ComponentProps<'main'>, 'children'> & {
    classNames?: IGlobalErrorBoundaryClassNames;
    description?: ReactNode;
    heading?: ReactNode;
    refreshButtonLabel?: ReactNode;
    refreshingButtonLabel?: ReactNode;
    statusLabel?: ReactNode;
    onRefreshClick?: IGlobalErrorBoundaryRefreshHandler;
};
```

#### <a id="api-components-global-error-boundary-IGlobalErrorBoundaryRefreshHandler"></a>`IGlobalErrorBoundaryRefreshHandler`

*Type*

Global error refresh handlers recover through jg-sw's updateApp or docs-specific no-op previews.

```ts
type IGlobalErrorBoundaryRefreshHandler = () => Promise<void> | void;
```

#### <a id="api-components-global-error-boundary-IGlobalErrorBoundaryViewProps"></a>`IGlobalErrorBoundaryViewProps`

*Type*

Presentational error boundary props accept the error supplied by React Router or tests.

```ts
type IGlobalErrorBoundaryViewProps = IGlobalErrorBoundaryProps & {
    error: unknown;
};
```

## <a id="api-entry-components/router-root"></a>`jg-react-ui/components/router-root`

- Functions: [`RouterRoot`](#api-components-router-root-RouterRoot)

### <a id="api-components-router-root-functions"></a>Functions in `jg-react-ui/components/router-root`

#### <a id="api-components-router-root-RouterRoot"></a>`RouterRoot`

*Function*

Renders the route outlet with fixed top progress feedback during pending navigations.

```ts
RouterRoot(): ReactElement
```

**Returns** `ReactElement`: A React element that renders global router loading feedback and the matched route.

**Example**

```ts
import { createElement } from 'react';
import { createBrowserRouter } from 'react-router';
import { RouterRoot } from 'jg-react-ui/components/router-root';
const router = createBrowserRouter([{ element: createElement(RouterRoot), children: [{ path: '/', element: 'Home' }] }]);
```

## <a id="api-entry-components/lazy-route-progress"></a>`jg-react-ui/components/lazy-route-progress`

- Functions: [`LazyRouteProgress`](#api-components-lazy-route-progress-LazyRouteProgress)

### <a id="api-components-lazy-route-progress-functions"></a>Functions in `jg-react-ui/components/lazy-route-progress`

#### <a id="api-components-lazy-route-progress-LazyRouteProgress"></a>`LazyRouteProgress`

*Function*

Renders the fixed top indicator shown while a lazy route chunk is loading.

```ts
LazyRouteProgress(): ReactElement
```

**Returns** `ReactElement`: A React element that renders an indeterminate progress bar outside document flow.

**Example**

```ts
import { createElement } from 'react';
import { LazyRouteProgress } from 'jg-react-ui/components/lazy-route-progress';
const example = createElement(LazyRouteProgress);
```

## <a id="api-entry-components/load-more-button"></a>`jg-react-ui/components/load-more-button`

- Functions: [`LoadMoreButton`](#api-components-load-more-button-LoadMoreButton)
- Constants: [`LOAD_MORE_BUTTON_DEFAULT_LABEL`](#api-components-load-more-button-LOAD_MORE_BUTTON_DEFAULT_LABEL), [`LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL`](#api-components-load-more-button-LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL)
- Types: [`ILoadMoreButtonClassNames`](#api-components-load-more-button-ILoadMoreButtonClassNames), [`ILoadMoreButtonIconPlacement`](#api-components-load-more-button-ILoadMoreButtonIconPlacement), [`ILoadMoreButtonProps`](#api-components-load-more-button-ILoadMoreButtonProps), [`ILoadMoreButtonQuery`](#api-components-load-more-button-ILoadMoreButtonQuery)

### <a id="api-components-load-more-button-functions"></a>Functions in `jg-react-ui/components/load-more-button`

#### <a id="api-components-load-more-button-LoadMoreButton"></a>`LoadMoreButton`

*Function*

Renders a reusable load-more command with customizable idle and loading presentation. Visible text supplies its accessible name unless the corresponding ARIA label is explicitly set.

```ts
LoadMoreButton(
  props: ILoadMoreButtonProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `ILoadMoreButtonProps`: The infinite query plus load-more labels, icons, and shared button props.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element that renders the load-more control, or null when no page remains.

**Example**

```ts
import { createElement } from 'react';
import { LoadMoreButton } from 'jg-react-ui/components/load-more-button';
const example = createElement(LoadMoreButton, { query: { isError: false, hasNextPage: true, fetchNextPage: async () => undefined } });
```

### <a id="api-components-load-more-button-constants"></a>Constants in `jg-react-ui/components/load-more-button`

#### <a id="api-components-load-more-button-LOAD_MORE_BUTTON_DEFAULT_LABEL"></a>`LOAD_MORE_BUTTON_DEFAULT_LABEL`

*Constant*

Default visible copy for the reusable pagination command.

```ts
const LOAD_MORE_BUTTON_DEFAULT_LABEL: "Load more"
```

#### <a id="api-components-load-more-button-LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL"></a>`LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL`

*Constant*

Default visible copy shown while the next page request is in flight.

```ts
const LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL: "Loading more"
```

### <a id="api-components-load-more-button-types"></a>Types in `jg-react-ui/components/load-more-button`

#### <a id="api-components-load-more-button-ILoadMoreButtonClassNames"></a>`ILoadMoreButtonClassNames`

*Type*

Load-more button slot class overrides target the button, icon, and visible label.

```ts
type ILoadMoreButtonClassNames = {
    button?: string;
    icon?: string;
    label?: string;
};
```

**Members**

- `button: string` (property)
- `icon: string` (property)
- `label: string` (property)

#### <a id="api-components-load-more-button-ILoadMoreButtonIconPlacement"></a>`ILoadMoreButtonIconPlacement`

*Type*

Load-more icon placement controls which side receives shared button icon spacing.

```ts
type ILoadMoreButtonIconPlacement = 'start' | 'end';
```

#### <a id="api-components-load-more-button-ILoadMoreButtonProps"></a>`ILoadMoreButtonProps`

*Type*

Load-more button props expose the query, copy, icon, slots, and shared button controls.

```ts
type ILoadMoreButtonProps = Omit<IButtonProps, 'asChild' | 'children' | 'className' | 'type'> & {
    className?: string;
    classNames?: ILoadMoreButtonClassNames;
    icon?: ReactNode;
    iconPlacement?: ILoadMoreButtonIconPlacement;
    label?: ReactNode;
    loadingAriaLabel?: string;
    loadingIcon?: ReactNode;
    loadingLabel?: ReactNode;
    query: ILoadMoreButtonQuery;
    shouldDisableWhenLoading?: boolean;
};
```

#### <a id="api-components-load-more-button-ILoadMoreButtonQuery"></a>`ILoadMoreButtonQuery`

*Type*

Load-more query shape stays data-library agnostic while matching infinite query result fields.

```ts
type ILoadMoreButtonQuery = IQueryExecutionState & {
    fetchNextPage: () => unknown;
};
```

## <a id="api-entry-components/query-boundary"></a>`jg-react-ui/components/query-boundary`

- Functions: [`QueryBoundary`](#api-components-query-boundary-QueryBoundary)
- Types: [`IQueryBoundaryErrorAlertProps`](#api-components-query-boundary-IQueryBoundaryErrorAlertProps), [`IQueryBoundaryLoaderProps`](#api-components-query-boundary-IQueryBoundaryLoaderProps), [`IQueryBoundaryLoadMoreButtonProps`](#api-components-query-boundary-IQueryBoundaryLoadMoreButtonProps), [`IQueryBoundaryProps`](#api-components-query-boundary-IQueryBoundaryProps), [`IQueryBoundaryQuery`](#api-components-query-boundary-IQueryBoundaryQuery), [`IQueryBoundaryRenderErrorAlert`](#api-components-query-boundary-IQueryBoundaryRenderErrorAlert), [`IQueryBoundaryRenderLoader`](#api-components-query-boundary-IQueryBoundaryRenderLoader), [`IQueryBoundaryRenderLoadMoreButton`](#api-components-query-boundary-IQueryBoundaryRenderLoadMoreButton)

### <a id="api-components-query-boundary-functions"></a>Functions in `jg-react-ui/components/query-boundary`

#### <a id="api-components-query-boundary-QueryBoundary"></a>`QueryBoundary`

*Function*

Composes query feedback while protecting content across initial and background resolution states.

```ts
QueryBoundary(props: IQueryBoundaryProps): ReactElement
```

**Parameters**

- `props` `IQueryBoundaryProps`: The shared query list, optional content, pass-through props, and render overrides.

**Returns** `ReactElement`: A React element containing the enabled query boundary slots.

**Example**

```ts
import { createElement } from 'react';
import { QueryBoundary } from 'jg-react-ui/components/query-boundary';
const query = { data: 'Current data', error: null, isError: false, isStale: false, isFetchedAfterMount: true, refetch: async () => undefined };
const example = createElement(QueryBoundary, { queries: [query], resolutionKey: 'records', children: 'Records' });
```

### <a id="api-components-query-boundary-types"></a>Types in `jg-react-ui/components/query-boundary`

#### <a id="api-components-query-boundary-IQueryBoundaryErrorAlertProps"></a>`IQueryBoundaryErrorAlertProps`

*Type*

Error alert props are passed through while QueryBoundary owns the shared query list.

```ts
type IQueryBoundaryErrorAlertProps = Omit<IQueryErrorAlertProps, 'presentation' | 'queries'>;
```

#### <a id="api-components-query-boundary-IQueryBoundaryLoaderProps"></a>`IQueryBoundaryLoaderProps`

*Type*

Loader props are passed through while QueryBoundary owns the shared query list.

```ts
type IQueryBoundaryLoaderProps = Omit<IQueryLoaderProps, 'isVisible' | 'queries'>;
```

#### <a id="api-components-query-boundary-IQueryBoundaryLoadMoreButtonProps"></a>`IQueryBoundaryLoadMoreButtonProps`

*Type*

Load-more props are passed through while QueryBoundary owns the first query as the source.

```ts
type IQueryBoundaryLoadMoreButtonProps = Omit<ILoadMoreButtonProps, 'query'>;
```

#### <a id="api-components-query-boundary-IQueryBoundaryProps"></a>`IQueryBoundaryProps`

*Type*

Query boundary props compose query feedback primitives around optional content.

```ts
type IQueryBoundaryProps = {
    children?: ReactNode;
    errorAlertProps?: false | IQueryBoundaryErrorAlertProps;
    loaderProps?: false | IQueryBoundaryLoaderProps;
    loadMoreButtonProps?: false | IQueryBoundaryLoadMoreButtonProps;
    queries: readonly IQueryBoundaryQuery[];
    resolutionKey: string;
    isInitialResolutionApproved?: boolean;
    renderErrorAlert?: IQueryBoundaryRenderErrorAlert;
    renderLoader?: IQueryBoundaryRenderLoader;
    renderLoadMoreButton?: IQueryBoundaryRenderLoadMoreButton;
};
```

**Members**

- `children: ReactNode` (property)
- `errorAlertProps: false | IQueryBoundaryErrorAlertProps` (property)
- `loaderProps: false | IQueryBoundaryLoaderProps` (property)
- `loadMoreButtonProps: false | IQueryBoundaryLoadMoreButtonProps` (property)
- `queries: readonly IQueryBoundaryQuery[]` (property)
- `resolutionKey: string` (property): changes identify a new logical query resolution that must earn initial visibility independently.
- `isInitialResolutionApproved: boolean` (property): trusted caller state can preserve an already-approved resolution across boundary remounts.
- `renderErrorAlert: IQueryBoundaryRenderErrorAlert` (property)
- `renderLoader: IQueryBoundaryRenderLoader` (property)
- `renderLoadMoreButton: IQueryBoundaryRenderLoadMoreButton` (property)

#### <a id="api-components-query-boundary-IQueryBoundaryQuery"></a>`IQueryBoundaryQuery`

*Type*

Query boundary accepts route query state and optional first-query pagination support.

```ts
type IQueryBoundaryQuery = IQueryErrorAlertQuery & IQueryExecutionState & {
    data: unknown;
    fetchNextPage?: () => unknown;
} & IQueryInitialResolutionState;
```

#### <a id="api-components-query-boundary-IQueryBoundaryRenderErrorAlert"></a>`IQueryBoundaryRenderErrorAlert`

*Type*

Render callbacks let consumers replace any default query feedback primitive.

```ts
type IQueryBoundaryRenderErrorAlert = (props: IQueryErrorAlertProps) => ReactNode;
```

#### <a id="api-components-query-boundary-IQueryBoundaryRenderLoader"></a>`IQueryBoundaryRenderLoader`

*Type*

Renderer for the loader slot.

```ts
type IQueryBoundaryRenderLoader = (props: IQueryLoaderProps) => ReactNode;
```

#### <a id="api-components-query-boundary-IQueryBoundaryRenderLoadMoreButton"></a>`IQueryBoundaryRenderLoadMoreButton`

*Type*

Renderer for the pagination slot.

```ts
type IQueryBoundaryRenderLoadMoreButton = (props: ILoadMoreButtonProps) => ReactNode;
```

## <a id="api-entry-components/query-error-alert"></a>`jg-react-ui/components/query-error-alert`

- Functions: [`QueryErrorAlert`](#api-components-query-error-alert-QueryErrorAlert), [`QueryErrorToastr`](#api-components-query-error-alert-QueryErrorToastr)
- Types: [`IQueryErrorAlertPresentation`](#api-components-query-error-alert-IQueryErrorAlertPresentation), [`IQueryErrorAlertProps`](#api-components-query-error-alert-IQueryErrorAlertProps), [`IQueryErrorAlertQuery`](#api-components-query-error-alert-IQueryErrorAlertQuery), [`IQueryErrorToastrProps`](#api-components-query-error-alert-IQueryErrorToastrProps)

### <a id="api-components-query-error-alert-functions"></a>Functions in `jg-react-ui/components/query-error-alert`

#### <a id="api-components-query-error-alert-QueryErrorAlert"></a>`QueryErrorAlert`

*Function*

Renders an alert for failed queries with the first error message, code, and retry action.

```ts
QueryErrorAlert(
  props: IQueryErrorAlertProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `IQueryErrorAlertProps`: The failed query results and optional copy.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for the query error alert, or null when no query has failed.

**Example**

```ts
import { createElement } from 'react';
import { QueryErrorAlert } from 'jg-react-ui/components/query-error-alert';
const query = { error: new Error('Private diagnostics'), isError: true, refetch: async () => undefined };
const example = createElement(QueryErrorAlert, { presentation: 'blocking', queries: [query] });
```

#### <a id="api-components-query-error-alert-QueryErrorToastr"></a>`QueryErrorToastr`

*Function*

Presents retained query failures through one persistent, retryable toast without affecting layout.

```ts
QueryErrorToastr(props: IQueryErrorToastrProps): null
```

**Parameters**

- `props` `IQueryErrorToastrProps`: The failed queries, stable toast identity, and optional recovery copy.

**Returns** `null`: No layout node. Feedback is published through the shared toastr host.

**Example**

```ts
import { createElement } from 'react';
import { QueryErrorToastr } from 'jg-react-ui/components/query-error-alert';
const query = { error: new Error('Private diagnostics'), isError: true, refetch: async () => undefined };
const example = createElement(QueryErrorToastr, { toastId: 'records-refresh', queries: [query] });
```

### <a id="api-components-query-error-alert-types"></a>Types in `jg-react-ui/components/query-error-alert`

#### <a id="api-components-query-error-alert-IQueryErrorAlertPresentation"></a>`IQueryErrorAlertPresentation`

*Type*

Query error presentations distinguish blocking recovery from retained-content feedback.

```ts
type IQueryErrorAlertPresentation = 'blocking' | 'retained';
```

#### <a id="api-components-query-error-alert-IQueryErrorAlertProps"></a>`IQueryErrorAlertProps`

*Type*

Query error alert props cover copy and failed query retrying.

```ts
type IQueryErrorAlertProps = Omit<ComponentProps<'div'>, 'title'> & {
    presentation: IQueryErrorAlertPresentation;
    queries: readonly IQueryErrorAlertQuery[];
    title?: string;
    fallbackMessage?: string;
    retryLabel?: string;
    retryingLabel?: string;
};
```

#### <a id="api-components-query-error-alert-IQueryErrorAlertQuery"></a>`IQueryErrorAlertQuery`

*Type*

Structural query errors accepted from application-owned query clients.

```ts
type IQueryErrorAlertQuery = {
    error: unknown;
    isError: boolean;
    isFetching?: boolean;
    isRefetching?: boolean;
    refetch: () => Promise<unknown>;
};
```

**Members**

- `error: unknown` (property)
- `isError: boolean` (property)
- `isFetching: boolean` (property)
- `isRefetching: boolean` (property)
- `refetch: () => Promise<unknown>` (property)

#### <a id="api-components-query-error-alert-IQueryErrorToastrProps"></a>`IQueryErrorToastrProps`

*Type*

Query error toastr props provide layout-free recovery for retained application content.

```ts
type IQueryErrorToastrProps = Pick<IQueryErrorAlertProps, 'queries' | 'retryLabel' | 'retryingLabel' | 'title' | 'fallbackMessage'> & {
    toastId: string | number;
};
```

## <a id="api-entry-components/query-loader"></a>`jg-react-ui/components/query-loader`

- Functions: [`QueryLoader`](#api-components-query-loader-QueryLoader)
- Types: [`IQueryLoaderClassNames`](#api-components-query-loader-IQueryLoaderClassNames), [`IQueryLoaderLayout`](#api-components-query-loader-IQueryLoaderLayout), [`IQueryLoaderProps`](#api-components-query-loader-IQueryLoaderProps), [`IQueryLoaderQuery`](#api-components-query-loader-IQueryLoaderQuery), [`IQueryLoaderSize`](#api-components-query-loader-IQueryLoaderSize)

### <a id="api-components-query-loader-functions"></a>Functions in `jg-react-ui/components/query-loader`

#### <a id="api-components-query-loader-QueryLoader"></a>`QueryLoader`

*Function*

Renders a centered spinner while any provided query is loading or visibility is requested.

```ts
QueryLoader(
  props: IQueryLoaderProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `IQueryLoaderProps`: The structural query results and optional wrapper or spinner presentation.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A React element for the loader, or null when every query has settled.

**Example**

```ts
import { createElement } from 'react';
import { QueryLoader } from 'jg-react-ui/components/query-loader';
const example = createElement(QueryLoader, { queries: [{ isError: false, isPending: true }], layout: 'dialog' });
```

### <a id="api-components-query-loader-types"></a>Types in `jg-react-ui/components/query-loader`

#### <a id="api-components-query-loader-IQueryLoaderClassNames"></a>`IQueryLoaderClassNames`

*Type*

Query loader class overrides target the wrapper and spinner separately.

```ts
type IQueryLoaderClassNames = {
    root?: string;
    spinner?: string;
};
```

**Members**

- `root: string` (property)
- `spinner: string` (property)

#### <a id="api-components-query-loader-IQueryLoaderLayout"></a>`IQueryLoaderLayout`

*Type*

Query loader layout controls which surrounding surface owns vertical centering.

```ts
type IQueryLoaderLayout = keyof typeof QUERY_LOADER_LAYOUT_CLASS_NAMES;
```

#### <a id="api-components-query-loader-IQueryLoaderProps"></a>`IQueryLoaderProps`

*Type*

Query loader props expose query state, wrapper attributes, and spinner presentation.

```ts
type IQueryLoaderProps = Omit<ComponentProps<'div'>, 'children'> & {
    queries: readonly IQueryLoaderQuery[];
    classNames?: IQueryLoaderClassNames;
    isVisible?: boolean;
    layout?: IQueryLoaderLayout;
    size?: IQueryLoaderSize;
};
```

#### <a id="api-components-query-loader-IQueryLoaderQuery"></a>`IQueryLoaderQuery`

*Type*

Query loader query state follows the shared app-query execution flags.

```ts
type IQueryLoaderQuery = IQueryExecutionState;
```

#### <a id="api-components-query-loader-IQueryLoaderSize"></a>`IQueryLoaderSize`

*Type*

Query loader size controls the spinner icon dimensions.

```ts
type IQueryLoaderSize = keyof typeof QUERY_LOADER_SPINNER_SIZE_CLASS_NAMES;
```

## <a id="api-entry-components/file-upload"></a>`jg-react-ui/components/file-upload`

- Functions: [`FileUpload`](#api-components-file-upload-FileUpload), [`FileUploadDialog`](#api-components-file-upload-FileUploadDialog), [`ImageUploadField`](#api-components-file-upload-ImageUploadField)
- Types: [`IFileUploadDialogDiscardHandler`](#api-components-file-upload-IFileUploadDialogDiscardHandler), [`IFileUploadDialogProps`](#api-components-file-upload-IFileUploadDialogProps), [`IFileUploadDialogSubmitHandler`](#api-components-file-upload-IFileUploadDialogSubmitHandler), [`IFileUploadPreviewRenderer`](#api-components-file-upload-IFileUploadPreviewRenderer), [`IFileUploadProps`](#api-components-file-upload-IFileUploadProps), [`IImageUploadFieldCurrentImage`](#api-components-file-upload-IImageUploadFieldCurrentImage), [`IImageUploadFieldProps`](#api-components-file-upload-IImageUploadFieldProps)

### <a id="api-components-file-upload-functions"></a>Functions in `jg-react-ui/components/file-upload`

#### <a id="api-components-file-upload-FileUpload"></a>`FileUpload`

*Function*

Renders a transport-neutral file picker with validation, bounded concurrency, and progress. Collapses the selection area after uploading starts and preserves subsequent user toggles.

```ts
FileUpload<TResult>(props: IFileUploadProps<TResult>): ReactElement
```

**Parameters**

- `props` `IFileUploadProps<TResult>`: The file policy, injected upload handler, lifecycle callbacks, and presentation.

**Returns** `ReactElement`: A responsive, accessible file upload queue.

**Throws**

- `INVALID_FILE_UPLOAD_POLICY`: The accepted file types must be an array.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a string.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a file extension, such as .png, or a MIME type, such as image/png.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file size must be a positive integer of bytes.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file count must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum concurrent uploads must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum total size must be a positive integer of bytes, when given.

**Example**

```ts
import { createElement } from 'react';
import { FileUpload, type IFileUploadProps } from 'jg-react-ui/components/file-upload';
declare const uploadFile: IFileUploadProps<string>['uploadFile'];
const example = createElement(FileUpload<string>, { acceptedFileTypes: ['text/plain'], maxFileBytes: 4096, uploadFile });
```

#### <a id="api-components-file-upload-FileUploadDialog"></a>`FileUploadDialog`

*Function*

Renders an immediate-upload queue and finalizes its successful results through the owning app. Explicitly reopening selection requires manual submission for the rest of the session.

```ts
FileUploadDialog<TResult>(props: IFileUploadDialogProps<TResult>): ReactElement
```

**Parameters**

- `props` `IFileUploadDialogProps<TResult>`: The dialog state, upload policy, finalization callbacks, and optional trigger.

**Returns** `ReactElement`: A responsive upload dialog with automatic and recoverable manual finalization.

**Throws**

- `INVALID_FILE_UPLOAD_POLICY`: The accepted file types must be an array.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a string.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a file extension, such as .png, or a MIME type, such as image/png.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file size must be a positive integer of bytes.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file count must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum concurrent uploads must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum total size must be a positive integer of bytes, when given.

**Example**

```ts
import { createElement } from 'react';
import { FileUploadDialog, type IFileUploadProps, type IFileUploadDialogSubmitHandler } from 'jg-react-ui/components/file-upload';
declare const uploadFile: IFileUploadProps<string>['uploadFile'];
declare const onSubmit: IFileUploadDialogSubmitHandler<string>;
const example = createElement(FileUploadDialog<string>, { fileUploadProps: { acceptedFileTypes: ['text/plain'], maxFileBytes: 4096, uploadFile }, onSubmit });
```

#### <a id="api-components-file-upload-ImageUploadField"></a>`ImageUploadField`

*Function*

Renders a controlled image asset card backed by the shared upload dialog.

```ts
ImageUploadField<TResult>(props: IImageUploadFieldProps<TResult>): ReactElement
```

**Parameters**

- `props` `IImageUploadFieldProps<TResult>`: The current image, upload policy, finalization callbacks, and presentation.

**Returns** `ReactElement`: A responsive asset card for choosing, replacing, or removing one image.

**Throws**

- `INVALID_FILE_UPLOAD_POLICY`: The accepted file types must be an array.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a string.
- `INVALID_FILE_UPLOAD_POLICY`: Each accepted file type must be a file extension, such as .png, or a MIME type, such as image/png.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file size must be a positive integer of bytes.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum file count must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum concurrent uploads must be a positive integer.
- `INVALID_FILE_UPLOAD_POLICY`: The maximum total size must be a positive integer of bytes, when given.

**Example**

```ts
import { createElement } from 'react';
import { ImageUploadField, type IImageUploadFieldProps } from 'jg-react-ui/components/file-upload';
declare const uploadFile: IImageUploadFieldProps<string>['uploadFile'];
declare const onSubmit: IImageUploadFieldProps<string>['onSubmit'];
const example = createElement(ImageUploadField<string>, { acceptedFileTypes: ['image/png'], maxFileBytes: 4096, uploadFile, onSubmit });
```

### <a id="api-components-file-upload-types"></a>Types in `jg-react-ui/components/file-upload`

#### <a id="api-components-file-upload-IFileUploadDialogDiscardHandler"></a>`IFileUploadDialogDiscardHandler`

*Type*

Receives discarded successful uploads synchronously before their local queue records disappear.

```ts
type IFileUploadDialogDiscardHandler<TResult> = (items: readonly IFileUploadSucceededItem<TResult>[]) => void;
```

#### <a id="api-components-file-upload-IFileUploadDialogProps"></a>`IFileUploadDialogProps`

*Type*

Controlled or default-open upload dialog with immediate transfers and recoverable finalization.

```ts
type IFileUploadDialogProps<TResult> = Omit<IDialogProps, 'children'> & {
    closeLabel?: string;
    fileUploadProps: IFileUploadDialogQueueProps<TResult>;
    onDiscard?: IFileUploadDialogDiscardHandler<TResult>;
    onSubmit: IFileUploadDialogSubmitHandler<TResult>;
    size?: IDialogSize;
    submitLabel?: string;
    title?: ReactNode;
    trigger?: ReactElement;
};
```

#### <a id="api-components-file-upload-IFileUploadDialogSubmitHandler"></a>`IFileUploadDialogSubmitHandler`

*Type*

Finalizes a successful queue. Applications own idempotency and reconcile uncertain provider outcomes before retrying.

```ts
type IFileUploadDialogSubmitHandler<TResult> = (items: readonly IFileUploadSucceededItem<TResult>[]) => void | Promise<void>;
```

#### <a id="api-components-file-upload-IFileUploadPreviewRenderer"></a>`IFileUploadPreviewRenderer`

*Type*

Optional preview content for one typed upload queue item.

```ts
type IFileUploadPreviewRenderer<TResult> = (item: IFileUploadItem<TResult>) => ReactNode;
```

#### <a id="api-components-file-upload-IFileUploadProps"></a>`IFileUploadProps`

*Type*

Native field attributes, file admission policy, upload adapters, callbacks, and presentation.

```ts
type IFileUploadProps<TResult> = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'> & {
    acceptedFileTypes: readonly string[];
    allowDuplicateFiles?: boolean;
    autoUpload?: boolean;
    browseLabel?: string;
    cancelAllLabel?: string;
    controlsRef?: Ref<IFileUploadControls>;
    description?: ReactNode;
    disabled?: boolean;
    dropZoneClassName?: string;
    dropZoneLabel?: string;
    existingFiles?: readonly File[];
    hideUploadAreaLabel?: string;
    inputProps?: IFileUploadInputProps;
    isLabelVisible?: boolean;
    isPolicyVisible?: boolean;
    label?: ReactNode;
    listClassName?: string;
    maxConcurrentUploads?: number;
    maxFileBytes: number;
    maxFiles?: number;
    maxTotalBytes?: number;
    onFileRejected?: IFileUploadRejectedHandler;
    onItemsChange?: IFileUploadItemsChangeHandler<TResult>;
    onUploadCanceled?: IFileUploadCanceledHandler;
    onUploadFailure?: IFileUploadFailureHandler;
    onUploadSuccess?: IFileUploadSuccessHandler<TResult>;
    onUploadAreaExpand?: () => void;
    renderPreview?: IFileUploadPreviewRenderer<TResult>;
    replaceSingleFile?: boolean;
    showUploadAreaLabel?: string;
    startUploadsLabel?: string;
    statusLabels?: Partial<Record<IFileUploadStatus, string>>;
    uploadFile: IFileUploadHandler<TResult>;
    validateFile?: IFileUploadValidator;
};
```

#### <a id="api-components-file-upload-IImageUploadFieldCurrentImage"></a>`IImageUploadFieldCurrentImage`

*Type*

Controlled image metadata. The consuming application owns the URL and its lifetime.

```ts
type IImageUploadFieldCurrentImage = {
    fileName: string;
    imageUrl: string;
};
```

**Members**

- `fileName: string` (property)
- `imageUrl: string` (property)

#### <a id="api-components-file-upload-IImageUploadFieldProps"></a>`IImageUploadFieldProps`

*Type*

Controlled image field with single-file replacement, finalization, and removal callbacks.

```ts
type IImageUploadFieldProps<TResult> = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange' | 'onSubmit'> & Pick<IFileUploadProps<TResult>, 'acceptedFileTypes' | 'maxFileBytes' | 'onFileRejected' | 'onItemsChange' | 'onUploadCanceled' | 'onUploadFailure' | 'onUploadSuccess' | 'uploadFile' | 'validateFile'> & {
    chooseLabel?: string;
    currentImage?: IImageUploadFieldCurrentImage | null;
    description?: ReactNode;
    dialogTitle?: ReactNode;
    disabled?: boolean;
    error?: ReactNode;
    isLoading?: boolean;
    label?: ReactNode;
    onCurrentImageRemove?: () => void;
    onDiscard?: IFileUploadDialogDiscardHandler<TResult>;
    onSubmit: IFileUploadDialogSubmitHandler<TResult>;
    removeLabel?: string;
    replaceLabel?: string;
    submitLabel?: string;
};
```

## <a id="api-entry-components/audio-input"></a>`jg-react-ui/components/audio-input`

- Functions: [`AudioInput`](#api-components-audio-input-AudioInput)
- Constants: [`AUDIO_INPUT_BYTES_PER_MEGABYTE`](#api-components-audio-input-AUDIO_INPUT_BYTES_PER_MEGABYTE), [`AUDIO_INPUT_DEFAULT_MAX_BYTES`](#api-components-audio-input-AUDIO_INPUT_DEFAULT_MAX_BYTES), [`AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS`](#api-components-audio-input-AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS)
- Types: [`IAudioInputCancelHandler`](#api-components-audio-input-IAudioInputCancelHandler), [`IAudioInputControls`](#api-components-audio-input-IAudioInputControls), [`IAudioInputDialogOpenChangeHandler`](#api-components-audio-input-IAudioInputDialogOpenChangeHandler), [`IAudioInputElapsedMsChangeHandler`](#api-components-audio-input-IAudioInputElapsedMsChangeHandler), [`IAudioInputLimitProgress`](#api-components-audio-input-IAudioInputLimitProgress), [`IAudioInputLimitProgressChangeHandler`](#api-components-audio-input-IAudioInputLimitProgressChangeHandler), [`IAudioInputProps`](#api-components-audio-input-IAudioInputProps), [`IAudioInputRecordedBytesChangeHandler`](#api-components-audio-input-IAudioInputRecordedBytesChangeHandler), [`IAudioInputRecording`](#api-components-audio-input-IAudioInputRecording), [`IAudioInputRecordingActiveChangeHandler`](#api-components-audio-input-IAudioInputRecordingActiveChangeHandler), [`IAudioInputRecordingCancelHandler`](#api-components-audio-input-IAudioInputRecordingCancelHandler), [`IAudioInputRecordingCompleteHandler`](#api-components-audio-input-IAudioInputRecordingCompleteHandler), [`IAudioInputRecordingDataAvailableHandler`](#api-components-audio-input-IAudioInputRecordingDataAvailableHandler), [`IAudioInputRecordingErrorHandler`](#api-components-audio-input-IAudioInputRecordingErrorHandler), [`IAudioInputRecordingStartHandler`](#api-components-audio-input-IAudioInputRecordingStartHandler), [`IAudioInputRecordingStopHandler`](#api-components-audio-input-IAudioInputRecordingStopHandler), [`IAudioInputStatus`](#api-components-audio-input-IAudioInputStatus), [`IAudioInputStatusChangeHandler`](#api-components-audio-input-IAudioInputStatusChangeHandler), [`IAudioInputTranscribeHandler`](#api-components-audio-input-IAudioInputTranscribeHandler), [`IAudioInputTranscriptionCompleteHandler`](#api-components-audio-input-IAudioInputTranscriptionCompleteHandler), [`IAudioInputTranscriptionEditorVisibleChangeHandler`](#api-components-audio-input-IAudioInputTranscriptionEditorVisibleChangeHandler), [`IAudioInputTranscriptionErrorHandler`](#api-components-audio-input-IAudioInputTranscriptionErrorHandler), [`IAudioInputTranscriptionResultHandler`](#api-components-audio-input-IAudioInputTranscriptionResultHandler), [`IAudioInputTranscriptionStatus`](#api-components-audio-input-IAudioInputTranscriptionStatus), [`IAudioInputTranscriptionStatusChangeHandler`](#api-components-audio-input-IAudioInputTranscriptionStatusChangeHandler), [`IAudioInputTranscriptionTextChangeHandler`](#api-components-audio-input-IAudioInputTranscriptionTextChangeHandler)

### <a id="api-components-audio-input-functions"></a>Functions in `jg-react-ui/components/audio-input`

#### <a id="api-components-audio-input-AudioInput"></a>`AudioInput`

*Function*

Renders a microphone trigger with a built-in audio dialog.

```ts
AudioInput(props: IAudioInputProps): ReactElement
```

**Parameters**

- `props` `IAudioInputProps`: The audio input configuration, lifecycle callbacks, and wrapper props.

**Returns** `ReactElement`: A React element that renders the audio recording control.

**Example**

```ts
import { createElement } from 'react';
import { AudioInput, type IAudioInputTranscribeHandler, type IAudioInputTranscriptionResultHandler } from 'jg-react-ui/components/audio-input';
declare const transcribe: IAudioInputTranscribeHandler;
declare const onTranscriptionResult: IAudioInputTranscriptionResultHandler;
const example = createElement(AudioInput, { transcribe, onTranscriptionResult });
```

### <a id="api-components-audio-input-constants"></a>Constants in `jg-react-ui/components/audio-input`

#### <a id="api-components-audio-input-AUDIO_INPUT_BYTES_PER_MEGABYTE"></a>`AUDIO_INPUT_BYTES_PER_MEGABYTE`

*Constant*

Bytes in one mebibyte, used by the recording limit.

```ts
const AUDIO_INPUT_BYTES_PER_MEGABYTE: number
```

#### <a id="api-components-audio-input-AUDIO_INPUT_DEFAULT_MAX_BYTES"></a>`AUDIO_INPUT_DEFAULT_MAX_BYTES`

*Constant*

Default recording cap in bytes.

```ts
const AUDIO_INPUT_DEFAULT_MAX_BYTES: number
```

#### <a id="api-components-audio-input-AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS"></a>`AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS`

*Constant*

Requested interval in milliseconds between MediaRecorder chunks.

```ts
const AUDIO_INPUT_RECORDING_CHUNK_TIMESLICE_MS: number
```

### <a id="api-components-audio-input-types"></a>Types in `jg-react-ui/components/audio-input`

#### <a id="api-components-audio-input-IAudioInputCancelHandler"></a>`IAudioInputCancelHandler`

*Type*

Receives the explicit recorder cancel action.

```ts
type IAudioInputCancelHandler = () => void;
```

#### <a id="api-components-audio-input-IAudioInputControls"></a>`IAudioInputControls`

*Type*

Imperative start, stop, restart, reset, and cancellation controls for the recording workflow.

```ts
type IAudioInputControls = {
    cancelRecording: () => void;
    restartRecording: () => void;
    resetRecording: () => void;
    startRecording: () => void;
    stopRecording: () => void;
};
```

**Members**

- `cancelRecording: () => void` (property)
- `restartRecording: () => void` (property)
- `resetRecording: () => void` (property)
- `startRecording: () => void` (property)
- `stopRecording: () => void` (property)

#### <a id="api-components-audio-input-IAudioInputDialogOpenChangeHandler"></a>`IAudioInputDialogOpenChangeHandler`

*Type*

Receives requested changes to the built-in dialog open state.

```ts
type IAudioInputDialogOpenChangeHandler = (isDialogOpen: boolean) => void;
```

#### <a id="api-components-audio-input-IAudioInputElapsedMsChangeHandler"></a>`IAudioInputElapsedMsChangeHandler`

*Type*

Receives the elapsed recording duration in milliseconds.

```ts
type IAudioInputElapsedMsChangeHandler = (elapsedMs: number) => void;
```

#### <a id="api-components-audio-input-IAudioInputLimitProgress"></a>`IAudioInputLimitProgress`

*Type*

Observed recording bytes and normalized progress against the configured byte limit.

```ts
type IAudioInputLimitProgress = {
    maxBytes: number;
    percentage: number;
    progress: number;
    recordedBytes: number;
};
```

**Members**

- `maxBytes: number` (property)
- `percentage: number` (property)
- `progress: number` (property)
- `recordedBytes: number` (property)

#### <a id="api-components-audio-input-IAudioInputLimitProgressChangeHandler"></a>`IAudioInputLimitProgressChangeHandler`

*Type*

Receives observed recording size and normalized limit progress.

```ts
type IAudioInputLimitProgressChangeHandler = (progress: IAudioInputLimitProgress) => void;
```

#### <a id="api-components-audio-input-IAudioInputProps"></a>`IAudioInputProps`

*Type*

Microphone trigger, dialog, controlled recording and transcription state, provider callbacks, copy, and presentation.

```ts
type IAudioInputProps = IAudioInputRootProps & {
    autoStart?: boolean;
    cancelLabel?: string;
    cancelResetDelayMs?: number;
    closeButtonAriaLabel?: string;
    controlsRef?: Ref<IAudioInputControls>;
    defaultIsDialogOpen?: boolean;
    defaultIsRecording?: boolean;
    defaultIsTranscriptionEditorVisible?: boolean;
    defaultTranscription?: string;
    dialogDescription?: string;
    dialogTitle?: string;
    disabled?: boolean;
    isDialogOpen?: boolean;
    isErrorVisible?: boolean;
    isRecording?: boolean;
    isTranscriptionEditorVisible?: boolean;
    maxBytes?: number;
    onDialogOpenChange?: IAudioInputDialogOpenChangeHandler;
    onElapsedMsChange?: IAudioInputElapsedMsChangeHandler;
    onCancel?: IAudioInputCancelHandler;
    onLimitProgressChange?: IAudioInputLimitProgressChangeHandler;
    onRecordedBytesChange?: IAudioInputRecordedBytesChangeHandler;
    onRecordingActiveChange?: IAudioInputRecordingActiveChangeHandler;
    onRecordingCancel?: IAudioInputRecordingCancelHandler;
    onRecordingComplete?: IAudioInputRecordingCompleteHandler;
    onRecordingDataAvailable?: IAudioInputRecordingDataAvailableHandler;
    onRecordingError?: IAudioInputRecordingErrorHandler;
    onRecordingStart?: IAudioInputRecordingStartHandler;
    onRecordingStop?: IAudioInputRecordingStopHandler;
    onStatusChange?: IAudioInputStatusChangeHandler;
    onTranscriptionComplete?: IAudioInputTranscriptionCompleteHandler;
    onTranscriptionEditorVisibleChange?: IAudioInputTranscriptionEditorVisibleChangeHandler;
    onTranscriptionError?: IAudioInputTranscriptionErrorHandler;
    onTranscriptionResult?: IAudioInputTranscriptionResultHandler;
    onTranscriptionStatusChange?: IAudioInputTranscriptionStatusChangeHandler;
    onTranscriptionTextChange?: IAudioInputTranscriptionTextChangeHandler;
    preferredMimeType?: string;
    recorderClassName?: string;
    recorderRootClassName?: string;
    restartButtonAriaLabel?: string;
    restartButtonClassName?: string;
    retryLabel?: string;
    sendTranscriptionLabel?: string;
    statusLabels?: Partial<Record<IAudioInputStatus, string>>;
    transcribe?: IAudioInputTranscribeHandler;
    transcribeAndSendLabel?: string;
    transcribeLabel?: string;
    transcribeLimitRecordingLabel?: string;
    transcription?: string;
    transcriptionActionsClassName?: string;
    transcriptionPlaceholder?: string;
    transcriptionTextareaClassName?: string;
    transcriptionTextareaLabel?: string;
    triggerAriaLabel?: string;
    triggerButtonProps?: IAudioInputTriggerButtonProps;
    triggerClassName?: string;
    triggerSize?: IButtonProps['size'];
    triggerTitle?: string;
    triggerVariant?: IButtonProps['variant'];
};
```

#### <a id="api-components-audio-input-IAudioInputRecordedBytesChangeHandler"></a>`IAudioInputRecordedBytesChangeHandler`

*Type*

Receives the total bytes observed from MediaRecorder chunks.

```ts
type IAudioInputRecordedBytesChangeHandler = (recordedBytes: number) => void;
```

#### <a id="api-components-audio-input-IAudioInputRecording"></a>`IAudioInputRecording`

*Type*

Captured Blob, duration, portable file-name metadata, MIME type, and byte size.

```ts
type IAudioInputRecording = {
    blob: Blob;
    durationMs: number;
    fileName: string;
    mimeType: string;
    size: number;
};
```

**Members**

- `blob: Blob` (property)
- `durationMs: number` (property)
- `fileName: string` (property)
- `mimeType: string` (property)
- `size: number` (property)

#### <a id="api-components-audio-input-IAudioInputRecordingActiveChangeHandler"></a>`IAudioInputRecordingActiveChangeHandler`

*Type*

Receives changes requested for the controlled recording state.

```ts
type IAudioInputRecordingActiveChangeHandler = (isRecording: boolean) => void;
```

#### <a id="api-components-audio-input-IAudioInputRecordingCancelHandler"></a>`IAudioInputRecordingCancelHandler`

*Type*

Receives cancellation of an active recording or pending microphone request.

```ts
type IAudioInputRecordingCancelHandler = () => void;
```

#### <a id="api-components-audio-input-IAudioInputRecordingCompleteHandler"></a>`IAudioInputRecordingCompleteHandler`

*Type*

Receives a retained recording after its microphone resources have been released.

```ts
type IAudioInputRecordingCompleteHandler = (recording: IAudioInputRecording) => void;
```

#### <a id="api-components-audio-input-IAudioInputRecordingDataAvailableHandler"></a>`IAudioInputRecordingDataAvailableHandler`

*Type*

Receives an admitted audio chunk and the accumulated observed bytes.

```ts
type IAudioInputRecordingDataAvailableHandler = (chunk: Blob, recordedBytes: number) => void;
```

#### <a id="api-components-audio-input-IAudioInputRecordingErrorHandler"></a>`IAudioInputRecordingErrorHandler`

*Type*

Receives recording diagnostics. Coded causes retain their code; visible feedback is resolved separately.

```ts
type IAudioInputRecordingErrorHandler = (error: Error) => void;
```

#### <a id="api-components-audio-input-IAudioInputRecordingStartHandler"></a>`IAudioInputRecordingStartHandler`

*Type*

Receives a recording-start request before microphone permission is requested.

```ts
type IAudioInputRecordingStartHandler = () => void;
```

#### <a id="api-components-audio-input-IAudioInputRecordingStopHandler"></a>`IAudioInputRecordingStopHandler`

*Type*

Receives a clean recorder stop before its completed recording is emitted.

```ts
type IAudioInputRecordingStopHandler = () => void;
```

#### <a id="api-components-audio-input-IAudioInputStatus"></a>`IAudioInputStatus`

*Type*

Recorder lifecycle states exposed through callbacks and the rendered recording surface.

```ts
type IAudioInputStatus = 'idle' | 'requesting-permission' | 'recording' | 'complete' | 'error';
```

#### <a id="api-components-audio-input-IAudioInputStatusChangeHandler"></a>`IAudioInputStatusChangeHandler`

*Type*

Receives each committed recorder status transition without render-time callback effects.

```ts
type IAudioInputStatusChangeHandler = (status: IAudioInputStatus) => void;
```

#### <a id="api-components-audio-input-IAudioInputTranscribeHandler"></a>`IAudioInputTranscribeHandler`

*Type*

Transcribes a retained recording. The caller owns requests and deadlines; obsolete sessions ignore late results.

```ts
type IAudioInputTranscribeHandler = (recording: IAudioInputRecording) => Promise<string>;
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionCompleteHandler"></a>`IAudioInputTranscriptionCompleteHandler`

*Type*

Receives accepted transcription text together with its retained recording.

```ts
type IAudioInputTranscriptionCompleteHandler = (transcription: string, recording: IAudioInputRecording) => void;
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionEditorVisibleChangeHandler"></a>`IAudioInputTranscriptionEditorVisibleChangeHandler`

*Type*

Receives requested visibility changes for the review editor.

```ts
type IAudioInputTranscriptionEditorVisibleChangeHandler = (isTranscriptionEditorVisible: boolean) => void;
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionErrorHandler"></a>`IAudioInputTranscriptionErrorHandler`

*Type*

Receives transcription or result-delivery diagnostics separately from display-safe feedback.

```ts
type IAudioInputTranscriptionErrorHandler = (error: Error) => void;
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionResultHandler"></a>`IAudioInputTranscriptionResultHandler`

*Type*

Accepts authored text and its recording. Result retries reuse retained text without repeating transcription.

```ts
type IAudioInputTranscriptionResultHandler = (transcription: string, recording: IAudioInputRecording) => void | Promise<void>;
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionStatus"></a>`IAudioInputTranscriptionStatus`

*Type*

Transcription and result-delivery states, including editable and recoverable outcomes.

```ts
type IAudioInputTranscriptionStatus = 'idle' | 'transcribing' | 'ready' | 'sending' | 'sent' | 'error';
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionStatusChangeHandler"></a>`IAudioInputTranscriptionStatusChangeHandler`

*Type*

Receives transcription and delivery lifecycle changes.

```ts
type IAudioInputTranscriptionStatusChangeHandler = (status: IAudioInputTranscriptionStatus) => void;
```

#### <a id="api-components-audio-input-IAudioInputTranscriptionTextChangeHandler"></a>`IAudioInputTranscriptionTextChangeHandler`

*Type*

Receives requested changes to the controlled transcription text.

```ts
type IAudioInputTranscriptionTextChangeHandler = (transcription: string) => void;
```

## <a id="api-entry-components/markdown"></a>`jg-react-ui/components/markdown`

- Functions: [`getMarkdownImageDisplayWidth`](#api-components-markdown-getMarkdownImageDisplayWidth), [`Markdown`](#api-components-markdown-Markdown)
- Types: [`IMarkdownProps`](#api-components-markdown-IMarkdownProps)

### <a id="api-components-markdown-functions"></a>Functions in `jg-react-ui/components/markdown`

#### <a id="api-components-markdown-getMarkdownImageDisplayWidth"></a>`getMarkdownImageDisplayWidth`

*Function*

Reads a reserved width=<pixels> image title without interpreting ordinary title text.

```ts
getMarkdownImageDisplayWidth(title: string | undefined): number | undefined
```

**Parameters**

- `title` `string | undefined`: The optional title emitted by the Markdown image parser.

**Returns** `number | undefined`: A positive integer display width, or undefined for ordinary or invalid titles.

**Example**

```ts
import { getMarkdownImageDisplayWidth } from 'jg-react-ui/components/markdown';
getMarkdownImageDisplayWidth('width=560'); // => 560
```

#### <a id="api-components-markdown-Markdown"></a>`Markdown`

*Function*

Renders trusted markdown text through the shared typography system.

```ts
Markdown(props: IMarkdownProps): ReactElement
```

**Parameters**

- `props` `IMarkdownProps`: The markdown content and optional renderer overrides.

**Returns** `ReactElement`: A React element that renders the markdown document.

**Example**

```ts
import { createElement } from 'react';
import { Markdown } from 'jg-react-ui/components/markdown';
const example = createElement(Markdown, { children: '## Deployment\n\nReady to review.' });
```

### <a id="api-components-markdown-types"></a>Types in `jg-react-ui/components/markdown`

#### <a id="api-components-markdown-IMarkdownProps"></a>`IMarkdownProps`

*Type*

Markdown props keep the wrapper controlled while allowing component overrides.

```ts
type IMarkdownProps = Omit<Options, 'children' | 'components' | 'rehypePlugins' | 'remarkPlugins'> & {
    children: string;
    className?: string | undefined;
    components?: Components | undefined;
    prefersWrappedCode?: boolean | undefined;
    rehypePlugins?: NonNullable<Options['rehypePlugins']> | undefined;
    remarkPlugins?: NonNullable<Options['remarkPlugins']> | undefined;
    shouldOpenLinksInNewTab?: boolean | undefined;
};
```

## <a id="api-entry-components/code-preferences-controls"></a>`jg-react-ui/components/code-preferences-controls`

- Functions: [`CodePreferencesControls`](#api-components-code-preferences-controls-CodePreferencesControls)
- Types: [`ICodePreferencesControlsProps`](#api-components-code-preferences-controls-ICodePreferencesControlsProps)

### <a id="api-components-code-preferences-controls-functions"></a>Functions in `jg-react-ui/components/code-preferences-controls`

#### <a id="api-components-code-preferences-controls-CodePreferencesControls"></a>`CodePreferencesControls`

*Function*

Renders compact menus that optimistically update shared code-view preferences.

```ts
CodePreferencesControls(
  props: ICodePreferencesControlsProps,
): ReactElement<unknown, string | JSXElementConstructor<any>> | null
```

**Parameters**

- `props` `ICodePreferencesControlsProps`: The visible preference menus, presentation, and current values.

**Returns** `ReactElement<unknown, string | JSXElementConstructor<any>> | null`: A control group containing the enabled preference menus.

**Example**

```ts
import { createElement } from 'react';
import { CodePreferencesControls } from 'jg-react-ui/components/code-preferences-controls';
const example = createElement(CodePreferencesControls, { prefersWrappedCode: false, canChangePrefersWrappedCode: true, isInline: true });
```

### <a id="api-components-code-preferences-controls-types"></a>Types in `jg-react-ui/components/code-preferences-controls`

#### <a id="api-components-code-preferences-controls-ICodePreferencesControlsProps"></a>`ICodePreferencesControlsProps`

*Type*

Code preference controls render only the preference groups enabled by their parent surface.

```ts
type ICodePreferencesControlsProps = {
    canChangeCodeDiffView?: boolean | undefined;
    canChangePrefersWrappedCode?: boolean | undefined;
    className?: string | undefined;
    codeDiffView?: ICodeDiffView | undefined;
    isInline?: boolean | undefined;
    prefersWrappedCode: boolean;
};
```

**Members**

- `canChangeCodeDiffView: boolean` (property)
- `canChangePrefersWrappedCode: boolean` (property)
- `className: string` (property)
- `codeDiffView: ICodeDiffView` (property)
- `isInline: boolean` (property)
- `prefersWrappedCode: boolean` (property)

## <a id="api-entry-components/youtube-video"></a>`jg-react-ui/components/youtube-video`

- Functions: [`parseYouTubeVideoUrl`](#api-components-youtube-video-parseYouTubeVideoUrl), [`YouTubeVideo`](#api-components-youtube-video-YouTubeVideo)
- Types: [`IYouTubeVideoDescriptor`](#api-components-youtube-video-IYouTubeVideoDescriptor), [`IYouTubeVideoId`](#api-components-youtube-video-IYouTubeVideoId), [`IYouTubeVideoProps`](#api-components-youtube-video-IYouTubeVideoProps)

### <a id="api-components-youtube-video-functions"></a>Functions in `jg-react-ui/components/youtube-video`

#### <a id="api-components-youtube-video-parseYouTubeVideoUrl"></a>`parseYouTubeVideoUrl`

*Function*

Parses an authored URL into the retained single-video descriptor.

```ts
parseYouTubeVideoUrl(
  sourceUrl: unknown,
  title?: unknown,
): IYouTubeVideoDescriptor | null
```

**Parameters**

- `sourceUrl` `unknown`: The URL candidate.
- `title?` `unknown`: An optional plain-text label.

**Returns** `IYouTubeVideoDescriptor | null`: A validated descriptor, or null for unsupported input.

**Example**

```ts
import { parseYouTubeVideoUrl } from 'jg-react-ui/components/youtube-video';
const video = parseYouTubeVideoUrl('https://youtu.be/M7lc1UVf-VE', 'Walkthrough');
```

#### <a id="api-components-youtube-video-YouTubeVideo"></a>`YouTubeVideo`

*Function*

Renders a validated YouTube video through the privacy-enhanced player origin.

```ts
YouTubeVideo(props: IYouTubeVideoProps): ReactElement
```

**Parameters**

- `props` `IYouTubeVideoProps`: The validated video identifier, title, optional autoplay request and wrapper classes.

**Returns** `ReactElement`: A responsive, lazy-loaded YouTube iframe.

**Throws**

- `INVALID_YOUTUBE_VIDEO_ID`: The YouTube video id must be 11 letters, digits, '-', or '_'.

**Example**

```ts
import { createElement } from 'react';
import { parseYouTubeVideoUrl, YouTubeVideo } from 'jg-react-ui/components/youtube-video';
const video = parseYouTubeVideoUrl('https://youtu.be/M7lc1UVf-VE', 'Walkthrough');
const example = video ? createElement(YouTubeVideo, { videoId: video.videoId, title: video.title }) : null;
```

### <a id="api-components-youtube-video-types"></a>Types in `jg-react-ui/components/youtube-video`

#### <a id="api-components-youtube-video-IYouTubeVideoDescriptor"></a>`IYouTubeVideoDescriptor`

*Type*

Canonical video URLs and accessible title.

```ts
type IYouTubeVideoDescriptor = {
    videoId: IYouTubeVideoId;
    watchUrl: string;
    embedUrl: string;
    title: string;
};
```

**Members**

- `videoId: IYouTubeVideoId` (property)
- `watchUrl: string` (property)
- `embedUrl: string` (property)
- `title: string` (property)

#### <a id="api-components-youtube-video-IYouTubeVideoId"></a>`IYouTubeVideoId`

*Type*

Validated identifier accepted by the fixed-origin player.

```ts
type IYouTubeVideoId = string & {
    [YOUTUBE_VIDEO_ID_TYPE]: true;
};
```

#### <a id="api-components-youtube-video-IYouTubeVideoProps"></a>`IYouTubeVideoProps`

*Type*

Props for the fixed-origin responsive YouTube player.

```ts
type IYouTubeVideoProps = {
    videoId: IYouTubeVideoId;
    title: string;
    className?: string | undefined;
    autoPlay?: boolean | undefined;
};
```

**Members**

- `videoId: IYouTubeVideoId` (property)
- `title: string` (property)
- `className: string` (property)
- `autoPlay: boolean` (property): autoplay is opt-in and remains subject to the browser's playback policy.

## <a id="api-entry-components/markdown-editor"></a>`jg-react-ui/components/markdown-editor`

- Functions: [`ChatMarkdownEditor`](#api-components-markdown-editor-ChatMarkdownEditor), [`CompactMarkdownEditor`](#api-components-markdown-editor-CompactMarkdownEditor), [`MarkdownEditor`](#api-components-markdown-editor-MarkdownEditor), [`WideMarkdownEditor`](#api-components-markdown-editor-WideMarkdownEditor)
- Constants: [`MARKDOWN_EDITOR_ALL_TOOLS`](#api-components-markdown-editor-MARKDOWN_EDITOR_ALL_TOOLS), [`MARKDOWN_EDITOR_AUTHORING_TOOLS`](#api-components-markdown-editor-MARKDOWN_EDITOR_AUTHORING_TOOLS), [`MARKDOWN_EDITOR_LAYOUTS`](#api-components-markdown-editor-MARKDOWN_EDITOR_LAYOUTS), [`MARKDOWN_EDITOR_PROSE_TOOLS`](#api-components-markdown-editor-MARKDOWN_EDITOR_PROSE_TOOLS), [`MARKDOWN_EDITOR_TOOLS`](#api-components-markdown-editor-MARKDOWN_EDITOR_TOOLS)
- Types: [`IChatMarkdownBlockFormat`](#api-components-markdown-editor-IChatMarkdownBlockFormat), [`IChatMarkdownEditorControls`](#api-components-markdown-editor-IChatMarkdownEditorControls), [`IChatMarkdownEditorProps`](#api-components-markdown-editor-IChatMarkdownEditorProps), [`IMarkdownEditorLayout`](#api-components-markdown-editor-IMarkdownEditorLayout), [`IMarkdownEditorProps`](#api-components-markdown-editor-IMarkdownEditorProps), [`IMarkdownEditorTool`](#api-components-markdown-editor-IMarkdownEditorTool), [`IMarkdownEditorVariantProps`](#api-components-markdown-editor-IMarkdownEditorVariantProps)

### <a id="api-components-markdown-editor-functions"></a>Functions in `jg-react-ui/components/markdown-editor`

#### <a id="api-components-markdown-editor-ChatMarkdownEditor"></a>`ChatMarkdownEditor`

*Function*

Renders the fixed-policy rich Markdown editor used by chat composer surfaces.

```ts
ChatMarkdownEditor(props: IChatMarkdownEditorProps): ReactElement
```

**Parameters**

- `props` `IChatMarkdownEditorProps`: The controlled value, serialized length limit, controls, and accessibility props.

**Returns** `ReactElement`: A compact, growing rich-text editor with block and selection formatting controls.

**Throws**

- ChatMarkdownEditor maxLength must be a positive safe integer.
- ChatMarkdownEditor maxEditorHeight must be a positive finite number.

**Example**

```ts
import { createElement } from 'react';
import { ChatMarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(ChatMarkdownEditor, { value: '', maxLength: 2048, onChange: () => {} });
```

#### <a id="api-components-markdown-editor-CompactMarkdownEditor"></a>`CompactMarkdownEditor`

*Function*

Renders the compact markdown editor with controls scoped to narrow containers.

```ts
CompactMarkdownEditor(props: IMarkdownEditorVariantProps): ReactElement
```

**Parameters**

- `props` `IMarkdownEditorVariantProps`: The controlled editor props.

**Returns** `ReactElement`: A React element that renders the compact editor.

**Example**

```ts
import { createElement } from 'react';
import { CompactMarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(CompactMarkdownEditor, { value: '## Notes', onChange: () => {} });
```

#### <a id="api-components-markdown-editor-MarkdownEditor"></a>`MarkdownEditor`

*Function*

Selects the compact or wide markdown editor from its available container width.

```ts
MarkdownEditor(props: IMarkdownEditorProps): ReactElement
```

**Parameters**

- `props` `IMarkdownEditorProps`: The controlled editor props and optional responsive layout override.

**Returns** `ReactElement`: A React element that renders the selected editor implementation.

**Example**

```ts
import { createElement } from 'react';
import { MarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(MarkdownEditor, { value: '## Notes', onChange: () => {} });
```

#### <a id="api-components-markdown-editor-WideMarkdownEditor"></a>`WideMarkdownEditor`

*Function*

Renders the established wide markdown editor with its existing Milkdown configuration.

```ts
WideMarkdownEditor(props: IMarkdownEditorVariantProps): ReactElement
```

**Parameters**

- `props` `IMarkdownEditorVariantProps`: The controlled editor props.

**Returns** `ReactElement`: A React element that renders the wide editor.

**Example**

```ts
import { createElement } from 'react';
import { WideMarkdownEditor } from 'jg-react-ui/components/markdown-editor';
const editor = createElement(WideMarkdownEditor, { value: '## Notes', onChange: () => {} });
```

### <a id="api-components-markdown-editor-constants"></a>Constants in `jg-react-ui/components/markdown-editor`

#### <a id="api-components-markdown-editor-MARKDOWN_EDITOR_ALL_TOOLS"></a>`MARKDOWN_EDITOR_ALL_TOOLS`

*Constant*

Complete default tool policy used when supportedTools is omitted.

```ts
const MARKDOWN_EDITOR_ALL_TOOLS: readonly ["text", "heading", "bold", "italic", "strikethrough", "inline-code", "link", "variable", "quote", "divider", "bullet-list", "ordered-list", "task-list", "code-block", "table", "table-alignment", "image", "youtube", "math"]
```

#### <a id="api-components-markdown-editor-MARKDOWN_EDITOR_AUTHORING_TOOLS"></a>`MARKDOWN_EDITOR_AUTHORING_TOOLS`

*Constant*

Constrained document authoring tools, including variables, code and tables.

```ts
const MARKDOWN_EDITOR_AUTHORING_TOOLS: readonly ["text", "heading", "bold", "italic", "inline-code", "link", "variable", "quote", "bullet-list", "ordered-list", "code-block", "table"]
```

#### <a id="api-components-markdown-editor-MARKDOWN_EDITOR_LAYOUTS"></a>`MARKDOWN_EDITOR_LAYOUTS`

*Constant*

Container-responsive and explicit document layouts.

```ts
const MARKDOWN_EDITOR_LAYOUTS: { Auto: "auto"; Compact: "compact"; Wide: "wide" }
```

#### <a id="api-components-markdown-editor-MARKDOWN_EDITOR_PROSE_TOOLS"></a>`MARKDOWN_EDITOR_PROSE_TOOLS`

*Constant*

Prose authoring tools without template variables or code blocks, retaining inline code.

```ts
const MARKDOWN_EDITOR_PROSE_TOOLS: ("link" | "table" | "text" | "bold" | "heading" | "italic" | "bullet-list" | "inline-code" | "ordered-list" | "quote")[]
```

#### <a id="api-components-markdown-editor-MARKDOWN_EDITOR_TOOLS"></a>`MARKDOWN_EDITOR_TOOLS`

*Constant*

Authoring tool identifiers for document editors.

```ts
const MARKDOWN_EDITOR_TOOLS: { Bold: "bold"; BulletList: "bullet-list"; CodeBlock: "code-block"; Divider: "divider"; Heading: "heading"; Image: "image"; InlineCode: "inline-code"; Italic: "italic"; Link: "link"; Math: "math"; OrderedList: "ordered-list"; Quote: "quote"; Strikethrough: "strikethrough"; Table: "table"; TableAlignment: "table-alignment"; TaskList: "task-list"; Text: "text"; Variable: "variable"; YouTube: "youtube" }
```

### <a id="api-components-markdown-editor-types"></a>Types in `jg-react-ui/components/markdown-editor`

#### <a id="api-components-markdown-editor-IChatMarkdownBlockFormat"></a>`IChatMarkdownBlockFormat`

*Type*

Block formats supported by the fixed chat authoring policy.

```ts
type IChatMarkdownBlockFormat = 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'bullet-list' | 'ordered-list';
```

#### <a id="api-components-markdown-editor-IChatMarkdownEditorControls"></a>`IChatMarkdownEditorControls`

*Type*

Synchronous chat operations that retain the controlled draft during initialization.

```ts
type IChatMarkdownEditorControls = {
    appendLiteralText: (text: string) => boolean;
    focus: () => void;
    getMarkdown: () => string;
};
```

**Members**

- `appendLiteralText: (text: string) => boolean` (property): Appends escaped text; returns false before readiness or when the result exceeds maxLength.
- `focus: () => void` (property): Focuses the editor once initialization has completed.
- `getMarkdown: () => string` (property): Reads live serialized Markdown, or the retained controlled draft during initialization.

#### <a id="api-components-markdown-editor-IChatMarkdownEditorProps"></a>`IChatMarkdownEditorProps`

*Type*

Controlled, length-bounded chat props with optional external formatting placement.

```ts
type IChatMarkdownEditorProps = Pick<React.ComponentProps<'div'>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-required' | 'className'> & {
    controlsRef?: React.Ref<IChatMarkdownEditorControls>;
    disabled?: boolean;
    formattingContainer?: HTMLElement | null;
    isShiftEnterSubmit?: boolean;
    maxEditorHeight?: number;
    maxLength: number;
    onChange: (value: string) => void;
    onSubmitRequest?: (markdown: string) => void;
    placeholder?: string;
    value: string;
};
```

#### <a id="api-components-markdown-editor-IMarkdownEditorLayout"></a>`IMarkdownEditorLayout`

*Type*

An automatic container-responsive or explicit editor layout.

```ts
type IMarkdownEditorLayout = (typeof MARKDOWN_EDITOR_LAYOUTS)[keyof typeof MARKDOWN_EDITOR_LAYOUTS];
```

#### <a id="api-components-markdown-editor-IMarkdownEditorProps"></a>`IMarkdownEditorProps`

*Type*

Controlled Markdown document props and authoring restrictions.

```ts
type IMarkdownEditorProps = Pick<React.ComponentProps<'div'>, 'aria-describedby' | 'aria-invalid' | 'aria-label' | 'aria-required' | 'className'> & {
    disabled?: boolean;
    layout?: IMarkdownEditorLayout;
    onChange: (value: string) => void;
    placeholder?: string;
    supportedTools?: ReadonlyArray<IMarkdownEditorTool>;
    value: string;
};
```

#### <a id="api-components-markdown-editor-IMarkdownEditorTool"></a>`IMarkdownEditorTool`

*Type*

A tool accepted by the document editor authoring policy.

```ts
type IMarkdownEditorTool = (typeof MARKDOWN_EDITOR_ALL_TOOLS)[number];
```

#### <a id="api-components-markdown-editor-IMarkdownEditorVariantProps"></a>`IMarkdownEditorVariantProps`

*Type*

Controlled document props with layout selected by the explicit component.

```ts
type IMarkdownEditorVariantProps = Omit<IMarkdownEditorProps, 'layout'>;
```

## <a id="api-entry-components/code-diff"></a>`jg-react-ui/components/code-diff`

- Functions: [`CodeDiff`](#api-components-code-diff-CodeDiff)
- Constants: [`CODE_DIFF_LANGUAGES`](#api-components-code-diff-CODE_DIFF_LANGUAGES)
- Types: [`ICodeDiffLanguage`](#api-components-code-diff-ICodeDiffLanguage), [`ICodeDiffProps`](#api-components-code-diff-ICodeDiffProps)

### <a id="api-components-code-diff-functions"></a>Functions in `jg-react-ui/components/code-diff`

#### <a id="api-components-code-diff-CodeDiff"></a>`CodeDiff`

*Function*

Renders a theme-aware code diff with responsive split view and optional syntax highlighting.

```ts
CodeDiff(props: ICodeDiffProps): ReactElement
```

**Parameters**

- `props` `ICodeDiffProps`: The code diff content and optional viewer controls.

**Returns** `ReactElement`: A React element that renders the diff between two strings.

**Throws**

- `THEME_PROVIDER_MISSING`: useTheme must be used within a ThemeProvider

**Example**

```ts
import { createElement } from 'react';
import { CodeDiff } from 'jg-react-ui/components/code-diff';
const example = createElement(CodeDiff, { oldValue: 'const count = 1;', newValue: 'const count = 2;' });
```

### <a id="api-components-code-diff-constants"></a>Constants in `jg-react-ui/components/code-diff`

#### <a id="api-components-code-diff-CODE_DIFF_LANGUAGES"></a>`CODE_DIFF_LANGUAGES`

*Constant*

Registered diff languages; text keeps literal content.

```ts
const CODE_DIFF_LANGUAGES: { bash: "bash"; json: "json"; jsx: "jsx"; markdown: "markdown"; python: "python"; text: "text"; tsx: "tsx"; typescript: "typescript" }
```

### <a id="api-components-code-diff-types"></a>Types in `jg-react-ui/components/code-diff`

#### <a id="api-components-code-diff-ICodeDiffLanguage"></a>`ICodeDiffLanguage`

*Type*

Supported languages registered by the diff highlighter.

```ts
type ICodeDiffLanguage = keyof typeof CODE_DIFF_LANGUAGES;
```

#### <a id="api-components-code-diff-ICodeDiffProps"></a>`ICodeDiffProps`

*Type*

Viewer controls with package-owned syntax, theme, and responsive layout.

```ts
type ICodeDiffProps = Omit<ReactDiffViewerProps, 'compareMethod' | 'oldValue' | 'newValue' | 'renderContent' | 'useDarkTheme' | 'splitView'> & Pick<ICodeBlockProps, 'filePath' | 'fileIcon' | 'fileStatus' | 'headerLabel' | 'headerMeta'> & {
    className?: string;
    tabIndex?: number;
    codeDiffView?: ICodeDiffView;
    language?: ICodeDiffLanguage;
    newValue: string;
    oldValue: string;
    responsiveBreakpoint?: IBreakpoint;
};
```