@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/core/components/layout/VireoSlidingScreenStack/VireoSlidingScreenStack.styled.js

@@ -0,0 +1,39 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_SLIDING_SCREEN_STACK_NAME } from "./VireoSlidingScreenStack.identity.js";
+export const VireoSlidingScreenStackRoot = styled(Box, {
+    name: VIREO_SLIDING_SCREEN_STACK_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({ display: "flex", flex: 1, maxWidth: "100%", minHeight: 0, minWidth: 0, overflow: "hidden", width: "100%" });
+export const VireoSlidingScreenStackTrack = styled(Box, {
+    name: VIREO_SLIDING_SCREEN_STACK_NAME,
+    slot: "Track",
+    overridesResolver: (_props, styles) => styles.track,
+})({
+    display: "grid",
+    flex: "1 1 auto",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    width: "100%",
+    maxWidth: "100%",
+    height: "100%",
+    minHeight: 0,
+    minWidth: 0,
+});
+export const VireoSlidingScreenStackScreen = styled(Box, {
+    name: VIREO_SLIDING_SCREEN_STACK_NAME,
+    slot: "Screen",
+    overridesResolver: (_props, styles) => styles.screen,
+})(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gridArea: "1 / 1",
+    width: "100%",
+    maxWidth: "100%",
+    minWidth: 0,
+    minHeight: 0,
+    transition: theme.transitions.create("transform", {
+        duration: theme.transitions.duration.standard,
+        easing: theme.transitions.easing.easeInOut,
+    }),
+}));

package/dist/core/components/layout/VireoSlidingScreenStack/VireoSlidingScreenStack.types.d.ts

@@ -0,0 +1,49 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { Box, 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 VireoSlidingScreenStackClasses, type VireoSlidingScreenStackClassKey } from "./VireoSlidingScreenStack.classes.js";
+import type { VIREO_SLIDING_SCREEN_STACK_NAME, VireoSlidingScreenStackSlotName } from "./VireoSlidingScreenStack.identity.js";
+/** One stable, keyed screen rendered by VireoSlidingScreenStack. */
+export type VireoSlidingScreenStackScreen = {
+    id: string;
+    children: React.ReactNode;
+};
+export type VireoSlidingScreenStackOwnerState = {
+    activeScreenIndex: number;
+    screenCount: number;
+};
+export interface VireoSlidingScreenStackRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoSlidingScreenStackTrackSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoSlidingScreenStackScreenSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoSlidingScreenStackSlots = {
+    [T in VireoSlidingScreenStackSlotName]: React.ElementType;
+};
+export type VireoSlidingScreenStackSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoSlidingScreenStackSlots, {
+    /** @default 'div' */ root: SlotProps<typeof Box, VireoSlidingScreenStackRootSlotPropsOverrides, VireoSlidingScreenStackOwnerState>;
+    /** @default 'div' */ track: SlotProps<typeof Box, VireoSlidingScreenStackTrackSlotPropsOverrides, VireoSlidingScreenStackOwnerState>;
+    /** @default 'div' */ screen: SlotProps<typeof Box, VireoSlidingScreenStackScreenSlotPropsOverrides, VireoSlidingScreenStackOwnerState>;
+}>;
+export type VireoSlidingScreenStackOwnProps = VireoSlidingScreenStackSlotsAndSlotProps & {
+    /** Screen id currently positioned in the viewport. Unknown ids fall back to the first screen. */
+    activeScreen: string;
+    /** Ordered screens retained in the DOM while the track moves between them. */
+    screens: readonly VireoSlidingScreenStackScreen[];
+    classes?: Partial<VireoSlidingScreenStackClasses>;
+};
+/** Props VireoSlidingScreenStack inherits from its default root after excluding component-owned props. */
+export type VireoSlidingScreenStackInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoSlidingScreenStack}. */
+export type VireoSlidingScreenStackProps = VireoSlidingScreenStackOwnProps & VireoSlidingScreenStackInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_SLIDING_SCREEN_STACK_NAME]?: VireoThemeComponent<VireoSlidingScreenStackProps, VireoSlidingScreenStackClassKey, VireoSlidingScreenStackOwnerState, Theme>;
+    }
+}

