@m3-baseui/react-tailwind 1.3.0 → 2.0.0

package/dist/menu.js

@@ -1,114 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,91 +0,0 @@
-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 | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: 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 | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: 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 | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: 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.map

@@ -1 +0,0 @@
-{"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;AAAA,MAEA;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,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA;AAAA,MAGA,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      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n      '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      // No state layer on a disabled destination.\n      'group-data-[disabled]:before:opacity-0',\n    ],\n    icon: [\n      'relative flex items-center justify-center text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n      '[&_svg]:size-6',\n      'group-data-[pressed]:text-on-secondary-container',\n      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n      // so the disabled+active override must test both attributes on that single\n      // element (`.group[data-disabled][data-pressed] &`) to outrank the equal-\n      // specificity data-[pressed] color — a stacked `group-data-*:group-data-*`\n      // would expect two nested groups and never match.\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\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      // M3 disabled: label dims to on-surface/0.38. Same-element override (see the\n      // icon slot) keeps a disabled+active label dimmed.\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\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.js.map

@@ -1 +0,0 @@
-{"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"]}

package/dist/navigation-rail.d.ts

@@ -1,101 +0,0 @@
-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 navigationRailTv: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-    header: 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 | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-    header: string;
-    item: string[];
-    iconWrap: string;
-    indicator: string[];
-    icon: string[];
-    label: string[];
-}, tailwind_variants.TVReturnType<unknown, {
-    root: string;
-    header: 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 | {
-            root?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-            iconWrap?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-declare const NavigationRail: {
-    Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToggleGroup.Props<string> & react.RefAttributes<HTMLDivElement>, "ref"> & {
-        header?: React.ReactNode;
-    } & 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 { NavigationRail, navigationRailTv };

package/dist/navigation-rail.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tv.ts","../src/navigation-rail.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,mBAAmB,EAAA,CAAG;AAAA,EACjC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,MAAA,EAAQ,uCAAA;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;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,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA,MAIA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA,MAEA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,gBAAA,EAAiB;AACpB,IAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,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-rail.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-rail.ts — tailwind-variants slots for the M3 NavigationRail.\n *\n * 80dp vertical rail on `surface`. The selected destination surfaces\n * `data-pressed` (Base UI Toggle); the pill, icon and label colors key off it\n * via the `group` on each item. State layer is the pill `::before`; the pointer\n * ripple is added by the factory. `Root` renders an optional leading `header`\n * (menu button / FAB). Same DOM + `data-*` as the VE build (mirrors NavigationBar).\n */\nimport { createNavigationRail } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const navigationRailTv = tv({\n  slots: {\n    root: 'flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface',\n    header: 'flex flex-col items-center gap-3 mb-1',\n    item: [\n      'group relative flex flex-col items-center justify-center gap-1 px-1 py-1',\n      'bg-transparent border-0 cursor-pointer select-none outline-none',\n      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n      'data-[disabled]:pointer-events-none',\n    ],\n    iconWrap: 'relative flex items-center justify-center w-14 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      // No state layer on a disabled destination.\n      'group-data-[disabled]:before:opacity-0',\n    ],\n    icon: [\n      'relative flex items-center justify-center text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n      '[&_svg]:size-6',\n      'group-data-[pressed]:text-on-secondary-container',\n      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n      // so the disabled+active override tests both attributes on that single\n      // element (see NavigationBar for the rationale).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\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      // M3 disabled: label dims to on-surface/0.38 (same-element override).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n  },\n});\n\nconst s = navigationRailTv();\nexport const NavigationRail = createNavigationRail({\n  root: s.root(),\n  header: s.header(),\n  item: s.item(),\n  iconWrap: s.iconWrap(),\n  indicator: s.indicator(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

package/dist/progress.d.ts

@@ -1,118 +0,0 @@
-import * as react from 'react';
-import * as _m3_baseui_core from '@m3-baseui/core';
-export { CircularProgressProps, LinearProgressProps } 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 linearTv: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-    track: string;
-    indicator: string[];
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-    track: string;
-    indicator: string[];
-}, tailwind_variants.TVReturnType<unknown, {
-    root: string;
-    track: string;
-    indicator: string[];
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-declare const circularTv: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    root: string[];
-    track: string;
-    indicator: string[];
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    root: string[];
-    track: string;
-    indicator: string[];
-}, tailwind_variants.TVReturnType<unknown, {
-    root: string[];
-    track: string;
-    indicator: string[];
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            track?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-declare const Progress: {
-    Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "defaultValue" | "value"> & react.RefAttributes<HTMLDivElement>>;
-    Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "defaultValue" | "value"> & react.RefAttributes<HTMLSpanElement>>;
-};
-
-export { Progress, circularTv, linearTv };

package/dist/progress.js

@@ -1,41 +0,0 @@
-"use client";
-import { createProgress } from '@m3-baseui/core';
-import { tv } from 'tailwind-variants';
-
-// src/progress.ts
-var linearTv = tv({
-  slots: {
-    root: "group relative block w-full h-1 overflow-hidden rounded-full",
-    track: "absolute inset-0 bg-surface-container-highest rounded-full",
-    indicator: [
-      "absolute inset-y-0 left-0 bg-primary rounded-full",
-      "transition-[width] duration-200 ease-standard",
-      "group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none",
-      "group-data-[indeterminate]:animate-m3-linear-indeterminate"
-    ]
-  }
-});
-var circularTv = tv({
-  slots: {
-    root: [
-      "inline-flex items-center justify-center size-12",
-      "[&_svg]:block [&_svg]:size-full",
-      "data-[indeterminate]:animate-spin"
-    ],
-    track: "stroke-surface-container-highest [stroke-width:4px]",
-    indicator: [
-      "stroke-primary [stroke-width:4px] [stroke-linecap:round]",
-      "transition-[stroke-dashoffset] duration-300 ease-standard"
-    ]
-  }
-});
-var l = linearTv();
-var c = circularTv();
-var Progress = createProgress({
-  linear: { root: l.root(), track: l.track(), indicator: l.indicator() },
-  circular: { root: c.root(), track: c.track(), indicator: c.indicator() }
-});
-
-export { Progress, circularTv, linearTv };
-//# sourceMappingURL=progress.js.map
-//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/progress.ts"],"names":[],"mappings":";;;;;AAaO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,KAAA,EAAO,4DAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,mDAAA;AAAA,MACA,+CAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAEM,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iDAAA;AAAA,MACA,iCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,qDAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,0DAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACnB,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AAAA,EACrE,QAAA,EAAU,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU;AACvE,CAAC","file":"progress.js","sourcesContent":["/**\n * progress.ts — tailwind-variants slots for the M3 Progress indicators.\n *\n * Linear: a 4dp `surface-container-highest` track with a `primary` active\n * indicator; the indeterminate slide animation keys off the Root's\n * `data-indeterminate` (see the `m3-linear-indeterminate` keyframe in\n * preset.css). Circular: a 48dp / 4dp `primary` ring whose arc is drawn by the\n * factory; `data-indeterminate` rotates the whole ring via Tailwind's built-in\n * `animate-spin` (1s) — the VE build matches that period. Same DOM as the VE build.\n */\nimport { createProgress } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const linearTv = tv({\n  slots: {\n    root: 'group relative block w-full h-1 overflow-hidden rounded-full',\n    track: 'absolute inset-0 bg-surface-container-highest rounded-full',\n    indicator: [\n      'absolute inset-y-0 left-0 bg-primary rounded-full',\n      'transition-[width] duration-200 ease-standard',\n      'group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none',\n      'group-data-[indeterminate]:animate-m3-linear-indeterminate',\n    ],\n  },\n});\n\nexport const circularTv = tv({\n  slots: {\n    root: [\n      'inline-flex items-center justify-center size-12',\n      '[&_svg]:block [&_svg]:size-full',\n      'data-[indeterminate]:animate-spin',\n    ],\n    track: 'stroke-surface-container-highest [stroke-width:4px]',\n    indicator: [\n      'stroke-primary [stroke-width:4px] [stroke-linecap:round]',\n      'transition-[stroke-dashoffset] duration-300 ease-standard',\n    ],\n  },\n});\n\nconst l = linearTv();\nconst c = circularTv();\nexport const Progress = createProgress({\n  linear: { root: l.root(), track: l.track(), indicator: l.indicator() },\n  circular: { root: c.root(), track: c.track(), indicator: c.indicator() },\n});\nexport type {\n  LinearProgressProps,\n  CircularProgressProps,\n} from '@m3-baseui/core';\n"]}

package/dist/radio.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,iEAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,4BAAA;AAAA,MACA,wGAAA;AAAA,MACA,qDAAA;AAAA,MACA,6BAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,OAAA,EAAQ;AACX,IAAM,KAAA,GAAQ,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,SAAA,EAAW,CAAA,CAAE,SAAA,EAAU,EAAG;AAEtE,IAAM,UAAA,GAAa,iBAAiB,4BAA4B","file":"radio.js","sourcesContent":["/**\n * radio.ts — tailwind-variants slots for the M3 Radio + RadioGroup.\n *\n * 20dp circle with a 40dp circular state layer; checked shows a 10dp primary dot\n * (the indicator) and recolors the ring. RadioGroup lays radios out in a column.\n */\nimport { createRadio, createRadioGroup } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const radioTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center shrink-0 box-border',\n      'size-5 rounded-full border-2 cursor-pointer bg-transparent',\n      // Ring is on-surface-variant; the state layer (text/currentColor) is\n      // on-surface unselected, primary when selected (material-web).\n      'border-on-surface-variant text-on-surface',\n      'transition-colors duration-150 ease-standard',\n      'data-[checked]:border-primary data-[checked]:text-primary',\n      // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n      'active:text-primary',\n      'data-[checked]:active:text-on-surface',\n      // M3 error: error ring + error state layer in every interaction state\n      'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n      'data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // M3 disabled: ring (and dot) turn on-surface/38; no state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:border-on-surface/38',\n      'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n      'before:size-10 before:rounded-full before:bg-current before:opacity-0 before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n    indicator: [\n      'block rounded-full bg-primary pointer-events-none origin-center',\n      // M3 inner-circle-grow: the 10dp dot scales from center with\n      // emphasized-decelerate over 300ms (token-backed), not width/height from 0.\n      // Tailwind v4's `scale-*` sets the standalone `scale` property (not\n      // `transform`), so the transition must name `scale` to animate the grow.\n      'size-2.5 scale-0 opacity-0',\n      'transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]',\n      'data-[checked]:scale-100 data-[checked]:opacity-100',\n      'group-data-[error]:bg-error',\n      'group-data-[disabled]:bg-on-surface/38',\n    ],\n  },\n});\n\nconst r = radioTv();\nexport const Radio = createRadio({ root: r.root(), indicator: r.indicator() });\n\nexport const RadioGroup = createRadioGroup('inline-flex flex-col gap-1');\n"]}

package/dist/search.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tv.ts","../src/search.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,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,GAAA,EAAK;AAAA,MACH,iEAAA;AAAA,MACA,wDAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,gGAAA;AAAA,MACA,oEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,oFAAA;AAAA,MACA,uEAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA,+BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,cAAc,CAAA;AAAA,IACrB,IAAA,EAAM;AAAA,MACJ,4FAAA;AAAA,MACA,yEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,8DAAA;AAAA,MACA,qDAAA;AAAA,MACA,6GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,yDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,oDAAoD,CAAA;AAAA,IAC5D,SAAA,EAAW,CAAC,uCAAuC,CAAA;AAAA,IACnD,UAAA,EAAY,CAAC,oDAAoD;AAAA;AAErE,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,EACX,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,aAAA,EAAe,EAAE,aAAA,EAAc;AAAA,EAC/B,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,UAAA,EAAY,EAAE,UAAA;AAChB,CAAC","file":"search.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 * search.ts — Tailwind classes for the M3 Search (search bar + docked view).\n *\n * Resting bar: surface-container-high pill (full corner, 56dp) with a leading\n * magnifier and a body-large input. The docked view is a surface-container-high\n * popup (elevation 3) whose suggestion rows carry a `before:` state layer keyed\n * to hover + Base UI's data-[highlighted]/data-[selected]. Same DOM + ripple as\n * the VE build.\n */\nimport { createSearch } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const searchTv = tv({\n  slots: {\n    bar: [\n      'flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2',\n      'bg-surface-container-high text-on-surface rounded-full',\n      'transition-shadow duration-150 ease-standard',\n      'focus-within:shadow-level1',\n    ],\n    icon: [\n      'inline-flex shrink-0 items-center justify-center text-on-surface-variant',\n      '[&>svg]:size-6',\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    clear: [\n      'relative inline-flex shrink-0 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      'w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2',\n      'bg-surface-container-high text-on-surface rounded-large shadow-level3',\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    list: ['outline-none'],\n    item: [\n      'group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 overflow-hidden',\n      'cursor-pointer select-none outline-none text-body-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-[selected]:before:opacity-[var(--md-sys-state-pressed)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      '[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6',\n    ],\n    itemIndicator: [\n      'inline-flex items-center justify-center text-on-surface',\n      'invisible group-data-[selected]:visible',\n    ],\n    empty: ['px-4 py-3 text-body-medium text-on-surface-variant'],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: ['px-4 py-2 text-label-small text-on-surface-variant'],\n  },\n});\n\nconst s = searchTv();\nexport const Search = createSearch({\n  bar: s.bar(),\n  icon: s.icon(),\n  input: s.input(),\n  clear: s.clear(),\n  popup: s.popup(),\n  list: s.list(),\n  item: s.item(),\n  itemIndicator: s.itemIndicator(),\n  empty: s.empty(),\n  separator: s.separator(),\n  groupLabel: s.groupLabel(),\n});\n"]}

package/dist/segmented-button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tv.ts","../src/segmented-button.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,oBAAoB,EAAA,CAAG;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,mGAAA;AAAA,MACA,0CAAA;AAAA,MACA,0GAAA;AAAA,MACA,kCAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,kFAAA;AAAA;AAAA,MAEA,4FAAA;AAAA,MACA,sEAAA;AAAA,MACA,yEAAA;AAAA,MACA,wDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,6GAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,kGAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAED,IAAM,IAAI,iBAAA,EAAkB;AACrB,IAAM,kBAAkB,qBAAA,CAAsB;AAAA,EACnD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"segmented-button.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 * segmented-button.ts — tailwind-variants slots for the M3 SegmentedButton.\n *\n * A 40dp-tall connected row with a shared outline; segments divide with a left\n * border. The selected segment surfaces `data-pressed` (Base UI Toggle) → a\n * secondary-container fill that reveals the leading checkmark (and hides any\n * provided icon) via the `group`. State layer is the item `::before`; the\n * pointer ripple is added by the factory. Same DOM as the VE build.\n */\nimport { createSegmentedButton } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const segmentedButtonTv = tv({\n  slots: {\n    root: 'inline-flex items-stretch h-10 rounded-full border border-outline',\n    item: [\n      'group relative inline-flex flex-1 items-center justify-center gap-2 px-3 min-w-12 overflow-hidden',\n      'first:rounded-s-full last:rounded-e-full',\n      'bg-transparent border-0 border-l border-outline first:border-l-0 cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\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-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container',\n      // M3 disabled: label on-surface/38, divider outline on-surface/12 (material-web).\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:opacity-100',\n    ],\n    icon: 'inline-flex items-center justify-center shrink-0 [&_svg]:size-[18px] group-data-[pressed]:hidden',\n    label: 'truncate',\n  },\n});\n\nconst s = segmentedButtonTv();\nexport const SegmentedButton = createSegmentedButton({\n  root: s.root(),\n  item: s.item(),\n  check: s.check(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}