@vuu-ui/vuu-ui-controls 3.5.5 → 3.5.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.5",
+  "version": "3.5.6",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
@@ -10,17 +10,17 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.5.5",
-    "@vuu-ui/vuu-protocol-types": "3.5.5",
-    "@vuu-ui/vuu-table-types": "3.5.5"
+    "@vuu-ui/vuu-data-types": "3.5.6",
+    "@vuu-ui/vuu-protocol-types": "3.5.6",
+    "@vuu-ui/vuu-table-types": "3.5.6"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.5",
-    "@vuu-ui/vuu-data-react": "3.5.5",
-    "@vuu-ui/vuu-layout": "3.5.5",
-    "@vuu-ui/vuu-popups": "3.5.5",
-    "@vuu-ui/vuu-table": "3.5.5",
-    "@vuu-ui/vuu-utils": "3.5.5",
+    "@vuu-ui/vuu-context-menu": "3.5.6",
+    "@vuu-ui/vuu-data-react": "3.5.6",
+    "@vuu-ui/vuu-layout": "3.5.6",
+    "@vuu-ui/vuu-popups": "3.5.6",
+    "@vuu-ui/vuu-table": "3.5.6",
+    "@vuu-ui/vuu-utils": "3.5.6",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",

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";

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 };

package/src/split-pane/Splitter.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, useRef, useState } from "react";
+const classBase = "vuuSplitPane-splitter";
+const KEYBOARD_STEP = 1;
+const KEYBOARD_STEP_LARGE = 10;
+const Splitter = ({ className, direction, onResize, onResizeEnd, onResizeStart, position, ...htmlAttributes })=>{
+    const startPosRef = useRef(void 0);
+    const [active, setActive] = useState(false);
+    const isColumn = "column" === direction;
+    const getPointerPos = useCallback((e)=>isColumn ? e.clientY : e.clientX, [
+        isColumn
+    ]);
+    const handlePointerDown = useCallback((e)=>{
+        if (0 === e.button && onResizeStart()) {
+            e.preventDefault();
+            e.currentTarget.focus();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            startPosRef.current = getPointerPos(e);
+            setActive(true);
+        }
+    }, [
+        getPointerPos,
+        onResizeStart
+    ]);
+    const handlePointerMove = useCallback((e)=>{
+        if (void 0 !== startPosRef.current) onResize(getPointerPos(e) - startPosRef.current);
+    }, [
+        getPointerPos,
+        onResize
+    ]);
+    const handlePointerEnd = useCallback(()=>{
+        if (void 0 !== startPosRef.current) {
+            startPosRef.current = void 0;
+            setActive(false);
+            onResizeEnd();
+        }
+    }, [
+        onResizeEnd
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        const step = e.shiftKey ? KEYBOARD_STEP_LARGE : KEYBOARD_STEP;
+        const [decrementKey, incrementKey] = isColumn ? [
+            "ArrowUp",
+            "ArrowDown"
+        ] : [
+            "ArrowLeft",
+            "ArrowRight"
+        ];
+        const distance = e.key === decrementKey ? -step : e.key === incrementKey ? step : "Home" === e.key ? -1 / 0 : "End" === e.key ? 1 / 0 : void 0;
+        if (void 0 !== distance && onResizeStart()) {
+            e.preventDefault();
+            onResize(distance);
+            onResizeEnd();
+        }
+    }, [
+        isColumn,
+        onResize,
+        onResizeEnd,
+        onResizeStart
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-label": "Resize",
+        ...htmlAttributes,
+        "aria-orientation": isColumn ? "horizontal" : "vertical",
+        "aria-valuemax": 100,
+        "aria-valuemin": 0,
+        "aria-valuenow": position,
+        className: clsx(classBase, className, {
+            [`${classBase}-active`]: active
+        }),
+        onKeyDown: handleKeyDown,
+        onLostPointerCapture: handlePointerEnd,
+        onPointerCancel: handlePointerEnd,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerEnd,
+        role: "separator",
+        tabIndex: 0
+    });
+};
+export { Splitter };

package/src/split-pane/index.js

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

package/src/split-pane/useSplitPane.js