package/dist/core/components/layout/VireoSlidingScreenStack/VireoSlidingScreenStack.types.js

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

package/dist/core/components/layout/VireoSlidingScreenStack/index.d.ts

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

package/dist/core/components/layout/VireoSlidingScreenStack/index.js

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

package/dist/core/components/navigation/VireoTabs/VireoTabs.classes.d.ts

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

package/dist/core/components/navigation/VireoTabs/VireoTabs.classes.js

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

package/dist/core/components/navigation/VireoTabs/VireoTabs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoTabsProps } from "./VireoTabs.types.js";
+/** Renders accessible controlled or uncontrolled tab navigation with its associated panels. */
+export declare const VireoTabs: React.ForwardRefExoticComponent<Omit<VireoTabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/core/components/navigation/VireoTabs/VireoTabs.identity.d.ts

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

package/dist/core/components/navigation/VireoTabs/VireoTabs.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoTabs integration point. */
+export const VIREO_TABS_NAME = "VireoTabs";
+/** Canonical public slots exposed by VireoTabs, in rendered DOM order. */
+export const VIREO_TABS_SLOTS = ["root", "tabs", "tab", "panel"];

package/dist/core/components/navigation/VireoTabs/VireoTabs.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useControlled, useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoTabsUtilityClass } from "./VireoTabs.classes.js";
+import { VIREO_TABS_NAME } from "./VireoTabs.identity.js";
+import { VireoTabsList, VireoTabsPanel, VireoTabsRoot, VireoTabsTab } from "./VireoTabs.styled.js";
+function useUtilityClasses(classes) {
+    return composeClasses({ root: ["root"], tabs: ["tabs"], tab: ["tab"], panel: ["panel"] }, getVireoTabsUtilityClass, classes);
+}
+/** Renders accessible controlled or uncontrolled tab navigation with its associated panels. */
+export const VireoTabs = React.forwardRef(function VireoTabs(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_TABS_NAME });
+    const { className, classes: classesProp, defaultValue, onChange, slotProps = {}, slots = {}, style, sx, tabs, value: valueProp, ...other } = props;
+    const fallbackValue = tabs.find(item => !item.disabled)?.value ?? "";
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue ?? fallbackValue,
+        name: VIREO_TABS_NAME,
+        state: "value",
+    });
+    const ownerState = { value, tabCount: tabs.length };
+    const classes = useUtilityClasses(classesProp);
+    const root = resolveSlotProps(slotProps.root, ownerState);
+    const tabsSlot = resolveSlotProps(slotProps.tabs, ownerState);
+    const tab = resolveSlotProps(slotProps.tab, ownerState);
+    const panel = resolveSlotProps(slotProps.panel, ownerState);
+    const { className: rootClassName, ref: rootRef, style: rootStyle, sx: rootSx, ...rootOther } = root;
+    const { className: tabsClassName, ...tabsOther } = tabsSlot;
+    const { className: tabClassName, ...tabOther } = tab;
+    const { className: panelClassName, ...panelOther } = panel;
+    const ref = useForkRef(forwardedRef, rootRef);
+    const id = React.useId();
+    const handleChange = (event, nextValue) => {
+        setValue(nextValue);
+        onChange?.(nextValue, event);
+    };
+    return (_jsxs(VireoTabsRoot, { ...other, ...rootOther, as: slots.root ?? "div", ref: ref, ownerState: ownerState, className: joinClassNames(classes.root, className, rootClassName), style: { ...style, ...rootStyle }, sx: mergeSx(sx, rootSx), children: [_jsx(VireoTabsList, { ...tabsOther, as: slots.tabs, ownerState: ownerState, value: value === "" ? false : value, onChange: handleChange, className: joinClassNames(classes.tabs, tabsClassName), children: tabs.map(item => (_createElement(VireoTabsTab, { ...tabOther, as: slots.tab, ownerState: ownerState, key: item.value, id: `${id}-tab-${item.value}`, "aria-controls": `${id}-panel-${item.value}`, className: joinClassNames(classes.tab, tabClassName), label: item.label, value: item.value, disabled: item.disabled }))) }), tabs.map(item => {
+                const selected = item.value === value;
+                return (_createElement(VireoTabsPanel, { ...panelOther, as: slots.panel ?? "div", ownerState: ownerState, key: item.value, id: `${id}-panel-${item.value}`, "aria-labelledby": `${id}-tab-${item.value}`, role: "tabpanel", hidden: !selected, className: joinClassNames(classes.panel, panelClassName) }, selected ? item.content : null));
+            })] }));
+});
+VireoTabs.displayName = VIREO_TABS_NAME;

