@m3-baseui/react-tailwind 1.0.0

package/dist/index.js

@@ -0,0 +1,1157 @@
+"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';
+export { Ripple, ThemeProvider, applyScheme, generateScheme, schemeToCssText, useSnackbar, useTheme } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/button.ts
+var button = tv({
+  base: [
+    "relative inline-flex items-center justify-center gap-2",
+    "h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0",
+    "text-label-large",
+    // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).
+    "data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4",
+    // Icon slot: 18dp, centered.
+    "[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center",
+    "[&_[data-slot=button-icon]>svg]:size-[18px]",
+    "transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]",
+    // State layer overlay
+    "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)]",
+    "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+    // Focus ring (M3: 3px secondary, 2px offset)
+    "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+    // Disabled: no interaction, no state layer, no elevation. Per-variant
+    // colors (container on-surface/12, label on-surface/38) live on each variant.
+    "disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0",
+    "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0"
+  ],
+  variants: {
+    // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;
+    // elevated rest level1→hover level2→pressed level1. Disabled container is
+    // on-surface/12 and label on-surface/38, matching material-web.
+    variant: {
+      filled: [
+        "bg-primary text-on-primary",
+        "hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      tonal: [
+        "bg-secondary-container text-on-secondary-container",
+        "hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      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"
+      ],
+      elevated: [
+        "bg-surface-container-low text-primary shadow-level1",
+        "hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      text: [
+        "bg-transparent text-primary px-3",
+        "disabled:text-on-surface/38",
+        "data-[disabled]:text-on-surface/38"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var Button = createButton(({ variant }) => button({ variant }));
+var WIDTHS = {
+  xs: { narrow: "w-7", default: "w-8", wide: "w-10" },
+  // 28 / 32 / 40
+  s: { narrow: "w-8", default: "w-10", wide: "w-13" },
+  // 32 / 40 / 52
+  m: { narrow: "w-12", default: "w-14", wide: "w-18" },
+  // 48 / 56 / 72
+  l: { narrow: "w-16", default: "w-24", wide: "w-32" },
+  // 64 / 96 / 128
+  xl: { narrow: "w-26", default: "w-34", wide: "w-46" }
+  // 104 / 136 / 184
+};
+var widthCompounds = Object.entries(WIDTHS).flatMap(
+  ([size, w]) => Object.entries(w).map(([width, klass]) => ({
+    size,
+    width,
+    class: klass
+  }))
+);
+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",
+    "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",
+    "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 ring (M3: 3px secondary, 2px offset)
+    "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+    // Disabled: no interaction, no state layer. Per-variant disabled colors
+    // (container on-surface/12, icon on-surface/38) live on each variant.
+    "disabled:pointer-events-none disabled:before:opacity-0",
+    "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
+  ],
+  variants: {
+    // Disabled icon is on-surface/38 for every variant; filled/tonal disabled
+    // container is on-surface/12; outlined disabled outline is on-surface/12
+    // (material-web parity).
+    variant: {
+      standard: [
+        "text-on-surface-variant",
+        "disabled:text-on-surface/38 data-[disabled]:text-on-surface/38"
+      ],
+      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"
+      ],
+      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"
+      ],
+      outlined: [
+        "border border-outline text-on-surface-variant",
+        "disabled:border-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38"
+      ]
+    },
+    selected: {
+      true: "",
+      false: ""
+    },
+    // Container height + icon size per M3 Expressive size. Width comes from the
+    // (size, width) compound variants below.
+    size: {
+      xs: "h-8 [&>svg]:size-5",
+      s: "h-10 [&>svg]:size-6",
+      m: "h-14 [&>svg]:size-6",
+      l: "h-24 [&>svg]:size-8",
+      xl: "h-[136px] [&>svg]:size-10"
+    },
+    width: {
+      narrow: "",
+      default: "",
+      wide: ""
+    }
+  },
+  compoundVariants: [
+    ...widthCompounds,
+    { variant: "standard", selected: true, class: "text-primary" },
+    { variant: "filled", selected: false, class: "bg-surface-container-highest text-primary" },
+    {
+      variant: "tonal",
+      selected: false,
+      class: "bg-surface-container-highest text-on-surface-variant"
+    },
+    {
+      variant: "outlined",
+      selected: true,
+      class: [
+        "bg-inverse-surface text-inverse-on-surface border-transparent",
+        // M3 disabled + selected: faint on-surface/12 container, no outline
+        // (icon falls back to on-surface/38 from the variant). NOT transparent.
+        "disabled:bg-on-surface/12 disabled:border-transparent",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:border-transparent"
+      ]
+    }
+  ],
+  defaultVariants: {
+    variant: "standard",
+    size: "s",
+    width: "default"
+  }
+});
+var IconButton = createIconButton(
+  ({ variant, selected, size, width }) => iconButton({ variant, selected, size, width })
+);
+var switchTv = tv({
+  slots: {
+    root: [
+      "group relative inline-flex shrink-0 w-[52px] h-8 rounded-full border-2 box-border cursor-pointer",
+      "bg-surface-container-highest border-outline",
+      "transition-colors duration-200 ease-standard",
+      "data-[checked]:bg-primary data-[checked]:border-primary",
+      "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      "data-[disabled]:pointer-events-none",
+      // M3 disabled: faint track + outline (unselected); on-surface/12 track,
+      // no outline (selected). Not a blanket element opacity.
+      "data-[disabled]:bg-surface-container-highest/12 data-[disabled]:border-on-surface/12",
+      "data-[disabled]:data-[checked]:bg-on-surface/12 data-[disabled]:data-[checked]:border-transparent"
+    ],
+    thumb: [
+      "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",
+      "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",
+      // M3 handle interaction colors: unselected outline→on-surface-variant,
+      // selected on-primary→primary-container on hover/focus/press
+      "group-hover:bg-on-surface-variant group-focus-visible:bg-on-surface-variant group-active:bg-on-surface-variant",
+      "group-hover:data-[checked]:bg-primary-container group-focus-visible:data-[checked]:bg-primary-container group-active:data-[checked]:bg-primary-container",
+      // M3 squish: handle grows to 28px while pressed, staying on its side
+      "group-active:left-0 group-active:size-7",
+      "group-active:data-[checked]:left-5 group-active:data-[checked]:size-7",
+      // M3 disabled handle: on-surface/38 (unselected), surface (selected)
+      "group-data-[disabled]:bg-on-surface/38",
+      "group-data-[disabled]:data-[checked]:bg-surface",
+      // 40dp circular state layer centered on the thumb
+      '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-current before:opacity-0 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)]"
+    ],
+    // Handle icons (16dp). Both stay mounted; the root's data-checked reveals one.
+    iconChecked: [
+      "hidden group-data-[checked]:inline-flex items-center justify-center",
+      "text-on-primary-container [&>svg]:size-4"
+    ],
+    iconUnchecked: [
+      "inline-flex group-data-[checked]:hidden items-center justify-center",
+      "text-surface-container-highest [&>svg]:size-4"
+    ]
+  }
+});
+var s = switchTv();
+var Switch = createSwitch({
+  root: s.root(),
+  thumb: s.thumb(),
+  iconChecked: s.iconChecked(),
+  iconUnchecked: s.iconUnchecked()
+});
+var checkboxTv = tv({
+  slots: {
+    root: [
+      "group relative inline-flex items-center justify-center shrink-0 box-border",
+      "size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent",
+      // Outline is on-surface-variant; the state layer (text/currentColor) is
+      // on-surface unselected, primary when selected (material-web).
+      "border-on-surface-variant text-on-surface",
+      "transition-colors duration-150 ease-standard",
+      "data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary",
+      "data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary",
+      // M3 pressed state layer inverts: unselected→primary, selected→on-surface
+      "active:text-primary",
+      "data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface",
+      // M3 error: error outline + error-filled box; state layer stays error
+      "data-[error]:border-error data-[error]:text-error data-[error]:active:text-error",
+      "data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error",
+      "data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error",
+      "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0",
+      // M3 disabled: unselected outline on-surface/38; selected/indeterminate
+      // box on-surface/38 with no outline (the check turns surface, below).
+      "data-[disabled]:border-on-surface/38",
+      "data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent",
+      "data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent",
+      // 40dp circular state layer
+      '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-current before:opacity-0 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)]"
+    ],
+    indicator: [
+      "group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary",
+      // M3 error: the check / dash turn on-error on the error-filled box
+      "group-data-[error]:text-on-error",
+      // M3 disabled: the check / dash turn the surface color on the faint box
+      "group-data-[disabled]:text-surface",
+      "opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100",
+      '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"
+    ],
+    icon: ["w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0"]
+  }
+});
+var c = checkboxTv();
+var Checkbox = createCheckbox({
+  root: c.root(),
+  indicator: c.indicator(),
+  icon: c.icon()
+});
+var radioTv = tv({
+  slots: {
+    root: [
+      "group relative inline-flex items-center justify-center shrink-0 box-border",
+      "size-5 rounded-full border-2 cursor-pointer bg-transparent",
+      // Ring is on-surface-variant; the state layer (text/currentColor) is
+      // on-surface unselected, primary when selected (material-web).
+      "border-on-surface-variant text-on-surface",
+      "transition-colors duration-150 ease-standard",
+      "data-[checked]:border-primary data-[checked]:text-primary",
+      // M3 pressed state layer inverts: unselected→primary, selected→on-surface
+      "active:text-primary",
+      "data-[checked]:active:text-on-surface",
+      // M3 error: error ring + error state layer in every interaction state
+      "data-[error]:border-error data-[error]:text-error data-[error]:active:text-error",
+      "data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error",
+      "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      // M3 disabled: ring (and dot) turn on-surface/38; no state layer.
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0",
+      "data-[disabled]:border-on-surface/38",
+      '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-current before:opacity-0 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)]"
+    ],
+    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",
+      "group-data-[error]:bg-error",
+      "group-data-[disabled]:bg-on-surface/38"
+    ]
+  }
+});
+var r = radioTv();
+var Radio = createRadio({ root: r.root(), indicator: r.indicator() });
+var RadioGroup = createRadioGroup("inline-flex flex-col gap-1");
+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",
+      "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",
+      "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)]",
+      "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0",
+      "disabled:pointer-events-none disabled:before:opacity-0",
+      "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12",
+      "disabled:text-on-surface/38 disabled:border-on-surface/12"
+    ],
+    remove: [
+      "inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent",
+      "text-on-surface-variant cursor-pointer hover:opacity-80"
+    ],
+    check: [
+      "inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none",
+      "transition-all duration-150 ease-standard",
+      "group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100"
+    ],
+    // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.
+    avatar: [
+      "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"
+    ]
+  },
+  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" },
+      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"
+        ]
+      }
+    },
+    // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,
+    // no outline. Disabled drops the shadow.
+    elevated: {
+      true: {
+        root: [
+          "bg-surface-container-low border-transparent shadow-level1",
+          "hover:shadow-level2 active:shadow-level1",
+          "disabled:shadow-none data-[disabled]:shadow-none"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "assist"
+  }
+});
+var Chip = createChip(({ variant, elevated }) => {
+  const c3 = chipTv({ variant, elevated });
+  return { root: c3.root(), remove: c3.remove(), check: c3.check(), avatar: c3.avatar() };
+});
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var tv7 = (options, config) => tv(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/tooltip.ts
+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"
+    ],
+    arrow: ["text-inverse-surface"]
+  }
+});
+var t = tooltipTv();
+var Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });
+var dialogTv = tv7({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-200 ease-standard",
+      "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",
+      "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"
+    ],
+    title: ["text-headline-small text-on-surface m-0"],
+    description: ["text-body-medium text-on-surface-variant m-0"],
+    close: ["inline-flex"]
+  }
+});
+var d = dialogTv();
+var Dialog = createDialog({
+  backdrop: d.backdrop(),
+  popup: d.popup(),
+  title: d.title(),
+  description: d.description(),
+  close: d.close()
+});
+var menuTv = tv7({
+  slots: {
+    popup: [
+      "min-w-[112px] max-w-[280px] py-2",
+      "bg-surface-container text-on-surface rounded-extra-small shadow-level2",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0",
+      "focus:outline-none"
+    ],
+    item: [
+      "relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
+      "text-label-large text-on-surface",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token, not a blanket fade): label + leading/trailing
+      // icon on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38] data-[disabled]:[&_[data-slot=menu-trailing]]:text-on-surface/[0.38]",
+      // M3 leading icon (24dp) + trailing supporting text (shortcut/meta).
+      "[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6",
+      "[&_[data-slot=menu-trailing]]:ml-auto [&_[data-slot=menu-trailing]]:pl-4 [&_[data-slot=menu-trailing]]:text-label-large [&_[data-slot=menu-trailing]]:text-on-surface-variant"
+    ],
+    separator: ["my-2 h-px border-0 bg-outline-variant"],
+    groupLabel: ["px-3 py-2 text-label-small text-on-surface-variant"],
+    // Submenu trigger: item look + trailing chevron, highlighted while open.
+    submenuTrigger: [
+      "relative flex items-center justify-between gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
+      "text-label-large text-on-surface",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[popup-open]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token): label + leading icon on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "data-[disabled]:[&_[data-slot=menu-leading]]:text-on-surface/[0.38]",
+      "[&_[data-slot=menu-leading]]:inline-flex [&_[data-slot=menu-leading]]:text-on-surface-variant [&_[data-slot=menu-leading]>svg]:size-6"
+    ],
+    // Selectable items: 24dp leading indicator column + label.
+    checkboxItem: [
+      "group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden",
+      "cursor-pointer select-none outline-none text-label-large text-on-surface",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token): label on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    radioItem: [
+      "group relative grid grid-cols-[24px_1fr] items-center gap-3 h-12 px-3 overflow-hidden",
+      "cursor-pointer select-none outline-none text-label-large text-on-surface",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token): label on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ],
+    itemIndicator: "inline-flex items-center justify-center text-on-surface invisible group-data-[checked]:visible group-data-[disabled]:text-on-surface/[0.38]"
+  }
+});
+var m = menuTv();
+var Menu = createMenu({
+  popup: m.popup(),
+  item: m.item(),
+  separator: m.separator(),
+  groupLabel: m.groupLabel(),
+  submenuTrigger: m.submenuTrigger(),
+  checkboxItem: m.checkboxItem(),
+  radioItem: m.radioItem(),
+  itemIndicator: m.itemIndicator()
+});
+var tabsTv = tv7({
+  slots: {
+    root: "flex flex-col",
+    list: [
+      "relative flex border-b border-surface-variant",
+      // M3 scrollable tabs: horizontal overflow, no wrap, hidden scrollbar.
+      "data-[scrollable]:overflow-x-auto data-[scrollable]:flex-nowrap",
+      "data-[scrollable]:[scrollbar-width:none] data-[scrollable]:[&::-webkit-scrollbar]:hidden"
+    ],
+    tab: [
+      "relative flex shrink-0 items-center justify-center gap-2 h-12 px-4 overflow-hidden",
+      "cursor-pointer select-none border-0 bg-transparent outline-none text-title-small",
+      "text-on-surface-variant",
+      // Icon slot (24dp), centered.
+      "[&_[data-slot=tab-icon]]:inline-flex [&_[data-slot=tab-icon]>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)]",
+      // M3 disabled (per-token, not a blanket fade): label + icon on-surface/0.38,
+      // no state layer. currentColor carries the dim to the icon slot.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      // A disabled tab that is also the active value stays dimmed: the variant's
+      // data-[active] color has equal specificity, so a combined selector wins.
+      "data-[disabled]:data-[active]:text-on-surface/[0.38]"
+    ],
+    indicator: [
+      "absolute bottom-0 left-0 bg-primary",
+      "w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)]",
+      "transition-all duration-200 ease-standard"
+    ],
+    panel: "p-4 outline-none"
+  },
+  variants: {
+    variant: {
+      // primary: 3dp active indicator with rounded top corners; icon stacks
+      // above the label (64dp tall) when a tab carries an icon.
+      primary: {
+        tab: "data-[active]:text-primary data-[with-icon]:flex-col data-[with-icon]:h-16 data-[with-icon]:gap-1",
+        indicator: "h-[3px] rounded-t-[3px]"
+      },
+      // secondary: 2dp square active indicator, active label = on-surface
+      secondary: { tab: "data-[active]:text-on-surface", indicator: "h-[2px]" }
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+var Tabs = createTabs((variant) => {
+  const s9 = tabsTv({ variant });
+  return {
+    root: s9.root(),
+    list: s9.list(),
+    tab: s9.tab(),
+    indicator: s9.indicator(),
+    panel: s9.panel()
+  };
+});
+var sliderTv = tv7({
+  slots: {
+    root: "group relative flex items-center select-none w-full touch-none",
+    control: "relative flex items-center w-full h-10",
+    track: [
+      "relative w-full h-1 rounded-full bg-surface-container-highest",
+      "group-data-[disabled]:bg-on-surface/[0.12]"
+    ],
+    indicator: [
+      "absolute h-1 rounded-full bg-primary",
+      "group-data-[disabled]:bg-on-surface/[0.38]"
+    ],
+    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)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "data-[dragging]:before:opacity-[var(--md-sys-state-pressed)]",
+      "group-data-[disabled]:bg-on-surface/[0.38]"
+    ],
+    value: "text-label-large text-on-surface-variant tabular-nums"
+  }
+});
+var s2 = sliderTv();
+var Slider = createSlider({
+  root: s2.root(),
+  control: s2.control(),
+  track: s2.track(),
+  indicator: s2.indicator(),
+  thumb: s2.thumb(),
+  value: s2.value()
+});
+var selectTv = tv7({
+  slots: {
+    trigger: [
+      "group relative inline-flex items-center justify-between gap-2 box-border",
+      "h-14 min-w-[200px] px-4 rounded-extra-small border border-outline bg-transparent",
+      "text-on-surface text-body-large cursor-pointer outline-none text-left",
+      "transition-colors duration-150 ease-standard",
+      // focus/open = 3dp primary outline; padding drops 2px to keep content steady
+      "data-[popup-open]:border-primary data-[popup-open]:border-[3px] data-[popup-open]:px-[14px]",
+      "focus-visible:border-primary focus-visible:border-[3px] focus-visible:px-[14px]",
+      "data-[disabled]:border-on-surface/[0.12] data-[disabled]:text-on-surface/[0.38] data-[disabled]:pointer-events-none"
+    ],
+    value: "flex-1 truncate",
+    icon: "flex text-on-surface-variant transition-transform duration-150 group-data-[popup-open]:rotate-180 group-data-[disabled]:text-on-surface/[0.38]",
+    popup: [
+      "min-w-[var(--anchor-width)] max-h-[var(--available-height)] py-2 overflow-auto",
+      "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: [
+      "group relative grid grid-cols-[24px_1fr_auto] items-center gap-2 h-12 px-3 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)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token, not a blanket fade): label + trailing supporting
+      // text on-surface/0.38, no state layer.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]",
+      // M3 trailing supporting text (e.g. meta) sits in the last column.
+      "[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant"
+    ],
+    itemIndicator: "inline-flex items-center justify-center text-primary invisible group-data-[selected]:visible group-data-[disabled]:text-on-surface/[0.38]",
+    groupLabel: "px-3 py-2 text-label-small text-on-surface-variant",
+    // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.
+    scrollUpArrow: [
+      "sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default",
+      "bg-surface-container text-on-surface-variant [&>svg]:size-5"
+    ],
+    scrollDownArrow: [
+      "sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default",
+      "bg-surface-container text-on-surface-variant [&>svg]:size-5"
+    ]
+  }
+});
+var s3 = selectTv();
+var Select = createSelect({
+  trigger: s3.trigger(),
+  value: s3.value(),
+  icon: s3.icon(),
+  popup: s3.popup(),
+  item: s3.item(),
+  itemIndicator: s3.itemIndicator(),
+  groupLabel: s3.groupLabel(),
+  scrollUpArrow: s3.scrollUpArrow(),
+  scrollDownArrow: s3.scrollDownArrow()
+});
+var textFieldTv = tv({
+  slots: {
+    root: "flex flex-col gap-1 min-w-[210px]",
+    field: [
+      "relative flex items-stretch gap-3 h-14 px-4 box-border",
+      "transition-[border-color,padding] duration-150 ease-standard",
+      "group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none"
+    ],
+    inputWrap: "relative flex-1 flex items-center min-w-0",
+    input: [
+      "peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface",
+      "placeholder:text-on-surface-variant"
+    ],
+    label: [
+      "absolute left-0 pointer-events-none origin-left",
+      "top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant",
+      "transition-all duration-150 ease-standard",
+      "group-data-[focused]:text-primary group-data-[invalid]:text-error"
+    ],
+    leadingIcon: "flex items-center shrink-0 text-on-surface-variant",
+    trailingIcon: "flex items-center shrink-0 text-on-surface-variant",
+    supporting: [
+      "flex justify-between gap-4 px-4 text-body-small text-on-surface-variant",
+      "group-data-[invalid]:text-error"
+    ],
+    supportingText: "min-w-0",
+    counter: "shrink-0 tabular-nums"
+  },
+  variants: {
+    variant: {
+      filled: {
+        field: [
+          "rounded-t-extra-small bg-surface-container-highest",
+          "border-b-2 border-outline",
+          "group-data-[focused]:border-primary group-data-[invalid]:border-error"
+        ],
+        input: "pt-3",
+        label: [
+          "group-data-[focused]:top-1.5 group-data-[focused]:translate-y-0 group-data-[focused]:text-body-small",
+          "group-data-[filled]:top-1.5 group-data-[filled]:translate-y-0 group-data-[filled]:text-body-small"
+        ]
+      },
+      outlined: {
+        field: [
+          "rounded-extra-small border border-outline",
+          "group-data-[focused]:border-2 group-data-[focused]:border-primary group-data-[focused]:px-[15px]",
+          "group-data-[invalid]:border-error"
+        ],
+        label: [
+          "group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1",
+          "group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var TextField = createTextField(({ variant }) => {
+  const c3 = textFieldTv({ variant });
+  return {
+    root: c3.root(),
+    field: c3.field(),
+    inputWrap: c3.inputWrap(),
+    input: c3.input(),
+    label: c3.label(),
+    leadingIcon: c3.leadingIcon(),
+    trailingIcon: c3.trailingIcon(),
+    supporting: c3.supporting(),
+    supportingText: c3.supportingText(),
+    counter: c3.counter()
+  };
+});
+var navigationBarTv = tv({
+  slots: {
+    root: "flex items-stretch justify-around w-full h-20 bg-surface-container",
+    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"
+    ],
+    iconWrap: "relative flex items-center justify-center w-16 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)]"
+    ],
+    icon: [
+      "relative flex items-center justify-center text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:text-on-secondary-container"
+    ],
+    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"
+    ]
+  }
+});
+var s4 = navigationBarTv();
+var NavigationBar = createNavigationBar({
+  root: s4.root(),
+  item: s4.item(),
+  iconWrap: s4.iconWrap(),
+  indicator: s4.indicator(),
+  icon: s4.icon(),
+  label: s4.label()
+});
+var fabTv = tv({
+  base: [
+    "relative inline-flex items-center justify-center box-border overflow-hidden",
+    "border-0 cursor-pointer select-none outline-none",
+    "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)]",
+    "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)]",
+    "disabled:opacity-[0.38] disabled:pointer-events-none disabled:shadow-none",
+    "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none data-[disabled]:shadow-none"
+  ],
+  variants: {
+    size: {
+      small: "size-10 rounded-medium [&_svg]:size-6",
+      regular: "size-14 rounded-large [&_svg]:size-6",
+      large: "size-24 rounded-extra-large [&_svg]:size-9",
+      extended: "h-14 min-w-20 px-4 gap-3 rounded-large text-label-large [&_svg]:size-6"
+    },
+    color: {
+      surface: "bg-surface-container-high text-primary",
+      primary: "bg-primary-container text-on-primary-container",
+      secondary: "bg-secondary-container text-on-secondary-container",
+      tertiary: "bg-tertiary-container text-on-tertiary-container"
+    }
+  },
+  defaultVariants: {
+    size: "regular",
+    color: "surface"
+  }
+});
+var Fab = createFab(({ size, color }) => fabTv({ size, color }));
+var dividerTv = tv({
+  base: "shrink-0 self-stretch border-0 bg-outline-variant",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-auto",
+      vertical: "w-px h-auto"
+    },
+    inset: {
+      full: "",
+      inset: "",
+      middle: ""
+    }
+  },
+  compoundVariants: [
+    { orientation: "horizontal", inset: "inset", class: "ms-4" },
+    { orientation: "horizontal", inset: "middle", class: "mx-4" },
+    { orientation: "vertical", inset: "inset", class: "mt-4" },
+    { orientation: "vertical", inset: "middle", class: "my-4" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    inset: "full"
+  }
+});
+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",
+    indicator: [
+      "absolute inset-y-0 left-0 bg-primary rounded-full",
+      "transition-[width] duration-200 ease-standard",
+      "group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none",
+      "group-data-[indeterminate]:animate-m3-linear-indeterminate"
+    ]
+  }
+});
+var circularTv = tv({
+  slots: {
+    root: [
+      "inline-flex items-center justify-center size-12",
+      "[&_svg]:block [&_svg]:size-full",
+      "data-[indeterminate]:animate-spin"
+    ],
+    track: "stroke-surface-container-highest [stroke-width:4px]",
+    indicator: [
+      "stroke-primary [stroke-width:4px] [stroke-linecap:round]",
+      "transition-[stroke-dashoffset] duration-300 ease-standard"
+    ]
+  }
+});
+var l = linearTv();
+var c2 = circularTv();
+var Progress = createProgress({
+  linear: { root: l.root(), track: l.track(), indicator: l.indicator() },
+  circular: { root: c2.root(), track: c2.track(), indicator: c2.indicator() }
+});
+var listTv = tv7({
+  slots: {
+    root: "list-none m-0 px-0 py-2 bg-transparent",
+    item: [
+      "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",
+    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",
+    trailing: [
+      "flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6",
+      "group-data-[disabled]:text-on-surface/38"
+    ]
+  },
+  variants: {
+    lines: {
+      1: { item: "min-h-14 py-2" },
+      2: { item: "min-h-[72px] py-2" },
+      3: { item: "min-h-[88px] items-start py-3" }
+    },
+    interactive: {
+      true: {
+        item: [
+          "cursor-pointer select-none overflow-hidden 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)]",
+          "active:before:opacity-[var(--md-sys-state-pressed)]",
+          "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0",
+          "disabled:pointer-events-none disabled:before:opacity-0"
+        ]
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    lines: 1,
+    interactive: false
+  }
+});
+var List = createList({
+  root: listTv().root(),
+  item: ({ lines, interactive }) => {
+    const c3 = listTv({ lines, interactive });
+    return {
+      item: c3.item(),
+      leading: c3.leading(),
+      content: c3.content(),
+      headline: c3.headline(),
+      supporting: c3.supporting(),
+      trailing: c3.trailing()
+    };
+  }
+});
+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))]"
+    ],
+    root: [
+      "relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2",
+      "rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3",
+      "text-body-medium",
+      "transition-[opacity,transform] duration-200 ease-emphasized",
+      "data-[starting-style]:opacity-0 data-[starting-style]:translate-y-2",
+      "data-[ending-style]:opacity-0"
+    ],
+    content: "flex flex-col flex-1 min-w-0 gap-0.5",
+    title: "text-body-medium",
+    description: "text-body-small opacity-90",
+    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",
+      "text-inverse-primary text-label-large",
+      "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)]"
+    ],
+    close: [
+      "relative inline-flex items-center justify-center shrink-0 size-8 rounded-full overflow-hidden",
+      "bg-transparent border-0 cursor-pointer text-inverse-on-surface 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)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]"
+    ]
+  }
+});
+var s5 = snackbarTv();
+var Snackbar = createSnackbar({
+  viewport: s5.viewport(),
+  root: s5.root(),
+  content: s5.content(),
+  title: s5.title(),
+  description: s5.description(),
+  action: s5.action(),
+  close: s5.close()
+});
+var itemTv = tv7({
+  slots: {
+    root: [
+      "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",
+    content: "flex flex-col min-w-0 flex-1",
+    overline: "text-label-small text-on-surface-variant",
+    headline: "text-body-large text-on-surface",
+    supporting: "text-body-medium text-on-surface-variant",
+    trailing: "flex items-center shrink-0 text-label-small text-on-surface-variant [&_svg]:size-6"
+  }
+});
+var s6 = itemTv();
+var Item = createItem({
+  root: s6.root(),
+  leading: s6.leading(),
+  content: s6.content(),
+  overline: s6.overline(),
+  headline: s6.headline(),
+  supporting: s6.supporting(),
+  trailing: s6.trailing()
+});
+var badgeTv = tv7({
+  base: "pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error",
+  variants: {
+    size: {
+      small: "absolute top-1 right-1 size-1.5 rounded-full",
+      large: "absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full text-label-small leading-none tabular-nums"
+    }
+  }
+});
+var Badge = createBadge({
+  root: ({ size }) => badgeTv({ size })
+});
+var cardTv = tv7({
+  base: "relative box-border rounded-medium text-on-surface",
+  variants: {
+    variant: {
+      elevated: "bg-surface-container-low shadow-level1",
+      filled: "bg-surface-container-highest",
+      outlined: "bg-surface border border-outline-variant"
+    },
+    interactive: {
+      true: [
+        "group overflow-hidden cursor-pointer select-none text-left w-full 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)]",
+        "active:before:opacity-[var(--md-sys-state-pressed)]",
+        "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+        // M3 disabled: drop the shadow + state layer, dim the content per-token.
+        "disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38",
+        "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38"
+      ],
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.
+    {
+      variant: "elevated",
+      interactive: true,
+      class: "hover:shadow-level2 active:shadow-level1"
+    }
+  ],
+  defaultVariants: {
+    variant: "elevated",
+    interactive: false
+  }
+});
+var Card = createCard({
+  root: ({ variant, interactive }) => cardTv({ variant, interactive })
+});
+var segmentedButtonTv = tv7({
+  slots: {
+    root: "inline-flex items-stretch h-10 rounded-full border border-outline overflow-hidden",
+    item: [
+      "group relative inline-flex flex-1 items-center justify-center gap-2 px-3 min-w-12",
+      "bg-transparent border-0 border-l border-outline first:border-l-0 cursor-pointer select-none outline-none",
+      "text-label-large text-on-surface",
+      "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",
+      "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]:bg-secondary-container data-[pressed]:text-on-secondary-container",
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38",
+      "disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38"
+    ],
+    check: [
+      "inline-flex items-center justify-center shrink-0 h-[18px] w-0 opacity-0 overflow-hidden pointer-events-none",
+      "transition-all duration-150 ease-standard",
+      "group-data-[pressed]:w-[18px] group-data-[pressed]:opacity-100"
+    ],
+    icon: "inline-flex items-center justify-center shrink-0 [&_svg]:size-[18px] group-data-[pressed]:hidden",
+    label: "truncate"
+  }
+});
+var s7 = segmentedButtonTv();
+var SegmentedButton = createSegmentedButton({
+  root: s7.root(),
+  item: s7.item(),
+  check: s7.check(),
+  icon: s7.icon(),
+  label: s7.label()
+});
+var navigationDrawerTv = tv7({
+  slots: {
+    root: "flex flex-col gap-1 box-border w-[360px] p-3 bg-surface-container-low text-on-surface",
+    headline: "px-4 pt-4 pb-1 text-title-small text-on-surface-variant",
+    item: [
+      "group relative flex w-full items-center gap-3 box-border h-14 px-4 rounded-full text-left",
+      "bg-transparent border-0 text-on-surface-variant no-underline cursor-pointer select-none overflow-hidden outline-none",
+      "text-label-large",
+      "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",
+      "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-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38",
+      "disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38"
+    ],
+    leading: "flex items-center justify-center shrink-0 [&_svg]:size-6",
+    label: "flex-1 min-w-0 truncate",
+    trailing: "flex items-center shrink-0 text-label-small"
+  },
+  variants: {
+    variant: {
+      standard: {},
+      modal: { root: "shadow-level1 rounded-e-large" }
+    }
+  },
+  defaultVariants: {
+    variant: "standard"
+  }
+});
+var s8 = navigationDrawerTv();
+var NavigationDrawer = createNavigationDrawer({
+  root: ({ variant }) => navigationDrawerTv({ variant }).root(),
+  headline: s8.headline(),
+  item: s8.item(),
+  leading: s8.leading(),
+  label: s8.label(),
+  trailing: s8.trailing()
+});
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map