@m3-baseui/react-tailwind 1.0.3 → 1.1.0

package/dist/bottom-app-bar.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { BottomAppBarProps } from '@m3-baseui/core';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+
+declare const bottomAppBarTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            fab?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            fab?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    actions: string;
+    fab: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            fab?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            fab?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    actions: string;
+    fab: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    actions: string;
+    fab: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            actions?: tailwind_variants.ClassValue;
+            fab?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const BottomAppBar: react.ForwardRefExoticComponent<_m3_baseui_core.BottomAppBarOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+export { BottomAppBar, bottomAppBarTv };

package/dist/bottom-app-bar.js

@@ -0,0 +1,51 @@
+"use client";
+import { createBottomAppBar } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/bottom-app-bar.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/bottom-app-bar.ts
+var bottomAppBarTv = tv({
+  slots: {
+    root: "flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant",
+    actions: "flex items-center gap-1 pl-2 [&_svg]:size-6",
+    fab: "flex items-center pr-3"
+  }
+});
+var s = bottomAppBarTv();
+var BottomAppBar = createBottomAppBar({
+  root: s.root(),
+  actions: s.actions(),
+  fab: s.fab()
+});
+
+export { BottomAppBar, bottomAppBarTv };
+//# sourceMappingURL=bottom-app-bar.js.map
+//# sourceMappingURL=bottom-app-bar.js.map

package/dist/bottom-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/bottom-app-bar.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AClCI,IAAM,iBAAiB,EAAA,CAAG;AAAA,EAC/B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,4GAAA;AAAA,IACN,OAAA,EAAS,6CAAA;AAAA,IACT,GAAA,EAAK;AAAA;AAET,CAAC;AAED,IAAM,IAAI,cAAA,EAAe;AAClB,IAAM,eAAe,kBAAA,CAAmB;AAAA,EAC7C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,GAAA,EAAK,EAAE,GAAA;AACT,CAAC","file":"bottom-app-bar.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * bottom-app-bar.ts — tailwind-variants slots for the M3 BottomAppBar.\n *\n * An 80dp `surface-container` `role=\"toolbar\"`: leading action icons + an\n * optional trailing FAB. Same DOM as the VE build.\n */\nimport { createBottomAppBar } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const bottomAppBarTv = tv({\n  slots: {\n    root: 'flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant',\n    actions: 'flex items-center gap-1 pl-2 [&_svg]:size-6',\n    fab: 'flex items-center pr-3',\n  },\n});\n\nconst s = bottomAppBarTv();\nexport const BottomAppBar = createBottomAppBar({\n  root: s.root(),\n  actions: s.actions(),\n  fab: s.fab(),\n});\nexport type { BottomAppBarProps } from '@m3-baseui/core';\n"]}

package/dist/bottom-sheet.d.ts

@@ -0,0 +1,101 @@
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { BottomSheetVariant } from '@m3-baseui/core';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+
+declare const bottomSheetTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    handle: string;
+    title: string[];
+    description: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    handle: string;
+    title: string[];
+    description: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    handle: string;
+    title: string[];
+    description: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            handle?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const BottomSheet: {
+    Root: {
+        ({ variant, ...props }: _m3_baseui_core.BottomSheetOwnProps & Omit<_base_ui_react.DrawerRoot.Props<unknown>, "modal" | "swipeDirection">): React.JSX.Element;
+        displayName: string;
+    };
+    Trigger: _base_ui_react.DrawerTrigger;
+    Portal: _base_ui_react.DrawerPortal;
+    Backdrop: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerBackdropProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Viewport: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Handle: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerTitleProps, "ref"> & react.RefAttributes<unknown>>;
+    Description: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerDescriptionProps, "ref"> & react.RefAttributes<unknown>>;
+    Close: _base_ui_react.DrawerClose;
+};
+
+export { BottomSheet, bottomSheetTv };

package/dist/bottom-sheet.js

@@ -0,0 +1,70 @@
+"use client";
+import { createBottomSheet } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/bottom-sheet.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/bottom-sheet.ts
+var bottomSheetTv = tv({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-300 ease-emphasized",
+      "data-[swiping]:transition-none",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    viewport: "fixed inset-0 z-50 flex items-end justify-center",
+    popup: [
+      "box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]",
+      "overflow-y-auto overscroll-contain touch-auto outline-none",
+      "pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1",
+      "[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]",
+      "transition-transform duration-300 ease-emphasized",
+      "data-[swiping]:select-none",
+      "data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]"
+    ],
+    handle: "mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40",
+    title: ["m-0 px-6 pt-2 text-title-large text-on-surface"],
+    description: ["m-0 px-6 pt-1 text-body-medium text-on-surface-variant"]
+  }
+});
+var s = bottomSheetTv();
+var BottomSheet = createBottomSheet({
+  backdrop: s.backdrop(),
+  viewport: s.viewport(),
+  popup: s.popup(),
+  handle: s.handle(),
+  title: s.title(),
+  description: s.description()
+});
+
+export { BottomSheet, bottomSheetTv };
+//# sourceMappingURL=bottom-sheet.js.map
+//# sourceMappingURL=bottom-sheet.js.map

