@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.types.d.ts

@@ -0,0 +1,85 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { BoxProps, Theme } 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 VireoLabelBoxClasses, type VireoLabelBoxClassKey } from "./VireoLabelBox.classes.js";
+import type { VIREO_LABEL_BOX_NAME, VireoLabelBoxSlotName } from "./VireoLabelBox.identity.js";
+/** Supported layout directions for the label anatomy and its content. */
+export type VireoLabelBoxDirection = "column" | "row";
+/** A fixed label color or a theme-aware color resolver. */
+export type VireoLabelBoxColor = string | ((theme: Theme) => string);
+export type VireoLabelBoxOwnerState = {
+    direction: VireoLabelBoxDirection;
+    color: VireoLabelBoxColor;
+    fontWeight: NonNullable<React.CSSProperties["fontWeight"]>;
+    required: boolean;
+    hasLabel: boolean;
+    hasHelperText: boolean;
+    hasHeader: boolean;
+};
+export interface VireoLabelBoxRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabelBoxHeaderSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabelBoxLabelSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabelBoxRequiredIndicatorSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabelBoxHelperTextSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoLabelBoxContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoLabelBox}. */
+export type VireoLabelBoxSlots = {
+    [TSlotName in VireoLabelBoxSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoLabelBox}. */
+export type VireoLabelBoxSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoLabelBoxSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoLabelBoxRootSlotPropsOverrides, VireoLabelBoxOwnerState>;
+    /** @default 'div' */
+    header: SlotProps<"div", VireoLabelBoxHeaderSlotPropsOverrides, VireoLabelBoxOwnerState>;
+    /** @default 'span' */
+    label: SlotProps<"span", VireoLabelBoxLabelSlotPropsOverrides, VireoLabelBoxOwnerState>;
+    /** @default 'span' */
+    requiredIndicator: SlotProps<"span", VireoLabelBoxRequiredIndicatorSlotPropsOverrides, VireoLabelBoxOwnerState>;
+    /** @default 'span' */
+    helperText: SlotProps<"span", VireoLabelBoxHelperTextSlotPropsOverrides, VireoLabelBoxOwnerState>;
+    /** @default 'div' */
+    content: SlotProps<"div", VireoLabelBoxContentSlotPropsOverrides, VireoLabelBoxOwnerState>;
+}>;
+/** Props owned by {@link VireoLabelBox}. */
+export type VireoLabelBoxOwnProps = VireoLabelBoxSlotsAndSlotProps & {
+    /** Content laid out beneath or beside the label anatomy. */
+    children: React.ReactNode;
+    /** Optional visible label content. */
+    label?: React.ReactNode;
+    /** Optional supporting content aligned opposite the label. */
+    helperText?: React.ReactNode;
+    /** Color applied to the visible label and required indicator. @default theme.palette.text.primary */
+    color?: VireoLabelBoxColor;
+    /** Shows a visual required indicator after the label. @default false */
+    required?: boolean;
+    /** Font weight applied to the label header. @default 600 */
+    fontWeight?: React.CSSProperties["fontWeight"];
+    /** Lays out the label anatomy above or beside its content. @default 'column' */
+    direction?: VireoLabelBoxDirection;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoLabelBoxClasses>;
+};
+/** Props VireoLabelBox inherits from its default root after excluding component-owned props. */
+export type VireoLabelBoxInheritedProps = Omit<BoxProps<"div">, "children" | "color" | "component" | "direction" | "required">;
+/** Props accepted by {@link VireoLabelBox}. */
+export type VireoLabelBoxProps = VireoLabelBoxOwnProps & VireoLabelBoxInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_LABEL_BOX_NAME]?: VireoThemeComponent<VireoLabelBoxProps, VireoLabelBoxClassKey, VireoLabelBoxOwnerState, Theme>;
+    }
+}

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.types.js

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

package/dist/core/components/data-display/VireoLabelBox/index.d.ts

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

