@m3-baseui/react-tailwind 1.0.0

package/dist/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/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,kFAAA;AAAA,IACT,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":"list.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: 'flex items-center justify-center shrink-0 text-on-surface-variant [&_svg]:size-6',\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 type { ListItemProps, ListItemLines } from '@m3-baseui/core';\n"]}

package/dist/menu.d.ts

@@ -0,0 +1,119 @@
+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';
+
+declare const menuTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            separator?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            submenuTrigger?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            separator?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            submenuTrigger?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    popup: string[];
+    item: string[];
+    separator: string[];
+    groupLabel: string[];
+    submenuTrigger: 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;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            submenuTrigger?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            separator?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            submenuTrigger?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    popup: string[];
+    item: string[];
+    separator: string[];
+    groupLabel: string[];
+    submenuTrigger: string[];
+    checkboxItem: string[];
+    radioItem: string[];
+    itemIndicator: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    popup: string[];
+    item: string[];
+    separator: string[];
+    groupLabel: string[];
+    submenuTrigger: 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;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            submenuTrigger?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+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>>;
+    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>>;
+    GroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    SubmenuRoot: typeof _base_ui_react.MenuSubmenuRoot;
+    SubmenuTrigger: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuSubmenuTriggerProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+    RadioGroup: react.NamedExoticComponent<Omit<_base_ui_react.ContextMenuRadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuCheckboxItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+    RadioItem: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuRadioItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+    CheckboxItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuCheckboxItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    RadioItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuRadioItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Check: () => React.JSX.Element;
+};
+
+export { Menu, menuTv };

package/dist/menu.js

