@m3-baseui/react-tailwind 1.0.0

package/dist/progress.d.ts

@@ -0,0 +1,118 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { CircularProgressProps, LinearProgressProps } from '@m3-baseui/core';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+
+declare const linearTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    track: string;
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    track: string;
+    indicator: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    track: string;
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const circularTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string;
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string;
+    indicator: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    track: string;
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            track?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Progress: {
+    Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue"> & react.RefAttributes<HTMLDivElement>>;
+    Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "value" | "defaultValue"> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+export { Progress, circularTv, linearTv };

package/dist/progress.js

@@ -0,0 +1,41 @@
+"use client";
+import { createProgress } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/progress.ts
+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 c = circularTv();
+var Progress = createProgress({
+  linear: { root: l.root(), track: l.track(), indicator: l.indicator() },
+  circular: { root: c.root(), track: c.track(), indicator: c.indicator() }
+});
+
+export { Progress, circularTv, linearTv };
+//# sourceMappingURL=progress.js.map
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress.ts"],"names":[],"mappings":";;;;;AAYO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,KAAA,EAAO,4DAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,mDAAA;AAAA,MACA,+CAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAEM,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,iDAAA;AAAA,MACA,iCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,qDAAA;AAAA,IACP,SAAA,EAAW;AAAA,MACT,0DAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACnB,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AAAA,EACrE,QAAA,EAAU,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU;AACvE,CAAC","file":"progress.js","sourcesContent":["/**\n * progress.ts — tailwind-variants slots for the M3 Progress indicators.\n *\n * Linear: a 4dp `surface-container-highest` track with a `primary` active\n * indicator; the indeterminate slide animation keys off the Root's\n * `data-indeterminate` (see the `m3-linear-indeterminate` keyframe in\n * preset.css). Circular: a 48dp / 4dp `primary` ring whose arc is drawn by the\n * factory; `data-indeterminate` rotates the whole ring. Same DOM as the VE build.\n */\nimport { createProgress } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const linearTv = tv({\n  slots: {\n    root: 'group relative block w-full h-1 overflow-hidden rounded-full',\n    track: 'absolute inset-0 bg-surface-container-highest rounded-full',\n    indicator: [\n      'absolute inset-y-0 left-0 bg-primary rounded-full',\n      'transition-[width] duration-200 ease-standard',\n      'group-data-[indeterminate]:w-2/5 group-data-[indeterminate]:transition-none',\n      'group-data-[indeterminate]:animate-m3-linear-indeterminate',\n    ],\n  },\n});\n\nexport const circularTv = tv({\n  slots: {\n    root: [\n      'inline-flex items-center justify-center size-12',\n      '[&_svg]:block [&_svg]:size-full',\n      'data-[indeterminate]:animate-spin',\n    ],\n    track: 'stroke-surface-container-highest [stroke-width:4px]',\n    indicator: [\n      'stroke-primary [stroke-width:4px] [stroke-linecap:round]',\n      'transition-[stroke-dashoffset] duration-300 ease-standard',\n    ],\n  },\n});\n\nconst l = linearTv();\nconst c = circularTv();\nexport const Progress = createProgress({\n  linear: { root: l.root(), track: l.track(), indicator: l.indicator() },\n  circular: { root: c.root(), track: c.track(), indicator: c.indicator() },\n});\nexport type {\n  LinearProgressProps,\n  CircularProgressProps,\n} from '@m3-baseui/core';\n"]}

package/dist/radio.d.ts

@@ -0,0 +1,56 @@
+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 radioTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Radio: react.ForwardRefExoticComponent<Omit<_base_ui_react.RadioRoot.Props<unknown>, "ref"> & {
+    error?: boolean;
+} & react.RefAttributes<HTMLSpanElement>>;
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<_base_ui_react.RadioGroup.Props<unknown>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { Radio, RadioGroup, radioTv };

package/dist/radio.js

@@ -0,0 +1,47 @@
+"use client";
+import { createRadio, createRadioGroup } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/radio.ts
+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");
+
+export { Radio, RadioGroup, radioTv };
+//# sourceMappingURL=radio.js.map
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,mDAAA;AAAA,MACA,4DAAA;AAAA,MACA,oDAAA;AAAA,MACA,6BAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,OAAA,EAAQ;AACX,IAAM,KAAA,GAAQ,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,SAAA,EAAW,CAAA,CAAE,SAAA,EAAU,EAAG;AAEtE,IAAM,UAAA,GAAa,iBAAiB,4BAA4B","file":"radio.js","sourcesContent":["/**\n * radio.ts — tailwind-variants slots for the M3 Radio + RadioGroup.\n *\n * 20dp circle with a 40dp circular state layer; checked shows a 10dp primary dot\n * (the indicator) and recolors the ring. RadioGroup lays radios out in a column.\n */\nimport { createRadio, createRadioGroup } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const radioTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center shrink-0 box-border',\n      'size-5 rounded-full border-2 cursor-pointer bg-transparent',\n      // Ring is on-surface-variant; the state layer (text/currentColor) is\n      // on-surface unselected, primary when selected (material-web).\n      'border-on-surface-variant text-on-surface',\n      'transition-colors duration-150 ease-standard',\n      'data-[checked]:border-primary data-[checked]:text-primary',\n      // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n      'active:text-primary',\n      'data-[checked]:active:text-on-surface',\n      // M3 error: error ring + error state layer in every interaction state\n      'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n      'data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // M3 disabled: ring (and dot) turn on-surface/38; no state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:border-on-surface/38',\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      '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    indicator: [\n      'block rounded-full bg-primary pointer-events-none',\n      'size-0 opacity-0 transition-all duration-150 ease-standard',\n      'data-[checked]:size-2.5 data-[checked]:opacity-100',\n      'group-data-[error]:bg-error',\n      'group-data-[disabled]:bg-on-surface/38',\n    ],\n  },\n});\n\nconst r = radioTv();\nexport const Radio = createRadio({ root: r.root(), indicator: r.indicator() });\n\nexport const RadioGroup = createRadioGroup('inline-flex flex-col gap-1');\n"]}

package/dist/segmented-button.d.ts

@@ -0,0 +1,83 @@
+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 segmentedButtonTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string[];
+    check: string[];
+    icon: string;
+    label: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string[];
+    check: string[];
+    icon: string;
+    label: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    item: string[];
+    check: string[];
+    icon: string;
+    label: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const SegmentedButton: {
+    Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToggleGroup.Props<string> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.Toggle.Props<string> & react.RefAttributes<HTMLButtonElement>, "ref">, "children"> & _m3_baseui_core.SegmentedButtonItemOwnProps & {
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { SegmentedButton, segmentedButtonTv };

package/dist/segmented-button.js

@@ -0,0 +1,71 @@
+"use client";
+import { createSegmentedButton } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/segmented-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/segmented-button.ts
+var segmentedButtonTv = tv({
+  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 s = segmentedButtonTv();
+var SegmentedButton = createSegmentedButton({
+  root: s.root(),
+  item: s.item(),
+  check: s.check(),
+  icon: s.icon(),
+  label: s.label()
+});
+
+export { SegmentedButton, segmentedButtonTv };
+//# sourceMappingURL=segmented-button.js.map
+//# sourceMappingURL=segmented-button.js.map

package/dist/segmented-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/segmented-button.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;;;AC/BI,IAAM,oBAAoB,EAAA,CAAG;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mFAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,mFAAA;AAAA,MACA,0GAAA;AAAA,MACA,kCAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,kFAAA;AAAA,MACA,yGAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,6GAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,kGAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAED,IAAM,IAAI,iBAAA,EAAkB;AACrB,IAAM,kBAAkB,qBAAA,CAAsB;AAAA,EACnD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"segmented-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 * segmented-button.ts — tailwind-variants slots for the M3 SegmentedButton.\n *\n * A 40dp-tall connected row with a shared outline; segments divide with a left\n * border. The selected segment surfaces `data-pressed` (Base UI Toggle) → a\n * secondary-container fill that reveals the leading checkmark (and hides any\n * provided icon) via the `group`. State layer is the item `::before`; the\n * pointer ripple is added by the factory. Same DOM as the VE build.\n */\nimport { createSegmentedButton } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const segmentedButtonTv = tv({\n  slots: {\n    root: 'inline-flex items-stretch h-10 rounded-full border border-outline overflow-hidden',\n    item: [\n      'group relative inline-flex flex-1 items-center justify-center gap-2 px-3 min-w-12',\n      'bg-transparent border-0 border-l border-outline first:border-l-0 cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'transition-colors duration-150 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]:bg-secondary-container data-[pressed]:text-on-secondary-container',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:text-on-surface/38',\n      'disabled:pointer-events-none disabled:before:opacity-0 disabled:text-on-surface/38',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:opacity-100',\n    ],\n    icon: 'inline-flex items-center justify-center shrink-0 [&_svg]:size-[18px] group-data-[pressed]:hidden',\n    label: 'truncate',\n  },\n});\n\nconst s = segmentedButtonTv();\nexport const SegmentedButton = createSegmentedButton({\n  root: s.root(),\n  item: s.item(),\n  check: s.check(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

package/dist/select.d.ts

@@ -0,0 +1,125 @@
+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 selectTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            scrollUpArrow?: tailwind_variants.ClassValue;
+            scrollDownArrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            scrollUpArrow?: tailwind_variants.ClassValue;
+            scrollDownArrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    trigger: string[];
+    value: string;
+    icon: string;
+    popup: string[];
+    item: string[];
+    itemIndicator: string;
+    groupLabel: string;
+    scrollUpArrow: string[];
+    scrollDownArrow: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            scrollUpArrow?: tailwind_variants.ClassValue;
+            scrollDownArrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            scrollUpArrow?: tailwind_variants.ClassValue;
+            scrollDownArrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    trigger: string[];
+    value: string;
+    icon: string;
+    popup: string[];
+    item: string[];
+    itemIndicator: string;
+    groupLabel: string;
+    scrollUpArrow: string[];
+    scrollDownArrow: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    trigger: string[];
+    value: string;
+    icon: string;
+    popup: string[];
+    item: string[];
+    itemIndicator: string;
+    groupLabel: string;
+    scrollUpArrow: string[];
+    scrollDownArrow: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            value?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            groupLabel?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            scrollUpArrow?: tailwind_variants.ClassValue;
+            scrollDownArrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Select: {
+    Root: typeof _base_ui_react.SelectRoot;
+    Trigger: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
+    Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectValueProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Icon: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectIconProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    List: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectListProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+    ItemText: react.NamedExoticComponent<Omit<_base_ui_react.SelectItemTextProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    ItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    ScrollUpArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollUpArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    ScrollDownArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollDownArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    GroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { Select, selectTv };