@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.js";
+import { VireoLoadingRegion } from "../../../../core/components/feedback/VireoLoadingRegion/index.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 { getVireoInitializationBoundaryUtilityClass, } from "./VireoInitializationBoundary.classes.js";
+import { VIREO_INITIALIZATION_BOUNDARY_NAME, } from "./VireoInitializationBoundary.identity.js";
+import { VireoInitializationBoundaryLoadingIndicator, VireoInitializationBoundaryRoot, } from "./VireoInitializationBoundary.styled.js";
+function reportCleanupError(error) {
+    console.error("VireoInitializationBoundary cleanup failed", error);
+}
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root", ownerState.status],
+        loadingIndicator: ["loadingIndicator"],
+    }, getVireoInitializationBoundaryUtilityClass, classes);
+}
+/** Gates a subtree until an abortable asynchronous initialization lifecycle is ready. */
+export const VireoInitializationBoundary = React.forwardRef(function VireoInitializationBoundary(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_INITIALIZATION_BOUNDARY_NAME });
+    const { children, className, classes: classesProp, announceLoading = true, fallback, initialize, loadingLabel = "Initializing", loadingRevealDelay, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const [lifecycle, setLifecycle] = React.useState({ initialize, status: "pending" });
+    const currentLifecycle = lifecycle.initialize === initialize ? lifecycle : { initialize, status: "pending" };
+    React.useEffect(() => {
+        let disposed = false;
+        let cleanup;
+        const controller = new AbortController();
+        setLifecycle({ initialize, status: "pending" });
+        queueMicrotask(() => {
+            if (disposed)
+                return;
+            void Promise.resolve(initialize({ signal: controller.signal })).then(result => {
+                if (typeof result === "function")
+                    cleanup = result;
+                if (disposed) {
+                    if (cleanup)
+                        void Promise.resolve(cleanup()).catch(reportCleanupError);
+                    return;
+                }
+                setLifecycle({ initialize, status: "ready" });
+            }, error => {
+                if (!disposed)
+                    setLifecycle({ initialize, status: "error", error });
+            });
+        });
+        return () => {
+            disposed = true;
+            controller.abort();
+            if (cleanup)
+                void Promise.resolve(cleanup()).catch(reportCleanupError);
+        };
+    }, [initialize]);
+    if (currentLifecycle.status === "error")
+        throw currentLifecycle.error;
+    const ownerState = { status: currentLifecycle.status };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedLoadingIndicatorSlotProps = resolveSlotProps(slotProps.loadingIndicator, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const { className: loadingIndicatorClassName, ...loadingIndicatorOther } = resolvedLoadingIndicatorSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const LoadingIndicator = slots.loadingIndicator ?? VireoInitializationBoundaryLoadingIndicator;
+    return (_jsx(VireoInitializationBoundaryRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), "data-vireo-initialization-state": ownerState.status, children: ownerState.status === "ready" ? (children) : (_jsx(VireoLoadingRegion, { announce: announceLoading, loading: true, loadingLabel: loadingLabel, revealDelay: loadingRevealDelay, children: ({ loadingVisible }) => {
+                if (!loadingVisible)
+                    return null;
+                if (fallback !== undefined)
+                    return fallback;
+                return (_jsx(LoadingIndicator, { ...loadingIndicatorOther, ownerState: ownerState, className: joinClassNames(classes.loadingIndicator, loadingIndicatorClassName), "aria-hidden": "true" }));
+            } })) }));
+});
+VireoInitializationBoundary.displayName = VIREO_INITIALIZATION_BOUNDARY_NAME;

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.styled.d.ts

@@ -0,0 +1,7 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps, type CircularProgressProps } from "@mui/material";
+import { type VireoInitializationBoundaryOwnerState } from "./VireoInitializationBoundary.types.js";
+type VireoInitializationBoundaryStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoInitializationBoundaryOwnerState>;
+export declare const VireoInitializationBoundaryRoot: VireoInitializationBoundaryStyledSlotComponent<BoxProps>;
+export declare const VireoInitializationBoundaryLoadingIndicator: VireoInitializationBoundaryStyledSlotComponent<CircularProgressProps>;
+export {};

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.styled.js