@@ -0,0 +1,101 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+const parsePx = (value, defaultValue)=>value.endsWith("px") ? parseFloat(value) : defaultValue;
+const measurePane = (el, dimension)=>{
+    const { [dimension]: size } = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    return {
+        size,
+        minSize: parsePx(style.getPropertyValue(`min-${dimension}`), 0),
+        maxSize: parsePx(style.getPropertyValue(`max-${dimension}`), 1 / 0)
+    };
+};
+const getPanes = (root)=>{
+    const pane1 = root?.children[0];
+    const pane2 = root?.children[2];
+    if (pane1 && pane2) return [
+        pane1,
+        pane2
+    ];
+};
+const toPercentage = ([size1, size2])=>{
+    const total = size1 + size2;
+    return 0 === total ? 0 : Math.round(size1 / total * 100);
+};
+const useSplitPane = ({ direction, onSplitterMoved, paneCount })=>{
+    const rootRef = useRef(null);
+    const resizeStateRef = useRef(void 0);
+    const [splitterPosition, setSplitterPosition] = useState(void 0);
+    const dimension = "column" === direction ? "height" : "width";
+    const hasSplitter = 2 === paneCount;
+    useLayoutEffect(()=>{
+        const panes = hasSplitter ? getPanes(rootRef.current) : void 0;
+        if (panes) {
+            const [pane1, pane2] = panes;
+            setSplitterPosition(toPercentage([
+                pane1.getBoundingClientRect()[dimension],
+                pane2.getBoundingClientRect()[dimension]
+            ]));
+        }
+    }, [
+        dimension,
+        hasSplitter
+    ]);
+    const beginResize = useCallback(()=>{
+        const panes = getPanes(rootRef.current);
+        if (panes) {
+            const [pane1, pane2] = panes;
+            const measurements = [
+                measurePane(pane1, dimension),
+                measurePane(pane2, dimension)
+            ];
+            resizeStateRef.current = {
+                panes,
+                measurements,
+                sizes: [
+                    measurements[0].size,
+                    measurements[1].size
+                ]
+            };
+            return true;
+        }
+        return false;
+    }, [
+        dimension
+    ]);
+    const resize = useCallback((distance)=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            const { panes: [pane1, pane2], measurements: [m1, m2] } = resizeState;
+            const total = m1.size + m2.size;
+            const lowerBound = Math.max(m1.minSize, total - m2.maxSize);
+            const upperBound = Math.min(m1.maxSize, total - m2.minSize);
+            const size1 = Math.max(lowerBound, Math.min(upperBound, m1.size + distance));
+            const size2 = total - size1;
+            pane1.style.flexBasis = `${size1}px`;
+            pane2.style.flexBasis = `${size2}px`;
+            resizeState.sizes = [
+                size1,
+                size2
+            ];
+        }
+    }, []);
+    const endResize = useCallback(()=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            resizeStateRef.current = void 0;
+            const { measurements, sizes } = resizeState;
+            setSplitterPosition(toPercentage(sizes));
+            if (sizes[0] !== measurements[0].size || sizes[1] !== measurements[1].size) onSplitterMoved?.(sizes);
+        }
+    }, [
+        onSplitterMoved
+    ]);
+    return {
+        beginResize,
+        endResize,
+        resize,
+        rootRef,
+        splitterPosition
+    };
+};
+export { useSplitPane };

package/types/index.d.ts

@@ -21,6 +21,7 @@ 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";

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";

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

@@ -0,0 +1,18 @@
+export type SplitPaneDirection = "row" | "column";
+/**
+ * Sizes (in px) of the two panes, measured along the main axis.
+ */
+export type SplitPaneSizes = [number, number];
+export type SplitterMovedHandler = (sizes: SplitPaneSizes) => void;
+export interface SplitPaneHookProps {
+    direction: SplitPaneDirection;
+    onSplitterMoved?: SplitterMovedHandler;
+    paneCount: number;
+}
+export declare const useSplitPane: ({ direction, onSplitterMoved, paneCount, }: SplitPaneHookProps) => {
+    beginResize: () => boolean;
+    endResize: () => void;
+    resize: (distance: number) => void;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    splitterPosition: number | undefined;
+};

package/types/src/calendar/Calendar.d.ts

