@m3-baseui/react-tailwind 1.4.0 → 3.0.0

package/dist/{fab-menu.js → components/fab-menu/index.js}

@@ -2,7 +2,7 @@
 import { createFab, createFabMenu } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/fab-menu.ts
+// src/components/fab-menu/fab-menu.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -49,38 +49,70 @@ var fabTv = tv$1({
     "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
   ],
   variants: {
-    size: {
-      small: "size-10 rounded-medium [&_svg]:size-6",
-      regular: "size-14 rounded-large [&_svg]:size-6",
-      large: "size-24 rounded-extra-large [&_svg]:size-9",
-      extended: "h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6"
-    },
+    // Geometry is set by compoundVariants (size × variant); these keys exist so
+    // the resolver can accept them.
+    size: { small: "", medium: "", large: "" },
+    variant: { standard: "", extended: "" },
     color: {
-      surface: "bg-surface-container-high text-primary",
       primary: "bg-primary-container text-on-primary-container",
       secondary: "bg-secondary-container text-on-secondary-container",
       tertiary: "bg-tertiary-container text-on-tertiary-container"
     }
   },
+  compoundVariants: [
+    // ---- Standard (icon-only square): container / corner / icon ----
+    { size: "small", variant: "standard", class: "size-14 rounded-large [&_svg]:size-6" },
+    // 56 / 16 / 24
+    {
+      size: "medium",
+      variant: "standard",
+      class: "size-20 rounded-large-increased [&_svg]:size-7"
+      // 80 / 20 / 28
+    },
+    { size: "large", variant: "standard", class: "size-24 rounded-extra-large [&_svg]:size-8" },
+    // 96 / 28 / 32
+    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----
+    // `min-w-*` keeps the pill affordance for short / text-only labels (wider
+    // than tall), matching the pre-Expressive extended FAB which guarded this.
+    {
+      size: "small",
+      variant: "extended",
+      class: "h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6"
+      // 56 / 16 / 24 / 16 / 8
+    },
+    {
+      size: "medium",
+      variant: "extended",
+      class: "h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7"
+      // 80 / 20 / 28 / 26 / 16
+    },
+    {
+      size: "large",
+      variant: "extended",
+      class: "h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8"
+      // 96 / 28 / 32 / 28 / 20
+    }
+  ],
   defaultVariants: {
-    size: "regular",
-    color: "surface"
+    size: "small",
+    variant: "standard",
+    color: "primary"
   }
 });
-createFab(({ size, color }) => fabTv({ size, color }));
+createFab(({ size, color, variant }) => fabTv({ size, color, variant }));
 
