@instruments/materia-ui 0.1.0

package/dist/tokens/focus-input.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Focus input variants - the low-level focus vocabulary (default / secondary /
+ * affirmative / warning / destructive). This focus-only variant naming does
+ * NOT track the canonical `Tone` vocabulary (no clean 1:1 mapping, and the
+ * class output must stay byte-identical for the focus-tokens/transition-order
+ * gates), so it is spelled locally here.
+ */
+type FocusInputVariant = "default" | "secondary" | "affirmative" | "warning" | "destructive";
+/**
+ * Provides consistent focus styles for input-like components.
+ * Supports both native :focus-visible and programmatic data-focused attribute.
+ *
+ * Variants aligned with semantic colour system:
+ * - default: gray-500/80 3px + border-ring (WCAG 1.4.11 non-text contrast >=3:1 on light surfaces)
+ * - secondary: gray-300
+ * - affirmative: green-400
+ * - warning: amber-400
+ * - destructive: red-400
+ *
+ * @param variant - Focus ring colour variant (defaults to "default")
+ * @returns Array of Tailwind classes for focus ring styling
+ *
+ * @example
+ * ```tsx
+ * // Default gray focus ring
+ * className={cn(focusInput(), "other-classes")}
+ *
+ * // Destructive red focus ring
+ * className={cn(focusInput("destructive"), "other-classes")}
+ * ```
+ */
+export declare const focusInput: (variant?: FocusInputVariant) => readonly string[];
+export {};

package/dist/tokens/focus-input.js

@@ -0,0 +1,77 @@
+/** Focus input classes by variant - spelled out for Tailwind scanning */
+const FOCUS_INPUT_CLASSES = {
+    affirmative: [
+        "outline-hidden",
+        "focus-visible:ring-2",
+        "focus-visible:ring-green-400/50",
+        "focus-visible:border-border",
+        "data-[focused=true]:ring-2",
+        "data-[focused=true]:ring-green-400/50",
+        "data-[focused=true]:border-border",
+        "transition-shadow-border",
+    ],
+    default: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-gray-500/80",
+        "focus-visible:border-ring",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-gray-500/80",
+        "data-[focused=true]:border-ring",
+        "transition-shadow-border",
+    ],
+    destructive: [
+        "outline-hidden",
+        "focus-visible:ring-2",
+        "focus-visible:ring-red-400/50",
+        "focus-visible:border-border",
+        "data-[focused=true]:ring-2",
+        "data-[focused=true]:ring-red-400/50",
+        "data-[focused=true]:border-border",
+        "transition-shadow-border",
+    ],
+    secondary: [
+        "outline-hidden",
+        "focus-visible:ring-2",
+        "focus-visible:ring-gray-300/50",
+        "focus-visible:border-border",
+        "data-[focused=true]:ring-2",
+        "data-[focused=true]:ring-gray-300/50",
+        "data-[focused=true]:border-border",
+        "transition-shadow-border",
+    ],
+    warning: [
+        "outline-hidden",
+        "focus-visible:ring-2",
+        "focus-visible:ring-amber-400/50",
+        "focus-visible:border-border",
+        "data-[focused=true]:ring-2",
+        "data-[focused=true]:ring-amber-400/50",
+        "data-[focused=true]:border-border",
+        "transition-shadow-border",
+    ],
+};
+/**
+ * Provides consistent focus styles for input-like components.
+ * Supports both native :focus-visible and programmatic data-focused attribute.
+ *
+ * Variants aligned with semantic colour system:
+ * - default: gray-500/80 3px + border-ring (WCAG 1.4.11 non-text contrast >=3:1 on light surfaces)
+ * - secondary: gray-300
+ * - affirmative: green-400
+ * - warning: amber-400
+ * - destructive: red-400
+ *
+ * @param variant - Focus ring colour variant (defaults to "default")
+ * @returns Array of Tailwind classes for focus ring styling
+ *
+ * @example
+ * ```tsx
+ * // Default gray focus ring
+ * className={cn(focusInput(), "other-classes")}
+ *
+ * // Destructive red focus ring
+ * className={cn(focusInput("destructive"), "other-classes")}
+ * ```
+ */
+export const focusInput = (variant = "default") => FOCUS_INPUT_CLASSES[variant];