package/dist/core/components/data-display/VireoLabelBox/index.js

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { type VireoStopwatchProps } from "./VireoStopwatch.types.js";
+/**
+ * Displays a live or stopped duration measured from a supplied timestamp.
+ * Long durations use fixed 365-day years and 30-day months.
+ */
+export declare const VireoStopwatch: React.ForwardRefExoticComponent<Omit<VireoStopwatchProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.identity.d.ts

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

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.identity.js

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

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } 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 { getVireoStopwatchUtilityClass } from "./VireoStopwatch.classes.js";
+import { VIREO_STOPWATCH_NAME } from "./VireoStopwatch.identity.js";
+import { VireoStopwatchRoot } from "./VireoStopwatch.styled.js";
+const SECOND_MS = 1_000;
+const MINUTE_SECONDS = 60;
+const HOUR_SECONDS = 60 * MINUTE_SECONDS;
+const DAY_SECONDS = 24 * HOUR_SECONDS;
+const WEEK_SECONDS = 7 * DAY_SECONDS;
+const MONTH_SECONDS = 30 * DAY_SECONDS;
+const YEAR_SECONDS = 365 * DAY_SECONDS;
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+    }, getVireoStopwatchUtilityClass, classes);
+}
+function resolveTimestamp(value) {
+    const timestamp = value instanceof Date ? value.getTime() : value;
+    return Number.isFinite(timestamp) ? timestamp : null;
+}
+function getDurationParts(startTimestamp, endTimestamp) {
+    if (startTimestamp === null || endTimestamp === null || endTimestamp < startTimestamp) {
+        return { years: 0, months: 0, weeks: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
+    }
+    let remainingSeconds = Math.floor((endTimestamp - startTimestamp) / SECOND_MS);
+    const years = Math.floor(remainingSeconds / YEAR_SECONDS);
+    remainingSeconds %= YEAR_SECONDS;
+    const months = Math.floor(remainingSeconds / MONTH_SECONDS);
+    remainingSeconds %= MONTH_SECONDS;
+    const weeks = Math.floor(remainingSeconds / WEEK_SECONDS);
+    remainingSeconds %= WEEK_SECONDS;
+    const days = Math.floor(remainingSeconds / DAY_SECONDS);
+    remainingSeconds %= DAY_SECONDS;
+    const hours = Math.floor(remainingSeconds / HOUR_SECONDS);
+    remainingSeconds %= HOUR_SECONDS;
+    const minutes = Math.floor(remainingSeconds / MINUTE_SECONDS);
+    const seconds = remainingSeconds % MINUTE_SECONDS;
+    return { years, months, weeks, days, hours, minutes, seconds };
+}
+function formatDuration(parts) {
+    const leadingUnits = [
+        parts.years > 0 ? `${parts.years}y` : null,
+        parts.months > 0 ? `${parts.months}mo` : null,
+        parts.weeks > 0 ? `${parts.weeks}w` : null,
+        parts.days > 0 ? `${parts.days}d` : null,
+    ].filter((value) => value !== null);
+    const hasHoursSegment = leadingUnits.length > 0 || parts.hours > 0;
+    const clock = [
+        ...(hasHoursSegment ? [String(parts.hours).padStart(2, "0")] : []),
+        String(parts.minutes).padStart(2, "0"),
+        String(parts.seconds).padStart(2, "0"),
+    ].join(":");
+    return [...leadingUnits, clock].join(" ");
+}
+/**
+ * Displays a live or stopped duration measured from a supplied timestamp.
+ * Long durations use fixed 365-day years and 30-day months.
+ */
+export const VireoStopwatch = React.forwardRef(function VireoStopwatch(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_STOPWATCH_NAME });
+    const { className, classes: classesProp, endDate, label = "Elapsed time", slotProps = {}, slots = {}, startDate, style, sx, ...other } = props;
+    const [mountedAt] = React.useState(() => Date.now());
+    const [currentTimestamp, setCurrentTimestamp] = React.useState(() => Date.now());
+    const hasEndDate = endDate !== undefined && endDate !== null;
+    const startTimestamp = startDate === undefined || startDate === null ? mountedAt : resolveTimestamp(startDate);
+    const endTimestamp = hasEndDate ? resolveTimestamp(endDate) : null;
+    const valid = startTimestamp !== null && (!hasEndDate || endTimestamp !== null);
+    const running = valid && !hasEndDate;
+    React.useEffect(() => {
+        setCurrentTimestamp(Date.now());
+        if (!running) {
+            return undefined;
+        }
+        const intervalId = window.setInterval(() => setCurrentTimestamp(Date.now()), SECOND_MS);
+        return () => window.clearInterval(intervalId);
+    }, [running, startTimestamp]);
+    const ownerState = { running, valid };
+    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 duration = getDurationParts(startTimestamp, hasEndDate ? endTimestamp : currentTimestamp);
+    const formattedDuration = formatDuration(duration);
+    return (_jsx(VireoStopwatchRoot, { ...other, ...rootSlotOther, as: slots.root ?? "span", ref: rootRef, ownerState: ownerState, "aria-atomic": "true", "aria-label": `${label}: ${formattedDuration}`, role: "timer", className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: formattedDuration }));
+});
+VireoStopwatch.displayName = VIREO_STOPWATCH_NAME;

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoStopwatchOwnerState } from "./VireoStopwatch.types.js";
+type VireoStopwatchStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoStopwatchOwnerState>;
+export declare const VireoStopwatchRoot: VireoStopwatchStyledSlotComponent<BoxProps>;
+export {};

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.styled.js