package/dist/core/components/navigation/VireoTabs/VireoTabs.styled.d.ts

@@ -0,0 +1,7 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps, type TabProps, type TabsProps } from "@mui/material";
+import type { VireoTabsOwnerState } from "./VireoTabs.types.js";
+export declare const VireoTabsRoot: StyledSlotComponent<BoxProps, VireoTabsOwnerState>;
+export declare const VireoTabsList: StyledSlotComponent<TabsProps, VireoTabsOwnerState>;
+export declare const VireoTabsTab: StyledSlotComponent<TabProps, VireoTabsOwnerState>;
+export declare const VireoTabsPanel: StyledSlotComponent<BoxProps, VireoTabsOwnerState>;

package/dist/core/components/navigation/VireoTabs/VireoTabs.styled.js

@@ -0,0 +1,23 @@
+import { Box, Tab, Tabs } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_TABS_NAME } from "./VireoTabs.identity.js";
+export const VireoTabsRoot = styled(Box, {
+    name: VIREO_TABS_NAME,
+    slot: "Root",
+    overridesResolver: (_p, s) => s.root,
+})({ minWidth: 0 });
+export const VireoTabsList = styled(Tabs, {
+    name: VIREO_TABS_NAME,
+    slot: "Tabs",
+    overridesResolver: (_p, s) => s.tabs,
+})({ marginBottom: 24 });
+export const VireoTabsTab = styled(Tab, {
+    name: VIREO_TABS_NAME,
+    slot: "Tab",
+    overridesResolver: (_p, s) => s.tab,
+})({ minWidth: 0 });
+export const VireoTabsPanel = styled(Box, {
+    name: VIREO_TABS_NAME,
+    slot: "Panel",
+    overridesResolver: (_p, s) => s.panel,
+})({ minWidth: 0 });

package/dist/core/components/navigation/VireoTabs/VireoTabs.types.d.ts

@@ -0,0 +1,52 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { Box, BoxProps, Tab, Tabs } 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 VireoTabsClasses, type VireoTabsClassKey } from "./VireoTabs.classes.js";
+import type { VIREO_TABS_NAME, VireoTabsSlotName } from "./VireoTabs.identity.js";
+export type VireoTabItem = {
+    value: string;
+    label: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+};
+export type VireoTabsOwnerState = {
+    value: string;
+    tabCount: number;
+};
+export interface VireoTabsRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoTabsTabsSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoTabsTabSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoTabsPanelSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoTabsSlots = {
+    [T in VireoTabsSlotName]: React.ElementType;
+};
+export type VireoTabsSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoTabsSlots, {
+    /** @default 'div' */ root: SlotProps<typeof Box, VireoTabsRootSlotPropsOverrides, VireoTabsOwnerState>;
+    /** @default Tabs */ tabs: SlotProps<typeof Tabs, VireoTabsTabsSlotPropsOverrides, VireoTabsOwnerState>;
+    /** @default Tab */ tab: SlotProps<typeof Tab, VireoTabsTabSlotPropsOverrides, VireoTabsOwnerState>;
+    /** @default 'div' */ panel: SlotProps<typeof Box, VireoTabsPanelSlotPropsOverrides, VireoTabsOwnerState>;
+}>;
+export type VireoTabsOwnProps = VireoTabsSlotsAndSlotProps & {
+    tabs: readonly VireoTabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string, event: React.SyntheticEvent) => void;
+    classes?: Partial<VireoTabsClasses>;
+};
+export type VireoTabsInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "defaultValue" | "onChange">;
+export type VireoTabsProps = VireoTabsOwnProps & VireoTabsInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_TABS_NAME]?: VireoThemeComponent<VireoTabsProps, VireoTabsClassKey, VireoTabsOwnerState, Theme>;
+    }
+}

