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

package/dist/components/keycap/index.js

@@ -0,0 +1,136 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useFontFamily } from "../../typography/fonts.js";
+import { familyStyle } from "../../typography/roles.js";
+import { useTextSize } from "../../typography/size.js";
+import { c } from "react/compiler-runtime";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/keycap/index.tsx
+const SHARE = .8125;
+const LINE = 1.4;
+const RULE = 1;
+function baselineOf(size) {
+	return RULE + .31149999999999994 * size;
+}
+const styles = StyleSheet.create({ alone: { alignSelf: "flex-start" } });
+const HIDDEN = {
+	accessibilityElementsHidden: true,
+	importantForAccessibility: "no-hide-descendants"
+};
+const stylesOf = themedStyles(({ colors, radii, spacing }) => StyleSheet.create({
+	cap: {
+		borderColor: colors.outline,
+		borderRadius: radii.xs,
+		borderWidth: RULE,
+		paddingHorizontal: spacing.xxs
+	},
+	text: { color: colors.onSurface }
+}));
+function holdsKeycap(node) {
+	if (Array.isArray(node)) return node.some((part) => holdsKeycap(part));
+	if (!isValidElement(node)) return false;
+	return node.type === Keycap || holdsKeycap(node.props.children);
+}
+/**
+* A single key on a keyboard, as an instruction names it: `Enter`, `Esc`,
+* `Ctrl`. A chord is several of these, combined at the call site.
+*
+* ```tsx
+* <Text variant="bodyLarge">
+*   Press <Keycap>Esc</Keycap> to dismiss
+* </Text>
+* ```
+*
+* It takes its size from the Text around it, so a key named in a heading and
+* one named in a footnote are the same component, and stays part of that
+* Text's sentence to a screen reader. `style`, `ref` and `testID` land on the
+* cap's `View`, and a `style` there applies over its own.
+*/
+function Keycap(t0) {
+	const $ = c(14);
+	let children;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({children, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+	} else {
+		children = $[1];
+		props = $[2];
+		style = $[3];
+	}
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const around = useTextSize();
+	const mono = useFontFamily(theme.typography.fontFamilyMono);
+	const size = (around ?? theme.typography.bodyMediumSize) * SHARE;
+	const inline = around !== void 0;
+	const native = Platform.OS !== "web";
+	const lowered = inline && native ? { transform: [{ translateY: baselineOf(size) }] } : null;
+	const T0 = View;
+	const t1 = inline && native ? HIDDEN : null;
+	const t2 = composeStyles(own.cap, inline ? null : styles.alone, lowered, style);
+	const T1 = Text;
+	const t3 = 1;
+	const t4 = composeStyles(own.text, familyStyle(mono), {
+		fontSize: size,
+		lineHeight: size * LINE
+	});
+	let t5;
+	if ($[4] !== T1 || $[5] !== children || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			numberOfLines: t3,
+			style: t4,
+			children
+		});
+		$[4] = T1;
+		$[5] = children;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== T0 || $[9] !== props || $[10] !== t1 || $[11] !== t2 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...props,
+			style: t2,
+			children: t5
+		});
+		$[8] = T0;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+/**
+* The words a Text holding a Keycap says to a screen reader on iOS and
+* Android, with each key's name in its place, or `undefined` for one holding
+* no Keycap, or anything whose words cannot be read off its children.
+*/
+function sentenceLabel(children) {
+	if (Platform.OS === "web" || !holdsKeycap(children)) return;
+	return spoken(children) ?? void 0;
+}
+function spoken(node) {
+	if (node === null || node === void 0 || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) {
+		const parts = node.map((part) => spoken(part));
+		return parts.includes(null) ? null : parts.join("");
+	}
+	if (!isValidElement(node)) return null;
+	if (node.props.onPress !== void 0 || node.props.children === void 0) return null;
+	return spoken(node.props.children);
+}
+//#endregion
+export { Keycap, sentenceLabel };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","TextStyle","ViewProps","ViewStyle","isValidElement","Text","NativeText","Platform","StyleSheet","View","useTheme","composeStyles","themedStyles","useFontFamily","familyStyle","useTextSize","SHARE","LINE","ASCENT","DESCENT","RULE","baselineOf","size","styles","create","alone","alignSelf","HIDDEN","accessibilityElementsHidden","importantForAccessibility","stylesOf","colors","radii","spacing","cap","borderColor","outline","borderRadius","xs","borderWidth","paddingHorizontal","xxs","text","color","onSurface","KeycapProps","Omit","children","ref","holdsKeycap","node","Array","isArray","some","part","type","Keycap","props","t0","$","_c","style","theme","own","around","mono","typography","fontFamilyMono","bodyMediumSize","inline","undefined","native","OS","lowered","transform","translateY","T0","t1","t2","T1","t3","t4","fontSize","lineHeight","t5","t6","sentenceLabel","spoken","String","parts","map","includes","join","onPress","_c","NativeText"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\n\nimport { isValidElement } from 'react'\nimport { Text as NativeText, Platform, StyleSheet, View } from 'react-native'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useFontFamily } from '../../typography/fonts'\nimport { familyStyle } from '../../typography/roles'\nimport { useTextSize } from '../../typography/size'\n\n// kanso-ui's Keycap: one key on a keyboard, as an instruction names it, drawn\n// as a small outlined cap in the line of text around it. A chord or a path\n// through a menu is several of them, with the sentence's own words between.\n//\n// No Material Design page draws a key, so it keeps web's reading of the chips\n// spec page: the assist chip's 1dp rule in the outline role, and the\n// extra-small corner rather than the chip's small one, since a box the height\n// of a line has no room for 8dp. No fill, so a keycap inside a Card or a Sheet\n// does not read as a nested surface. The text is on surface in the mono face,\n// at 0.8125 of the size around it on a 1.4 line height, a share smaller than\n// Code's because the rule adds height the glyphs do not, and on one line,\n// since 'Enter' broken across two stops reading as one key.\n//\n// A Text nested in another draws no border on iOS or Android, so the cap is a\n// View laid inline in the Text around it, which both platforms place on the\n// line, holding a Text of its own. Its size is the share of the one the\n// library's Text provides, as Code's is, and body medium's outside a Text.\n//\n// **iOS and Android stand an inline View on the baseline by its bottom edge**,\n// where React Native Web lays one out as an `inline-flex` box, which shares\n// its text's baseline with the line. So on native the cap is moved down by\n// how far its own baseline sits above its bottom edge: the 1dp rule, half the\n// leading the 1.4 line height adds, and the face's descent. The figures are\n// Roboto Mono's, the mono token's first family, measured in Chromium from the\n// face kanso-ui ships: 1.048em of ascent and 0.271em of descent, so 1.319em of\n// glyph box in a 1.4em line, and the baseline 0.3115em above the line box's\n// bottom. Neither platform's own placement has been measured on a device yet.\n//\n// A screen reader on iOS or Android reads the Text around the cap as one\n// element whose words leave the cap out, since an inline View is not text. So\n// the cap is hidden from it there, and the library's Text, when a Keycap is\n// among its children, speaks the sentence with the key's name in its place,\n// through `sentenceLabel` below. React Native Web reads the cap in its place\n// in the sentence as it is.\n\n// The size against the text around it, web's `0.8125em`.\nconst SHARE = 0.8125\n\n// The line height against the cap's own size, web's `1.4`.\nconst LINE = 1.4\n\n// Roboto Mono's ascent and descent against its size.\nconst ASCENT = 1.048\nconst DESCENT = 0.271\n\n// The rule around the cap, web's `1px`.\nconst RULE = 1\n\n// How far the cap's baseline sits above its bottom edge at a size: the rule,\n// half the leading and the descent.\nfunction baselineOf(size: number) {\n  return RULE + ((LINE - ASCENT - DESCENT) / 2 + DESCENT) * size\n}\n\nconst styles = StyleSheet.create({\n  // A cap standing on its own shrinks to its key rather than stretching\n  // across the column it sits in.\n  alone: {\n    alignSelf: 'flex-start',\n  },\n})\n\n// Kept from a screen reader on iOS and Android, where the Text around the cap\n// speaks its key instead.\nconst HIDDEN: ViewProps = {\n  accessibilityElementsHidden: true,\n  importantForAccessibility: 'no-hide-descendants',\n}\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    cap: {\n      borderColor: colors.outline,\n      borderRadius: radii.xs,\n      borderWidth: RULE,\n      paddingHorizontal: spacing.xxs,\n    },\n    text: {\n      color: colors.onSurface,\n    },\n  }),\n)\n\ntype KeycapProps = Omit<ViewProps, 'children'> & {\n  /** The key's name, as the instruction writes it, such as `Enter` or `Esc`. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n// Whether a Keycap is among the nodes, at any depth.\nfunction holdsKeycap(node: ReactNode): boolean {\n  if (Array.isArray(node)) {\n    return node.some((part: ReactNode) => holdsKeycap(part))\n  }\n  if (!isValidElement<{ children?: ReactNode }>(node)) {\n    return false\n  }\n  return node.type === Keycap || holdsKeycap(node.props.children)\n}\n\n/**\n * A single key on a keyboard, as an instruction names it: `Enter`, `Esc`,\n * `Ctrl`. A chord is several of these, combined at the call site.\n *\n * ```tsx\n * <Text variant=\"bodyLarge\">\n *   Press <Keycap>Esc</Keycap> to dismiss\n * </Text>\n * ```\n *\n * It takes its size from the Text around it, so a key named in a heading and\n * one named in a footnote are the same component, and stays part of that\n * Text's sentence to a screen reader. `style`, `ref` and `testID` land on the\n * cap's `View`, and a `style` there applies over its own.\n */\nfunction Keycap({ children, style, ...props }: KeycapProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const around = useTextSize()\n  const mono = useFontFamily(theme.typography.fontFamilyMono)\n  const size = (around ?? theme.typography.bodyMediumSize) * SHARE\n  const inline = around !== undefined\n  const native = Platform.OS !== 'web'\n  const lowered: null | ViewStyle =\n    inline && native ? { transform: [{ translateY: baselineOf(size) }] } : null\n\n  return (\n    <View\n      {...(inline && native ? HIDDEN : null)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.cap,\n        inline ? null : styles.alone,\n        lowered,\n        style,\n      )}\n    >\n      <NativeText\n        numberOfLines={1}\n        style={composeStyles<TextStyle>(own.text, familyStyle(mono), {\n          fontSize: size,\n          lineHeight: size * LINE,\n        })}\n      >\n        {children}\n      </NativeText>\n    </View>\n  )\n}\n\n/**\n * The words a Text holding a Keycap says to a screen reader on iOS and\n * Android, with each key's name in its place, or `undefined` for one holding\n * no Keycap, or anything whose words cannot be read off its children.\n */\nfunction sentenceLabel(children: ReactNode): string | undefined {\n  if (Platform.OS === 'web' || !holdsKeycap(children)) {\n    return undefined\n  }\n  return spoken(children) ?? undefined\n}\n\n// What a node says in a sentence, with each Keycap's name in its place, or\n// `null` where it holds something whose words cannot be read off its\n// children, such as a component that draws its own text or one that presses,\n// which the Text around it then leaves to the platform.\nfunction spoken(node: ReactNode): null | string {\n  if (node === null || node === undefined || typeof node === 'boolean') {\n    return ''\n  }\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node)\n  }\n  if (Array.isArray(node)) {\n    const parts = node.map((part: ReactNode) => spoken(part))\n    return parts.includes(null) ? null : parts.join('')\n  }\n  if (!isValidElement<{ children?: ReactNode; onPress?: unknown }>(node)) {\n    return null\n  }\n  if (node.props.onPress !== undefined || node.props.children === undefined) {\n    return null\n  }\n  return spoken(node.props.children)\n}\n\nexport type { KeycapProps }\n\nexport { Keycap, sentenceLabel }\n"],"mappings":"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"}