package/dist/tokens/focus-ring.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Focus ring variants - the low-level focus vocabulary (default / secondary /
+ * affirmative / warning / destructive) plus `brand`. This is the older, focus-
+ * only variant naming and deliberately does NOT track the canonical `Tone`
+ * vocabulary (no clean 1:1 mapping: `secondary` has no tone, and the class
+ * output must stay byte-identical for the focus-tokens/transition-order gates),
+ * so it is spelled locally here.
+ */
+type FocusRingVariant = "default" | "secondary" | "affirmative" | "warning" | "destructive" | "brand";
+/**
+ * Provides consistent focus styles for interactive elements (buttons, links, etc.).
+ * Supports both native :focus-visible and programmatic data-focused attribute.
+ *
+ * Variants aligned with semantic colour system:
+ * - default: gray-500/80 (WCAG 1.4.11 non-text contrast >=3:1 on light surfaces)
+ * - secondary: gray-300
+ * - affirmative: green-400
+ * - warning: amber-400
+ * - destructive: red-400
+ * - brand: brand/25
+ *
+ * @param variant - Focus ring colour variant (defaults to "default")
+ * @returns Array of Tailwind classes for focus ring styling
+ *
+ * @example
+ * ```tsx
+ * // Default gray focus ring
+ * className={cn(focusRing(), "other-classes")}
+ *
+ * // Affirmative green focus ring
+ * className={cn(focusRing("affirmative"), "other-classes")}
+ *
+ * // Destructive red focus ring
+ * className={cn(focusRing("destructive"), "other-classes")}
+ * ```
+ */
+export declare const focusRing: (variant?: FocusRingVariant) => readonly string[];
+export {};

package/dist/tokens/focus-ring.js

@@ -0,0 +1,79 @@
+/** Focus ring classes by variant - spelled out for Tailwind scanning */
+const FOCUS_RING_CLASSES = {
+    affirmative: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-green-400/50",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-green-400/50",
+        "transition-shadow",
+    ],
+    brand: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-brand/25",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-brand/25",
+        "transition-shadow",
+    ],
+    default: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-gray-500/80",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-gray-500/80",
+        "transition-shadow",
+    ],
+    destructive: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-red-400/50",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-red-400/50",
+        "transition-shadow",
+    ],
+    secondary: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-gray-300/50",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-gray-300/50",
+        "transition-shadow",
+    ],
+    warning: [
+        "outline-hidden",
+        "focus-visible:ring-3",
+        "focus-visible:ring-amber-400/50",
+        "data-[focused=true]:ring-3",
+        "data-[focused=true]:ring-amber-400/50",
+        "transition-shadow",
+    ],
+};
+/**
+ * Provides consistent focus styles for interactive elements (buttons, links, etc.).
+ * Supports both native :focus-visible and programmatic data-focused attribute.
+ *
+ * Variants aligned with semantic colour system:
+ * - default: gray-500/80 (WCAG 1.4.11 non-text contrast >=3:1 on light surfaces)
+ * - secondary: gray-300
+ * - affirmative: green-400
+ * - warning: amber-400
+ * - destructive: red-400
+ * - brand: brand/25
+ *
+ * @param variant - Focus ring colour variant (defaults to "default")
+ * @returns Array of Tailwind classes for focus ring styling
+ *
+ * @example
+ * ```tsx
+ * // Default gray focus ring
+ * className={cn(focusRing(), "other-classes")}
+ *
+ * // Affirmative green focus ring
+ * className={cn(focusRing("affirmative"), "other-classes")}
+ *
+ * // Destructive red focus ring
+ * className={cn(focusRing("destructive"), "other-classes")}
+ * ```
+ */
+export const focusRing = (variant = "default") => FOCUS_RING_CLASSES[variant];

