@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.types.d.ts

@@ -0,0 +1,60 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { VireoApplicationNavigationMode } from "../../../../../capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.js";
+import type { Box, ListItemButton, ListItemButtonProps, Typography } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoApplicationNavigationItemClasses, type VireoApplicationNavigationItemClassKey } from "./VireoApplicationNavigationItem.classes.js";
+import type { VIREO_APPLICATION_NAVIGATION_ITEM_NAME, VireoApplicationNavigationItemSlotName } from "./VireoApplicationNavigationItem.identity.js";
+export type VireoApplicationNavigationItemOwnerState = {
+    mode: VireoApplicationNavigationMode;
+    selected: boolean;
+    disabled: boolean;
+};
+export interface VireoApplicationNavigationItemRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoApplicationNavigationItemIconSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoApplicationNavigationItemLabelSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoApplicationNavigationItem}. */
+export type VireoApplicationNavigationItemSlots = {
+    [TSlotName in VireoApplicationNavigationItemSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoApplicationNavigationItem}. */
+export type VireoApplicationNavigationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoApplicationNavigationItemSlots, {
+    /** @default ListItemButton */
+    root: SlotProps<typeof ListItemButton, VireoApplicationNavigationItemRootSlotPropsOverrides, VireoApplicationNavigationItemOwnerState>;
+    /** @default 'span' */
+    icon: SlotProps<typeof Box, VireoApplicationNavigationItemIconSlotPropsOverrides, VireoApplicationNavigationItemOwnerState>;
+    /** @default Typography */
+    label: SlotProps<typeof Typography, VireoApplicationNavigationItemLabelSlotPropsOverrides, VireoApplicationNavigationItemOwnerState>;
+}>;
+/** Props owned by {@link VireoApplicationNavigationItem}. */
+export type VireoApplicationNavigationItemOwnProps = VireoApplicationNavigationItemSlotsAndSlotProps & {
+    /** Navigation item icon. */
+    icon: React.ReactNode;
+    /** Full developer-facing and accessible label. */
+    label: string;
+    /** Optional shorter caption used by compact mode. */
+    compactLabel?: string;
+    /** Overrides the surrounding navigation mode. */
+    mode?: VireoApplicationNavigationMode;
+    /** Tooltip shown in compact mode. Pass false to disable it. @default label */
+    tooltip?: string | false;
+    /** Whether the destination is active. @default false */
+    selected?: boolean;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoApplicationNavigationItemClasses>;
+};
+/** Props VireoApplicationNavigationItem inherits from its default root after excluding component-owned props. */
+export type VireoApplicationNavigationItemInheritedProps = Omit<ListItemButtonProps, "children" | "component" | "selected">;
+/** Props accepted by {@link VireoApplicationNavigationItem}. */
+export type VireoApplicationNavigationItemProps = VireoApplicationNavigationItemOwnProps & VireoApplicationNavigationItemInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_APPLICATION_NAVIGATION_ITEM_NAME]?: VireoThemeComponent<VireoApplicationNavigationItemProps, VireoApplicationNavigationItemClassKey, VireoApplicationNavigationItemOwnerState, Theme>;
+    }
+}

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.types.js

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

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/index.d.ts

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

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/index.js

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

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.classes.d.ts

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

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.classes.js

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

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoMobileBottomNavigationProps } from "./VireoMobileBottomNavigation.types.js";
+/**
+ * Renders a controlled, router-agnostic set of primary mobile destinations with safe-area-aware shell styling.
+ */
+export declare const VireoMobileBottomNavigation: React.ForwardRefExoticComponent<Omit<VireoMobileBottomNavigationProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.identity.d.ts

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

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.identity.js