package/dist/components/list/index.d.ts

@@ -1,138 +1,16 @@
-import { FlatList, HostInstance, PressableProps, ScrollViewProps, StyleProp, ViewStyle } from "react-native";
-import { ReactElement, ReactNode, Ref } from "react";
-import { Key, Selection, SelectionMode } from "react-stately";
+import { CollectionLoadMoreProps, CollectionProps, CollectionRowProps, CollectionSectionProps, loaderNode, rowNode, sectionNode } from "../../collection/index.js";
 //#region src/components/list/index.d.ts
-type ListLoadMoreProps = {
-  /**
-   * Draws the ring in a row of its own while more items are being fetched.
-   * @default false
-   */
-  readonly isLoading?: boolean;
-  /**
-   * What a screen reader calls the ring, and hears as it appears. Left out,
-   * it is the word for it in the `I18nProvider`'s language, or the device's
-   * outside one, "Loading more" in English.
-   */
-  readonly label?: string;
-  /**
-   * Called when the end of the list comes within `scrollOffset` of its
-   * visible end, while nothing is loading. Called once for each length the
-   * list reaches, so a load that adds nothing does not start another.
-   */
-  readonly onLoadMore?: () => void;
-  /**
-   * How far past the visible end of the list the next items are asked for,
-   * as a share of the list's visible height.
-   * @default 1
-   */
-  readonly scrollOffset?: number;
-  readonly style?: StyleProp<ViewStyle>;
-  readonly testID?: string;
-};
-type ListProps<T extends object = object> = Omit<ScrollViewProps, 'children' | 'role' | 'stickyHeaderIndices' | 'style'> & {
-  /**
-   * The rows, each a `List.Item`, `List.Section` or `List.LoadMore`. With
-   * `items`, a function from an item to its part, called for each item in
-   * turn.
-   */
-  readonly children?: ((item: T) => ReactElement) | ReactNode;
-  /** The keys selected at first, when the list keeps its own selection. */
-  readonly defaultSelectedKeys?: 'all' | Iterable<Key>;
-  /** The keys of the rows drawn disabled, which take no presses. */
-  readonly disabledKeys?: Iterable<Key>;
-  /**
-   * Keeps the last selected row selected, so a press on it changes nothing.
-   * @default false
-   */
-  readonly disallowEmptySelection?: boolean;
-  /** The entries `children` draws a part for, when it is a function. */
-  readonly items?: Iterable<T>;
-  /**
-   * Called with a row's key when a press runs its action. A row's own
-   * `onAction` takes its place for that row.
-   */
-  readonly onAction?: (key: Key) => void;
-  /** Called with the selected keys whenever a press changes them. */
-  readonly onSelectionChange?: (keys: Selection) => void;
-  readonly ref?: Ref<FlatList>;
-  /**
-   * What the list shows when it has no rows and nothing is loading. Left
-   * out, it is a muted row saying "No results" in the `I18nProvider`'s
-   * language, or the device's outside one, so the list keeps a row's height.
-   */
-  readonly renderEmptyState?: () => ReactNode;
-  /**
-   * The selected keys, for a call site holding the selection itself with
-   * `onSelectionChange`.
-   */
-  readonly selectedKeys?: 'all' | Iterable<Key>;
-  /**
-   * Whether rows can be selected: one at a time, several, or none. A list
-   * that selects draws a checkbox on every row.
-   * @default 'none'
-   */
-  readonly selectionMode?: SelectionMode;
-  /**
-   * What selecting a row is called, for a screen reader: the accessibility
-   * action each selectable row offers, which is what its checkbox does. The
-   * row's own text is what names the row. Left out, it is the word for it in
-   * the `I18nProvider`'s language, or the device's outside one, "Select" in
-   * English.
-   */
-  readonly selectLabel?: string;
-  readonly style?: StyleProp<ViewStyle>;
-};
-type ListRowProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'role' | 'style'> & {
-  /** The row's headline, the one thing it is mostly about. */
-  readonly children?: ReactNode;
-  /** The key the row is selected and reported by. Give one to every row. */
-  readonly id?: Key;
-  /**
-   * Draws the row disabled, and takes no presses on it, as a key in the
-   * list's `disabledKeys` does.
-   * @default false
-   */
-  readonly isDisabled?: boolean;
-  /** Content before the headline: an avatar, an icon. */
-  readonly leading?: ReactNode;
-  /**
-   * Called when a press runs the row's action, in place of the list's
-   * `onAction` for this row.
-   */
-  readonly onAction?: () => void;
-  /**
-   * A line above the headline, in label small and the muted role. Given
-   * beside `supporting`, it makes the row the three-line item.
-   */
-  readonly overline?: ReactNode;
-  readonly ref?: Ref<HostInstance>;
-  readonly style?: StyleProp<ViewStyle>;
-  /** A second line under the headline, in body medium and the muted role. */
-  readonly supporting?: ReactNode;
-  /**
-   * The row's text, read off `children` when they are a plain string, so a
-   * row whose headline is an element passes it.
-   */
-  readonly textValue?: string;
-  /** Content after the headline, such as an amount or a control. */
-  readonly trailing?: ReactNode;
-};
-type ListSectionProps = {
-  /** The rows in the section. */
-  readonly children?: ReactNode;
-  /**
-   * The section's heading, which stays at the top of the list while the
-   * section's rows scroll under it. A section without one is its rows alone.
-   */
-  readonly header?: ReactNode;
-  readonly id?: Key;
-};
+type ListLoadMoreProps = CollectionLoadMoreProps;
+type ListProps<T extends object = object> = CollectionProps<T>;
+type ListRowProps = CollectionRowProps;
+type ListSectionProps = CollectionSectionProps;
 /**
  * A list of rows, one or more of which can be selected. Selection is React
  * Stately's, as web's is React Aria's: set `selectionMode` to `single` or
  * `multiple`, and pass `selectedKeys` with `onSelectionChange` to control
- * it or `defaultSelectedKeys` to let it keep its own. A list whose rows do
- * something takes `onAction`, or an `onAction` on each row.
+ * it or `defaultSelectedKeys` to let it keep its own. A list that selects
+ * draws a checkbox on every row. A list whose rows do something takes
+ * `onAction`, or an `onAction` on each row.
  *
  * ```tsx
  * <List aria-label="Label" selectionMode="multiple">
@@ -146,14 +24,15 @@ type ListSectionProps = {
  * list draws from their props, so none of them renders anything on its
  * own. Name the list with `aria-label`. It scrolls by itself, so it wants a
  * height to fill: a short list on a page that scrolls takes
- * `scrollEnabled={false}` and is laid out at its full length. `style` and
- * `ref` land on the `FlatList`.
+ * `scrollEnabled={false}` and is laid out at its full length. It is drawn
+ * on surface, and a section's header stays at the top while its rows scroll
+ * under it. `style` and `ref` land on the `FlatList`.
  *
  * Inside an `Autocomplete`, the list shows the rows the search keeps and
  * says how many there are to a screen reader, and a tap on a row reaches it
  * while the keyboard is up.
  */
