@m3-baseui/react-tailwind 1.0.0

package/dist/select.js

@@ -0,0 +1,99 @@
+"use client";
+import { createSelect } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/select.ts
+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 tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/select.ts
+var selectTv = tv({
+  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 s = selectTv();
+var Select = createSelect({
+  trigger: s.trigger(),
+  value: s.value(),
+  icon: s.icon(),
+  popup: s.popup(),
+  item: s.item(),
+  itemIndicator: s.itemIndicator(),
+  groupLabel: s.groupLabel(),
+  scrollUpArrow: s.scrollUpArrow(),
+  scrollDownArrow: s.scrollDownArrow()
+});
+
+export { Select, selectTv };
+//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/select.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC7BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,OAAA,EAAS;AAAA,MACP,0EAAA;AAAA,MACA,kFAAA;AAAA,MACA,uEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,6FAAA;AAAA,MACA,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,iBAAA;AAAA,IACP,IAAA,EAAM,gJAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,gFAAA;AAAA,MACA,wEAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA,+BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,4FAAA;AAAA,MACA,yEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,qDAAA;AAAA;AAAA;AAAA,MAGA,6GAAA;AAAA,MACA,wEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,aAAA,EACE,2IAAA;AAAA,IACF,UAAA,EAAY,oDAAA;AAAA;AAAA,IAEZ,aAAA,EAAe;AAAA,MACb,wEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,2EAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,aAAA,EAAe,EAAE,aAAA,EAAc;AAAA,EAC/B,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,EACzB,aAAA,EAAe,EAAE,aAAA,EAAc;AAAA,EAC/B,eAAA,EAAiB,EAAE,eAAA;AACrB,CAAC","file":"select.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * select.ts — Tailwind classes for the M3 Select.\n *\n * Trigger = outlined field (56dp; 3dp primary border when open/focused, per the\n * M3 outlined-field focus-outline-width). Popup = M3 menu surface sized to the\n * anchor. Items mirror the Menu item (state layer + ripple) with a leading check\n * indicator. Same DOM as the VE build.\n *\n * Disabled follows the M3 outlined-field per-token opacities (not a blanket\n * fade): outline on-surface/0.12, label/value + icon on-surface/0.38.\n */\nimport { createSelect } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const selectTv = tv({\n  slots: {\n    trigger: [\n      'group relative inline-flex items-center justify-between gap-2 box-border',\n      'h-14 min-w-[200px] px-4 rounded-extra-small border border-outline bg-transparent',\n      'text-on-surface text-body-large cursor-pointer outline-none text-left',\n      'transition-colors duration-150 ease-standard',\n      // focus/open = 3dp primary outline; padding drops 2px to keep content steady\n      'data-[popup-open]:border-primary data-[popup-open]:border-[3px] data-[popup-open]:px-[14px]',\n      'focus-visible:border-primary focus-visible:border-[3px] focus-visible:px-[14px]',\n      'data-[disabled]:border-on-surface/[0.12] data-[disabled]:text-on-surface/[0.38] data-[disabled]:pointer-events-none',\n    ],\n    value: 'flex-1 truncate',\n    icon: 'flex text-on-surface-variant transition-transform duration-150 group-data-[popup-open]:rotate-180 group-data-[disabled]:text-on-surface/[0.38]',\n    popup: [\n      'min-w-[var(--anchor-width)] max-h-[var(--available-height)] py-2 overflow-auto',\n      'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n      'focus:outline-none',\n    ],\n    item: [\n      'group relative grid grid-cols-[24px_1fr_auto] items-center gap-2 h-12 px-3 overflow-hidden',\n      'cursor-pointer select-none outline-none text-body-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      // M3 disabled (per-token, not a blanket fade): label + trailing supporting\n      // text on-surface/0.38, no state layer.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      'data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]',\n      // M3 trailing supporting text (e.g. meta) sits in the last column.\n      '[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant',\n    ],\n    itemIndicator:\n      'inline-flex items-center justify-center text-primary invisible group-data-[selected]:visible group-data-[disabled]:text-on-surface/[0.38]',\n    groupLabel: 'px-3 py-2 text-label-small text-on-surface-variant',\n    // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.\n    scrollUpArrow: [\n      'sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default',\n      'bg-surface-container text-on-surface-variant [&>svg]:size-5',\n    ],\n    scrollDownArrow: [\n      'sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default',\n      'bg-surface-container text-on-surface-variant [&>svg]:size-5',\n    ],\n  },\n});\n\nconst s = selectTv();\nexport const Select = createSelect({\n  trigger: s.trigger(),\n  value: s.value(),\n  icon: s.icon(),\n  popup: s.popup(),\n  item: s.item(),\n  itemIndicator: s.itemIndicator(),\n  groupLabel: s.groupLabel(),\n  scrollUpArrow: s.scrollUpArrow(),\n  scrollDownArrow: s.scrollDownArrow(),\n});\n"]}

package/dist/slider.d.ts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+
+declare const sliderTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    control: string;
+    track: string[];
+    indicator: string[];
+    thumb: string[];
+    value: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    control: string;
+    track: string[];
+    indicator: string[];
+    thumb: string[];
+    value: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    control: string;
+    track: string[];
+    indicator: string[];
+    thumb: string[];
+    value: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Slider: {
+    Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.SliderRoot.Props<number | readonly number[]> & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }, "ref"> & react.RefAttributes<unknown>>;
+    Control: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderControlProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Track: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderTrackProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Thumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderValueProps, "ref"> & react.RefAttributes<HTMLOutputElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { Slider, sliderTv };

package/dist/slider.js

@@ -0,0 +1,71 @@
+"use client";
+import { createSlider } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/slider.ts
+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 tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/slider.ts
+var sliderTv = tv({
+  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 s = sliderTv();
+var Slider = createSlider({
+  root: s.root(),
+  control: s.control(),
+  track: s.track(),
+  indicator: s.indicator(),
+  thumb: s.thumb(),
+  value: s.value()
+});
+
+export { Slider, sliderTv };
+//# sourceMappingURL=slider.js.map
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/slider.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,gEAAA;AAAA,IACN,OAAA,EAAS,wCAAA;AAAA,IACT,KAAA,EAAO;AAAA,MACL,+DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,sCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sDAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA;AAEX,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"slider.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * slider.ts — Tailwind classes for the M3 Slider.\n *\n * 4dp rail (surface-container-highest) with a primary active indicator and a\n * 20dp primary thumb carrying a 40dp circular state layer (hover/focus/drag).\n *\n * Disabled follows M3 per-token opacities (not a blanket fade): inactive track\n * on-surface/0.12, active track + handle on-surface/0.38. The root carries a\n * `group` so the descendant parts can react to Base UI's data-disabled on Root.\n */\nimport { createSlider } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const sliderTv = tv({\n  slots: {\n    root: 'group relative flex items-center select-none w-full touch-none',\n    control: 'relative flex items-center w-full h-10',\n    track: [\n      'relative w-full h-1 rounded-full bg-surface-container-highest',\n      'group-data-[disabled]:bg-on-surface/[0.12]',\n    ],\n    indicator: [\n      'absolute h-1 rounded-full bg-primary',\n      'group-data-[disabled]:bg-on-surface/[0.38]',\n    ],\n    thumb: [\n      'relative size-5 rounded-full bg-primary outline-none',\n      'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n      'before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'data-[dragging]:before:opacity-[var(--md-sys-state-pressed)]',\n      'group-data-[disabled]:bg-on-surface/[0.38]',\n    ],\n    value: 'text-label-large text-on-surface-variant tabular-nums',\n  },\n});\n\nconst s = sliderTv();\nexport const Slider = createSlider({\n  root: s.root(),\n  control: s.control(),\n  track: s.track(),\n  indicator: s.indicator(),\n  thumb: s.thumb(),\n  value: s.value(),\n});\n"]}

package/dist/snackbar.d.ts

@@ -0,0 +1,108 @@
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+export { useSnackbar } from '@m3-baseui/core';
+
+declare const snackbarTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    viewport: string[];
+    root: string[];
+    content: string;
+    title: string;
+    description: string;
+    action: string[];
+    close: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    viewport: string[];
+    root: string[];
+    content: string;
+    title: string;
+    description: string;
+    action: string[];
+    close: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    viewport: string[];
+    root: string[];
+    content: string;
+    title: string;
+    description: string;
+    action: string[];
+    close: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            action?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            viewport?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Snackbar: {
+    Provider: react.FC<_base_ui_react.ToastProviderProps>;
+    Portal: react.ComponentType<react.HTMLAttributes<HTMLDivElement> & {
+        container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
+        keepMounted?: boolean;
+        render?: React.ReactElement | ((props: Record<string, unknown>, state: Record<string, unknown>) => React.ReactElement);
+    }>;
+    Viewport: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Root: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Content: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastContentProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Title: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<unknown>>;
+    Description: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<unknown>>;
+    Action: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastActionProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
+    Close: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ToastCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { Snackbar, snackbarTv };

package/dist/snackbar.js

@@ -0,0 +1,57 @@
+"use client";
+import { createSnackbar } from '@m3-baseui/core';
+export { useSnackbar } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/snackbar.ts
+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 s = snackbarTv();
+var Snackbar = createSnackbar({
+  viewport: s.viewport(),
+  root: s.root(),
+  content: s.content(),
+  title: s.title(),
+  description: s.description(),
+  action: s.action(),
+  close: s.close()
+});
+
+export { Snackbar, snackbarTv };
+//# sourceMappingURL=snackbar.js.map
+//# sourceMappingURL=snackbar.js.map

package/dist/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/snackbar.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,qEAAA;AAAA,MACA,8EAAA;AAAA,MACA,kBAAA;AAAA,MACA,6DAAA;AAAA,MACA,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA,EAAS,sCAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,WAAA,EAAa,4BAAA;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,oFAAA;AAAA,MACA,yEAAA;AAAA,MACA,uCAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,+FAAA;AAAA,MACA,6EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"snackbar.js","sourcesContent":["/**\n * snackbar.ts — tailwind-variants slots for the M3 Snackbar.\n *\n * Inverse-surface container, extra-small corners, elevation level3. The Action\n * is an inverse-primary text button with a state layer + ripple. Enter/exit key\n * off Toast's `data-starting-style` / `data-ending-style`. Same DOM as VE.\n */\nimport { createSnackbar } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport { useSnackbar } from '@m3-baseui/core';\n\nexport const snackbarTv = tv({\n  slots: {\n    viewport: [\n      'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',\n      'flex flex-col gap-2 w-[min(560px,calc(100vw-32px))]',\n    ],\n    root: [\n      'relative flex items-center gap-2 min-h-12 box-border pl-4 pr-2 py-2',\n      'rounded-extra-small bg-inverse-surface text-inverse-on-surface shadow-level3',\n      'text-body-medium',\n      'transition-[opacity,transform] duration-200 ease-emphasized',\n      'data-[starting-style]:opacity-0 data-[starting-style]:translate-y-2',\n      'data-[ending-style]:opacity-0',\n    ],\n    content: 'flex flex-col flex-1 min-w-0 gap-0.5',\n    title: 'text-body-medium',\n    description: 'text-body-small opacity-90',\n    action: [\n      'relative inline-flex items-center justify-center shrink-0 h-9 px-3 overflow-hidden',\n      'rounded-extra-small bg-transparent border-0 cursor-pointer outline-none',\n      'text-inverse-primary text-label-large',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n    close: [\n      'relative inline-flex items-center justify-center shrink-0 size-8 rounded-full overflow-hidden',\n      'bg-transparent border-0 cursor-pointer text-inverse-on-surface outline-none',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n  },\n});\n\nconst s = snackbarTv();\nexport const Snackbar = createSnackbar({\n  viewport: s.viewport(),\n  root: s.root(),\n  content: s.content(),\n  title: s.title(),\n  description: s.description(),\n  action: s.action(),\n  close: s.close(),\n});\n"]}

package/dist/switch.d.ts

@@ -0,0 +1,72 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+
+declare const switchTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            iconChecked?: tailwind_variants.ClassValue;
+            iconUnchecked?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            iconChecked?: tailwind_variants.ClassValue;
+            iconUnchecked?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    thumb: string[];
+    iconChecked: string[];
+    iconUnchecked: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            iconChecked?: tailwind_variants.ClassValue;
+            iconUnchecked?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            iconChecked?: tailwind_variants.ClassValue;
+            iconUnchecked?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    thumb: string[];
+    iconChecked: string[];
+    iconUnchecked: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    thumb: string[];
+    iconChecked: string[];
+    iconUnchecked: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+            iconChecked?: tailwind_variants.ClassValue;
+            iconUnchecked?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Switch: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SwitchRootProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & {
+    icons?: _m3_baseui_core.SwitchIcons;
+} & react.RefAttributes<HTMLElement>>;
+
+export { Switch, switchTv };

package/dist/switch.js

@@ -0,0 +1,66 @@
+"use client";
+import { createSwitch } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/switch.ts
+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()
+});
+
+export { Switch, switchTv };
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/switch.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,kGAAA;AAAA,MACA,6CAAA;AAAA,MACA,8CAAA;AAAA,MACA,yDAAA;AAAA,MACA,4FAAA;AAAA,MACA,qCAAA;AAAA;AAAA;AAAA,MAGA,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,kCAAA;AAAA,MACA,4BAAA;AAAA,MACA,2CAAA;AAAA,MACA,2GAAA;AAAA;AAAA,MAEA,mFAAA;AAAA;AAAA;AAAA,MAGA,gHAAA;AAAA,MACA,0JAAA;AAAA;AAAA,MAEA,yCAAA;AAAA,MACA,uEAAA;AAAA;AAAA,MAEA,wCAAA;AAAA,MACA,iDAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,WAAA,EAAa;AAAA,MACX,qEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,qEAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,aAAA,EAAe,EAAE,aAAA;AACnB,CAAC","file":"switch.js","sourcesContent":["/**\n * switch.ts — tailwind-variants slots for the M3 Switch.\n *\n * Track + handle styled off Base UI's data-checked/data-disabled state. The\n * thumb grows and slides when checked; a 40dp circular state layer (`before:`)\n * reacts to hover/focus/press on the root via the `group` utility.\n */\nimport { createSwitch } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const switchTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex shrink-0 w-[52px] h-8 rounded-full border-2 box-border cursor-pointer',\n      'bg-surface-container-highest border-outline',\n      'transition-colors duration-200 ease-standard',\n      'data-[checked]:bg-primary data-[checked]:border-primary',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none',\n      // M3 disabled: faint track + outline (unselected); on-surface/12 track,\n      // no outline (selected). Not a blanket element opacity.\n      'data-[disabled]:bg-surface-container-highest/12 data-[disabled]:border-on-surface/12',\n      'data-[disabled]:data-[checked]:bg-on-surface/12 data-[disabled]:data-[checked]:border-transparent',\n    ],\n    thumb: [\n      'absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none',\n      'flex items-center justify-center',\n      'bg-outline text-on-surface',\n      'transition-all duration-200 ease-standard',\n      'data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary',\n      // M3 with-icon: the unchecked handle grows to 24dp to fit its icon\n      'data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6',\n      // M3 handle interaction colors: unselected outline→on-surface-variant,\n      // selected on-primary→primary-container on hover/focus/press\n      'group-hover:bg-on-surface-variant group-focus-visible:bg-on-surface-variant group-active:bg-on-surface-variant',\n      'group-hover:data-[checked]:bg-primary-container group-focus-visible:data-[checked]:bg-primary-container group-active:data-[checked]:bg-primary-container',\n      // M3 squish: handle grows to 28px while pressed, staying on its side\n      'group-active:left-0 group-active:size-7',\n      'group-active:data-[checked]:left-5 group-active:data-[checked]:size-7',\n      // M3 disabled handle: on-surface/38 (unselected), surface (selected)\n      'group-data-[disabled]:bg-on-surface/38',\n      'group-data-[disabled]:data-[checked]:bg-surface',\n      // 40dp circular state layer centered on the thumb\n      'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n      'before:size-10 before:rounded-full before:bg-current before:opacity-0 before:transition-opacity before:duration-100',\n      'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n      'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n    // Handle icons (16dp). Both stay mounted; the root's data-checked reveals one.\n    iconChecked: [\n      'hidden group-data-[checked]:inline-flex items-center justify-center',\n      'text-on-primary-container [&>svg]:size-4',\n    ],\n    iconUnchecked: [\n      'inline-flex group-data-[checked]:hidden items-center justify-center',\n      'text-surface-container-highest [&>svg]:size-4',\n    ],\n  },\n});\n\nconst s = switchTv();\nexport const Switch = createSwitch({\n  root: s.root(),\n  thumb: s.thumb(),\n  iconChecked: s.iconChecked(),\n  iconUnchecked: s.iconUnchecked(),\n});\n"]}