@m3-baseui/react-tailwind 1.4.0 → 2.0.0

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,189 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_merge from 'tailwind-merge';
+import { createDatePicker } from '@m3-baseui/core';
+
+declare const datePickerTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            grid?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            header?: tailwind_merge.ClassNameValue;
+            weekday?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            calendar?: tailwind_merge.ClassNameValue;
+            navButton?: tailwind_merge.ClassNameValue;
+            monthLabel?: tailwind_merge.ClassNameValue;
+            weekdays?: tailwind_merge.ClassNameValue;
+            day?: tailwind_merge.ClassNameValue;
+            yearGrid?: tailwind_merge.ClassNameValue;
+            yearButton?: tailwind_merge.ClassNameValue;
+            fieldIcon?: tailwind_merge.ClassNameValue;
+            modalBackdrop?: tailwind_merge.ClassNameValue;
+            modalPopup?: tailwind_merge.ClassNameValue;
+            modalHeader?: tailwind_merge.ClassNameValue;
+            modalHeadline?: tailwind_merge.ClassNameValue;
+            modalActions?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            grid?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            header?: tailwind_merge.ClassNameValue;
+            weekday?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            calendar?: tailwind_merge.ClassNameValue;
+            navButton?: tailwind_merge.ClassNameValue;
+            monthLabel?: tailwind_merge.ClassNameValue;
+            weekdays?: tailwind_merge.ClassNameValue;
+            day?: tailwind_merge.ClassNameValue;
+            yearGrid?: tailwind_merge.ClassNameValue;
+            yearButton?: tailwind_merge.ClassNameValue;
+            fieldIcon?: tailwind_merge.ClassNameValue;
+            modalBackdrop?: tailwind_merge.ClassNameValue;
+            modalPopup?: tailwind_merge.ClassNameValue;
+            modalHeader?: tailwind_merge.ClassNameValue;
+            modalHeadline?: tailwind_merge.ClassNameValue;
+            modalActions?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    calendar: string[];
+    header: string[];
+    navButton: string[];
+    monthLabel: string[];
+    grid: string[];
+    weekdays: string[];
+    weekday: string[];
+    day: string[];
+    yearGrid: string[];
+    yearButton: string[];
+    field: string[];
+    input: string[];
+    fieldIcon: string[];
+    popup: string[];
+    modalBackdrop: string[];
+    modalPopup: string[];
+    modalHeader: string[];
+    modalHeadline: string[];
+    modalActions: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            grid?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            header?: tailwind_merge.ClassNameValue;
+            weekday?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            calendar?: tailwind_merge.ClassNameValue;
+            navButton?: tailwind_merge.ClassNameValue;
+            monthLabel?: tailwind_merge.ClassNameValue;
+            weekdays?: tailwind_merge.ClassNameValue;
+            day?: tailwind_merge.ClassNameValue;
+            yearGrid?: tailwind_merge.ClassNameValue;
+            yearButton?: tailwind_merge.ClassNameValue;
+            fieldIcon?: tailwind_merge.ClassNameValue;
+            modalBackdrop?: tailwind_merge.ClassNameValue;
+            modalPopup?: tailwind_merge.ClassNameValue;
+            modalHeader?: tailwind_merge.ClassNameValue;
+            modalHeadline?: tailwind_merge.ClassNameValue;
+            modalActions?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            grid?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            header?: tailwind_merge.ClassNameValue;
+            weekday?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            calendar?: tailwind_merge.ClassNameValue;
+            navButton?: tailwind_merge.ClassNameValue;
+            monthLabel?: tailwind_merge.ClassNameValue;
+            weekdays?: tailwind_merge.ClassNameValue;
+            day?: tailwind_merge.ClassNameValue;
+            yearGrid?: tailwind_merge.ClassNameValue;
+            yearButton?: tailwind_merge.ClassNameValue;
+            fieldIcon?: tailwind_merge.ClassNameValue;
+            modalBackdrop?: tailwind_merge.ClassNameValue;
+            modalPopup?: tailwind_merge.ClassNameValue;
+            modalHeader?: tailwind_merge.ClassNameValue;
+            modalHeadline?: tailwind_merge.ClassNameValue;
+            modalActions?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    calendar: string[];
+    header: string[];
+    navButton: string[];
+    monthLabel: string[];
+    grid: string[];
+    weekdays: string[];
+    weekday: string[];
+    day: string[];
+    yearGrid: string[];
+    yearButton: string[];
+    field: string[];
+    input: string[];
+    fieldIcon: string[];
+    popup: string[];
+    modalBackdrop: string[];
+    modalPopup: string[];
+    modalHeader: string[];
+    modalHeadline: string[];
+    modalActions: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    calendar: string[];
+    header: string[];
+    navButton: string[];
+    monthLabel: string[];
+    grid: string[];
+    weekdays: string[];
+    weekday: string[];
+    day: string[];
+    yearGrid: string[];
+    yearButton: string[];
+    field: string[];
+    input: string[];
+    fieldIcon: string[];
+    popup: string[];
+    modalBackdrop: string[];
+    modalPopup: string[];
+    modalHeader: string[];
+    modalHeadline: string[];
+    modalActions: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            grid?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            header?: tailwind_merge.ClassNameValue;
+            weekday?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            calendar?: tailwind_merge.ClassNameValue;
+            navButton?: tailwind_merge.ClassNameValue;
+            monthLabel?: tailwind_merge.ClassNameValue;
+            weekdays?: tailwind_merge.ClassNameValue;
+            day?: tailwind_merge.ClassNameValue;
+            yearGrid?: tailwind_merge.ClassNameValue;
+            yearButton?: tailwind_merge.ClassNameValue;
+            fieldIcon?: tailwind_merge.ClassNameValue;
+            modalBackdrop?: tailwind_merge.ClassNameValue;
+            modalPopup?: tailwind_merge.ClassNameValue;
+            modalHeader?: tailwind_merge.ClassNameValue;
+            modalHeadline?: tailwind_merge.ClassNameValue;
+            modalActions?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const DatePicker: ReturnType<typeof createDatePicker>;
+
+export { DatePicker, datePickerTv };