@@ -0,0 +1,13 @@
+import { Box, CircularProgress } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_INITIALIZATION_BOUNDARY_NAME } from "./VireoInitializationBoundary.identity.js";
+export const VireoInitializationBoundaryRoot = styled(Box, {
+    name: VIREO_INITIALIZATION_BOUNDARY_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({ display: "contents" });
+export const VireoInitializationBoundaryLoadingIndicator = styled(CircularProgress, {
+    name: VIREO_INITIALIZATION_BOUNDARY_NAME,
+    slot: "LoadingIndicator",
+    overridesResolver: (_props, styles) => styles.loadingIndicator,
+})({});

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.types.d.ts

@@ -0,0 +1,56 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../core/utils/muiutils.js";
+import type { BoxProps, CircularProgress } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoInitializationBoundaryClasses, type VireoInitializationBoundaryClassKey } from "./VireoInitializationBoundary.classes.js";
+import type { VIREO_INITIALIZATION_BOUNDARY_NAME, VireoInitializationBoundarySlotName } from "./VireoInitializationBoundary.identity.js";
+export type VireoInitializationBoundaryStatus = "pending" | "ready";
+export type VireoInitializationBoundaryOwnerState = {
+    status: VireoInitializationBoundaryStatus;
+};
+export type VireoInitializationContext = {
+    signal: AbortSignal;
+};
+export type VireoInitializationCleanup = () => void | Promise<void>;
+export type VireoInitializer = (context: VireoInitializationContext) => void | VireoInitializationCleanup | Promise<void | VireoInitializationCleanup>;
+export interface VireoInitializationBoundaryRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoInitializationBoundaryLoadingIndicatorSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoInitializationBoundary}. */
+export type VireoInitializationBoundarySlots = {
+    [TSlotName in VireoInitializationBoundarySlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoInitializationBoundary}. */
+export type VireoInitializationBoundarySlotsAndSlotProps = CreateSlotsAndSlotProps<VireoInitializationBoundarySlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoInitializationBoundaryRootSlotPropsOverrides, VireoInitializationBoundaryOwnerState>;
+    /** @default CircularProgress */
+    loadingIndicator: SlotProps<typeof CircularProgress, VireoInitializationBoundaryLoadingIndicatorSlotPropsOverrides, VireoInitializationBoundaryOwnerState>;
+}>;
+/** Props owned by {@link VireoInitializationBoundary}. */
+export type VireoInitializationBoundaryOwnProps = VireoInitializationBoundarySlotsAndSlotProps & {
+    children: React.ReactNode;
+    initialize: VireoInitializer;
+    /** Whether prolonged initialization is announced. Disable for a boundary covered by an announcing ancestor. @default true */
+    announceLoading?: boolean;
+    /** Content rendered after the shared reveal delay. When omitted, a decorative Level C progress indicator is used. */
+    fallback?: React.ReactNode;
+    /** Concise status announced after the reveal delay. @default 'Initializing' */
+    loadingLabel?: React.ReactNode;
+    /** Delay before fallback content and the loading announcement become visible. @default VIREO_LOADING_TOKENS.revealDelay */
+    loadingRevealDelay?: number;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoInitializationBoundaryClasses>;
+};
+/** Props VireoInitializationBoundary inherits from its default root after excluding component-owned props. */
+export type VireoInitializationBoundaryInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoInitializationBoundary}. */
+export type VireoInitializationBoundaryProps = VireoInitializationBoundaryOwnProps & VireoInitializationBoundaryInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_INITIALIZATION_BOUNDARY_NAME]?: VireoThemeComponent<VireoInitializationBoundaryProps, VireoInitializationBoundaryClassKey, VireoInitializationBoundaryOwnerState, Theme>;
+    }
+}

