@m3-baseui/react-tailwind 3.0.0 → 4.0.0

package/dist/components/badge/index.js

@@ -20,12 +20,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/components/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/badge/badge.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,CAAA;;;ACjCI,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,IAAA,EAAM,gGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,8CAAA;AAAA,MACP,KAAA,EACE;AAAA;AACJ;AAEJ,CAAC;AAEM,IAAM,QAAQ,WAAA,CAAY;AAAA,EAC/B,IAAA,EAAM,CAAC,EAAE,IAAA,OAAW,OAAA,CAAQ,EAAE,MAAM;AACtC,CAAC","file":"index.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","/**\n * badge.ts — tailwind-variants slots for the M3 Badge.\n *\n * error/on-error marker that anchors to the top-right of a positioned parent.\n * `small` is a 6dp dot; `large` is a 16dp pill carrying a `label-small` number.\n * Same DOM + `data-size` as the VE build.\n */\nimport { createBadge } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const badgeTv = tv({\n  base: 'pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error',\n  variants: {\n    size: {\n      small: 'absolute top-1 right-1 size-1.5 rounded-full',\n      large:\n        'absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full text-label-small leading-none tabular-nums',\n    },\n  },\n});\n\nexport const Badge = createBadge({\n  root: ({ size }) => badgeTv({ size }),\n});\nexport type { BadgeProps, BadgeSize } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/badge/badge.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,CAAA;;;ACtDI,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,IAAA,EAAM,gGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,8CAAA;AAAA,MACP,KAAA,EACE;AAAA;AACJ;AAEJ,CAAC;AAEM,IAAM,QAAQ,WAAA,CAAY;AAAA,EAC/B,IAAA,EAAM,CAAC,EAAE,IAAA,OAAW,OAAA,CAAQ,EAAE,MAAM;AACtC,CAAC","file":"index.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","/**\n * badge.ts — tailwind-variants slots for the M3 Badge.\n *\n * error/on-error marker that anchors to the top-right of a positioned parent.\n * `small` is a 6dp dot; `large` is a 16dp pill carrying a `label-small` number.\n * Same DOM + `data-size` as the VE build.\n */\nimport { createBadge } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const badgeTv = tv({\n  base: 'pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error',\n  variants: {\n    size: {\n      small: 'absolute top-1 right-1 size-1.5 rounded-full',\n      large:\n        'absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full text-label-small leading-none tabular-nums',\n    },\n  },\n});\n\nexport const Badge = createBadge({\n  root: ({ size }) => badgeTv({ size }),\n});\nexport type { BadgeProps, BadgeSize } from '@m3-baseui/core';\n"]}

package/dist/components/bottom-app-bar/index.js

