@m3-baseui/react-tailwind 1.1.0 → 1.3.0

package/dist/time-picker.d.ts

@@ -0,0 +1,144 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { TimePickerVariant, TimeValue } from '@m3-baseui/core';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_variants from 'tailwind-variants';
+
+declare const timePickerTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            dial?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            colon?: tailwind_variants.ClassValue;
+            periods?: tailwind_variants.ClassValue;
+            period?: tailwind_variants.ClassValue;
+            dialNumber?: tailwind_variants.ClassValue;
+            dialHand?: tailwind_variants.ClassValue;
+            dialCenter?: tailwind_variants.ClassValue;
+            inputs?: tailwind_variants.ClassValue;
+            inputBox?: tailwind_variants.ClassValue;
+            inputCaption?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            dial?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            colon?: tailwind_variants.ClassValue;
+            periods?: tailwind_variants.ClassValue;
+            period?: tailwind_variants.ClassValue;
+            dialNumber?: tailwind_variants.ClassValue;
+            dialHand?: tailwind_variants.ClassValue;
+            dialCenter?: tailwind_variants.ClassValue;
+            inputs?: tailwind_variants.ClassValue;
+            inputBox?: tailwind_variants.ClassValue;
+            inputCaption?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    header: string[];
+    field: string[];
+    colon: string[];
+    periods: string[];
+    period: string[];
+    dial: string[];
+    dialNumber: string[];
+    dialHand: string[];
+    dialCenter: string[];
+    inputs: string[];
+    inputBox: string[];
+    inputCaption: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            dial?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            colon?: tailwind_variants.ClassValue;
+            periods?: tailwind_variants.ClassValue;
+            period?: tailwind_variants.ClassValue;
+            dialNumber?: tailwind_variants.ClassValue;
+            dialHand?: tailwind_variants.ClassValue;
+            dialCenter?: tailwind_variants.ClassValue;
+            inputs?: tailwind_variants.ClassValue;
+            inputBox?: tailwind_variants.ClassValue;
+            inputCaption?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            dial?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            colon?: tailwind_variants.ClassValue;
+            periods?: tailwind_variants.ClassValue;
+            period?: tailwind_variants.ClassValue;
+            dialNumber?: tailwind_variants.ClassValue;
+            dialHand?: tailwind_variants.ClassValue;
+            dialCenter?: tailwind_variants.ClassValue;
+            inputs?: tailwind_variants.ClassValue;
+            inputBox?: tailwind_variants.ClassValue;
+            inputCaption?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    header: string[];
+    field: string[];
+    colon: string[];
+    periods: string[];
+    period: string[];
+    dial: string[];
+    dialNumber: string[];
+    dialHand: string[];
+    dialCenter: string[];
+    inputs: string[];
+    inputBox: string[];
+    inputCaption: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    header: string[];
+    field: string[];
+    colon: string[];
+    periods: string[];
+    period: string[];
+    dial: string[];
+    dialNumber: string[];
+    dialHand: string[];
+    dialCenter: string[];
+    inputs: string[];
+    inputBox: string[];
+    inputCaption: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            dial?: tailwind_variants.ClassValue;
+            field?: tailwind_variants.ClassValue;
+            colon?: tailwind_variants.ClassValue;
+            periods?: tailwind_variants.ClassValue;
+            period?: tailwind_variants.ClassValue;
+            dialNumber?: tailwind_variants.ClassValue;
+            dialHand?: tailwind_variants.ClassValue;
+            dialCenter?: tailwind_variants.ClassValue;
+            inputs?: tailwind_variants.ClassValue;
+            inputBox?: tailwind_variants.ClassValue;
+            inputCaption?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const TimePicker: {
+    ({ variant, format, value, defaultValue, onValueChange, className, }: _m3_baseui_core.TimePickerOwnProps): React.JSX.Element;
+    displayName: string;
+};
+
+export { TimePicker, timePickerTv };

package/dist/time-picker.js

