@m3-baseui/react-tailwind 1.3.0 → 2.0.0

package/dist/{navigation-rail.js → components/navigation-rail/index.js}

@@ -2,7 +2,7 @@
 import { createNavigationRail } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/navigation-rail.ts
+// src/components/navigation-rail/navigation-rail.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/navigation-rail.ts
+// src/components/navigation-rail/navigation-rail.ts
 var navigationRailTv = tv({
   slots: {
     root: "flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface",
@@ -88,5 +88,5 @@ var NavigationRail = createNavigationRail({
 });
 
 export { NavigationRail, navigationRailTv };
-//# sourceMappingURL=navigation-rail.js.map
-//# sourceMappingURL=navigation-rail.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/navigation-rail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/navigation-rail/navigation-rail.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;;;AC/BI,IAAM,mBAAmB,EAAA,CAAG;AAAA,EACjC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,8DAAA;AAAA,IACN,MAAA,EAAQ,uCAAA;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA,iEAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,oDAAA;AAAA,IACV,SAAA,EAAW;AAAA,MACT,8DAAA;AAAA,MACA,8CAAA;AAAA,MACA,6CAAA;AAAA,MACA,4IAAA;AAAA,MACA,wDAAA;AAAA,MACA,gEAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,mEAAA;AAAA,MACA,8CAAA;AAAA;AAAA,MAEA,gBAAA;AAAA,MACA,kDAAA;AAAA;AAAA;AAAA;AAAA,MAIA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,qEAAA;AAAA;AAAA,MAEA,8CAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,gBAAA,EAAiB;AACpB,IAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,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 * navigation-rail.ts — tailwind-variants slots for the M3 NavigationRail.\n *\n * 80dp vertical rail on `surface`. The selected destination surfaces\n * `data-pressed` (Base UI Toggle); the pill, icon and label colors key off it\n * via the `group` on each item. State layer is the pill `::before`; the pointer\n * ripple is added by the factory. `Root` renders an optional leading `header`\n * (menu button / FAB). Same DOM + `data-*` as the VE build (mirrors NavigationBar).\n */\nimport { createNavigationRail } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const navigationRailTv = tv({\n  slots: {\n    root: 'flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface',\n    header: 'flex flex-col items-center gap-3 mb-1',\n    item: [\n      'group relative flex flex-col items-center justify-center gap-1 px-1 py-1',\n      'bg-transparent border-0 cursor-pointer select-none outline-none',\n      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.\n      'data-[disabled]:pointer-events-none',\n    ],\n    iconWrap: 'relative flex items-center justify-center w-14 h-8',\n    indicator: [\n      'absolute inset-0 rounded-full bg-transparent overflow-hidden',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:bg-secondary-container',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'group-hover:before:opacity-[var(--md-sys-state-hover)]',\n      'group-focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'group-active:before:opacity-[var(--md-sys-state-pressed)]',\n      // No state layer on a disabled destination.\n      'group-data-[disabled]:before:opacity-0',\n    ],\n    icon: [\n      'relative flex items-center justify-center text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      // Raw <svg> icons render at 24dp (Material Symbols set their own size).\n      '[&_svg]:size-6',\n      'group-data-[pressed]:text-on-secondary-container',\n      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,\n      // so the disabled+active override tests both attributes on that single\n      // element (see NavigationBar for the rationale).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n    label: [\n      'text-label-medium text-on-surface-variant',\n      'transition-colors duration-150 ease-standard',\n      'group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold',\n      // M3 disabled: label dims to on-surface/0.38 (same-element override).\n      'group-data-[disabled]:text-on-surface/[0.38]',\n      'group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]',\n    ],\n  },\n});\n\nconst s = navigationRailTv();\nexport const NavigationRail = createNavigationRail({\n  root: s.root(),\n  header: s.header(),\n  item: s.item(),\n  iconWrap: s.iconWrap(),\n  indicator: s.indicator(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

package/dist/components/progress/index.d.ts

@@ -0,0 +1,127 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { CircularProgressProps, LinearProgressProps } 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 linearTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+            indicatorSecondary?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+            indicatorSecondary?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string[];
+    indicator: string[];
+    indicatorSecondary: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+            indicatorSecondary?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+            indicatorSecondary?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string[];
+    indicator: string[];
+    indicatorSecondary: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    track: string[];
+    indicator: string[];
+    indicatorSecondary: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+            indicatorSecondary?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const circularTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string[];
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    track: string[];
+    indicator: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string[];
+    track: string[];
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            track?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Progress: {
+    Linear: react.ForwardRefExoticComponent<_m3_baseui_core.LinearProgressOwnProps & Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue"> & react.RefAttributes<HTMLDivElement>>;
+    Circular: react.ForwardRefExoticComponent<_m3_baseui_core.CircularProgressOwnProps & Omit<react.HTMLAttributes<HTMLSpanElement>, "value" | "defaultValue"> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+export { Progress, circularTv, linearTv };

package/dist/components/progress/index.js

@@ -0,0 +1,101 @@
+"use client";
+import { createProgress } from '@m3-baseui/core';
+import { tv } from 'tailwind-variants';
+
+// src/components/progress/progress.ts
+var linearTv = tv({
+  slots: {
+    // The track-stop dot (primary, full track height) sits at the inline-end via
+    // `after:`. It's a determinate-only M3 concept, so it's hidden while
+    // indeterminate. Logical `end-0` mirrors with the indicator under `dir="rtl"`.
+    // Height comes from the factory (inline) so `thickness` is honored.
+    root: [
+      "group relative block w-full overflow-hidden rounded-full",
+      // The dot is `--m3-thickness` tall (stroke height) and centered, so it stays
+      // correct when the wavy track grows taller than the stroke.
+      "after:content-[''] after:absolute after:end-0 after:top-1/2 after:-translate-y-1/2",
+      "after:h-[var(--m3-thickness,100%)] after:aspect-square after:rounded-full after:bg-primary",
+      // Self variant (not `group-data-*`): the dot is on the root element itself,
+      // which carries `data-indeterminate` — it isn't a descendant of `.group`.
+      "data-[indeterminate]:after:hidden"
+    ],
+    // Positioning container only; the inactive track is the `before:` pseudo so a
+    // 4dp gap separates it from the active indicator (`--m3-progress` + 4px). The
+    // gap uses logical inline insets so it tracks the indicator (which Base UI
+    // anchors at inline-start) under `dir="rtl"`. Indeterminate has no fraction,
+    // so the inactive track spans the full width. The flat track stays
+    // `--m3-thickness` tall and centered even when the wavy root is taller.
+    track: [
+      "absolute inset-0",
+      "before:content-[''] before:absolute before:top-1/2 before:-translate-y-1/2 before:end-0",
+      "before:h-[var(--m3-thickness,100%)]",
+      "before:[inset-inline-start:calc(var(--m3-progress,0%)_+_4px)]",
+      "before:bg-surface-container-highest before:rounded-full",
+      "group-data-[indeterminate]:before:start-0"
+    ],
+    // Primary bar. Determinate: width from Base UI. Indeterminate: full width,
+    // scaled + slid by the disjoint `primary` keyframe (origin at the start edge).
+    // Wavy determinate: a scrolling sine tile masks the solid bar into a wave.
+    indicator: [
+      "absolute inset-y-0 left-0 origin-left bg-primary rounded-full",
+      "transition-[width] duration-200 ease-standard",
+      "group-data-[indeterminate]:w-full group-data-[indeterminate]:transition-none",
+      "group-data-[indeterminate]:animate-m3-linear-primary",
+      "group-data-[wavy]:rounded-none",
+      "group-data-[wavy]:[-webkit-mask-image:var(--m3-wave)] group-data-[wavy]:[mask-image:var(--m3-wave)]",
+      "group-data-[wavy]:[-webkit-mask-repeat:repeat-x] group-data-[wavy]:[mask-repeat:repeat-x]",
+      "group-data-[wavy]:[-webkit-mask-size:40px_100%] group-data-[wavy]:[mask-size:40px_100%]",
+      "group-data-[wavy]:animate-m3-wave-flow",
+      // Reduced motion: freeze the loops and show a static ~40% bar / static wave.
+      "motion-reduce:group-data-[indeterminate]:w-2/5",
+      "motion-reduce:group-data-[indeterminate]:animate-none motion-reduce:group-data-[wavy]:animate-none"
+    ],
+    // Second disjoint bar: only present visually while indeterminate.
+    indicatorSecondary: [
+      "absolute inset-y-0 left-0 w-full origin-left bg-primary rounded-full hidden",
+      "group-data-[indeterminate]:block group-data-[indeterminate]:animate-m3-linear-secondary",
+      // Reduced motion: a single static bar reads better than two frozen ones.
+      "motion-reduce:group-data-[indeterminate]:hidden"
+    ]
+  }
+});
+var circularTv = tv({
+  slots: {
+    // Size comes from the factory (inline width/height) so `size` is honored.
+    // Indeterminate rotates the whole ring; the arc grows/shrinks via the
+    // indicator's own `dash` animation (M3 "advance").
+    root: [
+      "group inline-flex items-center justify-center",
+      "[&_svg]:block [&_svg]:size-full",
+      "data-[indeterminate]:animate-m3-circular-rotate",
+      "motion-reduce:data-[indeterminate]:animate-none"
+    ],
+    // Both ends are rounded (M3); the inactive track sits behind with a 4dp gap.
+    track: [
+      "stroke-surface-container-highest [stroke-linecap:round]",
+      "transition-[stroke-dasharray,stroke-dashoffset] duration-300 ease-standard"
+    ],
+    indicator: [
+      "stroke-primary [stroke-linecap:round]",
+      "transition-[stroke-dasharray,stroke-dashoffset] duration-300 ease-standard",
+      "group-data-[indeterminate]:animate-m3-circular-dash group-data-[indeterminate]:transition-none",
+      // Reduced motion: freeze the arc at its static 25% length (no rotation).
+      "motion-reduce:group-data-[indeterminate]:animate-none"
+    ]
+  }
+});
+var l = linearTv();
+var c = circularTv();
+var Progress = createProgress({
+  linear: {
+    root: l.root(),
+    track: l.track(),
+    indicator: l.indicator(),
+    indicatorSecondary: l.indicatorSecondary()
+  },
+  circular: { root: c.root(), track: c.track(), indicator: c.indicator() }
+});
+
+export { Progress, circularTv, linearTv };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/progress/progress.ts"],"names":[],"mappings":";;;;;AAgBO,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,IAAA,EAAM;AAAA,MACJ,0DAAA;AAAA;AAAA;AAAA,MAGA,oFAAA;AAAA,MACA,4FAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAA,EAAO;AAAA,MACL,kBAAA;AAAA,MACA,yFAAA;AAAA,MACA,qCAAA;AAAA,MACA,+DAAA;AAAA,MACA,yDAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAW;AAAA,MACT,+DAAA;AAAA,MACA,+CAAA;AAAA,MACA,8EAAA;AAAA,MACA,sDAAA;AAAA,MACA,gCAAA;AAAA,MACA,qGAAA;AAAA,MACA,2FAAA;AAAA,MACA,yFAAA;AAAA,MACA,wCAAA;AAAA;AAAA,MAEA,gDAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,kBAAA,EAAoB;AAAA,MAClB,6EAAA;AAAA,MACA,yFAAA;AAAA;AAAA,MAEA;AAAA;AACF;AAEJ,CAAC;AAEM,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAA,EAAM;AAAA,MACJ,+CAAA;AAAA,MACA,iCAAA;AAAA,MACA,iDAAA;AAAA,MACA;AAAA,KACF;AAAA;AAAA,IAEA,KAAA,EAAO;AAAA,MACL,yDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,uCAAA;AAAA,MACA,4EAAA;AAAA,MACA,gGAAA;AAAA;AAAA,MAEA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACnB,IAAM,IAAI,UAAA,EAAW;AACd,IAAM,WAAW,cAAA,CAAe;AAAA,EACrC,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,IACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,IACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,IACvB,kBAAA,EAAoB,EAAE,kBAAA;AAAmB,GAC3C;AAAA,EACA,QAAA,EAAU,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM,EAAG,SAAA,EAAW,CAAA,CAAE,WAAU;AACvE,CAAC","file":"index.js","sourcesContent":["/**\n * progress.ts — tailwind-variants slots for the M3 Progress indicators.\n *\n * Linear: a `surface-container-highest` inactive track with a `primary` active\n * indicator (height from the factory's `thickness`). Per M3 the inactive track\n * (`::before`) starts a 4dp gap past the active tip — positioned from the\n * `--m3-progress` fraction — and a `primary` track-stop dot (`::after`) sits at\n * the far end. Indeterminate keys off the Root's `data-indeterminate`: it drops\n * the gap/dot and runs the M3 disjoint two-bar motion (`m3-linear-primary` +\n * `m3-linear-secondary` in preset.css). Circular: a 40dp / 4dp `primary` ring\n * (size/thickness configurable); `data-indeterminate` rotates the ring while the\n * arc grows/shrinks (advance). Same DOM as the VE build.\n */\nimport { createProgress } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const linearTv = tv({\n  slots: {\n    // The track-stop dot (primary, full track height) sits at the inline-end via\n    // `after:`. It's a determinate-only M3 concept, so it's hidden while\n    // indeterminate. Logical `end-0` mirrors with the indicator under `dir=\"rtl\"`.\n    // Height comes from the factory (inline) so `thickness` is honored.\n    root: [\n      'group relative block w-full overflow-hidden rounded-full',\n      // The dot is `--m3-thickness` tall (stroke height) and centered, so it stays\n      // correct when the wavy track grows taller than the stroke.\n      \"after:content-[''] after:absolute after:end-0 after:top-1/2 after:-translate-y-1/2\",\n      'after:h-[var(--m3-thickness,100%)] after:aspect-square after:rounded-full after:bg-primary',\n      // Self variant (not `group-data-*`): the dot is on the root element itself,\n      // which carries `data-indeterminate` — it isn't a descendant of `.group`.\n      'data-[indeterminate]:after:hidden',\n    ],\n    // Positioning container only; the inactive track is the `before:` pseudo so a\n    // 4dp gap separates it from the active indicator (`--m3-progress` + 4px). The\n    // gap uses logical inline insets so it tracks the indicator (which Base UI\n    // anchors at inline-start) under `dir=\"rtl\"`. Indeterminate has no fraction,\n    // so the inactive track spans the full width. The flat track stays\n    // `--m3-thickness` tall and centered even when the wavy root is taller.\n    track: [\n      'absolute inset-0',\n      \"before:content-[''] before:absolute before:top-1/2 before:-translate-y-1/2 before:end-0\",\n      'before:h-[var(--m3-thickness,100%)]',\n      'before:[inset-inline-start:calc(var(--m3-progress,0%)_+_4px)]',\n      'before:bg-surface-container-highest before:rounded-full',\n      'group-data-[indeterminate]:before:start-0',\n    ],\n    // Primary bar. Determinate: width from Base UI. Indeterminate: full width,\n    // scaled + slid by the disjoint `primary` keyframe (origin at the start edge).\n    // Wavy determinate: a scrolling sine tile masks the solid bar into a wave.\n    indicator: [\n      'absolute inset-y-0 left-0 origin-left bg-primary rounded-full',\n      'transition-[width] duration-200 ease-standard',\n      'group-data-[indeterminate]:w-full group-data-[indeterminate]:transition-none',\n      'group-data-[indeterminate]:animate-m3-linear-primary',\n      'group-data-[wavy]:rounded-none',\n      'group-data-[wavy]:[-webkit-mask-image:var(--m3-wave)] group-data-[wavy]:[mask-image:var(--m3-wave)]',\n      'group-data-[wavy]:[-webkit-mask-repeat:repeat-x] group-data-[wavy]:[mask-repeat:repeat-x]',\n      'group-data-[wavy]:[-webkit-mask-size:40px_100%] group-data-[wavy]:[mask-size:40px_100%]',\n      'group-data-[wavy]:animate-m3-wave-flow',\n      // Reduced motion: freeze the loops and show a static ~40% bar / static wave.\n      'motion-reduce:group-data-[indeterminate]:w-2/5',\n      'motion-reduce:group-data-[indeterminate]:animate-none motion-reduce:group-data-[wavy]:animate-none',\n    ],\n    // Second disjoint bar: only present visually while indeterminate.\n    indicatorSecondary: [\n      'absolute inset-y-0 left-0 w-full origin-left bg-primary rounded-full hidden',\n      'group-data-[indeterminate]:block group-data-[indeterminate]:animate-m3-linear-secondary',\n      // Reduced motion: a single static bar reads better than two frozen ones.\n      'motion-reduce:group-data-[indeterminate]:hidden',\n    ],\n  },\n});\n\nexport const circularTv = tv({\n  slots: {\n    // Size comes from the factory (inline width/height) so `size` is honored.\n    // Indeterminate rotates the whole ring; the arc grows/shrinks via the\n    // indicator's own `dash` animation (M3 \"advance\").\n    root: [\n      'group inline-flex items-center justify-center',\n      '[&_svg]:block [&_svg]:size-full',\n      'data-[indeterminate]:animate-m3-circular-rotate',\n      'motion-reduce:data-[indeterminate]:animate-none',\n    ],\n    // Both ends are rounded (M3); the inactive track sits behind with a 4dp gap.\n    track: [\n      'stroke-surface-container-highest [stroke-linecap:round]',\n      'transition-[stroke-dasharray,stroke-dashoffset] duration-300 ease-standard',\n    ],\n    indicator: [\n      'stroke-primary [stroke-linecap:round]',\n      'transition-[stroke-dasharray,stroke-dashoffset] duration-300 ease-standard',\n      'group-data-[indeterminate]:animate-m3-circular-dash group-data-[indeterminate]:transition-none',\n      // Reduced motion: freeze the arc at its static 25% length (no rotation).\n      'motion-reduce:group-data-[indeterminate]:animate-none',\n    ],\n  },\n});\n\nconst l = linearTv();\nconst c = circularTv();\nexport const Progress = createProgress({\n  linear: {\n    root: l.root(),\n    track: l.track(),\n    indicator: l.indicator(),\n    indicatorSecondary: l.indicatorSecondary(),\n  },\n  circular: { root: c.root(), track: c.track(), indicator: c.indicator() },\n});\nexport type {\n  LinearProgressProps,\n  CircularProgressProps,\n} from '@m3-baseui/core';\n"]}

package/dist/{radio.d.ts → components/radio/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 radioTv: tailwind_variants.TVReturnType<{
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
+        [x: string]: tailwind_merge.ClassNameValue | {
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -22,16 +23,16 @@ declare const radioTv: tailwind_variants.TVReturnType<{
     indicator: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -42,9 +43,9 @@ declare const radioTv: tailwind_variants.TVReturnType<{
     indicator: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            root?: tailwind_merge.ClassNameValue;
+            indicator?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

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

@@ -2,7 +2,7 @@
 import { createRadio, createRadioGroup } from '@m3-baseui/core';
 import { tv } from 'tailwind-variants';
 
-// src/radio.ts
+// src/components/radio/radio.ts
 var radioTv = tv({
   slots: {
     root: [
@@ -48,5 +48,5 @@ var Radio = createRadio({ root: r.root(), indicator: r.indicator() });
 var RadioGroup = createRadioGroup("inline-flex flex-col gap-1");
 
 export { Radio, RadioGroup, radioTv };
-//# sourceMappingURL=radio.js.map
-//# sourceMappingURL=radio.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":";;;;;AASO,IAAM,UAAU,EAAA,CAAG;AAAA,EACxB,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,4EAAA;AAAA,MACA,4DAAA;AAAA;AAAA;AAAA,MAGA,2CAAA;AAAA,MACA,8CAAA;AAAA,MACA,2DAAA;AAAA;AAAA,MAEA,qBAAA;AAAA,MACA,uCAAA;AAAA;AAAA,MAEA,kFAAA;AAAA,MACA,+HAAA;AAAA,MACA,4FAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,sCAAA;AAAA,MACA,oHAAA;AAAA,MACA,qHAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,iEAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,4BAAA;AAAA,MACA,wGAAA;AAAA,MACA,qDAAA;AAAA,MACA,6BAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;AAED,IAAM,IAAI,OAAA,EAAQ;AACX,IAAM,KAAA,GAAQ,WAAA,CAAY,EAAE,IAAA,EAAM,CAAA,CAAE,IAAA,EAAK,EAAG,SAAA,EAAW,CAAA,CAAE,SAAA,EAAU,EAAG;AAEtE,IAAM,UAAA,GAAa,iBAAiB,4BAA4B","file":"index.js","sourcesContent":["/**\n * radio.ts — tailwind-variants slots for the M3 Radio + RadioGroup.\n *\n * 20dp circle with a 40dp circular state layer; checked shows a 10dp primary dot\n * (the indicator) and recolors the ring. RadioGroup lays radios out in a column.\n */\nimport { createRadio, createRadioGroup } from '@m3-baseui/core';\nimport { tv } from 'tailwind-variants';\n\nexport const radioTv = tv({\n  slots: {\n    root: [\n      'group relative inline-flex items-center justify-center shrink-0 box-border',\n      'size-5 rounded-full border-2 cursor-pointer bg-transparent',\n      // Ring is on-surface-variant; the state layer (text/currentColor) is\n      // on-surface unselected, primary when selected (material-web).\n      'border-on-surface-variant text-on-surface',\n      'transition-colors duration-150 ease-standard',\n      'data-[checked]:border-primary data-[checked]:text-primary',\n      // M3 pressed state layer inverts: unselected→primary, selected→on-surface\n      'active:text-primary',\n      'data-[checked]:active:text-on-surface',\n      // M3 error: error ring + error state layer in every interaction state\n      'data-[error]:border-error data-[error]:text-error data-[error]:active:text-error',\n      'data-[error]:data-[checked]:border-error data-[error]:data-[checked]:text-error data-[error]:data-[checked]:active:text-error',\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      // M3 disabled: ring (and dot) turn on-surface/38; no state layer.\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:border-on-surface/38',\n      'before:content-[\"\"] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2',\n      'before:size-10 before:rounded-full before:bg-current before:opacity-0 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    ],\n    indicator: [\n      'block rounded-full bg-primary pointer-events-none origin-center',\n      // M3 inner-circle-grow: the 10dp dot scales from center with\n      // emphasized-decelerate over 300ms (token-backed), not width/height from 0.\n      // Tailwind v4's `scale-*` sets the standalone `scale` property (not\n      // `transform`), so the transition must name `scale` to animate the grow.\n      'size-2.5 scale-0 opacity-0',\n      'transition-[scale,opacity] ease-emphasized-decelerate duration-[var(--md-sys-motion-duration-medium2)]',\n      'data-[checked]:scale-100 data-[checked]:opacity-100',\n      'group-data-[error]:bg-error',\n      'group-data-[disabled]:bg-on-surface/38',\n    ],\n  },\n});\n\nconst r = radioTv();\nexport const Radio = createRadio({ root: r.root(), indicator: r.indicator() });\n\nexport const RadioGroup = createRadioGroup('inline-flex flex-col gap-1');\n"]}

package/dist/{search.d.ts → components/search/index.d.ts}

@@ -1,38 +1,39 @@
 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 searchTv: tailwind_variants.TVReturnType<{
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            input?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            bar?: tailwind_variants.ClassValue;
-            empty?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            bar?: tailwind_merge.ClassNameValue;
+            clear?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            empty?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            input?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            bar?: tailwind_variants.ClassValue;
-            empty?: tailwind_variants.ClassValue;
+        [x: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            bar?: tailwind_merge.ClassNameValue;
+            clear?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            empty?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -49,34 +50,34 @@ declare const searchTv: tailwind_variants.TVReturnType<{
     groupLabel: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            input?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            bar?: tailwind_variants.ClassValue;
-            empty?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            bar?: tailwind_merge.ClassNameValue;
+            clear?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            empty?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            input?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            bar?: tailwind_variants.ClassValue;
-            empty?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            bar?: tailwind_merge.ClassNameValue;
+            clear?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            empty?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -105,18 +106,18 @@ declare const searchTv: tailwind_variants.TVReturnType<{
     groupLabel: string[];
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            input?: tailwind_variants.ClassValue;
-            list?: tailwind_variants.ClassValue;
-            separator?: tailwind_variants.ClassValue;
-            popup?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
-            groupLabel?: tailwind_variants.ClassValue;
-            bar?: tailwind_variants.ClassValue;
-            empty?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            separator?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            bar?: tailwind_merge.ClassNameValue;
+            clear?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            empty?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

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

@@ -2,7 +2,7 @@
 import { createSearch } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/search.ts
+// src/components/search/search.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/search.ts
+// src/components/search/search.ts
 var searchTv = tv({
   slots: {
     bar: [
@@ -101,5 +101,5 @@ var Search = createSearch({
 });
 
 export { Search, searchTv };
-//# sourceMappingURL=search.js.map
-//# sourceMappingURL=search.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/search/search.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;;;AC/BI,IAAM,WAAW,EAAA,CAAG;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,GAAA,EAAK;AAAA,MACH,iEAAA;AAAA,MACA,wDAAA;AAAA,MACA,8CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,0EAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,4DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,gGAAA;AAAA,MACA,oEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,oFAAA;AAAA,MACA,uEAAA;AAAA,MACA,4FAAA;AAAA,MACA,gEAAA;AAAA,MACA,+BAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,cAAc,CAAA;AAAA,IACrB,IAAA,EAAM;AAAA,MACJ,4FAAA;AAAA,MACA,yEAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,+DAAA;AAAA,MACA,8DAAA;AAAA,MACA,qDAAA;AAAA,MACA,6GAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,yDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,oDAAoD,CAAA;AAAA,IAC5D,SAAA,EAAW,CAAC,uCAAuC,CAAA;AAAA,IACnD,UAAA,EAAY,CAAC,oDAAoD;AAAA;AAErE,CAAC;AAED,IAAM,IAAI,QAAA,EAAS;AACZ,IAAM,SAAS,YAAA,CAAa;AAAA,EACjC,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,EACX,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,aAAA,EAAe,EAAE,aAAA,EAAc;AAAA,EAC/B,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,SAAA,EAAW,EAAE,SAAA,EAAU;AAAA,EACvB,UAAA,EAAY,EAAE,UAAA;AAChB,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 * search.ts — Tailwind classes for the M3 Search (search bar + docked view).\n *\n * Resting bar: surface-container-high pill (full corner, 56dp) with a leading\n * magnifier and a body-large input. The docked view is a surface-container-high\n * popup (elevation 3) whose suggestion rows carry a `before:` state layer keyed\n * to hover + Base UI's data-[highlighted]/data-[selected]. Same DOM + ripple as\n * the VE build.\n */\nimport { createSearch } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const searchTv = tv({\n  slots: {\n    bar: [\n      'flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2',\n      'bg-surface-container-high text-on-surface rounded-full',\n      'transition-shadow duration-150 ease-standard',\n      'focus-within:shadow-level1',\n    ],\n    icon: [\n      'inline-flex shrink-0 items-center justify-center text-on-surface-variant',\n      '[&>svg]:size-6',\n    ],\n    input: [\n      'flex-1 min-w-0 h-full bg-transparent border-0 outline-none',\n      'text-body-large text-on-surface placeholder:text-on-surface-variant',\n    ],\n    clear: [\n      'relative inline-flex shrink-0 items-center justify-center size-10 rounded-full overflow-hidden',\n      'text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n    ],\n    popup: [\n      'w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2',\n      'bg-surface-container-high text-on-surface rounded-large shadow-level3',\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',\n      'focus:outline-none',\n    ],\n    list: ['outline-none'],\n    item: [\n      'group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 overflow-hidden',\n      'cursor-pointer select-none outline-none text-body-large text-on-surface',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n      'data-[selected]:before:opacity-[var(--md-sys-state-pressed)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n      '[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6',\n    ],\n    itemIndicator: [\n      'inline-flex items-center justify-center text-on-surface',\n      'invisible group-data-[selected]:visible',\n    ],\n    empty: ['px-4 py-3 text-body-medium text-on-surface-variant'],\n    separator: ['my-2 h-px border-0 bg-outline-variant'],\n    groupLabel: ['px-4 py-2 text-label-small text-on-surface-variant'],\n  },\n});\n\nconst s = searchTv();\nexport const Search = createSearch({\n  bar: s.bar(),\n  icon: s.icon(),\n  input: s.input(),\n  clear: s.clear(),\n  popup: s.popup(),\n  list: s.list(),\n  item: s.item(),\n  itemIndicator: s.itemIndicator(),\n  empty: s.empty(),\n  separator: s.separator(),\n  groupLabel: s.groupLabel(),\n});\n"]}