uikit-react-public 0.29.5 → 0.30.0

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').FC<import('./Accordion').AccordionProps> & {

package/dist/components/Alert/Alert.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: {

package/dist/components/AppHeader/AppHeader.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./AppHeader').AppHeaderProps> & {

package/dist/components/AppMenu/AppMenu.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: (({ testId, defaultOpen, children, className, ...props }: import('./AppMenu').AppMenuProps) => import("react").JSX.Element) & import('./AppMenu').IAppMenuSubComponents;

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { AvatarProps } from './Avatar';
 type AvatarSize = NonNullable<AvatarProps['size']>;
 declare const meta: {

package/dist/components/Badge/Badge.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { BadgeVariant } from './Badge';
 declare const meta: {
     title: string;

package/dist/components/BaseCheckbox/BaseCheckbox.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').MemoExoticComponent<({ renderVisual, checkedComponent, uncheckedComponent, indeterminateComponent, checked, defaultChecked, indeterminate, disabled, testId, className, onChange, ref, ...props }: import('./BaseCheckbox').BaseCheckboxProps) => import("react").JSX.Element>;

package/dist/components/Blanket/Blanket.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Blanket').BlanketProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: {

package/dist/components/Button/Button.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: <C extends import('react').ElementType = "button">({ as, variant, destructive, size, selected, disabled, icon, iconPosition, tooltip, loading, fullWidth, testId, ref, children, className, ...props }: import('./Button').ButtonProps<C>) => import("react").JSX.Element;

package/dist/components/Calendar/Calendar.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ pickedDate, onDatePick, minDate, maxDate, events, showAcademicWeeks, academicWeeks, testId, className, }: import('./Calendar.types').CalendarProps) => import("react").JSX.Element;

package/dist/components/Calendar/subcomponents/Day.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ date, onPick, isSelected, isToday, isInCurrentMonth, isDisabled, events, }: import('./Day').DayProps) => import("react").JSX.Element;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Checkbox').CheckboxBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Chip/Chip.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<Omit<import('./Chip').ChipProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Datepicker/Datepicker.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ value, onValueChange, minDate, maxDate, disabled, className, clearable, ...props }: import('./Datepicker.types').DatepickerProps) => import("react").JSX.Element;

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: (({ onClose, onAction, onSecondaryAction, testId, className, children, ...props }: import('./Dialog').DialogProps) => import("react").JSX.Element) & import('./Dialog').DialogSubComponents;

package/dist/components/Divider/Divider.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ testId, className, ...props }: import('./Divider').DividerProps) => import("react").JSX.Element;

package/dist/components/Dropdown/Dropdown.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: (({ defaultOpen, ...props }: import('./Dropdown').DropdownProps) => import("react").JSX.Element) & import('./Dropdown').IDropdownSubComponents;

package/dist/components/FeedbackDialog/FeedbackDialog.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ type, heading, buttonLabel, buttonVariant, buttonProps, testId, className, children, ...props }: import('./FeedbackDialog').FeedbackDialogProps) => import("react").JSX.Element;

package/dist/components/Field/Field.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: (({ error, disabled, optional, testId, className, children, ...props }: import('./Field').FieldProps) => import("react").JSX.Element) & import('./Field').IFieldSubcomponents;

package/dist/components/FileInput/FileInput.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ testId, children, labelId, ...props }: import('./FileInput').FileInputProps) => import("react").JSX.Element;

package/dist/components/Footer/Footer.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Footer').FooterProps> & {

package/dist/components/Header/Header.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Header').HeaderProps> & {

package/dist/components/Heading/Heading.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').MemoExoticComponent<({ level, as, margins, testId, className, ref, noMargins, ...props }: import('./Heading').HeadingProps) => import("react").JSX.Element>;

package/dist/components/Icon/Icon.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/IconButton/IconButton.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/components/Input/Input.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { Input } from '../../../lib';
 declare const meta: Meta<typeof Input>;
 export default meta;

package/dist/components/Label/Label.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Label').LabelBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/components/Layout/Layout.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ children, testId, className, ...props }: import('./Layout').LayoutProps) => import("react").JSX.Element;