@@ -0,0 +1,101 @@
+"use client";
+import { createTimePicker } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/time-picker.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/time-picker.ts
+var timePickerTv = tv({
+  slots: {
+    root: ["inline-flex flex-col items-center gap-2 p-2 text-on-surface"],
+    header: ["flex items-center gap-2"],
+    field: [
+      "inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border",
+      "bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none",
+      "border border-transparent transition-colors duration-100",
+      "data-[selected]:bg-primary-container data-[selected]:text-on-primary-container"
+    ],
+    colon: ["text-display-large text-on-surface px-1 leading-none"],
+    periods: [
+      "inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch",
+      "m-0 p-0 min-w-0"
+    ],
+    period: [
+      "flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14",
+      "border-0 bg-transparent",
+      "text-title-medium text-on-surface-variant cursor-pointer outline-none",
+      "data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
+      "[&+&]:border-t [&+&]:border-outline"
+    ],
+    dial: [
+      "relative size-[256px] my-2 p-0 min-w-0 border-0 rounded-full bg-surface-container-highest"
+    ],
+    dialNumber: [
+      "absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full",
+      "border-0 bg-transparent",
+      "text-body-large text-on-surface cursor-pointer outline-none select-none",
+      "data-[selected]:bg-primary data-[selected]:text-on-primary"
+    ],
+    dialHand: [
+      "absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none"
+    ],
+    dialCenter: [
+      "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none"
+    ],
+    inputs: ["flex items-start gap-2"],
+    inputBox: [
+      "w-24 h-20 rounded-small box-border text-center",
+      "bg-surface-container-highest text-on-surface text-display-large outline-none",
+      "border border-outline focus:border-2 focus:border-primary",
+      "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+    ],
+    inputCaption: ["block mt-1 text-body-small text-on-surface-variant"]
+  }
+});
+var tp = timePickerTv();
+var TimePicker = createTimePicker(() => ({
+  root: tp.root(),
+  header: tp.header(),
+  field: tp.field(),
+  colon: tp.colon(),
+  periods: tp.periods(),
+  period: tp.period(),
+  dial: tp.dial(),
+  dialNumber: tp.dialNumber(),
+  dialHand: tp.dialHand(),
+  dialCenter: tp.dialCenter(),
+  inputs: tp.inputs(),
+  inputBox: tp.inputBox(),
+  inputCaption: tp.inputCaption()
+}));
+
+export { TimePicker, timePickerTv };
+//# sourceMappingURL=time-picker.js.map
+//# sourceMappingURL=time-picker.js.map

package/dist/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/time-picker.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;;;AC7BI,IAAM,eAAe,EAAA,CAAG;AAAA,EAC7B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,CAAC,6DAA6D,CAAA;AAAA,IACpE,MAAA,EAAQ,CAAC,yBAAyB,CAAA;AAAA,IAClC,KAAA,EAAO;AAAA,MACL,mFAAA;AAAA,MACA,6FAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,sDAAsD,CAAA;AAAA,IAC9D,OAAA,EAAS;AAAA,MACP,uFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,uEAAA;AAAA,MACA,yBAAA;AAAA,MACA,uEAAA;AAAA,MACA,oFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,gGAAA;AAAA,MACA,yBAAA;AAAA,MACA,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU;AAAA,MACR;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,CAAC,wBAAwB,CAAA;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,gDAAA;AAAA,MACA,8EAAA;AAAA,MACA,2DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,YAAA,EAAc,CAAC,oDAAoD;AAAA;AAEvE,CAAC;AAED,IAAM,KAAK,YAAA,EAAa;AACjB,IAAM,UAAA,GAAa,iBAAiB,OAAO;AAAA,EAChD,IAAA,EAAM,GAAG,IAAA,EAAK;AAAA,EACd,MAAA,EAAQ,GAAG,MAAA,EAAO;AAAA,EAClB,KAAA,EAAO,GAAG,KAAA,EAAM;AAAA,EAChB,KAAA,EAAO,GAAG,KAAA,EAAM;AAAA,EAChB,OAAA,EAAS,GAAG,OAAA,EAAQ;AAAA,EACpB,MAAA,EAAQ,GAAG,MAAA,EAAO;AAAA,EAClB,IAAA,EAAM,GAAG,IAAA,EAAK;AAAA,EACd,UAAA,EAAY,GAAG,UAAA,EAAW;AAAA,EAC1B,QAAA,EAAU,GAAG,QAAA,EAAS;AAAA,EACtB,UAAA,EAAY,GAAG,UAAA,EAAW;AAAA,EAC1B,MAAA,EAAQ,GAAG,MAAA,EAAO;AAAA,EAClB,QAAA,EAAU,GAAG,QAAA,EAAS;AAAA,EACtB,YAAA,EAAc,GAAG,YAAA;AACnB,CAAA,CAAE","file":"time-picker.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 * time-picker.ts — Tailwind classes for the M3 Time picker (dial + input).\n *\n * The header time fields are surface-container-highest blocks (display-large)\n * that fill with primary-container when active; the AM/PM toggle fills with\n * secondary-container. The dial is a surface-container-highest face whose\n * selected number fills with primary and is reached by a primary hand. Same DOM\n * + data-* as the VE build.\n */\nimport { createTimePicker } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport type { TimePickerVariant, TimeValue } from '@m3-baseui/core';\n\nexport const timePickerTv = tv({\n  slots: {\n    root: ['inline-flex flex-col items-center gap-2 p-2 text-on-surface'],\n    header: ['flex items-center gap-2'],\n    field: [\n      'inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border',\n      'bg-surface-container-highest text-on-surface text-display-large cursor-pointer outline-none',\n      'border border-transparent transition-colors duration-100',\n      'data-[selected]:bg-primary-container data-[selected]:text-on-primary-container',\n    ],\n    colon: ['text-display-large text-on-surface px-1 leading-none'],\n    periods: [\n      'inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch',\n      'm-0 p-0 min-w-0',\n    ],\n    period: [\n      'flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14',\n      'border-0 bg-transparent',\n      'text-title-medium text-on-surface-variant cursor-pointer outline-none',\n      'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n      '[&+&]:border-t [&+&]:border-outline',\n    ],\n    dial: [\n      'relative size-[256px] my-2 p-0 min-w-0 border-0 rounded-full bg-surface-container-highest',\n    ],\n    dialNumber: [\n      'absolute -translate-x-1/2 -translate-y-1/2 inline-grid place-items-center size-12 rounded-full',\n      'border-0 bg-transparent',\n      'text-body-large text-on-surface cursor-pointer outline-none select-none',\n      'data-[selected]:bg-primary data-[selected]:text-on-primary',\n    ],\n    dialHand: [\n      'absolute left-1/2 top-[12%] h-[38%] w-0.5 origin-bottom bg-primary -translate-x-1/2 pointer-events-none',\n    ],\n    dialCenter: [\n      'absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary pointer-events-none',\n    ],\n    inputs: ['flex items-start gap-2'],\n    inputBox: [\n      'w-24 h-20 rounded-small box-border text-center',\n      'bg-surface-container-highest text-on-surface text-display-large outline-none',\n      'border border-outline focus:border-2 focus:border-primary',\n      '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n    ],\n    inputCaption: ['block mt-1 text-body-small text-on-surface-variant'],\n  },\n});\n\nconst tp = timePickerTv();\nexport const TimePicker = createTimePicker(() => ({\n  root: tp.root(),\n  header: tp.header(),\n  field: tp.field(),\n  colon: tp.colon(),\n  periods: tp.periods(),\n  period: tp.period(),\n  dial: tp.dial(),\n  dialNumber: tp.dialNumber(),\n  dialHand: tp.dialHand(),\n  dialCenter: tp.dialCenter(),\n  inputs: tp.inputs(),\n  inputBox: tp.inputBox(),\n  inputCaption: tp.inputCaption(),\n}));\n"]}

package/dist/toolbar.d.ts

@@ -0,0 +1,73 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { ToolbarOrientation, ToolbarProps, ToolbarVariant } 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 toolbarTv: tailwind_variants.TVReturnType<{
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, {
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}>, {
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, {
+    variant: {
+        standard: string;
+        vibrant: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const Toolbar: react.ForwardRefExoticComponent<_m3_baseui_core.ToolbarOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+export { Toolbar, toolbarTv };

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.3.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);
+  }
+}