@m3-baseui/react-tailwind 1.0.4 → 1.2.0

package/dist/date-picker.d.ts

@@ -0,0 +1,188 @@
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+import { createDatePicker } from '@m3-baseui/core';
+
+declare const datePickerTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            calendar?: tailwind_variants.ClassValue;
+            navButton?: tailwind_variants.ClassValue;
+            monthLabel?: tailwind_variants.ClassValue;
+            weekdays?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            yearGrid?: tailwind_variants.ClassValue;
+            yearButton?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            fieldIcon?: tailwind_variants.ClassValue;
+            modalBackdrop?: tailwind_variants.ClassValue;
+            modalPopup?: tailwind_variants.ClassValue;
+            modalHeader?: tailwind_variants.ClassValue;
+            modalHeadline?: tailwind_variants.ClassValue;
+            modalActions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            calendar?: tailwind_variants.ClassValue;
+            navButton?: tailwind_variants.ClassValue;
+            monthLabel?: tailwind_variants.ClassValue;
+            weekdays?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            yearGrid?: tailwind_variants.ClassValue;
+            yearButton?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            fieldIcon?: tailwind_variants.ClassValue;
+            modalBackdrop?: tailwind_variants.ClassValue;
+            modalPopup?: tailwind_variants.ClassValue;
+            modalHeader?: tailwind_variants.ClassValue;
+            modalHeadline?: tailwind_variants.ClassValue;
+            modalActions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    calendar: string[];
+    header: string[];
+    navButton: string[];
+    monthLabel: string[];
+    grid: string[];
+    weekdays: string[];
+    weekday: string[];
+    day: string[];
+    yearGrid: string[];
+    yearButton: string[];
+    field: string[];
+    input: string[];
+    fieldIcon: string[];
+    popup: string[];
+    modalBackdrop: string[];
+    modalPopup: string[];
+    modalHeader: string[];
+    modalHeadline: string[];
+    modalActions: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            calendar?: tailwind_variants.ClassValue;
+            navButton?: tailwind_variants.ClassValue;
+            monthLabel?: tailwind_variants.ClassValue;
+            weekdays?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            yearGrid?: tailwind_variants.ClassValue;
+            yearButton?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            fieldIcon?: tailwind_variants.ClassValue;
+            modalBackdrop?: tailwind_variants.ClassValue;
+            modalPopup?: tailwind_variants.ClassValue;
+            modalHeader?: tailwind_variants.ClassValue;
+            modalHeadline?: tailwind_variants.ClassValue;
+            modalActions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            calendar?: tailwind_variants.ClassValue;
+            navButton?: tailwind_variants.ClassValue;
+            monthLabel?: tailwind_variants.ClassValue;
+            weekdays?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            yearGrid?: tailwind_variants.ClassValue;
+            yearButton?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            fieldIcon?: tailwind_variants.ClassValue;
+            modalBackdrop?: tailwind_variants.ClassValue;
+            modalPopup?: tailwind_variants.ClassValue;
+            modalHeader?: tailwind_variants.ClassValue;
+            modalHeadline?: tailwind_variants.ClassValue;
+            modalActions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    calendar: string[];
+    header: string[];
+    navButton: string[];
+    monthLabel: string[];
+    grid: string[];
+    weekdays: string[];
+    weekday: string[];
+    day: string[];
+    yearGrid: string[];
+    yearButton: string[];
+    field: string[];
+    input: string[];
+    fieldIcon: string[];
+    popup: string[];
+    modalBackdrop: string[];
+    modalPopup: string[];
+    modalHeader: string[];
+    modalHeadline: string[];
+    modalActions: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    calendar: string[];
+    header: string[];
+    navButton: string[];
+    monthLabel: string[];
+    grid: string[];
+    weekdays: string[];
+    weekday: string[];
+    day: string[];
+    yearGrid: string[];
+    yearButton: string[];
+    field: string[];
+    input: string[];
+    fieldIcon: string[];
+    popup: string[];
+    modalBackdrop: string[];
+    modalPopup: string[];
+    modalHeader: string[];
+    modalHeadline: string[];
+    modalActions: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            input?: tailwind_variants.ClassValue;
+            grid?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            weekday?: tailwind_variants.ClassValue;
+            calendar?: tailwind_variants.ClassValue;
+            navButton?: tailwind_variants.ClassValue;
+            monthLabel?: tailwind_variants.ClassValue;
+            weekdays?: tailwind_variants.ClassValue;
+            day?: tailwind_variants.ClassValue;
+            yearGrid?: tailwind_variants.ClassValue;
+            yearButton?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            fieldIcon?: tailwind_variants.ClassValue;
+            modalBackdrop?: tailwind_variants.ClassValue;
+            modalPopup?: tailwind_variants.ClassValue;
+            modalHeader?: tailwind_variants.ClassValue;
+            modalHeadline?: tailwind_variants.ClassValue;
+            modalActions?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const DatePicker: ReturnType<typeof createDatePicker>;
+
+export { DatePicker, datePickerTv };

package/dist/date-picker.js

@@ -0,0 +1,151 @@
+"use client";
+import { createDatePicker } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/date-picker.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/date-picker.ts
+var datePickerTv = tv({
+  slots: {
+    calendar: ["w-[328px] max-w-full p-3 text-on-surface"],
+    header: ["flex items-center justify-between gap-2 h-12 pl-3 pr-1"],
+    navButton: [
+      "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none"
+    ],
+    monthLabel: [
+      "relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden",
+      "text-label-large text-on-surface-variant cursor-pointer outline-none",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180"
+    ],
+    grid: ["mt-2 border-collapse", "[&_td]:p-0 [&_td]:text-center"],
+    weekdays: [""],
+    weekday: ["size-12 font-normal text-body-large text-on-surface-variant"],
+    day: [
+      "relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden",
+      "text-body-large text-on-surface cursor-pointer outline-none",
+      "before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // today: 1px primary outline ring
+      "data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary",
+      // selected: primary fill, on-primary label, no state layer tint shift
+      "data-[selected]:bg-primary data-[selected]:text-on-primary",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    // weeks render as 7-col rows; force grid layout on each row
+    yearGrid: ["grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2"],
+    yearButton: [
+      "relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden",
+      "text-label-large text-on-surface-variant cursor-pointer outline-none",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "data-[selected]:bg-primary data-[selected]:text-on-primary"
+    ],
+    field: [
+      "inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]",
+      "bg-surface-container-highest text-on-surface rounded-t-extra-small",
+      "border-b border-on-surface-variant"
+    ],
+    input: [
+      "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
+      "text-body-large text-on-surface placeholder:text-on-surface-variant"
+    ],
+    fieldIcon: [
+      "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    popup: [
+      "bg-surface-container-high text-on-surface rounded-large shadow-level2",
+      "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",
+      "focus:outline-none"
+    ],
+    modalBackdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-200 ease-standard",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    modalPopup: [
+      "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+      "w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
+      "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
+      "flex flex-col",
+      "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"
+    ],
+    modalHeader: ["px-6 pt-4 text-label-medium text-on-surface-variant m-0"],
+    modalHeadline: ["px-6 pt-1 pb-4 text-headline-large text-on-surface m-0"],
+    modalActions: ["flex justify-end gap-2 px-6 pb-4 pt-2"]
+  }
+});
+var dp = datePickerTv();
+var DatePicker = createDatePicker({
+  calendar: dp.calendar(),
+  header: dp.header(),
+  navButton: dp.navButton(),
+  monthLabel: dp.monthLabel(),
+  grid: dp.grid(),
+  weekdays: dp.weekdays(),
+  weekday: dp.weekday(),
+  day: dp.day(),
+  yearGrid: dp.yearGrid(),
+  yearButton: dp.yearButton(),
+  field: dp.field(),
+  input: dp.input(),
+  fieldIcon: dp.fieldIcon(),
+  popup: dp.popup(),
+  modalBackdrop: dp.modalBackdrop(),
+  modalPopup: dp.modalPopup(),
+  modalHeader: dp.modalHeader(),
+  modalHeadline: dp.modalHeadline(),
+  modalActions: dp.modalActions()
+});
+
+export { DatePicker, datePickerTv };
+//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/dist/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/date-picker.ts"],"names":["baseTv"],"mappings":"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","file":"date-picker.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 * date-picker.ts — Tailwind classes for the M3 Date picker.\n *\n * The month-grid Calendar plus its two surfaces: a docked Popover\n * (surface-container-high, elevation 2, large corners) and a modal Dialog\n * (surface-container-high, elevation 3, extra-large corners). Day cells carry a\n * circular `before:` state layer keyed to hover; the selected day fills with\n * primary. Same DOM + ripple as the VE build.\n */\nimport { createDatePicker } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const datePickerTv = tv({\n  slots: {\n    calendar: ['w-[328px] max-w-full p-3 text-on-surface'],\n    header: ['flex items-center justify-between gap-2 h-12 pl-3 pr-1'],\n    navButton: [\n      'relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none',\n    ],\n    monthLabel: [\n      'relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      '[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180',\n    ],\n    grid: ['mt-2 border-collapse', '[&_td]:p-0 [&_td]:text-center'],\n    weekdays: [''],\n    weekday: ['size-12 font-normal text-body-large text-on-surface-variant'],\n    day: [\n      'relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden',\n      'text-body-large text-on-surface cursor-pointer outline-none',\n      'before:absolute before:inset-0 before:rounded-full 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      // today: 1px primary outline ring\n      'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary',\n      // selected: primary fill, on-primary label, no state layer tint shift\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n    // weeks render as 7-col rows; force grid layout on each row\n    yearGrid: ['grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2'],\n    yearButton: [\n      'relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n\n    field: [\n      'inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]',\n      'bg-surface-container-highest text-on-surface rounded-t-extra-small',\n      'border-b border-on-surface-variant',\n    ],\n    input: [\n      'flex-1 min-w-0 h-full bg-transparent border-0 outline-none',\n      'text-body-large text-on-surface placeholder:text-on-surface-variant',\n    ],\n    fieldIcon: [\n      'relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n    popup: [\n      'bg-surface-container-high text-on-surface rounded-large shadow-level2',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n      'focus:outline-none',\n    ],\n\n    modalBackdrop: [\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    modalPopup: [\n      'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n      'w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n      'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n      'flex flex-col',\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    modalHeader: ['px-6 pt-4 text-label-medium text-on-surface-variant m-0'],\n    modalHeadline: ['px-6 pt-1 pb-4 text-headline-large text-on-surface m-0'],\n    modalActions: ['flex justify-end gap-2 px-6 pb-4 pt-2'],\n  },\n});\n\nconst dp = datePickerTv();\nexport const DatePicker: ReturnType<typeof createDatePicker> = createDatePicker({\n  calendar: dp.calendar(),\n  header: dp.header(),\n  navButton: dp.navButton(),\n  monthLabel: dp.monthLabel(),\n  grid: dp.grid(),\n  weekdays: dp.weekdays(),\n  weekday: dp.weekday(),\n  day: dp.day(),\n  yearGrid: dp.yearGrid(),\n  yearButton: dp.yearButton(),\n  field: dp.field(),\n  input: dp.input(),\n  fieldIcon: dp.fieldIcon(),\n  popup: dp.popup(),\n  modalBackdrop: dp.modalBackdrop(),\n  modalPopup: dp.modalPopup(),\n  modalHeader: dp.modalHeader(),\n  modalHeadline: dp.modalHeadline(),\n  modalActions: dp.modalActions(),\n});\n"]}

