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

package/dist/carousel/arrangement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrangement.js","names":["CarouselLayout","GAP","SMALL_MAX","SMALL_MIN","Arrangement","large","largeCount","medium","small","steps","Placement","left","width","arrange","layout","room","itemSize","count","Math","min","max","withSteps","fit","floor","most","gaps","sizes","filledOf","Omit","trailingOf","length","placements","arrangement","padding","position","Array","from","_","index","clamped","to","fraction","start","rest","end","map","placement","next","step","filled","trailing","slice","last","turned","kept","slot","first","lefts","cursor","size","push","shift","away","filter","turning"],"sources":["../../src/carousel/arrangement.ts"],"sourcesContent":["// The carousel page's layouts as numbers: which items are large, medium and\n// small at each place a carousel comes to rest, and where each is drawn as\n// it moves between two of them. Apart from the component so the arithmetic\n// can be tested without anything being laid out, and so the component's file\n// holds what it renders. Copied from kanso-ui's src/carousel/arrangement.ts\n// and kept in step with it by hand, so the two libraries draw one carousel.\n//\n// The model is MDC-Android's keylines, simplified to what the page draws.\n// At rest a multi-browse carousel shows `largeCount` large items, one medium\n// and one small, filling the room exactly; a hero carousel one large and one\n// small. Each rest is one item further along than the last, and once the\n// last item has come into view the rests that remain turn the arrangement\n// round a slot at a time — small, the large ones, medium; then small,\n// medium, the large ones — so every item is drawn large at one rest at\n// least. At rest `s` the large items are always `s` to `s + largeCount - 1`.\n// Between two rests every item's place and width are interpolated, which is\n// what makes an item grow or shrink as it moves rather than jump. Items past\n// either edge are drawn small and out of sight, so they arrive at the size\n// of the slot they enter.\n//\n// Everything is in pixels along the inline axis of the carousel's content\n// box: 0 is its start edge, inside the leading padding.\n\ntype CarouselLayout = 'hero' | 'multi-browse' | 'uncontained'\n\n/** The page's 8dp between items. */\nconst GAP = 8\n\n/** The page's small item: 40dp at the least and 56dp at the most. */\nconst SMALL_MAX = 56\nconst SMALL_MIN = 40\n\ntype Arrangement = {\n  /** The large item's width, which every item is laid out at. */\n  large: number\n  /** How many items are large at rest. */\n  largeCount: number\n  /** The medium item's width, or 0 for a layout without one. */\n  medium: number\n  /** The small item's width, or 0 for a layout without one. */\n  small: number\n  /** The last place the carousel comes to rest, counting from 0. */\n  steps: number\n}\n\n/** Where an item is drawn: the start of what shows of it, and its width. */\ntype Placement = { left: number; width: number }\n\n/**\n * The sizes a layout draws its items at in a content box `room` wide, for\n * `count` items and a preferred large width of `itemSize`.\n */\nfunction arrange(\n  layout: CarouselLayout,\n  room: number,\n  itemSize: number,\n  count: number,\n): Arrangement {\n  if (layout === 'uncontained') {\n    const large = Math.min(itemSize, room)\n    return { large, largeCount: 0, medium: 0, small: 0, steps: 0 }\n  }\n\n  // The small item at its largest unless the room is too narrow for it.\n  const small = room >= 3 * SMALL_MAX + 2 * GAP ? SMALL_MAX : SMALL_MIN\n\n  if (layout === 'hero') {\n    const large = Math.max(room - GAP - small, small)\n    return withSteps({ large, largeCount: 1, medium: 0, small }, count)\n  }\n\n  // As many items at the preferred width as fit beside a medium and a small\n  // one, and no more than leave a medium and a small item to fill those two\n  // slots, so a short run of items still fills the room rather than leaving\n  // its last slots empty. Where what is left for the medium item is not\n  // between the small and the large width, the large width gives way, to\n  // whatever leaves the medium item halfway between the two.\n  const fit = Math.floor((room - small - GAP) / (itemSize + GAP))\n  const most = Math.max(1, Math.min(fit, count - 2))\n  for (let largeCount = most; largeCount >= 1; largeCount--) {\n    const gaps = (largeCount + 1) * GAP\n    const medium = room - largeCount * itemSize - gaps - small\n    if (medium >= small && medium <= itemSize) {\n      return withSteps({ large: itemSize, largeCount, medium, small }, count)\n    }\n    const large = (room - gaps - 1.5 * small) / (largeCount + 0.5)\n    if (large >= small) {\n      const sizes = { large, largeCount, medium: (large + small) / 2, small }\n      return withSteps(sizes, count)\n    }\n  }\n  // Too narrow for three: one large item and one small, as a hero draws.\n  return arrange('hero', room, itemSize, count)\n}\n\n// How many of the slots are filled: all of them, unless there are fewer\n// items, which leaves the last slots empty.\nfunction filledOf(sizes: Omit<Arrangement, 'steps'>, count: number) {\n  return Math.min(count, sizes.largeCount + trailingOf(sizes).length)\n}\n\n/**\n * Where every item is drawn with the carousel `position` rests along: a\n * whole number at a rest, and the fraction between two while it moves.\n * `room` is the content box's width and `padding` the space on each side of\n * it, which an item past the edge is drawn beyond.\n */\nfunction placements(\n  layout: CarouselLayout,\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  position: number,\n): Placement[] {\n  if (layout === 'uncontained') {\n    return Array.from({ length: count }, (_, index) => ({\n      left: index * (arrangement.large + GAP),\n      width: arrangement.large,\n    }))\n  }\n\n  const clamped = Math.min(Math.max(position, 0), arrangement.steps)\n  const from = Math.floor(clamped)\n  const to = Math.min(from + 1, arrangement.steps)\n  const fraction = clamped - from\n  const start = rest(arrangement, room, padding, count, from)\n  const end = rest(arrangement, room, padding, count, to)\n\n  return start.map((placement, index) => {\n    const next = end[index] ?? placement\n    return {\n      left: placement.left + (next.left - placement.left) * fraction,\n      width: placement.width + (next.width - placement.width) * fraction,\n    }\n  })\n}\n\n// Where every item is drawn at one rest.\nfunction rest(\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  step: number,\n) {\n  const { large, largeCount, small } = arrangement\n  const filled = filledOf(arrangement, count)\n  const trailing = trailingOf(arrangement).slice(0, filled - largeCount)\n  // The last rest drawn from the start; past it, how many trailing slots\n  // have turned round to the front, the last of them first.\n  const last = count - filled\n  const turned = Math.max(0, step - last)\n  const kept = trailing.length - turned\n  const sizes = [\n    ...Array.from(\n      { length: turned },\n      (_, slot) => trailing[trailing.length - 1 - slot] ?? small,\n    ),\n    ...Array.from({ length: Math.min(largeCount, filled) }, () => large),\n    ...trailing.slice(0, kept),\n  ]\n  // The item in the first slot. Once the arrangement turns, the slots hold\n  // the last items, whichever way round they are drawn.\n  const first = Math.min(step, last)\n\n  // The slots, laid out from the start edge.\n  const lefts: number[] = []\n  let cursor = 0\n  for (const size of sizes) {\n    lefts.push(cursor)\n    cursor += size + GAP\n  }\n  // A turned arrangement that does not fill the room is set against the end\n  // edge instead, which is where its large items belong.\n  const shift = turned > 0 ? room - (cursor - GAP) : 0\n  const away = small > 0 ? small : large\n\n  return Array.from({ length: count }, (_, index): Placement => {\n    const slot = index - first\n    if (slot < 0) {\n      // Past the start edge, beyond the padding, a small item per place.\n      return { left: -padding + slot * (away + GAP), width: away }\n    }\n    if (slot >= sizes.length) {\n      // Past the end edge, likewise.\n      return {\n        left: room + padding + GAP + (slot - sizes.length) * (away + GAP),\n        width: away,\n      }\n    }\n    return { left: (lefts[slot] ?? 0) + shift, width: sizes[slot] ?? away }\n  })\n}\n\n// The widths that follow the large ones at rest: medium then small, or the\n// small alone for a hero.\nfunction trailingOf({ medium, small }: Omit<Arrangement, 'steps'>) {\n  return [medium, small].filter((size) => size > 0)\n}\n\n// A rest starts at each item while every slot after it is filled, and each\n// trailing slot turning round to the front is one rest more.\nfunction withSteps(\n  sizes: Omit<Arrangement, 'steps'>,\n  count: number,\n): Arrangement {\n  const filled = filledOf(sizes, count)\n  const turning = Math.max(0, filled - sizes.largeCount)\n  return { ...sizes, steps: count - filled + turning }\n}\n\nexport type { Arrangement, CarouselLayout, Placement }\n\nexport { arrange, GAP, placements }\n"],"mappings":"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"}

