@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/components/color-swatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","ViewProps","ViewStyle","Color","use","StyleSheet","View","Chequer","useLocaleOf","useMessages","colorNameOf","colorOf","PickedColorContext","SwatchColorContext","useTheme","composeStyles","themedStyles","SIZE","stylesOf","colors","radii","create","ground","borderRadius","xs","height","overflow","width","hairline","absoluteFill","borderColor","outlineVariant","borderWidth","ColorSwatchProps","Omit","color","colorName","ref","style","ColorSwatch","t0","$","_c","label","props","styles","locale","undefined","messages","itemColor","pickedColor","value","alpha","getChannelValue","name","transparent","T0","t1","t2","t3","filter","Boolean","join","t4","t5","T1","t6","backgroundColor","toString","t7","t8","t9","_c"],"sources":["../../../src/components/color-swatch/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { Color } from 'react-stately'\n\nimport { use } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { Chequer } from '../../chequer'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport {\n  colorNameOf,\n  colorOf,\n  PickedColorContext,\n  SwatchColorContext,\n} from '../../swatch'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A single colour, drawn as a square, as kanso-ui's ColorSwatch draws it.\n// Material Design carries no page for this: its colour guidance is about the\n// roles a component takes, not about showing a colour as a value. So the\n// shape is the library's own, built from what the rest of it already uses: a\n// 40dp square on the extra-small corner.\n//\n// Three things follow from that, and each is a choice rather than a reading.\n//\n// **A swatch is outlined.** Its own colour is the content, so it cannot carry\n// a contrasting one, and a white swatch on a light surface, or a near-black\n// one in dark mode, would otherwise have no edge at all. The outline is the\n// 1dp outline variant hairline a field's box takes, drawn as the border of a\n// view laid over the colour, so it sits on the colour's edge rather than\n// around it.\n//\n// **Transparency is drawn against a chequer rather than against the page.**\n// The chequer is src/chequer's, which follows the theme. It is drawn only\n// behind a colour with some transparency, since an opaque one would cover it\n// whole.\n//\n// **The swatch names itself from the colour.** React Stately's `Color` gives\n// the name, \"light vibrant cyan blue, 60% transparent\", in the\n// `I18nProvider`'s locale, as React Aria's swatch does on web, and a screen\n// reader hears the swatch as an image by that name. A colour with no alpha\n// left is called transparent, in the library's own words, since there is no\n// colour left to name.\n\nconst SIZE = 40\n\nconst stylesOf = themedStyles(({ colors, radii }) =>\n  StyleSheet.create({\n    ground: {\n      borderRadius: radii.xs,\n      height: SIZE,\n      overflow: 'hidden',\n      width: SIZE,\n    },\n    hairline: {\n      ...StyleSheet.absoluteFill,\n      borderColor: colors.outlineVariant,\n      borderRadius: radii.xs,\n      borderWidth: 1,\n    },\n  }),\n)\n\ntype ColorSwatchProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The colour to show: a CSS colour string, or a `Color` from `parseColor`,\n   * which this package re-exports. Left out, the swatch draws the colour of\n   * the `ColorSwatchPicker.Item` it is drawn in.\n   * @default the item's colour, else '#fff0'\n   */\n  readonly color?: Color | string\n  /**\n   * What the swatch is called, in place of the name the colour gives itself.\n   * A call site's `aria-label` follows either, after a comma.\n   */\n  readonly colorName?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/**\n * A colour shown as a value: a square of it, with a chequer behind so\n * transparency reads as transparency. The colour is a CSS string, or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * import { ColorSwatch, parseColor } from '@kanso-labs/react-native-kanso-ui'\n *\n * <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />\n * ```\n *\n * It names itself from the colour, \"light vibrant cyan blue, 60%\n * transparent\", in the `I18nProvider`'s locale, or the device's outside one,\n * so it needs no label. Pass `colorName` to say something else instead.\n *\n * `style`, `ref` and `testID` land on the square, and a `style` there applies\n * over the swatch's own, so a call site sets another size with `width` and\n * `height`. The colour fills whatever square it is given.\n *\n * Inside a `ColorPicker` it shows the picker's colour where it is given no\n * `color` and sits in no `ColorSwatchPicker` item.\n */\nfunction ColorSwatch({\n  'aria-label': label,\n  color,\n  colorName,\n  style,\n  ...props\n}: ColorSwatchProps) {\n  const styles = stylesOf(useTheme())\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const itemColor = use(SwatchColorContext)\n  const pickedColor = use(PickedColorContext)?.value\n  const value = colorOf(color ?? itemColor ?? pickedColor ?? '#fff0')\n  const alpha = value.getChannelValue('alpha')\n  const name = colorName ?? colorNameOf(value, locale, messages.transparent)\n\n  return (\n    <View\n      accessible\n      role=\"img\"\n      {...props}\n      aria-label={[name, label].filter(Boolean).join(', ')}\n      style={composeStyles<ViewStyle>(styles.ground, style)}\n    >\n      {alpha < 1 ? <Chequer /> : null}\n      <View\n        style={composeStyles<ViewStyle>(StyleSheet.absoluteFill, {\n          backgroundColor: value.toString('css'),\n        })}\n      />\n      <View style={styles.hairline} />\n    </View>\n  )\n}\n\nexport { ColorSwatch }\nexport type { ColorSwatchProps }\n"],"mappings":";;;;;;;;;;AA6CA,MAAMmB,OAAO;AAEb,MAAMC,WAAWF,cAAc,EAAEG,QAAQC,YACvCf,WAAWgB,OAAO;CAChBC,QAAQ;EACNC,cAAcH,MAAMI;EACpBC,QAAQR;EACRS,UAAU;EACVC,OAAOV;CACT;CACAW,UAAU;EACR,GAAGvB,WAAWwB;EACdC,aAAaX,OAAOY;EACpBR,cAAcH,MAAMI;EACpBQ,aAAa;CACf;AACF,CAAC,CACH;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAAO,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAP;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAG,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAA,cAAAG,OAAAR,OAAAC,WAAAE,OAAA,GAAAM,SAAAJ;EAMFC,EAAA,KAAAD;EAAAC,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAH;CAAA,OAAA;EAAAH,QAAAM,EAAA;EAAAL,YAAAK,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAH,QAAAG,EAAA;CAAA;CACjB,MAAAI,SAAe3B,SAASJ,SAAS,CAAC;CAClC,MAAAgC,SAAetC,YAAYuC,KAAAA,CAAS;CACpC,MAAAC,WAAiBvC,YAAY;CAC7B,MAAAwC,YAAkB7C,IAAIS,kBAAkB;CACxC,MAAAqC,cAAoB9C,IAAIQ,kBAAyB,CAAC,EAAAuC;CAClD,MAAAA,QAAcxC,QAAQwB,SAAAc,aAAAC,eAAA,OAA4C;CAClE,MAAAE,QAAcD,MAAKE,gBAAiB,OAAO;CAC3C,MAAAC,OAAalB,aAAa1B,YAAYyC,OAAOL,QAAQE,SAAQO,WAAY;CAGtE,MAAAC,KAAAlD;CACC,MAAAmD,KAAA;CACK,MAAAC,KAAA;CAEO,MAAAC,KAAA,CAACL,MAAMX,KAAK,CAAC,CAAAiB,OAAQC,OAAO,CAAC,CAAAC,KAAM,IAAI;CAC5C,MAAAC,KAAAhD,cAAyB8B,OAAMvB,QAASgB,KAAK;CAEnD,MAAA0B,KAAAZ,QAAQ,IAAI,oBAAC,SAAD,CAAQ,CAAA,IAApB;CACA,MAAAa,KAAA3D;CACQ,MAAA4D,KAAAnD,cAAyBV,WAAUwB,cAAe,EAAAsC,iBACtChB,MAAKiB,SAAU,KAAK,EACvC,CAAC;CAAC,IAAAC;CAAA,IAAA5B,EAAA,OAAAwB,MAAAxB,EAAA,OAAAyB,IAAA;EAHJG,KAAA,oBAAC,IAAD,EACS,OAAAH,GAEL,CAAA;EACFzB,EAAA,KAAAwB;EAAAxB,EAAA,KAAAyB;EAAAzB,EAAA,KAAA4B;CAAA,OAAAA,KAAA5B,EAAA;CAAA,IAAA6B;CAAA,IAAA7B,EAAA,OAAAI,OAAAjB,UAAA;EACF0C,KAAA,oBAAC,MAAD,EAAa,OAAAzB,OAAMjB,SAAS,CAAA;EAAIa,EAAA,KAAAI,OAAAjB;EAAAa,EAAA,MAAA6B;CAAA,OAAAA,KAAA7B,EAAA;CAAA,IAAA8B;CAAA,IAAA9B,EAAA,QAAAe,MAAAf,EAAA,QAAAG,SAAAH,EAAA,QAAAkB,MAAAlB,EAAA,QAAAsB,MAAAtB,EAAA,QAAAuB,MAAAvB,EAAA,QAAA4B,MAAA5B,EAAA,QAAA6B,IAAA;EAblCC,KAAA,qBAAC,IAAD;GACE,YAAAd;GACK,MAAAC;GAAK,GACNd;GACQ,cAAAe;GACL,OAAAI;GALT,UAAA;IAOGC;IACDK;IAKAC;GAbG;;EAcE7B,EAAA,MAAAe;EAAAf,EAAA,MAAAG;EAAAH,EAAA,MAAAkB;EAAAlB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAuB;EAAAvB,EAAA,MAAA4B;EAAA5B,EAAA,MAAA6B;EAAA7B,EAAA,MAAA8B;CAAA,OAAAA,KAAA9B,EAAA;CAAA,OAdP8B;AAcO"}

