@tinybigui/react 0.11.2 → 0.12.0

package/dist/index.d.cts

@@ -4317,31 +4317,49 @@ declare const ProgressHeadless: React__default.ForwardRefExoticComponent<Progres
  */
 type DividerOrientation = "horizontal" | "vertical";
 /**
- * Divider inset — controls which end(s) of the rule are inset by 16dp.
- * Per MD3 spec: insets create visual association with list content.
+ * Divider inset — controls which end(s) of the rule are offset by 16dp.
+ *
+ * Uses logical inline properties (inline-start / inline-end) so insets adapt
+ * correctly to RTL writing modes.
+ *
  * @default 'none'
  */
 type DividerInset = "none" | "start" | "end" | "both";
+/**
+ * CSS custom properties supported by the Divider component.
+ * Extends `React.CSSProperties` to allow the `--md-divider-thickness` variable.
+ */
+interface DividerCSSProperties extends React__default.CSSProperties {
+    /** Thickness of the divider rule. MD3 default: 1dp (1px). */
+    "--md-divider-thickness"?: string;
+}
 /**
  * Material Design 3 Divider Component Props
  *
  * A thin line that groups content in lists and containers.
- * Supports horizontal/vertical orientations, inset variants, and a
- * subheader label variant.
+ * Supports horizontal/vertical orientations and four inset variants.
+ *
+ * Thickness is controlled via the `--md-divider-thickness` CSS custom property
+ * (default `1px`, matching the MD3 1dp specification). Override it with a style
+ * prop or an arbitrary Tailwind property:
+ *
+ * ```tsx
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
+ * ```
  *
  * @example
  * ```tsx
  * // Full-bleed horizontal divider (default)
  * <Divider />
  *
- * // Inset divider (16dp from start)
+ * // Inset divider — logical 16dp from inline-start (RTL-aware)
  * <Divider inset="start" />
  *
- * // Vertical divider
+ * // Vertical divider inside a flex row
  * <Divider orientation="vertical" />
  *
- * // Subheader / labeled divider
- * <Divider label="Section Title" />
+ * // Custom thickness
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
  * ```
  */
 interface DividerProps {
@@ -4351,19 +4369,19 @@ interface DividerProps {
      */
     orientation?: DividerOrientation;
     /**
-     * Inset — shifts the start and/or end of the rule by 16dp.
+     * Inset — shifts the start and/or end of the rule by 16dp (logical, RTL-aware).
      * @default 'none'
      */
     inset?: DividerInset;
-    /**
-     * When provided, renders a subheader (labeled) divider with the text
-     * centered between two rule lines.
-     */
-    label?: string;
     /**
      * Additional Tailwind CSS classes.
      */
     className?: string;
+    /**
+     * Inline styles. Supports the `--md-divider-thickness` CSS custom property
+     * to override the default 1dp thickness.
+     */
+    style?: DividerCSSProperties;
 }
 /**
  * Props for the headless Divider primitive.
@@ -4375,7 +4393,7 @@ interface DividerProps {
  * ```tsx
  * <DividerHeadless
  *   orientation="horizontal"
- *   className="border-t border-outline-variant w-full"
+ *   className="w-full h-px bg-outline-variant"
  * />
  * ```
  */
@@ -4390,40 +4408,40 @@ interface DividerHeadlessProps {
      */
     className?: string;
     /**
-     * Subheader label text. Declared for interface completeness;
-     * rendering is handled by the styled `Divider` layer.
+     * Inline styles forwarded to the underlying element.
      */
-    label?: string;
-    /**
-     * Child content. Declared for interface extensibility;
-     * the headless primitive itself is a void/leaf element.
-     */
-    children?: React__default.ReactNode;
+    style?: DividerCSSProperties;
 }
 
 /**
  * Divider — MD3 Styled Component (Layer 3)
  *
  * A thin rule that separates content in lists and containers.
- * Supports horizontal/vertical orientations, inset variants, and an
- * optional subheader label that renders the text centered between two rules.
+ * Supports horizontal/vertical orientations and four inset variants.
  *
  * Built on `DividerHeadless` (React Aria `useSeparator`) for accessible
  * ARIA semantics. Uses CVA variants mapped to MD3 design tokens.
  *
+ * Thickness is controlled via the `--md-divider-thickness` CSS custom property
+ * (default `1px`, matching the MD3 1dp spec). Override with a `style` prop:
+ *
+ * ```tsx
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
+ * ```
+ *
  * @example
  * ```tsx
  * // Full-bleed horizontal divider
  * <Divider />
  *
- * // Inset from the start (16dp)
+ * // Inset from inline-start (RTL-aware, 16dp)
  * <Divider inset="start" />
  *
  * // Vertical divider inside a flex row
  * <Divider orientation="vertical" />
  *
- * // Subheader divider
- * <Divider label="Section Title" />
+ * // Custom thickness
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
  * ```
  */
 declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.RefAttributes<HTMLElement>>;
@@ -4437,14 +4455,13 @@ declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.
  * - Horizontal → renders `<hr>` (implicit ARIA separator role)
  * - Vertical   → renders `<div>` with explicit `role="separator"`
  *
- * Bring your own styles via the `className` prop.
+ * Bring your own styles via the `className` or `style` props.
  *
  * @example
  * ```tsx
- * // Used inside the styled Divider, or directly for custom styling:
  * <DividerHeadless
  *   orientation="horizontal"
- *   className="border-t border-outline-variant w-full"
+ *   className="w-full h-px bg-outline-variant"
  * />
  * ```
  */
@@ -4453,17 +4470,33 @@ declare const DividerHeadless: React$1.ForwardRefExoticComponent<DividerHeadless
 /**
  * Material Design 3 Divider Variants (CVA)
  *
- * Defines orientation and inset variants for the Divider component.
- * All classes use MD3 design token utilities — no arbitrary values.
+ * Architecture: Variants only — the Divider is a static, non-interactive element
+ * (no hover/focus/pressed states) so there is no state-layer machinery.
  *
- * Orientation:
- *   horizontal — 1px top border, spans full width
- *   vertical   — 1px left border, spans full height (self-stretch in flex)
+ * Implementation strategy:
+ *   The border-* approach used previously required separate horizontal/vertical
+ *   logic and could not share a single thickness control. We now use a background
+ *   fill on a zero-border element, driven by a CSS custom property, which is the
+ *   same technique used by the official @material/web md-divider implementation.
+ *
+ * CSS variable:
+ *   --md-divider-thickness  (default: 1px, MD3 spec: 1dp)
+ *   Override via style or a Tailwind arbitrary property:
+ *     <Divider style={{ "--md-divider-thickness": "2px" }} />
  *
- * Inset (MD3 spec: 16dp offset):
- *   start — ml-4 (indented from the leading edge)
- *   end   — mr-4 (indented from the trailing edge)
- *   both  — ml-4 mr-4 (indented from both edges)
+ * Orientation:
+ *   horizontal — full-width strip, height driven by --md-divider-thickness
+ *   vertical   — self-stretches to container height, width driven by var
+ *
+ * Inset (MD3 spec: 16dp logical offset, RTL-aware):
+ *   start — ms-4  (inline-start, adapts to writing direction)
+ *   end   — me-4  (inline-end)
+ *   both  — ms-4 me-4
+ *
+ * MD3 Spec references:
+ *   Color:     outline-variant  (--md-sys-color-outline-variant)
+ *   Thickness: 1dp (no MD3 component token — exposed as a CSS var for parity with md-web)
+ *   Inset:     16dp (--md-comp-divider-leading-space / --md-comp-divider-trailing-space)
  */
 declare const dividerVariants: (props?: ({
     orientation?: "vertical" | "horizontal" | null | undefined;

package/dist/index.d.ts

@@ -4317,31 +4317,49 @@ declare const ProgressHeadless: React__default.ForwardRefExoticComponent<Progres
  */
 type DividerOrientation = "horizontal" | "vertical";
 /**
- * Divider inset — controls which end(s) of the rule are inset by 16dp.
- * Per MD3 spec: insets create visual association with list content.
+ * Divider inset — controls which end(s) of the rule are offset by 16dp.
+ *
+ * Uses logical inline properties (inline-start / inline-end) so insets adapt
+ * correctly to RTL writing modes.
+ *
  * @default 'none'
  */
 type DividerInset = "none" | "start" | "end" | "both";
+/**
+ * CSS custom properties supported by the Divider component.
+ * Extends `React.CSSProperties` to allow the `--md-divider-thickness` variable.
+ */
+interface DividerCSSProperties extends React__default.CSSProperties {
+    /** Thickness of the divider rule. MD3 default: 1dp (1px). */
+    "--md-divider-thickness"?: string;
+}
 /**
  * Material Design 3 Divider Component Props
  *
  * A thin line that groups content in lists and containers.
- * Supports horizontal/vertical orientations, inset variants, and a
- * subheader label variant.
+ * Supports horizontal/vertical orientations and four inset variants.
+ *
+ * Thickness is controlled via the `--md-divider-thickness` CSS custom property
+ * (default `1px`, matching the MD3 1dp specification). Override it with a style
+ * prop or an arbitrary Tailwind property:
+ *
+ * ```tsx
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
+ * ```
  *
  * @example
  * ```tsx
  * // Full-bleed horizontal divider (default)
  * <Divider />
  *
- * // Inset divider (16dp from start)
+ * // Inset divider — logical 16dp from inline-start (RTL-aware)
  * <Divider inset="start" />
  *
- * // Vertical divider
+ * // Vertical divider inside a flex row
  * <Divider orientation="vertical" />
  *
- * // Subheader / labeled divider
- * <Divider label="Section Title" />
+ * // Custom thickness
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
  * ```
  */
 interface DividerProps {
@@ -4351,19 +4369,19 @@ interface DividerProps {
      */
     orientation?: DividerOrientation;
     /**
-     * Inset — shifts the start and/or end of the rule by 16dp.
+     * Inset — shifts the start and/or end of the rule by 16dp (logical, RTL-aware).
      * @default 'none'
      */
     inset?: DividerInset;
-    /**
-     * When provided, renders a subheader (labeled) divider with the text
-     * centered between two rule lines.
-     */
-    label?: string;
     /**
      * Additional Tailwind CSS classes.
      */
     className?: string;
+    /**
+     * Inline styles. Supports the `--md-divider-thickness` CSS custom property
+     * to override the default 1dp thickness.
+     */
+    style?: DividerCSSProperties;
 }
 /**
  * Props for the headless Divider primitive.
@@ -4375,7 +4393,7 @@ interface DividerProps {
  * ```tsx
  * <DividerHeadless
  *   orientation="horizontal"
- *   className="border-t border-outline-variant w-full"
+ *   className="w-full h-px bg-outline-variant"
  * />
  * ```
  */
@@ -4390,40 +4408,40 @@ interface DividerHeadlessProps {
      */
     className?: string;
     /**
-     * Subheader label text. Declared for interface completeness;
-     * rendering is handled by the styled `Divider` layer.
+     * Inline styles forwarded to the underlying element.
      */
-    label?: string;
-    /**
-     * Child content. Declared for interface extensibility;
-     * the headless primitive itself is a void/leaf element.
-     */
-    children?: React__default.ReactNode;
+    style?: DividerCSSProperties;
 }
 
 /**
  * Divider — MD3 Styled Component (Layer 3)
  *
  * A thin rule that separates content in lists and containers.
- * Supports horizontal/vertical orientations, inset variants, and an
- * optional subheader label that renders the text centered between two rules.
+ * Supports horizontal/vertical orientations and four inset variants.
  *
  * Built on `DividerHeadless` (React Aria `useSeparator`) for accessible
  * ARIA semantics. Uses CVA variants mapped to MD3 design tokens.
  *
+ * Thickness is controlled via the `--md-divider-thickness` CSS custom property
+ * (default `1px`, matching the MD3 1dp spec). Override with a `style` prop:
+ *
+ * ```tsx
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
+ * ```
+ *
  * @example
  * ```tsx
  * // Full-bleed horizontal divider
  * <Divider />
  *
- * // Inset from the start (16dp)
+ * // Inset from inline-start (RTL-aware, 16dp)
  * <Divider inset="start" />
  *
  * // Vertical divider inside a flex row
  * <Divider orientation="vertical" />
  *
- * // Subheader divider
- * <Divider label="Section Title" />
+ * // Custom thickness
+ * <Divider style={{ "--md-divider-thickness": "2px" }} />
  * ```
  */
 declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.RefAttributes<HTMLElement>>;
@@ -4437,14 +4455,13 @@ declare const Divider: React$1.ForwardRefExoticComponent<DividerProps & React$1.
  * - Horizontal → renders `<hr>` (implicit ARIA separator role)
  * - Vertical   → renders `<div>` with explicit `role="separator"`
  *
- * Bring your own styles via the `className` prop.
+ * Bring your own styles via the `className` or `style` props.
  *
  * @example
  * ```tsx
- * // Used inside the styled Divider, or directly for custom styling:
  * <DividerHeadless
  *   orientation="horizontal"
- *   className="border-t border-outline-variant w-full"
+ *   className="w-full h-px bg-outline-variant"
  * />
  * ```
  */
@@ -4453,17 +4470,33 @@ declare const DividerHeadless: React$1.ForwardRefExoticComponent<DividerHeadless
 /**
  * Material Design 3 Divider Variants (CVA)
  *
- * Defines orientation and inset variants for the Divider component.
- * All classes use MD3 design token utilities — no arbitrary values.
+ * Architecture: Variants only — the Divider is a static, non-interactive element
+ * (no hover/focus/pressed states) so there is no state-layer machinery.
  *
- * Orientation:
- *   horizontal — 1px top border, spans full width
- *   vertical   — 1px left border, spans full height (self-stretch in flex)
+ * Implementation strategy:
+ *   The border-* approach used previously required separate horizontal/vertical
+ *   logic and could not share a single thickness control. We now use a background
+ *   fill on a zero-border element, driven by a CSS custom property, which is the
+ *   same technique used by the official @material/web md-divider implementation.
+ *
+ * CSS variable:
+ *   --md-divider-thickness  (default: 1px, MD3 spec: 1dp)
+ *   Override via style or a Tailwind arbitrary property:
+ *     <Divider style={{ "--md-divider-thickness": "2px" }} />
  *
- * Inset (MD3 spec: 16dp offset):
- *   start — ml-4 (indented from the leading edge)
- *   end   — mr-4 (indented from the trailing edge)
- *   both  — ml-4 mr-4 (indented from both edges)
+ * Orientation:
+ *   horizontal — full-width strip, height driven by --md-divider-thickness
+ *   vertical   — self-stretches to container height, width driven by var
+ *
+ * Inset (MD3 spec: 16dp logical offset, RTL-aware):
+ *   start — ms-4  (inline-start, adapts to writing direction)
+ *   end   — me-4  (inline-end)
+ *   both  — ms-4 me-4
+ *
+ * MD3 Spec references:
+ *   Color:     outline-variant  (--md-sys-color-outline-variant)
+ *   Thickness: 1dp (no MD3 component token — exposed as a CSS var for parity with md-web)
+ *   Inset:     16dp (--md-comp-divider-leading-space / --md-comp-divider-trailing-space)
  */
 declare const dividerVariants: (props?: ({
     orientation?: "vertical" | "horizontal" | null | undefined;

package/dist/index.js

@@ -4713,13 +4713,21 @@ var HeadlessDrawerItem = forwardRef(
 );
 HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
 var DividerHeadless = forwardRef(
-  ({ orientation = "horizontal", className }, ref) => {
+  ({ orientation = "horizontal", className, style }, ref) => {
     const { separatorProps } = useSeparator({
       orientation,
       elementType: orientation === "vertical" ? "div" : "hr"
     });
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsx("div", { ...separatorProps, ref, className });
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...separatorProps,
+          ref,
+          className,
+          style
+        }
+      );
     }
     return /* @__PURE__ */ jsx(
       "hr",
@@ -4727,32 +4735,46 @@ var DividerHeadless = forwardRef(
         ...separatorProps,
         "aria-orientation": "horizontal",
         ref,
-        className
+        className,
+        style
       }
     );
   }
 );
 DividerHeadless.displayName = "DividerHeadless";
 var dividerVariants = 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: {
@@ -4762,44 +4784,15 @@ var dividerVariants = cva(
   }
 );
 var Divider = forwardRef(
-  ({ orientation = "horizontal", inset = "none", label, className }, ref) => {
-    if (label) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          role: "group",
-          "aria-label": label,
-          className: cn("flex items-center gap-4", className),
-          children: [
-            /* @__PURE__ */ jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant text-label-large whitespace-nowrap", children: label }),
-            /* @__PURE__ */ jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            )
-          ]
-        }
-      );
+  ({ orientation = "horizontal", inset = "none", className, style }, ref) => /* @__PURE__ */ jsx(
+    DividerHeadless,
+    {
+      ref,
+      orientation,
+      className: cn(dividerVariants({ orientation, inset }), className),
+      ...style !== void 0 && { style }
     }
-    return /* @__PURE__ */ jsx(
-      DividerHeadless,
-      {
-        ref,
-        orientation,
-        className: cn(dividerVariants({ orientation, inset }), className)
-      }
-    );
-  }
+  )
 );
 Divider.displayName = "Divider";
 var drawerVariants = cva(