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

package/dist/field/chevron.js

@@ -0,0 +1,74 @@
+import { useTheme } from "../theme/scope.js";
+import { ChevronDownGlyph } from "../glyphs/index.js";
+import { c } from "react/compiler-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/field/chevron.tsx
+const OPEN_TURN = -180;
+/**
+* The chevron in the trailing slot of a field that opens a list, pointing
+* down at the list and turned to point up while it is open, on the step the
+* list arrives on, short3 on the standard curve, and at once under reduced
+* motion. It is the down chevron turned half a turn rather than web's end
+* chevron turned a quarter either way, which draws the same two states; the
+* down one does not mirror under right-to-left, so the turn needs no second
+* direction. It takes its colour and size from the slot.
+*/
+function FieldChevron(t0) {
+	const $ = c(9);
+	const { isOpen } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const turn = isOpen ? OPEN_TURN : 0;
+	const angle = useSharedValue(turn);
+	let t1;
+	let t2;
+	if ($[0] !== angle || $[1] !== motion || $[2] !== reduceMotion || $[3] !== turn) {
+		t1 = () => {
+			angle.set(reduceMotion ? turn : withTiming(turn, {
+				duration: motion.durationShort3,
+				easing: Easing.bezier(...motion.easingStandard)
+			}));
+		};
+		t2 = [
+			angle,
+			motion,
+			reduceMotion,
+			turn
+		];
+		$[0] = angle;
+		$[1] = motion;
+		$[2] = reduceMotion;
+		$[3] = turn;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	const turned = useAnimatedStyle(() => {
+		"worklet";
+		return { transform: [{ rotate: `${angle.get()}deg` }] };
+	});
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ChevronDownGlyph, {});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== turned) {
+		t4 = /* @__PURE__ */ jsx(Animated.View, {
+			style: turned,
+			children: t3
+		});
+		$[7] = turned;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+//#endregion
+export { FieldChevron };
+
+//# sourceMappingURL=chevron.js.map

package/dist/field/chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron.js","names":["useEffect","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","ChevronDownGlyph","useTheme","OPEN_TURN","FieldChevron","t0","$","_c","isOpen","motion","reduceMotion","turn","angle","t1","t2","set","duration","durationShort3","easing","bezier","easingStandard","turned","transform","rotate","get","t3","Symbol","for","t4","_c"],"sources":["../../src/field/chevron.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { ChevronDownGlyph } from '../glyphs'\nimport { useTheme } from '../theme/scope'\n\n// How far the chevron turns while the list is open: half a turn, against\n// the clock as web's end chevron turns from pointing down to pointing up.\nconst OPEN_TURN = -180\n\n/**\n * The chevron in the trailing slot of a field that opens a list, pointing\n * down at the list and turned to point up while it is open, on the step the\n * list arrives on, short3 on the standard curve, and at once under reduced\n * motion. It is the down chevron turned half a turn rather than web's end\n * chevron turned a quarter either way, which draws the same two states; the\n * down one does not mirror under right-to-left, so the turn needs no second\n * direction. It takes its colour and size from the slot.\n */\nfunction FieldChevron({ isOpen }: { readonly isOpen: boolean }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const turn = isOpen ? OPEN_TURN : 0\n  const angle = useSharedValue(turn)\n\n  useEffect(() => {\n    angle.set(\n      reduceMotion\n        ? turn\n        : withTiming(turn, {\n            duration: motion.durationShort3,\n            easing: Easing.bezier(...motion.easingStandard),\n          }),\n    )\n  }, [angle, motion, reduceMotion, turn])\n\n  const turned = useAnimatedStyle(() => {\n    'worklet'\n    return { transform: [{ rotate: `${angle.get()}deg` }] }\n  })\n\n  return (\n    <Animated.View style={turned}>\n      <ChevronDownGlyph />\n    </Animated.View>\n  )\n}\n\nexport { FieldChevron }\n"],"mappings":";;;;;;;AAcA,MAAMS,YAAY;;;;;;;;;;AAWlB,SAAAC,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAsB,MAAA,EAAAC,WAAAH;CACpB,MAAA,EAAAI,WAAmBP,SAAS;CAC5B,MAAAQ,eAAqBZ,iBAAiB;CACtC,MAAAa,OAAaH,SAAAL,YAAA;CACb,MAAAS,QAAcb,eAAeY,IAAI;CAAC,IAAAE;CAAA,IAAAC;CAAA,IAAAR,EAAA,OAAAM,SAAAN,EAAA,OAAAG,UAAAH,EAAA,OAAAI,gBAAAJ,EAAA,OAAAK,MAAA;EAExBE,WAAA;GACRD,MAAKG,IACHL,eAAAC,OAEIX,WAAWW,MAAM;IAAAK,UACLP,OAAMQ;IAAeC,QACvBtB,OAAMuB,OAAO,GAAIV,OAAMW,cAAe;GAChD,CAAC,CACP;EAAC;EACAN,KAAA;GAACF;GAAOH;GAAQC;GAAcC;EAAI;EAACL,EAAA,KAAAM;EAAAN,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;CAAA,OAAA;EAAAD,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;CAAA;CATtCZ,UAAUmB,IASPC,EAAmC;CAEtC,MAAAO,SAAexB,uBAAiB;EAAA;EAAA,OAEvB,EAAAyB,WAAa,CAAC,EAAAC,QAAU,GAAGX,MAAKY,IAAK,EAAC,KAAM,CAAC,EAAE;CAAC,CACxD;CAAC,IAAAC;CAAA,IAAAnB,EAAA,OAAAoB,OAAAC,IAAA,2BAAA,GAAA;EAIEF,KAAA,oBAAC,kBAAD,CAAiB,CAAA;EAAGnB,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAe,QAAA;EADtBO,KAAA,oBAAA,SAAA,MAAA;GAAsBP,OAAAA;GACpBI,UAAAA;EACF,CAAA;EAAgBnB,EAAA,KAAAe;EAAAf,EAAA,KAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OAFhBsB;AAEgB"}

package/dist/field/index.d.ts

@@ -1,4 +1,5 @@
-import { StyleProp, TextInput, TextInputProps, ViewStyle } from "react-native";
+import "../form/index.js";
+import { HostInstance, StyleProp, TextInput, TextInputProps, ViewProps, ViewStyle } from "react-native";
 import "react-native-reanimated";
 import { ComponentRef, ReactNode, Ref, RefObject } from "react";
 //#region src/field/index.d.ts