@m3-baseui/react-tailwind 1.4.0 → 3.0.0

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

@@ -2,16 +2,17 @@
 import { createTextField } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
-// src/textfield.ts
+// src/components/textfield/textfield.ts
+var iconVisual = "inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6";
 var textFieldTv = tv({
   slots: {
     root: "flex flex-col gap-1 min-w-[210px]",
     field: [
-      "relative flex items-stretch gap-3 h-14 px-4 box-border",
+      "relative flex items-stretch gap-3 h-14 px-4 box-border text-on-surface",
       "transition-[border-color,padding] duration-150 ease-standard",
       "group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none"
     ],
-    inputWrap: "relative flex-1 flex items-center min-w-0",
+    inputWrap: "relative z-0 flex-1 flex items-center min-w-0 overflow-visible",
     input: [
       "peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface",
       "placeholder:text-on-surface-variant"
@@ -22,8 +23,18 @@ var textFieldTv = tv({
       "transition-all duration-150 ease-standard",
       "group-data-[focused]:text-primary group-data-[invalid]:text-error"
     ],
-    leadingIcon: "flex items-center shrink-0 text-on-surface-variant",
-    trailingIcon: "flex items-center shrink-0 text-on-surface-variant",
+    leadingIcon: iconVisual,
+    trailingIcon: iconVisual,
+    leadingIconButton: [
+      iconVisual,
+      "relative size-12 p-0 border-0 bg-transparent cursor-pointer",
+      "group-data-[disabled]:pointer-events-none"
+    ],
+    trailingIconButton: [
+      iconVisual,
+      "relative size-12 p-0 border-0 bg-transparent cursor-pointer",
+      "group-data-[disabled]:pointer-events-none"
+    ],
     supporting: [
       "flex justify-between gap-4 px-4 text-body-small text-on-surface-variant",
       "group-data-[invalid]:text-error"
@@ -35,9 +46,15 @@ var textFieldTv = tv({
     variant: {
       filled: {
         field: [
-          "rounded-t-extra-small bg-surface-container-highest",
-          "border-b-2 border-outline",
-          // M3 filled focus-active-indicator-height is 3dp (resting/error stay 2dp).
+          "overflow-hidden rounded-t-extra-small bg-surface-container-highest",
+          // M3 filled hover: state layer (on-surface × state-hover) + indicator color.
+          "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
+          "before:transition-opacity before:duration-100",
+          "hover:before:opacity-[var(--md-sys-state-hover)]",
+          "group-data-[disabled]:before:opacity-0",
+          // M3 filled resting active-indicator: 1dp on-surface-variant.
+          "border-b border-on-surface-variant hover:border-on-surface",
+          // M3 filled focus-active-indicator-height is 3dp.
           "group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error"
         ],
         input: "pt-3",
@@ -48,15 +65,18 @@ var textFieldTv = tv({
       },
       outlined: {
         field: [
-          "rounded-extra-small border border-outline",
+          // Outlined hover = outline color only (no container state layer per M3).
+          "overflow-visible rounded-extra-small border border-outline hover:border-on-surface",
           // M3 outlined focus-outline-width is 3dp (matches Select's trigger);
           // padding drops 2px so content stays steady as the 1dp border grows.
           "group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]",
           "group-data-[invalid]:border-error"
         ],
         label: [
-          "group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1",
-          "group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1"
+          "group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:z-[1]",
+          "group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1 group-data-[focused]:leading-none",
+          "group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:z-[1]",
+          "group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1 group-data-[filled]:leading-none"
         ]
       }
     }
@@ -75,6 +95,8 @@ var TextField = createTextField(({ variant }) => {
     label: c.label(),
     leadingIcon: c.leadingIcon(),
     trailingIcon: c.trailingIcon(),
+    leadingIconButton: c.leadingIconButton(),
+    trailingIconButton: c.trailingIconButton(),
     supporting: c.supporting(),
     supportingText: c.supportingText(),
     counter: c.counter()
@@ -82,5 +104,5 @@ var TextField = createTextField(({ variant }) => {
 });
 
 export { TextField, textFieldTv };
-//# sourceMappingURL=textfield.js.map
-//# sourceMappingURL=textfield.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textfield/textfield.ts"],"names":[],"mappings":";;;;;AAYA,IAAM,UAAA,GACJ,yFAAA;AAEK,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mCAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,wEAAA;AAAA,MACA,8DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,gEAAA;AAAA,IACX,KAAA,EAAO;AAAA,MACL,sFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,iDAAA;AAAA,MACA,kEAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,WAAA,EAAa,UAAA;AAAA,IACb,YAAA,EAAc,UAAA;AAAA,IACd,iBAAA,EAAmB;AAAA,MACjB,UAAA;AAAA,MACA,6DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,kBAAA,EAAoB;AAAA,MAClB,UAAA;AAAA,MACA,6DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,yEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,cAAA,EAAgB,SAAA;AAAA,IAChB,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,oEAAA;AAAA;AAAA,UAEA,uHAAA;AAAA,UACA,+CAAA;AAAA,UACA,kDAAA;AAAA,UACA,wCAAA;AAAA;AAAA,UAEA,4DAAA;AAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,MAAA;AAAA,QACP,KAAA,EAAO;AAAA,UACL,sGAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,QAAA,EAAU;AAAA,QACR,KAAA,EAAO;AAAA;AAAA,UAEL,oFAAA;AAAA;AAAA;AAAA,UAGA,sGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,6FAAA;AAAA,UACA,kIAAA;AAAA,UACA,0FAAA;AAAA,UACA;AAAA;AACF;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAEM,IAAM,SAAA,GAAY,eAAA,CAAgB,CAAC,EAAE,SAAQ,KAAM;AACxD,EAAA,MAAM,CAAA,GAAI,WAAA,CAAY,EAAE,OAAA,EAAS,CAAA;AACjC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,IAC3B,YAAA,EAAc,EAAE,YAAA,EAAa;AAAA,IAC7B,iBAAA,EAAmB,EAAE,iBAAA,EAAkB;AAAA,IACvC,kBAAA,EAAoB,EAAE,kBAAA,EAAmB;AAAA,IACzC,UAAA,EAAY,EAAE,UAAA,EAAW;AAAA,IACzB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,IACjC,OAAA,EAAS,EAAE,OAAA;AAAQ,GACrB;AACF,CAAC","file":"index.js","sourcesContent":["/**\n * textfield.ts — tailwind-variants slots for the M3 TextField.\n *\n * 56dp tall. The floating label and focus/filled border key off Field's\n * `data-focused` / `data-filled` / `data-invalid` via the `group` on Root.\n * Filled = surface-container-highest with a bottom indicator; outlined = a\n * border that thickens to 3dp primary on focus (M3 focus-outline-width). Same\n * DOM as the VE build.\n */\nimport { createTextField } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nconst iconVisual =\n  'inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6';\n\nexport const textFieldTv = tv({\n  slots: {\n    root: 'flex flex-col gap-1 min-w-[210px]',\n    field: [\n      'relative flex items-stretch gap-3 h-14 px-4 box-border text-on-surface',\n      'transition-[border-color,padding] duration-150 ease-standard',\n      'group-data-[disabled]:opacity-[0.38] group-data-[disabled]:pointer-events-none',\n    ],\n    inputWrap: 'relative z-0 flex-1 flex items-center min-w-0 overflow-visible',\n    input: [\n      'peer w-full bg-transparent outline-none border-0 p-0 text-body-large text-on-surface',\n      'placeholder:text-on-surface-variant',\n    ],\n    label: [\n      'absolute left-0 pointer-events-none origin-left',\n      'top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant',\n      'transition-all duration-150 ease-standard',\n      'group-data-[focused]:text-primary group-data-[invalid]:text-error',\n    ],\n    leadingIcon: iconVisual,\n    trailingIcon: iconVisual,\n    leadingIconButton: [\n      iconVisual,\n      'relative size-12 p-0 border-0 bg-transparent cursor-pointer',\n      'group-data-[disabled]:pointer-events-none',\n    ],\n    trailingIconButton: [\n      iconVisual,\n      'relative size-12 p-0 border-0 bg-transparent cursor-pointer',\n      'group-data-[disabled]:pointer-events-none',\n    ],\n    supporting: [\n      'flex justify-between gap-4 px-4 text-body-small text-on-surface-variant',\n      'group-data-[invalid]:text-error',\n    ],\n    supportingText: 'min-w-0',\n    counter: 'shrink-0 tabular-nums',\n  },\n  variants: {\n    variant: {\n      filled: {\n        field: [\n          'overflow-hidden rounded-t-extra-small bg-surface-container-highest',\n          // M3 filled hover: state layer (on-surface × state-hover) + indicator color.\n          'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n          'before:transition-opacity before:duration-100',\n          'hover:before:opacity-[var(--md-sys-state-hover)]',\n          'group-data-[disabled]:before:opacity-0',\n          // M3 filled resting active-indicator: 1dp on-surface-variant.\n          'border-b border-on-surface-variant hover:border-on-surface',\n          // M3 filled focus-active-indicator-height is 3dp.\n          'group-data-[focused]:border-b-[3px] group-data-[focused]:border-primary group-data-[invalid]:border-error',\n        ],\n        input: 'pt-3',\n        label: [\n          'group-data-[focused]:top-1.5 group-data-[focused]:translate-y-0 group-data-[focused]:text-body-small',\n          'group-data-[filled]:top-1.5 group-data-[filled]:translate-y-0 group-data-[filled]:text-body-small',\n        ],\n      },\n      outlined: {\n        field: [\n          // Outlined hover = outline color only (no container state layer per M3).\n          'overflow-visible rounded-extra-small border border-outline hover:border-on-surface',\n          // M3 outlined focus-outline-width is 3dp (matches Select's trigger);\n          // padding drops 2px so content stays steady as the 1dp border grows.\n          'group-data-[focused]:border-[3px] group-data-[focused]:border-primary group-data-[focused]:px-[14px]',\n          'group-data-[invalid]:border-error',\n        ],\n        label: [\n          'group-data-[focused]:top-0 group-data-[focused]:-translate-y-1/2 group-data-[focused]:z-[1]',\n          'group-data-[focused]:text-body-small group-data-[focused]:bg-surface group-data-[focused]:px-1 group-data-[focused]:leading-none',\n          'group-data-[filled]:top-0 group-data-[filled]:-translate-y-1/2 group-data-[filled]:z-[1]',\n          'group-data-[filled]:text-body-small group-data-[filled]:bg-surface group-data-[filled]:px-1 group-data-[filled]:leading-none',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'filled',\n  },\n});\n\nexport const TextField = createTextField(({ variant }) => {\n  const c = textFieldTv({ variant });\n  return {\n    root: c.root(),\n    field: c.field(),\n    inputWrap: c.inputWrap(),\n    input: c.input(),\n    label: c.label(),\n    leadingIcon: c.leadingIcon(),\n    trailingIcon: c.trailingIcon(),\n    leadingIconButton: c.leadingIconButton(),\n    trailingIconButton: c.trailingIconButton(),\n    supporting: c.supporting(),\n    supportingText: c.supportingText(),\n    counter: c.counter(),\n  };\n});\n\nexport type { TextFieldIconAction, TextFieldProps, TextFieldVariant } from '@m3-baseui/core';\n"]}

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

@@ -0,0 +1,153 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { TimePickerVariant, TimeValue } from '@m3-baseui/core';
+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';
+
+declare const timePickerTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            header?: tailwind_merge.ClassNameValue;
+            display?: tailwind_merge.ClassNameValue;
+            dial?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            colon?: tailwind_merge.ClassNameValue;
+            periods?: tailwind_merge.ClassNameValue;
+            period?: tailwind_merge.ClassNameValue;
+            dialNumber?: tailwind_merge.ClassNameValue;
+            dialHand?: tailwind_merge.ClassNameValue;
+            dialCenter?: tailwind_merge.ClassNameValue;
+            inputs?: tailwind_merge.ClassNameValue;
+            inputBox?: tailwind_merge.ClassNameValue;
+            inputCaption?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            header?: tailwind_merge.ClassNameValue;
+            display?: tailwind_merge.ClassNameValue;
+            dial?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            colon?: tailwind_merge.ClassNameValue;
+            periods?: tailwind_merge.ClassNameValue;
+            period?: tailwind_merge.ClassNameValue;
+            dialNumber?: tailwind_merge.ClassNameValue;
+            dialHand?: tailwind_merge.ClassNameValue;
+            dialCenter?: tailwind_merge.ClassNameValue;
+            inputs?: tailwind_merge.ClassNameValue;
+            inputBox?: tailwind_merge.ClassNameValue;
+            inputCaption?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    header: string[];
+    display: 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_merge.ClassNameValue | {
+            header?: tailwind_merge.ClassNameValue;
+            display?: tailwind_merge.ClassNameValue;
+            dial?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            colon?: tailwind_merge.ClassNameValue;
+            periods?: tailwind_merge.ClassNameValue;
+            period?: tailwind_merge.ClassNameValue;
+            dialNumber?: tailwind_merge.ClassNameValue;
+            dialHand?: tailwind_merge.ClassNameValue;
+            dialCenter?: tailwind_merge.ClassNameValue;
+            inputs?: tailwind_merge.ClassNameValue;
+            inputBox?: tailwind_merge.ClassNameValue;
+            inputCaption?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            header?: tailwind_merge.ClassNameValue;
+            display?: tailwind_merge.ClassNameValue;
+            dial?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            colon?: tailwind_merge.ClassNameValue;
+            periods?: tailwind_merge.ClassNameValue;
+            period?: tailwind_merge.ClassNameValue;
+            dialNumber?: tailwind_merge.ClassNameValue;
+            dialHand?: tailwind_merge.ClassNameValue;
+            dialCenter?: tailwind_merge.ClassNameValue;
+            inputs?: tailwind_merge.ClassNameValue;
+            inputBox?: tailwind_merge.ClassNameValue;
+            inputCaption?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    header: string[];
+    display: 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[];
+    display: 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_merge.ClassNameValue | {
+            header?: tailwind_merge.ClassNameValue;
+            display?: tailwind_merge.ClassNameValue;
+            dial?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            colon?: tailwind_merge.ClassNameValue;
+            periods?: tailwind_merge.ClassNameValue;
+            period?: tailwind_merge.ClassNameValue;
+            dialNumber?: tailwind_merge.ClassNameValue;
+            dialHand?: tailwind_merge.ClassNameValue;
+            dialCenter?: tailwind_merge.ClassNameValue;
+            inputs?: tailwind_merge.ClassNameValue;
+            inputBox?: tailwind_merge.ClassNameValue;
+            inputCaption?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, 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 → components/time-picker/index.js}

@@ -2,7 +2,7 @@
 import { createTimePicker } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/time-picker.ts
+// src/components/time-picker/time-picker.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,33 +31,47 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/time-picker.ts
+// src/components/time-picker/time-picker.ts
+var stateLayerBase = [
+  "overflow-hidden",
+  'before:content-[""] before:absolute before:inset-0 before:rounded-[inherit] 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 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
+];
 var timePickerTv = tv({
   slots: {
-    root: ["inline-flex flex-col items-center gap-2 p-2 text-on-surface"],
-    header: ["flex items-center gap-2"],
+    root: ["inline-flex flex-col items-center p-2 text-on-surface"],
+    header: ["flex items-center gap-3 min-h-[98px]"],
+    display: ["inline-flex items-center"],
     field: [
-      "inline-grid place-items-center w-24 h-20 rounded-small overflow-hidden box-border",
+      "relative",
+      ...stateLayerBase,
+      "inline-grid place-items-center w-24 h-20 rounded-small 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"],
+    colon: ["text-display-large text-on-surface px-1 leading-none self-center"],
     periods: [
-      "inline-flex flex-col rounded-small overflow-hidden border border-outline self-stretch",
-      "m-0 p-0 min-w-0"
+      "inline-flex flex-col shrink-0 rounded-small overflow-hidden border border-outline",
+      "h-[98px] w-[52px] m-0 p-0 min-w-0 box-border"
     ],
     period: [
-      "flex-1 inline-flex items-center justify-center px-3 min-h-[38px] w-14",
+      "relative",
+      ...stateLayerBase,
+      "flex-1 inline-flex items-center justify-center min-h-12 h-12 w-full",
       "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"
+      "relative size-[256px] mt-[28px] p-0 min-w-0 border-0 rounded-full bg-surface-container-highest"
     ],
     dialNumber: [
+      ...stateLayerBase,
       "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",
@@ -69,7 +83,7 @@ var timePickerTv = tv({
     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"],
+    inputs: ["flex items-start gap-3"],
     inputBox: [
       "w-24 h-20 rounded-small box-border text-center",
       "bg-surface-container-highest text-on-surface text-display-large outline-none",
@@ -83,6 +97,7 @@ var tp = timePickerTv();
 var TimePicker = createTimePicker(() => ({
   root: tp.root(),
   header: tp.header(),
+  display: tp.display(),
   field: tp.field(),
   colon: tp.colon(),
   periods: tp.periods(),
@@ -97,5 +112,5 @@ var TimePicker = createTimePicker(() => ({
 }));
 
 export { TimePicker, timePickerTv };
-//# sourceMappingURL=time-picker.js.map
-//# sourceMappingURL=time-picker.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/time-picker/time-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 * time-picker.ts — Tailwind classes for the M3 Time picker (dial + input).\n *\n * Dimensions follow Material Android timepicker dimens (96×80 display, 52×98\n * period toggle, 48dp period targets, 12dp display↔toggle gap, 256dp dial,\n * 28dp dial top margin). State layers on interactive slots match other M3 controls.\n */\nimport { createTimePicker } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport type { TimePickerVariant, TimeValue } from '@m3-baseui/core';\n\nconst stateLayerBase = [\n  'overflow-hidden',\n  'before:content-[\"\"] before:absolute before:inset-0 before:rounded-[inherit] 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 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',\n] as const;\n\nexport const timePickerTv = tv({\n  slots: {\n    root: ['inline-flex flex-col items-center p-2 text-on-surface'],\n    header: ['flex items-center gap-3 min-h-[98px]'],\n    display: ['inline-flex items-center'],\n    field: [\n      'relative',\n      ...stateLayerBase,\n      'inline-grid place-items-center w-24 h-20 rounded-small 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 self-center'],\n    periods: [\n      'inline-flex flex-col shrink-0 rounded-small overflow-hidden border border-outline',\n      'h-[98px] w-[52px] m-0 p-0 min-w-0 box-border',\n    ],\n    period: [\n      'relative',\n      ...stateLayerBase,\n      'flex-1 inline-flex items-center justify-center min-h-12 h-12 w-full',\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] mt-[28px] p-0 min-w-0 border-0 rounded-full bg-surface-container-highest',\n    ],\n    dialNumber: [\n      ...stateLayerBase,\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-3'],\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  display: tp.display(),\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.js → components/toolbar/index.js}

@@ -2,7 +2,7 @@
 import { createToolbar } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/toolbar.ts
+// src/components/toolbar/toolbar.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/toolbar.ts
+// src/components/toolbar/toolbar.ts
 var toolbarTv = tv({
   base: "inline-flex items-center justify-center gap-1 box-border rounded-full shadow-level3 [&_svg]:size-6",
   variants: {
@@ -51,5 +51,5 @@ var Toolbar = createToolbar(
 );
 
 export { Toolbar, toolbarTv };
-//# sourceMappingURL=toolbar.js.map
-//# sourceMappingURL=toolbar.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/toolbar/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":"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 * 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/dist/{tooltip.d.ts → components/tooltip/index.d.ts}

@@ -1,20 +1,21 @@
 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';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_merge from 'tailwind-merge';
 
 declare const tooltipTv: tailwind_variants.TVReturnType<{
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            popup?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            popup?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
+        [x: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -22,16 +23,16 @@ declare const tooltipTv: tailwind_variants.TVReturnType<{
     arrow: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            popup?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            popup?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -42,30 +43,30 @@ declare const tooltipTv: tailwind_variants.TVReturnType<{
     arrow: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            popup?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
 declare const richTooltipTv: tailwind_variants.TVReturnType<{
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            actions?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            supportingText?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
-            subhead?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            supportingText?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
+            subhead?: tailwind_merge.ClassNameValue;
+            actions?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            actions?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            supportingText?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
-            subhead?: tailwind_variants.ClassValue;
+        [x: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            supportingText?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
+            subhead?: tailwind_merge.ClassNameValue;
+            actions?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -76,22 +77,22 @@ declare const richTooltipTv: tailwind_variants.TVReturnType<{
     actions: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            actions?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            supportingText?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
-            subhead?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            supportingText?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
+            subhead?: tailwind_merge.ClassNameValue;
+            actions?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            actions?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            supportingText?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
-            subhead?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            supportingText?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
+            subhead?: tailwind_merge.ClassNameValue;
+            actions?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -108,12 +109,12 @@ declare const richTooltipTv: tailwind_variants.TVReturnType<{
     actions: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            actions?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            supportingText?: tailwind_variants.ClassValue;
-            arrow?: tailwind_variants.ClassValue;
-            subhead?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            popup?: tailwind_merge.ClassNameValue;
+            supportingText?: tailwind_merge.ClassNameValue;
+            arrow?: tailwind_merge.ClassNameValue;
+            subhead?: tailwind_merge.ClassNameValue;
+            actions?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

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

@@ -2,7 +2,7 @@
 import { createTooltip, createRichTooltip } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/tooltip.ts
+// src/components/tooltip/tooltip.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/tooltip.ts
+// src/components/tooltip/tooltip.ts
 var transition = [
   "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
   "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
@@ -76,5 +76,5 @@ var RichTooltip = createRichTooltip({
 });
 
 export { RichTooltip, Tooltip, richTooltipTv, tooltipTv };
-//# sourceMappingURL=tooltip.js.map
-//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/tooltip/tooltip.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;;;AC3BH,IAAM,UAAA,GAAa;AAAA,EACjB,4FAAA;AAAA,EACA,gEAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,YAAY,EAAA,CAAG;AAAA,EAC1B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA,yDAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,sBAAsB;AAAA;AAElC,CAAC;AAEM,IAAM,gBAAgB,EAAA,CAAG;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO;AAAA,MACL,oDAAA;AAAA,MACA,4DAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA,KAAA,EAAO,CAAC,wBAAwB,CAAA;AAAA,IAChC,OAAA,EAAS,CAAC,sCAAsC,CAAA;AAAA,IAChD,cAAA,EAAgB,CAAC,8CAA8C,CAAA;AAAA;AAAA;AAAA;AAAA,IAI/D,OAAA,EAAS,CAAC,8CAA8C;AAAA;AAE5D,CAAC;AAED,IAAM,IAAI,SAAA,EAAU;AACb,IAAM,OAAA,GAAU,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG;AAE3E,IAAM,IAAI,aAAA,EAAc;AACjB,IAAM,cAAc,iBAAA,CAAkB;AAAA,EAC3C,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,OAAA,EAAS,EAAE,OAAA,EAAQ;AAAA,EACnB,cAAA,EAAgB,EAAE,cAAA,EAAe;AAAA,EACjC,OAAA,EAAS,EAAE,OAAA;AACb,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 * tooltip.ts — Tailwind classes for the M3 Tooltip (plain + rich).\n *\n * Plain (`Tooltip`, Base UI Tooltip): inverse-surface background, body-small\n * text, extra-small corners, with a fade + small-move transition driven by Base\n * UI's data-[starting-style] / data-[ending-style] attributes.\n *\n * Rich (`RichTooltip`, Base UI Popover): surface-container surface (level2\n * elevation, 12dp corner, 320dp max) holding an optional title-small subhead,\n * body-medium supporting text, and a leading-aligned action row at the bottom\n * (M3 places rich-tooltip actions bottom-left). Built on Popover so its buttons\n * are reachable by keyboard and touch.\n */\nimport { createTooltip, createRichTooltip } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nconst transition = [\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 data-[ending-style]:scale-95',\n];\n\nexport const tooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-inverse-surface text-inverse-on-surface text-body-small',\n      'rounded-extra-small px-2 py-1 max-w-[224px] select-none',\n      ...transition,\n    ],\n    arrow: ['text-inverse-surface'],\n  },\n});\n\nexport const richTooltipTv = tv({\n  slots: {\n    popup: [\n      'bg-surface-container text-on-surface shadow-level2',\n      'rounded-medium px-4 py-3 max-w-[320px] flex flex-col gap-1',\n      'outline-none',\n      ...transition,\n    ],\n    arrow: ['text-surface-container'],\n    subhead: ['text-title-small text-on-surface m-0'],\n    supportingText: ['text-body-medium text-on-surface-variant m-0'],\n    // M3 places rich-tooltip actions at the bottom-left (leading), not trailing\n    // like a dialog. -ml-2 pulls the text button so its label optically aligns\n    // with the content's left edge.\n    actions: ['flex flex-wrap items-center gap-2 mt-1 -ml-2'],\n  },\n});\n\nconst t = tooltipTv();\nexport const Tooltip = createTooltip({ popup: t.popup(), arrow: t.arrow() });\n\nconst r = richTooltipTv();\nexport const RichTooltip = createRichTooltip({\n  popup: r.popup(),\n  arrow: r.arrow(),\n  subhead: r.subhead(),\n  supportingText: r.supportingText(),\n  actions: r.actions(),\n});\n"]}

package/dist/{top-app-bar.js → components/top-app-bar/index.js}

@@ -2,7 +2,7 @@
 import { createTopAppBar } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/top-app-bar.ts
+// src/components/top-app-bar/top-app-bar.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/top-app-bar.ts
+// src/components/top-app-bar/top-app-bar.ts
 var topAppBarTv = tv({
   slots: {
     root: "flex flex-col w-full box-border h-16 bg-surface text-on-surface",
@@ -64,5 +64,5 @@ var TopAppBar = createTopAppBar((args) => {
 });
 
 export { TopAppBar, topAppBarTv };
-//# sourceMappingURL=top-app-bar.js.map
-//# sourceMappingURL=top-app-bar.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map