@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+/**
+ * Selects and coordinates the appropriate mobile or desktop overlay surface for one responsive content flow.
+ */
+export declare const VireoResponsiveOverlayFrame: React.ForwardRefExoticComponent<import("./VireoResponsiveOverlayFrame.types.js").VireoResponsiveOverlayFrameSlotsAndSlotProps & {
+    open: boolean;
+    onClose: () => void;
+    onExited?: () => void;
+    maxWidth?: import("@mui/material").DialogProps["maxWidth"];
+    mobileSurface?: import("./VireoResponsiveOverlayFrame.types.js").VireoResponsiveOverlayFrameMobileSurface;
+    mobileHeight?: string;
+    mobileMaxHeight?: string;
+    desktopPaperSx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+    desktopSidePanelWidth?: import("./VireoResponsiveOverlayFrame.types.js").VireoResponsiveOverlayFrameDesktopSidePanelWidth;
+    desktopSidePanelMinWidth?: number;
+    desktopSidePanelMinContentWidth?: number;
+    desktopSidePanelSx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+    desktopSurface?: import("./VireoResponsiveOverlayFrame.types.js").VireoResponsiveOverlayFrameDesktopSurface;
+    allowSidePanelResize?: boolean;
+    desktopNavWidth?: number;
+    children: React.ReactNode;
+    classes?: Partial<import("./VireoResponsiveOverlayFrame.classes.js").VireoResponsiveOverlayFrameClasses>;
+} & import("./VireoResponsiveOverlayFrame.types.js").VireoResponsiveOverlayFrameInheritedProps & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoResponsiveOverlayFrame integration point. */
+export declare const VIREO_RESPONSIVE_OVERLAY_FRAME_NAME = "VireoResponsiveOverlayFrame";
+/** Canonical public slots exposed by VireoResponsiveOverlayFrame, in rendered DOM order. */
+export declare const VIREO_RESPONSIVE_OVERLAY_FRAME_SLOTS: readonly ["root"];
+/** Public slot names exposed by VireoResponsiveOverlayFrame. */
+export type VireoResponsiveOverlayFrameSlotName = (typeof VIREO_RESPONSIVE_OVERLAY_FRAME_SLOTS)[number];

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoResponsiveOverlayFrame integration point. */
+export const VIREO_RESPONSIVE_OVERLAY_FRAME_NAME = "VireoResponsiveOverlayFrame";
+/** Canonical public slots exposed by VireoResponsiveOverlayFrame, in rendered DOM order. */
+export const VIREO_RESPONSIVE_OVERLAY_FRAME_SLOTS = ["root"];

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VireoBottomDrawer } from "../../../../../capabilities/overlays/components/overlays/VireoBottomDrawer/index.js";
+import { VireoDockedSidePanel } from "../../../../../capabilities/overlays/components/overlays/VireoDockedSidePanel/index.js";
+import { VireoSidePanelResizeHandle } from "../../../../../capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/index.js";
+import { DEFAULT_DESKTOP_SIDE_PANEL_MIN_WIDTH, DEFAULT_DESKTOP_SIDE_PANEL_MIN_CONTENT_WIDTH, DEFAULT_DESKTOP_SIDE_PANEL_VIEWPORT_INSET, SIDE_PANEL_WIDTH_CSS_VAR, } from "../../../../../capabilities/overlays/constants/overlay.constants.js";
+import { useRafViewportWidth } from "../../../../../capabilities/overlays/hooks/useRafViewportWidth/useRafViewportWidth.js";
+import { useSidePanelResize } from "../../../../../capabilities/overlays/hooks/useSidePanelResize/useSidePanelResize.js";
+import { clampSidePanelWidth, getDefaultDesktopSidePanelWidth, getNumericDesktopSidePanelWidth, resolveDockedSidePanelWidth, } from "../../../../../capabilities/overlays/utils/overlay.utils.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { Dialog, Drawer, Slide, unstable_composeClasses as composeClasses, useMediaQuery } from "@mui/material";
+import { useTheme, useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoResponsiveOverlayFrameUtilityClass, } from "./VireoResponsiveOverlayFrame.classes.js";
+import { VIREO_RESPONSIVE_OVERLAY_FRAME_NAME, } from "./VireoResponsiveOverlayFrame.identity.js";
+import { VireoResponsiveOverlayFrameRoot } from "./VireoResponsiveOverlayFrame.styled.js";
+const MobileFullScreenTransition = React.forwardRef(function MobileFullScreenTransition(transitionProps, ref) {
+    return _jsx(Slide, { direction: "up", ref: ref, ...transitionProps });
+});
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+    }, getVireoResponsiveOverlayFrameUtilityClass, classes);
+}
+/**
+ * Selects and coordinates the appropriate mobile or desktop overlay surface for one responsive content flow.
+ */
+export const VireoResponsiveOverlayFrame = React.forwardRef(function VireoResponsiveOverlayFrame(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_RESPONSIVE_OVERLAY_FRAME_NAME });
+    const { allowSidePanelResize = false, children, className, classes: classesProp, desktopNavWidth = 0, desktopPaperSx, desktopSidePanelMinContentWidth = DEFAULT_DESKTOP_SIDE_PANEL_MIN_CONTENT_WIDTH, desktopSidePanelMinWidth = DEFAULT_DESKTOP_SIDE_PANEL_MIN_WIDTH, desktopSidePanelSx, desktopSidePanelWidth, desktopSurface = "dialog", maxWidth = "lg", mobileHeight, mobileMaxHeight = "92dvh", mobileSurface = "fullScreenDialog", onClose, onExited, open, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const isConfiguredDesktopSidePanelSurface = desktopSurface === "dockedSidePanel" || desktopSurface === "overlaySidePanel";
+    const viewportTrackingEnabled = !isMobile &&
+        (desktopSurface === "dockedSidePanel" || (allowSidePanelResize && isConfiguredDesktopSidePanelSurface));
+    const viewportWidth = useRafViewportWidth(viewportTrackingEnabled);
+    const drawerMaxHeight = mobileHeight ? undefined : mobileMaxHeight;
+    const requestedDesktopSidePanelWidth = desktopSidePanelWidth ?? getDefaultDesktopSidePanelWidth(maxWidth);
+    const requestedDesktopSidePanelNumericWidth = getNumericDesktopSidePanelWidth(requestedDesktopSidePanelWidth, maxWidth);
+    const desktopAvailableWidth = Math.max(0, viewportWidth - desktopNavWidth);
+    const maxDockedSidePanelWidth = Math.max(0, desktopAvailableWidth - desktopSidePanelMinContentWidth);
+    const maxOverlaySidePanelWidth = Math.max(desktopSidePanelMinWidth, viewportWidth - DEFAULT_DESKTOP_SIDE_PANEL_VIEWPORT_INSET);
+    const canFitDockedSidePanel = maxDockedSidePanelWidth >= desktopSidePanelMinWidth;
+    const effectiveDesktopSurface = desktopSurface === "dockedSidePanel" && !canFitDockedSidePanel ? "overlaySidePanel" : desktopSurface;
+    const sidePanelResizeEnabled = allowSidePanelResize &&
+        (effectiveDesktopSurface === "dockedSidePanel" || effectiveDesktopSurface === "overlaySidePanel");
+    const sidePanelResizeMaxWidth = effectiveDesktopSurface === "dockedSidePanel" ? maxDockedSidePanelWidth : maxOverlaySidePanelWidth;
+    const sidePanelResizeInitialWidth = clampSidePanelWidth(requestedDesktopSidePanelNumericWidth, desktopSidePanelMinWidth, sidePanelResizeMaxWidth);
+    const sidePanelResize = useSidePanelResize({
+        enabled: sidePanelResizeEnabled,
+        initialWidth: sidePanelResizeInitialWidth,
+        minWidth: desktopSidePanelMinWidth,
+        maxWidth: sidePanelResizeMaxWidth,
+    });
+    const ownerState = {
+        open,
+        isMobile,
+        mobileSurface,
+        desktopSurface,
+        effectiveDesktopSurface,
+        allowSidePanelResize,
+        sidePanelResizeEnabled,
+        isResizing: sidePanelResize.isResizing,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const resizedSidePanelWidth = `var(${SIDE_PANEL_WIDTH_CSS_VAR})`;
+    const overlaySidePanelWidth = sidePanelResizeEnabled ? resizedSidePanelWidth : requestedDesktopSidePanelWidth;
+    const dockedSidePanelWidth = sidePanelResizeEnabled
+        ? resizedSidePanelWidth
+        : resolveDockedSidePanelWidth(requestedDesktopSidePanelWidth, maxDockedSidePanelWidth, desktopSidePanelMinWidth);
+    const sidePanelResizeHandle = (_jsx(VireoSidePanelResizeHandle, { enabled: sidePanelResizeEnabled, isResizing: sidePanelResize.isResizing, onResizeStart: sidePanelResize.onResizeStart, onResizeKeyDown: sidePanelResize.onResizeKeyDown, onResizeDoubleClick: sidePanelResize.onResizeDoubleClick, valueMin: desktopSidePanelMinWidth, valueMax: sidePanelResizeMaxWidth, valueNow: sidePanelResize.width }));
+    const sidePanelResizeStyle = sidePanelResizeEnabled
+        ? { [SIDE_PANEL_WIDTH_CSS_VAR]: `${sidePanelResize.width}px` }
+        : undefined;
+    const handleExited = React.useCallback(() => onExited?.(), [onExited]);
+    let desktopFrame;
+    if (effectiveDesktopSurface === "overlaySidePanel") {
+        desktopFrame = (_jsxs(Drawer, { anchor: "right", open: open, onClose: onClose, slotProps: {
+                paper: {
+                    ref: sidePanelResizeEnabled ? sidePanelResize.rootRef : undefined,
+                    style: sidePanelResizeStyle,
+                    sx: mergeSx({
+                        width: overlaySidePanelWidth,
+                        maxWidth: sidePanelResizeEnabled ? sidePanelResizeMaxWidth : "100vw",
+                        display: "flex",
+                        flexDirection: "column",
+                        overflow: "hidden",
+                    }, desktopSidePanelSx),
+                },
+                transition: { appear: true, onExited: handleExited },
+            }, children: [sidePanelResizeHandle, children] }));
+    }
+    else if (effectiveDesktopSurface === "dockedSidePanel") {
+        desktopFrame = (_jsx(VireoDockedSidePanel, { open: open, width: dockedSidePanelWidth, minWidth: desktopSidePanelMinWidth, maxWidth: maxDockedSidePanelWidth, isResizing: sidePanelResize.isResizing, ref: sidePanelResizeEnabled ? sidePanelResize.rootRef : undefined, style: sidePanelResizeStyle, slotProps: desktopSidePanelSx ? { surface: { sx: desktopSidePanelSx } } : undefined, resizeHandle: sidePanelResizeHandle, onExited: handleExited, children: children }));
+    }
+    else {
+        desktopFrame = (_jsx(Dialog, { open: open, onClose: onClose, maxWidth: maxWidth, fullWidth: true, slotProps: {
+                ...(desktopPaperSx && { paper: { sx: desktopPaperSx } }),
+                transition: { onExited },
+            }, children: children }));
+    }
+    const mobileFrame = mobileSurface === "fullScreenDialog" ? (_jsx(Dialog, { open: open, onClose: onClose, fullScreen: true, slots: { transition: MobileFullScreenTransition }, slotProps: {
+            paper: { sx: { overflow: "hidden" } },
+            transition: { onExited: handleExited },
+        }, children: children })) : (_jsx(VireoBottomDrawer, { open: open, onClose: onClose, onExited: onExited, height: mobileHeight, maxHeight: drawerMaxHeight, children: children }));
+    const frame = isMobile ? mobileFrame : desktopFrame;
+    return (_jsx(VireoResponsiveOverlayFrameRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: frame }));
+});
+VireoResponsiveOverlayFrame.displayName = VIREO_RESPONSIVE_OVERLAY_FRAME_NAME;

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoResponsiveOverlayFrameOwnerState } from "./VireoResponsiveOverlayFrame.types.js";
+type VireoResponsiveOverlayFrameStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoResponsiveOverlayFrameOwnerState>;
+export declare const VireoResponsiveOverlayFrameRoot: VireoResponsiveOverlayFrameStyledSlotComponent<BoxProps>;
+export {};

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.styled.js

