@tinybigui/react 0.7.0 → 0.8.1

package/dist/index.cjs

@@ -2670,205 +2670,132 @@ var TextField = React.forwardRef(
   }
 );
 TextField.displayName = "TextField";
-var checkboxVariants = classVarianceAuthority.cva(
-  [
-    // Base classes (always applied to label wrapper)
-    "relative inline-flex items-center cursor-pointer select-none",
-    "transition-opacity duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "opacity-38 cursor-not-allowed pointer-events-none",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var checkboxContainerVariants = classVarianceAuthority.cva(
-  [
-    // Base classes for checkbox visual container
-    "relative inline-flex items-center justify-center m-1",
-    "w-10 h-10",
-    // 40x40dp touch target (MD3 spec)
-    "flex-shrink-0",
-    "transition-all duration-200",
-    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
-    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "active:before:opacity-12"
-  ],
-  {
-    variants: {
-      /**
-       * Checkbox state (determines visual appearance)
-       */
-      state: {
-        unchecked: "text-on-surface-variant",
-        checked: "text-primary",
-        indeterminate: "text-primary"
-      },
-      /**
-       * Error/invalid state
-       */
-      isInvalid: {
-        true: "text-error",
-        false: ""
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "text-on-surface pointer-events-none",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Error state overrides normal colors for all states
-      {
-        state: "unchecked",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "checked",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "indeterminate",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      }
-    ],
-    defaultVariants: {
-      state: "unchecked",
-      isInvalid: false,
-      disabled: false
-    }
-  }
-);
-var checkboxIconBoxVariants = classVarianceAuthority.cva(
-  [
-    // Base classes for the checkbox box
-    // Note: Border radius is applied via SVG rx/ry attributes (2dp) in the component
-    "transition-all duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Checkbox state
-       */
-      state: {
-        unchecked: [
-          "fill-transparent",
-          "stroke-outline",
-          // MD3: outline color for unchecked
-          "stroke-4"
-          // MD3: 2dp outline width
-        ],
-        checked: [
-          "fill-current",
-          // Uses parent text color (primary or error)
-          "stroke-none"
-        ],
-        indeterminate: [
-          "fill-current",
-          // Uses parent text color (primary or error)
-          "stroke-none"
-        ]
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: ["fill-transparent", "stroke-current", "stroke-2"],
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Disabled state overrides fill for checked/indeterminate
-      {
-        state: "checked",
-        disabled: true,
-        className: "fill-current stroke-none"
-      },
-      {
-        state: "indeterminate",
-        disabled: true,
-        className: "fill-current stroke-none"
-      }
-    ],
-    defaultVariants: {
-      state: "unchecked",
-      disabled: false
-    }
-  }
-);
-var checkboxIconVariants = classVarianceAuthority.cva(
-  [
-    "fill-current",
-    // Inherits color from parent
-    "transition-all duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Icon type
-       */
-      type: {
-        check: "",
-        // Checkmark icon
-        dash: ""
-        // Dash/minus icon
-      }
-    },
-    defaultVariants: {
-      type: "check"
+var checkboxRootVariants = classVarianceAuthority.cva([
+  "relative inline-flex items-center cursor-pointer select-none",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:opacity-38"
+]);
+var checkboxControlVariants = classVarianceAuthority.cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "w-10 h-10 rounded-full",
+  "overflow-hidden"
+]);
+var checkboxStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition for opacity changes
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected / indeterminate → primary color
+  "group-data-[selected]/checkbox:bg-primary",
+  "group-data-[indeterminate]/checkbox:bg-primary",
+  // Invalid → error color (singly-chained)
+  "group-data-[invalid]/checkbox:bg-error",
+  // Invalid + selected → error wins (doubly-chained for specificity)
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-error",
+  // Interaction opacities (MD3: hover 8%, focus-visible 10%, pressed 10%)
+  "group-data-[hovered]/checkbox:opacity-8",
+  "group-data-[focus-visible]/checkbox:opacity-10",
+  "group-data-[pressed]/checkbox:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/checkbox:hidden"
+]);
+var checkboxFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/checkbox:opacity-100"
+]);
+var checkboxBoxVariants = classVarianceAuthority.cva([
+  // Base geometry
+  "relative flex items-center justify-center flex-shrink-0",
+  "w-[18px] h-[18px] rounded-[2px] border-2",
+  // Effects transition for color changes
+  "transition-[background-color,border-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // ── Unselected base ───────────────────────────────────────────────────────
+  "bg-transparent border-outline",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "group-data-[selected]/checkbox:bg-primary group-data-[selected]/checkbox:border-primary",
+  // ── Indeterminate ─────────────────────────────────────────────────────────
+  "group-data-[indeterminate]/checkbox:bg-primary group-data-[indeterminate]/checkbox:border-primary",
+  // ── Invalid (unselected) — singly chained ─────────────────────────────────
+  "group-data-[invalid]/checkbox:border-error",
+  // ── Invalid + selected — doubly chained (higher specificity) ──────────────
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-error",
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:border-error",
+  // ── Invalid + indeterminate — doubly chained ───────────────────────────────
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:bg-error",
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:border-error",
+  // ── Disabled (placed last — cascade wins over interaction colors) ──────────
+  "group-data-[disabled]/checkbox:border-on-surface/38",
+  "group-data-[disabled]/checkbox:bg-transparent",
+  // ── Disabled + selected — doubly chained ──────────────────────────────────
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:bg-on-surface/38",
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:border-transparent",
+  // ── Disabled + indeterminate — doubly chained ─────────────────────────────
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:bg-on-surface/38",
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:border-transparent"
+]);
+var checkboxIconVariants = classVarianceAuthority.cva([
+  "absolute inset-0 flex items-center justify-center",
+  // Spatial transition for icon appearing (scale)
+  "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base icon color
+  "text-on-primary",
+  // Invalid → on-error (doubly-chained for both selected and indeterminate)
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-on-error",
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:text-on-error",
+  // Disabled → surface (doubly-chained)
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:text-surface",
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:text-surface"
+]);
+var checkboxLabelVariants = classVarianceAuthority.cva(["text-body-large text-on-surface select-none ml-4"]);
+function CheckboxCheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M4.5 9L7.2 11.7L13.5 5.4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "square",
+          strokeLinejoin: "miter"
+        }
+      )
     }
