@kanso-labs/react-native-kanso-ui 0.6.0 → 0.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewProps","ViewStyle","StyleSheet","View","IndicatorTone","IndicatorLabels","IndicatorLine","readingOf","useEased","useIndicatorColors","useMeasuredWidth","DETERMINATE_EASING","stylesOf","indicatorStylesOf","useTheme","composeStyles","MeterProps","Omit","formatOptions","Intl","NumberFormatOptions","label","locale","maxValue","minValue","ref","showValue","style","tone","MeterTone","value","valueLabel","styles","create","line","alignSelf","Extract","Meter","t0","$","_c","ariaLabel","props","t1","t2","t3","t4","t5","undefined","theme","colors","t6","reading","t7","motion","durationMedium1","duration","easing","shown","percentage","onLayout","width","t8","t9","t10","text","t11","root","t12","t13","t14","t15","t16","_c","indicatorStylesOf"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport type { IndicatorTone } from '../../indicator'\n\nimport {\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n} from '../../indicator'\nimport {\n  DETERMINATE_EASING,\n  stylesOf as indicatorStylesOf,\n} from '../../indicator/styles'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task, as on web: the same three parts at the same 4dp,\n// the same label row above them, and the same motion when the number changes.\n// All of that is `src/indicator`, shared with ProgressIndicator, so what is\n// here is the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. The root says `meter` rather than `progressbar`, as\n// React Aria's `Meter` does on web, and a screen reader says the two\n// differently: one is how full something is, the other how far along\n// something is. That is also why a meter has no indeterminate state: a\n// measurement whose value is unknown is not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for a\n// task, since progress does not become good or bad on its way to done. A\n// measurement does, so `negative` and `positive` recolour the active\n// indicator and the stop indicator and leave the track alone. A column of\n// meters then reads as one scale with bars of different colours. Which tone a\n// value deserves is the call site's to decide: nothing here reads the number\n// and picks one.\n//\n// The value is shown by default, where a progress indicator hides it. A meter\n// is the number, and `formatOptions` is what makes it read as a percentage,\n// bytes or a plain count, in `locale`.\n\ntype MeterProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * How the value reads.\n   * @default { style: 'percent' }\n   */\n  readonly formatOptions?: Intl.NumberFormatOptions\n  /**\n   * What is being measured, shown above the line. A screen reader reads it as\n   * the meter's name; a meter whose surroundings name it takes `aria-label`\n   * instead and leaves this out.\n   */\n  readonly label?: string\n  /**\n   * The BCP 47 locale the value is written in. Defaults to the device's.\n   */\n  readonly locale?: string\n  /**\n   * The top of the scale.\n   * @default 100\n   */\n  readonly maxValue?: number\n  /**\n   * The bottom of the scale.\n   * @default 0\n   */\n  readonly minValue?: number\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  readonly showValue?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track in\n   * its secondary container so a column of meters still shares one track.\n   * @default 'primary'\n   */\n  readonly tone?: MeterTone\n  /**\n   * The measurement, between `minValue` and `maxValue`.\n   * @default 0\n   */\n  readonly value?: number\n  /** The value as words, in place of the number `formatOptions` writes. */\n  readonly valueLabel?: string\n}\n\nconst styles = StyleSheet.create({\n  // The row the line is drawn across, measured for the width it is drawn to.\n  line: {\n    alignSelf: 'stretch',\n  },\n})\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>\n\n/**\n * How full something is, on a scale it names: disk used, storage left, a\n * rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads, in `locale`. For how far along\n * a task is, reach for ProgressIndicator instead: a meter has no indeterminate\n * state, because a measurement always has a value.\n *\n * ```tsx\n * <Meter label=\"Label\" tone=\"negative\" value={94} />\n * ```\n *\n * A screen reader hears it as a meter named by its label, with its value as\n * `formatOptions` writes it. `style`, `ref` and `testID` land on the meter as\n * a whole, which is the view a layout positions.\n */\nfunction Meter({\n  'aria-label': ariaLabel,\n  formatOptions,\n  label,\n  locale,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  style,\n  tone = 'primary',\n  value = 0,\n  valueLabel,\n  ...props\n}: MeterProps) {\n  const theme = useTheme()\n  const colors = useIndicatorColors(tone)\n  const reading = readingOf({\n    formatOptions,\n    locale,\n    maxValue,\n    minValue,\n    value,\n    valueLabel,\n  })\n  const shown = useEased(reading.percentage, {\n    duration: theme.motion.durationMedium1,\n    easing: DETERMINATE_EASING,\n  })\n  const { onLayout, width } = useMeasuredWidth()\n\n  return (\n    <View\n      accessible\n      aria-label={label ?? ariaLabel}\n      aria-valuemax={maxValue}\n      aria-valuemin={minValue}\n      aria-valuenow={reading.value}\n      aria-valuetext={reading.text}\n      role=\"meter\"\n      {...props}\n      style={composeStyles<ViewStyle>(indicatorStylesOf(theme).root, style)}\n    >\n      <IndicatorLabels\n        label={label}\n        value={showValue ? reading.text : undefined}\n      />\n      <View onLayout={onLayout} style={styles.line}>\n        <IndicatorLine colors={colors} percentage={shown} width={width} />\n      </View>\n    </View>\n  )\n}\n\nexport { Meter }\nexport type { MeterProps, MeterTone }\n"],"mappings":";;;;;;;;AAgGA,MAAMmC,SAAS9B,WAAW+B,OAAO,EAE/BC,MAAM,EACJC,WAAW,UACb,EACF,CAAC;;;;;;;;;;;;;;;;AAsBD,SAAAE,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAvB;CAAA,IAAAG;CAAA,IAAAC;CAAA,IAAAoB;CAAA,IAAAf;CAAA,IAAAgB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAhB;CAAA,IAAAQ,EAAA,OAAAD,IAAA;EAAe,CAAA,CAAA,cAAAG,WAAAvB,eAAAG,OAAAC,QAAAC,UAAAoB,IAAAnB,UAAAoB,IAAAlB,WAAAmB,IAAAlB,OAAAC,MAAAkB,IAAAhB,OAAAiB,IAAAhB,YAAA,GAAAW,SAAAJ;EAaFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAArB;EAAAqB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAG;EAAAH,EAAA,KAAAZ;EAAAY,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAR;CAAA,OAAA;EAAAU,YAAAF,EAAA;EAAArB,gBAAAqB,EAAA;EAAAlB,QAAAkB,EAAA;EAAAjB,SAAAiB,EAAA;EAAAG,QAAAH,EAAA;EAAAZ,QAAAY,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAR,aAAAQ,EAAA;CAAA;CARX,MAAAhB,WAAAoB,OAAAK,KAAAA,IAAA,MAAAL;CACA,MAAAnB,WAAAoB,OAAAI,KAAAA,IAAA,IAAAJ;CACA,MAAAlB,YAAAmB,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAjB,OAAAkB,OAAAE,KAAAA,IAAA,YAAAF;CACA,MAAAhB,QAAAiB,OAAAC,KAAAA,IAAA,IAAAD;CAIA,MAAAE,QAAcnC,SAAS;CACvB,MAAAoC,SAAezC,mBAAmBmB,IAAI;CAAC,IAAAuB;CAAA,IAAAZ,EAAA,QAAArB,iBAAAqB,EAAA,QAAAjB,UAAAiB,EAAA,QAAAhB,YAAAgB,EAAA,QAAAf,YAAAe,EAAA,QAAAT,SAAAS,EAAA,QAAAR,YAAA;EACvBoB,KAAA5C,UAAU;GAAAW;GAAAI;GAAAC;GAAAC;GAAAM;GAAAC;EAO1B,CAAC;EAACQ,EAAA,MAAArB;EAAAqB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAhB;EAAAgB,EAAA,MAAAf;EAAAe,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAPF,MAAAa,UAAgBD;CAOd,IAAAE;CAAA,IAAAd,EAAA,QAAAU,MAAAK,OAAAC,iBAAA;EACyCF,KAAA;GAAAG,UAC/BP,MAAKK,OAAOC;GAAgBE,QAC9B9C;EACV;EAAC4B,EAAA,MAAAU,MAAAK,OAAAC;EAAAhB,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAHD,MAAAmB,QAAclD,SAAS4C,QAAOO,YAAaN,EAG1C;CACD,MAAA,EAAAO,UAAAC,UAA4BnD,iBAAiB;CAK7B,MAAAoD,KAAAzC,SAAAoB;CAGG,MAAAsB,KAAAX,QAAOtB;CACN,MAAAkC,MAAAZ,QAAOa;CAAK,IAAAC;CAAA,IAAA3B,EAAA,QAAAZ,SAAAY,EAAA,QAAAU,OAAA;EAGrBiB,MAAAnD,cAAyBF,SAAkBoC,KAAK,CAAC,CAAAkB,MAAOxC,KAAK;EAACY,EAAA,MAAAZ;EAAAY,EAAA,MAAAU;EAAAV,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAI5D,MAAA6B,MAAA1C,YAAY0B,QAAOa,OAAnBjB,KAAAA;CAAoC,IAAAqB;CAAA,IAAA9B,EAAA,QAAAlB,SAAAkB,EAAA,QAAA6B,KAAA;EAF7CC,MAAA,oBAAC,iBAAD;GACShD;GACA,OAAA+C;EAAoC,CAAA;EAC3C7B,EAAA,MAAAlB;EAAAkB,EAAA,MAAA6B;EAAA7B,EAAA,MAAA8B;CAAA,OAAAA,MAAA9B,EAAA;CAAA,IAAA+B;CAAA,IAAA/B,EAAA,QAAAW,UAAAX,EAAA,QAAAmB,SAAAnB,EAAA,QAAAsB,OAAA;EAEAS,MAAA,oBAAC,eAAD;GAAuBpB;GAAoBQ,YAAAA;GAAcG;EAAK,CAAA;EAAItB,EAAA,MAAAW;EAAAX,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsB;EAAAtB,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAqB,YAAArB,EAAA,QAAA+B,KAAA;EADpEC,MAAA,oBAAC,MAAD;GAAgBX;GAAiB,OAAA5B,OAAME;GACrCoC,UAAAA;EADG,CAAA;EAEE/B,EAAA,MAAAqB;EAAArB,EAAA,MAAA+B;EAAA/B,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAhB,YAAAgB,EAAA,QAAAf,YAAAe,EAAA,QAAAG,SAAAH,EAAA,QAAAa,QAAAa,QAAA1B,EAAA,QAAAa,QAAAtB,SAAAS,EAAA,QAAA2B,OAAA3B,EAAA,QAAA8B,OAAA9B,EAAA,QAAAgC,OAAAhC,EAAA,QAAAuB,IAAA;EAjBTU,MAAA,qBAAC,MAAD;GACE,YAAA;GACY,cAAAV;GACGvC,iBAAAA;GACAC,iBAAAA;GACA,iBAAAuC;GACC,kBAAAC;GACX,MAAA;GAAO,GACRtB;GACG,OAAAwB;GATT,UAAA,CAWEG,KAIAE,GAfG;;EAkBEhC,EAAA,MAAAhB;EAAAgB,EAAA,MAAAf;EAAAe,EAAA,MAAAG;EAAAH,EAAA,MAAAa,QAAAa;EAAA1B,EAAA,MAAAa,QAAAtB;EAAAS,EAAA,MAAA2B;EAAA3B,EAAA,MAAA8B;EAAA9B,EAAA,MAAAgC;EAAAhC,EAAA,MAAAuB;EAAAvB,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,OAlBPiC;AAkBO"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewProps","ViewStyle","StyleSheet","View","IndicatorTone","useLocaleOf","IndicatorLabels","IndicatorLine","readingOf","useEased","useIndicatorColors","useMeasuredWidth","DETERMINATE_EASING","stylesOf","indicatorStylesOf","useTheme","composeStyles","MeterProps","Omit","formatOptions","Intl","NumberFormatOptions","label","locale","maxValue","minValue","ref","showValue","style","tone","MeterTone","value","valueLabel","styles","create","line","alignSelf","Extract","Meter","t0","$","_c","ariaLabel","props","t1","t2","t3","t4","t5","undefined","theme","colors","writtenIn","t6","reading","t7","motion","durationMedium1","duration","easing","shown","percentage","onLayout","width","t8","t9","t10","text","t11","root","t12","t13","t14","t15","t16","_c","indicatorStylesOf"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport type { IndicatorTone } from '../../indicator'\n\nimport { useLocaleOf } from '../../i18n/provider'\nimport {\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n} from '../../indicator'\nimport {\n  DETERMINATE_EASING,\n  stylesOf as indicatorStylesOf,\n} from '../../indicator/styles'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task, as on web: the same three parts at the same 4dp,\n// the same label row above them, and the same motion when the number changes.\n// All of that is `src/indicator`, shared with ProgressIndicator, so what is\n// here is the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. The root says `meter` rather than `progressbar`, as\n// React Aria's `Meter` does on web, and a screen reader says the two\n// differently: one is how full something is, the other how far along\n// something is. That is also why a meter has no indeterminate state: a\n// measurement whose value is unknown is not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for a\n// task, since progress does not become good or bad on its way to done. A\n// measurement does, so `negative` and `positive` recolour the active\n// indicator and the stop indicator and leave the track alone. A column of\n// meters then reads as one scale with bars of different colours. Which tone a\n// value deserves is the call site's to decide: nothing here reads the number\n// and picks one.\n//\n// The value is shown by default, where a progress indicator hides it. A meter\n// is the number, and `formatOptions` is what makes it read as a percentage,\n// bytes or a plain count, in `locale`.\n\ntype MeterProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * How the value reads.\n   * @default { style: 'percent' }\n   */\n  readonly formatOptions?: Intl.NumberFormatOptions\n  /**\n   * What is being measured, shown above the line. A screen reader reads it as\n   * the meter's name; a meter whose surroundings name it takes `aria-label`\n   * instead and leaves this out.\n   */\n  readonly label?: string\n  /**\n   * The BCP 47 locale the value is written in. Defaults to the\n   * `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  /**\n   * The top of the scale.\n   * @default 100\n   */\n  readonly maxValue?: number\n  /**\n   * The bottom of the scale.\n   * @default 0\n   */\n  readonly minValue?: number\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  readonly showValue?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track in\n   * its secondary container so a column of meters still shares one track.\n   * @default 'primary'\n   */\n  readonly tone?: MeterTone\n  /**\n   * The measurement, between `minValue` and `maxValue`.\n   * @default 0\n   */\n  readonly value?: number\n  /** The value as words, in place of the number `formatOptions` writes. */\n  readonly valueLabel?: string\n}\n\nconst styles = StyleSheet.create({\n  // The row the line is drawn across, measured for the width it is drawn to.\n  line: {\n    alignSelf: 'stretch',\n  },\n})\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>\n\n/**\n * How full something is, on a scale it names: disk used, storage left, a\n * rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads, in `locale`. For how far along\n * a task is, reach for ProgressIndicator instead: a meter has no indeterminate\n * state, because a measurement always has a value.\n *\n * ```tsx\n * <Meter label=\"Label\" tone=\"negative\" value={94} />\n * ```\n *\n * A screen reader hears it as a meter named by its label, with its value as\n * `formatOptions` writes it. `style`, `ref` and `testID` land on the meter as\n * a whole, which is the view a layout positions.\n */\nfunction Meter({\n  'aria-label': ariaLabel,\n  formatOptions,\n  label,\n  locale,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  style,\n  tone = 'primary',\n  value = 0,\n  valueLabel,\n  ...props\n}: MeterProps) {\n  const theme = useTheme()\n  const colors = useIndicatorColors(tone)\n  const writtenIn = useLocaleOf(locale)\n  const reading = readingOf({\n    formatOptions,\n    locale: writtenIn,\n    maxValue,\n    minValue,\n    value,\n    valueLabel,\n  })\n  const shown = useEased(reading.percentage, {\n    duration: theme.motion.durationMedium1,\n    easing: DETERMINATE_EASING,\n  })\n  const { onLayout, width } = useMeasuredWidth()\n\n  return (\n    <View\n      accessible\n      aria-label={label ?? ariaLabel}\n      aria-valuemax={maxValue}\n      aria-valuemin={minValue}\n      aria-valuenow={reading.value}\n      aria-valuetext={reading.text}\n      role=\"meter\"\n      {...props}\n      style={composeStyles<ViewStyle>(indicatorStylesOf(theme).root, style)}\n    >\n      <IndicatorLabels\n        label={label}\n        value={showValue ? reading.text : undefined}\n      />\n      <View onLayout={onLayout} style={styles.line}>\n        <IndicatorLine colors={colors} percentage={shown} width={width} />\n      </View>\n    </View>\n  )\n}\n\nexport { Meter }\nexport type { MeterProps, MeterTone }\n"],"mappings":";;;;;;;;;AAkGA,MAAMoC,SAAS/B,WAAWgC,OAAO,EAE/BC,MAAM,EACJC,WAAW,UACb,EACF,CAAC;;;;;;;;;;;;;;;;AAsBD,SAAAE,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAvB;CAAA,IAAAG;CAAA,IAAAC;CAAA,IAAAoB;CAAA,IAAAf;CAAA,IAAAgB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAhB;CAAA,IAAAQ,EAAA,OAAAD,IAAA;EAAe,CAAA,CAAA,cAAAG,WAAAvB,eAAAG,OAAAC,QAAAC,UAAAoB,IAAAnB,UAAAoB,IAAAlB,WAAAmB,IAAAlB,OAAAC,MAAAkB,IAAAhB,OAAAiB,IAAAhB,YAAA,GAAAW,SAAAJ;EAaFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAArB;EAAAqB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAG;EAAAH,EAAA,KAAAZ;EAAAY,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAR;CAAA,OAAA;EAAAU,YAAAF,EAAA;EAAArB,gBAAAqB,EAAA;EAAAlB,QAAAkB,EAAA;EAAAjB,SAAAiB,EAAA;EAAAG,QAAAH,EAAA;EAAAZ,QAAAY,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAR,aAAAQ,EAAA;CAAA;CARX,MAAAhB,WAAAoB,OAAAK,KAAAA,IAAA,MAAAL;CACA,MAAAnB,WAAAoB,OAAAI,KAAAA,IAAA,IAAAJ;CACA,MAAAlB,YAAAmB,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAjB,OAAAkB,OAAAE,KAAAA,IAAA,YAAAF;CACA,MAAAhB,QAAAiB,OAAAC,KAAAA,IAAA,IAAAD;CAIA,MAAAE,QAAcnC,SAAS;CACvB,MAAAoC,SAAezC,mBAAmBmB,IAAI;CACtC,MAAAuB,YAAkB/C,YAAYkB,MAAM;CAAC,IAAA8B;CAAA,IAAAb,EAAA,QAAArB,iBAAAqB,EAAA,QAAAhB,YAAAgB,EAAA,QAAAf,YAAAe,EAAA,QAAAT,SAAAS,EAAA,QAAAR,cAAAQ,EAAA,QAAAY,WAAA;EACrBC,KAAA7C,UAAU;GAAAW;GAAAI,QAEhB6B;GAAS5B;GAAAC;GAAAM;GAAAC;EAKnB,CAAC;EAACQ,EAAA,MAAArB;EAAAqB,EAAA,MAAAhB;EAAAgB,EAAA,MAAAf;EAAAe,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAPF,MAAAc,UAAgBD;CAOd,IAAAE;CAAA,IAAAf,EAAA,QAAAU,MAAAM,OAAAC,iBAAA;EACyCF,KAAA;GAAAG,UAC/BR,MAAKM,OAAOC;GAAgBE,QAC9B/C;EACV;EAAC4B,EAAA,MAAAU,MAAAM,OAAAC;EAAAjB,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAHD,MAAAoB,QAAcnD,SAAS6C,QAAOO,YAAaN,EAG1C;CACD,MAAA,EAAAO,UAAAC,UAA4BpD,iBAAiB;CAK7B,MAAAqD,KAAA1C,SAAAoB;CAGG,MAAAuB,KAAAX,QAAOvB;CACN,MAAAmC,MAAAZ,QAAOa;CAAK,IAAAC;CAAA,IAAA5B,EAAA,QAAAZ,SAAAY,EAAA,QAAAU,OAAA;EAGrBkB,MAAApD,cAAyBF,SAAkBoC,KAAK,CAAC,CAAAmB,MAAOzC,KAAK;EAACY,EAAA,MAAAZ;EAAAY,EAAA,MAAAU;EAAAV,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAI5D,MAAA8B,MAAA3C,YAAY2B,QAAOa,OAAnBlB,KAAAA;CAAoC,IAAAsB;CAAA,IAAA/B,EAAA,QAAAlB,SAAAkB,EAAA,QAAA8B,KAAA;EAF7CC,MAAA,oBAAC,iBAAD;GACSjD;GACA,OAAAgD;EAAoC,CAAA;EAC3C9B,EAAA,MAAAlB;EAAAkB,EAAA,MAAA8B;EAAA9B,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAW,UAAAX,EAAA,QAAAoB,SAAApB,EAAA,QAAAuB,OAAA;EAEAS,MAAA,oBAAC,eAAD;GAAuBrB;GAAoBS,YAAAA;GAAcG;EAAK,CAAA;EAAIvB,EAAA,MAAAW;EAAAX,EAAA,MAAAoB;EAAApB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAsB,YAAAtB,EAAA,QAAAgC,KAAA;EADpEC,MAAA,oBAAC,MAAD;GAAgBX;GAAiB,OAAA7B,OAAME;GACrCqC,UAAAA;EADG,CAAA;EAEEhC,EAAA,MAAAsB;EAAAtB,EAAA,MAAAgC;EAAAhC,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAAhB,YAAAgB,EAAA,QAAAf,YAAAe,EAAA,QAAAG,SAAAH,EAAA,QAAAc,QAAAa,QAAA3B,EAAA,QAAAc,QAAAvB,SAAAS,EAAA,QAAA4B,OAAA5B,EAAA,QAAA+B,OAAA/B,EAAA,QAAAiC,OAAAjC,EAAA,QAAAwB,IAAA;EAjBTU,MAAA,qBAAC,MAAD;GACE,YAAA;GACY,cAAAV;GACGxC,iBAAAA;GACAC,iBAAAA;GACA,iBAAAwC;GACC,kBAAAC;GACX,MAAA;GAAO,GACRvB;GACG,OAAAyB;GATT,UAAA,CAWEG,KAIAE,GAfG;;EAkBEjC,EAAA,MAAAhB;EAAAgB,EAAA,MAAAf;EAAAe,EAAA,MAAAG;EAAAH,EAAA,MAAAc,QAAAa;EAAA3B,EAAA,MAAAc,QAAAvB;EAAAS,EAAA,MAAA4B;EAAA5B,EAAA,MAAA+B;EAAA/B,EAAA,MAAAiC;EAAAjC,EAAA,MAAAwB;EAAAxB,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,OAlBPkC;AAkBO"}