@@ -0,0 +1,114 @@
+"use client";
+import { createMenu } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/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] }]
+      }
+    }
+  }
+});
+
+// src/menu.ts
+var menuTv = tv({
+  slots: {
+    popup: [
+      "min-w-[112px] max-w-[280px] py-2",
+      "bg-surface-container text-on-surface rounded-extra-small 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"
+    ],
+    item: [
+      "relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
+      "text-label-large text-on-surface",
+      "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 disabled (per-token, not a blanket fade): label + leading/trailing
+      // icon on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38] data-[disabled]:[&_[data-slot=menu-trailing]]:text-on-surface/[0.38]",
+      // M3 leading icon (24dp) + trailing supporting text (shortcut/meta).
+      "[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6",
+      "[&_[data-slot=menu-trailing]]:ml-auto [&_[data-slot=menu-trailing]]:pl-4 [&_[data-slot=menu-trailing]]:text-label-large [&_[data-slot=menu-trailing]]:text-on-surface-variant"
+    ],
+    separator: ["my-2 h-px border-0 bg-outline-variant"],
+    groupLabel: ["px-3 py-2 text-label-small text-on-surface-variant"],
+    // Submenu trigger: item look + trailing chevron, highlighted while open.
+    submenuTrigger: [
+      "relative flex items-center justify-between gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
+      "text-label-large text-on-surface",
+      "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)]",
+      "data-[popup-open]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token): label + leading icon on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38]",
+      "[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6"
+    ],
+    // Selectable items: 24dp leading indicator column + label.
+    checkboxItem: [
+      "group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden",
+      "cursor-pointer select-none outline-none text-label-large text-on-surface",
+      "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 disabled (per-token): label on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    radioItem: [
+      "group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden",
+      "cursor-pointer select-none outline-none text-label-large text-on-surface",
+      "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 disabled (per-token): label on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    itemIndicator: "inline-flex items-center justify-center text-on-surface invisible group-data-[checked]:visible group-data-[disabled]:text-on-surface/[0.38]"
+  }
+});
+var m = menuTv();
+var Menu = createMenu({
+  popup: m.popup(),
+  item: m.item(),
+  separator: m.separator(),
+  groupLabel: m.groupLabel(),
+  submenuTrigger: m.submenuTrigger(),
+  checkboxItem: m.checkboxItem(),
+  radioItem: m.radioItem(),
+  itemIndicator: m.itemIndicator()
+});
+
+export { Menu, menuTv };
+//# sourceMappingURL=menu.js.map
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/menu.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;ACjCI,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,kCAAA;AAAA,MACA,wEAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA,+BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,oGAAA;AAAA,MACA,kCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA;AAAA,MAGA,6GAAA;AAAA,MACA,0IAAA;AAAA;AAAA,MAEA,uIAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,CAAC,uCAAuC,CAAA;AAAA,IACnD,UAAA,EAAY,CAAC,oDAAoD,CAAA;AAAA;AAAA,IAEjE,cAAA,EAAgB;AAAA,MACd,oHAAA;AAAA,MACA,kCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,8DAAA;AAAA,MACA,qDAAA;AAAA;AAAA,MAEA,6GAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,YAAA,EAAc;AAAA,MACZ,uFAAA;AAAA,MACA,0EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,uFAAA;AAAA,MACA,0EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,aAAA,EACE;AAAA;AAEN,CAAC;AAED,IAAM,IAAI,MAAA,EAAO;AACV,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,YAAA,EAAc,EAAE,YAAA,EAAa;AAAA,EAC7B,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,aAAA,EAAe,EAAE,aAAA;AACnB,CAAC","file":"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 * menu.ts — Tailwind classes for the M3 Menu.\n *\n * surface-container popup (elevation 2, extra-small corners); 48dp items with a\n * `before:` state layer keyed to hover + Base UI's data-[highlighted]. Same DOM\n * + ripple as the VE build.\n */\nimport { createMenu } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const menuTv = tv({\n  slots: {\n    popup: [\n      'min-w-[112px] max-w-[280px] py-2',\n      'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n      'focus:outline-none',\n    ],\n    item: [\n      'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token, not a blanket fade): label + leading/trailing\n      // icon on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38] data-[disabled]:[&_[data-slot=menu-trailing]]:text-on-surface/[0.38]',\n      // M3 leading icon (24dp) + trailing supporting text (shortcut/meta).\n      '[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6',\n      '[&_[data-slot=menu-trailing]]:ml-auto [&_[data-slot=menu-trailing]]:pl-4 [&_[data-slot=menu-trailing]]:text-label-large [&_[data-slot=menu-trailing]]:text-on-surface-variant',\n    ],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: ['px-3 py-2 text-label-small text-on-surface-variant'],\n    // Submenu trigger: item look + trailing chevron, highlighted while open.\n    submenuTrigger: [\n      'relative flex items-center justify-between gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[popup-open]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token): label + leading icon on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38]',\n      '[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6',\n    ],\n    // Selectable items: 24dp leading indicator column + label.\n    checkboxItem: [\n      'group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden',\n      'cursor-pointer select-none outline-none text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token): label on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n    radioItem: [\n      'group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden',\n      'cursor-pointer select-none outline-none text-label-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token): label on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n    itemIndicator:\n      'inline-flex items-center justify-center text-on-surface invisible group-data-[checked]:visible group-data-[disabled]:text-on-surface/[0.38]',\n  },\n});\n\nconst m = menuTv();\nexport const Menu = createMenu({\n  popup: m.popup(),\n  item: m.item(),\n  separator: m.separator(),\n  groupLabel: m.groupLabel(),\n  submenuTrigger: m.submenuTrigger(),\n  checkboxItem: m.checkboxItem(),\n  radioItem: m.radioItem(),\n  itemIndicator: m.itemIndicator(),\n});\n"]}

package/dist/navigation-bar.d.ts

@@ -0,0 +1,91 @@
+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';
+
+declare const navigationBarTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string[];
+    iconWrap: string;
+    indicator: string[];
+    icon: string[];
+    label: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string[];
+    iconWrap: string;
+    indicator: string[];
+    icon: string[];
+    label: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    item: string[];
+    iconWrap: string;
+    indicator: string[];
+    icon: string[];
+    label: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const NavigationBar: {
+    Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToggleGroup.Props<string> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.Toggle.Props<string> & react.RefAttributes<HTMLButtonElement>, "ref">, "children"> & {
+        icon?: React.ReactNode;
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { NavigationBar, navigationBarTv };

package/dist/navigation-bar.js

@@ -0,0 +1,48 @@
+"use client";
+import { createNavigationBar } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/navigation-bar.ts
+var navigationBarTv = tv({
+  slots: {
+    root: "flex items-stretch justify-around w-full h-20 bg-surface-container",
+    item: [
+      "group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4",
+      "bg-transparent border-0 cursor-pointer select-none outline-none",
+      "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none"
+    ],
+    iconWrap: "relative flex items-center justify-center w-16 h-8",
+    indicator: [
+      "absolute inset-0 rounded-full bg-transparent overflow-hidden",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:bg-secondary-container",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "group-hover:before:opacity-[var(--md-sys-state-hover)]",
+      "group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "group-active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    icon: [
+      "relative flex items-center justify-center text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:text-on-secondary-container"
+    ],
+    label: [
+      "text-label-medium text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold"
+    ]
+  }
+});
+var s = navigationBarTv();
+var NavigationBar = createNavigationBar({
+  root: s.root(),
+  item: s.item(),
+  iconWrap: s.iconWrap(),
+  indicator: s.indicator(),
+  icon: s.icon(),
+  label: s.label()
+});
+
+export { NavigationBar, navigationBarTv };
+//# sourceMappingURL=navigation-bar.js.map
+//# sourceMappingURL=navigation-bar.js.map

package/dist/navigation-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navigation-bar.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,kBAAkB,EAAA,CAAG;AAAA,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,oEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA,iEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,eAAA,EAAgB;AACnB,IAAM,gBAAgB,mBAAA,CAAoB;AAAA,EAC/C,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"navigation-bar.js","sourcesContent":["/**\n * navigation-bar.ts — tailwind-variants slots for the M3 NavigationBar.\n *\n * 80dp bar on surface-container. The selected item surfaces `data-pressed`\n * (Base UI Toggle); the pill, icon and label colors key off it via the `group`\n * on each item. State layer is the pill `::before`; the pointer ripple is added\n * by the factory. Same DOM as the VE build.\n */\nimport { createNavigationBar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const navigationBarTv = tv({\n  slots: {\n    root: 'flex items-stretch justify-around w-full h-20 bg-surface-container',\n    item: [\n      'group relative flex flex-1 flex-col items-center justify-center gap-1 px-1 pt-3 pb-4',\n      'bg-transparent border-0 cursor-pointer select-none outline-none',\n      'data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none',\n    ],\n    iconWrap: 'relative flex items-center justify-center w-16 h-8',\n    indicator: [\n      'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:bg-secondary-container',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n      'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n    icon: [\n      'relative flex items-center justify-center text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:text-on-secondary-container',\n    ],\n    label: [\n      'text-label-medium text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n    ],\n  },\n});\n\nconst s = navigationBarTv();\nexport const NavigationBar = createNavigationBar({\n  root: s.root(),\n  item: s.item(),\n  iconWrap: s.iconWrap(),\n  indicator: s.indicator(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

package/dist/navigation-drawer.d.ts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { NavigationDrawerVariant } from '@m3-baseui/core';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const navigationDrawerTv: tailwind_variants.TVReturnType<{
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    headline: string;
+    item: string[];
+    leading: string;
+    label: string;
+    trailing: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}>, {
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    headline: string;
+    item: string[];
+    leading: string;
+    label: string;
+    trailing: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    headline: string;
+    item: string[];
+    leading: string;
+    label: string;
+    trailing: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        standard: {};
+        modal: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const NavigationDrawer: {
+    Root: react.ForwardRefExoticComponent<_m3_baseui_core.NavigationDrawerOwnProps & react.HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+    Headline: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+    Item: react.ForwardRefExoticComponent<_m3_baseui_core.NavigationDrawerItemOwnProps & Omit<react.HTMLAttributes<HTMLElement>, "color"> & {
+        href?: string;
+    } & react.RefAttributes<HTMLElement>>;
+};
+
+export { NavigationDrawer, navigationDrawerTv };

package/dist/navigation-drawer.js

@@ -0,0 +1,78 @@
+"use client";
+import { createNavigationDrawer } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/navigation-drawer.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/navigation-drawer.ts
+var navigationDrawerTv = tv({
+  slots: {
+    root: "flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface",
+    headline: "px-4 pt-4 pb-1 text-title-small text-on-surface-variant",
+    item: [
+      "group relative flex w-full items-center gap-3 box-border h-14 px-4 rounded-full text-left",
+      "bg-transparent border-0 text-on-surface-variant no-underline cursor-pointer select-none overflow-hidden outline-none",
+      "text-label-large",
+      "transition-colors 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-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38",
+      "disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38"
+    ],
+    leading: "flex items-center justify-center shrink-0 [&_svg]:size-6",
+    label: "flex-1 min-w-0 truncate",
+    trailing: "flex items-center shrink-0 text-label-small"
+  },
+  variants: {
+    variant: {
+      standard: {},
+      modal: { root: "shadow-level1 rounded-e-large" }
+    }
+  },
+  defaultVariants: {
+    variant: "standard"
+  }
+});
+var s = navigationDrawerTv();
+var NavigationDrawer = createNavigationDrawer({
+  root: ({ variant }) => navigationDrawerTv({ variant }).root(),
+  headline: s.headline(),
+  item: s.item(),
+  leading: s.leading(),
+  label: s.label(),
+  trailing: s.trailing()
+});
+
+export { NavigationDrawer, navigationDrawerTv };
+//# sourceMappingURL=navigation-drawer.js.map
+//# sourceMappingURL=navigation-drawer.js.map

package/dist/navigation-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/navigation-drawer.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,IACL,IAAA,EAAM,uFAAA;AAAA,IACN,QAAA,EAAU,yDAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,2FAAA;AAAA,MACA,sHAAA;AAAA,MACA,kBAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,oFAAA;AAAA,MACA,yGAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,0DAAA;AAAA,IACT,KAAA,EAAO,yBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,UAAU,EAAC;AAAA,MACX,KAAA,EAAO,EAAE,IAAA,EAAM,+BAAA;AAAgC;AACjD,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAED,IAAM,IAAI,kBAAA,EAAmB;AACtB,IAAM,mBAAmB,sBAAA,CAAuB;AAAA,EACrD,IAAA,EAAM,CAAC,EAAE,OAAA,EAAQ,KAAM,mBAAmB,EAAE,OAAA,EAAS,CAAA,CAAE,IAAA,EAAK;AAAA,EAC5D,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,QAAA,EAAU,EAAE,QAAA;AACd,CAAC","file":"navigation-drawer.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 * navigation-drawer.ts — tailwind-variants slots for the M3 NavigationDrawer.\n *\n * A 360dp `surface-container-low` panel. `standard` is inline; `modal` floats\n * with elevation + a rounded trailing edge. Destinations are 56dp full-corner\n * pills; the active one (`data-selected`) fills with secondary-container. State\n * layer is the item `::before` (ripple added by the factory); disabled rows dim\n * per-token. Same DOM + `data-*` as the VE build.\n */\nimport { createNavigationDrawer } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const navigationDrawerTv = tv({\n  slots: {\n    root: 'flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface',\n    headline: 'px-4 pt-4 pb-1 text-title-small text-on-surface-variant',\n    item: [\n      'group relative flex w-full items-center gap-3 box-border h-14 px-4 rounded-full text-left',\n      'bg-transparent border-0 text-on-surface-variant no-underline cursor-pointer select-none overflow-hidden outline-none',\n      'text-label-large',\n      'transition-colors 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-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38',\n      'disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38',\n    ],\n    leading: 'flex items-center justify-center shrink-0 [&_svg]:size-6',\n    label: 'flex-1 min-w-0 truncate',\n    trailing: 'flex items-center shrink-0 text-label-small',\n  },\n  variants: {\n    variant: {\n      standard: {},\n      modal: { root: 'shadow-level1 rounded-e-large' },\n    },\n  },\n  defaultVariants: {\n    variant: 'standard',\n  },\n});\n\nconst s = navigationDrawerTv();\nexport const NavigationDrawer = createNavigationDrawer({\n  root: ({ variant }) => navigationDrawerTv({ variant }).root(),\n  headline: s.headline(),\n  item: s.item(),\n  leading: s.leading(),\n  label: s.label(),\n  trailing: s.trailing(),\n});\nexport type { NavigationDrawerVariant } from '@m3-baseui/core';\n"]}