@kanso-labs/react-native-kanso-ui 0.1.1 → 0.2.0

package/dist/glyphs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorValue","StyleProp","ViewStyle","SvgProps","I18nManager","Platform","StyleSheet","Svg","Path","useIconStyle","glyphStyles","GlyphProps","color","size","style","testID","HIDDEN","select","default","accessibilityElementsHidden","importantForAccessibility","web","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ChevronDownGlyph","ChevronEndGlyph","ClockGlyph","CloseGlyph","Glyph","children","mirrored","undefined","slot","side","t2","t3","compose","isRTL","t4","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","PersonGlyph","PlusGlyph","SearchGlyph","_c"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\nimport type { SvgProps } from 'react-native-svg'\n\nimport { I18nManager, Platform, StyleSheet } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\n\nimport { useIconStyle } from './icon-style'\nimport { glyphStyles } from './styles'\n\n// The glyphs the library's own controls draw, the same set kanso-ui draws on\n// web: the check and the dash a checkbox shows, the plus and minus a number\n// field's steppers show, the magnifier and cross a search field shows, and the\n// rest named beside each one. Private to the library, as on web: a call site\n// with icons of its own passes them to the slots that take a node, and reads\n// the slot's colour and size through `useIconStyle()`.\n//\n// The paths are kanso-ui's, unchanged: Material Symbols on their 24-unit grid,\n// which is what the checkbox page draws at 18dp, the icon buttons page at 20\n// and the search, menus, date picker and time picker pages at 24.\n\ntype GlyphProps = {\n  /** The fill. Defaults to the colour of the slot the glyph sits in. */\n  readonly color?: ColorValue\n  /** The square's side in dp. Defaults to the size of the slot. */\n  readonly size?: number\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n// What hides a glyph from screen readers. On iOS and Android that is React\n// Native's two props, one for VoiceOver and one for TalkBack. Under React\n// Native Web, react-native-svg hands its props to the `<svg>` as they are, so\n// it is `aria-hidden` there, which is the one the browser reads.\nconst HIDDEN = Platform.select<SvgProps>({\n  default: {\n    accessibilityElementsHidden: true,\n    importantForAccessibility: 'no-hide-descendants',\n  },\n  web: { 'aria-hidden': true },\n})\n\n// What a search view's back button draws, pointing at the page it returns to.\n// It says \"back\" rather than \"to the left\", so it mirrors under a right-to-left\n// layout.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>\n  )\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending. Neither mirrors under a right-to-left layout: they say \"up\" and\n// \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>\n  )\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>\n  )\n}\n\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>\n  )\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>\n  )\n}\n\nfunction CheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>\n  )\n}\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>\n  )\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so it mirrors under a right-to-left layout.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>\n  )\n}\n\n// What the time picker's trigger draws, and the button that takes its keyboard\n// entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>\n  )\n}\n\nfunction CloseGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>\n  )\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, a square of the\n * slot's size filled in the slot's colour, and nothing a screen reader\n * announces, since the control around a glyph carries the name. A glyph whose\n * direction means \"onward\" or \"back\" passes `mirrored`, which turns it over\n * under a right-to-left layout as `:dir(rtl)` does on web.\n */\nfunction Glyph({\n  children,\n  color,\n  mirrored = false,\n  size,\n  style,\n  testID,\n}: GlyphProps & { readonly children: ReactNode; readonly mirrored?: boolean }) {\n  const slot = useIconStyle()\n  const side = size ?? slot.size\n  return (\n    <Svg\n      {...HIDDEN}\n      color={color ?? slot.color}\n      fill=\"currentColor\"\n      height={side}\n      style={StyleSheet.compose(\n        mirrored && I18nManager.isRTL ? glyphStyles.mirrored : undefined,\n        style,\n      )}\n      testID={testID}\n      viewBox=\"0 0 24 24\"\n      width={side}\n    >\n      {children}\n    </Svg>\n  )\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>\n  )\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>\n  )\n}\n\nconst IndeterminateGlyph = MinusGlyph\n\n// What an avatar with no name to take initials from draws: Material Design's\n// anonymous person, a head over shoulders.\nfunction PersonGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </Glyph>\n  )\n}\n\nfunction PlusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>\n  )\n}\n\nfunction SearchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>\n  )\n}\n\nexport {\n  ArrowBackGlyph,\n  ArrowDownwardGlyph,\n  ArrowDropDownGlyph,\n  ArrowUpwardGlyph,\n  CalendarGlyph,\n  CheckGlyph,\n  ChevronDownGlyph,\n  ChevronEndGlyph,\n  ClockGlyph,\n  CloseGlyph,\n  IndeterminateGlyph,\n  KeyboardGlyph,\n  MinusGlyph,\n  PersonGlyph,\n  PlusGlyph,\n  SearchGlyph,\n}\nexport type { GlyphProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorValue","StyleProp","ViewStyle","I18nManager","StyleSheet","Svg","Path","HIDDEN","useIconStyle","glyphStyles","GlyphProps","color","size","style","testID","ArrowBackGlyph","props","$","_c","t0","Symbol","for","t1","ArrowDownwardGlyph","ArrowDropDownGlyph","ArrowUpwardGlyph","CalendarGlyph","CheckGlyph","ChevronDownGlyph","ChevronEndGlyph","ClockGlyph","CloseGlyph","Glyph","children","mirrored","undefined","slot","side","t2","t3","compose","isRTL","t4","KeyboardGlyph","MinusGlyph","IndeterminateGlyph","PersonGlyph","PlusGlyph","SearchGlyph","_c"],"sources":["../../src/glyphs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { ColorValue, StyleProp, ViewStyle } from 'react-native'\n\nimport { I18nManager, StyleSheet } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\n\nimport { HIDDEN } from './hidden'\nimport { useIconStyle } from './icon-style'\nimport { glyphStyles } from './styles'\n\n// The glyphs the library's own controls draw, the same set kanso-ui draws on\n// web: the check and the dash a checkbox shows, the plus and minus a number\n// field's steppers show, the magnifier and cross a search field shows, and the\n// rest named beside each one. Private to the library, as on web: a call site\n// with icons of its own passes them to the slots that take a node, and reads\n// the slot's colour and size through `useIconStyle()`.\n//\n// The paths are kanso-ui's, unchanged: Material Symbols on their 24-unit grid,\n// which is what the checkbox page draws at 18dp, the icon buttons page at 20\n// and the search, menus, date picker and time picker pages at 24.\n\ntype GlyphProps = {\n  /** The fill. Defaults to the colour of the slot the glyph sits in. */\n  readonly color?: ColorValue\n  /** The square's side in dp. Defaults to the size of the slot. */\n  readonly size?: number\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n// What a search view's back button draws, pointing at the page it returns to.\n// It says \"back\" rather than \"to the left\", so it mirrors under a right-to-left\n// layout.\nfunction ArrowBackGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\" />\n    </Glyph>\n  )\n}\n\n// Which way a sorted column is ordered. Up is ascending and down is\n// descending. Neither mirrors under a right-to-left layout: they say \"up\" and\n// \"down\" rather than \"onward\", and those do not flip.\nfunction ArrowDownwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\" />\n    </Glyph>\n  )\n}\n\n// What a menu button draws after its label, pointing at the list it opens.\n// Down is down in either writing direction, so it does not mirror.\nfunction ArrowDropDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M7 10l5 5 5-5z\" />\n    </Glyph>\n  )\n}\n\nfunction ArrowUpwardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n    </Glyph>\n  )\n}\n\n// What the date picker's trigger draws: the calendar a date is picked from.\nfunction CalendarGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z\" />\n    </Glyph>\n  )\n}\n\nfunction CheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\n    </Glyph>\n  )\n}\n\n// Points down at the menu a split button's second half opens.\nfunction ChevronDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\" />\n    </Glyph>\n  )\n}\n\n// Points at the submenu a menu item opens. It says \"further in\" rather than\n// \"to the right\", so it mirrors under a right-to-left layout.\nfunction ChevronEndGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props} mirrored>\n      <Path d=\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n    </Glyph>\n  )\n}\n\n// What the time picker's trigger draws, and the button that takes its keyboard\n// entry back to the dial: the clock a time is picked from.\nfunction ClockGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n    </Glyph>\n  )\n}\n\nfunction CloseGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    </Glyph>\n  )\n}\n\n/**\n * The svg every glyph draws: the 24-unit grid its path is on, a square of the\n * slot's size filled in the slot's colour, and nothing a screen reader\n * announces, since the control around a glyph carries the name. A glyph whose\n * direction means \"onward\" or \"back\" passes `mirrored`, which turns it over\n * under a right-to-left layout as `:dir(rtl)` does on web.\n */\nfunction Glyph({\n  children,\n  color,\n  mirrored = false,\n  size,\n  style,\n  testID,\n}: GlyphProps & { readonly children: ReactNode; readonly mirrored?: boolean }) {\n  const slot = useIconStyle()\n  const side = size ?? slot.size\n  return (\n    <Svg\n      {...HIDDEN}\n      color={color ?? slot.color}\n      fill=\"currentColor\"\n      height={side}\n      style={StyleSheet.compose(\n        mirrored && I18nManager.isRTL ? glyphStyles.mirrored : undefined,\n        style,\n      )}\n      testID={testID}\n      viewBox=\"0 0 24 24\"\n      width={side}\n    >\n      {children}\n    </Svg>\n  )\n}\n\n// What the time picker's dial draws on the button that switches it to typed\n// entry.\nfunction KeyboardGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H4V7h16v10zm-9-9h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3 6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z\" />\n    </Glyph>\n  )\n}\n\n// The same rule stands for a partly selected checkbox and for a stepper's\n// decrement; the two names say which is meant at the call site.\nfunction MinusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13H5v-2h14v2z\" />\n    </Glyph>\n  )\n}\n\nconst IndeterminateGlyph = MinusGlyph\n\n// What an avatar with no name to take initials from draws: Material Design's\n// anonymous person, a head over shoulders.\nfunction PersonGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </Glyph>\n  )\n}\n\nfunction PlusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n    </Glyph>\n  )\n}\n\nfunction SearchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n    </Glyph>\n  )\n}\n\nexport {\n  ArrowBackGlyph,\n  ArrowDownwardGlyph,\n  ArrowDropDownGlyph,\n  ArrowUpwardGlyph,\n  CalendarGlyph,\n  CheckGlyph,\n  ChevronDownGlyph,\n  ChevronEndGlyph,\n  ClockGlyph,\n  CloseGlyph,\n  IndeterminateGlyph,\n  KeyboardGlyph,\n  MinusGlyph,\n  PersonGlyph,\n  PlusGlyph,\n  SearchGlyph,\n}\nexport type { GlyphProps }\n"],"mappings":"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"}