-// src/fab-menu.ts
+// src/components/fab-menu/fab-menu.ts
 var fabMenuTv = tv({
   slots: {
     popup: [
-      "flex flex-col items-end gap-2 bg-transparent outline-none",
+      "flex flex-col items-end gap-1 bg-transparent outline-none",
       "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
       "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
       "data-[ending-style]:opacity-0"
     ],
     item: [
-      "relative inline-flex items-center gap-3 h-14 px-4 overflow-hidden box-border",
-      "cursor-pointer select-none outline-none rounded-full text-label-large",
+      "relative inline-flex items-center gap-2 h-14 px-6 overflow-hidden box-border",
+      "cursor-pointer select-none outline-none rounded-full text-title-medium",
       "shadow-level3 hover:shadow-level4 transition-shadow duration-150 ease-standard",
       "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
@@ -96,7 +128,6 @@ var fabMenuTv = tv({
   },
   variants: {
     color: {
-      surface: { item: "bg-surface-container-high text-primary" },
       primary: { item: "bg-primary-container text-on-primary-container" },
       secondary: { item: "bg-secondary-container text-on-secondary-container" },
       tertiary: { item: "bg-tertiary-container text-on-tertiary-container" }
@@ -112,5 +143,5 @@ var FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {
 });
 
 export { FabMenu, fabMenuTv };
-//# sourceMappingURL=fab-menu.js.map
-//# sourceMappingURL=fab-menu.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/fab-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/fab/fab.ts","../../../src/components/fab-menu/fab-menu.ts"],"names":["baseTv","tv"],"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 * fab.ts — tailwind-variants for the M3 (Expressive) FAB.\n *\n * Three sizes (small 56 / medium 80 / large 96 dp) × two variants (standard\n * icon-only square, extended icon + label pill) × three container colors\n * (primary / secondary / tertiary). Elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The size×variant geometry (container,\n * corner, icon, padding, label typescale) is resolved via compoundVariants so\n * every M3 combination maps to exact dp values. The pointer ripple is added by\n * the factory. Same DOM as the VE build.\n */\nimport { createFab } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const fabTv = tv({\n  base: [\n    'relative inline-flex items-center justify-center box-border overflow-hidden',\n    'border-0 cursor-pointer select-none outline-none',\n    'shadow-level3 hover:shadow-level4',\n    'transition-shadow duration-150 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    // M3 discourages disabled FABs (material-web removed the state). When native\n    // disabled is used, apply the same container/label tokens as filled buttons.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n    'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n  ],\n  variants: {\n    // Geometry is set by compoundVariants (size × variant); these keys exist so\n    // the resolver can accept them.\n    size: { small: '', medium: '', large: '' },\n    variant: { standard: '', extended: '' },\n    color: {\n      primary: 'bg-primary-container text-on-primary-container',\n      secondary: 'bg-secondary-container text-on-secondary-container',\n      tertiary: 'bg-tertiary-container text-on-tertiary-container',\n    },\n  },\n  compoundVariants: [\n    // ---- Standard (icon-only square): container / corner / icon ----\n    { size: 'small', variant: 'standard', class: 'size-14 rounded-large [&_svg]:size-6' }, // 56 / 16 / 24\n    {\n      size: 'medium',\n      variant: 'standard',\n      class: 'size-20 rounded-large-increased [&_svg]:size-7', // 80 / 20 / 28\n    },\n    { size: 'large', variant: 'standard', class: 'size-24 rounded-extra-large [&_svg]:size-8' }, // 96 / 28 / 32\n    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----\n    // `min-w-*` keeps the pill affordance for short / text-only labels (wider\n    // than tall), matching the pre-Expressive extended FAB which guarded this.\n    {\n      size: 'small',\n      variant: 'extended',\n      class: 'h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6', // 56 / 16 / 24 / 16 / 8\n    },\n    {\n      size: 'medium',\n      variant: 'extended',\n      class:\n        'h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7', // 80 / 20 / 28 / 26 / 16\n    },\n    {\n      size: 'large',\n      variant: 'extended',\n      class: 'h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8', // 96 / 28 / 32 / 28 / 20\n    },\n  ],\n  defaultVariants: {\n    size: 'small',\n    variant: 'standard',\n    color: 'primary',\n  },\n});\n\nexport const Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));\nexport type { FabProps, FabSize, FabVariant, FabColor } from '@m3-baseui/core';\n","/**\n * fab-menu.ts — tailwind-variants for the M3 (Expressive) FAB menu.\n *\n * The popup stacks the actions in a right-aligned column (4dp between items) with\n * the M3 menu enter/exit motion; each item is a 56dp full-corner pill (elevation\n * level3, level4 on hover) with a currentColor state-layer `::before`, a 24dp\n * leading icon slot, 24dp leading/trailing padding, an 8dp icon-label gap and a\n * title-medium label. The trigger reuses the FAB resolver. Same DOM + ripple as\n * the VE build.\n */\nimport { createFabMenu } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { fabTv } from '../fab/fab';\n\nexport const fabMenuTv = tv({\n  slots: {\n    popup: [\n      'flex flex-col items-end gap-1 bg-transparent outline-none',\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    ],\n    item: [\n      'relative inline-flex items-center gap-2 h-14 px-6 overflow-hidden box-border',\n      'cursor-pointer select-none outline-none rounded-full text-title-medium',\n      'shadow-level3 hover:shadow-level4 transition-shadow duration-150 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      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 leading icon (24dp).\n      '[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6',\n      // M3 discourages disabled FABs; when used, match the filled-button tokens\n      // (per-token, not a blanket opacity) and suppress the state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    color: {\n      primary: { item: 'bg-primary-container text-on-primary-container' },\n      secondary: { item: 'bg-secondary-container text-on-secondary-container' },\n      tertiary: { item: 'bg-tertiary-container text-on-tertiary-container' },\n    },\n  },\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\nexport const FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {\n  popup: fabMenuTv().popup(),\n  item: (color) => fabMenuTv({ color }).item(),\n});\n\nexport type { FabMenuTriggerProps, FabMenuItemProps } from '@m3-baseui/core';\n"]}

package/dist/{icon-button.js → components/icon-button/index.js}

@@ -2,7 +2,7 @@
 import { createIconButton } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
-// src/icon-button.ts
+// src/components/icon-button/icon-button.ts
 var WIDTHS = {
   xs: { narrow: "w-7", default: "w-8", wide: "w-10" },
   // 28 / 32 / 40
@@ -120,5 +120,5 @@ var IconButton = createIconButton(
 );
 
 export { IconButton, iconButton };
-//# sourceMappingURL=icon-button.js.map
-//# sourceMappingURL=icon-button.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * icon-button.ts — tailwind-variants resolver for the M3 Icon Button.\n *\n * 40×40 circular target with a centered icon. The `selected` variant supports\n * toggle icon buttons; when `selected` is undefined the variant's default\n * (filled/active) look is used. Emits the same DOM + ripple as the VE build.\n */\nimport { createIconButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\n// M3 Expressive container widths (px) per size × width. Tailwind v4's dynamic\n// spacing scale resolves any integer (e.g. w-13 = 52px, w-46 = 184px).\nconst WIDTHS = {\n  xs: { narrow: 'w-7', default: 'w-8', wide: 'w-10' }, // 28 / 32 / 40\n  s: { narrow: 'w-8', default: 'w-10', wide: 'w-13' }, // 32 / 40 / 52\n  m: { narrow: 'w-12', default: 'w-14', wide: 'w-18' }, // 48 / 56 / 72\n  l: { narrow: 'w-16', default: 'w-24', wide: 'w-32' }, // 64 / 96 / 128\n  xl: { narrow: 'w-26', default: 'w-34', wide: 'w-46' }, // 104 / 136 / 184\n} as const;\n\nconst widthCompounds = Object.entries(WIDTHS).flatMap(([size, w]) =>\n  Object.entries(w).map(([width, klass]) => ({\n    size: size as keyof typeof WIDTHS,\n    width: width as 'narrow' | 'default' | 'wide',\n    class: klass,\n  })),\n);\n\nexport const iconButton = tv({\n  base: [\n    'relative inline-flex items-center justify-center shrink-0',\n    // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.\n    // The state layer is already rounded (before:rounded-[inherit]); the ripple\n    // self-clips.\n    'rounded-full cursor-pointer select-none border-0 bg-transparent',\n    'transition-[box-shadow,background-color,color] duration-200 ease-standard',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    'before:transition-opacity before:duration-100',\n    'hover:before:opacity-[var(--md-sys-state-hover)]',\n    'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n    'active:before:opacity-[var(--md-sys-state-pressed)]',\n    'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    // Focus ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer. Per-variant disabled colors\n    // (container on-surface/12, icon on-surface/38) live on each variant.\n    'disabled:pointer-events-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // Disabled icon is on-surface/38 for every variant; filled/tonal disabled\n    // container is on-surface/12; outlined disabled outline is on-surface/12\n    // (material-web parity).\n    variant: {\n      standard: [\n        'text-on-surface-variant',\n        'disabled:text-on-surface/38 data-[disabled]:text-on-surface/38',\n      ],\n      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      ],\n      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      ],\n      outlined: [\n        'border border-outline text-on-surface-variant',\n        'disabled:border-on-surface/12 disabled:text-on-surface/38',\n        'data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38',\n      ],\n    },\n    selected: {\n      true: '',\n      false: '',\n    },\n    // Container height + icon size per M3 Expressive size. Width comes from the\n    // (size, width) compound variants below.\n    size: {\n      xs: 'h-8 [&>svg]:size-5',\n      s: 'h-10 [&>svg]:size-6',\n      m: 'h-14 [&>svg]:size-6',\n      l: 'h-24 [&>svg]:size-8',\n      xl: 'h-[136px] [&>svg]:size-10',\n    },\n    width: {\n      narrow: '',\n      default: '',\n      wide: '',\n    },\n  },\n  compoundVariants: [\n    ...widthCompounds,\n    { variant: 'standard', selected: true, class: 'text-primary' },\n    { variant: 'filled', selected: false, class: 'bg-surface-container-highest text-primary' },\n    {\n      variant: 'tonal',\n      selected: false,\n      class: 'bg-surface-container-highest text-on-surface-variant',\n    },\n    {\n      variant: 'outlined',\n      selected: true,\n      class: [\n        'bg-inverse-surface text-inverse-on-surface border-transparent',\n        // M3 disabled + selected: faint on-surface/12 container, no outline\n        // (icon falls back to on-surface/38 from the variant). NOT transparent.\n        'disabled:bg-on-surface/12 disabled:border-transparent',\n        'data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent',\n      ],\n    },\n  ],\n  defaultVariants: {\n    variant: 'standard',\n    size: 's',\n    width: 'default',\n  },\n});\n\nexport const IconButton = createIconButton(({ variant, selected, size, width }) =>\n  iconButton({ variant, selected, size, width }),\n);\nexport type { IconButtonProps, IconButtonVariant } from '@m3-baseui/core';\n"]}

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

@@ -0,0 +1,95 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { ITEM_LEADING_VARIANTS, ItemLeadingVariant, ItemProps } from '@m3-baseui/core';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const itemTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            content?: tailwind_merge.ClassNameValue;
+            leading?: tailwind_merge.ClassNameValue;
+            trailing?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
+            supporting?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            headline?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            content?: tailwind_merge.ClassNameValue;
+            leading?: tailwind_merge.ClassNameValue;
+            trailing?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
+            supporting?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            headline?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    leading: string[];
+    content: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            content?: tailwind_merge.ClassNameValue;
+            leading?: tailwind_merge.ClassNameValue;
+            trailing?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
+            supporting?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            headline?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            content?: tailwind_merge.ClassNameValue;
+            leading?: tailwind_merge.ClassNameValue;
+            trailing?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
+            supporting?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            headline?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    leading: string[];
+    content: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    leading: string[];
+    content: string;
+    overline: string;
+    headline: string;
+    supporting: string;
+    trailing: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            content?: tailwind_merge.ClassNameValue;
+            leading?: tailwind_merge.ClassNameValue;
+            trailing?: tailwind_merge.ClassNameValue;
+            overline?: tailwind_merge.ClassNameValue;
+            supporting?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            headline?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Item: react.ForwardRefExoticComponent<_m3_baseui_core.ItemOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+export { Item, itemTv };

package/dist/{item.js → components/item/index.js}

@@ -3,7 +3,7 @@ import { createItem } from '@m3-baseui/core';
 export { ITEM_LEADING_VARIANTS } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/item.ts
+// src/components/item/item.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -64,5 +64,5 @@ var Item = createItem({
 });
 
 export { Item, itemTv };
-//# sourceMappingURL=item.js.map
-//# sourceMappingURL=item.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/item/item.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,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0CAAA;AAAA,IACV,QAAA,EAAU,iCAAA;AAAA,IACV,UAAA,EAAY,0CAAA;AAAA,IACZ,QAAA,EAAU;AAAA;AAEd,CAAC;AAED,IAAM,IAAI,MAAA,EAAO;AACV,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,QAAA,EAAU,EAAE,QAAA;AACd,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 * item.ts — tailwind-variants slots for the M3 Item row primitive.\n *\n * The shared row layout: leading slot, overline/headline/supporting column and\n * trailing slot. Headline is `body-large`/`on-surface`, overline `label-small`,\n * supporting `body-medium`, leading/trailing `on-surface-variant`. Inert by\n * design — interactive surfaces wrap it. Same DOM as the VE build.\n */\nimport { createItem } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const itemTv = tv({\n  slots: {\n    root: [\n      'relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left',\n      'bg-transparent text-on-surface',\n    ],\n    leading: [\n      'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n      '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n      // M3 leading column widths, keyed on the factory's data-leading attribute.\n      'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n      'data-[leading=image]:size-14',\n      'data-[leading=video]:w-25 data-[leading=video]:h-14',\n    ],\n    content: 'flex flex-col min-w-0 flex-1',\n    overline: 'text-label-small text-on-surface-variant',\n    headline: 'text-body-large text-on-surface',\n    supporting: 'text-body-medium text-on-surface-variant',\n    trailing: 'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n  },\n});\n\nconst s = itemTv();\nexport const Item = createItem({\n  root: s.root(),\n  leading: s.leading(),\n  content: s.content(),\n  overline: s.overline(),\n  headline: s.headline(),\n  supporting: s.supporting(),\n  trailing: s.trailing(),\n});\nexport { ITEM_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ItemProps, ItemLeadingVariant } from '@m3-baseui/core';\n"]}

package/dist/{list.js → components/list/index.js}

@@ -3,7 +3,7 @@ import { createList } from '@m3-baseui/core';
 export { LIST_LEADING_VARIANTS } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/list.ts
+// src/components/list/list.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -96,5 +96,5 @@ var List = createList({
 });
 
 export { List, listTv };
-//# sourceMappingURL=list.js.map
-//# sourceMappingURL=list.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/list/list.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,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,wCAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,mFAAA;AAAA,MACA,uDAAA;AAAA;AAAA,MAEA,kEAAA;AAAA,MACA,8BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,8BAAA;AAAA,IACT,QAAA,EAAU,0EAAA;AAAA,IACV,UAAA,EAAY,mFAAA;AAAA,IACZ,QAAA,EAAU;AAAA,MACR,oFAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,CAAA,EAAG,EAAE,IAAA,EAAM,eAAA,EAAgB;AAAA,MAC3B,CAAA,EAAG,EAAE,IAAA,EAAM,mBAAA,EAAoB;AAAA,MAC/B,CAAA,EAAG,EAAE,IAAA,EAAM,+BAAA;AAAgC,KAC7C;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,yDAAA;AAAA,UACA,4IAAA;AAAA,UACA,kDAAA;AAAA,UACA,0DAAA;AAAA,UACA,qDAAA;AAAA,UACA,sEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,CAAA;AAAA,IACP,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,MAAA,EAAO,CAAE,IAAA,EAAK;AAAA,EACpB,IAAA,EAAM,CAAC,EAAE,KAAA,EAAO,aAAY,KAAM;AAChC,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,KAAA,EAAO,aAAa,CAAA;AACvC,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,MACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,MACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,MACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,MACrB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,MACzB,QAAA,EAAU,EAAE,QAAA;AAAS,KACvB;AAAA,EACF;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 * list.ts — tailwind-variants slots for the M3 List.\n *\n * `surface` container with 8dp block padding; rows are 56/72/88dp for\n * one/two/three-line. Interactive rows get a `currentColor` state-layer\n * `::before` (the pointer ripple is added by the factory) and dim per-token when\n * `data-disabled`. Headline is `body-large`/`on-surface`, supporting\n * `body-medium`/`on-surface-variant`, leading/trailing `on-surface-variant`.\n * Same DOM as the VE build.\n */\nimport { createList } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const listTv = tv({\n  slots: {\n    root: 'list-none m-0 px-0 py-2 bg-transparent',\n    item: [\n      'group relative flex w-full items-center gap-4 box-border px-4 text-left',\n      'bg-transparent border-0 text-on-surface no-underline',\n    ],\n    leading: [\n      'flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant',\n      '[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover',\n      // M3 leading column widths, keyed on the factory's data-leading attribute.\n      'data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full',\n      'data-[leading=image]:size-14',\n      'data-[leading=video]:w-25 data-[leading=video]:h-14',\n    ],\n    content: 'flex flex-col min-w-0 flex-1',\n    headline: 'text-body-large text-on-surface group-data-[disabled]:text-on-surface/38',\n    supporting: 'text-body-medium text-on-surface-variant group-data-[disabled]:text-on-surface/38',\n    trailing: [\n      'flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6',\n      'group-data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    lines: {\n      1: { item: 'min-h-14 py-2' },\n      2: { item: 'min-h-[72px] py-2' },\n      3: { item: 'min-h-[88px] items-start py-3' },\n    },\n    interactive: {\n      true: {\n        item: [\n          'cursor-pointer select-none overflow-hidden outline-none',\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-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n          'disabled:pointer-events-none disabled:before:opacity-0',\n        ],\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    lines: 1,\n    interactive: false,\n  },\n});\n\nexport const List = createList({\n  root: listTv().root(),\n  item: ({ lines, interactive }) => {\n    const c = listTv({ lines, interactive });\n    return {\n      item: c.item(),\n      leading: c.leading(),\n      content: c.content(),\n      headline: c.headline(),\n      supporting: c.supporting(),\n      trailing: c.trailing(),\n    };\n  },\n});\nexport { LIST_LEADING_VARIANTS } from '@m3-baseui/core';\nexport type { ListItemProps, ListItemLines, ListLeadingVariant } from '@m3-baseui/core';\n"]}

package/dist/{loading-indicator.js → components/loading-indicator/index.js}

@@ -2,7 +2,7 @@
 import { createLoadingIndicator } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/loading-indicator.ts
+// src/components/loading-indicator/loading-indicator.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/loading-indicator.ts
+// src/components/loading-indicator/loading-indicator.ts
 var loadingIndicatorTv = tv({
   slots: {
     // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to
@@ -57,5 +57,5 @@ var LoadingIndicator = createLoadingIndicator(({ contained }) => {
 });
 
 export { LoadingIndicator, loadingIndicatorTv };
-//# sourceMappingURL=loading-indicator.js.map
-//# sourceMappingURL=loading-indicator.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/loading-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/loading-indicator/loading-indicator.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC/BI,IAAM,qBAAqB,EAAA,CAAG;AAAA,EACnC,KAAA,EAAO;AAAA;AAAA;AAAA,IAGL,IAAA,EAAM,2EAAA;AAAA,IACN,SAAA,EAAW;AAAA,MACT,cAAA;AAAA;AAAA,MAEA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,EAAE,IAAA,EAAM,6CAAA,EAA8C;AAAA,MAC5D,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,SAAA,EAAW,KAAA;AAChC,CAAC;AAEM,IAAM,gBAAA,GAAmB,sBAAA,CAAuB,CAAC,EAAE,WAAU,KAAM;AACxE,EAAA,MAAM,CAAA,GAAI,kBAAA,CAAmB,EAAE,SAAA,EAAW,CAAA;AAC1C,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AACpD,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 * loading-indicator.ts — tailwind-variants slots for the M3 Expressive Loading\n * indicator.\n *\n * A 48dp box holding the morphing `primary` shape; the rotate+scale morph keys\n * off the `m3-loading` keyframe (see preset.css) and always runs (indeterminate\n * only). `contained` puts the shape on a `secondary-container` pill. Same DOM as\n * the VE build.\n */\nimport { createLoadingIndicator } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const loadingIndicatorTv = tv({\n  slots: {\n    // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to\n    // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).\n    root: 'inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]',\n    indicator: [\n      'fill-primary',\n      // Morph + rotate about the shape's own centre (transform-box: fill-box).\n      '[transform-box:fill-box] origin-center animate-m3-loading',\n    ],\n  },\n  variants: {\n    contained: {\n      true: { root: 'size-12 rounded-full bg-secondary-container' },\n      false: {},\n    },\n  },\n  defaultVariants: { contained: false },\n});\n\nexport const LoadingIndicator = createLoadingIndicator(({ contained }) => {\n  const s = loadingIndicatorTv({ contained });\n  return { root: s.root(), indicator: s.indicator() };\n});\nexport type { LoadingIndicatorProps } from '@m3-baseui/core';\n"]}

package/dist/{menu.d.ts → components/menu/index.d.ts}

@@ -1,98 +1,99 @@
 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';
+import * as tailwind_merge from 'tailwind-merge';
 
 declare const menuTv: tailwind_variants.TVReturnType<{
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            submenuTrigger?: tailwind_variants.ClassValue;
-            checkboxItem?: tailwind_variants.ClassValue;
-            radioItem?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            submenuTrigger?: tailwind_merge.ClassNameValue;
+            checkboxItem?: tailwind_merge.ClassNameValue;
+            radioItem?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            submenuTrigger?: tailwind_variants.ClassValue;
-            checkboxItem?: tailwind_variants.ClassValue;
-            radioItem?: tailwind_variants.ClassValue;
+        [x: string]: tailwind_merge.ClassNameValue | {
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            submenuTrigger?: tailwind_merge.ClassNameValue;
+            checkboxItem?: tailwind_merge.ClassNameValue;
+            radioItem?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
-    popup: string[];
+    popup: string;
     item: string[];
     separator: string[];
-    groupLabel: string[];
+    groupLabel: string;
     submenuTrigger: string[];
-    checkboxItem: string[];
-    radioItem: string[];
+    checkboxItem: string;
+    radioItem: string;
     itemIndicator: string;
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            submenuTrigger?: tailwind_variants.ClassValue;
-            checkboxItem?: tailwind_variants.ClassValue;
-            radioItem?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            submenuTrigger?: tailwind_merge.ClassNameValue;
+            checkboxItem?: tailwind_merge.ClassNameValue;
+            radioItem?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            submenuTrigger?: tailwind_variants.ClassValue;
-            checkboxItem?: tailwind_variants.ClassValue;
-            radioItem?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            submenuTrigger?: tailwind_merge.ClassNameValue;
+            checkboxItem?: tailwind_merge.ClassNameValue;
+            radioItem?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
-    popup: string[];
+    popup: string;
     item: string[];
     separator: string[];
-    groupLabel: string[];
+    groupLabel: string;
     submenuTrigger: string[];
-    checkboxItem: string[];
-    radioItem: string[];
+    checkboxItem: string;
+    radioItem: string;
     itemIndicator: string;
 }, tailwind_variants.TVReturnType<unknown, {
-    popup: string[];
+    popup: string;
     item: string[];
     separator: string[];
-    groupLabel: string[];
+    groupLabel: string;
     submenuTrigger: string[];
-    checkboxItem: string[];
-    radioItem: string[];
+    checkboxItem: string;
+    radioItem: string;
     itemIndicator: string;
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            submenuTrigger?: tailwind_variants.ClassValue;
-            checkboxItem?: tailwind_variants.ClassValue;
-            radioItem?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            submenuTrigger?: tailwind_merge.ClassNameValue;
+            checkboxItem?: tailwind_merge.ClassNameValue;
+            radioItem?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
@@ -100,8 +101,8 @@ declare const Menu: {
     Root: <Payload>(props: _base_ui_react.MenuRoot.Props<Payload>) => react.JSX.Element;
     Trigger: _base_ui_react.MenuTrigger;
     Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
     Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
     Separator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
     Group: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;