package/dist/chequer/index.js

@@ -0,0 +1,95 @@
+import { useTheme } from "../theme/scope.js";
+import { HIDDEN } from "../glyphs/hidden.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet } from "react-native";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Defs, Pattern, Rect } from "react-native-svg";
+//#region src/chequer/index.tsx
+const TILE = 16;
+const HALF = TILE / 2;
+function Chequer() {
+	const $ = c(15);
+	const { colors } = useTheme();
+	const id = `chequer${useId()}`;
+	let t0;
+	if ($[0] !== colors.surfaceContainerLowest) {
+		t0 = /* @__PURE__ */ jsx(Rect, {
+			fill: colors.surfaceContainerLowest,
+			height: TILE,
+			width: TILE
+		});
+		$[0] = colors.surfaceContainerLowest;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] !== colors.surfaceContainerHighest) {
+		t1 = /* @__PURE__ */ jsx(Rect, {
+			fill: colors.surfaceContainerHighest,
+			height: HALF,
+			width: HALF
+		});
+		t2 = /* @__PURE__ */ jsx(Rect, {
+			fill: colors.surfaceContainerHighest,
+			height: HALF,
+			width: HALF,
+			x: HALF,
+			y: HALF
+		});
+		$[2] = colors.surfaceContainerHighest;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== id || $[6] !== t0 || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(Pattern, {
+			height: TILE,
+			id,
+			patternUnits: "userSpaceOnUse",
+			width: TILE,
+			children: [
+				t0,
+				t1,
+				t2
+			]
+		}) });
+		$[5] = id;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	const t4 = `url(#${id})`;
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Rect, {
+			fill: t4,
+			height: "100%",
+			width: "100%"
+		});
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t3 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Svg, {
+			...HIDDEN,
+			height: "100%",
+			style: StyleSheet.absoluteFill,
+			width: "100%",
+			children: [t3, t5]
+		});
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+//#endregion
+export { Chequer };
+
+//# sourceMappingURL=index.js.map

