@tinybigui/react 0.19.0 → 0.20.0

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.19.0** (2026-06-10)
+> **Latest Release: v0.20.0** (2026-06-10)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -159,14 +159,14 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 
 ### Phase 3: Feedback ✅
 
-| Component     | Status | Description                                                                 |
-| ------------- | ------ | --------------------------------------------------------------------------- |
-| `Dialog`      | ✅     | Basic and fullscreen modal dialogs                                          |
-| `Snackbar`    | ✅     | Provider, stacking, imperative API                                          |
-| `Menu`        | ✅     | Dropdown, context menu, submenus                                            |
-| `Progress`    | ✅     | MD3 expressive slot CVA, colorful tokens, wavy shape, thick track (v0.16.0) |
-| `BottomSheet` | ✅     | MD3 expressive handle, variants-vs-states architecture (v0.11.0)            |
-| `Tooltip`     | ✅     | Plain and rich tooltip with positioning                                     |
+| Component     | Status | Description                                                                        |
+| ------------- | ------ | ---------------------------------------------------------------------------------- |
+| `Dialog`      | ✅     | Basic and fullscreen modal dialogs                                                 |
+| `Snackbar`    | ✅     | MD3 slot-based architecture, inverse-surface state layers, spring motion (v0.20.0) |
+| `Menu`        | ✅     | Dropdown, context menu, submenus                                                   |
+| `Progress`    | ✅     | MD3 expressive slot CVA, colorful tokens, wavy shape, thick track (v0.16.0)        |
+| `BottomSheet` | ✅     | MD3 expressive handle, variants-vs-states architecture (v0.11.0)                   |
+| `Tooltip`     | ✅     | Plain and rich tooltip with positioning                                            |
 
 ### Phase 4: Data Display ✅
 

package/dist/index.cjs

@@ -6560,7 +6560,6 @@ var snackbarBaseVariants = classVarianceAuthority.cva(
     "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
@@ -6571,25 +6570,27 @@ var snackbarBaseVariants = classVarianceAuthority.cva(
     "shadow-elevation-3",
     // Layout
     "flex",
-    "items-center",
     "gap-x-1",
-    "pl-4 pr-2",
-    // Typography
+    "pl-4",
+    // Typography base (inherited by message/supporting-text slots)
     "text-body-medium",
     "text-inverse-on-surface",
-    // Transition (properties used by both entry and exit)
+    // Slide + fade transition — spring-standard effects tokens (no overshoot).
+    // The translate offset is small (12px), so using the effects token pair for
+    // BOTH opacity AND transform is safe: no visible overshoot at this scale.
     "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.
+       * Two-line density mode.
+       *   false — 48dp, items centered (single-line message)
+       *   true  — 68dp, items top-aligned (message + supporting text)
        */
       twoLine: {
-        true: "py-1",
-        false: "py-1"
+        false: ["min-h-12", "items-center", "pr-1"],
+        true: ["min-h-[4.25rem]", "items-start", "pr-1"]
       }
     },
     defaultVariants: {
@@ -6615,53 +6616,211 @@ classVarianceAuthority.cva("", {
 var snackbarAnimationVariants = classVarianceAuthority.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"]
+      entering: [],
+      visible: [],
+      exiting: [],
+      exited: []
     },
     enterDirection: {
-      up: ["origin-bottom"],
-      down: ["origin-top"]
+      up: [],
+      down: []
     }
   },
-  defaultVariants: {
-    animationState: "entering",
-    enterDirection: "up"
-  }
-});
-classVarianceAuthority.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"]
+  compoundVariants: [
+    // ── entering ──────────────────────────────────────────────────────────────
+    // No transition duration — instant jump to offset state before first paint.
+    {
+      animationState: "entering",
+      enterDirection: "up",
+      className: ["opacity-0", "translate-y-3"]
     },
-    enterDirection: {
-      up: ["origin-bottom"],
-      down: ["origin-top"]
+    {
+      animationState: "entering",
+      enterDirection: "down",
+      className: ["opacity-0", "-translate-y-3"]
     },
-    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"]
+    // ── visible ───────────────────────────────────────────────────────────────
+    // spring-standard default effects = 200ms, no overshoot.
+    {
+      animationState: "visible",
+      enterDirection: "up",
+      className: [
+        "opacity-100",
+        "translate-y-0",
+        "duration-spring-standard-default-effects",
+        "ease-spring-standard-default-effects"
+      ]
+    },
+    {
+      animationState: "visible",
+      enterDirection: "down",
+      className: [
+        "opacity-100",
+        "translate-y-0",
+        "duration-spring-standard-default-effects",
+        "ease-spring-standard-default-effects"
+      ]
+    },
+    // ── exiting ───────────────────────────────────────────────────────────────
+    // spring-standard fast effects = 150ms (quicker exit).
+    {
+      animationState: "exiting",
+      enterDirection: "up",
+      className: [
+        "opacity-0",
+        "translate-y-3",
+        "duration-spring-standard-fast-effects",
+        "ease-spring-standard-fast-effects"
+      ]
     },
-    twoLine: {
-      true: "py-1",
-      false: "py-1"
+    {
+      animationState: "exiting",
+      enterDirection: "down",
+      className: [
+        "opacity-0",
+        "-translate-y-3",
+        "duration-spring-standard-fast-effects",
+        "ease-spring-standard-fast-effects"
+      ]
+    },
+    // ── exited ────────────────────────────────────────────────────────────────
+    // Hold final position — element is removed from DOM shortly after.
+    {
+      animationState: "exited",
+      enterDirection: "up",
+      className: ["opacity-0", "translate-y-3"]
+    },
+    {
+      animationState: "exited",
+      enterDirection: "down",
+      className: ["opacity-0", "-translate-y-3"]
     }
-  },
+  ],
   defaultVariants: {
     animationState: "entering",
-    enterDirection: "up",
-    position: "bottom-center",
-    twoLine: false
+    enterDirection: "up"
   }
 });
