@m3-baseui/react-tailwind 3.0.0 → 5.0.0

package/dist/tv.d.ts

@@ -1,17 +1,22 @@
 import { TV } from 'tailwind-variants';
 
 /**
- * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.
+ * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and
+ * shape scale.
  *
  * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`
- * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock
- * tailwind-merge does not know these custom names, so it groups them with the
- * `text-<color>` utilities and drops one when a slot sets both a color *and* a
- * typescale (the common M3 case). That silently strips either the color or the
- * type, breaking token compliance.
+ * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the
+ * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,
+ * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,
+ * so it (a) groups the typescale names with `text-<color>` and drops one when a
+ * slot sets both a color *and* a typescale, and (b) fails to see two custom
+ * `rounded-<role>` classes as conflicting, so a later corner override never
+ * dedupes the resting one (both survive, and CSS source order — not intent —
+ * decides). Either way token compliance / shape morph silently breaks.
  *
- * Teaching tailwind-merge that the typescale names belong to the `font-size`
- * group keeps color and type independent, so both survive the merge.
+ * Teaching tailwind-merge that the typescale names belong to `font-size` and the
+ * shape names belong to `rounded` keeps color and type independent and makes the
+ * corner utilities override one another as expected.
  */
 
 declare const tv: TV;

package/dist/tv.js

@@ -19,12 +19,24 @@ var TYPESCALE = [
   "label-medium",
   "label-small"
 ];
+var SHAPE = [
+  "none",
+  "extra-small",
+  "small",
+  "medium",
+  "large",
+  "large-increased",
+  "extra-large",
+  "extra-large-increased",
+  "full"
+];
 var tv = (options, config) => tv$1(options, {
   ...config,
   twMergeConfig: {
     extend: {
       classGroups: {
-        "font-size": [{ text: [...TYPESCALE] }]
+        "font-size": [{ text: [...TYPESCALE] }],
+        rounded: [{ rounded: [...SHAPE] }]
       }
     }
   }

package/dist/tv.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tv.ts"],"names":["baseTv"],"mappings":";;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC","file":"tv.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n"]}
+{"version":3,"sources":["../src/tv.ts"],"names":["baseTv"],"mappings":";;;;AAoBA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAKA,IAAM,KAAA,GAAQ;AAAA,EACZ,MAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG,CAAA;AAAA,QACtC,OAAA,EAAS,CAAC,EAAE,OAAA,EAAS,CAAC,GAAG,KAAK,GAAG;AAAA;AACnC;AACF;AAEJ,CAAC","file":"tv.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale and\n * shape scale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`) and the\n * shape scale as `rounded-<role>` border-radius utilities (e.g. `rounded-small`,\n * `rounded-extra-large`). Stock tailwind-merge does not know these custom names,\n * so it (a) groups the typescale names with `text-<color>` and drops one when a\n * slot sets both a color *and* a typescale, and (b) fails to see two custom\n * `rounded-<role>` classes as conflicting, so a later corner override never\n * dedupes the resting one (both survive, and CSS source order — not intent —\n * decides). Either way token compliance / shape morph silently breaks.\n *\n * Teaching tailwind-merge that the typescale names belong to `font-size` and the\n * shape names belong to `rounded` keeps color and type independent and makes the\n * corner utilities override one another as expected.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\n// M3 shape scale exposed as `rounded-<role>` (see @m3-baseui/tokens theme.css\n// `--radius-*`). `none` / `full` overlap stock Tailwind and are harmless to\n// re-list; the intermediate roles are what stock tailwind-merge misses.\nconst SHAPE = [\n  'none',\n  'extra-small',\n  'small',\n  'medium',\n  'large',\n  'large-increased',\n  'extra-large',\n  'extra-large-increased',\n  'full',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n          rounded: [{ rounded: [...SHAPE] }],\n        },\n      },\n    },\n  });\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3-baseui/react-tailwind",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "description": "M3 components implemented with tailwind-variants over the shared @m3-baseui/core factories. Ships the Tailwind v4 @theme preset.",
   "type": "module",
   "license": "MIT",
@@ -225,8 +225,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@m3-baseui/core": "0.1.0",
-    "@m3-baseui/tokens": "0.1.0",
+    "@m3-baseui/core": "3.0.0",
+    "@m3-baseui/tokens": "1.1.0",
     "tailwind-variants": "^0.3.0"
   },
   "peerDependencies": {