@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/date-picker/picker-dialog-context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+//#region src/components/date-picker/picker-dialog-context.ts
+const PickerDialogContext = createContext(null);
+//#endregion
+export { PickerDialogContext };
+
+//# sourceMappingURL=picker-dialog-context.js.map

package/dist/components/date-picker/picker-dialog-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-dialog-context.js","names":[],"sources":["../../../src/components/date-picker/picker-dialog-context.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from 'react';\n\n/**\n * What a {@link PickerDialog} with `onConfirm` offers the picker inside it: Enter on a\n * day (or in a date field) closes the dialog and saves, as the M3 keyboard table asks.\n */\nexport interface PickerDialogContextValue {\n  /** Confirms once the picker's latest value has rendered, then closes the dialog. */\n  requestConfirm: () => void;\n}\n\nexport const PickerDialogContext = createContext<PickerDialogContextValue | null>(null);\n"],"mappings":";;;AAaA,MAAa,sBAAsB,cAA+C,IAAI"}

package/dist/components/date-picker/picker-dialog-styles.d.ts

@@ -0,0 +1,95 @@
+//#region src/components/date-picker/picker-dialog-styles.d.ts
+/** Variant definitions for {@link PickerDialog}. */
+export declare const pickerDialogStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    date: {
+      motion: string;
+      panel: string[];
+      actions: string;
+    };
+    time: {
+      motion: string;
+      panel: string[];
+      actions: string;
+    };
+  };
+  fullScreen: {
+    true: {
+      panel: string;
+      content: string;
+      actions: string;
+    };
+    false: {};
+  };
+}, {
+  motion: string;
+  panel: string;
+  header: string;
+  close: string;
+  title: string;
+  content: string;
+  actions: string;
+  buttons: string;
+}, undefined, {
+  variant: {
+    date: {
+      motion: string;
+      panel: string[];
+      actions: string;
+    };
+    time: {
+      motion: string;
+      panel: string[];
+      actions: string;
+    };
+  };
+  fullScreen: {
+    true: {
+      panel: string;
+      content: string;
+      actions: string;
+    };
+    false: {};
+  };
+}, {
+  motion: string;
+  panel: string;
+  header: string;
+  close: string;
+  title: string;
+  content: string;
+  actions: string;
+  buttons: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    date: {
+      motion: string;
+      panel: string[];
+      actions: string;
+    };
+    time: {
+      motion: string;
+      panel: string[];
+      actions: string;
+    };
+  };
+  fullScreen: {
+    true: {
+      panel: string;
+      content: string;
+      actions: string;
+    };
+    false: {};
+  };
+}, {
+  motion: string;
+  panel: string;
+  header: string;
+  close: string;
+  title: string;
+  content: string;
+  actions: string;
+  buttons: string;
+}>>;
+//#endregion
+//# sourceMappingURL=picker-dialog-styles.d.ts.map

package/dist/components/date-picker/picker-dialog-styles.js