package/dist/components/navigation-bar/index.d.ts

@@ -1,14 +1,8 @@
-import { NavigationDestinationProps } from "../../navigation/index.js";
+import { NavigationItemProps } from "../../navigation/index.js";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
 import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/navigation-bar/index.d.ts
-type NavigationBarItemProps = NavigationDestinationProps & {
-  /**
-   * Where the destination goes, through the app's router, and what the
-   * bar's `selectedRoute` is matched against.
-   */
-  readonly href: string;
-};
+type NavigationBarItemProps = NavigationItemProps;
 type NavigationBarProps = Omit<ViewProps, 'children' | 'style'> & {
   /** The destinations, each a `NavigationBar.Item`. */
   readonly children?: ReactNode;
@@ -143,7 +137,7 @@ declare namespace NavigationBar {
  *
  * `style`, `ref` and `testID` land on the destination's `Pressable`.
  */
-declare function NavigationBarItem({ href, onPress, ...props }: NavigationBarItemProps): import("react").JSX.Element;
+declare function NavigationBarItem(props: NavigationBarItemProps): import("react").JSX.Element;
 /**
  * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of
  * React Navigation's bottom tabs and of Expo Router's `Tabs` alike.

package/dist/components/navigation-bar/index.js

@@ -1,8 +1,7 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useLinkPress } from "../../router/index.js";
 import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
-import { NavigationContext, NavigationDestination, iconColorOf, labelColorOf } from "../../navigation/index.js";
+import { NavigationContext, NavigationDestination, NavigationItem, iconColorOf, labelColorOf } from "../../navigation/index.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -261,38 +260,15 @@ function NavigationBar(t0) {
 *
 * `style`, `ref` and `testID` land on the destination's `Pressable`.
 */
-function NavigationBarItem(t0) {
-	const $ = c(8);
-	let href;
-	let onPress;
-	let props;
-	if ($[0] !== t0) {
-		({href, onPress, ...props} = t0);
-		$[0] = t0;
-		$[1] = href;
-		$[2] = onPress;
-		$[3] = props;
-	} else {
-		href = $[1];
-		onPress = $[2];
-		props = $[3];
-	}
-	const { selectedRoute } = use(NavigationContext);
-	const press = useLinkPress(href, onPress);
-	const t1 = selectedRoute !== void 0 && href === selectedRoute;
-	let t2;
-	if ($[4] !== press || $[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(NavigationDestination, {
-			...props,
-			onPress: press,
-			selected: t1
-		});
-		$[4] = press;
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else t2 = $[7];
-	return t2;
+function NavigationBarItem(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(NavigationItem, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 }
 /**
 * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of

package/dist/components/navigation-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","Edge","use","useMemo","useState","StyleSheet","View","SafeAreaView","NavigationDestinationProps","useWindowSizeClass","iconColorOf","labelColorOf","NavigationContext","NavigationDestination","useLinkPress","useTheme","composeStyles","themedStyles","NavigationBarItemProps","href","NavigationBarProps","Omit","children","ref","selectedRoute","style","NavigationTabBarProps","TabNavigatorProps","descriptors","Readonly","Partial","Record","options","TabOptions","insets","state","index","routes","TabRoute","TabActions","emit","event","TabEvent","go","route","TabEmitter","canPreventDefault","target","type","emitter","navigateToTab","routeKey","navigation","navigate","name","params","tabBarAccessibilityLabel","tabBarBadge","tabBarButtonTestID","tabBarIcon","props","color","focused","size","tabBarLabel","position","title","key","MEASURING_ROOM","ICON_SIZE","NO_OPTIONS","DIGITS","EDGES","styles","create","measurer","height","overflow","pointerEvents","start","top","width","room","alignItems","vertical","stylesOf","colors","spacing","bar","backgroundColor","surfaceContainer","horizontal","gap","sm","measured","flexDirection","row","justifyContent","minHeight","actionsOf","undefined","badgeOf","badge","test","Number","longPressThen","actions","NavigationBar","t0","$","_c","theme","own","sizeClass","setRoom","needed","setNeeded","wide","t1","const","t2","form","measuring","context","t3","T0","t4","t5","T1","T2","t7","Symbol","for","widthThen","t8","t9","t10","t11","t6","t12","t13","NavigationBarItem","onPress","press","NavigationTabBar","_insets","map","pressThen","prevented","defaultPrevented","TabDestination","onLongPress","setWidth","nativeEvent","layout","Item","_c"],"sources":["../../../src/components/navigation-bar/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { use, useMemo, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationDestinationProps } from '../../navigation'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n} from '../../navigation'\nimport { useLinkPress } from '../../router'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationBar, the navigation bar page's flexible bar: three to\n// five destinations across the bottom of a compact window, on the surface\n// container, 64dp tall. In a compact window each destination is vertical and\n// the destinations share the bar's width equally; from the medium window\n// size class each is the page's horizontal pill, as wide as what it holds,\n// and the group sits centred with the spare width at the bar's ends, 8dp\n// between two pills. The destinations are src/navigation's, which holds the\n// two forms' values.\n//\n// The 8dp between two horizontal pills is the library's own, as on web. The\n// page puts each pill in an item of a fixed width it does not give, and with\n// no space at all the pills met edge to edge.\n//\n// **A bar too narrow for its horizontal form keeps the vertical one.** A\n// horizontal destination is as wide as its icon, its label and 16dp either\n// side, so five of them need far more than the 600dp the medium class starts\n// at, and drawn anyway every label would be cut short the moment the window\n// crossed into it. So from that class the bar draws its destinations a\n// second time, off screen in the horizontal form at their own widths, and\n// draws that form only while the bar is at least as wide as they are. Web\n// measures the labels it cuts short instead, which native has no way to ask.\n// The horizontal form is drawn until the first measurement arrives, so a bar\n// that fits never draws the other form for a frame.\n//\n// The bar paints its surface to the screen's bottom edge, under the home\n// indicator, and keeps its destinations inside the safe area: a\n// `SafeAreaView` pads it by the home indicator and a landscape notch\n// wherever the bar meets them, and by nothing where it does not.\n//\n// The bar is a `tablist` and each destination a `tab`, which is how both\n// platforms' own tab bars are announced. Web's is a landmark of links with\n// the current one marked as the page, which native has no counterpart for.\n// A destination still goes to its `href` through the app's router, see\n// `RouterProvider`. `NavigationTabBar` draws the bar for React Navigation's\n// bottom tabs and Expo Router's tabs instead.\n\ntype NavigationBarItemProps = NavigationDestinationProps & {\n  /**\n   * Where the destination goes, through the app's router, and what the\n   * bar's `selectedRoute` is matched against.\n   */\n  readonly href: string\n}\n\ntype NavigationBarProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations, each a `NavigationBar.Item`. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match is the selected tab, and draws the\n   * active indicator.\n   */\n  readonly selectedRoute?: string | undefined\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** The routes a tab navigator hands its tab bar, as both navigators do. */\ntype NavigationTabBarProps = Omit<\n  NavigationBarProps,\n  'children' | 'selectedRoute'\n> &\n  TabNavigatorProps & {\n    /** Each route's options, by the route's key. */\n    readonly descriptors: Readonly<\n      Partial<Record<string, { readonly options: TabOptions }>>\n    >\n    /**\n     * The insets the navigator measured, which the bar measures for itself\n     * instead.\n     */\n    readonly insets?: unknown\n    /** The navigator's routes, and which of them is focused. */\n    readonly state: {\n      readonly index: number\n      readonly routes: readonly TabRoute[]\n    }\n  }\n\n/** What a tab bar's press tells the navigator, and how it moves to a tab. */\ntype TabActions = {\n  readonly emit: (event: TabEvent) => unknown\n  readonly go: (route: TabRoute) => void\n}\n\n/**\n * What hears a tab bar's events: React Navigation's `navigation` and Expo\n * Router's `emitter` alike.\n */\ntype TabEmitter = {\n  emit(event: TabEvent): unknown\n}\n\n/** The events a tab bar reports, as both navigators name them. */\ntype TabEvent =\n  | {\n      readonly canPreventDefault: true\n      readonly target: string\n      readonly type: 'tabPress'\n    }\n  | { readonly target: string; readonly type: 'tabLongPress' }\n\n/**\n * How a tab bar moves to a tab: through React Navigation's `navigation`, or\n * through Expo Router's `navigateToTab`.\n */\ntype TabNavigatorProps =\n  | {\n      readonly emitter: TabEmitter\n      readonly navigateToTab: (routeKey: string) => void\n      readonly navigation?: never\n    }\n  | {\n      readonly emitter?: never\n      readonly navigateToTab?: never\n      readonly navigation: TabEmitter & {\n        navigate(name: string, params?: object): void\n      }\n    }\n\n/**\n * A tab's options the bar reads, as React Navigation's bottom tabs and Expo\n * Router's tabs both hand them to a tab bar. Options they take that are not\n * listed here are left to them.\n */\ntype TabOptions = {\n  /** The tab's name for a screen reader, where it differs from its label. */\n  readonly tabBarAccessibilityLabel?: string | undefined\n  /**\n   * The badge on the tab's icon. A number, or a string of digits, is the\n   * large badge's count; any other string is the small dot, since a badge\n   * draws a count and nothing else.\n   */\n  readonly tabBarBadge?: number | string | undefined\n  readonly tabBarButtonTestID?: string | undefined\n  /** The tab's icon, drawn at the size and in the colour it is handed. */\n  readonly tabBarIcon?:\n    | ((props: {\n        readonly color: string\n        readonly focused: boolean\n        readonly size: number\n      }) => ReactNode)\n    | undefined\n  /** The tab's label, in place of its title. */\n  readonly tabBarLabel?:\n    | ((props: {\n        readonly children: string\n        readonly color: string\n        readonly focused: boolean\n        readonly position: 'below-icon' | 'beside-icon'\n      }) => ReactNode)\n    | string\n    | undefined\n  readonly title?: string | undefined\n}\n\ntype TabRoute = {\n  readonly key: string\n  readonly name: string\n  readonly params?: object | undefined\n}\n\n// Where the destinations are drawn off screen to be measured. Wider than any\n// bar, so each one is measured at its own width rather than squeezed.\nconst MEASURING_ROOM = 10_000\n\n// The size a tab's icon is drawn at, the page's.\nconst ICON_SIZE = 24\n\n// A route its navigator handed no options for.\nconst NO_OPTIONS: TabOptions = {}\n\n// A string of digits, which a badge draws as a count.\nconst DIGITS = /^\\d+$/u\n\n// The bar's sides as well as its bottom, so a landscape notch is cleared too.\n// The top is the screen's.\nconst EDGES: readonly Edge[] = ['bottom', 'left', 'right']\n\nconst styles = StyleSheet.create({\n  // Holds the destinations measured off screen. It has no size and clips what\n  // it holds, so they are laid out and never drawn, and take no touches.\n  measurer: {\n    height: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    start: 0,\n    top: 0,\n    width: 0,\n  },\n  // The room the destinations are measured in, with the row of them at its\n  // start, at the row's own width.\n  room: {\n    alignItems: 'flex-start',\n    width: MEASURING_ROOM,\n  },\n  // The vertical form: each destination its share of the bar's height.\n  vertical: {\n    alignItems: 'stretch',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    bar: {\n      backgroundColor: colors.surfaceContainer,\n    },\n    // The horizontal form: the pills centred, 8dp apart.\n    horizontal: {\n      alignItems: 'center',\n      gap: spacing.sm,\n    },\n    // The destinations, measured in the horizontal form.\n    measured: {\n      flexDirection: 'row',\n      gap: spacing.sm,\n    },\n    // The page's 64dp, a minimum rather than a height, so a larger text size\n    // the device asks for grows the bar rather than cutting the labels off.\n    row: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      minHeight: 64,\n    },\n  }),\n)\n\n/**\n * What the bar tells the navigator and how it moves, from whichever of the\n * two navigators drew it.\n */\nfunction actionsOf(\n  emitter: TabEmitter | undefined,\n  navigateToTab: ((routeKey: string) => void) | undefined,\n  navigation: TabNavigatorProps['navigation'],\n): TabActions {\n  if (navigation !== undefined) {\n    return {\n      emit: (event) => navigation.emit(event),\n      go: (route) => {\n        navigation.navigate(route.name, route.params)\n      },\n    }\n  }\n  return {\n    emit: (event) => emitter?.emit(event),\n    go: (route) => {\n      navigateToTab?.(route.key)\n    },\n  }\n}\n\n/**\n * The badge a tab's `tabBarBadge` draws: the count of a number or a string of\n * digits, and the small dot for any other string.\n */\nfunction badgeOf(\n  badge: number | string | undefined,\n): boolean | number | undefined {\n  if (typeof badge === 'number') {\n    return badge\n  }\n  if (badge === undefined || badge === '') {\n    return undefined\n  }\n  return DIGITS.test(badge) ? Number(badge) : true\n}\n\n/**\n * Reports a long press on a tab. Built by a call rather than written inline\n * at the prop, for the reason `widthThen` gives.\n */\nfunction longPressThen(actions: TabActions, route: TabRoute) {\n  return () => {\n    actions.emit({ target: route.key, type: 'tabLongPress' })\n  }\n}\n\n/**\n * The bar of three to five top-level destinations a compact window keeps at\n * its bottom edge. Each destination goes to its `href` through the app's\n * router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationBar selectedRoute=\"/first\">\n *   <NavigationBar.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/third\" icon={<ThirdIcon />}>\n *     Third item\n *   </NavigationBar.Item>\n * </NavigationBar>\n * ```\n *\n * Draw it below the screen's content, at the bottom of the window: it paints\n * its surface to the bottom edge and keeps its destinations clear of the home\n * indicator itself. From the medium window size class each destination puts\n * its label beside its icon, where the bar is wide enough for every label.\n *\n * `style`, `ref` and `testID` land on the bar's own view, which is announced\n * as a tab list.\n */\nfunction NavigationBar({\n  children,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationBarProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const sizeClass = useWindowSizeClass()\n  // The width the destinations have, and the width the horizontal form\n  // takes, while each is known.\n  const [room, setRoom] = useState<number | undefined>(undefined)\n  const [needed, setNeeded] = useState<number | undefined>(undefined)\n\n  const wide = sizeClass !== 'compact'\n  const horizontal =\n    wide && (room === undefined || needed === undefined || needed <= room)\n  const context = useMemo(\n    () => ({\n      form: horizontal ? ('horizontal' as const) : ('vertical' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [horizontal, selectedRoute],\n  )\n  const measuring = useMemo(\n    () => ({ form: 'horizontal' as const, measuring: true, selectedRoute }),\n    [selectedRoute],\n  )\n\n  return (\n    <View\n      role=\"tablist\"\n      {...props}\n      style={composeStyles<ViewStyle>(own.bar, style)}\n    >\n      <SafeAreaView edges={EDGES}>\n        <View\n          onLayout={widthThen(setRoom)}\n          style={composeStyles<ViewStyle>(\n            own.row,\n            horizontal ? own.horizontal : styles.vertical,\n          )}\n        >\n          <NavigationContext value={context}>{children}</NavigationContext>\n        </View>\n      </SafeAreaView>\n      {wide ? (\n        <View aria-hidden style={styles.measurer}>\n          <View style={styles.room}>\n            <View onLayout={widthThen(setNeeded)} style={own.measured}>\n              <NavigationContext value={measuring}>\n                {children}\n              </NavigationContext>\n            </View>\n          </View>\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * One destination of a navigation bar: an icon, a label and, while it is the\n * current one, the active indicator behind the icon. Pressing it calls\n * `onPress`, then goes to its `href`. Renders nothing of its own outside a\n * `NavigationBar`, whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationBarItem({\n  href,\n  onPress,\n  ...props\n}: NavigationBarItemProps) {\n  const { selectedRoute } = use(NavigationContext)\n  const press = useLinkPress(href, onPress)\n\n  return (\n    <NavigationDestination\n      {...props}\n      onPress={press}\n      selected={selectedRoute !== undefined && href === selectedRoute}\n    />\n  )\n}\n\n/**\n * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of\n * React Navigation's bottom tabs and of Expo Router's `Tabs` alike.\n *\n * ```tsx\n * <Tabs tabBar={(props) => <NavigationTabBar {...props} />}>\n *   <Tabs.Screen name=\"index\" options={{ tabBarIcon: () => <FirstIcon />, title: 'First item' }} />\n * </Tabs>\n * ```\n *\n * Each route is a destination, labelled by its `tabBarLabel` or its title,\n * with the icon `tabBarIcon` draws and the badge `tabBarBadge` asks for, and\n * the focused route is the selected one. Pressing a destination reports\n * `tabPress` to the navigator and moves to its route unless a listener\n * prevents it, and a long press reports `tabLongPress`, as the navigators'\n * own tab bars do.\n *\n * `style`, `ref` and `testID` land on the bar's own view, as on a\n * `NavigationBar`.\n */\nfunction NavigationTabBar({\n  descriptors,\n  emitter,\n  insets: _insets,\n  navigateToTab,\n  navigation,\n  state,\n  ...props\n}: NavigationTabBarProps) {\n  const actions = actionsOf(emitter, navigateToTab, navigation)\n  const focused = state.routes[state.index]?.key\n\n  return (\n    <NavigationBar {...props}>\n      {state.routes.map((route) => (\n        <TabDestination\n          focused={route.key === focused}\n          key={route.key}\n          onLongPress={longPressThen(actions, route)}\n          onPress={pressThen(actions, route, route.key === focused)}\n          options={descriptors[route.key]?.options ?? NO_OPTIONS}\n          route={route}\n        />\n      ))}\n    </NavigationBar>\n  )\n}\n\n/**\n * Moves to a tab once the navigator has heard the press, unless a listener\n * prevented it or the tab is already focused. Built by a call rather than\n * written inline at the prop, for the reason `widthThen` gives.\n */\nfunction pressThen(actions: TabActions, route: TabRoute, focused: boolean) {\n  return () => {\n    const event = actions.emit({\n      canPreventDefault: true,\n      target: route.key,\n      type: 'tabPress',\n    })\n\n    if (!focused && !prevented(event)) {\n      actions.go(route)\n    }\n  }\n}\n\n// Whether a listener prevented an event, as the navigator reports it.\nfunction prevented(event: unknown) {\n  return (\n    typeof event === 'object' &&\n    event !== null &&\n    'defaultPrevented' in event &&\n    event.defaultPrevented === true\n  )\n}\n\n/**\n * One route's destination. Its colours are the destination's own for the\n * form the bar draws, which is why it reads them inside the bar rather than\n * the bar computing them for it.\n */\nfunction TabDestination({\n  focused,\n  onLongPress,\n  onPress,\n  options,\n  route,\n}: {\n  readonly focused: boolean\n  readonly onLongPress: () => void\n  readonly onPress: () => void\n  readonly options: TabOptions\n  readonly route: TabRoute\n}) {\n  const theme = useTheme()\n  const { form } = use(NavigationContext)\n  const { tabBarLabel } = options\n  const title =\n    typeof tabBarLabel === 'string'\n      ? tabBarLabel\n      : (options.title ?? route.name)\n\n  return (\n    <NavigationDestination\n      aria-label={options.tabBarAccessibilityLabel ?? title}\n      badge={badgeOf(options.tabBarBadge)}\n      icon={options.tabBarIcon?.({\n        color: iconColorOf(theme, false, focused),\n        focused,\n        size: ICON_SIZE,\n      })}\n      onLongPress={onLongPress}\n      onPress={onPress}\n      selected={focused}\n      testID={options.tabBarButtonTestID}\n    >\n      {typeof tabBarLabel === 'function'\n        ? tabBarLabel({\n            children: title,\n            color: labelColorOf(theme, form, false, focused),\n            focused,\n            position: form === 'horizontal' ? 'beside-icon' : 'below-icon',\n          })\n        : title}\n    </NavigationDestination>\n  )\n}\n\n/**\n * Records a view's width, as React Native lays it out. Built by a call\n * rather than written inline at the prop, which is what react-perf's\n * jsx-no-new-function-as-prop is after; the React Compiler memoises the\n * result on its inputs.\n */\nfunction widthThen(setWidth: (width: number) => void) {\n  return (event: LayoutChangeEvent) => {\n    setWidth(event.nativeEvent.layout.width)\n  }\n}\n\nNavigationBar.Item = NavigationBarItem\n\nexport type {\n  NavigationBarItemProps,\n  NavigationBarProps,\n  NavigationTabBarProps,\n}\n\nexport { NavigationBar, NavigationBarItem, NavigationTabBar }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","Edge","use","useMemo","useState","StyleSheet","View","SafeAreaView","NavigationItemProps","useWindowSizeClass","iconColorOf","labelColorOf","NavigationContext","NavigationDestination","NavigationItem","useTheme","composeStyles","themedStyles","NavigationBarItemProps","NavigationBarProps","Omit","children","ref","selectedRoute","style","NavigationTabBarProps","TabNavigatorProps","descriptors","Readonly","Partial","Record","options","TabOptions","insets","state","index","routes","TabRoute","TabActions","emit","event","TabEvent","go","route","TabEmitter","canPreventDefault","target","type","emitter","navigateToTab","routeKey","navigation","navigate","name","params","tabBarAccessibilityLabel","tabBarBadge","tabBarButtonTestID","tabBarIcon","props","color","focused","size","tabBarLabel","position","title","key","MEASURING_ROOM","ICON_SIZE","NO_OPTIONS","DIGITS","EDGES","styles","create","measurer","height","overflow","pointerEvents","start","top","width","room","alignItems","vertical","stylesOf","colors","spacing","bar","backgroundColor","surfaceContainer","horizontal","gap","sm","measured","flexDirection","row","justifyContent","minHeight","actionsOf","undefined","badgeOf","badge","test","Number","longPressThen","actions","NavigationBar","t0","$","_c","theme","own","sizeClass","setRoom","needed","setNeeded","wide","t1","const","t2","form","measuring","context","t3","T0","t4","t5","T1","T2","t7","Symbol","for","widthThen","t8","t9","t10","t11","t6","t12","t13","NavigationBarItem","NavigationTabBar","_insets","map","pressThen","prevented","defaultPrevented","TabDestination","onLongPress","onPress","setWidth","nativeEvent","layout","Item","_c"],"sources":["../../../src/components/navigation-bar/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { use, useMemo, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationItemProps } from '../../navigation'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n  NavigationItem,\n} from '../../navigation'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationBar, the navigation bar page's flexible bar: three to\n// five destinations across the bottom of a compact window, on the surface\n// container, 64dp tall. In a compact window each destination is vertical and\n// the destinations share the bar's width equally; from the medium window\n// size class each is the page's horizontal pill, as wide as what it holds,\n// and the group sits centred with the spare width at the bar's ends, 8dp\n// between two pills. The destinations are src/navigation's, which holds the\n// two forms' values.\n//\n// The 8dp between two horizontal pills is the library's own, as on web. The\n// page puts each pill in an item of a fixed width it does not give, and with\n// no space at all the pills met edge to edge.\n//\n// **A bar too narrow for its horizontal form keeps the vertical one.** A\n// horizontal destination is as wide as its icon, its label and 16dp either\n// side, so five of them need far more than the 600dp the medium class starts\n// at, and drawn anyway every label would be cut short the moment the window\n// crossed into it. So from that class the bar draws its destinations a\n// second time, off screen in the horizontal form at their own widths, and\n// draws that form only while the bar is at least as wide as they are. Web\n// measures the labels it cuts short instead, which native has no way to ask.\n// The horizontal form is drawn until the first measurement arrives, so a bar\n// that fits never draws the other form for a frame.\n//\n// The bar paints its surface to the screen's bottom edge, under the home\n// indicator, and keeps its destinations inside the safe area: a\n// `SafeAreaView` pads it by the home indicator and a landscape notch\n// wherever the bar meets them, and by nothing where it does not.\n//\n// The bar is a `tablist` and each destination a `tab`, which is how both\n// platforms' own tab bars are announced. Web's is a landmark of links with\n// the current one marked as the page, which native has no counterpart for.\n// A destination still goes to its `href` through the app's router, see\n// `RouterProvider`. `NavigationTabBar` draws the bar for React Navigation's\n// bottom tabs and Expo Router's tabs instead.\n\ntype NavigationBarItemProps = NavigationItemProps\n\ntype NavigationBarProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations, each a `NavigationBar.Item`. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match is the selected tab, and draws the\n   * active indicator.\n   */\n  readonly selectedRoute?: string | undefined\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** The routes a tab navigator hands its tab bar, as both navigators do. */\ntype NavigationTabBarProps = Omit<\n  NavigationBarProps,\n  'children' | 'selectedRoute'\n> &\n  TabNavigatorProps & {\n    /** Each route's options, by the route's key. */\n    readonly descriptors: Readonly<\n      Partial<Record<string, { readonly options: TabOptions }>>\n    >\n    /**\n     * The insets the navigator measured, which the bar measures for itself\n     * instead.\n     */\n    readonly insets?: unknown\n    /** The navigator's routes, and which of them is focused. */\n    readonly state: {\n      readonly index: number\n      readonly routes: readonly TabRoute[]\n    }\n  }\n\n/** What a tab bar's press tells the navigator, and how it moves to a tab. */\ntype TabActions = {\n  readonly emit: (event: TabEvent) => unknown\n  readonly go: (route: TabRoute) => void\n}\n\n/**\n * What hears a tab bar's events: React Navigation's `navigation` and Expo\n * Router's `emitter` alike.\n */\ntype TabEmitter = {\n  emit(event: TabEvent): unknown\n}\n\n/** The events a tab bar reports, as both navigators name them. */\ntype TabEvent =\n  | {\n      readonly canPreventDefault: true\n      readonly target: string\n      readonly type: 'tabPress'\n    }\n  | { readonly target: string; readonly type: 'tabLongPress' }\n\n/**\n * How a tab bar moves to a tab: through React Navigation's `navigation`, or\n * through Expo Router's `navigateToTab`.\n */\ntype TabNavigatorProps =\n  | {\n      readonly emitter: TabEmitter\n      readonly navigateToTab: (routeKey: string) => void\n      readonly navigation?: never\n    }\n  | {\n      readonly emitter?: never\n      readonly navigateToTab?: never\n      readonly navigation: TabEmitter & {\n        navigate(name: string, params?: object): void\n      }\n    }\n\n/**\n * A tab's options the bar reads, as React Navigation's bottom tabs and Expo\n * Router's tabs both hand them to a tab bar. Options they take that are not\n * listed here are left to them.\n */\ntype TabOptions = {\n  /** The tab's name for a screen reader, where it differs from its label. */\n  readonly tabBarAccessibilityLabel?: string | undefined\n  /**\n   * The badge on the tab's icon. A number, or a string of digits, is the\n   * large badge's count; any other string is the small dot, since a badge\n   * draws a count and nothing else.\n   */\n  readonly tabBarBadge?: number | string | undefined\n  readonly tabBarButtonTestID?: string | undefined\n  /** The tab's icon, drawn at the size and in the colour it is handed. */\n  readonly tabBarIcon?:\n    | ((props: {\n        readonly color: string\n        readonly focused: boolean\n        readonly size: number\n      }) => ReactNode)\n    | undefined\n  /** The tab's label, in place of its title. */\n  readonly tabBarLabel?:\n    | ((props: {\n        readonly children: string\n        readonly color: string\n        readonly focused: boolean\n        readonly position: 'below-icon' | 'beside-icon'\n      }) => ReactNode)\n    | string\n    | undefined\n  readonly title?: string | undefined\n}\n\ntype TabRoute = {\n  readonly key: string\n  readonly name: string\n  readonly params?: object | undefined\n}\n\n// Where the destinations are drawn off screen to be measured. Wider than any\n// bar, so each one is measured at its own width rather than squeezed.\nconst MEASURING_ROOM = 10_000\n\n// The size a tab's icon is drawn at, the page's.\nconst ICON_SIZE = 24\n\n// A route its navigator handed no options for.\nconst NO_OPTIONS: TabOptions = {}\n\n// A string of digits, which a badge draws as a count.\nconst DIGITS = /^\\d+$/u\n\n// The bar's sides as well as its bottom, so a landscape notch is cleared too.\n// The top is the screen's.\nconst EDGES: readonly Edge[] = ['bottom', 'left', 'right']\n\nconst styles = StyleSheet.create({\n  // Holds the destinations measured off screen. It has no size and clips what\n  // it holds, so they are laid out and never drawn, and take no touches.\n  measurer: {\n    height: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    start: 0,\n    top: 0,\n    width: 0,\n  },\n  // The room the destinations are measured in, with the row of them at its\n  // start, at the row's own width.\n  room: {\n    alignItems: 'flex-start',\n    width: MEASURING_ROOM,\n  },\n  // The vertical form: each destination its share of the bar's height.\n  vertical: {\n    alignItems: 'stretch',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    bar: {\n      backgroundColor: colors.surfaceContainer,\n    },\n    // The horizontal form: the pills centred, 8dp apart.\n    horizontal: {\n      alignItems: 'center',\n      gap: spacing.sm,\n    },\n    // The destinations, measured in the horizontal form.\n    measured: {\n      flexDirection: 'row',\n      gap: spacing.sm,\n    },\n    // The page's 64dp, a minimum rather than a height, so a larger text size\n    // the device asks for grows the bar rather than cutting the labels off.\n    row: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      minHeight: 64,\n    },\n  }),\n)\n\n/**\n * What the bar tells the navigator and how it moves, from whichever of the\n * two navigators drew it.\n */\nfunction actionsOf(\n  emitter: TabEmitter | undefined,\n  navigateToTab: ((routeKey: string) => void) | undefined,\n  navigation: TabNavigatorProps['navigation'],\n): TabActions {\n  if (navigation !== undefined) {\n    return {\n      emit: (event) => navigation.emit(event),\n      go: (route) => {\n        navigation.navigate(route.name, route.params)\n      },\n    }\n  }\n  return {\n    emit: (event) => emitter?.emit(event),\n    go: (route) => {\n      navigateToTab?.(route.key)\n    },\n  }\n}\n\n/**\n * The badge a tab's `tabBarBadge` draws: the count of a number or a string of\n * digits, and the small dot for any other string.\n */\nfunction badgeOf(\n  badge: number | string | undefined,\n): boolean | number | undefined {\n  if (typeof badge === 'number') {\n    return badge\n  }\n  if (badge === undefined || badge === '') {\n    return undefined\n  }\n  return DIGITS.test(badge) ? Number(badge) : true\n}\n\n/**\n * Reports a long press on a tab. Built by a call rather than written inline\n * at the prop, for the reason `widthThen` gives.\n */\nfunction longPressThen(actions: TabActions, route: TabRoute) {\n  return () => {\n    actions.emit({ target: route.key, type: 'tabLongPress' })\n  }\n}\n\n/**\n * The bar of three to five top-level destinations a compact window keeps at\n * its bottom edge. Each destination goes to its `href` through the app's\n * router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationBar selectedRoute=\"/first\">\n *   <NavigationBar.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/third\" icon={<ThirdIcon />}>\n *     Third item\n *   </NavigationBar.Item>\n * </NavigationBar>\n * ```\n *\n * Draw it below the screen's content, at the bottom of the window: it paints\n * its surface to the bottom edge and keeps its destinations clear of the home\n * indicator itself. From the medium window size class each destination puts\n * its label beside its icon, where the bar is wide enough for every label.\n *\n * `style`, `ref` and `testID` land on the bar's own view, which is announced\n * as a tab list.\n */\nfunction NavigationBar({\n  children,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationBarProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const sizeClass = useWindowSizeClass()\n  // The width the destinations have, and the width the horizontal form\n  // takes, while each is known.\n  const [room, setRoom] = useState<number | undefined>(undefined)\n  const [needed, setNeeded] = useState<number | undefined>(undefined)\n\n  const wide = sizeClass !== 'compact'\n  const horizontal =\n    wide && (room === undefined || needed === undefined || needed <= room)\n  const context = useMemo(\n    () => ({\n      form: horizontal ? ('horizontal' as const) : ('vertical' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [horizontal, selectedRoute],\n  )\n  const measuring = useMemo(\n    () => ({ form: 'horizontal' as const, measuring: true, selectedRoute }),\n    [selectedRoute],\n  )\n\n  return (\n    <View\n      role=\"tablist\"\n      {...props}\n      style={composeStyles<ViewStyle>(own.bar, style)}\n    >\n      <SafeAreaView edges={EDGES}>\n        <View\n          onLayout={widthThen(setRoom)}\n          style={composeStyles<ViewStyle>(\n            own.row,\n            horizontal ? own.horizontal : styles.vertical,\n          )}\n        >\n          <NavigationContext value={context}>{children}</NavigationContext>\n        </View>\n      </SafeAreaView>\n      {wide ? (\n        <View aria-hidden style={styles.measurer}>\n          <View style={styles.room}>\n            <View onLayout={widthThen(setNeeded)} style={own.measured}>\n              <NavigationContext value={measuring}>\n                {children}\n              </NavigationContext>\n            </View>\n          </View>\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * One destination of a navigation bar: an icon, a label and, while it is the\n * current one, the active indicator behind the icon. Pressing it calls\n * `onPress`, then goes to its `href`. Renders nothing of its own outside a\n * `NavigationBar`, whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationBarItem(props: NavigationBarItemProps) {\n  return <NavigationItem {...props} />\n}\n\n/**\n * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of\n * React Navigation's bottom tabs and of Expo Router's `Tabs` alike.\n *\n * ```tsx\n * <Tabs tabBar={(props) => <NavigationTabBar {...props} />}>\n *   <Tabs.Screen name=\"index\" options={{ tabBarIcon: () => <FirstIcon />, title: 'First item' }} />\n * </Tabs>\n * ```\n *\n * Each route is a destination, labelled by its `tabBarLabel` or its title,\n * with the icon `tabBarIcon` draws and the badge `tabBarBadge` asks for, and\n * the focused route is the selected one. Pressing a destination reports\n * `tabPress` to the navigator and moves to its route unless a listener\n * prevents it, and a long press reports `tabLongPress`, as the navigators'\n * own tab bars do.\n *\n * `style`, `ref` and `testID` land on the bar's own view, as on a\n * `NavigationBar`.\n */\nfunction NavigationTabBar({\n  descriptors,\n  emitter,\n  insets: _insets,\n  navigateToTab,\n  navigation,\n  state,\n  ...props\n}: NavigationTabBarProps) {\n  const actions = actionsOf(emitter, navigateToTab, navigation)\n  const focused = state.routes[state.index]?.key\n\n  return (\n    <NavigationBar {...props}>\n      {state.routes.map((route) => (\n        <TabDestination\n          focused={route.key === focused}\n          key={route.key}\n          onLongPress={longPressThen(actions, route)}\n          onPress={pressThen(actions, route, route.key === focused)}\n          options={descriptors[route.key]?.options ?? NO_OPTIONS}\n          route={route}\n        />\n      ))}\n    </NavigationBar>\n  )\n}\n\n/**\n * Moves to a tab once the navigator has heard the press, unless a listener\n * prevented it or the tab is already focused. Built by a call rather than\n * written inline at the prop, for the reason `widthThen` gives.\n */\nfunction pressThen(actions: TabActions, route: TabRoute, focused: boolean) {\n  return () => {\n    const event = actions.emit({\n      canPreventDefault: true,\n      target: route.key,\n      type: 'tabPress',\n    })\n\n    if (!focused && !prevented(event)) {\n      actions.go(route)\n    }\n  }\n}\n\n// Whether a listener prevented an event, as the navigator reports it.\nfunction prevented(event: unknown) {\n  return (\n    typeof event === 'object' &&\n    event !== null &&\n    'defaultPrevented' in event &&\n    event.defaultPrevented === true\n  )\n}\n\n/**\n * One route's destination. Its colours are the destination's own for the\n * form the bar draws, which is why it reads them inside the bar rather than\n * the bar computing them for it.\n */\nfunction TabDestination({\n  focused,\n  onLongPress,\n  onPress,\n  options,\n  route,\n}: {\n  readonly focused: boolean\n  readonly onLongPress: () => void\n  readonly onPress: () => void\n  readonly options: TabOptions\n  readonly route: TabRoute\n}) {\n  const theme = useTheme()\n  const { form } = use(NavigationContext)\n  const { tabBarLabel } = options\n  const title =\n    typeof tabBarLabel === 'string'\n      ? tabBarLabel\n      : (options.title ?? route.name)\n\n  return (\n    <NavigationDestination\n      aria-label={options.tabBarAccessibilityLabel ?? title}\n      badge={badgeOf(options.tabBarBadge)}\n      icon={options.tabBarIcon?.({\n        color: iconColorOf(theme, false, focused),\n        focused,\n        size: ICON_SIZE,\n      })}\n      onLongPress={onLongPress}\n      onPress={onPress}\n      selected={focused}\n      testID={options.tabBarButtonTestID}\n    >\n      {typeof tabBarLabel === 'function'\n        ? tabBarLabel({\n            children: title,\n            color: labelColorOf(theme, form, false, focused),\n            focused,\n            position: form === 'horizontal' ? 'beside-icon' : 'below-icon',\n          })\n        : title}\n    </NavigationDestination>\n  )\n}\n\n/**\n * Records a view's width, as React Native lays it out. Built by a call\n * rather than written inline at the prop, which is what react-perf's\n * jsx-no-new-function-as-prop is after; the React Compiler memoises the\n * result on its inputs.\n */\nfunction widthThen(setWidth: (width: number) => void) {\n  return (event: LayoutChangeEvent) => {\n    setWidth(event.nativeEvent.layout.width)\n  }\n}\n\nNavigationBar.Item = NavigationBarItem\n\nexport type {\n  NavigationBarItemProps,\n  NavigationBarProps,\n  NavigationTabBarProps,\n}\n\nexport { NavigationBar, NavigationBarItem, NavigationTabBar }\n"],"mappings":"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"}

package/dist/components/navigation-rail/index.d.ts

@@ -0,0 +1,68 @@
+import { NavigationItemProps } from "../../navigation/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/navigation-rail/index.d.ts
+type NavigationRailItemProps = NavigationItemProps;
+type NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The destinations: `NavigationRail.Item`s. */
+  readonly children?: ReactNode;
+  /**
+   * What the rail draws above its destinations: a menu button that expands
+   * it, or a floating action button.
+   */
+  readonly header?: ReactNode;
+  /**
+   * Whether the rail is in its expanded form, each destination a pill with
+   * its label beside the icon, rather than collapsed with the label under it.
+   * @default false
+   */
+  readonly isExpanded?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The route of the current destination, matched against each
+   * destination's `href`. The match is selected and draws the active
+   * indicator.
+   */
+  readonly selectedRoute?: string;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * The column of top-level destinations a medium or wider window keeps at its
+ * leading edge, collapsed or, with `isExpanded`, expanded. Each destination
+ * goes to its `href` through the app's router, see `RouterProvider`.
+ *
+ * ```tsx
+ * <NavigationRail selectedRoute="/first">
+ *   <NavigationRail.Item href="/first" icon={<FirstIcon />}>
+ *     First item
+ *   </NavigationRail.Item>
+ *   <NavigationRail.Item href="/second" icon={<SecondIcon />}>
+ *     Second item
+ *   </NavigationRail.Item>
+ * </NavigationRail>
+ * ```
+ *
+ * Draw it at the leading edge of a row holding the screen's content, which
+ * gives it its height: it paints its surface to the screen's edges and keeps
+ * its destinations clear of the status bar, the home indicator and a notch
+ * itself.
+ *
+ * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`
+ * land on the rail's own view, its surface.
+ */
+declare function NavigationRail({ 'aria-label': ariaLabel, children, header, isExpanded, selectedRoute, style, ...props }: NavigationRailProps): import("react").JSX.Element;
+declare namespace NavigationRail {
+  var Item: typeof NavigationRailItem;
+}
+/**
+ * One destination of a navigation rail: an icon, a label and, while it is
+ * the current one, the active indicator. Pressing it calls `onPress`, then
+ * goes to its `href`. Renders nothing of its own outside a `NavigationRail`,
+ * whose `selectedRoute` says whether it is selected.
+ *
+ * `style`, `ref` and `testID` land on the destination's `Pressable`.
+ */
+declare function NavigationRailItem(props: NavigationRailItemProps): import("react").JSX.Element;
+//#endregion
+export { NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation-rail/index.js

@@ -0,0 +1,294 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { NavigationContext, NavigationItem } from "../../navigation/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, ScrollView, StyleSheet, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { SafeAreaView } from "react-native-safe-area-context";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation-rail/index.tsx
+const COLLAPSED_WIDTH = 96;
+const EXPANDED_MIN_WIDTH = 220;
+const EXPANDED_MAX_WIDTH = 360;
+const TOP_PADDING = 44;
+const EXPANDED_PADDING = 20;
+const RING_REACH = 4;
+const styles = StyleSheet.create({
+	content: { flexShrink: 0 },
+	destinations: {
+		alignSelf: "stretch",
+		flexBasis: "auto",
+		flexGrow: 1,
+		flexShrink: 1,
+		margin: -4
+	},
+	inset: {
+		flexGrow: 1,
+		flexShrink: 1
+	}
+});
+const stylesOf = themedStyles(({ colors, spacing }) => StyleSheet.create({
+	collapsed: {
+		alignItems: "center",
+		flexGrow: 1,
+		flexShrink: 1,
+		paddingBottom: spacing.xl,
+		paddingTop: TOP_PADDING,
+		width: COLLAPSED_WIDTH
+	},
+	collapsedList: {
+		alignItems: "center",
+		gap: spacing.xs,
+		padding: RING_REACH
+	},
+	expanded: {
+		flexGrow: 1,
+		flexShrink: 1,
+		maxWidth: EXPANDED_MAX_WIDTH,
+		minWidth: EXPANDED_MIN_WIDTH,
+		paddingBottom: spacing.xl,
+		paddingHorizontal: EXPANDED_PADDING,
+		paddingTop: TOP_PADDING
+	},
+	expandedList: {
+		alignItems: "flex-start",
+		padding: RING_REACH
+	},
+	header: {
+		alignItems: "center",
+		marginBottom: spacing.xxxl - spacing.xs
+	},
+	headerExpanded: {
+		alignItems: "flex-start",
+		alignSelf: "stretch",
+		marginBottom: spacing.xxxl,
+		paddingStart: spacing.sm
+	},
+	rail: {
+		backgroundColor: colors.surface,
+		flexDirection: "row",
+		flexShrink: 0,
+		overflow: "hidden"
+	}
+}));
+function edgesOf() {
+	return [
+		"bottom",
+		I18nManager.isRTL ? "right" : "left",
+		"top"
+	];
+}
+/**
+* The column of top-level destinations a medium or wider window keeps at its
+* leading edge, collapsed or, with `isExpanded`, expanded. Each destination
+* goes to its `href` through the app's router, see `RouterProvider`.
+*
+* ```tsx
+* <NavigationRail selectedRoute="/first">
+*   <NavigationRail.Item href="/first" icon={<FirstIcon />}>
+*     First item
+*   </NavigationRail.Item>
+*   <NavigationRail.Item href="/second" icon={<SecondIcon />}>
+*     Second item
+*   </NavigationRail.Item>
+* </NavigationRail>
+* ```
+*
+* Draw it at the leading edge of a row holding the screen's content, which
+* gives it its height: it paints its surface to the screen's edges and keeps
+* its destinations clear of the status bar, the home indicator and a notch
+* itself.
+*
+* `aria-label` names the destinations' tab list. `style`, `ref` and `testID`
+* land on the rail's own view, its surface.
+*/
+function NavigationRail(t0) {
+	const $ = c(43);
+	let ariaLabel;
+	let children;
+	let header;
+	let props;
+	let selectedRoute;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, children, header, isExpanded: t1, selectedRoute, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = children;
+		$[3] = header;
+		$[4] = props;
+		$[5] = selectedRoute;
+		$[6] = style;
+		$[7] = t1;
+	} else {
+		ariaLabel = $[1];
+		children = $[2];
+		header = $[3];
+		props = $[4];
+		selectedRoute = $[5];
+		style = $[6];
+		t1 = $[7];
+	}
+	const isExpanded = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const reduceMotion = useReducedMotion();
+	const width = useSharedValue(void 0);
+	const t2 = isExpanded ? "expanded" : "collapsed";
+	let t3;
+	if ($[8] !== selectedRoute || $[9] !== t2) {
+		t3 = {
+			form: t2,
+			measuring: false,
+			selectedRoute
+		};
+		$[8] = selectedRoute;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	const context = t3;
+	const widthStyle = useAnimatedStyle(() => {
+		"worklet";
+		const current = width.get();
+		return current === void 0 ? {} : { width: current };
+	});
+	const t4 = Animated;
+	const t5 = composeStyles(own.rail, widthStyle, style);
+	const T0 = View;
+	let t6;
+	if ($[11] !== reduceMotion || $[12] !== theme || $[13] !== width) {
+		t6 = widthThen(width, reduceMotion, timingOf(theme));
+		$[11] = reduceMotion;
+		$[12] = theme;
+		$[13] = width;
+		$[14] = t6;
+	} else t6 = $[14];
+	const t7 = styles;
+	const T1 = SafeAreaView;
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = edgesOf();
+		$[15] = t8;
+	} else t8 = $[15];
+	const t9 = styles;
+	const T2 = View;
+	const t10 = isExpanded ? own.expanded : own.collapsed;
+	const t11 = header === void 0 ? null : /* @__PURE__ */ jsx(View, {
+		style: composeStyles(own.header, isExpanded ? own.headerExpanded : void 0),
+		children: header
+	});
+	const t12 = isExpanded ? own.expandedList : own.collapsedList;
+	let t13;
+	if ($[16] !== children || $[17] !== context) {
+		t13 = /* @__PURE__ */ jsx(NavigationContext, {
+			value: context,
+			children
+		});
+		$[16] = children;
+		$[17] = context;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== ariaLabel || $[20] !== t12 || $[21] !== t13) {
+		t14 = /* @__PURE__ */ jsx(ScrollView, {
+			"aria-label": ariaLabel,
+			contentContainerStyle: t12,
+			role: "tablist",
+			style: styles.destinations,
+			children: t13
+		});
+		$[19] = ariaLabel;
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== T2 || $[24] !== t10 || $[25] !== t11 || $[26] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(T2, {
+			style: t10,
+			children: [t11, t14]
+		});
+		$[23] = T2;
+		$[24] = t10;
+		$[25] = t11;
+		$[26] = t14;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== T1 || $[29] !== t15 || $[30] !== t8 || $[31] !== t9.inset) {
+		t16 = /* @__PURE__ */ jsx(T1, {
+			edges: t8,
+			style: t9.inset,
+			children: t15
+		});
+		$[28] = T1;
+		$[29] = t15;
+		$[30] = t8;
+		$[31] = t9.inset;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== T0 || $[34] !== t16 || $[35] !== t6 || $[36] !== t7.content) {
+		t17 = /* @__PURE__ */ jsx(T0, {
+			onLayout: t6,
+			style: t7.content,
+			children: t16
+		});
+		$[33] = T0;
+		$[34] = t16;
+		$[35] = t6;
+		$[36] = t7.content;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== props || $[39] !== t17 || $[40] !== t4.View || $[41] !== t5) {
+		t18 = /* @__PURE__ */ jsx(t4.View, {
+			...props,
+			style: t5,
+			children: t17
+		});
+		$[38] = props;
+		$[39] = t17;
+		$[40] = t4.View;
+		$[41] = t5;
+		$[42] = t18;
+	} else t18 = $[42];
+	return t18;
+}
+/**
+* One destination of a navigation rail: an icon, a label and, while it is
+* the current one, the active indicator. Pressing it calls `onPress`, then
+* goes to its `href`. Renders nothing of its own outside a `NavigationRail`,
+* whose `selectedRoute` says whether it is selected.
+*
+* `style`, `ref` and `testID` land on the destination's `Pressable`.
+*/
+function NavigationRailItem(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(NavigationItem, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function timingOf({ motion }) {
+	return {
+		duration: motion.durationLong2,
+		easing: Easing.bezier(...motion.easingEmphasized)
+	};
+}
+function widthThen(width, reduceMotion, timing) {
+	return (event) => {
+		const next = event.nativeEvent.layout.width;
+		width.set(width.get() === void 0 || reduceMotion ? next : withTiming(next, timing));
+	};
+}
+NavigationRail.Item = NavigationRailItem;
+//#endregion
+export { NavigationRail, NavigationRailItem };
+
+//# sourceMappingURL=index.js.map