package/dist/bottom-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/bottom-sheet.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC/BI,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,iDAAA;AAAA,MACA,gCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,kDAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,2DAAA;AAAA,MACA,4DAAA;AAAA,MACA,mFAAA;AAAA,MACA,8FAAA;AAAA,MACA,mDAAA;AAAA,MACA,4BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,0EAAA;AAAA,IACR,KAAA,EAAO,CAAC,gDAAgD,CAAA;AAAA,IACxD,WAAA,EAAa,CAAC,wDAAwD;AAAA;AAE1E,CAAC;AAED,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA;AACjB,CAAC","file":"bottom-sheet.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * bottom-sheet.ts — tailwind-variants slots for the M3 Bottom sheet.\n *\n * A `surface-container-low` surface docked to the bottom edge with extra-large\n * (28dp) top corners, elevation 1, and a 32×4dp drag handle. The scrim fades on\n * Base UI's data-[starting-style] / data-[ending-style]; the popup slides via the\n * drawer's `--drawer-swipe-movement-y` so the swipe gesture tracks the finger.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createBottomSheet } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const bottomSheetTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-300 ease-emphasized',\n      'data-[swiping]:transition-none',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    viewport: 'fixed inset-0 z-50 flex items-end justify-center',\n    popup: [\n      'box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]',\n      'overflow-y-auto overscroll-contain touch-auto outline-none',\n      'pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1',\n      '[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]',\n      'transition-transform duration-300 ease-emphasized',\n      'data-[swiping]:select-none',\n      'data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]',\n    ],\n    handle: 'mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40',\n    title: ['m-0 px-6 pt-2 text-title-large text-on-surface'],\n    description: ['m-0 px-6 pt-1 text-body-medium text-on-surface-variant'],\n  },\n});\n\nconst s = bottomSheetTv();\nexport const BottomSheet = createBottomSheet({\n  backdrop: s.backdrop(),\n  viewport: s.viewport(),\n  popup: s.popup(),\n  handle: s.handle(),\n  title: s.title(),\n  description: s.description(),\n});\nexport type { BottomSheetVariant } from '@m3-baseui/core';\n"]}

package/dist/card.js

