@tinybigui/react 0.16.0 → 0.17.0

package/dist/index.d.cts

@@ -2624,25 +2624,25 @@ interface RadioHeadlessProps extends AriaRadioProps {
  * Material Design 3 Radio Component (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Uses CVA for type-safe variant management.
- * Styled with Tailwind CSS using MD3 design tokens.
- * Must be used within a RadioGroup for proper functionality.
+ * Implements the Variants-vs-States architecture: all interaction/selection/error
+ * states are expressed as data-* attributes on the root and consumed by each
+ * slot via group-data-[x]/radio Tailwind selectors — no state variants in CVA.
  *
  * Features:
- * - ✅ 2 states: unselected, selected
+ * - ✅ Unselected / selected states
+ * - ✅ Error/invalid state (via RadioGroup isInvalid)
  * - ✅ Ripple effect (Material Design)
  * - ✅ Full keyboard accessibility (via React Aria)
  * - ✅ Screen reader support (via React Aria)
- * - ✅ Focus management (via React Aria)
+ * - ✅ Focus management with MD3 focus ring (no animate-pulse)
  * - ✅ Form integration (name, value props from RadioGroup)
  *
  * MD3 Specifications:
- * - Radio icon: 20x20dp (within 40x40dp touch target)
- * - Outer circle: 20px
- * - Inner dot: 10px (selected state)
- * - Outline width: 2dp
- * - State layers: 8% hover, 12% focus/pressed
- * - Disabled: 38% opacity
+ * - Radio icon: 20×20dp (within 40×40dp touch target)
+ * - Outer circle border: 2dp
+ * - Inner dot: 10dp (selected state, scale 0→1)
+ * - State layers: 8% hover, 10% focus/pressed
+ * - Disabled: 38% opacity (on root)
  * - Label spacing: 16px (ml-4)
  *
  * @example
@@ -2663,11 +2663,6 @@ interface RadioHeadlessProps extends AriaRadioProps {
  *   <Radio value="a">Enabled</Radio>
  *   <Radio value="b" isDisabled>Disabled</Radio>
  * </RadioGroup>
- *
- * // Custom styling
- * <Radio value="custom" className="my-custom-class">
- *   Custom
- * </Radio>
  * ```
  */
 declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;

package/dist/index.d.ts

@@ -2624,25 +2624,25 @@ interface RadioHeadlessProps extends AriaRadioProps {
  * Material Design 3 Radio Component (Layer 3: Styled)
  *
  * Built on React Aria for world-class accessibility.
- * Uses CVA for type-safe variant management.
- * Styled with Tailwind CSS using MD3 design tokens.
- * Must be used within a RadioGroup for proper functionality.
+ * Implements the Variants-vs-States architecture: all interaction/selection/error
+ * states are expressed as data-* attributes on the root and consumed by each
+ * slot via group-data-[x]/radio Tailwind selectors — no state variants in CVA.
  *
  * Features:
- * - ✅ 2 states: unselected, selected
+ * - ✅ Unselected / selected states
+ * - ✅ Error/invalid state (via RadioGroup isInvalid)
  * - ✅ Ripple effect (Material Design)
  * - ✅ Full keyboard accessibility (via React Aria)
  * - ✅ Screen reader support (via React Aria)
- * - ✅ Focus management (via React Aria)
+ * - ✅ Focus management with MD3 focus ring (no animate-pulse)
  * - ✅ Form integration (name, value props from RadioGroup)
  *
  * MD3 Specifications:
- * - Radio icon: 20x20dp (within 40x40dp touch target)
- * - Outer circle: 20px
- * - Inner dot: 10px (selected state)
- * - Outline width: 2dp
- * - State layers: 8% hover, 12% focus/pressed
- * - Disabled: 38% opacity
+ * - Radio icon: 20×20dp (within 40×40dp touch target)
+ * - Outer circle border: 2dp
+ * - Inner dot: 10dp (selected state, scale 0→1)
+ * - State layers: 8% hover, 10% focus/pressed
+ * - Disabled: 38% opacity (on root)
  * - Label spacing: 16px (ml-4)
  *
  * @example
@@ -2663,11 +2663,6 @@ interface RadioHeadlessProps extends AriaRadioProps {
  *   <Radio value="a">Enabled</Radio>
  *   <Radio value="b" isDisabled>Disabled</Radio>
  * </RadioGroup>
- *
- * // Custom styling
- * <Radio value="custom" className="my-custom-class">
- *   Custom
- * </Radio>
  * ```
  */
 declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;

package/dist/index.js

@@ -3139,224 +3139,102 @@ var RadioGroupHeadless = forwardRef(
   }
 );
 RadioGroupHeadless.displayName = "RadioGroupHeadless";
+var radioRootVariants = cva([
+  "relative inline-flex items-center cursor-pointer select-none",
+  // Disabled state — self-targeting so children inherit via group
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:opacity-38"
+]);
+var radioControlVariants = cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "size-10"
+  // 40dp touch target (MD3 spec)
+]);
+var radioFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-2 outline-secondary",
+  // Effects transition for opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/radio:opacity-100"
+]);
+var radioTargetVariants = cva([
+  "absolute inset-0 rounded-full overflow-hidden",
+  "flex items-center justify-center"
+]);
+var radioStateLayerVariants = cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition for opacity + color
+  "transition-[opacity,background-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected state-layer color
+  "group-data-[selected]/radio:bg-primary",
+  // Error state-layer color (overrides selected via cascade position)
+  "group-data-[invalid]/radio:bg-error",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/radio:opacity-8",
+  "group-data-[focus-visible]/radio:opacity-10",
+  "group-data-[pressed]/radio:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/radio:hidden"
+]);
+var radioRingVariants = cva([
+  "relative z-10 size-5 rounded-full border-2 flex items-center justify-center flex-shrink-0",
+  // Base (unselected, enabled)
+  "border-on-surface-variant",
+  // Effects transition for border-color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected — border becomes primary
+  "group-data-[selected]/radio:border-primary",
+  // Error — placed after selected so it overrides by cascade order
+  "group-data-[invalid]/radio:border-error",
+  // Disabled — on-surface/38 opacity value
+  "group-data-[disabled]/radio:border-on-surface/38"
+]);
+var radioDotVariants = cva([
+  "size-2.5 rounded-full origin-center",
+  // Spatial transition for scale — springs may overshoot (intentional)
+  "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base fill color (shown when selected)
+  "bg-primary",
+  // Hidden when unselected
+  "scale-0",
+  // Visible when selected
+  "group-data-[selected]/radio:scale-100",
+  // Error — error fill color (placed after selected by cascade)
+  "group-data-[invalid]/radio:bg-error",
+  // Disabled — use on-surface/38 opacity
+  "group-data-[disabled]/radio:bg-on-surface/38"
+]);
+var radioLabelVariants = cva(["text-body-medium text-on-surface select-none ml-4"]);
 var radioGroupVariants = cva(
-  [
-    // Base classes (always applied to group wrapper)
-    "flex",
-    "gap-4"
-    // 16px spacing between radios (MD3 standard)
-  ],
+  ["flex", "gap-1"],
+  // 4dp gap — padding around each 40dp control handles visual spacing
   {
     variants: {
       /**
        * Layout orientation
+       * @default "vertical"
        */
       orientation: {
         vertical: "flex-col",
         horizontal: "flex-row flex-wrap"
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical",
-      disabled: false
-    }
-  }
-);
-var radioGroupLabelVariants = cva(
-  [
-    "text-sm font-medium",
-    // MD3: Body Medium
-    "text-on-surface",
-    "mb-3"
-    // Spacing below label (12px)
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "opacity-38",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var radioVariants = 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 radioContainerVariants = cva(
-  [
-    // Base classes for radio visual container
-    "relative inline-flex items-center justify-center",
-    "w-10 h-10",
-    // 40x40dp touch target (MD3 spec)
-    "flex-shrink-0",
-    "transition-all duration-200",
-    "m-1",
-    // 4px margin around radio for spacing (total 8px gap between radios)
-    // 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: {
-      /**
-       * Radio state (determines visual appearance)
-       */
-      state: {
-        unselected: "text-on-surface-variant",
-        selected: "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: "unselected",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "selected",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      }
-    ],
-    defaultVariants: {
-      state: "unselected",
-      isInvalid: false,
-      disabled: false
-    }
-  }
-);
-var radioIconOuterVariants = cva(
-  [
-    // Base classes for the radio outer circle
-    "transition-all duration-200 stroke-current stroke-2 fill-transparent"
-  ],
-  {
-    variants: {
-      /**
-       * Radio state
-       */
-      state: {
-        unselected: [],
-        selected: []
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: ["fill-transparent", "stroke-current", "stroke-2"],
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Disabled + selected state overrides fill
-      {
-        state: "selected",
-        disabled: true,
-        className: "fill-current stroke-none"
-      }
-    ],
-    defaultVariants: {
-      state: "unselected",
-      disabled: false
-    }
-  }
-);
-var radioIconInnerVariants = cva(["transition-all origin-center duration-200"], {
-  variants: {
-    /**
-     * Visibility based on state
-     */
-    state: {
-      selected: ["fill-current"],
-      unselected: ["fill-transparent"]
-    },
-    visible: {
-      true: "opacity-100 scale-100 fill-current",
-      false: "opacity-0 scale-0"
-    }
-  },
-  defaultVariants: {
-    visible: false
-  }
-});
-var radioLabelVariants = cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
       }
     },
     defaultVariants: {
-      disabled: false
+      orientation: "vertical"
     }
   }
 );