@@ -0,0 +1,14 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_STOPWATCH_NAME } from "./VireoStopwatch.identity.js";
+export const VireoStopwatchRoot = styled(Box, {
+    name: VIREO_STOPWATCH_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({
+    display: "inline-block",
+    fontFamily: '"Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace',
+    fontSize: "1.5ch",
+    fontVariantNumeric: "tabular-nums",
+    whiteSpace: "nowrap",
+});

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.types.d.ts

@@ -0,0 +1,44 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { BoxProps } 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 VireoStopwatchClasses, type VireoStopwatchClassKey } from "./VireoStopwatch.classes.js";
+import type { VIREO_STOPWATCH_NAME, VireoStopwatchSlotName } from "./VireoStopwatch.identity.js";
+export type VireoStopwatchTimestamp = Date | number;
+export type VireoStopwatchOwnerState = {
+    running: boolean;
+    valid: boolean;
+};
+export interface VireoStopwatchRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoStopwatch}. */
+export type VireoStopwatchSlots = {
+    [TSlotName in VireoStopwatchSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoStopwatch}. */
+export type VireoStopwatchSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoStopwatchSlots, {
+    /** @default 'span' */
+    root: SlotProps<"span", VireoStopwatchRootSlotPropsOverrides, VireoStopwatchOwnerState>;
+}>;
+/** Props owned by {@link VireoStopwatch}. */
+export type VireoStopwatchOwnProps = VireoStopwatchSlotsAndSlotProps & {
+    /** Timestamp at which elapsed-time measurement stops. Omit or set to null for a live stopwatch. */
+    endDate?: VireoStopwatchTimestamp | null;
+    /** Accessible description announced together with the formatted duration. @default 'Elapsed time' */
+    label?: string;
+    /** Timestamp from which elapsed time is measured. Omit or set to null to start when the component mounts. */
+    startDate?: VireoStopwatchTimestamp | null;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoStopwatchClasses>;
+};
+/** Props VireoStopwatch inherits from its default root after excluding component-owned props. */
+export type VireoStopwatchInheritedProps = Omit<BoxProps<"span">, "aria-atomic" | "aria-label" | "children" | "component" | "role">;
+/** Props accepted by {@link VireoStopwatch}. */
+export type VireoStopwatchProps = VireoStopwatchOwnProps & VireoStopwatchInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_STOPWATCH_NAME]?: VireoThemeComponent<VireoStopwatchProps, VireoStopwatchClassKey, VireoStopwatchOwnerState, Theme>;
+    }
+}

package/dist/core/components/data-display/VireoStopwatch/VireoStopwatch.types.js

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

package/dist/core/components/data-display/VireoStopwatch/index.d.ts

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

package/dist/core/components/data-display/VireoStopwatch/index.js

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoTruncatedContentProps } from "./VireoTruncatedContent.types.js";
+/** Collapses overflowing React content and exposes an accessible control that lets users reveal or hide it. */
+export declare const VireoTruncatedContent: React.ForwardRefExoticComponent<Omit<VireoTruncatedContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.identity.d.ts

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

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.identity.js