package/dist/i18n/index.js

@@ -0,0 +1,23 @@
+import { localeOf } from "../number/locale.js";
+import { MESSAGES } from "./messages.js";
+//#region src/i18n/index.ts
+const TABLE = new Map(Object.entries(MESSAGES));
+const cache = /* @__PURE__ */ new Map();
+function lookUp(locale) {
+	const tag = locale.split("-u-")[0];
+	const language = tag.split("-")[0];
+	return TABLE.get(tag) ?? [...TABLE].find(([key]) => key.startsWith(`${language}-`))?.[1] ?? MESSAGES["en-US"];
+}
+/** The library's words in `locale`, or in the device's when given none. */
+function messagesFor(locale) {
+	const resolved = localeOf(locale);
+	const cached = cache.get(resolved);
+	if (cached !== void 0) return cached;
+	const messages = lookUp(resolved);
+	cache.set(resolved, messages);
+	return messages;
+}
+//#endregion
+export { messagesFor };
+
+//# sourceMappingURL=index.js.map

package/dist/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LibraryMessages","localeOf","MESSAGES","TABLE","Map","Object","entries","cache","lookUp","locale","tag","split","language","get","find","key","startsWith","messagesFor","resolved","cached","undefined","messages","set"],"sources":["../../src/i18n/index.ts"],"sourcesContent":["import type { LibraryMessages } from './messages'\n\nimport { localeOf } from '../number/locale'\nimport { MESSAGES } from './messages'\n\n// The words the library writes itself, in the locale a component is given or\n// the device's. Web reads them through React Aria's dictionary, in the\n// I18nProvider's locale, and this falls back the way that dictionary does: the\n// table's entry for the locale, then the first for its language, then English,\n// so `fr-CA` reads French and a locale the table lacks reads English.\n\nconst TABLE = new Map(Object.entries(MESSAGES))\n\n// One set per locale an app renders in, looked up the first time a component\n// asks for it.\nconst cache = new Map<string, LibraryMessages>()\n\n// A device's locale can carry a Unicode extension, `pt-PT-u-nu-latn`, which\n// says how numbers are written rather than which words; it is set aside, or\n// `pt-PT` would match no entry and read the first Portuguese one, Brazil's.\nfunction lookUp(locale: string): LibraryMessages {\n  const tag = locale.split('-u-')[0]\n  const language = tag.split('-')[0]\n\n  return (\n    TABLE.get(tag) ??\n    [...TABLE].find(([key]) => key.startsWith(`${language}-`))?.[1] ??\n    MESSAGES['en-US']\n  )\n}\n\n/** The library's words in `locale`, or in the device's when given none. */\nfunction messagesFor(locale?: string): LibraryMessages {\n  const resolved = localeOf(locale)\n  const cached = cache.get(resolved)\n\n  if (cached !== undefined) {\n    return cached\n  }\n\n  const messages = lookUp(resolved)\n  cache.set(resolved, messages)\n  return messages\n}\n\nexport { messagesFor }\nexport type { LibraryMessages }\n"],"mappings":";;;AAWA,MAAMG,QAAQ,IAAIC,IAAIC,OAAOC,QAAQJ,QAAQ,CAAC;AAI9C,MAAMK,wBAAQ,IAAIH,IAA6B;AAK/C,SAASI,OAAOC,QAAiC;CAC/C,MAAMC,MAAMD,OAAOE,MAAM,KAAK,CAAC,CAAC;CAChC,MAAMC,WAAWF,IAAIC,MAAM,GAAG,CAAC,CAAC;CAEhC,OACER,MAAMU,IAAIH,GAAG,KACb,CAAC,GAAGP,KAAK,CAAC,CAACW,MAAM,CAACC,SAASA,IAAIC,WAAW,GAAGJ,SAAQ,EAAG,CAAC,CAAC,GAAG,MAC7DV,SAAS;AAEb;;AAGA,SAASe,YAAYR,QAAkC;CACrD,MAAMS,WAAWjB,SAASQ,MAAM;CAChC,MAAMU,SAASZ,MAAMM,IAAIK,QAAQ;CAEjC,IAAIC,WAAWC,KAAAA,GACb,OAAOD;CAGT,MAAME,WAAWb,OAAOU,QAAQ;CAChCX,MAAMe,IAAIJ,UAAUG,QAAQ;CAC5B,OAAOA;AACT"}