+var radioGroupLabelVariants = cva([
+  "text-body-medium font-medium",
+  "text-on-surface",
+  "mb-3",
+  "data-[disabled]:opacity-38"
+]);
 var Radio = forwardRef(
-  ({
-    // Content props
-    children,
-    // State props
-    disableRipple = false,
-    isDisabled = false,
-    // Styling
-    className,
-    // Other props
-    ...props
-  }, forwardedRef) => {
+  ({ children, disableRipple = false, isDisabled = false, className, ...props }, forwardedRef) => {
     const state = useContext(RadioGroupContext);
     if (!state) {
       throw new Error("Radio must be used within a RadioGroup");
@@ -3371,127 +3249,57 @@ var Radio = forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
     const {
       inputProps,
       isSelected,
-      isDisabled: radioIsDisabled
+      isDisabled: radioIsDisabled,
+      isPressed
     } = useRadio(
-      {
-        ...restPropsWithoutHtmlAttrs,
-        value: props.value
-      },
+      { ...ariaProps, value: props.value },
       state,
       ref
     );
     const { isFocusVisible, focusProps } = useFocusRing();
     const finalIsDisabled = isDisabled || radioIsDisabled;
-    const visualState = isSelected ? "selected" : "unselected";
+    const { isHovered, hoverProps } = useHover({ isDisabled: finalIsDisabled });
+    const isInvalid = state.validationState === "invalid";
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: finalIsDisabled || disableRipple
     });
     if (process.env.NODE_ENV === "development") {
-      const ariaProps = restPropsWithoutHtmlAttrs;
-      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
-        console.warn(
-          "[Radio] Radio should have a label (children) or aria-label for accessibility."
-        );
+      const a = ariaProps;
+      if (!children && !a["aria-label"] && !a["aria-labelledby"]) {
+        console.warn("[Radio] Provide a label via children or aria-label for accessibility.");
       }
     }
-    const isInvalid = state.validationState === "invalid";
     return /* @__PURE__ */ jsxs(
       "label",
       {
-        className: cn(
-          radioVariants({
-            disabled: finalIsDisabled
-          }),
-          className
-        ),
+        ...mergeProps$1(hoverProps),
+        className: cn(radioRootVariants(), "group/radio", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled: finalIsDisabled,
+          isInvalid
+        }),
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "presentation",
-              className: cn(
-                radioContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: finalIsDisabled
-                })
-              ),
-              onMouseDown: handleRipple,
-              children: [
-                ripples,
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "9",
-                          className: cn(
-                            radioIconOuterVariants({
-                              state: visualState,
-                              disabled: finalIsDisabled
-                            })
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "5",
-                          className: cn(
-                            radioIconInnerVariants({
-                              visible: isSelected
-                            })
-                          )
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "13",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          children && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                radioLabelVariants({
-                  disabled: finalIsDisabled
-                })
-              ),
-              children
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(radioControlVariants()), children: [
+            /* @__PURE__ */ jsx("div", { className: cn(radioFocusRingVariants()), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(radioTargetVariants()), onMouseDown: handleRipple, children: [
+              ripples,
+              /* @__PURE__ */ jsx("span", { className: cn(radioStateLayerVariants()), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("div", { className: cn(radioRingVariants()), "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: cn(radioDotVariants()), "aria-hidden": "true" }) })
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsx("span", { className: cn(radioLabelVariants()), children })
         ]
       }
     );
@@ -3504,7 +3312,7 @@ var RadioGroup = forwardRef(
     children,
     // State props
     orientation = "vertical",
-    isInvalid: _isInvalid = false,
+    isInvalid = false,
     isDisabled = false,
     // Styling
     className,
@@ -3527,6 +3335,7 @@ var RadioGroup = forwardRef(
       {
         ...restPropsWithoutHtmlAttrs,
         isDisabled,
+        isInvalid,
         ref,
         className: cn("flex flex-col", className),
         "data-testid": dataTestId,
@@ -3534,11 +3343,8 @@ var RadioGroup = forwardRef(
           "div",
           {
             ...labelProps,
-            className: cn(
-              radioGroupLabelVariants({
-                disabled: isDisabled
-              })
-            ),
+            "data-disabled": isDisabled ? "" : void 0,
+            className: cn(radioGroupLabelVariants()),
             children: props.label
           }
         ),
@@ -3547,8 +3353,7 @@ var RadioGroup = forwardRef(
           {
             className: cn(
               radioGroupVariants({
-                orientation,
-                disabled: isDisabled
+                orientation
               })
             ),
             children