ContextualHelp

The props declared for ContextualHelp, generated from the types @proyecto-viviana/ui ships.

Import

import { ContextualHelp } from "@proyecto-viviana/ui";

Props

Props for ContextualHelp in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Contextual help popover content.
`content`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Backward-compatible content alias. Prefer children for S2 parity.
`triggerLabel`	string	—	Accessible label for the icon trigger button.
`variant`	'info' \| 'help'	`'help'`	Indicates whether contents are informative or provide help.
`size`	'S' \| 'XS'	`'XS'`	Size of the trigger ActionButton.
`defaultOpen`	false \| true	—	Whether the overlay is open by default (uncontrolled).
`isOpen`	false \| true	—	Whether the overlay is open (controlled).
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when the overlay's open state changes.
`styles`	StyleString	—	Spectrum-defined generated classes for the trigger.
`UNSAFE_className`	string	—	Additional CSS class name for the trigger. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles for the trigger. Use only as a last resort.
`class`	string	—	Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity.
`aria-details`	string	—	Id of the element that provides detailed information.
`slot`	string	—	Slotted context key.
`ref`	HTMLButtonElement \| ((el: HTMLButtonElement) => void) \| { current?: HTMLButtonElement \| null \| undefined; }	—	Ref for the icon trigger button.
`id`	string	—	DOM id for the popover element.
`aria-describedby`	string	—	Id of the element that describes the popover.
`aria-label`	string	—	Accessible label for the popover.
`aria-labelledby`	string	—	Id of the element that labels the popover.
`autoFocus`	false \| true	`true`	Whether focus should move to the popover container on open. solidaria-components
`maxHeight`	number	—	The max height of the popover. solidaria-components
`triggerRef`	() => Element \| null	—	The ref for the element which the popover positions itself with respect to. Required when used standalone (not within a trigger component). solidaria-components
`placement`	'start' \| 'end' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'bottom left' \| 'bottom right' \| 'bottom start' \| 'bottom end' \| 'top left' \| 'top right' \| 'top start' \| 'top end' \| 'left top' \| 'left bottom' \| 'right top' \| 'right bottom' \| 'start top' \| 'start bottom' \| 'end top' \| 'end bottom'	—	The position of the popover relative to the trigger.
`containerPadding`	number	`12`	The placement padding that should be applied between the element and its surrounding container. solidaria-components
`offset`	number	`8`	The additional offset applied along the main axis between the element and its anchor element. solidaria-components
`crossOffset`	number	`0`	The additional offset applied along the cross axis between the element and its anchor element. solidaria-components
`shouldFlip`	false \| true	`true`	Whether the element should flip its orientation when there is insufficient room. solidaria-components
`boundaryElement`	Element	—	A boundary element for placement calculations. solidaria-components
`getTargetRect`	(target: Element) => DOMRect \| null \| undefined	`target.getBoundingClientRect()`	Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection. solidaria-components
`arrowRef`	() => Element \| null	—	A ref for the popover arrow element. solidaria-components
`scrollRef`	() => Element \| null	—	A ref for the scrollable popover element. solidaria-components
`isNonModal`	false \| true	—	Whether the popover is non-modal (allows interaction outside). solidaria-components
`isKeyboardDismissDisabled`	false \| true	—	Whether pressing Escape to close should be disabled. solidaria-components
`shouldCloseOnInteractOutside`	(element: Element) => boolean	—	Filter for which outside interactions should close the popover. solidaria-components
`onFocusWithin`	(e: FocusEvent) => void	—	Handler that is called when the popover or a descendant receives focus. solidaria-components
`onBlurWithin`	(e: FocusEvent) => void	—	Handler that is called when the popover and all descendants lose focus. solidaria-components
`onFocusWithinChange`	(isFocusWithin: boolean) => void	—	Handler that is called when the popover's focus-within state changes. solidaria-components
`isEntering`	false \| true	—	Whether the popover is entering (for animations). solidaria-components
`isExiting`	false \| true	—	Whether the popover is exiting (for animations). solidaria-components
`shouldSkipAnimation`	false \| true	—	Whether the popover should appear and disappear without an entry or exit animation. Used by PreviewTrigger to skip animations when quickly swapping between overlays. solidaria-components