@@ -0,0 +1,57 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/date-picker/picker-dialog-styles.ts
+/** Variant definitions for {@link PickerDialog}. */
+const pickerDialogStyles = tv({
+	slots: {
+		motion: "",
+		panel: "group/picker-dialog flex max-h-full max-w-full flex-col overflow-hidden text-on-surface outline-none",
+		header: "flex h-[56px] shrink-0 items-center justify-between ps-[4px] pe-[12px]",
+		close: "[--md-comp-icon-button-icon-color:var(--md-sys-color-on-surface)]",
+		title: "shrink-0 pb-[20px] text-label-medium text-on-surface-variant",
+		content: "flex min-h-0 flex-col overflow-y-auto overscroll-contain",
+		actions: "flex shrink-0 items-center justify-between gap-[8px]",
+		buttons: "ms-auto flex items-center gap-[8px]"
+	},
+	variants: {
+		variant: {
+			date: {
+				motion: "[--m3-dialog-corner:var(--md-comp-date-picker-modal-container-shape,var(--md-sys-shape-corner-extra-large))]",
+				panel: [
+					"rounded-[var(--_md-comp-date-picker-modal-container-shape)]",
+					"bg-[var(--_md-comp-date-picker-modal-container-color)]",
+					"shadow-[shadow:var(--_md-comp-date-picker-modal-container-elevation)]"
+				],
+				actions: "pe-[6px] pb-[8px] ps-[12px]"
+			},
+			time: {
+				motion: "[--m3-dialog-corner:var(--md-comp-time-picker-container-shape,var(--md-sys-shape-corner-extra-large))]",
+				panel: ["rounded-[var(--_md-comp-time-picker-container-shape)]", "bg-[var(--_md-comp-time-picker-container-color)] p-[24px] shadow-elevation-3"],
+				actions: "pt-[24px]"
+			}
+		},
+		fullScreen: {
+			true: {
+				panel: "size-full max-h-none max-w-none overflow-hidden rounded-none shadow-none",
+				content: "flex-1 items-center",
+				actions: "hidden"
+			},
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		variant: "time",
+		fullScreen: true,
+		class: {
+			panel: "pt-0",
+			content: "justify-center"
+		}
+	}],
+	defaultVariants: {
+		variant: "date",
+		fullScreen: false
+	}
+});
+//#endregion
+export { pickerDialogStyles };
+
+//# sourceMappingURL=picker-dialog-styles.js.map

