@m3-baseui/react-tailwind 1.0.4 → 1.2.0

package/dist/search.js

@@ -0,0 +1,105 @@
+"use client";
+import { createSearch } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/search.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/search.ts
+var searchTv = tv({
+  slots: {
+    bar: [
+      "flex items-center gap-1 h-14 min-w-[360px] max-w-full pl-4 pr-2",
+      "bg-surface-container-high text-on-surface rounded-full",
+      "transition-shadow duration-150 ease-standard",
+      "focus-within:shadow-level1"
+    ],
+    icon: [
+      "inline-flex shrink-0 items-center justify-center text-on-surface-variant",
+      "[&>svg]:size-6"
+    ],
+    input: [
+      "flex-1 min-w-0 h-full bg-transparent border-0 outline-none",
+      "text-body-large text-on-surface placeholder:text-on-surface-variant"
+    ],
+    clear: [
+      "relative inline-flex shrink-0 items-center justify-center size-10 rounded-full overflow-hidden",
+      "text-on-surface-variant cursor-pointer outline-none [&>svg]:size-6",
+      "before:absolute before:inset-0 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)]"
+    ],
+    popup: [
+      "w-[var(--anchor-width)] min-w-[360px] max-h-[min(72vh,480px)] overflow-y-auto py-2",
+      "bg-surface-container-high text-on-surface rounded-large shadow-level3",
+      "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+      "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+      "data-[ending-style]:opacity-0",
+      "focus:outline-none"
+    ],
+    list: ["outline-none"],
+    item: [
+      "group relative grid grid-cols-[24px_1fr_24px] items-center gap-4 h-14 px-4 overflow-hidden",
+      "cursor-pointer select-none outline-none text-body-large text-on-surface",
+      "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+      "hover:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+      "data-[selected]:before:opacity-[var(--md-sys-state-pressed)]",
+      "active:before:opacity-[var(--md-sys-state-pressed)]",
+      "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+      "[&_[data-slot=search-leading]]:inline-flex [&_[data-slot=search-leading]]:text-on-surface-variant [&_[data-slot=search-leading]>svg]:size-6"
+    ],
+    itemIndicator: [
+      "inline-flex items-center justify-center text-on-surface",
+      "invisible group-data-[selected]:visible"
+    ],
+    empty: ["px-4 py-3 text-body-medium text-on-surface-variant"],
+    separator: ["my-2 h-px border-0 bg-outline-variant"],
+    groupLabel: ["px-4 py-2 text-label-small text-on-surface-variant"]
+  }
+});
+var s = searchTv();
+var Search = createSearch({
+  bar: s.bar(),
+  icon: s.icon(),
+  input: s.input(),
+  clear: s.clear(),
+  popup: s.popup(),
+  list: s.list(),
+  item: s.item(),
+  itemIndicator: s.itemIndicator(),
+  empty: s.empty(),
+  separator: s.separator(),
+  groupLabel: s.groupLabel()
+});
+
+export { Search, searchTv };
+//# sourceMappingURL=search.js.map
+//# sourceMappingURL=search.js.map

package/dist/search.js.map

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

package/dist/segmented-button.d.ts

@@ -8,8 +8,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
             root?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
         };
@@ -18,8 +18,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
             root?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
         };
@@ -34,8 +34,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
             root?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
         };
@@ -44,8 +44,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
             root?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
         };
@@ -66,8 +66,8 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
             root?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
             label?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
         };

package/dist/select.d.ts