package/dist/i18n/messages.js

@@ -0,0 +1,41 @@
+//#region src/i18n/messages.ts
+const MESSAGES = {
+	"ar-AE": { loading: "جارٍ التحميل" },
+	"bg-BG": { loading: "Зареждане" },
+	"cs-CZ": { loading: "Načítání" },
+	"da-DK": { loading: "Indlæser" },
+	"de-DE": { loading: "Wird geladen" },
+	"el-GR": { loading: "Φόρτωση" },
+	"en-US": { loading: "Loading" },
+	"es-ES": { loading: "Cargando" },
+	"et-EE": { loading: "Laadimine" },
+	"fi-FI": { loading: "Ladataan" },
+	"fr-FR": { loading: "Chargement" },
+	"he-IL": { loading: "טוען" },
+	"hr-HR": { loading: "Učitavanje" },
+	"hu-HU": { loading: "Betöltés" },
+	"it-IT": { loading: "Caricamento" },
+	"ja-JP": { loading: "読み込み中" },
+	"ko-KR": { loading: "로드 중" },
+	"lt-LT": { loading: "Įkeliama" },
+	"lv-LV": { loading: "Notiek ielāde" },
+	"nb-NO": { loading: "Laster inn" },
+	"nl-NL": { loading: "Laden" },
+	"pl-PL": { loading: "Ładowanie" },
+	"pt-BR": { loading: "Carregando" },
+	"pt-PT": { loading: "A carregar" },
+	"ro-RO": { loading: "Se încarcă" },
+	"ru-RU": { loading: "Загрузка" },
+	"sk-SK": { loading: "Načítava sa" },
+	"sl-SI": { loading: "Nalaganje" },
+	"sr-SP": { loading: "Učitavanje" },
+	"sv-SE": { loading: "Läser in" },
+	"tr-TR": { loading: "Yükleniyor" },
+	"uk-UA": { loading: "Завантаження" },
+	"zh-CN": { loading: "正在加载" },
+	"zh-TW": { loading: "正在載入" }
+};
+//#endregion
+export { MESSAGES };
+
+//# sourceMappingURL=messages.js.map

package/dist/i18n/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":["LibraryMessages","loading","MESSAGES","Readonly","Record"],"sources":["../../src/i18n/messages.ts"],"sourcesContent":["// The words the library writes itself: the pending ring's name. Each one\n// stands behind a prop that names it otherwise, `pendingLabel` for this one.\n//\n// Copied from kanso-ui's src/i18n/messages.ts, one entry per locale React\n// Aria ships, and kept in step with it by hand: the web library publishes no\n// copy of its table, and a word that differs between the two would name the\n// same ring two ways. The translations were drafted for that table rather\n// than taken from a translation service, and each one wants a native\n// speaker's eye before it is trusted; a call site can always pass its own\n// words through the prop.\n\ntype LibraryMessages = {\n  /** What a pending button's ring is called. */\n  readonly loading: string\n}\n\nconst MESSAGES: Readonly<Record<string, LibraryMessages>> = {\n  'ar-AE': { loading: 'جارٍ التحميل' },\n  'bg-BG': { loading: 'Зареждане' },\n  'cs-CZ': { loading: 'Načítání' },\n  'da-DK': { loading: 'Indlæser' },\n  'de-DE': { loading: 'Wird geladen' },\n  'el-GR': { loading: 'Φόρτωση' },\n  'en-US': { loading: 'Loading' },\n  'es-ES': { loading: 'Cargando' },\n  'et-EE': { loading: 'Laadimine' },\n  'fi-FI': { loading: 'Ladataan' },\n  'fr-FR': { loading: 'Chargement' },\n  'he-IL': { loading: 'טוען' },\n  'hr-HR': { loading: 'Učitavanje' },\n  'hu-HU': { loading: 'Betöltés' },\n  'it-IT': { loading: 'Caricamento' },\n  'ja-JP': { loading: '読み込み中' },\n  'ko-KR': { loading: '로드 중' },\n  'lt-LT': { loading: 'Įkeliama' },\n  'lv-LV': { loading: 'Notiek ielāde' },\n  'nb-NO': { loading: 'Laster inn' },\n  'nl-NL': { loading: 'Laden' },\n  'pl-PL': { loading: 'Ładowanie' },\n  'pt-BR': { loading: 'Carregando' },\n  'pt-PT': { loading: 'A carregar' },\n  'ro-RO': { loading: 'Se încarcă' },\n  'ru-RU': { loading: 'Загрузка' },\n  'sk-SK': { loading: 'Načítava sa' },\n  'sl-SI': { loading: 'Nalaganje' },\n  'sr-SP': { loading: 'Učitavanje' },\n  'sv-SE': { loading: 'Läser in' },\n  'tr-TR': { loading: 'Yükleniyor' },\n  'uk-UA': { loading: 'Завантаження' },\n  'zh-CN': { loading: '正在加载' },\n  'zh-TW': { loading: '正在載入' },\n}\n\nexport { MESSAGES }\nexport type { LibraryMessages }\n"],"mappings":";AAgBA,MAAME,WAAsD;CAC1D,SAAS,EAAED,SAAS,eAAe;CACnC,SAAS,EAAEA,SAAS,YAAY;CAChC,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,eAAe;CACnC,SAAS,EAAEA,SAAS,UAAU;CAC9B,SAAS,EAAEA,SAAS,UAAU;CAC9B,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,YAAY;CAChC,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,OAAO;CAC3B,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,cAAc;CAClC,SAAS,EAAEA,SAAS,QAAQ;CAC5B,SAAS,EAAEA,SAAS,OAAO;CAC3B,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,gBAAgB;CACpC,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,QAAQ;CAC5B,SAAS,EAAEA,SAAS,YAAY;CAChC,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,cAAc;CAClC,SAAS,EAAEA,SAAS,YAAY;CAChC,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,WAAW;CAC/B,SAAS,EAAEA,SAAS,aAAa;CACjC,SAAS,EAAEA,SAAS,eAAe;CACnC,SAAS,EAAEA,SAAS,OAAO;CAC3B,SAAS,EAAEA,SAAS,OAAO;AAC7B"}