-declare function List<T extends object = object>({ children, contentContainerStyle, defaultSelectedKeys, disabledKeys, disallowEmptySelection, items, keyboardShouldPersistTaps, onAction, onSelectionChange, ref, renderEmptyState, selectedKeys, selectionMode, selectLabel, style, ...props }: ListProps<T>): import("react").JSX.Element;
+declare function List<T extends object = object>(props: ListProps<T>): import("react").JSX.Element;
 declare namespace List {
   var Item: typeof ListRow;
   var LoadMore: typeof ListLoadMore;
@@ -167,12 +46,7 @@ declare namespace List {
  */
 declare function ListLoadMore(_props: ListLoadMoreProps): null;
 declare namespace ListLoadMore {
-  var getCollectionNode: (props: ListLoadMoreProps) => Generator<{
-    hasChildNodes: boolean;
-    props: ListLoadMoreProps;
-    rendered: null;
-    type: string;
-  }, void, unknown>;
+  var getCollectionNode: typeof loaderNode;
 }
 /**
  * One row. Its slots are ListItem's: `leading`, the headline as children,
@@ -185,15 +59,7 @@ declare namespace ListLoadMore {
  */
 declare function ListRow(_props: ListRowProps): null;
 declare namespace ListRow {
-  var getCollectionNode: (props: ListRowProps) => Generator<{
-    'aria-label': string | undefined;
-    hasChildNodes: boolean;
-    key: Key | undefined;
-    props: ListRowProps;
-    rendered: ReactNode;
-    textValue: string;
-    type: string;
-  }, void, unknown>;
+  var getCollectionNode: typeof rowNode;
 }
 /**
  * A group of rows under a heading, which stays at the top of the list while
@@ -201,16 +67,7 @@ declare namespace ListRow {
  */
 declare function ListSection(_props: ListSectionProps): null;
 declare namespace ListSection {
-  var getCollectionNode: (props: ListSectionProps) => Generator<{
-    childNodes(): Generator<{
-      element: ReactNode;
-    }, void, unknown>;
-    hasChildNodes: boolean;
-    key: Key | undefined;
-    props: ListSectionProps;
-    rendered: ReactNode;
-    type: string;
-  }, void, unknown>;
+  var getCollectionNode: typeof sectionNode;
 }
 //#endregion
 export { List, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps };