@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/text-field/text-field-styles.js

@@ -0,0 +1,209 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/text-field/text-field-styles.ts
+const geometryTransition = "[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]";
+const colourAndSizeTransition = "[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]";
+const spatialTransition = "[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]";
+const effectsTransition = "[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]";
+/** Variant definitions for {@link TextField}. */
+const textFieldStyles = tv({
+	slots: {
+		root: "group/field inline-flex w-[280px] max-w-full flex-col align-top text-start",
+		container: [
+			"relative flex min-h-[calc(56px+var(--md-sys-density,0)*4px)] cursor-text items-stretch",
+			"before:absolute before:inset-x-0 before:bottom-full before:h-[max(0px,calc(-4px-var(--md-sys-density,0)*2px))] before:content-['']",
+			"after:absolute after:inset-x-0 after:top-full after:h-[max(0px,calc(-4px-var(--md-sys-density,0)*2px))] after:content-['']",
+			"bg-[var(--_md-comp-text-field-container-color)]"
+		],
+		outline: [
+			"pointer-events-none absolute inset-x-0 bottom-0 m-0 min-w-0 px-[12px]",
+			"rounded-[var(--_md-comp-text-field-container-shape)] border border-solid",
+			"border-[color:var(--_md-comp-text-field-outline-color)]",
+			"[transition-property:border-color,border-width]",
+			effectsTransition,
+			"group-data-[field-state=hover]/field:border-[color:var(--_md-comp-text-field-hover-outline-color)]",
+			"group-data-[field-state=focus]/field:border-2",
+			"group-data-[field-state=focus]/field:border-[color:var(--_md-comp-text-field-focus-outline-color)]",
+			"group-data-[field-state=error]/field:border-error",
+			"group-data-[field-state=error-hover]/field:border-on-error-container",
+			"group-data-[field-state=error-focus]/field:border-2 group-data-[field-state=error-focus]/field:border-error",
+			"group-data-[field-state=disabled]/field:border-on-surface/12"
+		],
+		notch: [
+			"invisible grid h-[16px] grid-cols-[0fr] p-0 text-body-small whitespace-nowrap",
+			"transition-[grid-template-columns]",
+			spatialTransition,
+			"group-data-floated/field:grid-cols-[1fr] group-has-[:autofill]/field:grid-cols-[1fr]"
+		],
+		notchClip: "min-w-0 overflow-hidden",
+		notchText: "inline-block px-[4px]",
+		indicator: [
+			"pointer-events-none absolute inset-x-0 bottom-0 h-px",
+			"bg-[var(--_md-comp-text-field-active-indicator-color)]",
+			"[transition-property:background-color,height]",
+			colourAndSizeTransition,
+			"group-data-[field-state=hover]/field:bg-on-surface",
+			"group-data-[field-state=focus]/field:h-[2px]",
+			"group-data-[field-state=focus]/field:bg-[var(--_md-comp-text-field-focus-active-indicator-color)]",
+			"group-data-[field-state=error]/field:bg-error",
+			"group-data-[field-state=error-hover]/field:bg-on-error-container",
+			"group-data-[field-state=error-focus]/field:h-[2px] group-data-[field-state=error-focus]/field:bg-error",
+			"group-data-[field-state=disabled]/field:bg-on-surface/38",
+			"forced-colors:bg-[CanvasText]! forced-colors:forced-color-adjust-none",
+			"forced-colors:group-data-[field-state=focus]/field:bg-[Highlight]! forced-colors:group-data-[field-state=error-focus]/field:bg-[Highlight]!",
+			"forced-colors:group-data-[field-state=disabled]/field:bg-[GrayText]!"
+		],
+		label: [
+			"pointer-events-none absolute top-[calc(16px+var(--md-sys-density,0)*2px)] max-w-[calc(100%-32px)] truncate",
+			"text-body-large text-[color:var(--_md-comp-text-field-label-text-color)]",
+			"[transition-property:top,inset-inline-start,font-size,line-height,letter-spacing,color,opacity]",
+			geometryTransition,
+			"group-data-[field-state=focus]/field:text-[color:var(--_md-comp-text-field-focus-label-text-color)]",
+			"group-data-[field-state=error]/field:text-error",
+			"group-data-[field-state=error-hover]/field:text-on-error-container",
+			"group-data-[field-state=error-focus]/field:text-error",
+			"group-data-[field-state=disabled]/field:text-on-surface/38"
+		],
+		icon: [
+			"flex h-[min(48px,calc(56px+var(--md-sys-density,0)*4px))] w-[48px] shrink-0 items-center justify-center self-center",
+			"[&_:not([data-density])]:[--md-sys-density:0]",
+			"[&>svg]:size-[24px]",
+			"group-data-[field-state=disabled]/field:text-on-surface/38"
+		],
+		leadingIcon: "text-[color:var(--_md-comp-text-field-leading-icon-color)]",
+		trailingIcon: [
+			"text-[color:var(--_md-comp-text-field-trailing-icon-color)]",
+			"group-data-[field-state=error]/field:text-error",
+			"group-data-[field-state=error-focus]/field:text-error",
+			"group-data-[field-state=error-hover]/field:text-on-error-container"
+		],
+		field: "flex min-w-0 flex-1 items-center",
+		input: [
+			"min-w-0 flex-1 bg-transparent p-0 text-body-large outline-none",
+			"text-[color:var(--_md-comp-text-field-input-text-color)] caret-[color:var(--_md-comp-text-field-caret-color)]",
+			"placeholder:text-on-surface-variant placeholder:opacity-100",
+			"disabled:cursor-default group-data-[field-state=disabled]/field:text-on-surface/38",
+			"group-data-invalid/field:caret-error",
+			"resize-none"
+		],
+		affix: ["text-body-large text-on-surface-variant whitespace-nowrap", "group-data-[field-state=disabled]/field:text-on-surface/38"],
+		prefix: "pe-[2px]",
+		suffix: "ps-[2px]",
+		supporting: "flex gap-[16px] px-[16px] pt-[4px]",
+		supportingTextColor: "text-[color:var(--_md-comp-text-field-supporting-text-color)]",
+		supportingText: [
+			"min-w-0 flex-1",
+			"group-data-[field-state=error]/field:text-error",
+			"group-data-[field-state=error-hover]/field:text-error",
+			"group-data-[field-state=error-focus]/field:text-error",
+			"group-data-[field-state=disabled]/field:text-on-surface/38"
+		],
+		counter: [
+			"ms-auto",
+			"group-data-[field-state=error]/field:text-error",
+			"group-data-[field-state=error-hover]/field:text-error",
+			"group-data-[field-state=error-focus]/field:text-error",
+			"group-data-[field-state=disabled]/field:text-on-surface/38"
+		],
+		errorIcon: "[&>svg]:size-[24px]",
+		required: "text-inherit"
+	},
+	variants: {
+		variant: {
+			filled: {
+				container: ["rounded-t-[var(--_md-comp-text-field-container-shape)]", "group-data-[field-state=disabled]/field:bg-on-surface/4"],
+				outline: "hidden"
+			},
+			outlined: {
+				container: "rounded-[var(--_md-comp-text-field-container-shape)]",
+				indicator: "hidden",
+				label: "group-data-[field-state=hover]/field:text-on-surface"
+			}
+		},
+		hasLabel: {
+			true: { outline: "-top-[8px]" },
+			false: { outline: "top-0" }
+		},
+		hasLeadingIcon: {
+			true: {
+				field: "ps-[4px]",
+				label: "start-[52px]"
+			},
+			false: {
+				field: "ps-[16px]",
+				label: "start-[16px]"
+			}
+		},
+		hasTrailingIcon: {
+			true: { field: "pe-[4px]" },
+			false: { field: "pe-[16px]" }
+		},
+		multiline: {
+			true: {
+				field: "items-start",
+				input: "block"
+			},
+			false: {}
+		},
+		fixedHeight: {
+			true: { input: "overflow-y-auto" },
+			false: {}
+		},
+		supportingTextOnFocus: {
+			true: { supportingText: ["opacity-0 transition-opacity group-data-focused/field:opacity-100", effectsTransition] },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "filled",
+			hasLabel: true,
+			class: {
+				container: "[--m3-field-label-room:clamp(0,calc((var(--md-sys-density,0)+1.5)*100),1)]",
+				field: ["pt-[calc(16px+var(--md-sys-density,0)*2px+8px*var(--m3-field-label-room))]", "pb-[calc(16px+var(--md-sys-density,0)*2px-8px*var(--m3-field-label-room))]"]
+			}
+		},
+		{
+			variant: "filled",
+			hasLabel: false,
+			class: { field: "py-[calc(16px+var(--md-sys-density,0)*2px)]" }
+		},
+		{
+			variant: "outlined",
+			class: { field: "py-[calc(16px+var(--md-sys-density,0)*2px)]" }
+		},
+		{
+			variant: "filled",
+			hasLabel: true,
+			class: { label: [
+				"group-data-floated/field:top-[calc(8px+var(--md-sys-density,0)*2px)] group-data-floated/field:text-body-small",
+				"group-has-[:autofill]/field:top-[calc(8px+var(--md-sys-density,0)*2px)] group-has-[:autofill]/field:text-body-small",
+				"group-data-floated/field:opacity-[var(--m3-field-label-room)] group-has-[:autofill]/field:opacity-[var(--m3-field-label-room)]"
+			] }
+		},
+		{
+			variant: "outlined",
+			hasLabel: true,
+			class: { label: ["group-data-floated/field:top-[-8px] group-data-floated/field:start-[16px] group-data-floated/field:text-body-small", "group-has-[:autofill]/field:top-[-8px] group-has-[:autofill]/field:start-[16px] group-has-[:autofill]/field:text-body-small"] }
+		},
+		{
+			hasLabel: true,
+			class: {
+				input: ["placeholder:opacity-0 group-data-floated/field:placeholder:opacity-100", "placeholder:transition-opacity placeholder:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] placeholder:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"],
+				affix: ["opacity-0 transition-opacity group-data-floated/field:opacity-100 group-has-[:autofill]/field:opacity-100", effectsTransition]
+			}
+		}
+	],
+	defaultVariants: {
+		variant: "filled",
+		hasLabel: true,
+		hasLeadingIcon: false,
+		hasTrailingIcon: false,
+		multiline: false,
+		fixedHeight: false,
+		supportingTextOnFocus: false
+	}
+});
+//#endregion
+export { textFieldStyles };
+
+//# sourceMappingURL=text-field-styles.js.map