package/dist/core/components/navigation/VireoTabs/VireoTabs.types.js

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

package/dist/core/components/navigation/VireoTabs/index.d.ts

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

package/dist/core/components/navigation/VireoTabs/index.js

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

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.classes.d.ts

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

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.classes.js

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

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+/**
+ * Proportionally scales and centers SVG geometry within Vireo's standard 24×24 icon coordinate system.
+ */
+export declare const VireoIconContainer: React.ForwardRefExoticComponent<import("./VireoIconContainer.types.js").VireoIconContainerSlotsAndSlotProps & {
+    viewBoxWidth: number;
+    viewBoxHeight: number;
+    children: React.ReactNode;
+    classes?: Partial<import("./VireoIconContainer.classes.js").VireoIconContainerClasses>;
+} & Omit<Omit<React.SVGProps<SVGGElement>, "ref">, "children" | "transform"> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+} & React.RefAttributes<SVGGElement>>;

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.identity.d.ts

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

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.identity.js

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

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.js

@@ -0,0 +1,33 @@
+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 { getVireoIconContainerUtilityClass } from "./VireoIconContainer.classes.js";
+import { VIREO_ICON_CONTAINER_NAME } from "./VireoIconContainer.identity.js";
+import { VireoIconContainerRoot } from "./VireoIconContainer.styled.js";
+const STANDARD_ICON_VIEW_BOX_SIZE = 24;
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+    }, getVireoIconContainerUtilityClass, classes);
+}
+/**
+ * Proportionally scales and centers SVG geometry within Vireo's standard 24×24 icon coordinate system.
+ */
+export const VireoIconContainer = React.forwardRef(function VireoIconContainer(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_ICON_CONTAINER_NAME });
+    const { children, className, classes: classesProp, slotProps = {}, slots = {}, style, sx, viewBoxHeight, viewBoxWidth, ...other } = props;
+    const ownerState = { viewBoxWidth, viewBoxHeight };
+    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 scale = Math.min(STANDARD_ICON_VIEW_BOX_SIZE / viewBoxWidth, STANDARD_ICON_VIEW_BOX_SIZE / viewBoxHeight);
+    const offsetX = (STANDARD_ICON_VIEW_BOX_SIZE - viewBoxWidth * scale) / 2;
+    const offsetY = (STANDARD_ICON_VIEW_BOX_SIZE - viewBoxHeight * scale) / 2;
+    const transform = `translate(${offsetX} ${offsetY}) scale(${scale})`;
+    return (_jsx(VireoIconContainerRoot, { ...other, ...rootSlotOther, as: slots.root ?? "g", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), transform: transform, children: children }));
+});
+VireoIconContainer.displayName = VIREO_ICON_CONTAINER_NAME;

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.styled.d.ts

@@ -0,0 +1,10 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type SxProps, type Theme } from "@mui/material";
+import type React from "react";
+import { type VireoIconContainerOwnerState } from "./VireoIconContainer.types.js";
+type VireoIconContainerStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoIconContainerOwnerState>;
+type VireoIconContainerRootProps = React.SVGProps<SVGGElement> & {
+    sx?: SxProps<Theme>;
+};
+export declare const VireoIconContainerRoot: VireoIconContainerStyledSlotComponent<VireoIconContainerRootProps>;
+export {};

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.styled.js

