@veracity/vui 0.6.2 → 0.7.0-beta.0

package/esm/notification/notificationTitle.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import { H6 } from '../heading';
+import { useNotification } from './context';
+/** Displays a title within the Notification. */
+export const NotificationTitle = vui((props, ref) => {
+    const styles = useStyleConfig('Notification', { ...useNotification(), ...props });
+    return React.createElement(H6, { className: "vui-notificationTitle", display: "inline-flex", ref: ref, ...styles.title, ...props });
+});
+NotificationTitle.displayName = 'NotificationTitle';
+export default NotificationTitle;

package/esm/notification/theme.d.ts

@@ -0,0 +1,27 @@
+import { Dict } from '../utils';
+declare function variantSubtle(props: Dict): {
+    container: {
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+        color: string;
+    };
+    button: {
+        color: string;
+        hoverBg: string;
+        activeBg: string;
+    };
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        colorScheme: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {};
+    variants: {
+        subtle: typeof variantSubtle;
+    };
+};
+export default _default;

package/esm/notification/theme.js

@@ -0,0 +1,40 @@
+function variantSubtle(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        bg: `${c}.20`,
+        borderColor: `${c}.80`,
+        borderWidth: 1,
+        color: `${c}.90`
+    };
+    const button = {
+        color: `${c}.90`,
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`
+    };
+    if (c === 'blue') {
+        container.color = 'blue.80';
+        button.color = 'blue.80';
+    }
+    if (c === 'yellow') {
+        container.color = 'yellow.100';
+        button.color = 'yellow.100';
+    }
+    return { container, button };
+}
+const baseStyle = {};
+const defaultProps = {
+    colorScheme: 'blue',
+    variant: 'subtle'
+};
+const parts = ['container', 'button', 'icon', 'text', 'title'];
+const sizes = {};
+const variants = {
+    subtle: variantSubtle
+};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/esm/p/index.d.ts

@@ -0,0 +1,3 @@
+export * from './p';
+export { default } from './p';
+export * from './p.types';

package/esm/p/index.js

@@ -0,0 +1,3 @@
+export * from './p';
+export { default } from './p';
+export * from './p.types';

package/esm/p/p.d.ts

@@ -0,0 +1,5 @@
+import { PProps } from './p.types';
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a paragraph of text. */
+export declare const P: import("../core").VuiComponent<"p", PProps>;
+export default P;

package/esm/p/p.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
+import { cs, filterUndefined } from '../utils';
+export const PBase = styled.pBox `
+	transition-duration: fast;
+`;
+/** Displays a paragraph of text. */
+export const P = vui((props, ref) => {
+    const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);
+    const styles = useStyleConfig('P', props);
+    const aliasedProps = filterUndefined({
+        fontWeight: weight,
+        textAlign: align,
+        textDecoration: decoration,
+        textTransform: casing
+    });
+    return (React.createElement(PBase, { className: cs('vui-p', className), ref: ref, ...styles, ...aliasedProps, ...rest }, children ?? text));
+});
+P.displayName = 'P';
+export default P;

package/esm/p/p.types.d.ts

@@ -0,0 +1,14 @@
+import { SystemProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type PProps = SystemProps & ThemingProps<'P'> & {
+    /** Alias for textAlign prop. @deprecated */
+    align?: TypographyProps['textAlign'];
+    /** Alias for textTransform prop. @deprecated */
+    casing?: TypographyProps['textTransform'];
+    /** Alias for textDecoration prop. @deprecated */
+    decoration?: TypographyProps['textDecoration'];
+    /** Displays given text if no children are provided. */
+    text?: number | string;
+    /** Alias for fontWeight prop. @deprecated */
+    weight?: TypographyProps['fontWeight'];
+};

package/esm/p/p.types.js

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

package/esm/p/theme.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
+    sizes: {
+        sm: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        md: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        lg: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        xl: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        xxl: {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    variants: {};
+};
+export default _default;

package/esm/p/theme.js

@@ -0,0 +1,33 @@
+const baseStyle = {};
+const defaultProps = {
+    size: 'md'
+};
+const sizes = {
+    sm: {
+        fontSize: 'sm',
+        lineHeight: '18px'
+    },
+    md: {
+        fontSize: 'md',
+        lineHeight: '24px'
+    },
+    lg: {
+        fontSize: 'lg',
+        lineHeight: '28px'
+    },
+    xl: {
+        fontSize: '20px',
+        lineHeight: '30px'
+    },
+    xxl: {
+        fontSize: '24px',
+        lineHeight: '36px'
+    }
+};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/esm/pagination/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PaginationContext } from './pagination.types';
+declare const PaginationProvider: import("react").Provider<PaginationContext>, usePaginationContext: () => PaginationContext;
+export { PaginationProvider, usePaginationContext };

package/esm/pagination/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../utils';
+const [PaginationProvider, usePaginationContext] = createContext({ isOptional: true });
+export { PaginationProvider, usePaginationContext };

package/esm/pagination/helpers.d.ts

@@ -0,0 +1,3 @@
+import { PaginationItem } from './pagination.types';
+/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+export declare function getPaginationItems(page: number, pageCount: number): PaginationItem[];

package/esm/pagination/helpers.js

@@ -0,0 +1,16 @@
+/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+export function getPaginationItems(page, pageCount) {
+    const items = ['previous', 1];
+    if (page - 2 > 1)
+        items.push('ellipsisStart');
+    for (let i = page - 1; i <= page + 1; i++) {
+        if (i > 1 && i < pageCount)
+            items.push(i);
+    }
+    if (page + 2 < pageCount)
+        items.push('ellipsisEnd');
+    if (pageCount > 1)
+        items.push(pageCount);
+    items.push('next');
+    return items;
+}

package/esm/pagination/index.d.ts

@@ -0,0 +1,13 @@
+export * from './context';
+export * from './helpers';
+export * from './pagination';
+export { default } from './pagination';
+export * from './pagination.types';
+export * from './paginationButton';
+export * from './paginationEllipsis';
+export * from './paginationGoToPage';
+export * from './paginationNavigation';
+export * from './paginationPrevNext';
+export * from './paginationResults';
+export { default as usePagination } from './usePagination';
+export * from './usePagination.types';

package/esm/pagination/index.js

@@ -0,0 +1,13 @@
+export * from './context';
+export * from './helpers';
+export * from './pagination';
+export { default } from './pagination';
+export * from './pagination.types';
+export * from './paginationButton';
+export * from './paginationEllipsis';
+export * from './paginationGoToPage';
+export * from './paginationNavigation';
+export * from './paginationPrevNext';
+export * from './paginationResults';
+export { default as usePagination } from './usePagination';
+export * from './usePagination.types';

package/esm/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+import { VuiComponent } from '../core';
+import { PaginationProps } from './pagination.types';
+import PaginationButton from './paginationButton';
+import PaginationEllipsis from './paginationEllipsis';
+import PaginationGoToPage from './paginationGoToPage';
+import PaginationNavigation from './paginationNavigation';
+import PaginationPrevNext from './paginationPrevNext';
+import PaginationResults from './paginationResults';
+/**
+ * Displays page navigation buttons together with page and item count.
+ * GoToPage component is shown automatically above 10 pages.
+ */
+export declare const Pagination: VuiComponent<"div", PaginationProps> & {
+    Button: typeof PaginationButton;
+    Ellipsis: typeof PaginationEllipsis;
+    GoToPage: typeof PaginationGoToPage;
+    Navigation: typeof PaginationNavigation;
+    PrevNext: typeof PaginationPrevNext;
+    Results: typeof PaginationResults;
+};
+export default Pagination;

package/esm/pagination/pagination.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '../box';
+import { useStyleConfig, vui } from '../core';
+import { cs, isJsx, runIfFn } from '../utils';
+import { PaginationProvider } from './context';
+import PaginationButton from './paginationButton';
+import PaginationEllipsis from './paginationEllipsis';
+import PaginationGoToPage from './paginationGoToPage';
+import PaginationNavigation from './paginationNavigation';
+import PaginationPrevNext from './paginationPrevNext';
+import PaginationResults from './paginationResults';
+import usePagination from './usePagination';
+/**
+ * Displays page navigation buttons together with page and item count.
+ * GoToPage component is shown automatically above 10 pages.
+ */
+export const Pagination = vui((props, ref) => {
+    const { children, className, count, defaultPage, goToPage, items: itemsProp = [], navigation, onPageChange, page: pageProp, pageSize, results, size, variant, ...rest } = props;
+    const styles = useStyleConfig('Pagination', props);
+    const { items = itemsProp, ...paginationProps } = usePagination({
+        count,
+        defaultPage,
+        onPageChange,
+        page: pageProp,
+        pageSize
+    });
+    const context = { ...paginationProps, items, size, variant };
+    return (React.createElement(PaginationProvider, { value: context },
+        React.createElement(Box, { centerV: true, className: cs('vui-pagination', className), gap: 3, ref: ref, w: 1, wrap: true, ...styles.container, ...rest }, runIfFn(children, context) ?? (React.createElement(React.Fragment, null,
+            isJsx(results) ? results : React.createElement(PaginationResults, null),
+            isJsx(navigation) ? navigation : React.createElement(PaginationNavigation, { ml: "auto" }),
+            isJsx(goToPage) ? goToPage : paginationProps.pageCount > 10 && React.createElement(PaginationGoToPage, null))))));
+});
+Pagination.displayName = 'Notification';
+Pagination.Button = PaginationButton;
+Pagination.Ellipsis = PaginationEllipsis;
+Pagination.GoToPage = PaginationGoToPage;
+Pagination.Navigation = PaginationNavigation;
+Pagination.PrevNext = PaginationPrevNext;
+Pagination.Results = PaginationResults;
+export default Pagination;

package/esm/pagination/pagination.types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { BoxProps } from '../box';
+import { ButtonProps } from '../button';
+import { ThemingProps } from '../theme';
+import { RenderProps } from '../utils';
+import { UsePaginationReturnType } from './usePagination';
+import { UsePaginationProps } from './usePagination.types';
+export declare type PaginationButtonProps = ButtonProps & {
+    /** Applies different styling to a button of the current page. */
+    isActive?: boolean;
+    /** Number of the page, which this button represents. */
+    page: number;
+};
+export declare type PaginationContext = UsePaginationReturnType & ThemingProps<'Pagination'>;
+export declare type PaginationItem = 'ellipsisEnd' | 'ellipsisStart' | 'next' | 'previous' | number;
+export declare type PaginationPrevNextProps = ButtonProps & {
+    /** Defines the logic of previous and next buttons. */
+    direction: 'previous' | 'next';
+};
+export declare type PaginationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Pagination'> & UsePaginationProps & {
+    /** Children provide render props using PaginationContext data. */
+    children?: RenderProps<PaginationContext>;
+    /** Socket for page input on the right side. */
+    goToPage?: JSX.Element;
+    /** Array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+    items?: PaginationItem[];
+    /** Socket for the main navigation elements in the middle. */
+    navigation?: JSX.Element;
+    /** Socket for numbers data on the left side. */
+    results?: JSX.Element;
+};

package/esm/pagination/pagination.types.js

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

package/esm/pagination/paginationButton.d.ts

@@ -0,0 +1,4 @@
+import { PaginationButtonProps } from './pagination.types';
+/** Displays a page navigation button within the Pagination. */
+export declare const PaginationButton: import("../core").VuiComponent<"button", PaginationButtonProps>;
+export default PaginationButton;

package/esm/pagination/paginationButton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Button from '../button';
+import { useStyleConfig, vui } from '../core';
+import { usePaginationContext } from './context';
+/** Displays a page navigation button within the Pagination. */
+export const PaginationButton = vui((props, ref) => {
+    const { isActive: isActiveProp, page: pageProp, ...rest } = props;
+    const { onPageChange, page } = usePaginationContext();
+    const styles = useStyleConfig('Pagination', usePaginationContext());
+    const isActive = isActiveProp ?? pageProp === page;
+    const activeProps = isActive
+        ? {
+            bg: 'blue.20',
+            color: 'blue.80',
+            hoverBg: 'blue.30',
+            activeBg: 'blue.40'
+        }
+        : {};
+    return (React.createElement(Button, { className: "vui-paginationButton", minW: 0, onClick: () => onPageChange(pageProp), ref: ref, size: "sm", text: pageProp, variant: "text", ...styles.button, ...activeProps, ...rest }));
+});
+PaginationButton.displayName = 'PaginationButton';
+export default PaginationButton;

package/esm/pagination/paginationEllipsis.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays '...' ellipsis for hidden pages. */
+export declare const PaginationEllipsis: import("../core").VuiComponent<"span", BoxProps>;
+export default PaginationEllipsis;

package/esm/pagination/paginationEllipsis.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Box from '../box';
+import { useStyleConfig, vui } from '../core';
+import { usePaginationContext } from './context';
+/** Displays '...' ellipsis for hidden pages. */
+export const PaginationEllipsis = vui((props, ref) => {
+    const { children, ...rest } = props;
+    const styles = useStyleConfig('Pagination', usePaginationContext());
+    return (React.createElement(Box, { alignItems: "center", className: "vui-paginationEllipsis", ref: ref, ...styles.ellipsis, ...rest }, children ?? '...'));
+});
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+export default PaginationEllipsis;

package/esm/pagination/paginationGoToPage.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays a number input, which allows quickly jumping between pages. */
+export declare const PaginationGoToPage: import("../core").VuiComponent<"div", BoxProps>;
+export default PaginationGoToPage;

package/esm/pagination/paginationGoToPage.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Box from '../box';
+import { useStyleConfig, vui } from '../core';
+import Input from '../input';
+import T from '../t';
+import { usePaginationContext } from './context';
+/** Displays a number input, which allows quickly jumping between pages. */
+export const PaginationGoToPage = vui((props, ref) => {
+    const { onPageChange, pageCount } = usePaginationContext();
+    const styles = useStyleConfig('Pagination', usePaginationContext());
+    const onChange = (e) => {
+        const value = +e.target.value;
+        if (value >= 1 && value <= pageCount) {
+            onPageChange(Math.floor(value));
+        }
+    };
+    return (React.createElement(Box, { centerV: true, className: "vui-paginationGoToPage", lineHeight: "normal", ref: ref, ...styles.goToPage, ...props },
+        React.createElement(T, { size: "sm", weight: "medium" }, "Go to"),
+        React.createElement(Input, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
+        React.createElement(T, { size: "sm", weight: "medium" }, "Page")));
+});
+PaginationGoToPage.displayName = 'PaginationGoToPage';
+export default PaginationGoToPage;

package/esm/pagination/paginationNavigation.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays a set of page navigation buttons. */
+export declare const PaginationNavigation: import("../core").VuiComponent<"div", BoxProps>;
+export default PaginationNavigation;

package/esm/pagination/paginationNavigation.js

@@ -0,0 +1,22 @@
+import React, { Fragment } from 'react';
+import Box from '../box';
+import { useStyleConfig, vui } from '../core';
+import { isNumber, isString } from '../utils';
+import { usePaginationContext } from './context';
+import PaginationButton from './paginationButton';
+import PaginationEllipsis from './paginationEllipsis';
+import PaginationPrevNext from './paginationPrevNext';
+/** Displays a set of page navigation buttons. */
+export const PaginationNavigation = vui((props, ref) => {
+    const { children, ...rest } = props;
+    const { items } = usePaginationContext();
+    const styles = useStyleConfig('Pagination', usePaginationContext());
+    return (React.createElement(Box, { className: "vui-paginationNavigation", gap: 1, ref: ref, wrap: true, ...styles.navigation, ...rest }, children ??
+        items.map(item => (React.createElement(Fragment, { key: item },
+            item === 'previous' && React.createElement(PaginationPrevNext, { direction: "previous" }),
+            isNumber(item) && React.createElement(PaginationButton, { page: item }),
+            isString(item) && item.includes('ellipsis') && React.createElement(PaginationEllipsis, null),
+            item === 'next' && React.createElement(PaginationPrevNext, { direction: "next" }))))));
+});
+PaginationNavigation.displayName = 'PaginationNavigation';
+export default PaginationNavigation;

package/esm/pagination/paginationPrevNext.d.ts

@@ -0,0 +1,4 @@
+import { PaginationPrevNextProps } from './pagination.types';
+/** Displays a page navigation button, which navigates forward or backward. */
+export declare const PaginationPrevNext: import("../core").VuiComponent<"button", PaginationPrevNextProps>;
+export default PaginationPrevNext;

package/esm/pagination/paginationPrevNext.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from '../button';
+import { useStyleConfig, vui } from '../core';
+import { usePaginationContext } from './context';
+/** Displays a page navigation button, which navigates forward or backward. */
+export const PaginationPrevNext = vui((props, ref) => {
+    const { direction, ...rest } = props;
+    const { onPageChange, page, pageCount } = usePaginationContext();
+    const styles = useStyleConfig('Pagination', usePaginationContext());
+    const isPrev = direction === 'previous';
+    const pageChange = isPrev ? -1 : 1;
+    const directionProps = {
+        disabled: isPrev ? page === 1 : page === pageCount,
+        icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+        onClick: () => onPageChange(page + pageChange)
+    };
+    return (React.createElement(Button, { className: "vui-paginationPrevNext", minW: 0, ref: ref, size: "sm", variant: "text", ...styles.prevNext, ...directionProps, ...rest }));
+});
+PaginationPrevNext.displayName = 'PaginationPrevNext';
+export default PaginationPrevNext;

package/esm/pagination/paginationResults.d.ts

@@ -0,0 +1,4 @@
+import { TProps } from '../t';
+/** Displays an action button within the Pagination. */
+export declare const PaginationResults: import("../core").VuiComponent<"span", TProps>;
+export default PaginationResults;

package/esm/pagination/paginationResults.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import T from '../t';
+import { usePaginationContext } from './context';
+/** Displays an action button within the Pagination. */
+export const PaginationResults = vui((props, ref) => {
+    const { children, ...rest } = props;
+    const { count, rangeEnd, rangeStart } = usePaginationContext();
+    const styles = useStyleConfig('Pagination', usePaginationContext());
+    return (React.createElement(T, { className: "vui-paginationResults", color: "grey.80", ref: ref, size: "sm", weight: "medium", ...styles.results, ...rest }, children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`));
+});
+PaginationResults.displayName = 'PaginationResults';
+export default PaginationResults;

