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

package/dist/components/card/index.js

@@ -0,0 +1,315 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useLinkPress } from "../../router/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { usePressFeedback } from "../../press/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/card/index.tsx
+const paddings = themedStyles(({ spacing }) => StyleSheet.create({
+	default: { padding: spacing.lg },
+	none: { padding: 0 }
+}));
+const stylesOf = themedStyles(({ colors, radii, shadows }) => StyleSheet.create({
+	base: {
+		borderRadius: radii.md,
+		overflow: "hidden"
+	},
+	elevated: { backgroundColor: colors.surfaceContainerLow },
+	filled: { backgroundColor: colors.surfaceContainerHighest },
+	lifted: { boxShadow: shadows.elevation2 },
+	outlined: {
+		backgroundColor: colors.surface,
+		borderColor: colors.outlineVariant,
+		borderWidth: 1
+	},
+	resting: { boxShadow: shadows.elevation1 }
+}));
+const disabledStylesOf = themedStyles(({ colors, stateLayerOpacity }) => StyleSheet.create({
+	content: { opacity: stateLayerOpacity.disabledContent },
+	elevated: { backgroundColor: withOpacity(colors.surfaceContainerLow, stateLayerOpacity.disabledContent) },
+	filled: { backgroundColor: withOpacity(colors.surfaceContainerHighest, stateLayerOpacity.disabledContent) },
+	outlined: { borderColor: withOpacity(colors.outline, stateLayerOpacity.disabledContainer) }
+}));
+const styles = StyleSheet.create({ content: { flexGrow: 1 } });
+/**
+* A surface holding related content.
+*
+* ```tsx
+* <Card interactive onPress={open}>
+*   <Text variant="titleMedium">Headline</Text>
+* </Card>
+* ```
+*
+* A card is a `View` with no role, unless it is `interactive`: then it is a
+* `Pressable` announced as a button, or as a link given `href`, which presses
+* as a whole. Web's `render` has no counterpart, since native has no element
+* to choose, and `href` is how a card leads somewhere instead. The press
+* props belong to an interactive card alone, so a static card given
+* `onPress` is a compile error rather than a press that never fires.
+*
+* A card fills the column it sits in, as any view in a React Native column
+* does. `style`, `ref` and `testID` land on the card's own view.
+*/
+function Card(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = props.interactive === true ? /* @__PURE__ */ jsx(InteractiveCard, { ...props }) : /* @__PURE__ */ jsx(StaticCard, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function InteractiveCard(t0) {
+	const $ = c(61);
+	let children;
+	let href;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		const { children: t4, href: t5, interactive: _interactive, isDisabled: t6, onBlur: t7, onFocus: t8, onHoverIn: t9, onHoverOut: t10, onPress: t11, onPressIn: t12, onPressOut: t13, padding: t14, style: t15, variant: t16, ...t17 } = t0;
+		children = t4;
+		href = t5;
+		t1 = t6;
+		onBlur = t7;
+		onFocus = t8;
+		onHoverIn = t9;
+		onHoverOut = t10;
+		onPress = t11;
+		onPressIn = t12;
+		onPressOut = t13;
+		t2 = t14;
+		style = t15;
+		t3 = t16;
+		props = t17;
+		$[0] = t0;
+		$[1] = children;
+		$[2] = href;
+		$[3] = onBlur;
+		$[4] = onFocus;
+		$[5] = onHoverIn;
+		$[6] = onHoverOut;
+		$[7] = onPress;
+		$[8] = onPressIn;
+		$[9] = onPressOut;
+		$[10] = props;
+		$[11] = style;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+	} else {
+		children = $[1];
+		href = $[2];
+		onBlur = $[3];
+		onFocus = $[4];
+		onHoverIn = $[5];
+		onHoverOut = $[6];
+		onPress = $[7];
+		onPressIn = $[8];
+		onPressOut = $[9];
+		props = $[10];
+		style = $[11];
+		t1 = $[12];
+		t2 = $[13];
+		t3 = $[14];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const padding = t2 === void 0 ? "default" : t2;
+	const variant = t3 === void 0 ? "elevated" : t3;
+	const theme = useTheme();
+	const press = useLinkPress(href, onPress);
+	let t4;
+	if ($[15] !== isDisabled || $[16] !== onBlur || $[17] !== onFocus || $[18] !== onHoverIn || $[19] !== onHoverOut || $[20] !== onPressIn || $[21] !== onPressOut || $[22] !== theme.colors.onSurface) {
+		t4 = {
+			color: theme.colors.onSurface,
+			disabled: isDisabled,
+			onBlur,
+			onFocus,
+			onHoverIn,
+			onHoverOut,
+			onPressIn,
+			onPressOut
+		};
+		$[15] = isDisabled;
+		$[16] = onBlur;
+		$[17] = onFocus;
+		$[18] = onHoverIn;
+		$[19] = onHoverOut;
+		$[20] = onPressIn;
+		$[21] = onPressOut;
+		$[22] = theme.colors.onSurface;
+		$[23] = t4;
+	} else t4 = $[23];
+	const feedback = usePressFeedback(t4);
+	let T0;
+	let disabled;
+	let t10;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[24] !== feedback.handlers || $[25] !== feedback.hovered || $[26] !== feedback.pressed || $[27] !== feedback.ring || $[28] !== href || $[29] !== isDisabled || $[30] !== padding || $[31] !== press || $[32] !== props || $[33] !== style || $[34] !== theme || $[35] !== variant) {
+		const own = stylesOf(theme);
+		let t11;
+		if ($[44] !== theme) {
+			t11 = disabledStylesOf(theme);
+			$[44] = theme;
+			$[45] = t11;
+		} else t11 = $[45];
+		disabled = t11;
+		const lifted = feedback.hovered && !feedback.pressed;
+		T0 = Pressable;
+		t5 = href === void 0 ? "button" : "link";
+		t6 = props;
+		t7 = feedback.handlers;
+		t8 = isDisabled;
+		t9 = press;
+		t10 = composeStyles(own.base, own[variant], paddings(theme)[padding], variant === "elevated" && !isDisabled ? own[lifted ? "lifted" : "resting"] : void 0, isDisabled && disabled[variant], feedback.ring, style);
+		$[24] = feedback.handlers;
+		$[25] = feedback.hovered;
+		$[26] = feedback.pressed;
+		$[27] = feedback.ring;
+		$[28] = href;
+		$[29] = isDisabled;
+		$[30] = padding;
+		$[31] = press;
+		$[32] = props;
+		$[33] = style;
+		$[34] = theme;
+		$[35] = variant;
+		$[36] = T0;
+		$[37] = disabled;
+		$[38] = t10;
+		$[39] = t5;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
+	} else {
+		T0 = $[36];
+		disabled = $[37];
+		t10 = $[38];
+		t5 = $[39];
+		t6 = $[40];
+		t7 = $[41];
+		t8 = $[42];
+		t9 = $[43];
+	}
+	const t11 = isDisabled && disabled.content;
+	let t12;
+	if ($[46] !== t11) {
+		t12 = composeStyles(styles.content, t11);
+		$[46] = t11;
+		$[47] = t12;
+	} else t12 = $[47];
+	let t13;
+	if ($[48] !== children || $[49] !== t12) {
+		t13 = /* @__PURE__ */ jsx(View, {
+			style: t12,
+			children
+		});
+		$[48] = children;
+		$[49] = t12;
+		$[50] = t13;
+	} else t13 = $[50];
+	let t14;
+	if ($[51] !== T0 || $[52] !== feedback.layer || $[53] !== t10 || $[54] !== t13 || $[55] !== t5 || $[56] !== t6 || $[57] !== t7 || $[58] !== t8 || $[59] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(T0, {
+			role: t5,
+			...t6,
+			...t7,
+			disabled: t8,
+			onPress: t9,
+			style: t10,
+			children: [t13, feedback.layer]
+		});
+		$[51] = T0;
+		$[52] = feedback.layer;
+		$[53] = t10;
+		$[54] = t13;
+		$[55] = t5;
+		$[56] = t6;
+		$[57] = t7;
+		$[58] = t8;
+		$[59] = t9;
+		$[60] = t14;
+	} else t14 = $[60];
+	return t14;
+}
+function StaticCard(t0) {
+	const $ = c(17);
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { interactive: _interactive, isDisabled: _isDisabled, padding: t3, style: t4, variant: t5, ...t6 } = t0;
+		t1 = t3;
+		style = t4;
+		t2 = t5;
+		props = t6;
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		props = $[1];
+		style = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const padding = t1 === void 0 ? "default" : t1;
+	const variant = t2 === void 0 ? "elevated" : t2;
+	const theme = useTheme();
+	let T0;
+	let t3;
+	let t4;
+	if ($[5] !== padding || $[6] !== props || $[7] !== style || $[8] !== theme || $[9] !== variant) {
+		const own = stylesOf(theme);
+		T0 = View;
+		t3 = props;
+		t4 = composeStyles(own.base, own[variant], variant === "elevated" ? own.resting : void 0, paddings(theme)[padding], style);
+		$[5] = padding;
+		$[6] = props;
+		$[7] = style;
+		$[8] = theme;
+		$[9] = variant;
+		$[10] = T0;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		T0 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+	}
+	let t5;
+	if ($[13] !== T0 || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...t3,
+			style: t4
+		});
+		$[13] = T0;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+//#endregion
+export { Card };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Pressable","StyleSheet","View","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","themedStyles","CardBaseProps","children","isDisabled","padding","ref","style","variant","CardVariant","CardProps","InteractiveCardForm","StaticCardForm","Omit","href","interactive","onPress","paddings","spacing","create","default","lg","none","stylesOf","colors","radii","shadows","base","borderRadius","md","overflow","elevated","backgroundColor","surfaceContainerLow","filled","surfaceContainerHighest","lifted","boxShadow","elevation2","outlined","surface","borderColor","outlineVariant","borderWidth","resting","elevation1","disabledStylesOf","stateLayerOpacity","content","opacity","disabledContent","outline","disabledContainer","styles","flexGrow","Card","props","$","_c","t0","InteractiveCard","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t1","t2","t3","t4","t5","_interactive","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","undefined","theme","press","onSurface","color","disabled","feedback","T0","handlers","hovered","pressed","ring","own","layer","StaticCard","_isDisabled","_c"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Pressable, StyleSheet, View } from 'react-native'\n\nimport { usePressFeedback } from '../../press'\nimport { useLinkPress } from '../../router'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The cards spec page's three variants, as kanso-ui's Card draws them. They\n// differ only in how they separate themselves from the page: elevated casts\n// the level 1 shadow over the low container, filled sits on the highest\n// container, and outlined draws an outline-variant rule over the surface. The\n// corner is the page's 12dp, the medium shape, and content runs 16dp in from\n// it unless `padding` is `none`.\n//\n// An interactive card draws the state layers, the ripple and the focus ring\n// from src/press, in on-surface, the colour web mixes over its container.\n// They lie over the card's content rather than under it, so a child that\n// fills the card, an image or a row with a fill of its own, still shows the\n// press. Under a pointer the elevated card rises to level 2 and settles back\n// to 1 while pressed, as the page and web have it, and switches at once, since\n// web's runs no transition either; the other two stay flat. A phone has no\n// pointer, so there the press itself is what shows.\n//\n// Disabled is the page's: each container at 38%, the outlined card's rule\n// in the outline role at 12%, what the card holds faded to 38%, and the\n// elevated card flat. A card's content is the call site's, so no colour role\n// reaches all of it, and an opacity is the one fade that does.\n\ntype CardBaseProps = {\n  readonly children?: ReactNode\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, and takes no press. It is still announced, as disabled.\n   * Has no effect on a card that is not `interactive`, which cannot be\n   * pressed to begin with.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges, such as a list of rows separated by rules.\n   * @default 'default'\n   */\n  readonly padding?: 'default' | 'none'\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  readonly variant?: CardVariant\n}\n\ntype CardProps = CardBaseProps & (InteractiveCardForm | StaticCardForm)\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined'\n\n/**\n * A card that presses as a whole: a `Pressable` announced as a button, or as\n * a link given `href`.\n */\ntype InteractiveCardForm = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * Where the card leads. A press opens it through the `RouterProvider`\n   * around the card, or through the platform for a URL with a scheme of its\n   * own, after the call site's own `onPress`, and the card is announced as a\n   * link.\n   */\n  readonly href?: string\n  /**\n   * Makes the card the thing you press: it ripples, draws the state layers,\n   * lifts under a pointer and takes a focus ring. Leave it off for a card\n   * that merely holds content, including one holding buttons of its own.\n   */\n  readonly interactive: true\n}\n\n/** A card that holds content and takes no press: a `View` with no role. */\ntype StaticCardForm = Omit<ViewProps, 'children' | 'style'> & {\n  readonly href?: never\n  readonly interactive?: false\n  readonly onPress?: never\n}\n\nconst paddings = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    default: { padding: spacing.lg },\n    none: { padding: 0 },\n  }),\n)\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }) =>\n  StyleSheet.create({\n    // The corner clips what the card holds, so a child running to the edges\n    // is rounded with it. The shadow and the focus ring are drawn outside the\n    // card and are not clipped.\n    base: {\n      borderRadius: radii.md,\n      overflow: 'hidden',\n    },\n    elevated: {\n      backgroundColor: colors.surfaceContainerLow,\n    },\n    filled: {\n      backgroundColor: colors.surfaceContainerHighest,\n    },\n    // Under a pointer, the elevated card's level 2.\n    lifted: {\n      boxShadow: shadows.elevation2,\n    },\n    outlined: {\n      backgroundColor: colors.surface,\n      borderColor: colors.outlineVariant,\n      borderWidth: 1,\n    },\n    // The elevated card's level 1, which no other variant casts.\n    resting: {\n      boxShadow: shadows.elevation1,\n    },\n  }),\n)\n\nconst disabledStylesOf = themedStyles(({ colors, stateLayerOpacity }) =>\n  StyleSheet.create({\n    content: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    elevated: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerLow,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    filled: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerHighest,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    outlined: {\n      borderColor: withOpacity(\n        colors.outline,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What an interactive card's children sit in, filling a card stretched\n  // taller than them, as a static card's children are laid out in the card\n  // itself. It is what fades while disabled, apart from the container.\n  content: {\n    flexGrow: 1,\n  },\n})\n\n/**\n * A surface holding related content.\n *\n * ```tsx\n * <Card interactive onPress={open}>\n *   <Text variant=\"titleMedium\">Headline</Text>\n * </Card>\n * ```\n *\n * A card is a `View` with no role, unless it is `interactive`: then it is a\n * `Pressable` announced as a button, or as a link given `href`, which presses\n * as a whole. Web's `render` has no counterpart, since native has no element\n * to choose, and `href` is how a card leads somewhere instead. The press\n * props belong to an interactive card alone, so a static card given\n * `onPress` is a compile error rather than a press that never fires.\n *\n * A card fills the column it sits in, as any view in a React Native column\n * does. `style`, `ref` and `testID` land on the card's own view.\n */\nfunction Card(props: CardProps) {\n  return props.interactive === true ? (\n    <InteractiveCard {...props} />\n  ) : (\n    <StaticCard {...props} />\n  )\n}\n\nfunction InteractiveCard({\n  children,\n  href,\n  interactive: _interactive,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPress,\n  onPressIn,\n  onPressOut,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & InteractiveCardForm) {\n  const theme = useTheme()\n  const press = useLinkPress(href, onPress)\n  const feedback = usePressFeedback({\n    color: theme.colors.onSurface,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const own = stylesOf(theme)\n  const disabled = disabledStylesOf(theme)\n  const lifted = feedback.hovered && !feedback.pressed\n\n  return (\n    <Pressable\n      role={href === undefined ? 'button' : 'link'}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      onPress={press}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        paddings(theme)[padding],\n        variant === 'elevated' && !isDisabled\n          ? own[lifted ? 'lifted' : 'resting']\n          : undefined,\n        isDisabled && disabled[variant],\n        feedback.ring,\n        style,\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.content,\n          isDisabled && disabled.content,\n        )}\n      >\n        {children}\n      </View>\n      {feedback.layer}\n    </Pressable>\n  )\n}\n\nfunction StaticCard({\n  interactive: _interactive,\n  isDisabled: _isDisabled,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & StaticCardForm) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        variant === 'elevated' ? own.resting : undefined,\n        paddings(theme)[padding],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { CardProps, CardVariant }\n\nexport { Card }\n"],"mappings":"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"}

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