@@ -0,0 +1,7 @@
+import { styled } from "@mui/material/styles";
+import { VIREO_ICON_CONTAINER_NAME } from "./VireoIconContainer.identity.js";
+export const VireoIconContainerRoot = styled("g", {
+    name: VIREO_ICON_CONTAINER_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({});

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.types.d.ts

@@ -0,0 +1,46 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { SxProps, 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 VireoIconContainerClasses, type VireoIconContainerClassKey } from "./VireoIconContainer.classes.js";
+import type { VIREO_ICON_CONTAINER_NAME, VireoIconContainerSlotName } from "./VireoIconContainer.identity.js";
+export type VireoIconContainerOwnerState = {
+    viewBoxWidth: number;
+    viewBoxHeight: number;
+};
+export interface VireoIconContainerRootSlotPropsOverrides {
+    sx?: SxProps<Theme>;
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoIconContainer}. */
+export type VireoIconContainerSlots = {
+    [TSlotName in VireoIconContainerSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoIconContainer}. */
+export type VireoIconContainerSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoIconContainerSlots, {
+    /** @default 'g' */
+    root: SlotProps<"g", VireoIconContainerRootSlotPropsOverrides, VireoIconContainerOwnerState>;
+}>;
+/** Props owned by {@link VireoIconContainer}. */
+export type VireoIconContainerOwnProps = VireoIconContainerSlotsAndSlotProps & {
+    /** Width of the coordinate system in which the child SVG geometry was authored. */
+    viewBoxWidth: number;
+    /** Height of the coordinate system in which the child SVG geometry was authored. */
+    viewBoxHeight: number;
+    /** SVG geometry proportionally scaled and centered in the standard 24×24 Vireo icon coordinate system. */
+    children: React.ReactNode;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoIconContainerClasses>;
+};
+/** Props VireoIconContainer inherits from its default root after excluding component-owned props. */
+export type VireoIconContainerInheritedProps = Omit<React.ComponentPropsWithoutRef<"g">, "children" | "transform"> & {
+    sx?: SxProps<Theme>;
+};
+/** Props accepted by {@link VireoIconContainer}. */
+export type VireoIconContainerProps = VireoIconContainerOwnProps & VireoIconContainerInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_ICON_CONTAINER_NAME]?: VireoThemeComponent<VireoIconContainerProps, VireoIconContainerClassKey, VireoIconContainerOwnerState, Theme>;
+    }
+}

package/dist/core/components/surfaces/VireoIconContainer/VireoIconContainer.types.js

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

package/dist/core/components/surfaces/VireoIconContainer/index.d.ts

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

package/dist/core/components/surfaces/VireoIconContainer/index.js

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

package/dist/core/constants/loading.constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared semantic timing values for asynchronous loading presentation.
+ *
+ * Boundaries own reveal timing and content transitions. Skeleton leaves consume
+ * only the visual animation duration.
+ */
+export declare const VIREO_LOADING_TOKENS: {
+    readonly revealDelay: 150;
+    readonly contentTransitionDuration: 120;
+    readonly skeletonAnimationDuration: 1400;
+};
+export type VireoLoadingTokens = typeof VIREO_LOADING_TOKENS;

package/dist/core/constants/loading.constants.js

@@ -0,0 +1,11 @@
+/**
+ * Shared semantic timing values for asynchronous loading presentation.
+ *
+ * Boundaries own reveal timing and content transitions. Skeleton leaves consume
+ * only the visual animation duration.
+ */
+export const VIREO_LOADING_TOKENS = {
+    revealDelay: 150,
+    contentTransitionDuration: 120,
+    skeletonAnimationDuration: 1_400,
+};

package/dist/core/constants/motion.constants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared semantic motion values for Vireo components and consuming applications.
+ *
+ * Direct manipulation should remain immediate. Use the longer values only when
+ * motion communicates a surface or navigation relationship.
+ */
+export declare const VIREO_MOTION_TOKENS: {
+    readonly duration: {
+        readonly instant: 0;
+        readonly micro: 110;
+        readonly standard: 180;
+        readonly enter: 210;
+        readonly exit: 150;
+        readonly emphasized: 270;
+    };
+    readonly easing: {
+        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly enter: "cubic-bezier(0, 0, 0, 1)";
+        readonly exit: "cubic-bezier(0.3, 0, 1, 1)";
+    };
+    readonly distance: {
+        readonly micro: 4;
+        readonly component: 8;
+        readonly surface: 16;
+    };
+    readonly scale: {
+        readonly pressed: 0.98;
+    };
+};
+export type VireoMotionTokens = typeof VIREO_MOTION_TOKENS;

package/dist/core/constants/motion.constants.js

@@ -0,0 +1,29 @@
+/**
+ * Shared semantic motion values for Vireo components and consuming applications.
+ *
+ * Direct manipulation should remain immediate. Use the longer values only when
+ * motion communicates a surface or navigation relationship.
+ */
+export const VIREO_MOTION_TOKENS = {
+    duration: {
+        instant: 0,
+        micro: 110,
+        standard: 180,
+        enter: 210,
+        exit: 150,
+        emphasized: 270,
+    },
+    easing: {
+        standard: "cubic-bezier(0.2, 0, 0, 1)",
+        enter: "cubic-bezier(0, 0, 0, 1)",
+        exit: "cubic-bezier(0.3, 0, 1, 1)",
+    },
+    distance: {
+        micro: 4,
+        component: 8,
+        surface: 16,
+    },
+    scale: {
+        pressed: 0.98,
+    },
+};