package/dist/components/date-picker/picker-dialog-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-dialog-styles.js","names":[],"sources":["../../../src/components/date-picker/picker-dialog-styles.ts"],"sourcesContent":["import { tv } from '../../utils/tv';\n\n/*\n * Compose's DatePickerDialog (DatePickerModalTokens: `surface-container-high`, 28px corners,\n * level 3; actions 8px apart with 8px below and 6px at the end) and TimePickerDialog\n * (TimePickerTokens; 24px padding, a `label-medium` `on-surface-variant` title, the mode\n * toggle at the start of the actions row).\n *\n * Full screen (the M3 date picker's recommendation on compact windows) follows the M3\n * full-screen dialog, as `Dialog` does: the panel fills the window on `surface-container-high`\n * (the date picker's container role) with no corners or elevation, and a 56px top row holds\n * the `on-surface` close (x) icon button and the Save text button in place of the actions.\n * In a window too short for the whole dialog (a short window, or text at 200%), the panel\n * stops at the window's height and the picker scrolls inside it, above the actions, which\n * stay in view; the picker keeps its own size and never shrinks under them (2026-10-13).\n *\n * The panel's colour and corners (and, for dates, its shadow) come from the picker's\n * component tokens: `--md-comp-date-picker-modal-container-*` (`date-picker-tokens.ts`) or\n * `--md-comp-time-picker-container-*` (`time-picker-tokens.ts`). The panel carries that set's\n * `data-tokens` and `data-variant`. Every class is written out in full.\n *\n * The dialog moves as `Dialog` does (`dialogStyles`' motion and staggered parts): `motion`\n * gives the growing container the picker's corners, and the actions row fades in last.\n */\n\n/** Variant definitions for {@link PickerDialog}. */\nexport const pickerDialogStyles = tv({\n  slots: {\n    motion: '',\n    panel:\n      'group/picker-dialog flex max-h-full max-w-full flex-col overflow-hidden text-on-surface outline-none',\n    header: 'flex h-[56px] shrink-0 items-center justify-between ps-[4px] pe-[12px]',\n    close: '[--md-comp-icon-button-icon-color:var(--md-sys-color-on-surface)]',\n    title: 'shrink-0 pb-[20px] text-label-medium text-on-surface-variant',\n    // The picker scrolls here, between the title and the actions, when the window is too\n    // short for it; the actions stay in view below it.\n    content: 'flex min-h-0 flex-col overflow-y-auto overscroll-contain',\n    actions: 'flex shrink-0 items-center justify-between gap-[8px]',\n    buttons: 'ms-auto flex items-center gap-[8px]',\n  },\n  variants: {\n    variant: {\n      date: {\n        motion:\n          '[--m3-dialog-corner:var(--md-comp-date-picker-modal-container-shape,var(--md-sys-shape-corner-extra-large))]',\n        panel: [\n          'rounded-[var(--_md-comp-date-picker-modal-container-shape)]',\n          'bg-[var(--_md-comp-date-picker-modal-container-color)]',\n          'shadow-[shadow:var(--_md-comp-date-picker-modal-container-elevation)]',\n        ],\n        actions: 'pe-[6px] pb-[8px] ps-[12px]',\n      },\n      time: {\n        motion:\n          '[--m3-dialog-corner:var(--md-comp-time-picker-container-shape,var(--md-sys-shape-corner-extra-large))]',\n        panel: [\n          'rounded-[var(--_md-comp-time-picker-container-shape)]',\n          'bg-[var(--_md-comp-time-picker-container-color)] p-[24px] shadow-elevation-3',\n        ],\n        actions: 'pt-[24px]',\n      },\n    },\n    fullScreen: {\n      true: {\n        panel: 'size-full max-h-none max-w-none overflow-hidden rounded-none shadow-none',\n        content: 'flex-1 items-center',\n        actions: 'hidden',\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { variant: 'time', fullScreen: true, class: { panel: 'pt-0', content: 'justify-center' } },\n  ],\n  defaultVariants: { variant: 'date', fullScreen: false },\n});\n"],"mappings":";;;AA0BA,MAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,QAAQ;EACR,OACE;EACF,QAAQ;EACR,OAAO;EACP,OAAO;EAGP,SAAS;EACT,SAAS;EACT,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,MAAM;IACJ,QACE;IACF,OAAO;KACL;KACA;KACA;IACF;IACA,SAAS;GACX;GACA,MAAM;IACJ,QACE;IACF,OAAO,CACL,yDACA,8EACF;IACA,SAAS;GACX;EACF;EACA,YAAY;GACV,MAAM;IACJ,OAAO;IACP,SAAS;IACT,SAAS;GACX;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EAAE,SAAS;EAAQ,YAAY;EAAM,OAAO;GAAE,OAAO;GAAQ,SAAS;EAAiB;CAAE,CAC3F;CACA,iBAAiB;EAAE,SAAS;EAAQ,YAAY;CAAM;AACxD,CAAC"}

package/dist/components/date-picker/picker-icons.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/date-picker/picker-icons.tsx
+const icon = (d, mirror = false) => function PickerIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		className: mirror ? "rtl:-scale-x-100" : void 0,
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+};
+const ChevronLeftIcon = icon("M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z", true);
+const ChevronRightIcon = icon("M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z", true);
+const ArrowDropDownIcon = icon("M480-360 280-560h400L480-360Z");
+const EditIcon = icon("M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z");
+const CalendarIcon = icon("M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z");
+const KeyboardIcon = icon("M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z");
+const ScheduleIcon = icon("m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z");
+const CheckIcon = icon("M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z");
+const CloseIcon = icon("m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z");
+//#endregion
+export { ArrowDropDownIcon, CalendarIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon, EditIcon, KeyboardIcon, ScheduleIcon };
+
+//# sourceMappingURL=picker-icons.js.map

package/dist/components/date-picker/picker-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-icons.js","names":[],"sources":["../../../src/components/date-picker/picker-icons.tsx"],"sourcesContent":["/*\n * Material Symbols (Apache-2.0) paths for the pickers' own controls, as Compose's pickers\n * use `Icons.*` internally. Each can be replaced through the component's icon props.\n */\n\nconst icon = (d: string, mirror = false) =>\n  function PickerIcon() {\n    return (\n      <svg\n        viewBox=\"0 -960 960 960\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        className={mirror ? 'rtl:-scale-x-100' : undefined}\n      >\n        <path d={d} />\n      </svg>\n    );\n  };\n\nexport const ChevronLeftIcon = icon('M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z', true);\nexport const ChevronRightIcon = icon('M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z', true);\nexport const ArrowDropDownIcon = icon('M480-360 280-560h400L480-360Z');\nexport const EditIcon = icon(\n  'M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z',\n);\nexport const CalendarIcon = icon(\n  'M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z',\n);\nexport const KeyboardIcon = icon(\n  'M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z',\n);\nexport const ScheduleIcon = icon(\n  'm612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z',\n);\nexport const CheckIcon = icon('M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z');\nexport const CloseIcon = icon(\n  'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',\n);\n"],"mappings":";;AAKA,MAAM,QAAQ,GAAW,SAAS,UAChC,SAAS,aAAa;CACpB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,eAAY;EACZ,WAAW,SAAS,qBAAqB,KAAA;EAEzC,UAAA,oBAAC,QAAD,EAAS,EAAI,CAAA;CACV,CAAA;AAET;AAEF,MAAa,kBAAkB,KAAK,yDAAyD,IAAI;AACjG,MAAa,mBAAmB,KAAK,yDAAyD,IAAI;AAClG,MAAa,oBAAoB,KAAK,+BAA+B;AACrE,MAAa,WAAW,KACtB,8MACF;AACA,MAAa,eAAe,KAC1B,0MACF;AACA,MAAa,eAAe,KAC1B,8YACF;AACA,MAAa,eAAe,KAC1B,8VACF;AACA,MAAa,YAAY,KAAK,uDAAuD;AACrF,MAAa,YAAY,KACvB,mGACF"}

package/dist/components/date-picker/use-media-query.js

@@ -0,0 +1,21 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/components/date-picker/use-media-query.ts
+/** The M3 compact window class (below 600px wide). */
+const COMPACT_WINDOW = "(max-width: 599.98px)";
+/**
+* Whether a media query matches, kept in step with the window. The server (and the first
+* client render, so hydration matches) sees `false`.
+*/
+function useMediaQuery(query) {
+	const subscribe = useCallback((onChange) => {
+		const list = window.matchMedia(query);
+		list.addEventListener("change", onChange);
+		return () => list.removeEventListener("change", onChange);
+	}, [query]);
+	return useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false);
+}
+//#endregion
+export { COMPACT_WINDOW, useMediaQuery };
+
+//# sourceMappingURL=use-media-query.js.map

package/dist/components/date-picker/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","names":[],"sources":["../../../src/components/date-picker/use-media-query.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/** The M3 compact window class (below 600px wide). */\nexport const COMPACT_WINDOW = '(max-width: 599.98px)';\n\n/**\n * Whether a media query matches, kept in step with the window. The server (and the first\n * client render, so hydration matches) sees `false`.\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      const list = window.matchMedia(query);\n      list.addEventListener('change', onChange);\n      return () => list.removeEventListener('change', onChange);\n    },\n    [query],\n  );\n  return useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(query).matches,\n    () => false,\n  );\n}\n"],"mappings":";;;;AAKA,MAAa,iBAAiB;;;;;AAM9B,SAAgB,cAAc,OAAwB;CACpD,MAAM,YAAY,aACf,aAAyB;EACxB,MAAM,OAAO,OAAO,WAAW,KAAK;EACpC,KAAK,iBAAiB,UAAU,QAAQ;EACxC,aAAa,KAAK,oBAAoB,UAAU,QAAQ;CAC1D,GACA,CAAC,KAAK,CACR;CACA,OAAO,qBACL,iBACM,OAAO,WAAW,KAAK,CAAC,CAAC,eACzB,KACR;AACF"}

package/dist/components/date-picker/use-size-transform.js

@@ -0,0 +1,62 @@
+"use client";
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/components/date-picker/use-size-transform.ts
+const RESET = [
+	"height",
+	"overflow",
+	"transition"
+];
+/**
+* Compose's `SizeTransform` for a view that swaps its content (the date picker's calendar ↔
+* text input): call `capture()` just before the swap, and when `key` changes the element's
+* height moves from the captured height to its new one on the default spatial spring,
+* clipped, instead of jumping (2026-10-17). Inline styles exist only while it moves, so a
+* consumer's height class still decides the size at rest; a height that doesn't change, or
+* a spring with no duration (reduced motion), skips it.
+*/
+function useSizeTransform(key) {
+	const ref = useRef(null);
+	const from = useRef(null);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		const start = from.current;
+		from.current = null;
+		if (!element || start === null) return;
+		for (const property of RESET) element.style.removeProperty(property);
+		const end = element.getBoundingClientRect().height;
+		if (Math.abs(end - start) < .5) return;
+		element.style.height = `${start}px`;
+		element.style.overflow = "hidden";
+		element.offsetHeight;
+		element.style.transition = "height var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default-easing)";
+		const reset = () => {
+			for (const property of RESET) element.style.removeProperty(property);
+		};
+		const duration = parseFloat(getComputedStyle(element).transitionDuration) * 1e3;
+		if (!(duration > 0)) return reset();
+		element.style.height = `${end}px`;
+		const onEnd = (event) => {
+			if (event.target === element && event.propertyName === "height") reset();
+		};
+		element.addEventListener("transitionend", onEnd);
+		element.addEventListener("transitioncancel", onEnd);
+		const fallback = window.setTimeout(reset, duration + 100);
+		return () => {
+			window.clearTimeout(fallback);
+			element.removeEventListener("transitionend", onEnd);
+			element.removeEventListener("transitioncancel", onEnd);
+		};
+	}, [key]);
+	return {
+		attach: useCallback((element) => {
+			ref.current = element;
+		}, []),
+		capture: useCallback(() => {
+			if (ref.current) from.current = ref.current.getBoundingClientRect().height;
+		}, [])
+	};
+}
+//#endregion
+export { useSizeTransform };
+
+//# sourceMappingURL=use-size-transform.js.map

