@vuu-ui/vuu-ui-controls 0.9.2 → 0.10.0

package/types/instrument-picker/useTablePicker.d.ts

@@ -19,10 +19,10 @@ export declare const useTablePicker: ({ TableProps, onSelect, rowToString, schem
         y: number;
         isPositioned: boolean;
         update: () => void;
-        floatingStyles: import("react").CSSProperties;
+        floatingStyles: React.CSSProperties;
         refs: {
             reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-            floating: import("react").MutableRefObject<HTMLElement | null>;
+            floating: React.MutableRefObject<HTMLElement | null>;
             setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
             setFloating: (node: HTMLElement | null) => void;
         } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
@@ -34,14 +34,7 @@ export declare const useTablePicker: ({ TableProps, onSelect, rowToString, schem
         };
         onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
     };
-    interactionPropGetters: {
-        getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-        getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-        getItemProps: (userProps?: (Omit<import("react").HTMLProps<HTMLElement>, "selected" | "active"> & {
-            active?: boolean | undefined;
-            selected?: boolean | undefined;
-        }) | undefined) => Record<string, unknown>;
-    };
+    interactionPropGetters: import("@floating-ui/react").UseInteractionsReturn;
     onKeyDown: KeyboardEventHandler<HTMLElement>;
     open: boolean;
     tableConfig: TableConfig;

package/types/list/ChevronIcon.d.ts

@@ -3,5 +3,5 @@ type Direction = "up" | "down" | "left" | "right";
 interface ChevronProps extends HTMLAttributes<HTMLSpanElement> {
     direction: Direction;
 }
-export declare const ChevronIcon: (props: ChevronProps) => JSX.Element;
+export declare const ChevronIcon: (props: ChevronProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/list/ListItem.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
 import { ListItemType } from "./listTypes";
 export declare const ListItemProxy: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    height?: number | undefined;
+    height?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ListItem: ListItemType;

package/types/list/RadioIcon.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const RadioIcon: ({ checked, ...htmlAttributes }: {
     [x: string]: any;
     checked?: boolean | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/types/list/common-hooks/useTypeahead.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollectionItem } from "../../common-hooks/collectionTypes";
 interface TypeaheadHookProps<Item> {
     disableTypeToSelect?: boolean;

package/types/measured-container/MeasuredContainer.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
 import { MeasuredSize } from "./useMeasuredContainer";
-export interface MeasuredContainerProps extends HTMLAttributes<HTMLDivElement> {
+export interface MeasuredContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
     /**
      * A numeric value for height will result in a fixed height. To adapt to container
      * use either a percentage height or 'auto'. Always use 'auto' when rendering

package/types/overflow-container/useOverflowContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
 import { OverflowItem } from "./overflow-utils";
 import { OverflowContainerProps } from "./OverflowContainer";
@@ -7,12 +6,12 @@ export interface OverflowContainerHookProps extends Pick<OverflowContainerProps,
     onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
 }
 export declare const useOverflowContainer: ({ allowDragDrop, itemCount, onMoveItem, onSwitchWrappedItemIntoView, orientation, }: OverflowContainerHookProps) => {
-    draggable?: JSX.Element | undefined;
-    dropIndicator?: JSX.Element | undefined;
-    draggedItemIndex?: number | undefined;
+    draggable?: JSX.Element;
+    dropIndicator?: JSX.Element;
+    draggedItemIndex?: number;
     isDragging: boolean;
     isScrolling: import("react").RefObject<boolean>;
-    revealOverflowedItems?: boolean | undefined;
+    revealOverflowedItems?: boolean;
     menuActionHandler: MenuActionHandler;
     menuBuilder: MenuBuilder;
     onItemMouseDown: import("react").MouseEventHandler | undefined;

package/types/price-ticker/PriceTicker.d.ts

@@ -4,4 +4,4 @@ export interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {
     price?: number;
     showArrow?: boolean;
 }
-export declare const PriceTicker: import("react").MemoExoticComponent<({ className, decimals, price, showArrow, ...htmlAttributes }: PriceTickerProps) => JSX.Element>;
+export declare const PriceTicker: import("react").MemoExoticComponent<({ className, decimals, price, showArrow, ...htmlAttributes }: PriceTickerProps) => import("react/jsx-runtime").JSX.Element>;

package/types/split-button/SplitStateButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SplitButtonProps } from "./SplitButton";
 export interface SplitStateButtonProps extends SplitButtonProps {
     selected: boolean;

package/types/split-button/useSplitButton.d.ts

@@ -8,16 +8,16 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
     ButtonProps: {
         onClick: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
-        type?: "button" | "submit" | "reset" | undefined;
-        value?: string | number | readonly string[] | undefined;
-        children?: import("react").ReactNode;
+        type?: "submit" | "reset" | "button" | undefined;
+        value?: string | readonly string[] | number | undefined;
+        children?: import("react").ReactNode | undefined;
         form?: string | undefined;
         slot?: string | undefined;
         style?: import("react").CSSProperties | undefined;
         title?: string | undefined;
         key?: import("react").Key | null | undefined;
-        disabled?: boolean | undefined;
-        formAction?: string | undefined;
+        disabled?: boolean;
+        formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -28,17 +28,18 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined;
         translate?: "yes" | "no" | undefined;
@@ -55,7 +56,6 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -67,56 +67,63 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
-        'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
-        'aria-busy'?: (boolean | "true" | "false") | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-colcount'?: number | undefined;
-        'aria-colindex'?: number | undefined;
-        'aria-colspan'?: number | undefined;
-        'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "date" | "true" | "time" | "false" | "page" | "step" | "location" | undefined;
-        'aria-describedby'?: string | undefined;
-        'aria-details'?: string | undefined;
-        'aria-disabled'?: (boolean | "true" | "false") | undefined;
-        'aria-dropeffect'?: "copy" | "link" | "none" | "execute" | "move" | "popup" | undefined;
-        'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: (boolean | "true" | "false") | undefined;
-        'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "true" | "dialog" | "menu" | "false" | "grid" | "listbox" | "tree" | undefined;
-        'aria-hidden'?: (boolean | "true" | "false") | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-        'aria-keyshortcuts'?: string | undefined;
-        'aria-label'?: string | undefined;
-        'aria-labelledby'?: string | undefined;
-        'aria-level'?: number | undefined;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: (boolean | "true" | "false") | undefined;
-        'aria-multiline'?: (boolean | "true" | "false") | undefined;
-        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
-        'aria-orientation'?: "horizontal" | "vertical" | undefined;
-        'aria-owns'?: string | undefined;
-        'aria-placeholder'?: string | undefined;
-        'aria-posinset'?: number | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-readonly'?: (boolean | "true" | "false") | undefined;
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: (boolean | "true" | "false") | undefined;
-        'aria-roledescription'?: string | undefined;
-        'aria-rowcount'?: number | undefined;
-        'aria-rowindex'?: number | undefined;
-        'aria-rowspan'?: number | undefined;
-        'aria-selected'?: (boolean | "true" | "false") | undefined;
-        'aria-setsize'?: number | undefined;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
-        'aria-valuemax'?: number | undefined;
-        'aria-valuemin'?: number | undefined;
-        'aria-valuenow'?: number | undefined;
-        'aria-valuetext'?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -187,6 +194,8 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+        onResize?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+        onResizeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
@@ -255,9 +264,7 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         onPointerCancel?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerCancelCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerEnter?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
-        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerLeave?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
-        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerOver?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerOverCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerOut?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
@@ -278,7 +285,11 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        focusableWhenDisabled?: boolean | undefined;
+        focusableWhenDisabled?: boolean;
+        appearance?: import("@salt-ds/core").ButtonAppearance;
+        sentiment?: import("@salt-ds/core").ButtonSentiment;
+        loading?: boolean;
+        loadingAnnouncement?: string;
     };
     PopupMenuProps: PopupMenuProps;
     buttonRef: import("react").RefObject<HTMLButtonElement>;

package/types/table-search/SearchCell.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const SearchCell: ({ column, columnMap, row, }: TableCellRendererProps) => JSX.Element;
+export declare const SearchCell: ({ column, columnMap, row, searchPattern, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element;

package/types/table-search/TableSearch.d.ts

@@ -1,11 +1,9 @@
-import { DataSource } from "@vuu-ui/vuu-data-types";
 import { TableProps } from "@vuu-ui/vuu-table";
 import { HTMLAttributes } from "react";
 export interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {
-    TableProps?: Partial<TableProps>;
+    TableProps: TableProps;
     autoFocus?: boolean;
-    dataSource: DataSource;
     placeHolder?: string;
     searchColumns: string[];
 }
-export declare const TableSearch: ({ TableProps, autoFocus, className, dataSource: dataSourceProp, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => JSX.Element;
+export declare const TableSearch: ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus, className, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => import("react/jsx-runtime").JSX.Element;

package/types/table-search/useTableSearch.d.ts

@@ -1,10 +1,12 @@
 import { FormEventHandler } from "react";
 import { TableSearchProps } from "./TableSearch";
-export interface TableSearchHookProps extends Pick<TableSearchProps, "dataSource" | "searchColumns"> {
+import { DataSource } from "@vuu-ui/vuu-data-types";
+export interface TableSearchHookProps extends Pick<TableSearchProps, "searchColumns"> {
+    dataSource: DataSource;
     label?: string;
 }
 export declare const useTableSearch: ({ dataSource, searchColumns, }: TableSearchHookProps) => {
-    dataSource: import("@vuu-ui/vuu-data-types").DataSource;
+    dataSource: DataSource;
     onChange: FormEventHandler;
     searchState: {
         searchText: string;

package/types/tabs-next/TabBar.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithRef } from "react";
+export interface TabBarProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Styling variant with a bottom separator. Defaults to false
+     */
+    divider?: boolean;
+    /**
+     * Styling variant with left and right padding. Defaults to false
+     */
+    inset?: boolean;
+}
+export declare const TabBar: import("react").ForwardRefExoticComponent<Omit<TabBarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabs-next/TabListNext.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TabListNextProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /**
+     * Styling active color variant. Defaults to "primary".
+     */
+    activeColor?: "primary" | "secondary" | "tertiary";
+    /**
+     * The appearance of the tabs. Defaults to "bordered".
+     */
+    appearance?: "bordered" | "transparent";
+}
+export declare const TabListNext: import("react").ForwardRefExoticComponent<TabListNextProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabs-next/TabNext.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TabNextProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the tab will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the tab.
+     */
+    value: string;
+}
+export declare const TabNext: import("react").ForwardRefExoticComponent<TabNextProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabs-next/TabNextAction.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps } from "@salt-ds/core";
+export interface TabNextActionProps extends ButtonProps {
+    debugLabel?: string;
+}
+export declare const TabNextAction: import("react").ForwardRefExoticComponent<TabNextActionProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/tabs-next/TabNextContext.d.ts

@@ -0,0 +1,12 @@
+interface TabNextContextValue {
+    tabId?: string;
+    focused: boolean;
+    selected: boolean;
+    value: string;
+    disabled: boolean;
+    actions: string[];
+    registerAction: (id: string) => () => void;
+}
+export declare const TabNextContext: import("react").Context<TabNextContextValue>;
+export declare function useTabNext(): TabNextContextValue;
+export {};

package/types/tabs-next/TabNextPanel.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TabNextPanelProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The value of the panel, this should map to the corresponding tab.
+     */
+    value: string;
+}
+export declare const TabNextPanel: import("react").ForwardRefExoticComponent<TabNextPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabs-next/TabNextTrigger.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithoutRef } from "react";
+export interface TabNextTriggerProps extends ComponentPropsWithoutRef<"button"> {
+    debugLabel?: string;
+}
+export declare const TabNextTrigger: import("react").ForwardRefExoticComponent<TabNextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/tabs-next/TabOverflowList.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef, type Dispatch, type ReactNode, type Ref, type RefObject, type SetStateAction } from "react";
+interface TabOverflowListProps extends ComponentPropsWithoutRef<"button"> {
+    buttonRef?: Ref<HTMLButtonElement>;
+    tabstripRef: RefObject<HTMLDivElement>;
+    children?: ReactNode;
+    isMeasuring?: boolean;
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+}
+export declare const TabOverflowList: import("react").ForwardRefExoticComponent<TabOverflowListProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/types/tabs-next/TabsNext.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type SyntheticEvent } from "react";
+export interface TabsNextProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    children?: ReactNode;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The value. Use when the component is controlled.
+     */
+    value?: string;
+    /**
+     * Callback fired when the selection changes. The event will be null when selection is moved automatically.
+     */
+    onChange?: (event: SyntheticEvent | null, value: string) => void;
+}
+export declare const TabsNext: import("react").ForwardRefExoticComponent<TabsNextProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabs-next/TabsNextContext.d.ts

