@kanso-labs/kanso-ui 0.33.0 → 0.34.0

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

@@ -1,7 +1,8 @@
+import { OverlayAlign, OverlaySide } from "../../styles/overlay.js";
 import { ReactNode } from "react";
 import { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from "react-aria-components";
 //#region src/components/tooltip/index.d.ts
-type TooltipAlign = 'center' | 'end' | 'start';
+type TooltipAlign = OverlayAlign;
 type TooltipProps = {
   /**
    * Where the tooltip sits along the side it opens on.
@@ -40,7 +41,7 @@ type TooltipProps = {
   /** A function may compute the style from the tooltip's render state. */
   style?: StyleOrFunction<TooltipRenderProps>;
 } & Omit<TooltipTriggerComponentProps, 'children'>;
-type TooltipSide = 'bottom' | 'left' | 'right' | 'top';
+type TooltipSide = OverlaySide;
 /**
  * A label for the element it wraps, shown while that element is hovered or
  * focused — the tooltips page's plain tooltip. Its open state is React

package/dist/components/tooltip/index.js

@@ -1,6 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { overlay, popupOrigin } from "../../styles/overlay.js";
+import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipTrigger } from "react-aria-components";
@@ -22,11 +22,6 @@ const styles = { container: {
 	$$css: true
 } };
 const DEFAULT_SIDE_OFFSET = 8;
-function placementOf(side, align) {
-	if (align === "center") return side;
-	if (side === "top" || side === "bottom") return `${side} ${align}`;
-	return `${side} ${align === "start" ? "top" : "bottom"}`;
-}
 /**
 * A label for the element it wraps, shown while that element is hovered or
 * focused — the tooltips page's plain tooltip. Its open state is React

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ClassNameOrFunction","StyleOrFunction","TooltipRenderProps","TooltipTriggerComponentProps","stylex","Tooltip","RACTooltip","TooltipTrigger","mergeStatefulStyles","overlay","popupOrigin","colors","radii","spacing","typography","styles","container","kWkggS","kaIpWk","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","ks0D6T","kAzted","k8WAf4","kg3NbH","$$css","DEFAULT_SIDE_OFFSET","TooltipAlign","TooltipProps","align","alignOffset","children","className","Element","label","side","TooltipSide","sideOffset","style","Omit","placementOf","const","t0","$","_c","props","t1","t2","t3","undefined","t4","t5","_temp","t6","t7","state","popup","placement"],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Tooltip as RACTooltip, TooltipTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The tooltips page's plain tooltip: a 24dp container on inverse surface\n// with 8dp of padding, holding one line of supporting text in inverse on\n// surface at 12 over 16, which is the body-small role. The page names a\n// shape token for the container without giving its value, so the container\n// takes the smallest corner the library has — a 24dp box has room for no\n// more.\n//\n// The rich tooltip on the same page is a hover-triggered `Popover`, which is\n// where its subhead, supporting text and buttons already live; this one is\n// text and nothing else, which is why it takes its label as a string rather\n// than as parts.\n//\n// The entry is the overlay module's, shared with every anchored surface, and\n// so is the origin it grows from — the tooltip comes out of the thing it\n// describes. The surface itself is not: a tooltip inverts the page's colours\n// where a popover sits on a container role, so it draws its own.\nconst styles = {\n  container: {\n    kWkggS: \"x1c5gpgi\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1girmi0\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    ks0D6T: \"x10u2fgw\",\n    kAzted: \"xjwf9q1\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  }\n};\n\n// The gap between the anchor and the tooltip. A number rather than a token,\n// because React Aria computes the position in JavaScript and so cannot read\n// a custom property — the same one place `Popover` spells a step out.\nconst DEFAULT_SIDE_OFFSET = 8;\ntype TooltipAlign = 'center' | 'end' | 'start';\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: TooltipAlign;\n  /** Shifts the tooltip along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * The element the tooltip describes, and nothing else. It has to be able\n   * to take focus, since a tooltip a keyboard cannot reach is one most\n   * people never see — wrap anything that cannot in `Focusable`, which this\n   * package re-exports.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the tooltip's render state. */\n  className?: ClassNameOrFunction<TooltipRenderProps>;\n  /**\n   * Where to portal the tooltip. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the tooltip renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** What the tooltip says. Text, since the page's plain tooltip is text. */\n  label: ReactNode;\n  /**\n   * Which side of the element the tooltip opens on. It flips to the opposite\n   * side on its own when there is no room.\n   * @default 'top'\n   */\n  side?: TooltipSide;\n  /** The gap between the element and the tooltip, in pixels. */\n  sideOffset?: number;\n  /** A function may compute the style from the tooltip's render state. */\n  style?: StyleOrFunction<TooltipRenderProps>;\n} & Omit<TooltipTriggerComponentProps, 'children'>;\ntype TooltipSide = 'bottom' | 'left' | 'right' | 'top';\n\n// React Aria names a placement by the side and, along it, the end the\n// tooltip is aligned to — the same mapping `Popover` makes, kept identical\n// so the two agree on what `side` and `align` mean.\nfunction placementOf(side: TooltipSide, align: TooltipAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * A label for the element it wraps, shown while that element is hovered or\n * focused — the tooltips page's plain tooltip. Its open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, `defaultOpen` to\n * let it keep its own, and `delay` and `closeDelay` for how long a pointer\n * has to rest before it appears and after it leaves.\n *\n * A tooltip is not a place to put anything a person has to read or reach:\n * it is skipped by touch entirely and dismissed by Escape, so what it says\n * has to be a repeat of what the element already means. Anything with a\n * button in it, or worth reading twice, is a `Popover`.\n *\n * The call site's `className` and `style` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  label,\n  side = 'top',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  ...props\n}: TooltipProps) {\n  return <TooltipTrigger {...props}>\n      {children}\n      <RACTooltip crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: TooltipRenderProps) => stylex.props(overlay.popup, styles.container, popupOrigin(state.placement)), {\n      className,\n      style\n    })}>\n        {label}\n      </RACTooltip>\n    </TooltipTrigger>;\n}\nexport type { TooltipAlign, TooltipProps, TooltipSide };\nexport default Tooltip;"],"mappings":";;;;;;;AAyBA,MAAMgB,SAAS,EACbC,WAAW;CACTC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AAKA,MAAMC,sBAAsB;AA6C5B,SAASc,YAAYL,MAAmBN,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOM;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIN;CAEpB,OAAO,GAAGM,KAAI,GAAIN,UAAU,UAAU,QAAQ;AAChD;;;;;;;;;;;;;;;AAgBA,SAAA7B,UAAA0C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAd;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAArB;CAAA,IAAAuB;CAAA,IAAAW;CAAA,IAAAP;CAAA,IAAAQ;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAiB,CAAA,CAAAb,OAAAiB,IAAAhB,aAAAC,UAAAC,WAAArB,WAAAuB,OAAAC,MAAAY,IAAAV,YAAAW,IAAAV,OAAA,GAAAO,SAAAH;EAWFC,EAAA,KAAAD;EAAAC,EAAA,KAAAb;EAAAa,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAhC;EAAAgC,EAAA,KAAAT;EAAAS,EAAA,KAAAE;EAAAF,EAAA,KAAAL;EAAAK,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;CAAA,OAAA;EAAAlB,cAAAa,EAAA;EAAAZ,WAAAY,EAAA;EAAAX,YAAAW,EAAA;EAAAhC,YAAAgC,EAAA;EAAAT,QAAAS,EAAA;EAAAE,QAAAF,EAAA;EAAAL,QAAAK,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAVb,MAAAd,QAAAiB,OAAAG,KAAAA,IAAA,WAAAH;CAMA,MAAAX,OAAAY,OAAAE,KAAAA,IAAA,QAAAF;CACA,MAAAV,aAAAW,OAAAC,KAAAA,IAAAvB,sBAAAsB;CAAgC,IAAAE;CAAA,IAAAP,EAAA,QAAAd,SAAAc,EAAA,QAAAR,MAAA;EAMyCe,KAAAV,YAAYL,MAAMN,KAAK;EAACc,EAAA,MAAAd;EAAAc,EAAA,MAAAR;EAAAQ,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAX,aAAAW,EAAA,QAAAL,OAAA;EAEtDa,KAAAhD,oBAAoBiD,OAA4G;GAAApB;GAAAM;EAGzK,CAAC;EAACK,EAAA,MAAAX;EAAAW,EAAA,MAAAL;EAAAK,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAb,eAAAa,EAAA,QAAAhC,aAAAgC,EAAA,QAAAT,SAAAS,EAAA,QAAAN,cAAAM,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,IAAA;EALAE,KAAA,oBAAC,SAAD;GAAyBvB,aAAAA;GAAqBO,QAAAA;GAAuB,WAAAa;GAE7CvC,0BAAAA;GAAS,GAAMwC;GAIpCjB,UAAAA;EANQ,CAAA;EAOES,EAAA,MAAAb;EAAAa,EAAA,MAAAhC;EAAAgC,EAAA,MAAAT;EAAAS,EAAA,MAAAN;EAAAM,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAZ,YAAAY,EAAA,QAAAE,SAAAF,EAAA,QAAAU,IAAA;EATVC,KAAA,qBAAC,gBAAD;GAAe,GAAKT;GAApB,UAAA,CACFd,UACDsB,EAFkB;;EAUHV,EAAA,MAAAZ;EAAAY,EAAA,MAAAE;EAAAF,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAVZW;AAUY;AAtBrB,SAAAF,MAAAG,OAAA;CAAA,OAgBgGxD,MAAaK,QAAOoD,OAAQ9C,OAAMC,WAAYN,YAAYkD,MAAKE,SAAU,CAAC;AAAC"}
+{"version":3,"file":"index.js","names":["ReactNode","ClassNameOrFunction","StyleOrFunction","TooltipRenderProps","TooltipTriggerComponentProps","stylex","Tooltip","RACTooltip","TooltipTrigger","OverlayAlign","OverlaySide","mergeStatefulStyles","overlay","placementOf","popupOrigin","colors","radii","spacing","typography","styles","container","kWkggS","kaIpWk","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","ks0D6T","kAzted","k8WAf4","kg3NbH","$$css","DEFAULT_SIDE_OFFSET","TooltipAlign","TooltipProps","align","alignOffset","children","className","Element","label","side","TooltipSide","sideOffset","style","Omit","t0","$","_c","props","t1","t2","t3","undefined","t4","t5","_temp","t6","t7","state","popup","placement"],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Tooltip as RACTooltip, TooltipTrigger } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The tooltips page's plain tooltip: a 24dp container on inverse surface\n// with 8dp of padding, holding one line of supporting text in inverse on\n// surface at 12 over 16, which is the body-small role. The page names a\n// shape token for the container without giving its value, so the container\n// takes the smallest corner the library has — a 24dp box has room for no\n// more.\n//\n// The rich tooltip on the same page is a hover-triggered `Popover`, which is\n// where its subhead, supporting text and buttons already live; this one is\n// text and nothing else, which is why it takes its label as a string rather\n// than as parts.\n//\n// The entry is the overlay module's, shared with every anchored surface, and\n// so is the origin it grows from — the tooltip comes out of the thing it\n// describes. The surface itself is not: a tooltip inverts the page's colours\n// where a popover sits on a container role, so it draws its own.\nconst styles = {\n  container: {\n    kWkggS: \"x1c5gpgi\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1girmi0\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    ks0D6T: \"x10u2fgw\",\n    kAzted: \"xjwf9q1\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  }\n};\n\n// The gap between the anchor and the tooltip. A number rather than a token,\n// because React Aria computes the position in JavaScript and so cannot read\n// a custom property — the same one place `Popover` spells a step out.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay, and `Popover` and `Menu` ask it\n// there too. Aliased rather than re-declared so the names a call site\n// imports stay this component's.\ntype TooltipAlign = OverlayAlign;\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: TooltipAlign;\n  /** Shifts the tooltip along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * The element the tooltip describes, and nothing else. It has to be able\n   * to take focus, since a tooltip a keyboard cannot reach is one most\n   * people never see — wrap anything that cannot in `Focusable`, which this\n   * package re-exports.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the tooltip's render state. */\n  className?: ClassNameOrFunction<TooltipRenderProps>;\n  /**\n   * Where to portal the tooltip. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the tooltip renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** What the tooltip says. Text, since the page's plain tooltip is text. */\n  label: ReactNode;\n  /**\n   * Which side of the element the tooltip opens on. It flips to the opposite\n   * side on its own when there is no room.\n   * @default 'top'\n   */\n  side?: TooltipSide;\n  /** The gap between the element and the tooltip, in pixels. */\n  sideOffset?: number;\n  /** A function may compute the style from the tooltip's render state. */\n  style?: StyleOrFunction<TooltipRenderProps>;\n} & Omit<TooltipTriggerComponentProps, 'children'>;\ntype TooltipSide = OverlaySide;\n\n/**\n * A label for the element it wraps, shown while that element is hovered or\n * focused — the tooltips page's plain tooltip. Its open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, `defaultOpen` to\n * let it keep its own, and `delay` and `closeDelay` for how long a pointer\n * has to rest before it appears and after it leaves.\n *\n * A tooltip is not a place to put anything a person has to read or reach:\n * it is skipped by touch entirely and dismissed by Escape, so what it says\n * has to be a repeat of what the element already means. Anything with a\n * button in it, or worth reading twice, is a `Popover`.\n *\n * The call site's `className` and `style` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  label,\n  side = 'top',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  ...props\n}: TooltipProps) {\n  return <TooltipTrigger {...props}>\n      {children}\n      <RACTooltip crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: TooltipRenderProps) => stylex.props(overlay.popup, styles.container, popupOrigin(state.placement)), {\n      className,\n      style\n    })}>\n        {label}\n      </RACTooltip>\n    </TooltipTrigger>;\n}\nexport type { TooltipAlign, TooltipProps, TooltipSide };\nexport default Tooltip;"],"mappings":"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"}