+classVarianceAuthority.cva(
+  [
+    "min-w-72",
+    "max-w-snackbar-max",
+    "w-max",
+    "pointer-events-auto",
+    "bg-inverse-surface",
+    "rounded-xs",
+    "shadow-elevation-3",
+    "flex",
+    "gap-x-1",
+    "pl-4",
+    "text-body-medium",
+    "text-inverse-on-surface",
+    "transition-[opacity,transform]",
+    "will-change-[opacity,transform]"
+  ],
+  {
+    variants: {
+      twoLine: {
+        false: ["min-h-12", "items-center", "pr-1"],
+        true: ["min-h-[4.25rem]", "items-start", "pr-1"]
+      },
+      animationState: {
+        entering: [],
+        visible: [],
+        exiting: [],
+        exited: []
+      },
+      enterDirection: {
+        up: [],
+        down: []
+      },
+      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"]
+      }
+    },
+    compoundVariants: [
+      {
+        animationState: "entering",
+        enterDirection: "up",
+        className: ["opacity-0", "translate-y-3"]
+      },
+      {
+        animationState: "entering",
+        enterDirection: "down",
+        className: ["opacity-0", "-translate-y-3"]
+      },
+      {
+        animationState: "visible",
+        enterDirection: "up",
+        className: [
+          "opacity-100",
+          "translate-y-0",
+          "duration-spring-standard-default-effects",
+          "ease-spring-standard-default-effects"
+        ]
+      },
+      {
+        animationState: "visible",
+        enterDirection: "down",
+        className: [
+          "opacity-100",
+          "translate-y-0",
+          "duration-spring-standard-default-effects",
+          "ease-spring-standard-default-effects"
+        ]
+      },
+      {
+        animationState: "exiting",
+        enterDirection: "up",
+        className: [
+          "opacity-0",
+          "translate-y-3",
+          "duration-spring-standard-fast-effects",
+          "ease-spring-standard-fast-effects"
+        ]
+      },
+      {
+        animationState: "exiting",
+        enterDirection: "down",
+        className: [
+          "opacity-0",
+          "-translate-y-3",
+          "duration-spring-standard-fast-effects",
+          "ease-spring-standard-fast-effects"
+        ]
+      },
+      {
+        animationState: "exited",
+        enterDirection: "up",
+        className: ["opacity-0", "translate-y-3"]
+      },
+      {
+        animationState: "exited",
+        enterDirection: "down",
+        className: ["opacity-0", "-translate-y-3"]
+      }
+    ],
+    defaultVariants: {
+      animationState: "entering",
+      enterDirection: "up",
+      position: "bottom-center",
+      twoLine: false
+    }
+  }
+);
+var snackbarContentVariants = classVarianceAuthority.cva([
+  "flex",
+  "flex-col",
+  "flex-1",
+  "min-w-0",
+  "py-3",
+  "pr-2"
+]);
 var snackbarMessageVariants = classVarianceAuthority.cva([
   "flex-1",
   "text-body-medium",
@@ -6670,15 +6829,83 @@ var snackbarMessageVariants = classVarianceAuthority.cva([
 var snackbarSupportingTextVariants = classVarianceAuthority.cva([
   "text-body-medium",
   "text-inverse-on-surface",
-  "opacity-80"
+  "mt-1"
 ]);
-var snackbarActionVariants = classVarianceAuthority.cva(["shrink-0", "text-inverse-primary"]);
-var snackbarCloseVariants = classVarianceAuthority.cva(["shrink-0", "text-inverse-on-surface"]);
-var snackbarContentVariants = classVarianceAuthority.cva(["flex", "flex-col", "flex-1", "min-w-0 py-2 pr-2"]);
-classVarianceAuthority.cva(["scale-75", "opacity-0"]);
+classVarianceAuthority.cva(["opacity-0"]);
 function getEnterDirection(position) {
   return position.startsWith("top") ? "down" : "up";
 }
+var snackbarActionVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative inline-flex items-center justify-center shrink-0",
+  "h-9 px-3",
+  "rounded-full cursor-pointer select-none",
+  // Typography (MD3 text button: label-large)
+  "text-label-large",
+  "text-inverse-primary",
+  // Effects transition (color)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:text-on-surface/38"
+]);
+var snackbarActionStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+  "bg-inverse-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/snackbar-action:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/snackbar-action:opacity-10",
+  // Pressed: 10%, doubled selector wins over hover
+  "group-data-[pressed]/snackbar-action:group-data-[pressed]/snackbar-action:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/snackbar-action:hidden"
+]);
+var snackbarActionFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-2 outline-offset-0 outline-inverse-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/snackbar-action:opacity-100"
+]);
+var snackbarCloseVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative inline-flex items-center justify-center shrink-0",
+  "size-8",
+  "rounded-full cursor-pointer select-none",
+  // Color
+  "text-inverse-on-surface",
+  // Effects transition (color)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:text-on-surface/38"
+]);
+var snackbarCloseStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+  "bg-inverse-on-surface",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/snackbar-close:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/snackbar-close:opacity-10",
+  // Pressed: 10%, doubled selector wins over hover
+  "group-data-[pressed]/snackbar-close:group-data-[pressed]/snackbar-close:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/snackbar-close:hidden"
+]);
+var snackbarCloseFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-2 outline-offset-0 outline-inverse-on-surface",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/snackbar-close:opacity-100"
+]);
+var snackbarCloseIconVariants = classVarianceAuthority.cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center",
+  "size-6"
+]);
 function CloseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -6693,6 +6920,52 @@ function CloseIcon() {
     }
   );
 }
