@tinybigui/react 0.7.0 → 0.8.0

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.7.0** (2026-06-09)
+> **Latest Release: v0.8.0** (2026-06-09)
 >
 > **29 MD3 components** published to npm with full TypeScript support and WCAG 2.1 AA accessibility.
 >
@@ -170,15 +170,15 @@ See [THEMING.md](./THEMING.md) for the full customization guide.
 
 ### Phase 4: Data Display ✅
 
-| Component    | Status | Description                             |
-| ------------ | ------ | --------------------------------------- |
-| `Card`       | ✅     | Elevated, filled, outlined variants     |
-| `List`       | ✅     | Static and interactive list items       |
-| `Chip`       | ✅     | Assist, Filter, Input, Suggestion types |
-| `Badge`      | ✅     | Dot and count notification badges       |
-| `Divider`    | ✅     | Horizontal/vertical, inset variants     |
-| `DatePicker` | ✅     | Docked, modal, and input variants       |
-| `TimePicker` | ✅     | 12h/24h clock dial, range selection     |
+| Component    | Status | Description                                                     |
+| ------------ | ------ | --------------------------------------------------------------- |
+| `Card`       | ✅     | Elevated, filled, outlined variants                             |
+| `List`       | ✅     | Static and interactive list items                               |
+| `Chip`       | ✅     | Assist, Filter, Input, Suggestion types                         |
+| `Badge`      | ✅     | MD3 expressive dot/count badges, icon-corner anchoring (v0.8.0) |
+| `Divider`    | ✅     | Horizontal/vertical, inset variants                             |
+| `DatePicker` | ✅     | Docked, modal, and input variants                               |
+| `TimePicker` | ✅     | 12h/24h clock dial, range selection                             |
 
 ### Planned
 

package/dist/index.cjs

@@ -5070,106 +5070,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 +5139,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 +8649,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"],
   {