@@ -0,0 +1,8 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_RESPONSIVE_OVERLAY_FRAME_NAME } from "./VireoResponsiveOverlayFrame.identity.js";
+export const VireoResponsiveOverlayFrameRoot = styled(Box, {
+    name: VIREO_RESPONSIVE_OVERLAY_FRAME_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({ display: "contents" });

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.types.d.ts

@@ -0,0 +1,81 @@
+import type { ResponsiveOverlayFrameDesktopSidePanelWidth, ResponsiveOverlayFrameDesktopSurface, ResponsiveOverlayFrameMobileSurface } from "../../../../../capabilities/overlays/types/overlay.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps, DialogProps, SxProps, Theme } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoResponsiveOverlayFrameClasses, type VireoResponsiveOverlayFrameClassKey } from "./VireoResponsiveOverlayFrame.classes.js";
+import type { VIREO_RESPONSIVE_OVERLAY_FRAME_NAME, VireoResponsiveOverlayFrameSlotName } from "./VireoResponsiveOverlayFrame.identity.js";
+/** Width accepted by desktop side-panel surface modes. */
+export type VireoResponsiveOverlayFrameDesktopSidePanelWidth = ResponsiveOverlayFrameDesktopSidePanelWidth;
+/** Desktop surface coordinated by the responsive frame. */
+export type VireoResponsiveOverlayFrameDesktopSurface = ResponsiveOverlayFrameDesktopSurface;
+/** Mobile surface coordinated by the responsive frame. */
+export type VireoResponsiveOverlayFrameMobileSurface = ResponsiveOverlayFrameMobileSurface;
+export type VireoResponsiveOverlayFrameOwnerState = {
+    open: boolean;
+    isMobile: boolean;
+    mobileSurface: VireoResponsiveOverlayFrameMobileSurface;
+    desktopSurface: VireoResponsiveOverlayFrameDesktopSurface;
+    effectiveDesktopSurface: VireoResponsiveOverlayFrameDesktopSurface;
+    allowSidePanelResize: boolean;
+    sidePanelResizeEnabled: boolean;
+    isResizing: boolean;
+};
+export interface VireoResponsiveOverlayFrameRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoResponsiveOverlayFrame}. */
+export type VireoResponsiveOverlayFrameSlots = {
+    [TSlotName in VireoResponsiveOverlayFrameSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoResponsiveOverlayFrame}. */
+export type VireoResponsiveOverlayFrameSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoResponsiveOverlayFrameSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoResponsiveOverlayFrameRootSlotPropsOverrides, VireoResponsiveOverlayFrameOwnerState>;
+}>;
+/** Props owned by {@link VireoResponsiveOverlayFrame}. */
+export type VireoResponsiveOverlayFrameOwnProps = VireoResponsiveOverlayFrameSlotsAndSlotProps & {
+    /** Whether the selected overlay surface is open. */
+    open: boolean;
+    /** Closes the selected overlay surface. */
+    onClose: () => void;
+    /** Called after the selected overlay surface finishes leaving. */
+    onExited?: () => void;
+    /** Maximum width of the desktop dialog surface. @default 'lg' */
+    maxWidth?: DialogProps["maxWidth"];
+    /** Surface used on mobile. @default 'fullScreenDialog' */
+    mobileSurface?: VireoResponsiveOverlayFrameMobileSurface;
+    /** Fixed height of the mobile bottom sheet. Ignored by the full-screen dialog surface. */
+    mobileHeight?: string;
+    /** Maximum height of a content-sized mobile bottom sheet. Ignored by the full-screen dialog surface. @default '92dvh' */
+    mobileMaxHeight?: string;
+    /** MUI system customization for the desktop dialog paper. */
+    desktopPaperSx?: SxProps<Theme>;
+    /** Requested width of desktop side-panel surfaces. */
+    desktopSidePanelWidth?: VireoResponsiveOverlayFrameDesktopSidePanelWidth;
+    /** Minimum width of desktop side-panel surfaces. @default 360 */
+    desktopSidePanelMinWidth?: number;
+    /** Minimum workspace width retained beside a docked panel. */
+    desktopSidePanelMinContentWidth?: number;
+    /** MUI system customization for desktop side-panel papers. */
+    desktopSidePanelSx?: SxProps<Theme>;
+    /** Surface used on desktop. @default 'dialog' */
+    desktopSurface?: VireoResponsiveOverlayFrameDesktopSurface;
+    /** Enables pointer and keyboard resizing for desktop side-panel surfaces. @default false */
+    allowSidePanelResize?: boolean;
+    /** Width reserved by desktop navigation when deciding whether a docked panel fits. @default 0 */
+    desktopNavWidth?: number;
+    /** Contents rendered inside the selected surface. */
+    children: React.ReactNode;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoResponsiveOverlayFrameClasses>;
+};
+/** Props VireoResponsiveOverlayFrame inherits from its default root after excluding component-owned props. */
+export type VireoResponsiveOverlayFrameInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "maxWidth" | "ref">;
+/** Props accepted by {@link VireoResponsiveOverlayFrame}. */
+export type VireoResponsiveOverlayFrameProps = VireoResponsiveOverlayFrameOwnProps & VireoResponsiveOverlayFrameInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_RESPONSIVE_OVERLAY_FRAME_NAME]?: VireoThemeComponent<VireoResponsiveOverlayFrameProps, VireoResponsiveOverlayFrameClassKey, VireoResponsiveOverlayFrameOwnerState, Theme>;
+    }
+}

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrame.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoResponsiveOverlayFrame.js";
+export * from "./VireoResponsiveOverlayFrame.classes.js";
+export * from "./VireoResponsiveOverlayFrame.types.js";