package/dist/core/components/behavior/VireoInitializationBoundary/VireoInitializationBoundary.types.js

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

package/dist/core/components/behavior/VireoInitializationBoundary/index.d.ts

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

package/dist/core/components/behavior/VireoInitializationBoundary/index.js

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

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.classes.d.ts

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

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.classes.js

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

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoActionPreviewButtonProps } from "./VireoActionPreviewButton.types.js";
+/** Renders an action together with a concise preview of the consequence it will commit. */
+export declare const VireoActionPreviewButton: React.ForwardRefExoticComponent<Omit<VireoActionPreviewButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.identity.d.ts

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

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.identity.js

@@ -0,0 +1,9 @@
+/** Stable component name shared by every VireoActionPreviewButton integration point. */
+export const VIREO_ACTION_PREVIEW_BUTTON_NAME = "VireoActionPreviewButton";
+/** Canonical public slots exposed by VireoActionPreviewButton, in rendered DOM order. */
+export const VIREO_ACTION_PREVIEW_BUTTON_SLOTS = [
+    "root",
+    "content",
+    "label",
+    "preview",
+];

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.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 { getVireoActionPreviewButtonUtilityClass, } from "./VireoActionPreviewButton.classes.js";
+import { VIREO_ACTION_PREVIEW_BUTTON_NAME, } from "./VireoActionPreviewButton.identity.js";
+import { VireoActionPreviewButtonContent, VireoActionPreviewButtonLabel, VireoActionPreviewButtonPreview, VireoActionPreviewButtonRoot, } from "./VireoActionPreviewButton.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        content: ["content"],
+        label: ["label"],
+        preview: ["preview"],
+    }, getVireoActionPreviewButtonUtilityClass, classes);
+}
+/** Renders an action together with a concise preview of the consequence it will commit. */
+export const VireoActionPreviewButton = React.forwardRef(function VireoActionPreviewButton(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_ACTION_PREVIEW_BUTTON_NAME });
+    const { align = "start", "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, className, classes: classesProp, disabled = false, label, preview, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const ownerState = { align, disabled };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, "aria-describedby": rootSlotAriaDescribedBy, "aria-label": rootSlotAriaLabel, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const previewId = React.useId();
+    const describedBy = [previewId, ariaDescribedBy, rootSlotAriaDescribedBy].filter(Boolean).join(" ");
+    const { className: contentClassName, ...contentOther } = resolveSlotProps(slotProps.content, ownerState);
+    const { className: labelClassName, ...labelOther } = resolveSlotProps(slotProps.label, ownerState);
+    const { className: previewClassName, ...previewOther } = resolveSlotProps(slotProps.preview, ownerState);
+    return (_jsx(VireoActionPreviewButtonRoot, { ...other, ...rootSlotOther, "aria-describedby": describedBy, "aria-label": rootSlotAriaLabel ?? ariaLabel ?? (typeof label === "string" ? label : undefined), as: slots.root, ref: rootRef, ownerState: ownerState, disabled: disabled, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: _jsxs(VireoActionPreviewButtonContent, { ...contentOther, as: slots.content ?? "span", ownerState: ownerState, className: joinClassNames(classes.content, contentClassName), children: [_jsx(VireoActionPreviewButtonLabel, { ...labelOther, as: slots.label ?? "span", ownerState: ownerState, className: joinClassNames(classes.label, labelClassName), children: label }), _jsx(VireoActionPreviewButtonPreview, { ...previewOther, id: previewId, as: slots.preview ?? "span", ownerState: ownerState, className: joinClassNames(classes.preview, previewClassName), children: preview })] }) }));
+});
+VireoActionPreviewButton.displayName = VIREO_ACTION_PREVIEW_BUTTON_NAME;

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.styled.d.ts

