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

package/dist/components/chip/index.js

@@ -0,0 +1,257 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles } from "../../theme/styles.js";
+import { AnimatedPressable, toggleState, useButtonAction } from "../../button/index.js";
+import { usePressFeedback } from "../../press/index.js";
+import { shadowsOf, stylesOf } from "../../chip/styles.js";
+import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chip/index.tsx
+/**
+* A chip. By default a filter chip, which is a two-state button reporting
+* its state as a toggle Button does: pass `isSelected` with `onChange` to
+* control it, or `defaultSelected` to let it keep its own state.
+*
+* ```tsx
+* <Chip defaultSelected>Label</Chip>
+* ```
+*
+* `variant="assist"` and `variant="suggestion"` draw the page's two action
+* chips instead: plain buttons, pressed with `onPress`, never selected.
+*
+* A column stretches a chip across it, as it does any view; a row of chips is
+* a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.
+*/
+function Chip(t0) {
+	const $ = c(80);
+	let children;
+	let defaultSelected;
+	let hitSlop;
+	let icon;
+	let isSelected;
+	let onBlur;
+	let onChange;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLayout;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({children, defaultSelected, elevated: t1, hitSlop, icon, isDisabled: t2, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, style, variant: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelected;
+		$[3] = hitSlop;
+		$[4] = icon;
+		$[5] = isSelected;
+		$[6] = onBlur;
+		$[7] = onChange;
+		$[8] = onFocus;
+		$[9] = onHoverIn;
+		$[10] = onHoverOut;
+		$[11] = onLayout;
+		$[12] = onPress;
+		$[13] = onPressIn;
+		$[14] = onPressOut;
+		$[15] = props;
+		$[16] = style;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+	} else {
+		children = $[1];
+		defaultSelected = $[2];
+		hitSlop = $[3];
+		icon = $[4];
+		isSelected = $[5];
+		onBlur = $[6];
+		onChange = $[7];
+		onFocus = $[8];
+		onHoverIn = $[9];
+		onHoverOut = $[10];
+		onLayout = $[11];
+		onPress = $[12];
+		onPressIn = $[13];
+		onPressOut = $[14];
+		props = $[15];
+		style = $[16];
+		t1 = $[17];
+		t2 = $[18];
+		t3 = $[19];
+	}
+	const elevated = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "filter" : t3;
+	const theme = useTheme();
+	const [width, setWidth] = useState(48);
+	const isToggle = variant === "filter";
+	let t4;
+	if ($[20] !== defaultSelected || $[21] !== isSelected || $[22] !== isToggle || $[23] !== onChange || $[24] !== onPress) {
+		t4 = {
+			defaultSelected,
+			href: void 0,
+			isSelected,
+			isToggle,
+			onChange,
+			onPress,
+			type: void 0
+		};
+		$[20] = defaultSelected;
+		$[21] = isSelected;
+		$[22] = isToggle;
+		$[23] = onChange;
+		$[24] = onPress;
+		$[25] = t4;
+	} else t4 = $[25];
+	const action = useButtonAction(t4);
+	const t5 = variant === "assist";
+	let t6;
+	if ($[26] !== action.selected || $[27] !== elevated || $[28] !== isDisabled || $[29] !== t5 || $[30] !== theme) {
+		t6 = paintOf(theme, {
+			assist: t5,
+			disabled: isDisabled,
+			elevated,
+			selected: action.selected
+		});
+		$[26] = action.selected;
+		$[27] = elevated;
+		$[28] = isDisabled;
+		$[29] = t5;
+		$[30] = theme;
+		$[31] = t6;
+	} else t6 = $[31];
+	const paint = t6;
+	const eased = useEasedColors(paint);
+	let t7;
+	if ($[32] !== theme.radii.sm) {
+		t7 = { borderRadius: theme.radii.sm };
+		$[32] = theme.radii.sm;
+		$[33] = t7;
+	} else t7 = $[33];
+	let t8;
+	if ($[34] !== isDisabled || $[35] !== onBlur || $[36] !== onFocus || $[37] !== onHoverIn || $[38] !== onHoverOut || $[39] !== onPressIn || $[40] !== onPressOut || $[41] !== paint.layer || $[42] !== t7) {
+		t8 = {
+			color: paint.layer,
+			corners: t7,
+			disabled: isDisabled,
+			onBlur,
+			onFocus,
+			onHoverIn,
+			onHoverOut,
+			onPressIn,
+			onPressOut
+		};
+		$[34] = isDisabled;
+		$[35] = onBlur;
+		$[36] = onFocus;
+		$[37] = onHoverIn;
+		$[38] = onHoverOut;
+		$[39] = onPressIn;
+		$[40] = onPressOut;
+		$[41] = paint.layer;
+		$[42] = t7;
+		$[43] = t8;
+	} else t8 = $[43];
+	const feedback = usePressFeedback(t8);
+	let t9;
+	if ($[44] !== action.selected || $[45] !== isToggle) {
+		t9 = isToggle ? toggleState(action.selected) : void 0;
+		$[44] = action.selected;
+		$[45] = isToggle;
+		$[46] = t9;
+	} else t9 = $[46];
+	const t10 = feedback.handlers;
+	let t11;
+	if ($[47] !== hitSlop || $[48] !== theme || $[49] !== width) {
+		t11 = hitSlop ?? targetOf(width, theme);
+		$[47] = hitSlop;
+		$[48] = theme;
+		$[49] = width;
+		$[50] = t11;
+	} else t11 = $[50];
+	let t12;
+	if ($[51] !== onLayout) {
+		t12 = measureThen(setWidth, onLayout);
+		$[51] = onLayout;
+		$[52] = t12;
+	} else t12 = $[52];
+	const t13 = action.onPress;
+	let t14;
+	if ($[53] !== eased.container || $[54] !== elevated || $[55] !== feedback.hovered || $[56] !== feedback.ring || $[57] !== isDisabled || $[58] !== style || $[59] !== theme) {
+		t14 = composeStyles(stylesOf(theme).pill, eased.container, elevated && !isDisabled ? shadowsOf(theme)[feedback.hovered ? "elevation2" : "elevation1"] : void 0, feedback.ring, style);
+		$[53] = eased.container;
+		$[54] = elevated;
+		$[55] = feedback.hovered;
+		$[56] = feedback.ring;
+		$[57] = isDisabled;
+		$[58] = style;
+		$[59] = theme;
+		$[60] = t14;
+	} else t14 = $[60];
+	let t15;
+	if ($[61] !== action.selected || $[62] !== icon || $[63] !== paint.glyph) {
+		t15 = /* @__PURE__ */ jsx(ChipGlyph, {
+			color: paint.glyph,
+			icon,
+			selected: action.selected
+		});
+		$[61] = action.selected;
+		$[62] = icon;
+		$[63] = paint.glyph;
+		$[64] = t15;
+	} else t15 = $[64];
+	let t16;
+	if ($[65] !== children || $[66] !== eased.label) {
+		t16 = /* @__PURE__ */ jsx(ChipLabel, {
+			color: eased.label,
+			children
+		});
+		$[65] = children;
+		$[66] = eased.label;
+		$[67] = t16;
+	} else t16 = $[67];
+	let t17;
+	if ($[68] !== action.onPress || $[69] !== feedback.handlers || $[70] !== feedback.layer || $[71] !== isDisabled || $[72] !== props || $[73] !== t11 || $[74] !== t12 || $[75] !== t14 || $[76] !== t15 || $[77] !== t16 || $[78] !== t9) {
+		t17 = /* @__PURE__ */ jsxs(AnimatedPressable, {
+			role: "button",
+			...t9,
+			...props,
+			...t10,
+			disabled: isDisabled,
+			hitSlop: t11,
+			onLayout: t12,
+			onPress: t13,
+			style: t14,
+			children: [
+				feedback.layer,
+				t15,
+				t16
+			]
+		});
+		$[68] = action.onPress;
+		$[69] = feedback.handlers;
+		$[70] = feedback.layer;
+		$[71] = isDisabled;
+		$[72] = props;
+		$[73] = t11;
+		$[74] = t12;
+		$[75] = t14;
+		$[76] = t15;
+		$[77] = t16;
+		$[78] = t9;
+		$[79] = t17;
+	} else t17 = $[79];
+	return t17;
+}
+//#endregion
+export { Chip };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","type","action","t5","t6","selected","assist","disabled","paint","eased","t7","radii","sm","borderRadius","t8","layer","color","corners","feedback","t9","t10","handlers","t11","t12","t13","t14","container","hovered","ring","pill","t15","glyph","t16","label","t17","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport { AnimatedPressable, toggleState, useButtonAction } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  children,\n  defaultSelected,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}