-  }
-);
-var checkboxLabelVariants = classVarianceAuthority.cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
+  );
+}
+function CheckboxIndeterminateIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "8", width: "10", height: "2", rx: "1", fill: "currentColor" })
     }
-  }
-);
+  );
+}
 var Checkbox = React.forwardRef(
   ({
-    // Content props
     children,
-    // State props
     isIndeterminate = false,
     isInvalid = false,
     disableRipple = false,
     isDisabled = false,
-    // Styling
     className,
-    // Other props
     ...props
   }, forwardedRef) => {
     const internalRef = React.useRef(null);
@@ -2881,17 +2808,17 @@ var Checkbox = React.forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
-    const state = reactStately.useToggleState(restPropsWithoutHtmlAttrs);
-    const { inputProps, labelProps } = reactAria.useCheckbox(
-      restPropsWithoutHtmlAttrs,
+    const state = reactStately.useToggleState(ariaProps);
+    const { inputProps, labelProps, isPressed } = reactAria.useCheckbox(
+      ariaProps,
       state,
       ref
     );
     const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
     const isSelected = state.isSelected;
-    const visualState = isIndeterminate ? "indeterminate" : isSelected ? "checked" : "unchecked";
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: isDisabled || disableRipple
     });
@@ -2901,8 +2828,8 @@ var Checkbox = React.forwardRef(
       }
     }, [isIndeterminate, ref]);
     if (process.env.NODE_ENV === "development") {
-      const ariaProps = restPropsWithoutHtmlAttrs;
-      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+      const a = ariaProps;
+      if (!children && !a["aria-label"] && !a["aria-labelledby"]) {
         console.warn(
           "[Checkbox] Checkbox should have a label (children) or aria-label for accessibility."
         );
@@ -2911,105 +2838,40 @@ var Checkbox = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
-        ...labelProps,
-        className: cn(
-          checkboxVariants({
-            disabled: isDisabled
-          }),
-          className
-        ),
+        ...reactAria.mergeProps(labelProps, hoverProps),
+        className: cn(checkboxRootVariants(), "group/checkbox", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled,
+          isInvalid,
+          isIndeterminate,
+          isReadOnly: ariaProps.isReadOnly ?? false
+        }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("input", { ...reactAria.mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               role: "presentation",
-              className: cn(
-                checkboxContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: isDisabled
-                })
-              ),
+              className: cn(checkboxControlVariants()),
               onMouseDown: handleRipple,
               children: [
                 ripples,
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    width: "18",
-                    height: "18",
-                    viewBox: "0 0 18 18",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "rect",
-                        {
-                          x: "0",
-                          y: "0",
-                          width: "18",
-                          height: "18",
-                          rx: "2",
-                          ry: "2",
-                          className: cn(
-                            checkboxIconBoxVariants({
-                              state: visualState,
-                              disabled: isDisabled
-                            })
-                          )
-                        }
-                      ),
-                      isSelected && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          d: "M14.1 4.5L6.3 12.3l-3.4-3.4L1.5 10.3l4.8 4.8 9.2-9.2z",
-                          className: cn(checkboxIconVariants({ type: "check" }), "fill-on-primary")
-                        }
-                      ),
-                      isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx(
-                        "rect",
-                        {
-                          x: "4",
-                          y: "8",
-                          width: "10",
-                          height: "2",
-                          className: cn(checkboxIconVariants({ type: "dash" }), "fill-on-primary")
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsxRuntime.jsx(
-                        "rect",
-                        {
-                          x: "-3",
-                          y: "-3",
-                          width: "24",
-                          height: "24",
-                          rx: "12",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(checkboxStateLayerVariants()), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(checkboxFocusRingVariants()), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(checkboxBoxVariants()), "aria-hidden": "true", children: [
+                  isSelected && !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(checkboxIconVariants()), children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxCheckIcon, {}) }),
+                  isIndeterminate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(checkboxIconVariants()), children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndeterminateIcon, {}) })
+                ] })
               ]
             }
           ),
