# `@pexip/components`

Shared UI component library based on Pexip's design system.

## Install

`npm install @pexip/components`

## Usage

In your project, simply do the following:

```tsx
import {FullSizeWindow, Sidebar} from '@pexip/components';

() => <FullSizeWindow>My stuff</FullSizeWindow>;
```

There are some global styles as well, with fonts, tokens, etc.

```tsx
// Import fonts
import '@pexip/components/src/fonts.css';
// Import other global styles
import '@pexip/components/dist/index.css';
```

## Enumerations

| Enumeration | Description |
| ------ | ------ |
| [Color](enumerations/Color.mdx) | - |
| [RgbColor](enumerations/RgbColor.mdx) | - |
| [FontVariant](enumerations/FontVariant.mdx) | - |
| [LockStyle](enumerations/LockStyle.mdx) | - |
| [ProgressBarColor](enumerations/ProgressBarColor.mdx) | - |
| [AvatarType](enumerations/AvatarType.mdx) | - |
| [ModalType](enumerations/ModalType.mdx) | - |
| [StatCardVariant](enumerations/StatCardVariant.mdx) | - |
| [TestId](enumerations/TestId.mdx) | - |

## Interfaces

| Interface | Description |
| ------ | ------ |
| [IconSource](interfaces/IconSource.mdx) | - |
| [IconCollection](interfaces/IconCollection.mdx) | - |
| [LoadingBoxProps](interfaces/LoadingBoxProps.mdx) | - |
| [EnhancerProps](interfaces/EnhancerProps.mdx) | - |
| [FloatRootOverflow](interfaces/FloatRootOverflow.mdx) | - |
| [VideoHandle](interfaces/VideoHandle.mdx) | - |
| [FullSizeWindowCommonProps](interfaces/FullSizeWindowCommonProps.mdx) | - |
| [ModalHandle](interfaces/ModalHandle.mdx) | - |
| [MultistepItem](interfaces/MultistepItem.mdx) | - |
| [StatCardRowData](interfaces/StatCardRowData.mdx) | - |
| [ToastProps](interfaces/ToastProps.mdx) | - |
| [WithTransitionProps](interfaces/WithTransitionProps.mdx) | - |

## Type Aliases