package/dist/core/hooks/useVireoDebouncedCallback/useVireoDebouncedCallback.d.ts

@@ -0,0 +1,6 @@
+import type { UseVireoDebouncedCallbackOptions, VireoDebouncedCallback } from "./useVireoDebouncedCallback.types.js";
+export type { UseVireoDebouncedCallbackOptions, VireoDebouncedCallback } from "./useVireoDebouncedCallback.types.js";
+/**
+ * Creates a trailing debounced callback with explicit cancellation and flushing controls.
+ */
+export declare function useVireoDebouncedCallback<TArgs extends unknown[], TResult>(callback: (...args: TArgs) => TResult, { delayMs }: UseVireoDebouncedCallbackOptions): VireoDebouncedCallback<TArgs, TResult>;

package/dist/core/hooks/useVireoDebouncedCallback/useVireoDebouncedCallback.js

@@ -0,0 +1,45 @@
+import React from "react";
+/**
+ * Creates a trailing debounced callback with explicit cancellation and flushing controls.
+ */
+export function useVireoDebouncedCallback(callback, { delayMs }) {
+    if (!Number.isFinite(delayMs) || delayMs < 0) {
+        throw new RangeError("useVireoDebouncedCallback delayMs must be a finite non-negative number.");
+    }
+    const callbackRef = React.useRef(callback);
+    const argsRef = React.useRef(null);
+    const timeoutRef = React.useRef(null);
+    callbackRef.current = callback;
+    const cancel = React.useCallback(() => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        argsRef.current = null;
+    }, []);
+    const run = React.useCallback((...args) => {
+        cancel();
+        argsRef.current = args;
+        timeoutRef.current = setTimeout(() => {
+            const pendingArgs = argsRef.current;
+            timeoutRef.current = null;
+            argsRef.current = null;
+            if (pendingArgs !== null)
+                callbackRef.current(...pendingArgs);
+        }, delayMs);
+    }, [cancel, delayMs]);
+    const flush = React.useCallback(() => {
+        const pendingArgs = argsRef.current;
+        if (pendingArgs === null)
+            return undefined;
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        argsRef.current = null;
+        return callbackRef.current(...pendingArgs);
+    }, []);
+    const isPending = React.useCallback(() => argsRef.current !== null, []);
+    React.useEffect(() => cancel, [cancel, delayMs]);
+    return React.useMemo(() => ({ run, cancel, flush, isPending }), [cancel, flush, isPending, run]);
+}

package/dist/core/hooks/useVireoDebouncedCallback/useVireoDebouncedCallback.types.d.ts

@@ -0,0 +1,14 @@
+export type UseVireoDebouncedCallbackOptions = {
+    /** Delay after the latest invocation before the callback runs. */
+    delayMs: number;
+};
+export type VireoDebouncedCallback<TArgs extends unknown[], TResult> = {
+    /** Schedule the callback with the latest arguments. */
+    run: (...args: TArgs) => void;
+    /** Cancel the currently pending invocation. */
+    cancel: () => void;
+    /** Immediately execute and clear the pending invocation, if one exists. */
+    flush: () => TResult | undefined;
+    /** Read whether an invocation is currently pending without causing React renders. */
+    isPending: () => boolean;
+};

package/dist/core/hooks/useVireoDebouncedCallback/useVireoDebouncedCallback.types.js

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

package/dist/core/hooks/useVireoFullscreen/useVireoFullscreen.d.ts

@@ -0,0 +1,6 @@
+import type { VireoFullscreen } from "./useVireoFullscreen.types.js";
+export type { VireoFullscreen } from "./useVireoFullscreen.types.js";
+/**
+ * Observes and controls the standard Fullscreen API for one target element.
+ */
+export declare function useVireoFullscreen(target: Element | null): VireoFullscreen;