package/dist/components/color-swatch-picker/index.d.ts

@@ -0,0 +1,81 @@
+import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Color } from "react-stately";
+//#region src/components/color-swatch-picker/index.d.ts
+type ColorSwatchPickerItemProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
+  /**
+   * What the item draws. A `ColorSwatch` by default, which draws the item's
+   * colour, as any `ColorSwatch` inside it does unless given one of its own.
+   */
+  readonly children?: ReactNode;
+  /**
+   * The colour the item stands for: a CSS colour string, or a `Color` from
+   * `parseColor`. The item is named by it unless given an `aria-label`.
+   * @default '#0000'
+   */
+  readonly color?: Color | string;
+  /**
+   * Rules the colour out, so the swatch cannot be chosen.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/** How a `ColorSwatchPicker` lays out its swatches. */
+type ColorSwatchPickerLayout = 'grid' | 'stack';
+type ColorSwatchPickerProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The swatches, each a `ColorSwatchPicker.Item` with a `color`. */
+  readonly children?: ReactNode;
+  /**
+   * The colour chosen at first, when the picker keeps its own value: a CSS
+   * colour string, or a `Color` from `parseColor`.
+   */
+  readonly defaultValue?: Color | string;
+  /**
+   * Whether the swatches wrap onto rows, or line up in one column.
+   * @default 'grid'
+   */
+  readonly layout?: ColorSwatchPickerLayout;
+  /** Called with the item's colour when another swatch is chosen. */
+  readonly onChange?: (value: Color) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  /** The colour chosen, when the call site holds the value. */
+  readonly value?: Color | string;
+};
+/**
+ * A set of colours to choose one from, drawn as swatches. Pass `value` with
+ * `onChange` to control it, or `defaultValue`, as a CSS colour string or a
+ * `Color` from `parseColor`, which this package re-exports.
+ *
+ * ```tsx
+ * <ColorSwatchPicker defaultValue="#6750A4">
+ *   <ColorSwatchPicker.Item color="#6750A4" />
+ *   <ColorSwatchPicker.Item color="#625B71" />
+ * </ColorSwatchPicker>
+ * ```
+ *
+ * The chosen swatch carries a ring. A screen reader hears a radio group
+ * named by `aria-label` or `aria-labelledby`, and "Color swatches" in the
+ * `I18nProvider`'s locale otherwise. `style`, `ref` and `testID` land on the
+ * set as a whole, which is the element a layout positions.
+ *
+ * Inside a `ColorPicker` it takes the picker's colour where it is given no
+ * `value`, and reports a change to the picker before its own `onChange`.
+ */
+declare function ColorSwatchPicker({ 'aria-label': ariaLabel, children, defaultValue, layout, onChange, style, value, ...props }: ColorSwatchPickerProps): import("react").JSX.Element;
+declare namespace ColorSwatchPicker {
+  var Item: typeof ColorSwatchPickerItem;
+}
+/**
+ * One swatch in a {@link ColorSwatchPicker}, which chooses its `color` when
+ * pressed. Draws a `ColorSwatch` of that colour unless given other children,
+ * and is named by the colour in the picker's locale.
+ *
+ * `style`, `ref` and `testID` land on the pressable item around the swatch.
+ */
+declare function ColorSwatchPickerItem({ 'aria-label': ariaLabel, children, color: own, isDisabled, onPress, style, ...props }: ColorSwatchPickerItemProps): import("react").JSX.Element;
+//#endregion
+export { ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerLayout, type ColorSwatchPickerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-swatch-picker/index.js

@@ -0,0 +1,287 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { SwatchColorContext, colorNameOf, colorOf, usePickedColor } from "../../swatch/index.js";
+import { ColorSwatch } from "../color-swatch/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, View } from "react-native";
+import { createContext, use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useColorPickerState } from "react-stately/useColorPickerState";
+//#region src/components/color-swatch-picker/index.tsx
+const SWATCH = 40;
+const RING = 2;
+const FOCUS_OFFSET = 6;
+const PickerContext = createContext(null);
+const styles = StyleSheet.create({ stack: { flexDirection: "column" } });
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => StyleSheet.create({
+	disabled: { opacity: stateLayerOpacity.disabledContent },
+	focused: {
+		outlineColor: colors.primary,
+		outlineOffset: FOCUS_OFFSET,
+		outlineStyle: "solid",
+		outlineWidth: RING
+	},
+	hovered: { borderColor: colors.outlineVariant },
+	item: { borderRadius: radii.xs },
+	picker: {
+		alignItems: "flex-start",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: spacing.sm
+	},
+	pressed: { borderColor: colors.outline },
+	ring: {
+		borderRadius: radii.xs + Math.min(radii.xs, 4),
+		borderWidth: RING,
+		bottom: -4,
+		left: -4,
+		pointerEvents: "none",
+		position: "absolute",
+		right: -4,
+		top: -4
+	},
+	selected: { borderColor: colors.primary }
+}));
+const REACH = hitSlop(SWATCH, SWATCH);
+function chooseThen(state, color, isSelected, onPress) {
+	return (event) => {
+		onPress?.(event);
+		if (!isSelected) state.setColor(color);
+	};
+}
+/**
+* A set of colours to choose one from, drawn as swatches. Pass `value` with
+* `onChange` to control it, or `defaultValue`, as a CSS colour string or a
+* `Color` from `parseColor`, which this package re-exports.
+*
+* ```tsx
+* <ColorSwatchPicker defaultValue="#6750A4">
+*   <ColorSwatchPicker.Item color="#6750A4" />
+*   <ColorSwatchPicker.Item color="#625B71" />
+* </ColorSwatchPicker>
+* ```
+*
+* The chosen swatch carries a ring. A screen reader hears a radio group
+* named by `aria-label` or `aria-labelledby`, and "Color swatches" in the
+* `I18nProvider`'s locale otherwise. `style`, `ref` and `testID` land on the
+* set as a whole, which is the element a layout positions.
+*
+* Inside a `ColorPicker` it takes the picker's colour where it is given no
+* `value`, and reports a change to the picker before its own `onChange`.
+*/
+function ColorSwatchPicker(t0) {
+	const $ = c(22);
+	let ariaLabel;
+	let children;
+	let defaultValue;
+	let onChange;
+	let props;
+	let style;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, children, defaultValue, layout: t1, onChange, style, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = children;
+		$[3] = defaultValue;
+		$[4] = onChange;
+		$[5] = props;
+		$[6] = style;
+		$[7] = t1;
+		$[8] = value;
+	} else {
+		ariaLabel = $[1];
+		children = $[2];
+		defaultValue = $[3];
+		onChange = $[4];
+		props = $[5];
+		style = $[6];
+		t1 = $[7];
+		value = $[8];
+	}
+	const layout = t1 === void 0 ? "grid" : t1;
+	const own = stylesOf(useTheme());
+	const messages = useMessages();
+	const picked = usePickedColor(value, onChange);
+	let t2;
+	if ($[9] !== defaultValue || $[10] !== picked.onChange || $[11] !== picked.value) {
+		t2 = {
+			defaultValue,
+			onChange: picked.onChange,
+			value: picked.value
+		};
+		$[9] = defaultValue;
+		$[10] = picked.onChange;
+		$[11] = picked.value;
+		$[12] = t2;
+	} else t2 = $[12];
+	const state = useColorPickerState(t2);
+	const label = ariaLabel ?? (props["aria-labelledby"] === void 0 ? messages.colorSwatches : void 0);
+	const T0 = View;
+	const t3 = "radiogroup";
+	const t4 = composeStyles(own.picker, layout === "stack" ? styles.stack : void 0, style);
+	let t5;
+	if ($[13] !== children || $[14] !== state) {
+		t5 = /* @__PURE__ */ jsx(PickerContext, {
+			value: state,
+			children
+		});
+		$[13] = children;
+		$[14] = state;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== T0 || $[17] !== label || $[18] !== props || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			"aria-label": label,
+			role: t3,
+			style: t4,
+			children: t5
+		});
+		$[16] = T0;
+		$[17] = label;
+		$[18] = props;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}
+/**
+* One swatch in a {@link ColorSwatchPicker}, which chooses its `color` when
+* pressed. Draws a `ColorSwatch` of that colour unless given other children,
+* and is named by the colour in the picker's locale.
+*
+* `style`, `ref` and `testID` land on the pressable item around the swatch.
+*/
+function ColorSwatchPickerItem(t0) {
+	const $ = c(30);
+	let ariaLabel;
+	let children;
+	let onPress;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, children, color: t1, isDisabled: t2, onPress, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = children;
+		$[3] = onPress;
+		$[4] = props;
+		$[5] = style;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		ariaLabel = $[1];
+		children = $[2];
+		onPress = $[3];
+		props = $[4];
+		style = $[5];
+		t1 = $[6];
+		t2 = $[7];
+	}
+	const own = t1 === void 0 ? "#0000" : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const theme = useTheme();
+	const state = use(PickerContext);
+	const locale = useLocaleOf(void 0);
+	const messages = useMessages();
+	const color = colorOf(own);
+	let t3;
+	if ($[8] !== isDisabled || $[9] !== theme.colors.primary) {
+		t3 = {
+			color: theme.colors.primary,
+			disabled: isDisabled,
+			disableRipple: true
+		};
+		$[8] = isDisabled;
+		$[9] = theme.colors.primary;
+		$[10] = t3;
+	} else t3 = $[10];
+	const feedback = usePressFeedback(t3);
+	if (state === null) throw new Error("A ColorSwatchPicker.Item is drawn inside a ColorSwatchPicker, which holds its value.");
+	const styled = stylesOf(theme);
+	let t4;
+	if ($[11] !== state.color) {
+		t4 = state.color.toString("hexa");
+		$[11] = state.color;
+		$[12] = t4;
+	} else t4 = $[12];
+	const isSelected = t4 === color.toString("hexa");
+	const ring = ringOf(styled, {
+		hovered: feedback.hovered,
+		isSelected,
+		pressed: feedback.pressed
+	});
+	const T0 = Pressable;
+	const t5 = ariaLabel ?? colorNameOf(color, locale, messages.transparent);
+	const t6 = "radio";
+	const t7 = feedback.handlers;
+	const t8 = REACH;
+	const t9 = chooseThen(state, color, isSelected, onPress);
+	const t10 = composeStyles(styled.item, feedback.ring === void 0 ? void 0 : styled.focused, isDisabled ? styled.disabled : void 0, style);
+	let t11;
+	if ($[13] !== children) {
+		t11 = children ?? /* @__PURE__ */ jsx(ColorSwatch, {});
+		$[13] = children;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== color || $[16] !== t11) {
+		t12 = /* @__PURE__ */ jsx(View, {
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx(SwatchColorContext, {
+				value: color,
+				children: t11
+			})
+		});
+		$[15] = color;
+		$[16] = t11;
+		$[17] = t12;
+	} else t12 = $[17];
+	const t13 = ring === void 0 ? null : /* @__PURE__ */ jsx(View, { style: composeStyles(styled.ring, ring) });
+	let t14;
+	if ($[18] !== T0 || $[19] !== feedback.handlers || $[20] !== isDisabled || $[21] !== isSelected || $[22] !== props || $[23] !== t10 || $[24] !== t12 || $[25] !== t13 || $[26] !== t5 || $[27] !== t8 || $[28] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(T0, {
+			"aria-checked": isSelected,
+			"aria-label": t5,
+			role: t6,
+			...props,
+			...t7,
+			disabled: isDisabled,
+			hitSlop: t8,
+			onPress: t9,
+			style: t10,
+			children: [t12, t13]
+		});
+		$[18] = T0;
+		$[19] = feedback.handlers;
+		$[20] = isDisabled;
+		$[21] = isSelected;
+		$[22] = props;
+		$[23] = t10;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t5;
+		$[27] = t8;
+		$[28] = t9;
+		$[29] = t14;
+	} else t14 = $[29];
+	return t14;
+}
+function ringOf(styled, { hovered, isSelected, pressed }) {
+	if (isSelected) return styled.selected;
+	if (pressed) return styled.pressed;
+	return hovered ? styled.hovered : void 0;
+}
+ColorSwatchPicker.Item = ColorSwatchPickerItem;
+//#endregion
+export { ColorSwatchPicker, ColorSwatchPickerItem };
+
+//# sourceMappingURL=index.js.map