package/dist/components/text-field/text-field-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../src/components/text-field/text-field-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (TextField.kt, OutlinedTextField.kt,\n * internal/TextFieldImpl.kt and the Filled/OutlinedTextFieldTokens files):\n * 56px minimum height, 16px horizontal padding (4px next to a 48px icon box), 8px\n * vertical padding with a label, 4px above supporting text, 2px around prefix/suffix,\n * a 4px gap around the outlined label notch, label float on the fast spatial spring.\n *\n * Web density (`--md-sys-density`, 0 to -3; M3: \"decreases the top and bottom padding\"): each\n * step takes 4px off the container (56 → 52 → 48 → 44px), 2px from the padding above and below\n * the value, and moves the resting and the filled field's floated label up 2px, so they stay\n * centred and clear of the value. The icon boxes are at most as tall as the container (the\n * 48px touch targets of icon buttons in them extend past it), and at -3 the container's\n * `::before` / `::after` add 2px of hit area above and below, so pressing within 48px of its\n * centre still focuses the field.\n *\n * Colours depend on one mutually exclusive `data-field-state` on the root\n * (disabled > error-focus > error-hover > error > focus > hover > rest), so part styles\n * never compete.\n *\n * The resting container colour and shape, outline and indicator colours, the focused and\n * hovered outline, the focused indicator and label, and the label, input, caret, supporting\n * text and icon colours come from the text field's component tokens (`text-field-tokens.ts`,\n * `--md-comp-<variant>-text-field-*`); the root carries `data-tokens=\"md-comp-text-field\"`\n * and `data-variant`. A consumer class (`classNames.label`, …) still wins in `cn()`. Every\n * class is written out in full so Tailwind can find it.\n */\n\n// The label's top, start, font size, line height and letter spacing on the fast spatial\n// spring; its colour and opacity on the fast effects spring.\nconst geometryTransition =\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-effects-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-effects-fast-easing)]';\n\n/*\n * Colour on the fast effects spring, size on the fast spatial spring (Compose animates the\n * indicator thickness on FastSpatial and its colour on FastEffects).\n */\nconst colourAndSizeTransition =\n  '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration),var(--md-sys-motion-spring-spatial-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing),var(--md-sys-motion-spring-spatial-fast-easing)]';\n\nconst spatialTransition =\n  '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]';\n\nconst effectsTransition =\n  '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]';\n\n/** Variant definitions for {@link TextField}. */\nexport const textFieldStyles = tv({\n  slots: {\n    root: 'group/field inline-flex w-[280px] max-w-full flex-col align-top text-start',\n    // Library-owned inner wrapper: positions the label, outline and indicator.\n    container: [\n      'relative flex min-h-[calc(56px+var(--md-sys-density,0)*4px)] cursor-text items-stretch',\n      // Dense fields keep a 48px hit area: at -3 (44px) 2px more above and below.\n      \"before:absolute before:inset-x-0 before:bottom-full before:h-[max(0px,calc(-4px-var(--md-sys-density,0)*2px))] before:content-['']\",\n      \"after:absolute after:inset-x-0 after:top-full after:h-[max(0px,calc(-4px-var(--md-sys-density,0)*2px))] after:content-['']\",\n      'bg-[var(--_md-comp-text-field-container-color)]',\n    ],\n    outline: [\n      'pointer-events-none absolute inset-x-0 bottom-0 m-0 min-w-0 px-[12px]',\n      'rounded-[var(--_md-comp-text-field-container-shape)] border border-solid',\n      'border-[color:var(--_md-comp-text-field-outline-color)]',\n      // Colour and width both on the fast effects spring. Compose animates the width on\n      // FastSpatial, but a browser draws a border in whole device pixels, so a width that\n      // overshoots 2px and settles back draws 2 → 1 → 2px. The effects spring never\n      // overshoots, so the width only grows (and never dips below 1px on the way back).\n      // The filled indicator keeps the spatial spring: its `height` draws fractions.\n      '[transition-property:border-color,border-width]',\n      effectsTransition,\n      'group-data-[field-state=hover]/field:border-[color:var(--_md-comp-text-field-hover-outline-color)]',\n      'group-data-[field-state=focus]/field:border-2',\n      'group-data-[field-state=focus]/field:border-[color:var(--_md-comp-text-field-focus-outline-color)]',\n      'group-data-[field-state=error]/field:border-error',\n      'group-data-[field-state=error-hover]/field:border-on-error-container',\n      'group-data-[field-state=error-focus]/field:border-2 group-data-[field-state=error-focus]/field:border-error',\n      'group-data-[field-state=disabled]/field:border-on-surface/12',\n    ],\n    // Hidden text the width of the floated label: cuts the notch in the outline. It opens\n    // from 0fr to 1fr of the label's own width on the label's spring, so the gap keeps pace\n    // with the label as it moves up.\n    notch: [\n      'invisible grid h-[16px] grid-cols-[0fr] p-0 text-body-small whitespace-nowrap',\n      'transition-[grid-template-columns]',\n      spatialTransition,\n      'group-data-floated/field:grid-cols-[1fr] group-has-[:autofill]/field:grid-cols-[1fr]',\n    ],\n    notchClip: 'min-w-0 overflow-hidden',\n    notchText: 'inline-block px-[4px]',\n    indicator: [\n      'pointer-events-none absolute inset-x-0 bottom-0 h-px',\n      'bg-[var(--_md-comp-text-field-active-indicator-color)]',\n      '[transition-property:background-color,height]',\n      colourAndSizeTransition,\n      'group-data-[field-state=hover]/field:bg-on-surface',\n      'group-data-[field-state=focus]/field:h-[2px]',\n      'group-data-[field-state=focus]/field:bg-[var(--_md-comp-text-field-focus-active-indicator-color)]',\n      'group-data-[field-state=error]/field:bg-error',\n      'group-data-[field-state=error-hover]/field:bg-on-error-container',\n      'group-data-[field-state=error-focus]/field:h-[2px] group-data-[field-state=error-focus]/field:bg-error',\n      'group-data-[field-state=disabled]/field:bg-on-surface/38',\n      // Forced colours paint backgrounds as Canvas, which hid the filled field's only edge:\n      // the line takes system colours instead (2026-10-15).\n      'forced-colors:bg-[CanvasText]! forced-colors:forced-color-adjust-none',\n      'forced-colors:group-data-[field-state=focus]/field:bg-[Highlight]! forced-colors:group-data-[field-state=error-focus]/field:bg-[Highlight]!',\n      'forced-colors:group-data-[field-state=disabled]/field:bg-[GrayText]!',\n    ],\n    label: [\n      'pointer-events-none absolute top-[calc(16px+var(--md-sys-density,0)*2px)] max-w-[calc(100%-32px)] truncate',\n      'text-body-large text-[color:var(--_md-comp-text-field-label-text-color)]',\n      '[transition-property:top,inset-inline-start,font-size,line-height,letter-spacing,color,opacity]',\n      geometryTransition,\n      'group-data-[field-state=focus]/field:text-[color:var(--_md-comp-text-field-focus-label-text-color)]',\n      'group-data-[field-state=error]/field:text-error',\n      'group-data-[field-state=error-hover]/field:text-on-error-container',\n      'group-data-[field-state=error-focus]/field:text-error',\n      'group-data-[field-state=disabled]/field:text-on-surface/38',\n    ],\n    icon: [\n      'flex h-[min(48px,calc(56px+var(--md-sys-density,0)*4px))] w-[48px] shrink-0 items-center justify-center self-center',\n      // Icon buttons here keep their size at every density: the box is a fixed 48px column\n      // that density only shortens. One with its own `density` still follows it.\n      '[&_:not([data-density])]:[--md-sys-density:0]',\n      '[&>svg]:size-[24px]',\n      'group-data-[field-state=disabled]/field:text-on-surface/38',\n    ],\n    leadingIcon: 'text-[color:var(--_md-comp-text-field-leading-icon-color)]',\n    trailingIcon: [\n      'text-[color:var(--_md-comp-text-field-trailing-icon-color)]',\n      'group-data-[field-state=error]/field:text-error',\n      'group-data-[field-state=error-focus]/field:text-error',\n      'group-data-[field-state=error-hover]/field:text-on-error-container',\n    ],\n    field: 'flex min-w-0 flex-1 items-center',\n    input: [\n      'min-w-0 flex-1 bg-transparent p-0 text-body-large outline-none',\n      'text-[color:var(--_md-comp-text-field-input-text-color)] caret-[color:var(--_md-comp-text-field-caret-color)]',\n      'placeholder:text-on-surface-variant placeholder:opacity-100',\n      'disabled:cursor-default group-data-[field-state=disabled]/field:text-on-surface/38',\n      'group-data-invalid/field:caret-error',\n      'resize-none',\n    ],\n    affix: [\n      'text-body-large text-on-surface-variant whitespace-nowrap',\n      'group-data-[field-state=disabled]/field:text-on-surface/38',\n    ],\n    prefix: 'pe-[2px]',\n    suffix: 'ps-[2px]',\n    supporting: 'flex gap-[16px] px-[16px] pt-[4px]',\n    // The supporting text's resting colour; the error message keeps its own.\n    supportingTextColor: 'text-[color:var(--_md-comp-text-field-supporting-text-color)]',\n    // Error colour whenever the field is invalid, with or without a message (Compose's\n    // `ErrorSupportingColor`), so the supporting text reads as the error's explanation.\n    supportingText: [\n      'min-w-0 flex-1',\n      'group-data-[field-state=error]/field:text-error',\n      'group-data-[field-state=error-hover]/field:text-error',\n      'group-data-[field-state=error-focus]/field:text-error',\n      'group-data-[field-state=disabled]/field:text-on-surface/38',\n    ],\n    counter: [\n      'ms-auto',\n      'group-data-[field-state=error]/field:text-error',\n      'group-data-[field-state=error-hover]/field:text-error',\n      'group-data-[field-state=error-focus]/field:text-error',\n      'group-data-[field-state=disabled]/field:text-on-surface/38',\n    ],\n    // The built-in error icon's own box; the trailing slot colours it.\n    errorIcon: '[&>svg]:size-[24px]',\n    required: 'text-inherit',\n  },\n  variants: {\n    variant: {\n      filled: {\n        container: [\n          'rounded-t-[var(--_md-comp-text-field-container-shape)]',\n          'group-data-[field-state=disabled]/field:bg-on-surface/4',\n        ],\n        outline: 'hidden',\n      },\n      outlined: {\n        container: 'rounded-[var(--_md-comp-text-field-container-shape)]',\n        indicator: 'hidden',\n        // OutlinedTextFieldTokens.HoverLabelColor (filled keeps on-surface-variant).\n        label: 'group-data-[field-state=hover]/field:text-on-surface',\n      },\n    },\n    // With a label the outline starts 8px higher, so its border runs through the middle of\n    // the 16px notch legend and lands on the container's top edge.\n    hasLabel: { true: { outline: '-top-[8px]' }, false: { outline: 'top-0' } },\n    hasLeadingIcon: {\n      true: { field: 'ps-[4px]', label: 'start-[52px]' },\n      false: { field: 'ps-[16px]', label: 'start-[16px]' },\n    },\n    hasTrailingIcon: {\n      true: { field: 'pe-[4px]' },\n      false: { field: 'pe-[16px]' },\n    },\n    multiline: {\n      true: { field: 'items-start', input: 'block' },\n      false: {},\n    },\n    // A text area keeps its height and scrolls (M3: \"a fixed height and scroll vertically\").\n    fixedHeight: {\n      true: { input: 'overflow-y-auto' },\n      false: {},\n    },\n    // M3: supporting text can be \"visible only on focus\". It keeps its space, so nothing\n    // jumps, and stays in the accessible description.\n    supportingTextOnFocus: {\n      true: {\n        supportingText: [\n          'opacity-0 transition-opacity group-data-focused/field:opacity-100',\n          effectsTransition,\n        ],\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    /*\n     * Input padding: filled fields with a label leave room above for the floated label.\n     * Below 52px (density -2 and -3) there is no room for it: as MDC's text field\n     * (`$minimum-height-for-filled-label: 52px`), the floated label is hidden and the value\n     * is centred like a field without a label. The resting label still shows in the empty\n     * field, and still names the input. `--m3-field-label-room` is 1 down to density -1\n     * and 0 from -2 (a clamped step of the density, so CSS alone switches the layout).\n     */\n    {\n      variant: 'filled',\n      hasLabel: true,\n      class: {\n        container: '[--m3-field-label-room:clamp(0,calc((var(--md-sys-density,0)+1.5)*100),1)]',\n        field: [\n          'pt-[calc(16px+var(--md-sys-density,0)*2px+8px*var(--m3-field-label-room))]',\n          'pb-[calc(16px+var(--md-sys-density,0)*2px-8px*var(--m3-field-label-room))]',\n        ],\n      },\n    },\n    {\n      variant: 'filled',\n      hasLabel: false,\n      class: { field: 'py-[calc(16px+var(--md-sys-density,0)*2px)]' },\n    },\n    { variant: 'outlined', class: { field: 'py-[calc(16px+var(--md-sys-density,0)*2px)]' } },\n    // Floated label: filled → 8px from the top (less 2px per density step); outlined → centred on the border, at 16px.\n    {\n      variant: 'filled',\n      hasLabel: true,\n      class: {\n        label: [\n          'group-data-floated/field:top-[calc(8px+var(--md-sys-density,0)*2px)] group-data-floated/field:text-body-small',\n          'group-has-[:autofill]/field:top-[calc(8px+var(--md-sys-density,0)*2px)] group-has-[:autofill]/field:text-body-small',\n          // Hidden once floated below 52px (see the padding above).\n          'group-data-floated/field:opacity-[var(--m3-field-label-room)] group-has-[:autofill]/field:opacity-[var(--m3-field-label-room)]',\n        ],\n      },\n    },\n    {\n      variant: 'outlined',\n      hasLabel: true,\n      class: {\n        label: [\n          'group-data-floated/field:top-[-8px] group-data-floated/field:start-[16px] group-data-floated/field:text-body-small',\n          'group-has-[:autofill]/field:top-[-8px] group-has-[:autofill]/field:start-[16px] group-has-[:autofill]/field:text-body-small',\n        ],\n      },\n    },\n    // With a label, the placeholder and prefix/suffix only show once the label floats.\n    {\n      hasLabel: true,\n      class: {\n        // The placeholder fades in as the label floats (Compose fades it on FastEffects).\n        input: [\n          'placeholder:opacity-0 group-data-floated/field:placeholder:opacity-100',\n          'placeholder:transition-opacity placeholder:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] placeholder:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n        ],\n        affix: [\n          'opacity-0 transition-opacity group-data-floated/field:opacity-100 group-has-[:autofill]/field:opacity-100',\n          effectsTransition,\n        ],\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: 'filled',\n    hasLabel: true,\n    hasLeadingIcon: false,\n    hasTrailingIcon: false,\n    multiline: false,\n    fixedHeight: false,\n    supportingTextOnFocus: false,\n  },\n});\n\n/**\n * The variants of {@link textFieldStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type TextFieldStyleProps = VariantProps<typeof textFieldStyles>;\nexport type TextFieldVariant = NonNullable<TextFieldStyleProps['variant']>;\n"],"mappings":";;AA+BA,MAAM,qBACJ;AAMF,MAAM,0BACJ;AAEF,MAAM,oBACJ;AAEF,MAAM,oBACJ;;AAGF,MAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,MAAM;EAEN,WAAW;GACT;GAEA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAIA,OAAO;GACL;GACA;GACA;GACA;EACF;EACA,WAAW;EACX,WAAW;EACX,WAAW;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GAGA;GACA;GACA;EACF;EACA,aAAa;EACb,cAAc;GACZ;GACA;GACA;GACA;EACF;EACA,OAAO;EACP,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO,CACL,6DACA,4DACF;EACA,QAAQ;EACR,QAAQ;EACR,YAAY;EAEZ,qBAAqB;EAGrB,gBAAgB;GACd;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;EAEA,WAAW;EACX,UAAU;CACZ;CACA,UAAU;EACR,SAAS;GACP,QAAQ;IACN,WAAW,CACT,0DACA,yDACF;IACA,SAAS;GACX;GACA,UAAU;IACR,WAAW;IACX,WAAW;IAEX,OAAO;GACT;EACF;EAGA,UAAU;GAAE,MAAM,EAAE,SAAS,aAAa;GAAG,OAAO,EAAE,SAAS,QAAQ;EAAE;EACzE,gBAAgB;GACd,MAAM;IAAE,OAAO;IAAY,OAAO;GAAe;GACjD,OAAO;IAAE,OAAO;IAAa,OAAO;GAAe;EACrD;EACA,iBAAiB;GACf,MAAM,EAAE,OAAO,WAAW;GAC1B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,WAAW;GACT,MAAM;IAAE,OAAO;IAAe,OAAO;GAAQ;GAC7C,OAAO,CAAC;EACV;EAEA,aAAa;GACX,MAAM,EAAE,OAAO,kBAAkB;GACjC,OAAO,CAAC;EACV;EAGA,uBAAuB;GACrB,MAAM,EACJ,gBAAgB,CACd,qEACA,iBACF,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAShB;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,WAAW;IACX,OAAO,CACL,8EACA,4EACF;GACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO,EAAE,OAAO,8CAA8C;EAChE;EACA;GAAE,SAAS;GAAY,OAAO,EAAE,OAAO,8CAA8C;EAAE;EAEvF;GACE,SAAS;GACT,UAAU;GACV,OAAO,EACL,OAAO;IACL;IACA;IAEA;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO,EACL,OAAO,CACL,sHACA,6HACF,EACF;EACF;EAEA;GACE,UAAU;GACV,OAAO;IAEL,OAAO,CACL,0EACA,6MACF;IACA,OAAO,CACL,6GACA,iBACF;GACF;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,iBAAiB;EACjB,WAAW;EACX,aAAa;EACb,uBAAuB;CACzB;AACF,CAAC"}