@@ -0,0 +1,21 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction, type SyntheticEvent } from "react";
+import type { useCollection } from "./hooks/useCollection";
+export interface Item {
+    id: string;
+    value: string;
+    element: HTMLElement;
+}
+export interface TabsNextContextValue extends Omit<ReturnType<typeof useCollection>, "registerItem"> {
+    registerTab: (item: Item) => () => void;
+    registerPanel: (id: string, value: string) => () => void;
+    getPanelId: (value: string) => string | undefined;
+    getTabId: (value: string) => string | undefined;
+    selected?: string;
+    setSelected: (event: SyntheticEvent, value: string) => void;
+    activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
+    returnFocus: MutableRefObject<string | undefined>;
+    menuOpen: boolean;
+    setMenuOpen: Dispatch<SetStateAction<boolean>>;
+}
+export declare const TabsNextContext: import("react").Context<TabsNextContextValue>;
+export declare function useTabsNext(): TabsNextContextValue;

package/types/tabs-next/hooks/useCollection.d.ts

@@ -0,0 +1,18 @@
+export interface Item {
+    id: string;
+    element?: HTMLElement | null;
+    value: string;
+}
+interface UseCollectionProps {
+    wrap: boolean;
+}
+export declare function useCollection({ wrap }: UseCollectionProps): {
+    registerItem: (item: Item) => () => import("react").MutableRefObject<Item[]>;
+    item: (id?: string | null) => Item | null;
+    getNext: (current: string) => Item | null;
+    getPrevious: (current: string) => Item | null;
+    getFirst: () => Item | null;
+    getLast: () => Item | null;
+    items: Item[];
+};
+export {};

