@tinybigui/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,15 +1,49 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
 export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import { forwardRef, useRef, useEffect, createContext, useContext, useMemo, useCallback, useState, useLayoutEffect, Children, isValidElement } from 'react';
+import { forwardRef, useRef, useEffect, createContext, useContext, useMemo, useCallback, useState, useLayoutEffect, useId, Children, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink } from 'react-aria';
+import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useProgressBar } from 'react-aria';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState } from 'react-stately';
+import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
+import { createPortal } from 'react-dom';
 
 // src/utils/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            // MD3 Display scale
+            "display-large",
+            "display-medium",
+            "display-small",
+            // MD3 Headline scale
+            "headline-large",
+            "headline-medium",
+            "headline-small",
+            // MD3 Title scale
+            "title-large",
+            "title-medium",
+            "title-small",
+            // MD3 Body scale
+            "body-large",
+            "body-medium",
+            "body-small",
+            // MD3 Label scale
+            "label-large",
+            "label-medium",
+            "label-small"
+          ]
+        }
+      ]
+    }
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -4498,7 +4532,1608 @@ var DrawerSection = forwardRef(
   }
 );
 DrawerSection.displayName = "DrawerSection";
+var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
+  variants: {
+    /**
+     * The visual type of the indicator.
+     */
+    type: {
+      linear: "w-full",
+      circular: "items-center justify-center w-auto"
+    }
+  },
+  defaultVariants: {
+    type: "linear"
+  }
+});
+var progressTrackVariants = cva([
+  "relative",
+  "w-full",
+  "h-1",
+  // MD3: 4dp track height
+  "rounded-full",
+  // MD3: full corner radius
+  "overflow-hidden",
+  "bg-surface-container-highest"
+  // MD3: inactive track color
+]);
+var progressIndicatorVariants = cva([
+  "absolute",
+  "left-0",
+  "top-0",
+  "h-full",
+  "rounded-full",
+  "bg-primary",
+  // MD3: active track color
+  "transition-[width]",
+  "duration-medium4",
+  // MD3: 400ms for value transitions
+  "ease-standard"
+  // MD3: cubic-bezier(0.2, 0, 0, 1)
+]);
+var progressStopIndicatorVariants = cva([
+  "absolute",
+  "right-0",
+  "top-1/2",
+  "-translate-y-1/2",
+  "w-1",
+  "h-1",
+  "rounded-full",
+  "bg-primary"
+  // MD3: stop indicator uses primary color
+]);
+var progressCircularSizeVariants = cva(
+  ["relative", "flex", "items-center", "justify-center", "flex-shrink-0"],
+  {
+    variants: {
+      size: {
+        small: "h-6 w-6",
+        // MD3: 24dp
+        medium: "h-12 w-12",
+        // MD3: 48dp (default)
+        large: "h-16 w-16"
+        // MD3: 64dp
+      }
+    },
+    defaultVariants: {
+      size: "medium"
+    }
+  }
+);
+var progressLabelVariants = cva([
+  "text-body-small",
+  // MD3: body-small type scale (12px)
+  "text-on-surface",
+  // MD3: on-surface color role
+  "select-none"
+]);
+var STROKE_WIDTH = 4;
+var CIRCULAR_SIZE_PX = {
+  small: 24,
+  medium: 48,
+  large: 64
+};
+function getCircularGeometry(size) {
+  const diameter = CIRCULAR_SIZE_PX[size];
+  const radius = (diameter - STROKE_WIDTH) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const viewBox = `0 0 ${diameter} ${diameter}`;
+  const cx = diameter / 2;
+  const cy = diameter / 2;
+  return { diameter, radius, circumference, viewBox, cx, cy };
+}
+var Progress = forwardRef(
+  ({
+    type = "linear",
+    indeterminate = false,
+    size = "medium",
+    className,
+    label,
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { progressBarProps, labelProps } = useProgressBar({
+      label,
+      value,
+      minValue,
+      maxValue,
+      isIndeterminate: indeterminate,
+      ...restProps
+    });
+    const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, (value - minValue) / (maxValue - minValue) * 100));
+    if (process.env.NODE_ENV !== "production") {
+      const ariaProps = restProps;
+      if (!label && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+        console.warn(
+          "[Progress] Progress indicator should have a visible label prop or aria-label for accessibility."
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...progressBarProps,
+        ref,
+        className: cn(progressContainerVariants({ type }), className),
+        children: [
+          label && /* @__PURE__ */ jsx("span", { ...labelProps, className: cn(progressLabelVariants()), children: label }),
+          type === "linear" ? /* @__PURE__ */ jsx(LinearProgress, { percentage, indeterminate }) : /* @__PURE__ */ jsx(CircularProgress, { percentage, indeterminate, size })
+        ]
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+function LinearProgress({ percentage, indeterminate }) {
+  if (indeterminate) {
+    return /* @__PURE__ */ jsx("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-progress-indeterminate": "",
+        className: "absolute inset-0 overflow-hidden rounded-full",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "bg-primary absolute top-0 h-full rounded-full",
+                "animate-progress-linear-indeterminate-1"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "bg-primary absolute top-0 h-full rounded-full",
+                "animate-progress-linear-indeterminate-2"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-progress-indicator": "",
+        className: cn(progressIndicatorVariants()),
+        style: { width: `${percentage}%` }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-stop-indicator": "",
+        className: cn(progressStopIndicatorVariants()),
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+function CircularProgress({
+  percentage,
+  indeterminate,
+  size
+}) {
+  const { radius, circumference, viewBox, cx, cy } = getCircularGeometry(size);
+  const strokeDashoffset = (1 - percentage / 100) * circumference;
+  if (indeterminate) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-progress-size": size,
+        "data-progress-indeterminate": "",
+        className: cn(progressCircularSizeVariants({ size })),
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox,
+            className: "animate-progress-circular-rotate h-full w-full",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: STROKE_WIDTH,
+                  className: "text-surface-container-highest"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: STROKE_WIDTH,
+                  className: "animate-progress-circular-dash text-primary",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: STROKE_WIDTH,
+        className: "text-surface-container-highest"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: STROKE_WIDTH,
+        strokeLinecap: "round",
+        className: "text-primary duration-medium4 ease-standard transition-[stroke-dashoffset]",
+        strokeDasharray: circumference,
+        strokeDashoffset
+      }
+    )
+  ] }) });
+}
+var ProgressHeadless = forwardRef(
+  ({
+    type = "linear",
+    indeterminate = false,
+    size = "medium",
+    className,
+    children,
+    renderProgress,
+    label,
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { progressBarProps, labelProps } = useProgressBar({
+      label,
+      value,
+      minValue,
+      maxValue,
+      isIndeterminate: indeterminate,
+      ...restProps
+    });
+    const percentage = indeterminate ? 0 : (value - minValue) / (maxValue - minValue) * 100;
+    return /* @__PURE__ */ jsxs("div", { ...progressBarProps, ref, className, children: [
+      label && /* @__PURE__ */ jsx("span", { ...labelProps, children: label }),
+      renderProgress?.({
+        percentage,
+        isIndeterminate: indeterminate,
+        type,
+        size
+      }),
+      children
+    ] });
+  }
+);
+ProgressHeadless.displayName = "ProgressHeadless";
+var MenuContext = createContext(null);
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+function TriggerBridge({ children }) {
+  const ctx = useSlottedContext(ButtonContext);
+  const localRef = useRef(null);
+  const { ref: contextRef, ...ctxProps } = ctx ?? {};
+  const mergedCallbackRef = useCallback(
+    (node) => {
+      localRef.current = node;
+      if (!contextRef) return;
+      if (typeof contextRef === "function") {
+        contextRef(node);
+      } else {
+        contextRef.current = node;
+      }
+    },
+    [contextRef]
+  );
+  const { buttonProps } = useButton({ ...ctxProps, elementType: "button" }, localRef);
+  if (!isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  return cloneElement(
+    children,
+    { ...buttonProps, ref: mergedCallbackRef }
+  );
+}
+function HeadlessMenuTrigger({
+  children,
+  placement = "bottom start",
+  shouldFlip = true,
+  ...rest
+}) {
+  const childrenArray = Array.isArray(children) ? children : [children];
+  const [triggerChild, menuChild] = childrenArray;
+  return /* @__PURE__ */ jsxs(MenuTrigger$1, { ...rest, children: [
+    /* @__PURE__ */ jsx(TriggerBridge, { children: triggerChild }),
+    /* @__PURE__ */ jsx(Popover, { placement, shouldFlip, offset: 4, children: menuChild })
+  ] });
+}
+function HeadlessMenu({
+  className,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const menuRef = useRef(null);
+  useLayoutEffect(() => {
+    if (ariaLabel && menuRef.current) {
+      menuRef.current.removeAttribute("aria-labelledby");
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Menu$1,
+    {
+      ...props,
+      ref: menuRef,
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      className: className ?? "",
+      children
+    }
+  );
+}
+HeadlessMenuTrigger.Menu = HeadlessMenu;
+var HeadlessMenuItem = forwardRef(
+  function HeadlessMenuItem2({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(MenuItem$1, { ...props, ref, className: className ?? "", children });
+  }
+);
+function HeadlessMenuSection({
+  children,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuSection$1,
+    {
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      className: className ?? "",
+      children
+    }
+  );
+}
+function HeadlessMenuDivider({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Separator, { ...props, className: className ?? "" });
+}
+var menuContainerVariants = cva(
+  [
+    // Elevation
+    "shadow-elevation-2",
+    // Width constraints per MD3 spec (112dp min / 280dp max)
+    "min-w-28 max-w-70",
+    // Layout
+    "py-2",
+    // Scroll: show scrollbar when content overflows; max height avoids clipping
+    "overflow-y-auto",
+    "max-h-[calc(var(--visual-viewport-height,100vh)-2rem)]",
+    // Stacking
+    "z-50",
+    // Focus outline handled by React Aria
+    "outline-none",
+    // GPU compositing — promotes menu to its own compositor layer so
+    // scale + opacity animations run without triggering layout reflow.
+    "will-change-[transform,opacity]",
+    // Pointer events blocked during animation to prevent accidental clicks
+    // on menu items while the panel is still animating in or out.
+    "data-[entering]:pointer-events-none data-[exiting]:pointer-events-none",
+    // ── Enter animation ────────────────────────────────────────────────────
+    // @keyframes menu-enter (defined in styles.css): scale(0.8)+opacity:0 →
+    // scale(1)+opacity:1 in 120ms with cubic-bezier(0,0,0.2,1) (standard
+    // decelerate — matches Angular Material's _mat-menu-enter keyframe).
+    "data-[entering]:animate-[menu-enter_120ms_cubic-bezier(0,0,0.2,1)_both]",
+    // ── Exit animation ─────────────────────────────────────────────────────
+    // @keyframes menu-exit (defined in styles.css): opacity:1 → opacity:0
+    // in 100ms after 25ms delay, linear — matches Angular Material's
+    // _mat-menu-exit keyframe (fade-only, no reverse scale).
+    "data-[exiting]:animate-[menu-exit_100ms_25ms_linear_both]",
+    // ── Transform origin (placement-aware) ────────────────────────────────
+    // RAC sets data-placement="bottom|top|left|right" on the Popover element.
+    // Default (bottom): origin at top edge (menu expands downward).
+    "origin-top",
+    // top: origin at bottom edge (menu expands upward)
+    "data-[placement=top]:origin-bottom",
+    // left: origin at right edge
+    "data-[placement=left]:origin-right",
+    // right: origin at left edge
+    "data-[placement=right]:origin-left",
+    // ── Reduced motion ────────────────────────────────────────────────────
+    // Skip both animations entirely for users who prefer reduced motion.
+    "motion-reduce:data-[entering]:animate-none motion-reduce:data-[exiting]:animate-none"
+  ],
+  {
+    variants: {
+      /**
+       * Color scheme — drives the container background.
+       * baseline+standard uses a separate compound variant.
+       */
+      colorScheme: {
+        standard: [],
+        vibrant: []
+      },
+      /**
+       * Visual style — drives corner radius and baseline vs vertical background.
+       */
+      menuStyle: {
+        baseline: ["rounded-xs", "bg-surface-container"],
+        vertical: ["rounded-lg", "bg-surface-container-low"]
+      }
+    },
+    compoundVariants: [
+      // Vertical + vibrant: tertiary container background
+      {
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: ["bg-tertiary-container"]
+      }
+    ],
+    defaultVariants: {
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuItemVariants = cva(
+  [
+    // Layout — height set by density context in MenuItem component
+    "relative flex w-full items-center",
+    "px-3 gap-3",
+    // Typography: Body Large per MD3 baseline spec
+    "text-body-large",
+    // Interaction
+    "cursor-pointer select-none outline-none",
+    // State layer pseudo-element
+    "before:absolute before:inset-0 before:rounded-[inherit]",
+    "before:transition-opacity before:duration-short2 before:ease-standard",
+    "before:opacity-0",
+    // Hover state layer
+    "hover:before:opacity-8",
+    // Focus visible state layer
+    "focus-visible:before:opacity-12",
+    // Active pressed state layer
+    "active:before:opacity-12",
+    // Color transition for selection
+    "transition-colors duration-short2 ease-standard"
+  ],
+  {
+    variants: {
+      /**
+       * Disabled state: reduces opacity and blocks interaction.
+       */
+      isDisabled: {
+        true: ["opacity-38 cursor-not-allowed pointer-events-none"],
+        false: []
+      },
+      /**
+       * Selected state: background and text color driven by compound variants.
+       */
+      isSelected: {
+        true: [],
+        false: []
+      },
+      /**
+       * Color scheme: drives default text and state layer colors.
+       * - standard: on-surface text, on-surface state layer
+       * - vibrant (vertical only): on-tertiary-container text + state layer
+       */
+      colorScheme: {
+        standard: ["text-on-surface", "before:bg-on-surface"],
+        vibrant: ["text-on-tertiary-container", "before:bg-on-tertiary-container"]
+      },
+      /**
+       * Visual style: drives corner radius on items (vertical uses rounded-lg
+       * inherited from container, items stay flat inside).
+       */
+      menuStyle: {
+        baseline: [],
+        vertical: []
+      }
+    },
+    compoundVariants: [
+      // ── Baseline selection (both colorSchemes) ──────────────────────────
+      {
+        isSelected: true,
+        menuStyle: "baseline",
+        class: [
+          "bg-surface-container-highest"
+          // text-on-surface already applied by standard colorScheme variant
+        ]
+      },
+      // ── Vertical + Standard selection ───────────────────────────────────
+      {
+        isSelected: true,
+        menuStyle: "vertical",
+        colorScheme: "standard",
+        class: [
+          "bg-tertiary-container",
+          "text-on-tertiary-container",
+          "before:bg-on-tertiary-container"
+        ]
+      },
+      // ── Vertical + Vibrant selection ─────────────────────────────────────
+      {
+        isSelected: true,
+        menuStyle: "vertical",
+        colorScheme: "vibrant",
+        class: ["bg-tertiary", "text-on-tertiary", "before:bg-on-tertiary"]
+      }
+    ],
+    defaultVariants: {
+      isDisabled: false,
+      isSelected: false,
+      colorScheme: "standard",
+      menuStyle: "baseline"
+    }
+  }
+);
+var menuSectionVariants = cva(["flex flex-col w-full"]);
+var menuSectionHeaderVariants = cva([
+  "px-3 pt-2 pb-1",
+  "text-title-small text-on-surface-variant",
+  "select-none"
+]);
+var menuDividerVariants = cva(["border-t border-outline-variant", "my-2 mx-0"]);
+cva(["h-2 w-full"]);
+var menuItemTrailingTextVariants = cva([
+  "ml-auto shrink-0 text-label-large text-on-surface-variant",
+  "select-none"
+]);
+var menuItemDescriptionVariants = cva([
+  "text-body-medium text-on-surface-variant",
+  "select-none"
+]);
+var Menu = forwardRef(function Menu2({
+  children,
+  className,
+  colorScheme = "standard",
+  menuStyle = "baseline",
+  density = 0,
+  disableRipple = false,
+  selectionMode,
+  selectedKeys,
+  onSelectionChange,
+  ...props
+}, _ref) {
+  const close = () => {
+  };
+  const contextValue = {
+    close,
+    disableRipple,
+    colorScheme,
+    menuStyle,
+    density,
+    ...selectionMode !== void 0 ? { selectionMode } : {},
+    ...selectedKeys !== void 0 ? { selectedKeys } : {}
+  };
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    HeadlessMenu,
+    {
+      ...props,
+      ...selectionMode !== void 0 ? { selectionMode } : {},
+      ...selectedKeys !== void 0 ? { selectedKeys } : {},
+      ...onSelectionChange !== void 0 ? { onSelectionChange } : {},
+      className: cn(menuContainerVariants({ colorScheme, menuStyle }), className),
+      children
+    }
+  ) });
+});
+function MenuTrigger({
+  children,
+  placement = "bottom start",
+  shouldFlip = true,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(HeadlessMenuTrigger, { placement, shouldFlip, ...rest, children });
+}
+MenuTrigger.Menu = Menu;
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "check-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: "h-full w-full",
+      children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
+    }
+  );
+}
+var DENSITY_HEIGHT = {
+  0: "h-12",
+  [-1]: "h-11",
+  [-2]: "h-10",
+  [-3]: "h-9"
+};
+var MenuItem = forwardRef(function MenuItem2({
+  children,
+  leadingIcon,
+  trailingIcon,
+  trailingText,
+  description,
+  badge,
+  className,
+  disableRipple: itemDisableRipple,
+  ...props
+}, ref) {
+  const ctx = useMenuContext();
+  const disableRipple = itemDisableRipple ?? ctx?.disableRipple ?? false;
+  const colorScheme = ctx?.colorScheme ?? "standard";
+  const menuStyle = ctx?.menuStyle ?? "baseline";
+  const density = ctx?.density ?? 0;
+  const selectionMode = ctx?.selectionMode;
+  const heightClass = DENSITY_HEIGHT[density];
+  const isSelectionMenu = selectionMode != null;
+  const { ripples, onMouseDown } = useRipple({ disabled: disableRipple });
+  const computeClassName = ({ isDisabled, isSelected }) => cn(
+    menuItemVariants({
+      isDisabled,
+      isSelected: isSelected ?? false,
+      colorScheme,
+      menuStyle
+    }),
+    // Height: auto when description is present (multi-line), otherwise density
+    description ? "min-h-12 py-2 h-auto items-start" : heightClass,
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    HeadlessMenuItem,
+    {
+      ...props,
+      ref,
+      className: computeClassName,
+      onMouseDown,
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        !disableRipple && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]", children: ripples }),
+        (leadingIcon != null || isSelectionMenu) && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-on-surface-variant relative z-10 flex h-6 w-6 shrink-0 items-center justify-center",
+            "aria-hidden": "true",
+            children: isSelectionMenu && leadingIcon == null ? isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null : leadingIcon
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-body-large", children }),
+          /* @__PURE__ */ jsx("span", { className: menuItemDescriptionVariants(), children: description })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-body-large relative z-10 min-w-0 flex-1", children }),
+        badge != null && /* @__PURE__ */ jsx("span", { className: "relative z-10 shrink-0", children: badge }),
+        trailingIcon != null && trailingText == null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-on-surface-variant relative z-10 ml-auto flex h-6 w-6 shrink-0 items-center justify-center",
+            "aria-hidden": "true",
+            children: trailingIcon
+          }
+        ),
+        trailingText != null && trailingIcon == null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(menuItemTrailingTextVariants(), "relative z-10"),
+            "aria-keyshortcuts": trailingText,
+            children: trailingText
+          }
+        )
+      ] })
+    }
+  );
+});
+function MenuSection({
+  children,
+  header,
+  showDivider = false,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const sectionAriaLabel = ariaLabel ?? header;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showDivider && /* @__PURE__ */ jsx(HeadlessMenuDivider, { className: menuDividerVariants() }),
+    /* @__PURE__ */ jsxs(
+      HeadlessMenuSection,
+      {
+        "aria-label": sectionAriaLabel,
+        className: cn(menuSectionVariants(), className),
+        children: [
+          header && /* @__PURE__ */ jsx(Header, { className: menuSectionHeaderVariants(), "aria-hidden": "true", children: header }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function MenuDivider({ className }) {
+  return /* @__PURE__ */ jsx(HeadlessMenuDivider, { className: cn(menuDividerVariants(), className) });
+}
+var SnackbarHeadless = forwardRef(
+  function SnackbarHeadless2({
+    message,
+    supportingText,
+    action,
+    showClose,
+    duration = 4e3,
+    severity = "default",
+    position = "bottom-center",
+    onClose,
+    children,
+    className,
+    getAnimationClassName
+  }, ref) {
+    const [animationState, setAnimationState] = useState("entering");
+    const remainingRef = useRef(duration);
+    const startedAtRef = useRef(Date.now());
+    const dismissTimerRef = useRef(null);
+    const exitFallbackRef = useRef(null);
+    const pausedRef = useRef(false);
+    const closedRef = useRef(false);
+    const clearDismissTimer = useCallback(() => {
+      if (dismissTimerRef.current !== null) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+      }
+    }, []);
+    const triggerExit = useCallback(() => {
+      if (closedRef.current) return;
+      clearDismissTimer();
+      setAnimationState("exiting");
+      exitFallbackRef.current = setTimeout(() => {
+        if (!closedRef.current) {
+          closedRef.current = true;
+          setAnimationState("exited");
+          onClose?.();
+        }
+      }, 250);
+    }, [clearDismissTimer, onClose]);
+    const startDismissTimer = useCallback(
+      (ms) => {
+        if (ms <= 0) return;
+        clearDismissTimer();
+        startedAtRef.current = Date.now();
+        dismissTimerRef.current = setTimeout(triggerExit, ms);
+      },
+      [clearDismissTimer, triggerExit]
+    );
+    useEffect(() => {
+      let frameId;
+      frameId = requestAnimationFrame(() => {
+        frameId = requestAnimationFrame(() => {
+          setAnimationState("visible");
+        });
+      });
+      return () => cancelAnimationFrame(frameId);
+    }, []);
+    useEffect(() => {
+      if (animationState !== "visible") return;
+      if (duration <= 0) return;
+      remainingRef.current = duration;
+      startDismissTimer(duration);
+      return clearDismissTimer;
+    }, [animationState, duration, startDismissTimer, clearDismissTimer]);
+    useEffect(
+      () => () => {
+        clearDismissTimer();
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+      },
+      [clearDismissTimer]
+    );
+    const handleTransitionEnd = useCallback(() => {
+      if (animationState === "exiting" && !closedRef.current) {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+        closedRef.current = true;
+        setAnimationState("exited");
+        onClose?.();
+      }
+    }, [animationState, onClose]);
+    const handleMouseEnter = useCallback(() => {
+      if (pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = true;
+      const elapsed = Date.now() - startedAtRef.current;
+      remainingRef.current = Math.max(remainingRef.current - elapsed, 0);
+      clearDismissTimer();
+    }, [animationState, clearDismissTimer]);
+    const handleMouseLeave = useCallback(() => {
+      if (!pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = false;
+      if (duration > 0) startDismissTimer(remainingRef.current);
+    }, [animationState, duration, startDismissTimer]);
+    const handleFocusIn = useCallback(() => {
+      if (pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = true;
+      const elapsed = Date.now() - startedAtRef.current;
+      remainingRef.current = Math.max(remainingRef.current - elapsed, 0);
+      clearDismissTimer();
+    }, [animationState, clearDismissTimer]);
+    const handleFocusOut = useCallback(() => {
+      if (!pausedRef.current || animationState !== "visible") return;
+      pausedRef.current = false;
+      if (duration > 0) startDismissTimer(remainingRef.current);
+    }, [animationState, duration, startDismissTimer]);
+    const handleClose = useCallback(() => {
+      triggerExit();
+    }, [triggerExit]);
+    const ariaProps = severity === "error" ? { role: "alert", "aria-live": "assertive", "aria-atomic": "true" } : { role: "status", "aria-live": "polite", "aria-atomic": "true" };
+    const computedClassName = cn(className, getAnimationClassName?.(animationState, position));
+    const childContent = typeof children === "function" ? children({ animationState, onClose: handleClose }) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: message }),
+      supportingText && /* @__PURE__ */ jsx("span", { children: supportingText }),
+      action && /* @__PURE__ */ jsx("button", { type: "button", onClick: action.onAction, children: action.label }),
+      showClose && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: handleClose, children: "\u2715" })
+    ] });
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: computedClassName,
+          ...ariaProps,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onFocus: handleFocusIn,
+          onBlur: handleFocusOut,
+          onTransitionEnd: handleTransitionEnd,
+          "data-animation-state": animationState,
+          children: childContent
+        }
+      )
+    );
+  }
+);
+SnackbarHeadless.displayName = "SnackbarHeadless";
+var snackbarStackContainerVariants = cva(
+  ["fixed", "z-50", "flex", "gap-2", "pointer-events-none"],
+  {
+    variants: {
+      position: {
+        "bottom-center": [
+          "bottom-4",
+          "left-1/2",
+          "-translate-x-1/2",
+          "flex-col-reverse",
+          "items-center"
+        ],
+        "bottom-left": ["bottom-4", "left-4", "flex-col-reverse", "items-start"],
+        "bottom-right": ["bottom-4", "right-4", "flex-col-reverse", "items-end"],
+        "top-center": ["top-4", "left-1/2", "-translate-x-1/2", "flex-col", "items-center"],
+        "top-left": ["top-4", "left-4", "flex-col", "items-start"],
+        "top-right": ["top-4", "right-4", "flex-col", "items-end"]
+      }
+    },
+    defaultVariants: { position: "bottom-center" }
+  }
+);
+var snackbarBaseVariants = cva(
+  [
+    // Sizing (MD3 spec: 288dp min, 568dp max)
+    "min-w-72",
+    "max-w-snackbar-max",
+    "w-max",
+    "min-h-12",
+    // Restore pointer events so hover/focus timer pause works
+    "pointer-events-auto",
+    // Surface
+    "bg-inverse-surface",
+    // Shape: MD3 extra-small corner = 4dp
+    "rounded-xs",
+    // Elevation level 3
+    "shadow-elevation-3",
+    // Layout
+    "flex",
+    "items-center",
+    "gap-x-1",
+    "pl-4 pr-2",
+    // Typography
+    "text-body-medium",
+    "text-inverse-on-surface",
+    // Transition (properties used by both entry and exit)
+    "transition-[opacity,transform]",
+    "will-change-[opacity,transform]"
+  ],
+  {
+    variants: {
+      /**
+       * Whether the Snackbar has supporting text (two-line layout).
+       * Adjusts vertical padding to MD3 spec for two-line configuration.
+       */
+      twoLine: {
+        true: "py-1",
+        false: "py-1"
+      }
+    },
+    defaultVariants: {
+      twoLine: false
+    }
+  }
+);
+cva("", {
+  variants: {
+    position: {
+      "bottom-center": ["bottom-4", "left-1/2", "-translate-x-1/2"],
+      "bottom-left": ["bottom-4", "left-4"],
+      "bottom-right": ["bottom-4", "right-4"],
+      "top-center": ["top-4", "left-1/2", "-translate-x-1/2"],
+      "top-left": ["top-4", "left-4"],
+      "top-right": ["top-4", "right-4"]
+    }
+  },
+  defaultVariants: {
+    position: "bottom-center"
+  }
+});
+var snackbarAnimationVariants = cva("", {
+  variants: {
+    animationState: {
+      entering: ["opacity-0", "scale-75"],
+      visible: ["scale-100", "opacity-100", "duration-medium1", "ease-emphasized-decelerate"],
+      exiting: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"],
+      exited: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"]
+    },
+    enterDirection: {
+      up: ["origin-bottom"],
+      down: ["origin-top"]
+    }
+  },
+  defaultVariants: {
+    animationState: "entering",
+    enterDirection: "up"
+  }
+});
+cva([...snackbarBaseVariants()], {
+  variants: {
+    animationState: {
+      entering: ["opacity-0", "scale-75"],
+      visible: ["scale-100", "opacity-100", "duration-medium1", "ease-emphasized-decelerate"],
+      exiting: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"],
+      exited: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"]
+    },
+    enterDirection: {
+      up: ["origin-bottom"],
+      down: ["origin-top"]
+    },
+    position: {
+      "bottom-center": ["bottom-4", "left-1/2", "-translate-x-1/2"],
+      "bottom-left": ["bottom-4", "left-4"],
+      "bottom-right": ["bottom-4", "right-4"],
+      "top-center": ["top-4", "left-1/2", "-translate-x-1/2"],
+      "top-left": ["top-4", "left-4"],
+      "top-right": ["top-4", "right-4"]
+    },
+    twoLine: {
+      true: "py-1",
+      false: "py-1"
+    }
+  },
+  defaultVariants: {
+    animationState: "entering",
+    enterDirection: "up",
+    position: "bottom-center",
+    twoLine: false
+  }
+});
+var snackbarMessageVariants = cva([
+  "flex-1",
+  "text-body-medium",
+  "text-inverse-on-surface"
+]);
+var snackbarSupportingTextVariants = cva([
+  "text-body-medium",
+  "text-inverse-on-surface",
+  "opacity-80"
+]);
+var snackbarActionVariants = cva(["shrink-0", "text-inverse-primary"]);
+var snackbarCloseVariants = cva(["shrink-0", "text-inverse-on-surface"]);
+var snackbarContentVariants = cva(["flex", "flex-col", "flex-1", "min-w-0 py-2 pr-2"]);
+cva(["scale-75", "opacity-0"]);
+function getEnterDirection(position) {
+  return position.startsWith("top") ? "down" : "up";
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+    }
+  );
+}
+var Snackbar = forwardRef(function Snackbar2({
+  message,
+  supportingText,
+  action,
+  showClose = false,
+  duration = 4e3,
+  severity = "default",
+  position = "bottom-center",
+  onClose,
+  className
+}, ref) {
+  const isTwoLine = Boolean(supportingText);
+  const baseClassName = cn(snackbarBaseVariants({ twoLine: isTwoLine }), className);
+  return /* @__PURE__ */ jsx(
+    SnackbarHeadless,
+    {
+      ref,
+      message,
+      ...supportingText !== void 0 && { supportingText },
+      ...action !== void 0 && { action },
+      showClose,
+      duration,
+      severity,
+      position,
+      ...onClose !== void 0 && { onClose },
+      className: baseClassName,
+      getAnimationClassName: (state, pos) => snackbarAnimationVariants({ animationState: state, enterDirection: getEnterDirection(pos) }),
+      children: ({ onClose: triggerClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: snackbarContentVariants(), children: [
+          /* @__PURE__ */ jsx("span", { className: snackbarMessageVariants(), children: message }),
+          supportingText && /* @__PURE__ */ jsx("span", { className: snackbarSupportingTextVariants(), children: supportingText })
+        ] }),
+        action && /* @__PURE__ */ jsx("span", { className: snackbarActionVariants(), children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            onPress: action.onAction,
+            className: "text-inverse-primary hover:text-inverse-primary",
+            children: action.label
+          }
+        ) }),
+        showClose && /* @__PURE__ */ jsx("span", { className: snackbarCloseVariants(), children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "standard",
+            "aria-label": "Close",
+            onPress: triggerClose,
+            className: "text-inverse-on-surface hover:text-inverse-on-surface",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) })
+      ] })
+    }
+  );
+});
+Snackbar.displayName = "Snackbar";
+var SnackbarContext = createContext(null);
+function useSnackbar() {
+  const ctx = useContext(SnackbarContext);
+  if (!ctx) {
+    throw new Error(
+      "[Snackbar] useSnackbar must be used inside <SnackbarProvider>. Wrap your application (or Storybook decorator) with <SnackbarProvider>."
+    );
+  }
+  return ctx;
+}
+function SnackbarProvider({ children, maxVisible = 5 }) {
+  const [queue, setQueue] = useState([]);
+  const counterRef = useRef(0);
+  const baseId = useId();
+  const showSnackbar = useCallback(
+    (options) => {
+      const id = `${baseId}-snackbar-${++counterRef.current}`;
+      setQueue((prev) => [...prev, { ...options, id }]);
+      return id;
+    },
+    [baseId]
+  );
+  const closeSnackbar = useCallback(() => {
+    setQueue((prev) => {
+      if (prev.length === 0) return prev;
+      return prev.slice(1);
+    });
+  }, []);
+  const removeById = useCallback((id) => {
+    setQueue((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const contextValue = { showSnackbar, closeSnackbar };
+  const positionGroups = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    const countByPosition = /* @__PURE__ */ new Map();
+    for (const item of queue) {
+      const pos = item.position ?? "bottom-center";
+      const count = countByPosition.get(pos) ?? 0;
+      if (count < maxVisible) {
+        const existing = groups.get(pos) ?? [];
+        groups.set(pos, [...existing, item]);
+        countByPosition.set(pos, count + 1);
+      }
+    }
+    return groups;
+  }, [queue, maxVisible]);
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(Fragment, { children: Array.from(positionGroups.entries()).map(([position, items]) => /* @__PURE__ */ jsx("div", { className: snackbarStackContainerVariants({ position }), children: items.map((item) => /* @__PURE__ */ jsx(
+        Snackbar,
+        {
+          message: item.message,
+          ...item.supportingText !== void 0 && {
+            supportingText: item.supportingText
+          },
+          ...item.action !== void 0 && { action: item.action },
+          ...item.showClose !== void 0 && { showClose: item.showClose },
+          ...item.duration !== void 0 && { duration: item.duration },
+          ...item.severity !== void 0 && { severity: item.severity },
+          ...item.position !== void 0 && { position: item.position },
+          ...item.className !== void 0 && { className: item.className },
+          onClose: () => {
+            item.onClose?.();
+            removeById(item.id);
+          }
+        },
+        item.id
+      )) }, position)) }),
+      document.body
+    )
+  ] });
+}
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const ctx = useContext(DialogContext);
+  if (ctx === null) {
+    throw new Error(
+      "[Dialog] DialogHeadline, DialogContent, and DialogActions must be rendered inside a <Dialog> or <DialogHeadless> component."
+    );
+  }
+  return ctx;
+}
+var DialogPanel = ({
+  ariaLabel,
+  headlineId,
+  contentId,
+  onClose,
+  onTransitionEnd,
+  variant,
+  isDismissable,
+  wrapperClassName,
+  className,
+  animationState,
+  getAnimationClassName,
+  children
+}) => {
+  const panelRef = useRef(null);
+  usePreventScroll();
+  const { dialogProps } = useDialog(
+    {
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      "aria-labelledby": headlineId,
+      "aria-describedby": contentId
+    },
+    panelRef
+  );
+  const { overlayProps } = useOverlay(
+    {
+      isOpen: true,
+      onClose,
+      isDismissable,
+      shouldCloseOnBlur: false
+    },
+    panelRef
+  );
+  const panelClassName = cn(className, getAnimationClassName?.(animationState));
+  return (
+    // Centering/positioning wrapper — structural only, no ARIA role
+    /* @__PURE__ */ jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...mergeProps(overlayProps, dialogProps),
+        ref: panelRef,
+        "aria-modal": "true",
+        className: panelClassName,
+        "data-animation-state": animationState,
+        "data-variant": variant,
+        onTransitionEnd,
+        children
+      }
+    ) })
+  );
+};
+DialogPanel.displayName = "DialogPanel";
+var DialogHeadless = forwardRef(
+  function DialogHeadless2({
+    variant = "basic",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    scrimClassName,
+    getAnimationClassName
+  }, _ref) {
+    const state = useOverlayTriggerState({
+      ...open !== void 0 ? { isOpen: open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {}
+    });
+    const isOpen = state.isOpen;
+    const close = useCallback(() => {
+      state.close();
+    }, [state]);
+    const [animationState, setAnimationState] = useState("exited");
+    const closedRef = useRef(false);
+    const exitFallbackRef = useRef(null);
+    useEffect(() => {
+      if (!isOpen) return;
+      closedRef.current = false;
+      setAnimationState("entering");
+      const id = setTimeout(() => {
+        setAnimationState("visible");
+      }, 0);
+      return () => clearTimeout(id);
+    }, [isOpen]);
+    useEffect(() => {
+      if (isOpen) return;
+      if (animationState === "exited" || animationState === "entering") return;
+      if (animationState === "visible") {
+        setAnimationState("exiting");
+        exitFallbackRef.current = setTimeout(() => {
+          if (!closedRef.current) {
+            closedRef.current = true;
+            setAnimationState("exited");
+          }
+        }, 150);
+      }
+    }, [isOpen, animationState]);
+    useEffect(
+      () => () => {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+        }
+      },
+      []
+    );
+    const handleTransitionEnd = useCallback(() => {
+      if (animationState === "exiting" && !closedRef.current) {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+        closedRef.current = true;
+        setAnimationState("exited");
+      }
+    }, [animationState]);
+    const baseId = useId();
+    const headlineId = `${baseId}-dialog-headline`;
+    const contentId = `${baseId}-dialog-content`;
+    const contextValue = {
+      headlineId,
+      contentId,
+      close,
+      variant
+    };
+    const handleScrimClick = useCallback(() => {
+      if (variant === "basic") {
+        close();
+      }
+    }, [variant, close]);
+    if (!isOpen && animationState === "exited") {
+      return null;
+    }
+    const content = /* @__PURE__ */ jsxs(DialogContext.Provider, { value: contextValue, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "dialog-scrim",
+          className: scrimClassName,
+          onClick: handleScrimClick,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx(
+        DialogPanel,
+        {
+          ariaLabel,
+          headlineId,
+          contentId,
+          onClose: close,
+          onTransitionEnd: handleTransitionEnd,
+          variant,
+          isDismissable: variant === "basic",
+          wrapperClassName: variant === "basic" ? "fixed inset-0 z-50 flex items-center justify-center px-4" : "fixed inset-0 z-50",
+          className,
+          animationState,
+          getAnimationClassName,
+          children
+        }
+      ) })
+    ] });
+    if (typeof document === "undefined") return null;
+    return createPortal(content, document.body);
+  }
+);
+DialogHeadless.displayName = "DialogHeadless";
+var dialogScrimVariants = cva([
+  "fixed",
+  "inset-0",
+  "z-40",
+  "bg-scrim",
+  "opacity-32",
+  "transition-opacity",
+  "duration-medium2",
+  "ease-standard"
+]);
+var dialogPanelVariants = cva(
+  [
+    // Stacking above scrim
+    "z-50",
+    // Surface
+    "bg-surface-container-high",
+    // Flex column layout for slots
+    "flex",
+    "flex-col",
+    // Transition for animation state changes
+    "transition-[opacity,transform]",
+    "will-change-[opacity,transform]"
+  ],
+  {
+    variants: {
+      variant: {
+        basic: [
+          // Shape: MD3 extra-large = 28dp
+          "rounded-xl",
+          // Elevation level 3
+          "shadow-elevation-3",
+          // Width constraints per MD3 spec (280dp min, 560dp max)
+          "min-w-70",
+          "max-w-dialog-max",
+          "w-full",
+          // Internal spacing
+          "pt-6",
+          "pb-3",
+          "px-6",
+          // Positioned in viewport center
+          "relative"
+        ],
+        fullscreen: [
+          // Full viewport
+          "w-full",
+          "h-full",
+          // No rounded corners on fullscreen
+          "rounded-none",
+          // No elevation shadow on fullscreen
+          "shadow-none",
+          // Positioned to fill portal
+          "relative"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "basic"
+    }
+  }
+);
+cva([], {
+  variants: {
+    variant: {
+      basic: ["fixed", "inset-0", "z-50", "flex", "items-center", "justify-center", "px-4"],
+      fullscreen: ["fixed", "inset-0", "z-50"]
+    }
+  },
+  defaultVariants: {
+    variant: "basic"
+  }
+});
+var dialogAnimationVariants = cva("", {
+  variants: {
+    animationState: {
+      entering: [],
+      visible: [],
+      exiting: [],
+      exited: []
+    },
+    variant: {
+      basic: [],
+      fullscreen: []
+    }
+  },
+  compoundVariants: [
+    // Basic: entering — start scaled down + transparent
+    {
+      animationState: "entering",
+      variant: "basic",
+      className: ["scale-90", "opacity-0"]
+    },
+    // Basic: visible — scale to full + fade in
+    {
+      animationState: "visible",
+      variant: "basic",
+      className: ["scale-100", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+    },
+    // Basic: exiting — fade out (scale stays at 1)
+    {
+      animationState: "exiting",
+      variant: "basic",
+      className: ["scale-100", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+    },
+    // Basic: exited — fully transparent
+    {
+      animationState: "exited",
+      variant: "basic",
+      className: ["scale-100", "opacity-0"]
+    },
+    // Fullscreen: entering — start below viewport + transparent
+    {
+      animationState: "entering",
+      variant: "fullscreen",
+      className: ["translate-y-full", "opacity-0"]
+    },
+    // Fullscreen: visible — slide up + fade in
+    {
+      animationState: "visible",
+      variant: "fullscreen",
+      className: ["translate-y-0", "opacity-100", "duration-medium4", "ease-emphasized-decelerate"]
+    },
+    // Fullscreen: exiting — slide down + fade out
+    {
+      animationState: "exiting",
+      variant: "fullscreen",
+      className: ["translate-y-full", "opacity-0", "duration-short2", "ease-emphasized-accelerate"]
+    },
+    // Fullscreen: exited — fully off-screen
+    {
+      animationState: "exited",
+      variant: "fullscreen",
+      className: ["translate-y-full", "opacity-0"]
+    }
+  ],
+  defaultVariants: {
+    animationState: "entering",
+    variant: "basic"
+  }
+});
+var dialogHeadlineVariants = cva(["text-headline-small", "text-on-surface"], {
+  variants: {
+    variant: {
+      basic: ["mb-4"],
+      fullscreen: [
+        // Top app bar row in fullscreen: flex, items-center, gap
+        "flex",
+        "items-center",
+        "gap-4",
+        "px-4",
+        "h-14",
+        "shrink-0",
+        "border-b",
+        "border-outline-variant"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "basic"
+  }
+});
+var dialogHeadlineTitleVariants = cva([
+  "flex-1",
+  "text-headline-small",
+  "text-on-surface",
+  "truncate"
+]);
+var dialogContentVariants = cva(
+  ["text-body-medium", "text-on-surface-variant", "overflow-y-auto", "flex-1"],
+  {
+    variants: {
+      variant: {
+        basic: ["mb-6"],
+        fullscreen: ["px-6", "py-4"]
+      }
+    },
+    defaultVariants: {
+      variant: "basic"
+    }
+  }
+);
+var dialogActionsVariants = cva([
+  "flex",
+  "items-center",
+  "justify-end",
+  "gap-2",
+  "pt-3",
+  "shrink-0"
+]);
+var Dialog = forwardRef(function Dialog2({
+  variant = "basic",
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  "aria-label": ariaLabel,
+  children,
+  className
+}, _ref) {
+  const panelClassName = cn(dialogPanelVariants({ variant }), className);
+  const scrimClass = dialogScrimVariants();
+  return /* @__PURE__ */ jsx(
+    DialogHeadless,
+    {
+      variant,
+      ...open !== void 0 ? { open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {},
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      className: panelClassName,
+      scrimClassName: scrimClass,
+      getAnimationClassName: (state) => dialogAnimationVariants({ animationState: state, variant }),
+      children
+    }
+  );
+});
+Dialog.displayName = "Dialog";
+var DialogHeadline = forwardRef(
+  function DialogHeadline2({ children, className, closeButton, confirmButton }, ref) {
+    const { headlineId, variant } = useDialogContext();
+    if (variant === "fullscreen") {
+      return (
+        // Top app bar row for fullscreen variant
+        /* @__PURE__ */ jsxs("div", { className: cn(dialogHeadlineVariants({ variant: "fullscreen" }), className), children: [
+          closeButton,
+          /* @__PURE__ */ jsx("h2", { id: headlineId, className: dialogHeadlineTitleVariants(), children }),
+          confirmButton
+        ] })
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        ref,
+        id: headlineId,
+        className: cn(dialogHeadlineVariants({ variant: "basic" }), className),
+        children
+      }
+    );
+  }
+);
+DialogHeadline.displayName = "DialogHeadline";
+var DialogContent = forwardRef(function DialogContent2({ children, className }, ref) {
+  const { contentId, variant } = useDialogContext();
+  return /* @__PURE__ */ jsx("div", { ref, id: contentId, className: cn(dialogContentVariants({ variant }), className), children });
+});
+DialogContent.displayName = "DialogContent";
+var DialogActions = forwardRef(function DialogActions2({ children, className }, ref) {
+  useDialogContext();
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(dialogActionsVariants(), className), children });
+});
+DialogActions.displayName = "DialogActions";
 
-export { AppBar, AppBarHeadless, Button, Checkbox, Drawer, DrawerItem, DrawerSection, FAB, FABHeadless, HeadlessDrawer, HeadlessDrawerItem, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, NavigationBar, NavigationBarItem, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };
+export { AppBar, AppBarHeadless, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Drawer, DrawerItem, DrawerSection, FAB, FABHeadless, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, useDialogContext, useMenuContext, useSnackbar, withOpacity };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map