package/dist/tokens/has-error-input.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Provides consistent error styles for input-like components.
+ * Supports both aria-invalid attribute and programmatic data-error attribute.
+ */
+export declare const hasErrorInput: readonly ["aria-invalid:ring-3", "aria-invalid:border-destructive", "aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", "data-[error=true]:ring-3", "data-[error=true]:border-destructive", "data-[error=true]:ring-destructive/20", "dark:data-[error=true]:ring-destructive/40"];

package/dist/tokens/has-error-input.js

@@ -0,0 +1,16 @@
+/**
+ * Provides consistent error styles for input-like components.
+ * Supports both aria-invalid attribute and programmatic data-error attribute.
+ */
+export const hasErrorInput = [
+    // aria-invalid (semantic)
+    "aria-invalid:ring-3",
+    "aria-invalid:border-destructive",
+    "aria-invalid:ring-destructive/20",
+    "dark:aria-invalid:ring-destructive/40",
+    // data-error (for Storybook)
+    "data-[error=true]:ring-3",
+    "data-[error=true]:border-destructive",
+    "data-[error=true]:ring-destructive/20",
+    "dark:data-[error=true]:ring-destructive/40",
+];

package/dist/tokens/heading-level.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Heading-level vocabulary for the Materia design system.
+ *
+ * `HeadingLevel` is the shared `"1"`–`"6"` string union for the semantic
+ * heading tag (`<h1>`–`<h6>`), independent of visual size. Used by `Heading`
+ * and by the `Empty`/`EmptyState` titles it composes so the document-outline
+ * level is spelled once.
+ *
+ * @module
+ */
+/** Semantic heading tag level, `"1"`–`"6"` - the `<h{level}>` rendered, distinct from visual size. */
+export type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";

package/dist/tokens/heading-level.js

@@ -0,0 +1,11 @@
+/**
+ * Heading-level vocabulary for the Materia design system.
+ *
+ * `HeadingLevel` is the shared `"1"`–`"6"` string union for the semantic
+ * heading tag (`<h1>`–`<h6>`), independent of visual size. Used by `Heading`
+ * and by the `Empty`/`EmptyState` titles it composes so the document-outline
+ * level is spelled once.
+ *
+ * @module
+ */
+export {};

package/dist/tokens/icon-component.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Icon-component type for the Materia design system.
+ *
+ * `IconComponent` is the single canonical type for an `icon`/`prefixIcon`/
+ * `suffixIcon` prop: a Lucide icon or any SVG React component. It replaces the
+ * several hand-spelled variations of the same union
+ * (`LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>`,
+ * the `React.`-less spelling, per-component `NavigationIcon` aliases, …) that
+ * had drifted across component props.
+ *
+ * @module
+ */
+import type { LucideIcon } from "lucide-react";
+import type { ComponentType, SVGProps } from "react";
+/** A Lucide icon component or any SVG React component, for `icon`-style props. */
+export type IconComponent = LucideIcon | ComponentType<SVGProps<SVGSVGElement>>;

package/dist/tokens/icon-component.js

@@ -0,0 +1,13 @@
+/**
+ * Icon-component type for the Materia design system.
+ *
+ * `IconComponent` is the single canonical type for an `icon`/`prefixIcon`/
+ * `suffixIcon` prop: a Lucide icon or any SVG React component. It replaces the
+ * several hand-spelled variations of the same union
+ * (`LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>`,
+ * the `React.`-less spelling, per-component `NavigationIcon` aliases, …) that
+ * had drifted across component props.
+ *
+ * @module
+ */
+export {};