+function SnackbarActionButton({ label, onAction }) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton({ onPress: onAction }, ref);
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ...reactAria.mergeProps(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarActionVariants(), "group/snackbar-action"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarActionStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarActionFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: label })
+      ]
+    }
+  );
+}
+function SnackbarCloseButton({ onPress }) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton({ onPress, "aria-label": "Close" }, ref);
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ...reactAria.mergeProps(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarCloseVariants(), "group/snackbar-close"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseIconVariants(), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
 var Snackbar = React.forwardRef(function Snackbar2({
   message,
   supportingText,
@@ -6705,6 +6978,7 @@ var Snackbar = React.forwardRef(function Snackbar2({
   className
 }, ref) {
   const isTwoLine = Boolean(supportingText);
+  const reducedMotion = useReducedMotion();
   const baseClassName = cn(snackbarBaseVariants({ twoLine: isTwoLine }), className);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SnackbarHeadless,
@@ -6719,31 +6993,22 @@ var Snackbar = React.forwardRef(function Snackbar2({
       position,
       ...onClose !== void 0 && { onClose },
       className: baseClassName,
-      getAnimationClassName: (state, pos) => snackbarAnimationVariants({ animationState: state, enterDirection: getEnterDirection(pos) }),
+      getAnimationClassName: (state, pos) => {
+        if (reducedMotion) {
+          return state === "visible" ? "opacity-100 duration-spring-standard-default-effects ease-spring-standard-default-effects" : "opacity-0";
+        }
+        return snackbarAnimationVariants({
+          animationState: state,
+          enterDirection: getEnterDirection(pos)
+        });
+      },
       children: ({ onClose: triggerClose }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: snackbarContentVariants(), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarMessageVariants(), children: message }),
           supportingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarSupportingTextVariants(), children: supportingText })
         ] }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarActionVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "text",
-            onPress: action.onAction,
-            className: "text-inverse-primary hover:text-inverse-primary px-3",
-            children: action.label
-          }
-        ) }),
-        showClose && /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton,
-          {
-            variant: "standard",
-            "aria-label": "Close",
-            onPress: triggerClose,
-            className: "text-inverse-on-surface hover:text-inverse-on-surface",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
-          }
-        ) })
+        action && /* @__PURE__ */ jsxRuntime.jsx(SnackbarActionButton, { label: action.label, onAction: action.onAction }),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(SnackbarCloseButton, { onPress: triggerClose })
       ] })
     }
   );