@tinybigui/react 0.19.0 → 0.20.0

package/dist/index.d.cts

@@ -5477,10 +5477,19 @@ type SnackbarSeverity = "default" | "error";
 /**
  * Internal animation state machine for the Snackbar.
  *
- * - `entering` → zoom-in start: scale-75 + opacity-0 (no duration, paints before transition)
- * - `visible`  → scale-100 + opacity-100 (medium1 / standard-decelerate = 250ms)
- * - `exiting`  → scale-75 + opacity-0 (short4 / standard-accelerate = 200ms)
+ * - `entering` → initial paint: opacity-0 + directional translate offset (no duration)
+ * - `visible`  → slide in + fade in: translate-y-0 + opacity-100
+ *                (spring-standard-default-effects = 200ms, no overshoot)
+ * - `exiting`  → slide out + fade out: offset + opacity-0
+ *                (spring-standard-fast-effects = 150ms)
  * - `exited`   → removed from DOM / stack updated
+ *
+ * The translate direction is position-aware:
+ *   bottom positions → slide up from below (translate-y-3 → translate-y-0)
+ *   top positions    → slide down from above (-translate-y-3 → translate-y-0)
+ *
+ * When `prefers-reduced-motion` is active, the translate offset is suppressed
+ * and only opacity transitions (fade-only).
  */
 type SnackbarAnimationState = "entering" | "visible" | "exiting" | "exited";
 /**
@@ -5679,14 +5688,23 @@ interface SnackbarProviderProps {
  * Renders one of four MD3 Snackbar content configurations:
  * 1. Single-line message only
  * 2. Two-line message + `supportingText`
- * 3. Single-line with text `action` button (styled `Button variant="text"` with
- *    `inverse-primary` color per MD3 spec)
+ * 3. Single-line with text `action` button (styled with `inverse-primary` per MD3 spec)
  * 4. Single-line with close icon (or combined with action)
  *
  * Uses `SnackbarHeadless` for all behavioral concerns (ARIA live region,
  * auto-dismiss timer with pause/resume, animation state machine) and CVA
  * variants for MD3-compliant visual styling.
  *
+ * **Motion**: Position-aware slide + fade using spring-standard effects tokens.
+ * Automatically respects `prefers-reduced-motion` (fade-only when reduced motion
+ * is preferred — no translate offset).
+ *
+ * **State layers**: Dedicated slot components (`SnackbarActionButton`,
+ * `SnackbarCloseButton`) replace the shared `Button`/`IconButton` components.
+ * This ensures the state-layer colors are MD3-correct on an `inverse-surface`:
+ * - Action button state layer: `bg-inverse-primary`
+ * - Close button state layer: `bg-inverse-on-surface`
+ *
  * For typical app usage, render inside `SnackbarProvider` and trigger via
  * the `useSnackbar` hook. For declarative/test usage, it can be rendered
  * standalone.

package/dist/index.d.ts

@@ -5477,10 +5477,19 @@ type SnackbarSeverity = "default" | "error";
 /**
  * Internal animation state machine for the Snackbar.
  *
- * - `entering` → zoom-in start: scale-75 + opacity-0 (no duration, paints before transition)
- * - `visible`  → scale-100 + opacity-100 (medium1 / standard-decelerate = 250ms)
- * - `exiting`  → scale-75 + opacity-0 (short4 / standard-accelerate = 200ms)
+ * - `entering` → initial paint: opacity-0 + directional translate offset (no duration)
+ * - `visible`  → slide in + fade in: translate-y-0 + opacity-100
+ *                (spring-standard-default-effects = 200ms, no overshoot)
+ * - `exiting`  → slide out + fade out: offset + opacity-0
+ *                (spring-standard-fast-effects = 150ms)
  * - `exited`   → removed from DOM / stack updated
+ *
+ * The translate direction is position-aware:
+ *   bottom positions → slide up from below (translate-y-3 → translate-y-0)
+ *   top positions    → slide down from above (-translate-y-3 → translate-y-0)
+ *
+ * When `prefers-reduced-motion` is active, the translate offset is suppressed
+ * and only opacity transitions (fade-only).
  */
 type SnackbarAnimationState = "entering" | "visible" | "exiting" | "exited";
 /**
@@ -5679,14 +5688,23 @@ interface SnackbarProviderProps {
  * Renders one of four MD3 Snackbar content configurations:
  * 1. Single-line message only
  * 2. Two-line message + `supportingText`
- * 3. Single-line with text `action` button (styled `Button variant="text"` with
- *    `inverse-primary` color per MD3 spec)
+ * 3. Single-line with text `action` button (styled with `inverse-primary` per MD3 spec)
  * 4. Single-line with close icon (or combined with action)
  *
  * Uses `SnackbarHeadless` for all behavioral concerns (ARIA live region,
  * auto-dismiss timer with pause/resume, animation state machine) and CVA
  * variants for MD3-compliant visual styling.
  *
+ * **Motion**: Position-aware slide + fade using spring-standard effects tokens.
+ * Automatically respects `prefers-reduced-motion` (fade-only when reduced motion
+ * is preferred — no translate offset).
+ *
+ * **State layers**: Dedicated slot components (`SnackbarActionButton`,
+ * `SnackbarCloseButton`) replace the shared `Button`/`IconButton` components.
+ * This ensures the state-layer colors are MD3-correct on an `inverse-surface`:
+ * - Action button state layer: `bg-inverse-primary`
+ * - Close button state layer: `bg-inverse-on-surface`
+ *
  * For typical app usage, render inside `SnackbarProvider` and trigger via
  * the `useSnackbar` hook. For declarative/test usage, it can be rendered
  * standalone.

package/dist/index.js

@@ -6555,7 +6555,6 @@ var snackbarBaseVariants = 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
@@ -6566,25 +6565,27 @@ var snackbarBaseVariants = 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: {
@@ -6610,53 +6611,211 @@ cva("", {
 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"]
+      entering: [],
+      visible: [],
+      exiting: [],
+      exited: []
     },
     enterDirection: {
-      up: ["origin-bottom"],
-      down: ["origin-top"]
+      up: [],
+      down: []
     }
   },
-  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"]
+  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"
   }
 });
+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 = cva([
+  "flex",
+  "flex-col",
+  "flex-1",
+  "min-w-0",
+  "py-3",
+  "pr-2"
+]);
 var snackbarMessageVariants = cva([
   "flex-1",
   "text-body-medium",
@@ -6665,15 +6824,83 @@ var snackbarMessageVariants = cva([
 var snackbarSupportingTextVariants = cva([
   "text-body-medium",
   "text-inverse-on-surface",
-  "opacity-80"
+  "mt-1"
 ]);
-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"]);
+cva(["opacity-0"]);
 function getEnterDirection(position) {
   return position.startsWith("top") ? "down" : "up";
 }
+var snackbarActionVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center",
+  "size-6"
+]);
 function CloseIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -6688,6 +6915,52 @@ function CloseIcon() {
     }
   );
 }
+function SnackbarActionButton({ label, onAction }) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton({ onPress: onAction }, ref);
+  const { isHovered, hoverProps } = useHover({});
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...mergeProps$1(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarActionVariants(), "group/snackbar-action"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsx("span", { className: snackbarActionStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: snackbarActionFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label })
+      ]
+    }
+  );
+}
+function SnackbarCloseButton({ onPress }) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton({ onPress, "aria-label": "Close" }, ref);
+  const { isHovered, hoverProps } = useHover({});
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...mergeProps$1(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarCloseVariants(), "group/snackbar-close"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsx("span", { className: snackbarCloseStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: snackbarCloseFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: snackbarCloseIconVariants(), "aria-hidden": "true", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
 var Snackbar = forwardRef(function Snackbar2({
   message,
   supportingText,
@@ -6700,6 +6973,7 @@ var Snackbar = forwardRef(function Snackbar2({
   className
 }, ref) {
   const isTwoLine = Boolean(supportingText);
+  const reducedMotion = useReducedMotion();
   const baseClassName = cn(snackbarBaseVariants({ twoLine: isTwoLine }), className);
   return /* @__PURE__ */ jsx(
     SnackbarHeadless,
@@ -6714,31 +6988,22 @@ var Snackbar = 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__ */ 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 px-3",
-            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, {})
-          }
-        ) })
+        action && /* @__PURE__ */ jsx(SnackbarActionButton, { label: action.label, onAction: action.onAction }),
+        showClose && /* @__PURE__ */ jsx(SnackbarCloseButton, { onPress: triggerClose })
       ] })
     }
   );