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

package/dist/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","PressableProps","StyleProp","TextStyle","ViewStyle","AnimatedStyle","createContext","use","useEffect","Text","NativeText","Pressable","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","IconStyle","ResolvedTheme","Badge","IconStyleContext","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","useTypeRole","INDICATOR","PILL_HEIGHT","styles","stylesOf","NavigationContextValue","form","NavigationForm","measuring","selectedRoute","NavigationDestinationProps","Omit","badge","children","icon","isDisabled","ref","style","GROWN_FROM","FADE_SHARE","ICON_SIZE","NavigationContext","ActiveIndicator","t0","$","_c","selected","theme","colors","motion","reduceMotion","progress","t1","t2","target","set","duration","durationLong2","easing","bezier","easingEmphasized","motionStyle","grown","get","opacity","Math","min","transform","scaleX","t3","secondaryContainer","fill","pill","backgroundColor","t4","DestinationContent","label","horizontal","iconStyleOf","iconColorOf","undefined","t5","stateLayerOpacity","onSurface","disabledContent","onSecondaryContainer","onSurfaceVariant","color","size","Label","role","labelColorOf","secondary","nameOf","NavigationDestination","ariaLabel","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","props","own","feedback","area","corners","disabled","content","Symbol","for","handlers","ring","layer","T0","t6","vertical","t7","T1","t8","indicator","t9","t10","t11","_c","NativeText"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  ColorValue,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { createContext, use, useEffect } from 'react'\nimport { Text as NativeText, Pressable, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { Badge } from '../badge'\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../press'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { INDICATOR, PILL_HEIGHT, styles, stylesOf } from './styles'\n\n// The destination NavigationBar draws, in the two forms its page gives it,\n// as kanso-ui's src/navigation draws it. Apart from the bar, so the forms it\n// shares with a rail cannot drift.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium. A horizontal one is\n// a 40dp pill holding the icon and the label side by side, 16dp in at either\n// end with 4dp between the two, in label medium too. Which one a destination\n// draws is the bar's to say, through the context it hands them.\n//\n// The current destination's indicator is the secondary container, with its\n// icon in on secondary container and, under the indicator, its label in\n// secondary; every other is on surface variant. A label set inside the pill,\n// as a horizontal destination sets it, takes on secondary container instead,\n// as on web: secondary over secondary container is not a pair a scheme is\n// held to, and on secondary container is.\n//\n// **The indicator grows** when its destination becomes current, and shrinks\n// back when another does: from 40% of its width to the whole of it from its\n// centre over `durationLong2` on the emphasized curve, fading in over the\n// first fifth of that, as Material's Android components draw it. Web draws it\n// at once. Under reduced motion it does here too.\n//\n// The state layer, the ripple and the focus ring are src/press's, in on\n// secondary container, drawn on the pill: the indicator in a vertical\n// destination, which its ripple grows from the centre of wherever it is\n// pressed, and the whole destination in a horizontal one. A horizontal pill's\n// press reaches 4dp above and below it, to the 48dp target; a vertical\n// destination is the bar's full height already. A disabled one draws its icon\n// and label on surface at the disabled content opacity, with no layer.\n//\n// A destination is a `tab`, reporting whether it is the selected one, and is\n// named by its label, or by `aria-label` where that is given: the badge on\n// its icon is hidden from a screen reader, so what it says belongs there.\n//\n// **The label comes first in the tree and is drawn after the icon**, through\n// a reversed column or row, so the text inside a destination starts with its\n// name. A badge's count is text, hidden from a screen reader but still\n// written inside the destination under React Native Web, and first in the\n// tree it put the count ahead of the name: a destination named \"Second item,\n// 3 new\" read \"3 Second item\", which is not what a speech-input user would\n// say, and is what axe's label-in-name check fails. src/badge sets the count\n// apart from the label with a space for the same reason.\n\n/** What a bar hands each of its destinations. */\ntype NavigationContextValue = {\n  readonly form: NavigationForm\n  /**\n   * Whether the destinations are being drawn off screen to measure the\n   * horizontal form, which draws each one's content and nothing else.\n   */\n  readonly measuring: boolean\n  /** The route of the current destination, matched against an `href`. */\n  readonly selectedRoute?: string | undefined\n}\n\ntype NavigationDestinationProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from a screen\n   * reader, so say what it says in the destination's `aria-label` too:\n   * \"First item, 3 new\".\n   */\n  readonly badge?: boolean | number | undefined\n  /** The destination's name, drawn as its label. */\n  readonly children?: ReactNode\n  /**\n   * The destination's icon, at the page's 24dp, which the destination hands\n   * its colour and size through `useIconStyle()`.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the destination disabled, and it takes no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/**\n * Which of the page's two forms a destination draws: the label under the\n * icon, or beside it.\n */\ntype NavigationForm = 'horizontal' | 'vertical'\n\n// The indicator's width when it starts to grow, as a share of its whole\n// width, and the share of the move it fades in over.\nconst GROWN_FROM = 0.4\nconst FADE_SHARE = 0.2\n\nconst ICON_SIZE = 24\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'vertical',\n  measuring: false,\n})\n\n/**\n * The active indicator's fill, which grows from its centre while its\n * destination is current and shrinks back once it is not.\n */\nfunction ActiveIndicator({ selected }: { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { colors, motion } = theme\n  const reduceMotion = useReducedMotion()\n  const progress = useSharedValue(selected ? 1 : 0)\n\n  useEffect(() => {\n    const target = selected ? 1 : 0\n\n    progress.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration: motion.durationLong2,\n            easing: Easing.bezier(...motion.easingEmphasized),\n          }),\n    )\n  }, [motion, progress, reduceMotion, selected])\n\n  const motionStyle = useAnimatedStyle(() => {\n    'worklet'\n    const grown = progress.get()\n\n    return {\n      opacity: Math.min(1, grown / FADE_SHARE),\n      transform: [{ scaleX: GROWN_FROM + (1 - GROWN_FROM) * grown }],\n    }\n  })\n\n  return (\n    <Animated.View\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.fill,\n        stylesOf(theme).pill,\n        { backgroundColor: colors.secondaryContainer },\n        motionStyle,\n      )}\n    />\n  )\n}\n\n/**\n * What a destination draws over its indicator: the icon and its badge, and\n * in a horizontal destination the label before them in the tree, which the\n * pill's reversed row draws after them.\n */\nfunction DestinationContent({\n  badge,\n  form,\n  icon,\n  isDisabled,\n  label,\n  selected,\n}: {\n  readonly badge: boolean | number | undefined\n  readonly form: NavigationForm\n  readonly icon: ReactNode\n  readonly isDisabled: boolean\n  readonly label: ReactNode\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const horizontal = form === 'horizontal'\n\n  return (\n    <>\n      {horizontal ? (\n        <Label form={form} isDisabled={isDisabled} selected={selected}>\n          {label}\n        </Label>\n      ) : null}\n      <View style={styles.icon}>\n        <IconStyleContext\n          value={iconStyleOf(iconColorOf(theme, isDisabled, selected))}\n        >\n          {badge === undefined || badge === false ? (\n            icon\n          ) : (\n            <Badge\n              count={badge === true ? undefined : badge}\n              inFlow={horizontal}\n            >\n              {icon}\n            </Badge>\n          )}\n        </IconStyleContext>\n      </View>\n    </>\n  )\n}\n\n/** The colour a destination draws its icon in. */\nfunction iconColorOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  return selected ? colors.onSecondaryContainer : colors.onSurfaceVariant\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction iconStyleOf(color: ColorValue): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n/** A destination's label, on one line, in label medium. */\nfunction Label({\n  children,\n  form,\n  isDisabled,\n  selected,\n}: {\n  readonly children: ReactNode\n  readonly form: NavigationForm\n  readonly isDisabled: boolean\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const role = useTypeRole('labelMedium')\n\n  return (\n    <NativeText\n      numberOfLines={1}\n      style={composeStyles<TextStyle>(role, styles.label, {\n        color: labelColorOf(theme, form, isDisabled, selected),\n      })}\n    >\n      {children}\n    </NativeText>\n  )\n}\n\n/** The colour a destination draws its label in, which its form decides. */\nfunction labelColorOf(\n  theme: ResolvedTheme,\n  form: NavigationForm,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  return selected && !isDisabled && form === 'vertical'\n    ? theme.colors.secondary\n    : iconColorOf(theme, isDisabled, selected)\n}\n\n// A label that is a string names its destination; anything else leaves the\n// name to `aria-label`.\nfunction nameOf(children: ReactNode): string | undefined {\n  return typeof children === 'string' ? children : undefined\n}\n\n/**\n * One destination, in the form the bar around it asks for: an icon and a\n * label, and the active indicator behind the icon while it is current. A\n * `tab` reporting whether it is selected.\n */\nfunction NavigationDestination({\n  'aria-label': ariaLabel,\n  badge,\n  children,\n  icon,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  selected,\n  style,\n  ...props\n}: NavigationDestinationProps & { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { form, measuring } = use(NavigationContext)\n  const own = stylesOf(theme)\n  const horizontal = form === 'horizontal'\n  const feedback = usePressFeedback({\n    area: horizontal ? undefined : INDICATOR,\n    color: theme.colors.onSecondaryContainer,\n    corners: own.pill,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n  const content = (\n    <DestinationContent\n      badge={badge}\n      form={form}\n      icon={icon}\n      isDisabled={isDisabled}\n      label={children}\n      selected={selected}\n    />\n  )\n\n  if (measuring) {\n    return <View style={own.horizontal}>{content}</View>\n  }\n\n  if (horizontal) {\n    return (\n      <Pressable\n        aria-label={ariaLabel ?? nameOf(children)}\n        aria-selected={selected}\n        hitSlop={hitSlop(PILL_HEIGHT)}\n        role=\"tab\"\n        {...props}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        style={composeStyles<ViewStyle>(own.horizontal, feedback.ring, style)}\n      >\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </Pressable>\n    )\n  }\n\n  return (\n    <Pressable\n      aria-label={ariaLabel ?? nameOf(children)}\n      aria-selected={selected}\n      role=\"tab\"\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(own.vertical, style)}\n    >\n      <Label form={form} isDisabled={isDisabled} selected={selected}>\n        {children}\n      </Label>\n      <View style={composeStyles<ViewStyle>(own.indicator, feedback.ring)}>\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </View>\n    </Pressable>\n  )\n}\n\nexport type {\n  NavigationContextValue,\n  NavigationDestinationProps,\n  NavigationForm,\n}\n\nexport { iconColorOf, labelColorOf, NavigationContext, NavigationDestination }\n"],"mappings":";;;;;;;;;;;;;;AA2HA,MAAMiD,aAAa;AACnB,MAAMC,aAAa;AAEnB,MAAMC,YAAY;AAElB,MAAMC,oBAAoB3C,cAAsC;CAC9D4B,MAAM;CACNE,WAAW;AACb,CAAC;;;;;AAMD,SAAAc,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAyB,MAAA,EAAAC,aAAAH;CACvB,MAAAI,QAAc7B,SAAS;CACvB,MAAA,EAAA8B,QAAAC,WAA2BF;CAC3B,MAAAG,eAAqB1C,iBAAiB;CACtC,MAAA2C,WAAiB1C,eAAeqC,WAAA,IAAA,CAAgB;CAAC,IAAAM;CAAA,IAAAC;CAAA,IAAAT,EAAA,OAAAK,UAAAL,EAAA,OAAAO,YAAAP,EAAA,OAAAM,gBAAAN,EAAA,OAAAE,UAAA;EAEvCM,WAAA;GACR,MAAAE,SAAeR,WAAA,IAAA;GAEfK,SAAQI,IACNL,eAAAI,SAEI5C,WAAW4C,QAAQ;IAAAE,UACPP,OAAMQ;IAAcC,QACtBpD,OAAMqD,OAAO,GAAIV,OAAMW,gBAAiB;GAClD,CAAC,CACP;EAAC;EACAP,KAAA;GAACJ;GAAQE;GAAUD;GAAcJ;EAAQ;EAACF,EAAA,KAAAK;EAAAL,EAAA,KAAAO;EAAAP,EAAA,KAAAM;EAAAN,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAA;EAAAD,KAAAR,EAAA;EAAAS,KAAAT,EAAA;CAAA;CAX7C5C,UAAUoD,IAWPC,EAA0C;CAE7C,MAAAQ,cAAoBtD,uBAAiB;EAAA;EAEnC,MAAAuD,QAAcX,SAAQY,IAAK;EAAC,OAErB;GAAAC,SACIC,KAAIC,IAAK,GAAGJ,QAAQvB,UAAU;GAAC4B,WAC7B,CAAC,EAAAC,QAAU9B,aAAc,KAAkBwB,MAAM,CAAC;EAC/D;CAAC,CACF;CAAC,IAAAO;CAAA,IAAAzB,EAAA,OAAAI,OAAAsB,sBAAA1B,EAAA,OAAAiB,eAAAjB,EAAA,OAAAG,OAAA;EAISsB,KAAAlD,cACLI,OAAMgD,MACN/C,SAASuB,KAAK,CAAC,CAAAyB,MACf,EAAAC,iBAAmBzB,OAAMsB,mBAAoB,GAC7CT,WACF;EAACjB,EAAA,KAAAI,OAAAsB;EAAA1B,EAAA,KAAAiB;EAAAjB,EAAA,KAAAG;EAAAH,EAAA,KAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA8B;CAAA,IAAA9B,EAAA,QAAAyB,IAAA;EANHK,KAAA,oBAAA,SAAA,MAAA,EACS,OAAAL,GAKN,CAAA;EACDzB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA8B;CAAA,OAAAA,KAAA9B,EAAA;CAAA,OAPF8B;AAOE;;;;;;AASN,SAAAC,mBAAAhC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAA4B,MAAA,EAAAb,OAAAN,MAAAQ,MAAAC,YAAAyC,OAAA9B,aAAAH;CAe1B,MAAAI,QAAc7B,SAAS;CACvB,MAAA2D,aAAmBnD,SAAS;CAAY,IAAA0B;CAAA,IAAAR,EAAA,OAAAlB,QAAAkB,EAAA,OAAAiC,cAAAjC,EAAA,OAAAT,cAAAS,EAAA,OAAAgC,SAAAhC,EAAA,OAAAE,UAAA;EAInCM,KAAAyB,aACC,oBAAC,OAAD;GAAanD;GAAkBS;GAAsBW;GAClD8B,UAAAA;EADG,CAAA,IADP;EAIOhC,EAAA,KAAAlB;EAAAkB,EAAA,KAAAiC;EAAAjC,EAAA,KAAAT;EAAAS,EAAA,KAAAgC;EAAAhC,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAT,cAAAS,EAAA,OAAAE,YAAAF,EAAA,OAAAG,OAAA;EAGGM,KAAAyB,YAAYC,YAAYhC,OAAOZ,YAAYW,QAAQ,CAAC;EAACF,EAAA,KAAAT;EAAAS,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAZ,SAAAY,EAAA,QAAAiC,cAAAjC,EAAA,QAAAV,MAAA;EAE3DmC,KAAArC,UAAUgD,KAAAA,KAAahD,UAAU,QAAjCE,OAGC,oBAAC,OAAD;GACS,OAAAF,UAAU,OAAVgD,KAAAA,IAAAhD;GACC6C,QAAAA;GAEP3C,UAAAA;EAJG,CAAA;EAMPU,EAAA,MAAAZ;EAAAY,EAAA,MAAAiC;EAAAjC,EAAA,MAAAV;EAAAU,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA8B;CAAA,IAAA9B,EAAA,QAAAS,MAAAT,EAAA,QAAAyB,IAAA;EAbLK,KAAA,oBAAC,MAAD;GAAa,OAAAnD,OAAMW;GACjB,UAAA,oBAAC,kBAAD;IACS,OAAAmB;IAENgB,UAAAA;GAHc,CAAA;EADd,CAAA;EAeEzB,EAAA,MAAAS;EAAAT,EAAA,MAAAyB;EAAAzB,EAAA,MAAA8B;CAAA,OAAAA,KAAA9B,EAAA;CAAA,IAAAqC;CAAA,IAAArC,EAAA,QAAAQ,MAAAR,EAAA,QAAA8B,IAAA;EArBTO,KAAA,qBAAA,YAAA,EAAA,UAAA,CACG7B,IAKDsB,EAeO,EAAA,CAAA;EACN9B,EAAA,MAAAQ;EAAAR,EAAA,MAAA8B;EAAA9B,EAAA,MAAAqC;CAAA,OAAAA,KAAArC,EAAA;CAAA,OAtBHqC;AAsBG;;AAKP,SAASF,YACP,EAAE/B,QAAQkC,qBACV/C,YACAW,UACQ;CACR,IAAIX,YACF,OAAOlB,YAAY+B,OAAOmC,WAAWD,kBAAkBE,eAAe;CAExE,OAAOtC,WAAWE,OAAOqC,uBAAuBrC,OAAOsC;AACzD;AAKA,SAASR,YAAYS,OAA8B;CACjD,OAAO;EAAEA;EAAOC,MAAMhD;CAAU;AAClC;;AAGA,SAAAiD,MAAA9C,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAe,MAAA,EAAAZ,UAAAP,MAAAS,YAAAW,aAAAH;CAWb,MAAAI,QAAc7B,SAAS;CACvB,MAAAwE,OAAatE,YAAY,aAAa;CAAC,IAAAgC;CAAA,IAAAR,EAAA,OAAAlB,QAAAkB,EAAA,OAAAT,cAAAS,EAAA,OAAA8C,QAAA9C,EAAA,OAAAE,YAAAF,EAAA,OAAAG,OAAA;EAK5BK,KAAAjC,cAAyBuE,MAAMnE,OAAMqD,OAAQ,EAAAW,OAC3CI,aAAa5C,OAAOrB,MAAMS,YAAYW,QAAQ,EACvD,CAAC;EAACF,EAAA,KAAAlB;EAAAkB,EAAA,KAAAT;EAAAS,EAAA,KAAA8C;EAAA9C,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAX,YAAAW,EAAA,OAAAQ,IAAA;EAJJC,KAAA,oBAACwE,MAAD;GACiB,eAAA;GACR,OAAAzE;GAINnB;EANQ,CAAA;EAOEW,EAAA,KAAAX;EAAAW,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAPbS;AAOa;;AAKjB,SAASsC,aACP5C,OACArB,MACAS,YACAW,UACQ;CACR,OAAOA,YAAY,CAACX,cAAcT,SAAS,aACvCqB,MAAMC,OAAO4C,YACbb,YAAYhC,OAAOZ,YAAYW,QAAQ;AAC7C;AAIA,SAAS+C,OAAO5D,UAAyC;CACvD,OAAO,OAAOA,aAAa,WAAWA,WAAW+C,KAAAA;AACnD;;;;;;AAOA,SAAAc,sBAAAnD,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAkD;CAAA,IAAA/D;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAA8D;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAxD;CAAA,IAAAT;CAAA,IAAAe;CAAA,IAAAR,EAAA,OAAAD,IAAA;EAA+B,CAAA,CAAA,cAAAoD,WAAA/D,OAAAC,UAAAC,MAAAC,YAAAiB,IAAA4C,QAAAC,SAAAC,WAAAC,YAAAC,WAAAC,YAAAvD,UAAAT,OAAA,GAAAiE,SAAA3D;EAe+BC,EAAA,KAAAD;EAAAC,EAAA,KAAAmD;EAAAnD,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAV;EAAAU,EAAA,KAAAoD;EAAApD,EAAA,KAAAqD;EAAArD,EAAA,KAAAsD;EAAAtD,EAAA,KAAAuD;EAAAvD,EAAA,KAAAwD;EAAAxD,EAAA,MAAAyD;EAAAzD,EAAA,MAAA0D;EAAA1D,EAAA,MAAAE;EAAAF,EAAA,MAAAP;EAAAO,EAAA,MAAAQ;CAAA,OAAA;EAAA2C,YAAAnD,EAAA;EAAAZ,QAAAY,EAAA;EAAAX,WAAAW,EAAA;EAAAV,OAAAU,EAAA;EAAAoD,SAAApD,EAAA;EAAAqD,UAAArD,EAAA;EAAAsD,YAAAtD,EAAA;EAAAuD,aAAAvD,EAAA;EAAAwD,YAAAxD,EAAA;EAAAyD,aAAAzD,EAAA;EAAA0D,QAAA1D,EAAA;EAAAE,WAAAF,EAAA;EAAAP,QAAAO,EAAA;EAAAQ,KAAAR,EAAA;CAAA;CAV5D,MAAAT,aAAAiB,OAAA4B,KAAAA,IAAA,QAAA5B;CAWA,MAAAL,QAAc7B,SAAS;CACvB,MAAA,EAAAQ,MAAAE,cAA4B7B,IAAI0C,iBAAiB;CACjD,MAAA8D,MAAY/E,SAASuB,KAAK;CAC1B,MAAA8B,aAAmBnD,SAAS;CAC5B,MAAA8E,WAAiBxF,iBAAiB;EAAAyF,MAC1B5B,aAAAG,KAAAA,IAAA3D;EAAkCkE,OACjCxC,MAAKC,OAAOqC;EAAqBqB,SAC/BH,IAAG/B;EAAKmC,UACPxE;EAAU6D;EAAAC;EAAAC;EAAAC;EAAAC;EAAAC;CAOtB,CAAC;CAAC,IAAAhD;CAAA,IAAAT,EAAA,QAAAZ,SAAAY,EAAA,QAAAX,YAAAW,EAAA,QAAAlB,QAAAkB,EAAA,QAAAV,QAAAU,EAAA,QAAAT,cAAAS,EAAA,QAAAE,UAAA;EAEAO,KAAA,oBAAC,oBAAD;GACSrB;GACDN;GACAQ;GACMC;GACLF,OAAAA;GACGa;EAAQ,CAAA;EAClBF,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAlB;EAAAkB,EAAA,MAAAV;EAAAU,EAAA,MAAAT;EAAAS,EAAA,MAAAE;EAAAF,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CARJ,MAAAgE,UACEvD;CAUF,IAAIzB,WAAS,OACJ,oBAAC,MAAD;EAAa,OAAA2E,IAAG1B;EAAc+B,UAAAA;CAAzB,CAAA;CAGd,IAAI/B,YAAU;EAAA,IAAAR;EAAA,IAAAzB,EAAA,QAAAmD,aAAAnD,EAAA,QAAAX,UAAA;GAGIoC,KAAA0B,aAAaF,OAAO5D,QAAQ;GAACW,EAAA,MAAAmD;GAAAnD,EAAA,MAAAX;GAAAW,EAAA,MAAAyB;EAAA,OAAAA,KAAAzB,EAAA;EAAA,IAAA8B;EAAA,IAAA9B,EAAA,QAAAiE,OAAAC,IAAA,2BAAA,GAAA;GAEhCpC,KAAA3D,QAAAA,EAAmB;GAAC6B,EAAA,MAAA8B;EAAA,OAAAA,KAAA9B,EAAA;EAAA,IAAAqC;EAAA,IAAArC,EAAA,QAAAE,UAAA;GAO7BmC,KAAA,oBAAC,iBAAD,EAA2BnC,SAAQ,CAAA;GAAIF,EAAA,MAAAE;GAAAF,EAAA,MAAAqC;EAAA,OAAAA,KAAArC,EAAA;EAAA,OAVzC,qBAAC,WAAD;GACc,cAAAyB;GACGvB,iBAAAA;GACN,SAAA4B;GACJ,MAAA;GAAK,GACN4B;GAAK,GACLE,SAAQO;GACF5E,UAAAA;GACH,OAAAhB,cAAyBoF,IAAG1B,YAAa2B,SAAQQ,MAAO3E,KAAK;GARtE,UAAA;IAUE4C;IACCuB,SAAQS;IACRL;GAZO;;CAaE;CAKb,MAAAM,KAAA/G;CAAS,IAAAkE;CAAA,IAAAzB,EAAA,QAAAmD,aAAAnD,EAAA,QAAAX,UAAA;EACIoC,KAAA0B,aAAaF,OAAO5D,QAAQ;EAACW,EAAA,MAAAmD;EAAAnD,EAAA,MAAAX;EAAAW,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAEpC,MAAA8B,KAAA;CAED,MAAAO,KAAAuB,SAAQO;CAEL,MAAAI,KAAAhG,cAAyBoF,IAAGa,UAAW/E,KAAK;CAAC,IAAAgF;CAAA,IAAAzE,EAAA,QAAAX,YAAAW,EAAA,QAAAlB,QAAAkB,EAAA,QAAAT,cAAAS,EAAA,QAAAE,UAAA;EAEpDuE,KAAA,oBAAC,OAAD;GAAa3F;GAAkBS;GAAsBW;GAClDb;EADG,CAAA;EAEEW,EAAA,MAAAX;EAAAW,EAAA,MAAAlB;EAAAkB,EAAA,MAAAT;EAAAS,EAAA,MAAAE;EAAAF,EAAA,MAAAyE;CAAA,OAAAA,KAAAzE,EAAA;CACP,MAAA0E,KAAAlH;CAAY,MAAAmH,KAAApG,cAAyBoF,IAAGiB,WAAYhB,SAAQQ,IAAK;CAAC,IAAAS;CAAA,IAAA7E,EAAA,QAAAE,UAAA;EACjE2E,KAAA,oBAAC,iBAAD,EAA2B3E,SAAQ,CAAA;EAAIF,EAAA,MAAAE;EAAAF,EAAA,MAAA6E;CAAA,OAAAA,KAAA7E,EAAA;CAAA,IAAA8E;CAAA,IAAA9E,EAAA,QAAA0E,MAAA1E,EAAA,QAAAgE,WAAAhE,EAAA,QAAA4D,SAAAS,SAAArE,EAAA,QAAA2E,MAAA3E,EAAA,QAAA6E,IAAA;EADzCC,MAAA,qBAAC,IAAD;GAAa,OAAAH;GAAb,UAAA;IACEE;IACCjB,SAAQS;IACRL;GAHE;;EAIEhE,EAAA,MAAA0E;EAAA1E,EAAA,MAAAgE;EAAAhE,EAAA,MAAA4D,SAAAS;EAAArE,EAAA,MAAA2E;EAAA3E,EAAA,MAAA6E;EAAA7E,EAAA,MAAA8E;CAAA,OAAAA,MAAA9E,EAAA;CAAA,IAAA+E;CAAA,IAAA/E,EAAA,QAAAsE,MAAAtE,EAAA,QAAA4D,SAAAO,YAAAnE,EAAA,QAAAT,cAAAS,EAAA,QAAA0D,SAAA1D,EAAA,QAAAE,YAAAF,EAAA,QAAA8E,OAAA9E,EAAA,QAAAyB,MAAAzB,EAAA,QAAAuE,MAAAvE,EAAA,QAAAyE,IAAA;EAhBTM,MAAA,qBAAC,IAAD;GACc,cAAAtD;GACGvB,iBAAAA;GACV,MAAA4B;GAAK,GACN4B;GAAK,GACLrB;GACM9C,UAAAA;GACH,OAAAgF;GAPT,UAAA,CASEE,IAGAK,GAZQ;;EAiBE9E,EAAA,MAAAsE;EAAAtE,EAAA,MAAA4D,SAAAO;EAAAnE,EAAA,MAAAT;EAAAS,EAAA,MAAA0D;EAAA1D,EAAA,MAAAE;EAAAF,EAAA,MAAA8E;EAAA9E,EAAA,MAAAyB;EAAAzB,EAAA,MAAAuE;EAAAvE,EAAA,MAAAyE;EAAAzE,EAAA,MAAA+E;CAAA,OAAAA,MAAA/E,EAAA;CAAA,OAjBZ+E;AAiBY"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","PressableProps","StyleProp","TextStyle","ViewStyle","AnimatedStyle","createContext","use","useEffect","Text","NativeText","Pressable","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","IconStyle","ResolvedTheme","Badge","IconStyleContext","hitSlop","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","useTypeRole","INDICATOR","PILL_HEIGHT","styles","stylesOf","NavigationContextValue","form","NavigationForm","measuring","selectedRoute","NavigationDestinationProps","Omit","badge","children","icon","isDisabled","ref","style","NavigationItemProps","href","GROWN_FROM","FADE_SHARE","ICON_SIZE","BESIDE","Readonly","Record","collapsed","expanded","horizontal","vertical","NavigationContext","ActiveIndicator","t0","$","_c","selected","theme","colors","motion","reduceMotion","progress","t1","t2","target","set","duration","durationLong2","easing","bezier","easingEmphasized","motionStyle","grown","get","opacity","Math","min","transform","scaleX","t3","secondaryContainer","fill","pill","backgroundColor","t4","DestinationContent","label","beside","iconStyleOf","iconColorOf","undefined","t5","stateLayerOpacity","onSurface","disabledContent","onSecondaryContainer","onSurfaceVariant","color","size","Label","role","labelColorOf","secondary","nameOf","NavigationDestination","ariaLabel","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","props","own","feedback","area","corners","disabled","content","handlers","ring","layer","T0","t6","t7","T1","t8","indicator","t9","t10","t11","NavigationItem","onPress","press","_c","NativeText"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  ColorValue,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { createContext, use, useEffect } from 'react'\nimport { Text as NativeText, Pressable, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { Badge } from '../badge'\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../press'\nimport { useLinkPress } from '../router'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { INDICATOR, PILL_HEIGHT, styles, stylesOf } from './styles'\n\n// The destination NavigationBar and NavigationRail both draw, in the four\n// forms their pages give it, as kanso-ui's src/navigation draws it. Apart\n// from either component, so the two cannot drift.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the bar in a\n// compact window, sharing its width with the others, and the collapsed rail,\n// as wide as the rail. A horizontal one is a pill holding the icon and the\n// label side by side, 16dp in at either end: the bar from the medium window\n// size class at 40dp with 4dp between the two in label medium, and the\n// expanded rail at 56dp with 8dp between them in label large. Which form a\n// destination draws is its bar's or its rail's to say, through the context\n// it hands them.\n//\n// The current destination's indicator is the secondary container, with its\n// icon in on secondary container and, under the indicator, its label in\n// secondary; every other is on surface variant. A label set inside the pill,\n// as a horizontal destination sets it, takes on secondary container instead,\n// as on web: secondary over secondary container is not a pair a scheme is\n// held to, and on secondary container is.\n//\n// **The indicator grows** when its destination becomes current, and shrinks\n// back when another does: from 40% of its width to the whole of it from its\n// centre over `durationLong2` on the emphasized curve, fading in over the\n// first fifth of that, as Material's Android components draw it. Web draws it\n// at once. Under reduced motion it does here too.\n//\n// The state layer, the ripple and the focus ring are src/press's, in on\n// secondary container, drawn on the pill: the indicator in a vertical\n// destination, which its ripple grows from the centre of wherever it is\n// pressed, and the whole destination in a horizontal one. The bar's 40dp\n// pill's press reaches 4dp above and below it, to the 48dp target; a\n// vertical destination is the bar's full height already, and the other two\n// forms are 56dp and 64dp tall. A disabled one draws its icon\n// and label on surface at the disabled content opacity, with no layer.\n//\n// A destination is a `tab`, reporting whether it is the selected one, and is\n// named by its label, or by `aria-label` where that is given: the badge on\n// its icon is hidden from a screen reader, so what it says belongs there.\n//\n// **The label comes first in the tree and is drawn after the icon**, through\n// a reversed column or row, so the text inside a destination starts with its\n// name. A badge's count is text, hidden from a screen reader but still\n// written inside the destination under React Native Web, and first in the\n// tree it put the count ahead of the name: a destination named \"Second item,\n// 3 new\" read \"3 Second item\", which is not what a speech-input user would\n// say, and is what axe's label-in-name check fails. src/badge sets the count\n// apart from the label with a space for the same reason.\n\n/** What a bar hands each of its destinations. */\ntype NavigationContextValue = {\n  readonly form: NavigationForm\n  /**\n   * Whether the destinations are being drawn off screen to measure the\n   * horizontal form, which draws each one's content and nothing else.\n   */\n  readonly measuring: boolean\n  /** The route of the current destination, matched against an `href`. */\n  readonly selectedRoute?: string | undefined\n}\n\ntype NavigationDestinationProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from a screen\n   * reader, so say what it says in the destination's `aria-label` too:\n   * \"First item, 3 new\".\n   */\n  readonly badge?: boolean | number | undefined\n  /** The destination's name, drawn as its label. */\n  readonly children?: ReactNode\n  /**\n   * The destination's icon, at the page's 24dp, which the destination hands\n   * its colour and size through `useIconStyle()`.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the destination disabled, and it takes no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/**\n * Which form a destination draws: the bar's `vertical` and `horizontal`,\n * and the rail's `collapsed` and `expanded`. The label is under the icon in\n * the first and the third, and beside it in the other two.\n */\ntype NavigationForm = 'collapsed' | 'expanded' | 'horizontal' | 'vertical'\n\ntype NavigationItemProps = NavigationDestinationProps & {\n  /**\n   * Where the destination goes, through the app's router, and what the\n   * `selectedRoute` around it is matched against.\n   */\n  readonly href: string\n}\n\n// The indicator's width when it starts to grow, as a share of its whole\n// width, and the share of the move it fades in over.\nconst GROWN_FROM = 0.4\nconst FADE_SHARE = 0.2\n\nconst ICON_SIZE = 24\n\n// Whether a form sets the label beside the icon rather than under it.\nconst BESIDE: Readonly<Record<NavigationForm, boolean>> = {\n  collapsed: false,\n  expanded: true,\n  horizontal: true,\n  vertical: false,\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'vertical',\n  measuring: false,\n})\n\n/**\n * The active indicator's fill, which grows from its centre while its\n * destination is current and shrinks back once it is not.\n */\nfunction ActiveIndicator({ selected }: { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { colors, motion } = theme\n  const reduceMotion = useReducedMotion()\n  const progress = useSharedValue(selected ? 1 : 0)\n\n  useEffect(() => {\n    const target = selected ? 1 : 0\n\n    progress.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration: motion.durationLong2,\n            easing: Easing.bezier(...motion.easingEmphasized),\n          }),\n    )\n  }, [motion, progress, reduceMotion, selected])\n\n  const motionStyle = useAnimatedStyle(() => {\n    'worklet'\n    const grown = progress.get()\n\n    return {\n      opacity: Math.min(1, grown / FADE_SHARE),\n      transform: [{ scaleX: GROWN_FROM + (1 - GROWN_FROM) * grown }],\n    }\n  })\n\n  return (\n    <Animated.View\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.fill,\n        stylesOf(theme).pill,\n        { backgroundColor: colors.secondaryContainer },\n        motionStyle,\n      )}\n    />\n  )\n}\n\n/**\n * What a destination draws over its indicator: the icon and its badge, and\n * where the label is beside the icon the label before them in the tree,\n * which the pill's reversed row draws after them.\n */\nfunction DestinationContent({\n  badge,\n  form,\n  icon,\n  isDisabled,\n  label,\n  selected,\n}: {\n  readonly badge: boolean | number | undefined\n  readonly form: NavigationForm\n  readonly icon: ReactNode\n  readonly isDisabled: boolean\n  readonly label: ReactNode\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const beside = BESIDE[form]\n\n  return (\n    <>\n      {beside ? (\n        <Label form={form} isDisabled={isDisabled} selected={selected}>\n          {label}\n        </Label>\n      ) : null}\n      <View style={styles.icon}>\n        <IconStyleContext\n          value={iconStyleOf(iconColorOf(theme, isDisabled, selected))}\n        >\n          {badge === undefined || badge === false ? (\n            icon\n          ) : (\n            <Badge count={badge === true ? undefined : badge} inFlow={beside}>\n              {icon}\n            </Badge>\n          )}\n        </IconStyleContext>\n      </View>\n    </>\n  )\n}\n\n/** The colour a destination draws its icon in. */\nfunction iconColorOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  return selected ? colors.onSecondaryContainer : colors.onSurfaceVariant\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction iconStyleOf(color: ColorValue): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n/**\n * A destination's label, on one line: in label large in an expanded rail,\n * and in label medium everywhere else.\n */\nfunction Label({\n  children,\n  form,\n  isDisabled,\n  selected,\n}: {\n  readonly children: ReactNode\n  readonly form: NavigationForm\n  readonly isDisabled: boolean\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const role = useTypeRole(form === 'expanded' ? 'labelLarge' : 'labelMedium')\n\n  return (\n    <NativeText\n      numberOfLines={1}\n      style={composeStyles<TextStyle>(role, styles.label, {\n        color: labelColorOf(theme, form, isDisabled, selected),\n      })}\n    >\n      {children}\n    </NativeText>\n  )\n}\n\n/** The colour a destination draws its label in, which its form decides. */\nfunction labelColorOf(\n  theme: ResolvedTheme,\n  form: NavigationForm,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  return selected && !isDisabled && !BESIDE[form]\n    ? theme.colors.secondary\n    : iconColorOf(theme, isDisabled, selected)\n}\n\n// A label that is a string names its destination; anything else leaves the\n// name to `aria-label`.\nfunction nameOf(children: ReactNode): string | undefined {\n  return typeof children === 'string' ? children : undefined\n}\n\n/**\n * One destination, in the form the bar around it asks for: an icon and a\n * label, and the active indicator behind the icon while it is current. A\n * `tab` reporting whether it is selected.\n */\nfunction NavigationDestination({\n  'aria-label': ariaLabel,\n  badge,\n  children,\n  icon,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  selected,\n  style,\n  ...props\n}: NavigationDestinationProps & { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { form, measuring } = use(NavigationContext)\n  const own = stylesOf(theme)\n  const beside = BESIDE[form]\n  const feedback = usePressFeedback({\n    area: beside ? undefined : INDICATOR,\n    color: theme.colors.onSecondaryContainer,\n    corners: own.pill,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n  const content = (\n    <DestinationContent\n      badge={badge}\n      form={form}\n      icon={icon}\n      isDisabled={isDisabled}\n      label={children}\n      selected={selected}\n    />\n  )\n\n  if (measuring) {\n    return <View style={own.horizontal}>{content}</View>\n  }\n\n  if (beside) {\n    return (\n      <Pressable\n        aria-label={ariaLabel ?? nameOf(children)}\n        aria-selected={selected}\n        hitSlop={form === 'horizontal' ? hitSlop(PILL_HEIGHT) : undefined}\n        role=\"tab\"\n        {...props}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        style={composeStyles<ViewStyle>(own[form], feedback.ring, style)}\n      >\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </Pressable>\n    )\n  }\n\n  return (\n    <Pressable\n      aria-label={ariaLabel ?? nameOf(children)}\n      aria-selected={selected}\n      role=\"tab\"\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(own[form], style)}\n    >\n      <Label form={form} isDisabled={isDisabled} selected={selected}>\n        {children}\n      </Label>\n      <View style={composeStyles<ViewStyle>(own.indicator, feedback.ring)}>\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </View>\n    </Pressable>\n  )\n}\n\n/**\n * A destination that goes to its `href` through the app's router, selected\n * while the `selectedRoute` around it is that `href`: the item of a bar and\n * of a rail alike.\n */\nfunction NavigationItem({ href, onPress, ...props }: NavigationItemProps) {\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\nexport type {\n  NavigationContextValue,\n  NavigationDestinationProps,\n  NavigationForm,\n  NavigationItemProps,\n}\n\nexport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n  NavigationItem,\n}\n"],"mappings":"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"}