package/dist/index.d.ts

@@ -9,13 +9,16 @@ import { Currency, CurrencyProps, CurrencySignDisplay, CurrencyTone } from "./co
 import { Form, FormHandle, FormProps } from "./components/form/index.js";
 import { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from "./components/icon-button/index.js";
 import { Link, LinkProps, LinkTone, LinkUnderline } from "./components/link/index.js";
+import { Meter, MeterProps, MeterTone } from "./components/meter/index.js";
 import { FieldVariant } from "./field/index.js";
 import { NumberField, NumberFieldProps } from "./components/number-field/index.js";
 import { ProductIcon, ProductIconProps } from "./components/product-icon/index.js";
+import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorShape, ProgressIndicatorTone, ProgressIndicatorVariant } from "./components/progress-indicator/index.js";
 import { Radio, RadioGroup, RadioGroupOrientation, RadioGroupProps, RadioProps } from "./components/radio-group/index.js";
 import { SearchField, SearchFieldProps } from "./components/search-field/index.js";
 import { SegmentedButton, SegmentedButtonProps, SegmentedButtonSegment, SegmentedButtonSegmentProps } from "./components/segmented-button/index.js";
 import { Separator, SeparatorInset, SeparatorProps } from "./components/separator/index.js";
+import { Snackbar, SnackbarAction, SnackbarOptions, SnackbarProps, SnackbarQueue } from "./components/snackbar/index.js";
 import { Stack, StackAlign, StackGap, StackJustify, StackProps } from "./components/stack/index.js";
 import { Switch, SwitchProps } from "./components/switch/index.js";
 import { TypeRole } from "./typography/roles.js";
@@ -28,4 +31,4 @@ import { RouterProvider, RouterProviderProps } from "./router/index.js";
 import { ThemeScope, ThemeScopeProps } from "./theme-scope.js";
 import { ResolvedTheme, useTheme } from "./theme/scope.js";
 import { Key, Selection } from "react-stately";
-export { Avatar, type AvatarProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, type FieldVariant, Form, type FormHandle, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconStyle, type Key, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, NumberField, type NumberFieldProps, ProductIcon, type ProductIconProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type ResolvedTheme, RouterProvider, type RouterProviderProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, type TypeRole, type WindowSizeClass, useIconStyle, useTheme, useWindowSizeClass };
+export { Avatar, type AvatarProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, type FieldVariant, Form, type FormHandle, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconStyle, type Key, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, Meter, type MeterProps, type MeterTone, NumberField, type NumberFieldProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type ResolvedTheme, RouterProvider, type RouterProviderProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, Snackbar, type SnackbarAction, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, type TypeRole, type WindowSizeClass, useIconStyle, useTheme, useWindowSizeClass };

package/dist/index.js

@@ -2,6 +2,8 @@ import { useIconStyle } from "./glyphs/icon-style.js";
 import { useTheme } from "./theme/scope.js";
 import { Avatar } from "./components/avatar/index.js";
 import { RouterProvider } from "./router/index.js";
+import { Text } from "./components/text/index.js";
+import { ProgressIndicator } from "./components/progress-indicator/index.js";
 import { Button } from "./components/button/index.js";
 import { Card } from "./components/card/index.js";
 import { Checkbox } from "./components/checkbox/index.js";
@@ -12,16 +14,17 @@ import { Currency } from "./components/currency/index.js";
 import { Form } from "./components/form/index.js";
 import { IconButton } from "./components/icon-button/index.js";
 import { Link } from "./components/link/index.js";
+import { Meter } from "./components/meter/index.js";
 import { NumberField } from "./components/number-field/index.js";
 import { ProductIcon } from "./components/product-icon/index.js";
 import { Radio, RadioGroup } from "./components/radio-group/index.js";
 import { SearchField } from "./components/search-field/index.js";
 import { SegmentedButton, SegmentedButtonSegment } from "./components/segmented-button/index.js";
 import { Separator } from "./components/separator/index.js";
+import { useWindowSizeClass } from "./hooks/useWindowSizeClass.js";
+import { Snackbar } from "./components/snackbar/index.js";
 import { Stack } from "./components/stack/index.js";
 import { Switch } from "./components/switch/index.js";
-import { Text } from "./components/text/index.js";
 import { TextField } from "./components/text-field/index.js";
-import { useWindowSizeClass } from "./hooks/useWindowSizeClass.js";
 import { ThemeScope } from "./theme-scope.js";
-export { Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Form, IconButton, Link, NumberField, ProductIcon, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };
+export { Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Form, IconButton, Link, Meter, NumberField, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };

package/dist/indicator/index.d.ts

@@ -0,0 +1,15 @@
+import "react-native";
+import { ReactNode } from "react";
+import "react-native-reanimated";
+//#region src/indicator/index.d.ts
+/**
+ * The line's colour. `primary` is the page's own pair. `negative` and
+ * `positive` swap the active indicator and the stop indicator alone, leaving
+ * the track in secondary container, so a column of meters reads as one scale
+ * with bars of different colours. `inherit` takes the colour of the slot the
+ * line sits in for both, and gives the track a quarter of it.
+ */
+type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';
+//#endregion
+export type { IndicatorTone };
+//# sourceMappingURL=index.d.ts.map

package/dist/indicator/index.js

