@tinybigui/react 0.8.0 → 0.8.1

package/dist/index.d.cts

@@ -2264,23 +2264,23 @@ interface CheckboxProps extends AriaCheckboxProps, Omit<React__default.HTMLAttri
  * Material Design 3 Checkbox 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.
+ * Implements the Variants-vs-States architecture: all interaction/selection
+ * states are expressed as data-* attributes on the root and consumed by each
+ * slot via group-data-[x]/checkbox Tailwind selectors — no state variants in CVA.
  *
  * Features:
- * - ✅ 3 states: unchecked, checked, indeterminate
- * - ✅ Error/invalid state support
- * - ✅ Ripple effect (Material Design)
- * - ✅ Full keyboard accessibility (via React Aria)
- * - ✅ Screen reader support (via React Aria)
- * - ✅ Focus management (via React Aria)
- * - ✅ Form integration (name, value props)
+ * - 3 states: unchecked, checked, indeterminate
+ * - Error/invalid state support
+ * - Ripple effect (Material Design)
+ * - Full keyboard accessibility (via React Aria)
+ * - Screen reader support (via React Aria)
+ * - Focus management (via React Aria)
+ * - Form integration (name, value props)
  *
  * MD3 Specifications:
- * - Container: 18x18dp (within 40x40dp touch target)
- * - Corner radius: 2dp (applied via SVG rx/ry attributes)
- * - State layers: 8% hover, 12% focus/pressed
- * - Disabled: 38% opacity
+ * - Box: 18×18dp, 2dp corner radius, within 40×40dp touch target
+ * - State-layer opacities: hover 8% | focus/pressed 10%
+ * - Disabled: 38% opacity on root
  * - Label spacing: 16px (ml-4)
  *
  * @example

package/dist/index.d.ts

@@ -2264,23 +2264,23 @@ interface CheckboxProps extends AriaCheckboxProps, Omit<React__default.HTMLAttri
  * Material Design 3 Checkbox 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.
+ * Implements the Variants-vs-States architecture: all interaction/selection
+ * states are expressed as data-* attributes on the root and consumed by each
+ * slot via group-data-[x]/checkbox Tailwind selectors — no state variants in CVA.
  *
  * Features:
- * - ✅ 3 states: unchecked, checked, indeterminate
- * - ✅ Error/invalid state support
- * - ✅ Ripple effect (Material Design)
- * - ✅ Full keyboard accessibility (via React Aria)
- * - ✅ Screen reader support (via React Aria)
- * - ✅ Focus management (via React Aria)
- * - ✅ Form integration (name, value props)
+ * - 3 states: unchecked, checked, indeterminate
+ * - Error/invalid state support
+ * - Ripple effect (Material Design)
+ * - Full keyboard accessibility (via React Aria)
+ * - Screen reader support (via React Aria)
+ * - Focus management (via React Aria)
+ * - Form integration (name, value props)
  *
  * MD3 Specifications:
- * - Container: 18x18dp (within 40x40dp touch target)
- * - Corner radius: 2dp (applied via SVG rx/ry attributes)
- * - State layers: 8% hover, 12% focus/pressed
- * - Disabled: 38% opacity
+ * - Box: 18×18dp, 2dp corner radius, within 40×40dp touch target
+ * - State-layer opacities: hover 8% | focus/pressed 10%
+ * - Disabled: 38% opacity on root
  * - Label spacing: 16px (ml-4)
  *
  * @example

package/dist/index.js

@@ -2665,205 +2665,132 @@ var TextField = forwardRef(
   }
 );
 TextField.displayName = "TextField";