@@ -43,6 +43,8 @@ var cardTv = tv({
     interactive: {
       true: [
         "group overflow-hidden cursor-pointer select-none text-left w-full outline-none",
+        // Animate the elevation lift/settle to match the VE box-shadow transition.
+        "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)]",

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tv.ts","../src/card.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,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM,oDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,wCAAA;AAAA,MACV,MAAA,EAAQ,8BAAA;AAAA,MACR,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gFAAA;AAAA,QACA,4IAAA;AAAA,QACA,kDAAA;AAAA,QACA,0DAAA;AAAA,QACA,qDAAA;AAAA,QACA,4FAAA;AAAA;AAAA,QAEA,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,MAAA,CAAO,EAAE,OAAA,EAAS,WAAA,EAAa;AACrE,CAAC","file":"card.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 * card.ts — tailwind-variants slots for the M3 Card.\n *\n * 12dp corners. `elevated` is surface-container-low + level1, `filled` is\n * surface-container-highest (level0), `outlined` is surface + outline-variant.\n * Interactive cards add the `currentColor` state-layer `::before` (the pointer\n * ripple is added by the factory), a focus ring and per-token disabled dimming.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const cardTv = tv({\n  base: 'relative box-border rounded-medium text-on-surface',\n  variants: {\n    variant: {\n      elevated: 'bg-surface-container-low shadow-level1',\n      filled: 'bg-surface-container-highest',\n      outlined: 'bg-surface border border-outline-variant',\n    },\n    interactive: {\n      true: [\n        'group overflow-hidden cursor-pointer select-none text-left w-full 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        'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n        // M3 disabled: drop the shadow + state layer, dim the content per-token.\n        'disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38',\n        'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38',\n      ],\n      false: '',\n    },\n  },\n  compoundVariants: [\n    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.\n    {\n      variant: 'elevated',\n      interactive: true,\n      class: 'hover:shadow-level2 active:shadow-level1',\n    },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    interactive: false,\n  },\n});\n\nexport const Card = createCard({\n  root: ({ variant, interactive }) => cardTv({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../src/tv.ts","../src/card.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,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM,oDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,wCAAA;AAAA,MACV,MAAA,EAAQ,8BAAA;AAAA,MACR,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gFAAA;AAAA;AAAA,QAEA,8CAAA;AAAA,QACA,4IAAA;AAAA,QACA,kDAAA;AAAA,QACA,0DAAA;AAAA,QACA,qDAAA;AAAA,QACA,4FAAA;AAAA;AAAA,QAEA,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,MAAA,CAAO,EAAE,OAAA,EAAS,WAAA,EAAa;AACrE,CAAC","file":"card.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 * card.ts — tailwind-variants slots for the M3 Card.\n *\n * 12dp corners. `elevated` is surface-container-low + level1, `filled` is\n * surface-container-highest (level0), `outlined` is surface + outline-variant.\n * Interactive cards add the `currentColor` state-layer `::before` (the pointer\n * ripple is added by the factory), a focus ring and per-token disabled dimming.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const cardTv = tv({\n  base: 'relative box-border rounded-medium text-on-surface',\n  variants: {\n    variant: {\n      elevated: 'bg-surface-container-low shadow-level1',\n      filled: 'bg-surface-container-highest',\n      outlined: 'bg-surface border border-outline-variant',\n    },\n    interactive: {\n      true: [\n        'group overflow-hidden cursor-pointer select-none text-left w-full outline-none',\n        // Animate the elevation lift/settle to match the VE box-shadow transition.\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        'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n        // M3 disabled: drop the shadow + state layer, dim the content per-token.\n        'disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38',\n        'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38',\n      ],\n      false: '',\n    },\n  },\n  compoundVariants: [\n    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.\n    {\n      variant: 'elevated',\n      interactive: true,\n      class: 'hover:shadow-level2 active:shadow-level1',\n    },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    interactive: false,\n  },\n});\n\nexport const Card = createCard({\n  root: ({ variant, interactive }) => cardTv({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}

package/dist/checkbox.d.ts

@@ -6,16 +6,16 @@ import * as tailwind_variants from 'tailwind-variants';
 declare const checkboxTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
@@ -26,16 +26,16 @@ declare const checkboxTv: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };
@@ -50,8 +50,8 @@ declare const checkboxTv: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            icon?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
             indicator?: tailwind_variants.ClassValue;
         };
     };

package/dist/divider.js

@@ -19,7 +19,8 @@ var dividerTv = tv({
   compoundVariants: [
     { orientation: "horizontal", inset: "inset", class: "ms-4" },
     { orientation: "horizontal", inset: "middle", class: "mx-4" },
-    { orientation: "vertical", inset: "inset", class: "mt-4" },
+    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.
+    { orientation: "vertical", inset: "inset", class: "[margin-block-start:1rem]" },
     { orientation: "vertical", inset: "middle", class: "my-4" }
   ],
   defaultVariants: {

package/dist/divider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/divider.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,mDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,aAAA;AAAA,MACZ,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IAC3D,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA,EAAO;AAAA,IAC5D,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IACzD,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA;AAAO,GAC5D;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,KAAA,EAAO,WAAA,EAAY,KAAM,SAAA,CAAU,EAAE,KAAA,EAAO,WAAA,EAAa,CAAC","file":"divider.js","sourcesContent":["/**\n * divider.ts — tailwind-variants for the M3 Divider.\n *\n * 1dp `outline-variant` rule. `self-stretch` fills the cross axis in flex\n * layouts; horizontal is 1dp tall, vertical 1dp wide. The inset variants add a\n * 16dp leading (`inset`) or both-ends (`middle`) margin along the main axis.\n * Same DOM + `role=\"separator\"` as the VE build.\n */\nimport { createDivider } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const dividerTv = tv({\n  base: 'shrink-0 self-stretch border-0 bg-outline-variant',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-auto',\n      vertical: 'w-px h-auto',\n    },\n    inset: {\n      full: '',\n      inset: '',\n      middle: '',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', inset: 'inset', class: 'ms-4' },\n    { orientation: 'horizontal', inset: 'middle', class: 'mx-4' },\n    { orientation: 'vertical', inset: 'inset', class: 'mt-4' },\n    { orientation: 'vertical', inset: 'middle', class: 'my-4' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    inset: 'full',\n  },\n});\n\nexport const Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));\nexport type { DividerProps, DividerInset, DividerOrientation } from '@m3-baseui/core';\n"]}
+{"version":3,"sources":["../src/divider.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,mDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,aAAA;AAAA,MACZ,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IAC3D,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA,EAAO;AAAA;AAAA,IAE5D,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,OAAO,2BAAA,EAA4B;AAAA,IAC9E,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA;AAAO,GAC5D;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,KAAA,EAAO,WAAA,EAAY,KAAM,SAAA,CAAU,EAAE,KAAA,EAAO,WAAA,EAAa,CAAC","file":"divider.js","sourcesContent":["/**\n * divider.ts — tailwind-variants for the M3 Divider.\n *\n * 1dp `outline-variant` rule. `self-stretch` fills the cross axis in flex\n * layouts; horizontal is 1dp tall, vertical 1dp wide. The inset variants add a\n * 16dp leading (`inset`) or both-ends (`middle`) margin along the main axis.\n * Same DOM + `role=\"separator\"` as the VE build.\n */\nimport { createDivider } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const dividerTv = tv({\n  base: 'shrink-0 self-stretch border-0 bg-outline-variant',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-auto',\n      vertical: 'w-px h-auto',\n    },\n    inset: {\n      full: '',\n      inset: '',\n      middle: '',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', inset: 'inset', class: 'ms-4' },\n    { orientation: 'horizontal', inset: 'middle', class: 'mx-4' },\n    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.\n    { orientation: 'vertical', inset: 'inset', class: '[margin-block-start:1rem]' },\n    { orientation: 'vertical', inset: 'middle', class: 'my-4' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    inset: 'full',\n  },\n});\n\nexport const Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));\nexport type { DividerProps, DividerInset, DividerOrientation } from '@m3-baseui/core';\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