@m3-baseui/react-tailwind 1.0.0

package/dist/tabs.d.ts

@@ -0,0 +1,118 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { TabsVariant } 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 tabsTv: tailwind_variants.TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string[];
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+            indicator: string;
+        };
+        secondary: {
+            tab: string;
+            indicator: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const Tabs: {
+    Root: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TabsRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        variant?: _m3_baseui_core.TabsVariant;
+    } & react.RefAttributes<HTMLDivElement>>;
+    List: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TabsListProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        scrollable?: boolean;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Tab: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TabsTabProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & {
+        icon?: React.ReactNode;
+    } & react.RefAttributes<HTMLElement>>;
+    Indicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TabsIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+    Panel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TabsPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Tabs, tabsTv };

package/dist/tabs.js

@@ -0,0 +1,97 @@
+"use client";
+import { createTabs } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/tabs.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/tabs.ts
+var tabsTv = tv({
+  slots: {
+    root: "flex flex-col",
+    list: [
+      "relative flex border-b border-surface-variant",
+      // M3 scrollable tabs: horizontal overflow, no wrap, hidden scrollbar.
+      "data-[scrollable]:overflow-x-auto data-[scrollable]:flex-nowrap",
+      "data-[scrollable]:[scrollbar-width:none] data-[scrollable]:[&::-webkit-scrollbar]:hidden"
+    ],
+    tab: [
+      "relative flex shrink-0 items-center justify-center gap-2 h-12 px-4 overflow-hidden",
+      "cursor-pointer select-none border-0 bg-transparent outline-none text-title-small",
+      "text-on-surface-variant",
+      // Icon slot (24dp), centered.
+      "[&_[data-slot=tab-icon]]:inline-flex [&_[data-slot=tab-icon]>svg]:size-6",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      // M3 disabled (per-token, not a blanket fade): label + icon on-surface/0.38,
+      // no state layer. currentColor carries the dim to the icon slot.
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      // A disabled tab that is also the active value stays dimmed: the variant's
+      // data-[active] color has equal specificity, so a combined selector wins.
+      "data-[disabled]:data-[active]:text-on-surface/[0.38]"
+    ],
+    indicator: [
+      "absolute bottom-0 left-0 bg-primary",
+      "w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)]",
+      "transition-all duration-200 ease-standard"
+    ],
+    panel: "p-4 outline-none"
+  },
+  variants: {
+    variant: {
+      // primary: 3dp active indicator with rounded top corners; icon stacks
+      // above the label (64dp tall) when a tab carries an icon.
+      primary: {
+        tab: "data-[active]:text-primary data-[with-icon]:flex-col data-[with-icon]:h-16 data-[with-icon]:gap-1",
+        indicator: "h-[3px] rounded-t-[3px]"
+      },
+      // secondary: 2dp square active indicator, active label = on-surface
+      secondary: { tab: "data-[active]:text-on-surface", indicator: "h-[2px]" }
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+var Tabs = createTabs((variant) => {
+  const s = tabsTv({ variant });
+  return {
+    root: s.root(),
+    list: s.list(),
+    tab: s.tab(),
+    indicator: s.indicator(),
+    panel: s.panel()
+  };
+});
+
+export { Tabs, tabsTv };
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/tabs.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;;;ACjCI,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,+CAAA;AAAA;AAAA,MAEA,iEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,GAAA,EAAK;AAAA,MACH,oFAAA;AAAA,MACA,kFAAA;AAAA,MACA,yBAAA;AAAA;AAAA,MAEA,0EAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA;AAAA;AAAA,MAGA,6GAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,qCAAA;AAAA,MACA,kEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA;AAAA;AAAA,MAGP,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,mGAAA;AAAA,QACL,SAAA,EAAW;AAAA,OACb;AAAA;AAAA,MAEA,SAAA,EAAW,EAAE,GAAA,EAAK,+BAAA,EAAiC,WAAW,SAAA;AAAU;AAC1E,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,IAAA,GAAO,UAAA,CAAW,CAAC,OAAA,KAAY;AAC1C,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,CAAA;AAC5B,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA;AAAM,GACjB;AACF,CAAC","file":"tabs.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 * tabs.ts — tailwind-variants slots for the M3 Tabs.\n *\n * The active-tab underline reads Base UI's --active-tab-width/left CSS vars on\n * the indicator. The `variant` recolors the active tab (primary → primary,\n * secondary → on-surface). Tabs carry a `before:` state layer + ripple.\n */\nimport { createTabs } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const tabsTv = tv({\n  slots: {\n    root: 'flex flex-col',\n    list: [\n      'relative flex border-b border-surface-variant',\n      // M3 scrollable tabs: horizontal overflow, no wrap, hidden scrollbar.\n      'data-[scrollable]:overflow-x-auto data-[scrollable]:flex-nowrap',\n      'data-[scrollable]:[scrollbar-width:none] data-[scrollable]:[&::-webkit-scrollbar]:hidden',\n    ],\n    tab: [\n      'relative flex shrink-0 items-center justify-center gap-2 h-12 px-4 overflow-hidden',\n      'cursor-pointer select-none border-0 bg-transparent outline-none text-title-small',\n      'text-on-surface-variant',\n      // Icon slot (24dp), centered.\n      '[&_[data-slot=tab-icon]]:inline-flex [&_[data-slot=tab-icon]>svg]:size-6',\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      // M3 disabled (per-token, not a blanket fade): label + icon on-surface/0.38,\n      // no state layer. currentColor carries the dim to the icon slot.\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      // A disabled tab that is also the active value stays dimmed: the variant's\n      // data-[active] color has equal specificity, so a combined selector wins.\n      'data-[disabled]:data-[active]:text-on-surface/[0.38]',\n    ],\n    indicator: [\n      'absolute bottom-0 left-0 bg-primary',\n      'w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)]',\n      'transition-all duration-200 ease-standard',\n    ],\n    panel: 'p-4 outline-none',\n  },\n  variants: {\n    variant: {\n      // primary: 3dp active indicator with rounded top corners; icon stacks\n      // above the label (64dp tall) when a tab carries an icon.\n      primary: {\n        tab: 'data-[active]:text-primary data-[with-icon]:flex-col data-[with-icon]:h-16 data-[with-icon]:gap-1',\n        indicator: 'h-[3px] rounded-t-[3px]',\n      },\n      // secondary: 2dp square active indicator, active label = on-surface\n      secondary: { tab: 'data-[active]:text-on-surface', indicator: 'h-[2px]' },\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nexport const Tabs = createTabs((variant) => {\n  const s = tabsTv({ variant });\n  return {\n    root: s.root(),\n    list: s.list(),\n    tab: s.tab(),\n    indicator: s.indicator(),\n    panel: s.panel(),\n  };\n});\nexport type { TabsVariant } from '@m3-baseui/core';\n"]}

package/dist/textfield.d.ts

@@ -0,0 +1,127 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { TextFieldProps, TextFieldVariant } from '@m3-baseui/core';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const textFieldTv: tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    inputWrap: string;
+    input: string[];
+    label: string[];
+    leadingIcon: string;
+    trailingIcon: string;
+    supporting: string[];
+    supportingText: string;
+    counter: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}>, {
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    inputWrap: string;
+    input: string[];
+    label: string[];
+    leadingIcon: string;
+    trailingIcon: string;
+    supporting: string[];
+    supportingText: string;
+    counter: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    inputWrap: string;
+    input: string[];
+    label: string[];
+    leadingIcon: string;
+    trailingIcon: string;
+    supporting: string[];
+    supportingText: string;
+    counter: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            field: string[];
+            input: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const TextField: react.ForwardRefExoticComponent<_m3_baseui_core.TextFieldOwnProps & Omit<react.InputHTMLAttributes<HTMLInputElement>, "size"> & react.RefAttributes<HTMLInputElement>>;
+
+export { TextField, textFieldTv };

package/dist/textfield.js

@@ -0,0 +1,83 @@
+"use client";
+import { createTextField } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/textfield.ts
+var textFieldTv = tv({
+  slots: {
+    root: "flex flex-col gap-1 min-w-[210px]",
+    field: [
+      "relative flex items-stretch gap-3 h-14 px-4 box-border",
+      "transition-[border-color,padding] duration-150 ease-standard",
+      "group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none"
+    ],
+    inputWrap: "relative flex-1 flex items-center min-w-0",
+    input: [
+      "peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface",
+      "placeholder:text-on-surface-variant"
+    ],
+    label: [
+      "absolute left-0 pointer-events-none origin-left",
+      "top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant",
+      "transition-all duration-150 ease-standard",
+      "group-data-[focused]:text-primary group-data-[invalid]:text-error"
+    ],
+    leadingIcon: "flex items-center shrink-0 text-on-surface-variant",
+    trailingIcon: "flex items-center shrink-0 text-on-surface-variant",
+    supporting: [
+      "flex justify-between gap-4 px-4 text-body-small text-on-surface-variant",
+      "group-data-[invalid]:text-error"
+    ],
+    supportingText: "min-w-0",
+    counter: "shrink-0 tabular-nums"
+  },
+  variants: {
+    variant: {
+      filled: {
+        field: [
+          "rounded-t-extra-small bg-surface-container-highest",
+          "border-b-2 border-outline",
+          "group-data-[focused]:border-primary group-data-[invalid]:border-error"
+        ],
+        input: "pt-3",
+        label: [
+          "group-data-[focused]:top-1.5 group-data-[focused]:translate-y-0 group-data-[focused]:text-body-small",
+          "group-data-[filled]:top-1.5 group-data-[filled]:translate-y-0 group-data-[filled]:text-body-small"
+        ]
+      },
+      outlined: {
+        field: [
+          "rounded-extra-small border border-outline",
+          "group-data-[focused]:border-2 group-data-[focused]:border-primary group-data-[focused]:px-[15px]",
+          "group-data-[invalid]:border-error"
+        ],
+        label: [
+          "group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1",
+          "group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var TextField = createTextField(({ variant }) => {
+  const c = textFieldTv({ variant });
+  return {
+    root: c.root(),
+    field: c.field(),
+    inputWrap: c.inputWrap(),
+    input: c.input(),
+    label: c.label(),
+    leadingIcon: c.leadingIcon(),
+    trailingIcon: c.trailingIcon(),
+    supporting: c.supporting(),
+    supportingText: c.supportingText(),
+    counter: c.counter()
+  };
+});
+
+export { TextField, textFieldTv };
+//# sourceMappingURL=textfield.js.map
+//# sourceMappingURL=textfield.js.map

package/dist/textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/textfield.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mCAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,wDAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,2CAAA;AAAA,IACX,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,iDAAA;AAAA,MACA,kEAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,WAAA,EAAa,oDAAA;AAAA,IACb,YAAA,EAAc,oDAAA;AAAA,IACd,UAAA,EAAY;AAAA,MACV,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,cAAA,EAAgB,SAAA;AAAA,IAChB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,2BAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,MAAA;AAAA,QACP,KAAA,EAAO;AAAA,UACL,sGAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,KAAA,EAAO;AAAA,UACL,2CAAA;AAAA,UACA,kGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,iKAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,EAAE,SAAQ,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,WAAA,CAAY,EAAE,OAAA,EAAS,CAAA;AACjC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,IAC3B,YAAA,EAAc,EAAE,YAAA,EAAa;AAAA,IAC7B,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,IACzB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,IACjC,OAAA,EAAS,EAAE,OAAA;AAAQ,GACrB;AACF,CAAC","file":"textfield.js","sourcesContent":["/**\n * textfield.ts — tailwind-variants slots for the M3 TextField.\n *\n * 56dp tall. The floating label and focus/filled border key off Field's\n * `data-focused` / `data-filled` / `data-invalid` via the `group` on Root.\n * Filled = surface-container-highest with a bottom indicator; outlined = a\n * border that thickens to 2dp primary on focus. Same DOM as the VE build.\n */\nimport { createTextField } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const textFieldTv = tv({\n  slots: {\n    root: 'flex flex-col gap-1 min-w-[210px]',\n    field: [\n      'relative flex items-stretch gap-3 h-14 px-4 box-border',\n      'transition-[border-color,padding] duration-150 ease-standard',\n      'group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none',\n    ],\n    inputWrap: 'relative flex-1 flex items-center min-w-0',\n    input: [\n      'peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface',\n      'placeholder:text-on-surface-variant',\n    ],\n    label: [\n      'absolute left-0 pointer-events-none origin-left',\n      'top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant',\n      'transition-all duration-150 ease-standard',\n      'group-data-[focused]:text-primary group-data-[invalid]:text-error',\n    ],\n    leadingIcon: 'flex items-center shrink-0 text-on-surface-variant',\n    trailingIcon: 'flex items-center shrink-0 text-on-surface-variant',\n    supporting: [\n      'flex justify-between gap-4 px-4 text-body-small text-on-surface-variant',\n      'group-data-[invalid]:text-error',\n    ],\n    supportingText: 'min-w-0',\n    counter: 'shrink-0 tabular-nums',\n  },\n  variants: {\n    variant: {\n      filled: {\n        field: [\n          'rounded-t-extra-small bg-surface-container-highest',\n          'border-b-2 border-outline',\n          'group-data-[focused]:border-primary group-data-[invalid]:border-error',\n        ],\n        input: 'pt-3',\n        label: [\n          'group-data-[focused]:top-1.5 group-data-[focused]:translate-y-0 group-data-[focused]:text-body-small',\n          'group-data-[filled]:top-1.5 group-data-[filled]:translate-y-0 group-data-[filled]:text-body-small',\n        ],\n      },\n      outlined: {\n        field: [\n          'rounded-extra-small border border-outline',\n          'group-data-[focused]:border-2 group-data-[focused]:border-primary group-data-[focused]:px-[15px]',\n          'group-data-[invalid]:border-error',\n        ],\n        label: [\n          'group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1',\n          'group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const TextField = createTextField(({ variant }) => {\n  const c = textFieldTv({ variant });\n  return {\n    root: c.root(),\n    field: c.field(),\n    inputWrap: c.inputWrap(),\n    input: c.input(),\n    label: c.label(),\n    leadingIcon: c.leadingIcon(),\n    trailingIcon: c.trailingIcon(),\n    supporting: c.supporting(),\n    supportingText: c.supportingText(),\n    counter: c.counter(),\n  };\n});\n\nexport type { TextFieldProps, TextFieldVariant } from '@m3-baseui/core';\n"]}

package/dist/tooltip.d.ts

@@ -0,0 +1,61 @@
+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 tooltipTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            popup?: tailwind_variants.ClassValue;
+            arrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            popup?: tailwind_variants.ClassValue;
+            arrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    popup: string[];
+    arrow: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            popup?: tailwind_variants.ClassValue;
+            arrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            popup?: tailwind_variants.ClassValue;
+            arrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    popup: string[];
+    arrow: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    popup: string[];
+    arrow: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            popup?: tailwind_variants.ClassValue;
+            arrow?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Tooltip: {
+    Provider: react.FC<_base_ui_react.TooltipProviderProps>;
+    Root: <Payload>(props: _base_ui_react.TooltipRoot.Props<Payload>) => react.JSX.Element;
+    Trigger: _base_ui_react.TooltipTrigger;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.TooltipPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.TooltipPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Arrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.TooltipArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { Tooltip, tooltipTv };

package/dist/tooltip.js

@@ -0,0 +1,52 @@
+"use client";
+import { createTooltip } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/tooltip.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/tooltip.ts
+var tooltipTv = tv({
+  slots: {
+    popup: [
+      "bg-inverse-surface text-inverse-on-surface text-body-small",
+      "rounded-extra-small px-2 py-1 max-w-[224px] select-none",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
+    ],
+    arrow: ["text-inverse-surface"]
+  }
+});
+var t = tooltipTv();
+var Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });
+
+export { Tooltip, tooltipTv };
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/tooltip.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;;;ACjCI,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA,yDAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,sBAAsB;AAAA;AAElC,CAAC;AAED,IAAM,IAAI,SAAA,EAAU;AACb,IAAM,OAAA,GAAU,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG","file":"tooltip.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 * tooltip.ts — Tailwind classes for the M3 plain Tooltip.\n *\n * Inverse-surface background, body-small text, extra-small corners, with a fade\n * + small-move transition driven by Base UI's data-[starting-style] /\n * data-[ending-style] attributes.\n */\nimport { createTooltip } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const tooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-inverse-surface text-inverse-on-surface text-body-small',\n      'rounded-extra-small px-2 py-1 max-w-[224px] select-none',\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 data-[ending-style]:scale-95',\n    ],\n    arrow: ['text-inverse-surface'],\n  },\n});\n\nconst t = tooltipTv();\nexport const Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });\n"]}

package/dist/tv.d.ts

@@ -0,0 +1,19 @@
+import { TV } from 'tailwind-variants';
+
+/**
+ * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.
+ *
+ * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`
+ * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock
+ * tailwind-merge does not know these custom names, so it groups them with the
+ * `text-<color>` utilities and drops one when a slot sets both a color *and* a
+ * typescale (the common M3 case). That silently strips either the color or the
+ * type, breaking token compliance.
+ *
+ * Teaching tailwind-merge that the typescale names belong to the `font-size`
+ * group keeps color and type independent, so both survive the merge.
+ */
+
+declare const tv: TV;
+
+export { tv };

package/dist/tv.js

@@ -0,0 +1,35 @@
+"use client";
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/tv.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] }]
+      }
+    }
+  }
+});
+
+export { tv };
+//# sourceMappingURL=tv.js.map
+//# sourceMappingURL=tv.js.map

package/dist/tv.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.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","file":"tv.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"]}