@@ -0,0 +1,8 @@
+/** Stable component name shared by every VireoMobileBottomNavigation integration point. */
+export const VIREO_MOBILE_BOTTOM_NAVIGATION_NAME = "VireoMobileBottomNavigation";
+/** Canonical public slots exposed by VireoMobileBottomNavigation, in rendered DOM order. */
+export const VIREO_MOBILE_BOTTOM_NAVIGATION_SLOTS = [
+    "root",
+    "navigation",
+    "action",
+];

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+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 { getVireoMobileBottomNavigationUtilityClass, } from "./VireoMobileBottomNavigation.classes.js";
+import { VIREO_MOBILE_BOTTOM_NAVIGATION_NAME, } from "./VireoMobileBottomNavigation.identity.js";
+import { VireoMobileBottomNavigationAction, VireoMobileBottomNavigationNavigation, VireoMobileBottomNavigationRoot, } from "./VireoMobileBottomNavigation.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        navigation: ["navigation"],
+        action: ["action"],
+    }, getVireoMobileBottomNavigationUtilityClass, classes);
+}
+/**
+ * Renders a controlled, router-agnostic set of primary mobile destinations with safe-area-aware shell styling.
+ */
+export const VireoMobileBottomNavigation = React.forwardRef(function VireoMobileBottomNavigation(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_MOBILE_BOTTOM_NAVIGATION_NAME });
+    const { "aria-label": ariaLabel = "Primary navigation", className, classes: classesProp, items, onChange, safeAreaInset = true, slotProps = {}, slots = {}, style, sx, value = false, ...other } = props;
+    const ownerState = {
+        itemCount: items.length,
+        safeAreaInset,
+        selected: value !== false && items.some(item => item.value === value),
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, "aria-label": rootSlotAriaLabel, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const resolvedNavigationSlotProps = resolveSlotProps(slotProps.navigation, ownerState);
+    const { className: navigationSlotClassName, onChange: navigationSlotOnChange, ...navigationSlotOther } = resolvedNavigationSlotProps;
+    const resolvedActionSlotProps = resolveSlotProps(slotProps.action, ownerState);
+    const { className: actionSlotClassName, ...actionSlotOther } = resolvedActionSlotProps;
+    const handleChange = React.useCallback((event, nextValue) => {
+        navigationSlotOnChange?.(event, nextValue);
+        if (!event.defaultPrevented && typeof nextValue === "string")
+            onChange?.(nextValue, event);
+    }, [navigationSlotOnChange, onChange]);
+    return (_jsx(VireoMobileBottomNavigationRoot, { ...other, ...rootSlotOther, as: slots.root ?? "nav", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), "aria-label": rootSlotAriaLabel ?? ariaLabel, role: "navigation", children: _jsx(VireoMobileBottomNavigationNavigation, { ...navigationSlotOther, as: slots.navigation, ownerState: ownerState, className: joinClassNames(classes.navigation, navigationSlotClassName), showLabels: true, value: ownerState.selected ? value : false, onChange: handleChange, children: items.map(item => {
+                const selected = item.value === value;
+                return (_createElement(VireoMobileBottomNavigationAction, { ...actionSlotOther, as: slots.action, ownerState: ownerState, key: item.value, "aria-current": selected ? "page" : undefined, "aria-label": item.ariaLabel, className: joinClassNames(classes.action, actionSlotClassName), disabled: item.disabled, icon: item.icon, label: item.label, value: item.value }));
+            }) }) }));
+});
+VireoMobileBottomNavigation.displayName = VIREO_MOBILE_BOTTOM_NAVIGATION_NAME;

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.styled.d.ts

@@ -0,0 +1,8 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BottomNavigationActionProps, type BottomNavigationProps, type BoxProps } from "@mui/material";
+import { type VireoMobileBottomNavigationOwnerState } from "./VireoMobileBottomNavigation.types.js";
+type VireoMobileBottomNavigationStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoMobileBottomNavigationOwnerState>;
+export declare const VireoMobileBottomNavigationRoot: VireoMobileBottomNavigationStyledSlotComponent<BoxProps<"nav">>;
+export declare const VireoMobileBottomNavigationNavigation: VireoMobileBottomNavigationStyledSlotComponent<BottomNavigationProps>;
+export declare const VireoMobileBottomNavigationAction: VireoMobileBottomNavigationStyledSlotComponent<BottomNavigationActionProps>;
+export {};

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.styled.js