package/dist/capabilities/overlays/components/overlays/VireoResponsiveOverlayFrame/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoResponsiveOverlayFrame.js";
+export * from "./VireoResponsiveOverlayFrame.classes.js";
+export * from "./VireoResponsiveOverlayFrame.types.js";

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoSidePanelResizeHandleSlotName } from "./VireoSidePanelResizeHandle.identity.js";
+/** Utility classes available to VireoSidePanelResizeHandle. */
+export type VireoSidePanelResizeHandleClasses = Record<VireoSidePanelResizeHandleSlotName | "resizing", string>;
+/** Valid keys for VireoSidePanelResizeHandle utility classes and theme style overrides. */
+export type VireoSidePanelResizeHandleClassKey = keyof VireoSidePanelResizeHandleClasses;
+/** Returns the generated utility class name for a VireoSidePanelResizeHandle slot or state. */
+export declare function getVireoSidePanelResizeHandleUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoSidePanelResizeHandle class key. */
+export declare const vireoSidePanelResizeHandleClasses: VireoSidePanelResizeHandleClasses;

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.classes.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME, VIREO_SIDE_PANEL_RESIZE_HANDLE_SLOTS, } from "./VireoSidePanelResizeHandle.identity.js";
+/** Returns the generated utility class name for a VireoSidePanelResizeHandle slot or state. */
+export function getVireoSidePanelResizeHandleUtilityClass(slot) {
+    return generateUtilityClass(VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoSidePanelResizeHandle class key. */
+export const vireoSidePanelResizeHandleClasses = generateUtilityClasses(VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME, [...VIREO_SIDE_PANEL_RESIZE_HANDLE_SLOTS, "resizing"]);

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoSidePanelResizeHandleProps } from "./VireoSidePanelResizeHandle.types.js";
+/**
+ * Renders the pointer and keyboard interaction target for resizing a Vireo side panel.
+ */
+export declare const VireoSidePanelResizeHandle: React.ForwardRefExoticComponent<Omit<VireoSidePanelResizeHandleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoSidePanelResizeHandle integration point. */
+export declare const VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME = "VireoSidePanelResizeHandle";
+/** Canonical public slots exposed by VireoSidePanelResizeHandle, in rendered DOM order. */
+export declare const VIREO_SIDE_PANEL_RESIZE_HANDLE_SLOTS: readonly ["root"];
+/** Public slot names exposed by VireoSidePanelResizeHandle. */
+export type VireoSidePanelResizeHandleSlotName = (typeof VIREO_SIDE_PANEL_RESIZE_HANDLE_SLOTS)[number];

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoSidePanelResizeHandle integration point. */
+export const VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME = "VireoSidePanelResizeHandle";
+/** Canonical public slots exposed by VireoSidePanelResizeHandle, in rendered DOM order. */
+export const VIREO_SIDE_PANEL_RESIZE_HANDLE_SLOTS = ["root"];

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoSidePanelResizeHandleUtilityClass, } from "./VireoSidePanelResizeHandle.classes.js";
+import { VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME, } from "./VireoSidePanelResizeHandle.identity.js";
+import { VireoSidePanelResizeHandleRoot } from "./VireoSidePanelResizeHandle.styled.js";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root", ownerState.isResizing && "resizing"],
+    }, getVireoSidePanelResizeHandleUtilityClass, classes);
+}
+/**
+ * Renders the pointer and keyboard interaction target for resizing a Vireo side panel.
+ */
+export const VireoSidePanelResizeHandle = React.forwardRef(function VireoSidePanelResizeHandle(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME });
+    const { "aria-label": ariaLabel = "Resize panel", className, classes: classesProp, enabled = true, isResizing = false, onResizeDoubleClick, onResizeKeyDown, onResizeStart, slotProps = {}, slots = {}, style, sx, valueMax, valueMin, valueNow, ...other } = props;
+    const ownerState = { enabled, isResizing };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, onDoubleClick: rootSlotOnDoubleClick, onKeyDown: rootSlotOnKeyDown, onMouseDown: rootSlotOnMouseDown, onPointerDown: rootSlotOnPointerDown, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const handlePointerDown = React.useCallback(event => {
+        rootSlotOnPointerDown?.(event);
+        if (!event.defaultPrevented)
+            rootSlotOnMouseDown?.(event);
+        if (!event.defaultPrevented)
+            onResizeStart(event);
+    }, [onResizeStart, rootSlotOnMouseDown, rootSlotOnPointerDown]);
+    const handleKeyDown = React.useCallback(event => {
+        rootSlotOnKeyDown?.(event);
+        if (!event.defaultPrevented)
+            onResizeKeyDown?.(event);
+    }, [onResizeKeyDown, rootSlotOnKeyDown]);
+    const handleDoubleClick = React.useCallback(event => {
+        rootSlotOnDoubleClick?.(event);
+        if (!event.defaultPrevented)
+            onResizeDoubleClick(event);
+    }, [onResizeDoubleClick, rootSlotOnDoubleClick]);
+    if (!ownerState.enabled)
+        return null;
+    const keyboardEnabled = Boolean(onResizeKeyDown) && valueMin !== undefined && valueMax !== undefined && valueNow !== undefined;
+    return (_jsx(VireoSidePanelResizeHandleRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), role: keyboardEnabled ? "separator" : "presentation", tabIndex: keyboardEnabled ? 0 : undefined, "aria-label": keyboardEnabled ? ariaLabel : undefined, "aria-orientation": keyboardEnabled ? "vertical" : undefined, "aria-valuemin": keyboardEnabled ? valueMin : undefined, "aria-valuemax": keyboardEnabled ? valueMax : undefined, "aria-valuenow": keyboardEnabled ? valueNow : undefined, onPointerDown: handlePointerDown, onKeyDown: handleKeyDown, onDoubleClick: handleDoubleClick }));
+});
+VireoSidePanelResizeHandle.displayName = VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME;

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoSidePanelResizeHandleOwnerState } from "./VireoSidePanelResizeHandle.types.js";
+type VireoSidePanelResizeHandleStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoSidePanelResizeHandleOwnerState>;
+export declare const VireoSidePanelResizeHandleRoot: VireoSidePanelResizeHandleStyledSlotComponent<BoxProps>;
+export {};

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.styled.js