@@ -9,8 +9,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             value?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             scrollUpArrow?: tailwind_variants.ClassValue;
@@ -23,8 +23,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             value?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             scrollUpArrow?: tailwind_variants.ClassValue;
@@ -47,8 +47,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             value?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             scrollUpArrow?: tailwind_variants.ClassValue;
@@ -61,8 +61,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             value?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             scrollUpArrow?: tailwind_variants.ClassValue;
@@ -95,8 +95,8 @@ declare const selectTv: tailwind_variants.TVReturnType<{
             value?: tailwind_variants.ClassValue;
             popup?: tailwind_variants.ClassValue;
             icon?: tailwind_variants.ClassValue;
-            itemIndicator?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
+            itemIndicator?: tailwind_variants.ClassValue;
             groupLabel?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
             scrollUpArrow?: tailwind_variants.ClassValue;

package/dist/side-sheet.d.ts

@@ -0,0 +1,112 @@
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { SideSheetSide, SideSheetVariant } 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 sideSheetTv: tailwind_variants.TVReturnType<{
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    header: string;
+    title: string[];
+    description: string[];
+    close: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}, {
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}>, {
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    header: string;
+    title: string[];
+    description: string[];
+    close: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}, {
+    backdrop: string[];
+    viewport: string;
+    popup: string[];
+    header: string;
+    title: string[];
+    description: string[];
+    close: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}, {
+    variant: {
+        modal: {
+            popup: string[];
+        };
+        standard: {
+            popup: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const SideSheet: {
+    Root: {
+        ({ variant, side, ...props }: _m3_baseui_core.SideSheetOwnProps & Omit<_base_ui_react.DrawerRoot.Props<unknown>, "modal" | "swipeDirection">): React.JSX.Element;
+        displayName: string;
+    };
+    Trigger: _base_ui_react.DrawerTrigger;
+    Portal: _base_ui_react.DrawerPortal;
+    Backdrop: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerBackdropProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Viewport: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.DrawerPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerTitleProps, "ref"> & react.RefAttributes<unknown>>;
+    Description: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerDescriptionProps, "ref"> & react.RefAttributes<unknown>>;
+    Close: react.ForwardRefExoticComponent<Omit<_base_ui_react.DrawerCloseProps, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { SideSheet, sideSheetTv };

package/dist/side-sheet.js

@@ -0,0 +1,90 @@
+"use client";
+import { createSideSheet } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/side-sheet.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/side-sheet.ts
+var sideSheetTv = tv({
+  slots: {
+    backdrop: [
+      "fixed inset-0 z-40 bg-scrim/32",
+      "transition-opacity duration-300 ease-emphasized",
+      "data-[swiping]:transition-none",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+    ],
+    viewport: "fixed inset-0 z-50 flex items-stretch",
+    popup: [
+      "box-border h-full w-[320px] max-w-[calc(100vw-56px)]",
+      "flex flex-col overflow-y-auto overscroll-contain touch-auto outline-none",
+      "bg-surface-container-low text-on-surface",
+      "data-[swipe-direction=right]:ml-auto data-[swipe-direction=left]:mr-auto",
+      "[transform:translateX(var(--drawer-swipe-movement-x))]",
+      "transition-transform duration-300 ease-emphasized",
+      "data-[swiping]:select-none",
+      "data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(100%)]",
+      "data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(100%)]",
+      "data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(-100%)]",
+      "data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(-100%)]"
+    ],
+    header: "flex items-center gap-2 min-h-14 px-4 py-2",
+    title: ["flex-1 m-0 text-title-large text-on-surface"],
+    description: ["m-0 px-6 pb-4 text-body-medium text-on-surface-variant"],
+    close: "inline-flex shrink-0"
+  },
+  variants: {
+    variant: {
+      modal: {
+        popup: [
+          "shadow-level1",
+          "data-[swipe-direction=right]:rounded-s-large data-[swipe-direction=left]:rounded-e-large"
+        ]
+      },
+      standard: { popup: "shadow-none" }
+    }
+  },
+  defaultVariants: {
+    variant: "modal"
+  }
+});
+var s = sideSheetTv();
+var SideSheet = createSideSheet({
+  backdrop: s.backdrop(),
+  viewport: s.viewport(),
+  popup: ({ variant }) => sideSheetTv({ variant }).popup(),
+  header: s.header(),
+  title: s.title(),
+  description: s.description(),
+  close: s.close()
+});
+
+export { SideSheet, sideSheetTv };
+//# sourceMappingURL=side-sheet.js.map
+//# sourceMappingURL=side-sheet.js.map

package/dist/side-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tv.ts","../src/side-sheet.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;;;AC9BI,IAAM,cAAc,EAAA,CAAG;AAAA,EAC5B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,gCAAA;AAAA,MACA,iDAAA;AAAA,MACA,gCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,QAAA,EAAU,uCAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,sDAAA;AAAA,MACA,0EAAA;AAAA,MACA,0CAAA;AAAA,MACA,0EAAA;AAAA,MACA,wDAAA;AAAA,MACA,mDAAA;AAAA,MACA,4BAAA;AAAA,MACA,iFAAA;AAAA,MACA,+EAAA;AAAA,MACA,iFAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,4CAAA;AAAA,IACR,KAAA,EAAO,CAAC,6CAA6C,CAAA;AAAA,IACrD,WAAA,EAAa,CAAC,wDAAwD,CAAA;AAAA,IACtE,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,eAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,QAAA,EAAU,EAAE,KAAA,EAAO,aAAA;AAAc;AACnC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC;AAED,IAAM,IAAI,WAAA,EAAY;AACf,IAAM,YAAY,eAAA,CAAgB;AAAA,EACvC,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,QAAA,EAAU,EAAE,QAAA,EAAS;AAAA,EACrB,KAAA,EAAO,CAAC,EAAE,OAAA,EAAQ,KAAM,YAAY,EAAE,OAAA,EAAS,CAAA,CAAE,KAAA,EAAM;AAAA,EACvD,MAAA,EAAQ,EAAE,MAAA,EAAO;AAAA,EACjB,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,WAAA,EAAa,EAAE,WAAA,EAAY;AAAA,EAC3B,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"side-sheet.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 * side-sheet.ts — tailwind-variants slots for the M3 Side sheet.\n *\n * A full-height 320dp `surface-container-low` surface anchored to a side edge.\n * `modal` floats at elevation 1 with the leading edge rounded large (16dp);\n * `standard` sits flush (no elevation). The anchored side is read from Base UI's\n * `data-swipe-direction` on the popup, so one resolver covers both left + right.\n * The popup slides via `--drawer-swipe-movement-x` so the swipe gesture tracks\n * the finger. Same DOM + `data-*` as the VE build.\n */\nimport { createSideSheet } from '@m3-baseui/core';\nimport { tv } from './tv';\n\nexport const sideSheetTv = tv({\n  slots: {\n    backdrop: [\n      'fixed inset-0 z-40 bg-scrim/32',\n      'transition-opacity duration-300 ease-emphasized',\n      'data-[swiping]:transition-none',\n      'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',\n    ],\n    viewport: 'fixed inset-0 z-50 flex items-stretch',\n    popup: [\n      'box-border h-full w-[320px] max-w-[calc(100vw-56px)]',\n      'flex flex-col overflow-y-auto overscroll-contain touch-auto outline-none',\n      'bg-surface-container-low text-on-surface',\n      'data-[swipe-direction=right]:ml-auto data-[swipe-direction=left]:mr-auto',\n      '[transform:translateX(var(--drawer-swipe-movement-x))]',\n      'transition-transform duration-300 ease-emphasized',\n      'data-[swiping]:select-none',\n      'data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(100%)]',\n      'data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(100%)]',\n      'data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(-100%)]',\n      'data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(-100%)]',\n    ],\n    header: 'flex items-center gap-2 min-h-14 px-4 py-2',\n    title: ['flex-1 m-0 text-title-large text-on-surface'],\n    description: ['m-0 px-6 pb-4 text-body-medium text-on-surface-variant'],\n    close: 'inline-flex shrink-0',\n  },\n  variants: {\n    variant: {\n      modal: {\n        popup: [\n          'shadow-level1',\n          'data-[swipe-direction=right]:rounded-s-large data-[swipe-direction=left]:rounded-e-large',\n        ],\n      },\n      standard: { popup: 'shadow-none' },\n    },\n  },\n  defaultVariants: {\n    variant: 'modal',\n  },\n});\n\nconst s = sideSheetTv();\nexport const SideSheet = createSideSheet({\n  backdrop: s.backdrop(),\n  viewport: s.viewport(),\n  popup: ({ variant }) => sideSheetTv({ variant }).popup(),\n  header: s.header(),\n  title: s.title(),\n  description: s.description(),\n  close: s.close(),\n});\nexport type { SideSheetVariant, SideSheetSide } from '@m3-baseui/core';\n"]}

package/dist/split-button.d.ts

@@ -0,0 +1,201 @@
+import * as _m3_baseui_core from '@m3-baseui/core';
+import * as react from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+
+declare const splitButtonTv: tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    group: string;
+    leading: string[];
+    trailing: string[];
+    chevron: string[];
+    popup: string[];
+    item: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}>, {
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    group: string;
+    leading: string[];
+    trailing: string[];
+    chevron: string[];
+    popup: string[];
+    item: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    group: string;
+    leading: string[];
+    trailing: string[];
+    chevron: string[];
+    popup: string[];
+    item: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            leading: string[];
+            trailing: string[];
+        };
+        tonal: {
+            leading: string[];
+            trailing: string[];
+        };
+        outlined: {
+            leading: string[];
+            trailing: string[];
+        };
+        elevated: {
+            leading: string[];
+            trailing: string[];
+        };
+        text: {
+            leading: string[];
+            trailing: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const SplitButton: {
+    Root: <Payload>(props: _base_ui_react.MenuRoot.Props<Payload>) => react.JSX.Element;
+    Group: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonGroupOwnProps & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Leading: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonLeadingOwnProps & react.ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+    Trailing: react.ForwardRefExoticComponent<_m3_baseui_core.SplitButtonTrailingOwnProps & Omit<Omit<_base_ui_react.MenuTriggerProps<unknown> & react.RefAttributes<HTMLElement>, "ref">, "color"> & react.RefAttributes<HTMLButtonElement>>;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { SplitButton, splitButtonTv };