@vuu-ui/vuu-ui-controls 3.0.0 → 3.1.0-beta.2

package/src/toolbar/useKeyboardNavigation.js

@@ -0,0 +1,240 @@
+import { useControlled } from "@salt-ds/core";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home, dispatchMouseEvent, getClosest, getElementDataIndex, getFocusableElement } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef, useState } from "react";
+import { getIndexOfEditedItem } from "./toolbar-dom-utils.js";
+const navigation = {
+    horizontal: {
+        [Home]: "start",
+        [End]: "end",
+        [ArrowLeft]: "bwd",
+        [ArrowRight]: "fwd"
+    },
+    vertical: {
+        [Home]: "start",
+        [End]: "end",
+        [ArrowUp]: "bwd",
+        [ArrowDown]: "fwd"
+    }
+};
+const isOverflowIndicator = (el)=>null !== el && "overflow" === el.dataset.index;
+const itemIsNotFocusable = (container, direction, indexCount, nextIdx, hasOverflowedItem)=>{
+    if (!container) return false;
+    {
+        const withinRangeBwd = "bwd" === direction && nextIdx > 0;
+        const withinRangeFwd = "fwd" === direction && nextIdx < indexCount;
+        const withinRange = withinRangeBwd || withinRangeFwd;
+        const nextElement = getElementByPosition(container, nextIdx, true);
+        const isOverflowedItem = hasOverflowedItem && !isNonWrappedElement(nextElement);
+        const isHiddenOverflowIndicator = !hasOverflowedItem && isOverflowIndicator(nextElement);
+        hasOverflowedItem && isNonWrappedElement(nextElement);
+        return withinRange && (isOverflowedItem || isHiddenOverflowIndicator);
+    }
+};
+const isNavigationKey = (key, orientation = "horizontal")=>void 0 !== navigation[orientation][key];
+const isMenuActivationKey = (key)=>key === ArrowDown;
+function nextItemIdx(count, direction, idx) {
+    if ("start" === direction) return 0;
+    if ("end" === direction) return count - 1;
+    if ("bwd" === direction) if (idx > 0) return idx - 1;
+    else return idx;
+    if (null === idx) return 0;
+    if (idx === count - 1) return idx;
+    else return idx + 1;
+}
+const isNonWrappedElement = (element)=>null !== element && !element.classList.contains("wrapped");
+const getToolbarItems = (container)=>Array.from(container.querySelectorAll("[data-index]"));
+const getIndexOfOverflowItem = (container)=>{
+    if (null === container) return -1;
+    {
+        const targets = getToolbarItems(container);
+        const indexValues = targets.map((el)=>el.dataset.index);
+        return indexValues.indexOf("overflow");
+    }
+};
+const getElementByPosition = (container, index, includeOverflowInd = false)=>{
+    if (null !== container) {
+        const targets = getToolbarItems(container);
+        const target = targets[index];
+        if (!(!includeOverflowInd && isOverflowIndicator(target))) return target;
+    }
+    return null;
+};
+const useKeyboardNavigation = ({ containerRef, defaultHighlightedIdx = -1, highlightedIdx: highlightedIdxProp, onNavigateOutOfBounds, orientation })=>{
+    const mouseClickPending = useRef(false);
+    const focusedRef = useRef(-1);
+    const [hasFocus, setHasFocus] = useState(false);
+    const [highlightedIdx, _setHighlightedIdx] = useControlled({
+        controlled: highlightedIdxProp,
+        default: defaultHighlightedIdx,
+        name: "UseKeyboardNavigation"
+    });
+    const setHighlightedIdx = useCallback((value)=>{
+        _setHighlightedIdx(focusedRef.current = value);
+    }, [
+        _setHighlightedIdx
+    ]);
+    const keyboardNavigation = useRef(false);
+    const focusItem = useCallback((itemIndex, immediateFocus = false, withKeyboard, delay = 70)=>{
+        console.log(`focus item ${itemIndex}`);
+        setHighlightedIdx(itemIndex);
+        if (true === withKeyboard && !keyboardNavigation.current) keyboardNavigation.current = true;
+        const setFocus = ()=>{
+            const element = getElementByPosition(containerRef.current, itemIndex, true);
+            if (element) {
+                const focussableElement = getFocusableElement(element);
+                focussableElement?.focus();
+            }
+        };
+        if (immediateFocus) setFocus();
+        else setTimeout(setFocus, delay);
+    }, [
+        containerRef,
+        setHighlightedIdx
+    ]);
+    const onFocus = (e)=>{
+        if (-1 === focusedRef.current) if (0 === e.target.tabIndex) {
+            const index = getElementDataIndex(getClosest(e.target, "index"));
+            setHighlightedIdx(index);
+        } else if (-1 === e.target.tabIndex) ;
+        else {
+            const index = getIndexOfEditedItem(containerRef.current);
+            if (-1 !== index) requestAnimationFrame(()=>{
+                setHighlightedIdx(index);
+            });
+        }
+    };
+    const getIndexCount = useCallback(()=>containerRef.current?.querySelectorAll("[data-index]").length ?? 0, [
+        containerRef
+    ]);
+    const nextFocusableItemIdx = useCallback((direction = "fwd", idx)=>{
+        const indexCount = getIndexCount();
+        const index = "number" == typeof idx ? idx : indexCount;
+        let nextIdx = nextItemIdx(indexCount, direction, index);
+        const nextDirection = "start" === direction ? "fwd" : "end" === direction ? "bwd" : direction;
+        const hasOverflowedItem = containerRef.current?.querySelector(".vuuOverflowContainer-wrapContainer-overflowed") != null;
+        while(itemIsNotFocusable(containerRef.current, nextDirection, indexCount, nextIdx, hasOverflowedItem)){
+            const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);
+            if (newIdx === nextIdx) return index;
+            nextIdx = newIdx;
+        }
+        return nextIdx;
+    }, [
+        containerRef,
+        getIndexCount
+    ]);
+    const navigateChildItems = useCallback((e)=>{
+        const direction = navigation[orientation][e.key];
+        const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
+        console.log(`highlightedIdx = ${highlightedIdx}, nextIdx = ${nextIdx} `);
+        if (nextIdx !== highlightedIdx) {
+            const immediateFocus = true;
+            focusItem(nextIdx, immediateFocus);
+        } else onNavigateOutOfBounds?.("bwd" === direction ? "start" : "end");
+    }, [
+        orientation,
+        nextFocusableItemIdx,
+        highlightedIdx,
+        focusItem,
+        onNavigateOutOfBounds
+    ]);
+    const highlightedItemHasMenu = useCallback(()=>{
+        const el = getElementByPosition(containerRef.current, highlightedIdx);
+        if (el) return null != el.querySelector(".vuuPopupMenu");
+        return false;
+    }, [
+        containerRef,
+        highlightedIdx
+    ]);
+    const highlightedItemInEditState = useCallback(()=>{
+        const el = getElementByPosition(containerRef.current, highlightedIdx);
+        if (el) return null != el.querySelector(".vuuEditableLabel-input");
+        return false;
+    }, [
+        containerRef,
+        highlightedIdx
+    ]);
+    const activateItemMenu = useCallback(()=>{
+        const el = getElementByPosition(containerRef.current, highlightedIdx);
+        const menuEl = el?.querySelector(".vuuPopupMenu");
+        if (menuEl) dispatchMouseEvent(menuEl, "click");
+        return false;
+    }, [
+        containerRef,
+        highlightedIdx
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
+            e.preventDefault();
+            if (keyboardNavigation.current) navigateChildItems(e);
+            else {
+                keyboardNavigation.current = true;
+                navigateChildItems(e);
+            }
+        } else if (isMenuActivationKey(e.key) && highlightedItemHasMenu() && !highlightedItemInEditState()) activateItemMenu();
+    }, [
+        activateItemMenu,
+        getIndexCount,
+        highlightedItemHasMenu,
+        highlightedItemInEditState,
+        navigateChildItems,
+        orientation
+    ]);
+    const handleItemClick = (_, itemIndex)=>{
+        setHighlightedIdx(itemIndex);
+    };
+    const handleFocus = useCallback(()=>{
+        if (!hasFocus) {
+            setHasFocus(true);
+            if (mouseClickPending.current) mouseClickPending.current = false;
+            else keyboardNavigation.current = true;
+        }
+    }, [
+        hasFocus
+    ]);
+    const handleContainerMouseDown = useCallback(()=>{
+        if (!hasFocus) mouseClickPending.current = true;
+        keyboardNavigation.current = false;
+    }, [
+        hasFocus
+    ]);
+    const handleOverflowMenuClose = useCallback((closeReason)=>{
+        if (closeReason?.type === "escape") {
+            const index = getIndexOfOverflowItem(containerRef.current);
+            if (-1 !== index) focusItem(index);
+        }
+    }, [
+        containerRef,
+        focusItem
+    ]);
+    const containerProps = {
+        onBlur: (e)=>{
+            const sourceTarget = e.target.closest(".vuuToolbar");
+            const destTarget = e.relatedTarget;
+            if (sourceTarget && !sourceTarget?.contains(destTarget)) {
+                setHighlightedIdx(-1);
+                setHasFocus(false);
+            }
+        },
+        onMouseDownCapture: handleContainerMouseDown,
+        onFocus: handleFocus,
+        onMouseLeave: ()=>{
+            keyboardNavigation.current = true;
+            setHighlightedIdx(-1);
+            mouseClickPending.current = false;
+        }
+    };
+    return {
+        containerProps,
+        focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
+        focusIsWithinComponent: hasFocus,
+        highlightedIdx,
+        focusableIdx: 0,
+        focusItem,
+        onClick: handleItemClick,
+        onFocus,
+        onKeyDown: handleKeyDown,
+        onOverflowMenuClose: handleOverflowMenuClose,
+        setHighlightedIdx
+    };
+};
+export { useKeyboardNavigation };