package/dist/tokens/input-shell.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared field-surface and disabled-state class tokens.
+ *
+ * `INPUT_SHELL` is the byte-exact field surface (radius + border + fill) shared
+ * by the textarea, native-select, and expand-button controls; their sizing,
+ * padding, shadow, focus and disabled treatment diverge and stay inline.
+ *
+ * `INPUT_WRAPPER` and `INPUT_CONTROL_RESET` are the two halves of a group-style
+ * field: a wrapper that owns the surface, and a bare control inside it.
+ *
+ * `DISABLED` is the canonical disabled treatment (no pointer events + 50%
+ * opacity) shared across interactive controls.
+ */
+/**
+ * Input field surface: `rounded-md` radius, a `border-border` border, and the
+ * `bg-input` fill. Shared byte-exact by textarea / native-select / expand-button.
+ */
+export declare const INPUT_SHELL = "rounded-md border border-border bg-input";
+/**
+ * Group-style field wrapper: border, fill, shadow and a centred flex row. The
+ * radius and the size ladder stay with each component. Shared by InputGroup and
+ * LocationInput.
+ */
+export declare const INPUT_WRAPPER = "border-border bg-input transition-shadow-border relative flex w-full items-center border shadow-xs";
+/**
+ * A bare control inside an `INPUT_WRAPPER`: no border, fill, shadow, ring or
+ * focus treatment of its own, since the wrapper owns them. Shared by the
+ * InputGroup input and textarea and the LocationInput input.
+ */
+export declare const INPUT_CONTROL_RESET = "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground min-w-0 flex-1 border-0 bg-transparent shadow-none ring-0 outline-none focus-visible:border-0 focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+/** Canonical disabled treatment: block pointer events and dim to 50% opacity. */
+export declare const DISABLED = "disabled:pointer-events-none disabled:opacity-50";

package/dist/tokens/input-shell.js

@@ -0,0 +1,32 @@
+/**
+ * Shared field-surface and disabled-state class tokens.
+ *
+ * `INPUT_SHELL` is the byte-exact field surface (radius + border + fill) shared
+ * by the textarea, native-select, and expand-button controls; their sizing,
+ * padding, shadow, focus and disabled treatment diverge and stay inline.
+ *
+ * `INPUT_WRAPPER` and `INPUT_CONTROL_RESET` are the two halves of a group-style
+ * field: a wrapper that owns the surface, and a bare control inside it.
+ *
+ * `DISABLED` is the canonical disabled treatment (no pointer events + 50%
+ * opacity) shared across interactive controls.
+ */
+/**
+ * Input field surface: `rounded-md` radius, a `border-border` border, and the
+ * `bg-input` fill. Shared byte-exact by textarea / native-select / expand-button.
+ */
+export const INPUT_SHELL = "rounded-md border border-border bg-input";
+/**
+ * Group-style field wrapper: border, fill, shadow and a centred flex row. The
+ * radius and the size ladder stay with each component. Shared by InputGroup and
+ * LocationInput.
+ */
+export const INPUT_WRAPPER = "border-border bg-input transition-shadow-border relative flex w-full items-center border shadow-xs";
+/**
+ * A bare control inside an `INPUT_WRAPPER`: no border, fill, shadow, ring or
+ * focus treatment of its own, since the wrapper owns them. Shared by the
+ * InputGroup input and textarea and the LocationInput input.
+ */
+export const INPUT_CONTROL_RESET = "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground min-w-0 flex-1 border-0 bg-transparent shadow-none ring-0 outline-none focus-visible:border-0 focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+/** Canonical disabled treatment: block pointer events and dim to 50% opacity. */
+export const DISABLED = "disabled:pointer-events-none disabled:opacity-50";

package/dist/tokens/justify.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Flexbox main-axis alignment types.
+ * Used by `Flex`, `Stack`, `HStack`, `VStack`, and `Grid` via the `justify` prop.
+ */
+export type FlexJustify = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";

package/dist/tokens/justify.js

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