@@ -0,0 +1,256 @@
+import { useIconStyle } from "../glyphs/icon-style.js";
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { withOpacity } from "../theme/color.js";
+import { Text as Text$1 } from "../components/text/index.js";
+import { localeOf } from "../number/locale.js";
+import { styles, stylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { NumberFormatter } from "@internationalized/number";
+//#region src/indicator/index.tsx
+/**
+* The active indicator's length at a value: the value's share of what the two
+* gaps and the stop leave of the row, as web's `activeAt` gives it. A share of
+* the whole row would run the row 12dp long at the maximum, with the stop
+* drawn past its end.
+*/
+function activeLength(width, percentage) {
+	"worklet";
+	return Math.max(0, width - 12) * percentage / 100;
+}
+function fillOf(color) {
+	return { backgroundColor: color };
+}
+/**
+* The label and, optionally, the value, on a row above the indicator, both in
+* the label-large role and on-surface-variant. Renders nothing when there is
+* neither to show.
+*/
+function IndicatorLabels(t0) {
+	const $ = c(12);
+	const { label, value } = t0;
+	const theme = useTheme();
+	const hasLabel = label !== void 0 && label !== "";
+	const hasValue = value !== void 0 && value !== "";
+	if (!hasLabel && !hasValue) return null;
+	let t1;
+	if ($[0] !== theme) {
+		t1 = stylesOf(theme);
+		$[0] = theme;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== hasLabel || $[3] !== label) {
+		t2 = hasLabel ? /* @__PURE__ */ jsx(Text$1, {
+			style: styles.label,
+			tone: "muted",
+			variant: "labelLarge",
+			children: label
+		}) : null;
+		$[2] = hasLabel;
+		$[3] = label;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== hasValue || $[6] !== value) {
+		t3 = hasValue ? /* @__PURE__ */ jsx(Text$1, {
+			numberOfLines: 1,
+			style: styles.value,
+			tone: "muted",
+			variant: "labelLarge",
+			children: value
+		}) : null;
+		$[5] = hasValue;
+		$[6] = value;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1.labels || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(View, {
+			style: t1.labels,
+			children: [t2, t3]
+		});
+		$[8] = t1.labels;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+/**
+* The page's line: the active indicator at its share of the measured width,
+* the track taking what is left, and the stop indicator at the end. Anything
+* passed as `children` is drawn inside the track, which is what the progress
+* indicator's buffer fills it with; with none the track is solid.
+* `activeOpacity` is how far the active indicator shows, which is how the
+* progress indicator fades it under a wave.
+*/
+function IndicatorLine(t0) {
+	const $ = c(3);
+	const { activeOpacity, children, colors, percentage, width } = t0;
+	const theme = useTheme();
+	const sheet = stylesOf(theme);
+	const active = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			opacity: activeOpacity === void 0 ? 1 : activeOpacity.get(),
+			width: activeLength(width, percentage.get())
+		};
+	});
+	const T0 = View;
+	const t1 = composeStyles(styles.stop, sheet.stop, fillOf(colors.active));
+	let t2;
+	if ($[0] !== T0 || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, { style: t1 });
+		$[0] = T0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles.line,
+		children: [
+			/* @__PURE__ */ jsx(Animated.View, { style: composeStyles(styles.active, sheet.active, fillOf(colors.active), active) }),
+			/* @__PURE__ */ jsx(View, {
+				style: composeStyles(styles.track, sheet.track, children === void 0 ? fillOf(colors.track) : void 0),
+				children
+			}),
+			t2
+		]
+	});
+}
+/**
+* The value as React Aria's `useProgressBar` and `useMeter` read it: clamped to the range,
+* as a percentage of it, and written out by `formatOptions` in the locale,
+* the share of the range under a percent style and the value itself under
+* any other, unless `valueLabel` says it in words.
+*/
+function readingOf({ formatOptions = { style: "percent" }, locale, maxValue, minValue, value, valueLabel }) {
+	const clamped = Math.min(Math.max(value, minValue), maxValue);
+	const range = maxValue - minValue;
+	const share = range === 0 ? 0 : (clamped - minValue) / range;
+	const text = valueLabel ?? new NumberFormatter(localeOf(locale), formatOptions).format(formatOptions.style === "percent" ? share : clamped);
+	return {
+		percentage: share * 100,
+		text,
+		value: clamped
+	};
+}
+/**
+* A value that moves to each new target over `timing`, or jumps to it while
+* the reader has asked for reduced motion, as web's transition drops to `0s`
+* there. It starts at its first target, so nothing moves as it mounts.
+*/
+function useEased(target, timing) {
+	const $ = c(10);
+	const reduceMotion = useReducedMotion();
+	const shown = useSharedValue(target);
+	const { duration } = timing;
+	const [x1, y1, x2, y2] = timing.easing;
+	let t0;
+	let t1;
+	if ($[0] !== duration || $[1] !== reduceMotion || $[2] !== shown || $[3] !== target || $[4] !== x1 || $[5] !== x2 || $[6] !== y1 || $[7] !== y2) {
+		t0 = () => {
+			shown.set(reduceMotion ? target : withTiming(target, {
+				duration,
+				easing: Easing.bezier(x1, y1, x2, y2)
+			}));
+		};
+		t1 = [
+			duration,
+			reduceMotion,
+			shown,
+			target,
+			x1,
+			x2,
+			y1,
+			y2
+		];
+		$[0] = duration;
+		$[1] = reduceMotion;
+		$[2] = shown;
+		$[3] = target;
+		$[4] = x1;
+		$[5] = x2;
+		$[6] = y1;
+		$[7] = y2;
+		$[8] = t0;
+		$[9] = t1;
+	} else {
+		t0 = $[8];
+		t1 = $[9];
+	}
+	useEffect(t0, t1);
+	return shown;
+}
+/**
+* The colours a tone draws the line in. `inherit` reads the colour of the
+* slot the line sits in, as a button hands its content colour to what it
+* holds, and falls back to on-surface outside one.
+*/
+function useIndicatorColors(tone) {
+	const $ = c(8);
+	const { colors } = useTheme();
+	const slot = useIconStyle().color;
+	if (tone === "inherit") {
+		const color = typeof slot === "string" ? slot : colors.onSurface;
+		let t0;
+		if ($[0] !== color) {
+			t0 = withOpacity(color, .25);
+			$[0] = color;
+			$[1] = t0;
+		} else t0 = $[1];
+		let t1;
+		if ($[2] !== color || $[3] !== t0) {
+			t1 = {
+				active: color,
+				track: t0
+			};
+			$[2] = color;
+			$[3] = t0;
+			$[4] = t1;
+		} else t1 = $[4];
+		return t1;
+	}
+	const t0 = colors[tone];
+	let t1;
+	if ($[5] !== colors.secondaryContainer || $[6] !== t0) {
+		t1 = {
+			active: t0,
+			track: colors.secondaryContainer
+		};
+		$[5] = colors.secondaryContainer;
+		$[6] = t0;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+}
+/** The width a view was last laid out at, and the handler that reads it. */
+function useMeasuredWidth() {
+	const $ = c(3);
+	const [width, setWidth] = useState(0);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (event) => {
+			setWidth(event.nativeEvent.layout.width);
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== width) {
+		t1 = {
+			onLayout: t0,
+			width
+		};
+		$[1] = width;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+export { IndicatorLabels, IndicatorLine, activeLength, fillOf, readingOf, useEased, useIndicatorColors, useMeasuredWidth };
+
+//# sourceMappingURL=index.js.map

package/dist/indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","LayoutChangeEvent","ViewStyle","AnimatedStyle","SharedValue","NumberFormatter","useEffect","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","Text","useIconStyle","localeOf","withOpacity","useTheme","composeStyles","RESERVED","styles","stylesOf","IndicatorColors","active","track","IndicatorTiming","duration","easing","IndicatorTone","activeLength","width","percentage","Math","max","fillOf","color","backgroundColor","IndicatorLabels","t0","$","_c","label","value","theme","hasLabel","undefined","hasValue","t1","t2","t3","t4","labels","IndicatorLine","activeOpacity","children","colors","sheet","opacity","get","T0","stop","line","readingOf","formatOptions","style","locale","maxValue","minValue","valueLabel","Intl","NumberFormatOptions","clamped","min","range","share","text","format","useEased","target","timing","reduceMotion","shown","x1","y1","x2","y2","set","bezier","useIndicatorColors","tone","slot","onSurface","secondaryContainer","useMeasuredWidth","setWidth","Symbol","for","event","nativeEvent","layout","onLayout","_c","Text"],"sources":["../../src/indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { LayoutChangeEvent, ViewStyle } from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\n\nimport { NumberFormatter } from '@internationalized/number'\nimport { useEffect, useState } from 'react'\nimport { View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { Text } from '../components/text'\nimport { useIconStyle } from '../glyphs/icon-style'\nimport { localeOf } from '../number/locale'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { RESERVED, styles, stylesOf } from './styles'\n\n// The pieces a linear indicator is drawn from, shared by ProgressIndicator and\n// Meter as web's src/indicator is. The styles they use are in ./styles.ts.\n//\n// Web lays the line out with `calc()` against the row's own width. React\n// Native has no `calc()`, so the row is measured through `onLayout` and the\n// active indicator's width worked out from that, which is also the length a\n// wave along the line follows.\n\n/** What a line draws its parts in. */\ntype IndicatorColors = {\n  /** The active indicator and the stop indicator. */\n  readonly active: string\n  /** The track. */\n  readonly track: string\n}\n\n/** How a value that changes moves: a duration in ms and a cubic Bézier. */\ntype IndicatorTiming = {\n  readonly duration: number\n  readonly easing: readonly [number, number, number, number]\n}\n\n/**\n * The line's colour. `primary` is the page's own pair. `negative` and\n * `positive` swap the active indicator and the stop indicator alone, leaving\n * the track in secondary container, so a column of meters reads as one scale\n * with bars of different colours. `inherit` takes the colour of the slot the\n * line sits in for both, and gives the track a quarter of it.\n */\ntype IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary'\n\n/**\n * The active indicator's length at a value: the value's share of what the two\n * gaps and the stop leave of the row, as web's `activeAt` gives it. A share of\n * the whole row would run the row 12dp long at the maximum, with the stop\n * drawn past its end.\n */\nfunction activeLength(width: number, percentage: number) {\n  'worklet'\n  return (Math.max(0, width - RESERVED) * percentage) / 100\n}\n\n// A view's fill, built by a call rather than written inline at the prop,\n// which is what react-perf's no-new-object-as-prop is after.\nfunction fillOf(color: string) {\n  return { backgroundColor: color }\n}\n\n/**\n * The label and, optionally, the value, on a row above the indicator, both in\n * the label-large role and on-surface-variant. Renders nothing when there is\n * neither to show.\n */\nfunction IndicatorLabels({\n  label,\n  value,\n}: {\n  readonly label: string | undefined\n  readonly value: string | undefined\n}) {\n  const theme = useTheme()\n  const hasLabel = label !== undefined && label !== ''\n  const hasValue = value !== undefined && value !== ''\n\n  if (!hasLabel && !hasValue) {\n    return null\n  }\n\n  return (\n    <View style={stylesOf(theme).labels}>\n      {hasLabel ? (\n        <Text style={styles.label} tone=\"muted\" variant=\"labelLarge\">\n          {label}\n        </Text>\n      ) : null}\n      {hasValue ? (\n        <Text\n          numberOfLines={1}\n          style={styles.value}\n          tone=\"muted\"\n          variant=\"labelLarge\"\n        >\n          {value}\n        </Text>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * The page's line: the active indicator at its share of the measured width,\n * the track taking what is left, and the stop indicator at the end. Anything\n * passed as `children` is drawn inside the track, which is what the progress\n * indicator's buffer fills it with; with none the track is solid.\n * `activeOpacity` is how far the active indicator shows, which is how the\n * progress indicator fades it under a wave.\n */\nfunction IndicatorLine({\n  activeOpacity,\n  children,\n  colors,\n  percentage,\n  width,\n}: {\n  readonly activeOpacity?: SharedValue<number>\n  readonly children?: ReactNode\n  readonly colors: IndicatorColors\n  readonly percentage: SharedValue<number>\n  readonly width: number\n}) {\n  const theme = useTheme()\n  const sheet = stylesOf(theme)\n  const active = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      opacity: activeOpacity === undefined ? 1 : activeOpacity.get(),\n      width: activeLength(width, percentage.get()),\n    }\n  })\n\n  return (\n    <View style={styles.line}>\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.active,\n          sheet.active,\n          fillOf(colors.active),\n          active,\n        )}\n      />\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.track,\n          sheet.track,\n          children === undefined ? fillOf(colors.track) : undefined,\n        )}\n      >\n        {children}\n      </View>\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.stop,\n          sheet.stop,\n          fillOf(colors.active),\n        )}\n      />\n    </View>\n  )\n}\n\n/**\n * The value as React Aria's `useProgressBar` and `useMeter` read it: clamped to the range,\n * as a percentage of it, and written out by `formatOptions` in the locale,\n * the share of the range under a percent style and the value itself under\n * any other, unless `valueLabel` says it in words.\n */\nfunction readingOf({\n  formatOptions = { style: 'percent' },\n  locale,\n  maxValue,\n  minValue,\n  value,\n  valueLabel,\n}: {\n  readonly formatOptions: Intl.NumberFormatOptions | undefined\n  readonly locale: string | undefined\n  readonly maxValue: number\n  readonly minValue: number\n  readonly value: number\n  readonly valueLabel: string | undefined\n}) {\n  const clamped = Math.min(Math.max(value, minValue), maxValue)\n  const range = maxValue - minValue\n  const share = range === 0 ? 0 : (clamped - minValue) / range\n  const text =\n    valueLabel ??\n    new NumberFormatter(localeOf(locale), formatOptions).format(\n      formatOptions.style === 'percent' ? share : clamped,\n    )\n\n  return { percentage: share * 100, text, value: clamped }\n}\n\n/**\n * A value that moves to each new target over `timing`, or jumps to it while\n * the reader has asked for reduced motion, as web's transition drops to `0s`\n * there. It starts at its first target, so nothing moves as it mounts.\n */\nfunction useEased(target: number, timing: IndicatorTiming) {\n  const reduceMotion = useReducedMotion()\n  const shown = useSharedValue(target)\n  const { duration } = timing\n  const [x1, y1, x2, y2] = timing.easing\n\n  useEffect(() => {\n    shown.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration,\n            easing: Easing.bezier(x1, y1, x2, y2),\n          }),\n    )\n  }, [duration, reduceMotion, shown, target, x1, x2, y1, y2])\n\n  return shown\n}\n\n/**\n * The colours a tone draws the line in. `inherit` reads the colour of the\n * slot the line sits in, as a button hands its content colour to what it\n * holds, and falls back to on-surface outside one.\n */\nfunction useIndicatorColors(tone: IndicatorTone): IndicatorColors {\n  const { colors } = useTheme()\n  const slot = useIconStyle().color\n\n  if (tone === 'inherit') {\n    const color = typeof slot === 'string' ? slot : colors.onSurface\n\n    return { active: color, track: withOpacity(color, 0.25) }\n  }\n\n  return { active: colors[tone], track: colors.secondaryContainer }\n}\n\n/** The width a view was last laid out at, and the handler that reads it. */\nfunction useMeasuredWidth() {\n  const [width, setWidth] = useState(0)\n\n  return {\n    onLayout: (event: LayoutChangeEvent) => {\n      setWidth(event.nativeEvent.layout.width)\n    },\n    width,\n  }\n}\n\nexport {\n  activeLength,\n  fillOf,\n  IndicatorLabels,\n  IndicatorLine,\n  readingOf,\n  useEased,\n  useIndicatorColors,\n  useMeasuredWidth,\n}\nexport type { IndicatorColors, IndicatorTiming, IndicatorTone }\n"],"mappings":"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"}

package/dist/indicator/motion.js

@@ -0,0 +1,86 @@
+import { c } from "react/compiler-runtime";
+import { useEffect } from "react";
+import { Easing, ReduceMotion, cancelAnimation, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+//#region src/indicator/motion.ts
+const SEARCH_STEPS = 24;
+/**
+* The value `frames` give at `time`, a share of the loop: the frames either
+* side of it, and the curve between them.
+*
+* A curve is a function of its parameter rather than of the time, so the
+* parameter is found by halving the interval until the curve's own `x` is the
+* share of the segment gone, which holds for every curve whose control points
+* lie inside the unit interval across, as every timing function's do. The
+* search is nested here rather than beside it: a worklet captures what it
+* calls when the module is evaluated, so one calling another declared below it
+* would be handed nothing, and the linter orders declarations by name.
+*/
+function keyframeAt(frames, time) {
+	"worklet";
+	let index = 0;
+	while (index < frames.length - 2 && time >= frames[index + 1][0]) index++;
+	const [from, start, curve] = frames[index];
+	const [to, end] = frames[index + 1];
+	const share = Math.min(1, Math.max(0, (time - from) / (to - from)));
+	if (curve === void 0 || share === 0 || share === 1) return start + (end - start) * share;
+	function coordinateAt(first, second, parameter) {
+		const rest = 1 - parameter;
+		return 3 * rest * rest * parameter * first + 3 * rest * parameter * parameter * second + parameter * parameter * parameter;
+	}
+	const [x1, y1, x2, y2] = curve;
+	let low = 0;
+	let high = 1;
+	let parameter = share;
+	for (let step = 0; step < SEARCH_STEPS; step++) {
+		if (coordinateAt(x1, x2, parameter) < share) low = parameter;
+		else high = parameter;
+		parameter = (low + high) / 2;
+	}
+	return start + (end - start) * coordinateAt(y1, y2, parameter);
+}
+/**
+* A clock running from 0 to 1 over `duration` ms and starting again, for as
+* long as `running` holds. It runs whatever the device says about reduced
+* motion: Reanimated would otherwise jump a looping animation to its end,
+* which freezes an indeterminate indicator, so a component slows its loop
+* there by lengthening `duration` instead, as web's does.
+*/
+function useLoop(duration, running) {
+	const $ = c(5);
+	const clock = useSharedValue(0);
+	let t0;
+	let t1;
+	if ($[0] !== clock || $[1] !== duration || $[2] !== running) {
+		t0 = () => {
+			if (!running) return;
+			clock.set(0);
+			clock.set(withRepeat(withTiming(1, {
+				duration,
+				easing: Easing.linear,
+				reduceMotion: ReduceMotion.Never
+			}), -1, false, void 0, ReduceMotion.Never));
+			return () => {
+				cancelAnimation(clock);
+			};
+		};
+		t1 = [
+			clock,
+			duration,
+			running
+		];
+		$[0] = clock;
+		$[1] = duration;
+		$[2] = running;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	useEffect(t0, t1);
+	return clock;
+}
+//#endregion
+export { keyframeAt, useLoop };
+
+//# sourceMappingURL=motion.js.map

package/dist/indicator/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":["SharedValue","useEffect","cancelAnimation","Easing","ReduceMotion","useSharedValue","withRepeat","withTiming","Curve","Keyframe","at","value","curve","SEARCH_STEPS","keyframeAt","frames","time","index","length","from","start","to","end","share","Math","min","max","undefined","coordinateAt","first","second","parameter","rest","x1","y1","x2","y2","low","high","step","useLoop","duration","running","$","_c","clock","t0","t1","set","easing","linear","reduceMotion","Never","_c"],"sources":["../../src/indicator/motion.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated'\n\nimport { useEffect } from 'react'\nimport {\n  cancelAnimation,\n  Easing,\n  ReduceMotion,\n  useSharedValue,\n  withRepeat,\n  withTiming,\n} from 'react-native-reanimated'\n\n// The machinery an indeterminate indicator's choreography runs on: a clock\n// that loops from 0 to 1, and the keyframes read off it. Web writes the same\n// choreography as CSS keyframes, each segment on a curve of its own; React\n// Native has no keyframes, so each property here is a list of the same\n// frames, read at the clock's time on the UI thread.\n\n/** A cubic Bézier's four control coordinates, in the order CSS writes them. */\ntype Curve = readonly [number, number, number, number]\n\n/**\n * One keyframe: where it falls in the loop, from 0 to 1, the value there,\n * and the curve the value takes to the next frame. A frame with no curve\n * moves to the next one at a constant rate, as a CSS keyframe with no timing\n * function does under a linear animation.\n */\ntype Keyframe = readonly [at: number, value: number, curve?: Curve]\n\n// How finely a curve's progress is searched for. Twenty-four halvings leave\n// it a sixteen-millionth out, far finer than a frame can show.\nconst SEARCH_STEPS = 24\n\n/**\n * The value `frames` give at `time`, a share of the loop: the frames either\n * side of it, and the curve between them.\n *\n * A curve is a function of its parameter rather than of the time, so the\n * parameter is found by halving the interval until the curve's own `x` is the\n * share of the segment gone, which holds for every curve whose control points\n * lie inside the unit interval across, as every timing function's do. The\n * search is nested here rather than beside it: a worklet captures what it\n * calls when the module is evaluated, so one calling another declared below it\n * would be handed nothing, and the linter orders declarations by name.\n */\nfunction keyframeAt(frames: readonly Keyframe[], time: number) {\n  'worklet'\n  let index = 0\n  while (index < frames.length - 2 && time >= frames[index + 1][0]) {\n    index++\n  }\n\n  const [from, start, curve] = frames[index]\n  const [to, end] = frames[index + 1]\n  const share = Math.min(1, Math.max(0, (time - from) / (to - from)))\n\n  if (curve === undefined || share === 0 || share === 1) {\n    return start + (end - start) * share\n  }\n\n  // One coordinate of the curve from (0, 0) to (1, 1) at a parameter, given\n  // the same coordinate of its two control points.\n  // oxlint-disable-next-line unicorn/consistent-function-scoping -- a worklet captures what it calls when the module is evaluated; see above\n  function coordinateAt(first: number, second: number, parameter: number) {\n    const rest = 1 - parameter\n    return (\n      3 * rest * rest * parameter * first +\n      3 * rest * parameter * parameter * second +\n      parameter * parameter * parameter\n    )\n  }\n\n  const [x1, y1, x2, y2] = curve\n  let low = 0\n  let high = 1\n  let parameter = share\n  for (let step = 0; step < SEARCH_STEPS; step++) {\n    if (coordinateAt(x1, x2, parameter) < share) {\n      low = parameter\n    } else {\n      high = parameter\n    }\n    parameter = (low + high) / 2\n  }\n\n  return start + (end - start) * coordinateAt(y1, y2, parameter)\n}\n\n/**\n * A clock running from 0 to 1 over `duration` ms and starting again, for as\n * long as `running` holds. It runs whatever the device says about reduced\n * motion: Reanimated would otherwise jump a looping animation to its end,\n * which freezes an indeterminate indicator, so a component slows its loop\n * there by lengthening `duration` instead, as web's does.\n */\nfunction useLoop(duration: number, running: boolean): SharedValue<number> {\n  const clock = useSharedValue(0)\n\n  useEffect(() => {\n    if (!running) {\n      return undefined\n    }\n\n    clock.set(0)\n    clock.set(\n      withRepeat(\n        withTiming(1, {\n          duration,\n          easing: Easing.linear,\n          reduceMotion: ReduceMotion.Never,\n        }),\n        -1,\n        false,\n        undefined,\n        ReduceMotion.Never,\n      ),\n    )\n\n    return () => {\n      cancelAnimation(clock)\n    }\n  }, [clock, duration, running])\n\n  return clock\n}\n\nexport { keyframeAt, useLoop }\nexport type { Curve, Keyframe }\n"],"mappings":";;;;AA+BA,MAAMa,eAAe;;;;;;;;;;;;;AAcrB,SAASC,WAAWC,QAA6BC,MAAc;CAC7D;CACA,IAAIC,QAAQ;CACZ,OAAOA,QAAQF,OAAOG,SAAS,KAAKF,QAAQD,OAAOE,QAAQ,EAAE,CAAC,IAC5DA;CAGF,MAAM,CAACE,MAAMC,OAAOR,SAASG,OAAOE;CACpC,MAAM,CAACI,IAAIC,OAAOP,OAAOE,QAAQ;CACjC,MAAMM,QAAQC,KAAKC,IAAI,GAAGD,KAAKE,IAAI,IAAIV,OAAOG,SAASE,KAAKF,KAAK,CAAC;CAElE,IAAIP,UAAUe,KAAAA,KAAaJ,UAAU,KAAKA,UAAU,GAClD,OAAOH,SAASE,MAAMF,SAASG;CAMjC,SAASK,aAAaC,OAAeC,QAAgBC,WAAmB;EACtE,MAAMC,OAAO,IAAID;EACjB,OACE,IAAIC,OAAOA,OAAOD,YAAYF,QAC9B,IAAIG,OAAOD,YAAYA,YAAYD,SACnCC,YAAYA,YAAYA;CAE5B;CAEA,MAAM,CAACE,IAAIC,IAAIC,IAAIC,MAAMxB;CACzB,IAAIyB,MAAM;CACV,IAAIC,OAAO;CACX,IAAIP,YAAYR;CAChB,KAAK,IAAIgB,OAAO,GAAGA,OAAO1B,cAAc0B,QAAQ;EAC9C,IAAIX,aAAaK,IAAIE,IAAIJ,SAAS,IAAIR,OACpCc,MAAMN;OAENO,OAAOP;EAETA,aAAaM,MAAMC,QAAQ;CAC7B;CAEA,OAAOlB,SAASE,MAAMF,SAASQ,aAAaM,IAAIE,IAAIL,SAAS;AAC/D;;;;;;;;AASA,SAAAS,QAAAC,UAAAC,SAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CACE,MAAAC,QAAcxC,eAAe,CAAC;CAAC,IAAAyC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAE,SAAAF,EAAA,OAAAF,YAAAE,EAAA,OAAAD,SAAA;EAErBI,WAAA;GACR,IAAI,CAACJ,SAAO;GAIZG,MAAKG,IAAK,CAAC;GACXH,MAAKG,IACH1C,WACEC,WAAW,GAAG;IAAAkC;IAAAQ,QAEJ9C,OAAM+C;IAAOC,cACP/C,aAAYgD;GAC5B,CAAC,GACD,IACA,OACAzB,KAAAA,GACAvB,aAAYgD,KACd,CACF;GAAC,aAEM;IACLlD,gBAAgB2C,KAAK;GAAC;EACvB;EACAE,KAAA;GAACF;GAAOJ;GAAUC;EAAO;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAF;EAAAE,EAAA,KAAAD;EAAAC,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAvB7B1C,UAAU6C,IAuBPC,EAA0B;CAAC,OAEvBF;AAAK"}