@m3-baseui/react-tailwind 1.0.0

package/dist/chip.d.ts

@@ -0,0 +1,165 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { ChipProps, ChipVariant } 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 chipTv: tailwind_variants.TVReturnType<{
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    remove: string[];
+    check: string[];
+    avatar: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}, {
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}>, {
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    remove: string[];
+    check: string[];
+    avatar: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    remove: string[];
+    check: string[];
+    avatar: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}, {
+    variant: {
+        assist: {
+            root: string;
+        };
+        suggestion: {
+            root: string;
+        };
+        input: {
+            root: string;
+        };
+        filter: {
+            root: string[];
+        };
+    };
+    elevated: {
+        true: {
+            root: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const Chip: react.ForwardRefExoticComponent<_m3_baseui_core.ChipOwnProps & Omit<react.HTMLAttributes<HTMLElement>, "color"> & react.RefAttributes<HTMLElement>>;
+
+export { Chip, chipTv };

package/dist/chip.js

@@ -0,0 +1,76 @@
+"use client";
+import { createChip } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/chip.ts
+var chipTv = tv({
+  slots: {
+    root: [
+      "group relative inline-flex items-center justify-center gap-2 box-border",
+      "h-8 px-4 rounded-[8px] overflow-hidden select-none border bg-transparent text-label-large",
+      "transition-colors duration-150 ease-standard",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
+      // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.
+      "data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0",
+      "disabled:pointer-events-none disabled:before:opacity-0",
+      "data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12",
+      "disabled:text-on-surface/38 disabled:border-on-surface/12"
+    ],
+    remove: [
+      "inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent",
+      "text-on-surface-variant cursor-pointer hover:opacity-80"
+    ],
+    check: [
+      "inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none",
+      "transition-all duration-150 ease-standard",
+      "group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100"
+    ],
+    // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.
+    avatar: [
+      "inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden",
+      "bg-primary-container text-on-primary-container",
+      "[&>img]:size-full [&>img]:object-cover"
+    ]
+  },
+  variants: {
+    variant: {
+      assist: { root: "border-outline text-on-surface cursor-pointer" },
+      suggestion: { root: "border-outline text-on-surface-variant cursor-pointer" },
+      input: { root: "border-outline text-on-surface-variant cursor-default pr-2" },
+      filter: {
+        root: [
+          "border-outline text-on-surface-variant cursor-pointer",
+          "data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent",
+          // M3 disabled + selected: faint on-surface/12 container
+          "data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12"
+        ]
+      }
+    },
+    // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,
+    // no outline. Disabled drops the shadow.
+    elevated: {
+      true: {
+        root: [
+          "bg-surface-container-low border-transparent shadow-level1",
+          "hover:shadow-level2 active:shadow-level1",
+          "disabled:shadow-none data-[disabled]:shadow-none"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "assist"
+  }
+});
+var Chip = createChip(({ variant, elevated }) => {
+  const c = chipTv({ variant, elevated });
+  return { root: c.root(), remove: c.remove(), check: c.check(), avatar: c.avatar() };
+});
+
+export { Chip, chipTv };
+//# sourceMappingURL=chip.js.map
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip.ts"],"names":[],"mappings":";;;;;AAUO,IAAM,SAAS,EAAA,CAAG;AAAA,EACvB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,yEAAA;AAAA,MACA,2FAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,wDAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,8GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,mHAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,4FAAA;AAAA,MACA,gDAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ,EAAE,IAAA,EAAM,+CAAA,EAAgD;AAAA,MAChE,UAAA,EAAY,EAAE,IAAA,EAAM,uDAAA,EAAwD;AAAA,MAC5E,KAAA,EAAO,EAAE,IAAA,EAAM,4DAAA,EAA6D;AAAA,MAC5E,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM;AAAA,UACJ,uDAAA;AAAA,UACA,oHAAA;AAAA;AAAA,UAEA;AAAA;AACF;AACF,KACF;AAAA;AAAA;AAAA,IAGA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,2DAAA;AAAA,UACA,0CAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,OAAO,UAAA,CAAW,CAAC,EAAE,OAAA,EAAS,UAAS,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,EAAE,OAAA,EAAS,UAAU,CAAA;AACtC,EAAA,OAAO,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,QAAQ,CAAA,CAAE,MAAA,EAAO,EAAG,KAAA,EAAO,EAAE,KAAA,EAAM,EAAG,MAAA,EAAQ,CAAA,CAAE,QAAO,EAAE;AACpF,CAAC","file":"chip.js","sourcesContent":["/**\n * chip.ts — tailwind-variants slots for the M3 Chip.\n *\n * 32dp tall, 8dp corners, label-large. The state layer reacts to hover/focus/\n * press (not the persistent toggle `data-pressed`, which a filter chip uses for\n * its selected fill). Emits the same DOM + ripple as the VE build.\n */\nimport { createChip } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const chipTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center gap-2 box-border',\n      'h-8 px-4 rounded-[8px] overflow-hidden select-none border bg-transparent text-label-large',\n      'transition-colors duration-150 ease-standard',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // M3 disabled: label on-surface/38, outline on-surface/12; no state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    remove: [\n      'inline-flex items-center justify-center shrink-0 size-[18px] -mr-1 ml-1 rounded-full border-0 bg-transparent',\n      'text-on-surface-variant cursor-pointer hover:opacity-80',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 -ml-2 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:ml-0 group-data-[pressed]:opacity-100',\n    ],\n    // M3 leading avatar: 24dp circle; negative margin trims the leading padding to 4dp.\n    avatar: [\n      'inline-flex items-center justify-center shrink-0 size-6 -ml-3 rounded-full overflow-hidden',\n      'bg-primary-container text-on-primary-container',\n      '[&>img]:size-full [&>img]:object-cover',\n    ],\n  },\n  variants: {\n    variant: {\n      assist: { root: 'border-outline text-on-surface cursor-pointer' },\n      suggestion: { root: 'border-outline text-on-surface-variant cursor-pointer' },\n      input: { root: 'border-outline text-on-surface-variant cursor-default pr-2' },\n      filter: {\n        root: [\n          'border-outline text-on-surface-variant cursor-pointer',\n          'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container data-[pressed]:border-transparent',\n          // M3 disabled + selected: faint on-surface/12 container\n          'data-[pressed]:data-[disabled]:bg-on-surface/12 data-[pressed]:disabled:bg-on-surface/12',\n        ],\n      },\n    },\n    // M3 elevated: filled surface-container-low + elevation level1→level2 on hover,\n    // no outline. Disabled drops the shadow.\n    elevated: {\n      true: {\n        root: [\n          'bg-surface-container-low border-transparent shadow-level1',\n          'hover:shadow-level2 active:shadow-level1',\n          'disabled:shadow-none data-[disabled]:shadow-none',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'assist',\n  },\n});\n\nexport const Chip = createChip(({ variant, elevated }) => {\n  const c = chipTv({ variant, elevated });\n  return { root: c.root(), remove: c.remove(), check: c.check(), avatar: c.avatar() };\n});\nexport type { ChipProps, ChipVariant } from '@m3-baseui/core';\n"]}

package/dist/dialog.d.ts

@@ -0,0 +1,86 @@
+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 dialogTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    backdrop: string[];
+    popup: string[];
+    title: string[];
+    description: string[];
+    close: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    backdrop: string[];
+    popup: string[];
+    title: string[];
+    description: string[];
+    close: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    backdrop: string[];
+    popup: string[];
+    title: string[];
+    description: string[];
+    close: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            title?: tailwind_variants.ClassValue;
+            close?: tailwind_variants.ClassValue;
+            popup?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            backdrop?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Dialog: {
+    Root: typeof _base_ui_react.DialogRoot;
+    Trigger: _base_ui_react.DialogTrigger;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Backdrop: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogBackdropProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Title: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<unknown>>;
+    Description: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<unknown>>;
+    Close: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { Dialog, dialogTv };

package/dist/dialog.js

@@ -0,0 +1,68 @@
+"use client";
+import { createDialog } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/dialog.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/dialog.ts
+var dialogTv = tv({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-200 ease-standard",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    popup: [
+      "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+      "w-[min(560px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto",
+      "bg-surface-container-high text-on-surface rounded-extra-large shadow-level3",
+      "p-6 flex flex-col gap-4",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-200 ease-emphasized",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
+      "focus:outline-none"
+    ],
+    title: ["text-headline-small text-on-surface m-0"],
+    description: ["text-body-medium text-on-surface-variant m-0"],
+    close: ["inline-flex"]
+  }
+});
+var d = dialogTv();
+var Dialog = createDialog({
+  backdrop: d.backdrop(),
+  popup: d.popup(),
+  title: d.title(),
+  description: d.description(),
+  close: d.close()
+});
+
+export { Dialog, dialogTv };
+//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/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;;;ACjCI,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,+DAAA;AAAA,MACA,wEAAA;AAAA,MACA,6EAAA;AAAA,MACA,yBAAA;AAAA,MACA,8FAAA;AAAA,MACA,gEAAA;AAAA,MACA,4DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,yCAAyC,CAAA;AAAA,IACjD,WAAA,EAAa,CAAC,8CAA8C,CAAA;AAAA,IAC5D,KAAA,EAAO,CAAC,aAAa;AAAA;AAEzB,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"dialog.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 basic Dialog.\n *\n * Scrim backdrop + centered surface-container-high popup (extra-large corners,\n * elevation 3) with an emphasized fade/scale transition off Base UI's\n * data-[starting-style] / data-[ending-style] attributes.\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 left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n      'w-[min(560px,calc(100vw-48px))] max-h-[calc(100vh-48px)] overflow-auto',\n      'bg-surface-container-high text-on-surface rounded-extra-large shadow-level3',\n      'p-6 flex flex-col gap-4',\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    title: ['text-headline-small text-on-surface m-0'],\n    description: ['text-body-medium text-on-surface-variant m-0'],\n    close: ['inline-flex'],\n  },\n});\n\nconst d = dialogTv();\nexport const Dialog = createDialog({\n  backdrop: d.backdrop(),\n  popup: d.popup(),\n  title: d.title(),\n  description: d.description(),\n  close: d.close(),\n});\n"]}

package/dist/divider.d.ts

@@ -0,0 +1,83 @@
+import * as _base_ui_react from '@base-ui/react';
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { DividerInset, DividerOrientation, DividerProps } 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 dividerTv: tailwind_variants.TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}, undefined, "shrink-0 self-stretch border-0 bg-outline-variant", tailwind_variants_dist_config_js.TVConfig<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}, {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}>, {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}, undefined, "shrink-0 self-stretch border-0 bg-outline-variant", tailwind_variants_dist_config_js.TVConfig<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}, {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    inset: {
+        full: string;
+        inset: string;
+        middle: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const Divider: react.ForwardRefExoticComponent<_m3_baseui_core.DividerOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "role"> & {
+    render?: _base_ui_react.useRender.RenderProp;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { Divider, dividerTv };

package/dist/divider.js

@@ -0,0 +1,34 @@
+"use client";
+import { createDivider } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/divider.ts
+var dividerTv = tv({
+  base: "shrink-0 self-stretch border-0 bg-outline-variant",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-auto",
+      vertical: "w-px h-auto"
+    },
+    inset: {
+      full: "",
+      inset: "",
+      middle: ""
+    }
+  },
+  compoundVariants: [
+    { orientation: "horizontal", inset: "inset", class: "ms-4" },
+    { orientation: "horizontal", inset: "middle", class: "mx-4" },
+    { orientation: "vertical", inset: "inset", class: "mt-4" },
+    { orientation: "vertical", inset: "middle", class: "my-4" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    inset: "full"
+  }
+});
+var Divider = createDivider(({ inset, orientation }) => dividerTv({ inset, orientation }));
+
+export { Divider, dividerTv };
+//# sourceMappingURL=divider.js.map
+//# sourceMappingURL=divider.js.map

package/dist/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/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,IAC5D,EAAE,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,OAAA,EAAS,OAAO,MAAA,EAAO;AAAA,IACzD,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":"divider.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    { orientation: 'vertical', inset: 'inset', class: 'mt-4' },\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

@@ -0,0 +1,104 @@
+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';
+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;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        small: string;
+        regular: string;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, {
+    size: {
+        small: string;
+        regular: string;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}>, {
+    size: {
+        small: string;
+        regular: string;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        small: string;
+        regular: string;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        small: string;
+        regular: string;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}, {
+    size: {
+        small: string;
+        regular: string;
+        large: string;
+        extended: string;
+    };
+    color: {
+        surface: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const Fab: react.ForwardRefExoticComponent<_m3_baseui_core.FabOwnProps & Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
+    render?: _base_ui_react.useRender.RenderProp;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+export { Fab, fabTv };