package/dist/components/text-field/text-field-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/text-field/text-field-tokens.d.ts
+/** The tokens of {@link TextField}, Select and Autocomplete: `--md-comp-<variant>-text-field-<part>`. */
+export declare const textFieldTokenSet: ComponentTokenSet<never>;
+//#endregion
+//# sourceMappingURL=text-field-tokens.d.ts.map

package/dist/components/text-field/text-field-tokens.js

@@ -0,0 +1,177 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/text-field/text-field-tokens.ts
+/** The tokens both variants share, written for one variant's Compose object. */
+const contentTokens = (compose) => ({
+	"label-text-color": {
+		value: color("on-surface-variant"),
+		description: "The label.",
+		compose: `${compose}.LabelColor`,
+		paints: {
+			property: "color",
+			slot: "label"
+		}
+	},
+	"focus-label-text-color": {
+		value: color("primary"),
+		description: "The label while the field has focus.",
+		compose: `${compose}.FocusLabelColor`,
+		paints: {
+			property: "color",
+			slot: "label",
+			state: "focused"
+		}
+	},
+	"input-text-color": {
+		value: color("on-surface"),
+		description: "The text the user types.",
+		compose: `${compose}.InputColor`,
+		paints: {
+			property: "color",
+			slot: "input"
+		}
+	},
+	"caret-color": {
+		value: color("primary"),
+		description: "The text cursor.",
+		compose: `${compose}.CaretColor`,
+		paints: {
+			property: "caret-color",
+			slot: "input"
+		}
+	},
+	"supporting-text-color": {
+		value: color("on-surface-variant"),
+		description: "The supporting text below the field.",
+		compose: `${compose}.SupportingColor`,
+		paints: {
+			property: "color",
+			slot: "supporting-text"
+		}
+	},
+	"leading-icon-color": {
+		value: color("on-surface-variant"),
+		description: "The leading icon.",
+		compose: `${compose}.LeadingIconColor`,
+		paints: {
+			property: "color",
+			slot: "leading-icon"
+		}
+	},
+	"trailing-icon-color": {
+		value: color("on-surface-variant"),
+		description: "The trailing icon.",
+		compose: `${compose}.TrailingIconColor`,
+		paints: {
+			property: "color",
+			slot: "trailing-icon"
+		}
+	}
+});
+/** The tokens of {@link TextField}, Select and Autocomplete: `--md-comp-<variant>-text-field-<part>`. */
+const textFieldTokenSet = defineComponentTokens({
+	name: "md-comp-text-field",
+	tokens: {},
+	scopes: { variant: {
+		filled: {
+			prefix: "md-comp-filled-text-field",
+			tokens: {
+				"container-color": {
+					value: color("surface-container-highest"),
+					description: "The container.",
+					compose: "FilledTextFieldTokens.ContainerColor",
+					paints: {
+						property: "background-color",
+						slot: "container"
+					}
+				},
+				"container-shape": {
+					value: corner("extra-small"),
+					description: "The top corners.",
+					compose: "FilledTextFieldTokens.ContainerShape",
+					paints: {
+						property: "border-top-left-radius",
+						slot: "container"
+					}
+				},
+				"active-indicator-color": {
+					value: color("on-surface-variant"),
+					description: "The line along the bottom of the container.",
+					compose: "FilledTextFieldTokens.ActiveIndicatorColor",
+					paints: {
+						property: "background-color",
+						slot: "active-indicator"
+					}
+				},
+				"focus-active-indicator-color": {
+					value: color("primary"),
+					description: "The bottom line while the field has focus.",
+					compose: "FilledTextFieldTokens.FocusActiveIndicatorColor",
+					paints: {
+						property: "background-color",
+						slot: "active-indicator",
+						state: "focused"
+					}
+				},
+				...contentTokens("FilledTextFieldTokens")
+			},
+			fixed: {
+				"outline-color": "transparent",
+				"hover-outline-color": "transparent",
+				"focus-outline-color": "transparent"
+			}
+		},
+		outlined: {
+			prefix: "md-comp-outlined-text-field",
+			tokens: {
+				"container-shape": {
+					value: corner("extra-small"),
+					description: "The corners.",
+					compose: "OutlinedTextFieldTokens.ContainerShape",
+					paints: {
+						property: "border-top-left-radius",
+						slot: "outline"
+					}
+				},
+				"outline-color": {
+					value: color("outline"),
+					description: "The 1px outline.",
+					compose: "OutlinedTextFieldTokens.OutlineColor",
+					paints: {
+						property: "border-top-color",
+						slot: "outline"
+					}
+				},
+				"hover-outline-color": {
+					value: color("on-surface"),
+					description: "The outline under the pointer.",
+					compose: "OutlinedTextFieldTokens.HoverOutlineColor",
+					paints: {
+						property: "border-top-color",
+						slot: "outline",
+						state: "hovered"
+					}
+				},
+				"focus-outline-color": {
+					value: color("primary"),
+					description: "The 2px outline while the field has focus.",
+					compose: "OutlinedTextFieldTokens.FocusOutlineColor",
+					paints: {
+						property: "border-top-color",
+						slot: "outline",
+						state: "focused"
+					}
+				},
+				...contentTokens("OutlinedTextFieldTokens")
+			},
+			fixed: {
+				"container-color": "transparent",
+				"active-indicator-color": color("on-surface-variant"),
+				"focus-active-indicator-color": color("primary")
+			}
+		}
+	} }
+});
+//#endregion
+export { textFieldTokenSet };
+
+//# sourceMappingURL=text-field-tokens.js.map