-var checkboxVariants = 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 checkboxContainerVariants = cva(
-  [
-    // Base classes for checkbox visual container
-    "relative inline-flex items-center justify-center m-1",
-    "w-10 h-10",
-    // 40x40dp touch target (MD3 spec)
-    "flex-shrink-0",
-    "transition-all duration-200",
-    // 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: {
-      /**
-       * Checkbox state (determines visual appearance)
-       */
-      state: {
-        unchecked: "text-on-surface-variant",
-        checked: "text-primary",
-        indeterminate: "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: "unchecked",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "checked",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "indeterminate",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      }
-    ],
-    defaultVariants: {
-      state: "unchecked",
-      isInvalid: false,
-      disabled: false
-    }
-  }
-);
-var checkboxIconBoxVariants = cva(
-  [
-    // Base classes for the checkbox box
-    // Note: Border radius is applied via SVG rx/ry attributes (2dp) in the component
-    "transition-all duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Checkbox state
-       */
-      state: {
-        unchecked: [
-          "fill-transparent",
-          "stroke-outline",
-          // MD3: outline color for unchecked
-          "stroke-4"
-          // MD3: 2dp outline width
-        ],
-        checked: [
-          "fill-current",
-          // Uses parent text color (primary or error)
-          "stroke-none"
-        ],
-        indeterminate: [
-          "fill-current",
-          // Uses parent text color (primary or error)
-          "stroke-none"
-        ]
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: ["fill-transparent", "stroke-current", "stroke-2"],
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Disabled state overrides fill for checked/indeterminate
-      {
-        state: "checked",
-        disabled: true,
-        className: "fill-current stroke-none"
-      },
-      {
-        state: "indeterminate",
-        disabled: true,
-        className: "fill-current stroke-none"
-      }
-    ],
-    defaultVariants: {
-      state: "unchecked",
-      disabled: false
-    }
-  }
-);
-var checkboxIconVariants = cva(
-  [
-    "fill-current",
-    // Inherits color from parent
-    "transition-all duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Icon type
-       */
-      type: {
-        check: "",
-        // Checkmark icon
-        dash: ""
-        // Dash/minus icon
-      }
-    },
-    defaultVariants: {
-      type: "check"
+var checkboxRootVariants = cva([
+  "relative inline-flex items-center cursor-pointer select-none",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:opacity-38"
+]);
+var checkboxControlVariants = cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "w-10 h-10 rounded-full",
+  "overflow-hidden"
+]);
+var checkboxStateLayerVariants = cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition for opacity changes
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected / indeterminate → primary color
+  "group-data-[selected]/checkbox:bg-primary",
+  "group-data-[indeterminate]/checkbox:bg-primary",
+  // Invalid → error color (singly-chained)
+  "group-data-[invalid]/checkbox:bg-error",
+  // Invalid + selected → error wins (doubly-chained for specificity)
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-error",
+  // Interaction opacities (MD3: hover 8%, focus-visible 10%, pressed 10%)
+  "group-data-[hovered]/checkbox:opacity-8",
+  "group-data-[focus-visible]/checkbox:opacity-10",
+  "group-data-[pressed]/checkbox:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/checkbox:hidden"
+]);
+var checkboxFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/checkbox:opacity-100"
+]);
+var checkboxBoxVariants = cva([
+  // Base geometry
+  "relative flex items-center justify-center flex-shrink-0",
+  "w-[18px] h-[18px] rounded-[2px] border-2",
+  // Effects transition for color changes
+  "transition-[background-color,border-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // ── Unselected base ───────────────────────────────────────────────────────
+  "bg-transparent border-outline",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "group-data-[selected]/checkbox:bg-primary group-data-[selected]/checkbox:border-primary",
+  // ── Indeterminate ─────────────────────────────────────────────────────────
+  "group-data-[indeterminate]/checkbox:bg-primary group-data-[indeterminate]/checkbox:border-primary",
+  // ── Invalid (unselected) — singly chained ─────────────────────────────────
+  "group-data-[invalid]/checkbox:border-error",
+  // ── Invalid + selected — doubly chained (higher specificity) ──────────────
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-error",
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:border-error",
+  // ── Invalid + indeterminate — doubly chained ───────────────────────────────
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:bg-error",
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:border-error",
+  // ── Disabled (placed last — cascade wins over interaction colors) ──────────
+  "group-data-[disabled]/checkbox:border-on-surface/38",
+  "group-data-[disabled]/checkbox:bg-transparent",
+  // ── Disabled + selected — doubly chained ──────────────────────────────────
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:bg-on-surface/38",
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:border-transparent",
+  // ── Disabled + indeterminate — doubly chained ─────────────────────────────
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:bg-on-surface/38",
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:border-transparent"
+]);
+var checkboxIconVariants = cva([
+  "absolute inset-0 flex items-center justify-center",
+  // Spatial transition for icon appearing (scale)
+  "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base icon color
+  "text-on-primary",
+  // Invalid → on-error (doubly-chained for both selected and indeterminate)
+  "group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-on-error",
+  "group-data-[invalid]/checkbox:group-data-[indeterminate]/checkbox:text-on-error",
+  // Disabled → surface (doubly-chained)
+  "group-data-[selected]/checkbox:group-data-[disabled]/checkbox:text-surface",
+  "group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:text-surface"
+]);
+var checkboxLabelVariants = cva(["text-body-large text-on-surface select-none ml-4"]);
+function CheckboxCheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.5 9L7.2 11.7L13.5 5.4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "square",
+          strokeLinejoin: "miter"
+        }
+      )
     }