| Type Alias | Description |
| ------ | ------ |
| [Breakpoint](type-aliases/Breakpoint.mdx) | - |
| [BadgeCounterProps](type-aliases/BadgeCounterProps.mdx) | - |
| [ButtonTextProps](type-aliases/ButtonTextProps.mdx) | - |
| [ButtonProps](type-aliases/ButtonProps.mdx) | - |
| [AlignWithFloatRootTrigger](type-aliases/AlignWithFloatRootTrigger.mdx) | - |
| [InteractiveElementHTMLTag](type-aliases/InteractiveElementHTMLTag.mdx) | - |
| [InteractiveElementProps](type-aliases/InteractiveElementProps.mdx) | - |
| [PanelProps](type-aliases/PanelProps.mdx) | - |
| [IScrollbars](type-aliases/IScrollbars.mdx) | - |
| [SimpleButtonProps](type-aliases/SimpleButtonProps.mdx) | - |
| [TextProps](type-aliases/TextProps.mdx) | - |
| [TextLinkProps](type-aliases/TextLinkProps.mdx) | - |
| [NotificationTooltipPosition](type-aliases/NotificationTooltipPosition.mdx) | - |
| [NotificationTooltipProps](type-aliases/NotificationTooltipProps.mdx) | - |
| [OverlayOpacity](type-aliases/OverlayOpacity.mdx) | - |
| [FullSizeWindowColorBackgroundProps](type-aliases/FullSizeWindowColorBackgroundProps.mdx) | - |
| [FullSizeWindowImageBackgroundProps](type-aliases/FullSizeWindowImageBackgroundProps.mdx) | - |
| [StatusItem](type-aliases/StatusItem.mdx) | - |
| [ActivityCardAction](type-aliases/ActivityCardAction.mdx) | - |
| [AriaMenuProps](type-aliases/AriaMenuProps.mdx) | - |
| [AriaSubMenuContentHelpers](type-aliases/AriaSubMenuContentHelpers.mdx) | Helpers passed to a submenu's `content` render function, allowing the content to close the whole menu or navigate back to the previous level. |
| [AriaSubMenu](type-aliases/AriaSubMenu.mdx) | A submenu that opens in place inside an [AriaMenu](variables/AriaMenu.mdx) when its parent item is clicked. A submenu can either render a nested list of [AriaMenuItem](type-aliases/AriaMenuItem.mdx) (which can themselves open further submenus) or arbitrary React content. When a submenu is open, a back button is rendered at the top of the menu to return to the previous level. |
| [AriaMenuItem](type-aliases/AriaMenuItem.mdx) | The structure of a menu item that can be used to create a dropdown menu. |
| [BreadcrumbItem](type-aliases/BreadcrumbItem.mdx) | - |
| [DropContentPosition](type-aliases/DropContentPosition.mdx) | - |
| [DropContentType](type-aliases/DropContentType.mdx) | - |
| [GroupProps](type-aliases/GroupProps.mdx) | - |
| [MenuItem](type-aliases/MenuItem.mdx) | - |
| [MenuAction](type-aliases/MenuAction.mdx) | - |
| [MenuContent](type-aliases/MenuContent.mdx) | - |
| [ModalProps](type-aliases/ModalProps.mdx) | - |
| [MultiselectCoreProps](type-aliases/MultiselectCoreProps.mdx) | - |
| [MultistepIndicatorProps](type-aliases/MultistepIndicatorProps.mdx) | - |
| [NotificationToastMessage](type-aliases/NotificationToastMessage.mdx) | - |
| [NotificationToastSignal](type-aliases/NotificationToastSignal.mdx) | - |
| [SelectProps](type-aliases/SelectProps.mdx) | - |
| [TableResultsCountProps](type-aliases/TableResultsCountProps.mdx) | - |
| [TagItem](type-aliases/TagItem.mdx) | - |
| [ToastPosition](type-aliases/ToastPosition.mdx) | - |
| [Theme](type-aliases/Theme.mdx) | - |
| [Option](type-aliases/Option.mdx) | - |
| [MultiselectOption](type-aliases/MultiselectOption.mdx) | - |
| [ButtonHTMLTag](type-aliases/ButtonHTMLTag.mdx) | - |
| [InlineElement](type-aliases/InlineElement.mdx) | - |
| [HeadingElement](type-aliases/HeadingElement.mdx) | - |
| [ClickEventHandler](type-aliases/ClickEventHandler.mdx) | - |
| [ImageSrc](type-aliases/ImageSrc.mdx) | - |
| [BackgroundImageSrc](type-aliases/BackgroundImageSrc.mdx) | - |
| [LinkTarget](type-aliases/LinkTarget.mdx) | - |
| [ExtendedTooltipPosition](type-aliases/ExtendedTooltipPosition.mdx) | - |
| [TooltipPosition](type-aliases/TooltipPosition.mdx) | - |
| [AllSize](type-aliases/AllSize.mdx) | - |
| [BaseSizeModifier](type-aliases/BaseSizeModifier.mdx) | - |
| [SizeModifier](type-aliases/SizeModifier.mdx) | - |
| [LogoSizeModifier](type-aliases/LogoSizeModifier.mdx) | - |
| [StandardSizeModifier](type-aliases/StandardSizeModifier.mdx) | - |
| [ExtendedSizeModifier](type-aliases/ExtendedSizeModifier.mdx) | - |
| [ModalSizeModifier](type-aliases/ModalSizeModifier.mdx) | - |
| [VideoWrapperSizeModifier](type-aliases/VideoWrapperSizeModifier.mdx) | - |
| [ButtonModifiersValues](type-aliases/ButtonModifiersValues.mdx) | - |
| [ColorScheme](type-aliases/ColorScheme.mdx) | - |
| [ButtonVariant](type-aliases/ButtonVariant.mdx) | - |
| [InputVariant](type-aliases/InputVariant.mdx) | - |
| [LabelModifier](type-aliases/LabelModifier.mdx) | - |
| [ShadowModifier](type-aliases/ShadowModifier.mdx) | - |
| [HeadingFontVariant](type-aliases/HeadingFontVariant.mdx) | - |
| [StatIndicatorVariant](type-aliases/StatIndicatorVariant.mdx) | - |
| [TextVariant](type-aliases/TextVariant.mdx) | - |
| [VideoWrapperVariant](type-aliases/VideoWrapperVariant.mdx) | - |
| [FullSizeWindowBackgroundVariant](type-aliases/FullSizeWindowBackgroundVariant.mdx) | - |
| [BadgeCounterVariant](type-aliases/BadgeCounterVariant.mdx) | - |