package/dist/components/text-field/text-field-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-tokens.js","names":[],"sources":["../../../src/components/text-field/text-field-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, type ComponentToken } from '../../tokens/component';\n\n/*\n * The text field's component tokens, M3's `md.comp.{filled,outlined}-text-field.*` names\n * (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * Filled/OutlinedTextFieldTokens defaults. Select and Autocomplete draw the same field\n * (`select/field-shell.tsx`), so they read these tokens too. The field's `data-variant` picks\n * the public names. Error, disabled and hover colours other than the outline stay classes.\n */\n\n/** The tokens both variants share, written for one variant's Compose object. */\nconst contentTokens = (compose: 'FilledTextFieldTokens' | 'OutlinedTextFieldTokens') =>\n  ({\n    'label-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The label.',\n      compose: `${compose}.LabelColor`,\n      paints: { property: 'color', slot: 'label' },\n    },\n    'focus-label-text-color': {\n      value: color('primary'),\n      description: 'The label while the field has focus.',\n      compose: `${compose}.FocusLabelColor`,\n      paints: { property: 'color', slot: 'label', state: 'focused' },\n    },\n    'input-text-color': {\n      value: color('on-surface'),\n      description: 'The text the user types.',\n      compose: `${compose}.InputColor`,\n      paints: { property: 'color', slot: 'input' },\n    },\n    'caret-color': {\n      value: color('primary'),\n      description: 'The text cursor.',\n      compose: `${compose}.CaretColor`,\n      paints: { property: 'caret-color', slot: 'input' },\n    },\n    'supporting-text-color': {\n      value: color('on-surface-variant'),\n      description: 'The supporting text below the field.',\n      compose: `${compose}.SupportingColor`,\n      paints: { property: 'color', slot: 'supporting-text' },\n    },\n    'leading-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The leading icon.',\n      compose: `${compose}.LeadingIconColor`,\n      paints: { property: 'color', slot: 'leading-icon' },\n    },\n    'trailing-icon-color': {\n      value: color('on-surface-variant'),\n      description: 'The trailing icon.',\n      compose: `${compose}.TrailingIconColor`,\n      paints: { property: 'color', slot: 'trailing-icon' },\n    },\n  }) satisfies Record<string, ComponentToken>;\n\n/** The tokens of {@link TextField}, Select and Autocomplete: `--md-comp-<variant>-text-field-<part>`. */\nexport const textFieldTokenSet = defineComponentTokens({\n  name: 'md-comp-text-field',\n  tokens: {},\n  scopes: {\n    variant: {\n      filled: {\n        prefix: 'md-comp-filled-text-field',\n        tokens: {\n          'container-color': {\n            value: color('surface-container-highest'),\n            description: 'The container.',\n            compose: 'FilledTextFieldTokens.ContainerColor',\n            paints: { property: 'background-color', slot: 'container' },\n          },\n          'container-shape': {\n            value: corner('extra-small'),\n            description: 'The top corners.',\n            compose: 'FilledTextFieldTokens.ContainerShape',\n            paints: { property: 'border-top-left-radius', slot: 'container' },\n          },\n          'active-indicator-color': {\n            value: color('on-surface-variant'),\n            description: 'The line along the bottom of the container.',\n            compose: 'FilledTextFieldTokens.ActiveIndicatorColor',\n            paints: { property: 'background-color', slot: 'active-indicator' },\n          },\n          'focus-active-indicator-color': {\n            value: color('primary'),\n            description: 'The bottom line while the field has focus.',\n            compose: 'FilledTextFieldTokens.FocusActiveIndicatorColor',\n            paints: { property: 'background-color', slot: 'active-indicator', state: 'focused' },\n          },\n          ...contentTokens('FilledTextFieldTokens'),\n        },\n        // A filled field draws no outline.\n        fixed: {\n          'outline-color': 'transparent',\n          'hover-outline-color': 'transparent',\n          'focus-outline-color': 'transparent',\n        },\n      },\n      outlined: {\n        prefix: 'md-comp-outlined-text-field',\n        tokens: {\n          'container-shape': {\n            value: corner('extra-small'),\n            description: 'The corners.',\n            compose: 'OutlinedTextFieldTokens.ContainerShape',\n            paints: { property: 'border-top-left-radius', slot: 'outline' },\n          },\n          'outline-color': {\n            value: color('outline'),\n            description: 'The 1px outline.',\n            compose: 'OutlinedTextFieldTokens.OutlineColor',\n            paints: { property: 'border-top-color', slot: 'outline' },\n          },\n          'hover-outline-color': {\n            value: color('on-surface'),\n            description: 'The outline under the pointer.',\n            compose: 'OutlinedTextFieldTokens.HoverOutlineColor',\n            paints: { property: 'border-top-color', slot: 'outline', state: 'hovered' },\n          },\n          'focus-outline-color': {\n            value: color('primary'),\n            description: 'The 2px outline while the field has focus.',\n            compose: 'OutlinedTextFieldTokens.FocusOutlineColor',\n            paints: { property: 'border-top-color', slot: 'outline', state: 'focused' },\n          },\n          ...contentTokens('OutlinedTextFieldTokens'),\n        },\n        // An outlined field has no container fill, and hides the active indicator.\n        fixed: {\n          'container-color': 'transparent',\n          'active-indicator-color': color('on-surface-variant'),\n          'focus-active-indicator-color': color('primary'),\n        },\n      },\n    },\n  },\n});\n"],"mappings":";;;AAWA,MAAM,iBAAiB,aACpB;CACC,oBAAoB;EAClB,OAAO,MAAM,oBAAoB;EACjC,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAS,MAAM;EAAQ;CAC7C;CACA,0BAA0B;EACxB,OAAO,MAAM,SAAS;EACtB,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAS,MAAM;GAAS,OAAO;EAAU;CAC/D;CACA,oBAAoB;EAClB,OAAO,MAAM,YAAY;EACzB,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAS,MAAM;EAAQ;CAC7C;CACA,eAAe;EACb,OAAO,MAAM,SAAS;EACtB,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAe,MAAM;EAAQ;CACnD;CACA,yBAAyB;EACvB,OAAO,MAAM,oBAAoB;EACjC,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAS,MAAM;EAAkB;CACvD;CACA,sBAAsB;EACpB,OAAO,MAAM,oBAAoB;EACjC,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAS,MAAM;EAAe;CACpD;CACA,uBAAuB;EACrB,OAAO,MAAM,oBAAoB;EACjC,aAAa;EACb,SAAS,GAAG,QAAQ;EACpB,QAAQ;GAAE,UAAU;GAAS,MAAM;EAAgB;CACrD;AACF;;AAGF,MAAa,oBAAoB,sBAAsB;CACrD,MAAM;CACN,QAAQ,CAAC;CACT,QAAQ,EACN,SAAS;EACP,QAAQ;GACN,QAAQ;GACR,QAAQ;IACN,mBAAmB;KACjB,OAAO,MAAM,2BAA2B;KACxC,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;KAAY;IAC5D;IACA,mBAAmB;KACjB,OAAO,OAAO,aAAa;KAC3B,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAA0B,MAAM;KAAY;IAClE;IACA,0BAA0B;KACxB,OAAO,MAAM,oBAAoB;KACjC,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;KAAmB;IACnE;IACA,gCAAgC;KAC9B,OAAO,MAAM,SAAS;KACtB,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;MAAoB,OAAO;KAAU;IACrF;IACA,GAAG,cAAc,uBAAuB;GAC1C;GAEA,OAAO;IACL,iBAAiB;IACjB,uBAAuB;IACvB,uBAAuB;GACzB;EACF;EACA,UAAU;GACR,QAAQ;GACR,QAAQ;IACN,mBAAmB;KACjB,OAAO,OAAO,aAAa;KAC3B,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAA0B,MAAM;KAAU;IAChE;IACA,iBAAiB;KACf,OAAO,MAAM,SAAS;KACtB,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;KAAU;IAC1D;IACA,uBAAuB;KACrB,OAAO,MAAM,YAAY;KACzB,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;MAAW,OAAO;KAAU;IAC5E;IACA,uBAAuB;KACrB,OAAO,MAAM,SAAS;KACtB,aAAa;KACb,SAAS;KACT,QAAQ;MAAE,UAAU;MAAoB,MAAM;MAAW,OAAO;KAAU;IAC5E;IACA,GAAG,cAAc,yBAAyB;GAC5C;GAEA,OAAO;IACL,mBAAmB;IACnB,0BAA0B,MAAM,oBAAoB;IACpD,gCAAgC,MAAM,SAAS;GACjD;EACF;CACF,EACF;AACF,CAAC"}

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

@@ -0,0 +1,142 @@
+import { Density } from "../../tokens/density.js";
+import { DescriptionAria, RootDOMProps, WrapperRootDOMProps } from "../../utils/root-props.js";
+import { CSSProperties, ReactElement, Ref } from "react";
+import { Time } from "@internationalized/date";
+//#region src/components/time-picker/TimePicker.d.ts
+export interface TimePickerLabels {
+  /** Name of the hour selector and field. @default "Hour" */
+  hour: string;
+  /** Name of the minute selector and field. @default "Minute" */
+  minute: string;
+  /** The AM option. @default "AM" */
+  am: string;
+  /** The PM option. @default "PM" */
+  pm: string;
+  /** Name of the AM / PM selector. @default "AM or PM" */
+  period: string;
+  /** Name of the dial. @default "Clock" */
+  dial: string;
+  /** {@link TimePickerModeToggle}'s name in dial mode. @default "Toggle input picker" */
+  inputMode: string;
+  /** {@link TimePickerModeToggle}'s name in input mode. @default "Toggle dial picker" */
+  dialMode: string;
+  /**
+   * Name of a number on the dial (M3: "{Value} Hours or minutes of {Total}"), e.g.
+   * "7 hours of 12" or "35 minutes of 60".
+   * @default `${value} ${unit} of ${total}`
+   */
+  dialValue: (value: string, total: number, unit: 'hours' | 'minutes') => string;
+}
+export interface TimePickerClassNames {
+  /** The picker's root; `className` is merged here too. */
+  root?: string;
+  /** The hour and minute: selectors in dial mode, text fields in input mode. */
+  field?: string;
+  /** The labels under the input mode's fields ("Hour", "Minute"). */
+  fieldLabel?: string;
+  /** The colon between the hour and the minute. */
+  separator?: string;
+  /** The AM / PM selector. */
+  period?: string;
+  /** Each of the AM / PM selector's options. */
+  periodOption?: string;
+  /** The clock dial (dial mode): its face, numbers and hand are drawn inside it. */
+  dial?: string;
+}
+export type TimePickerMode = 'dial' | 'input';
+export interface TimePickerProps extends Omit<WrapperRootDOMProps, DescriptionAria> {
+  /** Controlled time (`@internationalized/date` `Time`). */
+  value?: Time;
+  /** Initial time when uncontrolled. @default 12:00 */
+  defaultValue?: Time;
+  /** Called with the new time when the user changes it. */
+  onChange?: (value: Time) => void;
+  /** 12- or 24-hour clock. Left out, the locale's hour cycle (12 in en-US, 24 in en-GB). */
+  hourCycle?: 12 | 24;
+  /** The clock dial, or typed hour and minute fields (controlled). */
+  mode?: TimePickerMode;
+  /** Initial mode when uncontrolled. @default "dial" */
+  defaultMode?: TimePickerMode;
+  /** Called when the user switches between the dial and the typed input. */
+  onModeChange?: (mode: TimePickerMode) => void;
+  /**
+   * `vertical` stacks the time over the dial; `horizontal` (landscape) puts them side by
+   * side. `auto` picks vertical when the window is tall enough, horizontal when it is only
+   * wide enough, and the typed input when neither fits, so the picker never scrolls (M3
+   * time picker placement and adaptive design). @default "auto"
+   */
+  layout?: 'vertical' | 'horizontal' | 'auto';
+  /** Words the picker shows and announces, with English defaults. */
+  labels?: Partial<TimePickerLabels>;
+  /**
+   * Web density of the input mode, `0` to `-3`: each step takes 4px off the typed hour and
+   * minute fields (72px at 0, 60px at -3). The dial keeps its size: M3 doesn't make time
+   * pickers denser, since its 48px number targets are part of their accessibility. Left out,
+   * the picker takes the density of the nearest `ThemeProvider` or `ThemeScope`.
+   * @default 0
+   */
+  density?: Density;
+  /** The root `<div>`'s id. */
+  id?: string;
+  /** Ref to the root `<div>` element. */
+  ref?: Ref<HTMLDivElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: TimePickerClassNames;
+  /** `data-*` attributes go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+/** Where an `auto` time picker's dial fits: `vertical`, `horizontal` or `none`. */
+export declare function useTimePickerRoom(): 'vertical' | 'horizontal' | 'none';
+/**
+ * M3 time picker (Compose's `TimePicker` and `TimeInput`): hour and minute selectors you
+ * can type in, with an AM / PM selector, and a clock dial whose numbers are buttons (press,
+ * drag, or Tab to one and press Enter; the hour moves on to the minutes); or typed fields
+ * in input mode. It turns to a horizontal layout, or the input mode, when the window has
+ * no room for the dial. Put it in a {@link PickerDialog} for the modal form, with a
+ * {@link TimePickerModeToggle}.
+ *
+ * @example
+ * <TimePicker value={time} onChange={setTime} />
+ */
+export declare function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, mode: modeProp, defaultMode, onModeChange, layout, labels, density, id, ref, className, style, classNames, ...rest }: TimePickerProps): import("react").JSX.Element;
+export interface TimePickerModeToggleProps extends RootDOMProps<HTMLButtonElement> {
+  /** The time picker's mode; the toggle switches to the other one. */
+  mode: TimePickerMode;
+  /** Called with the other mode when the toggle is pressed. */
+  onModeChange: (mode: TimePickerMode) => void;
+  /**
+   * Words the toggle announces (`inputMode`, `dialMode`), with English defaults. Takes the
+   * same object as the time picker's `labels`, so one set of words covers both.
+   */
+  labels?: Partial<TimePickerLabels>;
+  /** Shown in dial mode. Defaults to Material Symbols' keyboard. */
+  keyboardIcon?: ReactElement;
+  /** Shown in input mode. Defaults to Material Symbols' schedule (a clock). */
+  clockIcon?: ReactElement;
+  /** Classes for the icon button; consumer classes win. */
+  className?: string;
+  /** Inline styles for the icon button. */
+  style?: CSSProperties;
+  /** The icon button's id. */
+  id?: string;
+  /** Ref to the icon button. */
+  ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * The time picker's keyboard / clock icon button (M3: "The input selector should be
+ * accessible from the dial selector via the keyboard icon"), for `PickerDialog`'s
+ * `modeToggleButton`. Hidden when the window has no room for the dial, where an `auto`
+ * time picker shows only the input.
+ *
+ * @example
+ * <PickerDialog variant="time" modeToggleButton={<TimePickerModeToggle mode={mode} onModeChange={setMode} />} …>
+ *   <TimePicker mode={mode} onModeChange={setMode} />
+ * </PickerDialog>
+ */
+export declare function TimePickerModeToggle({ mode, onModeChange, labels, keyboardIcon, clockIcon, className, style, id, ref, ...dom }: TimePickerModeToggleProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=TimePicker.d.ts.map