@tinybigui/react 0.8.1 → 0.9.0

package/dist/index.js

@@ -6463,18 +6463,43 @@ function SnackbarProvider({ children, maxVisible = 5 }) {
     )
   ] });
 }
+function stripAriaProps(handlers) {
+  const {
+    isDisabled: _isDisabled,
+    onPress: _onPress,
+    onPressStart: _onPressStart,
+    onPressEnd: _onPressEnd,
+    onPressChange: _onPressChange,
+    onPressUp: _onPressUp,
+    ...html
+  } = handlers;
+  return html;
+}
+function buildPressCallbacks(onPressStart, onPressEnd) {
+  return {
+    ...onPressStart !== void 0 && { onPressStart },
+    ...onPressEnd !== void 0 && { onPressEnd }
+  };
+}
 var AssistChipImpl = forwardRef(
-  ({ label, onPress, isDisabled, className, onMouseDown, children }, forwardedRef) => {
+  ({ label, onPress, isDisabled, className, onMouseDown, children, bodyPassthrough }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const { buttonProps } = useButton(
       {
         ...onPress !== void 0 && { onPress },
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
       },
       ref
     );
-    const mergedProps = mergeProps(buttonProps, { onMouseDown });
+    const htmlPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const mergedProps = mergeProps(
+      buttonProps,
+      { onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlPassthrough
+    );
     return /* @__PURE__ */ jsx("button", { ...mergedProps, type: "button", ref, className, children: children ?? label });
   }
 );
@@ -6488,7 +6513,8 @@ var FilterChipImpl = forwardRef(
     isDisabled,
     className,
     onMouseDown,
-    children
+    children,
+    bodyPassthrough
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -6496,11 +6522,18 @@ var FilterChipImpl = forwardRef(
       ...selected !== void 0 && { isSelected: selected },
       ...defaultSelected !== void 0 && { defaultSelected },
       ...onSelectionChange !== void 0 && { onChange: onSelectionChange },
-      ...isDisabled !== void 0 && { isDisabled }
+      ...isDisabled !== void 0 && { isDisabled },
+      ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
     };
     const state = useToggleState(toggleProps);
     const { buttonProps } = useToggleButton(toggleProps, state, ref);
-    const mergedProps = mergeProps(buttonProps, { onMouseDown });
+    const htmlPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const mergedProps = mergeProps(
+      buttonProps,
+      { onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlPassthrough
+    );
     return /* @__PURE__ */ jsx("button", { ...mergedProps, type: "button", ref, className, children: children ?? label });
   }
 );
@@ -6514,7 +6547,9 @@ var InputChipImpl = forwardRef(
     onMouseDown,
     removeIcon,
     removeButtonClassName,
-    children
+    children,
+    bodyPassthrough,
+    removePassthrough
   }, forwardedRef) => {
     const chipRef = useRef(null);
     const ref = forwardedRef ?? chipRef;
@@ -6522,7 +6557,8 @@ var InputChipImpl = forwardRef(
     const { buttonProps: chipButtonProps } = useButton(
       {
         "aria-label": label,
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
       },
       ref
     );
@@ -6530,7 +6566,8 @@ var InputChipImpl = forwardRef(
       {
         "aria-label": `Remove ${label}`,
         onPress: () => onRemove?.(),
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(removePassthrough?.onPressStart, removePassthrough?.onPressEnd)
       },
       removeRef
     );
@@ -6540,13 +6577,25 @@ var InputChipImpl = forwardRef(
         onRemove?.();
       }
     };
-    const mergedChipProps = mergeProps(chipButtonProps, { onKeyDown: handleKeyDown, onMouseDown });
+    const htmlBodyPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const htmlRemovePassthrough = stripAriaProps(removePassthrough?.eventHandlers ?? {});
+    const mergedChipProps = mergeProps(
+      chipButtonProps,
+      { onKeyDown: handleKeyDown, onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlBodyPassthrough
+    );
+    const mergedRemoveProps = mergeProps(
+      removeButtonProps,
+      removePassthrough?.dataAttributes ?? {},
+      htmlRemovePassthrough
+    );
     return /* @__PURE__ */ jsxs("span", { className, children: [
       /* @__PURE__ */ jsx("button", { ...mergedChipProps, type: "button", ref, children: children ?? label }),
       /* @__PURE__ */ jsx(
         "button",
         {
-          ...removeButtonProps,
+          ...mergedRemoveProps,
           type: "button",
           ref: removeRef,
           className: removeButtonClassName,
@@ -6558,17 +6607,24 @@ var InputChipImpl = forwardRef(
 );
 InputChipImpl.displayName = "InputChipImpl";
 var SuggestionChipImpl = forwardRef(
-  ({ label, onPress, isDisabled, className, onMouseDown, children }, forwardedRef) => {
+  ({ label, onPress, isDisabled, className, onMouseDown, children, bodyPassthrough }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const { buttonProps } = useButton(
       {
         ...onPress !== void 0 && { onPress },
-        ...isDisabled !== void 0 && { isDisabled }
+        ...isDisabled !== void 0 && { isDisabled },
+        ...buildPressCallbacks(bodyPassthrough?.onPressStart, bodyPassthrough?.onPressEnd)
       },
       ref
     );
-    const mergedProps = mergeProps(buttonProps, { onMouseDown });
+    const htmlPassthrough = stripAriaProps(bodyPassthrough?.eventHandlers ?? {});
+    const mergedProps = mergeProps(
+      buttonProps,
+      { onMouseDown },
+      bodyPassthrough?.dataAttributes ?? {},
+      htmlPassthrough
+    );
     return /* @__PURE__ */ jsx("button", { ...mergedProps, type: "button", ref, className, children: children ?? label });
   }
 );
@@ -6588,123 +6644,246 @@ var ChipHeadless = forwardRef((props, ref) => {
 ChipHeadless.displayName = "ChipHeadless";
 var chipVariants = cva(
   [
-    // Base layout — always applied
-    "relative inline-flex items-center overflow-hidden rounded-sm h-8",
-    "text-label-large cursor-pointer gap-1 group px-4",
-    // Focus ring
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2"
+    // Layout + shape
+    "relative inline-flex items-center justify-center",
+    "h-8 rounded-sm cursor-pointer select-none",
+    "text-label-large gap-2",
+    // Base padding (no icons)
+    "px-4",
+    // Content-flag padding overrides (self-targeting)
+    "data-[with-leading]:pl-2 data-[with-leading]:pr-4",
+    "data-[with-trailing]:pr-2",
+    // Effects transition (color/bg/shadow/border)
+    "transition-[background-color,border-color,box-shadow,color]",
+    "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled self-targeting
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+    "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12",
+    "data-[disabled]:bg-transparent data-[disabled]:shadow-none"
   ],
   {
     variants: {
       /**
-       * MD3 chip type — determines interaction model and default styling.
+       * MD3 chip type — determines base color tokens.
        */
       chipType: {
-        assist: "",
-        // Filter and Input chips have a fixed tonal surface style.
-        // The transition is on the base class so deselection also animates
-        // (adding it only in the selected compound variant would mean the
-        // transition property disappears at the same moment the color reverts,
-        // causing an instant jump back to the unselected color).
-        filter: "bg-surface-container-low text-on-surface border border-outline transition-[background-color,color] duration-short4 ease-standard",
-        input: "bg-surface-container-low text-on-surface border border-outline",
-        suggestion: ""
+        /**
+         * Assist — transparent + outline border; label on-surface; leading icon primary.
+         * State layer color: on-surface.
+         */
+        assist: ["bg-transparent border border-outline text-on-surface"],
+        /**
+         * Filter — transparent + outline border; label on-surface-variant.
+         * Selected state via group-data selectors (no CVA variant key).
+         * State layer color: on-surface-variant → on-secondary-container when selected.
+         */
+        filter: [
+          "bg-transparent border border-outline text-on-surface-variant",
+          // Selected: secondary-container fill, no border, on-secondary-container label
+          "group-data-[selected]/chip:bg-secondary-container",
+          "group-data-[selected]/chip:border-0",
+          "group-data-[selected]/chip:text-on-secondary-container",
+          // Disabled + selected overrides (self-targeting, doubled to win over singly-chained selected)
+          "data-[selected]:data-[disabled]:bg-on-surface/12",
+          "data-[selected]:data-[disabled]:border-0"
+        ],
+        /**
+         * Input — transparent + outline-variant border; label/icons on-surface-variant.
+         * State layer color: on-surface-variant.
+         */
+        input: ["bg-transparent border border-outline-variant text-on-surface-variant"],
+        /**
+         * Suggestion — transparent + outline border; label on-surface-variant.
+         * State layer color: on-surface-variant.
+         */
+        suggestion: ["bg-transparent border border-outline text-on-surface-variant"]
       },
       /**
-       * Surface style for Assist and Suggestion chips only.
-       * Applied via compound variants so it has no effect on Filter/Input.
+       * Surface style — elevated adds shadow and surface-container-low background.
+       * All four chip types support elevated.
+       * Note: "flat" and the deprecated "tonal" both resolve to the same base style
+       * (transparent + border from chipType). The elevated compound variant overrides.
        */
       surface: {
-        tonal: "",
-        elevated: ""
-      },
-      /**
-       * Selected state — only meaningful for Filter chips.
-       * Applied via compound variant.
-       */
-      selected: {
-        true: "",
-        false: ""
-      },
-      /**
-       * MD3 disabled state: content 38% opacity, border 12% opacity, no background.
-       * Kept here only for `pointer-events-none`; color/bg overrides live in the
-       * disabled compound variants at the bottom so they win over surface compounds.
-       */
-      isDisabled: {
-        true: "pointer-events-none",
-        false: ""
-      },
-      /**
-       * Adjusts leading padding when a leading icon is present.
-       * Overrides the base `px-4` → `pl-3 pr-4`.
-       */
-      hasLeadingIcon: {
-        true: "pl-3 pr-4",
-        false: ""
-      },
-      /**
-       * Adjusts trailing padding for Input chips with a remove button.
-       * Takes precedence over hasLeadingIcon via tailwind-merge: `pl-3 pr-3`.
-       */
-      hasRemoveButton: {
-        true: "pl-3 pr-3",
-        false: ""
+        flat: "",
+        elevated: "",
+        /** @deprecated Use `flat` instead. */
+        tonal: ""
       }
     },
     compoundVariants: [
-      // ── Assist chip surfaces ───────────────────────────────────────────────
+      // ── Elevated surface (all chip types) ─────────────────────────────────
+      // Shared elevated base: surface-container-low fill, no border, level-1 elevation
       {
+        surface: "elevated",
         chipType: "assist",
-        surface: "tonal",
-        className: "bg-surface-container-low text-on-surface border border-outline"
+        className: [
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1"
+        ]
       },
       {
-        chipType: "assist",
         surface: "elevated",
+        chipType: "filter",
         className: [
-          "bg-surface-container-low text-on-surface shadow-elevation-1",
-          "hover:shadow-elevation-2 transition-shadow duration-short2 ease-standard"
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1",
+          // Selected overrides bg; elevation stays
+          "group-data-[selected]/chip:bg-secondary-container"
         ]
       },
-      // ── Suggestion chip surfaces ───────────────────────────────────────────
       {
-        chipType: "suggestion",
-        surface: "tonal",
-        className: "bg-surface-container-low text-on-surface border border-outline"
+        surface: "elevated",
+        chipType: "input",
+        className: [
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1"
+        ]
       },
       {
-        chipType: "suggestion",
         surface: "elevated",
+        chipType: "suggestion",
         className: [
-          "bg-surface-container-low text-on-surface shadow-elevation-1",
-          "hover:shadow-elevation-2 transition-shadow duration-short2 ease-standard"
+          "bg-surface-container-low border-0 shadow-elevation-1",
+          "data-[hovered]:shadow-elevation-2",
+          "data-[focus-visible]:shadow-elevation-1",
+          "data-[pressed]:data-[pressed]:shadow-elevation-1"
         ]
       },
-      // ── Filter chip selected state ─────────────────────────────────────────
+      // Deprecated tonal maps to flat (same as no override)
+      {
+        surface: "tonal",
+        chipType: "assist",
+        className: ""
+      },
       {
+        surface: "tonal",
         chipType: "filter",
-        selected: true,
-        className: "bg-secondary-container text-on-secondary-container border-0"
+        className: ""
       },
-      // ── Disabled overrides — placed last so they always win ────────────────
-      // These must follow all surface/selection compound variants to ensure
-      // tailwind-merge keeps the disabled classes over any surface classes.
       {
-        isDisabled: true,
-        className: "text-on-surface/38 border-on-surface/12 bg-transparent"
+        surface: "tonal",
+        chipType: "input",
+        className: ""
+      },
+      {
+        surface: "tonal",
+        chipType: "suggestion",
+        className: ""
       }
     ],
     defaultVariants: {
       chipType: "assist",
-      surface: "tonal",
-      selected: false,
-      isDisabled: false,
-      hasLeadingIcon: false,
-      hasRemoveButton: false
+      surface: "flat"
     }
   }
 );
+var chipStateLayerVariants = cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/chip:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/chip:opacity-10",
+    // Pressed: 10%, doubled selector wins over hover
+    "group-data-[pressed]/chip:group-data-[pressed]/chip:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/chip:hidden"
+  ],
+  {
+    variants: {
+      chipType: {
+        assist: "bg-on-surface",
+        filter: [
+          "bg-on-surface-variant",
+          // Selected: switch to on-secondary-container color
+          "group-data-[selected]/chip:bg-on-secondary-container"
+        ],
+        input: "bg-on-surface-variant",
+        suggestion: "bg-on-surface-variant"
+      }
+    },
+    defaultVariants: { chipType: "assist" }
+  }
+);
+var chipFocusRingVariants = cva([
+  "pointer-events-none absolute inset-[-3px] rounded-sm",
+  "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]/chip:opacity-100"
+]);
+var chipLeadingIconVariants = cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center size-[18px]",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    "group-data-[disabled]/chip:text-on-surface/38"
+  ],
+  {
+    variants: {
+      chipType: {
+        assist: "text-primary",
+        filter: [
+          "text-on-surface-variant",
+          "group-data-[selected]/chip:text-on-secondary-container"
+        ],
+        input: "text-on-surface-variant",
+        suggestion: "text-on-surface-variant"
+      }
+    },
+    defaultVariants: { chipType: "assist" }
+  }
+);
+var chipTrailingIconVariants = cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center size-[18px]",
+  "text-on-surface-variant",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[disabled]/chip:text-on-surface/38"
+]);
+var chipCheckmarkVariants = cva([
+  "inline-flex overflow-hidden shrink-0",
+  // Spatial spring for width (moves adjacent text — this is a spatial animation)
+  "transition-[width] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Collapsed state
+  "w-0",
+  // Expanded state when selected
+  "group-data-[selected]/chip:w-[18px]"
+]);
+var chipCheckmarkIconVariants = cva([
+  "inline-flex items-center justify-center size-[18px] shrink-0",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[selected]/chip:opacity-100",
+  // Color: on-secondary-container when selected; inherits on-surface-variant at rest (invisible)
+  "text-on-secondary-container",
+  "group-data-[disabled]/chip:text-on-surface/38"
+]);
+var chipLabelVariants = cva(["relative z-10 inline-flex items-center"]);
+var chipRemoveButtonVariants = cva([
+  "relative z-10 inline-flex size-[18px] shrink-0 items-center justify-center",
+  "rounded-full cursor-pointer",
+  "text-on-surface-variant",
+  "group/chip-remove",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var chipRemoveStateLayerVariants = cva([
+  // Slightly larger circle (32dp touch target centered on 18dp icon)
+  "absolute inset-[-7px] rounded-full pointer-events-none opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/chip-remove:opacity-8",
+  "group-data-[focus-visible]/chip-remove:opacity-10",
+  "group-data-[pressed]/chip-remove:group-data-[pressed]/chip-remove:opacity-10",
+  "group-data-[disabled]/chip-remove:hidden"
+]);
 var CloseIcon2 = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -6729,22 +6908,11 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
   }
 );
-var StateLayer = () => /* @__PURE__ */ jsx(
-  "span",
-  {
-    "aria-hidden": "true",
-    className: cn(
-      "bg-on-surface pointer-events-none absolute inset-0 rounded-sm opacity-0",
-      "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity",
-      "group-focus-within:opacity-12 group-hover:opacity-8 group-active:opacity-12"
-    )
-  }
-);
 var Chip = forwardRef(
   ({
     type,
     label,
-    surface = "tonal",
+    surface: surfaceProp = "flat",
     selected,
     defaultSelected,
     onSelectionChange,
@@ -6755,6 +6923,17 @@ var Chip = forwardRef(
     isDisabled = false,
     className
   }, ref) => {
+    const surface = (() => {
+      if (surfaceProp === "tonal") {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            '[Chip] surface="tonal" is deprecated. Use surface="flat" instead. "tonal" will be removed in a future minor version.'
+          );
+        }
+        return "flat";
+      }
+      return surfaceProp;
+    })();
     const [localSelected, setLocalSelected] = useState(defaultSelected ?? false);
     const isControlled = selected !== void 0;
     const effectiveSelected = type === "filter" ? isControlled ? selected : localSelected : false;
@@ -6767,8 +6946,16 @@ var Chip = forwardRef(
       },
       [isControlled, onSelectionChange]
     );
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const [isRemovePressed, setIsRemovePressed] = useState(false);
+    const { isHovered: isRemoveHovered, hoverProps: removeHoverProps } = useHover({ isDisabled });
+    const { isFocusVisible: isRemoveFocusVisible, focusProps: removeFocusProps } = useFocusRing();
     const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
-    const hasLeadingIcon = Boolean(leadingIcon);
+    const hasLeadingIcon = Boolean(leadingIcon) || type === "filter";
     const [isRemoving, setIsRemoving] = useState(false);
     const handleRemove = useCallback(() => {
       setIsRemoving(true);
@@ -6778,35 +6965,38 @@ var Chip = forwardRef(
         onRemove?.();
       }
     }, [isRemoving, onRemove]);
-    const chipClass = () => cn(
-      chipVariants({
-        chipType: type,
-        surface: type === "assist" || type === "suggestion" ? surface : void 0,
-        selected: type === "filter" ? effectiveSelected : void 0,
-        isDisabled,
-        hasLeadingIcon,
-        hasRemoveButton: false
-      }),
-      className
-    );
+    const bodyDataAttrs = getInteractionDataAttributes({
+      isHovered,
+      isFocusVisible,
+      isPressed,
+      ...type === "filter" && { isSelected: effectiveSelected },
+      isDisabled
+    });
+    const rootClass = cn(chipVariants({ chipType: type, surface }), "group/chip", className);
     if (type === "input") {
+      const removeDataAttrs = getInteractionDataAttributes({
+        isHovered: isRemoveHovered,
+        isFocusVisible: isRemoveFocusVisible,
+        isPressed: isRemovePressed,
+        isDisabled
+      });
       return /* @__PURE__ */ jsxs(
         "span",
         {
           className: cn(
-            chipVariants({
-              chipType: "input",
-              isDisabled,
-              hasLeadingIcon,
-              hasRemoveButton: true
-            }),
+            chipVariants({ chipType: "input", surface }),
+            "group/chip",
             isRemoving && "animate-md-fade-out",
             className
           ),
+          ...bodyDataAttrs,
+          "data-with-leading": hasLeadingIcon ? "" : void 0,
+          "data-with-trailing": "",
           onAnimationEnd: handleAnimationEnd,
           children: [
             ripples,
-            /* @__PURE__ */ jsx(StateLayer, {}),
+            /* @__PURE__ */ jsx("span", { className: cn(chipStateLayerVariants({ chipType: "input" })), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: cn(chipFocusRingVariants()), "aria-hidden": "true" }),
             /* @__PURE__ */ jsxs(
               ChipHeadless,
               {
@@ -6815,20 +7005,40 @@ var Chip = forwardRef(
                 isDisabled,
                 onRemove: handleRemove,
                 onMouseDown: handleRipple,
-                removeIcon: /* @__PURE__ */ jsx(CloseIcon2, {}),
-                removeButtonClassName: "relative z-10 inline-flex size-4.5 shrink-0 items-center text-on-surface-variant",
+                removeButtonClassName: cn(chipRemoveButtonVariants()),
+                removeIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(chipRemoveStateLayerVariants()),
+                      "aria-hidden": "true",
+                      ...{ "data-remove-state-layer": "" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(CloseIcon2, {})
+                ] }),
                 ref,
                 className: "contents",
+                bodyPassthrough: {
+                  onPressStart: handlePressStart,
+                  onPressEnd: handlePressEnd
+                },
+                removePassthrough: {
+                  dataAttributes: removeDataAttrs,
+                  eventHandlers: mergeProps$1(removeHoverProps, removeFocusProps),
+                  onPressStart: () => setIsRemovePressed(true),
+                  onPressEnd: () => setIsRemovePressed(false)
+                },
                 children: [
                   leadingIcon && /* @__PURE__ */ jsx(
                     "span",
                     {
                       "aria-hidden": "true",
-                      className: "relative z-10 inline-flex size-4.5 shrink-0 items-center",
+                      className: cn(chipLeadingIconVariants({ chipType: "input" })),
                       children: leadingIcon
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label })
+                  /* @__PURE__ */ jsx("span", { className: cn(chipLabelVariants()), children: label })
                 ]
               }
             )
@@ -6849,37 +7059,21 @@ var Chip = forwardRef(
         ...type !== "filter" && onPress !== void 0 && { onPress },
         isDisabled,
         onMouseDown: handleRipple,
-        className: chipClass(),
+        className: cn(rootClass),
+        bodyPassthrough: {
+          dataAttributes: bodyDataAttrs,
+          onPressStart: handlePressStart,
+          onPressEnd: handlePressEnd,
+          eventHandlers: mergeProps$1(hoverProps, focusProps)
+        },
         children: [
           ripples,
-          /* @__PURE__ */ jsx(StateLayer, {}),
-          type === "filter" && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "duration-short4 ease-emphasized-decelerate inline-flex overflow-hidden transition-[width,opacity]",
-                effectiveSelected ? "w-4.5 opacity-100" : "w-0 opacity-0"
-              ),
-              children: /* @__PURE__ */ jsx(CheckIcon2, {})
-            }
-          ),
-          leadingIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "relative z-10 inline-flex size-4.5 shrink-0 items-center",
-              children: leadingIcon
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label }),
-          trailingIcon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "relative z-10 inline-flex size-4.5 shrink-0 items-center",
-              children: trailingIcon
-            }
-          )
+          /* @__PURE__ */ jsx("span", { className: cn(chipStateLayerVariants({ chipType: type })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: cn(chipFocusRingVariants()), "aria-hidden": "true" }),
+          type === "filter" && /* @__PURE__ */ jsx("span", { className: cn(chipCheckmarkVariants()), "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: cn(chipCheckmarkIconVariants()), children: /* @__PURE__ */ jsx(CheckIcon2, {}) }) }),
+          leadingIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(chipLeadingIconVariants({ chipType: type })), children: leadingIcon }),
+          /* @__PURE__ */ jsx("span", { className: cn(chipLabelVariants()), children: label }),
+          trailingIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(chipTrailingIconVariants()), children: trailingIcon })
         ]
       }
     );