@m3-baseui/react-tailwind 1.0.4 → 1.1.0

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({
@@ -866,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: {
@@ -1182,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