@m3-baseui/react-tailwind 1.0.4 → 1.2.0

package/dist/loading-indicator.d.ts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { LoadingIndicatorProps } from '@m3-baseui/core';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const loadingIndicatorTv: tailwind_variants.TVReturnType<{
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}>, {
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    indicator: string[];
+}, tailwind_variants.TVReturnType<{
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    indicator: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    contained: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}>, unknown, unknown, undefined>>;
+declare const LoadingIndicator: react.ForwardRefExoticComponent<_m3_baseui_core.LoadingIndicatorOwnProps & react.HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+
+export { LoadingIndicator, loadingIndicatorTv };

package/dist/loading-indicator.js

@@ -0,0 +1,61 @@
+"use client";
+import { createLoadingIndicator } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/loading-indicator.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/loading-indicator.ts
+var loadingIndicatorTv = tv({
+  slots: {
+    // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to
+    // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).
+    root: "inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]",
+    indicator: [
+      "fill-primary",
+      // Morph + rotate about the shape's own centre (transform-box: fill-box).
+      "[transform-box:fill-box] origin-center animate-m3-loading"
+    ]
+  },
+  variants: {
+    contained: {
+      true: { root: "size-12 rounded-full bg-secondary-container" },
+      false: {}
+    }
+  },
+  defaultVariants: { contained: false }
+});
+var LoadingIndicator = createLoadingIndicator(({ contained }) => {
+  const s = loadingIndicatorTv({ contained });
+  return { root: s.root(), indicator: s.indicator() };
+});
+
+export { LoadingIndicator, loadingIndicatorTv };
+//# sourceMappingURL=loading-indicator.js.map
+//# sourceMappingURL=loading-indicator.js.map

package/dist/loading-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/loading-indicator.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,qBAAqB,EAAA,CAAG;AAAA,EACnC,KAAA,EAAO;AAAA;AAAA;AAAA,IAGL,IAAA,EAAM,2EAAA;AAAA,IACN,SAAA,EAAW;AAAA,MACT,cAAA;AAAA;AAAA,MAEA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,EAAE,IAAA,EAAM,6CAAA,EAA8C;AAAA,MAC5D,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,SAAA,EAAW,KAAA;AAChC,CAAC;AAEM,IAAM,gBAAA,GAAmB,sBAAA,CAAuB,CAAC,EAAE,WAAU,KAAM;AACxE,EAAA,MAAM,CAAA,GAAI,kBAAA,CAAmB,EAAE,SAAA,EAAW,CAAA;AAC1C,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,SAAA,EAAW,CAAA,CAAE,WAAU,EAAE;AACpD,CAAC","file":"loading-indicator.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 * loading-indicator.ts — tailwind-variants slots for the M3 Expressive Loading\n * indicator.\n *\n * A 48dp box holding the morphing `primary` shape; the rotate+scale morph keys\n * off the `m3-loading` keyframe (see preset.css) and always runs (indeterminate\n * only). `contained` puts the shape on a `secondary-container` pill. Same DOM as\n * the VE build.\n */\nimport { createLoadingIndicator } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const loadingIndicatorTv = tv({\n  slots: {\n    // The SVG is a fixed 38dp active indicator. Uncontained: the box shrinks to\n    // the shape. Contained: a 48dp pill wraps it (5dp inset on each side).\n    root: 'inline-flex items-center justify-center [&_svg]:block [&_svg]:size-[38px]',\n    indicator: [\n      'fill-primary',\n      // Morph + rotate about the shape's own centre (transform-box: fill-box).\n      '[transform-box:fill-box] origin-center animate-m3-loading',\n    ],\n  },\n  variants: {\n    contained: {\n      true: { root: 'size-12 rounded-full bg-secondary-container' },\n      false: {},\n    },\n  },\n  defaultVariants: { contained: false },\n});\n\nexport const LoadingIndicator = createLoadingIndicator(({ contained }) => {\n  const s = loadingIndicatorTv({ contained });\n  return { root: s.root(), indicator: s.indicator() };\n});\nexport type { LoadingIndicatorProps } from '@m3-baseui/core';\n"]}

package/dist/menu.d.ts

@@ -8,8 +8,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
         [key: string]: tailwind_variants.ClassValue | {
             separator?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             submenuTrigger?: tailwind_variants.ClassValue;
             checkboxItem?: tailwind_variants.ClassValue;
@@ -21,8 +21,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
         [x: string]: tailwind_variants.ClassValue | {
             separator?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             submenuTrigger?: tailwind_variants.ClassValue;
             checkboxItem?: tailwind_variants.ClassValue;
@@ -43,8 +43,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
         [key: string]: tailwind_variants.ClassValue | {
             separator?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             submenuTrigger?: tailwind_variants.ClassValue;
             checkboxItem?: tailwind_variants.ClassValue;
@@ -56,8 +56,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
         [key: string]: tailwind_variants.ClassValue | {
             separator?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             submenuTrigger?: tailwind_variants.ClassValue;
             checkboxItem?: tailwind_variants.ClassValue;
@@ -87,8 +87,8 @@ declare const menuTv: tailwind_variants.TVReturnType<{
         [key: string]: tailwind_variants.ClassValue | {
             separator?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             submenuTrigger?: tailwind_variants.ClassValue;
             checkboxItem?: tailwind_variants.ClassValue;

package/dist/navigation-bar.d.ts

@@ -9,8 +9,8 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
             iconWrap?: tailwind_variants.ClassValue;
         };
     };
@@ -20,8 +20,8 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
             iconWrap?: tailwind_variants.ClassValue;
         };
     };
@@ -38,8 +38,8 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
             iconWrap?: tailwind_variants.ClassValue;
         };
     };
@@ -49,8 +49,8 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
             iconWrap?: tailwind_variants.ClassValue;
         };
     };
@@ -74,8 +74,8 @@ declare const navigationBarTv: tailwind_variants.TVReturnType<{
             root?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            indicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
             iconWrap?: tailwind_variants.ClassValue;
         };
     };

