@m3-baseui/react-tailwind 1.2.0 → 1.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
-export { Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+import { createButton, createIconButton, createSwitch, createCheckbox, createRadio, createRadioGroup, createChip, createTooltip, createRichTooltip, createDialog, createMenu, createTabs, createSlider, createSelect, createTextField, createNavigationBar, createFab, createFabMenu, createDivider, createProgress, createLoadingIndicator, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createButtonGroup, createSplitButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet, createSearch, createDatePicker, createTimePicker, createToolbar, createCarousel } from '@m3-baseui/core';
+export { ITEM_LEADING_VARIANTS, LIST_LEADING_VARIANTS, Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
 // src/button.ts
@@ -202,7 +202,10 @@ var switchTv = tv({
       "absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none",
       "flex items-center justify-center",
       "bg-outline text-on-surface",
-      "transition-all duration-200 ease-standard",
+      // M3 spatial motion: the handle slides/grows with emphasized easing over
+      // 300ms (token-backed). emphasized is overshoot-free, so it stays safe for
+      // the handle's color transitions too (no spring flicker on background-color).
+      "transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]",
       "data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary",
       // M3 with-icon: the unchecked handle grows to 24dp to fit its icon
       "data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6",
@@ -279,7 +282,12 @@ var checkboxTv = tv({
       "group-data-[error]:text-on-error",
       // M3 disabled: the check / dash turn the surface color on the faint box
       "group-data-[disabled]:text-surface",
+      // M3 asymmetric motion: unselected-exit accelerates out (150ms), the
+      // selected/indeterminate-enter decelerates in (350ms). Token-backed.
       "opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100",
+      "transition-opacity ease-emphasized-accelerate duration-[var(--md-sys-motion-duration-short3)]",
+      "data-[checked]:ease-emphasized-decelerate data-[checked]:duration-[var(--md-sys-motion-duration-medium3)]",
+      "data-[indeterminate]:ease-emphasized-decelerate data-[indeterminate]:duration-[var(--md-sys-motion-duration-medium3)]",
       'data-[indeterminate]:after:content-[""] data-[indeterminate]:after:absolute',
       "data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current"
     ],
@@ -319,9 +327,14 @@ var radioTv = tv({
       "active:before:opacity-[var(--md-sys-state-pressed)]"
     ],
     indicator: [
-      "block rounded-full bg-primary pointer-events-none",
-      "size-0 opacity-0 transition-all duration-150 ease-standard",
-      "data-[checked]:size-2.5 data-[checked]:opacity-100",
+      "block rounded-full bg-primary pointer-events-none origin-center",
+      // M3 inner-circle-grow: the 10dp dot scales from center with
+      // emphasized-decelerate over 300ms (token-backed), not width/height from 0.
+      // Tailwind v4's `scale-*` sets the standalone `scale` property (not
+      // `transform`), so the transition must name `scale` to animate the grow.
+      "size-2.5 scale-0 opacity-0",
+      "transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]",
+      "data-[checked]:scale-100 data-[checked]:opacity-100",
       "group-data-[error]:bg-error",
       "group-data-[disabled]:bg-on-surface/38"
     ]
@@ -338,6 +351,8 @@ var chipTv = tv({
       // layer is rounded to match instead (before:rounded-[inherit]); the ripple
       // self-clips.
       "h-8 px-4 rounded-[8px] select-none border bg-transparent text-label-large",
+      // M3 with-icon padding: the icon side trims to 8dp (label side stays 16dp).
+      "data-[with-leading-icon]:pl-2",
       "transition-colors duration-150 ease-standard",
       "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
@@ -364,20 +379,36 @@ var chipTv = tv({
       "inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden",
       "bg-primary-container text-on-primary-container",
       "[&>img]:size-full [&>img]:object-cover"
+    ],
+    // M3 leading icon: 18dp; root `data-with-leading-icon` trims leading padding to 8dp.
+    icon: [
+      "inline-flex items-center justify-center shrink-0 size-[18px]",
+      "[&>svg]:size-full",
+      "group-disabled:text-on-surface/38 group-data-[disabled]:text-on-surface/38"
     ]
   },
   variants: {
     variant: {
-      assist: { root: "border-outline text-on-surface cursor-pointer" },
-      suggestion: { root: "border-outline text-on-surface-variant cursor-pointer" },
-      input: { root: "border-outline text-on-surface-variant cursor-default pr-2" },
+      assist: {
+        root: "border-outline text-on-surface cursor-pointer",
+        icon: "text-primary"
+      },
+      suggestion: {
+        root: "border-outline text-on-surface-variant cursor-pointer",
+        icon: "text-on-surface-variant"
+      },
+      input: {
+        root: "border-outline text-on-surface-variant cursor-default pr-2",
+        icon: "text-on-surface-variant"
+      },
       filter: {
         root: [
           "border-outline text-on-surface-variant cursor-pointer",
           "data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent",
           // M3 disabled + selected: faint on-surface/12 container
           "data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12"
-        ]
+        ],
+        icon: "text-on-surface-variant group-data-[pressed]:hidden"
       }
     },
     // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,
@@ -398,7 +429,13 @@ var chipTv = tv({
 });
 var Chip = createChip(({ variant, elevated }) => {
   const c3 = chipTv({ variant, elevated });
-  return { root: c3.root(), remove: c3.remove(), check: c3.check(), avatar: c3.avatar() };
+  return {
+    root: c3.root(),
+    remove: c3.remove(),
+    check: c3.check(),
+    avatar: c3.avatar(),
+    icon: c3.icon()
+  };
 });
 var TYPESCALE = [
   "display-large",
@@ -429,20 +466,48 @@ var tv7 = (options, config) => tv(options, {
 });
 
 // src/tooltip.ts
+var transition = [
+  "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 data-[ending-style]:scale-95"
+];
 var tooltipTv = tv7({
   slots: {
     popup: [
       "bg-inverse-surface text-inverse-on-surface text-body-small",
       "rounded-extra-small px-2 py-1 max-w-[224px] select-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 data-[ending-style]:scale-95"
+      ...transition
     ],
     arrow: ["text-inverse-surface"]
   }
 });
+var richTooltipTv = tv7({
+  slots: {
+    popup: [
+      "bg-surface-container text-on-surface shadow-level2",
+      "rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1",
+      "outline-none",
+      ...transition
+    ],
+    arrow: ["text-surface-container"],
+    subhead: ["text-title-small text-on-surface m-0"],
+    supportingText: ["text-body-medium text-on-surface-variant m-0"],
+    // M3 places rich-tooltip actions at the bottom-left (leading), not trailing
+    // like a dialog. -ml-2 pulls the text button so its label optically aligns
+    // with the content's left edge.
+    actions: ["flex flex-wrap items-center gap-2 mt-1 -ml-2"]
+  }
+});
 var t = tooltipTv();
 var Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });
+var r2 = richTooltipTv();
+var RichTooltip = createRichTooltip({
+  popup: r2.popup(),
+  arrow: r2.arrow(),
+  subhead: r2.subhead(),
+  supportingText: r2.supportingText(),
+  actions: r2.actions()
+});
 var dialogTv = tv7({
   slots: {
     backdrop: [
@@ -451,26 +516,61 @@ var dialogTv = tv7({
       "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
     ],
     popup: [
-      "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
-      "w-[min(560px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
-      "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
-      "p-6 flex flex-col gap-4",
+      "fixed z-50 box-border overflow-auto flex flex-col text-on-surface focus:outline-none",
       "origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized",
-      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-      "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
-      "focus:outline-none"
+      // Icon present → center the headline + supporting text (M3 hero icon).
+      "has-[[data-slot=dialog-icon]]:text-center"
+    ],
+    // Fullscreen header row: leading close icon + title (grows, but shrinks +
+    // ellipsizes instead of pushing the trailing action off-screen) + action.
+    header: [
+      "flex items-center gap-2 px-2 h-14 shrink-0",
+      "[&>*:nth-child(2)]:grow [&>*:nth-child(2)]:min-w-0 [&>*:nth-child(2)]:overflow-hidden [&>*:nth-child(2)]:text-ellipsis [&>*:nth-child(2)]:whitespace-nowrap"
     ],
+    // Centered 24dp hero icon in the secondary color.
+    icon: ["inline-flex self-center text-secondary"],
     title: ["text-headline-small text-on-surface m-0"],
     description: ["text-body-medium text-on-surface-variant m-0"],
+    // 1dp outline-variant rule under the fullscreen header.
+    divider: ["h-px w-full bg-outline-variant shrink-0 m-0 border-0"],
+    // End-aligned action row: 8dp between buttons; the popup gap (16dp) + mt-2
+    // (8dp) totals the 24dp M3 spacing above the actions.
+    actions: ["flex justify-end items-center gap-2 mt-2"],
     close: ["inline-flex"]
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        popup: [
+          "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+          "w-[min(560px,calc(100vw-48px))] min-w-[280px] max-h-[calc(100vh-48px)]",
+          "p-6 gap-4 rounded-extra-large bg-surface-container-high shadow-level3",
+          "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+          "data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
+        ]
+      },
+      true: {
+        popup: [
+          "inset-0 w-screen h-screen max-w-none rounded-none bg-surface",
+          "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    fullscreen: false
   }
 });
 var d = dialogTv();
 var Dialog = createDialog({
   backdrop: d.backdrop(),
-  popup: d.popup(),
+  popup: ({ fullscreen }) => dialogTv({ fullscreen }).popup(),
+  header: d.header(),
+  icon: d.icon(),
   title: d.title(),
   description: d.description(),
+  divider: d.divider(),
+  actions: d.actions(),
   close: d.close()
 });
 var menuTv = tv7({
@@ -621,7 +721,7 @@ var sliderTv = tv7({
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
     thumb: [
-      "relative size-5 rounded-full bg-primary outline-none",
+      "group/thumb relative size-5 rounded-full bg-primary outline-none",
       'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
       "before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
@@ -629,7 +729,17 @@ var sliderTv = tv7({
       "data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
-    value: "text-label-large text-on-surface-variant tabular-nums"
+    value: "text-label-large text-on-surface-variant tabular-nums",
+    tickList: "pointer-events-none absolute inset-0",
+    tick: [
+      "absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant",
+      "data-[active]:bg-on-primary/[0.38]"
+    ],
+    valueLabel: [
+      "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
+      "bg-primary text-label-large text-on-primary tabular-nums opacity-0",
+      "data-[visible]:opacity-100"
+    ]
   }
 });
 var s2 = sliderTv();
@@ -639,7 +749,10 @@ var Slider = createSlider({
   track: s2.track(),
   indicator: s2.indicator(),
   thumb: s2.thumb(),
-  value: s2.value()
+  value: s2.value(),
+  tickList: s2.tickList(),
+  tick: s2.tick(),
+  valueLabel: s2.valueLabel()
 });
 var selectTv = tv7({
   slots: {
@@ -940,8 +1053,29 @@ var dividerTv = tv({
 var Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));
 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",
+    // The track-stop dot (4dp, primary) sits at the inline-end via `after:`. It's
+    // a determinate-only M3 concept, so it's hidden while indeterminate. Logical
+    // `end-0` mirrors with the indicator under `dir="rtl"`.
+    root: [
+      "group relative block w-full h-1 overflow-hidden rounded-full",
+      "after:content-[''] after:absolute after:end-0 after:top-1/2 after:-translate-y-1/2",
+      "after:size-1 after:rounded-full after:bg-primary",
+      // Self variant (not `group-data-*`): the dot is on the root element itself,
+      // which carries `data-indeterminate` — it isn't a descendant of `.group`.
+      "data-[indeterminate]:after:hidden"
+    ],
+    // Positioning container only; the inactive track is the `before:` pseudo so a
+    // 4dp gap separates it from the active indicator (`--m3-progress` + 4px). The
+    // gap uses logical inline insets so it tracks the indicator (which Base UI
+    // anchors at inline-start) under `dir="rtl"`. Indeterminate has no fraction,
+    // so the inactive track spans the full width.
+    track: [
+      "absolute inset-0",
+      "before:content-[''] before:absolute before:inset-y-0 before:end-0",
+      "before:[inset-inline-start:calc(var(--m3-progress,0%)+4px)]",
+      "before:bg-surface-container-highest before:rounded-full",
+      "group-data-[indeterminate]:before:start-0"
+    ],
     indicator: [
       "absolute inset-y-0 left-0 bg-primary rounded-full",
       "transition-[width] duration-200 ease-standard",
@@ -1000,7 +1134,14 @@ var listTv = tv7({
       "group relative flex w-full items-center gap-4 box-border px-4 text-left",
       "bg-transparent border-0 text-on-surface no-underline"
     ],
-    leading: "flex items-center justify-center shrink-0 text-on-surface-variant [&_svg]:size-6",
+    leading: [
+      "flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant",
+      "[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover",
+      // M3 leading column widths, keyed on the factory's data-leading attribute.
+      "data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full",
+      "data-[leading=image]:size-14",
+      "data-[leading=video]:w-25 data-[leading=video]:h-14"
+    ],
     content: "flex flex-col min-w-0 flex-1",
     headline: "text-body-large text-on-surface group-data-[disabled]:text-on-surface/38",
     supporting: "text-body-medium text-on-surface-variant group-data-[disabled]:text-on-surface/38",
@@ -1053,10 +1194,15 @@ var snackbarTv = tv({
   slots: {
     viewport: [
       "fixed bottom-4 left-1/2 -translate-x-1/2 z-50",
-      "flex flex-col gap-2 w-[min(560px,calc(100vw-32px))]"
+      // M3 container width: cap at 672dp, clamp to the viewport on small screens.
+      // Center items so content-following (w-fit) snackbars stay under the anchor.
+      "flex flex-col items-center gap-2 w-[calc(100vw-32px)] max-w-[672px]"
     ],
     root: [
       "relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2",
+      // M3 container width follows content within min 344dp / max 672dp. The
+      // min is clamped by 100% so it never overflows a narrower viewport.
+      "w-fit min-w-[min(344px,100%)] max-w-[672px]",
       "rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3",
       "text-body-medium",
       "transition-[opacity,transform] duration-200 ease-emphasized",
@@ -1102,7 +1248,14 @@ var itemTv = tv7({
       "relative flex w-full items-center gap-4 box-border px-4 py-3 min-h-14 text-left",
       "bg-transparent text-on-surface"
     ],
-    leading: "flex items-center justify-center shrink-0 text-on-surface-variant [&_svg]:size-6",
+    leading: [
+      "flex items-center justify-center shrink-0 overflow-hidden text-on-surface-variant",
+      "[&_svg]:size-6 [&_img]:size-full [&_img]:object-cover",
+      // M3 leading column widths, keyed on the factory's data-leading attribute.
+      "data-[leading=avatar]:size-10 data-[leading=avatar]:rounded-full",
+      "data-[leading=image]:size-14",
+      "data-[leading=video]:w-25 data-[leading=video]:h-14"
+    ],
     content: "flex flex-col min-w-0 flex-1",
     overline: "text-label-small text-on-surface-variant",
     headline: "text-body-large text-on-surface",
@@ -1826,6 +1979,6 @@ var Carousel = createCarousel((variant) => {
   return { root: s14.root(), item: s14.item() };
 });
 
-export { Badge, BottomAppBar, BottomSheet, Button, ButtonGroup, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, LoadingIndicator, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, Search, SegmentedButton, Select, SideSheet, Slider, Snackbar, SplitButton, Switch, Tabs, TextField, TimePicker, Toolbar, Tooltip, TopAppBar, badgeTv, bottomAppBarTv, bottomSheetTv, button, buttonGroup, cardTv, carouselTv, checkboxTv, chipTv, circularTv, datePickerTv, dialogTv, dividerTv, fabMenuTv, fabTv, iconButton, itemTv, linearTv, listTv, loadingIndicatorTv, menuTv, navigationBarTv, navigationDrawerTv, navigationRailTv, radioTv, searchTv, segmentedButtonTv, selectTv, sideSheetTv, sliderTv, snackbarTv, splitButtonTv, switchTv, tabsTv, textFieldTv, timePickerTv, toolbarTv, tooltipTv, topAppBarTv };
+export { Badge, BottomAppBar, BottomSheet, Button, ButtonGroup, Card, Carousel, Checkbox, Chip, DatePicker, Dialog, Divider, Fab, FabMenu, IconButton, Item, List, LoadingIndicator, Menu, NavigationBar, NavigationDrawer, NavigationRail, Progress, Radio, RadioGroup, RichTooltip, Search, SegmentedButton, Select, SideSheet, Slider, Snackbar, SplitButton, Switch, Tabs, TextField, TimePicker, Toolbar, Tooltip, TopAppBar, badgeTv, bottomAppBarTv, bottomSheetTv, button, buttonGroup, cardTv, carouselTv, checkboxTv, chipTv, circularTv, datePickerTv, dialogTv, dividerTv, fabMenuTv, fabTv, iconButton, itemTv, linearTv, listTv, loadingIndicatorTv, menuTv, navigationBarTv, navigationDrawerTv, navigationRailTv, radioTv, richTooltipTv, searchTv, segmentedButtonTv, selectTv, sideSheetTv, sliderTv, snackbarTv, splitButtonTv, switchTv, tabsTv, textFieldTv, timePickerTv, toolbarTv, tooltipTv, topAppBarTv };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map