package/src/toolbar/useSelection.js

@@ -0,0 +1,82 @@
+import { useCallback } from "react";
+import { allowMultipleSelection, deselectionIsAllowed, selectionIsDisallowed } from "../common-hooks/index.js";
+import { useControlled } from "@salt-ds/core";
+import { getClosestIndexItem, isSelectableElement } from "@vuu-ui/vuu-utils";
+const defaultSelectionKeys = [
+    "Enter",
+    " "
+];
+const NO_SELECTION_HANDLERS = {};
+const useSelection = ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp, selectionStrategy })=>{
+    const [selected, setSelected, isControlled] = useControlled({
+        controlled: selectedProp,
+        default: defaultSelected ?? [],
+        name: "useSelection",
+        state: "selected"
+    });
+    const isSelectionEvent = useCallback((evt)=>defaultSelectionKeys.includes(evt.key), []);
+    const selectItem = useCallback((itemIndex, specialKey = false)=>{
+        const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [
+            itemIndex
+        ];
+        setSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    }, [
+        onSelectionChange,
+        selected,
+        selectionStrategy,
+        setSelected
+    ]);
+    const deselectItem = useCallback((itemIndex, specialKey = false)=>{
+        const newSelected = "deselectable" !== selectionStrategy && ("multiple-special-key" !== selectionStrategy || specialKey) ? selected.filter((index)=>index !== itemIndex) : [];
+        setSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    }, [
+        onSelectionChange,
+        selected,
+        selectionStrategy,
+        setSelected
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (isSelectionEvent(e) && isSelectableElement(e.target)) if (selected.includes(highlightedIdx)) {
+            if (deselectionIsAllowed(selectionStrategy)) {
+                e.stopPropagation();
+                e.preventDefault();
+                deselectItem(highlightedIdx, e.shiftKey);
+            }
+        } else {
+            e.stopPropagation();
+            e.preventDefault();
+            selectItem(highlightedIdx, e.shiftKey);
+        }
+    }, [
+        isSelectionEvent,
+        selected,
+        highlightedIdx,
+        selectionStrategy,
+        selectItem,
+        deselectItem
+    ]);
+    const handleClick = useCallback((e, itemIndex)=>{
+        const element = getClosestIndexItem(e.target);
+        if (isSelectableElement(element)) if (selected.includes(itemIndex)) {
+            if (deselectionIsAllowed(selectionStrategy)) deselectItem(itemIndex, e.shiftKey);
+        } else selectItem(itemIndex, e.shiftKey);
+    }, [
+        deselectItem,
+        selectItem,
+        selected,
+        selectionStrategy
+    ]);
+    const itemHandlers = selectionIsDisallowed(selectionStrategy) ? NO_SELECTION_HANDLERS : {
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+    };
+    return {
+        activateItem: selectItem,
+        itemHandlers,
+        isControlled,
+        selected
+    };
+};
+export { useSelection };