@@ -0,0 +1,70 @@
+import { VIREO_MOTION_TOKENS } from "../../../../../core/public.js";
+import { BottomNavigation, BottomNavigationAction, Box, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_MOBILE_BOTTOM_NAVIGATION_NAME } from "./VireoMobileBottomNavigation.identity.js";
+export const VireoMobileBottomNavigationRoot = styled(Box, {
+    name: VIREO_MOBILE_BOTTOM_NAVIGATION_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ ownerState, theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    display: "block",
+    flex: "0 0 auto",
+    minWidth: 0,
+    paddingBottom: ownerState.safeAreaInset ? "env(safe-area-inset-bottom, 0px)" : 0,
+    width: "100%",
+}));
+export const VireoMobileBottomNavigationNavigation = styled(BottomNavigation, {
+    name: VIREO_MOBILE_BOTTOM_NAVIGATION_NAME,
+    slot: "Navigation",
+    overridesResolver: (_props, styles) => styles.navigation,
+})({
+    backgroundColor: "transparent",
+    height: 64,
+    minWidth: 0,
+    width: "100%",
+});
+export const VireoMobileBottomNavigationAction = styled(BottomNavigationAction, {
+    name: VIREO_MOBILE_BOTTOM_NAVIGATION_NAME,
+    slot: "Action",
+    overridesResolver: (_props, styles) => styles.action,
+})(({ theme }) => ({
+    minWidth: 0,
+    overflow: "hidden",
+    paddingInline: 4,
+    position: "relative",
+    transition: theme.transitions.create(["color", "transform"], {
+        duration: VIREO_MOTION_TOKENS.duration.micro,
+        easing: VIREO_MOTION_TOKENS.easing.standard,
+    }),
+    "&::after": {
+        backgroundColor: "currentColor",
+        borderRadius: 999,
+        content: '""',
+        height: 3,
+        insetBlockStart: 3,
+        insetInlineStart: "calc(50% - 14px)",
+        opacity: 0,
+        position: "absolute",
+        transform: "scaleX(0)",
+        transition: theme.transitions.create(["opacity", "transform"], {
+            duration: VIREO_MOTION_TOKENS.duration.standard,
+            easing: VIREO_MOTION_TOKENS.easing.standard,
+        }),
+        width: 28,
+    },
+    "&.Mui-selected::after": { opacity: 1, transform: "scaleX(1)" },
+    "&:active:not(.Mui-disabled)": { transform: `scale(${VIREO_MOTION_TOKENS.scale.pressed})` },
+    "& .MuiBottomNavigationAction-label": {
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0ms",
+        "&::after": { transitionDuration: "0ms" },
+        "&:active:not(.Mui-disabled)": { transform: "none" },
+    },
+}));

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.types.d.ts