@@ -20,12 +20,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/components/bottom-app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/bottom-app-bar/bottom-app-bar.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,CAAA;;;AClCI,IAAM,iBAAiB,EAAA,CAAG;AAAA,EAC/B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,4GAAA;AAAA,IACN,OAAA,EAAS,6CAAA;AAAA,IACT,GAAA,EAAK;AAAA;AAET,CAAC;AAED,IAAM,IAAI,cAAA,EAAe;AAClB,IAAM,eAAe,kBAAA,CAAmB;AAAA,EAC7C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,GAAA,EAAK,EAAE,GAAA;AACT,CAAC","file":"index.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","/**\n * bottom-app-bar.ts — tailwind-variants slots for the M3 BottomAppBar.\n *\n * An 80dp `surface-container` `role=\"toolbar\"`: leading action icons + an\n * optional trailing FAB. Same DOM as the VE build.\n */\nimport { createBottomAppBar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const bottomAppBarTv = tv({\n  slots: {\n    root: 'flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant',\n    actions: 'flex items-center gap-1 pl-2 [&_svg]:size-6',\n    fab: 'flex items-center pr-3',\n  },\n});\n\nconst s = bottomAppBarTv();\nexport const BottomAppBar = createBottomAppBar({\n  root: s.root(),\n  actions: s.actions(),\n  fab: s.fab(),\n});\nexport type { BottomAppBarProps } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/bottom-app-bar/bottom-app-bar.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,CAAA;;;ACvDI,IAAM,iBAAiB,EAAA,CAAG;AAAA,EAC/B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,4GAAA;AAAA,IACN,OAAA,EAAS,6CAAA;AAAA,IACT,GAAA,EAAK;AAAA;AAET,CAAC;AAED,IAAM,IAAI,cAAA,EAAe;AAClB,IAAM,eAAe,kBAAA,CAAmB;AAAA,EAC7C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,GAAA,EAAK,EAAE,GAAA;AACT,CAAC","file":"index.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","/**\n * bottom-app-bar.ts — tailwind-variants slots for the M3 BottomAppBar.\n *\n * An 80dp `surface-container` `role=\"toolbar\"`: leading action icons + an\n * optional trailing FAB. Same DOM as the VE build.\n */\nimport { createBottomAppBar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const bottomAppBarTv = tv({\n  slots: {\n    root: 'flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant',\n    actions: 'flex items-center gap-1 pl-2 [&_svg]:size-6',\n    fab: 'flex items-center pr-3',\n  },\n});\n\nconst s = bottomAppBarTv();\nexport const BottomAppBar = createBottomAppBar({\n  root: s.root(),\n  actions: s.actions(),\n  fab: s.fab(),\n});\nexport type { BottomAppBarProps } from '@m3-baseui/core';\n"]}

package/dist/components/bottom-sheet/index.js

@@ -20,12 +20,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/components/bottom-sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/bottom-sheet/bottom-sheet.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,CAAA;;;AC/BI,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,iDAAA;AAAA,MACA,gCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,kDAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,2DAAA;AAAA,MACA,4DAAA;AAAA,MACA,mFAAA;AAAA,MACA,8FAAA;AAAA,MACA,mDAAA;AAAA,MACA,4BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,0EAAA;AAAA,IACR,KAAA,EAAO,CAAC,gDAAgD,CAAA;AAAA,IACxD,WAAA,EAAa,CAAC,wDAAwD;AAAA;AAE1E,CAAC;AAED,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA;AACjB,CAAC","file":"index.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","/**\n * bottom-sheet.ts — tailwind-variants slots for the M3 Bottom sheet.\n *\n * A `surface-container-low` surface docked to the bottom edge with extra-large\n * (28dp) top corners, elevation 1, and a 32×4dp drag handle. The scrim fades on\n * Base UI's data-[starting-style] / data-[ending-style]; the popup slides via the\n * drawer's `--drawer-swipe-movement-y` so the swipe gesture tracks the finger.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createBottomSheet } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const bottomSheetTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-300 ease-emphasized',\n      'data-[swiping]:transition-none',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    viewport: 'fixed inset-0 z-50 flex items-end justify-center',\n    popup: [\n      'box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]',\n      'overflow-y-auto overscroll-contain touch-auto outline-none',\n      'pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1',\n      '[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]',\n      'transition-transform duration-300 ease-emphasized',\n      'data-[swiping]:select-none',\n      'data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]',\n    ],\n    handle: 'mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40',\n    title: ['m-0 px-6 pt-2 text-title-large text-on-surface'],\n    description: ['m-0 px-6 pt-1 text-body-medium text-on-surface-variant'],\n  },\n});\n\nconst s = bottomSheetTv();\nexport const BottomSheet = createBottomSheet({\n  backdrop: s.backdrop(),\n  viewport: s.viewport(),\n  popup: s.popup(),\n  handle: s.handle(),\n  title: s.title(),\n  description: s.description(),\n});\nexport type { BottomSheetVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/bottom-sheet/bottom-sheet.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,CAAA;;;ACpDI,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,iDAAA;AAAA,MACA,gCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,kDAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,2DAAA;AAAA,MACA,4DAAA;AAAA,MACA,mFAAA;AAAA,MACA,8FAAA;AAAA,MACA,mDAAA;AAAA,MACA,4BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,0EAAA;AAAA,IACR,KAAA,EAAO,CAAC,gDAAgD,CAAA;AAAA,IACxD,WAAA,EAAa,CAAC,wDAAwD;AAAA;AAE1E,CAAC;AAED,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA;AACjB,CAAC","file":"index.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","/**\n * bottom-sheet.ts — tailwind-variants slots for the M3 Bottom sheet.\n *\n * A `surface-container-low` surface docked to the bottom edge with extra-large\n * (28dp) top corners, elevation 1, and a 32×4dp drag handle. The scrim fades on\n * Base UI's data-[starting-style] / data-[ending-style]; the popup slides via the\n * drawer's `--drawer-swipe-movement-y` so the swipe gesture tracks the finger.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createBottomSheet } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const bottomSheetTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-300 ease-emphasized',\n      'data-[swiping]:transition-none',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    viewport: 'fixed inset-0 z-50 flex items-end justify-center',\n    popup: [\n      'box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]',\n      'overflow-y-auto overscroll-contain touch-auto outline-none',\n      'pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1',\n      '[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]',\n      'transition-transform duration-300 ease-emphasized',\n      'data-[swiping]:select-none',\n      'data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]',\n    ],\n    handle: 'mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40',\n    title: ['m-0 px-6 pt-2 text-title-large text-on-surface'],\n    description: ['m-0 px-6 pt-1 text-body-medium text-on-surface-variant'],\n  },\n});\n\nconst s = bottomSheetTv();\nexport const BottomSheet = createBottomSheet({\n  backdrop: s.backdrop(),\n  viewport: s.viewport(),\n  popup: s.popup(),\n  handle: s.handle(),\n  title: s.title(),\n  description: s.description(),\n});\nexport type { BottomSheetVariant } from '@m3-baseui/core';\n"]}

package/dist/components/button/index.d.ts

@@ -1,7 +1,7 @@
 import * as _base_ui_react from '@base-ui/react';
 import * as react from 'react';
 import * as _m3_baseui_core from '@m3-baseui/core';
-export { ButtonProps, ButtonVariant } from '@m3-baseui/core';
+export { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from '@m3-baseui/core';
 import * as tailwind_variants from 'tailwind-variants';
 import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 
@@ -13,6 +13,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         filled: string[];
@@ -21,6 +36,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }, {
     variant: {
         filled: string[];
@@ -29,6 +59,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }>, {
     variant: {
         filled: string[];
@@ -37,6 +82,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
     variant: {
         filled: string[];
@@ -45,6 +105,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         filled: string[];
@@ -53,6 +128,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }, {
     variant: {
         filled: string[];
@@ -61,6 +151,21 @@ declare const button: tailwind_variants.TVReturnType<{
         elevated: string[];
         text: string[];
     };
+    size: {
+        xs: string[];
+        s: string[];
+        m: string[];
+        l: string[];
+        xl: string[];
+    };
+    shape: {
+        round: string;
+        square: string;
+    };
+    toggle: {
+        on: string;
+        off: string;
+    };
 }>, unknown, unknown, undefined>>;
 declare const Button: react.ForwardRefExoticComponent<_m3_baseui_core.ButtonOwnProps & Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
     render?: _base_ui_react.useRender.RenderProp;

package/dist/components/button/index.js

@@ -1,19 +1,58 @@
 "use client";
-import { createButton } from '@m3-baseui/core';
-import { tv } from 'tailwind-variants';
+import { createButton, toToggle } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/components/button/button.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "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] }],
+        rounded: [{ rounded: [...SHAPE] }]
+      }
+    }
+  }
+});
 
 // src/components/button/button.ts
 var button = tv({
   base: [
-    "relative inline-flex items-center justify-center gap-2",
-    "h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0",
-    "text-label-large",
-    // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).
-    "data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4",
-    // Icon slot: 18dp, centered.
+    "relative inline-flex items-center justify-center",
+    "overflow-hidden cursor-pointer select-none border-0",
+    // Icon slot: centered; the svg size comes from the `size` variant.
     "[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center",
-    "[&_[data-slot=button-icon]>svg]:size-[18px]",
-    "transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]",
+    // Motion: Compose uses DefaultEffects (critically-damped spring, no bounce)
+    // for the shape/color/elevation transitions — spring-effects-default here.
+    "transition-[box-shadow,background-color,color,border-color,border-radius] duration-200 ease-spring-effects-default",
     // State layer overlay
     "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
     "before:transition-opacity before:duration-100",
@@ -24,20 +63,23 @@ var button = tv({
     // Focus ring (M3: 3px secondary, 2px offset)
     "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
     // Disabled: no interaction, no state layer, no elevation. Per-variant
-    // colors (container on-surface/12, label on-surface/38) live on each variant.
+    // colors (container on-surface/10, label on-surface-variant/38) live on
+    // each variant.
     "disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0",
     "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0"
   ],
   variants: {
     // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;
-    // elevated rest level1→hover level2→pressed level1. Disabled container is
-    // on-surface/12 and label on-surface/38, matching material-web.
+    // elevated rest level1→hover level2→pressed level1. Expressive disabled:
+    // container on-surface/10, label on-surface-variant/38 — except tonal, which
+    // is unchanged upstream (FilledTonalButtonTokens v0_103) and keeps 0.12 /
+    // on-surface. Expressive also moves outlined/text labels to on-surface-variant.
     variant: {
       filled: [
         "bg-primary text-on-primary",
         "hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none",
-        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+        "disabled:bg-on-surface/10 disabled:text-on-surface-variant/38",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface-variant/38"
       ],
       tonal: [
         "bg-secondary-container text-on-secondary-container",
@@ -46,28 +88,129 @@ var button = tv({
         "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
       ],
       outlined: [
-        "bg-transparent text-primary border border-outline",
-        "disabled:text-on-surface/38 disabled:border-on-surface/12",
-        "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12"
+        "bg-transparent text-on-surface-variant border border-outline-variant",
+        // Compose outlinedButtonBorder(enabled=false) tints the outline with
+        // DisabledContainerOpacity (0.1), so the disabled border is faint.
+        "disabled:text-on-surface-variant/38 disabled:border-outline-variant/10",
+        "data-[disabled]:text-on-surface-variant/38 data-[disabled]:border-outline-variant/10"
       ],
       elevated: [
         "bg-surface-container-low text-primary shadow-level1",
         "hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1",
-        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
-        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+        "disabled:bg-on-surface/10 disabled:text-on-surface-variant/38",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface-variant/38"
       ],
       text: [
-        "bg-transparent text-primary px-3",
-        "disabled:text-on-surface/38",
-        "data-[disabled]:text-on-surface/38"
+        "bg-transparent text-on-surface-variant",
+        "disabled:text-on-surface-variant/38",
+        "data-[disabled]:text-on-surface-variant/38"
+      ]
+    },
+    // Height / horizontal padding / gap / typescale / icon size per Expressive
+    // size. The pressed corner morph (PressedContainerShape: XS·S small 8 /
+    // M medium 12 / L·XL large 16) rides on data-[pressed]/active here so its
+    // attribute-selector specificity wins over the resting `rounded-*`.
+    size: {
+      xs: [
+        // XS is special-cased in Compose Button.kt: contentPaddingFor returns
+        // ExtraSmallContentPadding (12dp) and iconSpacingFor returns
+        // ExtraSmallIconSpacing (4dp) — tighter than the ButtonXSmallTokens
+        // Leading/TrailingSpace (16) and IconLabelSpace (8). S–XL use their tokens.
+        "h-8 px-3 gap-1 text-label-large [&_[data-slot=button-icon]>svg]:size-5",
+        "data-[pressed]:rounded-small active:rounded-small"
+      ],
+      s: [
+        "h-10 px-4 gap-2 text-label-large [&_[data-slot=button-icon]>svg]:size-5",
+        "data-[pressed]:rounded-small active:rounded-small"
+      ],
+      m: [
+        "h-14 px-6 gap-2 text-title-medium [&_[data-slot=button-icon]>svg]:size-6",
+        "data-[pressed]:rounded-medium active:rounded-medium"
+      ],
+      l: [
+        "h-24 px-12 gap-3 text-headline-small [&_[data-slot=button-icon]>svg]:size-8",
+        "data-[pressed]:rounded-large active:rounded-large"
+      ],
+      xl: [
+        "h-[136px] px-16 gap-4 text-headline-large [&_[data-slot=button-icon]>svg]:size-10",
+        "data-[pressed]:rounded-large active:rounded-large"
       ]
+    },
+    // round = full pill; the square corner is size-specific (compounds below).
+    shape: {
+      round: "rounded-full",
+      square: ""
+    },
+    // Toggle state, string-keyed so a plain (non-toggle) button — `toggle`
+    // unset — fires neither compound below (a boolean variant would default to
+    // `off` in tailwind-variants and wrongly apply the unselected look).
+    toggle: {
+      on: "",
+      off: ""
     }
   },
+  compoundVariants: [
+    // ---- Resting square corner (ContainerShapeSquare) ---------------------
+    { shape: "square", size: "xs", class: "rounded-medium" },
+    // 12dp
+    { shape: "square", size: "s", class: "rounded-medium" },
+    // 12dp
+    { shape: "square", size: "m", class: "rounded-large" },
+    // 16dp
+    { shape: "square", size: "l", class: "rounded-extra-large" },
+    // 28dp
+    { shape: "square", size: "xl", class: "rounded-extra-large" },
+    // 28dp
+    // ---- Selected shape morph: swap to the opposite shape -----------------
+    // (listed after the resting corner so tailwind-merge keeps these).
+    { shape: "round", toggle: "on", size: "xs", class: "rounded-medium" },
+    { shape: "round", toggle: "on", size: "s", class: "rounded-medium" },
+    { shape: "round", toggle: "on", size: "m", class: "rounded-large" },
+    { shape: "round", toggle: "on", size: "l", class: "rounded-extra-large" },
+    { shape: "round", toggle: "on", size: "xl", class: "rounded-extra-large" },
+    { shape: "square", toggle: "on", size: "xs", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "s", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "m", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "l", class: "rounded-full" },
+    { shape: "square", toggle: "on", size: "xl", class: "rounded-full" },
+    // ---- Outlined border width (OutlinedOutlineWidth: L 2 / XL 3 dp) ------
+    { variant: "outlined", size: "l", class: "border-2" },
+    { variant: "outlined", size: "xl", class: "border-[3px]" },
+    // ---- Toggle colors (Selected*/Unselected* tokens) ---------------------
+    // filled/tonal: base = default & selected look; `toggle:off` = unselected.
+    { variant: "filled", toggle: "off", class: "bg-surface-container text-on-surface-variant" },
+    { variant: "tonal", toggle: "off", class: "bg-surface-container text-on-surface-variant" },
+    // elevated: distinct selected (primary) & unselected looks.
+    { variant: "elevated", toggle: "on", class: "bg-primary text-on-primary" },
+    {
+      variant: "elevated",
+      toggle: "off",
+      class: "bg-surface-container-low text-on-surface-variant"
+    },
+    // outlined: selected fills with the inverse surface (base = unselected).
+    {
+      variant: "outlined",
+      toggle: "on",
+      class: [
+        "bg-inverse-surface text-inverse-on-surface border-transparent",
+        "disabled:bg-on-surface/10 disabled:border-transparent",
+        "data-[disabled]:bg-on-surface/10 data-[disabled]:border-transparent"
+      ]
+    },
+    // text: no Selected/Unselected tokens exist upstream (TextButtonTokens),
+    // so selection raises the label emphasis to primary (base = unselected
+    // on-surface-variant) to communicate the toggle state.
+    { variant: "text", toggle: "on", class: "text-primary" }
+  ],
   defaultVariants: {
-    variant: "filled"
+    variant: "filled",
+    size: "s",
+    shape: "round"
   }
 });