package/src/toolbar/useToolbar.js

@@ -0,0 +1,73 @@
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
+import { useSelection } from "./useSelection.js";
+const useToolbar = ({ activeItemIndex: activeItemIndexProp, defaultActiveItemIndex, containerRef, itemQuery = "vuuToolbarItem", onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy })=>{
+    const lastSelection = useRef(activeItemIndexProp);
+    const { focusItem: keyboardHookFocusItem, highlightedIdx, onClick: keyboardHookHandleClick, onKeyDown: keyboardHookHandleKeyDown, setHighlightedIdx: keyboardHookSetHighlightedIndex, ...keyboardHook } = useKeyboardNavigation({
+        containerRef,
+        onNavigateOutOfBounds,
+        orientation
+    });
+    const { activateItem: selectionHookActivateItem, itemHandlers: { onClick, onKeyDown }, selected: selectionHookSelected } = useSelection({
+        containerRef,
+        defaultSelected: defaultActiveItemIndex,
+        highlightedIdx,
+        itemQuery,
+        onSelectionChange: onActiveChange,
+        selected: activeItemIndexProp,
+        selectionStrategy
+    });
+    lastSelection.current = selectionHookSelected;
+    const handleClick = useCallback((evt)=>{
+        const target = evt.target;
+        const toolbarItem = target.closest("[data-index]");
+        if (toolbarItem) {
+            const index = parseInt(toolbarItem.dataset.index ?? "-1");
+            if (-1 !== index && isValidNumber(index)) {
+                keyboardHookHandleClick(evt, index);
+                onClick?.(evt, index);
+            }
+        }
+    }, [
+        keyboardHookHandleClick,
+        onClick
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        keyboardHookHandleKeyDown(evt);
+        if (!evt.defaultPrevented) onKeyDown?.(evt);
+    }, [
+        keyboardHookHandleKeyDown,
+        onKeyDown
+    ]);
+    const onSwitchWrappedItemIntoView = useCallback((item)=>{
+        const index = parseInt(item.index);
+        if (!isNaN(index)) {
+            selectionHookActivateItem(index);
+            keyboardHookFocusItem(index);
+        }
+    }, [
+        keyboardHookFocusItem,
+        selectionHookActivateItem
+    ]);
+    const itemProps = {
+        onClick: handleClick,
+        onFocus: keyboardHook.onFocus,
+        onKeyDown: handleKeyDown
+    };
+    return {
+        activeItemIndex: selectionHookSelected,
+        focusableIdx: keyboardHook.focusableIdx,
+        focusVisible: keyboardHook.focusVisible,
+        containerProps: {
+            PopupMenuProps: {
+                onKeyDown: handleKeyDown,
+                onMenuClose: keyboardHook.onOverflowMenuClose
+            },
+            ...keyboardHook.containerProps,
+            onSwitchWrappedItemIntoView
+        },
+        itemProps
+    };
+};
+export { useToolbar };

