@tinybigui/react 0.11.1 → 0.12.0

package/dist/index.d.cts

@@ -3085,15 +3085,12 @@ declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__
  * Uses React Aria's useTabList for role="tablist", keyboard navigation,
  * and accessibility attributes.
  *
- * The active indicator slides to the selected tab using CSS transitions
- * with MD3 motion tokens (medium2 duration, emphasized easing).
+ * Active indicator behavior (MD3 spec):
+ * - Primary: indicator width = content (label/icon) width, centered under content.
+ *   Measured via the [data-tab-content] child span of the selected tab.
+ * - Secondary: indicator spans the full tab button width.
  *
- * MD3 Specifications:
- * - Container background: bg-surface
- * - Container height: 48dp
- * - Bottom border: 1dp, outline-variant color
- * - Fixed layout: tabs fill width equally
- * - Scrollable layout: overflow-x, no wrapping
+ * Motion: left and width are spatial properties → spring-standard-default-spatial.
  *
  * @example
  * ```tsx
@@ -3111,25 +3108,26 @@ declare const TabList: React__default.ForwardRefExoticComponent<TabListProps & R
 /**
  * Material Design 3 Tab Component (Layer 3: Styled)
  *
- * Renders a single tab item inside a TabList.
- * Supports three content modes: icon-only, label-only, icon + label (stacked).
+ * Architecture: Variants-vs-States
+ * - Design-time variants (primary/secondary, fixed/scrollable) live in CVA.
+ * - All interaction states are expressed as data-* attributes on the root button
+ *   via getInteractionDataAttributes, consumed by slots using group-data-[x]/tab.
+ * - Content flags (data-with-icon, data-with-label) describe structure, set explicitly.
  *
- * Features:
- * - ✅ Icon-only, label-only, icon + label (stacked) content modes
- * - ✅ Ripple effect (Material Design)
- * - ✅ MD3 state layers (hover 8%, pressed 12%)
- * - ✅ Badge support (numeric, dot, 999+)
- * - ✅ Disabled state (opacity-38, not focusable)
- * - ✅ Full keyboard accessibility (via React Aria)
- * - ✅ Primary/secondary variant colors
+ * Slots:
+ *   root button   — group/tab; typography, label color, disabled, content flags
+ *   state layer   — absolute inset hover/focus/pressed overlay
+ *   content span  — data-tab-content; measured by TabList for primary indicator width
+ *   icon wrapper  — 24dp icon + badge anchor
+ *   label span    — truncated text label
  *
  * MD3 Specifications:
- * - Minimum height: 48dp
- * - Minimum width: 90dp
- * - Typography: Title Small (14px, weight 500, tracking 0.1px)
- * - Icon: 24x24dp
- * - Active indicator: 3dp primary / 2dp secondary
- * - State layers: 8% hover, 12% pressed/focus
+ * - Minimum height: 48dp (label/icon-only), 64dp (icon+label stacked)
+ * - Typography: Title Small (text-title-small, weight 500, tracking 0.1px)
+ * - Icon: 24×24dp
+ * - Active indicator: 3dp primary / 2dp secondary — both bg-primary
+ * - State layers: hover 8%, focus/pressed 10%
+ * - Disabled: 38% opacity (not focusable)
  *
  * @example
  * ```tsx
@@ -4319,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 {
@@ -4353,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.
@@ -4377,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"
  * />
  * ```
  */
@@ -4392,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>>;
@@ -4439,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"
  * />
  * ```
  */
@@ -4455,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

@@ -3085,15 +3085,12 @@ declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__
  * Uses React Aria's useTabList for role="tablist", keyboard navigation,
  * and accessibility attributes.
  *
- * The active indicator slides to the selected tab using CSS transitions
- * with MD3 motion tokens (medium2 duration, emphasized easing).
+ * Active indicator behavior (MD3 spec):
+ * - Primary: indicator width = content (label/icon) width, centered under content.
+ *   Measured via the [data-tab-content] child span of the selected tab.
+ * - Secondary: indicator spans the full tab button width.
  *
- * MD3 Specifications:
- * - Container background: bg-surface
- * - Container height: 48dp
- * - Bottom border: 1dp, outline-variant color
- * - Fixed layout: tabs fill width equally
- * - Scrollable layout: overflow-x, no wrapping
+ * Motion: left and width are spatial properties → spring-standard-default-spatial.
  *
  * @example
  * ```tsx
@@ -3111,25 +3108,26 @@ declare const TabList: React__default.ForwardRefExoticComponent<TabListProps & R
 /**
  * Material Design 3 Tab Component (Layer 3: Styled)
  *
- * Renders a single tab item inside a TabList.
- * Supports three content modes: icon-only, label-only, icon + label (stacked).
+ * Architecture: Variants-vs-States
+ * - Design-time variants (primary/secondary, fixed/scrollable) live in CVA.
+ * - All interaction states are expressed as data-* attributes on the root button
+ *   via getInteractionDataAttributes, consumed by slots using group-data-[x]/tab.
+ * - Content flags (data-with-icon, data-with-label) describe structure, set explicitly.
  *
- * Features:
- * - ✅ Icon-only, label-only, icon + label (stacked) content modes
- * - ✅ Ripple effect (Material Design)
- * - ✅ MD3 state layers (hover 8%, pressed 12%)
- * - ✅ Badge support (numeric, dot, 999+)
- * - ✅ Disabled state (opacity-38, not focusable)
- * - ✅ Full keyboard accessibility (via React Aria)
- * - ✅ Primary/secondary variant colors
+ * Slots:
+ *   root button   — group/tab; typography, label color, disabled, content flags
+ *   state layer   — absolute inset hover/focus/pressed overlay
+ *   content span  — data-tab-content; measured by TabList for primary indicator width
+ *   icon wrapper  — 24dp icon + badge anchor
+ *   label span    — truncated text label
  *
  * MD3 Specifications:
- * - Minimum height: 48dp
- * - Minimum width: 90dp
- * - Typography: Title Small (14px, weight 500, tracking 0.1px)
- * - Icon: 24x24dp
- * - Active indicator: 3dp primary / 2dp secondary
- * - State layers: 8% hover, 12% pressed/focus
+ * - Minimum height: 48dp (label/icon-only), 64dp (icon+label stacked)
+ * - Typography: Title Small (text-title-small, weight 500, tracking 0.1px)
+ * - Icon: 24×24dp
+ * - Active indicator: 3dp primary / 2dp secondary — both bg-primary
+ * - State layers: hover 8%, focus/pressed 10%
+ * - Disabled: 38% opacity (not focusable)
  *
  * @example
  * ```tsx
@@ -4319,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 {
@@ -4353,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.
@@ -4377,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"
  * />
  * ```
  */
@@ -4392,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>>;
@@ -4439,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"
  * />
  * ```
  */
@@ -4455,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;