package/dist/field/index.js

@@ -34,12 +34,13 @@ const BOX_CONTROLS = {
 	}
 };
 const BoxContext = createContext(OUTSIDE_BOX);
-function boxContent(label, children, floatingLabel, isPopulated, leading, trailing, trigger, variant) {
+function boxContent(label, children, floatingLabel, isPopulated, leading, multiline, trailing, trigger, variant) {
 	return (state) => /* @__PURE__ */ jsx(BoxContent, {
 		floatingLabel,
 		isPopulated,
 		label,
 		leading,
+		multiline,
 		state,
 		trailing,
 		trigger,
@@ -55,8 +56,8 @@ function boxContent(label, children, floatingLabel, isPopulated, leading, traili
 * for them. See the outlined variant's note above.
 */
 function BoxContent(t0) {
-	const $ = c(36);
-	const { children, floatingLabel, isPopulated, label, leading, state, trailing, trigger, variant } = t0;
+	const $ = c(40);
+	const { children, floatingLabel, isPopulated, label, leading, multiline, state, trailing, trigger, variant } = t0;
 	const read = useFieldPopulated();
 	const populated = isPopulated ?? read;
 	const outlined = variant === "outlined";
@@ -81,66 +82,70 @@ function BoxContent(t0) {
 		$[6] = t2;
 	} else t2 = $[6];
 	let t3;
-	if ($[7] !== leading || $[8] !== state.isDisabled) {
+	if ($[7] !== leading || $[8] !== multiline || $[9] !== outlined || $[10] !== state.isDisabled) {
 		t3 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...props(fieldChromeStyles.icon, state.isDisabled && fieldChromeStyles.iconDisabled),
+			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: leading
 		});
 		$[7] = leading;
-		$[8] = state.isDisabled;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[8] = multiline;
+		$[9] = outlined;
+		$[10] = state.isDisabled;
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[10] !== floatingLabel || $[11] !== state.isDisabled) {
+	if ($[12] !== floatingLabel || $[13] !== state.isDisabled) {
 		t4 = props(fieldChromeStyles.column, floatingLabel && fieldChromeStyles.columnFloating, state.isDisabled && (floatingLabel ? fieldChromeStyles.columnDisabledFloating : fieldChromeStyles.columnDisabled));
-		$[10] = floatingLabel;
-		$[11] = state.isDisabled;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[12] = floatingLabel;
+		$[13] = state.isDisabled;
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[13] !== floated || $[14] !== floatingLabel || $[15] !== outlined) {
+	if ($[15] !== floated || $[16] !== floatingLabel || $[17] !== outlined) {
 		t5 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated);
-		$[13] = floated;
-		$[14] = floatingLabel;
-		$[15] = outlined;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[15] = floated;
+		$[16] = floatingLabel;
+		$[17] = outlined;
+		$[18] = t5;
+	} else t5 = $[18];
 	let t6;
-	if ($[17] !== label || $[18] !== state || $[19] !== t5) {
+	if ($[19] !== label || $[20] !== state || $[21] !== t5) {
 		t6 = /* @__PURE__ */ jsx(FieldLabel, {
 			state,
 			...t5,
 			children: label
 		});
-		$[17] = label;
-		$[18] = state;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[19] = label;
+		$[20] = state;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
 	let t7;
-	if ($[21] !== children || $[22] !== t4 || $[23] !== t6) {
+	if ($[23] !== children || $[24] !== t4 || $[25] !== t6) {
 		t7 = /* @__PURE__ */ jsxs("div", {
 			...t4,
 			children: [t6, children]
 		});
-		$[21] = children;
-		$[22] = t4;
-		$[23] = t6;
-		$[24] = t7;
-	} else t7 = $[24];
+		$[23] = children;
+		$[24] = t4;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
 	let t8;
-	if ($[25] !== state.isDisabled || $[26] !== state.isInvalid || $[27] !== trailing) {
+	if ($[27] !== multiline || $[28] !== outlined || $[29] !== state.isDisabled || $[30] !== state.isInvalid || $[31] !== trailing) {
 		t8 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			...props(fieldChromeStyles.icon, state.isInvalid && fieldChromeStyles.iconError, state.isDisabled && fieldChromeStyles.iconDisabled),
+			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isInvalid && fieldChromeStyles.iconError, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: trailing
 		});
-		$[25] = state.isDisabled;
-		$[26] = state.isInvalid;
-		$[27] = trailing;
-		$[28] = t8;
-	} else t8 = $[28];
+		$[27] = multiline;
+		$[28] = outlined;
+		$[29] = state.isDisabled;
+		$[30] = state.isInvalid;
+		$[31] = trailing;
+		$[32] = t8;
+	} else t8 = $[32];
 	let t9;
-	if ($[29] !== t1 || $[30] !== t2 || $[31] !== t3 || $[32] !== t7 || $[33] !== t8 || $[34] !== trigger) {
+	if ($[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t7 || $[37] !== t8 || $[38] !== trigger) {
 		t9 = /* @__PURE__ */ jsxs(BoxContext, {
 			value: t1,
 			children: [
@@ -151,19 +156,19 @@ function BoxContent(t0) {
 				t8
 			]
 		});
-		$[29] = t1;
-		$[30] = t2;
-		$[31] = t3;
-		$[32] = t7;
-		$[33] = t8;
-		$[34] = trigger;
-		$[35] = t9;
-	} else t9 = $[35];
+		$[33] = t1;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t7;
+		$[37] = t8;
+		$[38] = trigger;
+		$[39] = t9;
+	} else t9 = $[39];
 	return t9;
 }
 function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
 	const outlined = variant === "outlined";
-	return (state) => props(fieldChromeStyles.box, floatingLabel ? fieldChromeStyles.boxFloating : fieldChromeStyles.boxFixed, multiline && fieldChromeStyles.boxMultiline, leading && fieldChromeStyles.boxLeading, trailing && fieldChromeStyles.boxTrailing, outlined && fieldChromeStyles.boxOutlined, outlined && floatingLabel && fieldChromeStyles.boxOutlinedFloating, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
+	return (state) => props(fieldChromeStyles.box, floatingLabel ? fieldChromeStyles.boxFloating : fieldChromeStyles.boxFixed, multiline && fieldChromeStyles.boxMultiline, leading && fieldChromeStyles.boxLeading, trailing && fieldChromeStyles.boxTrailing, outlined && fieldChromeStyles.boxOutlined, outlined && floatingLabel && fieldChromeStyles.boxOutlinedFloating, outlined && multiline && fieldChromeStyles.boxOutlinedMultiline, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
 }
 /**
 * The box a control sits in, filled or outlined, with its label. React
@@ -174,13 +179,14 @@ function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
 * on a button rather than an input — passes the two states itself.
 */
 function FieldBox(t0) {
-	const $ = c(26);
+	const $ = c(28);
 	let T0;
 	let children;
 	let floatingLabel;
 	let isPopulated;
 	let label;
 	let leading;
+	let multiline;
 	let t1;
 	let t2;
 	let trailing;
@@ -195,7 +201,7 @@ function FieldBox(t0) {
 		trailing = t9;
 		trigger = t10;
 		floatingLabel = t4 === void 0 ? true : t4;
-		const multiline = t8 === void 0 ? false : t8;
+		multiline = t8 === void 0 ? false : t8;
 		variant = t11 === void 0 ? "filled" : t11;
 		T0 = Group;
 		t1 = props;
@@ -207,11 +213,12 @@ function FieldBox(t0) {
 		$[4] = isPopulated;
 		$[5] = label;
 		$[6] = leading;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = trailing;
-		$[10] = trigger;
-		$[11] = variant;
+		$[7] = multiline;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = trailing;
+		$[11] = trigger;
+		$[12] = variant;
 	} else {
 		T0 = $[1];
 		children = $[2];
@@ -219,38 +226,40 @@ function FieldBox(t0) {
 		isPopulated = $[4];
 		label = $[5];
 		leading = $[6];
-		t1 = $[7];
-		t2 = $[8];
-		trailing = $[9];
-		trigger = $[10];
-		variant = $[11];
+		multiline = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		trailing = $[10];
+		trigger = $[11];
+		variant = $[12];
 	}
 	let t3;
-	if ($[12] !== children || $[13] !== floatingLabel || $[14] !== isPopulated || $[15] !== label || $[16] !== leading || $[17] !== trailing || $[18] !== trigger || $[19] !== variant) {
-		t3 = boxContent(label, children, floatingLabel, isPopulated, leading, trailing, trigger, variant);
-		$[12] = children;
-		$[13] = floatingLabel;
-		$[14] = isPopulated;
-		$[15] = label;
-		$[16] = leading;
-		$[17] = trailing;
-		$[18] = trigger;
-		$[19] = variant;
-		$[20] = t3;
-	} else t3 = $[20];
+	if ($[13] !== children || $[14] !== floatingLabel || $[15] !== isPopulated || $[16] !== label || $[17] !== leading || $[18] !== multiline || $[19] !== trailing || $[20] !== trigger || $[21] !== variant) {
+		t3 = boxContent(label, children, floatingLabel, isPopulated, leading, multiline, trailing, trigger, variant);
+		$[13] = children;
+		$[14] = floatingLabel;
+		$[15] = isPopulated;
+		$[16] = label;
+		$[17] = leading;
+		$[18] = multiline;
+		$[19] = trailing;
+		$[20] = trigger;
+		$[21] = variant;
+		$[22] = t3;
+	} else t3 = $[22];
 	let t4;
-	if ($[21] !== T0 || $[22] !== t1 || $[23] !== t2 || $[24] !== t3) {
+	if ($[23] !== T0 || $[24] !== t1 || $[25] !== t2 || $[26] !== t3) {
 		t4 = /* @__PURE__ */ jsx(T0, {
 			...t1,
 			...t2,
 			children: t3
 		});
-		$[21] = T0;
-		$[22] = t1;
-		$[23] = t2;
-		$[24] = t3;
-		$[25] = t4;
-	} else t4 = $[25];
+		$[23] = T0;
+		$[24] = t1;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = t4;
+	} else t4 = $[27];
 	return t4;
 }
 /**
@@ -266,7 +275,7 @@ function FieldBox(t0) {
 */
 function FieldInput(t0) {
 	const $ = c(19);
-	const { numeric: t1, placeholder, prefix, suffix, ...props$3 } = t0;
+	const { numeric: t1, placeholder, prefix, suffix, ...props$1 } = t0;
 	const numeric = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
 	const T0 = Input;
@@ -278,16 +287,16 @@ function FieldInput(t0) {
 		$[1] = numeric;
 		$[2] = t3;
 	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props$3);
+	const t4 = mergeStatefulStyles(t3, props$1);
 	let t5;
-	if ($[3] !== T0 || $[4] !== props$3 || $[5] !== t2 || $[6] !== t4) {
+	if ($[3] !== T0 || $[4] !== props$1 || $[5] !== t2 || $[6] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
-			...props$3,
+			...props$1,
 			...t4
 		});
 		$[3] = T0;
-		$[4] = props$3;
+		$[4] = props$1;
 		$[5] = t2;
 		$[6] = t4;
 		$[7] = t5;
@@ -337,6 +346,42 @@ function FieldInput(t0) {
 	return t9;
 }
 /**
+* A date or a time's segments, in a {@link FieldBox}: React Aria's
+* `DateInput`, or the group holding a range's two. This is what carries the
+* control's type and its place on the line, clearing the label at the top,
+* as {@link FieldValue} does for a value that was chosen.
+*
+* A typed value longer than its box behaves as an input's text does. It is
+* clipped rather than cut short, since every segment on the line is still a
+* place to type. The browser scrolls whichever segment has focus into view,
+* as it scrolls to an input's caret. And when focus leaves the segments the
+* line goes back to its start, as an input's text does on blur, so a value
+* at rest reads from its beginning rather than from wherever it was left.
+*/
+function FieldSegments(t0) {
+	const $ = c(5);
+	const { children } = t0;
+	const box = useContext(BoxContext);
+	let t1;
+	if ($[0] !== box.underLabel) {
+		t1 = props(fieldChromeStyles.input, fieldChromeStyles.segments, box.underLabel && fieldChromeStyles.inputUnderLabel);
+		$[0] = box.underLabel;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			onBlur: returnToStart,
+			...t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+/**
 * A field's multi-line text control, in a {@link FieldBox} drawn `multiline`.
 * React Aria's `TextArea`, with the same label association, value and
 * validation {@link FieldInput} takes from the field around it, and the same
@@ -447,9 +492,10 @@ function FieldTrigger(props$4) {
 /**
 * A field's value where it was chosen rather than typed, in a
 * {@link FieldBox}. Put React Aria's own element inside it — a select's
-* `SelectValue`, a picker's display — and this is what carries the input's
-* type and its place on the line, clearing the label at the top and
-* truncating rather than wrapping.
+* `SelectValue` — and this is what carries the input's type and its place on
+* the line, clearing the label at the top and truncating rather than
+* wrapping. A date or a time is typed, segment by segment, and takes
+* {@link FieldSegments} instead.
 *
 * The wrapper is the styled one rather than React Aria's element, because
 * this is the box's flex item: styling the element inside instead left it
@@ -461,24 +507,27 @@ function FieldTrigger(props$4) {
 */
 function FieldValue(t0) {
 	const $ = c(3);
-	const { isFocused: t1, isPlaceholder: t2, ...props$1 } = t0;
+	const { isFocused: t1, isPlaceholder: t2, ...props$5 } = t0;
 	const isFocused = t1 === void 0 ? false : t1;
 	const isPlaceholder = t2 === void 0 ? false : t2;
 	const box = useContext(BoxContext);
 	const hidden = isPlaceholder && box.label === "floating" && !isFocused;
-	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$1);
+	const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$5);
 	let t4;
-	if ($[0] !== props$1 || $[1] !== t3) {
+	if ($[0] !== props$5 || $[1] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
-			...props$1,
+			...props$5,
 			...t3
 		});
-		$[0] = props$1;
+		$[0] = props$5;
 		$[1] = t3;
 		$[2] = t4;
 	} else t4 = $[2];
 	return t4;
 }
+function returnToStart(event) {
+	if (!event.currentTarget.contains(event.relatedTarget)) event.currentTarget.scrollLeft = 0;
+}
 function useFieldPopulated() {
 	const input = useSlottedContext(InputContext);
 	const textArea = useSlottedContext(TextAreaContext);
@@ -505,7 +554,7 @@ function FieldLabel(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { state: t3, variant: t4, ...props$5 } = t0;
+		const { state: t3, variant: t4, ...props$3 } = t0;
 		const state = t3 === void 0 ? NO_STATE : t3;
 		const variant = t4 === void 0 ? "field" : t4;
 		const { isDisabled: t5, isFocusWithin: t6, isInvalid: t7 } = state;
@@ -513,8 +562,8 @@ function FieldLabel(t0) {
 		const isFocusWithin = t6 === void 0 ? false : t6;
 		const isInvalid = t7 === void 0 ? false : t7;
 		T0 = Label;
-		t1 = props$5;
-		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$5);
+		t1 = props$3;
+		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$3);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = t1;
@@ -662,6 +711,6 @@ function FieldMessage(t0) {
 	return t10;
 }
 //#endregion
-export { FieldBox, FieldInput, FieldLabel, FieldMessage, FieldTextArea, FieldTrigger, FieldValue };
+export { FieldBox, FieldInput, FieldLabel, FieldMessage, FieldSegments, FieldTextArea, FieldTrigger, FieldValue };
 
 //# sourceMappingURL=index.js.map