package/{esm → src}/utils/escapeRegExp.js

@@ -1,7 +1,5 @@
 const regExp = /[.*+?^${}()|[\]\\]/g;
 function escapeRegExp(string) {
-  return string.replace(regExp, "\\$&");
+    return string.replace(regExp, "\\$&");
 }
-
 export { escapeRegExp };
-//# sourceMappingURL=escapeRegExp.js.map

package/src/utils/forwardCallbackProps.js

@@ -0,0 +1,15 @@
+const forwardCallbackProps = (ownProps, overrideProps)=>{
+    const props = Object.keys(ownProps).reduce((map, name)=>{
+        const ownProp = ownProps[name];
+        const overrideProp = overrideProps[name];
+        if ("function" == typeof ownProp && "function" == typeof overrideProp) map[name] = (...args)=>{
+            ownProp(...args);
+            overrideProp(...args);
+        };
+        return map;
+    }, {
+        ...overrideProps
+    });
+    return props;
+};
+export { forwardCallbackProps };

package/src/utils/index.js

@@ -0,0 +1,5 @@
+export * from "./escapeRegExp.js";
+export * from "./isOverflowElement.js";
+export * from "./isPlainObject.js";
+export * from "./forwardCallbackProps.js";
+export * from "./deprecated-types.js";

