@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","StyleProp","TextStyle","ViewStyle","useMemo","Text","NativeText","View","IconStyle","ResolvedTheme","RowVariant","IconStyleContext","useTheme","composeStyles","useTypeRole","rowContentColor","rowStyles","rowStylesOf","ICON_SIZE","RowContentProps","children","isDisabled","isSelected","leading","overline","supporting","trailing","variant","hasContent","node","undefined","RowContent","t0","$","_c","t1","t2","t3","theme","own","headlineRole","overlineRole","supportingRole","t4","color","t5","size","icons","tone","muted","T0","t6","slot","T1","t7","main","t8","t9","t10","t11","t12","t13","t14","rowStyleOf","Pick","lines","base","twoLine","threeLine","_c","NativeText"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native'\n\nimport { useMemo } from 'react'\nimport { Text as NativeText, View } from 'react-native'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { RowVariant } from './styles'\n\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { rowContentColor, rowStyles, rowStylesOf } from './styles'\n\n// The size an icon in either slot is drawn at, the lists and menus pages'.\nconst ICON_SIZE = 24\n\ntype RowContentProps = {\n  /** The row's headline, the one thing it is mostly about. */\n  readonly children?: ReactNode\n  /**\n   * Whether the row is disabled. Its headline, slots and lines take the\n   * faded on-surface colour, the supporting line included.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the row is selected. Its headline, slots and lines take the\n   * selected container's own on-colour, since the muted role is not\n   * guaranteed to be readable over it.\n   * @default false\n   */\n  readonly isSelected?: boolean\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  readonly leading?: ReactNode\n  /** A line above the headline, in label small and the muted role. */\n  readonly overline?: ReactNode\n  /** A second line under the headline, in body medium and the muted role. */\n  readonly supporting?: ReactNode\n  /** Content after the headline, such as an amount or a control. */\n  readonly trailing?: ReactNode\n  /**\n   * Which spec page's row this is. A list item's headline is body large and\n   * a menu item's label large.\n   * @default 'list'\n   */\n  readonly variant?: RowVariant\n}\n\n/** Whether a slot was given something to draw. */\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== ''\n}\n\n/**\n * The inside of a row: the leading slot, the headline with the lines beside\n * it, and the trailing slot, each drawn only when given. The view around it\n * is the caller's, ListItem's or a menu's item, and takes `rowStyleOf`; this\n * is what each of them puts inside it, so a list and a menu draw the same\n * row. Both slots hand an icon the row's content colour at 24dp, through\n * `useIconStyle()`. Not a component of the library's own and not exported.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list',\n}: RowContentProps) {\n  const theme = useTheme()\n  const own = rowStylesOf(theme)\n  const headlineRole = useTypeRole(\n    variant === 'menu' ? 'labelLarge' : 'bodyLarge',\n  )\n  const overlineRole = useTypeRole('labelSmall')\n  const supportingRole = useTypeRole('bodyMedium')\n  const color = rowContentColor(theme, { isDisabled, isSelected, variant })\n  const icons = useMemo<IconStyle>(() => ({ color, size: ICON_SIZE }), [color])\n  // The muted role on the surface; the row's own colour over a selected\n  // container, and on a disabled row, which fades the lines with the rest.\n  const tone = isDisabled || isSelected ? { color } : own.muted\n\n  return (\n    <IconStyleContext value={icons}>\n      {hasContent(leading) ? (\n        <View style={rowStyles.slot}>{leading}</View>\n      ) : null}\n      <View style={own.main}>\n        {hasContent(overline) ? (\n          <NativeText style={composeStyles<TextStyle>(overlineRole, tone)}>\n            {overline}\n          </NativeText>\n        ) : null}\n        <NativeText style={composeStyles<TextStyle>(headlineRole, { color })}>\n          {children}\n        </NativeText>\n        {hasContent(supporting) ? (\n          <NativeText style={composeStyles<TextStyle>(supportingRole, tone)}>\n            {supporting}\n          </NativeText>\n        ) : null}\n      </View>\n      {hasContent(trailing) ? (\n        <View style={rowStyles.slot}>{trailing}</View>\n      ) : null}\n    </IconStyleContext>\n  )\n}\n\n/**\n * The style of the view around a row's content: the padding and gap, the\n * variant's height, the taller item its lines make it, and the selected\n * container. Which of the lists page's three items a row is comes from its\n * content rather than a prop, so a row holding all three lines already says\n * it is the three-line item. A line that wraps grows the shorter item and\n * keeps its slots centred.\n */\nfunction rowStyleOf(\n  theme: ResolvedTheme,\n  {\n    isSelected = false,\n    overline,\n    supporting,\n    variant = 'list',\n  }: Pick<\n    RowContentProps,\n    'isSelected' | 'overline' | 'supporting' | 'variant'\n  >,\n): StyleProp<ViewStyle> {\n  const own = rowStylesOf(theme)\n  const lines =\n    (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0)\n\n  return composeStyles<ViewStyle>(\n    own.base,\n    own[variant],\n    lines === 1 ? own.twoLine : undefined,\n    lines === 2 ? own.threeLine : undefined,\n    isSelected\n      ? own[variant === 'menu' ? 'selectedMenu' : 'selectedList']\n      : undefined,\n  )\n}\n\nexport type { RowContentProps, RowVariant }\n\nexport { hasContent, RowContent, rowContentColor, rowStyleOf, rowStyles }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","StyleProp","TextStyle","ViewStyle","useMemo","Text","NativeText","View","IconStyle","ResolvedTheme","RowVariant","IconStyleContext","useTheme","composeStyles","nativeWeight","useTypeRole","rowContentColor","rowStyles","rowStylesOf","ICON_SIZE","SELECTED_CONTAINER","drawer","list","menu","const","Record","RowContentProps","children","isDisabled","isEmphasized","isSelected","leading","overline","supporting","trailing","variant","hasContent","node","undefined","RowContent","t0","$","_c","t1","t2","t3","t4","theme","own","headlineRole","overlineRole","supportingRole","t5","color","t6","size","icons","tone","muted","T0","t7","slot","T1","t8","main","t9","t10","fontWeight","typography","weightBold","t11","t12","t13","t14","t15","rowStyleOf","Pick","lines","base","twoLine","threeLine","_c","NativeText"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native'\n\nimport { useMemo } from 'react'\nimport { Text as NativeText, View } from 'react-native'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { RowVariant } from './styles'\n\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { nativeWeight, useTypeRole } from '../typography/roles'\nimport { rowContentColor, rowStyles, rowStylesOf } from './styles'\n\n// The size an icon in either slot is drawn at, the lists and menus pages'.\nconst ICON_SIZE = 24\n\n// The style of each variant's selected container.\nconst SELECTED_CONTAINER = {\n  drawer: 'selectedDrawer',\n  list: 'selectedList',\n  menu: 'selectedMenu',\n} as const satisfies Record<RowVariant, string>\n\ntype RowContentProps = {\n  /** The row's headline, the one thing it is mostly about. */\n  readonly children?: ReactNode\n  /**\n   * Whether the row is disabled. Its headline, slots and lines take the\n   * faded on-surface colour, the supporting line included.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the headline is drawn in the bold weight rather than its role's\n   * own, for a row marked without the container a selected one takes. The\n   * navigation drawer's trail to the current row is what asks for it.\n   * @default false\n   */\n  readonly isEmphasized?: boolean\n  /**\n   * Whether the row is selected. Its headline, slots and lines take the\n   * selected container's own on-colour, since the muted role is not\n   * guaranteed to be readable over it.\n   * @default false\n   */\n  readonly isSelected?: boolean\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  readonly leading?: ReactNode\n  /** A line above the headline, in label small and the muted role. */\n  readonly overline?: ReactNode\n  /** A second line under the headline, in body medium and the muted role. */\n  readonly supporting?: ReactNode\n  /** Content after the headline, such as an amount or a control. */\n  readonly trailing?: ReactNode\n  /**\n   * Which spec page's row this is. A list item's headline is body large, and\n   * a menu item's and a navigation drawer row's label large.\n   * @default 'list'\n   */\n  readonly variant?: RowVariant\n}\n\n/** Whether a slot was given something to draw. */\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== ''\n}\n\n/**\n * The inside of a row: the leading slot, the headline with the lines beside\n * it, and the trailing slot, each drawn only when given. The view around it\n * is the caller's, ListItem's or a menu's item, and takes `rowStyleOf`; this\n * is what each of them puts inside it, so a list and a menu draw the same\n * row. Both slots hand an icon the row's content colour at 24dp, through\n * `useIconStyle()`. Not a component of the library's own and not exported.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isEmphasized = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list',\n}: RowContentProps) {\n  const theme = useTheme()\n  const own = rowStylesOf(theme)\n  const headlineRole = useTypeRole(\n    variant === 'list' ? 'bodyLarge' : 'labelLarge',\n  )\n  const overlineRole = useTypeRole('labelSmall')\n  const supportingRole = useTypeRole('bodyMedium')\n  const color = rowContentColor(theme, { isDisabled, isSelected, variant })\n  const icons = useMemo<IconStyle>(() => ({ color, size: ICON_SIZE }), [color])\n  // The muted role on the surface; the row's own colour over a selected\n  // container, and on a disabled row, which fades the lines with the rest.\n  const tone = isDisabled || isSelected ? { color } : own.muted\n\n  return (\n    <IconStyleContext value={icons}>\n      {hasContent(leading) ? (\n        <View style={rowStyles.slot}>{leading}</View>\n      ) : null}\n      <View style={own.main}>\n        {hasContent(overline) ? (\n          <NativeText style={composeStyles<TextStyle>(overlineRole, tone)}>\n            {overline}\n          </NativeText>\n        ) : null}\n        <NativeText\n          style={composeStyles<TextStyle>(\n            headlineRole,\n            { color },\n            isEmphasized\n              ? { fontWeight: nativeWeight(theme.typography.weightBold) }\n              : undefined,\n          )}\n        >\n          {children}\n        </NativeText>\n        {hasContent(supporting) ? (\n          <NativeText style={composeStyles<TextStyle>(supportingRole, tone)}>\n            {supporting}\n          </NativeText>\n        ) : null}\n      </View>\n      {hasContent(trailing) ? (\n        <View style={rowStyles.slot}>{trailing}</View>\n      ) : null}\n    </IconStyleContext>\n  )\n}\n\n/**\n * The style of the view around a row's content: the padding and gap, the\n * variant's height, the taller item its lines make it, and the selected\n * container. Which of the lists page's three items a row is comes from its\n * content rather than a prop, so a row holding all three lines already says\n * it is the three-line item. A line that wraps grows the shorter item and\n * keeps its slots centred.\n */\nfunction rowStyleOf(\n  theme: ResolvedTheme,\n  {\n    isSelected = false,\n    overline,\n    supporting,\n    variant = 'list',\n  }: Pick<\n    RowContentProps,\n    'isSelected' | 'overline' | 'supporting' | 'variant'\n  >,\n): StyleProp<ViewStyle> {\n  const own = rowStylesOf(theme)\n  const lines =\n    (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0)\n\n  return composeStyles<ViewStyle>(\n    own.base,\n    own[variant],\n    lines === 1 ? own.twoLine : undefined,\n    lines === 2 ? own.threeLine : undefined,\n    isSelected ? own[SELECTED_CONTAINER[variant]] : undefined,\n  )\n}\n\nexport type { RowContentProps, RowVariant }\n\nexport { hasContent, RowContent, rowContentColor, rowStyleOf, rowStyles }\n"],"mappings":"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"}

