@m3-baseui/react-tailwind 1.2.0 → 1.4.0

package/dist/checkbox.js

@@ -41,7 +41,12 @@ var checkboxTv = tv({
       "group-data-[error]:text-on-error",
       // M3 disabled: the check / dash turn the surface color on the faint box
       "group-data-[disabled]:text-surface",
+      // M3 asymmetric motion: unselected-exit accelerates out (150ms), the
+      // selected/indeterminate-enter decelerates in (350ms). Token-backed.
       "opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100",
+      "transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]",
+      "data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]",
+      "data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]",
       'data-[indeterminate]:after:content-[""] data-[indeterminate]:after:absolute',
       "data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current"
     ],

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/checkbox.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,kEAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qFAAA;AAAA,MACA,uGAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,mFAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,oKAAA;AAAA,MACA,4LAAA;AAAA,MACA,4FAAA;AAAA,MACA,sEAAA;AAAA;AAAA;AAAA,MAGA,sCAAA;AAAA,MACA,mGAAA;AAAA,MACA,+GAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,yGAAA;AAAA;AAAA,MAEA,kCAAA;AAAA;AAAA,MAEA,oCAAA;AAAA,MACA,uEAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,2DAA2D;AAAA;AAEtE,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA;AACV,CAAC","file":"checkbox.js","sourcesContent":["/**\n * checkbox.ts — tailwind-variants slots for the M3 Checkbox.\n *\n * 18dp box with a 40dp circular state layer. Checked/indeterminate fill the box\n * with primary; the indeterminate dash is an `::after` on the indicator and the\n * check SVG is hidden in that state via a group reference.\n */\nimport { createCheckbox } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const checkboxTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center shrink-0 box-border',\n      'size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent',\n      // Outline is on-surface-variant; the state layer (text/currentColor) is\n      // on-surface unselected, primary when selected (material-web).\n      'border-on-surface-variant text-on-surface',\n      'transition-colors duration-150 ease-standard',\n      'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary',\n      'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary',\n      // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n      'active:text-primary',\n      'data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface',\n      // M3 error: error outline + error-filled box; state layer stays error\n      'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n      'data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n      'data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      // M3 disabled: unselected outline on-surface/38; selected/indeterminate\n      // box on-surface/38 with no outline (the check turns surface, below).\n      'data-[disabled]:border-on-surface/38',\n      'data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent',\n      'data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent',\n      // 40dp circular state layer\n      'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n      'before:size-10 before:rounded-full before:bg-current before:opacity-0 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    ],\n    indicator: [\n      'group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary',\n      // M3 error: the check / dash turn on-error on the error-filled box\n      'group-data-[error]:text-on-error',\n      // M3 disabled: the check / dash turn the surface color on the faint box\n      'group-data-[disabled]:text-surface',\n      'opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100',\n      'data-[indeterminate]:after:content-[\"\"] data-[indeterminate]:after:absolute',\n      'data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current',\n    ],\n    icon: ['w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0'],\n  },\n});\n\nconst c = checkboxTv();\nexport const Checkbox = createCheckbox({\n  root: c.root(),\n  indicator: c.indicator(),\n  icon: c.icon(),\n});\n"]}
+{"version":3,"sources":["../src/checkbox.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,kEAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qFAAA;AAAA,MACA,uGAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,mFAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,oKAAA;AAAA,MACA,4LAAA;AAAA,MACA,4FAAA;AAAA,MACA,sEAAA;AAAA;AAAA;AAAA,MAGA,sCAAA;AAAA,MACA,mGAAA;AAAA,MACA,+GAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,yGAAA;AAAA;AAAA,MAEA,kCAAA;AAAA;AAAA,MAEA,oCAAA;AAAA;AAAA;AAAA,MAGA,uEAAA;AAAA,MACA,+FAAA;AAAA,MACA,2GAAA;AAAA,MACA,uHAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,2DAA2D;AAAA;AAEtE,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA;AACV,CAAC","file":"checkbox.js","sourcesContent":["/**\n * checkbox.ts — tailwind-variants slots for the M3 Checkbox.\n *\n * 18dp box with a 40dp circular state layer. Checked/indeterminate fill the box\n * with primary; the indeterminate dash is an `::after` on the indicator and the\n * check SVG is hidden in that state via a group reference.\n */\nimport { createCheckbox } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const checkboxTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center shrink-0 box-border',\n      'size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent',\n      // Outline is on-surface-variant; the state layer (text/currentColor) is\n      // on-surface unselected, primary when selected (material-web).\n      'border-on-surface-variant text-on-surface',\n      'transition-colors duration-150 ease-standard',\n      'data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary',\n      'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary',\n      // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n      'active:text-primary',\n      'data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface',\n      // M3 error: error outline + error-filled box; state layer stays error\n      'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n      'data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n      'data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      // M3 disabled: unselected outline on-surface/38; selected/indeterminate\n      // box on-surface/38 with no outline (the check turns surface, below).\n      'data-[disabled]:border-on-surface/38',\n      'data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent',\n      'data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent',\n      // 40dp circular state layer\n      'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n      'before:size-10 before:rounded-full before:bg-current before:opacity-0 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    ],\n    indicator: [\n      'group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary',\n      // M3 error: the check / dash turn on-error on the error-filled box\n      'group-data-[error]:text-on-error',\n      // M3 disabled: the check / dash turn the surface color on the faint box\n      'group-data-[disabled]:text-surface',\n      // M3 asymmetric motion: unselected-exit accelerates out (150ms), the\n      // selected/indeterminate-enter decelerates in (350ms). Token-backed.\n      'opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100',\n      'transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]',\n      'data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]',\n      'data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]',\n      'data-[indeterminate]:after:content-[\"\"] data-[indeterminate]:after:absolute',\n      'data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current',\n    ],\n    icon: ['w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0'],\n  },\n});\n\nconst c = checkboxTv();\nexport const Checkbox = createCheckbox({\n  root: c.root(),\n  indicator: c.indicator(),\n  icon: c.icon(),\n});\n"]}

package/dist/chip.d.ts

@@ -8,15 +8,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {
@@ -29,19 +33,24 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     remove: string[];
     check: string[];
     avatar: string[];
+    icon: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {
@@ -53,15 +62,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {
@@ -73,15 +86,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {
@@ -94,19 +111,24 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     remove: string[];
     check: string[];
     avatar: string[];
+    icon: string[];
 }, tailwind_variants.TVReturnType<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {
@@ -119,19 +141,24 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     remove: string[];
     check: string[];
     avatar: string[];
+    icon: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {
@@ -143,15 +170,19 @@ declare const chipTv: tailwind_variants.TVReturnType<{
     variant: {
         assist: {
             root: string;
+            icon: string;
         };
         suggestion: {
             root: string;
+            icon: string;
         };
         input: {
             root: string;
+            icon: string;
         };
         filter: {
             root: string[];
+            icon: string;
         };
     };
     elevated: {

package/dist/chip.js

@@ -11,6 +11,8 @@ var chipTv = tv({
       // layer is rounded to match instead (before:rounded-[inherit]); the ripple
       // self-clips.
       "h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large",
+      // M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).
+      "data-[with-leading-icon]:pl-2",
       "transition-colors duration-150 ease-standard",
       "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
@@ -37,20 +39,36 @@ var chipTv = tv({
       "inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden",
       "bg-primary-container text-on-primary-container",
       "[&>img]:size-full [&>img]:object-cover"
+    ],
+    // M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.
+    icon: [
+      "inline-flex items-center justify-center shrink-0 size-[18px]",
+      "[&>svg]:size-full",
+      "group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38"
     ]
   },
   variants: {
     variant: {
-      assist: { root: "border-outline text-on-surface cursor-pointer" },
-      suggestion: { root: "border-outline text-on-surface-variant cursor-pointer" },
-      input: { root: "border-outline text-on-surface-variant cursor-default pr-2" },
+      assist: {
+        root: "border-outline text-on-surface cursor-pointer",
+        icon: "text-primary"
+      },
+      suggestion: {
+        root: "border-outline text-on-surface-variant cursor-pointer",
+        icon: "text-on-surface-variant"
+      },
+      input: {
+        root: "border-outline text-on-surface-variant cursor-default pr-2",
+        icon: "text-on-surface-variant"
+      },
       filter: {
         root: [
           "border-outline text-on-surface-variant cursor-pointer",
           "data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent",
           // M3 disabled + selected: faint on-surface/12 container
           "data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12"
-        ]
+        ],
+        icon: "text-on-surface-variant group-data-[pressed]:hidden"
       }
     },
     // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,
@@ -71,7 +89,13 @@ var chipTv = tv({
 });
 var Chip = createChip(({ variant, elevated }) => {
   const c = chipTv({ variant, elevated });
-  return { root: c.root(), remove: c.remove(), check: c.check(), avatar: c.avatar() };
+  return {
+    root: c.root(),
+    remove: c.remove(),
+    check: c.check(),
+    avatar: c.avatar(),
+    icon: c.icon()
+  };
 });
 
 export { Chip, chipTv };

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA;AAAA;AAAA;AAAA,MAIA,2EAAA;AAAA,MACA,8CAAA;AAAA,MACA,qKAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,wDAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,8GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,mHAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,4FAAA;AAAA,MACA,gDAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ,EAAE,IAAA,EAAM,+CAAA,EAAgD;AAAA,MAChE,UAAA,EAAY,EAAE,IAAA,EAAM,uDAAA,EAAwD;AAAA,MAC5E,KAAA,EAAO,EAAE,IAAA,EAAM,4DAAA,EAA6D;AAAA,MAC5E,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM;AAAA,UACJ,uDAAA;AAAA,UACA,oHAAA;AAAA;AAAA,UAEA;AAAA;AACF;AACF,KACF;AAAA;AAAA;AAAA,IAGA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,2DAAA;AAAA,UACA,0CAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW,CAAC,EAAE,OAAA,EAAS,UAAS,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,UAAU,CAAA;AACtC,EAAA,OAAO,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,QAAQ,CAAA,CAAE,MAAA,EAAO,EAAG,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,MAAA,EAAQ,CAAA,CAAE,QAAO,EAAE;AACpF,CAAC","file":"chip.js","sourcesContent":["/**\n * chip.ts — tailwind-variants slots for the M3 Chip.\n *\n * 32dp tall, 8dp corners, label-large. The state layer reacts to hover/focus/\n * press (not the persistent toggle `data-pressed`, which a filter chip uses for\n * its selected fill). Emits the same DOM + ripple as the VE build.\n */\nimport { createChip } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const chipTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center gap-2 box-border',\n      // No `overflow-hidden`: it would clip the 48dp touch target. The state\n      // layer is rounded to match instead (before:rounded-[inherit]); the ripple\n      // self-clips.\n      'h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large',\n      'transition-colors duration-150 ease-standard',\n      '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-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    remove: [\n      'inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent',\n      'text-on-surface-variant cursor-pointer hover:opacity-80',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100',\n    ],\n    // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.\n    avatar: [\n      'inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden',\n      'bg-primary-container text-on-primary-container',\n      '[&>img]:size-full [&>img]:object-cover',\n    ],\n  },\n  variants: {\n    variant: {\n      assist: { root: 'border-outline text-on-surface cursor-pointer' },\n      suggestion: { root: 'border-outline text-on-surface-variant cursor-pointer' },\n      input: { root: 'border-outline text-on-surface-variant cursor-default pr-2' },\n      filter: {\n        root: [\n          'border-outline text-on-surface-variant cursor-pointer',\n          'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent',\n          // M3 disabled + selected: faint on-surface/12 container\n          'data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12',\n        ],\n      },\n    },\n    // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,\n    // no outline. Disabled drops the shadow.\n    elevated: {\n      true: {\n        root: [\n          'bg-surface-container-low border-transparent shadow-level1',\n          'hover:shadow-level2 active:shadow-level1',\n          'disabled:shadow-none data-[disabled]:shadow-none',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'assist',\n  },\n});\n\nexport const Chip = createChip(({ variant, elevated }) => {\n  const c = chipTv({ variant, elevated });\n  return { root: c.root(), remove: c.remove(), check: c.check(), avatar: c.avatar() };\n});\nexport type { ChipProps, ChipVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../src/chip.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA;AAAA;AAAA;AAAA,MAIA,2EAAA;AAAA;AAAA,MAEA,+BAAA;AAAA,MACA,8CAAA;AAAA,MACA,qKAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,wDAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,8GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,mHAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,4FAAA;AAAA,MACA,gDAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM;AAAA,MACJ,8DAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,+CAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,uDAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,4DAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM;AAAA,UACJ,uDAAA;AAAA,UACA,oHAAA;AAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACA,IAAA,EAAM;AAAA;AACR,KACF;AAAA;AAAA;AAAA,IAGA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,2DAAA;AAAA,UACA,0CAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW,CAAC,EAAE,OAAA,EAAS,UAAS,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,UAAU,CAAA;AACtC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,IACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,IACjB,IAAA,EAAM,EAAE,IAAA;AAAK,GACf;AACF,CAAC","file":"chip.js","sourcesContent":["/**\n * chip.ts — tailwind-variants slots for the M3 Chip.\n *\n * 32dp tall, 8dp corners, label-large. The state layer reacts to hover/focus/\n * press (not the persistent toggle `data-pressed`, which a filter chip uses for\n * its selected fill). Emits the same DOM + ripple as the VE build.\n */\nimport { createChip } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const chipTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center gap-2 box-border',\n      // No `overflow-hidden`: it would clip the 48dp touch target. The state\n      // layer is rounded to match instead (before:rounded-[inherit]); the ripple\n      // self-clips.\n      'h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large',\n      // M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).\n      'data-[with-leading-icon]:pl-2',\n      'transition-colors duration-150 ease-standard',\n      '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-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    remove: [\n      'inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent',\n      'text-on-surface-variant cursor-pointer hover:opacity-80',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100',\n    ],\n    // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.\n    avatar: [\n      'inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden',\n      'bg-primary-container text-on-primary-container',\n      '[&>img]:size-full [&>img]:object-cover',\n    ],\n    // M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.\n    icon: [\n      'inline-flex items-center justify-center shrink-0 size-[18px]',\n      '[&>svg]:size-full',\n      'group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    variant: {\n      assist: {\n        root: 'border-outline text-on-surface cursor-pointer',\n        icon: 'text-primary',\n      },\n      suggestion: {\n        root: 'border-outline text-on-surface-variant cursor-pointer',\n        icon: 'text-on-surface-variant',\n      },\n      input: {\n        root: 'border-outline text-on-surface-variant cursor-default pr-2',\n        icon: 'text-on-surface-variant',\n      },\n      filter: {\n        root: [\n          'border-outline text-on-surface-variant cursor-pointer',\n          'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent',\n          // M3 disabled + selected: faint on-surface/12 container\n          'data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12',\n        ],\n        icon: 'text-on-surface-variant group-data-[pressed]:hidden',\n      },\n    },\n    // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,\n    // no outline. Disabled drops the shadow.\n    elevated: {\n      true: {\n        root: [\n          'bg-surface-container-low border-transparent shadow-level1',\n          'hover:shadow-level2 active:shadow-level1',\n          'disabled:shadow-none data-[disabled]:shadow-none',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'assist',\n  },\n});\n\nexport const Chip = createChip(({ variant, elevated }) => {\n  const c = chipTv({ variant, elevated });\n  return {\n    root: c.root(),\n    remove: c.remove(),\n    check: c.check(),\n    avatar: c.avatar(),\n    icon: c.icon(),\n  };\n});\nexport type { ChipProps, ChipVariant } from '@m3-baseui/core';\n"]}

package/dist/dialog.d.ts

@@ -1,85 +1,115 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
 import * as react from 'react';
 import * as _base_ui_react from '@base-ui/react';
-import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 
 declare const dialogTv: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            close?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            backdrop?: tailwind_variants.ClassValue;
+    fullscreen: {
+        false: {
+            popup: string[];
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            close?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            backdrop?: tailwind_variants.ClassValue;
+        true: {
+            popup: string[];
         };
     };
-} | {}, {
+}, {
     backdrop: string[];
     popup: string[];
+    header: string[];
+    icon: string[];
     title: string[];
     description: string[];
+    divider: string[];
+    actions: string[];
     close: string[];
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            close?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            backdrop?: tailwind_variants.ClassValue;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    fullscreen: {
+        false: {
+            popup: string[];
+        };
+        true: {
+            popup: string[];
         };
     };
-} | {}>, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            close?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            backdrop?: tailwind_variants.ClassValue;
+}, {
+    fullscreen: {
+        false: {
+            popup: string[];
+        };
+        true: {
+            popup: string[];
+        };
+    };
+}>, {
+    fullscreen: {
+        false: {
+            popup: string[];
+        };
+        true: {
+            popup: string[];
         };
     };
-} | {}, {
+}, {
     backdrop: string[];
     popup: string[];
+    header: string[];
+    icon: string[];
     title: string[];
     description: string[];
+    divider: string[];
+    actions: string[];
     close: string[];
-}, tailwind_variants.TVReturnType<unknown, {
+}, tailwind_variants.TVReturnType<{
+    fullscreen: {
+        false: {
+            popup: string[];
+        };
+        true: {
+            popup: string[];
+        };
+    };
+}, {
     backdrop: string[];
     popup: string[];
+    header: string[];
+    icon: string[];
     title: string[];
     description: string[];
+    divider: string[];
+    actions: string[];
     close: string[];
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            title?: tailwind_variants.ClassValue;
-            close?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            description?: tailwind_variants.ClassValue;
-            backdrop?: tailwind_variants.ClassValue;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    fullscreen: {
+        false: {
+            popup: string[];
+        };
+        true: {
+            popup: string[];
+        };
+    };
+}, {
+    fullscreen: {
+        false: {
+            popup: string[];
+        };
+        true: {
+            popup: string[];
         };
     };
-} | {}>, unknown, unknown, undefined>>;
+}>, unknown, unknown, undefined>>;
 declare const Dialog: {
     Root: typeof _base_ui_react.DialogRoot;
     Trigger: _base_ui_react.DialogTrigger;
     Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
     Backdrop: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogBackdropProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
-    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Popup: react.ForwardRefExoticComponent<Omit<_m3_baseui_core.DialogPopupOwnProps & Omit<_base_ui_react.AlertDialogPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Icon: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
     Title: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<unknown>>;
     Description: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<unknown>>;
+    Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHRElement> & react.RefAttributes<HTMLHRElement>>;
+    Actions: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
     Close: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
 };
 

package/dist/dialog.js

@@ -40,26 +40,61 @@ var dialogTv = tv({
       "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
     ],
     popup: [
-      "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
-      "w-[min(560px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
-      "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
-      "p-6 flex flex-col gap-4",
+      "fixed z-50 box-border overflow-auto flex flex-col text-on-surface focus:outline-none",
       "origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized",
-      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-      "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
-      "focus:outline-none"
+      // Icon present → center the headline + supporting text (M3 hero icon).
+      "has-[[data-slot=dialog-icon]]:text-center"
     ],
+    // Fullscreen header row: leading close icon + title (grows, but shrinks +
+    // ellipsizes instead of pushing the trailing action off-screen) + action.
+    header: [
+      "flex items-center gap-2 px-2 h-14 shrink-0",
+      "[&>*:nth-child(2)]:grow [&>*:nth-child(2)]:min-w-0 [&>*:nth-child(2)]:overflow-hidden [&>*:nth-child(2)]:text-ellipsis [&>*:nth-child(2)]:whitespace-nowrap"
+    ],
+    // Centered 24dp hero icon in the secondary color.
+    icon: ["inline-flex self-center text-secondary"],
     title: ["text-headline-small text-on-surface m-0"],
     description: ["text-body-medium text-on-surface-variant m-0"],
+    // 1dp outline-variant rule under the fullscreen header.
+    divider: ["h-px w-full bg-outline-variant shrink-0 m-0 border-0"],
+    // End-aligned action row: 8dp between buttons; the popup gap (16dp) + mt-2
+    // (8dp) totals the 24dp M3 spacing above the actions.
+    actions: ["flex justify-end items-center gap-2 mt-2"],
     close: ["inline-flex"]
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        popup: [
+          "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+          "w-[min(560px,calc(100vw-48px))] min-w-[280px] max-h-[calc(100vh-48px)]",
+          "p-6 gap-4 rounded-extra-large bg-surface-container-high shadow-level3",
+          "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+          "data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
+        ]
+      },
+      true: {
+        popup: [
+          "inset-0 w-screen h-screen max-w-none rounded-none bg-surface",
+          "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    fullscreen: false
   }
 });
 var d = dialogTv();
 var Dialog = createDialog({
   backdrop: d.backdrop(),
-  popup: d.popup(),
+  popup: ({ fullscreen }) => dialogTv({ fullscreen }).popup(),
+  header: d.header(),
+  icon: d.icon(),
   title: d.title(),
   description: d.description(),
+  divider: d.divider(),
+  actions: d.actions(),
   close: d.close()
 });
 

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tv.ts","../src/dialog.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,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,+DAAA;AAAA,MACA,wEAAA;AAAA,MACA,6EAAA;AAAA,MACA,yBAAA;AAAA,MACA,8FAAA;AAAA,MACA,gEAAA;AAAA,MACA,4DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,yCAAyC,CAAA;AAAA,IACjD,WAAA,EAAa,CAAC,8CAA8C,CAAA;AAAA,IAC5D,KAAA,EAAO,CAAC,aAAa;AAAA;AAEzB,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"dialog.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 * dialog.ts — Tailwind classes for the M3 basic Dialog.\n *\n * Scrim backdrop + centered surface-container-high popup (extra-large corners,\n * elevation 3) with an emphasized fade/scale transition off Base UI's\n * data-[starting-style] / data-[ending-style] attributes.\n */\nimport { createDialog } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const dialogTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    popup: [\n      'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n      'w-[min(560px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n      'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n      'p-6 flex flex-col gap-4',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n      'focus:outline-none',\n    ],\n    title: ['text-headline-small text-on-surface m-0'],\n    description: ['text-body-medium text-on-surface-variant m-0'],\n    close: ['inline-flex'],\n  },\n});\n\nconst d = dialogTv();\nexport const Dialog = createDialog({\n  backdrop: d.backdrop(),\n  popup: d.popup(),\n  title: d.title(),\n  description: d.description(),\n  close: d.close(),\n});\n"]}
+{"version":3,"sources":["../src/tv.ts","../src/dialog.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;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,8FAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA;AAAA;AAAA,IAGA,MAAA,EAAQ;AAAA,MACN,4CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM,CAAC,wCAAwC,CAAA;AAAA,IAC/C,KAAA,EAAO,CAAC,yCAAyC,CAAA;AAAA,IACjD,WAAA,EAAa,CAAC,8CAA8C,CAAA;AAAA;AAAA,IAE5D,OAAA,EAAS,CAAC,sDAAsD,CAAA;AAAA;AAAA;AAAA,IAGhE,OAAA,EAAS,CAAC,0CAA0C,CAAA;AAAA,IACpD,KAAA,EAAO,CAAC,aAAa;AAAA,GACvB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,wEAAA;AAAA,UACA,uEAAA;AAAA,UACA,gEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,8DAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY;AAAA;AAEhB,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,CAAC,EAAE,UAAA,EAAW,KAAM,SAAS,EAAE,UAAA,EAAY,CAAA,CAAE,KAAA,EAAM;AAAA,EAC1D,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"dialog.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 * dialog.ts — Tailwind classes for the M3 Dialog (basic + fullscreen).\n *\n * Scrim backdrop + a surface popup with an emphasized fade/scale transition off\n * Base UI's data-[starting-style] / data-[ending-style] attributes. The basic\n * variant is a centered surface-container-high card (extra-large corners,\n * elevation 3, 280–560dp wide); the `fullscreen` variant is an edge-to-edge\n * `surface` with a header row + divider. An optional centered hero icon\n * (`data-slot=\"dialog-icon\"`) center-aligns the headline/supporting text.\n */\nimport { createDialog } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const dialogTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    popup: [\n      'fixed z-50 box-border overflow-auto flex flex-col text-on-surface focus:outline-none',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      // Icon present → center the headline + supporting text (M3 hero icon).\n      'has-[[data-slot=dialog-icon]]:text-center',\n    ],\n    // Fullscreen header row: leading close icon + title (grows, but shrinks +\n    // ellipsizes instead of pushing the trailing action off-screen) + action.\n    header: [\n      'flex items-center gap-2 px-2 h-14 shrink-0',\n      '[&>*:nth-child(2)]:grow [&>*:nth-child(2)]:min-w-0 [&>*:nth-child(2)]:overflow-hidden [&>*:nth-child(2)]:text-ellipsis [&>*:nth-child(2)]:whitespace-nowrap',\n    ],\n    // Centered 24dp hero icon in the secondary color.\n    icon: ['inline-flex self-center text-secondary'],\n    title: ['text-headline-small text-on-surface m-0'],\n    description: ['text-body-medium text-on-surface-variant m-0'],\n    // 1dp outline-variant rule under the fullscreen header.\n    divider: ['h-px w-full bg-outline-variant shrink-0 m-0 border-0'],\n    // End-aligned action row: 8dp between buttons; the popup gap (16dp) + mt-2\n    // (8dp) totals the 24dp M3 spacing above the actions.\n    actions: ['flex justify-end items-center gap-2 mt-2'],\n    close: ['inline-flex'],\n  },\n  variants: {\n    fullscreen: {\n      false: {\n        popup: [\n          'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n          'w-[min(560px,calc(100vw-48px))] min-w-[280px] max-h-[calc(100vh-48px)]',\n          'p-6 gap-4 rounded-extra-large bg-surface-container-high shadow-level3',\n          'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n          'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n        ],\n      },\n      true: {\n        popup: [\n          'inset-0 w-screen h-screen max-w-none rounded-none bg-surface',\n          'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    fullscreen: false,\n  },\n});\n\nconst d = dialogTv();\nexport const Dialog = createDialog({\n  backdrop: d.backdrop(),\n  popup: ({ fullscreen }) => dialogTv({ fullscreen }).popup(),\n  header: d.header(),\n  icon: d.icon(),\n  title: d.title(),\n  description: d.description(),\n  divider: d.divider(),\n  actions: d.actions(),\n  close: d.close(),\n});\n"]}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Switch, switchTv } from './switch.js';
 export { Checkbox, checkboxTv } from './checkbox.js';
 export { Radio, RadioGroup, radioTv } from './radio.js';
 export { Chip, chipTv } from './chip.js';
-export { Tooltip, tooltipTv } from './tooltip.js';
+export { RichTooltip, Tooltip, richTooltipTv, tooltipTv } from './tooltip.js';
 export { Dialog, dialogTv } from './dialog.js';
 export { Menu, menuTv } from './menu.js';
 export { Tabs, tabsTv } from './tabs.js';
@@ -34,7 +34,7 @@ export { SideSheet, sideSheetTv } from './side-sheet.js';
 export { Search, searchTv } from './search.js';
 export { DatePicker, datePickerTv } from './date-picker.js';
 export { TimePicker, timePickerTv } from './time-picker.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, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, LoadingIndicatorProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, 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, 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, SideSheetSide, SideSheetVariant, TabsVariant, 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 './toolbar.js';
 export { Carousel, carouselTv } from './carousel.js';
 import '@base-ui/react';