package/dist/components/Link/Link.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: <C extends import('react').ElementType = "a">(props: import('./Link').LinkProps<C> & {

package/dist/components/Main/Main.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { default as Main } from './Main';
 declare const meta: {
     title: string;

package/dist/components/Modal/Modal.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Modal').ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/NativeDatepicker/NativeDatepicker.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ value, onValueChange, minDate, maxDate, className, disabled, testId, ref, ...props }: import('./NativeDatepicker.types').NativeDatepickerProps) => import("react").JSX.Element;

package/dist/components/Overlay/Overlay.d.ts

@@ -1,15 +1,26 @@
 import { HTMLAttributes, RefObject, ReactElement } from 'react';
-import { Placement } from '@floating-ui/react-dom';
+import { Placement, FlipOptions, ShiftOptions } from '@floating-ui/react-dom';
 export declare const NAME = "ucl-overlay";
+type OverlaySizeOptions = {
+    padding?: number;
+    matchReferenceWidth?: boolean;
+};
+export type OverlaySize = {
+    referenceWidth: number;
+    availableWidth: number;
+    availableHeight: number;
+};
 export interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
     reference: RefObject<HTMLElement | null>;
     placement?: Placement;
     blanket?: boolean;
-    flip?: boolean;
-    shift?: boolean;
+    flip?: boolean | FlipOptions;
+    shift?: boolean | ShiftOptions;
     offset?: number;
+    size?: boolean | OverlaySizeOptions;
     arrow?: ReactElement;
     arrowClassName?: string;
+    onSizeChange?: (size: OverlaySize) => void;
     onBlanketClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
 }
 export type Ref = HTMLDivElement | null;

package/dist/components/Overlay/Overlay.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Overlay').OverlayProps & import('react').RefAttributes<import('./Overlay').Ref>>;
@@ -39,15 +39,44 @@ declare const meta: {
         children: string;
         reference: undefined;
     };
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         reference: import('react').RefObject<HTMLElement | null>;
         placement?: import('@floating-ui/utils').Placement | undefined;
         blanket?: boolean | undefined;
-        flip?: boolean | undefined;
-        shift?: boolean | undefined;
+        flip?: boolean | {
+            padding?: import('@floating-ui/utils').Padding | undefined;
+            mainAxis?: boolean | undefined;
+            crossAxis?: boolean | "alignment" | undefined;
+            fallbackPlacements?: Array<import('@floating-ui/utils').Placement> | undefined;
+            fallbackStrategy?: "bestFit" | "initialPlacement" | undefined;
+            fallbackAxisSideDirection?: "none" | "start" | "end" | undefined;
+            flipAlignment?: boolean | undefined;
+            rootBoundary?: import('@floating-ui/core').RootBoundary | undefined;
+            elementContext?: import('@floating-ui/core').ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            boundary?: import('@floating-ui/dom').Boundary | undefined;
+        } | undefined;
+        shift?: boolean | {
+            padding?: import('@floating-ui/utils').Padding | undefined;
+            mainAxis?: boolean | undefined;
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import('@floating-ui/core').RootBoundary | undefined;
+            elementContext?: import('@floating-ui/core').ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            limiter?: {
+                fn: (state: import('@floating-ui/core').MiddlewareState) => import('@floating-ui/utils').Coords;
+                options?: any;
+            } | undefined;
+            boundary?: import('@floating-ui/dom').Boundary | undefined;
+        } | undefined;
         offset?: number | undefined;
+        size?: (boolean | {
+            padding?: number;
+            matchReferenceWidth?: boolean;
+        }) | undefined;
         arrow?: import('react').ReactElement | undefined;
         arrowClassName?: string | undefined;
+        onSizeChange?: ((size: import('./Overlay').OverlaySize) => void) | undefined;
         onBlanketClick?: ((ev: React.MouseEvent<HTMLDivElement>) => void) | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;

package/dist/components/Overlay/__tests__/Overlay.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Overlay/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Overlay';
-export type { OverlayProps } from './Overlay';
+export type { OverlayProps, OverlaySize } from './Overlay';

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: (({ offset, limit, total, onPageChange, mode, currentPage, trackedMaxPage, hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, testId, className, children, ...props }: import('./Pagination').PaginationProps) => import("react").JSX.Element) & import('./Pagination').PaginationSubComponents;

package/dist/components/Paragraph/Paragraph.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').MemoExoticComponent<({ level, size, emphasis, as, margins, testId, className, ref, noMargins, ...props }: import('./Paragraph').ParagraphProps) => import("react").JSX.Element>;

package/dist/components/Radio/Radio.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Radio').RadioBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Search/Search.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ placeholder, testId, onSearch, onClear, disabled, m, mv, mh, mt, mb, ml, mr, noMargins, inputProps, clearButtonProps, submitButtonProps, className, ...props }: import('./Search').SearchProps) => import("react").JSX.Element;

package/dist/components/Select/Select.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: <T extends string | number = string>(props: import('./Select.types').SelectProps<T>) => React.JSX.Element;
@@ -154,6 +154,18 @@ declare const meta: {
                 };
             };
         };