@@ -1,13 +0,0 @@
-import { type CalendarCarouselProps } from "./internal/CalendarCarousel";
-import { type CalendarNavigationProps } from "./internal/CalendarNavigation";
-import { type useCalendarProps } from "./useCalendar";
-export type CalendarProps = useCalendarProps & {
-    className?: string;
-    id?: string;
-    renderDayContents?: CalendarCarouselProps["renderDayContents"];
-    hideYearDropdown?: CalendarNavigationProps["hideYearDropdown"];
-    borderedDropdown?: CalendarNavigationProps["borderedDropdown"];
-    TooltipProps?: CalendarCarouselProps["TooltipProps"];
-    hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
-};
-export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/calendar/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./Calendar";
-export * from "./useCalendarDay";
-export * from "./useCalendar";
-export * from "./useSelection";

package/types/src/calendar/internal/CalendarCarousel.d.ts

@@ -1,3 +0,0 @@
-import { type CalendarMonthProps } from "./CalendarMonth";
-export type CalendarCarouselProps = Omit<CalendarMonthProps, "date">;
-export declare const CalendarCarousel: import("react").ForwardRefExoticComponent<Omit<CalendarCarouselProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/calendar/internal/CalendarContext.d.ts

@@ -1,8 +0,0 @@
-import type { useCalendar } from "../useCalendar";
-interface CalendarState {
-    state: ReturnType<typeof useCalendar>["state"];
-    helpers: ReturnType<typeof useCalendar>["helpers"];
-}
-declare const CalendarContext: import("react").Context<CalendarState | null>;
-declare function useCalendarContext(): CalendarState;
-export { CalendarContext, useCalendarContext };

package/types/src/calendar/internal/CalendarDay.d.ts

@@ -1,14 +0,0 @@
-import type { DateValue } from "@internationalized/date";
-import { type TooltipProps } from "@salt-ds/core";
-import { type ComponentPropsWithRef, type ReactElement } from "react";
-import { type DayStatus } from "../useCalendarDay";
-export type DateFormatter = (day: Date) => string | undefined;
-export interface CalendarDayProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
-    day: DateValue;
-    formatDate?: DateFormatter;
-    renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;
-    status?: DayStatus;
-    month: DateValue;
-    TooltipProps?: Partial<TooltipProps>;
-}
-export declare const CalendarDay: import("react").ForwardRefExoticComponent<Omit<CalendarDayProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/calendar/internal/CalendarMonth.d.ts

@@ -1,10 +0,0 @@
-import type { DateValue } from "@internationalized/date";
-import { type ComponentPropsWithRef } from "react";
-import { type CalendarDayProps } from "./CalendarDay";
-export interface CalendarMonthProps extends ComponentPropsWithRef<"div"> {
-    date: DateValue;
-    hideOutOfRangeDates?: boolean;
-    renderDayContents?: CalendarDayProps["renderDayContents"];
-    TooltipProps?: CalendarDayProps["TooltipProps"];
-}
-export declare const CalendarMonth: import("react").ForwardRefExoticComponent<Omit<CalendarMonthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/calendar/internal/CalendarNavigation.d.ts

@@ -1,16 +0,0 @@
-import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
-import { type ComponentPropsWithRef } from "react";
-import { type DateValue } from "@internationalized/date";
-type dateDropdownProps = DropdownProps<DateValue>;
-export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
-    MonthDropdownProps?: dateDropdownProps;
-    YearDropdownProps?: dateDropdownProps;
-    onMonthSelect?: dateDropdownProps["onChange"];
-    onYearSelect?: dateDropdownProps["onChange"];
-    borderedDropdown?: dateDropdownProps["bordered"];
-    onNavigateNext?: ButtonProps["onClick"];
-    onNavigatePrevious?: ButtonProps["onClick"];
-    hideYearDropdown?: boolean;
-}
-export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/types/src/calendar/internal/CalendarWeekHeader.d.ts

@@ -1,3 +0,0 @@
-import { type ComponentPropsWithRef } from "react";
-export type CalendarWeekHeaderProps = ComponentPropsWithRef<"div">;
-export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/calendar/internal/useFocusManagement.d.ts

@@ -1,9 +0,0 @@
-import { type DateValue } from "@internationalized/date";
-import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "react";
-export declare function useFocusManagement({ date }: {
-    date: DateValue;
-}): {
-    handleClick: MouseEventHandler<HTMLButtonElement>;
-    handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
-    handleFocus: FocusEventHandler<HTMLButtonElement>;
-};

package/types/src/calendar/internal/utils.d.ts

