@udixio/tailwind 2.3.6 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/browser/tailwind.plugin.d.ts.map +1 -1
  3. package/dist/browser.cjs +1 -1
  4. package/dist/browser.js +2 -2
  5. package/dist/node.cjs +1 -1
  6. package/dist/node.js +2 -2
  7. package/dist/plugins-tailwind/state.d.ts.map +1 -1
  8. package/dist/{tailwind.plugin-CEGlpiFj.cjs → tailwind.plugin-CweksRYP.cjs} +67 -32
  9. package/dist/{tailwind.plugin-Bvh5RFHQ.js → tailwind.plugin-Cy4ccIsB.js} +67 -32
  10. package/package.json +2 -2
  11. package/src/browser/tailwind.plugin.ts +0 -1
  12. package/src/plugins-tailwind/state.ts +81 -38
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ ## 2.4.0 (2025-11-03)
2
+
3
+ ### 🚀 Features
4
+
5
+ - **ui-react, plugins-tailwind:** migrate to `State` component for unified state handling ([92996bc](https://github.com/Udixio/UI/commit/92996bc))
6
+ - **ui-react, plugins-tailwind:** enhance `State` component and streamline state utilities ([0e1858a](https://github.com/Udixio/UI/commit/0e1858a))
7
+
8
+ ### ❤️ Thank You
9
+
10
+ - Joël VIGREUX
11
+
12
+ ## 2.3.7 (2025-10-17)
13
+
14
+ ### 🩹 Fixes
15
+
16
+ - **theme, plugins-tailwind:** improve container caching and enhance debugging logs ([a8f955d](https://github.com/Udixio/UI/commit/a8f955d))
17
+
18
+ ### 🧱 Updated Dependencies
19
+
20
+ - Updated @udixio/theme to 2.1.2
21
+
22
+ ### ❤️ Thank You
23
+
24
+ - Joël VIGREUX
25
+
1
26
  ## 2.3.6 (2025-10-17)
2
27
 
3
28
  ### 🩹 Fixes
package/dist/browser/tailwind.plugin.d.ts.map CHANGED
@@ -1 +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;IA+E/C,SAAS;eAC+B,MAAM;cAAQ,MAAM;;IAetD,MAAM;CAYb"}
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;IA8E/C,SAAS;eAC+B,MAAM;cAAQ,MAAM;;IAetD,MAAM;CAYb"}
package/dist/browser.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const tailwind_plugin = require("./tailwind.plugin-CEGlpiFj.cjs");
3
+ const tailwind_plugin = require("./tailwind.plugin-CweksRYP.cjs");
4
4
  exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
5
5
  exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
6
6
  exports.animation = tailwind_plugin.animation;
package/dist/browser.js CHANGED
@@ -1,5 +1,5 @@
1
- import { m as main } from "./tailwind.plugin-Bvh5RFHQ.js";
2
- import { T, b, a, f, s } from "./tailwind.plugin-Bvh5RFHQ.js";
1
+ import { m as main } from "./tailwind.plugin-Cy4ccIsB.js";
2
+ import { T, b, a, f, s } from "./tailwind.plugin-Cy4ccIsB.js";
3
3
  export {
4
4
  T as TailwindImplPluginBrowser,
5
5
  b as TailwindPlugin,
package/dist/node.cjs CHANGED
@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
24
24
  ));
25
25
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
26
26
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
27
- const tailwind_plugin = require("./tailwind.plugin-CEGlpiFj.cjs");
27
+ const tailwind_plugin = require("./tailwind.plugin-CweksRYP.cjs");
28
28
  const theme = require("@udixio/theme");
29
29
  const fs = require("fs");
30
30
  const console = require("node:console");
package/dist/node.js CHANGED
@@ -1,8 +1,8 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
- import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-Bvh5RFHQ.js";
5
- import { a, f, s } from "./tailwind.plugin-Bvh5RFHQ.js";
4
+ import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-Cy4ccIsB.js";
5
+ import { a, f, s } from "./tailwind.plugin-Cy4ccIsB.js";
6
6
  import { PluginAbstract, FontPlugin } from "@udixio/theme";
7
7
  import * as fs from "fs";
8
8
  import * as console from "node:console";
package/dist/plugins-tailwind/state.d.ts.map CHANGED
@@ -1 +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"}
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;AAcF,eAAO,MAAM,KAAK,4EAmGhB,CAAC"}
package/dist/{tailwind.plugin-CEGlpiFj.cjs → tailwind.plugin-CweksRYP.cjs} RENAMED
@@ -492,10 +492,9 @@ const font = plugin.withOptions((options) => {
492
492
  };
493
493
  });
494
494
  const defaultConfig = {
495
- statePrefix: "state",
496
495
  disabledStyles: {
497
496
  textOpacity: 0.38,
498
- backgroundOpacity: 0.12
497
+ backgroundOpacity: 0.1
499
498
  },
500
499
  transition: {
501
500
  duration: 150
@@ -503,7 +502,6 @@ const defaultConfig = {
503
502
  };
504
503
  const state = plugin.withOptions(({ colorKeys }) => {
505
504
  const resolved = {
506
- ...defaultConfig,
507
505
  disabledStyles: {
508
506
  ...defaultConfig.disabledStyles,
509
507
  ...{}
@@ -513,40 +511,77 @@ const state = plugin.withOptions(({ colorKeys }) => {
513
511
  ...{}
514
512
  }
515
513
  };
516
- return ({ addComponents }) => {
517
- const newComponents = {};
518
- for (const isGroup of [false, true]) {
519
- const group = isGroup ? "group-" : "";
520
- for (const colorName of colorKeys) {
521
- const className = `.${group}${resolved.statePrefix}-${colorName}`;
522
- newComponents[className] = {
523
- [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
524
- [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
525
- [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
526
- [`@apply transition-colors`]: {},
527
- [`@apply duration-${resolved.transition.duration}`]: {},
528
- [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
529
- [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
530
- };
514
+ return ({ matchUtilities, addUtilities }) => {
515
+ matchUtilities(
516
+ {
517
+ [`state-group`]: (groupName) => {
518
+ const groupVariant = groupName ? `/${groupName}` : "";
519
+ return {
520
+ [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
521
+ [`@apply group-active${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
522
+ [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
523
+ [`@apply transition-colors`]: {},
524
+ [`@apply duration-${resolved.transition.duration}`]: {},
525
+ [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
526
+ [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
527
+ };
528
+ }
529
+ },
530
+ {
531
+ values: {
532
+ DEFAULT: ""
533
+ }
531
534
  }
532
- }
533
- for (const colorName of colorKeys) {
534
- for (const stateName of ["hover", "active", "focus", "disabled"]) {
535
- const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
536
- if (stateName === "disabled") {
537
- newComponents[className] = {
538
- [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
539
- [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
535
+ );
536
+ matchUtilities(
537
+ {
538
+ [`state-ripple-group`]: (groupName) => {
539
+ const groupVariant = groupName ? `/${groupName}` : "";
540
+ return {
541
+ [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
542
+ [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
543
+ [`@apply transition-colors`]: {},
544
+ [`@apply duration-${resolved.transition.duration}`]: {},
545
+ [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
546
+ [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
540
547
  };
541
- } else {
542
- const opacity = stateName === "hover" ? 0.08 : 0.12;
543
- newComponents[className] = {
544
- [`@apply bg-${colorName}/[${opacity}]`]: {}
548
+ }
549
+ },
550
+ {
551
+ values: {
552
+ DEFAULT: ""
553
+ }
554
+ }
555
+ );
556
+ addUtilities({
557
+ [`.state-layer`]: {
558
+ [`@apply hover:bg-[var(--state-color)]/[0.08]`]: {},
559
+ [`@apply active:bg-[var(--state-color)]/[0.10]`]: {},
560
+ [`@apply focus-visible:bg-[var(--state-color)]/[0.10]`]: {},
561
+ [`@apply transition-colors`]: {},
562
+ [`@apply duration-${resolved.transition.duration}`]: {},
563
+ [`@apply disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
564
+ [`@apply disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
565
+ }
566
+ });
567
+ matchUtilities(
568
+ {
569
+ [`state`]: (colorName) => {
570
+ return {
571
+ [`--state-color`]: `var(--color-${colorName})`
545
572
  };
546
573
  }
574
+ },
575
+ {
576
+ values: colorKeys.reduce(
577
+ (acc, key) => {
578
+ acc[key] = key;
579
+ return acc;
580
+ },
581
+ {}
582
+ )
547
583
  }
548
- }
549
- addComponents(newComponents);
584
+ );
550
585
  };
551
586
  });
552
587
  const shadow = plugin(
package/dist/{tailwind.plugin-Bvh5RFHQ.js → tailwind.plugin-Cy4ccIsB.js} RENAMED
@@ -491,10 +491,9 @@ const font = plugin.withOptions((options) => {
491
491
  };
492
492
  });
493
493
  const defaultConfig = {
494
- statePrefix: "state",
495
494
  disabledStyles: {
496
495
  textOpacity: 0.38,
497
- backgroundOpacity: 0.12
496
+ backgroundOpacity: 0.1
498
497
  },
499
498
  transition: {
500
499
  duration: 150
@@ -502,7 +501,6 @@ const defaultConfig = {
502
501
  };
503
502
  const state = plugin.withOptions(({ colorKeys }) => {
504
503
  const resolved = {
505
- ...defaultConfig,
506
504
  disabledStyles: {
507
505
  ...defaultConfig.disabledStyles,
508
506
  ...{}
@@ -512,40 +510,77 @@ const state = plugin.withOptions(({ colorKeys }) => {
512
510
  ...{}
513
511
  }
514
512
  };
515
- return ({ addComponents }) => {
516
- const newComponents = {};
517
- for (const isGroup of [false, true]) {
518
- const group = isGroup ? "group-" : "";
519
- for (const colorName of colorKeys) {
520
- const className = `.${group}${resolved.statePrefix}-${colorName}`;
521
- newComponents[className] = {
522
- [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
523
- [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
524
- [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
525
- [`@apply transition-colors`]: {},
526
- [`@apply duration-${resolved.transition.duration}`]: {},
527
- [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
528
- [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
529
- };
513
+ return ({ matchUtilities, addUtilities }) => {
514
+ matchUtilities(
515
+ {
516
+ [`state-group`]: (groupName) => {
517
+ const groupVariant = groupName ? `/${groupName}` : "";
518
+ return {
519
+ [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
520
+ [`@apply group-active${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
521
+ [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
522
+ [`@apply transition-colors`]: {},
523
+ [`@apply duration-${resolved.transition.duration}`]: {},
524
+ [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
525
+ [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
526
+ };
527
+ }
528
+ },
529
+ {
530
+ values: {
531
+ DEFAULT: ""
532
+ }
530
533
  }
531
- }
532
- for (const colorName of colorKeys) {
533
- for (const stateName of ["hover", "active", "focus", "disabled"]) {
534
- const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
535
- if (stateName === "disabled") {
536
- newComponents[className] = {
537
- [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
538
- [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
534
+ );
535
+ matchUtilities(
536
+ {
537
+ [`state-ripple-group`]: (groupName) => {
538
+ const groupVariant = groupName ? `/${groupName}` : "";
539
+ return {
540
+ [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]: {},
541
+ [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]: {},
542
+ [`@apply transition-colors`]: {},
543
+ [`@apply duration-${resolved.transition.duration}`]: {},
544
+ [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
545
+ [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
539
546
  };
540
- } else {
541
- const opacity = stateName === "hover" ? 0.08 : 0.12;
542
- newComponents[className] = {
543
- [`@apply bg-${colorName}/[${opacity}]`]: {}
547
+ }
548
+ },
549
+ {
550
+ values: {
551
+ DEFAULT: ""
552
+ }
553
+ }
554
+ );
555
+ addUtilities({
556
+ [`.state-layer`]: {
557
+ [`@apply hover:bg-[var(--state-color)]/[0.08]`]: {},
558
+ [`@apply active:bg-[var(--state-color)]/[0.10]`]: {},
559
+ [`@apply focus-visible:bg-[var(--state-color)]/[0.10]`]: {},
560
+ [`@apply transition-colors`]: {},
561
+ [`@apply duration-${resolved.transition.duration}`]: {},
562
+ [`@apply disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
563
+ [`@apply disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
564
+ }
565
+ });
566
+ matchUtilities(
567
+ {
568
+ [`state`]: (colorName) => {
569
+ return {
570
+ [`--state-color`]: `var(--color-${colorName})`
544
571
  };
545
572
  }
573
+ },
574
+ {
575
+ values: colorKeys.reduce(
576
+ (acc, key) => {
577
+ acc[key] = key;
578
+ return acc;
579
+ },
580
+ {}
581
+ )
546
582
  }
547
- }
548
- addComponents(newComponents);
583
+ );
549
584
  };
550
585
  });
551
586
  const shadow = plugin(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@udixio/tailwind",
3
- "version": "2.3.6",
3
+ "version": "2.4.0",
4
4
  "type": "module",
5
5
  "main": "./dist/node.js",
6
6
  "module": "./dist/node.js",
@@ -31,7 +31,7 @@
31
31
  "chalk": "^5.6.0",
32
32
  "pathe": "^2.0.3",
33
33
  "tslib": "^2.3.0",
34
- "@udixio/theme": "2.1.1"
34
+ "@udixio/theme": "2.1.2"
35
35
  },
36
36
  "repository": {
37
37
  "type": "git",
package/src/browser/tailwind.plugin.ts CHANGED
@@ -193,7 +193,6 @@ export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPlugin
193
193
  })}
194
194
  }`;
195
195
  }
196
-
197
196
  // Restore original sourceColor after processing subThemes
198
197
  this.api.context.sourceColor = originalSourceColorHex;
199
198
  }
package/src/plugins-tailwind/state.ts CHANGED
@@ -7,10 +7,9 @@ export type StateOptions = {
7
7
  type Components = Record<string, Record<string, object>>;
8
8
 
9
9
  const defaultConfig = {
10
- statePrefix: 'state',
11
10
  disabledStyles: {
12
11
  textOpacity: 0.38,
13
- backgroundOpacity: 0.12,
12
+ backgroundOpacity: 0.1,
14
13
  },
15
14
  transition: {
16
15
  duration: 150,
@@ -30,46 +29,90 @@ export const state = plugin.withOptions(({ colorKeys }: StateOptions) => {
30
29
  },
31
30
  };
32
31
 
33
- return ({ addComponents }: PluginAPI) => {
34
- const newComponents: Components = {};
35
-
36
- for (const isGroup of [false, true]) {
37
- const group = isGroup ? 'group-' : '';
38
- for (const colorName of colorKeys) {
39
- const className = `.${group}${resolved.statePrefix}-${colorName}`;
40
- newComponents[className] = {
41
- [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
42
- [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
43
- [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
44
- [`@apply transition-colors`]: {},
45
- [`@apply duration-${resolved.transition.duration}`]: {},
46
- [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
47
- {},
48
- [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
49
- {},
50
- };
51
- }
52
- }
53
-
54
- for (const colorName of colorKeys) {
55
- for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
56
- const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
57
- if (stateName === 'disabled') {
58
- newComponents[className] = {
59
- [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
32
+ return ({ matchUtilities, addUtilities }: PluginAPI) => {
33
+ matchUtilities(
34
+ {
35
+ [`state-group`]: (groupName: string) => {
36
+ const groupVariant = groupName ? `/${groupName}` : '';
37
+ return {
38
+ [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]:
39
+ {},
40
+ [`@apply group-active${groupVariant}:bg-[var(--state-color)]/[0.10]`]:
60
41
  {},
61
- [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
42
+ [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]:
43
+ {},
44
+ [`@apply transition-colors`]: {},
45
+ [`@apply duration-${resolved.transition.duration}`]: {},
46
+ [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
47
+ {},
48
+ [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
62
49
  {},
63
50
  };
64
- } else {
65
- const opacity = stateName === 'hover' ? 0.08 : 0.12;
66
- newComponents[className] = {
67
- [`@apply bg-${colorName}/[${opacity}]`]: {},
51
+ },
52
+ },
53
+ {
54
+ values: {
55
+ DEFAULT: '',
56
+ },
57
+ },
58
+ );
59
+
60
+ matchUtilities(
61
+ {
62
+ [`state-ripple-group`]: (groupName: string) => {
63
+ const groupVariant = groupName ? `/${groupName}` : '';
64
+ return {
65
+ [`@apply group-hover${groupVariant}:bg-[var(--state-color)]/[0.08]`]:
66
+ {},
67
+ [`@apply group-focus-visible${groupVariant}:bg-[var(--state-color)]/[0.10]`]:
68
+ {},
69
+ [`@apply transition-colors`]: {},
70
+ [`@apply duration-${resolved.transition.duration}`]: {},
71
+ [`@apply group-disabled${groupVariant}:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
72
+ {},
73
+ [`@apply group-disabled${groupVariant}:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
74
+ {},
68
75
  };
69
- }
70
- }
71
- }
76
+ },
77
+ },
78
+ {
79
+ values: {
80
+ DEFAULT: '',
81
+ },
82
+ },
83
+ );
84
+
85
+ addUtilities({
86
+ [`.state-layer`]: {
87
+ [`@apply hover:bg-[var(--state-color)]/[0.08]`]: {},
88
+ [`@apply active:bg-[var(--state-color)]/[0.10]`]: {},
89
+ [`@apply focus-visible:bg-[var(--state-color)]/[0.10]`]: {},
90
+ [`@apply transition-colors`]: {},
91
+ [`@apply duration-${resolved.transition.duration}`]: {},
92
+ [`@apply disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
93
+ {},
94
+ [`@apply disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
95
+ {},
96
+ },
97
+ });
72
98
 
73
- addComponents(newComponents);
99
+ matchUtilities(
100
+ {
101
+ [`state`]: (colorName: string) => {
102
+ return {
103
+ [`--state-color`]: `var(--color-${colorName})`,
104
+ };
105
+ },
106
+ },
107
+ {
108
+ values: colorKeys.reduce(
109
+ (acc, key) => {
110
+ acc[key] = key;
111
+ return acc;
112
+ },
113
+ {} as Record<string, string>,
114
+ ),
115
+ },
116
+ );
74
117
  };
75
118
  });