## Variables

| Variable | Description |
| ------ | ------ |
| [IconTypes](variables/IconTypes.mdx) | - |
| [breakpoints](variables/breakpoints.mdx) | - |
| [variables](variables/variables.mdx) | - |
| [ActionsRow](variables/ActionsRow.mdx) | - |
| [Announcer](variables/Announcer.mdx) | Announcer component that announces messages to screen readers via aria-live region. This component should be placed at the top of the application. |
| [Audio](variables/Audio.mdx) | - |
| [BadgeCounter](variables/BadgeCounter.mdx) | - |
| [Box](variables/Box.mdx) | - |
| [BoxHeader](variables/BoxHeader.mdx) | - |
| [LoadingBox](variables/LoadingBox.mdx) | - |
| [Enhancers](variables/Enhancers.mdx) | - |
| [ButtonText](variables/ButtonText.mdx) | - |
| [Button](variables/Button.mdx) | - |
| [RefButton](variables/RefButton.mdx) | - |
| [CallToAction](variables/CallToAction.mdx) | - |
| [Checkbox](variables/Checkbox.mdx) | - |
| [CoreHeader](variables/CoreHeader.mdx) | - |
| [Divider](variables/Divider.mdx) | - |
| [DragAndDrop](variables/DragAndDrop.mdx) | - |
| [Draggable](variables/Draggable.mdx) | A wrapper that makes its children draggable via pointer (and, when `isMoveableWithArrowKeys` is set, the keyboard). |
| [FileUpload](variables/FileUpload.mdx) | - |
| [Heading](variables/Heading.mdx) | - |
| [Icon](variables/Icon.mdx) | - |
| [Input](variables/Input.mdx) | - |
| [InputLabel](variables/InputLabel.mdx) | - |
| [InteractiveElement](variables/InteractiveElement.mdx) | - |
| [RefInteractiveElement](variables/RefInteractiveElement.mdx) | - |
| [LineHeading](variables/LineHeading.mdx) | - |
| [ListBoxLink](variables/ListBoxLink.mdx) | - |
| [ListLink](variables/ListLink.mdx) | - |
| [Logo](variables/Logo.mdx) | - |
| [Panel](variables/Panel.mdx) | - |
| [PexipLogo](variables/PexipLogo.mdx) | - |
| [Pill](variables/Pill.mdx) | - |
| [ProgressBar](variables/ProgressBar.mdx) | - |
| [RadioButton](variables/RadioButton.mdx) | - |
| [RangeSlider](variables/RangeSlider.mdx) | - |
| [Scrollbars](variables/Scrollbars.mdx) | - |
| [SimpleButton](variables/SimpleButton.mdx) | SimpleButton looks and acts mostly the same as a normal Button except it has less features. The idea is to make it easy to do use composition (children components) to add desired behaviour. |
| [RefSimpleButton](variables/RefSimpleButton.mdx) | - |
| [Spinner](variables/Spinner.mdx) | - |
| [StatIndicator](variables/StatIndicator.mdx) | - |
| [StepNumber](variables/StepNumber.mdx) | - |
| [SvgImage](variables/SvgImage.mdx) | - |
| [Text](variables/Text.mdx) | - |
| [TextArea](variables/TextArea.mdx) | - |
| [TextHeading](variables/TextHeading.mdx) | - |
| [TextLink](variables/TextLink.mdx) | - |
| [ToggleSwitch](variables/ToggleSwitch.mdx) | - |
| [ToggleSwitchDisplay](variables/ToggleSwitchDisplay.mdx) | Presentational version of ToggleSwitch that renders only the visual toggle indicator and label text — it does not render an `<input>` or manage any interaction/state itself. |
| [CustomTooltip](variables/CustomTooltip.mdx) | - |
| [NotificationTooltip](variables/NotificationTooltip.mdx) | - |
| [Tooltip](variables/Tooltip.mdx) | Tooltips need to be accessible to keyboard and screen reader users, so we ensure that they are only placed on focusable and hoverable elements. For example, plain text and disabled buttons aren't focusable, meaning keyboard and screen reader users would be unable to access the information in that tooltip. |
| [URLToLink](variables/URLToLink.mdx) | - |
| [Video](variables/Video.mdx) | - |
| [CardLayout](variables/CardLayout.mdx) | - |
| [CenterLayout](variables/CenterLayout.mdx) | - |
| [FullSizeWindow](variables/FullSizeWindow.mdx) | - |
| [FullscreenLayout](variables/FullscreenLayout.mdx) | - |
| [FullscreenOverlay](variables/FullscreenOverlay.mdx) | - |
| [FullscreenSpinner](variables/FullscreenSpinner.mdx) | - |
| [Cell](variables/Cell.mdx) | - |
| [Grid](variables/Grid.mdx) | - |
| [Scrim](variables/Scrim.mdx) | - |
| [Wrapper](variables/Wrapper.mdx) | - |
| [AboutText](variables/AboutText.mdx) | - |
| [AboutModal](variables/AboutModal.mdx) | - |
| [Accordion](variables/Accordion.mdx) | - |
| [ActivityCard](variables/ActivityCard.mdx) | - |
| [ariaMenuOpenStateSignal](variables/ariaMenuOpenStateSignal.mdx) | - |
| [AriaMenu](variables/AriaMenu.mdx) | AriaMenu component represents a dropdown menu. Menu items can open submenus in place, rendering either a nested list of items or arbitrary React content, with a back button to return to the previous level. |
| [AspectRatio](variables/AspectRatio.mdx) | A wrapper that makes its children element bound to an aspect ratio. Default ration is 16:9, `{width: 16, height: 9}` |
| [ColorPickerPreviewButton](variables/ColorPickerPreviewButton.mdx) | - |
| [ImagePreviewButton](variables/ImagePreviewButton.mdx) | - |
| [ColorPreviewButton](variables/ColorPreviewButton.mdx) | - |
| [Avatar](variables/Avatar.mdx) | - |
| [Bar](variables/Bar.mdx) | - |
| [Breadcrumbs](variables/Breadcrumbs.mdx) | - |
| [CakeTimer](variables/CakeTimer.mdx) | - |
| [Captions](variables/Captions.mdx) | - |
| [CircleCountDown](variables/CircleCountDown.mdx) | - |
| [ModalCloseButton](variables/ModalCloseButton.mdx) | A generic close button for modals, tooltips and pill toasts. |
| [CollapsableContainer](variables/CollapsableContainer.mdx) | - |
| [CondensedTabs](variables/CondensedTabs.mdx) | - |
| [ConfirmationModal](variables/ConfirmationModal.mdx) | - |
| [ContextMenu](variables/ContextMenu.mdx) | ContextMenu will the show the "menu" component as a context menu when the user right clicks on the given child element. |
| [Details](variables/Details.mdx) | - |
| [DragAndUploadFiles](variables/DragAndUploadFiles.mdx) | - |
| [DropContent](variables/DropContent.mdx) | - |
| [Form](variables/Form.mdx) | - |
| [Group](variables/Group.mdx) | - |
| [InfoMessage](variables/InfoMessage.mdx) | - |
| [KebabMenuButton](variables/KebabMenuButton.mdx) | - |
| [List](variables/List.mdx) | - |
| [Row](variables/Row.mdx) | - |
| [PlainMenuEntry](variables/PlainMenuEntry.mdx) | - |
| [MenuEntry](variables/MenuEntry.mdx) | - |
| [Menu](variables/Menu.mdx) | - |
| [Modal](variables/Modal.mdx) | - |
| [ModalCloseButtonWithTooltip](variables/ModalCloseButtonWithTooltip.mdx) | - |
| [HotkeysTooltip](variables/HotkeysTooltip.mdx) | - |
| [HotKey](variables/HotKey.mdx) | - |
| [ConfirmableMultiselect](variables/ConfirmableMultiselect.mdx) | - |
| [Multiselect](variables/Multiselect.mdx) | - |
| [MultiselectCore](variables/MultiselectCore.mdx) | - |
| [MultistepIndicator](variables/MultistepIndicator.mdx) | - |
| [NotificationToast](variables/NotificationToast.mdx) | The NotificationToast component works like a normal toast, except it displays data received via a signal, and it stores the messages as an array, displaying one at a time. |
| [notificationToastSignal](variables/notificationToastSignal.mdx) | - |
| [NumberStepInput](variables/NumberStepInput.mdx) | - |
| [PasswordInput](variables/PasswordInput.mdx) | The PasswordInput is a normal Input element that can toggle between `password` and `text` type with a show/hide button. |
| [PopOutWindow](variables/PopOutWindow.mdx) | - |
| [PreferenceInput](variables/PreferenceInput.mdx) | - |
| [PreferenceWrapper](variables/PreferenceWrapper.mdx) | - |
| [PreferenceMultiselect](variables/PreferenceMultiselect.mdx) | - |
| [PreferenceRow](variables/PreferenceRow.mdx) | - |
| [SearchInput](variables/SearchInput.mdx) | - |
| [Section](variables/Section.mdx) | - |
| [SectionAccordion](variables/SectionAccordion.mdx) | - |
| [Select](variables/Select.mdx) | - |
| [Sheet](variables/Sheet.mdx) | - |
| [StatCardBox](variables/StatCardBox.mdx) | - |
| [StatCardRow](variables/StatCardRow.mdx) | - |
| [StatCard](variables/StatCard.mdx) | - |
| [ExpanderCell](variables/ExpanderCell.mdx) | - |
| [InfoHeadCell](variables/InfoHeadCell.mdx) | - |
| [SortingIndicator](variables/SortingIndicator.mdx) | - |
| [Table](variables/Table.mdx) | - |
| [TableBody](variables/TableBody.mdx) | - |
| [TableCell](variables/TableCell.mdx) | - |
| [TableContent](variables/TableContent.mdx) | - |
| [TableHead](variables/TableHead.mdx) | - |
| [TableHeadCell](variables/TableHeadCell.mdx) | - |
| [TablePagination](variables/TablePagination.mdx) | - |
| [TableRowWrapper](variables/TableRowWrapper.mdx) | - |
| [TableRow](variables/TableRow.mdx) | - |
| [TableSection](variables/TableSection.mdx) | - |
| [Tabs](variables/Tabs.mdx) | - |
| [Tab](variables/Tab.mdx) | - |
| [Tag](variables/Tag.mdx) | - |
| [TagList](variables/TagList.mdx) | - |
| [ThreeColumnSelector](variables/ThreeColumnSelector.mdx) | - |
| [Toast](variables/Toast.mdx) | - |
| [User](variables/User.mdx) | - |
| [UserMenuButton](variables/UserMenuButton.mdx) | - |
| [UserMenuDropContent](variables/UserMenuDropContent.mdx) | - |
| [VideoWrapper](variables/VideoWrapper.mdx) | - |
| [KEYBOARD\_EVENT\_KEY](variables/KEYBOARD_EVENT_KEY.mdx) | - |
| [themeValues](variables/themeValues.mdx) | - |
| [ThemeContext](variables/ThemeContext.mdx) | - |
| [ThemeConsumer](variables/ThemeConsumer.mdx) | - |
| [ThemeProvider](variables/ThemeProvider.mdx) | - |
| [TooltipPositionValue](variables/TooltipPositionValue.mdx) | - |
| [buttonVariantsValues](variables/buttonVariantsValues.mdx) | - |

