@m3-baseui/react-tailwind 1.1.0 → 1.3.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, createFabMenu, createDivider, createProgress, createList, createSnackbar, createItem, createBadge, createCard, createSegmentedButton, createNavigationDrawer, createTopAppBar, createBottomAppBar, createNavigationRail, createBottomSheet, createSideSheet } from '@m3-baseui/core';
+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 { tv } from 'tailwind-variants';
 
@@ -91,7 +91,10 @@ var widthCompounds = Object.entries(WIDTHS).flatMap(
 var iconButton = tv({
   base: [
     "relative inline-flex items-center justify-center shrink-0",
-    "rounded-full overflow-hidden cursor-pointer select-none border-0 bg-transparent",
+    // No `overflow-hidden`: it would clip the 48dp touch target on small sizes.
+    // The state layer is already rounded (before:rounded-[inherit]); the ripple
+    // self-clips.
+    "rounded-full cursor-pointer select-none border-0 bg-transparent",
     "transition-[box-shadow,background-color,color] duration-200 ease-standard",
     // State layer overlay
     "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
@@ -199,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",
@@ -276,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"
     ],
@@ -316,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"
     ]
@@ -331,9 +347,14 @@ var chipTv = tv({
   slots: {
     root: [
       "group relative inline-flex items-center justify-center gap-2 box-border",
-      "h-8 px-4 rounded-[8px] overflow-hidden select-none border bg-transparent text-label-large",
+      // No `overflow-hidden`: it would clip the 48dp touch target. The state
+      // 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:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "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)]",
       "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
       "active:before:opacity-[var(--md-sys-state-pressed)]",
@@ -358,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,
@@ -392,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",
@@ -593,13 +636,13 @@ var tabsTv = tv7({
   }
 });
 var Tabs = createTabs((variant) => {
-  const s13 = tabsTv({ variant });
+  const s14 = tabsTv({ variant });
   return {
-    root: s13.root(),
-    list: s13.list(),
-    tab: s13.tab(),
-    indicator: s13.indicator(),
-    panel: s13.panel()
+    root: s14.root(),
+    list: s14.list(),
+    tab: s14.tab(),
+    indicator: s14.indicator(),
+    panel: s14.panel()
   };
 });
 var sliderTv = tv7({
@@ -615,7 +658,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)]",
@@ -623,7 +666,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();
@@ -633,7 +686,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: {
@@ -964,6 +1020,29 @@ var Progress = createProgress({
   linear: { root: l.root(), track: l.track(), indicator: l.indicator() },
   circular: { root: c2.root(), track: c2.track(), indicator: c2.indicator() }
 });
+var loadingIndicatorTv = tv7({
+  slots: {
+    // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to
+    // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).
+    root: "inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]",
+    indicator: [
+      "fill-primary",
+      // Morph + rotate about the shape's own centre (transform-box: fill-box).
+      "[transform-box:fill-box] origin-center animate-m3-loading"
+    ]
+  },
+  variants: {
+    contained: {
+      true: { root: "size-12 rounded-full bg-secondary-container" },
+      false: {}
+    }
+  },
+  defaultVariants: { contained: false }
+});
+var LoadingIndicator = createLoadingIndicator(({ contained }) => {
+  const s14 = loadingIndicatorTv({ contained });
+  return { root: s14.root(), indicator: s14.indicator() };
+});
 var listTv = tv7({
   slots: {
     root: "list-none m-0 px-0 py-2 bg-transparent",
@@ -1182,6 +1261,114 @@ var SegmentedButton = createSegmentedButton({
   icon: s7.icon(),
   label: s7.label()
 });
+var buttonGroup = tv7({
+  base: "inline-flex items-center",
+  variants: {
+    variant: {
+      standard: "gap-2",
+      connected: [
+        "gap-0.5",
+        "[&>*:not(:first-child):not(:last-child)]:rounded-small",
+        // Guard against a lone child (it is both first *and* last) — only morph
+        // the inner-facing corner when there is actually a sibling to face.
+        "[&>*:first-child:not(:last-child)]:rounded-e-small",
+        "[&>*:last-child:not(:first-child)]:rounded-s-small"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "standard"
+  }
+});
+var ButtonGroup = createButtonGroup(({ variant }) => buttonGroup({ variant }));
+var surface = [
+  "relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none",
+  "text-label-large",
+  "transition-[background-color,color,border-color] duration-200 ease-standard",
+  "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+  "hover:before:opacity-[var(--md-sys-state-hover)]",
+  "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+  "active:before:opacity-[var(--md-sys-state-pressed)]",
+  "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+  "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+  "disabled:pointer-events-none disabled:before:opacity-0",
+  "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
+];
+var VARIANT_FILLED = [
+  "bg-primary text-on-primary",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+];
+var VARIANT_TONAL = [
+  "bg-secondary-container text-on-secondary-container",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+];
+var VARIANT_OUTLINED = [
+  "bg-transparent text-primary border border-outline",
+  "disabled:text-on-surface/38 disabled:border-on-surface/12",
+  "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12"
+];
+var VARIANT_ELEVATED = [
+  "bg-surface-container-low text-primary shadow-level1",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+];
+var VARIANT_TEXT = [
+  "bg-transparent text-primary",
+  "disabled:text-on-surface/38",
+  "data-[disabled]:text-on-surface/38"
+];
+var splitButtonTv = tv7({
+  slots: {
+    group: "inline-flex items-center gap-0.5",
+    // leading: outer (start) corner full, seam (end) corner reduced.
+    leading: [...surface, "gap-2 px-6 rounded-s-full rounded-e-small"],
+    // trailing: seam (start) corner reduced, outer (end) corner full.
+    trailing: [...surface, "group gap-1 px-3 rounded-s-small rounded-e-full"],
+    chevron: [
+      "inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]",
+      "transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180"
+    ],
+    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)]",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ]
+  },
+  variants: {
+    variant: {
+      filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },
+      tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },
+      outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },
+      elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },
+      text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT }
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var SplitButton = createSplitButton({
+  group: splitButtonTv().group(),
+  leading: (variant) => splitButtonTv({ variant }).leading(),
+  trailing: (variant) => splitButtonTv({ variant }).trailing(),
+  chevron: splitButtonTv().chevron(),
+  popup: splitButtonTv().popup(),
+  item: splitButtonTv().item()
+});
 var navigationDrawerTv = tv7({
   slots: {
     root: "flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface",
@@ -1243,13 +1430,13 @@ var topAppBarTv = tv7({
   }
 });
 var TopAppBar = createTopAppBar((args) => {
-  const s13 = topAppBarTv({ variant: args.variant });
+  const s14 = topAppBarTv({ variant: args.variant });
   return {
-    root: s13.root(),
-    row: s13.row(),
-    leading: s13.leading(),
-    headline: s13.headline(),
-    trailing: s13.trailing()
+    root: s14.root(),
+    row: s14.row(),
+    leading: s14.leading(),
+    headline: s14.headline(),
+    trailing: s14.trailing()
   };
 });
 var bottomAppBarTv = tv7({
@@ -1403,7 +1590,292 @@ var SideSheet = createSideSheet({
   description: s12.description(),
   close: s12.close()
 });
+var searchTv = tv7({
+  slots: {
+    bar: [
+      "flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2",
+      "bg-surface-container-high text-on-surface rounded-full",
+      "transition-shadow duration-150 ease-standard",
+      "focus-within:shadow-level1"
+    ],
+    icon: [
+      "inline-flex shrink-0 items-center justify-center text-on-surface-variant",
+      "[&>svg]:size-6"
+    ],
+    input: [
+      "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
+      "text-body-large text-on-surface placeholder:text-on-surface-variant"
+    ],
+    clear: [
+      "relative inline-flex shrink-0 items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    popup: [
+      "w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2",
+      "bg-surface-container-high text-on-surface rounded-large shadow-level3",
+      "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"
+    ],
+    list: ["outline-none"],
+    item: [
+      "group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 overflow-hidden",
+      "cursor-pointer select-none outline-none text-body-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-[selected]:before:opacity-[var(--md-sys-state-pressed)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6"
+    ],
+    itemIndicator: [
+      "inline-flex items-center justify-center text-on-surface",
+      "invisible group-data-[selected]:visible"
+    ],
+    empty: ["px-4 py-3 text-body-medium text-on-surface-variant"],
+    separator: ["my-2 h-px border-0 bg-outline-variant"],
+    groupLabel: ["px-4 py-2 text-label-small text-on-surface-variant"]
+  }
+});
+var s13 = searchTv();
+var Search = createSearch({
+  bar: s13.bar(),
+  icon: s13.icon(),
+  input: s13.input(),
+  clear: s13.clear(),
+  popup: s13.popup(),
+  list: s13.list(),
+  item: s13.item(),
+  itemIndicator: s13.itemIndicator(),
+  empty: s13.empty(),
+  separator: s13.separator(),
+  groupLabel: s13.groupLabel()
+});
+var datePickerTv = tv7({
+  slots: {
+    calendar: ["w-[328px] max-w-full p-3 text-on-surface"],
+    header: ["flex items-center justify-between gap-2 h-12 pl-3 pr-1"],
+    navButton: [
+      "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none"
+    ],
+    monthLabel: [
+      "relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden",
+      "text-label-large text-on-surface-variant cursor-pointer outline-none",
+      "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)]",
+      "[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180"
+    ],
+    grid: ["mt-2 border-collapse", "[&_td]:p-0 [&_td]:text-center"],
+    weekdays: [""],
+    weekday: ["size-12 font-normal text-body-large text-on-surface-variant"],
+    day: [
+      "relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden",
+      "text-body-large text-on-surface cursor-pointer outline-none",
+      "before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // today: 1px primary outline ring
+      "data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary",
+      // selected: primary fill, on-primary label, no state layer tint shift
+      "data-[selected]:bg-primary data-[selected]:text-on-primary",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    // weeks render as 7-col rows; force grid layout on each row
+    yearGrid: ["grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2"],
+    yearButton: [
+      "relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden",
+      "text-label-large text-on-surface-variant cursor-pointer outline-none",
+      "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)]",
+      "data-[selected]:bg-primary data-[selected]:text-on-primary"
+    ],
+    field: [
+      "inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]",
+      "bg-surface-container-highest text-on-surface rounded-t-extra-small",
+      "border-b border-on-surface-variant"
+    ],
+    input: [
+      "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
+      "text-body-large text-on-surface placeholder:text-on-surface-variant"
+    ],
+    fieldIcon: [
+      "relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    popup: [
+      "bg-surface-container-high text-on-surface rounded-large 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"
+    ],
+    modalBackdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-200 ease-standard",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    modalPopup: [
+      "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+      "w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
+      "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
+      "flex flex-col",
+      "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"
+    ],
+    modalHeader: ["px-6 pt-4 text-label-medium text-on-surface-variant m-0"],
+    modalHeadline: ["px-6 pt-1 pb-4 text-headline-large text-on-surface m-0"],
+    modalActions: ["flex justify-end gap-2 px-6 pb-4 pt-2"]
+  }
+});
+var dp = datePickerTv();
+var DatePicker = createDatePicker({
+  calendar: dp.calendar(),
+  header: dp.header(),
+  navButton: dp.navButton(),
+  monthLabel: dp.monthLabel(),
+  grid: dp.grid(),
+  weekdays: dp.weekdays(),
+  weekday: dp.weekday(),
+  day: dp.day(),
+  yearGrid: dp.yearGrid(),
+  yearButton: dp.yearButton(),
+  field: dp.field(),
+  input: dp.input(),
+  fieldIcon: dp.fieldIcon(),
+  popup: dp.popup(),
+  modalBackdrop: dp.modalBackdrop(),
+  modalPopup: dp.modalPopup(),
+  modalHeader: dp.modalHeader(),
+  modalHeadline: dp.modalHeadline(),
+  modalActions: dp.modalActions()
+});
+var timePickerTv = tv7({
+  slots: {
+    root: ["inline-flex flex-col items-center gap-2 p-2 text-on-surface"],
+    header: ["flex items-center gap-2"],
+    field: [
+      "inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border",
+      "bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none",
+      "border border-transparent transition-colors duration-100",
+      "data-[selected]:bg-primary-container data-[selected]:text-on-primary-container"
+    ],
+    colon: ["text-display-large text-on-surface px-1 leading-none"],
+    periods: [
+      "inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch",
+      "m-0 p-0 min-w-0"
+    ],
+    period: [
+      "flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14",
+      "border-0 bg-transparent",
+      "text-title-medium text-on-surface-variant cursor-pointer outline-none",
+      "data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
+      "[&+&]:border-t [&+&]:border-outline"
+    ],
+    dial: [
+      "relative size-[256px] my-2 p-0 min-w-0 border-0 rounded-full bg-surface-container-highest"
+    ],
+    dialNumber: [
+      "absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full",
+      "border-0 bg-transparent",
+      "text-body-large text-on-surface cursor-pointer outline-none select-none",
+      "data-[selected]:bg-primary data-[selected]:text-on-primary"
+    ],
+    dialHand: [
+      "absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none"
+    ],
+    dialCenter: [
+      "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none"
+    ],
+    inputs: ["flex items-start gap-2"],
+    inputBox: [
+      "w-24 h-20 rounded-small box-border text-center",
+      "bg-surface-container-highest text-on-surface text-display-large outline-none",
+      "border border-outline focus:border-2 focus:border-primary",
+      "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+    ],
+    inputCaption: ["block mt-1 text-body-small text-on-surface-variant"]
+  }
+});
+var tp = timePickerTv();
+var TimePicker = createTimePicker(() => ({
+  root: tp.root(),
+  header: tp.header(),
+  field: tp.field(),
+  colon: tp.colon(),
+  periods: tp.periods(),
+  period: tp.period(),
+  dial: tp.dial(),
+  dialNumber: tp.dialNumber(),
+  dialHand: tp.dialHand(),
+  dialCenter: tp.dialCenter(),
+  inputs: tp.inputs(),
+  inputBox: tp.inputBox(),
+  inputCaption: tp.inputCaption()
+}));
+var toolbarTv = tv7({
+  base: "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6",
+  variants: {
+    variant: {
+      standard: "bg-surface-container text-on-surface-variant",
+      vibrant: "bg-primary-container text-on-primary-container [&_button]:text-on-primary-container [&_a]:text-on-primary-container"
+    },
+    orientation: {
+      horizontal: "flex-row h-16 px-2",
+      vertical: "flex-col w-16 py-2"
+    }
+  },
+  defaultVariants: { variant: "standard", orientation: "horizontal" }
+});
+var Toolbar = createToolbar(
+  ({ variant, orientation }) => toolbarTv({ variant, orientation })
+);
+var carouselTv = tv7({
+  slots: {
+    root: [
+      "flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth",
+      "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    ],
+    item: "snap-start shrink-0 overflow-hidden rounded-large"
+  },
+  variants: {
+    variant: {
+      "multi-browse": { item: "w-40 h-56" },
+      hero: { item: "w-72 h-56 snap-center" },
+      "full-screen": {
+        // gap-0: full-screen slides fill the viewport with no inter-slide gap.
+        root: "flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full",
+        item: "w-full h-full snap-center"
+      }
+    }
+  },
+  defaultVariants: { variant: "multi-browse" }
+});
+var Carousel = createCarousel((variant) => {
+  const s14 = carouselTv({ variant });
+  return { root: s14.root(), item: s14.item() };
+});
 
-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 };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map