@@ -1,15 +0,0 @@
-import { DateFormatter, type DateValue } from "@internationalized/date";
-export declare function getCurrentLocale(): string;
-export declare function getDateFormatter(options?: Intl.DateTimeFormatOptions): DateFormatter;
-export declare function formatDate(date: DateValue, options?: Intl.DateTimeFormatOptions): string;
-export declare function getCalender(): import("@internationalized/date").Calendar;
-type WeekdayFormat = Intl.DateTimeFormatOptions["weekday"];
-export declare function daysForLocale(weekday?: WeekdayFormat): string[];
-export declare function monthsForLocale(currentYear: DateValue): (import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime)[];
-export declare function generateVisibleDays(currentMonth: DateValue): {
-    date: DateValue;
-    dateOfMonth: number;
-    isCurrentMonth: boolean;
-}[];
-export declare function monthDiff(a: DateValue, b: DateValue): number;
-export {};

package/types/src/calendar/useCalendar.d.ts

@@ -1,54 +0,0 @@
-import { type DateValue } from "@internationalized/date";
-import { type SyntheticEvent } from "react";
-import { type UseMultiSelectionCalendarProps, type UseOffsetSelectionCalendarProps, type UseRangeSelectionCalendarProps, type UseSingleSelectionCalendarProps } from "./useSelection";
-interface BaseUseCalendarProps {
-    defaultVisibleMonth?: DateValue;
-    onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: DateValue) => void;
-    isDayUnselectable?: (date: DateValue) => string | false | undefined;
-    isDayHighlighted?: (date: DateValue) => string | false | undefined;
-    isDayDisabled?: (date: DateValue) => boolean;
-    visibleMonth?: DateValue;
-    hideOutOfRangeDates?: boolean;
-    hideYearDropdown?: boolean;
-    minDate?: DateValue;
-    maxDate?: DateValue;
-}
-export type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
-export declare function useCalendar(props: useCalendarProps): {
-    state: {
-        selectedDate: DateValue[] | {
-            startDate?: DateValue;
-            endDate?: DateValue;
-        } | import("./useSelection").RangeSelectionValueType | DateValue | null | undefined;
-        hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
-        visibleMonth: DateValue;
-        focusedDate: DateValue;
-        minDate: DateValue | undefined;
-        maxDate: DateValue | undefined;
-        selectionVariant: "default" | "multiselect" | "offset" | "range";
-        hideOutOfRangeDates: boolean | undefined;
-        calendarFocused: boolean;
-    };
-    helpers: {
-        setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
-        isSelected: (date: DateValue) => boolean;
-        setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
-        isHovered: (date: DateValue) => boolean;
-        isSelectedSpan: (date: DateValue) => boolean;
-        isHoveredSpan: (date: DateValue) => boolean;
-        isSelectedStart: (date: DateValue) => boolean;
-        isSelectedEnd: (date: DateValue) => boolean;
-        isHoveredOffset: (date: DateValue) => boolean;
-        setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: DateValue) => void;
-        setFocusedDate: (event: SyntheticEvent, date: DateValue) => void;
-        setCalendarFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-        isDayUnselectable: (date: DateValue) => string | false | undefined;
-        isDayHighlighted: (date: DateValue) => string | false | undefined;
-        isDayDisabled: (date: DateValue) => boolean;
-        isDayVisible: (date: DateValue) => boolean;
-        isOutsideAllowedDates: (date: DateValue) => boolean;
-        isOutsideAllowedMonths: (date: DateValue) => boolean;
-        isOutsideAllowedYears: (date: DateValue) => boolean;
-    };
-};
-export {};

package/types/src/calendar/useCalendarDay.d.ts

@@ -1,22 +0,0 @@
-import { type DateValue } from "@internationalized/date";
-import { type ComponentPropsWithoutRef, type RefObject } from "react";
-export interface DayStatus {
-    outOfRange?: boolean;
-    selected?: boolean;
-    today?: boolean;
-    unselectable?: string | false;
-    highlighted?: string | false;
-    focused?: boolean;
-    disabled?: boolean;
-    hidden?: boolean;
-}
-export interface useCalendarDayProps {
-    date: DateValue;
-    month: DateValue;
-}
-export declare function useCalendarDay({ date, month }: useCalendarDayProps, ref: RefObject<HTMLElement | null>): {
-    status: DayStatus;
-    dayProps: ComponentPropsWithoutRef<"button">;
-    unselectableReason: string | false | undefined;
-    highlightedReason: string | false | undefined;
-};