## Functions

| Function | Description |
| ------ | ------ |
| [announce](functions/announce.mdx) | Announce a message to screen readers. Announcer needs to be mounted in the application for this to work. |
| [useInput](functions/useInput.mdx) | - |
| [useMultistepIndicator](functions/useMultistepIndicator.mdx) | Convenience hook for using steps in MultistepIndicator |
| [useGroupedPagesNav](functions/useGroupedPagesNav.mdx) | - |
| [useTabs](functions/useTabs.mdx) | - |
| [withTabName](functions/withTabName.mdx) | - |
| [withTransition](functions/withTransition.mdx) | - |
| [useBelow360](functions/useBelow360.mdx) | - |
| [useLandscape](functions/useLandscape.mdx) | - |
| [useLg](functions/useLg.mdx) | - |
| [useLgDown](functions/useLgDown.mdx) | - |
| [useLgUp](functions/useLgUp.mdx) | - |
| [useMd](functions/useMd.mdx) | - |
| [useMdDown](functions/useMdDown.mdx) | - |
| [useMdToXl](functions/useMdToXl.mdx) | - |
| [useMdUp](functions/useMdUp.mdx) | - |
| [useMobileDevice](functions/useMobileDevice.mdx) | - |
| [useMobileDeviceLandscape](functions/useMobileDeviceLandscape.mdx) | - |
| [useMobileDevicePortrait](functions/useMobileDevicePortrait.mdx) | - |
| [usePortrait](functions/usePortrait.mdx) | - |
| [useSm](functions/useSm.mdx) | - |
| [useSmDown](functions/useSmDown.mdx) | - |
| [useSmToLg](functions/useSmToLg.mdx) | - |
| [useSmToXl](functions/useSmToXl.mdx) | - |
| [useSmUp](functions/useSmUp.mdx) | - |
| [useTabletDevice](functions/useTabletDevice.mdx) | - |
| [useTouchDevice](functions/useTouchDevice.mdx) | - |
| [useXl](functions/useXl.mdx) | - |
| [useXlDown](functions/useXlDown.mdx) | - |
| [useXlUp](functions/useXlUp.mdx) | - |
| [useXs](functions/useXs.mdx) | - |
| [useBoundingRect](functions/useBoundingRect.mdx) | Observes a HTMLElement and returns its bounding rect. Updates when the element's size changes. |
| [useBreakpointChange](functions/useBreakpointChange.mdx) | - |
| [useFocusFrom](functions/useFocusFrom.mdx) | This hook gives the ability to set the focus on an element which is then blurred right away, thereby effectively resetting the focus order. The next focusable element that comes after this element will be focused on the next tab. |
| [useFocusFromOpened](functions/useFocusFromOpened.mdx) | Use this hook to set the focus point on an element when something becomes opened, e.g. set focus on a panel container or menu container when it becomes visible so that the next time the user hits on the tab key the element that becomes focused on is potentially a tabbable element inside the container element. |
| [useModal](functions/useModal.mdx) | - |
| [useModalHandle](functions/useModalHandle.mdx) | - |
| [useModalWithoutPreventScroll](functions/useModalWithoutPreventScroll.mdx) | Alternative to `useModal` that does not use `useModalOverlay`. |
| [useOutOfViewNavigation](functions/useOutOfViewNavigation.mdx) | - |
| [useScrollIntoView](functions/useScrollIntoView.mdx) | - |
| [withColorScheme](functions/withColorScheme.mdx) | - |
| [sizeToPadding](functions/sizeToPadding.mdx) | - |
| [isImageSrcString](functions/isImageSrcString.mdx) | - |
| [isImageSrcEmpty](functions/isImageSrcEmpty.mdx) | - |
| [isBackgroundImageSrcEmpty](functions/isBackgroundImageSrcEmpty.mdx) | - |
| [onEnter](functions/onEnter.mdx) | - |
| [isValidIconName](functions/isValidIconName.mdx) | - |