package/src/utils/isOverflowElement.js

@@ -0,0 +1,2 @@
+const isOverflowElement = (element)=>null !== element && "overflow" === element.dataset.index && null !== element.parentElement && element.parentElement.classList.contains("vuuOverflowContainer-wrapContainer-overflowed");
+export { isOverflowElement };

package/src/utils/isPlainObject.js

@@ -0,0 +1,2 @@
+const isPlainObject = (obj)=>"[object Object]" === Object.prototype.toString.call(obj);
+export { isPlainObject };

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

@@ -0,0 +1,92 @@
+import { createElement, useCallback, useRef, useState } from "react";
+import { getLocalTimeZone, isSameDay, isSameMonth, isSameYear } 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 VuuDatePicker = ({ className, onSelectionChange, selectedDate: selectedDateProp, onCommit, preserveFocusOnSelect, ...props })=>{
+    const [open, _setOpen] = useState(false);
+    const valueRef = useRef("");
+    const datePickerRef = useRef(null);
+    const dateState = useRef(getDates(selectedDateProp));
+    const setOpen = (o)=>{
+        console.log(`setOpen ${o}`);
+        _setOpen(o);
+    };
+    const commitDateChange = useCallback((e, date)=>{
+        onSelectionChange?.(e, date);
+        setOpen(false);
+        onCommit?.(e, toEpochMillis(date, localTimeZone));
+        if (preserveFocusOnSelect) requestAnimationFrame(()=>{
+            datePickerRef.current?.querySelector("input")?.focus();
+        });
+    }, [
+        onCommit,
+        onSelectionChange,
+        preserveFocusOnSelect
+    ]);
+    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);
+            }
+        }
+    }, [
+        commitDateChange
+    ]);
+    const handleChange = (evt, value = "")=>{
+        console.log("handleChange", {
+            evt,
+            value
+        });
+        valueRef.current = value;
+        console.log(`is '${value}' a valid date ? ${isValidDate(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();
+        }
+    };
+    const { datePickerKey, defaultDate, selectedDate } = dateState.current;
+    return /*#__PURE__*/ createElement(DatePicker, {
+        ...props,
+        className: clsx(classBase, className),
+        defaultSelectedDate: defaultDate,
+        key: datePickerKey,
+        open: open,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onKeyDownCapture: handleKeyDownCapture,
+        onOpenChange: setOpen,
+        ref: datePickerRef,
+        onSelectionChange: (e, date)=>handleSelectionChange(e, date),
+        selectedDate: selectedDate
+    });
+};
+export { VuuDatePicker };

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

@@ -0,0 +1 @@
+export * from "./VuuDatePicker.js";

package/src/vuu-input/VuuInput.css.js

@@ -0,0 +1,13 @@
+const css = `
+.vuuInput {
+  --vuu-icon-size: 16px;
+}
+
+.vuuInput-errorIcon:after {
+  --vuu-icon-color: var(--salt-status-error-background);
+  cursor: pointer;
+}
+
+
+`;
+export default css;

package/src/vuu-input/VuuInput.js

@@ -0,0 +1,85 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { isValidNumber, useId } from "@vuu-ui/vuu-utils";
+import { Input, Tooltip } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback } from "react";
+import VuuInput_0 from "./VuuInput.css";
+const classBase = "vuuInput";
+const VuuInput_VuuInput = /*#__PURE__*/ forwardRef(function({ className, commitOnBlur = true, commitWhenCleared = false, errorMessage, id: idProp, onCommit, onKeyDown, type, ...props }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-input",
+        css: VuuInput_0,
+        window: targetWindow
+    });
+    const id = useId(idProp);
+    const commitValue = useCallback((evt, value)=>{
+        if ("number" === type) {
+            const numericValue = parseFloat(value);
+            if (isValidNumber(numericValue)) onCommit(evt, numericValue, "text-input");
+            else throw Error("Invalid value");
+        } else "boolean" === type ? onCommit(evt, Boolean(value), "text-input") : onCommit(evt, value, "text-input");
+    }, [
+        onCommit,
+        type
+    ]);
+    const handleChange = useCallback((evt)=>{
+        const value = evt.target.value;
+        if ("" === value.trim() && commitWhenCleared) onCommit?.(evt, value);
+        props.inputProps?.onChange?.(evt);
+    }, [
+        commitWhenCleared,
+        onCommit,
+        props.inputProps
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            const { value } = evt.target;
+            commitValue(evt, value);
+        }
+        onKeyDown?.(evt);
+    }, [
+        commitValue,
+        onKeyDown
+    ]);
+    const handleBlur = useCallback((evt)=>{
+        if (commitOnBlur) {
+            const { value } = evt.target;
+            commitValue(evt, value);
+        }
+    }, [
+        commitOnBlur,
+        commitValue
+    ]);
+    const endAdornment = errorMessage ? /*#__PURE__*/ jsx(Tooltip, {
+        content: errorMessage,
+        status: "error",
+        children: /*#__PURE__*/ jsx("span", {
+            className: `${classBase}-errorIcon`,
+            "data-icon": "error"
+        })
+    }) : void 0;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Input, {
+            ...props,
+            endAdornment: endAdornment,
+            id: id,
+            inputProps: {
+                autoComplete: "off",
+                ...props.inputProps,
+                onChange: handleChange
+            },
+            className: clsx(classBase, className, {
+                [`${classBase}-error`]: errorMessage
+            }),
+            onBlur: handleBlur,
+            ref: forwardedRef,
+            onKeyDown: handleKeyDown
+        })
+    });
+});
+export { VuuInput_VuuInput as VuuInput };

package/src/vuu-input/index.js

@@ -0,0 +1 @@
+export * from "./VuuInput.js";

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

@@ -0,0 +1,14 @@
+const css = `
+.vuuTimePicker {
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+
+  & .TimeInput {
+    outline: none;
+  }
+}
+
+
+`;
+export default css;

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

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+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 targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-time-picker",
+        css: VuuTimePicker,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: /*#__PURE__*/ jsx(TimeInput, {
+            defaultValue: defaultValue,
+            onChange: onChange,
+            onCommit: onCommit,
+            value: value
+        })
+    });
+};
+export { VuuTimePicker_VuuTimePicker as VuuTimePicker };