@@ -0,0 +1,47 @@
+import { VIREO_MOTION_TOKENS } from "../../../../../core/public.js";
+import { SIDE_PANEL_RESIZE_ACTIVE_OPACITY, SIDE_PANEL_RESIZE_HANDLE_WIDTH, SIDE_PANEL_RESIZE_HITBOX_WIDTH, SIDE_PANEL_RESIZE_HOVER_OPACITY, } from "../../../../../capabilities/overlays/constants/overlay.constants.js";
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME } from "./VireoSidePanelResizeHandle.identity.js";
+export const VireoSidePanelResizeHandleRoot = styled(Box, {
+    name: VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME,
+    slot: "Root",
+    overridesResolver: ({ ownerState }, styles) => [styles.root, ownerState.isResizing && styles.resizing],
+})(({ ownerState, theme }) => {
+    const activeColor = theme.palette.mode === "light" ? theme.palette.grey[500] : theme.palette.grey[400];
+    return {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: SIDE_PANEL_RESIZE_HITBOX_WIDTH,
+        height: "100%",
+        cursor: "col-resize",
+        touchAction: "none",
+        zIndex: 1300,
+        backgroundColor: "transparent",
+        "&::after": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: SIDE_PANEL_RESIZE_HANDLE_WIDTH,
+            height: "100%",
+            backgroundColor: ownerState.isResizing ? activeColor : "transparent",
+            opacity: ownerState.isResizing ? SIDE_PANEL_RESIZE_ACTIVE_OPACITY : 0,
+            transition: theme.transitions.create(["opacity", "background-color"], {
+                duration: VIREO_MOTION_TOKENS.duration.micro,
+            }),
+        },
+        "&:hover::after": {
+            backgroundColor: activeColor,
+            opacity: ownerState.isResizing ? SIDE_PANEL_RESIZE_ACTIVE_OPACITY : SIDE_PANEL_RESIZE_HOVER_OPACITY,
+        },
+        "&:focus-visible::after": {
+            backgroundColor: activeColor,
+            opacity: SIDE_PANEL_RESIZE_HOVER_OPACITY,
+        },
+        "@media (prefers-reduced-motion: reduce)": {
+            "&::after": { transition: "none" },
+        },
+    };
+});

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.types.d.ts