package/esm/pagination/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/esm/pagination/theme.js

@@ -0,0 +1,12 @@
+const baseStyle = {};
+const defaultProps = {};
+const parts = ['container', 'button', 'ellipsis', 'goToPage', 'navigation', 'prevNext', 'results'];
+const sizes = {};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/esm/pagination/usePagination.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { UsePaginationProps } from './usePagination.types';
+/** Hook to manage pagination data and state in controlled or uncontrolled way. */
+export default function usePagination(props: UsePaginationProps): {
+    count: number;
+    items: import("./pagination.types").PaginationItem[];
+    onPageChange: import("react").Dispatch<import("react").SetStateAction<number>>;
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    rangeEnd: number;
+    rangeStart: number;
+};
+export declare type UsePaginationReturnType = ReturnType<typeof usePagination>;

package/esm/pagination/usePagination.js

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useControlled, useIsMounted } from '../utils';
+import { getPaginationItems } from './helpers';
+/** Hook to manage pagination data and state in controlled or uncontrolled way. */
+export default function usePagination(props) {
+    const { count, defaultPage = 1, onPageChange: onPageChangeProp, page: pageProp, pageSize } = props;
+    const [page, onPageChange, { isControlled, reset }] = useControlled({
+        defaultValue: defaultPage,
+        onChange: onPageChangeProp,
+        value: pageProp
+    });
+    // In uncontrolled mode, trigger external callback on the first render for consumer to initialize data.
+    useEffect(() => {
+        !isControlled && onPageChangeProp?.(defaultPage);
+    }, []);
+    /** In uncontrolled mode, reset pagination whenever pageSize changes (apart from initialization). */
+    useEffect(() => {
+        isMounted() && reset();
+    }, [pageSize]);
+    const isMounted = useIsMounted();
+    /** How many pages are there in total. */
+    const pageCount = count > 0 && pageSize > 0 ? Math.ceil(count / pageSize) : 0;
+    /** Array of navigation items, like buttons or arrows. */
+    const items = getPaginationItems(page, pageCount);
+    /** First item displayed on the current page. */
+    const rangeStart = (page - 1) * pageSize + 1;
+    /** Last item displayed on the current page. */
+    const rangeEnd = page === pageCount ? count : page * pageSize;
+    return {
+        count,
+        items,
+        onPageChange,
+        page,
+        pageCount,
+        pageSize,
+        rangeEnd,
+        rangeStart
+    };
+}

package/esm/pagination/usePagination.types.d.ts

@@ -0,0 +1,12 @@
+export declare type UsePaginationProps = {
+    /** Total amount of items being paginated. */
+    count: number;
+    /** Starting page in uncontrolled mode. */
+    defaultPage?: number;
+    /** Callback triggered by Pagination elements. */
+    onPageChange?: (page: number) => void;
+    /** Currently displayed page. */
+    page?: number;
+    /** Amount of items per page. */
+    pageSize: number;
+};

package/esm/pagination/usePagination.types.js

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

package/esm/panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './panel';
+export { default } from './panel';
+export * from './panel.types';

package/esm/panel/index.js

@@ -0,0 +1,3 @@
+export * from './panel';
+export { default } from './panel';
+export * from './panel.types';

package/esm/panel/panel.d.ts

@@ -0,0 +1,7 @@
+import { PanelProps } from './panel.types';
+/**
+ * Displays static or partially interactive content, such as text, images or buttons.
+ * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
+ */
+export declare const Panel: import("../core").VuiComponent<"div", PanelProps>;
+export default Panel;