Declared in packages/viviana-ui/src/contextualhelp/index.tsx.

ContextualHelpPopover props

Props for ContextualHelpPopover in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`*	JSX.Element	—	Contextual help popover content.
`class`	string	—	Additional CSS class name.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`	string	—	DOM id for the popover element.
`aria-describedby`	string	—	Id of the element that describes the popover.
`aria-details`	string	—	Identifies the element (or elements) that provide a detailed, extended description for the object. solidaria
`aria-label`	string	—	Accessible label for the popover.
`aria-labelledby`	string	—	Id of the element that labels the popover.
`autoFocus`	false \| true	`true`	Whether focus should move to the popover container on open. solidaria-components
`trigger`	string	—	The name of the component that triggered the popover. solidaria-components
`defaultOpen`	false \| true	—	Whether the popover opens by default (uncontrolled). solidaria-components
`isOpen`	false \| true	—	Whether the popover is open (controlled). solidaria-components
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when the popover's open state changes. solidaria-components
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`maxHeight`	number	—	The max height of the popover. solidaria-components
`triggerRef`	() => Element \| null	—	The ref for the element which the popover positions itself with respect to. Required when used standalone (not within a trigger component). solidaria-components
`placement`	'start' \| 'end' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'bottom left' \| 'bottom right' \| 'bottom start' \| 'bottom end' \| 'top left' \| 'top right' \| 'top start' \| 'top end' \| 'left top' \| 'left bottom' \| 'right top' \| 'right bottom' \| 'start top' \| 'start bottom' \| 'end top' \| 'end bottom'	—	The position of the popover relative to the trigger.
`containerPadding`	number	`12`	The placement padding that should be applied between the element and its surrounding container. solidaria-components
`offset`	number	`8`	The additional offset applied along the main axis between the element and its anchor element. solidaria-components
`crossOffset`	number	`0`	The additional offset applied along the cross axis between the element and its anchor element. solidaria-components
`shouldFlip`	false \| true	`true`	Whether the element should flip its orientation when there is insufficient room. solidaria-components
`boundaryElement`	Element	—	A boundary element for placement calculations. solidaria-components
`getTargetRect`	(target: Element) => DOMRect \| null \| undefined	`target.getBoundingClientRect()`	Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection. solidaria-components
`arrowRef`	() => Element \| null	—	A ref for the popover arrow element. solidaria-components
`scrollRef`	() => Element \| null	—	A ref for the scrollable popover element. solidaria-components
`isNonModal`	false \| true	—	Whether the popover is non-modal (allows interaction outside). solidaria-components
`isKeyboardDismissDisabled`	false \| true	—	Whether pressing Escape to close should be disabled. solidaria-components
`shouldCloseOnInteractOutside`	(element: Element) => boolean	—	Filter for which outside interactions should close the popover. solidaria-components
`onFocusWithin`	(e: FocusEvent) => void	—	Handler that is called when the popover or a descendant receives focus. solidaria-components
`onBlurWithin`	(e: FocusEvent) => void	—	Handler that is called when the popover and all descendants lose focus. solidaria-components
`onFocusWithinChange`	(isFocusWithin: boolean) => void	—	Handler that is called when the popover's focus-within state changes. solidaria-components
`isEntering`	false \| true	—	Whether the popover is entering (for animations). solidaria-components
`isExiting`	false \| true	—	Whether the popover is exiting (for animations). solidaria-components
`shouldSkipAnimation`	false \| true	—	Whether the popover should appear and disappear without an entry or exit animation. Used by PreviewTrigger to skip animations when quickly swapping between overlays. solidaria-components

Declared in packages/viviana-ui/src/contextualhelp/index.tsx.

ContextualHelpStyle props

Props for ContextualHelpStyle in @proyecto-viviana/ui
Prop	Type	Default	Description
`variant`	'info' \| 'help'	`'help'`	Indicates whether contents are informative or provide help.

Declared in packages/viviana-ui/src/contextualhelp/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.