@@ -0,0 +1,67 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BottomNavigation, BottomNavigationAction, BoxProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoMobileBottomNavigationClasses, type VireoMobileBottomNavigationClassKey } from "./VireoMobileBottomNavigation.classes.js";
+import type { VIREO_MOBILE_BOTTOM_NAVIGATION_NAME, VireoMobileBottomNavigationSlotName } from "./VireoMobileBottomNavigation.identity.js";
+export type VireoMobileBottomNavigationItem = {
+    /** Stable opaque value reported when the destination is selected. */
+    value: string;
+    /** Visible destination label. */
+    label: string;
+    /** Decorative destination icon. */
+    icon: React.ReactNode;
+    /** Optional accessible name when it must differ from the visible label. */
+    ariaLabel?: string;
+    /** Whether the destination is unavailable. @default false */
+    disabled?: boolean;
+};
+export type VireoMobileBottomNavigationOwnerState = {
+    itemCount: number;
+    safeAreaInset: boolean;
+    selected: boolean;
+};
+export interface VireoMobileBottomNavigationRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoMobileBottomNavigationNavigationSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoMobileBottomNavigationActionSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoMobileBottomNavigation}. */
+export type VireoMobileBottomNavigationSlots = {
+    [TSlotName in VireoMobileBottomNavigationSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoMobileBottomNavigation}. */
+export type VireoMobileBottomNavigationSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoMobileBottomNavigationSlots, {
+    /** @default 'nav' */
+    root: SlotProps<"nav", VireoMobileBottomNavigationRootSlotPropsOverrides, VireoMobileBottomNavigationOwnerState>;
+    /** @default BottomNavigation */
+    navigation: SlotProps<typeof BottomNavigation, VireoMobileBottomNavigationNavigationSlotPropsOverrides, VireoMobileBottomNavigationOwnerState>;
+    /** @default BottomNavigationAction */
+    action: SlotProps<typeof BottomNavigationAction, VireoMobileBottomNavigationActionSlotPropsOverrides, VireoMobileBottomNavigationOwnerState>;
+}>;
+/** Props owned by {@link VireoMobileBottomNavigation}. */
+export type VireoMobileBottomNavigationOwnProps = VireoMobileBottomNavigationSlotsAndSlotProps & {
+    /** Destinations rendered in their supplied order. Three to five concise destinations are recommended. */
+    items: readonly VireoMobileBottomNavigationItem[];
+    /** Selected opaque destination value, or false when the current location has no quick-navigation destination. @default false */
+    value?: string | false;
+    /** Called after a destination is selected. */
+    onChange?: (value: string, event: React.SyntheticEvent) => void;
+    /** Adds the device bottom safe-area inset below the navigation actions. @default true */
+    safeAreaInset?: boolean;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoMobileBottomNavigationClasses>;
+};
+/** Props VireoMobileBottomNavigation inherits from its default root after excluding component-owned props. */
+export type VireoMobileBottomNavigationInheritedProps = Omit<BoxProps<"nav">, "children" | "component" | "onChange">;
+/** Props accepted by {@link VireoMobileBottomNavigation}. */
+export type VireoMobileBottomNavigationProps = VireoMobileBottomNavigationOwnProps & VireoMobileBottomNavigationInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_MOBILE_BOTTOM_NAVIGATION_NAME]?: VireoThemeComponent<VireoMobileBottomNavigationProps, VireoMobileBottomNavigationClassKey, VireoMobileBottomNavigationOwnerState, Theme>;
+    }
+}

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/VireoMobileBottomNavigation.types.js

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

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/index.d.ts

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

package/dist/capabilities/application-navigation/components/navigation/VireoMobileBottomNavigation/index.js

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

package/dist/capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export type VireoApplicationNavigationMode = "compact" | "expanded";
+export type VireoApplicationNavigationContextValue = {
+    mode: VireoApplicationNavigationMode;
+};
+export declare const VireoApplicationNavigationContext: React.Context<VireoApplicationNavigationContextValue>;

package/dist/capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const VireoApplicationNavigationContext = React.createContext({
+    mode: "expanded",
+});

package/dist/capabilities/application-navigation/public.d.ts

@@ -0,0 +1,4 @@
+/** Public application-navigation capability boundary. */
+export * from "./components/navigation/VireoApplicationNavigation/index.js";
+export * from "./components/navigation/VireoApplicationNavigationItem/index.js";
+export * from "./components/navigation/VireoMobileBottomNavigation/index.js";

package/dist/capabilities/application-navigation/public.js