package/dist/navigation/styles.js

@@ -5,6 +5,7 @@ const INDICATOR = {
 	height: 32,
 	width: 56
 };
+const EXPANDED_PILL_HEIGHT = 56;
 const VERTICAL_PADDING = 6;
 const styles = StyleSheet.create({
 	fill: {
@@ -25,6 +26,27 @@ const styles = StyleSheet.create({
 	}
 });
 const stylesOf = themedStyles(({ radii, spacing }) => StyleSheet.create({
+	collapsed: {
+		alignItems: "center",
+		alignSelf: "stretch",
+		flexDirection: "column-reverse",
+		flexShrink: 0,
+		gap: spacing.xs,
+		justifyContent: "center",
+		paddingHorizontal: spacing.xs,
+		paddingVertical: VERTICAL_PADDING
+	},
+	expanded: {
+		alignItems: "center",
+		alignSelf: "flex-start",
+		borderRadius: radii.pill,
+		flexDirection: "row-reverse",
+		flexShrink: 0,
+		gap: spacing.sm,
+		maxWidth: "100%",
+		minHeight: EXPANDED_PILL_HEIGHT,
+		paddingHorizontal: spacing.lg
+	},
 	horizontal: {
 		alignItems: "center",
 		borderRadius: radii.pill,

package/dist/navigation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","INDICATOR","height","width","const","PILL_HEIGHT","VERTICAL_PADDING","styles","create","fill","bottom","end","position","start","top","icon","alignItems","flexShrink","justifyContent","label","maxWidth","stylesOf","radii","spacing","horizontal","borderRadius","pill","flexDirection","gap","xs","minHeight","paddingHorizontal","lg","indicator","vertical","flexBasis","flexGrow","minWidth","paddingVertical"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The page's active indicator in a vertical destination: 56dp by 32dp, the\n// icon centred in it.\nconst INDICATOR = { height: 32, width: 56 } as const\n\n// A horizontal destination's pill, the page's 40dp, which its press reaches\n// past to the 48dp target.\nconst PILL_HEIGHT = 40\n\n// A vertical destination's padding above the indicator and below the label,\n// which puts the two in the bar's 64dp: 6, 32, 4 and 16, then 6.\nconst VERTICAL_PADDING = 6\n\nconst styles = StyleSheet.create({\n  // The active indicator's fill, behind the icon in a vertical destination\n  // and behind the whole pill in a horizontal one.\n  fill: {\n    bottom: 0,\n    end: 0,\n    position: 'absolute',\n    start: 0,\n    top: 0,\n  },\n  // An icon, and the badge on it, never squeezed by a long label.\n  icon: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  // The label never wraps: a destination's name is a word or two, and one\n  // broken over two lines would push its neighbours apart. Cut short with an\n  // ellipsis where the destination is narrower than it.\n  label: {\n    flexShrink: 1,\n    maxWidth: '100%',\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    // A horizontal destination: the pill, holding the icon and the label side\n    // by side, 16dp in at either end and 4dp between the two, as wide as what\n    // it holds. Reversed, since the label comes first in the tree.\n    horizontal: {\n      alignItems: 'center',\n      borderRadius: radii.pill,\n      flexDirection: 'row-reverse',\n      flexShrink: 0,\n      gap: spacing.xs,\n      justifyContent: 'center',\n      minHeight: PILL_HEIGHT,\n      paddingHorizontal: spacing.lg,\n    },\n    // The active indicator of a vertical destination, which draws the layers\n    // and the ring as well as the fill.\n    indicator: {\n      alignItems: 'center',\n      borderRadius: radii.pill,\n      flexShrink: 0,\n      height: INDICATOR.height,\n      justifyContent: 'center',\n      width: INDICATOR.width,\n    },\n    // The fill's corners, the pill's.\n    pill: {\n      borderRadius: radii.pill,\n    },\n    // A vertical destination: the indicator with the label 4dp under it,\n    // sharing the bar's width with the others. Its press is the whole of\n    // that share, so it needs no reach of its own. Reversed, since the label\n    // comes first in the tree.\n    vertical: {\n      alignItems: 'center',\n      flexBasis: 0,\n      flexDirection: 'column-reverse',\n      flexGrow: 1,\n      gap: spacing.xs,\n      justifyContent: 'center',\n      minWidth: 0,\n      paddingVertical: VERTICAL_PADDING,\n    },\n  }),\n)\n\nexport { INDICATOR, PILL_HEIGHT, styles, stylesOf }\n"],"mappings":";;;AAMA,MAAME,YAAY;CAAEC,QAAQ;CAAIC,OAAO;AAAG;AAQ1C,MAAMG,mBAAmB;AAEzB,MAAMC,SAASR,WAAWS,OAAO;CAG/BC,MAAM;EACJC,QAAQ;EACRC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,KAAK;CACP;CAEAC,MAAM;EACJC,YAAY;EACZC,YAAY;EACZC,gBAAgB;CAClB;CAIAC,OAAO;EACLF,YAAY;EACZG,UAAU;CACZ;AACF,CAAC;AAED,MAAMC,WAAWrB,cAAc,EAAEsB,OAAOC,cACtCxB,WAAWS,OAAO;CAIhBgB,YAAY;EACVR,YAAY;EACZS,cAAcH,MAAMI;EACpBC,eAAe;EACfV,YAAY;EACZW,KAAKL,QAAQM;EACbX,gBAAgB;EAChBY,WAAAA;EACAC,mBAAmBR,QAAQS;CAC7B;CAGAC,WAAW;EACTjB,YAAY;EACZS,cAAcH,MAAMI;EACpBT,YAAY;EACZf,QAAQD,UAAUC;EAClBgB,gBAAgB;EAChBf,OAAOF,UAAUE;CACnB;CAEAuB,MAAM,EACJD,cAAcH,MAAMI,KACtB;CAKAQ,UAAU;EACRlB,YAAY;EACZmB,WAAW;EACXR,eAAe;EACfS,UAAU;EACVR,KAAKL,QAAQM;EACbX,gBAAgB;EAChBmB,UAAU;EACVC,iBAAiBhC;CACnB;AACF,CAAC,CACH"}
+{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","INDICATOR","height","width","const","PILL_HEIGHT","EXPANDED_PILL_HEIGHT","VERTICAL_PADDING","styles","create","fill","bottom","end","position","start","top","icon","alignItems","flexShrink","justifyContent","label","maxWidth","stylesOf","radii","spacing","collapsed","alignSelf","flexDirection","gap","xs","paddingHorizontal","paddingVertical","expanded","borderRadius","pill","sm","minHeight","lg","horizontal","indicator","vertical","flexBasis","flexGrow","minWidth"],"sources":["../../src/navigation/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The page's active indicator in a vertical destination: 56dp by 32dp, the\n// icon centred in it.\nconst INDICATOR = { height: 32, width: 56 } as const\n\n// A horizontal destination's pill, the page's 40dp, which its press reaches\n// past to the 48dp target, and an expanded rail's, the rail page's 56dp.\nconst PILL_HEIGHT = 40\nconst EXPANDED_PILL_HEIGHT = 56\n\n// A vertical destination's padding above the indicator and below the label,\n// which puts the two in the bar's 64dp: 6, 32, 4 and 16, then 6.\nconst VERTICAL_PADDING = 6\n\nconst styles = StyleSheet.create({\n  // The active indicator's fill, behind the icon in a vertical or collapsed\n  // destination and behind the whole pill in a horizontal or expanded one.\n  fill: {\n    bottom: 0,\n    end: 0,\n    position: 'absolute',\n    start: 0,\n    top: 0,\n  },\n  // An icon, and the badge on it, never squeezed by a long label.\n  icon: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  // The label never wraps: a destination's name is a word or two, and one\n  // broken over two lines would push its neighbours apart. Cut short with an\n  // ellipsis where the destination is narrower than it.\n  label: {\n    flexShrink: 1,\n    maxWidth: '100%',\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    // A collapsed rail's destination: the indicator with the label 4dp under\n    // it, as wide as the rail and 4dp in from either edge, which leaves a\n    // label 88dp of the rail's 96. It keeps its 64dp in a rail too short for\n    // every destination, which scrolls them instead. Reversed, since the\n    // label comes first in the tree.\n    collapsed: {\n      alignItems: 'center',\n      alignSelf: 'stretch',\n      flexDirection: 'column-reverse',\n      flexShrink: 0,\n      gap: spacing.xs,\n      justifyContent: 'center',\n      paddingHorizontal: spacing.xs,\n      paddingVertical: VERTICAL_PADDING,\n    },\n    // An expanded rail's destination: the rail page's 56dp pill, holding the\n    // icon and the label side by side, 16dp in at either end and 8dp between\n    // the two, as wide as what it holds and no wider than the rail. A height\n    // that is a minimum, so a larger text size grows the pill rather than\n    // cutting its label. Reversed, since the label comes first in the tree.\n    expanded: {\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      borderRadius: radii.pill,\n      flexDirection: 'row-reverse',\n      flexShrink: 0,\n      gap: spacing.sm,\n      maxWidth: '100%',\n      minHeight: EXPANDED_PILL_HEIGHT,\n      paddingHorizontal: spacing.lg,\n    },\n    // A horizontal destination: the pill, holding the icon and the label side\n    // by side, 16dp in at either end and 4dp between the two, as wide as what\n    // it holds. Reversed, since the label comes first in the tree.\n    horizontal: {\n      alignItems: 'center',\n      borderRadius: radii.pill,\n      flexDirection: 'row-reverse',\n      flexShrink: 0,\n      gap: spacing.xs,\n      justifyContent: 'center',\n      minHeight: PILL_HEIGHT,\n      paddingHorizontal: spacing.lg,\n    },\n    // The active indicator of a vertical destination, which draws the layers\n    // and the ring as well as the fill.\n    indicator: {\n      alignItems: 'center',\n      borderRadius: radii.pill,\n      flexShrink: 0,\n      height: INDICATOR.height,\n      justifyContent: 'center',\n      width: INDICATOR.width,\n    },\n    // The fill's corners, the pill's.\n    pill: {\n      borderRadius: radii.pill,\n    },\n    // A vertical destination: the indicator with the label 4dp under it,\n    // sharing the bar's width with the others. Its press is the whole of\n    // that share, so it needs no reach of its own. Reversed, since the label\n    // comes first in the tree.\n    vertical: {\n      alignItems: 'center',\n      flexBasis: 0,\n      flexDirection: 'column-reverse',\n      flexGrow: 1,\n      gap: spacing.xs,\n      justifyContent: 'center',\n      minWidth: 0,\n      paddingVertical: VERTICAL_PADDING,\n    },\n  }),\n)\n\nexport { INDICATOR, PILL_HEIGHT, styles, stylesOf }\n"],"mappings":";;;AAMA,MAAME,YAAY;CAAEC,QAAQ;CAAIC,OAAO;AAAG;AAK1C,MAAMG,uBAAuB;AAI7B,MAAMC,mBAAmB;AAEzB,MAAMC,SAAST,WAAWU,OAAO;CAG/BC,MAAM;EACJC,QAAQ;EACRC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,KAAK;CACP;CAEAC,MAAM;EACJC,YAAY;EACZC,YAAY;EACZC,gBAAgB;CAClB;CAIAC,OAAO;EACLF,YAAY;EACZG,UAAU;CACZ;AACF,CAAC;AAED,MAAMC,WAAWtB,cAAc,EAAEuB,OAAOC,cACtCzB,WAAWU,OAAO;CAMhBgB,WAAW;EACTR,YAAY;EACZS,WAAW;EACXC,eAAe;EACfT,YAAY;EACZU,KAAKJ,QAAQK;EACbV,gBAAgB;EAChBW,mBAAmBN,QAAQK;EAC3BE,iBAAiBxB;CACnB;CAMAyB,UAAU;EACRf,YAAY;EACZS,WAAW;EACXO,cAAcV,MAAMW;EACpBP,eAAe;EACfT,YAAY;EACZU,KAAKJ,QAAQW;EACbd,UAAU;EACVe,WAAW9B;EACXwB,mBAAmBN,QAAQa;CAC7B;CAIAC,YAAY;EACVrB,YAAY;EACZgB,cAAcV,MAAMW;EACpBP,eAAe;EACfT,YAAY;EACZU,KAAKJ,QAAQK;EACbV,gBAAgB;EAChBiB,WAAAA;EACAN,mBAAmBN,QAAQa;CAC7B;CAGAE,WAAW;EACTtB,YAAY;EACZgB,cAAcV,MAAMW;EACpBhB,YAAY;EACZhB,QAAQD,UAAUC;EAClBiB,gBAAgB;EAChBhB,OAAOF,UAAUE;CACnB;CAEA+B,MAAM,EACJD,cAAcV,MAAMW,KACtB;CAKAM,UAAU;EACRvB,YAAY;EACZwB,WAAW;EACXd,eAAe;EACfe,UAAU;EACVd,KAAKJ,QAAQK;EACbV,gBAAgB;EAChBwB,UAAU;EACVZ,iBAAiBxB;CACnB;AACF,CAAC,CACH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Kanso UI's Material Design components for React Native, themed through the same --kui-* design tokens as the web library",
   "keywords": [
     "react-native",
@@ -49,6 +49,7 @@
   },
   "author": "Kanso Labs <kanso.labs.org@gmail.com>",
   "dependencies": {
+    "@internationalized/date": "3.12.4",
     "@internationalized/number": "3.6.9",
     "react-stately": "3.51.0"
   },
@@ -62,7 +63,7 @@
     "@eslint/js": "10.0.1",
     "@jest/globals": "29.7.0",
     "@kanso-labs/kanso-ui": "0.43.6",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.33",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.34",
     "@react-native/babel-preset": "0.88.0",
     "@react-native/jest-preset": "0.88.0",
     "@rolldown/plugin-babel": "0.2.4",