-var Button = createButton(({ variant }) => button({ variant }));
+var Button = createButton(
+  ({ variant, size, shape, selected }) => button({ variant, size, shape, toggle: toToggle(selected) })
+);
 
 export { Button, button };
 //# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;AAcO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM;AAAA,IACJ,wDAAA;AAAA,IACA,4EAAA;AAAA,IACA,kBAAA;AAAA;AAAA,IAEA,uDAAA;AAAA;AAAA,IAEA,6HAAA;AAAA,IACA,6CAAA;AAAA,IACA,sHAAA;AAAA;AAAA,IAEA,uHAAA;AAAA,IACA,+CAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA;AAAA,IAEA,4FAAA;AAAA;AAAA;AAAA,IAGA,6EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,IAIR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,4BAAA;AAAA,QACA,6FAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,oDAAA;AAAA,QACA,6FAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,mDAAA;AAAA,QACA,2DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,qDAAA;AAAA,QACA,mGAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,kCAAA;AAAA,QACA,6BAAA;AAAA,QACA;AAAA;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,MAAA,GAAS,YAAA,CAAa,CAAC,EAAE,OAAA,OAAc,MAAA,CAAO,EAAE,OAAA,EAAS,CAAC","file":"index.js","sourcesContent":["/**\n * button.ts — tailwind-variants resolver wired into the shared factory.\n *\n * Emits the same DOM and `data-*` state as the vanilla-extract build; only the\n * class strings differ. Utilities such as `bg-primary`, `text-on-primary`,\n * `rounded-full`, `shadow-level1`, and `text-label-large` are produced by the\n * Tailwind v4 `@theme` preset shipped in `@m3-baseui/tokens/theme.css`.\n *\n * Opacity modifiers (`before:opacity-[var(--md-sys-state-hover)]`) drive the\n * state layer off the channel-triple colors.\n */\nimport { createButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const button = tv({\n  base: [\n    'relative inline-flex items-center justify-center gap-2',\n    'h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0',\n    'text-label-large',\n    // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).\n    'data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4',\n    // Icon slot: 18dp, centered.\n    '[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center',\n    '[&_[data-slot=button-icon]>svg]:size-[18px]',\n    'transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    'before:transition-opacity before:duration-100',\n    'hover:before:opacity-[var(--md-sys-state-hover)]',\n    'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n    'active:before:opacity-[var(--md-sys-state-pressed)]',\n    'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    // Focus ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer, no elevation. Per-variant\n    // colors (container on-surface/12, label on-surface/38) live on each variant.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;\n    // elevated rest level1→hover level2→pressed level1. Disabled container is\n    // on-surface/12 and label on-surface/38, matching material-web.\n    variant: {\n      filled: [\n        'bg-primary text-on-primary',\n        'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      tonal: [\n        'bg-secondary-container text-on-secondary-container',\n        'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      outlined: [\n        'bg-transparent text-primary border border-outline',\n        'disabled:text-on-surface/38 disabled:border-on-surface/12',\n        'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      ],\n      elevated: [\n        'bg-surface-container-low text-primary shadow-level1',\n        'hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      text: [\n        'bg-transparent text-primary px-3',\n        'disabled:text-on-surface/38',\n        'data-[disabled]:text-on-surface/38',\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const Button = createButton(({ variant }) => button({ variant }));\nexport type { ButtonProps, ButtonVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/button/button.ts"],"names":["baseTv"],"mappings":"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","file":"index.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","/**\n * button.ts — tailwind-variants resolver wired into the shared factory.\n *\n * Emits the same DOM and `data-*` state as the vanilla-extract build; only the\n * class strings differ. Utilities such as `bg-primary`, `text-on-primary`,\n * `rounded-full`, `shadow-level1`, and `text-label-large` are produced by the\n * Tailwind v4 `@theme` preset shipped in `@m3-baseui/tokens/theme.css`.\n *\n * M3 Expressive: five sizes (XS 32 → XL 136 dp) drive height / horizontal\n * padding / gap / typescale / icon size; `shape` picks the resting corner\n * (round=full pill vs a size-specific square), the corner morphs smaller on\n * press, and toggle buttons (`selected`) swap to the opposite shape plus the\n * Selected/Unselected color set. Opacity modifiers\n * (`before:opacity-[var(--md-sys-state-hover)]`) drive the state layer off the\n * channel-triple colors.\n */\nimport { createButton, toToggle } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const button = tv({\n  base: [\n    'relative inline-flex items-center justify-center',\n    'overflow-hidden cursor-pointer select-none border-0',\n    // Icon slot: centered; the svg size comes from the `size` variant.\n    '[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center',\n    // Motion: Compose uses DefaultEffects (critically-damped spring, no bounce)\n    // for the shape/color/elevation transitions — spring-effects-default here.\n    'transition-[box-shadow,background-color,color,border-color,border-radius] duration-200 ease-spring-effects-default',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    'before:transition-opacity before:duration-100',\n    'hover:before:opacity-[var(--md-sys-state-hover)]',\n    'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n    'active:before:opacity-[var(--md-sys-state-pressed)]',\n    'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    // Focus ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer, no elevation. Per-variant\n    // colors (container on-surface/10, label on-surface-variant/38) live on\n    // each variant.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;\n    // elevated rest level1→hover level2→pressed level1. Expressive disabled:\n    // container on-surface/10, label on-surface-variant/38 — except tonal, which\n    // is unchanged upstream (FilledTonalButtonTokens v0_103) and keeps 0.12 /\n    // on-surface. Expressive also moves outlined/text labels to on-surface-variant.\n    variant: {\n      filled: [\n        'bg-primary text-on-primary',\n        'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\n        'disabled:bg-on-surface/10 disabled:text-on-surface-variant/38',\n        'data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface-variant/38',\n      ],\n      tonal: [\n        'bg-secondary-container text-on-secondary-container',\n        'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\n        'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n      outlined: [\n        'bg-transparent text-on-surface-variant border border-outline-variant',\n        // Compose outlinedButtonBorder(enabled=false) tints the outline with\n        // DisabledContainerOpacity (0.1), so the disabled border is faint.\n        'disabled:text-on-surface-variant/38 disabled:border-outline-variant/10',\n        'data-[disabled]:text-on-surface-variant/38 data-[disabled]:border-outline-variant/10',\n      ],\n      elevated: [\n        'bg-surface-container-low text-primary shadow-level1',\n        'hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1',\n        'disabled:bg-on-surface/10 disabled:text-on-surface-variant/38',\n        'data-[disabled]:bg-on-surface/10 data-[disabled]:text-on-surface-variant/38',\n      ],\n      text: [\n        'bg-transparent text-on-surface-variant',\n        'disabled:text-on-surface-variant/38',\n        'data-[disabled]:text-on-surface-variant/38',\n      ],\n    },\n    // Height / horizontal padding / gap / typescale / icon size per Expressive\n    // size. The pressed corner morph (PressedContainerShape: XS·S small 8 /\n    // M medium 12 / L·XL large 16) rides on data-[pressed]/active here so its\n    // attribute-selector specificity wins over the resting `rounded-*`.\n    size: {\n      xs: [\n        // XS is special-cased in Compose Button.kt: contentPaddingFor returns\n        // ExtraSmallContentPadding (12dp) and iconSpacingFor returns\n        // ExtraSmallIconSpacing (4dp) — tighter than the ButtonXSmallTokens\n        // Leading/TrailingSpace (16) and IconLabelSpace (8). S–XL use their tokens.\n        'h-8 px-3 gap-1 text-label-large [&_[data-slot=button-icon]>svg]:size-5',\n        'data-[pressed]:rounded-small active:rounded-small',\n      ],\n      s: [\n        'h-10 px-4 gap-2 text-label-large [&_[data-slot=button-icon]>svg]:size-5',\n        'data-[pressed]:rounded-small active:rounded-small',\n      ],\n      m: [\n        'h-14 px-6 gap-2 text-title-medium [&_[data-slot=button-icon]>svg]:size-6',\n        'data-[pressed]:rounded-medium active:rounded-medium',\n      ],\n      l: [\n        'h-24 px-12 gap-3 text-headline-small [&_[data-slot=button-icon]>svg]:size-8',\n        'data-[pressed]:rounded-large active:rounded-large',\n      ],\n      xl: [\n        'h-[136px] px-16 gap-4 text-headline-large [&_[data-slot=button-icon]>svg]:size-10',\n        'data-[pressed]:rounded-large active:rounded-large',\n      ],\n    },\n    // round = full pill; the square corner is size-specific (compounds below).\n    shape: {\n      round: 'rounded-full',\n      square: '',\n    },\n    // Toggle state, string-keyed so a plain (non-toggle) button — `toggle`\n    // unset — fires neither compound below (a boolean variant would default to\n    // `off` in tailwind-variants and wrongly apply the unselected look).\n    toggle: {\n      on: '',\n      off: '',\n    },\n  },\n  compoundVariants: [\n    // ---- Resting square corner (ContainerShapeSquare) ---------------------\n    { shape: 'square', size: 'xs', class: 'rounded-medium' }, // 12dp\n    { shape: 'square', size: 's', class: 'rounded-medium' }, // 12dp\n    { shape: 'square', size: 'm', class: 'rounded-large' }, // 16dp\n    { shape: 'square', size: 'l', class: 'rounded-extra-large' }, // 28dp\n    { shape: 'square', size: 'xl', class: 'rounded-extra-large' }, // 28dp\n    // ---- Selected shape morph: swap to the opposite shape -----------------\n    // (listed after the resting corner so tailwind-merge keeps these).\n    { shape: 'round', toggle: 'on', size: 'xs', class: 'rounded-medium' },\n    { shape: 'round', toggle: 'on', size: 's', class: 'rounded-medium' },\n    { shape: 'round', toggle: 'on', size: 'm', class: 'rounded-large' },\n    { shape: 'round', toggle: 'on', size: 'l', class: 'rounded-extra-large' },\n    { shape: 'round', toggle: 'on', size: 'xl', class: 'rounded-extra-large' },\n    { shape: 'square', toggle: 'on', size: 'xs', class: 'rounded-full' },\n    { shape: 'square', toggle: 'on', size: 's', class: 'rounded-full' },\n    { shape: 'square', toggle: 'on', size: 'm', class: 'rounded-full' },\n    { shape: 'square', toggle: 'on', size: 'l', class: 'rounded-full' },\n    { shape: 'square', toggle: 'on', size: 'xl', class: 'rounded-full' },\n    // ---- Outlined border width (OutlinedOutlineWidth: L 2 / XL 3 dp) ------\n    { variant: 'outlined', size: 'l', class: 'border-2' },\n    { variant: 'outlined', size: 'xl', class: 'border-[3px]' },\n    // ---- Toggle colors (Selected*/Unselected* tokens) ---------------------\n    // filled/tonal: base = default & selected look; `toggle:off` = unselected.\n    { variant: 'filled', toggle: 'off', class: 'bg-surface-container text-on-surface-variant' },\n    { variant: 'tonal', toggle: 'off', class: 'bg-surface-container text-on-surface-variant' },\n    // elevated: distinct selected (primary) & unselected looks.\n    { variant: 'elevated', toggle: 'on', class: 'bg-primary text-on-primary' },\n    {\n      variant: 'elevated',\n      toggle: 'off',\n      class: 'bg-surface-container-low text-on-surface-variant',\n    },\n    // outlined: selected fills with the inverse surface (base = unselected).\n    {\n      variant: 'outlined',\n      toggle: 'on',\n      class: [\n        'bg-inverse-surface text-inverse-on-surface border-transparent',\n        'disabled:bg-on-surface/10 disabled:border-transparent',\n        'data-[disabled]:bg-on-surface/10 data-[disabled]:border-transparent',\n      ],\n    },\n    // text: no Selected/Unselected tokens exist upstream (TextButtonTokens),\n    // so selection raises the label emphasis to primary (base = unselected\n    // on-surface-variant) to communicate the toggle state.\n    { variant: 'text', toggle: 'on', class: 'text-primary' },\n  ],\n  defaultVariants: {\n    variant: 'filled',\n    size: 's',\n    shape: 'round',\n  },\n});\n\nexport const Button = createButton(({ variant, size, shape, selected }) =>\n  button({ variant, size, shape, toggle: toToggle(selected) }),\n);\nexport type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape } from '@m3-baseui/core';\n"]}

package/dist/components/button-group/index.js

@@ -20,12 +20,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] }]
       }
     }
   }