@@ -0,0 +1,4 @@
+/** Public application-navigation capability boundary. */
+export * from "./components/navigation/VireoApplicationNavigation/index.js";
+export * from "./components/navigation/VireoApplicationNavigationItem/index.js";
+export * from "./components/navigation/VireoMobileBottomNavigation/index.js";

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.classes.d.ts

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

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.classes.js

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

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoPreferencePanelProps } from "./VireoPreferencePanel.types.js";
+/** Renders searchable, container-responsive groups of application preference controls. */
+export declare const VireoPreferencePanel: React.ForwardRefExoticComponent<Omit<VireoPreferencePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoPreferencePanel integration point. */
+export declare const VIREO_PREFERENCE_PANEL_NAME = "VireoPreferencePanel";
+/** Canonical public slots exposed by VireoPreferencePanel, in rendered DOM order. */
+export declare const VIREO_PREFERENCE_PANEL_SLOTS: readonly ["root", "section", "sectionHeader", "sectionSummary", "sectionAction", "sectionDetails", "item", "itemIcon", "itemContent", "itemTitle", "itemDescription", "itemControl", "emptyState"];
+/** Public slot names exposed by VireoPreferencePanel. */
+export type VireoPreferencePanelSlotName = (typeof VIREO_PREFERENCE_PANEL_SLOTS)[number];

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.identity.js

@@ -0,0 +1,18 @@
+/** Stable component name shared by every VireoPreferencePanel integration point. */
+export const VIREO_PREFERENCE_PANEL_NAME = "VireoPreferencePanel";
+/** Canonical public slots exposed by VireoPreferencePanel, in rendered DOM order. */
+export const VIREO_PREFERENCE_PANEL_SLOTS = [
+    "root",
+    "section",
+    "sectionHeader",
+    "sectionSummary",
+    "sectionAction",
+    "sectionDetails",
+    "item",
+    "itemIcon",
+    "itemContent",
+    "itemTitle",
+    "itemDescription",
+    "itemControl",
+    "emptyState",
+];

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.js