package/dist/components/date-picker/use-size-transform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-size-transform.js","names":[],"sources":["../../../src/components/date-picker/use-size-transform.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\nconst RESET = ['height', 'overflow', 'transition'] as const;\n\n/**\n * Compose's `SizeTransform` for a view that swaps its content (the date picker's calendar ↔\n * text input): call `capture()` just before the swap, and when `key` changes the element's\n * height moves from the captured height to its new one on the default spatial spring,\n * clipped, instead of jumping (2026-10-17). Inline styles exist only while it moves, so a\n * consumer's height class still decides the size at rest; a height that doesn't change, or\n * a spring with no duration (reduced motion), skips it.\n */\nexport function useSizeTransform<E extends HTMLElement>(key: unknown) {\n  const ref = useRef<E | null>(null);\n  const from = useRef<number | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    const start = from.current;\n    from.current = null;\n    if (!element || start === null) return;\n    for (const property of RESET) element.style.removeProperty(property);\n    const end = element.getBoundingClientRect().height;\n    if (Math.abs(end - start) < 0.5) return;\n    element.style.height = `${start}px`;\n    element.style.overflow = 'hidden';\n    // Applies the start height before the transition is set.\n    void element.offsetHeight;\n    element.style.transition =\n      'height var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default-easing)';\n    const reset = () => {\n      for (const property of RESET) element.style.removeProperty(property);\n    };\n    const duration = parseFloat(getComputedStyle(element).transitionDuration) * 1000;\n    if (!(duration > 0)) return reset();\n    element.style.height = `${end}px`;\n    const onEnd = (event: TransitionEvent) => {\n      if (event.target === element && event.propertyName === 'height') reset();\n    };\n    element.addEventListener('transitionend', onEnd);\n    element.addEventListener('transitioncancel', onEnd);\n    // A browser can skip both events (a background tab, a frame dropped under load), which\n    // would leave the height fixed, so the inline styles also go once the spring has had time.\n    const fallback = window.setTimeout(reset, duration + 100);\n    return () => {\n      window.clearTimeout(fallback);\n      element.removeEventListener('transitionend', onEnd);\n      element.removeEventListener('transitioncancel', onEnd);\n    };\n  }, [key]);\n\n  /** The element that changes height (a ref callback). */\n  const attach = useCallback((element: E | null) => {\n    ref.current = element;\n  }, []);\n  /** Records the height to start from; call it right before the content changes. */\n  const capture = useCallback(() => {\n    if (ref.current) from.current = ref.current.getBoundingClientRect().height;\n  }, []);\n  return { attach, capture };\n}\n"],"mappings":";;;AAIA,MAAM,QAAQ;CAAC;CAAU;CAAY;AAAY;;;;;;;;;AAUjD,SAAgB,iBAAwC,KAAc;CACpE,MAAM,MAAM,OAAiB,IAAI;CACjC,MAAM,OAAO,OAAsB,IAAI;CAEvC,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,MAAM,QAAQ,KAAK;EACnB,KAAK,UAAU;EACf,IAAI,CAAC,WAAW,UAAU,MAAM;EAChC,KAAK,MAAM,YAAY,OAAO,QAAQ,MAAM,eAAe,QAAQ;EACnE,MAAM,MAAM,QAAQ,sBAAsB,CAAC,CAAC;EAC5C,IAAI,KAAK,IAAI,MAAM,KAAK,IAAI,IAAK;EACjC,QAAQ,MAAM,SAAS,GAAG,MAAM;EAChC,QAAQ,MAAM,WAAW;EAEzB,QAAa;EACb,QAAQ,MAAM,aACZ;EACF,MAAM,cAAc;GAClB,KAAK,MAAM,YAAY,OAAO,QAAQ,MAAM,eAAe,QAAQ;EACrE;EACA,MAAM,WAAW,WAAW,iBAAiB,OAAO,CAAC,CAAC,kBAAkB,IAAI;EAC5E,IAAI,EAAE,WAAW,IAAI,OAAO,MAAM;EAClC,QAAQ,MAAM,SAAS,GAAG,IAAI;EAC9B,MAAM,SAAS,UAA2B;GACxC,IAAI,MAAM,WAAW,WAAW,MAAM,iBAAiB,UAAU,MAAM;EACzE;EACA,QAAQ,iBAAiB,iBAAiB,KAAK;EAC/C,QAAQ,iBAAiB,oBAAoB,KAAK;EAGlD,MAAM,WAAW,OAAO,WAAW,OAAO,WAAW,GAAG;EACxD,aAAa;GACX,OAAO,aAAa,QAAQ;GAC5B,QAAQ,oBAAoB,iBAAiB,KAAK;GAClD,QAAQ,oBAAoB,oBAAoB,KAAK;EACvD;CACF,GAAG,CAAC,GAAG,CAAC;CAUR,OAAO;EAAE,QAPM,aAAa,YAAsB;GAChD,IAAI,UAAU;EAChB,GAAG,CAAC,CAKU;EAAG,SAHD,kBAAkB;GAChC,IAAI,IAAI,SAAS,KAAK,UAAU,IAAI,QAAQ,sBAAsB,CAAC,CAAC;EACtE,GAAG,CAAC,CACmB;CAAE;AAC3B"}

package/dist/components/date-picker/use-view-exit.js

@@ -0,0 +1,68 @@
+"use client";
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/components/date-picker/use-view-exit.ts
+/**
+* The exit side of Compose's display mode animation for a view that swaps its content (the
+* date picker's calendar ↔ text input; 2026-10-24): call `capture()` right before the swap,
+* with the vertical distance it leaves by, and when `key` changes a still copy of the outgoing
+* view fades out on the fast effects spring while it slides that far on the default spatial
+* spring, in the `slot` element
+* (laid over the new view, which the picker's clipping keeps in bounds), then goes. The copy is
+* `inert` and hidden from assistive technology, with its ids removed, so only the new view is
+* ever reachable. Under reduced motion it only fades.
+*/
+function useViewExit(key) {
+	const slot = useRef(null);
+	const view = useRef(null);
+	const leaving = useRef(null);
+	const scrolled = useRef([]);
+	const offset = useRef("0");
+	useLayoutEffect(() => {
+		const copy = leaving.current;
+		const container = slot.current;
+		leaving.current = null;
+		if (!copy || !container) return;
+		container.replaceChildren(copy);
+		for (const [node, top] of scrolled.current) node.scrollTop = top;
+		scrolled.current = [];
+		copy.offsetHeight;
+		copy.style.transition = ["translate var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default-easing)", "opacity var(--md-sys-motion-spring-effects-fast-duration) var(--md-sys-motion-spring-effects-fast-easing)"].join(", ");
+		const { transitionDuration } = getComputedStyle(copy);
+		const longest = Math.max(...transitionDuration.split(",").map((d) => parseFloat(d) * 1e3));
+		const remove = () => copy.remove();
+		if (!(longest > 0)) return remove();
+		copy.style.opacity = "0";
+		copy.style.translate = `0 ${offset.current}`;
+		const timer = window.setTimeout(remove, longest + 50);
+		return () => {
+			window.clearTimeout(timer);
+			remove();
+		};
+	}, [key]);
+	return {
+		attachView: useCallback((element) => {
+			view.current = element;
+		}, []),
+		attachSlot: useCallback((element) => {
+			slot.current = element;
+		}, []),
+		capture: useCallback((distance) => {
+			const element = view.current;
+			if (!element || !slot.current) return;
+			const copy = element.cloneNode(true);
+			for (const node of [copy, ...copy.querySelectorAll("[id]")]) node.removeAttribute("id");
+			const originals = [...element.querySelectorAll("*")];
+			const copies = [...copy.querySelectorAll("*")];
+			scrolled.current = originals.flatMap((node, index) => node.scrollTop > 0 ? [[copies[index], node.scrollTop]] : []);
+			copy.removeAttribute("data-enter");
+			copy.style.translate = "0 0";
+			copy.style.opacity = "1";
+			leaving.current = copy;
+			offset.current = distance;
+		}, [])
+	};
+}
+//#endregion
+export { useViewExit };
+
+//# sourceMappingURL=use-view-exit.js.map

package/dist/components/date-picker/use-view-exit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-view-exit.js","names":[],"sources":["../../../src/components/date-picker/use-view-exit.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\n/**\n * The exit side of Compose's display mode animation for a view that swaps its content (the\n * date picker's calendar ↔ text input; 2026-10-24): call `capture()` right before the swap,\n * with the vertical distance it leaves by, and when `key` changes a still copy of the outgoing\n * view fades out on the fast effects spring while it slides that far on the default spatial\n * spring, in the `slot` element\n * (laid over the new view, which the picker's clipping keeps in bounds), then goes. The copy is\n * `inert` and hidden from assistive technology, with its ids removed, so only the new view is\n * ever reachable. Under reduced motion it only fades.\n */\nexport function useViewExit(key: unknown) {\n  const slot = useRef<HTMLDivElement | null>(null);\n  const view = useRef<HTMLElement | null>(null);\n  const leaving = useRef<HTMLElement | null>(null);\n  const scrolled = useRef<(readonly [HTMLElement, number])[]>([]);\n  const offset = useRef('0');\n\n  useLayoutEffect(() => {\n    const copy = leaving.current;\n    const container = slot.current;\n    leaving.current = null;\n    if (!copy || !container) return;\n    container.replaceChildren(copy);\n    for (const [node, top] of scrolled.current) node.scrollTop = top;\n    scrolled.current = [];\n    // Applies the start state before the transition is set.\n    void copy.offsetHeight;\n    copy.style.transition = [\n      'translate var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default-easing)',\n      'opacity var(--md-sys-motion-spring-effects-fast-duration) var(--md-sys-motion-spring-effects-fast-easing)',\n    ].join(', ');\n    const { transitionDuration } = getComputedStyle(copy);\n    const longest = Math.max(...transitionDuration.split(',').map((d) => parseFloat(d) * 1000));\n    const remove = () => copy.remove();\n    if (!(longest > 0)) return remove();\n    copy.style.opacity = '0';\n    copy.style.translate = `0 ${offset.current}`;\n    // Both transitions have ended by then (a background tab can skip their events).\n    const timer = window.setTimeout(remove, longest + 50);\n    return () => {\n      window.clearTimeout(timer);\n      remove();\n    };\n  }, [key]);\n\n  /** The outgoing view (a ref callback for the element that swaps). */\n  const attachView = useCallback((element: HTMLElement | null) => {\n    view.current = element;\n  }, []);\n  /** The element the copy is laid in (a ref callback; React renders nothing inside it). */\n  const attachSlot = useCallback((element: HTMLDivElement | null) => {\n    slot.current = element;\n  }, []);\n  /** Copies the outgoing view, to leave by `distance`; call it right before the content changes. */\n  const capture = useCallback((distance: string) => {\n    const element = view.current;\n    if (!element || !slot.current) return;\n    const copy = element.cloneNode(true) as HTMLElement;\n    for (const node of [copy, ...copy.querySelectorAll('[id]')]) node.removeAttribute('id');\n    // A copy starts unscrolled: keep where a scrolled part (the range picker's months) was.\n    const originals = [...element.querySelectorAll<HTMLElement>('*')];\n    const copies = [...copy.querySelectorAll<HTMLElement>('*')];\n    scrolled.current = originals.flatMap((node, index) =>\n      node.scrollTop > 0 ? [[copies[index]!, node.scrollTop] as const] : [],\n    );\n    copy.removeAttribute('data-enter');\n    copy.style.translate = '0 0';\n    copy.style.opacity = '1';\n    leaving.current = copy;\n    offset.current = distance;\n  }, []);\n  return { attachView, attachSlot, capture };\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,YAAY,KAAc;CACxC,MAAM,OAAO,OAA8B,IAAI;CAC/C,MAAM,OAAO,OAA2B,IAAI;CAC5C,MAAM,UAAU,OAA2B,IAAI;CAC/C,MAAM,WAAW,OAA2C,CAAC,CAAC;CAC9D,MAAM,SAAS,OAAO,GAAG;CAEzB,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,KAAK;EACvB,QAAQ,UAAU;EAClB,IAAI,CAAC,QAAQ,CAAC,WAAW;EACzB,UAAU,gBAAgB,IAAI;EAC9B,KAAK,MAAM,CAAC,MAAM,QAAQ,SAAS,SAAS,KAAK,YAAY;EAC7D,SAAS,UAAU,CAAC;EAEpB,KAAU;EACV,KAAK,MAAM,aAAa,CACtB,qHACA,2GACF,CAAC,CAAC,KAAK,IAAI;EACX,MAAM,EAAE,uBAAuB,iBAAiB,IAAI;EACpD,MAAM,UAAU,KAAK,IAAI,GAAG,mBAAmB,MAAM,GAAG,CAAC,CAAC,KAAK,MAAM,WAAW,CAAC,IAAI,GAAI,CAAC;EAC1F,MAAM,eAAe,KAAK,OAAO;EACjC,IAAI,EAAE,UAAU,IAAI,OAAO,OAAO;EAClC,KAAK,MAAM,UAAU;EACrB,KAAK,MAAM,YAAY,KAAK,OAAO;EAEnC,MAAM,QAAQ,OAAO,WAAW,QAAQ,UAAU,EAAE;EACpD,aAAa;GACX,OAAO,aAAa,KAAK;GACzB,OAAO;EACT;CACF,GAAG,CAAC,GAAG,CAAC;CA4BR,OAAO;EAAE,YAzBU,aAAa,YAAgC;GAC9D,KAAK,UAAU;EACjB,GAAG,CAAC,CAuBc;EAAG,YArBF,aAAa,YAAmC;GACjE,KAAK,UAAU;EACjB,GAAG,CAAC,CAmB0B;EAAG,SAjBjB,aAAa,aAAqB;GAChD,MAAM,UAAU,KAAK;GACrB,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS;GAC/B,MAAM,OAAO,QAAQ,UAAU,IAAI;GACnC,KAAK,MAAM,QAAQ,CAAC,MAAM,GAAG,KAAK,iBAAiB,MAAM,CAAC,GAAG,KAAK,gBAAgB,IAAI;GAEtF,MAAM,YAAY,CAAC,GAAG,QAAQ,iBAA8B,GAAG,CAAC;GAChE,MAAM,SAAS,CAAC,GAAG,KAAK,iBAA8B,GAAG,CAAC;GAC1D,SAAS,UAAU,UAAU,SAAS,MAAM,UAC1C,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAS,KAAK,SAAS,CAAU,IAAI,CAAC,CACtE;GACA,KAAK,gBAAgB,YAAY;GACjC,KAAK,MAAM,YAAY;GACvB,KAAK,MAAM,UAAU;GACrB,QAAQ,UAAU;GAClB,OAAO,UAAU;EACnB,GAAG,CAAC,CACmC;CAAE;AAC3C"}