@@ -0,0 +1,9 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps, type ButtonProps, type TypographyProps } from "@mui/material";
+import { type VireoActionPreviewButtonOwnerState } from "./VireoActionPreviewButton.types.js";
+type VireoActionPreviewButtonStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoActionPreviewButtonOwnerState>;
+export declare const VireoActionPreviewButtonRoot: VireoActionPreviewButtonStyledSlotComponent<ButtonProps>;
+export declare const VireoActionPreviewButtonContent: VireoActionPreviewButtonStyledSlotComponent<BoxProps>;
+export declare const VireoActionPreviewButtonLabel: VireoActionPreviewButtonStyledSlotComponent<TypographyProps>;
+export declare const VireoActionPreviewButtonPreview: VireoActionPreviewButtonStyledSlotComponent<TypographyProps>;
+export {};

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.styled.js

@@ -0,0 +1,46 @@
+import { Box, Button, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_ACTION_PREVIEW_BUTTON_NAME } from "./VireoActionPreviewButton.identity.js";
+export const VireoActionPreviewButtonRoot = styled(Button, {
+    name: VIREO_ACTION_PREVIEW_BUTTON_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ ownerState }) => ({
+    alignItems: "center",
+    justifyContent: ownerState.align === "center" ? "center" : "flex-start",
+    minHeight: 56,
+    paddingBlock: 7,
+    textAlign: ownerState.align === "center" ? "center" : "start",
+    textTransform: "none",
+}));
+export const VireoActionPreviewButtonContent = styled(Box, {
+    name: VIREO_ACTION_PREVIEW_BUTTON_NAME,
+    slot: "Content",
+    overridesResolver: (_props, styles) => styles.content,
+})(({ ownerState }) => ({
+    alignItems: ownerState.align === "center" ? "center" : "flex-start",
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0,
+}));
+export const VireoActionPreviewButtonLabel = styled(Typography, {
+    name: VIREO_ACTION_PREVIEW_BUTTON_NAME,
+    slot: "Label",
+    overridesResolver: (_props, styles) => styles.label,
+})({
+    color: "inherit",
+    fontSize: "0.875rem",
+    fontWeight: 750,
+    lineHeight: 1.25,
+});
+export const VireoActionPreviewButtonPreview = styled(Typography, {
+    name: VIREO_ACTION_PREVIEW_BUTTON_NAME,
+    slot: "Preview",
+    overridesResolver: (_props, styles) => styles.preview,
+})({
+    color: "inherit",
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    lineHeight: 1.3,
+    opacity: 0.72,
+});

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.types.d.ts