package/dist/components/chip-group/index.d.ts

@@ -0,0 +1,143 @@
+import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ReactElement, ReactNode, Ref } from "react";
+import { Key, Selection, SelectionMode } from "react-stately";
+//#region src/components/chip-group/index.d.ts
+type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {
+  /** The chip's label. */
+  readonly children: ReactNode;
+  /**
+   * An icon before the label, in the page's 18dp slot and the primary role,
+   * which the slot hands it through `useIconStyle()`. The check takes its
+   * place while the chip is chosen, so the chip keeps its width.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * The key selection and removal report the chip by. Without one, a chip
+   * drawn from `items` takes its item's `id` or `key`.
+   */
+  readonly id?: Key;
+  /**
+   * Draws the chip disabled, and takes no presses on it or on its close
+   * target, as a key in the group's `disabledKeys` does.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The chip's text, which names its close target. Read off `children` when
+   * they are a plain string, so a chip whose label is an element passes it.
+   */
+  readonly textValue?: string;
+};
+type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * The chips, each a `ChipGroup.Chip` with an `id` of its own. With
+   * `items`, a function from an item to its chip, called for each item in
+   * turn.
+   */
+  readonly children?: ((item: T) => ReactElement) | ReactNode;
+  /** The keys selected at first, when the group keeps its own selection. */
+  readonly defaultSelectedKeys?: 'all' | Iterable<Key>;
+  /**
+   * A hint under the group. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  readonly description?: string;
+  /** The keys of the chips drawn disabled, which take no presses. */
+  readonly disabledKeys?: Iterable<Key>;
+  /**
+   * Keeps the last selected chip selected, so a press on it changes
+   * nothing.
+   * @default false
+   */
+  readonly disallowEmptySelection?: boolean;
+  /**
+   * The problem with the current selection, in words. Its presence is what
+   * puts the group in its error state: the message and the label's colour
+   * both follow from it.
+   */
+  readonly error?: string;
+  /** The entries `children` draws a chip for, when it is a function. */
+  readonly items?: Iterable<T>;
+  /**
+   * What the group is for. Required rather than optional: a set of chips
+   * with no name is a row a screen reader cannot introduce.
+   */
+  readonly label: string;
+  /**
+   * Called with the key of the chip whose close target was pressed. Given
+   * this, every chip draws one; the call site removes the chip from what it
+   * renders.
+   */
+  readonly onRemove?: (keys: Set<Key>) => void;
+  /** Called with the selected keys whenever a press changes them. */
+  readonly onSelectionChange?: (keys: Selection) => void;
+  readonly ref?: Ref<View>;
+  /**
+   * What the close target on each chip is called, for a screen reader. The
+   * chip's own text follows it, so this is the verb rather than the whole
+   * phrase: "Remove" becomes "Remove First item".
+   * @default 'Remove'
+   */
+  readonly removeLabel?: string;
+  /** What the row draws once it holds no chips. */
+  readonly renderEmptyState?: () => ReactNode;
+  /**
+   * The selected keys, for a call site holding the selection itself with
+   * `onSelectionChange`.
+   */
+  readonly selectedKeys?: 'all' | Iterable<Key>;
+  /**
+   * Whether a press selects a chip: one at a time, several, or none, in
+   * which case the chips are not buttons.
+   * @default 'none'
+   */
+  readonly selectionMode?: SelectionMode;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * A labelled set of chips, one or more of which can be chosen, each of which
+ * can be removed. Selection is React Stately's: set `selectionMode` to
+ * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to
+ * control it, or `defaultSelectedKeys` to let the group keep its own.
+ *
+ * ```tsx
+ * <ChipGroup label="Label" onRemove={remove} selectionMode="multiple">
+ *   <ChipGroup.Chip id="first">First item</ChipGroup.Chip>
+ * </ChipGroup>
+ * ```
+ *
+ * Give the group `onRemove` and each chip draws a close target. A chip that
+ * toggles nothing else is Chip; this is for a set that shares a value.
+ *
+ * A screen reader hears a group named by its label, and each chip as a button
+ * named by its label, selected or not. On the web the line under the group
+ * describes it, as web's does; on iOS and Android it is read after the chips,
+ * where it sits. `style`, `ref` and `testID` land on the group as a whole,
+ * which is the element a layout positions.
+ */
+declare function ChipGroup<T extends object = object>({ children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel, renderEmptyState, selectedKeys, selectionMode, style, ...props }: ChipGroupProps<T>): import("react").JSX.Element;
+declare namespace ChipGroup {
+  var Chip: typeof ChipGroupChip;
+}
+/**
+ * One chip of a `ChipGroup`, which draws it: the group builds its set from
+ * these, so one renders nothing on its own. Give every chip an `id`, which is
+ * the key selection and removal report it by.
+ */
+declare function ChipGroupChip(_props: ChipGroupChipProps): null;
+declare namespace ChipGroupChip {
+  var getCollectionNode: (props: ChipGroupChipProps) => Generator<{
+    'aria-label': string | undefined;
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: ChipGroupChipProps;
+    rendered: ReactNode;
+    textValue: string;
+    type: string;
+  }, void, unknown>;
+}
+//#endregion
+export { ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps };
+//# sourceMappingURL=index.d.ts.map