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

Every export of `jg-personal-react-ui@0.3.3`, 834 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-personal-react-ui`

- Functions: [`JgMark`](#api-JgMark)
- Constants: [`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), [`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), [`Article`](#api-Article), [`ArticleHeader`](#api-ArticleHeader), [`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), [`AudioInput`](#api-AudioInput), [`Badge`](#api-Badge), [`badgeVariants`](#api-badgeVariants), [`Blockquote`](#api-Blockquote), [`Button`](#api-Button), [`buttonVariants`](#api-buttonVariants), [`ChatMarkdownEditor`](#api-ChatMarkdownEditor), [`Checkbox`](#api-Checkbox), [`CODE_DIFF_LANGUAGES`](#api-CODE_DIFF_LANGUAGES), [`CodeBlock`](#api-CodeBlock), [`CodeDiff`](#api-CodeDiff), [`CodeDiffViewSchema`](#api-CodeDiffViewSchema), [`CodeFileHeader`](#api-CodeFileHeader), [`codeFileStatusVariants`](#api-codeFileStatusVariants), [`CodePreferencesControls`](#api-CodePreferencesControls), [`CompactMarkdownEditor`](#api-CompactMarkdownEditor), [`ConfirmationDialog`](#api-ConfirmationDialog), [`COPY_BUTTON_FEEDBACK_DURATION_MS`](#api-COPY_BUTTON_FEEDBACK_DURATION_MS), [`CopyButton`](#api-CopyButton), [`DEFAULT_FORM_PROPS`](#api-DEFAULT_FORM_PROPS), [`DEFAULT_UI_PREFERENCES`](#api-DEFAULT_UI_PREFERENCES), [`Dialog`](#api-Dialog), [`DialogBody`](#api-DialogBody), [`DialogCancel`](#api-DialogCancel), [`DialogClose`](#api-DialogClose), [`DialogContent`](#api-DialogContent), [`DialogDescription`](#api-DialogDescription), [`DialogFooter`](#api-DialogFooter), [`DialogHeader`](#api-DialogHeader), [`DialogNavigationObserver`](#api-DialogNavigationObserver), [`DialogNavigationProvider`](#api-DialogNavigationProvider), [`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), [`ERRORS`](#api-ERRORS), [`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), [`headingVariants`](#api-headingVariants), [`IconTile`](#api-IconTile), [`iconTileVariants`](#api-iconTileVariants), [`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), [`LOAD_MORE_BUTTON_DEFAULT_LABEL`](#api-LOAD_MORE_BUTTON_DEFAULT_LABEL), [`LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL`](#api-LOAD_MORE_BUTTON_DEFAULT_LOADING_LABEL), [`LoadMoreButton`](#api-LoadMoreButton), [`Markdown`](#api-Markdown), [`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), [`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), [`ResolvedAppThemeSchema`](#api-ResolvedAppThemeSchema), [`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), [`UI_PREFERENCES_STORAGE_KEY`](#api-UI_PREFERENCES_STORAGE_KEY), [`UI_PREFERENCES_STORE_ID`](#api-UI_PREFERENCES_STORE_ID), [`UiPreferencesProvider`](#api-UiPreferencesProvider), [`UiPreferencesSchema`](#api-UiPreferencesSchema), [`UnorderedList`](#api-UnorderedList), [`useConfirmationDialogStore`](#api-useConfirmationDialogStore), [`useDialogNavigationDismissal`](#api-useDialogNavigationDismissal), [`useErrorFeedbackResolver`](#api-useErrorFeedbackResolver), [`useTheme`](#api-useTheme), [`useUiPreferences`](#api-useUiPreferences), [`useUiPreferencesCapabilities`](#api-useUiPreferencesCapabilities), [`WideMarkdownEditor`](#api-WideMarkdownEditor), [`YouTubeVideo`](#api-YouTubeVideo)
- 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), [`IJgMarkProps`](#api-IJgMarkProps), [`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-personal-react-ui`

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

*Function*

Renders the fixed JG artwork as a decorative mark, matching the existing Astro component.

```ts
JgMark(props: IJgMarkProps): Element
```

**Parameters**

- `props` `IJgMarkProps`: Layout classes for the square mark.

**Returns** `Element`: The outlined, non-focusable brand mark.

**Example**

```ts
import { createElement } from 'react';
import { JgMark } from 'jg-personal-react-ui/components/jg-mark';
const mark = createElement(JgMark, { className: 'size-10' });
```

### <a id="api-constants"></a>Constants in `jg-personal-react-ui`

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

*Constant*

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

```ts
const Alert: ({ className, variant, interaction, role, asChild, ...props }: IAlertProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const AlertAction: ({ className, ...props }: IAlertActionProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting copy for an alert.

```ts
const AlertDescription: ({ className, ...props }: IAlertDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Provides the alert dialog root state and accessibility context.

```ts
const AlertDialog: ({ children, actionsRef: providedActionsRef, getNavigationSession, onOpenChange, onOpenChangeComplete, open, ...props }: IAlertDialogProps) => React.ReactElement
```

**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`

*Constant*

Renders the primary alert dialog action with shared button styling.

```ts
const AlertDialogAction: ({ asChild, children, className, variant, size, ...props }: IAlertDialogActionProps) => React.ReactElement
```

**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`

*Constant*

Renders the themed alert dialog content inside a portal.

```ts
const AlertDialogContent: ({ children, ...props }: IAlertDialogContentProps) => React.ReactElement
```

**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`

*Constant*

Provides supporting context for the alert dialog title.

```ts
const AlertDialogDescription: ({ className, ...props }: IAlertDialogDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Groups alert dialog actions in a responsive footer layout.

```ts
const AlertDialogFooter: (props: IAlertDialogFooterProps) => React.ReactElement
```

**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`

*Constant*

Groups the alert dialog title, media, and description.

```ts
const AlertDialogHeader: (props: IAlertDialogHeaderProps) => React.ReactElement
```

**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`

*Constant*

Announces the primary alert dialog heading.

```ts
const AlertDialogTitle: ({ className, ...props }: IAlertDialogTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens the alert dialog.

```ts
const AlertDialogTrigger: ({ asChild, children, ...props }: IAlertDialogTriggerProps) => React.ReactElement
```

**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`

*Constant*

Renders the main title content for an alert.

```ts
const AlertTitle: ({ className, ...props }: IAlertTitleProps) => React.ReactElement
```

**Example**

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

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

*Constant*

Composes the retained alert variant classes.

```ts
const alertVariants: (props?: { variant?: "destructive" | "default" | null; interaction?: "action" | "static" | "redirect" | null } & 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: z.ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>
```

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

*Constant*

Renders a readable article-width container.

```ts
const Article: ({ className, ...props }: IArticleProps) => React.ReactElement
```

**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`

*Constant*

Renders an article header with compact bottom spacing.

```ts
const ArticleHeader: ({ className, ...props }: IArticleHeaderProps) => React.ReactElement
```

**Example**

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

#### <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-AudioInput"></a>`AudioInput`

*Constant*

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

```ts
const AudioInput: ({ autoStart, cancelLabel, cancelResetDelayMs, className, closeButtonAriaLabel, controlsRef, defaultIsDialogOpen, defaultIsRecording, defaultIsTranscriptionEditorVisible, defaultTranscription, dialogDescription, dialogTitle, disabled, isDialogOpen: controlledIsDialogOpen, isErrorVisible, isRecording, isTranscriptionEditorVisible, maxBytes, onCancel, onDialogOpenChange, onElapsedMsChange, onLimitProgressChange, onRecordedBytesChange, onRecordingActiveChange, onRecordingCancel, onRecordingComplete, onRecordingDataAvailable, onRecordingError, onRecordingStart, onRecordingStop, onStatusChange, onTranscriptionComplete, onTranscriptionEditorVisibleChange, onTranscriptionError, onTranscriptionResult, onTranscriptionStatusChange, onTranscriptionTextChange, preferredMimeType, recorderClassName, recorderRootClassName, restartButtonAriaLabel, restartButtonClassName, retryLabel, sendTranscriptionLabel, statusLabels, transcribe, transcribeAndSendLabel, transcribeLabel, transcribeLimitRecordingLabel, transcription, transcriptionActionsClassName, transcriptionPlaceholder, transcriptionTextareaClassName, transcriptionTextareaLabel, triggerAriaLabel, triggerButtonProps, triggerClassName, triggerSize, triggerTitle, triggerVariant, ...rootProps }: IAudioInputProps) => ReactElement
```

**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`

*Constant*

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

```ts
const Badge: ({ className, variant, asChild, ...props }: IBadgeProps) => React.ReactElement
```

**Example**

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

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

*Constant*

Composes the retained badge variant classes.

```ts
const badgeVariants: (props?: { variant?: "destructive" | "outline" | "secondary" | "default" | "ghost" | "warning" | "success" | null } & ClassProp) => string
```

**Example**

```ts
import { badgeVariants } from 'jg-react-ui/components/badge';
const styles = badgeVariants({});
```

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

*Constant*

Renders a prose blockquote with left-border treatment.

```ts
const Blockquote: ({ className, ...props }: IBlockquoteProps) => React.ReactElement
```

**Example**

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

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

*Constant*

Renders the shared command button or passes its styles to a child element.

```ts
const Button: ({ className, variant, size, asChild, badgeCount, badgeLocation, badgeTheme, children, maxValue, ...props }: IButtonProps) => React.ReactElement & { __jgReactUiNativeButtonRenderComponent?: true }
```

**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?: { variant?: "destructive" | "outline" | "secondary" | "default" | "ghost" | "link" | null; size?: "default" | "touch" | "touch-lg" | "xs" | "sm" | "lg" | "icon" | "icon-touch" | "inline" | "icon-xs" | "icon-sm" | "icon-lg" | null } & ClassProp) => string
```

**Example**

```ts
import { buttonVariants } from 'jg-react-ui/components/button';
const classes = buttonVariants({ variant: 'outline', size: 'touch' });
```

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

*Constant*

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

```ts
const ChatMarkdownEditor: ({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-required": ariaRequired, className, controlsRef, disabled, formattingContainer, isShiftEnterSubmit, maxEditorHeight, maxLength, onChange, onSubmitRequest, placeholder, value, }: IChatMarkdownEditorProps) => React.ReactElement
```

**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`

*Constant*

Renders the shared checkbox control with a checked indicator.

```ts
const Checkbox: ({ asChild, checked, className, children, defaultChecked, indeterminate, onCheckedChange, ...props }: ICheckboxProps) => React.ReactElement
```

**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-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-CodeBlock"></a>`CodeBlock`

*Constant*

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

```ts
const CodeBlock: ({ className, children, copyValue, copyLabel, filePath, headerLabel, headerRole, headerMeta, fileIcon, fileStatus, hasHeader, hasCopyButton, hasPreferencesControls, hasSyntaxHighlighting, language: declaredLanguage, prefersWrappedCode: prefersWrappedCodeOverride, shouldWrapContent, style, ...props }: ICodeBlockProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const CodeDiff: ({ className, tabIndex, filePath, fileIcon, fileStatus, headerLabel, headerMeta, codeDiffView: codeDiffViewOverride, codeFoldMessageRenderer, disableWorker, extraLinesSurroundingDiff, language, loadingElement, newValue, oldValue, responsiveBreakpoint, showDiffOnly, styles, ...props }: ICodeDiffProps) => React.ReactElement
```

**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-CodeDiffViewSchema"></a>`CodeDiffViewSchema`

*Constant*

Retained code-diff layouts.

```ts
const CodeDiffViewSchema: z.ZodEnum<{ split: "split"; unified: "unified" }>
```

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

*Constant*

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

```ts
const CodeFileHeader: ({ actions, className, filePath, fileIcon, fileStatus, headerLabel, headerRole, headerMeta, languageLabel, ...props }: ICodeFileHeaderProps) => React.ReactElement
```

**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-codeFileStatusVariants"></a>`codeFileStatusVariants`

*Constant*

Builds semantic classes for a source file's change status.

```ts
const codeFileStatusVariants: (props?: { status?: "added" | "modified" | "removed" | null } & ClassProp) => string
```

**Example**

```ts
import { codeFileStatusVariants } from 'jg-react-ui/components/typography';
const classes = codeFileStatusVariants({ status: 'modified' });
```

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

*Constant*

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

```ts
const CodePreferencesControls: ({ canChangeCodeDiffView, canChangePrefersWrappedCode, className, codeDiffView, isInline, prefersWrappedCode, }: ICodePreferencesControlsProps) => React.ReactElement | null
```

**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`

*Constant*

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

```ts
const CompactMarkdownEditor: (props: IMarkdownEditorVariantProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ConfirmationDialog: () => React.ReactElement | null
```

**Example**

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

#### <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-CopyButton"></a>`CopyButton`

*Constant*

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
const CopyButton: ({ "aria-label": ariaLabel, className, copiedFeedbackDuration, copiedLabel, copyLabel, disabled, label, size, title, value, variant, ...props }: ICopyButtonProps) => React.ReactElement
```

**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-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-Dialog"></a>`Dialog`

*Constant*

Provides the dialog root state and accessibility context.

```ts
const Dialog: ({ children, actionsRef: providedActionsRef, getNavigationSession, isDismissalDisabled, isOverlayCloseEnabled, onOpenChange, onOpenChangeComplete, open, ...props }: IDialogProps) => React.ReactElement
```

**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`

*Constant*

Renders the only vertically scrollable region within a dialog surface.

```ts
const DialogBody: ({ className, padding, ...props }: IDialogBodyProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DialogCancel: (props: IDialogCancelProps) => React.ReactElement | null
```

**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`

*Constant*

Renders the interactive element that closes the dialog.

```ts
const DialogClose: ({ asChild, children, disabled, ...props }: IDialogCloseProps) => React.ReactElement
```

**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`

*Constant*

Renders the themed dialog content inside a portal.

```ts
const DialogContent: ({ asChild, backButtonAriaLabel, backButtonIcon, children, closeButtonAriaLabel, closeButtonIcon, forceMount, initialFocus, isCloseButtonVisible, size, ...props }: IDialogContentProps) => React.ReactElement
```

**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`

*Constant*

Provides optional supporting context for the dialog title.

```ts
const DialogDescription: ({ className, ...props }: IDialogDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Groups dialog actions in a responsive footer layout.

```ts
const DialogFooter: (props: IDialogFooterProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DialogHeader: ({ actions, children, leadingAction, layout, ...props }: IDialogHeaderProps) => React.ReactElement
```

**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-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-DialogTitle"></a>`DialogTitle`

*Constant*

Announces the primary dialog heading.

```ts
const DialogTitle: ({ className, ...props }: IDialogTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens the dialog.

```ts
const DialogTrigger: ({ asChild, children, ...props }: IDialogTriggerProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const Divider: ({ className, orientation, decorative, role, "aria-orientation": ariaOrientation, ...props }: IDividerProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const Drawer: ({ children, defaultOpen, isDismissalDisabled, modal, onOpenChange, onOpenChangeComplete, open, side, ...props }: IDrawerProps) => React.ReactElement
```

**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`

*Constant*

Renders the drawer's vertically scrollable content region.

```ts
const DrawerBody: ({ className, ...props }: IDrawerBodyProps) => React.ReactElement
```

**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`

*Constant*

Renders an interactive element that closes a drawer.

```ts
const DrawerClose: ({ asChild, children, disabled, ...props }: IDrawerCloseProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DrawerContent: ({ children, closeButtonAriaLabel, closeButtonIcon, density, forceMount, size, viewportStyle, ...props }: IDrawerContentProps) => React.ReactElement
```

**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`

*Constant*

Provides supporting context for the drawer title.

```ts
const DrawerDescription: ({ className, ...props }: IDrawerDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders an optional fixed drawer footer below the scrolling body.

```ts
const DrawerFooter: ({ className, ...props }: IDrawerFooterProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DrawerHeader: ({ actions, children, ...props }: IDrawerHeaderProps) => React.ReactElement
```

**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`

*Constant*

Announces the drawer heading.

```ts
const DrawerTitle: ({ className, ...props }: IDrawerTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens a drawer.

```ts
const DrawerTrigger: ({ asChild, children, ...props }: IDrawerTriggerProps) => React.ReactElement
```

**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`

*Constant*

Provides dropdown menu root state and positioning context.

```ts
const DropdownMenu: ({ actionsRef, loopFocus, onOpenChange, ...props }: IDropdownMenuProps) => React.ReactElement
```

**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`

*Constant*

Renders a dropdown menu checkbox item with a check indicator.

```ts
const DropdownMenuCheckboxItem: ({ asChild, checked, className, children, closeOnClick, defaultChecked, label, onCheckedChange, onClick, onSelect, textValue, variant, ...props }: IDropdownMenuCheckboxItemProps) => React.ReactElement
```

**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`

*Constant*

Renders themed dropdown menu content inside a portal.

```ts
const DropdownMenuContent: ({ align, alignOffset, arrowPadding, asChild, avoidCollisions, children, className, collisionAvoidance, collisionBoundary, collisionPadding, finalFocus, forceMount, hideWhenDetached, loop, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onPointerDownOutside, side, sideOffset, ...props }: IDropdownMenuContentProps) => React.ReactElement
```

**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`

*Constant*

Groups related dropdown menu items.

```ts
const DropdownMenuGroup: ({ ...props }: IDropdownMenuGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders a selectable dropdown menu item.

```ts
const DropdownMenuItem: ({ asChild, className, children, closeOnClick, inset, label, onClick, onSelect, textValue, variant, ...props }: IDropdownMenuItemProps) => React.ReactElement
```

**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`

*Constant*

Renders a non-interactive dropdown menu label.

```ts
const DropdownMenuLabel: ({ className, inset, ...props }: IDropdownMenuLabelProps) => React.ReactElement
```

**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`

*Constant*

Provides selection state for dropdown menu radio items.

```ts
const DropdownMenuRadioGroup: ({ onValueChange, ...props }: IDropdownMenuRadioGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders a dropdown menu radio item with a selection indicator.

```ts
const DropdownMenuRadioItem: ({ asChild, className, children, closeOnClick, label, onClick, onSelect, textValue, variant, ...props }: IDropdownMenuRadioItemProps) => React.ReactElement
```

**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`

*Constant*

Renders a visual divider between dropdown menu groups.

```ts
const DropdownMenuSeparator: ({ className, ...props }: IDropdownMenuSeparatorProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DropdownMenuShortcut: ({ className, ...props }: IDropdownMenuShortcutProps) => React.ReactElement
```

**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`

*Constant*

Provides nested dropdown menu state.

```ts
const DropdownMenuSub: ({ loopFocus, onOpenChange, ...props }: IDropdownMenuSubProps) => React.ReactElement
```

**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`

*Constant*

Renders nested dropdown menu content.

```ts
const DropdownMenuSubContent: ({ align, className, side, sideOffset, ...props }: IDropdownMenuSubContentProps) => React.ReactElement
```

**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`

*Constant*

Renders the trigger that opens a nested dropdown menu.

```ts
const DropdownMenuSubTrigger: ({ asChild, className, children, inset, label, textValue, variant, ...props }: IDropdownMenuSubTriggerProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens the dropdown menu.

```ts
const DropdownMenuTrigger: ({ asChild, children, ...props }: IDropdownMenuTriggerProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const EmptyState: ({ asChild, className, ...props }: IEmptyStateProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting empty-state guidance.

```ts
const EmptyStateDescription: ({ asChild, className, ...props }: IEmptyStateDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders the primary empty-state message.

```ts
const EmptyStateTitle: ({ asChild, className, ...props }: IEmptyStateTitleProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ErrorFeedbackProvider: ({ children, resolveErrorFeedback, }: IErrorFeedbackProviderProps) => ReactElement
```

**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-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-Field"></a>`Field`

*Constant*

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

```ts
const Field: ({ className, ...props }: IFieldProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting help text for a field.

```ts
const FieldDescription: ({ className, ...props }: IFieldDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders validation error text for a field.

```ts
const FieldError: ({ className, ...props }: IFieldErrorProps) => React.ReactElement
```

**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`

*Constant*

Renders a vertical group for multiple fields or choices.

```ts
const FieldGroup: ({ className, ...props }: IFieldGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders a compact legend for grouped form controls.

```ts
const FieldLegend: ({ className, ...props }: IFieldLegendProps) => React.ReactElement
```

**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`

*Constant*

Renders a fieldset without browser default border spacing.

```ts
const FieldSet: ({ className, ...props }: IFieldSetProps) => React.ReactElement
```

**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`

*Constant*

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
const FileUpload: ({ acceptedFileTypes, allowDuplicateFiles, autoUpload, browseLabel, cancelAllLabel, className, controlsRef, description, disabled, dropZoneClassName, dropZoneLabel, existingFiles, hideUploadAreaLabel, inputProps, isLabelVisible, isPolicyVisible, label, listClassName, maxConcurrentUploads, maxFileBytes, maxFiles, maxTotalBytes, onFileRejected, onItemsChange, onUploadCanceled, onUploadFailure, onUploadSuccess, onUploadAreaExpand, renderPreview, replaceSingleFile, showUploadAreaLabel, startUploadsLabel, statusLabels, uploadFile, validateFile, ...props }: IFileUploadProps<TResult>) => ReactElement
```

**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`

*Constant*

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
const FileUploadDialog: ({ closeLabel, defaultOpen, fileUploadProps, isDismissalDisabled, onDiscard, onOpenChange, onOpenChangeComplete, onSubmit, open: externalOpen, size, submitLabel, title, trigger, ...dialogProps }: IFileUploadDialogProps<TResult>) => ReactElement
```

**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`

*Constant*

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

```ts
const formatRepositoryPath: (path: string) => string
```

**Example**

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

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

*Constant*

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

```ts
const getMarkdownImageDisplayWidth: (title: string | undefined) => number | undefined
```

**Example**

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

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

*Constant*

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

```ts
const getUiPreferencesStorageKey: (storageId?: string) => string
```

**Example**

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

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

*Constant*

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

```ts
const GlobalErrorBoundary: ({ ref, tabIndex, ...props }: IGlobalErrorBoundaryProps) => ReactElement
```

**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`

*Constant*

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

```ts
const GlobalErrorBoundaryView: ({ "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, className, classNames, description, error, heading, onRefreshClick, refreshButtonLabel, refreshingButtonLabel, statusLabel, ...props }: IGlobalErrorBoundaryViewProps) => ReactElement
```

**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`

*Constant*

Renders a semantic heading for the supported typography scale.

```ts
const Heading: ({ className, level, role, ...props }: IHeadingProps) => React.ReactElement
```

**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-headingVariants"></a>`headingVariants`

*Constant*

Builds statement typography independently from its semantic heading level.

```ts
const headingVariants: (props?: { role?: "section" | "display" | "public-page" | "product-page" | "product-statement" | null } & ClassProp) => string
```

**Example**

```ts
import { headingVariants } from 'jg-react-ui/components/typography';
const classes = headingVariants({ role: 'section' });
```

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

*Constant*

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
const IconTile: ({ className, size, tone, "aria-hidden": ariaHidden, ...props }: IIconTileProps) => React.ReactElement
```

**Example**

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

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

*Constant*

Composes the retained icon-tile variant classes.

```ts
const iconTileVariants: (props?: { size?: "sm" | "lg" | "md" | null; tone?: "destructive" | "warning" | "success" | "neutral" | "brand" | null } & ClassProp) => string
```

**Example**

```ts
import { iconTileVariants } from 'jg-react-ui/components/icon-tile';
const styles = iconTileVariants({});
```

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

*Constant*

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

```ts
const ImageUploadField: ({ acceptedFileTypes, chooseLabel, className, currentImage, description, dialogTitle, disabled, error, isLoading, label, maxFileBytes, onCurrentImageRemove, onDiscard, onFileRejected, onItemsChange, onSubmit, onUploadCanceled, onUploadFailure, onUploadSuccess, removeLabel, replaceLabel, submitLabel, uploadFile, validateFile, ...props }: IImageUploadFieldProps<TResult>) => ReactElement
```

**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`

*Constant*

Renders a wrapping inline layout for compact controls and metadata.

```ts
const Inline: ({ className, ...props }: IInlineProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const InlineCode: ({ className, children, ...props }: IInlineCodeProps) => React.ReactElement
```

**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`

*Constant*

Renders the shared text input surface.

```ts
const Input: ({ className, type, ...props }: IInputProps) => React.ReactElement
```

**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`

*Constant*

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

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

**Example**

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

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

*Constant*

Renders keyboard shortcut text with keycap styling.

```ts
const KeyboardKey: ({ className, ...props }: IKeyboardKeyProps) => React.ReactElement
```

**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`

*Constant*

Renders an accessible native form label.

```ts
const Label: ({ className, ...props }: ILabelProps) => React.ReactElement
```

**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`

*Constant*

Renders larger emphasized inline prose.

```ts
const LargeText: ({ className, ...props }: ILargeTextProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const LazyRouteProgress: () => ReactElement
```

**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`

*Constant*

Renders emphasized introductory prose.

```ts
const Lead: ({ className, ...props }: ILeadProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose list item.

```ts
const ListItem: ({ className, ...props }: IListItemProps) => React.ReactElement
```

**Example**

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

#### <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-LoadMoreButton"></a>`LoadMoreButton`

*Constant*

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
const LoadMoreButton: ({ "aria-busy": ariaBusy, "aria-label": ariaLabel, className, classNames, disabled, icon, iconPlacement, label, loadingAriaLabel, loadingIcon, loadingLabel, onClick, query, shouldDisableWhenLoading, size, variant, ...props }: ILoadMoreButtonProps) => ReactElement | null
```

**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`

*Constant*

Renders trusted markdown text through the shared typography system.

```ts
const Markdown: ({ children, className, components, prefersWrappedCode, rehypePlugins, remarkPlugins, shouldOpenLinksInNewTab, skipHtml, ...props }: IMarkdownProps) => React.ReactElement
```

**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-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-MarkdownEditor"></a>`MarkdownEditor`

*Constant*

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

```ts
const MarkdownEditor: ({ className, layout, ...editorProps }: IMarkdownEditorProps) => React.ReactElement
```

**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`

*Constant*

Renders lower-emphasis supporting prose.

```ts
const MutedText: ({ className, ...props }: IMutedTextProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose ordered list.

```ts
const OrderedList: ({ className, ...props }: IOrderedListProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting page-level description text.

```ts
const PageDescription: ({ className, ...props }: IPageDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders a page header region with shared responsive spacing.

```ts
const PageHeader: ({ className, ...props }: IPageHeaderProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const PageHeaderMetadata: ({ className, ...props }: IPageHeaderMetadataProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const PageHeaderRow: ({ className, ...props }: IPageHeaderRowProps) => React.ReactElement
```

**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`

*Constant*

Groups the page title and metadata on one responsive row.

```ts
const PageHeaderTitleGroup: ({ className, ...props }: IPageHeaderTitleGroupProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const PageShell: ({ className, ...props }: IPageShellProps) => React.ReactElement
```

**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`

*Constant*

Renders the primary page heading.

```ts
const PageTitle: ({ className, ...props }: IPageTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders a default prose paragraph.

```ts
const Paragraph: ({ className, ...props }: IParagraphProps) => React.ReactElement
```

**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`

*Constant*

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

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

**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`

*Constant*

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

```ts
const Progress: ({ className, indicatorClassName, indeterminate, max, value, ...props }: IProgressProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const QueryBoundary: ({ children, errorAlertProps, loaderProps, loadMoreButtonProps, queries, resolutionKey, isInitialResolutionApproved, renderErrorAlert, renderLoader, renderLoadMoreButton, }: IQueryBoundaryProps) => ReactElement
```

**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`

*Constant*

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

```ts
const QueryErrorAlert: ({ className, presentation, queries, title, fallbackMessage, retryLabel, retryingLabel, ...props }: IQueryErrorAlertProps) => ReactElement | null
```

**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`

*Constant*

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

```ts
const QueryErrorToastr: ({ queries, toastId, title, fallbackMessage, retryLabel, retryingLabel, }: IQueryErrorToastrProps) => null
```

**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`

*Constant*

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

```ts
const QueryLoader: ({ className, classNames, isVisible, layout, queries, size, role, "aria-label": ariaLabel, ...props }: IQueryLoaderProps) => ReactElement | null
```

**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`

*Constant*

Provides radio group state and layout.

```ts
const RadioGroup: ({ className, dir, loop, onValueChange, orientation, ...props }: IRadioGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders an individual radio option with a selected indicator.

```ts
const RadioGroupItem: ({ asChild, className, children, ...props }: IRadioGroupItemProps) => React.ReactElement
```

**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-ResolvedAppThemeSchema"></a>`ResolvedAppThemeSchema`

*Constant*

Concrete color schemes after resolving the system preference.

```ts
const ResolvedAppThemeSchema: z.ZodEnum<{ light: "light"; dark: "dark" }>
```

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

*Constant*

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

```ts
const RouterRoot: () => ReactElement
```

**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`

*Constant*

Renders a prose section with consistent vertical spacing.

```ts
const Section: ({ className, ...props }: ISectionProps) => React.ReactElement
```

**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`

*Constant*

Provides select state through the Base UI select root.

```ts
const Select: ({ onOpenChange, onValueChange, ...props }: ISelectProps) => React.ReactElement
```

**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`

*Constant*

Renders themed select content inside a portal.

```ts
const SelectContent: ({ align, alignItemWithTrigger, alignOffset, arrowPadding, asChild, avoidCollisions, className, children, collisionAvoidance, collisionBoundary, collisionPadding, finalFocus, forceMount, hideWhenDetached, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onPointerDownOutside, position, side, sideOffset, sticky, ...props }: ISelectContentProps) => React.ReactElement
```

**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`

*Constant*

Renders a select option with a check indicator.

```ts
const SelectItem: ({ asChild, className, children, label, textValue, ...props }: ISelectItemProps) => React.ReactElement
```

**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`

*Constant*

Renders the select trigger with the shared input surface styling.

```ts
const SelectTrigger: ({ asChild, className, children, ...props }: ISelectTriggerProps) => React.ReactElement
```

**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`

*Constant*

Renders selected select value text or placeholder content.

```ts
const SelectValue: ({ asChild, children, ...props }: ISelectValueProps) => React.ReactElement
```

**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`

*Constant*

Renders small supporting text with block layout.

```ts
const SmallText: ({ className, ...props }: ISmallTextProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const Spinner: ({ className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel, ...props }: ISpinnerProps) => React.ReactElement
```

**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`

*Constant*

Renders a vertical layout stack for grouped content.

```ts
const Stack: ({ className, ...props }: IStackProps) => React.ReactElement
```

**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`

*Constant*

Renders a section surface for framed app content.

```ts
const Surface: ({ className, ...props }: ISurfaceProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const Switch: ({ asChild, className, children, onCheckedChange, size, ...props }: ISwitchProps) => React.ReactElement
```

**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`

*Constant*

Renders a full-width prose table.

```ts
const Table: ({ className, ...props }: ITableProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose table body cell.

```ts
const TableCell: ({ className, ...props }: ITableCellProps) => React.ReactElement
```

**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`

*Constant*

Renders a horizontally scrollable wrapper for prose tables.

```ts
const TableContainer: ({ className, ...props }: ITableContainerProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose table header cell.

```ts
const TableHeaderCell: ({ className, ...props }: ITableHeaderCellProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose table row.

```ts
const TableRow: ({ className, ...props }: ITableRowProps) => React.ReactElement
```

**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`

*Constant*

Provides the tabs root state and orientation context.

```ts
const Tabs: ({ activationMode, className, orientation, ...props }: ITabsProps) => React.ReactElement
```

**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`

*Constant*

Renders the panel content associated with a selected tab.

```ts
const TabsContent: ({ className, forceMount, keepMounted, ...props }: ITabsContentProps) => React.ReactElement
```

**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`

*Constant*

Renders the segmented control container for tab triggers.

```ts
const TabsList: ({ activateOnFocus, className, overflowBehavior, onFocusCapture, ref, children, ...props }: ITabsListProps) => React.ReactElement
```

**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`

*Constant*

Renders an individual tab selection control.

```ts
const TabsTrigger: ({ asChild, "aria-label": ariaLabel, children, className, title, ...props }: ITabsTriggerProps) => React.ReactElement
```

**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`

*Constant*

Renders the shared multiline text input surface.

```ts
const Textarea: ({ className, ...props }: ITextareaProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const TextLink: ({ className, asChild, variant, ...props }: ITextLinkProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ThemeInitializationScript: ({ id, nonce, storageId, }: IThemeInitializationScriptProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ThemeProvider: ({ children, disableTransitionOnChange, }: IThemeProviderProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ThemeToggleButton: ({ disabled, onThemeChangeRequested, ...props }: IThemeToggleButtonProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const Toastr: ({ className, icons, style, toastOptions, ...props }: IToastrProps) => React.ReactElement
```

**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`

*Constant*

Provides tooltip state for a trigger and content pair.

```ts
const Tooltip: ({ delayDuration, disableHoverableContent, disableHoverablePopup, ...props }: ITooltipProps) => React.ReactElement
```

**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`

*Constant*

Renders themed tooltip content inside a portal.

```ts
const TooltipContent: ({ align, alignOffset, arrowPadding, asChild, avoidCollisions, children, className, collisionAvoidance, collisionBoundary, collisionPadding, forceMount, hideWhenDetached, side, sideOffset, sticky, ...props }: ITooltipContentProps) => React.ReactElement
```

**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`

*Constant*

Provides shared tooltip timing defaults for a subtree.

```ts
const TooltipProvider: ({ delay, delayDuration, disableHoverableContent, skipDelayDuration, timeout, ...props }: ITooltipProviderProps) => React.ReactElement
```

**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`

*Constant*

Renders the focusable or hoverable element that opens tooltip content.

```ts
const TooltipTrigger: ({ asChild, children, delay, ...props }: ITooltipTriggerProps) => React.ReactElement
```

**Example**

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

#### <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-UiPreferencesProvider"></a>`UiPreferencesProvider`

*Constant*

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

```ts
const UiPreferencesProvider: (props: IUiPreferencesProviderProps) => React.ReactElement
```

**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-UiPreferencesSchema"></a>`UiPreferencesSchema`

*Constant*

Complete stored UI preferences; harmless additional fields remain compatible.

```ts
const UiPreferencesSchema: z.ZodObject<{ theme: z.ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>; codeDiffView: z.ZodEnum<{ split: "split"; unified: "unified" }>; prefersWrappedCode: z.ZodBoolean; appInstallToastrDismissedAt: z.ZodNullable<z.ZodISODateTime> }, z.core.$strip>
```

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

*Constant*

Renders a prose unordered list.

```ts
const UnorderedList: ({ className, ...props }: IUnorderedListProps) => React.ReactElement
```

**Example**

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

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

*Constant*

Stores the active root-mounted confirmation dialog session and completion callback.

```ts
const useConfirmationDialogStore: UseBoundStore
```

**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-useErrorFeedbackResolver"></a>`useErrorFeedbackResolver`

*Constant*

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

```ts
const useErrorFeedbackResolver: () => IErrorFeedbackResolver
```

**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`

*Constant*

Reads the current theme context from the nearest theme provider.

```ts
const useTheme: () => IThemeProviderState
```

**Example**

```ts
import { useTheme } from 'jg-react-ui/components/theme-provider';
const ResolvedTheme = () => useTheme().resolvedTheme;
```

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

*Constant*

Reads the current UI preferences and provider-owned update lifecycle.

```ts
const useUiPreferences: () => IUiPreferencesContextState
```

**Example**

```ts
import { useUiPreferences } from 'jg-react-ui/components/ui-preferences-provider';
const WrappingPreference = () => String(useUiPreferences().preferences.prefersWrappedCode);
```

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

*Constant*

Reads provider capabilities without subscribing to the complete preference snapshot.

```ts
const useUiPreferencesCapabilities: () => IUiPreferencesCapabilities
```

**Example**

```ts
import { useUiPreferencesCapabilities } from 'jg-react-ui/components/ui-preferences-provider';
const Capability = () => String(useUiPreferencesCapabilities().canUpdatePreferences);
```

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

*Constant*

Renders the established wide markdown editor with its existing Milkdown configuration.

```ts
const WideMarkdownEditor: (props: IMarkdownEditorVariantProps) => React.ReactElement
```

**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`

*Constant*

Renders a validated YouTube video through the privacy-enhanced player origin.

```ts
const YouTubeVideo: ({ autoPlay, className, title, videoId, }: IYouTubeVideoProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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-IJgMarkProps"></a>`IJgMarkProps`

*Type*

Layout classes for the fixed, decorative JG mark.

```ts
type IJgMarkProps = Pick<ComponentProps<'svg'>, 'className'>;
```

#### <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)
- `isInitialResolutionApproved: boolean` (property)
- `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)

## <a id="api-entry-components/button"></a>`jg-personal-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-personal-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: ({ className, variant, size, asChild, badgeCount, badgeLocation, badgeTheme, children, maxValue, ...props }: IButtonProps) => React.ReactElement & { __jgReactUiNativeButtonRenderComponent?: true }
```

**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?: { variant?: "destructive" | "outline" | "secondary" | "default" | "ghost" | "link" | null; size?: "default" | "touch" | "touch-lg" | "xs" | "sm" | "lg" | "icon" | "icon-touch" | "inline" | "icon-xs" | "icon-sm" | "icon-lg" | null } & 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-personal-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-personal-react-ui/cn`



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

- Constants: [`AppThemeSchema`](#api-contracts-AppThemeSchema), [`CodeDiffViewSchema`](#api-contracts-CodeDiffViewSchema), [`DEFAULT_UI_PREFERENCES`](#api-contracts-DEFAULT_UI_PREFERENCES), [`getUiPreferencesStorageKey`](#api-contracts-getUiPreferencesStorageKey), [`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-constants"></a>Constants in `jg-personal-react-ui/contracts`

#### <a id="api-contracts-AppThemeSchema"></a>`AppThemeSchema`

*Constant*

Theme preferences accepted by shared UI consumers.

```ts
const AppThemeSchema: z.ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>
```

#### <a id="api-contracts-CodeDiffViewSchema"></a>`CodeDiffViewSchema`

*Constant*

Retained code-diff layouts.

```ts
const CodeDiffViewSchema: z.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-getUiPreferencesStorageKey"></a>`getUiPreferencesStorageKey`

*Constant*

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

```ts
const getUiPreferencesStorageKey: (storageId?: string) => string
```

**Example**

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

#### <a id="api-contracts-ResolvedAppThemeSchema"></a>`ResolvedAppThemeSchema`

*Constant*

Concrete color schemes after resolving the system preference.

```ts
const ResolvedAppThemeSchema: z.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: z.ZodObject<{ theme: z.ZodEnum<{ light: "light"; dark: "dark"; system: "system" }>; codeDiffView: z.ZodEnum<{ split: "split"; unified: "unified" }>; prefersWrappedCode: z.ZodBoolean; appInstallToastrDismissedAt: z.ZodNullable<z.ZodISODateTime> }, z.core.$strip>
```

### <a id="api-contracts-types"></a>Types in `jg-personal-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-personal-react-ui/components/badge`

- Constants: [`Badge`](#api-components-badge-Badge), [`badgeVariants`](#api-components-badge-badgeVariants)
- Types: [`IBadgeProps`](#api-components-badge-IBadgeProps)

### <a id="api-components-badge-constants"></a>Constants in `jg-personal-react-ui/components/badge`

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

*Constant*

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

```ts
const Badge: ({ className, variant, asChild, ...props }: IBadgeProps) => React.ReactElement
```

**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-badgeVariants"></a>`badgeVariants`

*Constant*

Composes the retained badge variant classes.

```ts
const badgeVariants: (props?: { variant?: "destructive" | "outline" | "secondary" | "default" | "ghost" | "warning" | "success" | null } & 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-personal-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-personal-react-ui/components/icon-tile`

- Constants: [`IconTile`](#api-components-icon-tile-IconTile), [`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-constants"></a>Constants in `jg-personal-react-ui/components/icon-tile`

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

*Constant*

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
const IconTile: ({ className, size, tone, "aria-hidden": ariaHidden, ...props }: IIconTileProps) => React.ReactElement
```

**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-iconTileVariants"></a>`iconTileVariants`

*Constant*

Composes the retained icon-tile variant classes.

```ts
const iconTileVariants: (props?: { size?: "sm" | "lg" | "md" | null; tone?: "destructive" | "warning" | "success" | "neutral" | "brand" | null } & 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-personal-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-personal-react-ui/components/alert`

- Constants: [`Alert`](#api-components-alert-Alert), [`AlertAction`](#api-components-alert-AlertAction), [`AlertDescription`](#api-components-alert-AlertDescription), [`AlertTitle`](#api-components-alert-AlertTitle), [`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-constants"></a>Constants in `jg-personal-react-ui/components/alert`

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

*Constant*

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

```ts
const Alert: ({ className, variant, interaction, role, asChild, ...props }: IAlertProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const AlertAction: ({ className, ...props }: IAlertActionProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting copy for an alert.

```ts
const AlertDescription: ({ className, ...props }: IAlertDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders the main title content for an alert.

```ts
const AlertTitle: ({ className, ...props }: IAlertTitleProps) => React.ReactElement
```

**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-alertVariants"></a>`alertVariants`

*Constant*

Composes the retained alert variant classes.

```ts
const alertVariants: (props?: { variant?: "destructive" | "default" | null; interaction?: "action" | "static" | "redirect" | null } & 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-personal-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/jg-mark"></a>`jg-personal-react-ui/components/jg-mark`

- Functions: [`JgMark`](#api-components-jg-mark-JgMark)
- Types: [`IJgMarkProps`](#api-components-jg-mark-IJgMarkProps)

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

#### <a id="api-components-jg-mark-JgMark"></a>`JgMark`

*Function*

Renders the fixed JG artwork as a decorative mark, matching the existing Astro component.

```ts
JgMark(props: IJgMarkProps): Element
```

**Parameters**

- `props` `IJgMarkProps`: Layout classes for the square mark.

**Returns** `Element`: The outlined, non-focusable brand mark.

**Example**

```ts
import { createElement } from 'react';
import { JgMark } from 'jg-personal-react-ui/components/jg-mark';
const mark = createElement(JgMark, { className: 'size-10' });
```

### <a id="api-components-jg-mark-types"></a>Types in `jg-personal-react-ui/components/jg-mark`

#### <a id="api-components-jg-mark-IJgMarkProps"></a>`IJgMarkProps`

*Type*

Layout classes for the fixed, decorative JG mark.

```ts
type IJgMarkProps = Pick<ComponentProps<'svg'>, 'className'>;
```

## <a id="api-entry-components/error-feedback-provider"></a>`jg-personal-react-ui/components/error-feedback-provider`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/error-feedback-provider`

#### <a id="api-components-error-feedback-provider-ErrorFeedbackProvider"></a>`ErrorFeedbackProvider`

*Constant*

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

```ts
const ErrorFeedbackProvider: ({ children, resolveErrorFeedback, }: IErrorFeedbackProviderProps) => ReactElement
```

**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`

*Constant*

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

```ts
const useErrorFeedbackResolver: () => IErrorFeedbackResolver
```

**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-personal-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-personal-react-ui/components/ui-preferences-provider`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/ui-preferences-provider`

#### <a id="api-components-ui-preferences-provider-UiPreferencesProvider"></a>`UiPreferencesProvider`

*Constant*

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

```ts
const UiPreferencesProvider: (props: IUiPreferencesProviderProps) => React.ReactElement
```

**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`

*Constant*

Reads the current UI preferences and provider-owned update lifecycle.

```ts
const useUiPreferences: () => IUiPreferencesContextState
```

**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`

*Constant*

Reads provider capabilities without subscribing to the complete preference snapshot.

```ts
const useUiPreferencesCapabilities: () => IUiPreferencesCapabilities
```

**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-personal-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-personal-react-ui/components/theme-provider`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/theme-provider`

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

*Constant*

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

```ts
const ThemeInitializationScript: ({ id, nonce, storageId, }: IThemeInitializationScriptProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ThemeProvider: ({ children, disableTransitionOnChange, }: IThemeProviderProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const ThemeToggleButton: ({ disabled, onThemeChangeRequested, ...props }: IThemeToggleButtonProps) => React.ReactElement
```

**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`

*Constant*

Reads the current theme context from the nearest theme provider.

```ts
const useTheme: () => IThemeProviderState
```

**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-personal-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-personal-react-ui/components/toastr`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/toastr`

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

*Constant*

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

```ts
const Toastr: ({ className, icons, style, toastOptions, ...props }: IToastrProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/errors`

- Constants: [`ERRORS`](#api-errors-ERRORS)

### <a id="api-errors-constants"></a>Constants in `jg-personal-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-personal-react-ui/components/divider`

- Constants: [`Divider`](#api-components-divider-Divider)
- Types: [`IDividerProps`](#api-components-divider-IDividerProps)

### <a id="api-components-divider-constants"></a>Constants in `jg-personal-react-ui/components/divider`

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

*Constant*

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

```ts
const Divider: ({ className, orientation, decorative, role, "aria-orientation": ariaOrientation, ...props }: IDividerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/empty-state`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/empty-state`

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

*Constant*

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

```ts
const EmptyState: ({ asChild, className, ...props }: IEmptyStateProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting empty-state guidance.

```ts
const EmptyStateDescription: ({ asChild, className, ...props }: IEmptyStateDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders the primary empty-state message.

```ts
const EmptyStateTitle: ({ asChild, className, ...props }: IEmptyStateTitleProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/progress`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/progress`

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

*Constant*

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

```ts
const Progress: ({ className, indicatorClassName, indeterminate, max, value, ...props }: IProgressProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/spinner`

- Constants: [`Spinner`](#api-components-spinner-Spinner)
- Types: [`ISpinnerProps`](#api-components-spinner-ISpinnerProps)

### <a id="api-components-spinner-constants"></a>Constants in `jg-personal-react-ui/components/spinner`

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

*Constant*

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

```ts
const Spinner: ({ className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel, ...props }: ISpinnerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/text-link`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/text-link`

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

*Constant*

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

```ts
const TextLink: ({ className, asChild, variant, ...props }: ITextLinkProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/inline-code`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/inline-code`

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

*Constant*

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

```ts
const formatRepositoryPath: (path: string) => string
```

**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`

*Constant*

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

```ts
const InlineCode: ({ className, children, ...props }: IInlineCodeProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/copy-button`

- Constants: [`COPY_BUTTON_FEEDBACK_DURATION_MS`](#api-components-copy-button-COPY_BUTTON_FEEDBACK_DURATION_MS), [`CopyButton`](#api-components-copy-button-CopyButton)
- Types: [`ICopyButtonProps`](#api-components-copy-button-ICopyButtonProps)

### <a id="api-components-copy-button-constants"></a>Constants in `jg-personal-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-CopyButton"></a>`CopyButton`

*Constant*

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
const CopyButton: ({ "aria-label": ariaLabel, className, copiedFeedbackDuration, copiedLabel, copyLabel, disabled, label, size, title, value, variant, ...props }: ICopyButtonProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/form`

- Constants: [`Checkbox`](#api-components-form-Checkbox), [`DEFAULT_FORM_PROPS`](#api-components-form-DEFAULT_FORM_PROPS), [`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)
- 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-constants"></a>Constants in `jg-personal-react-ui/components/form`

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

*Constant*

Renders the shared checkbox control with a checked indicator.

```ts
const Checkbox: ({ asChild, checked, className, children, defaultChecked, indeterminate, onCheckedChange, ...props }: ICheckboxProps) => React.ReactElement
```

**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-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-Field"></a>`Field`

*Constant*

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

```ts
const Field: ({ className, ...props }: IFieldProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting help text for a field.

```ts
const FieldDescription: ({ className, ...props }: IFieldDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders validation error text for a field.

```ts
const FieldError: ({ className, ...props }: IFieldErrorProps) => React.ReactElement
```

**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`

*Constant*

Renders a vertical group for multiple fields or choices.

```ts
const FieldGroup: ({ className, ...props }: IFieldGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders a compact legend for grouped form controls.

```ts
const FieldLegend: ({ className, ...props }: IFieldLegendProps) => React.ReactElement
```

**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`

*Constant*

Renders a fieldset without browser default border spacing.

```ts
const FieldSet: ({ className, ...props }: IFieldSetProps) => React.ReactElement
```

**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`

*Constant*

Renders the shared text input surface.

```ts
const Input: ({ className, type, ...props }: IInputProps) => React.ReactElement
```

**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`

*Constant*

Renders an accessible native form label.

```ts
const Label: ({ className, ...props }: ILabelProps) => React.ReactElement
```

**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`

*Constant*

Provides radio group state and layout.

```ts
const RadioGroup: ({ className, dir, loop, onValueChange, orientation, ...props }: IRadioGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders an individual radio option with a selected indicator.

```ts
const RadioGroupItem: ({ asChild, className, children, ...props }: IRadioGroupItemProps) => React.ReactElement
```

**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`

*Constant*

Provides select state through the Base UI select root.

```ts
const Select: ({ onOpenChange, onValueChange, ...props }: ISelectProps) => React.ReactElement
```

**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`

*Constant*

Renders themed select content inside a portal.

```ts
const SelectContent: ({ align, alignItemWithTrigger, alignOffset, arrowPadding, asChild, avoidCollisions, className, children, collisionAvoidance, collisionBoundary, collisionPadding, finalFocus, forceMount, hideWhenDetached, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onPointerDownOutside, position, side, sideOffset, sticky, ...props }: ISelectContentProps) => React.ReactElement
```

**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`

*Constant*

Renders a select option with a check indicator.

```ts
const SelectItem: ({ asChild, className, children, label, textValue, ...props }: ISelectItemProps) => React.ReactElement
```

**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`

*Constant*

Renders the select trigger with the shared input surface styling.

```ts
const SelectTrigger: ({ asChild, className, children, ...props }: ISelectTriggerProps) => React.ReactElement
```

**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`

*Constant*

Renders selected select value text or placeholder content.

```ts
const SelectValue: ({ asChild, children, ...props }: ISelectValueProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const Switch: ({ asChild, className, children, onCheckedChange, size, ...props }: ISwitchProps) => React.ReactElement
```

**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`

*Constant*

Renders the shared multiline text input surface.

```ts
const Textarea: ({ className, ...props }: ITextareaProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/tabs`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/tabs`

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

*Constant*

Provides the tabs root state and orientation context.

```ts
const Tabs: ({ activationMode, className, orientation, ...props }: ITabsProps) => React.ReactElement
```

**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`

*Constant*

Renders the panel content associated with a selected tab.

```ts
const TabsContent: ({ className, forceMount, keepMounted, ...props }: ITabsContentProps) => React.ReactElement
```

**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`

*Constant*

Renders the segmented control container for tab triggers.

```ts
const TabsList: ({ activateOnFocus, className, overflowBehavior, onFocusCapture, ref, children, ...props }: ITabsListProps) => React.ReactElement
```

**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`

*Constant*

Renders an individual tab selection control.

```ts
const TabsTrigger: ({ asChild, "aria-label": ariaLabel, children, className, title, ...props }: ITabsTriggerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/dropdown-menu`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/dropdown-menu`

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

*Constant*

Provides dropdown menu root state and positioning context.

```ts
const DropdownMenu: ({ actionsRef, loopFocus, onOpenChange, ...props }: IDropdownMenuProps) => React.ReactElement
```

**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`

*Constant*

Renders a dropdown menu checkbox item with a check indicator.

```ts
const DropdownMenuCheckboxItem: ({ asChild, checked, className, children, closeOnClick, defaultChecked, label, onCheckedChange, onClick, onSelect, textValue, variant, ...props }: IDropdownMenuCheckboxItemProps) => React.ReactElement
```

**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`

*Constant*

Renders themed dropdown menu content inside a portal.

```ts
const DropdownMenuContent: ({ align, alignOffset, arrowPadding, asChild, avoidCollisions, children, className, collisionAvoidance, collisionBoundary, collisionPadding, finalFocus, forceMount, hideWhenDetached, loop, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onPointerDownOutside, side, sideOffset, ...props }: IDropdownMenuContentProps) => React.ReactElement
```

**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`

*Constant*

Groups related dropdown menu items.

```ts
const DropdownMenuGroup: ({ ...props }: IDropdownMenuGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders a selectable dropdown menu item.

```ts
const DropdownMenuItem: ({ asChild, className, children, closeOnClick, inset, label, onClick, onSelect, textValue, variant, ...props }: IDropdownMenuItemProps) => React.ReactElement
```

**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`

*Constant*

Renders a non-interactive dropdown menu label.

```ts
const DropdownMenuLabel: ({ className, inset, ...props }: IDropdownMenuLabelProps) => React.ReactElement
```

**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`

*Constant*

Provides selection state for dropdown menu radio items.

```ts
const DropdownMenuRadioGroup: ({ onValueChange, ...props }: IDropdownMenuRadioGroupProps) => React.ReactElement
```

**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`

*Constant*

Renders a dropdown menu radio item with a selection indicator.

```ts
const DropdownMenuRadioItem: ({ asChild, className, children, closeOnClick, label, onClick, onSelect, textValue, variant, ...props }: IDropdownMenuRadioItemProps) => React.ReactElement
```

**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`

*Constant*

Renders a visual divider between dropdown menu groups.

```ts
const DropdownMenuSeparator: ({ className, ...props }: IDropdownMenuSeparatorProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DropdownMenuShortcut: ({ className, ...props }: IDropdownMenuShortcutProps) => React.ReactElement
```

**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`

*Constant*

Provides nested dropdown menu state.

```ts
const DropdownMenuSub: ({ loopFocus, onOpenChange, ...props }: IDropdownMenuSubProps) => React.ReactElement
```

**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`

*Constant*

Renders nested dropdown menu content.

```ts
const DropdownMenuSubContent: ({ align, className, side, sideOffset, ...props }: IDropdownMenuSubContentProps) => React.ReactElement
```

**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`

*Constant*

Renders the trigger that opens a nested dropdown menu.

```ts
const DropdownMenuSubTrigger: ({ asChild, className, children, inset, label, textValue, variant, ...props }: IDropdownMenuSubTriggerProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens the dropdown menu.

```ts
const DropdownMenuTrigger: ({ asChild, children, ...props }: IDropdownMenuTriggerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/tooltip`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/tooltip`

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

*Constant*

Provides tooltip state for a trigger and content pair.

```ts
const Tooltip: ({ delayDuration, disableHoverableContent, disableHoverablePopup, ...props }: ITooltipProps) => React.ReactElement
```

**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`

*Constant*

Renders themed tooltip content inside a portal.

```ts
const TooltipContent: ({ align, alignOffset, arrowPadding, asChild, avoidCollisions, children, className, collisionAvoidance, collisionBoundary, collisionPadding, forceMount, hideWhenDetached, side, sideOffset, sticky, ...props }: ITooltipContentProps) => React.ReactElement
```

**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`

*Constant*

Provides shared tooltip timing defaults for a subtree.

```ts
const TooltipProvider: ({ delay, delayDuration, disableHoverableContent, skipDelayDuration, timeout, ...props }: ITooltipProviderProps) => React.ReactElement
```

**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`

*Constant*

Renders the focusable or hoverable element that opens tooltip content.

```ts
const TooltipTrigger: ({ asChild, children, delay, ...props }: ITooltipTriggerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/typography`

- Constants: [`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), [`codeFileStatusVariants`](#api-components-typography-codeFileStatusVariants), [`Heading`](#api-components-typography-Heading), [`headingVariants`](#api-components-typography-headingVariants), [`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)
- 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-constants"></a>Constants in `jg-personal-react-ui/components/typography`

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

*Constant*

Renders a readable article-width container.

```ts
const Article: ({ className, ...props }: IArticleProps) => React.ReactElement
```

**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`

*Constant*

Renders an article header with compact bottom spacing.

```ts
const ArticleHeader: ({ className, ...props }: IArticleHeaderProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose blockquote with left-border treatment.

```ts
const Blockquote: ({ className, ...props }: IBlockquoteProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const CodeBlock: ({ className, children, copyValue, copyLabel, filePath, headerLabel, headerRole, headerMeta, fileIcon, fileStatus, hasHeader, hasCopyButton, hasPreferencesControls, hasSyntaxHighlighting, language: declaredLanguage, prefersWrappedCode: prefersWrappedCodeOverride, shouldWrapContent, style, ...props }: ICodeBlockProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const CodeFileHeader: ({ actions, className, filePath, fileIcon, fileStatus, headerLabel, headerRole, headerMeta, languageLabel, ...props }: ICodeFileHeaderProps) => React.ReactElement
```

**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-codeFileStatusVariants"></a>`codeFileStatusVariants`

*Constant*

Builds semantic classes for a source file's change status.

```ts
const codeFileStatusVariants: (props?: { status?: "added" | "modified" | "removed" | null } & ClassProp) => string
```

**Example**

```ts
import { codeFileStatusVariants } from 'jg-react-ui/components/typography';
const classes = codeFileStatusVariants({ status: 'modified' });
```

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

*Constant*

Renders a semantic heading for the supported typography scale.

```ts
const Heading: ({ className, level, role, ...props }: IHeadingProps) => React.ReactElement
```

**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-headingVariants"></a>`headingVariants`

*Constant*

Builds statement typography independently from its semantic heading level.

```ts
const headingVariants: (props?: { role?: "section" | "display" | "public-page" | "product-page" | "product-statement" | null } & ClassProp) => string
```

**Example**

```ts
import { headingVariants } from 'jg-react-ui/components/typography';
const classes = headingVariants({ role: 'section' });
```

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

*Constant*

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

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

**Example**

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

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

*Constant*

Renders keyboard shortcut text with keycap styling.

```ts
const KeyboardKey: ({ className, ...props }: IKeyboardKeyProps) => React.ReactElement
```

**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`

*Constant*

Renders larger emphasized inline prose.

```ts
const LargeText: ({ className, ...props }: ILargeTextProps) => React.ReactElement
```

**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`

*Constant*

Renders emphasized introductory prose.

```ts
const Lead: ({ className, ...props }: ILeadProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose list item.

```ts
const ListItem: ({ className, ...props }: IListItemProps) => React.ReactElement
```

**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`

*Constant*

Renders lower-emphasis supporting prose.

```ts
const MutedText: ({ className, ...props }: IMutedTextProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose ordered list.

```ts
const OrderedList: ({ className, ...props }: IOrderedListProps) => React.ReactElement
```

**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`

*Constant*

Renders a default prose paragraph.

```ts
const Paragraph: ({ className, ...props }: IParagraphProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose section with consistent vertical spacing.

```ts
const Section: ({ className, ...props }: ISectionProps) => React.ReactElement
```

**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`

*Constant*

Renders small supporting text with block layout.

```ts
const SmallText: ({ className, ...props }: ISmallTextProps) => React.ReactElement
```

**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`

*Constant*

Renders a full-width prose table.

```ts
const Table: ({ className, ...props }: ITableProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose table body cell.

```ts
const TableCell: ({ className, ...props }: ITableCellProps) => React.ReactElement
```

**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`

*Constant*

Renders a horizontally scrollable wrapper for prose tables.

```ts
const TableContainer: ({ className, ...props }: ITableContainerProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose table header cell.

```ts
const TableHeaderCell: ({ className, ...props }: ITableHeaderCellProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose table row.

```ts
const TableRow: ({ className, ...props }: ITableRowProps) => React.ReactElement
```

**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`

*Constant*

Renders a prose unordered list.

```ts
const UnorderedList: ({ className, ...props }: IUnorderedListProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/dialog`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/dialog`

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

*Constant*

Provides the dialog root state and accessibility context.

```ts
const Dialog: ({ children, actionsRef: providedActionsRef, getNavigationSession, isDismissalDisabled, isOverlayCloseEnabled, onOpenChange, onOpenChangeComplete, open, ...props }: IDialogProps) => React.ReactElement
```

**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`

*Constant*

Renders the only vertically scrollable region within a dialog surface.

```ts
const DialogBody: ({ className, padding, ...props }: IDialogBodyProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DialogCancel: (props: IDialogCancelProps) => React.ReactElement | null
```

**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`

*Constant*

Renders the interactive element that closes the dialog.

```ts
const DialogClose: ({ asChild, children, disabled, ...props }: IDialogCloseProps) => React.ReactElement
```

**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`

*Constant*

Renders the themed dialog content inside a portal.

```ts
const DialogContent: ({ asChild, backButtonAriaLabel, backButtonIcon, children, closeButtonAriaLabel, closeButtonIcon, forceMount, initialFocus, isCloseButtonVisible, size, ...props }: IDialogContentProps) => React.ReactElement
```

**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`

*Constant*

Provides optional supporting context for the dialog title.

```ts
const DialogDescription: ({ className, ...props }: IDialogDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Groups dialog actions in a responsive footer layout.

```ts
const DialogFooter: (props: IDialogFooterProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DialogHeader: ({ actions, children, leadingAction, layout, ...props }: IDialogHeaderProps) => React.ReactElement
```

**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`

*Constant*

Announces the primary dialog heading.

```ts
const DialogTitle: ({ className, ...props }: IDialogTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens the dialog.

```ts
const DialogTrigger: ({ asChild, children, ...props }: IDialogTriggerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/drawer`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/drawer`

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

*Constant*

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

```ts
const Drawer: ({ children, defaultOpen, isDismissalDisabled, modal, onOpenChange, onOpenChangeComplete, open, side, ...props }: IDrawerProps) => React.ReactElement
```

**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`

*Constant*

Renders the drawer's vertically scrollable content region.

```ts
const DrawerBody: ({ className, ...props }: IDrawerBodyProps) => React.ReactElement
```

**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`

*Constant*

Renders an interactive element that closes a drawer.

```ts
const DrawerClose: ({ asChild, children, disabled, ...props }: IDrawerCloseProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DrawerContent: ({ children, closeButtonAriaLabel, closeButtonIcon, density, forceMount, size, viewportStyle, ...props }: IDrawerContentProps) => React.ReactElement
```

**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`

*Constant*

Provides supporting context for the drawer title.

```ts
const DrawerDescription: ({ className, ...props }: IDrawerDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders an optional fixed drawer footer below the scrolling body.

```ts
const DrawerFooter: ({ className, ...props }: IDrawerFooterProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const DrawerHeader: ({ actions, children, ...props }: IDrawerHeaderProps) => React.ReactElement
```

**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`

*Constant*

Announces the drawer heading.

```ts
const DrawerTitle: ({ className, ...props }: IDrawerTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens a drawer.

```ts
const DrawerTrigger: ({ asChild, children, ...props }: IDrawerTriggerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/alert-dialog`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/alert-dialog`

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

*Constant*

Provides the alert dialog root state and accessibility context.

```ts
const AlertDialog: ({ children, actionsRef: providedActionsRef, getNavigationSession, onOpenChange, onOpenChangeComplete, open, ...props }: IAlertDialogProps) => React.ReactElement
```

**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`

*Constant*

Renders the primary alert dialog action with shared button styling.

```ts
const AlertDialogAction: ({ asChild, children, className, variant, size, ...props }: IAlertDialogActionProps) => React.ReactElement
```

**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`

*Constant*

Renders the themed alert dialog content inside a portal.

```ts
const AlertDialogContent: ({ children, ...props }: IAlertDialogContentProps) => React.ReactElement
```

**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`

*Constant*

Provides supporting context for the alert dialog title.

```ts
const AlertDialogDescription: ({ className, ...props }: IAlertDialogDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Groups alert dialog actions in a responsive footer layout.

```ts
const AlertDialogFooter: (props: IAlertDialogFooterProps) => React.ReactElement
```

**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`

*Constant*

Groups the alert dialog title, media, and description.

```ts
const AlertDialogHeader: (props: IAlertDialogHeaderProps) => React.ReactElement
```

**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`

*Constant*

Announces the primary alert dialog heading.

```ts
const AlertDialogTitle: ({ className, ...props }: IAlertDialogTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders the interactive element that opens the alert dialog.

```ts
const AlertDialogTrigger: ({ asChild, children, ...props }: IAlertDialogTriggerProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/confirmation-dialog`

- Constants: [`ConfirmationDialog`](#api-components-confirmation-dialog-ConfirmationDialog), [`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-constants"></a>Constants in `jg-personal-react-ui/components/confirmation-dialog`

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

*Constant*

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

```ts
const ConfirmationDialog: () => React.ReactElement | null
```

**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-useConfirmationDialogStore"></a>`useConfirmationDialogStore`

*Constant*

Stores the active root-mounted confirmation dialog session and completion callback.

```ts
const useConfirmationDialogStore: UseBoundStore
```

**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-personal-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-personal-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-personal-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-personal-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-personal-react-ui/components/layout`

- 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), [`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)
- 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-constants"></a>Constants in `jg-personal-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-Inline"></a>`Inline`

*Constant*

Renders a wrapping inline layout for compact controls and metadata.

```ts
const Inline: ({ className, ...props }: IInlineProps) => React.ReactElement
```

**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`

*Constant*

Renders supporting page-level description text.

```ts
const PageDescription: ({ className, ...props }: IPageDescriptionProps) => React.ReactElement
```

**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`

*Constant*

Renders a page header region with shared responsive spacing.

```ts
const PageHeader: ({ className, ...props }: IPageHeaderProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const PageHeaderMetadata: ({ className, ...props }: IPageHeaderMetadataProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const PageHeaderRow: ({ className, ...props }: IPageHeaderRowProps) => React.ReactElement
```

**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`

*Constant*

Groups the page title and metadata on one responsive row.

```ts
const PageHeaderTitleGroup: ({ className, ...props }: IPageHeaderTitleGroupProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const PageShell: ({ className, ...props }: IPageShellProps) => React.ReactElement
```

**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`

*Constant*

Renders the primary page heading.

```ts
const PageTitle: ({ className, ...props }: IPageTitleProps) => React.ReactElement
```

**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`

*Constant*

Renders a vertical layout stack for grouped content.

```ts
const Stack: ({ className, ...props }: IStackProps) => React.ReactElement
```

**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`

*Constant*

Renders a section surface for framed app content.

```ts
const Surface: ({ className, ...props }: ISurfaceProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/global-error-boundary`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/global-error-boundary`

#### <a id="api-components-global-error-boundary-GlobalErrorBoundary"></a>`GlobalErrorBoundary`

*Constant*

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

```ts
const GlobalErrorBoundary: ({ ref, tabIndex, ...props }: IGlobalErrorBoundaryProps) => ReactElement
```

**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`

*Constant*

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

```ts
const GlobalErrorBoundaryView: ({ "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, className, classNames, description, error, heading, onRefreshClick, refreshButtonLabel, refreshingButtonLabel, statusLabel, ...props }: IGlobalErrorBoundaryViewProps) => ReactElement
```

**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-personal-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-personal-react-ui/components/router-root`

- Constants: [`RouterRoot`](#api-components-router-root-RouterRoot)

### <a id="api-components-router-root-constants"></a>Constants in `jg-personal-react-ui/components/router-root`

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

*Constant*

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

```ts
const RouterRoot: () => ReactElement
```

**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-personal-react-ui/components/lazy-route-progress`

- Constants: [`LazyRouteProgress`](#api-components-lazy-route-progress-LazyRouteProgress)

### <a id="api-components-lazy-route-progress-constants"></a>Constants in `jg-personal-react-ui/components/lazy-route-progress`

#### <a id="api-components-lazy-route-progress-LazyRouteProgress"></a>`LazyRouteProgress`

*Constant*

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

```ts
const LazyRouteProgress: () => ReactElement
```

**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-personal-react-ui/components/load-more-button`

- 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), [`LoadMoreButton`](#api-components-load-more-button-LoadMoreButton)
- 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-constants"></a>Constants in `jg-personal-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-LoadMoreButton"></a>`LoadMoreButton`

*Constant*

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
const LoadMoreButton: ({ "aria-busy": ariaBusy, "aria-label": ariaLabel, className, classNames, disabled, icon, iconPlacement, label, loadingAriaLabel, loadingIcon, loadingLabel, onClick, query, shouldDisableWhenLoading, size, variant, ...props }: ILoadMoreButtonProps) => ReactElement | null
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/query-boundary`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/query-boundary`

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

*Constant*

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

```ts
const QueryBoundary: ({ children, errorAlertProps, loaderProps, loadMoreButtonProps, queries, resolutionKey, isInitialResolutionApproved, renderErrorAlert, renderLoader, renderLoadMoreButton, }: IQueryBoundaryProps) => ReactElement
```

**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-personal-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)
- `isInitialResolutionApproved: boolean` (property)
- `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-personal-react-ui/components/query-error-alert`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/query-error-alert`

#### <a id="api-components-query-error-alert-QueryErrorAlert"></a>`QueryErrorAlert`

*Constant*

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

```ts
const QueryErrorAlert: ({ className, presentation, queries, title, fallbackMessage, retryLabel, retryingLabel, ...props }: IQueryErrorAlertProps) => ReactElement | null
```

**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`

*Constant*

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

```ts
const QueryErrorToastr: ({ queries, toastId, title, fallbackMessage, retryLabel, retryingLabel, }: IQueryErrorToastrProps) => null
```

**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-personal-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-personal-react-ui/components/query-loader`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/query-loader`

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

*Constant*

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

```ts
const QueryLoader: ({ className, classNames, isVisible, layout, queries, size, role, "aria-label": ariaLabel, ...props }: IQueryLoaderProps) => ReactElement | null
```

**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-personal-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-personal-react-ui/components/file-upload`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/file-upload`

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

*Constant*

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
const FileUpload: ({ acceptedFileTypes, allowDuplicateFiles, autoUpload, browseLabel, cancelAllLabel, className, controlsRef, description, disabled, dropZoneClassName, dropZoneLabel, existingFiles, hideUploadAreaLabel, inputProps, isLabelVisible, isPolicyVisible, label, listClassName, maxConcurrentUploads, maxFileBytes, maxFiles, maxTotalBytes, onFileRejected, onItemsChange, onUploadCanceled, onUploadFailure, onUploadSuccess, onUploadAreaExpand, renderPreview, replaceSingleFile, showUploadAreaLabel, startUploadsLabel, statusLabels, uploadFile, validateFile, ...props }: IFileUploadProps<TResult>) => ReactElement
```

**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`

*Constant*

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
const FileUploadDialog: ({ closeLabel, defaultOpen, fileUploadProps, isDismissalDisabled, onDiscard, onOpenChange, onOpenChangeComplete, onSubmit, open: externalOpen, size, submitLabel, title, trigger, ...dialogProps }: IFileUploadDialogProps<TResult>) => ReactElement
```

**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`

*Constant*

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

```ts
const ImageUploadField: ({ acceptedFileTypes, chooseLabel, className, currentImage, description, dialogTitle, disabled, error, isLoading, label, maxFileBytes, onCurrentImageRemove, onDiscard, onFileRejected, onItemsChange, onSubmit, onUploadCanceled, onUploadFailure, onUploadSuccess, removeLabel, replaceLabel, submitLabel, uploadFile, validateFile, ...props }: IImageUploadFieldProps<TResult>) => ReactElement
```

**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-personal-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-personal-react-ui/components/audio-input`

- 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), [`AudioInput`](#api-components-audio-input-AudioInput)
- 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-constants"></a>Constants in `jg-personal-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-AudioInput"></a>`AudioInput`

*Constant*

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

```ts
const AudioInput: ({ autoStart, cancelLabel, cancelResetDelayMs, className, closeButtonAriaLabel, controlsRef, defaultIsDialogOpen, defaultIsRecording, defaultIsTranscriptionEditorVisible, defaultTranscription, dialogDescription, dialogTitle, disabled, isDialogOpen: controlledIsDialogOpen, isErrorVisible, isRecording, isTranscriptionEditorVisible, maxBytes, onCancel, onDialogOpenChange, onElapsedMsChange, onLimitProgressChange, onRecordedBytesChange, onRecordingActiveChange, onRecordingCancel, onRecordingComplete, onRecordingDataAvailable, onRecordingError, onRecordingStart, onRecordingStop, onStatusChange, onTranscriptionComplete, onTranscriptionEditorVisibleChange, onTranscriptionError, onTranscriptionResult, onTranscriptionStatusChange, onTranscriptionTextChange, preferredMimeType, recorderClassName, recorderRootClassName, restartButtonAriaLabel, restartButtonClassName, retryLabel, sendTranscriptionLabel, statusLabels, transcribe, transcribeAndSendLabel, transcribeLabel, transcribeLimitRecordingLabel, transcription, transcriptionActionsClassName, transcriptionPlaceholder, transcriptionTextareaClassName, transcriptionTextareaLabel, triggerAriaLabel, triggerButtonProps, triggerClassName, triggerSize, triggerTitle, triggerVariant, ...rootProps }: IAudioInputProps) => ReactElement
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/markdown`

- Constants: [`getMarkdownImageDisplayWidth`](#api-components-markdown-getMarkdownImageDisplayWidth), [`Markdown`](#api-components-markdown-Markdown)
- Types: [`IMarkdownProps`](#api-components-markdown-IMarkdownProps)

### <a id="api-components-markdown-constants"></a>Constants in `jg-personal-react-ui/components/markdown`

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

*Constant*

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

```ts
const getMarkdownImageDisplayWidth: (title: string | undefined) => number | undefined
```

**Example**

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

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

*Constant*

Renders trusted markdown text through the shared typography system.

```ts
const Markdown: ({ children, className, components, prefersWrappedCode, rehypePlugins, remarkPlugins, shouldOpenLinksInNewTab, skipHtml, ...props }: IMarkdownProps) => React.ReactElement
```

**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-personal-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-personal-react-ui/components/code-preferences-controls`

- Constants: [`CodePreferencesControls`](#api-components-code-preferences-controls-CodePreferencesControls)
- Types: [`ICodePreferencesControlsProps`](#api-components-code-preferences-controls-ICodePreferencesControlsProps)

### <a id="api-components-code-preferences-controls-constants"></a>Constants in `jg-personal-react-ui/components/code-preferences-controls`

#### <a id="api-components-code-preferences-controls-CodePreferencesControls"></a>`CodePreferencesControls`

*Constant*

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

```ts
const CodePreferencesControls: ({ canChangeCodeDiffView, canChangePrefersWrappedCode, className, codeDiffView, isInline, prefersWrappedCode, }: ICodePreferencesControlsProps) => React.ReactElement | null
```

**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-personal-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-personal-react-ui/components/youtube-video`

- Constants: [`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-constants"></a>Constants in `jg-personal-react-ui/components/youtube-video`

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

*Constant*

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

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

**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`

*Constant*

Renders a validated YouTube video through the privacy-enhanced player origin.

```ts
const YouTubeVideo: ({ autoPlay, className, title, videoId, }: IYouTubeVideoProps) => React.ReactElement
```

**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-personal-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)

## <a id="api-entry-components/markdown-editor"></a>`jg-personal-react-ui/components/markdown-editor`

- Constants: [`ChatMarkdownEditor`](#api-components-markdown-editor-ChatMarkdownEditor), [`CompactMarkdownEditor`](#api-components-markdown-editor-CompactMarkdownEditor), [`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), [`MarkdownEditor`](#api-components-markdown-editor-MarkdownEditor), [`WideMarkdownEditor`](#api-components-markdown-editor-WideMarkdownEditor)
- 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-constants"></a>Constants in `jg-personal-react-ui/components/markdown-editor`

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

*Constant*

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

```ts
const ChatMarkdownEditor: ({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-required": ariaRequired, className, controlsRef, disabled, formattingContainer, isShiftEnterSubmit, maxEditorHeight, maxLength, onChange, onSubmitRequest, placeholder, value, }: IChatMarkdownEditorProps) => React.ReactElement
```

**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`

*Constant*

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

```ts
const CompactMarkdownEditor: (props: IMarkdownEditorVariantProps) => React.ReactElement
```

**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-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-MarkdownEditor"></a>`MarkdownEditor`

*Constant*

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

```ts
const MarkdownEditor: ({ className, layout, ...editorProps }: IMarkdownEditorProps) => React.ReactElement
```

**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`

*Constant*

Renders the established wide markdown editor with its existing Milkdown configuration.

```ts
const WideMarkdownEditor: (props: IMarkdownEditorVariantProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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-personal-react-ui/components/code-diff`

- Constants: [`CODE_DIFF_LANGUAGES`](#api-components-code-diff-CODE_DIFF_LANGUAGES), [`CodeDiff`](#api-components-code-diff-CodeDiff)
- Types: [`ICodeDiffLanguage`](#api-components-code-diff-ICodeDiffLanguage), [`ICodeDiffProps`](#api-components-code-diff-ICodeDiffProps)

### <a id="api-components-code-diff-constants"></a>Constants in `jg-personal-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-CodeDiff"></a>`CodeDiff`

*Constant*

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

```ts
const CodeDiff: ({ className, tabIndex, filePath, fileIcon, fileStatus, headerLabel, headerMeta, codeDiffView: codeDiffViewOverride, codeFoldMessageRenderer, disableWorker, extraLinesSurroundingDiff, language, loadingElement, newValue, oldValue, responsiveBreakpoint, showDiffOnly, styles, ...props }: ICodeDiffProps) => React.ReactElement
```

**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-types"></a>Types in `jg-personal-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;
};
```