package/dist/components/color-swatch-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Color","ColorPickerState","createContext","use","Pressable","StyleSheet","View","useColorPickerState","useLocaleOf","useMessages","hitSlop","usePressFeedback","colorNameOf","colorOf","SwatchColorContext","usePickedColor","useTheme","composeStyles","themedStyles","ColorSwatch","ColorSwatchPickerItemProps","Omit","children","color","isDisabled","ref","style","ColorSwatchPickerLayout","ColorSwatchPickerProps","defaultValue","layout","onChange","value","SWATCH","RING","RING_GAP","FOCUS_OFFSET","PickerContext","styles","create","stack","flexDirection","stylesOf","colors","radii","spacing","stateLayerOpacity","disabled","opacity","disabledContent","focused","outlineColor","primary","outlineOffset","outlineStyle","outlineWidth","hovered","borderColor","outlineVariant","item","borderRadius","xs","picker","alignItems","flexWrap","gap","sm","pressed","outline","ring","Math","min","borderWidth","bottom","left","pointerEvents","position","right","top","selected","REACH","chooseThen","state","isSelected","onPress","event","Parameters","NonNullable","setColor","ColorSwatchPicker","t0","$","_c","ariaLabel","props","t1","undefined","own","messages","picked","t2","label","colorSwatches","T0","t3","t4","t5","t6","ColorSwatchPickerItem","theme","locale","disableRipple","feedback","Error","styled","toString","ringOf","transparent","t7","handlers","t9","t10","t11","t12","t13","t14","t8","ReturnType","Item","_c"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { Color } from 'react-stately'\nimport type { ColorPickerState } from 'react-stately/useColorPickerState'\n\nimport { createContext, use } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport { useColorPickerState } from 'react-stately/useColorPickerState'\n\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport {\n  colorNameOf,\n  colorOf,\n  SwatchColorContext,\n  usePickedColor,\n} from '../../swatch'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { ColorSwatch } from '../color-swatch'\n\n// A set of colours to choose one from, as kanso-ui's ColorSwatchPicker draws\n// it: each a swatch, one of them chosen. Material Design carries no page for\n// this either, so what an item looks like when it is chosen is the library's\n// own, and web's choices hold here.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the set, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it. It is 2dp of primary with 2dp clear of the\n// swatch, the border of a view laid around it, so it leaves the colour whole\n// and is not a shadow, which a high-contrast mode drops. Its corner follows\n// the swatch's 4dp further out, and stays square where a scheme squares the\n// swatch.\n//\n// **Hover and press are a ring too, in the place selection takes.** Every\n// other interactive element here answers the pointer with a state layer, but\n// a state layer is a fill and a swatch's fill is the colour being chosen. So\n// an unchosen swatch takes a ring where the chosen one's would be, in the\n// outline roles rather than primary so it cannot be read as chosen: outline\n// variant under a pointer, and outline while it is pressed.\n//\n// **Focus is an outline further out**, 2dp of primary 6dp from the swatch,\n// so a swatch that is chosen and focused keeps both rings.\n//\n// The value is React Stately's colour picker state, as React Aria's own\n// picker holds it, and an item stands for its colour in hexadecimal with its\n// alpha, so two items of one colour are one choice. A screen reader hears a\n// radio group, named \"Color swatches\" in the locale unless `aria-label` or\n// `aria-labelledby` names it, and each swatch a radio named by its colour and\n// reporting whether it is checked; what the item draws is hidden from it,\n// since the radio's name already says it.\n//\n// Two departures from web. The arrow keys do not move between the swatches:\n// each is a stop of its own for a hardware keyboard, and activating it there\n// chooses it. And `layout` says how the swatches are laid out rather than\n// which keys move between them, since there are none: a grid wraps them onto\n// rows, and a stack lines them up in one column, as React Aria's own stack\n// does.\n\ntype ColorSwatchPickerItemProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * What the item draws. A `ColorSwatch` by default, which draws the item's\n   * colour, as any `ColorSwatch` inside it does unless given one of its own.\n   */\n  readonly children?: ReactNode\n  /**\n   * The colour the item stands for: a CSS colour string, or a `Color` from\n   * `parseColor`. The item is named by it unless given an `aria-label`.\n   * @default '#0000'\n   */\n  readonly color?: Color | string\n  /**\n   * Rules the colour out, so the swatch cannot be chosen.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** How a `ColorSwatchPicker` lays out its swatches. */\ntype ColorSwatchPickerLayout = 'grid' | 'stack'\n\ntype ColorSwatchPickerProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The swatches, each a `ColorSwatchPicker.Item` with a `color`. */\n  readonly children?: ReactNode\n  /**\n   * The colour chosen at first, when the picker keeps its own value: a CSS\n   * colour string, or a `Color` from `parseColor`.\n   */\n  readonly defaultValue?: Color | string\n  /**\n   * Whether the swatches wrap onto rows, or line up in one column.\n   * @default 'grid'\n   */\n  readonly layout?: ColorSwatchPickerLayout\n  /** Called with the item's colour when another swatch is chosen. */\n  readonly onChange?: (value: Color) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /** The colour chosen, when the call site holds the value. */\n  readonly value?: Color | string\n}\n\n// The swatch's side, which the item's target is brought up to 48dp from, and\n// the ring's width and the room it keeps clear of the swatch.\nconst SWATCH = 40\nconst RING = 2\nconst RING_GAP = 2\nconst FOCUS_OFFSET = 6\n\nconst PickerContext = createContext<ColorPickerState | null>(null)\n\nconst styles = StyleSheet.create({\n  stack: {\n    flexDirection: 'column',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    disabled: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    focused: {\n      outlineColor: colors.primary,\n      outlineOffset: FOCUS_OFFSET,\n      outlineStyle: 'solid',\n      outlineWidth: RING,\n    },\n    hovered: {\n      borderColor: colors.outlineVariant,\n    },\n    item: {\n      borderRadius: radii.xs,\n    },\n    picker: {\n      alignItems: 'flex-start',\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      gap: spacing.sm,\n    },\n    pressed: {\n      borderColor: colors.outline,\n    },\n    ring: {\n      borderRadius: radii.xs + Math.min(radii.xs, RING + RING_GAP),\n      borderWidth: RING,\n      bottom: -(RING + RING_GAP),\n      left: -(RING + RING_GAP),\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: -(RING + RING_GAP),\n      top: -(RING + RING_GAP),\n    },\n    selected: {\n      borderColor: colors.primary,\n    },\n  }),\n)\n\nconst REACH = hitSlop(SWATCH, SWATCH)\n\n// A press on a swatch: the call site's own `onPress`, then the choice, which\n// the chosen swatch leaves as it is, as React Aria's picker keeps its one\n// choice. Built by a call rather than declared in the component, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction chooseThen(\n  state: ColorPickerState,\n  color: Color,\n  isSelected: boolean,\n  onPress: PressableProps['onPress'],\n) {\n  return (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {\n    onPress?.(event)\n\n    if (!isSelected) {\n      state.setColor(color)\n    }\n  }\n}\n\n/**\n * A set of colours to choose one from, drawn as swatches. Pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * The chosen swatch carries a ring. A screen reader hears a radio group\n * named by `aria-label` or `aria-labelledby`, and \"Color swatches\" in the\n * `I18nProvider`'s locale otherwise. `style`, `ref` and `testID` land on the\n * set as a whole, which is the element a layout positions.\n *\n * Inside a `ColorPicker` it takes the picker's colour where it is given no\n * `value`, and reports a change to the picker before its own `onChange`.\n */\nfunction ColorSwatchPicker({\n  'aria-label': ariaLabel,\n  children,\n  defaultValue,\n  layout = 'grid',\n  onChange,\n  style,\n  value,\n  ...props\n}: ColorSwatchPickerProps) {\n  const own = stylesOf(useTheme())\n  const messages = useMessages()\n  const picked = usePickedColor(value, onChange)\n  const state = useColorPickerState({\n    defaultValue,\n    onChange: picked.onChange,\n    value: picked.value,\n  })\n  const label =\n    ariaLabel ??\n    (props['aria-labelledby'] === undefined\n      ? messages.colorSwatches\n      : undefined)\n\n  return (\n    <View\n      {...props}\n      aria-label={label}\n      role=\"radiogroup\"\n      style={composeStyles<ViewStyle>(\n        own.picker,\n        layout === 'stack' ? styles.stack : undefined,\n        style,\n      )}\n    >\n      <PickerContext value={state}>{children}</PickerContext>\n    </View>\n  )\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}, which chooses its `color` when\n * pressed. Draws a `ColorSwatch` of that colour unless given other children,\n * and is named by the colour in the picker's locale.\n *\n * `style`, `ref` and `testID` land on the pressable item around the swatch.\n */\nfunction ColorSwatchPickerItem({\n  'aria-label': ariaLabel,\n  children,\n  color: own = '#0000',\n  isDisabled = false,\n  onPress,\n  style,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  const theme = useTheme()\n  const state = use(PickerContext)\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const color = colorOf(own)\n  const feedback = usePressFeedback({\n    color: theme.colors.primary,\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n\n  if (state === null) {\n    throw new Error(\n      'A ColorSwatchPicker.Item is drawn inside a ColorSwatchPicker, which holds its value.',\n    )\n  }\n\n  const styled = stylesOf(theme)\n  const isSelected = state.color.toString('hexa') === color.toString('hexa')\n  const ring = ringOf(styled, {\n    hovered: feedback.hovered,\n    isSelected,\n    pressed: feedback.pressed,\n  })\n\n  return (\n    <Pressable\n      aria-checked={isSelected}\n      aria-label={ariaLabel ?? colorNameOf(color, locale, messages.transparent)}\n      role=\"radio\"\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={REACH}\n      onPress={chooseThen(state, color, isSelected, onPress)}\n      style={composeStyles<ViewStyle>(\n        styled.item,\n        feedback.ring === undefined ? undefined : styled.focused,\n        isDisabled ? styled.disabled : undefined,\n        style,\n      )}\n    >\n      <View aria-hidden>\n        <SwatchColorContext value={color}>\n          {children ?? <ColorSwatch />}\n        </SwatchColorContext>\n      </View>\n      {ring === undefined ? null : (\n        <View style={composeStyles<ViewStyle>(styled.ring, ring)} />\n      )}\n    </Pressable>\n  )\n}\n\n// The ring a swatch draws, if any: primary while chosen, which the pointer\n// cannot take away, else outline while pressed and outline variant while a\n// pointer is over it. A disabled swatch reports neither.\nfunction ringOf(\n  styled: ReturnType<typeof stylesOf>,\n  {\n    hovered,\n    isSelected,\n    pressed,\n  }: { hovered: boolean; isSelected: boolean; pressed: boolean },\n): undefined | ViewStyle {\n  if (isSelected) {\n    return styled.selected\n  }\n  if (pressed) {\n    return styled.pressed\n  }\n  return hovered ? styled.hovered : undefined\n}\n\nColorSwatchPicker.Item = ColorSwatchPickerItem\n\nexport { ColorSwatchPicker, ColorSwatchPickerItem }\nexport type {\n  ColorSwatchPickerItemProps,\n  ColorSwatchPickerLayout,\n  ColorSwatchPickerProps,\n}\n"],"mappings":"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"}

