@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/glyphs/index.js

@@ -0,0 +1,170 @@
+import { useIconStyle } from "./icon-style.js";
+import { glyphStyles } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Platform, StyleSheet } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx } from "react/jsx-runtime";
+//#region src/glyphs/index.tsx
+const HIDDEN = Platform.select({
+	default: {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants"
+	},
+	web: { "aria-hidden": true }
+});
+function CheckGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Path, { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function CloseGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(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" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+/**
+* The svg every glyph draws: the 24-unit grid its path is on, a square of the
+* slot's size filled in the slot's colour, and nothing a screen reader
+* announces, since the control around a glyph carries the name. A glyph whose
+* direction means "onward" or "back" passes `mirrored`, which turns it over
+* under a right-to-left layout as `:dir(rtl)` does on web.
+*/
+function Glyph(t0) {
+	const $ = c(9);
+	const { children, color, mirrored: t1, size, style, testID } = t0;
+	const mirrored = t1 === void 0 ? false : t1;
+	const slot = useIconStyle();
+	const side = size ?? slot.size;
+	const t2 = color ?? slot.color;
+	let t3;
+	if ($[0] !== mirrored || $[1] !== style) {
+		t3 = StyleSheet.compose(mirrored && I18nManager.isRTL ? glyphStyles.mirrored : void 0, style);
+		$[0] = mirrored;
+		$[1] = style;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== children || $[4] !== side || $[5] !== t2 || $[6] !== t3 || $[7] !== testID) {
+		t4 = /* @__PURE__ */ jsx(Svg, {
+			...HIDDEN,
+			color: t2,
+			fill: "currentColor",
+			height: side,
+			style: t3,
+			testID,
+			viewBox: "0 0 24 24",
+			width: side,
+			children
+		});
+		$[3] = children;
+		$[4] = side;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = testID;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+function MinusGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Path, { d: "M19 13H5v-2h14v2z" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+const IndeterminateGlyph = MinusGlyph;
+function PersonGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(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" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function PlusGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Path, { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function SearchGlyph(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(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" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Glyph, {
+			...props,
+			children: t0
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+export { CheckGlyph, CloseGlyph, IndeterminateGlyph, MinusGlyph, PersonGlyph, PlusGlyph, SearchGlyph };
+
+//# sourceMappingURL=index.js.map

package/dist/glyphs/index.js.map

@@ -0,0 +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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"}

package/dist/glyphs/styles.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+//#region src/glyphs/styles.ts
+const glyphStyles = StyleSheet.create({ mirrored: { transform: [{ scaleX: -1 }] } });
+//#endregion
+export { glyphStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/glyphs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","glyphStyles","create","mirrored","transform","scaleX"],"sources":["../../src/glyphs/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\n// The glyphs' one style, apart from the glyphs in ./index.tsx so that file\n// exports components alone, which is what keeps fast refresh working for it.\nconst glyphStyles = StyleSheet.create({\n  mirrored: {\n    transform: [{ scaleX: -1 }],\n  },\n})\n\nexport { glyphStyles }\n"],"mappings":";;AAIA,MAAMC,cAAcD,WAAWE,OAAO,EACpCC,UAAU,EACRC,WAAW,CAAC,EAAEC,QAAQ,GAAG,CAAC,EAC5B,EACF,CAAC"}

package/dist/hooks/useWindowSizeClass.d.ts

@@ -0,0 +1,25 @@
+import { breakpoints } from "../tokens/defaults.js";
+//#region src/hooks/useWindowSizeClass.d.ts
+/**
+ * Material Design's window size classes, which kanso-ui's breakpoint tokens
+ * bound: `compact` from 0, `medium` from 600dp, `expanded` from 840dp, `large`
+ * from 1200dp and `extraLarge` from 1600dp.
+ */
+type WindowSizeClass = keyof typeof breakpoints;
+/**
+ * The window size class the app's window is in, by its width, as the library's
+ * own components lay themselves out by it. It changes as the window does: on
+ * rotation, in split screen, and when a foldable unfolds.
+ *
+ * ```tsx
+ * const sizeClass = useWindowSizeClass()
+ * const columns = sizeClass === 'compact' ? 1 : 2
+ * ```
+ *
+ * The classes are at
+ * https://m3.material.io/foundations/layout/applying-layout/window-size-classes.
+ */
+declare function useWindowSizeClass(): WindowSizeClass;
+//#endregion
+export { type WindowSizeClass, useWindowSizeClass };
+//# sourceMappingURL=useWindowSizeClass.d.ts.map

package/dist/hooks/useWindowSizeClass.js

@@ -0,0 +1,39 @@
+import { breakpoints } from "../tokens/defaults.js";
+import { c } from "react/compiler-runtime";
+import { useWindowDimensions } from "react-native";
+//#region src/hooks/useWindowSizeClass.ts
+const CLASSES = [
+	"extraLarge",
+	"large",
+	"expanded",
+	"medium",
+	"compact"
+];
+/**
+* The window size class the app's window is in, by its width, as the library's
+* own components lay themselves out by it. It changes as the window does: on
+* rotation, in split screen, and when a foldable unfolds.
+*
+* ```tsx
+* const sizeClass = useWindowSizeClass()
+* const columns = sizeClass === 'compact' ? 1 : 2
+* ```
+*
+* The classes are at
+* https://m3.material.io/foundations/layout/applying-layout/window-size-classes.
+*/
+function useWindowSizeClass() {
+	const $ = c(2);
+	const { width } = useWindowDimensions();
+	let t0;
+	if ($[0] !== width) {
+		t0 = CLASSES.find((sizeClass) => width >= breakpoints[sizeClass]) ?? "compact";
+		$[0] = width;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+//#endregion
+export { useWindowSizeClass };
+
+//# sourceMappingURL=useWindowSizeClass.js.map

package/dist/hooks/useWindowSizeClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSizeClass.js","names":["useWindowDimensions","breakpoints","WindowSizeClass","CLASSES","useWindowSizeClass","$","_c","width","t0","find","sizeClass","_c"],"sources":["../../src/hooks/useWindowSizeClass.ts"],"sourcesContent":["import { useWindowDimensions } from 'react-native'\n\nimport { breakpoints } from '../tokens/defaults'\n\n/**\n * Material Design's window size classes, which kanso-ui's breakpoint tokens\n * bound: `compact` from 0, `medium` from 600dp, `expanded` from 840dp, `large`\n * from 1200dp and `extraLarge` from 1600dp.\n */\ntype WindowSizeClass = keyof typeof breakpoints\n\n// Widest first, so the first class whose lower bound the window reaches is\n// the one it is in. The bounds themselves are the tokens'.\nconst CLASSES: readonly WindowSizeClass[] = [\n  'extraLarge',\n  'large',\n  'expanded',\n  'medium',\n  'compact',\n]\n\n/**\n * The window size class the app's window is in, by its width, as the library's\n * own components lay themselves out by it. It changes as the window does: on\n * rotation, in split screen, and when a foldable unfolds.\n *\n * ```tsx\n * const sizeClass = useWindowSizeClass()\n * const columns = sizeClass === 'compact' ? 1 : 2\n * ```\n *\n * The classes are at\n * https://m3.material.io/foundations/layout/applying-layout/window-size-classes.\n */\nfunction useWindowSizeClass(): WindowSizeClass {\n  const { width } = useWindowDimensions()\n\n  return (\n    CLASSES.find((sizeClass) => width >= breakpoints[sizeClass]) ?? 'compact'\n  )\n}\n\nexport { useWindowSizeClass }\nexport type { WindowSizeClass }\n"],"mappings":";;;;AAaA,MAAMG,UAAsC;CAC1C;CACA;CACA;CACA;CACA;AAAS;;;;;;;;;;;;;;AAgBX,SAAAC,qBAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CACE,MAAA,EAAAC,UAAkBP,oBAAoB;CAAC,IAAAQ;CAAA,IAAAH,EAAA,OAAAE,OAAA;EAGrCC,KAAAL,QAAOM,MAAMC,cAAeH,SAASN,YAAYS,UAAuB,KAAxE;EAAyEL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAAzEG;AAAyE"}

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { Avatar, AvatarProps } from "./components/avatar/index.js";
+import { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from "./components/button/index.js";
+import { Card, CardProps, CardVariant } from "./components/card/index.js";
+import { Checkbox, CheckboxProps } from "./components/checkbox/index.js";
+import { Chip, ChipActionProps, ChipFilterProps, ChipProps, ChipVariant } from "./components/chip/index.js";
+import { ChipGroup, ChipGroupChip, ChipGroupChipProps, ChipGroupProps } from "./components/chip-group/index.js";
+import { CopyField, CopyFieldProps } from "./components/copy-field/index.js";
+import { Currency, CurrencyProps, CurrencySignDisplay, CurrencyTone } from "./components/currency/index.js";
+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 { FieldVariant } from "./field/index.js";
+import { NumberField, NumberFieldProps } from "./components/number-field/index.js";
+import { ProductIcon, ProductIconProps } from "./components/product-icon/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 { Stack, StackAlign, StackGap, StackJustify, StackProps } from "./components/stack/index.js";
+import { Switch, SwitchProps } from "./components/switch/index.js";
+import { TypeRole } from "./typography/roles.js";
+import { Text, TextProps } from "./components/text/index.js";
+import { TextField, TextFieldProps } from "./components/text-field/index.js";
+import { IconStyle, useIconStyle } from "./glyphs/icon-style.js";
+import { KuiTheme } from "./tokens/defaults.js";
+import { WindowSizeClass, useWindowSizeClass } from "./hooks/useWindowSizeClass.js";
+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 };

package/dist/index.js

@@ -0,0 +1,27 @@
+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 { Button } from "./components/button/index.js";
+import { Card } from "./components/card/index.js";
+import { Checkbox } from "./components/checkbox/index.js";
+import { Chip } from "./components/chip/index.js";
+import { ChipGroup, ChipGroupChip } from "./components/chip-group/index.js";
+import { CopyField } from "./components/copy-field/index.js";
+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 { 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 { 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 };

package/dist/mark/image.js

@@ -0,0 +1,61 @@
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+//#region src/mark/image.ts
+/**
+* Whether the picture at `src` can be shown yet, from what the component's
+* own `Image` reports, as kanso-ui's `useImageLoadingStatus` reads it from an
+* `<img>`. The image is rendered from the start and hidden until it loads,
+* so the platform fetches it as it would any image, and hands `onLoad` and
+* `onError` to that element. A component keeps its fallback until the
+* picture is ready and brings it back if the picture fails, so a blank or
+* broken image is never what shows.
+*
+* `previous` is the picture last loaded, while a new `src` is still loading,
+* so the component can keep showing it rather than drop back to the fallback
+* for as long as the new one takes. It is cached by then, so it shows at
+* once.
+*
+* No `src` counts as a failure, since the outcome is the same: the fallback
+* shows. Outcomes are remembered against the `src` they came for, so a
+* change of `src` reads as loading rather than as the old outcome.
+*/
+function useImageLoadingStatus(src) {
+	const $ = c(4);
+	const [loaded, setLoaded] = useState(null);
+	const [failed, setFailed] = useState(null);
+	let status = "loading";
+	if (src === void 0 || failed === src) status = "error";
+	else if (loaded === src) status = "loaded";
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = function handlersFor(uri) {
+			return {
+				onError: () => {
+					setFailed(uri);
+				},
+				onLoad: () => {
+					setLoaded(uri);
+				}
+			};
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const handlersFor = t0;
+	const t1 = status === "loading" ? loaded ?? void 0 : void 0;
+	let t2;
+	if ($[1] !== status || $[2] !== t1) {
+		t2 = {
+			handlersFor,
+			previous: t1,
+			status
+		};
+		$[1] = status;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+//#endregion
+export { useImageLoadingStatus };
+
+//# sourceMappingURL=image.js.map

package/dist/mark/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":["useState","ImageHandlers","onError","onLoad","ImageLoadingStatus","useImageLoadingStatus","src","$","_c","loaded","setLoaded","failed","setFailed","status","undefined","t0","Symbol","for","handlersFor","uri","t1","t2","previous","_c"],"sources":["../../src/mark/image.ts"],"sourcesContent":["import { useState } from 'react'\n\n/** What a picture's own `Image` reports, bound to the `src` it shows. */\ntype ImageHandlers = {\n  readonly onError: () => void\n  readonly onLoad: () => void\n}\n\ntype ImageLoadingStatus = 'error' | 'loaded' | 'loading'\n\n/**\n * Whether the picture at `src` can be shown yet, from what the component's\n * own `Image` reports, as kanso-ui's `useImageLoadingStatus` reads it from an\n * `<img>`. The image is rendered from the start and hidden until it loads,\n * so the platform fetches it as it would any image, and hands `onLoad` and\n * `onError` to that element. A component keeps its fallback until the\n * picture is ready and brings it back if the picture fails, so a blank or\n * broken image is never what shows.\n *\n * `previous` is the picture last loaded, while a new `src` is still loading,\n * so the component can keep showing it rather than drop back to the fallback\n * for as long as the new one takes. It is cached by then, so it shows at\n * once.\n *\n * No `src` counts as a failure, since the outcome is the same: the fallback\n * shows. Outcomes are remembered against the `src` they came for, so a\n * change of `src` reads as loading rather than as the old outcome.\n */\nfunction useImageLoadingStatus(src: string | undefined) {\n  const [loaded, setLoaded] = useState<null | string>(null)\n  const [failed, setFailed] = useState<null | string>(null)\n\n  let status: ImageLoadingStatus = 'loading'\n  if (src === undefined || failed === src) {\n    status = 'error'\n  } else if (loaded === src) {\n    status = 'loaded'\n  }\n\n  // Bound to the `src` the element is keyed on, which is the one its events\n  // are about: an element left over from the `src` before cannot report for\n  // the one after it.\n  function handlersFor(uri: string): ImageHandlers {\n    return {\n      onError: () => {\n        setFailed(uri)\n      },\n      onLoad: () => {\n        setLoaded(uri)\n      },\n    }\n  }\n\n  return {\n    handlersFor,\n    previous: status === 'loading' ? (loaded ?? undefined) : undefined,\n    status,\n  }\n}\n\nexport type { ImageLoadingStatus }\n\nexport { useImageLoadingStatus }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,SAAAK,sBAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CACE,MAAA,CAAAC,QAAAC,aAA4BV,SAAwB,IAAI;CACxD,MAAA,CAAAW,QAAAC,aAA4BZ,SAAwB,IAAI;CAExD,IAAAa,SAAiC;CACjC,IAAIP,QAAQQ,KAAAA,KAAaH,WAAWL,KAClCO,SAASA;MACJ,IAAIJ,WAAWH,KACpBO,SAASA;CACV,IAAAE;CAAA,IAAAR,EAAA,OAAAS,OAAAC,IAAA,2BAAA,GAAA;EAKDF,KAAA,SAAAG,YAAAC,KAAA;GAAA,OACS;IAAAjB,eACI;KACPU,UAAUO,GAAG;IAAC;IACfhB,cACO;KACNO,UAAUS,GAAG;IAAC;GAElB;EAAC;EACFZ,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CATD,MAAAW,cAAAH;CAaY,MAAAK,KAAAP,WAAW,YAAaJ,UAAAK,KAAAA,IAAxBA,KAAAA;CAAwD,IAAAO;CAAA,IAAAd,EAAA,OAAAM,UAAAN,EAAA,OAAAa,IAAA;EAF7DC,KAAA;GAAAH;GAAAI,UAEKF;GAAwDP;EAEpE;EAACN,EAAA,KAAAM;EAAAN,EAAA,KAAAa;EAAAb,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OAJMc;AAIN"}

package/dist/mark/index.d.ts

@@ -0,0 +1,9 @@
+import "./styles.js";
+import { ImageProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { Ref } from "react";
+//#region src/mark/index.d.ts
+/** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */
+type MarkImageProps = Pick<ImageProps, 'crossOrigin' | 'fadeDuration' | 'progressiveRenderingEnabled' | 'referrerPolicy' | 'resizeMethod'>;
+//#endregion
+export type { MarkImageProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/mark/index.js

@@ -0,0 +1,234 @@
+import { PersonGlyph } from "../glyphs/index.js";
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useTypeRole } from "../typography/roles.js";
+import { useImageLoadingStatus } from "./image.js";
+import { initialOfThing, initialsOfPerson } from "./initials.js";
+import { DIAMETERS, GLYPH_SHARE, initialsStylesOf, markStyles, markStylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { Image, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/mark/index.tsx
+const KINDS = {
+	person: {
+		initials: initialsOfPerson,
+		resizeMode: "cover",
+		shape: "circle",
+		tintsFallback: false
+	},
+	thing: {
+		initials: initialOfThing,
+		resizeMode: "contain",
+		shape: "square",
+		tintsFallback: true
+	}
+};
+const CONTENT = {
+	negative: "onNegativeContainer",
+	positive: "onPositiveContainer",
+	primary: "onPrimaryContainer",
+	secondary: "onSecondaryContainer",
+	tertiary: "onTertiaryContainer"
+};
+/**
+* The small identity mark Avatar and ProductIcon both render: a picture once
+* it has loaded, initials until then or if it fails, named for whoever or
+* whatever it stands for. Shared rather than written into each, so a fix to
+* one reaches both, as on web. Not a component of the library's own, and not
+* exported from the package.
+*/
+function Mark(t0) {
+	const $ = c(62);
+	let imgProps;
+	let kind;
+	let name;
+	let props;
+	let size;
+	let src;
+	let style;
+	let t1;
+	let t2;
+	let tone;
+	if ($[0] !== t0) {
+		({decorative: t1, imgProps, kind, name, showPersonIcon: t2, size, src, style, tone, ...props} = t0);
+		$[0] = t0;
+		$[1] = imgProps;
+		$[2] = kind;
+		$[3] = name;
+		$[4] = props;
+		$[5] = size;
+		$[6] = src;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = tone;
+	} else {
+		imgProps = $[1];
+		kind = $[2];
+		name = $[3];
+		props = $[4];
+		size = $[5];
+		src = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		tone = $[10];
+	}
+	const decorative = t1 === void 0 ? false : t1;
+	const showPersonIcon = t2 === void 0 ? true : t2;
+	const { initials, resizeMode, shape, tintsFallback } = KINDS[kind];
+	const theme = useTheme();
+	const label = useTypeRole("labelLarge");
+	const { handlersFor, previous, status } = useImageLoadingStatus(src);
+	let T0;
+	let initialsNode;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[11] !== decorative || $[12] !== initials || $[13] !== kind || $[14] !== label || $[15] !== name || $[16] !== previous || $[17] !== props || $[18] !== shape || $[19] !== showPersonIcon || $[20] !== size || $[21] !== status || $[22] !== style || $[23] !== theme || $[24] !== tintsFallback || $[25] !== tone) {
+		const own = markStylesOf(theme);
+		const text = initialsStylesOf(theme);
+		let t9;
+		if ($[34] !== initials || $[35] !== name) {
+			t9 = initials(name);
+			$[34] = initials;
+			$[35] = name;
+			$[36] = t9;
+		} else t9 = $[36];
+		const fallback = t9;
+		const named = !decorative && name.trim() !== "";
+		const showsPicture = status === "loaded" || previous !== void 0;
+		initialsNode = null;
+		if (!showsPicture && kind === "person" && fallback === "") {
+			let t10;
+			if ($[37] !== showPersonIcon || $[38] !== size || $[39] !== theme || $[40] !== tone) {
+				t10 = showPersonIcon ? /* @__PURE__ */ jsx(PersonGlyph, {
+					color: theme.colors[CONTENT[tone]],
+					size: DIAMETERS[size] * GLYPH_SHARE
+				}) : null;
+				$[37] = showPersonIcon;
+				$[38] = size;
+				$[39] = theme;
+				$[40] = tone;
+				$[41] = t10;
+			} else t10 = $[41];
+			initialsNode = t10;
+		} else if (!showsPicture) {
+			const initialsText = /* @__PURE__ */ jsx(Text, {
+				allowFontScaling: false,
+				style: composeStyles(label, text[size], text[tone]),
+				children: fallback
+			});
+			initialsNode = tintsFallback ? /* @__PURE__ */ jsx(View, {
+				style: composeStyles(markStyles.fallback, own[tone]),
+				children: initialsText
+			}) : initialsText;
+		}
+		T0 = View;
+		t3 = named ? true : void 0;
+		t4 = decorative ? true : void 0;
+		t5 = named ? name : void 0;
+		t6 = named ? "img" : void 0;
+		t7 = props;
+		t8 = composeStyles(own.base, own[shape], markStyles[size], tintsFallback ? void 0 : own[tone], style);
+		$[11] = decorative;
+		$[12] = initials;
+		$[13] = kind;
+		$[14] = label;
+		$[15] = name;
+		$[16] = previous;
+		$[17] = props;
+		$[18] = shape;
+		$[19] = showPersonIcon;
+		$[20] = size;
+		$[21] = status;
+		$[22] = style;
+		$[23] = theme;
+		$[24] = tintsFallback;
+		$[25] = tone;
+		$[26] = T0;
+		$[27] = initialsNode;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = t7;
+		$[33] = t8;
+	} else {
+		T0 = $[26];
+		initialsNode = $[27];
+		t3 = $[28];
+		t4 = $[29];
+		t5 = $[30];
+		t6 = $[31];
+		t7 = $[32];
+		t8 = $[33];
+	}
+	let t9;
+	if ($[42] !== previous || $[43] !== resizeMode) {
+		t9 = previous === void 0 ? null : /* @__PURE__ */ jsx(Image, {
+			accessibilityIgnoresInvertColors: true,
+			resizeMode,
+			source: sourceOf(previous),
+			style: markStyles.image
+		}, previous);
+		$[42] = previous;
+		$[43] = resizeMode;
+		$[44] = t9;
+	} else t9 = $[44];
+	let t10;
+	if ($[45] !== handlersFor || $[46] !== imgProps || $[47] !== resizeMode || $[48] !== src || $[49] !== status) {
+		t10 = src === void 0 || status === "error" ? null : /* @__PURE__ */ jsx(Image, {
+			accessibilityIgnoresInvertColors: true,
+			...imgProps,
+			...handlersFor(src),
+			resizeMode,
+			source: sourceOf(src),
+			style: composeStyles(markStyles.image, status === "loaded" ? void 0 : markStyles.imagePending)
+		}, src);
+		$[45] = handlersFor;
+		$[46] = imgProps;
+		$[47] = resizeMode;
+		$[48] = src;
+		$[49] = status;
+		$[50] = t10;
+	} else t10 = $[50];
+	let t11;
+	if ($[51] !== T0 || $[52] !== initialsNode || $[53] !== t10 || $[54] !== t3 || $[55] !== t4 || $[56] !== t5 || $[57] !== t6 || $[58] !== t7 || $[59] !== t8 || $[60] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(T0, {
+			accessible: t3,
+			"aria-hidden": t4,
+			"aria-label": t5,
+			role: t6,
+			...t7,
+			style: t8,
+			children: [
+				initialsNode,
+				t9,
+				t10
+			]
+		});
+		$[51] = T0;
+		$[52] = initialsNode;
+		$[53] = t10;
+		$[54] = t3;
+		$[55] = t4;
+		$[56] = t5;
+		$[57] = t6;
+		$[58] = t7;
+		$[59] = t8;
+		$[60] = t9;
+		$[61] = t11;
+	} else t11 = $[61];
+	return t11;
+}
+function sourceOf(uri) {
+	return { uri };
+}
+//#endregion
+export { Mark };
+
+//# sourceMappingURL=index.js.map