@udixio/tailwind 2.3.7 → 2.4.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 2.4.1 (2025-11-05)
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/theme to 2.1.3
+
+## 2.4.0 (2025-11-03)
+
+### 🚀 Features
+
+- **ui-react, plugins-tailwind:** migrate to `State` component for unified state handling ([92996bc](https://github.com/Udixio/UI/commit/92996bc))
+- **ui-react, plugins-tailwind:** enhance `State` component and streamline state utilities ([0e1858a](https://github.com/Udixio/UI/commit/0e1858a))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 2.3.7 (2025-10-17)
 
 ### 🩹 Fixes

package/dist/browser/tailwind.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/browser/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAO/E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAgFD,qBAAa,cAAe,SAAQ,cAAc,CAChD,yBAAyB,EACzB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,mCAA6B;CACzC;AAED,qBAAa,yBAA0B,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IAC/E,SAAS,SAAM;IAEtB,MAAM;IAeN,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;IAkF/C,SAAS;eAC+B,MAAM;cAAQ,MAAM;;IAetD,MAAM;CAYb"}
+{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/browser/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAO/E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAgFD,qBAAa,cAAe,SAAQ,cAAc,CAChD,yBAAyB,EACzB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,mCAA6B;CACzC;AAED,qBAAa,yBAA0B,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IAC/E,SAAS,SAAM;IAEtB,MAAM;IAeN,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;IA8E/C,SAAS;eAC+B,MAAM;cAAQ,MAAM;;IAetD,MAAM;CAYb"}

package/dist/browser.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tailwind_plugin = require("./tailwind.plugin-D7mbDtcZ.cjs");
+const tailwind_plugin = require("./tailwind.plugin-CweksRYP.cjs");
 exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
 exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
 exports.animation = tailwind_plugin.animation;

package/dist/browser.js

@@ -1,5 +1,5 @@
-import { m as main } from "./tailwind.plugin-WLIf7Hf5.js";
-import { T, b, a, f, s } from "./tailwind.plugin-WLIf7Hf5.js";
+import { m as main } from "./tailwind.plugin-Cy4ccIsB.js";
+import { T, b, a, f, s } from "./tailwind.plugin-Cy4ccIsB.js";
 export {
   T as TailwindImplPluginBrowser,
   b as TailwindPlugin,

package/dist/node.cjs

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tailwind_plugin = require("./tailwind.plugin-D7mbDtcZ.cjs");
+const tailwind_plugin = require("./tailwind.plugin-CweksRYP.cjs");
 const theme = require("@udixio/theme");
 const fs = require("fs");
 const console = require("node:console");

package/dist/node.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-WLIf7Hf5.js";
-import { a, f, s } from "./tailwind.plugin-WLIf7Hf5.js";
+import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-Cy4ccIsB.js";
+import { a, f, s } from "./tailwind.plugin-Cy4ccIsB.js";
 import { PluginAbstract, FontPlugin } from "@udixio/theme";
 import * as fs from "fs";
 import * as console from "node:console";

package/dist/plugins-tailwind/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/state.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAeF,eAAO,MAAM,KAAK,4EAuDhB,CAAC"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/state.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAcF,eAAO,MAAM,KAAK,4EAmGhB,CAAC"}

package/dist/{tailwind.plugin-D7mbDtcZ.cjs → tailwind.plugin-CweksRYP.cjs}

@@ -492,10 +492,9 @@ const font = plugin.withOptions((options) => {
   };
 });
 const defaultConfig = {
-  statePrefix: "state",
   disabledStyles: {
     textOpacity: 0.38,
-    backgroundOpacity: 0.12
+    backgroundOpacity: 0.1
   },
   transition: {
     duration: 150
@@ -503,7 +502,6 @@ const defaultConfig = {
 };
 const state = plugin.withOptions(({ colorKeys }) => {
   const resolved = {
-    ...defaultConfig,
     disabledStyles: {
       ...defaultConfig.disabledStyles,
       ...{}
@@ -513,40 +511,77 @@ const state = plugin.withOptions(({ colorKeys }) => {
       ...{}
     }
   };
-  return ({ addComponents }) => {
-    const newComponents = {};
-    for (const isGroup of [false, true]) {
-      const group = isGroup ? "group-" : "";
-      for (const colorName of colorKeys) {
-        const className = `.${group}${resolved.statePrefix}-${colorName}`;
-        newComponents[className] = {
-          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
-          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
-          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
-          [`@apply transition-colors`]: {},
-          [`@apply duration-${resolved.transition.duration}`]: {},
-          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
-          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
-        };
+  return ({ matchUtilities, addUtilities }) => {
+    matchUtilities(
+      {
+        [`state-group`]: (groupName) => {
+          const groupVariant = groupName ? `/${groupName}` : "";
+          return {
+            [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
+            [`@apply group-active${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
+            [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
+            [`@apply transition-colors`]: {},
+            [`@apply duration-${resolved.transition.duration}`]: {},
+            [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+          };
+        }
+      },
+      {
+        values: {
+          DEFAULT: ""
+        }
       }
-    }
-    for (const colorName of colorKeys) {
-      for (const stateName of ["hover", "active", "focus", "disabled"]) {
-        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
-        if (stateName === "disabled") {
-          newComponents[className] = {
-            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
-            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+    );
+    matchUtilities(
+      {
+        [`state-ripple-group`]: (groupName) => {
+          const groupVariant = groupName ? `/${groupName}` : "";
+          return {
+            [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
+            [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
+            [`@apply transition-colors`]: {},
+            [`@apply duration-${resolved.transition.duration}`]: {},
+            [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
           };
-        } else {
-          const opacity = stateName === "hover" ? 0.08 : 0.12;
-          newComponents[className] = {
-            [`@apply bg-${colorName}/[${opacity}]`]: {}
+        }
+      },
+      {
+        values: {
+          DEFAULT: ""
+        }
+      }
+    );
+    addUtilities({
+      [`.state-layer`]: {
+        [`@apply hover:bg-[var(--state-color)]/[0.08]`]: {},
+        [`@apply active:bg-[var(--state-color)]/[0.10]`]: {},
+        [`@apply focus-visible:bg-[var(--state-color)]/[0.10]`]: {},
+        [`@apply transition-colors`]: {},
+        [`@apply duration-${resolved.transition.duration}`]: {},
+        [`@apply disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+        [`@apply disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+      }
+    });
+    matchUtilities(
+      {
+        [`state`]: (colorName) => {
+          return {
+            [`--state-color`]: `var(--color-${colorName})`
           };
         }
+      },
+      {
+        values: colorKeys.reduce(
+          (acc, key) => {
+            acc[key] = key;
+            return acc;
+          },
+          {}
+        )
       }
-    }
-    addComponents(newComponents);
+    );
   };
 });
 const shadow = plugin(
@@ -728,11 +763,9 @@ class TailwindImplPluginBrowser extends theme.PluginImplAbstract {
 }`;
     const sourceColor = this.api.context.sourceColor;
     const originalSourceColorHex = materialColorUtilities.hexFromArgb(sourceColor.toInt());
-    console.log("to subthmes", this.api.context.id);
     for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
       const newHue = materialColorUtilities.Hct.fromInt(materialColorUtilities.argbFromHex(value)).hue;
       const newColor = materialColorUtilities.Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
-      console.log("newColor", materialColorUtilities.hexFromArgb(newColor.toInt()));
       this.api.context.sourceColor = materialColorUtilities.hexFromArgb(newColor.toInt());
       const colors2 = this.getColors();
       this.outputCss += `
@@ -752,7 +785,6 @@ class TailwindImplPluginBrowser extends theme.PluginImplAbstract {
       })}
 }`;
     }
-    console.log("finish");
     this.api.context.sourceColor = originalSourceColorHex;
   }
   getColors() {

package/dist/{tailwind.plugin-WLIf7Hf5.js → tailwind.plugin-Cy4ccIsB.js}

@@ -491,10 +491,9 @@ const font = plugin.withOptions((options) => {
   };
 });
 const defaultConfig = {
-  statePrefix: "state",
   disabledStyles: {
     textOpacity: 0.38,
-    backgroundOpacity: 0.12
+    backgroundOpacity: 0.1
   },
   transition: {
     duration: 150
@@ -502,7 +501,6 @@ const defaultConfig = {
 };
 const state = plugin.withOptions(({ colorKeys }) => {
   const resolved = {
-    ...defaultConfig,
     disabledStyles: {
       ...defaultConfig.disabledStyles,
       ...{}
@@ -512,40 +510,77 @@ const state = plugin.withOptions(({ colorKeys }) => {
       ...{}
     }
   };
-  return ({ addComponents }) => {
-    const newComponents = {};
-    for (const isGroup of [false, true]) {
-      const group = isGroup ? "group-" : "";
-      for (const colorName of colorKeys) {
-        const className = `.${group}${resolved.statePrefix}-${colorName}`;
-        newComponents[className] = {
-          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
-          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
-          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
-          [`@apply transition-colors`]: {},
-          [`@apply duration-${resolved.transition.duration}`]: {},
-          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
-          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
-        };
+  return ({ matchUtilities, addUtilities }) => {
+    matchUtilities(
+      {
+        [`state-group`]: (groupName) => {
+          const groupVariant = groupName ? `/${groupName}` : "";
+          return {
+            [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
+            [`@apply group-active${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
+            [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
+            [`@apply transition-colors`]: {},
+            [`@apply duration-${resolved.transition.duration}`]: {},
+            [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+          };
+        }
+      },
+      {
+        values: {
+          DEFAULT: ""
+        }
       }
-    }
-    for (const colorName of colorKeys) {
-      for (const stateName of ["hover", "active", "focus", "disabled"]) {
-        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
-        if (stateName === "disabled") {
-          newComponents[className] = {
-            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
-            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+    );
+    matchUtilities(
+      {
+        [`state-ripple-group`]: (groupName) => {
+          const groupVariant = groupName ? `/${groupName}` : "";
+          return {
+            [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
+            [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
+            [`@apply transition-colors`]: {},
+            [`@apply duration-${resolved.transition.duration}`]: {},
+            [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
           };
-        } else {
-          const opacity = stateName === "hover" ? 0.08 : 0.12;
-          newComponents[className] = {
-            [`@apply bg-${colorName}/[${opacity}]`]: {}
+        }
+      },
+      {
+        values: {
+          DEFAULT: ""
+        }
+      }
+    );
+    addUtilities({
+      [`.state-layer`]: {
+        [`@apply hover:bg-[var(--state-color)]/[0.08]`]: {},
+        [`@apply active:bg-[var(--state-color)]/[0.10]`]: {},
+        [`@apply focus-visible:bg-[var(--state-color)]/[0.10]`]: {},
+        [`@apply transition-colors`]: {},
+        [`@apply duration-${resolved.transition.duration}`]: {},
+        [`@apply disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+        [`@apply disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+      }
+    });
+    matchUtilities(
+      {
+        [`state`]: (colorName) => {
+          return {
+            [`--state-color`]: `var(--color-${colorName})`
           };
         }
+      },
+      {
+        values: colorKeys.reduce(
+          (acc, key) => {
+            acc[key] = key;
+            return acc;
+          },
+          {}
+        )
       }
-    }
-    addComponents(newComponents);
+    );
   };
 });
 const shadow = plugin(
@@ -727,11 +762,9 @@ class TailwindImplPluginBrowser extends PluginImplAbstract {
 }`;
     const sourceColor = this.api.context.sourceColor;
     const originalSourceColorHex = hexFromArgb(sourceColor.toInt());
-    console.log("to subthmes", this.api.context.id);
     for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
       const newHue = Hct.fromInt(argbFromHex(value)).hue;
       const newColor = Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
-      console.log("newColor", hexFromArgb(newColor.toInt()));
       this.api.context.sourceColor = hexFromArgb(newColor.toInt());
       const colors2 = this.getColors();
       this.outputCss += `
@@ -751,7 +784,6 @@ class TailwindImplPluginBrowser extends PluginImplAbstract {
       })}
 }`;
     }
-    console.log("finish");
     this.api.context.sourceColor = originalSourceColorHex;
   }
   getColors() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/tailwind",
-  "version": "2.3.7",
+  "version": "2.4.1",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",
@@ -31,7 +31,7 @@
     "chalk": "^5.6.0",
     "pathe": "^2.0.3",
     "tslib": "^2.3.0",
-    "@udixio/theme": "2.1.2"
+    "@udixio/theme": "2.1.3"
   },
   "repository": {
     "type": "git",

package/src/browser/tailwind.plugin.ts

@@ -165,13 +165,10 @@ export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPlugin
     const sourceColor = this.api.context.sourceColor;
     const originalSourceColorHex = hexFromArgb(sourceColor.toInt());
 
-    console.log('to subthmes', this.api.context.id);
     for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
       const newHue = Hct.fromInt(argbFromHex(value)).hue;
       const newColor = Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
 
-      console.log('newColor', hexFromArgb(newColor.toInt()));
-
       this.api.context.sourceColor = hexFromArgb(newColor.toInt());
       const colors = this.getColors();
       this.outputCss += `
@@ -196,7 +193,6 @@ export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPlugin
   })}
 }`;
     }
-    console.log('finish');
     // Restore original sourceColor after processing subThemes
     this.api.context.sourceColor = originalSourceColorHex;
   }

package/src/plugins-tailwind/state.ts

@@ -7,10 +7,9 @@ export type StateOptions = {
 type Components = Record<string, Record<string, object>>;
 
 const defaultConfig = {
-  statePrefix: 'state',
   disabledStyles: {
     textOpacity: 0.38,
-    backgroundOpacity: 0.12,
+    backgroundOpacity: 0.1,
   },
   transition: {
     duration: 150,
@@ -30,46 +29,90 @@ export const state = plugin.withOptions(({ colorKeys }: StateOptions) => {
     },
   };
 
-  return ({ addComponents }: PluginAPI) => {
-    const newComponents: Components = {};
-
-    for (const isGroup of [false, true]) {
-      const group = isGroup ? 'group-' : '';
-      for (const colorName of colorKeys) {
-        const className = `.${group}${resolved.statePrefix}-${colorName}`;
-        newComponents[className] = {
-          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
-          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
-          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
-          [`@apply transition-colors`]: {},
-          [`@apply duration-${resolved.transition.duration}`]: {},
-          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
-            {},
-          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
-            {},
-        };
-      }
-    }
-
-    for (const colorName of colorKeys) {
-      for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
-        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
-        if (stateName === 'disabled') {
-          newComponents[className] = {
-            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
+  return ({ matchUtilities, addUtilities }: PluginAPI) => {
+    matchUtilities(
+      {
+        [`state-group`]: (groupName: string) => {
+          const groupVariant = groupName ? `/${groupName}` : '';
+          return {
+            [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]:
+              {},
+            [`@apply group-active${groupVariant}:bg-[var(--state-color)]/[0.10]`]:
               {},
-            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
+            [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]:
+              {},
+            [`@apply transition-colors`]: {},
+            [`@apply duration-${resolved.transition.duration}`]: {},
+            [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
+              {},
+            [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
               {},
           };
-        } else {
-          const opacity = stateName === 'hover' ? 0.08 : 0.12;
-          newComponents[className] = {
-            [`@apply bg-${colorName}/[${opacity}]`]: {},
+        },
+      },
+      {
+        values: {
+          DEFAULT: '',
+        },
+      },
+    );
+
+    matchUtilities(
+      {
+        [`state-ripple-group`]: (groupName: string) => {
+          const groupVariant = groupName ? `/${groupName}` : '';
+          return {
+            [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]:
+              {},
+            [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]:
+              {},
+            [`@apply transition-colors`]: {},
+            [`@apply duration-${resolved.transition.duration}`]: {},
+            [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
+              {},
+            [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
+              {},
           };
-        }
-      }
-    }
+        },
+      },
+      {
+        values: {
+          DEFAULT: '',
+        },
+      },
+    );
+
+    addUtilities({
+      [`.state-layer`]: {
+        [`@apply hover:bg-[var(--state-color)]/[0.08]`]: {},
+        [`@apply active:bg-[var(--state-color)]/[0.10]`]: {},
+        [`@apply focus-visible:bg-[var(--state-color)]/[0.10]`]: {},
+        [`@apply transition-colors`]: {},
+        [`@apply duration-${resolved.transition.duration}`]: {},
+        [`@apply disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
+          {},
+        [`@apply disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
+          {},
+      },
+    });
 
-    addComponents(newComponents);
+    matchUtilities(
+      {
+        [`state`]: (colorName: string) => {
+          return {
+            [`--state-color`]: `var(--color-${colorName})`,
+          };
+        },
+      },
+      {
+        values: colorKeys.reduce(
+          (acc, key) => {
+            acc[key] = key;
+            return acc;
+          },
+          {} as Record<string, string>,
+        ),
+      },
+    );
   };
 });