package/dist/chequer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useId","StyleSheet","Svg","Defs","Pattern","Rect","HIDDEN","useTheme","TILE","HALF","Chequer","$","_c","colors","id","t0","surfaceContainerLowest","t1","t2","surfaceContainerHighest","t3","t4","t5","t6","absoluteFill","_c"],"sources":["../../src/chequer/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { StyleSheet } from 'react-native'\nimport Svg, { Defs, Pattern, Rect } from 'react-native-svg'\n\nimport { HIDDEN } from '../glyphs/hidden'\nimport { useTheme } from '../theme/scope'\n\n// The chequer a transparent colour is drawn against, as kanso-ui's\n// src/styles/chequer.ts draws it, behind a swatch and behind a colour\n// slider's alpha track. A half-transparent red over a light surface and an\n// opaque pink are the same pixels; this is what tells them apart.\n//\n// Here rather than in either component, since both draw it and a second copy\n// would be a second density to keep in step. It is built from two surface\n// tokens, surface container highest squares on surface container lowest, so\n// it follows the theme rather than being a fixed grey. The squares are 8dp,\n// two to a 16dp tile on its diagonal, which reads as a chequer at a swatch's\n// size without turning into a texture.\n//\n// It is an svg pattern rather than a grid of views, so a track of any length\n// costs the same three rectangles. It fills the view it is placed in, behind\n// whatever comes after it there, so a colour drawn over it shows it through\n// as far as the colour is transparent. The view clips it to its own corners.\n\nconst TILE = 16\nconst HALF = TILE / 2\n\nfunction Chequer() {\n  const { colors } = useTheme()\n  // A pattern is found by its id, which has to be unique in the page under\n  // React Native Web. React's are, and from 19.2 on hold nothing a `url()`\n  // reference cannot take.\n  const id = `chequer${useId()}`\n\n  return (\n    <Svg {...HIDDEN} height=\"100%\" style={StyleSheet.absoluteFill} width=\"100%\">\n      <Defs>\n        <Pattern\n          height={TILE}\n          id={id}\n          patternUnits=\"userSpaceOnUse\"\n          width={TILE}\n        >\n          <Rect\n            fill={colors.surfaceContainerLowest}\n            height={TILE}\n            width={TILE}\n          />\n          <Rect\n            fill={colors.surfaceContainerHighest}\n            height={HALF}\n            width={HALF}\n          />\n          <Rect\n            fill={colors.surfaceContainerHighest}\n            height={HALF}\n            width={HALF}\n            x={HALF}\n            y={HALF}\n          />\n        </Pattern>\n      </Defs>\n      <Rect fill={`url(#${id})`} height=\"100%\" width=\"100%\" />\n    </Svg>\n  )\n}\n\nexport { Chequer }\n"],"mappings":";;;;;;;;AAwBA,MAAMQ,OAAO;AACb,MAAMC,OAAOD,OAAO;AAEpB,SAAAE,UAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACE,MAAA,EAAAC,WAAmBN,SAAS;CAI5B,MAAAO,KAAW,UAAUd,MAAM;CAAG,IAAAe;CAAA,IAAAJ,EAAA,OAAAE,OAAAG,wBAAA;EAWtBD,KAAA,oBAAC,MAAD;GACQ,MAAAF,OAAMG;GACJR,QAAAA;GACDA,OAAAA;EAAI,CAAA;EACXG,EAAA,KAAAE,OAAAG;EAAAL,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAE,OAAAM,yBAAA;EACFF,KAAA,oBAAC,MAAD;GACQ,MAAAJ,OAAMM;GACJV,QAAAA;GACDA,OAAAA;EAAI,CAAA;EAEbS,KAAA,oBAAC,MAAD;GACQ,MAAAL,OAAMM;GACJV,QAAAA;GACDA,OAAAA;GACJA,GAAAA;GACAA,GAAAA;EAAI,CAAA;EACPE,EAAA,KAAAE,OAAAM;EAAAR,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAD,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAM,MAAAN,EAAA,OAAAO,IAAA;EAvBNE,KAAA,oBAAC,MAAD,EAAA,UACE,qBAAC,SAAD;GACUZ,QAAAA;GACJM;GACS,cAAA;GACNN,OAAAA;GAJT,UAAA;IAMEO;IAKAE;IAKAC;GAhBM;EADL,CAAA,EAAA,CAAA;EAyBEP,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CACK,MAAAU,KAAA,QAAQP,GAAE;CAAG,IAAAQ;CAAA,IAAAX,EAAA,QAAAU,IAAA;EAAzBC,KAAA,oBAAC,MAAD;GAAY,MAAAD;GAAsB,QAAA;GAAa,OAAA;EAAM,CAAA;EAAGV,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAS,MAAAT,EAAA,QAAAW,IAAA;EA3B1DC,KAAA,qBAAC,KAAD;GAAI,GAAKjB;GAAe,QAAA;GAAc,OAAAL,WAAUuB;GAAqB,OAAA;GAArE,UAAA,CACEJ,IA0BAE,EA3BE;;EA4BEX,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OA5BNY;AA4BM"}

