@m3-baseui/react-tailwind 1.1.0 → 1.2.0

package/dist/toolbar.js

@@ -0,0 +1,55 @@
+"use client";
+import { createToolbar } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/toolbar.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/toolbar.ts
+var toolbarTv = tv({
+  base: "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6",
+  variants: {
+    variant: {
+      standard: "bg-surface-container text-on-surface-variant",
+      vibrant: "bg-primary-container text-on-primary-container [&_button]:text-on-primary-container [&_a]:text-on-primary-container"
+    },
+    orientation: {
+      horizontal: "flex-row h-16 px-2",
+      vertical: "flex-col w-16 py-2"
+    }
+  },
+  defaultVariants: { variant: "standard", orientation: "horizontal" }
+});
+var Toolbar = createToolbar(
+  ({ variant, orientation }) => toolbarTv({ variant, orientation })
+);
+
+export { Toolbar, toolbarTv };
+//# sourceMappingURL=toolbar.js.map
+//# sourceMappingURL=toolbar.js.map

package/dist/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/toolbar.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;;;AC5BI,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,IAAA,EAAM,oGAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,8CAAA;AAAA,MACV,OAAA,EACE;AAAA,KACJ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,oBAAA;AAAA,MACZ,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,UAAA,EAAY,aAAa,YAAA;AACvD,CAAC;AAEM,IAAM,OAAA,GAAU,aAAA;AAAA,EAAc,CAAC,EAAE,OAAA,EAAS,WAAA,OAC/C,SAAA,CAAU,EAAE,OAAA,EAAS,WAAA,EAAa;AACpC","file":"toolbar.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 * toolbar.ts — tailwind-variants for the M3 Expressive Toolbar.\n *\n * A floating, full-radius pill (elevation level3) that groups action icons.\n * `standard` rides on surface-container; `vibrant` on primary-container — and\n * forces its interactive children (icon buttons / links) to the matching\n * on-primary-container foreground, since `IconButton` otherwise paints its own\n * `on-surface-variant`. The descendant selector outranks the button's own color\n * class but not its higher-specificity `data-[disabled]` rule, so disabled\n * actions still dim. `vertical` swaps the main axis and the fixed dimension.\n * Same DOM + `data-*` as the VE build.\n */\nimport { createToolbar } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const toolbarTv = tv({\n  base: 'inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6',\n  variants: {\n    variant: {\n      standard: 'bg-surface-container text-on-surface-variant',\n      vibrant:\n        'bg-primary-container text-on-primary-container [&_button]:text-on-primary-container [&_a]:text-on-primary-container',\n    },\n    orientation: {\n      horizontal: 'flex-row h-16 px-2',\n      vertical: 'flex-col w-16 py-2',\n    },\n  },\n  defaultVariants: { variant: 'standard', orientation: 'horizontal' },\n});\n\nexport const Toolbar = createToolbar(({ variant, orientation }) =>\n  toolbarTv({ variant, orientation }),\n);\nexport type { ToolbarProps, ToolbarVariant, ToolbarOrientation } from '@m3-baseui/core';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3-baseui/react-tailwind",
-  "version": "1.1.0",
+  "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",
@@ -112,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",
@@ -142,6 +147,16 @@
       "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",
@@ -172,6 +187,31 @@
       "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);
+  }
+}