@@ -0,0 +1,152 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVireoPageLayout } from "../../../../../capabilities/page-layout/public.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import ExpandMoreRounded from "@mui/icons-material/ExpandMoreRounded";
+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 { getVireoPreferencePanelUtilityClass } from "./VireoPreferencePanel.classes.js";
+import { VIREO_PREFERENCE_PANEL_NAME } from "./VireoPreferencePanel.identity.js";
+import { VireoPreferencePanelEmptyState, VireoPreferencePanelItem, VireoPreferencePanelItemContent, VireoPreferencePanelItemControl, VireoPreferencePanelItemDescription, VireoPreferencePanelItemIcon, VireoPreferencePanelItemTitle, VireoPreferencePanelRoot, VireoPreferencePanelSection, VireoPreferencePanelSectionAction, VireoPreferencePanelSectionDetails, VireoPreferencePanelSectionHeader, VireoPreferencePanelSectionSummary, } from "./VireoPreferencePanel.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        section: ["section"],
+        sectionHeader: ["sectionHeader"],
+        sectionSummary: ["sectionSummary"],
+        sectionAction: ["sectionAction"],
+        sectionDetails: ["sectionDetails"],
+        item: ["item"],
+        itemIcon: ["itemIcon"],
+        itemContent: ["itemContent"],
+        itemTitle: ["itemTitle"],
+        itemDescription: ["itemDescription"],
+        itemControl: ["itemControl"],
+        emptyState: ["emptyState"],
+    }, getVireoPreferencePanelUtilityClass, classes);
+}
+function normalizeSearchValue(value) {
+    return value
+        .normalize("NFD")
+        .replace(/\p{Diacritic}/gu, "")
+        .toLocaleLowerCase()
+        .trim();
+}
+function orderKnownSectionIds(ids, sections) {
+    const requestedIds = new Set(ids);
+    return sections.filter(section => requestedIds.has(section.id)).map(section => section.id);
+}
+function getVisibleSections(sections, normalizedSearchQuery) {
+    if (!normalizedSearchQuery)
+        return sections;
+    return sections.flatMap(section => {
+        const items = section.items.filter(item => normalizeSearchValue([item.title, item.description, ...(item.searchKeywords ?? [])].filter(Boolean).join(" ")).includes(normalizedSearchQuery));
+        return items.length > 0 ? [{ ...section, items }] : [];
+    });
+}
+function warnAboutDuplicateIds(sections) {
+    if (process.env.NODE_ENV === "production")
+        return;
+    const sectionIds = new Set();
+    const itemIds = new Set();
+    for (const section of sections) {
+        if (sectionIds.has(section.id)) {
+            console.warn(`${VIREO_PREFERENCE_PANEL_NAME}: duplicate section id "${section.id}".`);
+        }
+        sectionIds.add(section.id);
+        for (const item of section.items) {
+            if (itemIds.has(item.id)) {
+                console.warn(`${VIREO_PREFERENCE_PANEL_NAME}: duplicate item id "${item.id}".`);
+            }
+            itemIds.add(item.id);
+        }
+    }
+}
+/** Renders searchable, container-responsive groups of application preference controls. */
+export const VireoPreferencePanel = React.forwardRef(function VireoPreferencePanel(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_PREFERENCE_PANEL_NAME });
+    const { className, classes: classesProp, controlWidth = 352, defaultExpandedSectionIds = [], emptyState, expandedSectionIds, onExpandedSectionIdsChange, searchQuery = "", sections, slotProps = {}, slots = {}, stickySectionHeaders = true, style, sx, ...other } = props;
+    const layout = useVireoPageLayout();
+    const generatedId = React.useId();
+    const [uncontrolledExpandedSectionIds, setUncontrolledExpandedSectionIds] = React.useState(() => orderKnownSectionIds(defaultExpandedSectionIds, sections));
+    const normalizedSearchQuery = normalizeSearchValue(searchQuery);
+    const visibleSections = React.useMemo(() => getVisibleSections(sections, normalizedSearchQuery), [normalizedSearchQuery, sections]);
+    const manualExpandedSectionIds = orderKnownSectionIds(expandedSectionIds ?? uncontrolledExpandedSectionIds, sections);
+    const renderedExpandedSectionIds = normalizedSearchQuery
+        ? visibleSections.map(section => section.id)
+        : manualExpandedSectionIds;
+    React.useEffect(() => {
+        warnAboutDuplicateIds(sections);
+    }, [sections]);
+    React.useEffect(() => {
+        if (expandedSectionIds === undefined) {
+            setUncontrolledExpandedSectionIds(currentIds => {
+                const nextIds = orderKnownSectionIds(currentIds, sections);
+                return nextIds.length === currentIds.length && nextIds.every((id, index) => id === currentIds[index])
+                    ? currentIds
+                    : nextIds;
+            });
+        }
+    }, [expandedSectionIds, sections]);
+    const ownerState = {
+        controlWidth,
+        hasVisibleItems: visibleSections.length > 0,
+        isCompact: layout.isCompact,
+        isFiltering: normalizedSearchQuery.length > 0,
+        stickySectionHeaders,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedSectionSlotProps = resolveSlotProps(slotProps.section, ownerState);
+    const resolvedSectionHeaderSlotProps = resolveSlotProps(slotProps.sectionHeader, ownerState);
+    const resolvedSectionSummarySlotProps = resolveSlotProps(slotProps.sectionSummary, ownerState);
+    const resolvedSectionActionSlotProps = resolveSlotProps(slotProps.sectionAction, ownerState);
+    const resolvedSectionDetailsSlotProps = resolveSlotProps(slotProps.sectionDetails, ownerState);
+    const resolvedItemSlotProps = resolveSlotProps(slotProps.item, ownerState);
+    const resolvedItemIconSlotProps = resolveSlotProps(slotProps.itemIcon, ownerState);
+    const resolvedItemContentSlotProps = resolveSlotProps(slotProps.itemContent, ownerState);
+    const resolvedItemTitleSlotProps = resolveSlotProps(slotProps.itemTitle, ownerState);
+    const resolvedItemDescriptionSlotProps = resolveSlotProps(slotProps.itemDescription, ownerState);
+    const resolvedItemControlSlotProps = resolveSlotProps(slotProps.itemControl, ownerState);
+    const resolvedEmptyStateSlotProps = resolveSlotProps(slotProps.emptyState, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const { className: sectionSlotClassName, onChange: sectionSlotOnChange, ...sectionSlotOther } = resolvedSectionSlotProps;
+    const { className: sectionHeaderSlotClassName, ...sectionHeaderSlotOther } = resolvedSectionHeaderSlotProps;
+    const { className: sectionSummarySlotClassName, ...sectionSummarySlotOther } = resolvedSectionSummarySlotProps;
+    const { className: sectionActionSlotClassName, ...sectionActionSlotOther } = resolvedSectionActionSlotProps;
+    const { className: sectionDetailsSlotClassName, ...sectionDetailsSlotOther } = resolvedSectionDetailsSlotProps;
+    const { className: itemSlotClassName, ...itemSlotOther } = resolvedItemSlotProps;
+    const { className: itemIconSlotClassName, ...itemIconSlotOther } = resolvedItemIconSlotProps;
+    const { className: itemContentSlotClassName, ...itemContentSlotOther } = resolvedItemContentSlotProps;
+    const { className: itemTitleSlotClassName, ...itemTitleSlotOther } = resolvedItemTitleSlotProps;
+    const { className: itemDescriptionSlotClassName, ...itemDescriptionSlotOther } = resolvedItemDescriptionSlotProps;
+    const { className: itemControlSlotClassName, ...itemControlSlotOther } = resolvedItemControlSlotProps;
+    const { className: emptyStateSlotClassName, ...emptyStateSlotOther } = resolvedEmptyStateSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const updateExpandedSection = React.useCallback((sectionId, expanded) => {
+        const nextIds = orderKnownSectionIds(expanded
+            ? [...manualExpandedSectionIds, sectionId]
+            : manualExpandedSectionIds.filter(candidateId => candidateId !== sectionId), sections);
+        if (expandedSectionIds === undefined)
+            setUncontrolledExpandedSectionIds(nextIds);
+        onExpandedSectionIdsChange?.(nextIds);
+    }, [expandedSectionIds, manualExpandedSectionIds, onExpandedSectionIdsChange, sections]);
+    const createSectionChangeHandler = React.useCallback((sectionId) => (event, expanded) => {
+        sectionSlotOnChange?.(event, expanded);
+        if (!event.defaultPrevented && !normalizedSearchQuery)
+            updateExpandedSection(sectionId, expanded);
+    }, [normalizedSearchQuery, sectionSlotOnChange, updateExpandedSection]);
+    return (_jsx(VireoPreferencePanelRoot, { variant: "outlined", ...other, ...rootSlotOther, as: slots.root, ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: visibleSections.length === 0 ? (_jsx(VireoPreferencePanelEmptyState, { ...emptyStateSlotOther, as: slots.emptyState, ownerState: ownerState, className: joinClassNames(classes.emptyState, emptyStateSlotClassName), children: emptyState })) : (visibleSections.map((section, sectionIndex) => {
+            const sectionSummaryId = `${generatedId}-section-${sectionIndex}-summary`;
+            const sectionDetailsId = `${generatedId}-section-${sectionIndex}-details`;
+            return (_createElement(VireoPreferencePanelSection, { disableGutters: true, ...sectionSlotOther, as: slots.section, key: section.id, ownerState: ownerState, expanded: renderedExpandedSectionIds.includes(section.id), onChange: createSectionChangeHandler(section.id), className: joinClassNames(classes.section, sectionSlotClassName), "data-section-id": section.id },
+                _jsxs(VireoPreferencePanelSectionHeader, { ...sectionHeaderSlotOther, as: slots.sectionHeader, ownerState: ownerState, className: joinClassNames(classes.sectionHeader, sectionHeaderSlotClassName), children: [_jsx(VireoPreferencePanelSectionSummary, { expandIcon: _jsx(ExpandMoreRounded, {}), ...sectionSummarySlotOther, as: slots.sectionSummary, ownerState: ownerState, id: sectionSummaryId, "aria-controls": sectionDetailsId, className: joinClassNames(classes.sectionSummary, sectionSummarySlotClassName), children: section.title }), section.action !== undefined && section.action !== null && (_jsx(VireoPreferencePanelSectionAction, { ...sectionActionSlotOther, as: slots.sectionAction, ownerState: ownerState, className: joinClassNames(classes.sectionAction, sectionActionSlotClassName), children: section.action }))] }),
+                _jsx(VireoPreferencePanelSectionDetails, { ...sectionDetailsSlotOther, as: slots.sectionDetails, ownerState: ownerState, id: sectionDetailsId, "aria-labelledby": sectionSummaryId, className: joinClassNames(classes.sectionDetails, sectionDetailsSlotClassName), children: section.items.map(item => (_createElement(VireoPreferencePanelItem, { ...itemSlotOther, as: slots.item, key: item.id, ownerState: ownerState, className: joinClassNames(classes.item, itemSlotClassName), "data-item-id": item.id },
+                        _jsx(VireoPreferencePanelItemIcon, { ...itemIconSlotOther, as: slots.itemIcon, ownerState: ownerState, "aria-hidden": "true", className: joinClassNames(classes.itemIcon, itemIconSlotClassName), children: item.icon }),
+                        _jsxs(VireoPreferencePanelItemContent, { ...itemContentSlotOther, as: slots.itemContent, ownerState: ownerState, className: joinClassNames(classes.itemContent, itemContentSlotClassName), children: [_jsx(VireoPreferencePanelItemTitle, { variant: "subtitle2", ...itemTitleSlotOther, as: slots.itemTitle, ownerState: ownerState, className: joinClassNames(classes.itemTitle, itemTitleSlotClassName), children: item.title }), item.description && (_jsx(VireoPreferencePanelItemDescription, { variant: "body2", ...itemDescriptionSlotOther, as: slots.itemDescription, ownerState: ownerState, className: joinClassNames(classes.itemDescription, itemDescriptionSlotClassName), children: item.description }))] }),
+                        _jsx(VireoPreferencePanelItemControl, { ...itemControlSlotOther, as: slots.itemControl, ownerState: ownerState, className: joinClassNames(classes.itemControl, itemControlSlotClassName), children: item.control })))) })));
+        })) }));
+});
+VireoPreferencePanel.displayName = VIREO_PREFERENCE_PANEL_NAME;