package/dist/tokens/menu-content.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Shared constants for menu-like container + item radius pairing.
+ *
+ * Follows the concentric radii rule: inner_radius = outer_radius - padding.
+ * This ensures item highlights sit flush inside the container's rounded corners.
+ */
+import type { Radius } from "./radius.js";
+import type { ComponentSize } from "./size.js";
+/**
+ * Container classes for menu-like popover surfaces.
+ */
+export declare const MENU_CONTAINER_CLASSES: {
+    /** rounded-2xl (16px) with p-1 (4px) padding - compact variant */
+    readonly compact: "rounded-2xl p-1";
+    /** rounded-3xl (24px) with p-1.5 (6px) padding - pill-shaped items */
+    readonly default: "rounded-3xl p-1.5";
+};
+/**
+ * Concentric item radius classes for menu containers.
+ * Each value is the inner radius that sits flush inside the corresponding container.
+ */
+export declare const MENU_ITEM_RADIUS: {
+    /** 16px - 4px = 12px → rounded-xl */
+    readonly compact: "rounded-xl";
+    /** 24px - 6px ≈ 18px → rounded-2xl */
+    readonly default: "rounded-2xl";
+    /** No rounding */
+    readonly square: "rounded-none";
+};
+/**
+ * Popup open/close animation shared by the three menu families; one source with
+ * the popover family.
+ */
+export { POPOVER_CONTENT_ANIMATION as MENU_POPUP_ANIMATION } from "./overlay-styles.js";
+/** Surface density shared by the three menu families' Content. */
+export type MenuSurface = "default" | "compact";
+/** Named content widths shared by the three menu families' Content. */
+export type MenuContentWidth = "auto" | "sidebar";
+/** Outer-content overflow behaviour shared by the three menu families' Content. */
+export type MenuOverflow = "auto" | "hidden";
+/** Named content widths → width class (menu Content). */
+export declare const MENU_CONTENT_WIDTH_CLASSES: Record<MenuContentWidth, string>;
+/** Outer-content overflow behaviour → class (menu Content). */
+export declare const MENU_OVERFLOW_CLASSES: Record<MenuOverflow, string>;
+/** Surface density → container + shadow (menu Content). Default = shadow-md. */
+export declare const MENU_SURFACE_CLASSES: Record<MenuSurface, string>;
+/** Explicit `itemRadius` prop value → concentric item radius (menu Content). */
+export declare const MENU_ITEM_RADIUS_MAP: Record<Radius, string>;
+/** Content `size` → label padding + text (menu Label). */
+export declare const MENU_LABEL_SIZE_CLASSES: Record<ComponentSize, string>;
+/** Content `size` → inset padding aligning a Label with icon'd items (menu Label). */
+export declare const MENU_LABEL_INSET_CLASSES: Record<ComponentSize, string>;
+/** Content `size` → shortcut text size (menu Shortcut). */
+export declare const MENU_SHORTCUT_SIZE_CLASSES: Record<ComponentSize, string>;
+/**
+ * Highlighted (keyboard/hover) item surface - the menu canon.
+ * Includes the hover/focus reset (Base UI drives the highlight via
+ * `data-highlighted`, not native `:hover`/`:focus`) and the `duration-0` on
+ * highlight so the surface change is instant - every item/checkbox-item/
+ * radio-item/sub-trigger across the three menu families pairs this reset with
+ * the highlight, so it lives together here as one token.
+ */
+export declare const MENU_ITEM_HIGHLIGHT = "hover:bg-transparent focus:bg-transparent focus-visible:bg-transparent data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:duration-0";
+/** Highlighted destructive item surface. */
+export declare const MENU_ITEM_HIGHLIGHT_DESTRUCTIVE = "data-highlighted:bg-destructive/10 data-highlighted:text-destructive";
+/** Open sub-trigger surface (submenu expanded) - mirrors the highlight canon. */
+export declare const MENU_SUB_TRIGGER_OPEN = "data-popup-open:bg-accent data-popup-open:text-accent-foreground";

package/dist/tokens/menu-content.js