@@ -0,0 +1,58 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../core/utils/muiutils.js";
+import type { Box, Button, ButtonProps, Typography } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoActionPreviewButtonClasses, type VireoActionPreviewButtonClassKey } from "./VireoActionPreviewButton.classes.js";
+import type { VIREO_ACTION_PREVIEW_BUTTON_NAME, VireoActionPreviewButtonSlotName } from "./VireoActionPreviewButton.identity.js";
+export type VireoActionPreviewButtonAlignment = "center" | "start";
+export type VireoActionPreviewButtonOwnerState = {
+    align: VireoActionPreviewButtonAlignment;
+    disabled: boolean;
+};
+export interface VireoActionPreviewButtonRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoActionPreviewButtonContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoActionPreviewButtonLabelSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoActionPreviewButtonPreviewSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoActionPreviewButton}. */
+export type VireoActionPreviewButtonSlots = {
+    [TSlotName in VireoActionPreviewButtonSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoActionPreviewButton}. */
+export type VireoActionPreviewButtonSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoActionPreviewButtonSlots, {
+    /** @default Button */
+    root: SlotProps<typeof Button, VireoActionPreviewButtonRootSlotPropsOverrides, VireoActionPreviewButtonOwnerState>;
+    /** @default 'span' */
+    content: SlotProps<typeof Box, VireoActionPreviewButtonContentSlotPropsOverrides, VireoActionPreviewButtonOwnerState>;
+    /** @default Typography */
+    label: SlotProps<typeof Typography, VireoActionPreviewButtonLabelSlotPropsOverrides, VireoActionPreviewButtonOwnerState>;
+    /** @default Typography */
+    preview: SlotProps<typeof Typography, VireoActionPreviewButtonPreviewSlotPropsOverrides, VireoActionPreviewButtonOwnerState>;
+}>;
+/** Props owned by {@link VireoActionPreviewButton}. */
+export type VireoActionPreviewButtonOwnProps = VireoActionPreviewButtonSlotsAndSlotProps & {
+    /** Horizontal alignment for the action label and its consequence preview. @default 'start' */
+    align?: VireoActionPreviewButtonAlignment;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoActionPreviewButtonClasses>;
+    /** Primary action label. */
+    label: React.ReactNode;
+    /** Short statement describing the result or scope of the action before it is committed. */
+    preview: React.ReactNode;
+};
+/** Props VireoActionPreviewButton inherits from its default root after excluding component-owned props. */
+export type VireoActionPreviewButtonInheritedProps = Omit<ButtonProps, "children" | "component">;
+/** Props accepted by {@link VireoActionPreviewButton}. */
+export type VireoActionPreviewButtonProps = VireoActionPreviewButtonOwnProps & VireoActionPreviewButtonInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_ACTION_PREVIEW_BUTTON_NAME]?: VireoThemeComponent<VireoActionPreviewButtonProps, VireoActionPreviewButtonClassKey, VireoActionPreviewButtonOwnerState, Theme>;
+    }
+}

package/dist/core/components/controls/VireoActionPreviewButton/VireoActionPreviewButton.types.js

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

package/dist/core/components/controls/VireoActionPreviewButton/index.d.ts

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

package/dist/core/components/controls/VireoActionPreviewButton/index.js

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

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.classes.d.ts

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

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.classes.js

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

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoLabeledIconButtonProps } from "./VireoLabeledIconButton.types.js";
+/** Renders a compact icon-over-label action with optional selected and status states. */
+export declare const VireoLabeledIconButton: React.ForwardRefExoticComponent<Omit<VireoLabeledIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.identity.d.ts

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

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.identity.js

