@m3-baseui/react-tailwind 1.0.3 → 1.1.0

package/dist/fab-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/fab.ts","../src/fab-menu.ts"],"names":["baseTv","tv"],"mappings":";;;;;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,QAAQC,IAAAA,CAAG;AAAA,EACtB,IAAA,EAAM;AAAA,IACJ,6EAAA;AAAA,IACA,kDAAA;AAAA,IACA,mCAAA;AAAA,IACA,8CAAA;AAAA,IACA,4IAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA;AAAA;AAAA,IAGA,6EAAA;AAAA,IACA,uDAAA;AAAA,IACA,kGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,uCAAA;AAAA,MACP,OAAA,EAAS,sCAAA;AAAA,MACT,KAAA,EAAO,4CAAA;AAAA,MACP,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,wCAAA;AAAA,MACT,OAAA,EAAS,gDAAA;AAAA,MACT,SAAA,EAAW,oDAAA;AAAA,MACX,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEkB,SAAA,CAAU,CAAC,EAAE,IAAA,EAAM,KAAA,EAAM,KAAM,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,CAAC;;;ACnCjE,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,2DAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,8EAAA;AAAA,MACA,uEAAA;AAAA,MACA,gFAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA,MAEA,0FAAA;AAAA;AAAA;AAAA,MAGA,kGAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,EAAE,IAAA,EAAM,wCAAA,EAAyC;AAAA,MAC1D,OAAA,EAAS,EAAE,IAAA,EAAM,gDAAA,EAAiD;AAAA,MAClE,SAAA,EAAW,EAAE,IAAA,EAAM,oDAAA,EAAqD;AAAA,MACxE,QAAA,EAAU,EAAE,IAAA,EAAM,kDAAA;AAAmD;AACvE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,IAAA,EAAM,KAAA,EAAM,KAAM,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA,EAAG;AAAA,EAChF,KAAA,EAAO,SAAA,EAAU,CAAE,KAAA,EAAM;AAAA,EACzB,IAAA,EAAM,CAAC,KAAA,KAAU,SAAA,CAAU,EAAE,KAAA,EAAO,EAAE,IAAA;AACxC,CAAC","file":"fab-menu.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * fab.ts — tailwind-variants for the M3 FAB.\n *\n * Four sizes + four container colors, elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The pointer ripple is added by the\n * factory. Same DOM as the VE build.\n */\nimport { createFab } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const fabTv = tv({\n  base: [\n    'relative inline-flex items-center justify-center box-border overflow-hidden',\n    'border-0 cursor-pointer select-none outline-none',\n    'shadow-level3 hover:shadow-level4',\n    'transition-shadow duration-150 ease-standard',\n    'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n    'hover:before:opacity-[var(--md-sys-state-hover)]',\n    'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n    'active:before:opacity-[var(--md-sys-state-pressed)]',\n    'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    // M3 discourages disabled FABs (material-web removed the state). When native\n    // disabled is used, apply the same container/label tokens as filled buttons.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n    'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n  ],\n  variants: {\n    size: {\n      small: 'size-10 rounded-medium [&_svg]:size-6',\n      regular: 'size-14 rounded-large [&_svg]:size-6',\n      large: 'size-24 rounded-extra-large [&_svg]:size-9',\n      extended: 'h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6',\n    },\n    color: {\n      surface: 'bg-surface-container-high text-primary',\n      primary: 'bg-primary-container text-on-primary-container',\n      secondary: 'bg-secondary-container text-on-secondary-container',\n      tertiary: 'bg-tertiary-container text-on-tertiary-container',\n    },\n  },\n  defaultVariants: {\n    size: 'regular',\n    color: 'surface',\n  },\n});\n\nexport const Fab = createFab(({ size, color }) => fabTv({ size, color }));\nexport type { FabProps, FabSize, FabColor } from '@m3-baseui/core';\n","/**\n * fab-menu.ts — tailwind-variants for the M3 FAB menu.\n *\n * The popup stacks the actions in a right-aligned column with the M3 menu\n * enter/exit motion; each item is a 56dp full-corner pill (elevation level3,\n * level4 on hover) with a currentColor state-layer `::before`, a 24dp leading\n * icon slot and a label-large label. The trigger reuses the FAB resolver. Same\n * DOM + ripple as the VE build.\n */\nimport { createFabMenu } from '@m3-baseui/core';\nimport { tv } from './tv';\nimport { fabTv } from './fab';\n\nexport const fabMenuTv = tv({\n  slots: {\n    popup: [\n      'flex flex-col items-end gap-2 bg-transparent outline-none',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n    ],\n    item: [\n      'relative inline-flex items-center gap-3 h-14 px-4 overflow-hidden box-border',\n      'cursor-pointer select-none outline-none rounded-full text-label-large',\n      'shadow-level3 hover:shadow-level4 transition-shadow duration-150 ease-standard',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 leading icon (24dp).\n      '[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6',\n      // M3 discourages disabled FABs; when used, match the filled-button tokens\n      // (per-token, not a blanket opacity) and suppress the state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n    ],\n  },\n  variants: {\n    color: {\n      surface: { item: 'bg-surface-container-high text-primary' },\n      primary: { item: 'bg-primary-container text-on-primary-container' },\n      secondary: { item: 'bg-secondary-container text-on-secondary-container' },\n      tertiary: { item: 'bg-tertiary-container text-on-tertiary-container' },\n    },\n  },\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\nexport const FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {\n  popup: fabMenuTv().popup(),\n  item: (color) => fabMenuTv({ color }).item(),\n});\n\nexport type { FabMenuTriggerProps, FabMenuItemProps } from '@m3-baseui/core';\n"]}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { Select, selectTv } from './select.js';
 export { TextField, textFieldTv } from './textfield.js';
 export { NavigationBar, navigationBarTv } from './navigation-bar.js';
 export { Fab, fabTv } from './fab.js';
+export { FabMenu, fabMenuTv } from './fab-menu.js';
 export { Divider, dividerTv } from './divider.js';
 export { Progress, circularTv, linearTv } from './progress.js';
 export { List, listTv } from './list.js';
@@ -22,7 +23,12 @@ export { Badge, badgeTv } from './badge.js';
 export { Card, cardTv } from './card.js';
 export { SegmentedButton, segmentedButtonTv } from './segmented-button.js';
 export { NavigationDrawer, navigationDrawerTv } from './navigation-drawer.js';
-export { BadgeProps, BadgeSize, ButtonProps, ButtonVariant, CardProps, CardVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, NavigationDrawerVariant, Ripple, SchemeVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+export { TopAppBar, topAppBarTv } from './top-app-bar.js';
+export { BottomAppBar, bottomAppBarTv } from './bottom-app-bar.js';
+export { NavigationRail, navigationRailTv } from './navigation-rail.js';
+export { BottomSheet, bottomSheetTv } from './bottom-sheet.js';
+export { SideSheet, sideSheetTv } from './side-sheet.js';
+export { BadgeProps, BadgeSize, BottomAppBarProps, BottomSheetVariant, ButtonProps, ButtonVariant, CardProps, CardVariant, ChipProps, ChipVariant, CircularProgressProps, ContrastLevel, DividerInset, DividerOrientation, DividerProps, FabColor, FabMenuItemProps, FabMenuTriggerProps, FabProps, FabSize, IconButtonProps, IconButtonVariant, ItemProps, LinearProgressProps, ListItemLines, ListItemProps, NavigationDrawerVariant, Ripple, SchemeVariant, SideSheetSide, SideSheetVariant, TabsVariant, TextFieldProps, TextFieldVariant, ThemeMode, ThemeProvider, ThemeProviderProps, TopAppBarProps, TopAppBarVariant, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import '@base-ui/react';
 import 'react';
 import 'tailwind-variants';

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createDivider, createProgress, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createNavigationDrawer } from '@m3-baseui/core';
+import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet } from '@m3-baseui/core';
 export { Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
@@ -593,13 +593,13 @@ var tabsTv = tv7({
   }
 });
 var Tabs = createTabs((variant) => {
-  const s9 = tabsTv({ variant });
+  const s13 = tabsTv({ variant });
   return {
-    root: s9.root(),
-    list: s9.list(),
-    tab: s9.tab(),
-    indicator: s9.indicator(),
-    panel: s9.panel()
+    root: s13.root(),
+    list: s13.list(),
+    tab: s13.tab(),
+    indicator: s13.indicator(),
+    panel: s13.panel()
   };
 });
 var sliderTv = tv7({
@@ -730,7 +730,8 @@ var textFieldTv = tv({
         field: [
           "rounded-t-extra-small bg-surface-container-highest",
           "border-b-2 border-outline",
-          "group-data-[focused]:border-primary group-data-[invalid]:border-error"
+          // M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).
+          "group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error"
         ],
         input: "pt-3",
         label: [
@@ -741,7 +742,9 @@ var textFieldTv = tv({
       outlined: {
         field: [
           "rounded-extra-small border border-outline",
-          "group-data-[focused]:border-2 group-data-[focused]:border-primary group-data-[focused]:px-[15px]",
+          // M3 outlined focus-outline-width is 3dp (matches Select's trigger);
+          // padding drops 2px so content stays steady as the 1dp border grows.
+          "group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]",
           "group-data-[invalid]:border-error"
         ],
         label: [
@@ -776,7 +779,8 @@ var navigationBarTv = tv({
     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"
+      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
+      "data-[disabled]:pointer-events-none"
     ],
     iconWrap: "relative flex items-center justify-center w-16 h-8",
     indicator: [
@@ -786,17 +790,32 @@ var navigationBarTv = tv({
       "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)]"
+      "group-active:before:opacity-[var(--md-sys-state-pressed)]",
+      // No state layer on a disabled destination.
+      "group-data-[disabled]:before:opacity-0"
     ],
     icon: [
       "relative flex items-center justify-center text-on-surface-variant",
       "transition-colors duration-150 ease-standard",
-      "group-data-[pressed]:text-on-secondary-container"
+      // Raw <svg> icons render at 24dp (Material Symbols set their own size).
+      "[&_svg]:size-6",
+      "group-data-[pressed]:text-on-secondary-container",
+      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
+      // so the disabled+active override must test both attributes on that single
+      // element (`.group[data-disabled][data-pressed] &`) to outrank the equal-
+      // specificity data-[pressed] color — a stacked `group-data-*:group-data-*`
+      // would expect two nested groups and never match.
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
     ],
     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"
+      "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
+      // M3 disabled: label dims to on-surface/0.38. Same-element override (see the
+      // icon slot) keeps a disabled+active label dimmed.
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
     ]
   }
 });
@@ -847,6 +866,46 @@ var fabTv = tv({
   }
 });
 var Fab = createFab(({ size, color }) => fabTv({ size, color }));
+var fabMenuTv = tv7({
+  slots: {
+    popup: [
+      "flex flex-col items-end gap-2 bg-transparent outline-none",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0"
+    ],
+    item: [
+      "relative inline-flex items-center gap-3 h-14 px-4 overflow-hidden box-border",
+      "cursor-pointer select-none outline-none rounded-full text-label-large",
+      "shadow-level3 hover:shadow-level4 transition-shadow duration-150 ease-standard",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 leading icon (24dp).
+      "[&_[data-slot=fab-menu-leading]]:inline-flex [&_[data-slot=fab-menu-leading]>svg]:size-6",
+      // M3 discourages disabled FABs; when used, match the filled-button tokens
+      // (per-token, not a blanket opacity) and suppress the state layer.
+      "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0",
+      "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+    ]
+  },
+  variants: {
+    color: {
+      surface: { item: "bg-surface-container-high text-primary" },
+      primary: { item: "bg-primary-container text-on-primary-container" },
+      secondary: { item: "bg-secondary-container text-on-secondary-container" },
+      tertiary: { item: "bg-tertiary-container text-on-tertiary-container" }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+var FabMenu = createFabMenu(({ size, color }) => fabTv({ size, color }), {
+  popup: fabMenuTv().popup(),
+  item: (color) => fabMenuTv({ color }).item()
+});
 var dividerTv = tv({
   base: "shrink-0 self-stretch border-0 bg-outline-variant",
   variants: {
@@ -863,7 +922,8 @@ var dividerTv = tv({
   compoundVariants: [
     { orientation: "horizontal", inset: "inset", class: "ms-4" },
     { orientation: "horizontal", inset: "middle", class: "mx-4" },
-    { orientation: "vertical", inset: "inset", class: "mt-4" },
+    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.
+    { orientation: "vertical", inset: "inset", class: "[margin-block-start:1rem]" },
     { orientation: "vertical", inset: "middle", class: "my-4" }
   ],
   defaultVariants: {
@@ -976,7 +1036,7 @@ var snackbarTv = tv({
     ],
     content: "flex flex-col flex-1 min-w-0 gap-0.5",
     title: "text-body-medium",
-    description: "text-body-small opacity-90",
+    description: "text-body-medium",
     action: [
       "relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden",
       "rounded-extra-small bg-transparent border-0 cursor-pointer outline-none",
@@ -1054,6 +1114,8 @@ var cardTv = tv7({
     interactive: {
       true: [
         "group overflow-hidden cursor-pointer select-none text-left w-full outline-none",
+        // Animate the elevation lift/settle to match the VE box-shadow transition.
+        "transition-shadow duration-150 ease-standard",
         "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
         "hover:before:opacity-[var(--md-sys-state-hover)]",
         "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
@@ -1160,7 +1222,188 @@ var NavigationDrawer = createNavigationDrawer({
   label: s8.label(),
   trailing: s8.trailing()
 });
+var topAppBarTv = tv7({
+  slots: {
+    root: "flex flex-col w-full box-border h-16 bg-surface text-on-surface",
+    row: "flex items-center gap-1 h-16 px-1",
+    leading: "flex items-center shrink-0 text-on-surface [&_svg]:size-6",
+    headline: "min-w-0 truncate text-on-surface",
+    trailing: "flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6"
+  },
+  variants: {
+    variant: {
+      small: { headline: "flex-1 px-3 text-title-large" },
+      center: { headline: "flex-1 px-3 text-center text-title-large" },
+      medium: { root: "h-28", headline: "px-4 pb-6 text-headline-small" },
+      large: { root: "h-38", headline: "px-4 pb-7 text-headline-medium" }
+    }
+  },
+  defaultVariants: {
+    variant: "small"
+  }
+});
+var TopAppBar = createTopAppBar((args) => {
+  const s13 = topAppBarTv({ variant: args.variant });
+  return {
+    root: s13.root(),
+    row: s13.row(),
+    leading: s13.leading(),
+    headline: s13.headline(),
+    trailing: s13.trailing()
+  };
+});
+var bottomAppBarTv = tv7({
+  slots: {
+    root: "flex items-center justify-between w-full box-border h-20 px-1 bg-surface-container text-on-surface-variant",
+    actions: "flex items-center gap-1 pl-2 [&_svg]:size-6",
+    fab: "flex items-center pr-3"
+  }
+});
+var s9 = bottomAppBarTv();
+var BottomAppBar = createBottomAppBar({
+  root: s9.root(),
+  actions: s9.actions(),
+  fab: s9.fab()
+});
+var navigationRailTv = tv7({
+  slots: {
+    root: "flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface",
+    header: "flex flex-col items-center gap-3 mb-1",
+    item: [
+      "group relative flex flex-col items-center justify-center gap-1 px-1 py-1",
+      "bg-transparent border-0 cursor-pointer select-none outline-none",
+      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
+      "data-[disabled]:pointer-events-none"
+    ],
+    iconWrap: "relative flex items-center justify-center w-14 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)]",
+      // No state layer on a disabled destination.
+      "group-data-[disabled]:before:opacity-0"
+    ],
+    icon: [
+      "relative flex items-center justify-center text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      // Raw <svg> icons render at 24dp (Material Symbols set their own size).
+      "[&_svg]:size-6",
+      "group-data-[pressed]:text-on-secondary-container",
+      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
+      // so the disabled+active override tests both attributes on that single
+      // element (see NavigationBar for the rationale).
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
+    ],
+    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",
+      // M3 disabled: label dims to on-surface/0.38 (same-element override).
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
+    ]
+  }
+});
+var s10 = navigationRailTv();
+var NavigationRail = createNavigationRail({
+  root: s10.root(),
+  header: s10.header(),
+  item: s10.item(),
+  iconWrap: s10.iconWrap(),
+  indicator: s10.indicator(),
+  icon: s10.icon(),
+  label: s10.label()
+});
+var bottomSheetTv = tv7({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-300 ease-emphasized",
+      "data-[swiping]:transition-none",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    viewport: "fixed inset-0 z-50 flex items-end justify-center",
+    popup: [
+      "box-border w-full max-w-[640px] max-h-[calc(100dvh-56px)]",
+      "overflow-y-auto overscroll-contain touch-auto outline-none",
+      "pb-6 bg-surface-container-low text-on-surface rounded-t-extra-large shadow-level1",
+      "[transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]",
+      "transition-transform duration-300 ease-emphasized",
+      "data-[swiping]:select-none",
+      "data-[starting-style]:[transform:translateY(100%)] data-[ending-style]:[transform:translateY(100%)]"
+    ],
+    handle: "mx-auto mt-4 mb-2 h-1 w-8 shrink-0 rounded-full bg-on-surface-variant/40",
+    title: ["m-0 px-6 pt-2 text-title-large text-on-surface"],
+    description: ["m-0 px-6 pt-1 text-body-medium text-on-surface-variant"]
+  }
+});
+var s11 = bottomSheetTv();
+var BottomSheet = createBottomSheet({
+  backdrop: s11.backdrop(),
+  viewport: s11.viewport(),
+  popup: s11.popup(),
+  handle: s11.handle(),
+  title: s11.title(),
+  description: s11.description()
+});
+var sideSheetTv = tv7({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-300 ease-emphasized",
+      "data-[swiping]:transition-none",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    viewport: "fixed inset-0 z-50 flex items-stretch",
+    popup: [
+      "box-border h-full w-[320px] max-w-[calc(100vw-56px)]",
+      "flex flex-col overflow-y-auto overscroll-contain touch-auto outline-none",
+      "bg-surface-container-low text-on-surface",
+      "data-[swipe-direction=right]:ml-auto data-[swipe-direction=left]:mr-auto",
+      "[transform:translateX(var(--drawer-swipe-movement-x))]",
+      "transition-transform duration-300 ease-emphasized",
+      "data-[swiping]:select-none",
+      "data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(100%)]",
+      "data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(100%)]",
+      "data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(-100%)]",
+      "data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(-100%)]"
+    ],
+    header: "flex items-center gap-2 min-h-14 px-4 py-2",
+    title: ["flex-1 m-0 text-title-large text-on-surface"],
+    description: ["m-0 px-6 pb-4 text-body-medium text-on-surface-variant"],
+    close: "inline-flex shrink-0"
+  },
+  variants: {
+    variant: {
+      modal: {
+        popup: [
+          "shadow-level1",
+          "data-[swipe-direction=right]:rounded-s-large data-[swipe-direction=left]:rounded-e-large"
+        ]
+      },
+      standard: { popup: "shadow-none" }
+    }
+  },
+  defaultVariants: {
+    variant: "modal"
+  }
+});
+var s12 = sideSheetTv();
+var SideSheet = createSideSheet({
+  backdrop: s12.backdrop(),
+  viewport: s12.viewport(),
+  popup: ({ variant }) => sideSheetTv({ variant }).popup(),
+  header: s12.header(),
+  title: s12.title(),
+  description: s12.description(),
+  close: s12.close()
+});
 
-export { Badge, Button, Card, Checkbox, Chip, Dialog, Divider, Fab, IconButton, Item, List, Menu, NavigationBar, NavigationDrawer, Progress, Radio, RadioGroup, SegmentedButton, Select, Slider, Snackbar, Switch, Tabs, TextField, Tooltip, badgeTv, button, cardTv, checkboxTv, chipTv, circularTv, dialogTv, dividerTv, fabTv, iconButton, itemTv, linearTv, listTv, menuTv, navigationBarTv, navigationDrawerTv, radioTv, segmentedButtonTv, selectTv, sliderTv, snackbarTv, switchTv, tabsTv, textFieldTv, tooltipTv };
+export { Badge, BottomAppBar, BottomSheet, Button, Card, Checkbox, Chip, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, SegmentedButton, Select, SideSheet, Slider, Snackbar, Switch, Tabs, TextField, Tooltip, TopAppBar, badgeTv, bottomAppBarTv, bottomSheetTv, button, cardTv, checkboxTv, chipTv, circularTv, dialogTv, dividerTv, fabMenuTv, fabTv, iconButton, itemTv, linearTv, listTv, menuTv, navigationBarTv, navigationDrawerTv, navigationRailTv, radioTv, segmentedButtonTv, selectTv, sideSheetTv, sliderTv, snackbarTv, switchTv, tabsTv, textFieldTv, tooltipTv, topAppBarTv };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map