@m3-baseui/react-tailwind 1.1.0 → 1.3.0

package/dist/slider.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -12,6 +13,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
             indicator?: tailwind_variants.ClassValue;
             thumb?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
+            tickList?: tailwind_variants.ClassValue;
+            tick?: tailwind_variants.ClassValue;
+            valueLabel?: tailwind_variants.ClassValue;
         };
     };
 } | {
@@ -23,6 +27,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
             indicator?: tailwind_variants.ClassValue;
             thumb?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
+            tickList?: tailwind_variants.ClassValue;
+            tick?: tailwind_variants.ClassValue;
+            valueLabel?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
@@ -32,6 +39,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
     indicator: string[];
     thumb: string[];
     value: string;
+    tickList: string;
+    tick: string[];
+    valueLabel: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -41,6 +51,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
             indicator?: tailwind_variants.ClassValue;
             thumb?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
+            tickList?: tailwind_variants.ClassValue;
+            tick?: tailwind_variants.ClassValue;
+            valueLabel?: tailwind_variants.ClassValue;
         };
     };
 } | {}>, {
@@ -52,6 +65,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
             indicator?: tailwind_variants.ClassValue;
             thumb?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
+            tickList?: tailwind_variants.ClassValue;
+            tick?: tailwind_variants.ClassValue;
+            valueLabel?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
@@ -61,6 +77,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
     indicator: string[];
     thumb: string[];
     value: string;
+    tickList: string;
+    tick: string[];
+    valueLabel: string[];
 }, tailwind_variants.TVReturnType<unknown, {
     root: string;
     control: string;
@@ -68,6 +87,9 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
     indicator: string[];
     thumb: string[];
     value: string;
+    tickList: string;
+    tick: string[];
+    valueLabel: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -77,18 +99,23 @@ declare const sliderTv: tailwind_variants.TVReturnType<{
             indicator?: tailwind_variants.ClassValue;
             thumb?: tailwind_variants.ClassValue;
             control?: tailwind_variants.ClassValue;
+            tickList?: tailwind_variants.ClassValue;
+            tick?: tailwind_variants.ClassValue;
+            valueLabel?: 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>>;
+    }, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Control: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderControlProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Track: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderTrackProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Thumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SliderValueProps, "ref"> & react.RefAttributes<HTMLOutputElement>, "ref"> & react.RefAttributes<HTMLOutputElement>>;
+    TickList: react.ForwardRefExoticComponent<_m3_baseui_core.SliderTickListProps & react.RefAttributes<HTMLDivElement>>;
+    ValueLabel: react.ForwardRefExoticComponent<_m3_baseui_core.SliderValueLabelProps & react.RefAttributes<HTMLSpanElement>>;
 };
 
 export { Slider, sliderTv };

package/dist/slider.js

@@ -45,7 +45,7 @@ var sliderTv = tv({
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
     thumb: [
-      "relative size-5 rounded-full bg-primary outline-none",
+      "group/thumb relative size-5 rounded-full bg-primary outline-none",
       'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
       "before:size-10 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:duration-100",
       "hover:before:opacity-[var(--md-sys-state-hover)]",
@@ -53,7 +53,17 @@ var sliderTv = tv({
       "data-[dragging]:before:opacity-[var(--md-sys-state-dragged)]",
       "group-data-[disabled]:bg-on-surface/[0.38]"
     ],
-    value: "text-label-large text-on-surface-variant tabular-nums"
+    value: "text-label-large text-on-surface-variant tabular-nums",
+    tickList: "pointer-events-none absolute inset-0",
+    tick: [
+      "absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant",
+      "data-[active]:bg-on-primary/[0.38]"
+    ],
+    valueLabel: [
+      "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5",
+      "bg-primary text-label-large text-on-primary tabular-nums opacity-0",
+      "data-[visible]:opacity-100"
+    ]
   }
 });
 var s = sliderTv();
@@ -63,7 +73,10 @@ var Slider = createSlider({
   track: s.track(),
   indicator: s.indicator(),
   thumb: s.thumb(),
-  value: s.value()
+  value: s.value(),
+  tickList: s.tickList(),
+  tick: s.tick(),
+  valueLabel: s.valueLabel()
 });
 
 export { Slider, sliderTv };

package/dist/slider.js.map

@@ -1 +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-dragged)]',\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"]}
+{"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,kEAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,uDAAA;AAAA,IACP,QAAA,EAAU,sCAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,+GAAA;AAAA,MACA,oEAAA;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,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,EAAM;AAAA,EACf,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,UAAA,EAAY,EAAE,UAAA;AAChB,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      'group/thumb 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-dragged)]',\n      'group-data-[disabled]:bg-on-surface/[0.38]',\n    ],\n    value: 'text-label-large text-on-surface-variant tabular-nums',\n    tickList: 'pointer-events-none absolute inset-0',\n    tick: [\n      'absolute size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-surface-variant',\n      'data-[active]:bg-on-primary/[0.38]',\n    ],\n    valueLabel: [\n      'pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded px-2 py-0.5',\n      'bg-primary text-label-large text-on-primary tabular-nums opacity-0',\n      'data-[visible]:opacity-100',\n    ],\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  tickList: s.tickList(),\n  tick: s.tick(),\n  valueLabel: s.valueLabel(),\n});\n"]}