@@ -0,0 +1,9 @@
+/** Stable component name shared by every VireoLabeledIconButton integration point. */
+export const VIREO_LABELED_ICON_BUTTON_NAME = "VireoLabeledIconButton";
+/** Canonical public slots exposed by VireoLabeledIconButton, in rendered DOM order. */
+export const VIREO_LABELED_ICON_BUTTON_SLOTS = [
+    "root",
+    "visual",
+    "statusDot",
+    "label",
+];

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VireoIcon } from "../../../../core/components/data-display/VireoIcon/index.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.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 { getVireoLabeledIconButtonUtilityClass, } from "./VireoLabeledIconButton.classes.js";
+import { VIREO_LABELED_ICON_BUTTON_NAME } from "./VireoLabeledIconButton.identity.js";
+import { VireoLabeledIconButtonLabel, VireoLabeledIconButtonRoot, VireoLabeledIconButtonStatusDot, VireoLabeledIconButtonVisual, } from "./VireoLabeledIconButton.styled.js";
+function useUtilityClasses(_state, classes) {
+    return composeClasses({
+        root: ["root"],
+        visual: ["visual"],
+        statusDot: ["statusDot"],
+        label: ["label"],
+    }, getVireoLabeledIconButtonUtilityClass, classes);
+}
+/** Renders a compact icon-over-label action with optional selected and status states. */
+export const VireoLabeledIconButton = React.forwardRef(function VireoLabeledIconButton(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_LABELED_ICON_BUTTON_NAME });
+    const { className, classes: classesProp, disabled = false, icon, label, selected = false, showStatusDot = false, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const state = { disabled, selected, showStatusDot, hasIcon: icon != null };
+    const classes = useUtilityClasses(state, classesProp);
+    const root = resolveSlotProps(slotProps.root, state);
+    const visual = resolveSlotProps(slotProps.visual, state);
+    const dot = resolveSlotProps(slotProps.statusDot, state);
+    const labelProps = resolveSlotProps(slotProps.label, state);
+    const { className: rc, ref: rr, style: rs, sx: rx, ...ro } = root;
+    const { className: vc, ...vo } = visual;
+    const { className: dc, ...dO } = dot;
+    const { className: lc, ...lo } = labelProps;
+    const ref = useForkRef(forwardedRef, rr);
+    return (_jsxs(VireoLabeledIconButtonRoot, { ...other, ...ro, as: slots.root, ref: ref, ownerState: state, disabled: disabled, "aria-pressed": selected, className: joinClassNames(classes.root, className, rc), style: { ...style, ...rs }, sx: mergeSx(sx, rx), children: [(state.hasIcon || showStatusDot) && (_jsx(VireoLabeledIconButtonVisual, { ...vo, as: slots.visual ?? "span", ownerState: state, className: joinClassNames(classes.visual, vc), children: showStatusDot ? (_jsx(VireoLabeledIconButtonStatusDot, { ...dO, as: slots.statusDot ?? "span", ownerState: state, className: joinClassNames(classes.statusDot, dc), "aria-hidden": true })) : typeof icon === "string" ? (_jsx(VireoIcon, { icon: icon, "aria-hidden": true })) : (icon) })), _jsx(VireoLabeledIconButtonLabel, { ...lo, as: slots.label, ownerState: state, className: joinClassNames(classes.label, lc), children: label })] }));
+});
+VireoLabeledIconButton.displayName = VIREO_LABELED_ICON_BUTTON_NAME;

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.styled.d.ts

@@ -0,0 +1,9 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps, type ButtonProps, type TypographyProps } from "@mui/material";
+import { type VireoLabeledIconButtonOwnerState } from "./VireoLabeledIconButton.types.js";
+type Slot<T extends object> = StyledSlotComponent<T, VireoLabeledIconButtonOwnerState>;
+export declare const VireoLabeledIconButtonRoot: Slot<ButtonProps>;
+export declare const VireoLabeledIconButtonVisual: Slot<BoxProps>;
+export declare const VireoLabeledIconButtonStatusDot: Slot<BoxProps>;
+export declare const VireoLabeledIconButtonLabel: Slot<TypographyProps>;
+export {};

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.styled.js

