@vuu-ui/vuu-ui-controls 4.0.0-alpha.9 → 4.0.0-beta.1

package/src/time-input/useTimeInput.js

@@ -1,75 +1,85 @@
-import { isValidTimeString } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef } from "react";
+import { isValidTimeString, isValidTimeStringMillis } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
 import { MaskedInput } from "./MaskedInput.js";
 const isDigit = (char)=>1 === char.length && /[0-9]/.test(char);
-const useTimeInput = ({ defaultValue, onChange, onCommit, value })=>{
+const useTimeInput = ({ defaultValue, milliseconds = false, onChange, onCommit: onCommitProp, value })=>{
+    const onCommit = onCommitProp;
     const mousedDownRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
     const maskedInputRef = useRef(void 0);
-    useMemo(()=>{
-        if (void 0 === maskedInputRef.current) {
-            maskedInputRef.current = new MaskedInput(defaultValue, null);
-            maskedInputRef.current.on("change", (e)=>{
-                onChange?.(e);
-            });
-        }
-        if (value && value !== maskedInputRef.current.value) maskedInputRef.current.value = value;
+    if (void 0 === maskedInputRef.current || maskedInputRef.current.milliseconds !== milliseconds) {
+        maskedInputRef.current = new MaskedInput(value ?? maskedInputRef.current?.value ?? defaultValue, null, {
+            milliseconds
+        });
+        maskedInputRef.current.on("change", (e)=>{
+            onChangeRef.current?.(e);
+        });
+    }
+    const maskedInput = maskedInputRef.current;
+    if (void 0 !== value) maskedInput.value = value;
+    const setInputEl = useCallback((el)=>{
+        maskedInput.input = el;
     }, [
-        defaultValue,
-        onChange,
-        value
+        maskedInput
     ]);
-    const setInputEl = useCallback((el)=>{
-        if (el && maskedInputRef.current) maskedInputRef.current.input = el;
-    }, []);
-    const back = useRef(false);
-    const commitValue = useCallback((evt, value)=>{
-        if (isValidTimeString(value)) onCommit(evt, value, "text-input");
-        else if ("hh:mm:ss" === value) console.log("no value set");
-        else console.log("value is not valid");
+    const commitValue = useCallback((evt)=>{
+        if ("" !== evt.currentTarget.value) {
+            const { value } = maskedInput;
+            if (milliseconds ? isValidTimeStringMillis(value) : isValidTimeString(value)) onCommit(evt, value, "text-input");
+        }
     }, [
+        maskedInput,
+        milliseconds,
         onCommit
     ]);
     const handleKeyDown = useCallback((e)=>{
-        const { current: maskedInput } = maskedInputRef;
-        if (maskedInput) {
-            if ("Backspace" === e.key) {
-                maskedInput.backspace();
-                back.current = true;
-            } else if (isDigit(e.key)) maskedInput.update(e.key);
-            else if ("ArrowLeft" === e.key) maskedInput.moveFocus("left");
-            else if ("ArrowRight" === e.key) maskedInput.moveFocus("right");
-            else if ("ArrowUp" === e.key) maskedInput.incrementValue();
-            else if ("ArrowDown" === e.key) maskedInput.decrementValue();
-            else if ("v" === e.key && e.metaKey) return;
-            else if ("Tab" === e.key) return;
-            else if ("Enter" === e.key) commitValue(e, maskedInput.value);
-        }
+        if (e.ctrlKey || e.metaKey || e.altKey || "Tab" === e.key) return;
+        if ("Backspace" === e.key) maskedInput.backspace();
+        else if (isDigit(e.key)) maskedInput.update(e.key);
+        else if ("ArrowLeft" === e.key) maskedInput.moveFocus("left");
+        else if ("ArrowRight" === e.key) maskedInput.moveFocus("right");
+        else if ("ArrowUp" === e.key) maskedInput.incrementValue();
+        else if ("ArrowDown" === e.key) maskedInput.decrementValue();
+        else if ("Home" === e.key) maskedInput.selectFirst();
+        else if ("End" === e.key) maskedInput.selectLast();
+        else if ("Enter" === e.key) commitValue(e);
+        else if ("Escape" === e.key) return;
         e.preventDefault();
     }, [
-        commitValue
+        commitValue,
+        maskedInput
     ]);
     const handleDoubleClick = useCallback(()=>{
-        maskedInputRef.current?.doubleClick();
-    }, []);
+        maskedInput.doubleClick();
+    }, [
+        maskedInput
+    ]);
     const handlePaste = useCallback((e)=>{
-        const value = e.clipboardData.getData("text");
-        if (isValidTimeString(value)) maskedInputRef.current?.pasteValue(value);
-    }, []);
+        e.preventDefault();
+        maskedInput.pasteValue(e.clipboardData.getData("text"));
+    }, [
+        maskedInput
+    ]);
     const handleFocus = useCallback(()=>{
         if (mousedDownRef.current) mousedDownRef.current = false;
-        else maskedInputRef.current?.focus();
-    }, []);
+        else maskedInput.focus();
+    }, [
+        maskedInput
+    ]);
     const handleMouseDown = useCallback(()=>{
         mousedDownRef.current = true;
     }, []);
     const handleMouseUp = useCallback((e)=>{
         e.preventDefault();
-        maskedInputRef.current?.click();
-    }, []);
+        maskedInput.click();
+    }, [
+        maskedInput
+    ]);
     return {
         inputRef: setInputEl,
         eventHandlers: {
-            onBlur: maskedInputRef.current?.blur,
+            onBlur: maskedInput.blur,
             onDoubleClick: handleDoubleClick,
             onFocus: handleFocus,
             onKeyDown: handleKeyDown,

package/src/toolbar/Toolbar.css.js

@@ -35,7 +35,7 @@ const css = `
 }
 
 .vuuToolbarItem:focus, .vuuToolbarItem:focus-visible {
-  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
+  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple));
   outline-offset: 0px;
   outline-width: 1px;
   outline-style: dashed;

package/src/vuu-date-picker/VuuDatePicker.js

@@ -1,84 +1,78 @@
-import { createElement, useCallback, useRef, useState } from "react";
-import { getLocalTimeZone, isSameDay, isSameMonth, isSameYear } from "@internationalized/date";
+import { createElement, useCallback, useMemo, useRef, useState } from "react";
+import { EpochTimestamp, fromDateTimeFields } from "@vuu-ui/vuu-utils";
+import { CalendarDate } from "@internationalized/date";
 import clsx from "clsx";
 import { DatePicker } from "../date-picker/index.js";
 const classBase = "VuuDatePicker";
-const isSameDate = (d1, d2)=>void 0 !== d2 && isSameDay(d1, d2) && isSameMonth(d1, d2) && isSameYear(d1, d2);
 const datePattern = /^\d{1,2} [a-z]{3} \d{4}$/i;
-const isValidDate = (value)=>void 0 !== value && value?.match(datePattern) !== null && !Number.isNaN(new Date(value).getDay());
-const localTimeZone = getLocalTimeZone();
-const toEpochMillis = (date, timezone = getLocalTimeZone())=>date.toDate(timezone).getTime();
-const getDates = (selectedDate)=>{
-    if (selectedDate) return {
-        datePickerKey: "controlled",
-        defaultDate: void 0,
-        selectedDate
-    };
-    return {
-        datePickerKey: "uncontrolled",
-        defaultDate: void 0,
-        selectedDate
-    };
+const isValidDate = (value)=>void 0 !== value && null !== value.match(datePattern) && !Number.isNaN(new Date(value).getDay());
+const isSameDate = (d1, d2)=>void 0 !== d2 && 0 === d1.compare(d2);
+const toCalendarDateInTimeZone = (value, timeZone)=>{
+    const timestamp = value instanceof EpochTimestamp ? value : EpochTimestamp.fromWire(value, "epochMillis");
+    if (timestamp) {
+        const { year, month, day } = timestamp.getFields(timeZone);
+        return new CalendarDate(year, month, day);
+    }
 };
-const VuuDatePicker = ({ className, onSelectionChange, selectedDate: selectedDateProp, onCommit, preserveFocusOnSelect, ...props })=>{
-    const [open, _setOpen] = useState(false);
-    const valueRef = useRef("");
+const startOfDateInTimeZone = (date, timeZone)=>fromDateTimeFields({
+        year: date.year,
+        month: date.month,
+        day: date.day,
+        hour: 0,
+        minute: 0,
+        second: 0,
+        millisecond: 0
+    }, timeZone);
+const VuuDatePicker = ({ className, onSelectionChange, onCommit, preserveFocusOnSelect, selectedDate: selectedDateProp, timeZone, value, ...props })=>{
+    const [open, setOpen] = useState(false);
+    const inputValueRef = useRef("");
     const datePickerRef = useRef(null);
-    const dateState = useRef(getDates(selectedDateProp));
-    const setOpen = (o)=>{
-        console.log(`setOpen ${o}`);
-        _setOpen(o);
-    };
+    const controlledDate = useMemo(()=>selectedDateProp ?? toCalendarDateInTimeZone(value, timeZone), [
+        selectedDateProp,
+        timeZone,
+        value
+    ]);
+    const [selectedDate, setSelectedDate] = useState(controlledDate);
+    const controlledDateRef = useRef(controlledDate);
+    if (void 0 !== controlledDate && (void 0 === controlledDateRef.current || 0 !== controlledDate.compare(controlledDateRef.current))) {
+        controlledDateRef.current = controlledDate;
+        if (!isSameDate(controlledDate, selectedDate)) setSelectedDate(controlledDate);
+    }
     const commitDateChange = useCallback((e, date)=>{
         onSelectionChange?.(e, date);
         setOpen(false);
-        onCommit?.(e, toEpochMillis(date, localTimeZone));
+        onCommit?.(e, startOfDateInTimeZone(date, timeZone));
         if (preserveFocusOnSelect) requestAnimationFrame(()=>{
             datePickerRef.current?.querySelector("input")?.focus();
         });
     }, [
         onCommit,
         onSelectionChange,
-        preserveFocusOnSelect
+        preserveFocusOnSelect,
+        timeZone
     ]);
     const handleSelectionChange = useCallback((e, date)=>{
-        const { selectedDate } = dateState.current;
-        if (date) {
-            if (void 0 === selectedDate) {
-                dateState.current = getDates(date);
-                commitDateChange(e, date);
-            } else if (!isSameDate(date, selectedDate)) {
-                dateState.current.selectedDate = date;
-                commitDateChange(e, date);
-            }
+        if (date && !isSameDate(date, selectedDate)) {
+            setSelectedDate(date);
+            commitDateChange(e, date);
         }
     }, [
-        commitDateChange
+        commitDateChange,
+        selectedDate
     ]);
-    const handleChange = (evt, value = "")=>{
-        console.log("handleChange", {
-            evt,
-            value
-        });
-        valueRef.current = value;
-        console.log(`is '${value}' a valid date ? ${isValidDate(value)}`);
+    const handleChange = (_evt, value = "")=>{
+        inputValueRef.current = value;
     };
     const handleKeyDown = (e)=>{
         if ("ArrowDown" === e.key) setOpen(true);
     };
     const handleKeyDownCapture = (e)=>{
-        if ("Enter" === e.key) if (isValidDate(valueRef.current)) console.log(`committayaface (${valueRef.current})`);
-        else {
-            console.log(`nice try cowboy, but '${valueRef.current}' is nota valid date`);
-            e.stopPropagation();
-        }
+        if ("Enter" === e.key && "" !== inputValueRef.current && !isValidDate(inputValueRef.current)) e.stopPropagation();
     };
-    const { datePickerKey, defaultDate, selectedDate } = dateState.current;
     return /*#__PURE__*/ createElement(DatePicker, {
         ...props,
         className: clsx(classBase, className),
-        defaultSelectedDate: defaultDate,
-        key: datePickerKey,
+        key: selectedDate ? "controlled" : "uncontrolled",
         open: open,
         onChange: handleChange,
         onKeyDown: handleKeyDown,

package/src/vuu-time-picker/VuuTimePicker.js

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { TimeInput } from "../time-input/TimeInput.js";
 import VuuTimePicker from "./VuuTimePicker.css";
 const classBase = "vuuTimePicker";
-const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, onChange, onCommit, value, ...htmlAttributes })=>{
+const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, milliseconds, onChange, onCommit, value, ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-time-picker",
@@ -16,10 +16,11 @@ const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, onChange, onComm
         ...htmlAttributes,
         className: clsx(classBase, className),
         children: /*#__PURE__*/ jsx(TimeInput, {
-            defaultValue: defaultValue,
-            onChange: onChange,
-            onCommit: onCommit,
-            value: value
+            defaultValue,
+            milliseconds,
+            onChange,
+            onCommit,
+            value
         })
     });
 };

package/types/context-panel-provider/ContextPanelProvider.d.ts

@@ -1,14 +1,17 @@
 import { type ReactElement, type ReactNode } from "react";
+/**
+ * If component is a string, the component will be read from the
+ * comoponent registry. In that case, componentProps can be used
+ * to pass props to the component.
+ */
 export type ShowContextPanel = (component: string | ReactElement, title: string, componentProps?: unknown) => void;
 export interface ContextPanelProps {
     hideContextPanel?: () => void;
     showContextPanel: ShowContextPanel;
 }
-export type ResolveContextPanelComponent = (component: string, componentProps?: unknown) => ReactElement;
 export declare const ContextPanelContext: import("react").Context<ContextPanelProps>;
-export declare const ContextPanelProvider: ({ children, hideContextPanel: hideContextPanelProp, resolveComponent, showContextPanel: showContextPanelProp, }: Partial<ContextPanelProps> & {
+export declare const ContextPanelProvider: ({ children, hideContextPanel: hideContextPanelProp, showContextPanel: showContextPanelProp, }: Partial<ContextPanelProps> & {
     children: ReactNode;
-    resolveComponent?: ResolveContextPanelComponent;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare function useContextPanel(): ShowContextPanel;
 export declare function useHideContextPanel(): (() => void) | undefined;

package/types/drag-drop/DragDropProvider.d.ts

@@ -27,7 +27,7 @@ export type MeasuredTarget = {
     right: number;
     top: number;
 };
-export declare const DragDropProvider: ({ children, dragSources: dragSourcesProp, }: DragDropProviderProps) => import("react").JSX.Element;
+export declare const DragDropProvider: ({ children, dragSources: dragSourcesProp, }: DragDropProviderProps) => import("react/jsx-runtime").JSX.Element;
 export interface DragDropProviderResult {
     isDragSource?: boolean;
     isDropTarget?: boolean;

package/types/hover-overlay/HoverOverlay.d.ts

@@ -5,4 +5,4 @@ export interface HoverOverlayProps extends Pick<OverlayProps, "placement" | "onO
     open?: boolean;
     trigger: ReactNode;
 }
-export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, placement, trigger, }: HoverOverlayProps) => import("react").JSX.Element;
+export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, placement, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/types/icon-button/Icon.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     name: string;
     size?: number;
 }
-export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => import("react").JSX.Element;
+export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/types/icon-button/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from "@salt-ds/core";
+import { ButtonProps } from "@salt-ds/core";
 export interface IconButtonProps extends Omit<ButtonProps, "children"> {
     icon: string;
     size?: number;

package/types/icon-button/ToggleIconButton.d.ts

@@ -2,4 +2,4 @@ import { IconButtonProps } from "./IconButton";
 export interface ToggleIconButtonProps extends Omit<IconButtonProps, "icon"> {
     isExpanded: boolean;
 }
-export declare const ToggleIconButton: ({ className, isExpanded, size, ...props }: ToggleIconButtonProps) => import("react").JSX.Element;
+export declare const ToggleIconButton: ({ className, isExpanded, size, ...props }: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -13,7 +13,7 @@ export { HoverOverlay } from "./hover-overlay/HoverOverlay";
 export * from "./icon-button";
 export * from "./instrument-picker";
 export { ItemPicker, type ItemPickerProps } from "./item-picker/ItemPicker";
-export { type ItemDescriptor, SelectedItemsChangeHandler as SelectedItemChangeHandler } from "./item-picker/useItemPicker";
+export { type ItemDescriptor } from "./item-picker/useItemPicker";
 export * from "./measured-container";
 export { ModalProvider, useModal } from "./modal-provider/ModalProvider";
 export * from "./overflow-container";
@@ -21,13 +21,14 @@ export * from "./price-ticker";
 export { Prompt, type PromptProps } from "./prompt/Prompt";
 export { SortableList, SortableOption } from "./sortable-list/SortableList";
 export * from "./split-button";
+export * from "./split-pane";
 export * from "./table-search";
 export * from "./tabs-next";
 export * from "./tabstrip";
-export { TimeInput, type TimeInputProps } from "./time-input/TimeInput";
+export { TimeInput, type TimeInputMillisecondsProps, type TimeInputProps, type TimeInputSecondsProps, } from "./time-input/TimeInput";
 export * from "./toolbar";
 export * from "./utils";
 export * from "./vuu-date-picker";
 export * from "./vuu-input";
-export { VuuTimePicker, type VuuTimePickerProps, } from "./vuu-time-picker/VuuTimePicker";
+export { VuuTimePicker, type VuuTimePickerMillisecondsProps, type VuuTimePickerProps, type VuuTimePickerSecondsProps, } from "./vuu-time-picker/VuuTimePicker";
 export * from "./vuu-typeahead-input";

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

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

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

@@ -8,4 +8,4 @@ export interface TablePickerProps extends Omit<HTMLAttributes<HTMLElement>, "onS
     schema: TableSchema;
     searchColumns?: string[];
 }
-export declare const TablePicker: ({ TableProps, onSelect, rowToString, schema, searchColumns, ...htmlAttributes }: TablePickerProps) => import("react").JSX.Element;
+export declare const TablePicker: ({ TableProps, onSelect, rowToString, schema, searchColumns, ...htmlAttributes }: TablePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
+import { ChangeEvent, KeyboardEventHandler, RefCallback } from "react";
 import type { TableConfig, TableRowSelectHandler } from "@vuu-ui/vuu-table-types";
-import { type ChangeEvent, type KeyboardEventHandler, type RefCallback } from "react";
 import type { TablePickerProps } from "./TablePicker";
 export interface TablePickerHookProps extends Pick<TablePickerProps, "TableProps" | "onSelect" | "rowToString" | "schema" | "searchColumns"> {
     defaultIsOpen?: boolean;

package/types/item-picker/ItemPicker.d.ts

@@ -1,34 +1,13 @@
-import { type ListBoxProps, type OptionProps } from "@salt-ds/core";
-import { type ItemTypeName } from "@vuu-ui/vuu-utils";
-import { type ComponentType, type HTMLAttributes, type MouseEventHandler } from "react";
-import { type ItemDescriptor, type ItemPickerHookProps } from "./useItemPicker";
+import { ListBoxProps } from "@salt-ds/core";
+import { ItemTypeName } from "@vuu-ui/vuu-utils";
+import { HTMLAttributes } from "react";
+import { ItemDescriptor, ItemPickerHookProps } from "./useItemPicker";
 export declare const classBaseListItem = "vuuItemPickerListItem";
-export type ItemPickerLayout = 'v-available-selected' | 'v-selected-available';
 export interface ItemPickerProps extends ItemPickerHookProps, HTMLAttributes<HTMLDivElement>, Pick<ListBoxProps<ItemDescriptor>, "selected" | "onSelectionChange"> {
-    AvailableListItem?: ComponentType<AvailableListItemProps>;
-    SelectedListItem?: ComponentType<SelectedListItemProps>;
-    itemTypeName?: ItemTypeName;
-    /**
-     * Display order of SelectedItems List / AvailableItems List
-     */
-    layout?: ItemPickerLayout;
-    searchForm?: boolean;
-}
-interface SelectedListItemProps extends OptionProps {
-    index: number;
-    item: ItemDescriptor;
-    onRemove: MouseEventHandler<HTMLButtonElement>;
-    searchPattern?: Lowercase<string>;
-}
-interface AvailableListItemProps extends OptionProps {
-    index: number;
-    item: ItemDescriptor;
-    onAdd: MouseEventHandler<HTMLButtonElement>;
-    searchPattern?: Lowercase<string>;
+    itemTypeName: ItemTypeName;
 }
 /** Generic controlled component that displays items in a 'picker' that are available to search, select, reorder or deselect.
  * As input props, all available items, currently selected items, search text and callback functions for changes in selected items and search text
  * must be supplied by the client.
  */
 export declare const ItemPicker: import("react").ForwardRefExoticComponent<ItemPickerProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/types/item-picker/useItemPicker.d.ts

@@ -1,5 +1,4 @@
-import { type ChangeEventHandler, type MouseEventHandler } from "react";
-export type SelectedItemsChangeHandler = (newSelectedItems: readonly ItemDescriptor[]) => void;
+import { FormEventHandler, MouseEventHandler } from "react";
 /** This is a public description of an Item that can be displayed in the ItemPicker component, defining all the
  * mandatory and option attributes that can be defined by the client. */
 export interface ItemDescriptor {
@@ -16,7 +15,7 @@ export interface ItemPickerHookProps {
     allItems: ItemDescriptor[];
     selectedItems: ItemDescriptor[];
     maxSelections?: number;
-    onSelectedItemsChange: SelectedItemsChangeHandler;
+    onSelectedItemsChange: (newSelectedItems: readonly ItemDescriptor[]) => void;
 }
 export declare const getItemLabel: (item: ItemDescriptor) => string;
 export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, onSelectedItemsChange, }: ItemPickerHookProps) => {
@@ -25,7 +24,7 @@ export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, o
     selectedItemsFiltered: readonly ItemDescriptor[];
     availableItemsFiltered: ItemDescriptor[];
     searchText: string;
-    onChangeSearchInput: ChangeEventHandler;
+    onChangeSearchInput: FormEventHandler;
     onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
     onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
     onReorderSelectedItems: (orderedItemNames: string[]) => void;

package/types/modal-provider/ModalProvider.d.ts

@@ -4,7 +4,7 @@ export type ShowDialog = (dialogContent: ReactElement, title: string, dialogActi
 export type ShowPrompt = (promptContent: ReactElement, promptProps: PromptProps) => void;
 export declare const ModalProvider: ({ children }: {
     children: ReactNode;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useModal: () => {
     showDialog: ShowDialog;
     closeDialog: () => void;

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) => import("react").JSX.Element>;
+export declare const PriceTicker: import("react").MemoExoticComponent<({ className, decimals, price, showArrow, ...htmlAttributes }: PriceTickerProps) => import("react/jsx-runtime").JSX.Element>;

package/types/prompt/Prompt.d.ts

@@ -50,4 +50,4 @@ export interface PromptProps extends Pick<DialogProps, "disableDismiss" | "onOpe
     showConfirmButton?: boolean;
     title: string;
 }
-export declare const Prompt: ({ children, className, cancelButtonLabel, cancelButtonProps, confirmButtonLabel, confirmButtonProps, customAction, disableDismiss, disableAccent, headerTag, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton, showCloseButton, showConfirmButton, status, title, ...htmlAttributes }: PromptProps) => import("react").JSX.Element;
+export declare const Prompt: ({ children, className, cancelButtonLabel, cancelButtonProps, confirmButtonLabel, confirmButtonProps, customAction, disableDismiss, disableAccent, headerTag, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton, showCloseButton, showConfirmButton, status, title, ...htmlAttributes }: PromptProps) => import("react/jsx-runtime").JSX.Element;

package/types/sortable-list/SortableList.d.ts

@@ -2,7 +2,7 @@ import { ListBoxProps, OptionProps } from "@salt-ds/core";
 export declare const SortableOption: ({ id, index, value, ...optionProps }: OptionProps & {
     id: string;
     index: number;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const SortableList: ({ children, onReorderListItems, ...listBoxProps }: ListBoxProps & {
     onReorderListItems?: (listItems: unknown[]) => void;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -27,18 +27,18 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         onFocusCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
-        onChangeCapture?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onReset?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
@@ -277,7 +277,7 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;

package/types/split-pane/SplitPane.d.ts

@@ -0,0 +1,44 @@
+import { type FlexAlignment, type FlexContentAlignment, type ResponsiveProp } from "@salt-ds/core";
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type SplitPaneDirection, type SplitterMovedHandler } from "./useSplitPane";
+export interface SplitPaneProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Defines the default behavior for how flex items are laid out along the cross axis, default is "stretch".
+     */
+    align?: FlexAlignment | "stretch" | "baseline";
+    /**
+     * Exactly two children, typically Salt `FlexItem` components. A Splitter
+     * will be rendered between them. A single child is also accepted (e.g. when
+     * one pane is conditionally rendered), in which case no Splitter is rendered.
+     */
+    children: ReactElement | [ReactNode, ReactNode];
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "row".
+     */
+    direction?: ResponsiveProp<SplitPaneDirection>;
+    /**
+     * Controls the space between each item and the Splitter, default is 0.
+     */
+    gap?: ResponsiveProp<number | string>;
+    /**
+     * Defines the alignment along the main axis, default is "start".
+     */
+    justify?: FlexContentAlignment;
+    /**
+     * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.
+     */
+    margin?: ResponsiveProp<number | string>;
+    /**
+     * Invoked when user has finished moving the Splitter, receives the new sizes (px) of both panes.
+     */
+    onSplitterMoved?: SplitterMovedHandler;
+    /**
+     * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.
+     */
+    padding?: ResponsiveProp<number | string>;
+    /**
+     * Size (thickness) of the Splitter, in px. Default is 3.
+     */
+    splitterSize?: number;
+}
+export declare const SplitPane: import("react").ForwardRefExoticComponent<SplitPaneProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/split-pane/Splitter.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+import type { SplitPaneDirection } from "./useSplitPane";
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
+    direction: SplitPaneDirection;
+    onResizeStart: () => boolean;
+    onResize: (distance: number) => void;
+    onResizeEnd: () => void;
+    position?: number;
+}
+export declare const Splitter: ({ className, direction, onResize, onResizeEnd, onResizeStart, position, ...htmlAttributes }: SplitterProps) => import("react/jsx-runtime").JSX.Element;

package/types/split-pane/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SplitPane";
+export type { SplitPaneDirection, SplitPaneSizes, SplitterMovedHandler, } from "./useSplitPane";