@m3-baseui/react-tailwind 1.0.0

package/dist/badge.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { BadgeProps, BadgeSize } 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 badgeTv: tailwind_variants.TVReturnType<{
+    size: {
+        small: string;
+        large: string;
+    };
+}, undefined, "pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        small: string;
+        large: string;
+    };
+}, {
+    size: {
+        small: string;
+        large: string;
+    };
+}>, {
+    size: {
+        small: string;
+        large: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        small: string;
+        large: string;
+    };
+}, undefined, "pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        small: string;
+        large: string;
+    };
+}, {
+    size: {
+        small: string;
+        large: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const Badge: react.ForwardRefExoticComponent<_m3_baseui_core.BadgeOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "children"> & react.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, badgeTv };

package/dist/badge.js

@@ -0,0 +1,50 @@
+"use client";
+import { createBadge } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/badge.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/badge.ts
+var badgeTv = tv({
+  base: "pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error",
+  variants: {
+    size: {
+      small: "absolute top-1 right-1 size-1.5 rounded-full",
+      large: "absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full text-label-small leading-none tabular-nums"
+    }
+  }
+});
+var Badge = createBadge({
+  root: ({ size }) => badgeTv({ size })
+});
+
+export { Badge, badgeTv };
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/badge.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,UAAU,EAAA,CAAG;AAAA,EACxB,IAAA,EAAM,gGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,8CAAA;AAAA,MACP,KAAA,EACE;AAAA;AACJ;AAEJ,CAAC;AAEM,IAAM,QAAQ,WAAA,CAAY;AAAA,EAC/B,IAAA,EAAM,CAAC,EAAE,IAAA,OAAW,OAAA,CAAQ,EAAE,MAAM;AACtC,CAAC","file":"badge.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 * badge.ts — tailwind-variants slots for the M3 Badge.\n *\n * error/on-error marker that anchors to the top-right of a positioned parent.\n * `small` is a 6dp dot; `large` is a 16dp pill carrying a `label-small` number.\n * Same DOM + `data-size` as the VE build.\n */\nimport { createBadge } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const badgeTv = tv({\n  base: 'pointer-events-none select-none inline-flex items-center justify-center bg-error text-on-error',\n  variants: {\n    size: {\n      small: 'absolute top-1 right-1 size-1.5 rounded-full',\n      large:\n        'absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full text-label-small leading-none tabular-nums',\n    },\n  },\n});\n\nexport const Badge = createBadge({\n  root: ({ size }) => badgeTv({ size }),\n});\nexport type { BadgeProps, BadgeSize } from '@m3-baseui/core';\n"]}

package/dist/button.d.ts

@@ -0,0 +1,69 @@
+import * as _base_ui_react from '@base-ui/react';
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { ButtonProps, ButtonVariant } 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 button: tailwind_variants.TVReturnType<{
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}, {
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}>, {
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}, {
+    variant: {
+        filled: string[];
+        tonal: string[];
+        outlined: string[];
+        elevated: string[];
+        text: string[];
+    };
+}>, unknown, unknown, undefined>>;
+declare const Button: react.ForwardRefExoticComponent<_m3_baseui_core.ButtonOwnProps & Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    render?: _base_ui_react.useRender.RenderProp;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, button };

package/dist/button.js