package/dist/components/color-wheel/index.d.ts

@@ -0,0 +1,71 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
+import { Color } from "react-stately";
+//#region src/components/color-wheel/index.d.ts
+type ColorWheelProps = {
+  /** What a screen reader calls the wheel, in place of "Hue". */
+  readonly 'aria-label'?: string;
+  /**
+   * The colour the wheel starts at, when it keeps its own: a CSS colour
+   * string in any notation, or a `Color` from `parseColor`. Red when neither
+   * this nor `value` is given.
+   */
+  readonly defaultValue?: Color | string;
+  /**
+   * Draws the wheel disabled, and takes no presses, drags or screen reader
+   * actions.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the colour as its hue moves. */
+  readonly onChange?: (value: Color) => void;
+  /** Called with the colour once a drag, a press or an action has ended. */
+  readonly onChangeEnd?: (value: Color) => void;
+  /**
+   * How far the ring reaches from the centre, in dp. The wheel is twice this
+   * across.
+   * @default 100
+   */
+  readonly outerRadius?: number;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** Lands on the wheel. Its size comes from `outerRadius`. */
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * How wide the band is, in dp. The inner radius is this in from
+   * `outerRadius`, so the two cannot disagree.
+   * @default 16
+   */
+  readonly thickness?: number;
+  /** The colour, for a call site holding it itself with `onChange`. */
+  readonly value?: Color | string;
+};
+/**
+ * Hue as a ring, with a handle on it. Its state is React Stately's, as web's
+ * is: pass `value` with `onChange` to control it, or `defaultValue`, as a
+ * CSS colour string or a `Color` from `parseColor`, which this package
+ * re-exports.
+ *
+ * ```tsx
+ * <ColorWheel defaultValue="hsl(200, 100%, 50%)" />
+ * ```
+ *
+ * A wheel moves hue and nothing else, so unlike `ColorSlider` and
+ * `ColorArea` it names no channel and there is no space for one to be
+ * missing from: a hex value works here.
+ *
+ * The middle is empty rather than filled, so a `ColorArea` or a
+ * `ColorSwatch` can sit inside one. A press on the ring moves the handle
+ * there, and a drag carries it round. A screen reader hears "Hue", or
+ * `aria-label`, with the value. `style`, `ref` and `testID` land on the
+ * wheel, whose size comes from `outerRadius`. With a `testID`, the drag and
+ * the press are registered with Gesture Handler as `<testID>-pan` and
+ * `<testID>-tap`, which its `getByGestureTestId` finds in a test.
+ *
+ * Inside a `ColorPicker` it takes the picker's colour where it is given no
+ * `value`, and reports a change to the picker before its own `onChange`.
+ */
+declare function ColorWheel({ 'aria-label': ariaLabel, defaultValue, isDisabled, onChange, onChangeEnd, outerRadius, ref, style, testID, thickness, value }: ColorWheelProps): import("react").JSX.Element;
+//#endregion
+export { ColorWheel, type ColorWheelProps };
+//# sourceMappingURL=index.d.ts.map