-          children && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                checkboxLabelVariants({
-                  disabled: isDisabled
-                })
-              ),
-              children
-            }
-          )
+          children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(checkboxLabelVariants()), children })
         ]
       }
     );
@@ -5070,106 +4932,48 @@ var Drawer = React.forwardRef(
   }
 );
 Drawer.displayName = "Drawer";
-var BadgeHeadless = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-flex", className), ...props, children });
-  }
-);
-BadgeHeadless.displayName = "BadgeHeadless";
-var badgeVariants2 = classVarianceAuthority.cva(
-  ["absolute -top-1 -right-1 rounded-full flex items-center justify-center"],
-  {
-    variants: {
-      size: {
-        small: "size-1.5",
-        large: "min-w-4 h-4 px-1 text-label-small"
-      },
-      color: {
-        error: "bg-error text-on-error",
-        primary: "bg-primary text-on-primary"
-      },
-      invisible: {
-        true: "scale-0 opacity-0",
-        false: "scale-100 opacity-100"
-      },
-      reducedMotion: {
-        true: "",
-        false: "transition-[transform,opacity] duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
-      }
-    },
-    defaultVariants: {
-      size: "large",
-      color: "error",
-      invisible: false,
-      reducedMotion: false
-    }
-  }
-);
-var getDisplayValue = (count, max) => {
+var badgeAppearance = [
+  // ── Shape ─────────────────────────────────────────────────────────────────────
+  "flex items-center justify-center",
+  "rounded-full",
+  // ── Large (count) sizing — base defaults ──────────────────────────────────────
+  // Height 16dp, min-width 16dp, horizontal padding 4dp
+  "h-4 min-w-4 px-1",
+  // ── Color — error role (only MD3-spec role for badges) ────────────────────────
+  "bg-error text-on-error",
+  // ── Typography — label-small, tight leading, tabular numbers ──────────────────
+  "text-label-small leading-none tabular-nums",
+  // ── Visibility (runtime flag) ──────────────────────────────────────────────────
+  // Base: fully visible
+  "scale-100",
+  // data-invisible: scale to zero (visually hidden; aria-label still readable by SR)
+  "data-[invisible]:scale-0",
+  // ── Dot content flag overrides (placed last — cascade wins over base sizing) ───
+  // Clear out the count-pill sizing, set 6dp circle
+  "data-[dot]:size-1.5",
+  "data-[dot]:min-w-0",
+  "data-[dot]:p-0",
+  "data-[dot]:text-[0]"
+  // suppress any stray text rendering on dot
+];
+var badgeVariants2 = classVarianceAuthority.cva([
+  // ── Anchored placement — badge center on host's top-right corner ──────────────
+  // top-0 right-0 places the badge's own top-right at the host's top-right,
+  // then the 1/2-element translate moves the badge center onto that corner.
+  // Host-size-agnostic: works for any wrapped element (icon, avatar, nav chip).
+  "absolute top-0 right-0 -translate-y-1/2 translate-x-1/2",
+  ...badgeAppearance
+]);
+var badgeStaticVariants = classVarianceAuthority.cva(["inline-flex", ...badgeAppearance]);
+function isBadgeConfig(badge) {
+  return typeof badge === "object" && badge !== null && !React.isValidElement(badge) && "count" in badge;
+}
+function getBadgeDisplayValue(count, max) {
   if (count === void 0) return "";
   return count > max ? `${max}+` : count.toString();
-};
-var getAriaLabel = (count, override) => {
-  if (override) return override;
+}
+function getBadgeAriaLabel(count) {
   return count === void 0 ? "New" : `${count} notifications`;
-};
-var BadgeContent = React.forwardRef(
-  ({
-    count,
-    max = 999,
-    color = "error",
-    invisible = false,
-    "aria-label": ariaLabelOverride,
-    reducedMotion = false,
-    className
-  }, ref) => {
-    const size = count === void 0 ? "small" : "large";
-    const displayValue = getDisplayValue(count, max);
-    const ariaLabel = getAriaLabel(count, ariaLabelOverride);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        ref,
-        role: "status",
-        "aria-label": ariaLabel,
-        className: cn(badgeVariants2({ size, color, invisible, reducedMotion }), className),
-        children: displayValue
-      }
-    );
-  }
-);
-BadgeContent.displayName = "BadgeContent";
-var Badge = React.forwardRef(
-  ({
-    count,
-    max = 999,
-    color = "error",
-    invisible = false,
-    "aria-label": ariaLabel,
-    className,
-    children
-  }, ref) => {
-    const isReduced = useReducedMotion();
-    const shouldShow = !invisible && (count === void 0 || count > 0);
-    return /* @__PURE__ */ jsxRuntime.jsxs(BadgeHeadless, { ref, className, children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BadgeContent,
-        {
-          count,
-          max,
-          color,
-          invisible: !shouldShow,
-          "aria-label": ariaLabel,
-          reducedMotion: isReduced
-        }
-      )
-    ] });
-  }
-);
-Badge.displayName = "Badge";
-function isBadgeConfig(badge) {
-  return typeof badge === "object" && badge !== null && !React.isValidElement(badge) && ("count" in badge || "color" in badge);
 }
 var DrawerItem = React.forwardRef(
   ({
@@ -5197,12 +5001,18 @@ var DrawerItem = React.forwardRef(
     const renderBadge = () => {
       if (!badge) return null;
       if (isBadgeConfig(badge)) {
+        const max = 999;
+        const isDot = badge.count === void 0;
+        const displayValue = getBadgeDisplayValue(badge.count, max);
+        const ariaLabel = getBadgeAriaLabel(badge.count);
         return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Badge,
+          "span",
           {
-            ...badge.count !== void 0 ? { count: badge.count } : {},
-            ...badge.color !== void 0 ? { color: badge.color } : {},
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", {})
+            role: "status",
+            "aria-label": ariaLabel,
+            "data-dot": isDot ? "" : void 0,
+            className: cn(badgeStaticVariants()),
+            children: displayValue
           }
         ) });
       }
@@ -8701,6 +8511,75 @@ var Search = React.forwardRef(
   }
 );
 Search.displayName = "Search";
+var BadgeHeadless = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-flex", className), ...props, children });
+  }
+);
+BadgeHeadless.displayName = "BadgeHeadless";
+var getDisplayValue = (count, max) => {
+  if (count === void 0) return "";
+  return count > max ? `${max}+` : count.toString();
+};
+var getAriaLabel = (count, override) => {
+  if (override) return override;
+  return count === void 0 ? "New" : `${count} notifications`;
+};
+var BadgeContent = React.forwardRef(
+  ({
+    count,
+    max = 999,
+    invisible = false,
+    "aria-label": ariaLabelOverride,
+    reducedMotion = false,
+    className
+  }, ref) => {
+    const isDot = count === void 0;
+    const displayValue = getDisplayValue(count, max);
+    const ariaLabel = getAriaLabel(count, ariaLabelOverride);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        role: "status",
+        "aria-label": ariaLabel,
+        "data-dot": isDot ? "" : void 0,
+        "data-invisible": invisible ? "" : void 0,
+        className: cn(
+          badgeVariants2(),
+          // MD3 Expressive spatial motion for show/hide scale animation.
+          // Spatial pairing: scale transform → expressive-fast-spatial token.
+          // Guarded at the component level; do NOT use CSS-only reduced-motion
+          // because this is a JS-conditional class, not a persistent transition.
+          !reducedMotion && "duration-expressive-fast-spatial ease-expressive-fast-spatial transition-transform",
+          className
+        ),
+        children: displayValue
+      }
+    );
+  }
+);
+BadgeContent.displayName = "BadgeContent";
+var Badge = React.forwardRef(
+  ({ count, max = 999, invisible = false, "aria-label": ariaLabel, className, children }, ref) => {
+    const isReduced = useReducedMotion();
+    const shouldShow = !invisible && (count === void 0 || count > 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(BadgeHeadless, { ref, className, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BadgeContent,
+        {
+          count,
+          max,
+          invisible: !shouldShow,
+          "aria-label": ariaLabel,
+          reducedMotion: isReduced
+        }
+      )
+    ] });
+  }
+);
+Badge.displayName = "Badge";
 var splitButtonContainerVariants = classVarianceAuthority.cva(
   ["inline-flex items-center rounded-full overflow-hidden"],
   {