@tinybigui/react 0.11.2 → 0.12.0

package/README.md

@@ -12,7 +12,7 @@ A modern, accessible React component library implementing Google's Material Desi
 
 ## ✅ Status
 
-> **Latest Release: v0.11.2** (2026-06-09)
+> **Latest Release: v0.12.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`       | ✅     | MD3 motion tier, media aspect-ratio fix, CVA export parity (v0.11.1) |
-| `List`       | ✅     | Static and interactive list items                                    |
-| `Chip`       | ✅     | MD3 expressive slot architecture, elevated surface (v0.9.0)          |
-| `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                                  |
+| Component    | Status | Description                                                              |
+| ------------ | ------ | ------------------------------------------------------------------------ |
+| `Card`       | ✅     | MD3 motion tier, media aspect-ratio fix, CVA export parity (v0.11.1)     |
+| `List`       | ✅     | Static and interactive list items                                        |
+| `Chip`       | ✅     | MD3 expressive slot architecture, elevated surface (v0.9.0)              |
+| `Badge`      | ✅     | MD3 expressive dot/count badges, icon-corner anchoring (v0.8.0)          |
+| `Divider`    | ✅     | MD3 expressive slot CVA, CSS-var thickness, logical RTL insets (v0.12.0) |
+| `DatePicker` | ✅     | Docked, modal, and input variants                                        |
+| `TimePicker` | ✅     | 12h/24h clock dial, range selection                                      |
 
 ### Planned
 

package/dist/index.cjs

@@ -4718,13 +4718,21 @@ var HeadlessDrawerItem = React.forwardRef(
 );
 HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
 var DividerHeadless = React.forwardRef(
-  ({ orientation = "horizontal", className }, ref) => {
+  ({ orientation = "horizontal", className, style }, ref) => {
     const { separatorProps } = reactAria.useSeparator({
       orientation,
       elementType: orientation === "vertical" ? "div" : "hr"
     });
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...separatorProps, ref, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ...separatorProps,
+          ref,
+          className,
+          style
+        }
+      );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       "hr",
@@ -4732,32 +4740,46 @@ var DividerHeadless = React.forwardRef(
         ...separatorProps,
         "aria-orientation": "horizontal",
         ref,
-        className
+        className,
+        style
       }
     );
   }
 );
 DividerHeadless.displayName = "DividerHeadless";
 var dividerVariants = classVarianceAuthority.cva(
-  // Base: always apply the MD3 outline-variant color to the border
-  "border-outline-variant",
+  [
+    // Zero border — color comes from background fill (matches md-web strategy)
+    "shrink-0 border-0",
+    // MD3 outline-variant color token
+    "bg-outline-variant",
+    // Default thickness — consumers override via the CSS custom property
+    "[--md-divider-thickness:1px]"
+  ],
   {
     variants: {
       /**
        * Controls the axis of the visual rule.
+       *
+       * horizontal — stretches to full inline width; block size is --md-divider-thickness
+       * vertical   — self-stretches to the block axis of the flex/grid parent;
+       *              inline size is --md-divider-thickness
        */
       orientation: {
-        horizontal: "border-t",
-        vertical: "border-l h-auto self-stretch"
+        horizontal: "w-full h-[var(--md-divider-thickness)]",
+        vertical: "self-stretch h-auto w-[var(--md-divider-thickness)]"
       },
       /**
-       * Inset — which end(s) are offset by 16dp per MD3 spec.
+       * Inset — logical inline offset per MD3 spec (16dp = 1rem = Tailwind spacing-4).
+       *
+       * Uses logical properties (ms-N / me-N) for correct behaviour under RTL
+       * writing modes (Arabic, Hebrew, etc.).
        */
       inset: {
         none: "",
-        start: "ml-4",
-        end: "mr-4",
-        both: "ml-4 mr-4"
+        start: "ms-4",
+        end: "me-4",
+        both: "ms-4 me-4"
       }
     },
     defaultVariants: {
@@ -4767,44 +4789,15 @@ var dividerVariants = classVarianceAuthority.cva(
   }
 );
 var Divider = React.forwardRef(
-  ({ orientation = "horizontal", inset = "none", label, className }, ref) => {
-    if (label) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref,
-          role: "group",
-          "aria-label": label,
-          className: cn("flex items-center gap-4", className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface-variant text-label-large whitespace-nowrap", children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            )
-          ]
-        }
-      );
+  ({ orientation = "horizontal", inset = "none", className, style }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    DividerHeadless,
+    {
+      ref,
+      orientation,
+      className: cn(dividerVariants({ orientation, inset }), className),
+      ...style !== void 0 && { style }
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DividerHeadless,
-      {
-        ref,
-        orientation,
-        className: cn(dividerVariants({ orientation, inset }), className)
-      }
-    );
-  }
+  )
 );
 Divider.displayName = "Divider";
 var drawerVariants = classVarianceAuthority.cva(