@@ -0,0 +1,9 @@
+/** Stable component name shared by every VireoTruncatedContent integration point. */
+export const VIREO_TRUNCATED_CONTENT_NAME = "VireoTruncatedContent";
+/** Canonical public slots exposed by VireoTruncatedContent, in rendered DOM order. */
+export const VIREO_TRUNCATED_CONTENT_SLOTS = [
+    "root",
+    "viewport",
+    "content",
+    "toggle",
+];

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.js

@@ -0,0 +1,108 @@
+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 { unstable_batchedUpdates as batchUpdates } from "react-dom";
+import { getVireoTruncatedContentUtilityClass, } from "./VireoTruncatedContent.classes.js";
+import { VIREO_TRUNCATED_CONTENT_NAME } from "./VireoTruncatedContent.identity.js";
+import { VireoTruncatedContentContent, VireoTruncatedContentRoot, VireoTruncatedContentToggle, VireoTruncatedContentViewport, } from "./VireoTruncatedContent.styled.js";
+const overflowChecks = new Map();
+const pendingOverflowChecks = new Set();
+let sharedOverflowObserver = null;
+let overflowAnimationFrame = null;
+const useBrowserLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function observeContent(element, checkOverflow) {
+    overflowChecks.set(element, checkOverflow);
+    if (!sharedOverflowObserver) {
+        sharedOverflowObserver = new ResizeObserver(entries => {
+            for (const entry of entries)
+                pendingOverflowChecks.add(entry.target);
+            if (overflowAnimationFrame !== null)
+                return;
+            overflowAnimationFrame = window.requestAnimationFrame(() => {
+                overflowAnimationFrame = null;
+                const elements = [...pendingOverflowChecks];
+                pendingOverflowChecks.clear();
+                batchUpdates(() => {
+                    for (const observedElement of elements)
+                        overflowChecks.get(observedElement)?.();
+                });
+            });
+        });
+    }
+    sharedOverflowObserver.observe(element);
+    return () => {
+        sharedOverflowObserver?.unobserve(element);
+        overflowChecks.delete(element);
+        pendingOverflowChecks.delete(element);
+        if (overflowChecks.size !== 0)
+            return;
+        sharedOverflowObserver?.disconnect();
+        sharedOverflowObserver = null;
+        if (overflowAnimationFrame !== null)
+            window.cancelAnimationFrame(overflowAnimationFrame);
+        overflowAnimationFrame = null;
+        pendingOverflowChecks.clear();
+    };
+}
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        viewport: ["viewport"],
+        content: ["content"],
+        toggle: ["toggle"],
+    }, getVireoTruncatedContentUtilityClass, classes);
+}
+/** Collapses overflowing React content and exposes an accessible control that lets users reveal or hide it. */
+export const VireoTruncatedContent = React.forwardRef(function VireoTruncatedContent(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_TRUNCATED_CONTENT_NAME });
+    const { children, className, classes: classesProp, collapseLabel, collapsedHeight = 40, defaultExpanded = false, expandLabel, expanded: expandedProp, onExpandedChange, slotProps = {}, slots = {}, stopPropagation = false, style, sx, ...other } = props;
+    const contentId = React.useId();
+    const contentRef = React.useRef(null);
+    const [canExpand, setCanExpand] = React.useState(false);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded);
+    const expanded = expandedProp ?? uncontrolledExpanded;
+    const ownerState = { collapsedHeight, expanded, canExpand };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedViewportSlotProps = resolveSlotProps(slotProps.viewport, ownerState);
+    const resolvedContentSlotProps = resolveSlotProps(slotProps.content, ownerState);
+    const resolvedToggleSlotProps = resolveSlotProps(slotProps.toggle, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const { className: viewportSlotClassName, ...viewportSlotOther } = resolvedViewportSlotProps;
+    const { className: contentSlotClassName, ref: contentSlotRef, ...contentSlotOther } = resolvedContentSlotProps;
+    const resolvedContentRef = useForkRef(contentRef, contentSlotRef);
+    const { className: toggleSlotClassName, onClick: toggleSlotOnClick, ...toggleSlotOther } = resolvedToggleSlotProps;
+    const checkOverflow = React.useCallback(() => {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        const verticallyOverflows = content.scrollHeight > collapsedHeight + 1;
+        const nextCanExpand = verticallyOverflows || content.scrollWidth > content.clientWidth + 1;
+        setCanExpand(current => (current === nextCanExpand ? current : nextCanExpand));
+        if (!nextCanExpand && expandedProp === undefined)
+            setUncontrolledExpanded(false);
+    }, [collapsedHeight, expandedProp]);
+    useBrowserLayoutEffect(() => checkOverflow(), [children, checkOverflow]);
+    useBrowserLayoutEffect(() => {
+        const content = contentRef.current;
+        if (content)
+            return observeContent(content, checkOverflow);
+    }, [checkOverflow]);
+    const handleToggleClick = React.useCallback(event => {
+        toggleSlotOnClick?.(event);
+        if (stopPropagation)
+            event.stopPropagation();
+        if (event.defaultPrevented)
+            return;
+        const nextExpanded = !expanded;
+        if (expandedProp === undefined)
+            setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    }, [expanded, expandedProp, onExpandedChange, stopPropagation, toggleSlotOnClick]);
+    return (_jsxs(VireoTruncatedContentRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: [_jsx(VireoTruncatedContentViewport, { ...viewportSlotOther, as: slots.viewport ?? "div", id: contentId, ownerState: ownerState, className: joinClassNames(classes.viewport, viewportSlotClassName), children: _jsx(VireoTruncatedContentContent, { ...contentSlotOther, as: slots.content ?? "div", ref: resolvedContentRef, ownerState: ownerState, className: joinClassNames(classes.content, contentSlotClassName), children: children }) }), canExpand ? (_jsx(VireoTruncatedContentToggle, { size: "small", variant: "text", ...toggleSlotOther, as: slots.toggle, ownerState: ownerState, className: joinClassNames(classes.toggle, toggleSlotClassName), "aria-controls": contentId, "aria-expanded": expanded, onClick: handleToggleClick, children: expanded ? collapseLabel : expandLabel })) : null] }));
+});
+VireoTruncatedContent.displayName = VIREO_TRUNCATED_CONTENT_NAME;

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.styled.d.ts