@@ -0,0 +1,76 @@
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/checkbox/index.d.ts
+type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * The label, beside the box. A checkbox that a row labels some other way
+   * leaves it out and passes `aria-label` instead.
+   */
+  readonly children?: ReactNode;
+  /**
+   * Whether the checkbox starts selected, when it keeps its own state.
+   * @default false
+   */
+  readonly defaultSelected?: boolean;
+  /**
+   * A hint under the label. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the checkbox in its error state: the message and the error colours both
+   * follow from it.
+   */
+  readonly error?: string;
+  /**
+   * Draws the checkbox disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Draws the dash for a box that stands for a partly selected set, and
+   * reports the box as mixed to a screen reader. It is the call site's to
+   * clear: a press still changes `isSelected` underneath.
+   * @default false
+   */
+  readonly isIndeterminate?: boolean;
+  /**
+   * Shows the state without letting a press change it.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Whether the checkbox is selected, for a call site holding the state
+   * itself with `onChange`.
+   */
+  readonly isSelected?: boolean;
+  /** Called with the new state whenever a press changes it. */
+  readonly onChange?: (isSelected: boolean) => void;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * A checkbox with its label, and optionally a description or an error under
+ * it. Its state is React Stately's, as web's is: pass `isSelected` with
+ * `onChange` to control it, or `defaultSelected` to let it keep its own.
+ * `isIndeterminate` draws the dash for a box that stands for a partly
+ * selected set.
+ *
+ * ```tsx
+ * <Checkbox defaultSelected description="Supporting line">
+ *   Label
+ * </Checkbox>
+ * ```
+ *
+ * A screen reader hears it as a checkbox named by its label, checked,
+ * unchecked or mixed, followed by the line under it. A press anywhere on the
+ * box or the label toggles it, and the row takes presses over the 48dp target
+ * the page asks of the box. `style`, `ref` and `testID` land on the view
+ * holding the row and the line under it, which is the element a layout
+ * positions.
+ */
+declare function Checkbox({ 'aria-label': ariaLabel, children, defaultSelected, description, error, isDisabled, isIndeterminate, isReadOnly, isSelected, onChange, style, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox, type CheckboxProps };
+//# sourceMappingURL=index.d.ts.map