@@ -0,0 +1,99 @@
+/**
+ * Shared constants for menu-like container + item radius pairing.
+ *
+ * Follows the concentric radii rule: inner_radius = outer_radius - padding.
+ * This ensures item highlights sit flush inside the container's rounded corners.
+ */
+/**
+ * Container classes for menu-like popover surfaces.
+ */
+export const MENU_CONTAINER_CLASSES = {
+    /** rounded-2xl (16px) with p-1 (4px) padding - compact variant */
+    compact: "rounded-2xl p-1",
+    /** rounded-3xl (24px) with p-1.5 (6px) padding - pill-shaped items */
+    default: "rounded-3xl p-1.5",
+};
+/**
+ * Concentric item radius classes for menu containers.
+ * Each value is the inner radius that sits flush inside the corresponding container.
+ */
+export const MENU_ITEM_RADIUS = {
+    /** 16px - 4px = 12px → rounded-xl */
+    compact: "rounded-xl",
+    /** 24px - 6px ≈ 18px → rounded-2xl */
+    default: "rounded-2xl",
+    /** No rounding */
+    square: "rounded-none",
+};
+/**
+ * Popup open/close animation shared by the three menu families; one source with
+ * the popover family.
+ */
+export { POPOVER_CONTENT_ANIMATION as MENU_POPUP_ANIMATION } from "./overlay-styles.js";
+/** Named content widths → width class (menu Content). */
+export const MENU_CONTENT_WIDTH_CLASSES = {
+    auto: "",
+    sidebar: "w-menu-sidebar",
+};
+/** Outer-content overflow behaviour → class (menu Content). */
+export const MENU_OVERFLOW_CLASSES = {
+    auto: "overflow-x-hidden overflow-y-auto",
+    hidden: "overflow-hidden",
+};
+/** Surface density → container + shadow (menu Content). Default = shadow-md. */
+export const MENU_SURFACE_CLASSES = {
+    compact: `${MENU_CONTAINER_CLASSES.compact} shadow-md dark:shadow-none`,
+    default: `${MENU_CONTAINER_CLASSES.default} shadow-md dark:shadow-none`,
+};
+/** Explicit `itemRadius` prop value → concentric item radius (menu Content). */
+export const MENU_ITEM_RADIUS_MAP = {
+    full: MENU_ITEM_RADIUS.default,
+    rounded: MENU_ITEM_RADIUS.compact,
+    square: MENU_ITEM_RADIUS.square,
+};
+/** Content `size` → label padding + text (menu Label). */
+export const MENU_LABEL_SIZE_CLASSES = {
+    "2xl": "px-5 pt-3.5 pb-2.5 text-paragraph-sm",
+    "2xs": "px-2 py-1 text-caption",
+    "3xl": "px-5 pt-4 pb-3 text-paragraph",
+    base: "px-3 pt-2 pb-1.5 text-caption",
+    lg: "px-3.5 pt-2.5 pb-2 text-caption",
+    sm: "px-2.5 pt-1.5 pb-2 text-caption",
+    xl: "px-4 pt-3 pb-2.5 text-paragraph-sm",
+    xs: "px-2.5 py-1.5 text-caption",
+};
+/** Content `size` → inset padding aligning a Label with icon'd items (menu Label). */
+export const MENU_LABEL_INSET_CLASSES = {
+    "2xl": "pl-12",
+    "2xs": "pl-5",
+    "3xl": "pl-14",
+    base: "pl-9",
+    lg: "pl-10",
+    sm: "pl-8",
+    xl: "pl-11",
+    xs: "pl-6",
+};
+/** Content `size` → shortcut text size (menu Shortcut). */
+export const MENU_SHORTCUT_SIZE_CLASSES = {
+    "2xl": "text-paragraph",
+    "2xs": "text-2xs",
+    "3xl": "text-paragraph",
+    base: "text-caption",
+    lg: "text-paragraph-sm",
+    sm: "text-caption",
+    xl: "text-paragraph-sm",
+    xs: "text-2xs",
+};
+/**
+ * Highlighted (keyboard/hover) item surface - the menu canon.
+ * Includes the hover/focus reset (Base UI drives the highlight via
+ * `data-highlighted`, not native `:hover`/`:focus`) and the `duration-0` on
+ * highlight so the surface change is instant - every item/checkbox-item/
+ * radio-item/sub-trigger across the three menu families pairs this reset with
+ * the highlight, so it lives together here as one token.
+ */
+export const MENU_ITEM_HIGHLIGHT = "hover:bg-transparent focus:bg-transparent focus-visible:bg-transparent data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:duration-0";
+/** Highlighted destructive item surface. */
+export const MENU_ITEM_HIGHLIGHT_DESTRUCTIVE = "data-highlighted:bg-destructive/10 data-highlighted:text-destructive";
+/** Open sub-trigger surface (submenu expanded) - mirrors the highlight canon. */
+export const MENU_SUB_TRIGGER_OPEN = "data-popup-open:bg-accent data-popup-open:text-accent-foreground";