@@ -0,0 +1,52 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoSidePanelResizeHandleClasses, type VireoSidePanelResizeHandleClassKey } from "./VireoSidePanelResizeHandle.classes.js";
+import type { VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME, VireoSidePanelResizeHandleSlotName } from "./VireoSidePanelResizeHandle.identity.js";
+export type VireoSidePanelResizeHandleOwnerState = {
+    enabled: boolean;
+    isResizing: boolean;
+};
+export interface VireoSidePanelResizeHandleRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoSidePanelResizeHandle}. */
+export type VireoSidePanelResizeHandleSlots = {
+    [TSlotName in VireoSidePanelResizeHandleSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoSidePanelResizeHandle}. */
+export type VireoSidePanelResizeHandleSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoSidePanelResizeHandleSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoSidePanelResizeHandleRootSlotPropsOverrides, VireoSidePanelResizeHandleOwnerState>;
+}>;
+/** Props owned by {@link VireoSidePanelResizeHandle}. */
+export type VireoSidePanelResizeHandleOwnProps = VireoSidePanelResizeHandleSlotsAndSlotProps & {
+    /** Whether the resize handle is rendered. @default true */
+    enabled?: boolean;
+    /** Whether an active pointer resize is in progress. @default false */
+    isResizing?: boolean;
+    /** Starts pointer-driven resizing. */
+    onResizeStart: React.MouseEventHandler<HTMLDivElement>;
+    /** Handles keyboard-driven resizing when value metadata is also provided. */
+    onResizeKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    /** Restores the owning panel's initial width. */
+    onResizeDoubleClick: React.MouseEventHandler<HTMLDivElement>;
+    /** Smallest keyboard-adjustable width. */
+    valueMin?: number;
+    /** Largest keyboard-adjustable width. */
+    valueMax?: number;
+    /** Current keyboard-adjustable width. */
+    valueNow?: number;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoSidePanelResizeHandleClasses>;
+};
+/** Props VireoSidePanelResizeHandle inherits from its default root after excluding component-owned props. */
+export type VireoSidePanelResizeHandleInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "onDoubleClick" | "onKeyDown" | "onMouseDown" | "onPointerDown" | "role" | "tabIndex">;
+/** Props accepted by {@link VireoSidePanelResizeHandle}. */
+export type VireoSidePanelResizeHandleProps = VireoSidePanelResizeHandleOwnProps & VireoSidePanelResizeHandleInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_SIDE_PANEL_RESIZE_HANDLE_NAME]?: VireoThemeComponent<VireoSidePanelResizeHandleProps, VireoSidePanelResizeHandleClassKey, VireoSidePanelResizeHandleOwnerState, Theme>;
+    }
+}

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/VireoSidePanelResizeHandle.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoSidePanelResizeHandle.js";
+export * from "./VireoSidePanelResizeHandle.classes.js";
+export * from "./VireoSidePanelResizeHandle.types.js";