@@ -0,0 +1,74 @@
+"use client";
+import { createButton } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/button.ts
+var button = tv({
+  base: [
+    "relative inline-flex items-center justify-center gap-2",
+    "h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0",
+    "text-label-large",
+    // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).
+    "data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4",
+    // Icon slot: 18dp, centered.
+    "[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center",
+    "[&_[data-slot=button-icon]>svg]:size-[18px]",
+    "transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]",
+    // State layer overlay
+    "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
+    "before:transition-opacity before:duration-100",
+    "hover:before:opacity-[var(--md-sys-state-hover)]",
+    "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+    "active:before:opacity-[var(--md-sys-state-pressed)]",
+    "data-[pressed]:before:opacity-[var(--md-sys-state-pressed)]",
+    // Focus ring (M3: 3px secondary, 2px offset)
+    "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+    // Disabled: no interaction, no state layer, no elevation. Per-variant
+    // colors (container on-surface/12, label on-surface/38) live on each variant.
+    "disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0",
+    "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0"
+  ],
+  variants: {
+    // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;
+    // elevated rest level1→hover level2→pressed level1. Disabled container is
+    // on-surface/12 and label on-surface/38, matching material-web.
+    variant: {
+      filled: [
+        "bg-primary text-on-primary",
+        "hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      tonal: [
+        "bg-secondary-container text-on-secondary-container",
+        "hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      outlined: [
+        "bg-transparent text-primary border border-outline",
+        "disabled:text-on-surface/38 disabled:border-on-surface/12",
+        "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12"
+      ],
+      elevated: [
+        "bg-surface-container-low text-primary shadow-level1",
+        "hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1",
+        "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+        "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+      ],
+      text: [
+        "bg-transparent text-primary px-3",
+        "disabled:text-on-surface/38",
+        "data-[disabled]:text-on-surface/38"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "filled"
+  }
+});
+var Button = createButton(({ variant }) => button({ variant }));
+
+export { Button, button };
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button.ts"],"names":[],"mappings":";;;;;AAcO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM;AAAA,IACJ,wDAAA;AAAA,IACA,4EAAA;AAAA,IACA,kBAAA;AAAA;AAAA,IAEA,uDAAA;AAAA;AAAA,IAEA,6HAAA;AAAA,IACA,6CAAA;AAAA,IACA,sHAAA;AAAA;AAAA,IAEA,uHAAA;AAAA,IACA,+CAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA;AAAA,IAEA,4FAAA;AAAA;AAAA;AAAA,IAGA,6EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,IAIR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,4BAAA;AAAA,QACA,6FAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,oDAAA;AAAA,QACA,6FAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,mDAAA;AAAA,QACA,2DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,qDAAA;AAAA,QACA,mGAAA;AAAA,QACA,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,kCAAA;AAAA,QACA,6BAAA;AAAA,QACA;AAAA;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,MAAA,GAAS,YAAA,CAAa,CAAC,EAAE,OAAA,OAAc,MAAA,CAAO,EAAE,OAAA,EAAS,CAAC","file":"button.js","sourcesContent":["/**\n * button.ts — tailwind-variants resolver wired into the shared factory.\n *\n * Emits the same DOM and `data-*` state as the vanilla-extract build; only the\n * class strings differ. Utilities such as `bg-primary`, `text-on-primary`,\n * `rounded-full`, `shadow-level1`, and `text-label-large` are produced by the\n * Tailwind v4 `@theme` preset shipped in `@m3-baseui/tokens/theme.css`.\n *\n * Opacity modifiers (`before:opacity-[var(--md-sys-state-hover)]`) drive the\n * state layer off the channel-triple colors.\n */\nimport { createButton } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const button = tv({\n  base: [\n    'relative inline-flex items-center justify-center gap-2',\n    'h-10 px-6 rounded-full overflow-hidden cursor-pointer select-none border-0',\n    'text-label-large',\n    // M3 with-icon padding: the icon side trims to 16dp (label side stays 24dp).\n    'data-[with-start-icon]:pl-4 data-[with-end-icon]:pr-4',\n    // Icon slot: 18dp, centered.\n    '[&_[data-slot=button-icon]]:inline-flex [&_[data-slot=button-icon]]:items-center [&_[data-slot=button-icon]]:justify-center',\n    '[&_[data-slot=button-icon]>svg]:size-[18px]',\n    'transition-[box-shadow,background-color,color,border-color] duration-200 ease-[var(--md-sys-motion-easing-standard)]',\n    // State layer overlay\n    'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n    '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 ring (M3: 3px secondary, 2px offset)\n    'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n    // Disabled: no interaction, no state layer, no elevation. Per-variant\n    // colors (container on-surface/12, label on-surface/38) live on each variant.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n  ],\n  variants: {\n    // M3 elevation per variant: filled/tonal rest level0→hover level1→pressed level0;\n    // elevated rest level1→hover level2→pressed level1. Disabled container is\n    // on-surface/12 and label on-surface/38, matching material-web.\n    variant: {\n      filled: [\n        'bg-primary text-on-primary',\n        'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\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      ],\n      tonal: [\n        'bg-secondary-container text-on-secondary-container',\n        'hover:shadow-level1 focus-visible:shadow-none active:shadow-none data-[pressed]:shadow-none',\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      ],\n      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      ],\n      elevated: [\n        'bg-surface-container-low text-primary shadow-level1',\n        'hover:shadow-level2 focus-visible:shadow-level1 active:shadow-level1 data-[pressed]:shadow-level1',\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      ],\n      text: [\n        'bg-transparent text-primary px-3',\n        'disabled:text-on-surface/38',\n        'data-[disabled]:text-on-surface/38',\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const Button = createButton(({ variant }) => button({ variant }));\nexport type { ButtonProps, ButtonVariant } from '@m3-baseui/core';\n"]}

package/dist/card.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { CardProps, CardVariant } 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 cardTv: tailwind_variants.TVReturnType<{
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}, undefined, "relative box-border rounded-medium text-on-surface", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}, {
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}>, {
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}, undefined, "relative box-border rounded-medium text-on-surface", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}, {
+    variant: {
+        elevated: string;
+        filled: string;
+        outlined: string;
+    };
+    interactive: {
+        true: string[];
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const Card: react.ForwardRefExoticComponent<_m3_baseui_core.CardOwnProps & Omit<react.HTMLAttributes<HTMLElement>, "color"> & react.RefAttributes<HTMLElement>>;
+
+export { Card, cardTv };

package/dist/card.js

@@ -0,0 +1,77 @@
+"use client";
+import { createCard } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/card.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/card.ts
+var cardTv = tv({
+  base: "relative box-border rounded-medium text-on-surface",
+  variants: {
+    variant: {
+      elevated: "bg-surface-container-low shadow-level1",
+      filled: "bg-surface-container-highest",
+      outlined: "bg-surface border border-outline-variant"
+    },
+    interactive: {
+      true: [
+        "group overflow-hidden cursor-pointer select-none text-left w-full outline-none",
+        "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+        "hover:before:opacity-[var(--md-sys-state-hover)]",
+        "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+        "active:before:opacity-[var(--md-sys-state-pressed)]",
+        "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+        // M3 disabled: drop the shadow + state layer, dim the content per-token.
+        "disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38",
+        "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38"
+      ],
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.
+    {
+      variant: "elevated",
+      interactive: true,
+      class: "hover:shadow-level2 active:shadow-level1"
+    }
+  ],
+  defaultVariants: {
+    variant: "elevated",
+    interactive: false
+  }
+});
+var Card = createCard({
+  root: ({ variant, interactive }) => cardTv({ variant, interactive })
+});
+
+export { Card, cardTv };
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/card.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,SAAS,EAAA,CAAG;AAAA,EACvB,IAAA,EAAM,oDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,wCAAA;AAAA,MACV,MAAA,EAAQ,8BAAA;AAAA,MACR,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gFAAA;AAAA,QACA,4IAAA;AAAA,QACA,kDAAA;AAAA,QACA,0DAAA;AAAA,QACA,qDAAA;AAAA,QACA,4FAAA;AAAA;AAAA,QAEA,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,WAAA,EAAa,IAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW;AAAA,EAC7B,IAAA,EAAM,CAAC,EAAE,OAAA,EAAS,WAAA,OAAkB,MAAA,CAAO,EAAE,OAAA,EAAS,WAAA,EAAa;AACrE,CAAC","file":"card.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 * card.ts — tailwind-variants slots for the M3 Card.\n *\n * 12dp corners. `elevated` is surface-container-low + level1, `filled` is\n * surface-container-highest (level0), `outlined` is surface + outline-variant.\n * Interactive cards add the `currentColor` state-layer `::before` (the pointer\n * ripple is added by the factory), a focus ring and per-token disabled dimming.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createCard } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const cardTv = tv({\n  base: 'relative box-border rounded-medium text-on-surface',\n  variants: {\n    variant: {\n      elevated: 'bg-surface-container-low shadow-level1',\n      filled: 'bg-surface-container-highest',\n      outlined: 'bg-surface border border-outline-variant',\n    },\n    interactive: {\n      true: [\n        'group overflow-hidden cursor-pointer select-none text-left w-full outline-none',\n        'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n        'hover:before:opacity-[var(--md-sys-state-hover)]',\n        'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n        'active:before:opacity-[var(--md-sys-state-pressed)]',\n        'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n        // M3 disabled: drop the shadow + state layer, dim the content per-token.\n        'disabled:pointer-events-none disabled:before:opacity-0 disabled:shadow-none disabled:text-on-surface/38',\n        'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0 data-[disabled]:shadow-none data-[disabled]:text-on-surface/38',\n      ],\n      false: '',\n    },\n  },\n  compoundVariants: [\n    // M3 interactive elevated: lifts to level2 on hover, settles to level1 on press.\n    {\n      variant: 'elevated',\n      interactive: true,\n      class: 'hover:shadow-level2 active:shadow-level1',\n    },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    interactive: false,\n  },\n});\n\nexport const Card = createCard({\n  root: ({ variant, interactive }) => cardTv({ variant, interactive }),\n});\nexport type { CardProps, CardVariant } from '@m3-baseui/core';\n"]}

package/dist/checkbox.d.ts

@@ -0,0 +1,63 @@
+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 checkboxTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+    icon: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+    icon: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    indicator: string[];
+    icon: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            icon?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxRootProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & {
+    error?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+
+export { Checkbox, checkboxTv };

package/dist/checkbox.js

@@ -0,0 +1,60 @@
+"use client";
+import { createCheckbox } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/checkbox.ts
+var checkboxTv = tv({
+  slots: {
+    root: [
+      "group relative inline-flex items-center justify-center shrink-0 box-border",
+      "size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent",
+      // Outline is on-surface-variant; the state layer (text/currentColor) is
+      // on-surface unselected, primary when selected (material-web).
+      "border-on-surface-variant text-on-surface",
+      "transition-colors duration-150 ease-standard",
+      "data-[checked]:bg-primary data-[checked]:border-primary data-[checked]:text-primary",
+      "data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary",
+      // M3 pressed state layer inverts: unselected→primary, selected→on-surface
+      "active:text-primary",
+      "data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface",
+      // M3 error: error outline + error-filled box; state layer stays error
+      "data-[error]:border-error data-[error]:text-error data-[error]:active:text-error",
+      "data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error",
+      "data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error",
+      "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0",
+      // M3 disabled: unselected outline on-surface/38; selected/indeterminate
+      // box on-surface/38 with no outline (the check turns surface, below).
+      "data-[disabled]:border-on-surface/38",
+      "data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent",
+      "data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent",
+      // 40dp circular state layer
+      'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',
+      "before:size-10 before:rounded-full before:bg-current before:opacity-0 before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]"
+    ],
+    indicator: [
+      "group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary",
+      // M3 error: the check / dash turn on-error on the error-filled box
+      "group-data-[error]:text-on-error",
+      // M3 disabled: the check / dash turn the surface color on the faint box
+      "group-data-[disabled]:text-surface",
+      "opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100",
+      'data-[indeterminate]:after:content-[""] data-[indeterminate]:after:absolute',
+      "data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current"
+    ],
+    icon: ["w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0"]
+  }
+});
+var c = checkboxTv();
+var Checkbox = createCheckbox({
+  root: c.root(),
+  indicator: c.indicator(),
+  icon: c.icon()
+});
+
+export { Checkbox, checkboxTv };
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,kEAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qFAAA;AAAA,MACA,uGAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,mFAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,oKAAA;AAAA,MACA,4LAAA;AAAA,MACA,4FAAA;AAAA,MACA,sEAAA;AAAA;AAAA;AAAA,MAGA,sCAAA;AAAA,MACA,mGAAA;AAAA,MACA,+GAAA;AAAA;AAAA,MAEA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,yGAAA;AAAA;AAAA,MAEA,kCAAA;AAAA;AAAA,MAEA,oCAAA;AAAA,MACA,uEAAA;AAAA,MACA,6EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,2DAA2D;AAAA;AAEtE,CAAC;AAED,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA;AACV,CAAC","file":"checkbox.js","sourcesContent":["/**\n * checkbox.ts — tailwind-variants slots for the M3 Checkbox.\n *\n * 18dp box with a 40dp circular state layer. Checked/indeterminate fill the box\n * with primary; the indeterminate dash is an `::after` on the indicator and the\n * check SVG is hidden in that state via a group reference.\n */\nimport { createCheckbox } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const checkboxTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center shrink-0 box-border',\n      'size-[18px] rounded-[2px] border-2 cursor-pointer bg-transparent',\n      // Outline 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]:bg-primary data-[checked]:border-primary data-[checked]:text-primary',\n      'data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[indeterminate]:text-primary',\n      // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n      'active:text-primary',\n      'data-[checked]:active:text-on-surface data-[indeterminate]:active:text-on-surface',\n      // M3 error: error outline + error-filled box; state layer stays error\n      'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n      'data-[error]:data-[checked]:bg-error data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n      'data-[error]:data-[indeterminate]:bg-error data-[error]:data-[indeterminate]:border-error data-[error]:data-[indeterminate]:text-error data-[error]:data-[indeterminate]:active:text-error',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      // M3 disabled: unselected outline on-surface/38; selected/indeterminate\n      // box on-surface/38 with no outline (the check turns surface, below).\n      'data-[disabled]:border-on-surface/38',\n      'data-[disabled]:data-[checked]:bg-on-surface/38 data-[disabled]:data-[checked]:border-transparent',\n      'data-[disabled]:data-[indeterminate]:bg-on-surface/38 data-[disabled]:data-[indeterminate]:border-transparent',\n      // 40dp circular state layer\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      'group/cb relative inline-flex items-center justify-center size-full pointer-events-none text-on-primary',\n      // M3 error: the check / dash turn on-error on the error-filled box\n      'group-data-[error]:text-on-error',\n      // M3 disabled: the check / dash turn the surface color on the faint box\n      'group-data-[disabled]:text-surface',\n      'opacity-0 data-[checked]:opacity-100 data-[indeterminate]:opacity-100',\n      'data-[indeterminate]:after:content-[\"\"] data-[indeterminate]:after:absolute',\n      'data-[indeterminate]:after:w-[10px] data-[indeterminate]:after:h-[2px] data-[indeterminate]:after:rounded-full data-[indeterminate]:after:bg-current',\n    ],\n    icon: ['w-[18px] h-[18px] group-data-[indeterminate]/cb:opacity-0'],\n  },\n});\n\nconst c = checkboxTv();\nexport const Checkbox = createCheckbox({\n  root: c.root(),\n  indicator: c.indicator(),\n  icon: c.icon(),\n});\n"]}