@ultraviolet/ui 1.2.0 → 1.3.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, SVGProps, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, ForwardRefExoticComponent, ForwardedRef, ChangeEventHandler, FocusEventHandler, CSSProperties, HTMLAttributes, ElementType, KeyboardEventHandler, TextareaHTMLAttributes, RefObject } from 'react';
+import { ReactNode, SVGProps, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, HTMLAttributes, ElementType, KeyboardEventHandler, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -961,6 +961,23 @@ type BadgeProps = {
 };
 declare const Badge: ({ sentiment, size, prominence, icon, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+type Variant$1 = 'intro' | 'promotional';
+type BannerProps = {
+    variant?: Variant$1;
+    size?: 'small' | 'medium';
+    title: string;
+    children: ReactNode;
+    direction?: 'row' | 'column';
+    onClose?: () => void;
+    buttonText?: string;
+    onClickButton?: ComponentProps<typeof Button>['onClick'];
+    linkText?: string;
+    linkHref?: string;
+    image?: ReactNode;
+    className?: string;
+};
+declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+
 type BarChartToolTipProps = {
     color: string;
     indexValue: string;
@@ -1048,23 +1065,6 @@ type BreadcrumbsType = ((props: BreadcrumbsProps) => JSX.Element) & {
 };
 declare const Breadcrumbs: BreadcrumbsType;
 
-type Variant$1 = 'intro' | 'promotional';
-type BannerProps = {
-    variant?: Variant$1;
-    size?: 'small' | 'medium';
-    title: string;
-    children: ReactNode;
-    direction?: 'row' | 'column';
-    onClose?: () => void;
-    buttonText?: string;
-    onClickButton?: ComponentProps<typeof Button>['onClick'];
-    linkText?: string;
-    linkHref?: string;
-    image?: ReactNode;
-    className?: string;
-};
-declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
-
 declare const sentiments$1: {
     readonly danger: ({ theme }: {
         theme: Theme;
@@ -1111,6 +1111,35 @@ type BulletProps = {
 } & ContentProps$1;
 declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, }: BulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+type CardProps = {
+    children: ReactNode;
+    /**
+     * Header can be a string but also a component if you need more complex header.
+     */
+    header?: ReactNode;
+    /**
+     * isActive enable a primary style on Card component for when you need to highlight it.
+     */
+    isActive?: boolean;
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+type CarouselItemProps = {
+    children: ReactNode;
+};
+type CarouselProps = {
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+};
+declare const Carousel: {
+    ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
+    Item: ({ children }: CarouselItemProps) => JSX.Element;
+};
+
 type CheckboxProps = {
     error?: string | ReactNode;
     size?: number;
@@ -1163,24 +1192,6 @@ type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled
 };
 declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, name, onBlur, onChange, onFocus, required, value, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type ExpandableProps = {
-    /**
-     * The content to display
-     */
-    children: ReactNode;
-    /**
-     * To display or not the content
-     */
-    opened?: boolean;
-    /**
-     * The minimum height of the content
-     */
-    minHeight?: number;
-    className?: string;
-    'data-testid'?: string;
-};
-declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
 declare const CONTAINER_SIZES: {
     readonly small: 720;
     readonly medium: 720;
@@ -1215,6 +1226,24 @@ type EmptyStateProps = {
 };
 declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, }: EmptyStateProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+type ExpandableProps = {
+    /**
+     * The content to display
+     */
+    children: ReactNode;
+    /**
+     * To display or not the content
+     */
+    opened?: boolean;
+    /**
+     * The minimum height of the content
+     */
+    minHeight?: number;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 type Transformer = (value: DatumValue) => string;
 type CustomLegendProps = {
     axisTransformer?: Transformer;
@@ -1405,6 +1434,29 @@ declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttribu
     } & react.RefAttributes<HTMLElement>>;
 };
 
+type Strength$1 = {
+    /**
+     * Color to display
+     */
+    color: string;
+    /**
+     * Text to display
+     */
+    text: string;
+};
+type PasswordStrengthMeterProps$1 = {
+    /**
+     * Strength is used for defining different color and text associated with it.
+     */
+    strength: Strength$1[];
+    title: string;
+    value: number;
+    className?: string;
+    'data-testid'?: string;
+    id?: string;
+};
+declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => JSX.Element;
+
 declare const MODAL_WIDTH: {
     large: number;
     medium: number;
@@ -1493,13 +1545,50 @@ type NoticeProps = {
 };
 declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+declare const containerSizes: {
+    large: number;
+    medium: number;
+    small: number;
+};
+type ContainerSizesType = keyof typeof containerSizes;
+type NumberInputProps = {
+    disabled?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    name?: string;
+    onChange?: (input: number | undefined) => void;
+    onMaxCrossed?(): void;
+    onMinCrossed?(): void;
+    size?: ContainerSizesType;
+    /**
+     * Define how much will stepper increase / decrease each time you click on + / - button.
+     */
+    step?: number;
+    /**
+     * Text displayed into component at the right of number value.
+     */
+    text?: string;
+    defaultValue?: number;
+    value?: number;
+    disabledTooltip?: string;
+    className?: string;
+    'data-testid'?: string;
+    label?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    id?: string;
+    placeholder?: string;
+    error?: string | boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
+declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 type PaginationProps = {
     /**
       Event function called when changing the page
     */
     onChange: (newPage: number) => void;
     /**
-      The current page
+      The current page (must be between 1 and pageCount included, otherwhile onChange will be called with a correct value)
     */
     page: number;
     /**
@@ -1571,6 +1660,9 @@ type PasswordStrengthMeterProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * @deprecated use Meter component instead
+ */
 declare const PasswordStrengthMeter: ({ password, onChange, strength, title, estimate, forbiddenInputs, className, "data-testid": dataTestId, }: PasswordStrengthMeterProps) => JSX.Element;
 
 type Data = {
@@ -1596,39 +1688,59 @@ type PieChartProps = {
  */
 declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, }: PieChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-declare const variants$1: {
-    readonly block: ({ length }: {
-        length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly blocks: ({ col, length, }: {
-        col?: number | undefined;
-        length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly box: ({ col, length, }: {
-        col?: number | undefined;
-        length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly donut: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly line: _emotion_styled.StyledComponent<{
-        theme?: _emotion_react.Theme | undefined;
-        as?: react.ElementType<any> | undefined;
-    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    readonly list: ({ length, col, }: {
-        length?: number | undefined;
-        col?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly slider: ({ length }: {
-        length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-};
-type SkeletonVariant = keyof typeof variants$1;
-type SkeletonProps = {
-    variant?: SkeletonVariant;
-    length?: number;
-    col?: number;
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
+
+type TooltipProps = {
+    /**
+     * Id is automatically generated if not set. It is used for associating tooltip wrapper with tooltip portal.
+     */
+    id?: string;
+    children: ReactNode | ((renderProps: {
+        className?: string;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: number;
+    /**
+     * `auto` placement will change the position of the tooltip if it doesn't fit in the viewport.
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Content of the tooltip, preferably text inside.
+     */
+    text?: ReactNode;
     className?: string;
+    /**
+     * It will force display tooltip. This can be useful if you need to always display the tooltip without hover needed.
+     */
+    visible?: boolean;
+    innerRef?: Ref<HTMLDivElement | null>;
+    role?: string;
+    'data-testid'?: string;
 };
-declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+type SentimentType = 'neutral' | 'primary';
+declare const SIZES_WIDTH: {
+    small: number;
+    medium: number;
+    large: number;
+};
+type PopoverProps = {
+    children: ReactNode;
+    content: ReactNode;
+    title: string;
+    sentiment?: SentimentType;
+    visible?: boolean;
+    size?: keyof typeof SIZES_WIDTH;
+    onClose: () => void;
+    className?: string;
+    'data-testid'?: string;
+} & Pick<ComponentProps<typeof Tooltip>, 'placement'>;
+declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare const progressBarSentiments: readonly ["primary", "success", "warning", "info"];
 type ProgressBarProps = {
@@ -1657,6 +1769,37 @@ type RadioProps = {
 });
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
+type RowProps = {
+    className?: string;
+    'data-testid'?: string;
+    children: ReactNode;
+    templateColumns: string;
+    gap?: keyof SCWUITheme['space'] | number;
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+};
+declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type SelectableCardProps = {
+    name?: string;
+    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
+    value: string | number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    showTick?: boolean;
+    type?: 'radio' | 'checkbox';
+    disabled?: boolean;
+    checked?: boolean;
+    className?: string;
+    isError?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    id?: string;
+    tooltip?: string;
+    label?: ReactNode;
+    'data-testid'?: string;
+};
+declare const SelectableCard: react.ForwardRefExoticComponent<SelectableCardProps & react.RefAttributes<HTMLDivElement>>;
+
 type SelectOption = {
     value: string;
     label: ReactNode;
@@ -1722,63 +1865,6 @@ declare const SelectInput: ForwardRefExoticComponent<Partial<SelectInputProps>>
     Option: OptionComponent;
 };
 
-type SelectableCardProps = {
-    name?: string;
-    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
-    value: string | number;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    showTick?: boolean;
-    type?: 'radio' | 'checkbox';
-    disabled?: boolean;
-    checked?: boolean;
-    className?: string;
-    isError?: boolean;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    id?: string;
-    tooltip?: string;
-    label?: ReactNode;
-    'data-testid'?: string;
-};
-declare const SelectableCard: react.ForwardRefExoticComponent<SelectableCardProps & react.RefAttributes<HTMLDivElement>>;
-
-declare const containerSizes: {
-    large: number;
-    medium: number;
-    small: number;
-};
-type ContainerSizesType = keyof typeof containerSizes;
-type NumberInputProps = {
-    disabled?: boolean;
-    maxValue?: number;
-    minValue?: number;
-    name?: string;
-    onChange?: (input: number | undefined) => void;
-    onMaxCrossed?(): void;
-    onMinCrossed?(): void;
-    size?: ContainerSizesType;
-    /**
-     * Define how much will stepper increase / decrease each time you click on + / - button.
-     */
-    step?: number;
-    /**
-     * Text displayed into component at the right of number value.
-     */
-    text?: string;
-    defaultValue?: number;
-    value?: number;
-    disabledTooltip?: string;
-    className?: string;
-    'data-testid'?: string;
-    label?: string;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
-    id?: string;
-    placeholder?: string;
-    error?: string | boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
-declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
 type Direction = 'horizontal' | 'vertical';
 type SeparatorProps = {
     icon?: ComponentProps<typeof Icon>['name'];
@@ -1790,18 +1876,39 @@ type SeparatorProps = {
 };
 declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => JSX.Element;
 
-type CarouselItemProps = {
-    children: ReactNode;
+declare const variants$1: {
+    readonly block: ({ length }: {
+        length?: number | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    readonly blocks: ({ col, length, }: {
+        col?: number | undefined;
+        length?: number | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    readonly box: ({ col, length, }: {
+        col?: number | undefined;
+        length?: number | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    readonly donut: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    readonly line: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    readonly list: ({ length, col, }: {
+        length?: number | undefined;
+        col?: number | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    readonly slider: ({ length }: {
+        length?: number | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 };
-type CarouselProps = {
+type SkeletonVariant = keyof typeof variants$1;
+type SkeletonProps = {
+    variant?: SkeletonVariant;
+    length?: number;
+    col?: number;
     className?: string;
-    children?: ReactNode;
-    'data-testid'?: string;
-};
-declare const Carousel: {
-    ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
-    Item: ({ children }: CarouselItemProps) => JSX.Element;
 };
+declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type Prefixes = 'lines' | 'command';
 type SnippetProps = {
@@ -2274,41 +2381,6 @@ type ToggleProps = {
 };
 declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
 
-type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
-
-type TooltipProps = {
-    /**
-     * Id is automatically generated if not set. It is used for associating tooltip wrapper with tooltip portal.
-     */
-    id?: string;
-    children: ReactNode | ((renderProps: {
-        className?: string;
-        onBlur: () => void;
-        onFocus: () => void;
-        onPointerEnter: () => void;
-        onPointerLeave: () => void;
-        ref: RefObject<HTMLDivElement>;
-    }) => ReactNode);
-    maxWidth?: number;
-    /**
-     * `auto` placement will change the position of the tooltip if it doesn't fit in the viewport.
-     */
-    placement?: TooltipPlacement;
-    /**
-     * Content of the tooltip, preferably text inside.
-     */
-    text?: ReactNode;
-    className?: string;
-    /**
-     * It will force display tooltip. This can be useful if you need to always display the tooltip without hover needed.
-     */
-    visible?: boolean;
-    innerRef?: Ref<HTMLDivElement | null>;
-    role?: string;
-    'data-testid'?: string;
-};
-declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
-
 type VerificationCodeProps = {
     disabled?: boolean;
     error?: boolean;
@@ -2339,52 +2411,6 @@ type VerificationCodeProps = {
 };
 declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => JSX.Element;
 
-type RowProps = {
-    className?: string;
-    'data-testid'?: string;
-    children: ReactNode;
-    templateColumns: string;
-    gap?: keyof SCWUITheme['space'] | number;
-    alignItems?: CSSProperties['alignItems'];
-    justifyContent?: CSSProperties['justifyContent'];
-};
-declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
-type CardProps = {
-    children: ReactNode;
-    /**
-     * Header can be a string but also a component if you need more complex header.
-     */
-    header?: ReactNode;
-    /**
-     * isActive enable a primary style on Card component for when you need to highlight it.
-     */
-    isActive?: boolean;
-    disabled?: boolean;
-    className?: string;
-    'data-testid'?: string;
-};
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
-
-type SentimentType = 'neutral' | 'primary';
-declare const SIZES_WIDTH: {
-    small: number;
-    medium: number;
-    large: number;
-};
-type PopoverProps = {
-    children: ReactNode;
-    content: ReactNode;
-    title: string;
-    sentiment?: SentimentType;
-    visible?: boolean;
-    size?: keyof typeof SIZES_WIDTH;
-    onClose: () => void;
-    className?: string;
-    'data-testid'?: string;
-} & Pick<ComponentProps<typeof Tooltip>, 'placement'>;
-declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -2428,4 +2454,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, Icon, LineChart, Link, List, Loader, Menu, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, Icon, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

package/dist/src/components/Button/index.js

@@ -302,6 +302,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
       name: name,
       "aria-label": ariaLabel,
       "aria-current": ariaCurrent,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHaspopup,
       iconOnly: !!icon && !children,
       tabIndex: tabIndex,
       children: content

package/dist/src/components/Meter/Meter.js

@@ -0,0 +1,95 @@
+import _styled from '@emotion/styled/base';
+import { Text } from '../Text/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const StyledStrength = /*#__PURE__*/_styled(Text, {
+  shouldForwardProp: prop => !['color'].includes(prop),
+  target: "e1segop82"
+})("float:right;vertical-align:top;color:", _ref => {
+  let {
+    strength
+  } = _ref;
+  return strength.color;
+}, ";");
+const StyledWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1segop81"
+})("background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.backgroundDisabled;
+}, ";border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";height:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";margin-top:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['1'];
+}, ";margin-bottom:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space['2'];
+}, ";");
+const StyledMeter = /*#__PURE__*/_styled("div", {
+  target: "e1segop80"
+})("border-radius:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.radii.default;
+}, ";height:100%;transition:all 0.5s;");
+const Meter = _ref8 => {
+  let {
+    strength,
+    title,
+    value,
+    className,
+    'data-testid': dataTestId,
+    id
+  } = _ref8;
+  const toValue = (value + 1) / strength.length * 100;
+  const width = `${toValue}%`;
+  const backgroundColor = strength[value]?.color ?? strength[0].color;
+  const text = strength[value]?.text ?? strength[0].text;
+  return jsxs("div", {
+    "aria-live": "polite",
+    "aria-valuemax": strength.length ?? 0,
+    "aria-valuemin": 0,
+    "aria-valuenow": value,
+    className: className,
+    "data-testid": dataTestId,
+    id: id,
+    role: "meter",
+    title: title,
+    "aria-labelledby": "meter-label",
+    children: [jsxs(Text, {
+      id: "meter-label",
+      variant: "bodySmallStrong",
+      as: "p",
+      children: [title, jsx(StyledStrength, {
+        as: "span",
+        variant: "bodySmallStrong",
+        strength: strength[value],
+        children: text
+      })]
+    }), jsx(StyledWrapper, {
+      children: jsx(StyledMeter, {
+        style: {
+          backgroundColor,
+          width
+        }
+      })
+    })]
+  });
+};
+
+export { Meter };

package/dist/src/components/Pagination/index.js

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import { Button } from '../Button/index.js';
 import { getPageNumbers } from './getPageNumbers.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
@@ -65,6 +65,14 @@ const Pagination = _ref4 => {
   const handlePageClick = useCallback(pageNumber => () => {
     onChange(pageNumber);
   }, [onChange]);
+  useEffect(() => {
+    if (page < 1) {
+      onChange(1);
+    }
+    if (page > pageCount) {
+      onChange(pageCount);
+    }
+  }, [page, pageCount, onChange]);
   return jsxs(StyledContainer, {
     className: className,
     "data-testid": dataTestId,

package/dist/src/components/PasswordStrengthMeter/index.js

@@ -58,6 +58,10 @@ const DEFAULT_ESTIMATE = () => ({
   score: 0
 });
 const DEFAULT_FORBIDDEN_WORDS = [];
+
+/**
+ * @deprecated use Meter component instead
+ */
 const PasswordStrengthMeter = _ref7 => {
   let {
     password = '',

package/dist/src/index.js

@@ -9,36 +9,41 @@ export { ActionBar } from './components/ActionBar/index.js';
 export { Alert } from './components/Alert/index.js';
 export { Avatar } from './components/Avatar/index.js';
 export { Badge } from './components/Badge/index.js';
+export { Banner } from './components/Banner/index.js';
 export { BarChart } from './components/BarChart/index.js';
 export { BarStack } from './components/BarStack/index.js';
 export { Breadcrumbs } from './components/Breadcrumbs/index.js';
-export { Banner } from './components/Banner/index.js';
 export { Bullet } from './components/Bullet/index.js';
+export { Button } from './components/Button/index.js';
+export { Card } from './components/Card/index.js';
+export { Carousel } from './components/Carousel/index.js';
 export { Checkbox } from './components/Checkbox/index.js';
 export { CopyButton } from './components/CopyButton/index.js';
 export { DateInput } from './components/DateInput/index.js';
-export { Expandable } from './components/Expandable/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
+export { Expandable } from './components/Expandable/index.js';
 export { Icon } from './components/Icon/index.js';
 export { LineChart } from './components/LineChart/index.js';
 export { Link } from './components/Link/index.js';
 export { List } from './components/List/index.js';
 export { Loader } from './components/Loader/index.js';
 export { Menu } from './components/Menu/index.js';
+export { Meter } from './components/Meter/Meter.js';
 export { Modal } from './components/Modal/index.js';
 export { Notice } from './components/Notice/index.js';
+export { NumberInput } from './components/NumberInput/index.js';
 export { Pagination } from './components/Pagination/index.js';
 export { PasswordCheck } from './components/PasswordCheck/index.js';
 export { PasswordStrengthMeter } from './components/PasswordStrengthMeter/index.js';
 export { PieChart } from './components/PieChart/index.js';
-export { Skeleton } from './components/Skeleton/index.js';
+export { Popover } from './components/Popover/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { Radio } from './components/Radio/index.js';
-export { SelectInput } from './components/SelectInput/index.js';
+export { Row } from './components/Row/index.js';
 export { SelectableCard } from './components/SelectableCard/index.js';
-export { NumberInput } from './components/NumberInput/index.js';
+export { SelectInput } from './components/SelectInput/index.js';
 export { Separator } from './components/Separator/index.js';
-export { Carousel } from './components/Carousel/index.js';
+export { Skeleton } from './components/Skeleton/index.js';
 export { Snippet } from './components/Snippet/index.js';
 export { Stack } from './components/Stack/index.js';
 export { Status } from './components/Status/index.js';
@@ -57,7 +62,3 @@ export { ToastContainer, toast } from './components/Toaster/index.js';
 export { Toggle } from './components/Toggle/index.js';
 export { Tooltip } from './components/Tooltip/index.js';
 export { VerificationCode } from './components/VerificationCode/index.js';
-export { Row } from './components/Row/index.js';
-export { Button } from './components/Button/index.js';
-export { Card } from './components/Card/index.js';
-export { Popover } from './components/Popover/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {