@m3-baseui/react-tailwind 3.0.0 → 5.0.0

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

@@ -12,8 +12,8 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
             content?: tailwind_merge.ClassNameValue;
             close?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
-            root?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
             viewport?: tailwind_merge.ClassNameValue;
         };
     };
@@ -24,8 +24,8 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
             content?: tailwind_merge.ClassNameValue;
             close?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
-            root?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
             viewport?: tailwind_merge.ClassNameValue;
         };
     };
@@ -44,8 +44,8 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
             content?: tailwind_merge.ClassNameValue;
             close?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
-            root?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
             viewport?: tailwind_merge.ClassNameValue;
         };
     };
@@ -56,8 +56,8 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
             content?: tailwind_merge.ClassNameValue;
             close?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
-            root?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
             viewport?: tailwind_merge.ClassNameValue;
         };
     };
@@ -84,8 +84,8 @@ declare const snackbarTv: tailwind_variants.TVReturnType<{
             content?: tailwind_merge.ClassNameValue;
             close?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
-            root?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
             viewport?: tailwind_merge.ClassNameValue;
         };
     };

package/dist/components/split-button/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/split-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/split-button/split-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.\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 * split-button.ts — tailwind-variants slots for the M3 SplitButton.\n *\n * Two 40dp surfaces joined by a 2dp seam: the leading primary-action button\n * keeps its outer (start) corner full and reduces the seam (end) corner; the\n * trailing menu trigger mirrors it. Both share the variant container color. The\n * trigger carries `group` so the default chevron can rotate via Base UI's\n * `data-[popup-open]`. The dropdown reuses the M3 menu surface. State layer is\n * the `::before` overlay; the pointer ripple is added by the factory. Same DOM\n * as the VE build.\n */\nimport { createSplitButton } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\n// Shared surface base for both the leading + trailing buttons.\nconst surface = [\n  'relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none',\n  'text-label-large',\n  'transition-[background-color,color,border-color] duration-200 ease-standard',\n  'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none 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-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n  'disabled:pointer-events-none disabled:before:opacity-0',\n  'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n];\n\n// Per-variant container colors (identical on both surfaces). M3 disabled is\n// per-token (container on-surface/12, label on-surface/38), not a blanket fade.\nconst VARIANT_FILLED = [\n  'bg-primary text-on-primary',\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];\nconst VARIANT_TONAL = [\n  'bg-secondary-container text-on-secondary-container',\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];\nconst VARIANT_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];\nconst VARIANT_ELEVATED = [\n  'bg-surface-container-low text-primary shadow-level1',\n  'disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none',\n  'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none',\n];\nconst VARIANT_TEXT = [\n  'bg-transparent text-primary',\n  'disabled:text-on-surface/38',\n  'data-[disabled]:text-on-surface/38',\n];\n\nexport const splitButtonTv = tv({\n  slots: {\n    group: 'inline-flex items-center gap-0.5',\n    // leading: outer (start) corner full, seam (end) corner reduced.\n    leading: [...surface, 'gap-2 px-6 rounded-s-full rounded-e-small'],\n    // trailing: seam (start) corner reduced, outer (end) corner full.\n    trailing: [...surface, 'group gap-1 px-3 rounded-s-small rounded-e-full'],\n    chevron: [\n      'inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]',\n      'transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180',\n    ],\n    popup: [\n      'min-w-[112px] max-w-[280px] py-2',\n      'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n      'focus:outline-none',\n    ],\n    item: [\n      'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n  },\n  variants: {\n    variant: {\n      filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },\n      tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },\n      outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },\n      elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },\n      text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT },\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const SplitButton = createSplitButton({\n  group: splitButtonTv().group(),\n  leading: (variant) => splitButtonTv({ variant }).leading(),\n  trailing: (variant) => splitButtonTv({ variant }).trailing(),\n  chevron: splitButtonTv().chevron(),\n  popup: splitButtonTv().popup(),\n  item: splitButtonTv().item(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/split-button/split-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 * split-button.ts — tailwind-variants slots for the M3 SplitButton.\n *\n * Two 40dp surfaces joined by a 2dp seam: the leading primary-action button\n * keeps its outer (start) corner full and reduces the seam (end) corner; the\n * trailing menu trigger mirrors it. Both share the variant container color. The\n * trigger carries `group` so the default chevron can rotate via Base UI's\n * `data-[popup-open]`. The dropdown reuses the M3 menu surface. State layer is\n * the `::before` overlay; the pointer ripple is added by the factory. Same DOM\n * as the VE build.\n */\nimport { createSplitButton } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\n// Shared surface base for both the leading + trailing buttons.\nconst surface = [\n  'relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none',\n  'text-label-large',\n  'transition-[background-color,color,border-color] duration-200 ease-standard',\n  'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none 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-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n  'disabled:pointer-events-none disabled:before:opacity-0',\n  'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n];\n\n// Per-variant container colors (identical on both surfaces). M3 disabled is\n// per-token (container on-surface/12, label on-surface/38), not a blanket fade.\nconst VARIANT_FILLED = [\n  'bg-primary text-on-primary',\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];\nconst VARIANT_TONAL = [\n  'bg-secondary-container text-on-secondary-container',\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];\nconst VARIANT_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];\nconst VARIANT_ELEVATED = [\n  'bg-surface-container-low text-primary shadow-level1',\n  'disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none',\n  'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none',\n];\nconst VARIANT_TEXT = [\n  'bg-transparent text-primary',\n  'disabled:text-on-surface/38',\n  'data-[disabled]:text-on-surface/38',\n];\n\nexport const splitButtonTv = tv({\n  slots: {\n    group: 'inline-flex items-center gap-0.5',\n    // leading: outer (start) corner full, seam (end) corner reduced.\n    leading: [...surface, 'gap-2 px-6 rounded-s-full rounded-e-small'],\n    // trailing: seam (start) corner reduced, outer (end) corner full.\n    trailing: [...surface, 'group gap-1 px-3 rounded-s-small rounded-e-full'],\n    chevron: [\n      'inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]',\n      'transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180',\n    ],\n    popup: [\n      'min-w-[112px] max-w-[280px] py-2',\n      'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n      'focus:outline-none',\n    ],\n    item: [\n      'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n  },\n  variants: {\n    variant: {\n      filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },\n      tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },\n      outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },\n      elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },\n      text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT },\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const SplitButton = createSplitButton({\n  group: splitButtonTv().group(),\n  leading: (variant) => splitButtonTv({ variant }).leading(),\n  trailing: (variant) => splitButtonTv({ variant }).trailing(),\n  chevron: splitButtonTv().chevron(),\n  popup: splitButtonTv().popup(),\n  item: splitButtonTv().item(),\n});\n"]}

package/dist/components/tabs/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/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/tabs/tabs.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,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,+CAAA;AAAA;AAAA,MAEA,iEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,GAAA,EAAK;AAAA,MACH,oFAAA;AAAA,MACA,kFAAA;AAAA,MACA,yBAAA;AAAA;AAAA,MAEA,0EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA;AAAA;AAAA,MAGA,6GAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,qCAAA;AAAA,MACA,kEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA;AAAA;AAAA,MAGP,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,mGAAA;AAAA,QACL,SAAA,EAAW;AAAA,OACb;AAAA;AAAA,MAEA,SAAA,EAAW,EAAE,GAAA,EAAK,+BAAA,EAAiC,WAAW,SAAA;AAAU;AAC1E,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,IAAA,GAAO,UAAA,CAAW,CAAC,OAAA,KAAY;AAC1C,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,CAAA;AAC5B,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA;AAAM,GACjB;AACF,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 * tabs.ts — tailwind-variants slots for the M3 Tabs.\n *\n * The active-tab underline reads Base UI's --active-tab-width/left CSS vars on\n * the indicator. The `variant` recolors the active tab (primary → primary,\n * secondary → on-surface). Tabs carry a `before:` state layer + ripple.\n */\nimport { createTabs } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const tabsTv = tv({\n  slots: {\n    root: 'flex flex-col',\n    list: [\n      'relative flex border-b border-surface-variant',\n      // M3 scrollable tabs: horizontal overflow, no wrap, hidden scrollbar.\n      'data-[scrollable]:overflow-x-auto data-[scrollable]:flex-nowrap',\n      'data-[scrollable]:[scrollbar-width:none] data-[scrollable]:[&::-webkit-scrollbar]:hidden',\n    ],\n    tab: [\n      'relative flex shrink-0 items-center justify-center gap-2 h-12 px-4 overflow-hidden',\n      'cursor-pointer select-none border-0 bg-transparent outline-none text-title-small',\n      'text-on-surface-variant',\n      // Icon slot (24dp), centered.\n      '[&_[data-slot=tab-icon]]:inline-flex [&_[data-slot=tab-icon]>svg]:size-6',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none 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      // M3 disabled (per-token, not a blanket fade): label + icon on-surface/0.38,\n      // no state layer. currentColor carries the dim to the icon slot.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      // A disabled tab that is also the active value stays dimmed: the variant's\n      // data-[active] color has equal specificity, so a combined selector wins.\n      'data-[disabled]:data-[active]:text-on-surface/[0.38]',\n    ],\n    indicator: [\n      'absolute bottom-0 left-0 bg-primary',\n      'w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)]',\n      'transition-all duration-200 ease-standard',\n    ],\n    panel: 'p-4 outline-none',\n  },\n  variants: {\n    variant: {\n      // primary: 3dp active indicator with rounded top corners; icon stacks\n      // above the label (64dp tall) when a tab carries an icon.\n      primary: {\n        tab: 'data-[active]:text-primary data-[with-icon]:flex-col data-[with-icon]:h-16 data-[with-icon]:gap-1',\n        indicator: 'h-[3px] rounded-t-[3px]',\n      },\n      // secondary: 2dp square active indicator, active label = on-surface\n      secondary: { tab: 'data-[active]:text-on-surface', indicator: 'h-[2px]' },\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nexport const Tabs = createTabs((variant) => {\n  const s = tabsTv({ variant });\n  return {\n    root: s.root(),\n    list: s.list(),\n    tab: s.tab(),\n    indicator: s.indicator(),\n    panel: s.panel(),\n  };\n});\nexport type { TabsVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/tabs/tabs.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,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,+CAAA;AAAA;AAAA,MAEA,iEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,GAAA,EAAK;AAAA,MACH,oFAAA;AAAA,MACA,kFAAA;AAAA,MACA,yBAAA;AAAA;AAAA,MAEA,0EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA;AAAA;AAAA,MAGA,6GAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,qCAAA;AAAA,MACA,kEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA;AAAA;AAAA,MAGP,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,mGAAA;AAAA,QACL,SAAA,EAAW;AAAA,OACb;AAAA;AAAA,MAEA,SAAA,EAAW,EAAE,GAAA,EAAK,+BAAA,EAAiC,WAAW,SAAA;AAAU;AAC1E,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,IAAA,GAAO,UAAA,CAAW,CAAC,OAAA,KAAY;AAC1C,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,CAAA;AAC5B,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA;AAAM,GACjB;AACF,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 * tabs.ts — tailwind-variants slots for the M3 Tabs.\n *\n * The active-tab underline reads Base UI's --active-tab-width/left CSS vars on\n * the indicator. The `variant` recolors the active tab (primary → primary,\n * secondary → on-surface). Tabs carry a `before:` state layer + ripple.\n */\nimport { createTabs } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const tabsTv = tv({\n  slots: {\n    root: 'flex flex-col',\n    list: [\n      'relative flex border-b border-surface-variant',\n      // M3 scrollable tabs: horizontal overflow, no wrap, hidden scrollbar.\n      'data-[scrollable]:overflow-x-auto data-[scrollable]:flex-nowrap',\n      'data-[scrollable]:[scrollbar-width:none] data-[scrollable]:[&::-webkit-scrollbar]:hidden',\n    ],\n    tab: [\n      'relative flex shrink-0 items-center justify-center gap-2 h-12 px-4 overflow-hidden',\n      'cursor-pointer select-none border-0 bg-transparent outline-none text-title-small',\n      'text-on-surface-variant',\n      // Icon slot (24dp), centered.\n      '[&_[data-slot=tab-icon]]:inline-flex [&_[data-slot=tab-icon]>svg]:size-6',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none 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      // M3 disabled (per-token, not a blanket fade): label + icon on-surface/0.38,\n      // no state layer. currentColor carries the dim to the icon slot.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      // A disabled tab that is also the active value stays dimmed: the variant's\n      // data-[active] color has equal specificity, so a combined selector wins.\n      'data-[disabled]:data-[active]:text-on-surface/[0.38]',\n    ],\n    indicator: [\n      'absolute bottom-0 left-0 bg-primary',\n      'w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)]',\n      'transition-all duration-200 ease-standard',\n    ],\n    panel: 'p-4 outline-none',\n  },\n  variants: {\n    variant: {\n      // primary: 3dp active indicator with rounded top corners; icon stacks\n      // above the label (64dp tall) when a tab carries an icon.\n      primary: {\n        tab: 'data-[active]:text-primary data-[with-icon]:flex-col data-[with-icon]:h-16 data-[with-icon]:gap-1',\n        indicator: 'h-[3px] rounded-t-[3px]',\n      },\n      // secondary: 2dp square active indicator, active label = on-surface\n      secondary: { tab: 'data-[active]:text-on-surface', indicator: 'h-[2px]' },\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nexport const Tabs = createTabs((variant) => {\n  const s = tabsTv({ variant });\n  return {\n    root: s.root(),\n    list: s.list(),\n    tab: s.tab(),\n    indicator: s.indicator(),\n    panel: s.panel(),\n  };\n});\nexport type { TabsVariant } from '@m3-baseui/core';\n"]}

package/dist/components/time-picker/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/time-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/time-picker/time-picker.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.\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 * time-picker.ts — Tailwind classes for the M3 Time picker (dial + input).\n *\n * Dimensions follow Material Android timepicker dimens (96×80 display, 52×98\n * period toggle, 48dp period targets, 12dp display↔toggle gap, 256dp dial,\n * 28dp dial top margin). State layers on interactive slots match other M3 controls.\n */\nimport { createTimePicker } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport type { TimePickerVariant, TimeValue } from '@m3-baseui/core';\n\nconst stateLayerBase = [\n  'overflow-hidden',\n  'before:content-[\"\"] before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none 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  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',\n] as const;\n\nexport const timePickerTv = tv({\n  slots: {\n    root: ['inline-flex flex-col items-center p-2 text-on-surface'],\n    header: ['flex items-center gap-3 min-h-[98px]'],\n    display: ['inline-flex items-center'],\n    field: [\n      'relative',\n      ...stateLayerBase,\n      'inline-grid place-items-center w-24 h-20 rounded-small box-border',\n      'bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none',\n      'border border-transparent transition-colors duration-100',\n      'data-[selected]:bg-primary-container data-[selected]:text-on-primary-container',\n    ],\n    colon: ['text-display-large text-on-surface px-1 leading-none self-center'],\n    periods: [\n      'inline-flex flex-col shrink-0 rounded-small overflow-hidden border border-outline',\n      'h-[98px] w-[52px] m-0 p-0 min-w-0 box-border',\n    ],\n    period: [\n      'relative',\n      ...stateLayerBase,\n      'flex-1 inline-flex items-center justify-center min-h-12 h-12 w-full',\n      'border-0 bg-transparent',\n      'text-title-medium text-on-surface-variant cursor-pointer outline-none',\n      'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n      '[&+&]:border-t [&+&]:border-outline',\n    ],\n    dial: [\n      'relative size-[256px] mt-[28px] p-0 min-w-0 border-0 rounded-full bg-surface-container-highest',\n    ],\n    dialNumber: [\n      ...stateLayerBase,\n      'absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full',\n      'border-0 bg-transparent',\n      'text-body-large text-on-surface cursor-pointer outline-none select-none',\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n    dialHand: [\n      'absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none',\n    ],\n    dialCenter: [\n      'absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none',\n    ],\n    inputs: ['flex items-start gap-3'],\n    inputBox: [\n      'w-24 h-20 rounded-small box-border text-center',\n      'bg-surface-container-highest text-on-surface text-display-large outline-none',\n      'border border-outline focus:border-2 focus:border-primary',\n      '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n    ],\n    inputCaption: ['block mt-1 text-body-small text-on-surface-variant'],\n  },\n});\n\nconst tp = timePickerTv();\nexport const TimePicker = createTimePicker(() => ({\n  root: tp.root(),\n  header: tp.header(),\n  display: tp.display(),\n  field: tp.field(),\n  colon: tp.colon(),\n  periods: tp.periods(),\n  period: tp.period(),\n  dial: tp.dial(),\n  dialNumber: tp.dialNumber(),\n  dialHand: tp.dialHand(),\n  dialCenter: tp.dialCenter(),\n  inputs: tp.inputs(),\n  inputBox: tp.inputBox(),\n  inputCaption: tp.inputCaption(),\n}));\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/time-picker/time-picker.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 * time-picker.ts — Tailwind classes for the M3 Time picker (dial + input).\n *\n * Dimensions follow Material Android timepicker dimens (96×80 display, 52×98\n * period toggle, 48dp period targets, 12dp display↔toggle gap, 256dp dial,\n * 28dp dial top margin). State layers on interactive slots match other M3 controls.\n */\nimport { createTimePicker } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport type { TimePickerVariant, TimeValue } from '@m3-baseui/core';\n\nconst stateLayerBase = [\n  'overflow-hidden',\n  'before:content-[\"\"] before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none 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  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',\n] as const;\n\nexport const timePickerTv = tv({\n  slots: {\n    root: ['inline-flex flex-col items-center p-2 text-on-surface'],\n    header: ['flex items-center gap-3 min-h-[98px]'],\n    display: ['inline-flex items-center'],\n    field: [\n      'relative',\n      ...stateLayerBase,\n      'inline-grid place-items-center w-24 h-20 rounded-small box-border',\n      'bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none',\n      'border border-transparent transition-colors duration-100',\n      'data-[selected]:bg-primary-container data-[selected]:text-on-primary-container',\n    ],\n    colon: ['text-display-large text-on-surface px-1 leading-none self-center'],\n    periods: [\n      'inline-flex flex-col shrink-0 rounded-small overflow-hidden border border-outline',\n      'h-[98px] w-[52px] m-0 p-0 min-w-0 box-border',\n    ],\n    period: [\n      'relative',\n      ...stateLayerBase,\n      'flex-1 inline-flex items-center justify-center min-h-12 h-12 w-full',\n      'border-0 bg-transparent',\n      'text-title-medium text-on-surface-variant cursor-pointer outline-none',\n      'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n      '[&+&]:border-t [&+&]:border-outline',\n    ],\n    dial: [\n      'relative size-[256px] mt-[28px] p-0 min-w-0 border-0 rounded-full bg-surface-container-highest',\n    ],\n    dialNumber: [\n      ...stateLayerBase,\n      'absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full',\n      'border-0 bg-transparent',\n      'text-body-large text-on-surface cursor-pointer outline-none select-none',\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n    dialHand: [\n      'absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none',\n    ],\n    dialCenter: [\n      'absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none',\n    ],\n    inputs: ['flex items-start gap-3'],\n    inputBox: [\n      'w-24 h-20 rounded-small box-border text-center',\n      'bg-surface-container-highest text-on-surface text-display-large outline-none',\n      'border border-outline focus:border-2 focus:border-primary',\n      '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n    ],\n    inputCaption: ['block mt-1 text-body-small text-on-surface-variant'],\n  },\n});\n\nconst tp = timePickerTv();\nexport const TimePicker = createTimePicker(() => ({\n  root: tp.root(),\n  header: tp.header(),\n  display: tp.display(),\n  field: tp.field(),\n  colon: tp.colon(),\n  periods: tp.periods(),\n  period: tp.period(),\n  dial: tp.dial(),\n  dialNumber: tp.dialNumber(),\n  dialHand: tp.dialHand(),\n  dialCenter: tp.dialCenter(),\n  inputs: tp.inputs(),\n  inputBox: tp.inputBox(),\n  inputCaption: tp.inputCaption(),\n}));\n"]}

package/dist/components/toolbar/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/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/toolbar/toolbar.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;;;AC5BI,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,oGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,8CAAA;AAAA,MACV,OAAA,EACE;AAAA,KACJ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,oBAAA;AAAA,MACZ,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,UAAA,EAAY,aAAa,YAAA;AACvD,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA;AAAA,EAAc,CAAC,EAAE,OAAA,EAAS,WAAA,OAC/C,SAAA,CAAU,EAAE,OAAA,EAAS,WAAA,EAAa;AACpC","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 * toolbar.ts — tailwind-variants for the M3 Expressive Toolbar.\n *\n * A floating, full-radius pill (elevation level3) that groups action icons.\n * `standard` rides on surface-container; `vibrant` on primary-container — and\n * forces its interactive children (icon buttons / links) to the matching\n * on-primary-container foreground, since `IconButton` otherwise paints its own\n * `on-surface-variant`. The descendant selector outranks the button's own color\n * class but not its higher-specificity `data-[disabled]` rule, so disabled\n * actions still dim. `vertical` swaps the main axis and the fixed dimension.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createToolbar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const toolbarTv = tv({\n  base: 'inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6',\n  variants: {\n    variant: {\n      standard: 'bg-surface-container text-on-surface-variant',\n      vibrant:\n        'bg-primary-container text-on-primary-container [&_button]:text-on-primary-container [&_a]:text-on-primary-container',\n    },\n    orientation: {\n      horizontal: 'flex-row h-16 px-2',\n      vertical: 'flex-col w-16 py-2',\n    },\n  },\n  defaultVariants: { variant: 'standard', orientation: 'horizontal' },\n});\n\nexport const Toolbar = createToolbar(({ variant, orientation }) =>\n  toolbarTv({ variant, orientation }),\n);\nexport type { ToolbarProps, ToolbarVariant, ToolbarOrientation } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/toolbar/toolbar.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;;;ACjDI,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,oGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,8CAAA;AAAA,MACV,OAAA,EACE;AAAA,KACJ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,oBAAA;AAAA,MACZ,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,UAAA,EAAY,aAAa,YAAA;AACvD,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA;AAAA,EAAc,CAAC,EAAE,OAAA,EAAS,WAAA,OAC/C,SAAA,CAAU,EAAE,OAAA,EAAS,WAAA,EAAa;AACpC","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 * toolbar.ts — tailwind-variants for the M3 Expressive Toolbar.\n *\n * A floating, full-radius pill (elevation level3) that groups action icons.\n * `standard` rides on surface-container; `vibrant` on primary-container — and\n * forces its interactive children (icon buttons / links) to the matching\n * on-primary-container foreground, since `IconButton` otherwise paints its own\n * `on-surface-variant`. The descendant selector outranks the button's own color\n * class but not its higher-specificity `data-[disabled]` rule, so disabled\n * actions still dim. `vertical` swaps the main axis and the fixed dimension.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createToolbar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const toolbarTv = tv({\n  base: 'inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6',\n  variants: {\n    variant: {\n      standard: 'bg-surface-container text-on-surface-variant',\n      vibrant:\n        'bg-primary-container text-on-primary-container [&_button]:text-on-primary-container [&_a]:text-on-primary-container',\n    },\n    orientation: {\n      horizontal: 'flex-row h-16 px-2',\n      vertical: 'flex-col w-16 py-2',\n    },\n  },\n  defaultVariants: { variant: 'standard', orientation: 'horizontal' },\n});\n\nexport const Toolbar = createToolbar(({ variant, orientation }) =>\n  toolbarTv({ variant, orientation }),\n);\nexport type { ToolbarProps, ToolbarVariant, ToolbarOrientation } from '@m3-baseui/core';\n"]}

package/dist/components/tooltip/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/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/tooltip/tooltip.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;;;AC3BH,IAAM,UAAA,GAAa;AAAA,EACjB,4FAAA;AAAA,EACA,gEAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA,yDAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,sBAAsB;AAAA;AAElC,CAAC;AAEM,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,oDAAA;AAAA,MACA,4DAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,wBAAwB,CAAA;AAAA,IAChC,OAAA,EAAS,CAAC,sCAAsC,CAAA;AAAA,IAChD,cAAA,EAAgB,CAAC,8CAA8C,CAAA;AAAA;AAAA;AAAA;AAAA,IAI/D,OAAA,EAAS,CAAC,8CAA8C;AAAA;AAE5D,CAAC;AAED,IAAM,IAAI,SAAA,EAAU;AACb,IAAM,OAAA,GAAU,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG;AAE3E,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,OAAA,EAAS,EAAE,OAAA;AACb,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 * tooltip.ts — Tailwind classes for the M3 Tooltip (plain + rich).\n *\n * Plain (`Tooltip`, Base UI Tooltip): inverse-surface background, body-small\n * text, extra-small corners, with a fade + small-move transition driven by Base\n * UI's data-[starting-style] / data-[ending-style] attributes.\n *\n * Rich (`RichTooltip`, Base UI Popover): surface-container surface (level2\n * elevation, 12dp corner, 320dp max) holding an optional title-small subhead,\n * body-medium supporting text, and a leading-aligned action row at the bottom\n * (M3 places rich-tooltip actions bottom-left). Built on Popover so its buttons\n * are reachable by keyboard and touch.\n */\nimport { createTooltip, createRichTooltip } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nconst transition = [\n  'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n  'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n  'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n];\n\nexport const tooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-inverse-surface text-inverse-on-surface text-body-small',\n      'rounded-extra-small px-2 py-1 max-w-[224px] select-none',\n      ...transition,\n    ],\n    arrow: ['text-inverse-surface'],\n  },\n});\n\nexport const richTooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-surface-container text-on-surface shadow-level2',\n      'rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1',\n      'outline-none',\n      ...transition,\n    ],\n    arrow: ['text-surface-container'],\n    subhead: ['text-title-small text-on-surface m-0'],\n    supportingText: ['text-body-medium text-on-surface-variant m-0'],\n    // M3 places rich-tooltip actions at the bottom-left (leading), not trailing\n    // like a dialog. -ml-2 pulls the text button so its label optically aligns\n    // with the content's left edge.\n    actions: ['flex flex-wrap items-center gap-2 mt-1 -ml-2'],\n  },\n});\n\nconst t = tooltipTv();\nexport const Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });\n\nconst r = richTooltipTv();\nexport const RichTooltip = createRichTooltip({\n  popup: r.popup(),\n  arrow: r.arrow(),\n  subhead: r.subhead(),\n  supportingText: r.supportingText(),\n  actions: r.actions(),\n});\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/tooltip/tooltip.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;;;AChDH,IAAM,UAAA,GAAa;AAAA,EACjB,4FAAA;AAAA,EACA,gEAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA,yDAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,sBAAsB;AAAA;AAElC,CAAC;AAEM,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,oDAAA;AAAA,MACA,4DAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,wBAAwB,CAAA;AAAA,IAChC,OAAA,EAAS,CAAC,sCAAsC,CAAA;AAAA,IAChD,cAAA,EAAgB,CAAC,8CAA8C,CAAA;AAAA;AAAA;AAAA;AAAA,IAI/D,OAAA,EAAS,CAAC,8CAA8C;AAAA;AAE5D,CAAC;AAED,IAAM,IAAI,SAAA,EAAU;AACb,IAAM,OAAA,GAAU,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG;AAE3E,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,OAAA,EAAS,EAAE,OAAA;AACb,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 * tooltip.ts — Tailwind classes for the M3 Tooltip (plain + rich).\n *\n * Plain (`Tooltip`, Base UI Tooltip): inverse-surface background, body-small\n * text, extra-small corners, with a fade + small-move transition driven by Base\n * UI's data-[starting-style] / data-[ending-style] attributes.\n *\n * Rich (`RichTooltip`, Base UI Popover): surface-container surface (level2\n * elevation, 12dp corner, 320dp max) holding an optional title-small subhead,\n * body-medium supporting text, and a leading-aligned action row at the bottom\n * (M3 places rich-tooltip actions bottom-left). Built on Popover so its buttons\n * are reachable by keyboard and touch.\n */\nimport { createTooltip, createRichTooltip } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nconst transition = [\n  'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n  'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n  'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n];\n\nexport const tooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-inverse-surface text-inverse-on-surface text-body-small',\n      'rounded-extra-small px-2 py-1 max-w-[224px] select-none',\n      ...transition,\n    ],\n    arrow: ['text-inverse-surface'],\n  },\n});\n\nexport const richTooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-surface-container text-on-surface shadow-level2',\n      'rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1',\n      'outline-none',\n      ...transition,\n    ],\n    arrow: ['text-surface-container'],\n    subhead: ['text-title-small text-on-surface m-0'],\n    supportingText: ['text-body-medium text-on-surface-variant m-0'],\n    // M3 places rich-tooltip actions at the bottom-left (leading), not trailing\n    // like a dialog. -ml-2 pulls the text button so its label optically aligns\n    // with the content's left edge.\n    actions: ['flex flex-wrap items-center gap-2 mt-1 -ml-2'],\n  },\n});\n\nconst t = tooltipTv();\nexport const Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });\n\nconst r = richTooltipTv();\nexport const RichTooltip = createRichTooltip({\n  popup: r.popup(),\n  arrow: r.arrow(),\n  subhead: r.subhead(),\n  supportingText: r.supportingText(),\n  actions: r.actions(),\n});\n"]}

package/dist/components/top-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/top-app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/tv.ts","../../../src/components/top-app-bar/top-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;;;AChCI,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,iEAAA;AAAA,IACN,GAAA,EAAK,mCAAA;AAAA,IACL,OAAA,EAAS,2DAAA;AAAA,IACT,QAAA,EAAU,kCAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,EAAE,QAAA,EAAU,8BAAA,EAA+B;AAAA,MAClD,MAAA,EAAQ,EAAE,QAAA,EAAU,0CAAA,EAA2C;AAAA,MAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,+BAAA,EAAgC;AAAA,MAClE,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,gCAAA;AAAiC;AACpE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,IAAA,KAAS;AACjD,EAAA,MAAM,IAAI,WAAA,CAAY,EAAE,OAAA,EAAS,IAAA,CAAK,SAAS,CAAA;AAC/C,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,IACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,IACrB,QAAA,EAAU,EAAE,QAAA;AAAS,GACvB;AACF,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 * top-app-bar.ts — tailwind-variants slots for the M3 TopAppBar.\n *\n * A `surface` bar. `small`/`center` are a single 64dp row (title-large, left vs.\n * centered); `medium`/`large` add a second headline line (headline-small /\n * headline-medium) below a 64dp action row, for 112dp / 152dp totals. The active\n * variant is exposed as `data-variant`. Same DOM as the VE build.\n */\nimport { createTopAppBar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const topAppBarTv = tv({\n  slots: {\n    root: 'flex flex-col w-full box-border h-16 bg-surface text-on-surface',\n    row: 'flex items-center gap-1 h-16 px-1',\n    leading: 'flex items-center shrink-0 text-on-surface [&_svg]:size-6',\n    headline: 'min-w-0 truncate text-on-surface',\n    trailing: 'flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6',\n  },\n  variants: {\n    variant: {\n      small: { headline: 'flex-1 px-3 text-title-large' },\n      center: { headline: 'flex-1 px-3 text-center text-title-large' },\n      medium: { root: 'h-28', headline: 'px-4 pb-6 text-headline-small' },\n      large: { root: 'h-38', headline: 'px-4 pb-7 text-headline-medium' },\n    },\n  },\n  defaultVariants: {\n    variant: 'small',\n  },\n});\n\nexport const TopAppBar = createTopAppBar((args) => {\n  const s = topAppBarTv({ variant: args.variant });\n  return {\n    root: s.root(),\n    row: s.row(),\n    leading: s.leading(),\n    headline: s.headline(),\n    trailing: s.trailing(),\n  };\n});\nexport type { TopAppBarProps, TopAppBarVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/top-app-bar/top-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;;;ACrDI,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,iEAAA;AAAA,IACN,GAAA,EAAK,mCAAA;AAAA,IACL,OAAA,EAAS,2DAAA;AAAA,IACT,QAAA,EAAU,kCAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,EAAE,QAAA,EAAU,8BAAA,EAA+B;AAAA,MAClD,MAAA,EAAQ,EAAE,QAAA,EAAU,0CAAA,EAA2C;AAAA,MAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,+BAAA,EAAgC;AAAA,MAClE,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,gCAAA;AAAiC;AACpE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,IAAA,KAAS;AACjD,EAAA,MAAM,IAAI,WAAA,CAAY,EAAE,OAAA,EAAS,IAAA,CAAK,SAAS,CAAA;AAC/C,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,IACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,IACrB,QAAA,EAAU,EAAE,QAAA;AAAS,GACvB;AACF,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 * top-app-bar.ts — tailwind-variants slots for the M3 TopAppBar.\n *\n * A `surface` bar. `small`/`center` are a single 64dp row (title-large, left vs.\n * centered); `medium`/`large` add a second headline line (headline-small /\n * headline-medium) below a 64dp action row, for 112dp / 152dp totals. The active\n * variant is exposed as `data-variant`. Same DOM as the VE build.\n */\nimport { createTopAppBar } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const topAppBarTv = tv({\n  slots: {\n    root: 'flex flex-col w-full box-border h-16 bg-surface text-on-surface',\n    row: 'flex items-center gap-1 h-16 px-1',\n    leading: 'flex items-center shrink-0 text-on-surface [&_svg]:size-6',\n    headline: 'min-w-0 truncate text-on-surface',\n    trailing: 'flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6',\n  },\n  variants: {\n    variant: {\n      small: { headline: 'flex-1 px-3 text-title-large' },\n      center: { headline: 'flex-1 px-3 text-center text-title-large' },\n      medium: { root: 'h-28', headline: 'px-4 pb-6 text-headline-small' },\n      large: { root: 'h-38', headline: 'px-4 pb-7 text-headline-medium' },\n    },\n  },\n  defaultVariants: {\n    variant: 'small',\n  },\n});\n\nexport const TopAppBar = createTopAppBar((args) => {\n  const s = topAppBarTv({ variant: args.variant });\n  return {\n    root: s.root(),\n    row: s.row(),\n    leading: s.leading(),\n    headline: s.headline(),\n    trailing: s.trailing(),\n  };\n});\nexport type { TopAppBarProps, TopAppBarVariant } from '@m3-baseui/core';\n"]}

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { SideSheet, sideSheetTv } from './components/side-sheet/index.js';
 export { Search, searchTv } from './components/search/index.js';
 export { DatePicker, datePickerTv } from './components/date-picker/index.js';
 export { TimePicker, timePickerTv } from './components/time-picker/index.js';
-export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, ITEM_LEADING_VARIANTS, IconButtonProps, IconButtonVariant, ItemLeadingVariant, ItemProps, LIST_LEADING_VARIANTS, LinearProgressProps, ListItemLines, ListItemProps, ListLeadingVariant, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SelectFieldProps, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldIconAction, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonGroupProps, ButtonGroupVariant, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, CardProps, CardVariant, CarouselVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, ITEM_LEADING_VARIANTS, IconButtonProps, IconButtonVariant, ItemLeadingVariant, ItemProps, LIST_LEADING_VARIANTS, LinearProgressProps, ListItemLines, ListItemProps, ListLeadingVariant, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SelectFieldProps, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldIconAction, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TimePickerVariant, TimeValue, ToolbarOrientation, ToolbarProps, ToolbarVariant, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 export { Toolbar, toolbarTv } from './components/toolbar/index.js';
 export { Carousel, carouselTv } from './components/carousel/index.js';
 import '@base-ui/react';