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

package/package.json

@@ -1,30 +1,30 @@
 {
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.1",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
-  "type": "module",
   "scripts": {
     "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.9"
+    "@vuu-ui/vuu-data-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-table-types": "4.0.0-beta.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.9",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/icons": "1.16.0",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
+    "@vuu-ui/vuu-context-menu": "4.0.0-beta.1",
+    "@vuu-ui/vuu-data-react": "4.0.0-beta.1",
+    "@vuu-ui/vuu-layout": "4.0.0-beta.1",
+    "@vuu-ui/vuu-popups": "4.0.0-beta.1",
+    "@vuu-ui/vuu-table": "4.0.0-beta.1",
+    "@vuu-ui/vuu-utils": "4.0.0-beta.1",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/icons": "1.18.3",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
     "tabbable": "^6.0.0"
   },
   "peerDependencies": {
@@ -35,6 +35,7 @@
     "react-dom": "^19.2.3"
   },
   "sideEffects": false,
+  "type": "module",
   "files": [
     "README.md",
     "src",
@@ -43,6 +44,7 @@
   "exports": {
     ".": {
       "import": "./src/index.js",
+      "default": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/context-panel-provider/ContextPanelProvider.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, isValidElement, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+import { isUnconfiguredProperty, layoutFromJson, useLayoutOperation } from "@vuu-ui/vuu-layout";
 import { Dialog, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
 const UndefinedShowContextPanel = ()=>{
     console.warn("[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider");
@@ -7,43 +8,54 @@ const UndefinedShowContextPanel = ()=>{
 const ContextPanelContext = /*#__PURE__*/ createContext({
     showContextPanel: UndefinedShowContextPanel
 });
-const ContextPanelProvider = ({ children, hideContextPanel: hideContextPanelProp, resolveComponent, showContextPanel: showContextPanelProp })=>{
+const ContextPanelProvider = ({ children, hideContextPanel: hideContextPanelProp, showContextPanel: showContextPanelProp })=>{
     const { hideContextPanel: inheritedHideContextPanel, showContextPanel: inheritedShowContextPanel } = useContext(ContextPanelContext);
+    const { showComponentInContextPanel } = useLayoutOperation();
     const [dialog, setDialog] = useState(null);
     const handleOpenChange = useCallback((isOpen)=>{
         if (!isOpen) setDialog(null);
     }, []);
     const hideContextPanel = hideContextPanelProp ?? inheritedHideContextPanel;
-    const showContextPanel = useCallback((component, title, componentProps)=>{
-        const resolvedComponent = "string" == typeof component && resolveComponent ? resolveComponent(component, componentProps) : component;
-        if (showContextPanelProp) showContextPanelProp(resolvedComponent, title, componentProps);
-        else if (inheritedShowContextPanel !== UndefinedShowContextPanel) inheritedShowContextPanel(resolvedComponent, title, componentProps);
-        else {
-            if (!/*#__PURE__*/ isValidElement(resolvedComponent)) throw new Error(`Context panel component "${component}" requires a configured resolver`);
-            setDialog(/*#__PURE__*/ jsxs(Dialog, {
-                open: true,
-                onOpenChange: handleOpenChange,
-                children: [
-                    /*#__PURE__*/ jsx(DialogCloseButton, {
-                        appearance: "transparent",
-                        "data-embedded": true,
-                        "data-icon": "close",
-                        onClick: ()=>setDialog(null),
-                        sentiment: "neutral"
-                    }),
-                    /*#__PURE__*/ jsx(DialogHeader, {
-                        header: title
-                    }),
-                    /*#__PURE__*/ jsx(DialogContent, {
-                        children: resolvedComponent
-                    })
-                ]
-            }));
+    const showContextPanel = useCallback((elementOrComponentType, title, props)=>{
+        if (showContextPanelProp) showContextPanelProp(elementOrComponentType, title, props);
+        else if (inheritedShowContextPanel !== UndefinedShowContextPanel) inheritedShowContextPanel(elementOrComponentType, title, props);
+        else if (isUnconfiguredProperty(showComponentInContextPanel)) {
+            if ("string" == typeof elementOrComponentType) {
+                const component = "string" == typeof elementOrComponentType ? layoutFromJson({
+                    type: elementOrComponentType,
+                    props
+                }, "") : elementOrComponentType;
+                setDialog(/*#__PURE__*/ jsxs(Dialog, {
+                    open: true,
+                    onOpenChange: handleOpenChange,
+                    children: [
+                        /*#__PURE__*/ jsx(DialogCloseButton, {
+                            appearance: "transparent",
+                            "data-embedded": true,
+                            "data-icon": "close",
+                            onClick: ()=>setDialog(null),
+                            sentiment: "neutral"
+                        }),
+                        /*#__PURE__*/ jsx(DialogHeader, {
+                            header: title
+                        }),
+                        /*#__PURE__*/ jsx(DialogContent, {
+                            children: component
+                        })
+                    ]
+                }));
+            }
+        } else {
+            const component = "string" == typeof elementOrComponentType ? {
+                type: elementOrComponentType,
+                props
+            } : elementOrComponentType;
+            showComponentInContextPanel(component, title);
         }
     }, [
         handleOpenChange,
         inheritedShowContextPanel,
-        resolveComponent,
+        showComponentInContextPanel,
         showContextPanelProp
     ]);
     return /*#__PURE__*/ jsxs(ContextPanelContext.Provider, {

package/src/drag-drop/Draggable.css.js

@@ -26,14 +26,14 @@ const css = `
 }
 
 .vuuDraggable-dropIndicator {
-  background-color: var(--salt-palette-accent-background);
+  background-color: var(--salt-sentiment-accent-background);
   width: 100%;
   height: 2px;
 }
 
 .vuuDraggable-dropIndicator:before {
   content: "";
-  background-color: var(--salt-palette-accent-background);
+  background-color: var(--salt-sentiment-accent-background);
   border-radius: 3px;
   width: 6px;
   height: 6px;

package/src/expando-input/ExpandoInput.css.js

@@ -31,7 +31,7 @@ const css = `
 }
 
 .vuuExpandoInput-error {
-  border-color: var(--vuu-color-red-50);
+  border-color: var(--salt-color-red-500);
 }
 
 .vuuExpandoInput .saltInput {

package/src/icon-button/Icon.js

@@ -17,7 +17,6 @@ const Icon_Icon = ({ className, name, size, style: styleProp, ...htmlAttributes
     } : styleProp;
     return /*#__PURE__*/ jsx("span", {
         ...htmlAttributes,
-        "aria-hidden": true,
         className: clsx(classBase, className),
         "data-icon": name,
         role: "img",

package/src/icon-button/IconButton.js

@@ -16,10 +16,10 @@ const IconButton_IconButton = /*#__PURE__*/ forwardRef(function({ "aria-label":
     });
     return /*#__PURE__*/ jsx(Button, {
         ...buttonProps,
-        "aria-label": ariaLabel,
         className: clsx(classBase, className),
         ref: ref,
         children: /*#__PURE__*/ jsx(Icon, {
+            "aria-label": ariaLabel,
             name: icon,
             size: size
         })

package/src/icon-button/ToggleIconButton.css.js

@@ -37,7 +37,7 @@ const css = `
 .vuuTableGroupCell:hover {
   & .vuuToggleIconButton {
     & .vuuIcon:after {
-      --vuu-icon-color: var(--salt-palette-interact-cta-background-hover);
+      --vuu-icon-color: var(--salt-sentiment-accent-background);
     }
   }
 }

package/src/index.js

@@ -14,6 +14,7 @@ export * from "./measured-container/index.js";
 export * from "./overflow-container/index.js";
 export * from "./price-ticker/index.js";
 export * from "./split-button/index.js";
+export * from "./split-pane/index.js";
 export * from "./table-search/index.js";
 export * from "./tabs-next/index.js";
 export * from "./tabstrip/index.js";
@@ -25,7 +26,6 @@ export * from "./vuu-typeahead-input/index.js";
 export { ContextPanelProvider, useContextPanel, useHideContextPanel } from "./context-panel-provider/ContextPanelProvider.js";
 export { HoverOverlay } from "./hover-overlay/HoverOverlay.js";
 export { ItemPicker } from "./item-picker/ItemPicker.js";
-export { SelectedItemsChangeHandler as SelectedItemChangeHandler } from "./item-picker/useItemPicker.js";
 export { ModalProvider, useModal } from "./modal-provider/ModalProvider.js";
 export { Prompt } from "./prompt/Prompt.js";
 export { SortableList, SortableOption } from "./sortable-list/SortableList.js";

package/src/instrument-picker/useTablePicker.js

@@ -1,9 +1,8 @@
 import { flip, size, useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { useFloatingUI } from "@salt-ds/core";
-import { isNavigationKey, isRowSelectionKey, useControlledTableNavigation } from "@vuu-ui/vuu-table";
-import { isStringColumn, toColumnName } from "@vuu-ui/vuu-utils";
-import { useData } from "@vuu-ui/core";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { isStringColumn, toColumnName, useData } from "@vuu-ui/vuu-utils";
+import { isNavigationKey, isRowSelectionKey, useControlledTableNavigation } from "@vuu-ui/vuu-table";
 const defaultRowToString = (dataRow)=>Object.values(dataRow).join(" ");
 const useTablePicker = ({ TableProps, onSelect, rowToString = defaultRowToString, schema, searchColumns = schema.columns.filter(isStringColumn).map(toColumnName) })=>{
     const { VuuDataSource } = useData();

package/src/item-picker/ItemPicker.css.js

@@ -35,7 +35,7 @@ const css = `
     }
 
     & .vuuHighlight {
-      color: var(--vuu-color-blue-40);
+      color: var(--salt-color-blue-400);
       text-decoration: underline;
     }
 

package/src/item-picker/ItemPicker.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Input, ListBox, Option } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
@@ -32,7 +32,7 @@ const useSorting = (id, index)=>{
         ref
     };
 };
-const DefaultSelectedListItem = ({ className: classNameProp, index, item, onRemove, searchPattern = "", ...optionProps })=>{
+const SelectedListItem = ({ className: classNameProp, index, item, onRemove, searchPattern = "", ...optionProps })=>{
     const { handleRef, ref } = useSorting(item.name, index);
     const value = getItemLabel(item);
     const valueWithHighlighting = applyHighlighting(value, searchPattern);
@@ -73,7 +73,7 @@ const DefaultSelectedListItem = ({ className: classNameProp, index, item, onRemo
         ]
     });
 };
-const DefaultAvailableListItem = ({ className: classNameProp, index, item, onAdd, searchPattern = "", disabled, ...optionProps })=>{
+const AvailableListItem = ({ className: classNameProp, index, item, onAdd, searchPattern = "", disabled, ...optionProps })=>{
     const value = getItemLabel(item);
     const valueWithHighlighting = applyHighlighting(value, searchPattern);
     return /*#__PURE__*/ jsxs(Option, {
@@ -98,14 +98,7 @@ const DefaultAvailableListItem = ({ className: classNameProp, index, item, onAdd
         ]
     });
 };
-const getOptionName = (option)=>{
-    if (option) {
-        const { name } = option.dataset;
-        if (name) return name;
-    }
-    throw Error("[ItemPicker] list option has no data-name");
-};
-const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ AvailableListItem = DefaultAvailableListItem, SelectedListItem = DefaultSelectedListItem, className, itemTypeName = 'Item', searchForm = true, allItems, layout = 'v-selected-available', selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
+const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ className, itemTypeName, allItems, selectedItems, maxSelections, onSelectedItemsChange, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-item-picker",
@@ -124,6 +117,13 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ AvailableListI
         maxSelections
     });
     const listRef = useRef(null);
+    const getOptionName = (option)=>{
+        if (option) {
+            const { name } = option.dataset;
+            if (name) return name;
+        }
+        throw Error("[ItemPicker] list option has no data-name");
+    };
     const handleDragEnd = useCallback(()=>{
         setTimeout(()=>{
             const listItems = listRef.current?.querySelectorAll(".saltOption");
@@ -133,72 +133,19 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ AvailableListI
             }
         }, 300);
     }, [
-        onReorderSelectedItems
+        availableItemsFiltered,
+        selectedItemsFiltered
     ]);
     const searchPlaceholderText = `Find ${singularForm(itemTypeName)}`;
     const maxSelectionsSubHeading = maxSelections ? `(${maxSelections} max)` : "";
     const selectedItemsHeading = `${selectedItemsCount} ${1 === selectedItemsCount ? singularForm(itemTypeName) : pluralForm(itemTypeName)} in view ${maxSelectionsSubHeading}`;
     const availableItemsHeading = `${availableItemsCount} available ${1 === availableItemsCount ? singularForm(itemTypeName) : pluralForm(itemTypeName)}`;
-    const selectedList = /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-sectionHeader`,
-                children: selectedItemsHeading
-            }),
-            /*#__PURE__*/ jsx(DragDropProvider, {
-                onDragEnd: handleDragEnd,
-                children: /*#__PURE__*/ jsx(ListBox, {
-                    className: `${classBase}-selectedList`,
-                    onSelectionChange: onSelectionChange,
-                    ref: listRef,
-                    selected: selected,
-                    children: selectedItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(SelectedListItem, {
-                            item: item,
-                            index: index,
-                            onRemove: onRemoveItemFromSelectedList,
-                            searchPattern: searchText.toLowerCase(),
-                            value: item
-                        }, item.name))
-                })
-            })
-        ]
-    });
-    const availableList = /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
-                children: availableItemsHeading
-            }),
-            /*#__PURE__*/ jsx(ListBox, {
-                className: `${classBase}-availableList`,
-                selected: NO_SELECTION,
-                children: availableItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(AvailableListItem, {
-                        item: item,
-                        index: index,
-                        onAdd: onAddItemToSelectedList,
-                        searchPattern: searchText.toLowerCase(),
-                        value: item,
-                        disabled: selectedItemsCount === maxSelections
-                    }, item.name))
-            })
-        ]
-    });
     return /*#__PURE__*/ jsxs("div", {
         ...htmlAttributes,
         className: clsx(classBase, className),
         ref: forwardedRef,
         children: [
-            searchForm ? /*#__PURE__*/ jsx("form", {
-                className: `${classBase}-search`,
-                role: "search",
-                children: /*#__PURE__*/ jsx(Input, {
-                    startAdornment: searchIcon,
-                    placeholder: searchPlaceholderText,
-                    ref: searchCallbackRef,
-                    value: searchText,
-                    onChange: onChangeSearchInput
-                })
-            }) : /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsx("form", {
                 className: `${classBase}-search`,
                 role: "search",
                 children: /*#__PURE__*/ jsx(Input, {
@@ -209,19 +156,46 @@ const ItemPicker_ItemPicker = /*#__PURE__*/ forwardRef(function({ AvailableListI
                     onChange: onChangeSearchInput
                 })
             }),
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsxs("div", {
                 className: `${classBase}-scrollContainer vuuScrollable`,
-                children: 'v-selected-available' === layout ? /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        selectedList,
-                        availableList
-                    ]
-                }) : /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        availableList,
-                        selectedList
-                    ]
-                })
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-sectionHeader`,
+                        children: selectedItemsHeading
+                    }),
+                    /*#__PURE__*/ jsx(DragDropProvider, {
+                        onDragEnd: handleDragEnd,
+                        children: /*#__PURE__*/ jsx(ListBox, {
+                            className: `${classBase}-selectedList`,
+                            onSelectionChange: onSelectionChange,
+                            ref: listRef,
+                            selected: selected,
+                            children: selectedItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(SelectedListItem, {
+                                    item: item,
+                                    index: index,
+                                    onRemove: onRemoveItemFromSelectedList,
+                                    searchPattern: searchText.toLowerCase(),
+                                    value: item
+                                }, item.name))
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
+                        children: availableItemsHeading
+                    }),
+                    /*#__PURE__*/ jsx(ListBox, {
+                        className: `${classBase}-availableList`,
+                        selected: NO_SELECTION,
+                        children: availableItemsFiltered.map((item, index)=>/*#__PURE__*/ jsx(AvailableListItem, {
+                                item: item,
+                                index: index,
+                                onAdd: onAddItemToSelectedList,
+                                searchPattern: searchText.toLowerCase(),
+                                value: item,
+                                disabled: selectedItemsCount === maxSelections
+                            }, item.name))
+                    })
+                ]
             })
         ]
     });

package/src/price-ticker/PriceTicker.css.js

@@ -15,15 +15,15 @@ const css = `
 }
 
 .vuuPriceTicker.up1, .vuuPriceTicker.up2 {
-  --vuu-icon-color: var(--vuu-color-green-50);
-  color: var(--vuu-color-green-50);
+  --vuu-icon-color: var(--salt-color-green-500);
+  color: var(--salt-color-green-500);
   animation-duration: 30s;
 }
 
 .vuuPriceTicker.down1, .vuuPriceTicker.down2 {
   --vuu-icon-transform: rotate(180deg);
-  --vuu-icon-color: var(--vuu-color-red-50);
-  color: var(--vuu-color-red-50);
+  --vuu-icon-color: var(--salt-color-red-500);
+  color: var(--salt-color-red-500);
   animation-duration: 30s;
 }
 

package/src/split-pane/SplitPane.css.js

@@ -0,0 +1,82 @@
+const css = `
+.vuuSplitPane {
+  --vuuSplitPane-align: stretch;
+  --vuuSplitPane-direction: row;
+  --vuuSplitPane-gap: 0;
+  --vuuSplitPane-justify: flex-start;
+  --vuuSplitPane-margin: 0;
+  --vuuSplitPane-padding: 0;
+  --vuuSplitPane-splitterSize: 3px;
+  --vuuSplitPane-splitter-background: var(--salt-separable-secondary-borderColor);
+  --vuuSplitPane-splitter-background-active: var(--salt-separable-primary-borderColor);
+  --vuuSplitPane-splitter-grabZone: 4px;
+  align-items: var(--vuuSplitPane-align);
+  box-sizing: border-box;
+  flex-direction: var(--vuuSplitPane-direction);
+  gap: var(--vuuSplitPane-gap);
+  justify-content: var(--vuuSplitPane-justify);
+  margin: var(--vuuSplitPane-margin);
+  min-width: 0;
+  min-height: 0;
+  padding: var(--vuuSplitPane-padding);
+  flex-wrap: nowrap;
+  display: flex;
+  overflow: hidden;
+}
+
+:where(.vuuSplitPane) > :where(:not(.vuuSplitPane-splitter)) {
+  box-sizing: border-box;
+}
+
+:where(.vuuSplitPane-row) > :where(:not(.vuuSplitPane-splitter)) {
+  min-width: 0;
+}
+
+:where(.vuuSplitPane-column) > :where(:not(.vuuSplitPane-splitter)) {
+  min-height: 0;
+}
+
+.vuuSplitPane-splitter {
+  background-color: var(--vuuSplitPane-splitter-background);
+  flex: 0 0 var(--vuuSplitPane-splitterSize);
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+  position: relative;
+}
+
+.vuuSplitPane-splitter:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.vuuSplitPane-row > .vuuSplitPane-splitter {
+  cursor: ew-resize;
+}
+
+.vuuSplitPane-row > .vuuSplitPane-splitter:before {
+  left: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+  right: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+}
+
+.vuuSplitPane-column > .vuuSplitPane-splitter {
+  cursor: ns-resize;
+}
+
+.vuuSplitPane-column > .vuuSplitPane-splitter:before {
+  bottom: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+  top: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+}
+
+.vuuSplitPane-splitter:hover, .vuuSplitPane-splitter-active {
+  --vuuSplitPane-splitter-background: var(--vuuSplitPane-splitter-background-active);
+}
+
+.vuuSplitPane-splitter:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+
+`;
+export default css;

package/src/split-pane/SplitPane.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveResponsiveValue, useBreakpoint, useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { Children, forwardRef } from "react";
+import { Splitter } from "./Splitter.js";
+import { useSplitPane } from "./useSplitPane.js";
+import SplitPane_0 from "./SplitPane.css";
+const classBase = "vuuSplitPane";
+const parseSpacing = (value)=>"number" == typeof value ? `calc(var(--salt-spacing-100) * ${value})` : value;
+const parseAlignment = (value)=>"start" === value || "end" === value ? `flex-${value}` : value;
+const SplitPane_SplitPane = /*#__PURE__*/ forwardRef(function({ align, children, className, direction = "row", gap = 0, justify, margin = 0, onSplitterMoved, padding = 0, splitterSize, style, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-pane",
+        css: SplitPane_0,
+        window: targetWindow
+    });
+    const { matchedBreakpoints } = useBreakpoint();
+    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints) ?? "row";
+    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);
+    const flexMargin = resolveResponsiveValue(margin, matchedBreakpoints);
+    const flexPadding = resolveResponsiveValue(padding, matchedBreakpoints);
+    const panes = Children.toArray(children);
+    if (panes.length > 2) throw Error(`[SplitPane] supports a maximum of two children, ${panes.length} were provided`);
+    const { beginResize, endResize, resize, rootRef, splitterPosition } = useSplitPane({
+        direction: flexDirection,
+        onSplitterMoved,
+        paneCount: panes.length
+    });
+    const splitPaneStyle = {
+        ...style,
+        "--vuuSplitPane-align": parseAlignment(align),
+        "--vuuSplitPane-direction": flexDirection,
+        "--vuuSplitPane-gap": parseSpacing(flexGap),
+        "--vuuSplitPane-justify": parseAlignment(justify),
+        "--vuuSplitPane-margin": parseSpacing(flexMargin),
+        "--vuuSplitPane-padding": parseSpacing(flexPadding),
+        "--vuuSplitPane-splitterSize": void 0 === splitterSize ? void 0 : `${splitterSize}px`
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, `${classBase}-${flexDirection}`, className),
+        ref: useForkRef(rootRef, forwardedRef),
+        style: splitPaneStyle,
+        children: [
+            panes[0],
+            2 === panes.length ? /*#__PURE__*/ jsx(Splitter, {
+                direction: flexDirection,
+                onResize: resize,
+                onResizeEnd: endResize,
+                onResizeStart: beginResize,
+                position: splitterPosition
+            }) : null,
+            panes[1]
+        ]
+    });
+});
+export { SplitPane_SplitPane as SplitPane };