package/dist/collection/index.d.ts

@@ -0,0 +1,157 @@
+import { FlatList, HostInstance, PressableProps, ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+import { ReactElement, ReactNode, Ref } from "react";
+import "react-stately/useListState";
+import { Key, Selection, SelectionMode } from "react-stately";
+import "react-stately/useTreeState";
+//#region src/collection/index.d.ts
+type CollectionLoadMoreProps = {
+  /**
+   * 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 CollectionProps<T extends object = object> = Omit<ScrollViewProps, 'children' | 'role' | 'stickyHeaderIndices' | 'style'> & {
+  /**
+   * The rows, each an `Item`, `Section` or `LoadMore` part. 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.
+   * @default 'none'
+   */
+  readonly selectionMode?: SelectionMode;
+  /**
+   * What selecting a row is called, for a screen reader: the accessibility
+   * action that selects a row whose press may do something else. 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 CollectionRowProps = 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 CollectionSectionProps = {
+  /** The rows in the section. */
+  readonly children?: ReactNode;
+  /**
+   * The section's heading, a heading to a screen reader. A section without
+   * one is its rows alone.
+   */
+  readonly header?: ReactNode;
+  readonly id?: Key;
+};
+declare function loaderNode(props: CollectionLoadMoreProps): Generator<{
+  hasChildNodes: boolean;
+  props: CollectionLoadMoreProps;
+  rendered: null;
+  type: string;
+}, void, unknown>;
+declare function rowNode(props: CollectionRowProps): Generator<{
+  'aria-label': string | undefined;
+  hasChildNodes: boolean;
+  key: Key | undefined;
+  props: CollectionRowProps;
+  rendered: ReactNode;
+  textValue: string;
+  type: string;
+}, void, unknown>;
+declare function sectionNode(props: CollectionSectionProps): Generator<{
+  childNodes(): Generator<{
+    element: ReactNode;
+  }, void, unknown>;
+  hasChildNodes: boolean;
+  key: Key | undefined;
+  props: CollectionSectionProps;
+  rendered: ReactNode;
+  type: string;
+}, void, unknown>;
+//#endregion
+export { type CollectionLoadMoreProps, type CollectionProps, type CollectionRowProps, type CollectionSectionProps, loaderNode, rowNode, sectionNode };
+//# sourceMappingURL=index.d.ts.map