@kanso-labs/react-native-kanso-ui 0.11.9 → 0.11.11

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

@@ -46,6 +46,10 @@ type NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {
  * its destinations clear of the status bar, the home indicator and a notch
  * itself.
  *
+ * A destination wrapped in a view with `marginTop: 'auto'` sits at the
+ * rail's foot, below the rest. Give the view `alignSelf: 'stretch'` as well,
+ * so a collapsed destination in it is as wide as the others.
+ *
  * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`
  * land on the rail's own view, its surface.
  */

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

@@ -39,6 +39,7 @@ const stylesOf = themedStyles(({ colors, spacing }) => StyleSheet.create({
 	},
 	collapsedList: {
 		alignItems: "center",
+		flexGrow: 1,
 		gap: spacing.xs,
 		padding: RING_REACH
 	},
@@ -53,6 +54,7 @@ const stylesOf = themedStyles(({ colors, spacing }) => StyleSheet.create({
 	},
 	expandedList: {
 		alignItems: "flex-start",
+		flexGrow: 1,
 		padding: RING_REACH
 	},
 	header: {
@@ -100,6 +102,10 @@ function edgesOf() {
 * its destinations clear of the status bar, the home indicator and a notch
 * itself.
 *
+* A destination wrapped in a view with `marginTop: 'auto'` sits at the
+* rail's foot, below the rest. Give the view `alignSelf: 'stretch'` as well,
+* so a collapsed destination in it is as wide as the others.
+*
 * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`
 * land on the rail's own view, its surface.
 */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","AnimatedStyle","SharedValue","Edge","useMemo","I18nManager","ScrollView","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","SafeAreaView","NavigationItemProps","ResolvedTheme","NavigationContext","NavigationItem","useTheme","composeStyles","themedStyles","NavigationRailItemProps","NavigationRailProps","Omit","children","header","isExpanded","ref","selectedRoute","style","Timing","duration","easing","ReturnType","bezier","COLLAPSED_WIDTH","EXPANDED_MIN_WIDTH","EXPANDED_MAX_WIDTH","TOP_PADDING","EXPANDED_PADDING","RING_REACH","styles","create","content","flexShrink","destinations","alignSelf","flexBasis","flexGrow","margin","inset","stylesOf","colors","spacing","collapsed","alignItems","paddingBottom","xl","paddingTop","width","collapsedList","gap","xs","padding","expanded","maxWidth","minWidth","paddingHorizontal","expandedList","marginBottom","xxxl","headerExpanded","paddingStart","sm","rail","backgroundColor","surface","flexDirection","overflow","edgesOf","isRTL","NavigationRail","t0","$","_c","ariaLabel","props","t1","undefined","theme","own","reduceMotion","t2","const","t3","form","measuring","context","widthStyle","current","get","t4","t5","T0","t6","widthThen","timingOf","T1","t8","Symbol","for","T2","t10","t11","t12","t13","t14","t15","t16","t9","t17","t7","t18","NavigationRailItem","motion","durationLong2","easingEmphasized","timing","event","next","nativeEvent","layout","set","Item","_c"],"sources":["../../../src/components/navigation-rail/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 { AnimatedStyle, SharedValue } from 'react-native-reanimated'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { useMemo } from 'react'\nimport { I18nManager, ScrollView, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationItemProps } from '../../navigation'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { NavigationContext, NavigationItem } from '../../navigation'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationRail, the navigation rail page's rail, in both its\n// forms: collapsed, a 96dp column of vertical destinations down the leading\n// edge, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. Both are on the surface role, with their\n// contents 44dp from the top: the first destination, or a header when the\n// rail has one, such as a menu button that expands it, with the first\n// destination 40dp under it. The destinations are src/navigation's, shared\n// with NavigationBar, which holds their values.\n//\n// **The rail widens and narrows** when `isExpanded` changes: its surface\n// moves from one form's width to the other's over `durationLong2` on the\n// emphasized curve, as the active indicator moves, while the destinations\n// take their new form at once and the surface reveals or covers them. Web\n// changes width at once. Under reduced motion it does here too. The width it\n// moves to is the one the new form lays out at, measured, so an expanded\n// rail is as wide as its longest label asks within the page's bounds.\n//\n// The rail paints its surface under the status bar, the home indicator and a\n// landscape notch on its leading side, and keeps its header and destinations\n// inside the safe area: a `SafeAreaView` pads it by the top, the bottom and\n// the leading inset, the left one or under right-to-left the right, wherever\n// the rail meets them. Its trailing side faces the screen's content, so it\n// takes no inset there.\n//\n// The destinations scroll in a block of their own under the header, so a\n// rail shorter than they are scrolls them rather than squashing each below\n// its height, and the header stays where it is. The block is a `tablist` and\n// each destination a `tab`, which is how both platforms announce a set of\n// top-level destinations; the header is outside it, since what it holds is\n// not one of them. Web's rail is a landmark of links, which native has no\n// counterpart for. A destination still goes to its `href` through the app's\n// router, see `RouterProvider`.\n\ntype NavigationRailItemProps = NavigationItemProps\n\ntype NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations: `NavigationRail.Item`s. */\n  readonly children?: ReactNode\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  readonly header?: ReactNode\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  readonly isExpanded?: boolean\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 selected and draws the active\n   * indicator.\n   */\n  readonly selectedRoute?: string\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Timing = {\n  readonly duration: number\n  readonly easing: ReturnType<typeof Easing.bezier>\n}\n\n// The collapsed rail's width, and the expanded rail's bounds.\nconst COLLAPSED_WIDTH = 96\nconst EXPANDED_MIN_WIDTH = 220\nconst EXPANDED_MAX_WIDTH = 360\n\n// The page's 44dp above the contents, header or not, and the 20dp either\n// side of the expanded rail's pills, which fall between two steps of the\n// spacing scale and so are written out.\nconst TOP_PADDING = 44\nconst EXPANDED_PADDING = 20\n\n// How far a destination's focus ring reaches past it: the 2dp offset and the\n// 2dp ring. A scroll view clips what overflows it, so the block the\n// destinations scroll in is padded by this much and pulled back out by as\n// much, which leaves every destination where it was and every ring whole.\nconst RING_REACH = 4\n\nconst styles = StyleSheet.create({\n  // The form being drawn, as wide as it lays out, whatever the surface\n  // around it is moving through.\n  content: {\n    flexShrink: 0,\n  },\n  // The destinations' block, which takes the height the header leaves and\n  // scrolls what does not fit in it.\n  destinations: {\n    alignSelf: 'stretch',\n    flexBasis: 'auto',\n    flexGrow: 1,\n    flexShrink: 1,\n    margin: -RING_REACH,\n  },\n  // The safe area and the form inside it take the rail's height and no more,\n  // shrinking below what their destinations ask, since a view keeps its\n  // content's height by default and the block would then never scroll.\n  inset: {\n    flexGrow: 1,\n    flexShrink: 1,\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    // The collapsed rail, its destinations centred in it.\n    collapsed: {\n      alignItems: 'center',\n      flexGrow: 1,\n      flexShrink: 1,\n      paddingBottom: spacing.xl,\n      paddingTop: TOP_PADDING,\n      width: COLLAPSED_WIDTH,\n    },\n    // The collapsed rail's destinations, 4dp apart.\n    collapsedList: {\n      alignItems: 'center',\n      gap: spacing.xs,\n      padding: RING_REACH,\n    },\n    // The expanded rail: as wide as its pills ask, within the page's bounds,\n    // 20dp either side of them.\n    expanded: {\n      flexGrow: 1,\n      flexShrink: 1,\n      maxWidth: EXPANDED_MAX_WIDTH,\n      minWidth: EXPANDED_MIN_WIDTH,\n      paddingBottom: spacing.xl,\n      paddingHorizontal: EXPANDED_PADDING,\n      paddingTop: TOP_PADDING,\n    },\n    // The expanded rail's pills, at its leading edge with no gap between.\n    expandedList: {\n      alignItems: 'flex-start',\n      padding: RING_REACH,\n    },\n    // What the rail draws above its destinations, the page's 40dp clear of\n    // the first: the collapsed rail's 4dp gap, and the rest of its own here.\n    header: {\n      alignItems: 'center',\n      marginBottom: spacing.xxxl - spacing.xs,\n    },\n    // The expanded rail has no gap between destinations, so its header keeps\n    // the whole 40dp. It starts at the leading edge where the pills do, 8dp\n    // in from there: a 40dp icon button centres its 24dp icon, and 8dp puts\n    // that icon over the pills' icons, 16dp into each pill.\n    headerExpanded: {\n      alignItems: 'flex-start',\n      alignSelf: 'stretch',\n      marginBottom: spacing.xxxl,\n      paddingStart: spacing.sm,\n    },\n    // The rail's surface. It keeps its width whatever sits beside it, and\n    // holds the form being drawn at its leading edge, clipping it while the\n    // surface is narrower.\n    rail: {\n      backgroundColor: colors.surface,\n      flexDirection: 'row',\n      flexShrink: 0,\n      overflow: 'hidden',\n    },\n  }),\n)\n\n// The edges the rail meets: the top, the bottom and its leading side, which\n// is the right one under right-to-left.\nfunction edgesOf(): readonly Edge[] {\n  return ['bottom', I18nManager.isRTL ? 'right' : 'left', 'top']\n}\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * goes to its `href` through the app's router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationRail selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * Draw it at the leading edge of a row holding the screen's content, which\n * gives it its height: it paints its surface to the screen's edges and keeps\n * its destinations clear of the status bar, the home indicator and a notch\n * itself.\n *\n * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`\n * land on the rail's own view, its surface.\n */\nfunction NavigationRail({\n  'aria-label': ariaLabel,\n  children,\n  header,\n  isExpanded = false,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationRailProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const reduceMotion = useReducedMotion()\n  // The surface's width, unset until the form being drawn is first measured,\n  // which leaves the surface as wide as that form.\n  const width = useSharedValue<number | undefined>(undefined)\n  const context = useMemo(\n    () => ({\n      form: isExpanded ? ('expanded' as const) : ('collapsed' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [isExpanded, selectedRoute],\n  )\n  const widthStyle = useAnimatedStyle(() => {\n    'worklet'\n    const current = width.get()\n\n    return current === undefined ? {} : { width: current }\n  })\n\n  return (\n    <Animated.View\n      {...props}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        own.rail,\n        widthStyle,\n        style,\n      )}\n    >\n      <View\n        onLayout={widthThen(width, reduceMotion, timingOf(theme))}\n        style={styles.content}\n      >\n        <SafeAreaView edges={edgesOf()} style={styles.inset}>\n          <View style={isExpanded ? own.expanded : own.collapsed}>\n            {header === undefined ? null : (\n              <View\n                style={composeStyles<ViewStyle>(\n                  own.header,\n                  isExpanded ? own.headerExpanded : undefined,\n                )}\n              >\n                {header}\n              </View>\n            )}\n            <ScrollView\n              aria-label={ariaLabel}\n              contentContainerStyle={\n                isExpanded ? own.expandedList : own.collapsedList\n              }\n              role=\"tablist\"\n              style={styles.destinations}\n            >\n              <NavigationContext value={context}>{children}</NavigationContext>\n            </ScrollView>\n          </View>\n        </SafeAreaView>\n      </View>\n    </Animated.View>\n  )\n}\n\n/**\n * One destination of a navigation rail: an icon, a label and, while it is\n * the current one, the active indicator. Pressing it calls `onPress`, then\n * goes to its `href`. Renders nothing of its own outside a `NavigationRail`,\n * whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationRailItem(props: NavigationRailItemProps) {\n  return <NavigationItem {...props} />\n}\n\n// The rail's change of width, on the active indicator's duration and curve.\nfunction timingOf({ motion }: ResolvedTheme): Timing {\n  return {\n    duration: motion.durationLong2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n}\n\n// Moves the surface to the width the form being drawn lays out at: at once\n// the first time, and under reduced motion, and over the rail's timing\n// after that. Built by a call rather than written inline at the prop, which\n// is what react-perf's jsx-no-new-function-as-prop is after.\nfunction widthThen(\n  width: SharedValue<number | undefined>,\n  reduceMotion: boolean,\n  timing: Timing,\n) {\n  return (event: LayoutChangeEvent) => {\n    const next = event.nativeEvent.layout.width\n\n    width.set(\n      width.get() === undefined || reduceMotion\n        ? next\n        : withTiming(next, timing),\n    )\n  }\n}\n\nNavigationRail.Item = NavigationRailItem\n\nexport type { NavigationRailItemProps, NavigationRailProps }\n\nexport { NavigationRail, NavigationRailItem }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","AnimatedStyle","SharedValue","Edge","useMemo","I18nManager","ScrollView","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","SafeAreaView","NavigationItemProps","ResolvedTheme","NavigationContext","NavigationItem","useTheme","composeStyles","themedStyles","NavigationRailItemProps","NavigationRailProps","Omit","children","header","isExpanded","ref","selectedRoute","style","Timing","duration","easing","ReturnType","bezier","COLLAPSED_WIDTH","EXPANDED_MIN_WIDTH","EXPANDED_MAX_WIDTH","TOP_PADDING","EXPANDED_PADDING","RING_REACH","styles","create","content","flexShrink","destinations","alignSelf","flexBasis","flexGrow","margin","inset","stylesOf","colors","spacing","collapsed","alignItems","paddingBottom","xl","paddingTop","width","collapsedList","gap","xs","padding","expanded","maxWidth","minWidth","paddingHorizontal","expandedList","marginBottom","xxxl","headerExpanded","paddingStart","sm","rail","backgroundColor","surface","flexDirection","overflow","edgesOf","isRTL","NavigationRail","t0","$","_c","ariaLabel","props","t1","undefined","theme","own","reduceMotion","t2","const","t3","form","measuring","context","widthStyle","current","get","t4","t5","T0","t6","widthThen","timingOf","T1","t8","Symbol","for","T2","t10","t11","t12","t13","t14","t15","t16","t9","t17","t7","t18","NavigationRailItem","motion","durationLong2","easingEmphasized","timing","event","next","nativeEvent","layout","set","Item","_c"],"sources":["../../../src/components/navigation-rail/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 { AnimatedStyle, SharedValue } from 'react-native-reanimated'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { useMemo } from 'react'\nimport { I18nManager, ScrollView, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationItemProps } from '../../navigation'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { NavigationContext, NavigationItem } from '../../navigation'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationRail, the navigation rail page's rail, in both its\n// forms: collapsed, a 96dp column of vertical destinations down the leading\n// edge, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. Both are on the surface role, with their\n// contents 44dp from the top: the first destination, or a header when the\n// rail has one, such as a menu button that expands it, with the first\n// destination 40dp under it. The destinations are src/navigation's, shared\n// with NavigationBar, which holds their values.\n//\n// **The rail widens and narrows** when `isExpanded` changes: its surface\n// moves from one form's width to the other's over `durationLong2` on the\n// emphasized curve, as the active indicator moves, while the destinations\n// take their new form at once and the surface reveals or covers them. Web\n// changes width at once. Under reduced motion it does here too. The width it\n// moves to is the one the new form lays out at, measured, so an expanded\n// rail is as wide as its longest label asks within the page's bounds.\n//\n// The rail paints its surface under the status bar, the home indicator and a\n// landscape notch on its leading side, and keeps its header and destinations\n// inside the safe area: a `SafeAreaView` pads it by the top, the bottom and\n// the leading inset, the left one or under right-to-left the right, wherever\n// the rail meets them. Its trailing side faces the screen's content, so it\n// takes no inset there.\n//\n// The destinations scroll in a block of their own under the header, so a\n// rail shorter than they are scrolls them rather than squashing each below\n// its height, and the header stays where it is. What they scroll in is at\n// least as tall as that block, as web's list is, so a destination wrapped in\n// a view with `marginTop: 'auto'` sits at the rail's foot, below the rest,\n// while a rail they do not fit in still scrolls them. The block is a\n// `tablist` and each destination a `tab`, which is how both platforms\n// announce a set of top-level destinations; the header is outside it, since\n// what it holds is not one of them. Web's rail is a landmark of links, which\n// native has no counterpart for. A destination still goes to its `href`\n// through the app's router, see `RouterProvider`.\n\ntype NavigationRailItemProps = NavigationItemProps\n\ntype NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations: `NavigationRail.Item`s. */\n  readonly children?: ReactNode\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  readonly header?: ReactNode\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  readonly isExpanded?: boolean\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 selected and draws the active\n   * indicator.\n   */\n  readonly selectedRoute?: string\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Timing = {\n  readonly duration: number\n  readonly easing: ReturnType<typeof Easing.bezier>\n}\n\n// The collapsed rail's width, and the expanded rail's bounds.\nconst COLLAPSED_WIDTH = 96\nconst EXPANDED_MIN_WIDTH = 220\nconst EXPANDED_MAX_WIDTH = 360\n\n// The page's 44dp above the contents, header or not, and the 20dp either\n// side of the expanded rail's pills, which fall between two steps of the\n// spacing scale and so are written out.\nconst TOP_PADDING = 44\nconst EXPANDED_PADDING = 20\n\n// How far a destination's focus ring reaches past it: the 2dp offset and the\n// 2dp ring. A scroll view clips what overflows it, so the block the\n// destinations scroll in is padded by this much and pulled back out by as\n// much, which leaves every destination where it was and every ring whole.\nconst RING_REACH = 4\n\nconst styles = StyleSheet.create({\n  // The form being drawn, as wide as it lays out, whatever the surface\n  // around it is moving through.\n  content: {\n    flexShrink: 0,\n  },\n  // The destinations' block, which takes the height the header leaves and\n  // scrolls what does not fit in it.\n  destinations: {\n    alignSelf: 'stretch',\n    flexBasis: 'auto',\n    flexGrow: 1,\n    flexShrink: 1,\n    margin: -RING_REACH,\n  },\n  // The safe area and the form inside it take the rail's height and no more,\n  // shrinking below what their destinations ask, since a view keeps its\n  // content's height by default and the block would then never scroll.\n  inset: {\n    flexGrow: 1,\n    flexShrink: 1,\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    // The collapsed rail, its destinations centred in it.\n    collapsed: {\n      alignItems: 'center',\n      flexGrow: 1,\n      flexShrink: 1,\n      paddingBottom: spacing.xl,\n      paddingTop: TOP_PADDING,\n      width: COLLAPSED_WIDTH,\n    },\n    // The collapsed rail's destinations, 4dp apart, in a list at least as\n    // tall as the block it scrolls in, which leaves an automatic margin the\n    // height they do not take.\n    collapsedList: {\n      alignItems: 'center',\n      flexGrow: 1,\n      gap: spacing.xs,\n      padding: RING_REACH,\n    },\n    // The expanded rail: as wide as its pills ask, within the page's bounds,\n    // 20dp either side of them.\n    expanded: {\n      flexGrow: 1,\n      flexShrink: 1,\n      maxWidth: EXPANDED_MAX_WIDTH,\n      minWidth: EXPANDED_MIN_WIDTH,\n      paddingBottom: spacing.xl,\n      paddingHorizontal: EXPANDED_PADDING,\n      paddingTop: TOP_PADDING,\n    },\n    // The expanded rail's pills, at its leading edge with no gap between,\n    // in a list as tall as the collapsed rail's.\n    expandedList: {\n      alignItems: 'flex-start',\n      flexGrow: 1,\n      padding: RING_REACH,\n    },\n    // What the rail draws above its destinations, the page's 40dp clear of\n    // the first: the collapsed rail's 4dp gap, and the rest of its own here.\n    header: {\n      alignItems: 'center',\n      marginBottom: spacing.xxxl - spacing.xs,\n    },\n    // The expanded rail has no gap between destinations, so its header keeps\n    // the whole 40dp. It starts at the leading edge where the pills do, 8dp\n    // in from there: a 40dp icon button centres its 24dp icon, and 8dp puts\n    // that icon over the pills' icons, 16dp into each pill.\n    headerExpanded: {\n      alignItems: 'flex-start',\n      alignSelf: 'stretch',\n      marginBottom: spacing.xxxl,\n      paddingStart: spacing.sm,\n    },\n    // The rail's surface. It keeps its width whatever sits beside it, and\n    // holds the form being drawn at its leading edge, clipping it while the\n    // surface is narrower.\n    rail: {\n      backgroundColor: colors.surface,\n      flexDirection: 'row',\n      flexShrink: 0,\n      overflow: 'hidden',\n    },\n  }),\n)\n\n// The edges the rail meets: the top, the bottom and its leading side, which\n// is the right one under right-to-left.\nfunction edgesOf(): readonly Edge[] {\n  return ['bottom', I18nManager.isRTL ? 'right' : 'left', 'top']\n}\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * goes to its `href` through the app's router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationRail selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * Draw it at the leading edge of a row holding the screen's content, which\n * gives it its height: it paints its surface to the screen's edges and keeps\n * its destinations clear of the status bar, the home indicator and a notch\n * itself.\n *\n * A destination wrapped in a view with `marginTop: 'auto'` sits at the\n * rail's foot, below the rest. Give the view `alignSelf: 'stretch'` as well,\n * so a collapsed destination in it is as wide as the others.\n *\n * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`\n * land on the rail's own view, its surface.\n */\nfunction NavigationRail({\n  'aria-label': ariaLabel,\n  children,\n  header,\n  isExpanded = false,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationRailProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const reduceMotion = useReducedMotion()\n  // The surface's width, unset until the form being drawn is first measured,\n  // which leaves the surface as wide as that form.\n  const width = useSharedValue<number | undefined>(undefined)\n  const context = useMemo(\n    () => ({\n      form: isExpanded ? ('expanded' as const) : ('collapsed' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [isExpanded, selectedRoute],\n  )\n  const widthStyle = useAnimatedStyle(() => {\n    'worklet'\n    const current = width.get()\n\n    return current === undefined ? {} : { width: current }\n  })\n\n  return (\n    <Animated.View\n      {...props}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        own.rail,\n        widthStyle,\n        style,\n      )}\n    >\n      <View\n        onLayout={widthThen(width, reduceMotion, timingOf(theme))}\n        style={styles.content}\n      >\n        <SafeAreaView edges={edgesOf()} style={styles.inset}>\n          <View style={isExpanded ? own.expanded : own.collapsed}>\n            {header === undefined ? null : (\n              <View\n                style={composeStyles<ViewStyle>(\n                  own.header,\n                  isExpanded ? own.headerExpanded : undefined,\n                )}\n              >\n                {header}\n              </View>\n            )}\n            <ScrollView\n              aria-label={ariaLabel}\n              contentContainerStyle={\n                isExpanded ? own.expandedList : own.collapsedList\n              }\n              role=\"tablist\"\n              style={styles.destinations}\n            >\n              <NavigationContext value={context}>{children}</NavigationContext>\n            </ScrollView>\n          </View>\n        </SafeAreaView>\n      </View>\n    </Animated.View>\n  )\n}\n\n/**\n * One destination of a navigation rail: an icon, a label and, while it is\n * the current one, the active indicator. Pressing it calls `onPress`, then\n * goes to its `href`. Renders nothing of its own outside a `NavigationRail`,\n * whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationRailItem(props: NavigationRailItemProps) {\n  return <NavigationItem {...props} />\n}\n\n// The rail's change of width, on the active indicator's duration and curve.\nfunction timingOf({ motion }: ResolvedTheme): Timing {\n  return {\n    duration: motion.durationLong2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n}\n\n// Moves the surface to the width the form being drawn lays out at: at once\n// the first time, and under reduced motion, and over the rail's timing\n// after that. Built by a call rather than written inline at the prop, which\n// is what react-perf's jsx-no-new-function-as-prop is after.\nfunction widthThen(\n  width: SharedValue<number | undefined>,\n  reduceMotion: boolean,\n  timing: Timing,\n) {\n  return (event: LayoutChangeEvent) => {\n    const next = event.nativeEvent.layout.width\n\n    width.set(\n      width.get() === undefined || reduceMotion\n        ? next\n        : withTiming(next, timing),\n    )\n  }\n}\n\nNavigationRail.Item = NavigationRailItem\n\nexport type { NavigationRailItemProps, NavigationRailProps }\n\nexport { NavigationRail, NavigationRailItem }\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.11.9",
+  "version": "0.11.11",
   "description": "Kanso UI's Material Design components for React Native, themed through the same --kui-* design tokens as the web library",
   "keywords": [
     "react-native",
@@ -61,22 +61,22 @@
     "@commitlint/config-conventional": "21.2.4",
     "@eslint/js": "10.0.1",
     "@jest/globals": "29.7.0",
-    "@kanso-labs/kanso-ui-core": "0.1.3",
-    "@react-native/babel-preset": "0.88.0",
-    "@react-native/jest-preset": "0.88.0",
+    "@kanso-labs/kanso-ui-core": "0.1.4",
+    "@react-native/babel-preset": "0.88.1",
+    "@react-native/jest-preset": "0.88.1",
     "@rolldown/plugin-babel": "0.2.4",
-    "@storybook/addon-a11y": "10.6.4",
-    "@storybook/addon-docs": "10.6.4",
-    "@storybook/addon-vitest": "10.6.4",
-    "@storybook/react": "10.6.4",
-    "@storybook/react-native-web-vite": "10.6.4",
+    "@storybook/addon-a11y": "10.6.5",
+    "@storybook/addon-docs": "10.6.5",
+    "@storybook/addon-vitest": "10.6.5",
+    "@storybook/react": "10.6.5",
+    "@storybook/react-native-web-vite": "10.6.5",
     "@testing-library/react-native": "14.1.0",
     "@types/node": "26.6.5",
     "@types/react": "19.3.0",
     "@vitest/browser-playwright": "5.0.5",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "10.13.0",
-    "eslint-plugin-oxlint": "1.89.0",
+    "eslint-plugin-oxlint": "1.90.0",
     "eslint-plugin-perfectionist": "5.13.0",
     "eslint-plugin-react-hooks": "7.1.1",
     "globals": "17.13.0",
@@ -85,20 +85,20 @@
     "jest-junit": "17.0.0",
     "lint-staged": "17.6.0",
     "oxfmt": "0.75.0",
-    "oxlint": "1.89.0",
+    "oxlint": "1.90.0",
     "oxlint-tsgolint": "7.0.2005",
     "playwright": "1.64.1",
     "publint": "0.3.25",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "react-native": "0.88.0",
+    "react-native": "0.88.1",
     "react-native-gesture-handler": "3.4.0",
     "react-native-reanimated": "4.7.1",
-    "react-native-safe-area-context": "5.10.1",
+    "react-native-safe-area-context": "5.11.0",
     "react-native-svg": "15.16.0",
     "react-native-web": "0.21.4",
     "react-native-worklets": "0.13.1",
-    "storybook": "10.6.4",
+    "storybook": "10.6.5",
     "test-renderer": "1.3.1",
     "tsdown": "0.23.2",
     "typescript": "6.0.3",