-  }
-);
-var checkboxLabelVariants = cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
+  );
+}
+function CheckboxIndeterminateIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "10", height: "2", rx: "1", fill: "currentColor" })
     }
-  }
-);
+  );
+}
 var Checkbox = forwardRef(
   ({
-    // Content props
     children,
-    // State props
     isIndeterminate = false,
     isInvalid = false,
     disableRipple = false,
     isDisabled = false,
-    // Styling
     className,
-    // Other props
     ...props
   }, forwardedRef) => {
     const internalRef = useRef(null);
@@ -2876,17 +2803,17 @@ var Checkbox = forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
-    const state = useToggleState(restPropsWithoutHtmlAttrs);
-    const { inputProps, labelProps } = useCheckbox(
-      restPropsWithoutHtmlAttrs,
+    const state = useToggleState(ariaProps);
+    const { inputProps, labelProps, isPressed } = useCheckbox(
+      ariaProps,
       state,
       ref
     );
     const { isFocusVisible, focusProps } = useFocusRing();
+    const { isHovered, hoverProps } = useHover({ isDisabled });
     const isSelected = state.isSelected;
-    const visualState = isIndeterminate ? "indeterminate" : isSelected ? "checked" : "unchecked";
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: isDisabled || disableRipple
     });
@@ -2896,8 +2823,8 @@ var Checkbox = forwardRef(
       }
     }, [isIndeterminate, ref]);
     if (process.env.NODE_ENV === "development") {
-      const ariaProps = restPropsWithoutHtmlAttrs;
-      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
+      const a = ariaProps;
+      if (!children && !a["aria-label"] && !a["aria-labelledby"]) {
         console.warn(
           "[Checkbox] Checkbox should have a label (children) or aria-label for accessibility."
         );
@@ -2906,105 +2833,40 @@ var Checkbox = forwardRef(
     return /* @__PURE__ */ jsxs(
       "label",
       {
-        ...labelProps,
-        className: cn(
-          checkboxVariants({
-            disabled: isDisabled
-          }),
-          className
-        ),
+        ...mergeProps$1(labelProps, hoverProps),
+        className: cn(checkboxRootVariants(), "group/checkbox", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled,
+          isInvalid,
+          isIndeterminate,
+          isReadOnly: ariaProps.isReadOnly ?? false
+        }),
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               role: "presentation",
-              className: cn(
-                checkboxContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: isDisabled
-                })
-              ),
+              className: cn(checkboxControlVariants()),
               onMouseDown: handleRipple,
               children: [
                 ripples,
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "18",
-                    height: "18",
-                    viewBox: "0 0 18 18",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          x: "0",
-                          y: "0",
-                          width: "18",
-                          height: "18",
-                          rx: "2",
-                          ry: "2",
-                          className: cn(
-                            checkboxIconBoxVariants({
-                              state: visualState,
-                              disabled: isDisabled
-                            })
-                          )
-                        }
-                      ),
-                      isSelected && !isIndeterminate && /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M14.1 4.5L6.3 12.3l-3.4-3.4L1.5 10.3l4.8 4.8 9.2-9.2z",
-                          className: cn(checkboxIconVariants({ type: "check" }), "fill-on-primary")
-                        }
-                      ),
-                      isIndeterminate && /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          x: "4",
-                          y: "8",
-                          width: "10",
-                          height: "2",
-                          className: cn(checkboxIconVariants({ type: "dash" }), "fill-on-primary")
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          x: "-3",
-                          y: "-3",
-                          width: "24",
-                          height: "24",
-                          rx: "12",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsx("span", { className: cn(checkboxStateLayerVariants()), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: cn(checkboxFocusRingVariants()), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("div", { className: cn(checkboxBoxVariants()), "aria-hidden": "true", children: [
+                  isSelected && !isIndeterminate && /* @__PURE__ */ jsx("span", { className: cn(checkboxIconVariants()), children: /* @__PURE__ */ jsx(CheckboxCheckIcon, {}) }),
+                  isIndeterminate && /* @__PURE__ */ jsx("span", { className: cn(checkboxIconVariants()), children: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}) })
+                ] })
               ]
             }
           ),
-          children && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                checkboxLabelVariants({
-                  disabled: isDisabled
-                })
-              ),
-              children
-            }
-          )
+          children && /* @__PURE__ */ jsx("span", { className: cn(checkboxLabelVariants()), children })
         ]
       }
     );