package/dist/capabilities/application-preferences/components/layout/VireoPreferencePanel/VireoPreferencePanel.styled.d.ts

@@ -0,0 +1,18 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type AccordionDetailsProps, type AccordionProps, type AccordionSummaryProps, type BoxProps, type CardProps, type TypographyProps } from "@mui/material";
+import { type VireoPreferencePanelOwnerState } from "./VireoPreferencePanel.types.js";
+type VireoPreferencePanelStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoPreferencePanelOwnerState>;
+export declare const VireoPreferencePanelRoot: VireoPreferencePanelStyledSlotComponent<CardProps>;
+export declare const VireoPreferencePanelSection: VireoPreferencePanelStyledSlotComponent<AccordionProps>;
+export declare const VireoPreferencePanelSectionHeader: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export declare const VireoPreferencePanelSectionSummary: VireoPreferencePanelStyledSlotComponent<AccordionSummaryProps>;
+export declare const VireoPreferencePanelSectionAction: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export declare const VireoPreferencePanelSectionDetails: VireoPreferencePanelStyledSlotComponent<AccordionDetailsProps>;
+export declare const VireoPreferencePanelItem: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export declare const VireoPreferencePanelItemIcon: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export declare const VireoPreferencePanelItemContent: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export declare const VireoPreferencePanelItemTitle: VireoPreferencePanelStyledSlotComponent<TypographyProps>;
+export declare const VireoPreferencePanelItemDescription: VireoPreferencePanelStyledSlotComponent<TypographyProps>;
+export declare const VireoPreferencePanelItemControl: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export declare const VireoPreferencePanelEmptyState: VireoPreferencePanelStyledSlotComponent<BoxProps>;
+export {};