package/dist/navigation-rail.d.ts

@@ -0,0 +1,101 @@
+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';
+
+declare const navigationRailTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    item: string[];
+    iconWrap: string;
+    indicator: string[];
+    icon: string[];
+    label: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    item: string[];
+    iconWrap: string;
+    indicator: string[];
+    icon: string[];
+    label: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    header: string;
+    item: string[];
+    iconWrap: string;
+    indicator: string[];
+    icon: string[];
+    label: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            indicator?: tailwind_variants.ClassValue;
+            iconWrap?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const NavigationRail: {
+    Root: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToggleGroup.Props<string> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        header?: React.ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.Toggle.Props<string> & react.RefAttributes<HTMLButtonElement>, "ref">, "children"> & {
+        icon?: React.ReactNode;
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+export { NavigationRail, navigationRailTv };

package/dist/navigation-rail.js

@@ -0,0 +1,92 @@
+"use client";
+import { createNavigationRail } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/navigation-rail.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/navigation-rail.ts
+var navigationRailTv = tv({
+  slots: {
+    root: "flex flex-col items-center gap-3 h-full w-20 py-5 bg-surface",
+    header: "flex flex-col items-center gap-3 mb-1",
+    item: [
+      "group relative flex flex-col items-center justify-center gap-1 px-1 py-1",
+      "bg-transparent border-0 cursor-pointer select-none outline-none",
+      // M3 disabled is per-token (icon + label dimmed below), not a blanket fade.
+      "data-[disabled]:pointer-events-none"
+    ],
+    iconWrap: "relative flex items-center justify-center w-14 h-8",
+    indicator: [
+      "absolute inset-0 rounded-full bg-transparent overflow-hidden",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:bg-secondary-container",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "group-hover:before:opacity-[var(--md-sys-state-hover)]",
+      "group-focus-visible:before:opacity-[var(--md-sys-state-focus)]",
+      "group-active:before:opacity-[var(--md-sys-state-pressed)]",
+      // No state layer on a disabled destination.
+      "group-data-[disabled]:before:opacity-0"
+    ],
+    icon: [
+      "relative flex items-center justify-center text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      // Raw <svg> icons render at 24dp (Material Symbols set their own size).
+      "[&_svg]:size-6",
+      "group-data-[pressed]:text-on-secondary-container",
+      // M3 disabled: icon dims to on-surface/0.38. The item is the only `.group`,
+      // so the disabled+active override tests both attributes on that single
+      // element (see NavigationBar for the rationale).
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
+    ],
+    label: [
+      "text-label-medium text-on-surface-variant",
+      "transition-colors duration-150 ease-standard",
+      "group-data-[pressed]:text-on-surface group-data-[pressed]:font-bold",
+      // M3 disabled: label dims to on-surface/0.38 (same-element override).
+      "group-data-[disabled]:text-on-surface/[0.38]",
+      "group-[&[data-disabled][data-pressed]]:text-on-surface/[0.38]"
+    ]
+  }
+});
+var s = navigationRailTv();
+var NavigationRail = createNavigationRail({
+  root: s.root(),
+  header: s.header(),
+  item: s.item(),
+  iconWrap: s.iconWrap(),
+  indicator: s.indicator(),
+  icon: s.icon(),
+  label: s.label()
+});
+
+export { NavigationRail, navigationRailTv };
+//# sourceMappingURL=navigation-rail.js.map
+//# sourceMappingURL=navigation-rail.js.map

package/dist/navigation-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/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":"navigation-rail.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/search.d.ts

@@ -0,0 +1,148 @@
+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';
+
+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;
+        };
+    };
+} | {
+    [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;
+        };
+    };
+} | {}, {
+    bar: string[];
+    icon: string[];
+    input: string[];
+    clear: string[];
+    popup: string[];
+    list: string[];
+    item: string[];
+    itemIndicator: string[];
+    empty: string[];
+    separator: string[];
+    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]: {
+        [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;
+        };
+    };
+} | {}, {
+    bar: string[];
+    icon: string[];
+    input: string[];
+    clear: string[];
+    popup: string[];
+    list: string[];
+    item: string[];
+    itemIndicator: string[];
+    empty: string[];
+    separator: string[];
+    groupLabel: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    bar: string[];
+    icon: string[];
+    input: string[];
+    clear: string[];
+    popup: string[];
+    list: string[];
+    item: string[];
+    itemIndicator: string[];
+    empty: string[];
+    separator: string[];
+    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;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+declare const Search: {
+    Root: typeof _base_ui_react.ComboboxRoot;
+    Value: typeof _base_ui_react.ComboboxValue;
+    Label: react.ForwardRefExoticComponent<Omit<_base_ui_react.ComboboxLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Bar: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ComboboxInputGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Input: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompleteInputProps, "ref"> & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<unknown>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<_base_ui_react.ComboboxTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Icon: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompleteIconProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Clear: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompleteClearProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.AutocompletePortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.AutocompletePositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompletePopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    List: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompleteListProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ComboboxItemProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    ItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ComboboxItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Empty: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompleteEmptyProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Group: react.ForwardRefExoticComponent<Omit<_base_ui_react.AutocompleteGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    GroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.AutocompleteGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Separator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SeparatorProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Status: react.ForwardRefExoticComponent<Omit<_base_ui_react.AutocompleteStatusProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Collection: typeof _base_ui_react.ComboboxCollection;
+    SearchGlyph: () => React.JSX.Element;
+    Check: () => React.JSX.Element;
+};
+
+export { Search, searchTv };