package/dist/split-button.d.ts

@@ -0,0 +1,201 @@
+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 from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const splitButtonTv: tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    group: string;
+    leading: string[];
+    trailing: string[];
+    chevron: string[];
+    popup: string[];
+    item: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}>, {
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    group: string;
+    leading: string[];
+    trailing: string[];
+    chevron: string[];
+    popup: string[];
+    item: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    group: string;
+    leading: string[];
+    trailing: string[];
+    chevron: string[];
+    popup: string[];
+    item: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const SplitButton: {
+    Root: <Payload>(props: _base_ui_react.MenuRoot.Props<Payload>) => react.JSX.Element;
+    Group: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonGroupOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Leading: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonLeadingOwnProps & react.ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+    Trailing: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonTrailingOwnProps & Omit<Omit<_base_ui_react.MenuTriggerProps<unknown> & react.RefAttributes<HTMLElement>, "ref">, "color"> & react.RefAttributes<HTMLButtonElement>>;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { SplitButton, splitButtonTv };

package/dist/split-button.js

@@ -0,0 +1,126 @@
+"use client";
+import { createSplitButton } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/split-button.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/split-button.ts
+var surface = [
+  "relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none",
+  "text-label-large",
+  "transition-[background-color,color,border-color] duration-200 ease-standard",
+  "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+  "hover:before:opacity-[var(--md-sys-state-hover)]",
+  "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+  "active:before:opacity-[var(--md-sys-state-pressed)]",
+  "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+  "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+  "disabled:pointer-events-none disabled:before:opacity-0",
+  "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0"
+];
+var VARIANT_FILLED = [
+  "bg-primary text-on-primary",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+];
+var VARIANT_TONAL = [
+  "bg-secondary-container text-on-secondary-container",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+];
+var VARIANT_OUTLINED = [
+  "bg-transparent text-primary border border-outline",
+  "disabled:text-on-surface/38 disabled:border-on-surface/12",
+  "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12"
+];
+var VARIANT_ELEVATED = [
+  "bg-surface-container-low text-primary shadow-level1",
+  "disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none",
+  "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+];
+var VARIANT_TEXT = [
+  "bg-transparent text-primary",
+  "disabled:text-on-surface/38",
+  "data-[disabled]:text-on-surface/38"
+];
+var splitButtonTv = tv({
+  slots: {
+    group: "inline-flex items-center gap-0.5",
+    // leading: outer (start) corner full, seam (end) corner reduced.
+    leading: [...surface, "gap-2 px-6 rounded-s-full rounded-e-small"],
+    // trailing: seam (start) corner reduced, outer (end) corner full.
+    trailing: [...surface, "group gap-1 px-3 rounded-s-small rounded-e-full"],
+    chevron: [
+      "inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]",
+      "transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180"
+    ],
+    popup: [
+      "min-w-[112px] max-w-[280px] py-2",
+      "bg-surface-container text-on-surface rounded-extra-small shadow-level2",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0",
+      "focus:outline-none"
+    ],
+    item: [
+      "relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none",
+      "text-label-large text-on-surface",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none"
+    ]
+  },
+  variants: {
+    variant: {
+      filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },
+      tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },
+      outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },
+      elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },
+      text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT }
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var SplitButton = createSplitButton({
+  group: splitButtonTv().group(),
+  leading: (variant) => splitButtonTv({ variant }).leading(),
+  trailing: (variant) => splitButtonTv({ variant }).trailing(),
+  chevron: splitButtonTv().chevron(),
+  popup: splitButtonTv().popup(),
+  item: splitButtonTv().item()
+});
+
+export { SplitButton, splitButtonTv };
+//# sourceMappingURL=split-button.js.map
+//# sourceMappingURL=split-button.js.map

package/dist/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/split-button.ts"],"names":["baseTv"],"mappings":"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","file":"split-button.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 * split-button.ts — tailwind-variants slots for the M3 SplitButton.\n *\n * Two 40dp surfaces joined by a 2dp seam: the leading primary-action button\n * keeps its outer (start) corner full and reduces the seam (end) corner; the\n * trailing menu trigger mirrors it. Both share the variant container color. The\n * trigger carries `group` so the default chevron can rotate via Base UI's\n * `data-[popup-open]`. The dropdown reuses the M3 menu surface. State layer is\n * the `::before` overlay; the pointer ripple is added by the factory. Same DOM\n * as the VE build.\n */\nimport { createSplitButton } from '@m3-baseui/core';\nimport { tv } from './tv';\n\n// Shared surface base for both the leading + trailing buttons.\nconst surface = [\n  'relative inline-flex items-center justify-center h-10 overflow-hidden cursor-pointer select-none border-0 outline-none',\n  'text-label-large',\n  'transition-[background-color,color,border-color] duration-200 ease-standard',\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  'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n  'disabled:pointer-events-none disabled:before:opacity-0',\n  'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n];\n\n// Per-variant container colors (identical on both surfaces). M3 disabled is\n// per-token (container on-surface/12, label on-surface/38), not a blanket fade.\nconst VARIANT_FILLED = [\n  'bg-primary text-on-primary',\n  'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n  'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n];\nconst VARIANT_TONAL = [\n  'bg-secondary-container text-on-secondary-container',\n  'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n  'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n];\nconst VARIANT_OUTLINED = [\n  'bg-transparent text-primary border border-outline',\n  'disabled:text-on-surface/38 disabled:border-on-surface/12',\n  'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n];\nconst VARIANT_ELEVATED = [\n  'bg-surface-container-low text-primary shadow-level1',\n  'disabled:bg-on-surface/12 disabled:text-on-surface/38 disabled:shadow-none',\n  'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none',\n];\nconst VARIANT_TEXT = [\n  'bg-transparent text-primary',\n  'disabled:text-on-surface/38',\n  'data-[disabled]:text-on-surface/38',\n];\n\nexport const splitButtonTv = tv({\n  slots: {\n    group: 'inline-flex items-center gap-0.5',\n    // leading: outer (start) corner full, seam (end) corner reduced.\n    leading: [...surface, 'gap-2 px-6 rounded-s-full rounded-e-small'],\n    // trailing: seam (start) corner reduced, outer (end) corner full.\n    trailing: [...surface, 'group gap-1 px-3 rounded-s-small rounded-e-full'],\n    chevron: [\n      'inline-flex items-center justify-center shrink-0 [&>svg]:size-[18px]',\n      'transition-transform duration-200 ease-standard group-data-[popup-open]:rotate-180',\n    ],\n    popup: [\n      'min-w-[112px] max-w-[280px] py-2',\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      'relative flex items-center gap-3 h-12 px-3 overflow-hidden cursor-pointer select-none outline-none',\n      'text-label-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      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n  },\n  variants: {\n    variant: {\n      filled: { leading: VARIANT_FILLED, trailing: VARIANT_FILLED },\n      tonal: { leading: VARIANT_TONAL, trailing: VARIANT_TONAL },\n      outlined: { leading: VARIANT_OUTLINED, trailing: VARIANT_OUTLINED },\n      elevated: { leading: VARIANT_ELEVATED, trailing: VARIANT_ELEVATED },\n      text: { leading: VARIANT_TEXT, trailing: VARIANT_TEXT },\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const SplitButton = createSplitButton({\n  group: splitButtonTv().group(),\n  leading: (variant) => splitButtonTv({ variant }).leading(),\n  trailing: (variant) => splitButtonTv({ variant }).trailing(),\n  chevron: splitButtonTv().chevron(),\n  popup: splitButtonTv().popup(),\n  item: splitButtonTv().item(),\n});\n"]}

package/dist/switch.js

@@ -21,7 +21,10 @@ var switchTv = tv({
       "absolute top-1/2 -translate-y-1/2 left-[6px] size-4 rounded-full pointer-events-none",
       "flex items-center justify-center",
       "bg-outline text-on-surface",
-      "transition-all duration-200 ease-standard",
+      // M3 spatial motion: the handle slides/grows with emphasized easing over
+      // 300ms (token-backed). emphasized is overshoot-free, so it stays safe for
+      // the handle's color transitions too (no spring flicker on background-color).
+      "transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]",
       "data-[checked]:left-[22px] data-[checked]:size-6 data-[checked]:bg-on-primary data-[checked]:text-primary",
       // M3 with-icon: the unchecked handle grows to 24dp to fit its icon
       "data-[with-icon]:data-[unchecked]:left-1 data-[with-icon]:data-[unchecked]:size-6",

package/dist/switch.js.map

@@ -1 +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"]}
+{"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;AAAA;AAAA;AAAA,MAIA,iFAAA;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      // M3 spatial motion: the handle slides/grows with emphasized easing over\n      // 300ms (token-backed). emphasized is overshoot-free, so it stays safe for\n      // the handle's color transitions too (no spring flicker on background-color).\n      'transition-all ease-emphasized duration-[var(--md-sys-motion-duration-medium2)]',\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"]}