@wavv/ui 1.8.21 → 1.9.0

package/build/esm/types/components/Tabs.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { Margin } from './types';
+type TabItem = {
+    id: string | number;
+    label: ReactNode;
+};
+type Props<ItemType> = {
+    /** The tab items to be rendered */
+    items: ItemType[];
+    /** The id of the active tab */
+    activeItem: string | number;
+    /** Controls whether the tabs fill the space of the container */
+    itemWidth?: 'auto' | 'fill';
+    /** The gap between each tab item */
+    itemGap?: string | number;
+    /** The function called with the tab item after the tab is changed */
+    onChange: (tab: ItemType) => void;
+} & Margin;
+declare const Tabs: <ItemType extends TabItem>({ items, activeItem, itemWidth, itemGap, onChange, ...props }: Props<ItemType>) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/build/esm/types/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { default as useSelectAll } from './useSelectAll';
 export { default as useEventListener } from './useEventListener';
 export { default as useSelect } from './useSelect';
 export { default as useElementObserver } from './useElementObserver';
+export { default as usePrevious } from './usePrevious';

package/build/esm/types/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(value: T) => T;
+export default usePrevious;

package/build/esm/types/index.d.ts

@@ -39,6 +39,7 @@ export { default as TransferList } from './components/TransferList';
 export { default as Table } from './components/Table';
 export { default as Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
+export { default as Tabs } from './components/Tabs';
 export { default as theme } from './theme';
 export type { ITheme, ThemeProp } from './theme/ThemeTypes';
 export type { IconNames } from './components/Icon/icons';
@@ -52,6 +53,7 @@ export { default as useSelectAll } from './hooks/useSelectAll';
 export { default as useWindowSize } from './hooks/useWindowSize';
 export { default as useConfirm } from './hooks/useConfirm';
 export { default as useElementObserver } from './hooks/useElementObserver';
+export { default as usePrevious } from './hooks/usePrevious';
 export { default as formatDate } from './utils/formatDate';
 export { default as copyToClipboard } from './utils/copyToClipboard';
 export { default as numberWithCommas } from './utils/numberWithCommas';

package/build/index.d.ts

@@ -675,7 +675,7 @@ type ChartProps = {
     responsive?: boolean;
 } & Margin & WidthHeight & MaxWidthHeight;
 
-type Props$2 = {
+type Props$3 = {
     /** Stacks multiple data points within a single bar */
     stacked?: boolean;
     /** Orients the bars outward from the Y axis */
@@ -697,7 +697,7 @@ type Props$2 = {
     /** The width of the Y axis */
     yAxisWidth?: number;
 } & ChartProps;
-declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, xAxisHeight, yAxisWidth, ...rest }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, xAxisHeight, yAxisWidth, ...rest }: Props$3) => react_jsx_runtime.JSX.Element;
 
 type OptionItem = {
     id: number | string;
@@ -2313,7 +2313,7 @@ type ChartData = {
     value: number;
     color?: string;
 };
-type Props$1 = {
+type Props$2 = {
     /** The chart data array  */
     data: ChartData[];
     /** The width & height of the chart */
@@ -2323,7 +2323,7 @@ type Props$1 = {
     /** Displays a gray chart if no data is present */
     showWhenEmpty?: boolean;
 } & Margin;
-declare const PieChart: ({ size, data, innerRadius, showWhenEmpty, ...rest }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const PieChart: ({ size, data, innerRadius, showWhenEmpty, ...rest }: Props$2) => react_jsx_runtime.JSX.Element;
 
 type CircleProps = ({
     circle?: false;
@@ -2530,6 +2530,24 @@ type ToggleProps = {
 } & Margin & As & CheckboxAttributes;
 declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => react_jsx_runtime.JSX.Element;
 
+type TabItem = {
+    id: string | number;
+    label: ReactNode;
+};
+type Props$1<ItemType> = {
+    /** The tab items to be rendered */
+    items: ItemType[];
+    /** The id of the active tab */
+    activeItem: string | number;
+    /** Controls whether the tabs fill the space of the container */
+    itemWidth?: 'auto' | 'fill';
+    /** The gap between each tab item */
+    itemGap?: string | number;
+    /** The function called with the tab item after the tab is changed */
+    onChange: (tab: ItemType) => void;
+} & Margin;
+declare const Tabs: <ItemType extends TabItem>({ items, activeItem, itemWidth, itemGap, onChange, ...props }: Props$1<ItemType>) => react_jsx_runtime.JSX.Element;
+
 declare const useEventListener: <T extends Event>(element: MutableRefObject<HTMLElement> | HTMLElement | Document | Window, type: keyof WindowEventMap, listener: (event: T) => void, condition?: boolean, dependencies?: unknown[]) => void;
 
 declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
@@ -2589,6 +2607,8 @@ declare const useConfirm: ({ header, text, cancelText, confirmText, negative, in
  */
 declare const useElementObserver: <T extends HTMLElement>(target: RefObject<T>, callback: (node: T) => void) => void;
 
+declare const usePrevious: <T>(value: T) => T;
+
 type TimeSpec = 'onlyTime' | 'withTime' | 'relative';
 type TimeOptions = {
     time?: TimeSpec;
@@ -2626,4 +2646,4 @@ declare const positionProps: ({ position, top, bottom, right, left }: Position)
     left: string | number | undefined;
 };
 
-export { Accordion, As, Audio, AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, DraftEditorRef, Dropdown, DropdownMenu, OptionItem as DropdownOption, FlexPosition, Form, Grid, Height, ITheme, Icon, IconNames, ImageViewer, InlineCode, Input, InputRef, _default as InputUtils, Label, LineChart, Margin, MarginPadding, MaxHeight, MaxWidth, MaxWidthHeight, Menu, Message, MessageHr, MinHeight, MinWidth, MinWidthHeight, Modal, MultiSelect, MultiSelectRef, Notification, Options, Padding, Pagination, PieChart, Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, Table, ThemeProp, ToastStyles, Toggle, Tooltip, Action as TransferAction, Item as TransferItem, TransferList, Next as TransferNext, Width, WidthHeight, copyToClipboard, formatDate, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, useSelect, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, As, Audio, AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, DraftEditorRef, Dropdown, DropdownMenu, OptionItem as DropdownOption, FlexPosition, Form, Grid, Height, ITheme, Icon, IconNames, ImageViewer, InlineCode, Input, InputRef, _default as InputUtils, Label, LineChart, Margin, MarginPadding, MaxHeight, MaxWidth, MaxWidthHeight, Menu, Message, MessageHr, MinHeight, MinWidth, MinWidthHeight, Modal, MultiSelect, MultiSelectRef, Notification, Options, Padding, Pagination, PieChart, Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, Table, Tabs, ThemeProp, ToastStyles, Toggle, Tooltip, Action as TransferAction, Item as TransferItem, TransferList, Next as TransferNext, Width, WidthHeight, copyToClipboard, formatDate, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelect, useSelectAll, useWindowSize, widthHeightProps };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "1.8.21",
+	"version": "1.9.0",
 	"files": [
 		"build/**/*"
 	],