+        dropdownWidth: {
+            description: string;
+            control: {
+                type: "radio";
+            };
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         panelClassName: {
             description: string;
             control: {

package/dist/components/Select/Select.types.d.ts

@@ -26,6 +26,7 @@ export type OptionData<T> = {
  * Additional props forwarded to the filter input when `filterable` is true
  */
 export type FilterInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'disabled' | 'ref' | 'role' | 'aria-autocomplete' | 'aria-label'>;
+export type SelectDropdownWidth = 'content' | 'match-select';
 type SelectBaseProps<T = string | number> = Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> & {
     /**
      * Controls keyboard selection behaviour in the custom select variant.
@@ -77,6 +78,12 @@ type SelectBaseProps<T = string | number> = Omit<React.HTMLAttributes<HTMLElemen
      * Allow long option labels to wrap instead of truncating
      */
     lineBreak?: boolean;
+    /**
+     * Controls the width of the custom options panel.
+     * - `content` (default): panel is at least the Select width and can grow to fit option labels.
+     * - `match-select`: panel width is capped to the Select width.
+     */
+    dropdownWidth?: SelectDropdownWidth;
     /**
      * Custom className for the root element
      */

package/dist/components/Select/subcomponents/CustomSelect.d.ts

@@ -1,4 +1,4 @@
 import { InternalSelectProps } from '../Select.types';
 type CustomSelectProps<T> = Omit<InternalSelectProps<T>, 'native' | 'nativeHtmlAttributes'>;
-declare const CustomSelect: <T extends string | number>({ selectionBehaviour, value, options, onValueChange, disabled, clearable, placeholder, lineBreak, filterInputProps, width, testId, className, panelClassName, filterable, ref, ...props }: CustomSelectProps<T>) => import("react").JSX.Element;
+declare const CustomSelect: <T extends string | number>({ selectionBehaviour, value, options, onValueChange, disabled, clearable, placeholder, lineBreak, dropdownWidth, filterInputProps, width, testId, className, panelClassName, filterable, ref, ...props }: CustomSelectProps<T>) => import("react").JSX.Element;
 export default CustomSelect;

package/dist/components/Select/subcomponents/Panel.d.ts

@@ -1,3 +1,9 @@
-type PanelProps = React.ComponentPropsWithoutRef<'div'>;
-declare const Panel: ({ className, ...props }: PanelProps) => import("react").JSX.Element;
+import { SelectDropdownWidth } from '../Select.types';
+type PanelProps = React.ComponentPropsWithoutRef<'div'> & {
+    dropdownWidth?: SelectDropdownWidth;
+    referenceWidth?: number;
+    availableHeight?: number;
+    maxWidth?: number;
+};
+declare const Panel: ({ className, dropdownWidth, referenceWidth, availableHeight, maxWidth, ...props }: PanelProps) => import("react").JSX.Element;
 export default Panel;

package/dist/components/Snackbar/Snackbar.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').NamedExoticComponent<import('./Snackbar').SnackbarBaseProps & import('../common/marginsStyle').MarginProps & import('react').RefAttributes<HTMLOutputElement>>;

package/dist/components/Spinner/Spinner.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: import('react').MemoExoticComponent<({ size, strokeWidth, className, testId, inheritColour, ref, ...rest }: import('./Spinner').SpinnerProps) => import("react").JSX.Element>;

package/dist/components/StandaloneLink/StandaloneLink.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: <C extends import('react').ElementType = "a">(props: import('./StandaloneLink').StandaloneLinkProps<C> & {

package/dist/components/Table/Table.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: {

package/dist/components/Table/subcomponents/Cell/Cell.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, ...props }: import('./Cell').TableCellProps) => import("react").JSX.Element;
@@ -9,7 +9,7 @@ declare const meta: {
         className: string;
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         variant?: import('../..').ColumnVariant | undefined;
         icon?: import('react').ReactNode;
         checked?: boolean | undefined;

package/dist/components/Table/subcomponents/HeadCell/HeadCell.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { SortOrder } from '../../Table.types';
 declare const meta: {
     title: string;
@@ -14,7 +14,7 @@ declare const meta: {
         children: string;
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         variant?: import('../..').ColumnVariant | undefined;
         accessor?: string | undefined;
         sort?: SortOrder | undefined;

package/dist/components/Tabs/Tab.d.ts

@@ -1,11 +1,17 @@
-import { ButtonHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export declare const NAME = "ucl-uikit-tabs__tab";
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface TabProps extends HTMLAttributes<HTMLElement> {
     testId?: string;
-    label: string;
     value: string;
+    children?: ReactNode;
+    count?: number;
+    /** @deprecated Use count instead. */
     counter?: number;
-    ref?: React.RefObject<HTMLButtonElement>;
+    disabled?: boolean;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLElement>;
+    /** @deprecated Prefer children for the tab content. */
+    label?: ReactNode;
 }
-declare const _default: import('react').MemoExoticComponent<({ testId, className, label, value, counter, ref, ...props }: TabProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ testId, className, children, label, value, count, counter, disabled, asChild, onClick, ref, ...props }: TabProps) => import("react").JSX.Element>;
 export default _default;

package/dist/components/Tabs/TabContext.d.ts

@@ -1,10 +1,16 @@
-interface TabContextType {
-    activeTab: string;
-    setActiveTab: (value: string) => void;
-    onChange?: (value: string) => void;
-    fullWidth?: boolean;
-    color?: string;
+export type TabsActivationMode = 'automatic' | 'manual';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export interface TabsContextType {
+    value: string | undefined;
+    setValue: (value: string) => void;
+    baseId: string;
+    activationMode: TabsActivationMode;
+    orientation: TabsOrientation;
+    fullWidth: boolean;
+    panelValues: Set<string>;
 }
-declare const TabContext: import('react').Context<TabContextType | undefined>;
-export declare const useTabContext: () => TabContextType;
+declare const TabContext: import('react').Context<TabsContextType | undefined>;
+export declare const getTabId: (baseId: string, value: string) => string;
+export declare const getTabPanelId: (baseId: string, value: string) => string;
+export declare const useTabContext: () => TabsContextType;
 export default TabContext;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,18 +1,35 @@
-import { HTMLAttributes } from 'react';
-import { default as Tab } from './Tab';
+import { HTMLAttributes, NamedExoticComponent } from 'react';
+import { TabsActivationMode, TabsOrientation } from './TabContext';
+import { default as Tab, TabProps } from './Tab';
+import { default as TabsList, TabsListProps } from './TabsList';
+import { default as TabsPanel, TabsPanelProps } from './TabsPanel';
 import { MarginProps } from '../common/marginsStyle';
 export declare const NAME = "ucl-uikit-tabs";
-export interface TabsBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    activeTab: string;
+export interface TabsBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    activationMode?: TabsActivationMode;
+    orientation?: TabsOrientation;
+    testId?: string;
+    ref?: React.Ref<HTMLDivElement>;
+    /** @deprecated Use value instead. */
+    activeTab?: string;
+    /** @deprecated Use onValueChange instead. */
     onChange?: (value: string) => void;
+    /** @deprecated Prefer setting fullWidth on Tabs.List. */
     fullWidth?: boolean;
-    testId?: string;
+    /** @deprecated Tabs now uses theme.colour.border.brand by default. */
     color?: string;
-    ref?: React.RefObject<HTMLDivElement>;
 }
 export type TabsProps = TabsBaseProps & MarginProps;
-type TabsComponent = React.FC<TabsProps> & {
+export interface TabsComponent extends NamedExoticComponent<TabsProps> {
+    List: typeof TabsList;
     Tab: typeof Tab;
-};
+    Panel: typeof TabsPanel;
+    /** @deprecated Use Tabs.Tab instead. */
+    Trigger: typeof Tab;
+}
 declare const Tabs: TabsComponent;
+export type { TabProps, TabsActivationMode, TabsListProps, TabsOrientation, TabsPanelProps, };
 export default Tabs;

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -1,18 +1,14 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('./Tabs').TabsProps> & {
-        Tab: typeof import('./Tab').default;
-    };
+    component: import('./Tabs').TabsComponent;
     parameters: {
         layout: string;
     };
-    args: {
-        activeTab: string;
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const FullWidth: Story;
+export declare const Controlled: Story;
 export declare const AutoWidth: Story;
-export declare const Counter: Story;
+export declare const Count: Story;
+export declare const Links: Story;