Tabs

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

Import

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

Props

Differs from @proyecto-viviana/solid-spectrum

variant exists only here.

Props for Tabs in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The tabs and panels to render.
`density`	'compact' \| 'regular'	—	Compact reduces tab height and inter-item spacing.
`labelBehavior`	'show' \| 'hide'	—	Whether text labels are visually shown.
`variant`	'terminal' \| 'line' \| 'pill'	—	Visual form of the tab strip. `line` is the default underlined strip; `pill` is the register's glass tab bar — stacked icon-over-label slots in a full-radius glass capsule. `terminal` is the register's matte command strip — the whole row sits in a dithered well and the active tab is a filled chip. `pill` and `terminal` are horizontal-only and never collapse into the overflow picker. Local addition — no S2 counterpart. S2 Tabs ships the `line` form only; `pill` and `terminal` are Glasselated register forms.
`aria-label`	string	—	Accessible label for the tab list. Required when aria-labelledby is not provided.
`aria-labelledby`	string	—	Id of the element labeling the tab list. Required when aria-label is not provided.
`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.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the root tabs element.
`onSelectionChange`	(key: Key) => void	—	Handler for tab selection changes. solidaria-components
`isDisabled`	false \| true	—	Whether the tabs are disabled. solidaria-components
`orientation`	'horizontal' \| 'vertical'	—	The orientation of the tabs. solidaria-components
`items`	T[]	—	The items to render in the tab list. solidaria-components
`getKey`	(item: T) => Key	—	Function to get the key from an item. solidaria-components
`getTextValue`	(item: T) => string	—	Function to get the text value from an item. solidaria-components
`getDisabled`	(item: T) => boolean	—	Function to check if an item is disabled. solidaria-components
`disabledKeys`	Iterable<Key>	—	Keys of disabled tabs. solidaria-components
`selectedKey`	Key	—	The currently selected tab key (controlled). solidaria-components
`defaultSelectedKey`	Key	—	The default selected tab key (uncontrolled). solidaria-components
`keyboardActivation`	'manual' \| 'automatic'	—	The keyboard activation mode. solidaria-components

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

Tab props

Props for Tab in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: TabRenderProps) => JSX.Element)	—	The tab contents.
`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.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`id`*	Key	—	The unique key for the tab. solidaria-components
`aria-describedby`	string	—	ID of element that describes the tab. solidaria
`aria-details`	string	—	ID of element that provides more details for the tab. solidaria
`aria-label`	string	—	Label for the tab. solidaria
`aria-labelledby`	string	—	ID reference for the tab label. solidaria
`isDisabled`	false \| true	—	Whether the tab is disabled. solidaria

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

TabList props

Differs from @proyecto-viviana/solid-spectrum

trailing exists only here.

Props for TabList in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((item: T) => JSX.Element)	—	Static tabs or a render function for collection items.
`trailing`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Content parked flush right inside the tab strip — the register's readout (a count, a status, a keyboard hint). Rendered as a sibling of the `role="tablist"` element, never inside it, so it cannot violate `aria-required-children`. Decorative by default; give it its own accessible text if it carries meaning. Local addition — no S2 counterpart.
`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.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`aria-describedby`	string	—	ID of element that describes the tab list. solidaria
`aria-label`	string	—	Label for the tab list. solidaria
`aria-labelledby`	string	—	ID of element that labels the tab list. solidaria
`isDisabled`	false \| true	—	Whether the tab list is disabled. solidaria
`orientation`	'horizontal' \| 'vertical'	—	The orientation of the tab list. solidaria
`items`	T[]	—	Items to render in the tab list. solidaria-components
`keyboardActivation`	'manual' \| 'automatic'	—	How tabs are activated (on focus or on click). solidaria

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

TabPanel props

Props for TabPanel in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement \| ((renderProps: TabPanelRenderProps) => JSX.Element)	—	The panel contents.
`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.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`id`	Key	—	The key of the associated tab. solidaria
`aria-describedby`	string	—	ID of element that describes the tab panel. solidaria
`aria-details`	string	—	ID of element that provides more details for the tab panel. solidaria
`aria-label`	string	—	Label for the tab panel. solidaria
`aria-labelledby`	string	—	ID of element that labels the tab panel. solidaria
`shouldForceMount`	false \| true	—	Whether to keep the panel mounted when not selected. solidaria-components

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

TabPanels props

Props for TabPanels in @proyecto-viviana/ui
Prop	Type	Default	Description
`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.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`slot`	string	—	Slot name when used in a Spectrum context.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The grouped tab panels. solidaria-components

Declared in packages/viviana-ui/src/tabs/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.