package/types/tabs-next/hooks/useFocusOutside.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useFocusOutside(elementRef: RefObject<HTMLElement>, onFocusOutside: () => void, enabled: boolean, ignore?: string): void;

package/types/tabs-next/hooks/useOverflow.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type RefObject } from "react";
+import type { Item } from "./useCollection";
+interface UseOverflowProps {
+    container: RefObject<HTMLElement>;
+    selected?: string;
+    children: ReactNode;
+    tabs: Item[];
+    overflowButton: RefObject<HTMLButtonElement>;
+}
+export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], (string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], false] | readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], readonly [], true];
+export {};

package/types/tabs-next/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./TabNext";
+export * from "./TabListNext";
+export * from "./TabsNext";
+export * from "./TabNextPanel";
+export * from "./TabBar";
+export * from "./TabNextTrigger";
+export * from "./TabNextAction";

package/types/tabstrip/Tab.d.ts

@@ -1,26 +1,27 @@
 import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
 import { KeyboardEvent, MouseEvent } from "react";
+import { EditableLabelProps } from "../editable-label";
 export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onKeyUp" | "onClick"> & {
-    ariaControls?: string | undefined;
-    closeable?: boolean | undefined;
-    draggable?: boolean | undefined;
-    dragging?: boolean | undefined;
-    editable?: boolean | undefined;
-    editing?: boolean | undefined;
-    focused?: boolean | undefined;
-    focusVisible?: boolean | undefined;
-    focusedChildIndex?: number | undefined;
-    location?: string | undefined;
-    selected?: boolean | undefined;
-    showMenuButton?: boolean | undefined;
-    index?: number | undefined;
-    label?: string | undefined;
-    onClick?: ((e: MouseEvent<HTMLElement, globalThis.MouseEvent>, index: number) => void) | undefined;
-    onClose?: ((index: number) => void) | undefined;
-    onEnterEditMode?: (() => void) | undefined;
-    onExitEditMode?: import("./TabsTypes").exitEditHandler | undefined;
-    onKeyUp?: ((e: KeyboardEvent<Element>, index: number) => void) | undefined;
-    onMenuAction?: MenuActionHandler | undefined;
-    onMenuClose?: (() => void) | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
+    ariaControls?: import("react").AriaAttributes["aria-controls"];
+    closeable?: boolean;
+    draggable?: boolean;
+    dragging?: boolean;
+    editable?: boolean;
+    editing?: EditableLabelProps["editing"];
+    focused?: boolean;
+    focusVisible?: boolean;
+    focusedChildIndex?: number;
+    location?: string;
+    selected?: boolean;
+    showMenuButton?: boolean;
+    index?: number;
+    label?: EditableLabelProps["defaultValue"];
+    onClick?: (e: MouseEvent<HTMLElement>, index: number) => void;
+    onClose?: (index: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: import("./TabsTypes").exitEditHandler;
+    onKeyUp?: (e: KeyboardEvent, index: number) => void;
+    onMenuAction?: MenuActionHandler;
+    onMenuClose?: () => void;
+    orientation?: "horizontal" | "vertical";
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabstrip/TabMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
 export interface TabMenuProps {
     allowClose: boolean;
@@ -16,4 +15,4 @@ export interface TabMenuProps {
      */
     controlledComponentTitle?: string;
 }
-export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => JSX.Element;
+export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabstrip/Tabstrip.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TabstripProps } from "./TabsTypes";
-export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, tabClassName, variant, ...htmlAttributes }: TabstripProps) => JSX.Element;
+export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, tabClassName, variant, ...htmlAttributes }: TabstripProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabstrip/useSelection.d.ts

@@ -1,9 +1,9 @@
 import { KeyboardEvent, MouseEvent } from "react";
 export declare const useSelection: ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp, }: {
-    defaultSelected?: number | undefined;
+    defaultSelected?: number;
     highlightedIdx: number;
-    onSelectionChange?: ((tabIndex: number) => void) | undefined;
-    selected?: number | undefined;
+    onSelectionChange?: (tabIndex: number) => void;
+    selected?: number;
 }) => {
     activateTab: (tabIndex: number) => void;
     isControlled: boolean;