@@ -0,0 +1,46 @@
+import { Box, Button, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_LABELED_ICON_BUTTON_NAME } from "./VireoLabeledIconButton.identity.js";
+export const VireoLabeledIconButtonRoot = styled(Button, {
+    name: VIREO_LABELED_ICON_BUTTON_NAME,
+    slot: "Root",
+    overridesResolver: (_p, s) => s.root,
+})({ flexDirection: "column", borderRadius: 8, gap: 4, minWidth: 88, maxWidth: 88, textTransform: "none" });
+export const VireoLabeledIconButtonVisual = styled(Box, {
+    name: VIREO_LABELED_ICON_BUTTON_NAME,
+    slot: "Visual",
+    overridesResolver: (_p, s) => s.visual,
+})({
+    borderRadius: "50%",
+    padding: 8,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+export const VireoLabeledIconButtonStatusDot = styled(Box, {
+    name: VIREO_LABELED_ICON_BUTTON_NAME,
+    slot: "StatusDot",
+    overridesResolver: (_p, s) => s.statusDot,
+})(({ theme }) => ({
+    width: 16,
+    height: 16,
+    borderRadius: "50%",
+    backgroundColor: theme.palette.success.main,
+}));
+export const VireoLabeledIconButtonLabel = styled(Typography, {
+    name: VIREO_LABELED_ICON_BUTTON_NAME,
+    slot: "Label",
+    overridesResolver: (_p, s) => s.label,
+})(({ ownerState, theme }) => ({
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    lineHeight: "1.25rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "100%",
+    color: ownerState.disabled
+        ? theme.palette.text.disabled
+        : ownerState.selected
+            ? theme.palette.text.primary
+            : theme.palette.text.secondary,
+}));

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.types.d.ts

@@ -0,0 +1,51 @@
+import type { VireoIconName } from "../../../../core/providers/VireoIconRegistryProvider/VireoIconRegistryProvider.js";
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { Box, Button, ButtonProps, Typography } from "@mui/material";
+import type { VireoThemeComponent } from "../../../../core/utils/muiutils.js";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoLabeledIconButtonClasses, type VireoLabeledIconButtonClassKey } from "./VireoLabeledIconButton.classes.js";
+import type { VIREO_LABELED_ICON_BUTTON_NAME, VireoLabeledIconButtonSlotName } from "./VireoLabeledIconButton.identity.js";
+export type VireoLabeledIconButtonOwnerState = {
+    disabled: boolean;
+    selected: boolean;
+    showStatusDot: boolean;
+    hasIcon: boolean;
+};
+export interface VireoLabeledIconButtonRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabeledIconButtonVisualSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabeledIconButtonStatusDotSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabeledIconButtonLabelSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoLabeledIconButtonSlots = {
+    [TSlotName in VireoLabeledIconButtonSlotName]: React.ElementType;
+};
+export type VireoLabeledIconButtonSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoLabeledIconButtonSlots, {
+    /** @default Button */ root: SlotProps<typeof Button, VireoLabeledIconButtonRootSlotPropsOverrides, VireoLabeledIconButtonOwnerState>;
+    /** @default 'span' */ visual: SlotProps<typeof Box, VireoLabeledIconButtonVisualSlotPropsOverrides, VireoLabeledIconButtonOwnerState>;
+    /** @default 'span' */ statusDot: SlotProps<typeof Box, VireoLabeledIconButtonStatusDotSlotPropsOverrides, VireoLabeledIconButtonOwnerState>;
+    /** @default Typography */ label: SlotProps<typeof Typography, VireoLabeledIconButtonLabelSlotPropsOverrides, VireoLabeledIconButtonOwnerState>;
+}>;
+export type VireoLabeledIconButtonOwnProps = VireoLabeledIconButtonSlotsAndSlotProps & {
+    label: React.ReactNode;
+    icon?: VireoIconName | React.ReactElement;
+    selected?: boolean;
+    showStatusDot?: boolean;
+    classes?: Partial<VireoLabeledIconButtonClasses>;
+};
+/** Props VireoLabeledIconButton inherits from its default root after excluding component-owned props. */
+export type VireoLabeledIconButtonInheritedProps = Omit<ButtonProps, "children" | "component" | "selected">;
+/** Props accepted by {@link VireoLabeledIconButton}. */
+export type VireoLabeledIconButtonProps = VireoLabeledIconButtonOwnProps & VireoLabeledIconButtonInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_LABELED_ICON_BUTTON_NAME]?: VireoThemeComponent<VireoLabeledIconButtonProps, VireoLabeledIconButtonClassKey, VireoLabeledIconButtonOwnerState, Theme>;
+    }
+}

package/dist/core/components/controls/VireoLabeledIconButton/VireoLabeledIconButton.types.js

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

package/dist/core/components/controls/VireoLabeledIconButton/index.d.ts

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

package/dist/core/components/controls/VireoLabeledIconButton/index.js

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

package/dist/core/components/data-display/VireoIcon/VireoIcon.classes.d.ts

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

package/dist/core/components/data-display/VireoIcon/VireoIcon.classes.js

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

package/dist/core/components/data-display/VireoIcon/VireoIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoIconProps } from "./VireoIcon.types.js";
+/** Renders a type-safe icon from the nearest Vireo icon registry. */
+export declare const VireoIcon: React.ForwardRefExoticComponent<Omit<VireoIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;