@@ -0,0 +1,9 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps, type ButtonProps } from "@mui/material";
+import { type VireoTruncatedContentOwnerState } from "./VireoTruncatedContent.types.js";
+type VireoTruncatedContentStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoTruncatedContentOwnerState>;
+export declare const VireoTruncatedContentRoot: VireoTruncatedContentStyledSlotComponent<BoxProps>;
+export declare const VireoTruncatedContentViewport: VireoTruncatedContentStyledSlotComponent<BoxProps>;
+export declare const VireoTruncatedContentContent: VireoTruncatedContentStyledSlotComponent<BoxProps>;
+export declare const VireoTruncatedContentToggle: VireoTruncatedContentStyledSlotComponent<ButtonProps>;
+export {};

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.styled.js

@@ -0,0 +1,42 @@
+import { Box, Button } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_TRUNCATED_CONTENT_NAME } from "./VireoTruncatedContent.identity.js";
+export const VireoTruncatedContentRoot = styled(Box, {
+    name: VIREO_TRUNCATED_CONTENT_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({ minWidth: 0, position: "relative" });
+export const VireoTruncatedContentViewport = styled(Box, {
+    name: VIREO_TRUNCATED_CONTENT_NAME,
+    slot: "Viewport",
+    overridesResolver: (_props, styles) => styles.viewport,
+})(({ ownerState }) => ({
+    maxHeight: ownerState.expanded ? "none" : ownerState.collapsedHeight,
+    minWidth: 0,
+    overflow: ownerState.expanded ? "visible" : "hidden",
+}));
+export const VireoTruncatedContentContent = styled(Box, {
+    name: VIREO_TRUNCATED_CONTENT_NAME,
+    slot: "Content",
+    overridesResolver: (_props, styles) => styles.content,
+})({ minWidth: 0 });
+export const VireoTruncatedContentToggle = styled(Button, {
+    name: VIREO_TRUNCATED_CONTENT_NAME,
+    slot: "Toggle",
+    overridesResolver: (_props, styles) => styles.toggle,
+})(({ ownerState }) => ({
+    minWidth: 0,
+    padding: 0,
+    fontSize: "0.75rem",
+    lineHeight: 1.5,
+    textTransform: "none",
+    ...(ownerState.expanded
+        ? { display: "flex", marginLeft: "auto", marginTop: 2 }
+        : {
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            paddingInline: 4,
+            backgroundColor: "var(--mui-palette-surface-base)",
+        }),
+}));

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.types.d.ts

@@ -0,0 +1,69 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { BoxProps, Button } 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 VireoTruncatedContentClasses, type VireoTruncatedContentClassKey } from "./VireoTruncatedContent.classes.js";
+import type { VIREO_TRUNCATED_CONTENT_NAME, VireoTruncatedContentSlotName } from "./VireoTruncatedContent.identity.js";
+export type VireoTruncatedContentOwnerState = {
+    collapsedHeight: number;
+    expanded: boolean;
+    canExpand: boolean;
+};
+export interface VireoTruncatedContentRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoTruncatedContentContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoTruncatedContentViewportSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoTruncatedContentToggleSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoTruncatedContent}. */
+export type VireoTruncatedContentSlots = {
+    [TSlotName in VireoTruncatedContentSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoTruncatedContent}. */
+export type VireoTruncatedContentSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoTruncatedContentSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoTruncatedContentRootSlotPropsOverrides, VireoTruncatedContentOwnerState>;
+    /** @default 'div' */
+    viewport: SlotProps<"div", VireoTruncatedContentViewportSlotPropsOverrides, VireoTruncatedContentOwnerState>;
+    /** @default 'div' */
+    content: SlotProps<"div", VireoTruncatedContentContentSlotPropsOverrides, VireoTruncatedContentOwnerState>;
+    /** @default Button */
+    toggle: SlotProps<typeof Button, VireoTruncatedContentToggleSlotPropsOverrides, VireoTruncatedContentOwnerState>;
+}>;
+/** Props owned by {@link VireoTruncatedContent}. */
+export type VireoTruncatedContentOwnProps = VireoTruncatedContentSlotsAndSlotProps & {
+    /** Content that is collapsed only when its rendered dimensions overflow the configured height or available width. */
+    children: React.ReactNode;
+    /** Maximum visible height while collapsed. @default 40 */
+    collapsedHeight?: number;
+    /** Accessible label rendered by the toggle while content is collapsed. */
+    expandLabel: React.ReactNode;
+    /** Accessible label rendered by the toggle while content is expanded. */
+    collapseLabel: React.ReactNode;
+    /** Initial expansion state when expansion is uncontrolled. @default false */
+    defaultExpanded?: boolean;
+    /** Controlled expansion state. */
+    expanded?: boolean;
+    /** Called when the user requests a change to the expansion state. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Stops toggle click propagation, useful inside clickable rows. @default false */
+    stopPropagation?: boolean;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoTruncatedContentClasses>;
+};
+/** Props VireoTruncatedContent inherits from its default root after excluding component-owned props. */
+export type VireoTruncatedContentInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoTruncatedContent}. */
+export type VireoTruncatedContentProps = VireoTruncatedContentOwnProps & VireoTruncatedContentInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_TRUNCATED_CONTENT_NAME]?: VireoThemeComponent<VireoTruncatedContentProps, VireoTruncatedContentClassKey, VireoTruncatedContentOwnerState, Theme>;
+    }
+}

package/dist/core/components/data-display/VireoTruncatedContent/VireoTruncatedContent.types.js

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

package/dist/core/components/data-display/VireoTruncatedContent/index.d.ts

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

package/dist/core/components/data-display/VireoTruncatedContent/index.js

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

package/dist/core/components/feedback/VireoLoadingRegion/VireoLoadingRegion.classes.d.ts

@@ -0,0 +1,10 @@
+import { type VireoLoadingRegionSlotName } from "./VireoLoadingRegion.identity.js";
+/** Utility classes available to VireoLoadingRegion. */
+export type VireoLoadingRegionStateClassKey = "loading" | "loadingVisible";
+export type VireoLoadingRegionClasses = Record<VireoLoadingRegionSlotName | VireoLoadingRegionStateClassKey, string>;
+/** Valid keys for VireoLoadingRegion utility classes and theme style overrides. */
+export type VireoLoadingRegionClassKey = keyof VireoLoadingRegionClasses;
+/** Returns the generated utility class name for a VireoLoadingRegion slot or state. */
+export declare function getVireoLoadingRegionUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoLoadingRegion class key. */
+export declare const vireoLoadingRegionClasses: VireoLoadingRegionClasses;