@m3-baseui/react-tailwind 1.0.4 → 1.2.0

package/dist/top-app-bar.d.ts

@@ -0,0 +1,147 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { TopAppBarProps, TopAppBarVariant } 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 topAppBarTv: tailwind_variants.TVReturnType<{
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}, {
+    root: string;
+    row: string;
+    leading: string;
+    headline: string;
+    trailing: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}, {
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}>, {
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}, {
+    root: string;
+    row: string;
+    leading: string;
+    headline: string;
+    trailing: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}, {
+    root: string;
+    row: string;
+    leading: string;
+    headline: string;
+    trailing: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}, {
+    variant: {
+        small: {
+            headline: string;
+        };
+        center: {
+            headline: string;
+        };
+        medium: {
+            root: string;
+            headline: string;
+        };
+        large: {
+            root: string;
+            headline: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const TopAppBar: react.ForwardRefExoticComponent<_m3_baseui_core.TopAppBarOwnProps & Omit<react.HTMLAttributes<HTMLElement>, "title"> & react.RefAttributes<HTMLElement>>;
+
+export { TopAppBar, topAppBarTv };

package/dist/top-app-bar.js

@@ -0,0 +1,68 @@
+"use client";
+import { createTopAppBar } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/top-app-bar.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/top-app-bar.ts
+var topAppBarTv = tv({
+  slots: {
+    root: "flex flex-col w-full box-border h-16 bg-surface text-on-surface",
+    row: "flex items-center gap-1 h-16 px-1",
+    leading: "flex items-center shrink-0 text-on-surface [&_svg]:size-6",
+    headline: "min-w-0 truncate text-on-surface",
+    trailing: "flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6"
+  },
+  variants: {
+    variant: {
+      small: { headline: "flex-1 px-3 text-title-large" },
+      center: { headline: "flex-1 px-3 text-center text-title-large" },
+      medium: { root: "h-28", headline: "px-4 pb-6 text-headline-small" },
+      large: { root: "h-38", headline: "px-4 pb-7 text-headline-medium" }
+    }
+  },
+  defaultVariants: {
+    variant: "small"
+  }
+});
+var TopAppBar = createTopAppBar((args) => {
+  const s = topAppBarTv({ variant: args.variant });
+  return {
+    root: s.root(),
+    row: s.row(),
+    leading: s.leading(),
+    headline: s.headline(),
+    trailing: s.trailing()
+  };
+});
+
+export { TopAppBar, topAppBarTv };
+//# sourceMappingURL=top-app-bar.js.map
+//# sourceMappingURL=top-app-bar.js.map

package/dist/top-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/top-app-bar.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;;;AChCI,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,iEAAA;AAAA,IACN,GAAA,EAAK,mCAAA;AAAA,IACL,OAAA,EAAS,2DAAA;AAAA,IACT,QAAA,EAAU,kCAAA;AAAA,IACV,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,EAAE,QAAA,EAAU,8BAAA,EAA+B;AAAA,MAClD,MAAA,EAAQ,EAAE,QAAA,EAAU,0CAAA,EAA2C;AAAA,MAC/D,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,+BAAA,EAAgC;AAAA,MAClE,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,gCAAA;AAAiC;AACpE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,IAAA,KAAS;AACjD,EAAA,MAAM,IAAI,WAAA,CAAY,EAAE,OAAA,EAAS,IAAA,CAAK,SAAS,CAAA;AAC/C,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACX,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,IACnB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,IACrB,QAAA,EAAU,EAAE,QAAA;AAAS,GACvB;AACF,CAAC","file":"top-app-bar.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 * top-app-bar.ts — tailwind-variants slots for the M3 TopAppBar.\n *\n * A `surface` bar. `small`/`center` are a single 64dp row (title-large, left vs.\n * centered); `medium`/`large` add a second headline line (headline-small /\n * headline-medium) below a 64dp action row, for 112dp / 152dp totals. The active\n * variant is exposed as `data-variant`. Same DOM as the VE build.\n */\nimport { createTopAppBar } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const topAppBarTv = tv({\n  slots: {\n    root: 'flex flex-col w-full box-border h-16 bg-surface text-on-surface',\n    row: 'flex items-center gap-1 h-16 px-1',\n    leading: 'flex items-center shrink-0 text-on-surface [&_svg]:size-6',\n    headline: 'min-w-0 truncate text-on-surface',\n    trailing: 'flex items-center gap-1 shrink-0 text-on-surface-variant [&_svg]:size-6',\n  },\n  variants: {\n    variant: {\n      small: { headline: 'flex-1 px-3 text-title-large' },\n      center: { headline: 'flex-1 px-3 text-center text-title-large' },\n      medium: { root: 'h-28', headline: 'px-4 pb-6 text-headline-small' },\n      large: { root: 'h-38', headline: 'px-4 pb-7 text-headline-medium' },\n    },\n  },\n  defaultVariants: {\n    variant: 'small',\n  },\n});\n\nexport const TopAppBar = createTopAppBar((args) => {\n  const s = topAppBarTv({ variant: args.variant });\n  return {\n    root: s.root(),\n    row: s.row(),\n    leading: s.leading(),\n    headline: s.headline(),\n    trailing: s.trailing(),\n  };\n});\nexport type { TopAppBarProps, TopAppBarVariant } from '@m3-baseui/core';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3-baseui/react-tailwind",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "M3 components implemented with tailwind-variants over the shared @m3-baseui/core factories. Ships the Tailwind v4 @theme preset.",
   "type": "module",
   "license": "MIT",
@@ -97,6 +97,11 @@
       "types": "./dist/fab.d.ts",
       "default": "./dist/fab.js"
     },
+    "./fab-menu": {
+      "@m3/source": "./src/fab-menu.ts",
+      "types": "./dist/fab-menu.d.ts",
+      "default": "./dist/fab-menu.js"
+    },
     "./divider": {
       "@m3/source": "./src/divider.ts",
       "types": "./dist/divider.d.ts",
@@ -107,6 +112,11 @@
       "types": "./dist/progress.d.ts",
       "default": "./dist/progress.js"
     },
+    "./loading-indicator": {
+      "@m3/source": "./src/loading-indicator.ts",
+      "types": "./dist/loading-indicator.d.ts",
+      "default": "./dist/loading-indicator.js"
+    },
     "./list": {
       "@m3/source": "./src/list.ts",
       "types": "./dist/list.d.ts",
@@ -137,11 +147,71 @@
       "types": "./dist/segmented-button.d.ts",
       "default": "./dist/segmented-button.js"
     },
+    "./button-group": {
+      "@m3/source": "./src/button-group.ts",
+      "types": "./dist/button-group.d.ts",
+      "default": "./dist/button-group.js"
+    },
+    "./split-button": {
+      "@m3/source": "./src/split-button.ts",
+      "types": "./dist/split-button.d.ts",
+      "default": "./dist/split-button.js"
+    },
     "./navigation-drawer": {
       "@m3/source": "./src/navigation-drawer.ts",
       "types": "./dist/navigation-drawer.d.ts",
       "default": "./dist/navigation-drawer.js"
     },
+    "./top-app-bar": {
+      "@m3/source": "./src/top-app-bar.ts",
+      "types": "./dist/top-app-bar.d.ts",
+      "default": "./dist/top-app-bar.js"
+    },
+    "./bottom-app-bar": {
+      "@m3/source": "./src/bottom-app-bar.ts",
+      "types": "./dist/bottom-app-bar.d.ts",
+      "default": "./dist/bottom-app-bar.js"
+    },
+    "./navigation-rail": {
+      "@m3/source": "./src/navigation-rail.ts",
+      "types": "./dist/navigation-rail.d.ts",
+      "default": "./dist/navigation-rail.js"
+    },
+    "./bottom-sheet": {
+      "@m3/source": "./src/bottom-sheet.ts",
+      "types": "./dist/bottom-sheet.d.ts",
+      "default": "./dist/bottom-sheet.js"
+    },
+    "./side-sheet": {
+      "@m3/source": "./src/side-sheet.ts",
+      "types": "./dist/side-sheet.d.ts",
+      "default": "./dist/side-sheet.js"
+    },
+    "./search": {
+      "@m3/source": "./src/search.ts",
+      "types": "./dist/search.d.ts",
+      "default": "./dist/search.js"
+    },
+    "./date-picker": {
+      "@m3/source": "./src/date-picker.ts",
+      "types": "./dist/date-picker.d.ts",
+      "default": "./dist/date-picker.js"
+    },
+    "./time-picker": {
+      "@m3/source": "./src/time-picker.ts",
+      "types": "./dist/time-picker.d.ts",
+      "default": "./dist/time-picker.js"
+    },
+    "./toolbar": {
+      "@m3/source": "./src/toolbar.ts",
+      "types": "./dist/toolbar.d.ts",
+      "default": "./dist/toolbar.js"
+    },
+    "./carousel": {
+      "@m3/source": "./src/carousel.ts",
+      "types": "./dist/carousel.d.ts",
+      "default": "./dist/carousel.js"
+    },
     "./preset.css": "./styles/preset.css",
     "./tokens.css": "./styles/tokens.css",
     "./theme.css": "./styles/theme.css"

package/styles/preset.css

@@ -19,6 +19,9 @@
  */
 @theme {
   --animate-m3-linear-indeterminate: m3-linear-indeterminate 2s ease-in-out infinite;
+  /* M3 Expressive loading indicator: the active shape rotates while it morphs
+   * (approximated as a rotate + scale pulse). The VE build matches this period. */
+  --animate-m3-loading: m3-loading 1.2s ease-in-out infinite;
 }
 
 @keyframes m3-linear-indeterminate {
@@ -29,3 +32,15 @@
     transform: translateX(400%);
   }
 }
+
+@keyframes m3-loading {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.85);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}