package/dist/{date-picker.js → components/date-picker/index.js}

@@ -2,7 +2,7 @@
 import { createDatePicker } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/date-picker.ts
+// src/components/date-picker/date-picker.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/date-picker.ts
+// src/components/date-picker/date-picker.ts
 var datePickerTv = tv({
   slots: {
     calendar: ["w-[328px] max-w-full p-3 text-on-surface"],
@@ -147,5 +147,5 @@ var DatePicker = createDatePicker({
 });
 
 export { DatePicker, datePickerTv };
-//# sourceMappingURL=date-picker.js.map
-//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/date-picker/date-picker.ts"],"names":["baseTv"],"mappings":"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","file":"index.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 * date-picker.ts — Tailwind classes for the M3 Date picker.\n *\n * The month-grid Calendar plus its two surfaces: a docked Popover\n * (surface-container-high, elevation 2, large corners) and a modal Dialog\n * (surface-container-high, elevation 3, extra-large corners). Day cells carry a\n * circular `before:` state layer keyed to hover; the selected day fills with\n * primary. Same DOM + ripple as the VE build.\n */\nimport { createDatePicker } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const datePickerTv = tv({\n  slots: {\n    calendar: ['w-[328px] max-w-full p-3 text-on-surface'],\n    header: ['flex items-center justify-between gap-2 h-12 pl-3 pr-1'],\n    navButton: [\n      'relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>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      'disabled:text-on-surface/[0.38] disabled:before:opacity-0 disabled:pointer-events-none',\n    ],\n    monthLabel: [\n      'relative inline-flex items-center gap-1 h-9 px-3 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      '[&>svg]:transition-transform data-[view=years]:[&>svg]:rotate-180',\n    ],\n    grid: ['mt-2 border-collapse', '[&_td]:p-0 [&_td]:text-center'],\n    weekdays: [''],\n    weekday: ['size-12 font-normal text-body-large text-on-surface-variant'],\n    day: [\n      'relative inline-flex items-center justify-center size-12 rounded-full overflow-hidden',\n      'text-body-large text-on-surface cursor-pointer outline-none',\n      'before:absolute before:inset-0 before:rounded-full 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      // today: 1px primary outline ring\n      'data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-primary',\n      // selected: primary fill, on-primary label, no state layer tint shift\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n    ],\n    // weeks render as 7-col rows; force grid layout on each row\n    yearGrid: ['grid grid-cols-3 gap-2 max-h-[280px] overflow-y-auto px-3 py-2'],\n    yearButton: [\n      'relative inline-flex items-center justify-center h-9 rounded-full overflow-hidden',\n      'text-label-large text-on-surface-variant cursor-pointer 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      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n\n    field: [\n      'inline-flex items-center gap-1 h-14 pl-4 pr-1 min-w-[200px]',\n      'bg-surface-container-highest text-on-surface rounded-t-extra-small',\n      'border-b border-on-surface-variant',\n    ],\n    input: [\n      'flex-1 min-w-0 h-full bg-transparent border-0 outline-none',\n      'text-body-large text-on-surface placeholder:text-on-surface-variant',\n    ],\n    fieldIcon: [\n      'relative inline-flex items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>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    ],\n    popup: [\n      'bg-surface-container-high text-on-surface rounded-large shadow-level2',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0',\n      'focus:outline-none',\n    ],\n\n    modalBackdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    modalPopup: [\n      'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n      'w-[min(360px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n      'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n      'flex flex-col',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n      'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n      'focus:outline-none',\n    ],\n    modalHeader: ['px-6 pt-4 text-label-medium text-on-surface-variant m-0'],\n    modalHeadline: ['px-6 pt-1 pb-4 text-headline-large text-on-surface m-0'],\n    modalActions: ['flex justify-end gap-2 px-6 pb-4 pt-2'],\n  },\n});\n\nconst dp = datePickerTv();\nexport const DatePicker: ReturnType<typeof createDatePicker> = createDatePicker({\n  calendar: dp.calendar(),\n  header: dp.header(),\n  navButton: dp.navButton(),\n  monthLabel: dp.monthLabel(),\n  grid: dp.grid(),\n  weekdays: dp.weekdays(),\n  weekday: dp.weekday(),\n  day: dp.day(),\n  yearGrid: dp.yearGrid(),\n  yearButton: dp.yearButton(),\n  field: dp.field(),\n  input: dp.input(),\n  fieldIcon: dp.fieldIcon(),\n  popup: dp.popup(),\n  modalBackdrop: dp.modalBackdrop(),\n  modalPopup: dp.modalPopup(),\n  modalHeader: dp.modalHeader(),\n  modalHeadline: dp.modalHeadline(),\n  modalActions: dp.modalActions(),\n});\n"]}

package/dist/{dialog.js → components/dialog/index.js}

@@ -2,7 +2,7 @@
 import { createDialog } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/dialog.ts
+// src/components/dialog/dialog.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/dialog.ts
+// src/components/dialog/dialog.ts
 var dialogTv = tv({
   slots: {
     backdrop: [
@@ -99,5 +99,5 @@ var Dialog = createDialog({
 });
 
 export { Dialog, dialogTv };
-//# sourceMappingURL=dialog.js.map
-//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/dialog/dialog.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC9BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA,8FAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA;AAAA;AAAA,IAGA,MAAA,EAAQ;AAAA,MACN,4CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,IAAA,EAAM,CAAC,wCAAwC,CAAA;AAAA,IAC/C,KAAA,EAAO,CAAC,yCAAyC,CAAA;AAAA,IACjD,WAAA,EAAa,CAAC,8CAA8C,CAAA;AAAA;AAAA,IAE5D,OAAA,EAAS,CAAC,sDAAsD,CAAA;AAAA;AAAA;AAAA,IAGhE,OAAA,EAAS,CAAC,0CAA0C,CAAA;AAAA,IACpD,KAAA,EAAO,CAAC,aAAa;AAAA,GACvB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,oDAAA;AAAA,UACA,wEAAA;AAAA,UACA,uEAAA;AAAA,UACA,gEAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,8DAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY;AAAA;AAEhB,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,CAAC,EAAE,UAAA,EAAW,KAAM,SAAS,EAAE,UAAA,EAAY,CAAA,CAAE,KAAA,EAAM;AAAA,EAC1D,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"index.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 * dialog.ts — Tailwind classes for the M3 Dialog (basic + fullscreen).\n *\n * Scrim backdrop + a surface popup with an emphasized fade/scale transition off\n * Base UI's data-[starting-style] / data-[ending-style] attributes. The basic\n * variant is a centered surface-container-high card (extra-large corners,\n * elevation 3, 280–560dp wide); the `fullscreen` variant is an edge-to-edge\n * `surface` with a header row + divider. An optional centered hero icon\n * (`data-slot=\"dialog-icon\"`) center-aligns the headline/supporting text.\n */\nimport { createDialog } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const dialogTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-200 ease-standard',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    popup: [\n      'fixed z-50 box-border overflow-auto flex flex-col text-on-surface focus:outline-none',\n      'origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized',\n      // Icon present → center the headline + supporting text (M3 hero icon).\n      'has-[[data-slot=dialog-icon]]:text-center',\n    ],\n    // Fullscreen header row: leading close icon + title (grows, but shrinks +\n    // ellipsizes instead of pushing the trailing action off-screen) + action.\n    header: [\n      'flex items-center gap-2 px-2 h-14 shrink-0',\n      '[&>*:nth-child(2)]:grow [&>*:nth-child(2)]:min-w-0 [&>*:nth-child(2)]:overflow-hidden [&>*:nth-child(2)]:text-ellipsis [&>*:nth-child(2)]:whitespace-nowrap',\n    ],\n    // Centered 24dp hero icon in the secondary color.\n    icon: ['inline-flex self-center text-secondary'],\n    title: ['text-headline-small text-on-surface m-0'],\n    description: ['text-body-medium text-on-surface-variant m-0'],\n    // 1dp outline-variant rule under the fullscreen header.\n    divider: ['h-px w-full bg-outline-variant shrink-0 m-0 border-0'],\n    // End-aligned action row: 8dp between buttons; the popup gap (16dp) + mt-2\n    // (8dp) totals the 24dp M3 spacing above the actions.\n    actions: ['flex justify-end items-center gap-2 mt-2'],\n    close: ['inline-flex'],\n  },\n  variants: {\n    fullscreen: {\n      false: {\n        popup: [\n          'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n          'w-[min(560px,calc(100vw-48px))] min-w-[280px] max-h-[calc(100vh-48px)]',\n          'p-6 gap-4 rounded-extra-large bg-surface-container-high shadow-level3',\n          'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n          'data-[ending-style]:opacity-0 data-[ending-style]:scale-95',\n        ],\n      },\n      true: {\n        popup: [\n          'inset-0 w-screen h-screen max-w-none rounded-none bg-surface',\n          'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    fullscreen: false,\n  },\n});\n\nconst d = dialogTv();\nexport const Dialog = createDialog({\n  backdrop: d.backdrop(),\n  popup: ({ fullscreen }) => dialogTv({ fullscreen }).popup(),\n  header: d.header(),\n  icon: d.icon(),\n  title: d.title(),\n  description: d.description(),\n  divider: d.divider(),\n  actions: d.actions(),\n  close: d.close(),\n});\n"]}

package/dist/{divider.js → components/divider/index.js}

@@ -2,7 +2,7 @@
 import { createDivider } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
-// src/divider.ts
+// src/components/divider/divider.ts
 var dividerTv = tv({
   base: "shrink-0 self-stretch border-0 bg-outline-variant",
   variants: {
@@ -31,5 +31,5 @@ var dividerTv = tv({
 var Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));
 
 export { Divider, dividerTv };
-//# sourceMappingURL=divider.js.map
-//# sourceMappingURL=divider.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,mDAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,aAAA;AAAA,MACZ,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IAC3D,EAAE,WAAA,EAAa,YAAA,EAAc,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA,EAAO;AAAA;AAAA,IAE5D,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,OAAO,2BAAA,EAA4B;AAAA,IAC9E,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,QAAA,EAAU,OAAO,MAAA;AAAO,GAC5D;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA,CAAc,CAAC,EAAE,KAAA,EAAO,WAAA,EAAY,KAAM,SAAA,CAAU,EAAE,KAAA,EAAO,WAAA,EAAa,CAAC","file":"index.js","sourcesContent":["/**\n * divider.ts — tailwind-variants for the M3 Divider.\n *\n * 1dp `outline-variant` rule. `self-stretch` fills the cross axis in flex\n * layouts; horizontal is 1dp tall, vertical 1dp wide. The inset variants add a\n * 16dp leading (`inset`) or both-ends (`middle`) margin along the main axis.\n * Same DOM + `role=\"separator\"` as the VE build.\n */\nimport { createDivider } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const dividerTv = tv({\n  base: 'shrink-0 self-stretch border-0 bg-outline-variant',\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-auto',\n      vertical: 'w-px h-auto',\n    },\n    inset: {\n      full: '',\n      inset: '',\n      middle: '',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', inset: 'inset', class: 'ms-4' },\n    { orientation: 'horizontal', inset: 'middle', class: 'mx-4' },\n    // Logical block-start margin mirrors the VE recipe's `marginBlockStart`.\n    { orientation: 'vertical', inset: 'inset', class: '[margin-block-start:1rem]' },\n    { orientation: 'vertical', inset: 'middle', class: 'my-4' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    inset: 'full',\n  },\n});\n\nexport const Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));\nexport type { DividerProps, DividerInset, DividerOrientation } from '@m3-baseui/core';\n"]}

package/dist/{fab.d.ts → components/fab/index.d.ts}

@@ -1,19 +1,21 @@
 import * as _base_ui_react from '@base-ui/react';
 import * as react from 'react';
 import * as _m3_baseui_core from '@m3-baseui/core';
-export { FabColor, FabProps, FabSize } from '@m3-baseui/core';
+export { FabColor, FabProps, FabSize, FabVariant } 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 fabTv: tailwind_variants.TVReturnType<{
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;
@@ -21,12 +23,14 @@ declare const fabTv: tailwind_variants.TVReturnType<{
 }, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;
@@ -34,12 +38,14 @@ declare const fabTv: tailwind_variants.TVReturnType<{
 }, {
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;
@@ -47,12 +53,14 @@ declare const fabTv: tailwind_variants.TVReturnType<{
 }>, {
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;
@@ -60,12 +68,14 @@ declare const fabTv: tailwind_variants.TVReturnType<{
 }, undefined, tailwind_variants.TVReturnType<{
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;
@@ -73,12 +83,14 @@ declare const fabTv: tailwind_variants.TVReturnType<{
 }, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;
@@ -86,12 +98,14 @@ declare const fabTv: tailwind_variants.TVReturnType<{
 }, {
     size: {
         small: string;
-        regular: string;
+        medium: string;
         large: string;
+    };
+    variant: {
+        standard: string;
         extended: string;
     };
     color: {
-        surface: string;
         primary: string;
         secondary: string;
         tertiary: string;

package/dist/components/fab/index.js

@@ -0,0 +1,79 @@
+"use client";
+import { createFab } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/components/fab/fab.ts
+var fabTv = tv({
+  base: [
+    "relative inline-flex items-center justify-center box-border overflow-hidden",
+    "border-0 cursor-pointer select-none outline-none",
+    "shadow-level3 hover:shadow-level4",
+    "transition-shadow 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]:before:opacity-[var(--md-sys-state-pressed)]",
+    // M3 discourages disabled FABs (material-web removed the state). When native
+    // disabled is used, apply the same container/label tokens as filled buttons.
+    "disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0",
+    "disabled:bg-on-surface/12 disabled:text-on-surface/38",
+    "data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0",
+    "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38"
+  ],
+  variants: {
+    // Geometry is set by compoundVariants (size × variant); these keys exist so
+    // the resolver can accept them.
+    size: { small: "", medium: "", large: "" },
+    variant: { standard: "", extended: "" },
+    color: {
+      primary: "bg-primary-container text-on-primary-container",
+      secondary: "bg-secondary-container text-on-secondary-container",
+      tertiary: "bg-tertiary-container text-on-tertiary-container"
+    }
+  },
+  compoundVariants: [
+    // ---- Standard (icon-only square): container / corner / icon ----
+    { size: "small", variant: "standard", class: "size-14 rounded-large [&_svg]:size-6" },
+    // 56 / 16 / 24
+    {
+      size: "medium",
+      variant: "standard",
+      class: "size-20 rounded-large-increased [&_svg]:size-7"
+      // 80 / 20 / 28
+    },
+    { size: "large", variant: "standard", class: "size-24 rounded-extra-large [&_svg]:size-8" },
+    // 96 / 28 / 32
+    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----
+    // `min-w-*` keeps the pill affordance for short / text-only labels (wider
+    // than tall), matching the pre-Expressive extended FAB which guarded this.
+    {
+      size: "small",
+      variant: "extended",
+      class: "h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6"
+      // 56 / 16 / 24 / 16 / 8
+    },
+    {
+      size: "medium",
+      variant: "extended",
+      class: "h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7"
+      // 80 / 20 / 28 / 26 / 16
+    },
+    {
+      size: "large",
+      variant: "extended",
+      class: "h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8"
+      // 96 / 28 / 32 / 28 / 20
+    }
+  ],
+  defaultVariants: {
+    size: "small",
+    variant: "standard",
+    color: "primary"
+  }
+});
+var Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));
+
+export { Fab, fabTv };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/fab/fab.ts"],"names":[],"mappings":";;;;;AAcO,IAAM,QAAQ,EAAA,CAAG;AAAA,EACtB,IAAA,EAAM;AAAA,IACJ,6EAAA;AAAA,IACA,kDAAA;AAAA,IACA,mCAAA;AAAA,IACA,8CAAA;AAAA,IACA,4IAAA;AAAA,IACA,kDAAA;AAAA,IACA,0DAAA;AAAA,IACA,qDAAA;AAAA,IACA,6DAAA;AAAA;AAAA;AAAA,IAGA,6EAAA;AAAA,IACA,uDAAA;AAAA,IACA,kGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA;AAAA;AAAA,IAGR,MAAM,EAAE,KAAA,EAAO,IAAI,MAAA,EAAQ,EAAA,EAAI,OAAO,EAAA,EAAG;AAAA,IACzC,OAAA,EAAS,EAAE,QAAA,EAAU,EAAA,EAAI,UAAU,EAAA,EAAG;AAAA,IACtC,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,gDAAA;AAAA,MACT,SAAA,EAAW,oDAAA;AAAA,MACX,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA;AAAA,IAEhB,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,UAAA,EAAY,OAAO,sCAAA,EAAuC;AAAA;AAAA,IACpF;AAAA,MACE,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,IACA,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,UAAA,EAAY,OAAO,4CAAA,EAA6C;AAAA;AAAA;AAAA;AAAA;AAAA,IAI1F;AAAA,MACE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,IACA;AAAA,MACE,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EACE;AAAA;AAAA,KACJ;AAAA,IACA;AAAA,MACE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO;AAAA;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS,UAAA;AAAA,IACT,KAAA,EAAO;AAAA;AAEX,CAAC;AAEM,IAAM,GAAA,GAAM,SAAA,CAAU,CAAC,EAAE,MAAM,KAAA,EAAO,OAAA,EAAQ,KAAM,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,OAAA,EAAS,CAAC","file":"index.js","sourcesContent":["/**\n * fab.ts — tailwind-variants for the M3 (Expressive) FAB.\n *\n * Three sizes (small 56 / medium 80 / large 96 dp) × two variants (standard\n * icon-only square, extended icon + label pill) × three container colors\n * (primary / secondary / tertiary). Elevation level3 (level4 on hover) and a\n * currentColor state-layer `::before`. The size×variant geometry (container,\n * corner, icon, padding, label typescale) is resolved via compoundVariants so\n * every M3 combination maps to exact dp values. The pointer ripple is added by\n * the factory. Same DOM as the VE build.\n */\nimport { createFab } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const fabTv = tv({\n  base: [\n    'relative inline-flex items-center justify-center box-border overflow-hidden',\n    'border-0 cursor-pointer select-none outline-none',\n    'shadow-level3 hover:shadow-level4',\n    'transition-shadow 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]:before:opacity-[var(--md-sys-state-pressed)]',\n    // M3 discourages disabled FABs (material-web removed the state). When native\n    // disabled is used, apply the same container/label tokens as filled buttons.\n    'disabled:pointer-events-none disabled:shadow-none disabled:before:opacity-0',\n    'disabled:bg-on-surface/12 disabled:text-on-surface/38',\n    'data-[disabled]:pointer-events-none data-[disabled]:shadow-none data-[disabled]:before:opacity-0',\n    'data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38',\n  ],\n  variants: {\n    // Geometry is set by compoundVariants (size × variant); these keys exist so\n    // the resolver can accept them.\n    size: { small: '', medium: '', large: '' },\n    variant: { standard: '', extended: '' },\n    color: {\n      primary: 'bg-primary-container text-on-primary-container',\n      secondary: 'bg-secondary-container text-on-secondary-container',\n      tertiary: 'bg-tertiary-container text-on-tertiary-container',\n    },\n  },\n  compoundVariants: [\n    // ---- Standard (icon-only square): container / corner / icon ----\n    { size: 'small', variant: 'standard', class: 'size-14 rounded-large [&_svg]:size-6' }, // 56 / 16 / 24\n    {\n      size: 'medium',\n      variant: 'standard',\n      class: 'size-20 rounded-large-increased [&_svg]:size-7', // 80 / 20 / 28\n    },\n    { size: 'large', variant: 'standard', class: 'size-24 rounded-extra-large [&_svg]:size-8' }, // 96 / 28 / 32\n    // ---- Extended (icon + label pill): height / corner / icon / padding / gap / label ----\n    // `min-w-*` keeps the pill affordance for short / text-only labels (wider\n    // than tall), matching the pre-Expressive extended FAB which guarded this.\n    {\n      size: 'small',\n      variant: 'extended',\n      class: 'h-14 min-w-20 px-4 gap-2 rounded-large text-title-medium [&_svg]:size-6', // 56 / 16 / 24 / 16 / 8\n    },\n    {\n      size: 'medium',\n      variant: 'extended',\n      class:\n        'h-20 min-w-28 px-[26px] gap-4 rounded-large-increased text-title-large [&_svg]:size-7', // 80 / 20 / 28 / 26 / 16\n    },\n    {\n      size: 'large',\n      variant: 'extended',\n      class: 'h-24 min-w-32 px-7 gap-5 rounded-extra-large text-headline-small [&_svg]:size-8', // 96 / 28 / 32 / 28 / 20\n    },\n  ],\n  defaultVariants: {\n    size: 'small',\n    variant: 'standard',\n    color: 'primary',\n  },\n});\n\nexport const Fab = createFab(({ size, color, variant }) => fabTv({ size, color, variant }));\nexport type { FabProps, FabSize, FabVariant, FabColor } from '@m3-baseui/core';\n"]}

package/dist/{fab-menu.d.ts → components/fab-menu/index.d.ts}

@@ -7,9 +7,6 @@ import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config
 
 declare const fabMenuTv: tailwind_variants.TVReturnType<{
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };
@@ -25,9 +22,6 @@ declare const fabMenuTv: tailwind_variants.TVReturnType<{
     item: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<{
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };
@@ -40,9 +34,6 @@ declare const fabMenuTv: tailwind_variants.TVReturnType<{
     };
 }, {
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };
@@ -55,9 +46,6 @@ declare const fabMenuTv: tailwind_variants.TVReturnType<{
     };
 }>, {
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };
@@ -73,9 +61,6 @@ declare const fabMenuTv: tailwind_variants.TVReturnType<{
     item: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };
@@ -91,9 +76,6 @@ declare const fabMenuTv: tailwind_variants.TVReturnType<{
     item: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<{
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };
@@ -106,9 +88,6 @@ declare const fabMenuTv: tailwind_variants.TVReturnType<{
     };
 }, {
     color: {
-        surface: {
-            item: string;
-        };
         primary: {
             item: string;
         };