package/dist/capabilities/overlays/components/overlays/VireoSidePanelResizeHandle/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoSidePanelResizeHandle.js";
+export * from "./VireoSidePanelResizeHandle.classes.js";
+export * from "./VireoSidePanelResizeHandle.types.js";

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoConfirmationDialogSlotName } from "./VireoConfirmationDialog.identity.js";
+/** Utility classes available to VireoConfirmationDialog. */
+export type VireoConfirmationDialogClasses = Record<VireoConfirmationDialogSlotName, string>;
+/** Valid keys for VireoConfirmationDialog utility classes and theme style overrides. */
+export type VireoConfirmationDialogClassKey = keyof VireoConfirmationDialogClasses;
+/** Returns the generated utility class name for a VireoConfirmationDialog slot or state. */
+export declare function getVireoConfirmationDialogUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoConfirmationDialog class key. */
+export declare const vireoConfirmationDialogClasses: VireoConfirmationDialogClasses;

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.classes.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_CONFIRMATION_DIALOG_NAME, VIREO_CONFIRMATION_DIALOG_SLOTS, } from "./VireoConfirmationDialog.identity.js";
+/** Returns the generated utility class name for a VireoConfirmationDialog slot or state. */
+export function getVireoConfirmationDialogUtilityClass(slot) {
+    return generateUtilityClass(VIREO_CONFIRMATION_DIALOG_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoConfirmationDialog class key. */
+export const vireoConfirmationDialogClasses = generateUtilityClasses(VIREO_CONFIRMATION_DIALOG_NAME, [...VIREO_CONFIRMATION_DIALOG_SLOTS]);

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoConfirmationDialogProps } from "./VireoConfirmationDialog.types.js";
+/** Presents a controlled, accessible confirmation decision without interpreting message strings as HTML. */
+export declare const VireoConfirmationDialog: React.ForwardRefExoticComponent<Omit<VireoConfirmationDialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoConfirmationDialog integration point. */
+export declare const VIREO_CONFIRMATION_DIALOG_NAME = "VireoConfirmationDialog";
+/** Canonical public slots exposed by VireoConfirmationDialog, in rendered DOM order. */
+export declare const VIREO_CONFIRMATION_DIALOG_SLOTS: readonly ["root", "header", "content", "actions", "cancelButton", "confirmButton"];
+/** Public slot names exposed by VireoConfirmationDialog. */
+export type VireoConfirmationDialogSlotName = (typeof VIREO_CONFIRMATION_DIALOG_SLOTS)[number];

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.identity.js

@@ -0,0 +1,11 @@
+/** Stable component name shared by every VireoConfirmationDialog integration point. */
+export const VIREO_CONFIRMATION_DIALOG_NAME = "VireoConfirmationDialog";
+/** Canonical public slots exposed by VireoConfirmationDialog, in rendered DOM order. */
+export const VIREO_CONFIRMATION_DIALOG_SLOTS = [
+    "root",
+    "header",
+    "content",
+    "actions",
+    "cancelButton",
+    "confirmButton",
+];

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VireoOverlayHeader } from "../../../../../../capabilities/overlays/components/overlays/VireoOverlayHeader/VireoOverlayHeader.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../../core/public.js";
+import { CircularProgress, unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoConfirmationDialogUtilityClass, } from "./VireoConfirmationDialog.classes.js";
+import { VIREO_CONFIRMATION_DIALOG_NAME, } from "./VireoConfirmationDialog.identity.js";
+import { VireoConfirmationDialogActions, VireoConfirmationDialogCancelButton, VireoConfirmationDialogConfirmButton, VireoConfirmationDialogContent, VireoConfirmationDialogRoot, } from "./VireoConfirmationDialog.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({
+        root: ["root"],
+        header: ["header"],
+        content: ["content"],
+        actions: ["actions"],
+        cancelButton: ["cancelButton"],
+        confirmButton: ["confirmButton"],
+    }, getVireoConfirmationDialogUtilityClass, classes);
+}
+/** Presents a controlled, accessible confirmation decision without interpreting message strings as HTML. */
+export const VireoConfirmationDialog = React.forwardRef(function VireoConfirmationDialog(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_CONFIRMATION_DIALOG_NAME });
+    const { cancelLabel = "Cancel", className, classes: classesProp, closeLabel = "Close", confirmColor = "primary", confirmLabel = "Confirm", loading = false, maxWidth = "xs", message, onClose, onConfirm, onExited, open, slotProps = {}, slots = {}, style, sx, title, ...other } = props;
+    const ownerState = { open, loading, confirmColor };
+    const classes = useUtilityClasses(classesProp);
+    const rootProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootClassName, ref: rootSlotRef, style: rootStyle, sx: rootSx, ...rootOther } = rootProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const headerProps = resolveSlotProps(slotProps.header, ownerState);
+    const contentProps = resolveSlotProps(slotProps.content, ownerState);
+    const actionsProps = resolveSlotProps(slotProps.actions, ownerState);
+    const cancelProps = resolveSlotProps(slotProps.cancelButton, ownerState);
+    const confirmProps = resolveSlotProps(slotProps.confirmButton, ownerState);
+    const Header = slots.header ?? VireoOverlayHeader;
+    const Content = slots.content ?? VireoConfirmationDialogContent;
+    const Actions = slots.actions ?? VireoConfirmationDialogActions;
+    const CancelButton = slots.cancelButton ?? VireoConfirmationDialogCancelButton;
+    const ConfirmButton = slots.confirmButton ?? VireoConfirmationDialogConfirmButton;
+    return (_jsxs(VireoConfirmationDialogRoot, { ...other, ...rootOther, as: slots.root, ref: rootRef, ownerState: ownerState, open: open, onClose: loading ? undefined : onClose, onTransitionExited: onExited, maxWidth: maxWidth, fullWidth: true, className: joinClassNames(classes.root, className, rootClassName), style: { ...style, ...rootStyle }, sx: mergeSx(sx, rootSx), children: [_jsx(Header, { ...headerProps, ownerState: ownerState, className: joinClassNames(classes.header, headerProps.className), title: title, closeLabel: closeLabel, closeDisabled: loading, onClose: onClose }), _jsx(Content, { ...contentProps, ownerState: ownerState, className: joinClassNames(classes.content, contentProps.className), children: message }), _jsxs(Actions, { ...actionsProps, ownerState: ownerState, className: joinClassNames(classes.actions, actionsProps.className), children: [_jsx(CancelButton, { ...cancelProps, ownerState: ownerState, className: joinClassNames(classes.cancelButton, cancelProps.className), color: "inherit", disabled: loading, onClick: onClose, children: cancelLabel }), _jsx(ConfirmButton, { ...confirmProps, ownerState: ownerState, className: joinClassNames(classes.confirmButton, confirmProps.className), variant: "contained", color: confirmColor, disabled: loading, "aria-busy": loading || undefined, onClick: onConfirm, startIcon: loading ? _jsx(CircularProgress, { "aria-hidden": true, color: "inherit", size: 16 }) : undefined, children: confirmLabel })] })] }));
+});
+VireoConfirmationDialog.displayName = VIREO_CONFIRMATION_DIALOG_NAME;

package/dist/capabilities/overlays/confirmation/components/overlays/VireoConfirmationDialog/VireoConfirmationDialog.styled.d.ts

@@ -0,0 +1,10 @@
+import { type StyledSlotComponent } from "../../../../../../core/public.js";
+import { type ButtonProps, type DialogActionsProps, type DialogContentProps, type DialogProps } from "@mui/material";
+import type { VireoConfirmationDialogOwnerState } from "./VireoConfirmationDialog.types.js";
+type Slot<TProps extends object> = StyledSlotComponent<TProps, VireoConfirmationDialogOwnerState>;
+export declare const VireoConfirmationDialogRoot: Slot<DialogProps>;
+export declare const VireoConfirmationDialogContent: Slot<DialogContentProps>;
+export declare const VireoConfirmationDialogActions: Slot<DialogActionsProps>;
+export declare const VireoConfirmationDialogCancelButton: Slot<ButtonProps>;
+export declare const VireoConfirmationDialogConfirmButton: Slot<ButtonProps>;
+export {};