package/dist/fab-menu.d.ts

@@ -0,0 +1,132 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { FabMenuItemProps, FabMenuTriggerProps } from '@m3-baseui/core';
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const fabMenuTv: tailwind_variants.TVReturnType<{
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}, {
+    popup: string[];
+    item: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}, {
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}>, {
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}, {
+    popup: string[];
+    item: string[];
+}, tailwind_variants.TVReturnType<{
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}, {
+    popup: string[];
+    item: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}, {
+    color: {
+        surface: {
+            item: string;
+        };
+        primary: {
+            item: string;
+        };
+        secondary: {
+            item: string;
+        };
+        tertiary: {
+            item: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const FabMenu: {
+    Root: <Payload>(props: _base_ui_react.MenuRoot.Props<Payload>) => react.JSX.Element;
+    Trigger: react.ForwardRefExoticComponent<_m3_baseui_core.FabMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    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>>;
+    Item: react.ForwardRefExoticComponent<_m3_baseui_core.FabMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { FabMenu, fabMenuTv };

package/dist/fab-menu.js

@@ -0,0 +1,116 @@
+"use client";
+import { createFab, createFabMenu } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/fab-menu.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+var fabTv = tv$1({
+  base: [
+    "relative inline-flex items-center justify-center box-border overflow-hidden",
+    "border-0 cursor-pointer select-none outline-none",
+    "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)]",
+    "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+    "active:before:opacity-[var(--md-sys-state-pressed)]",
+    "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+    // M3 discourages disabled FABs (material-web removed the state). When native
+    // disabled is used, apply the same container/label tokens as filled buttons.
+    "disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0",
+    "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+    "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0",
+    "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"
+    },
+    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"
+    }
+  },
+  defaultVariants: {
+    size: "regular",
+    color: "surface"
+  }
+});
+createFab(({ size, color }) => fabTv({ size, color }));
+
+// src/fab-menu.ts
+var fabMenuTv = tv({
+  slots: {
+    popup: [
+      "flex flex-col items-end gap-2 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",
+      "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)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 leading icon (24dp).
+      "[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6",
+      // M3 discourages disabled FABs; when used, match the filled-button tokens
+      // (per-token, not a blanket opacity) and suppress the state layer.
+      "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0",
+      "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+    ]
+  },
+  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" }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+var FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {
+  popup: fabMenuTv().popup(),
+  item: (color) => fabMenuTv({ color }).item()
+});
+
+export { FabMenu, fabMenuTv };
+//# sourceMappingURL=fab-menu.js.map
+//# sourceMappingURL=fab-menu.js.map

package/dist/fab-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/fab.ts","../src/fab-menu.ts"],"names":["baseTv","tv"],"mappings":"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","file":"fab-menu.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 FAB.\n *\n * Four sizes + four container colors, elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The pointer ripple is added by the\n * 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    size: {\n      small: 'size-10 rounded-medium [&_svg]:size-6',\n      regular: 'size-14 rounded-large [&_svg]:size-6',\n      large: 'size-24 rounded-extra-large [&_svg]:size-9',\n      extended: 'h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6',\n    },\n    color: {\n      surface: 'bg-surface-container-high text-primary',\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  defaultVariants: {\n    size: 'regular',\n    color: 'surface',\n  },\n});\n\nexport const Fab = createFab(({ size, color }) => fabTv({ size, color }));\nexport type { FabProps, FabSize, FabColor } from '@m3-baseui/core';\n","/**\n * fab-menu.ts — tailwind-variants for the M3 FAB menu.\n *\n * The popup stacks the actions in a right-aligned column with the M3 menu\n * enter/exit motion; each item is a 56dp full-corner pill (elevation level3,\n * level4 on hover) with a currentColor state-layer `::before`, a 24dp leading\n * icon slot and a label-large label. The trigger reuses the FAB resolver. Same\n * DOM + ripple as the VE build.\n */\nimport { createFabMenu } from '@m3-baseui/core';\nimport { tv } from './tv';\nimport { fabTv } from './fab';\n\nexport const fabMenuTv = tv({\n  slots: {\n    popup: [\n      'flex flex-col items-end gap-2 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-3 h-14 px-4 overflow-hidden box-border',\n      'cursor-pointer select-none outline-none rounded-full text-label-large',\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      surface: { item: 'bg-surface-container-high text-primary' },\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

@@ -25,7 +25,10 @@ var widthCompounds = Object.entries(WIDTHS).flatMap(
 var iconButton = tv({
   base: [
     "relative inline-flex items-center justify-center shrink-0",
-    "rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent",
+    // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.
+    // The state layer is already rounded (before:rounded-[inherit]); the ripple
+    // self-clips.
+    "rounded-full cursor-pointer select-none border-0 bg-transparent",
     "transition-[box-shadow,background-color,color] duration-200 ease-standard",
     // State layer overlay
     "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",