package/dist/row/styles.js

@@ -2,7 +2,12 @@ import { themedStyles } from "../theme/styles.js";
 import { withOpacity } from "../theme/color.js";
 import { StyleSheet } from "react-native";
 //#region src/row/styles.ts
-const rowStylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.create({
+const SELECTED_CONTENT = {
+	drawer: "onSecondaryContainer",
+	list: "onPrimaryContainer",
+	menu: "onTertiaryContainer"
+};
+const rowStylesOf = themedStyles(({ colors, radii, sizing, spacing }) => StyleSheet.create({
 	base: {
 		alignItems: "center",
 		flexDirection: "row",
@@ -10,6 +15,11 @@ const rowStylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.cre
 		paddingHorizontal: spacing.lg,
 		paddingVertical: spacing.md
 	},
+	drawer: {
+		borderRadius: radii.pill,
+		marginHorizontal: spacing.md,
+		minHeight: sizing.rowSm
+	},
 	list: { minHeight: sizing.rowSm },
 	main: {
 		flexGrow: 1,
@@ -19,6 +29,7 @@ const rowStylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.cre
 	},
 	menu: { minHeight: sizing.rowXs },
 	muted: { color: colors.onSurfaceVariant },
+	selectedDrawer: { backgroundColor: colors.secondaryContainer },
 	selectedList: { backgroundColor: colors.primaryContainer },
 	selectedMenu: { backgroundColor: colors.tertiaryContainer },
 	threeLine: {
@@ -42,7 +53,7 @@ const rowStyles = StyleSheet.create({
 */
 function rowContentColor({ colors, stateLayerOpacity }, { isDisabled = false, isSelected = false, variant = "list" }) {
 	if (isDisabled) return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
-	if (isSelected) return variant === "menu" ? colors.onTertiaryContainer : colors.onPrimaryContainer;
+	if (isSelected) return colors[SELECTED_CONTENT[variant]];
 	return colors.onSurface;
 }
 //#endregion

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["StyleSheet","ResolvedTheme","withOpacity","themedStyles","RowVariant","rowStylesOf","colors","sizing","spacing","create","base","alignItems","flexDirection","gap","lg","paddingHorizontal","paddingVertical","md","list","minHeight","rowSm","main","flexGrow","flexShrink","xxs","minWidth","menu","rowXs","muted","color","onSurfaceVariant","selectedList","backgroundColor","primaryContainer","selectedMenu","tertiaryContainer","threeLine","rowLg","twoLine","rowMd","rowStyles","ring","outlineOffset","slot","justifyContent","rowContentColor","stateLayerOpacity","isDisabled","isSelected","variant","onSurface","disabledContent","onTertiaryContainer","onPrimaryContainer"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The row every list and menu item draws, as web's src/row draws it: the\n// lists page's 16dp inline and 12dp block padding, 16dp between the slots\n// and the text, and a height per spec page and line count. Each height is a\n// `minHeight`, since the lines inside are set in type roles whose sizes are\n// tokens, and a larger OS text size grows the row rather than clipping it.\n\n/** Which spec page's row this is: the lists page's or the menus page's. */\ntype RowVariant = 'list' | 'menu'\n\nconst rowStylesOf = themedStyles(({ colors, sizing, spacing }: ResolvedTheme) =>\n  StyleSheet.create({\n    base: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: spacing.lg,\n      paddingHorizontal: spacing.lg,\n      paddingVertical: spacing.md,\n    },\n    // The lists page's one-line item.\n    list: {\n      minHeight: sizing.rowSm,\n    },\n    // The headline and the lines beside it take what the slots leave and\n    // wrap past it, so a long one never runs under the trailing slot.\n    // `minWidth: 0` is for React Native Web, where a text in a row keeps\n    // CSS's automatic minimum, the width of its longest word.\n    main: {\n      flexGrow: 1,\n      flexShrink: 1,\n      gap: spacing.xxs,\n      minWidth: 0,\n    },\n    // The menus page's item.\n    menu: {\n      minHeight: sizing.rowXs,\n    },\n    muted: {\n      color: colors.onSurfaceVariant,\n    },\n    selectedList: {\n      backgroundColor: colors.primaryContainer,\n    },\n    selectedMenu: {\n      backgroundColor: colors.tertiaryContainer,\n    },\n    // The three-line item, the only one whose slots move: they are held\n    // level with the overline rather than centred on the three lines.\n    threeLine: {\n      alignItems: 'flex-start',\n      minHeight: sizing.rowLg,\n    },\n    twoLine: {\n      minHeight: sizing.rowMd,\n    },\n  }),\n)\n\nconst rowStyles = StyleSheet.create({\n  // The focus ring, drawn inside the row as web's is, so a container that\n  // clips its rows, such as a menu's surface, leaves the whole ring showing.\n  ring: {\n    outlineOffset: -2,\n  },\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n/**\n * The colour a row's headline, slots and feedback are drawn in: on surface,\n * the selected container's own on-colour, or on surface faded to the\n * disabled content opacity, which wins over the selected one.\n */\nfunction rowContentColor(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    isDisabled = false,\n    isSelected = false,\n    variant = 'list',\n  }: {\n    readonly isDisabled?: boolean\n    readonly isSelected?: boolean\n    readonly variant?: RowVariant\n  },\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  if (isSelected) {\n    return variant === 'menu'\n      ? colors.onTertiaryContainer\n      : colors.onPrimaryContainer\n  }\n  return colors.onSurface\n}\n\nexport type { RowVariant }\n\nexport { rowContentColor, rowStyles, rowStylesOf }\n"],"mappings":";;;;AAgBA,MAAMK,cAAcF,cAAc,EAAEG,QAAQC,QAAQC,cAClDR,WAAWS,OAAO;CAChBC,MAAM;EACJC,YAAY;EACZC,eAAe;EACfC,KAAKL,QAAQM;EACbC,mBAAmBP,QAAQM;EAC3BE,iBAAiBR,QAAQS;CAC3B;CAEAC,MAAM,EACJC,WAAWZ,OAAOa,MACpB;CAKAC,MAAM;EACJC,UAAU;EACVC,YAAY;EACZV,KAAKL,QAAQgB;EACbC,UAAU;CACZ;CAEAC,MAAM,EACJP,WAAWZ,OAAOoB,MACpB;CACAC,OAAO,EACLC,OAAOvB,OAAOwB,iBAChB;CACAC,cAAc,EACZC,iBAAiB1B,OAAO2B,iBAC1B;CACAC,cAAc,EACZF,iBAAiB1B,OAAO6B,kBAC1B;CAGAC,WAAW;EACTzB,YAAY;EACZQ,WAAWZ,OAAO8B;CACpB;CACAC,SAAS,EACPnB,WAAWZ,OAAOgC,MACpB;AACF,CAAC,CACH;AAEA,MAAMC,YAAYxC,WAAWS,OAAO;CAGlCgC,MAAM,EACJC,eAAe,GACjB;CACAC,MAAM;EACJhC,YAAY;EACZY,YAAY;EACZqB,gBAAgB;CAClB;AACF,CAAC;;;;;;AAOD,SAASC,gBACP,EAAEvC,QAAQwC,qBACV,EACEC,aAAa,OACbC,aAAa,OACbC,UAAU,UAMJ;CACR,IAAIF,YACF,OAAO7C,YAAYI,OAAO4C,WAAWJ,kBAAkBK,eAAe;CAExE,IAAIH,YACF,OAAOC,YAAY,SACf3C,OAAO8C,sBACP9C,OAAO+C;CAEb,OAAO/C,OAAO4C;AAChB"}
+{"version":3,"file":"styles.js","names":["StyleSheet","ResolvedTheme","withOpacity","themedStyles","RowVariant","SELECTED_CONTENT","drawer","list","menu","const","Record","rowStylesOf","colors","radii","sizing","spacing","create","base","alignItems","flexDirection","gap","lg","paddingHorizontal","paddingVertical","md","borderRadius","pill","marginHorizontal","minHeight","rowSm","main","flexGrow","flexShrink","xxs","minWidth","rowXs","muted","color","onSurfaceVariant","selectedDrawer","backgroundColor","secondaryContainer","selectedList","primaryContainer","selectedMenu","tertiaryContainer","threeLine","rowLg","twoLine","rowMd","rowStyles","ring","outlineOffset","slot","justifyContent","rowContentColor","stateLayerOpacity","isDisabled","isSelected","variant","onSurface","disabledContent"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The row every list and menu item draws, as web's src/row draws it: the\n// lists page's 16dp inline and 12dp block padding, 16dp between the slots\n// and the text, and a height per spec page and line count. Each height is a\n// `minHeight`, since the lines inside are set in type roles whose sizes are\n// tokens, and a larger OS text size grows the row rather than clipping it.\n// The navigation drawer page gives its row the lists page's 56dp too, with a\n// menu's label large label, and marks the current one with a secondary\n// container pill held 12dp off each edge, as web's drawer row does.\n\n/**\n * Which spec page's row this is: the lists page's, the menus page's or the\n * navigation drawer page's.\n */\ntype RowVariant = 'drawer' | 'list' | 'menu'\n\n// The on-colour of each variant's selected container.\nconst SELECTED_CONTENT = {\n  drawer: 'onSecondaryContainer',\n  list: 'onPrimaryContainer',\n  menu: 'onTertiaryContainer',\n} as const satisfies Record<RowVariant, keyof ResolvedTheme['colors']>\n\nconst rowStylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing }: ResolvedTheme) =>\n    StyleSheet.create({\n      base: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: spacing.lg,\n        paddingHorizontal: spacing.lg,\n        paddingVertical: spacing.md,\n      },\n      // The navigation drawer page's row: the lists page's floor, and a pill\n      // held off each edge, since what marks the current row there is a shape\n      // as much as a colour. The row hands the same corners to its state layer\n      // and ripple, which clip to them.\n      drawer: {\n        borderRadius: radii.pill,\n        marginHorizontal: spacing.md,\n        minHeight: sizing.rowSm,\n      },\n      // The lists page's one-line item.\n      list: {\n        minHeight: sizing.rowSm,\n      },\n      // The headline and the lines beside it take what the slots leave and\n      // wrap past it, so a long one never runs under the trailing slot.\n      // `minWidth: 0` is for React Native Web, where a text in a row keeps\n      // CSS's automatic minimum, the width of its longest word.\n      main: {\n        flexGrow: 1,\n        flexShrink: 1,\n        gap: spacing.xxs,\n        minWidth: 0,\n      },\n      // The menus page's item.\n      menu: {\n        minHeight: sizing.rowXs,\n      },\n      muted: {\n        color: colors.onSurfaceVariant,\n      },\n      // The drawer page's current row, on secondary container rather than the\n      // lists page's primary one, which keeps it apart from a selected row in\n      // a list beside it.\n      selectedDrawer: {\n        backgroundColor: colors.secondaryContainer,\n      },\n      selectedList: {\n        backgroundColor: colors.primaryContainer,\n      },\n      selectedMenu: {\n        backgroundColor: colors.tertiaryContainer,\n      },\n      // The three-line item, the only one whose slots move: they are held\n      // level with the overline rather than centred on the three lines.\n      threeLine: {\n        alignItems: 'flex-start',\n        minHeight: sizing.rowLg,\n      },\n      twoLine: {\n        minHeight: sizing.rowMd,\n      },\n    }),\n)\n\nconst rowStyles = StyleSheet.create({\n  // The focus ring, drawn inside the row as web's is, so a container that\n  // clips its rows, such as a menu's surface, leaves the whole ring showing.\n  ring: {\n    outlineOffset: -2,\n  },\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n/**\n * The colour a row's headline, slots and feedback are drawn in: on surface,\n * the selected container's own on-colour, or on surface faded to the\n * disabled content opacity, which wins over the selected one.\n */\nfunction rowContentColor(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    isDisabled = false,\n    isSelected = false,\n    variant = 'list',\n  }: {\n    readonly isDisabled?: boolean\n    readonly isSelected?: boolean\n    readonly variant?: RowVariant\n  },\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  if (isSelected) {\n    return colors[SELECTED_CONTENT[variant]]\n  }\n  return colors.onSurface\n}\n\nexport type { RowVariant }\n\nexport { rowContentColor, rowStyles, rowStylesOf }\n"],"mappings":";;;;AAuBA,MAAMK,mBAAmB;CACvBC,QAAQ;CACRC,MAAM;CACNC,MAAM;AACR;AAEA,MAAMG,cAAcR,cACjB,EAAES,QAAQC,OAAOC,QAAQC,cACxBf,WAAWgB,OAAO;CAChBC,MAAM;EACJC,YAAY;EACZC,eAAe;EACfC,KAAKL,QAAQM;EACbC,mBAAmBP,QAAQM;EAC3BE,iBAAiBR,QAAQS;CAC3B;CAKAlB,QAAQ;EACNmB,cAAcZ,MAAMa;EACpBC,kBAAkBZ,QAAQS;EAC1BI,WAAWd,OAAOe;CACpB;CAEAtB,MAAM,EACJqB,WAAWd,OAAOe,MACpB;CAKAC,MAAM;EACJC,UAAU;EACVC,YAAY;EACZZ,KAAKL,QAAQkB;EACbC,UAAU;CACZ;CAEA1B,MAAM,EACJoB,WAAWd,OAAOqB,MACpB;CACAC,OAAO,EACLC,OAAOzB,OAAO0B,iBAChB;CAIAC,gBAAgB,EACdC,iBAAiB5B,OAAO6B,mBAC1B;CACAC,cAAc,EACZF,iBAAiB5B,OAAO+B,iBAC1B;CACAC,cAAc,EACZJ,iBAAiB5B,OAAOiC,kBAC1B;CAGAC,WAAW;EACT5B,YAAY;EACZU,WAAWd,OAAOiC;CACpB;CACAC,SAAS,EACPpB,WAAWd,OAAOmC,MACpB;AACF,CAAC,CACL;AAEA,MAAMC,YAAYlD,WAAWgB,OAAO;CAGlCmC,MAAM,EACJC,eAAe,GACjB;CACAC,MAAM;EACJnC,YAAY;EACZc,YAAY;EACZsB,gBAAgB;CAClB;AACF,CAAC;;;;;;AAOD,SAASC,gBACP,EAAE3C,QAAQ4C,qBACV,EACEC,aAAa,OACbC,aAAa,OACbC,UAAU,UAMJ;CACR,IAAIF,YACF,OAAOvD,YAAYU,OAAOgD,WAAWJ,kBAAkBK,eAAe;CAExE,IAAIH,YACF,OAAO9C,OAAOP,iBAAiBsD;CAEjC,OAAO/C,OAAOgD;AAChB"}

package/dist/segments/field.js

@@ -0,0 +1,277 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useTypeRole } from "../typography/roles.js";
+import { messagesFor } from "../i18n/index.js";
+import { useFieldValidation } from "../form/index.js";
+import { FieldBox, FieldMessage, FieldSegments, describedBy } from "../field/index.js";
+import { segmentStylesOf } from "./styles.js";
+import { DateSegments } from "./index.js";
+import { c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/segments/field.tsx
+function arrivedOf({ leaving, onFocus, setFocused }) {
+	return () => {
+		if (leaving.current === void 0) {
+			setFocused(true);
+			onFocus?.();
+		} else clearTimeout(leaving.current);
+	};
+}
+function backToStart({ control }) {
+	return () => {
+		control.current?.focusLast();
+	};
+}
+function FieldLine(line) {
+	const $ = c(54);
+	const { box, control, description, end, endControl, endName, endSubmitted: t0, error, errors, floatingLabel: t1, focused, holding, isDisabled, isEmpty, isReadOnly, isRequired, label, leadingIcon, locale, name, ref, separator, state, style, submitted, testID, trailingIcon, variant: t2 } = line;
+	const endSubmitted = t0 === void 0 ? "" : t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const variant = t2 === void 0 ? "filled" : t2;
+	const id = useId();
+	const theme = useTheme();
+	const own = segmentStylesOf(theme);
+	const role = useTypeRole("bodyLarge");
+	let t3;
+	if ($[0] !== locale) {
+		t3 = messagesFor(locale);
+		$[0] = locale;
+		$[1] = t3;
+	} else t3 = $[1];
+	const words = t3.segments;
+	let t4;
+	if ($[2] !== end || $[3] !== endName || $[4] !== endSubmitted) {
+		t4 = end === void 0 ? void 0 : [endName, endSubmitted];
+		$[2] = end;
+		$[3] = endName;
+		$[4] = endSubmitted;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== errors) {
+		t5 = () => errors;
+		$[6] = errors;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== control || $[9] !== error || $[10] !== isDisabled || $[11] !== isEmpty || $[12] !== isReadOnly || $[13] !== isRequired || $[14] !== name || $[15] !== submitted || $[16] !== t4 || $[17] !== t5) {
+		t6 = {
+			alongside: t4,
+			control,
+			error,
+			isDisabled,
+			isEmpty,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted,
+			validate: t5,
+			value: null
+		};
+		$[8] = control;
+		$[9] = error;
+		$[10] = isDisabled;
+		$[11] = isEmpty;
+		$[12] = isReadOnly;
+		$[13] = isRequired;
+		$[14] = name;
+		$[15] = submitted;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	const validation = useFieldValidation(t6);
+	const shownError = validation.error;
+	let t7;
+	if ($[19] !== description || $[20] !== id || $[21] !== shownError) {
+		t7 = describedBy(id, {
+			description,
+			error: shownError
+		});
+		$[19] = description;
+		$[20] = id;
+		$[21] = shownError;
+		$[22] = t7;
+	} else t7 = $[22];
+	const described = t7;
+	let t8;
+	if ($[23] !== line) {
+		t8 = arrivedOf(line);
+		$[23] = line;
+		$[24] = t8;
+	} else t8 = $[24];
+	const arrived = t8;
+	let t9;
+	if ($[25] !== line || $[26] !== validation.onBlur) {
+		t9 = leftOf(line, validation.onBlur);
+		$[25] = line;
+		$[26] = validation.onBlur;
+		$[27] = t9;
+	} else t9 = $[27];
+	const left = t9;
+	const T0 = View;
+	const t10 = "group";
+	const T1 = FieldBox;
+	const t11 = focused ? void 0 : control;
+	const t12 = shownError !== void 0;
+	const t13 = true;
+	const t14 = end === void 0 ? /* @__PURE__ */ jsx(DateSegments, {
+		described,
+		holding,
+		isInvalid: shownError !== void 0,
+		label,
+		locale,
+		onBlur: left,
+		onEdit: validation.onEdit,
+		onFocus: arrived,
+		ref: control,
+		state
+	}) : /* @__PURE__ */ jsxs(FieldSegments, { children: [
+		/* @__PURE__ */ jsx(DateSegments, {
+			described,
+			holding,
+			isInvalid: shownError !== void 0,
+			label: `${words.startDate}, ${label}`,
+			locale,
+			onBlur: left,
+			onEdit: validation.onEdit,
+			onFocus: arrived,
+			onPastEnd: onToEnd(line),
+			ref: control,
+			state
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			"aria-hidden": true,
+			style: composeStyles(role, own.separator, isDisabled ? own.textDisabled : own.textMuted),
+			children: separator
+		}),
+		/* @__PURE__ */ jsx(DateSegments, {
+			described,
+			holding,
+			isInvalid: shownError !== void 0,
+			label: `${words.endDate}, ${label}`,
+			locale,
+			onBeforeStart: backToStart(line),
+			onBlur: left,
+			onEdit: validation.onEdit,
+			onFocus: arrived,
+			ref: endControl,
+			state: end
+		})
+	] });
+	let t15;
+	if ($[28] !== T1 || $[29] !== box || $[30] !== floatingLabel || $[31] !== focused || $[32] !== isDisabled || $[33] !== isRequired || $[34] !== label || $[35] !== leadingIcon || $[36] !== t11 || $[37] !== t12 || $[38] !== t14 || $[39] !== trailingIcon || $[40] !== variant) {
+		t15 = /* @__PURE__ */ jsx(T1, {
+			control: t11,
+			floatingLabel,
+			isDisabled,
+			isFocused: focused,
+			isInvalid: t12,
+			isPopulated: t13,
+			isRequired,
+			label,
+			leading: leadingIcon,
+			ref: box,
+			trailing: trailingIcon,
+			variant,
+			children: t14
+		});
+		$[28] = T1;
+		$[29] = box;
+		$[30] = floatingLabel;
+		$[31] = focused;
+		$[32] = isDisabled;
+		$[33] = isRequired;
+		$[34] = label;
+		$[35] = leadingIcon;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t14;
+		$[39] = trailingIcon;
+		$[40] = variant;
+		$[41] = t15;
+	} else t15 = $[41];
+	let t16;
+	if ($[42] !== description || $[43] !== id || $[44] !== shownError) {
+		t16 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error: shownError,
+			id
+		});
+		$[42] = description;
+		$[43] = id;
+		$[44] = shownError;
+		$[45] = t16;
+	} else t16 = $[45];
+	let t17;
+	if ($[46] !== T0 || $[47] !== label || $[48] !== ref || $[49] !== style || $[50] !== t15 || $[51] !== t16 || $[52] !== testID) {
+		t17 = /* @__PURE__ */ jsxs(T0, {
+			"aria-label": label,
+			ref,
+			role: t10,
+			style,
+			testID,
+			children: [t15, t16]
+		});
+		$[46] = T0;
+		$[47] = label;
+		$[48] = ref;
+		$[49] = style;
+		$[50] = t15;
+		$[51] = t16;
+		$[52] = testID;
+		$[53] = t17;
+	} else t17 = $[53];
+	return t17;
+}
+function leftOf({ end, leaving, onBlur, setFocused }, validationBlur) {
+	const left = () => {
+		leaving.current = void 0;
+		setFocused(false);
+		onBlur?.();
+	};
+	return () => {
+		validationBlur();
+		if (end === void 0) left();
+		else leaving.current = setTimeout(left, 0);
+	};
+}
+function onToEnd({ endControl }) {
+	return () => {
+		endControl.current?.focus();
+	};
+}
+/**
+* A field of segments from React Stately's date field state, in the text
+* field's box: the label floated from the start, since the segments always
+* show, and the error what `error` says, else what `errors` says, in React
+* Stately's order and its words. Given an `end` it draws a range.
+*/
+function SegmentedField(props) {
+	const $ = c(3);
+	const control = useRef(null);
+	const endControl = useRef(null);
+	const leaving = useRef(void 0);
+	const [focused, setFocused] = useState(false);
+	let t0;
+	if ($[0] !== focused || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(FieldLine, {
+			...props,
+			control,
+			endControl,
+			focused,
+			leaving,
+			setFocused
+		});
+		$[0] = focused;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+//#endregion
+export { SegmentedField };
+
+//# sourceMappingURL=field.js.map

package/dist/segments/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":["ComponentRef","ReactNode","Ref","RefObject","HostInstance","StyleProp","TextStyle","ViewStyle","DateFieldState","useId","useRef","useState","Text","View","SegmentsHandle","FieldVariant","DateSegments","describedBy","FieldBox","FieldMessage","FieldSegments","useFieldValidation","messagesFor","useTheme","composeStyles","useTypeRole","segmentStylesOf","FieldLineProps","SegmentedFieldProps","control","endControl","focused","leaving","ReturnType","setTimeout","setFocused","box","description","end","endName","endSubmitted","error","errors","floatingLabel","holding","isDisabled","isEmpty","isReadOnly","isRequired","label","leadingIcon","locale","name","onBlur","onFocus","ref","separator","state","style","submitted","testID","trailingIcon","variant","arrivedOf","current","undefined","clearTimeout","backToStart","focusLast","FieldLine","line","$","_c","t0","t1","t2","id","theme","own","role","t3","words","segments","t4","t5","t6","alongside","validate","value","validation","shownError","t7","described","t8","arrived","t9","leftOf","left","T0","t10","T1","t11","t12","t13","t14","onEdit","startDate","onToEnd","textDisabled","textMuted","endDate","t15","t16","t17","validationBlur","focus","SegmentedField","props","_c"],"sources":["../../src/segments/field.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref, RefObject } from 'react'\nimport type {\n  HostInstance,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { DateFieldState } from 'react-stately/useDateFieldState'\n\nimport { useId, useRef, useState } from 'react'\nimport { Text, View } from 'react-native'\n\nimport type { SegmentsHandle } from '.'\nimport type { FieldVariant } from '../field'\n\nimport { DateSegments } from '.'\nimport { describedBy, FieldBox, FieldMessage, FieldSegments } from '../field'\nimport { useFieldValidation } from '../form'\nimport { messagesFor } from '../i18n'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { segmentStylesOf } from './styles'\n\n// The field a date or a time is typed into: src/field's box, label and line\n// under it around the segments, with the value taking part in the Form\n// around it. DateField and TimeField differ in the state they build, and\n// both draw it through this, as web's two draw the same chrome around React\n// Aria's DateInput. DatePicker draws it with the calendar's button in the\n// trailing slot, and DateRangePicker with two dates on its line.\n//\n// **A range is two sets of segments with a separator between them**, the\n// start's and the end's, each its own React Stately field and each named for\n// its date before the label, \"Start Date\" and \"End Date\" in React Aria's\n// words. Focus runs on from the start's last segment to the end's first, as\n// a full segment or an arrow key moves it, and back from the end's first as\n// a backspace does, as React Aria's picker moves it across both. The\n// separator is decoration in the segments' muted role, hidden from a screen\n// reader, which already hears which date each segment is part of.\n//\n// Focus moving from one date to the other is not focus leaving the field: a\n// date's blur waits for the other's focus before the field draws itself\n// blurred and tells the call site, as React Aria's picker hears focus leave\n// the whole group. A field of one date has nothing to wait for, so its blur\n// is the field's at once. A press on the box while either date has focus\n// leaves focus where it is, rather than taking it back to the start's first\n// segment.\n\n// What the field keeps for its line: each date's segments, the timer a\n// date's blur waits on, and whether it draws itself focused.\ntype FieldLineProps = SegmentedFieldProps & {\n  readonly control: RefObject<null | SegmentsHandle>\n  readonly endControl: RefObject<null | SegmentsHandle>\n  readonly focused: boolean\n  readonly leaving: RefObject<ReturnType<typeof setTimeout> | undefined>\n  readonly setFocused: (focused: boolean) => void\n}\n\ntype SegmentedFieldProps = {\n  /** The box, which a picker measures to place its calendar under. */\n  readonly box?: Ref<HostInstance>\n  readonly description?: string\n  /** A range's end, whose segments follow the separator. */\n  readonly end?: DateFieldState\n  /** The name a range's end is submitted under. */\n  readonly endName?: string\n  /** What the Form submits a range's end as, `''` while empty. */\n  readonly endSubmitted?: string\n  readonly error?: string\n  /** What React Stately's validation of the value says, in its words. */\n  readonly errors: readonly string[]\n  readonly floatingLabel?: boolean\n  /**\n   * What the segments are read as holding, after their own names: the date\n   * written out by default, a range picker's whole range where given.\n   */\n  readonly holding?: string\n  readonly isDisabled: boolean\n  /** Whether the value is what a required field must not be left as. */\n  readonly isEmpty: boolean\n  readonly isReadOnly: boolean\n  readonly isRequired: boolean\n  readonly label: string\n  readonly leadingIcon?: ReactNode\n  /** The locale the segments are written in, already resolved. */\n  readonly locale: string\n  readonly name?: string\n  readonly onBlur?: () => void\n  readonly onFocus?: () => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** What is drawn between a range's two dates. */\n  readonly separator?: string\n  /** The field's state, or a range's start. */\n  readonly state: DateFieldState\n  readonly style?: StyleProp<ViewStyle>\n  /** What the Form around the field submits the value as, `''` while empty. */\n  readonly submitted: string\n  readonly testID?: string\n  readonly trailingIcon?: ReactNode\n  readonly variant?: FieldVariant\n}\n\n// A date's segments arriving in focus: the field's focus where focus comes\n// from outside it, and nothing new where it comes from the other date, whose\n// leaving is then called off. The timer's id is kept until the next blur\n// replaces it, since focus arrives nowhere else before one.\nfunction arrivedOf({ leaving, onFocus, setFocused }: FieldLineProps) {\n  return () => {\n    if (leaving.current === undefined) {\n      setFocused(true)\n      onFocus?.()\n    } else {\n      clearTimeout(leaving.current)\n    }\n  }\n}\n\n// Moves focus back from the end's first segment to the start's last.\nfunction backToStart({ control }: FieldLineProps) {\n  return () => {\n    control.current?.focusLast()\n  }\n}\n\n// The field's box, label and line under it around its segments.\nfunction FieldLine(line: FieldLineProps) {\n  const {\n    box,\n    control,\n    description,\n    end,\n    endControl,\n    endName,\n    endSubmitted = '',\n    error,\n    errors,\n    floatingLabel = true,\n    focused,\n    holding,\n    isDisabled,\n    isEmpty,\n    isReadOnly,\n    isRequired,\n    label,\n    leadingIcon,\n    locale,\n    name,\n    ref,\n    separator,\n    state,\n    style,\n    submitted,\n    testID,\n    trailingIcon,\n    variant = 'filled',\n  } = line\n  const id = useId()\n  const theme = useTheme()\n  const own = segmentStylesOf(theme)\n  const role = useTypeRole('bodyLarge')\n  const words = messagesFor(locale).segments\n  const validation = useFieldValidation({\n    alongside: end === undefined ? undefined : [endName, endSubmitted],\n    control,\n    error,\n    isDisabled,\n    isEmpty,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted,\n    validate: () => errors,\n    value: null,\n  })\n  const shownError = validation.error\n  const described = describedBy(id, { description, error: shownError })\n  const arrived = arrivedOf(line)\n  const left = leftOf(line, validation.onBlur)\n\n  return (\n    <View\n      aria-label={label}\n      ref={ref}\n      role=\"group\"\n      style={style}\n      testID={testID}\n    >\n      <FieldBox\n        control={focused ? undefined : control}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        isFocused={focused}\n        isInvalid={shownError !== undefined}\n        isPopulated\n        isRequired={isRequired}\n        label={label}\n        leading={leadingIcon}\n        ref={box}\n        trailing={trailingIcon}\n        variant={variant}\n      >\n        {end === undefined ? (\n          <DateSegments\n            described={described}\n            holding={holding}\n            isInvalid={shownError !== undefined}\n            label={label}\n            locale={locale}\n            onBlur={left}\n            onEdit={validation.onEdit}\n            onFocus={arrived}\n            ref={control}\n            state={state}\n          />\n        ) : (\n          <FieldSegments>\n            <DateSegments\n              described={described}\n              holding={holding}\n              isInvalid={shownError !== undefined}\n              label={`${words.startDate}, ${label}`}\n              locale={locale}\n              onBlur={left}\n              onEdit={validation.onEdit}\n              onFocus={arrived}\n              onPastEnd={onToEnd(line)}\n              ref={control}\n              state={state}\n            />\n            <Text\n              aria-hidden\n              style={composeStyles<TextStyle>(\n                role,\n                own.separator,\n                isDisabled ? own.textDisabled : own.textMuted,\n              )}\n            >\n              {separator}\n            </Text>\n            <DateSegments\n              described={described}\n              holding={holding}\n              isInvalid={shownError !== undefined}\n              label={`${words.endDate}, ${label}`}\n              locale={locale}\n              onBeforeStart={backToStart(line)}\n              onBlur={left}\n              onEdit={validation.onEdit}\n              onFocus={arrived}\n              ref={endControl}\n              state={end}\n            />\n          </FieldSegments>\n        )}\n      </FieldBox>\n      <FieldMessage description={description} error={shownError} id={id} />\n    </View>\n  )\n}\n\n// A date's segments losing focus: the validation's blur at once, as each of\n// React Aria's date fields commits its own, and the field's blur once the\n// other date has not taken focus, or at once where there is no other.\nfunction leftOf(\n  { end, leaving, onBlur, setFocused }: FieldLineProps,\n  validationBlur: () => void,\n) {\n  const left = () => {\n    leaving.current = undefined\n    setFocused(false)\n    onBlur?.()\n  }\n\n  return () => {\n    validationBlur()\n\n    if (end === undefined) {\n      left()\n    } else {\n      leaving.current = setTimeout(left, 0)\n    }\n  }\n}\n\n// Moves focus on from the start's last segment to the end's first.\nfunction onToEnd({ endControl }: FieldLineProps) {\n  return () => {\n    endControl.current?.focus()\n  }\n}\n\n/**\n * A field of segments from React Stately's date field state, in the text\n * field's box: the label floated from the start, since the segments always\n * show, and the error what `error` says, else what `errors` says, in React\n * Stately's order and its words. Given an `end` it draws a range.\n */\nfunction SegmentedField(props: SegmentedFieldProps) {\n  const control = useRef<SegmentsHandle>(null)\n  const endControl = useRef<SegmentsHandle>(null)\n  const leaving = useRef<ReturnType<typeof setTimeout>>(undefined)\n  const [focused, setFocused] = useState(false)\n\n  return (\n    <FieldLine\n      {...props}\n      control={control}\n      endControl={endControl}\n      focused={focused}\n      leaving={leaving}\n      setFocused={setFocused}\n    />\n  )\n}\n\nexport { SegmentedField }\nexport type { SegmentedFieldProps }\n"],"mappings":"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"}