@krizaka/ui 3.14.0 → 3.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/avatar/defaults.d.ts +43 -0
- package/dist/avatar/defaults.js +76 -0
- package/dist/avatar/defaults.js.map +1 -0
- package/dist/avatar.d.ts +1 -1
- package/dist/avatar.js +4 -2
- package/dist/avatar.js.map +1 -1
- package/dist/chat.js +1 -1
- package/dist/{chunk-UB2BI3AW.js → chunk-BCVLLY3R.js} +47 -3
- package/dist/chunk-BCVLLY3R.js.map +1 -0
- package/dist/{chunk-GR5JNFGQ.js → chunk-LIPK4UCS.js} +300 -164
- package/dist/chunk-LIPK4UCS.js.map +1 -0
- package/dist/{chunk-COJ3IDE2.js → chunk-SKMJRM5K.js} +11 -4
- package/dist/chunk-SKMJRM5K.js.map +1 -0
- package/dist/{chunk-2JFARUKC.js → chunk-YIBKJ36L.js} +1 -1
- package/dist/chunk-YIBKJ36L.js.map +1 -0
- package/dist/{geometry-B2E8oFhg.d.ts → geometry-DX-W-Yyf.d.ts} +5 -2
- package/dist/index.d.ts +18 -2
- package/dist/index.js +5 -1
- package/dist/map.js +60 -0
- package/dist/map.js.map +1 -1
- package/dist/mascot-quote.d.ts +5 -2
- package/dist/mascot-quote.js +45 -1
- package/dist/mascot-quote.js.map +1 -1
- package/dist/mascot-state.d.ts +2 -2
- package/dist/mascot-state.js +1 -1
- package/dist/mascot-state.js.map +1 -1
- package/dist/mascots.d.ts +4 -4
- package/dist/mascots.js +1 -1
- package/dist/match-dialog.js +1 -1
- package/dist/native/map.js +60 -0
- package/dist/native/map.js.map +1 -1
- package/dist/native.d.ts +35 -18
- package/dist/native.js +1114 -912
- package/dist/native.js.map +1 -1
- package/dist/nav-bar.d.ts +1 -1
- package/dist/nav-bar.js +3 -2
- package/dist/nav-bar.js.map +1 -1
- package/dist/site-footer.d.ts +1 -1
- package/dist/site-footer.js +2 -2
- package/dist/{sites-ClGou6ou.d.ts → sites-CHp_vELn.d.ts} +4 -3
- package/dist/sites.d.ts +5 -4
- package/dist/sites.js +9 -2
- package/dist/sites.js.map +1 -1
- package/dist/vertical-video.js +1 -1
- package/package.json +15 -9
- package/registry/avatar.json +6 -2
- package/registry/examples/mascots/beaver.d.ts +4 -0
- package/registry/examples/mascots/beaver.js +19 -0
- package/registry/examples/mascots/beaver.tsx +18 -0
- package/registry/examples/mascots/flock.tsx +1 -1
- package/registry/examples/mascots/magpie.d.ts +4 -0
- package/registry/examples/mascots/magpie.js +19 -0
- package/registry/examples/mascots/magpie.tsx +18 -0
- package/registry/index.json +7 -7
- package/registry/map.json +1 -1
- package/registry/mascot-quote.json +5 -5
- package/registry/mascot-state.json +33 -33
- package/registry/mascots.json +36 -20
- package/registry/nav-bar.json +19 -3
- package/registry/permission-prompt.json +1 -1
- package/registry/product-page.json +2 -2
- package/registry/site-footer.json +18 -2
- package/registry/sites.json +3 -3
- package/dist/chunk-2JFARUKC.js.map +0 -1
- package/dist/chunk-COJ3IDE2.js.map +0 -1
- package/dist/chunk-GR5JNFGQ.js.map +0 -1
- package/dist/chunk-UB2BI3AW.js.map +0 -1
package/dist/native.js
CHANGED
|
@@ -355,6 +355,26 @@ var marks = /* @__PURE__ */ Object.freeze({
|
|
|
355
355
|
"100%",
|
|
356
356
|
"#6d5ec9"
|
|
357
357
|
]
|
|
358
|
+
],
|
|
359
|
+
"kachizaka": [
|
|
360
|
+
[
|
|
361
|
+
"0%",
|
|
362
|
+
"#355fe9"
|
|
363
|
+
],
|
|
364
|
+
[
|
|
365
|
+
"100%",
|
|
366
|
+
"#a27807"
|
|
367
|
+
]
|
|
368
|
+
],
|
|
369
|
+
"akinaza": [
|
|
370
|
+
[
|
|
371
|
+
"0%",
|
|
372
|
+
"#2d8049"
|
|
373
|
+
],
|
|
374
|
+
[
|
|
375
|
+
"100%",
|
|
376
|
+
"#bc632f"
|
|
377
|
+
]
|
|
358
378
|
]
|
|
359
379
|
});
|
|
360
380
|
|
|
@@ -612,11 +632,118 @@ var styles3 = StyleSheet3.create({
|
|
|
612
632
|
body: { flex: 1, gap: 2 }
|
|
613
633
|
});
|
|
614
634
|
|
|
635
|
+
// src/native/AkinazaMark.tsx
|
|
636
|
+
import { View as View3 } from "react-native";
|
|
637
|
+
import Svg, { Circle, Defs, LinearGradient, Path, RadialGradient, Rect, Stop } from "react-native-svg";
|
|
638
|
+
|
|
639
|
+
// src/marks/akinaza-geometry.ts
|
|
640
|
+
var copper = marks.akinaza[marks.akinaza.length - 1][1];
|
|
641
|
+
var AKINAZA = {
|
|
642
|
+
viewBox: "0 0 400 400",
|
|
643
|
+
croppedViewBox: "80 80 240 240",
|
|
644
|
+
center: 200,
|
|
645
|
+
/** The awning: 124 → 276 at y 108, cut 28 at its upper-right corner, four scallops below (y 150, 19 deep). */
|
|
646
|
+
awning: "M124 108 H248 L276 136 V150 A19 19 0 0 1 238 150 A19 19 0 0 1 200 150 A19 19 0 0 1 162 150 A19 19 0 0 1 124 150 Z",
|
|
647
|
+
/** The awning's stripes, in light. */
|
|
648
|
+
stripes: "M162 116 V146 M200 116 V146 M238 116 V140",
|
|
649
|
+
stripe: { color: "#fff7ed", opacity: 0.55, width: 8 },
|
|
650
|
+
/** The shop front: walls 140 → 260 from y 178 to the ground, the door cut out (178 → 222, from y 222). */
|
|
651
|
+
front: "M140 178 H260 V300 H222 V222 H178 V300 H140 Z",
|
|
652
|
+
/** The open door: the bright core, a warm light. */
|
|
653
|
+
door: { x: 182, y: 226, w: 36, h: 74, rx: 4 },
|
|
654
|
+
coreGradient: { stops: [["0%", "#fde7c7"], ["100%", "#fffaf2"]] },
|
|
655
|
+
/** A window each side, in light. */
|
|
656
|
+
windows: "M154 196 H168 V212 H154 Z M232 196 H246 V212 H232 Z",
|
|
657
|
+
gradient: { x1: 140, y1: 300, x2: 276, y2: 108, stops: marks.akinaza },
|
|
658
|
+
/** A coin: one node on the orbit, that turns with it. */
|
|
659
|
+
node: { r: 9, at: [200, 40] },
|
|
660
|
+
glow: { color: copper, opacity: 0.16 },
|
|
661
|
+
/** The door's breathing light (web), in the copper. */
|
|
662
|
+
pulse: { color: copper, low: 0.3, high: 0.65 },
|
|
663
|
+
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
664
|
+
ring: { r: 134, width: 1 }
|
|
665
|
+
};
|
|
666
|
+
|
|
667
|
+
// src/native/mark-motion.ts
|
|
668
|
+
import { useEffect as useEffect3, useState as useState4 } from "react";
|
|
669
|
+
import { AccessibilityInfo as AccessibilityInfo3, Animated, Easing } from "react-native";
|
|
670
|
+
var markA11y = (title) => title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
|
|
671
|
+
function useMarkMotion(size, animated, spinMs = 3e4) {
|
|
672
|
+
const [spin] = useState4(() => new Animated.Value(0));
|
|
673
|
+
const [pulse] = useState4(() => new Animated.Value(0));
|
|
674
|
+
useEffect3(() => {
|
|
675
|
+
if (!animated) return;
|
|
676
|
+
let loops = [];
|
|
677
|
+
let cancelled = false;
|
|
678
|
+
void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
|
|
679
|
+
if (reduce || cancelled) return;
|
|
680
|
+
loops = [
|
|
681
|
+
Animated.loop(Animated.timing(spin, { toValue: 1, duration: spinMs, easing: Easing.linear, useNativeDriver: true })),
|
|
682
|
+
Animated.loop(
|
|
683
|
+
Animated.sequence([
|
|
684
|
+
Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
|
|
685
|
+
Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
|
|
686
|
+
])
|
|
687
|
+
)
|
|
688
|
+
];
|
|
689
|
+
loops.forEach((l) => l.start());
|
|
690
|
+
});
|
|
691
|
+
return () => {
|
|
692
|
+
cancelled = true;
|
|
693
|
+
loops.forEach((l) => l.stop());
|
|
694
|
+
};
|
|
695
|
+
}, [animated, spin, pulse, spinMs]);
|
|
696
|
+
return {
|
|
697
|
+
Animated,
|
|
698
|
+
layer: { position: "absolute", width: size, height: size },
|
|
699
|
+
spinStyle: { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] },
|
|
700
|
+
pulseStyle: { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }
|
|
701
|
+
};
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
// src/native/AkinazaMark.tsx
|
|
705
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
706
|
+
function AkinazaMark({ size = 48, animated = true, title, neutral }) {
|
|
707
|
+
const { theme } = useTheme();
|
|
708
|
+
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 32e3);
|
|
709
|
+
const id = useSvgId("akm");
|
|
710
|
+
const viewBox = size < 48 ? AKINAZA.croppedViewBox : AKINAZA.viewBox;
|
|
711
|
+
const stroke = neutral ?? theme.textMuted;
|
|
712
|
+
const gradient = /* @__PURE__ */ jsx5(LinearGradient, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: AKINAZA.gradient.x1, y1: AKINAZA.gradient.y1, x2: AKINAZA.gradient.x2, y2: AKINAZA.gradient.y2, children: AKINAZA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx5(Stop, { offset, stopColor: color }, offset)) });
|
|
713
|
+
const fill = `url(#${id}a)`;
|
|
714
|
+
return /* @__PURE__ */ jsxs3(View3, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
715
|
+
/* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
|
|
716
|
+
/* @__PURE__ */ jsxs3(Defs, { children: [
|
|
717
|
+
/* @__PURE__ */ jsxs3(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
718
|
+
/* @__PURE__ */ jsx5(Stop, { offset: "0%", stopColor: AKINAZA.glow.color, stopOpacity: AKINAZA.glow.opacity }),
|
|
719
|
+
/* @__PURE__ */ jsx5(Stop, { offset: "100%", stopColor: AKINAZA.glow.color, stopOpacity: 0 })
|
|
720
|
+
] }),
|
|
721
|
+
gradient
|
|
722
|
+
] }),
|
|
723
|
+
size >= 48 ? /* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.center, cy: AKINAZA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
724
|
+
/* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.center, cy: AKINAZA.center, r: AKINAZA.ring.r, stroke, strokeWidth: AKINAZA.ring.width, opacity: 0.35, fill: "none" }),
|
|
725
|
+
/* @__PURE__ */ jsx5(Path, { d: AKINAZA.awning, fill }),
|
|
726
|
+
/* @__PURE__ */ jsx5(Path, { d: AKINAZA.stripes, stroke: AKINAZA.stripe.color, strokeOpacity: AKINAZA.stripe.opacity, strokeWidth: AKINAZA.stripe.width, strokeLinecap: "round", fill: "none" }),
|
|
727
|
+
/* @__PURE__ */ jsx5(Path, { d: AKINAZA.front, fill }),
|
|
728
|
+
/* @__PURE__ */ jsx5(Path, { d: AKINAZA.windows, fill: AKINAZA.stripe.color, fillOpacity: AKINAZA.stripe.opacity })
|
|
729
|
+
] }),
|
|
730
|
+
/* @__PURE__ */ jsx5(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
|
|
731
|
+
/* @__PURE__ */ jsx5(Defs, { children: gradient }),
|
|
732
|
+
/* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.center, cy: AKINAZA.center, r: AKINAZA.orbit.r, stroke, strokeWidth: AKINAZA.orbit.width, strokeDasharray: AKINAZA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
733
|
+
/* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.node.at[0], cy: AKINAZA.node.at[1], r: AKINAZA.node.r, fill })
|
|
734
|
+
] }) }),
|
|
735
|
+
/* @__PURE__ */ jsx5(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
|
|
736
|
+
/* @__PURE__ */ jsx5(Defs, { children: /* @__PURE__ */ jsx5(LinearGradient, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: AKINAZA.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx5(Stop, { offset, stopColor: color }, offset)) }) }),
|
|
737
|
+
/* @__PURE__ */ jsx5(Rect, { x: AKINAZA.door.x, y: AKINAZA.door.y, width: AKINAZA.door.w, height: AKINAZA.door.h, rx: AKINAZA.door.rx, fill: `url(#${id}c)` })
|
|
738
|
+
] }) })
|
|
739
|
+
] });
|
|
740
|
+
}
|
|
741
|
+
|
|
615
742
|
// src/native/avatar.tsx
|
|
616
743
|
import * as React4 from "react";
|
|
617
|
-
import { Image, StyleSheet as StyleSheet4, Text as Text2, View as
|
|
618
|
-
import
|
|
619
|
-
import { jsx as
|
|
744
|
+
import { Image, StyleSheet as StyleSheet4, Text as Text2, View as View4 } from "react-native";
|
|
745
|
+
import Svg2, { Circle as Circle2, Defs as Defs2, LinearGradient as LinearGradient2, Stop as Stop2, SvgUri } from "react-native-svg";
|
|
746
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
620
747
|
var SIDE = { xs: 20, sm: 32, md: 40, lg: 56, xl: 80 };
|
|
621
748
|
function isSvgUri(uri) {
|
|
622
749
|
return /^data:image\/svg\+xml[;,]/i.test(uri) || /\.svg(?:[?#]|$)/i.test(uri);
|
|
@@ -631,15 +758,15 @@ function AvatarRoot({ src, svg, alt = "", fallback, fallbackSrc, defaultAvatar,
|
|
|
631
758
|
const shown = src && !failedSrc.has(src) ? src : backup && !failedSrc.has(backup) ? backup : null;
|
|
632
759
|
const initial = alt.trim().charAt(0).toUpperCase();
|
|
633
760
|
const content = fallback ?? initial;
|
|
634
|
-
const picture = /* @__PURE__ */
|
|
635
|
-
|
|
761
|
+
const picture = /* @__PURE__ */ jsx6(
|
|
762
|
+
View4,
|
|
636
763
|
{
|
|
637
764
|
accessible: Boolean(alt) && !presence && !ring,
|
|
638
765
|
role: alt && !presence && !ring ? "img" : void 0,
|
|
639
766
|
"aria-label": alt && !presence && !ring ? alt : void 0,
|
|
640
767
|
...presence || ring ? {} : props,
|
|
641
768
|
style: [styles4.root, { width: side, height: side, borderRadius: side / 2, backgroundColor: theme.surface3 }, presence || ring ? null : style],
|
|
642
|
-
children: shown && (svg && shown === src || isSvgUri(shown)) ? /* @__PURE__ */
|
|
769
|
+
children: shown && (svg && shown === src || isSvgUri(shown)) ? /* @__PURE__ */ jsx6(View4, { style: StyleSheet4.absoluteFill, pointerEvents: "none", children: /* @__PURE__ */ jsx6(SvgUri, { testID: props.testID ? `${props.testID}.svg` : void 0, uri: shown, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid slice", onError: () => setFailedSrcs((all) => [...all, shown]) }) }) : shown ? /* @__PURE__ */ jsx6(Image, { testID: props.testID ? `${props.testID}.image` : void 0, source: { uri: shown }, onError: () => setFailedSrcs((all) => [...all, shown]), resizeMode: "cover", style: StyleSheet4.absoluteFill }) : typeof content === "string" ? /* @__PURE__ */ jsx6(Text2, { style: [styles4.initial, { color: theme.textSecondary, fontSize: Math.max(9, Math.round(side * 0.4)) }], children: content }) : content
|
|
643
770
|
}
|
|
644
771
|
);
|
|
645
772
|
if (!presence && !ring) return picture;
|
|
@@ -648,14 +775,14 @@ function AvatarRoot({ src, svg, alt = "", fallback, fallbackSrc, defaultAvatar,
|
|
|
648
775
|
const dot = Math.max(8, Math.round(side * 0.28));
|
|
649
776
|
const dotColor = presence === "online" ? theme.success : presence === "away" ? theme.warning : presence === "busy" ? theme.danger : theme.surface0;
|
|
650
777
|
const name = [alt, presence ? presenceLabel : null].filter(Boolean).join(", ");
|
|
651
|
-
return /* @__PURE__ */
|
|
652
|
-
ring ? /* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
/* @__PURE__ */
|
|
655
|
-
/* @__PURE__ */
|
|
778
|
+
return /* @__PURE__ */ jsxs4(View4, { accessible: Boolean(name), role: name ? "img" : void 0, "aria-label": name || void 0, ...props, style: [{ width: outer, height: outer, alignItems: "center", justifyContent: "center" }, style], children: [
|
|
779
|
+
ring ? /* @__PURE__ */ jsxs4(Svg2, { width: outer, height: outer, style: StyleSheet4.absoluteFill, "aria-hidden": true, children: [
|
|
780
|
+
/* @__PURE__ */ jsx6(Defs2, { children: /* @__PURE__ */ jsxs4(LinearGradient2, { id: gradient, x1: "0", y1: "1", x2: "1", y2: "0", children: [
|
|
781
|
+
/* @__PURE__ */ jsx6(Stop2, { offset: "0", stopColor: theme.accent }),
|
|
782
|
+
/* @__PURE__ */ jsx6(Stop2, { offset: "1", stopColor: theme.accent2 })
|
|
656
783
|
] }) }),
|
|
657
|
-
/* @__PURE__ */
|
|
658
|
-
|
|
784
|
+
/* @__PURE__ */ jsx6(
|
|
785
|
+
Circle2,
|
|
659
786
|
{
|
|
660
787
|
cx: outer / 2,
|
|
661
788
|
cy: outer / 2,
|
|
@@ -667,8 +794,8 @@ function AvatarRoot({ src, svg, alt = "", fallback, fallbackSrc, defaultAvatar,
|
|
|
667
794
|
)
|
|
668
795
|
] }) : null,
|
|
669
796
|
picture,
|
|
670
|
-
presence ? /* @__PURE__ */
|
|
671
|
-
|
|
797
|
+
presence ? /* @__PURE__ */ jsx6(
|
|
798
|
+
View4,
|
|
672
799
|
{
|
|
673
800
|
"aria-hidden": true,
|
|
674
801
|
style: [
|
|
@@ -686,9 +813,9 @@ function AvatarGroup({ max, size = "md", style, children, ...props }) {
|
|
|
686
813
|
const rest = items2.length - shown.length;
|
|
687
814
|
const side = typeof size === "number" ? size : SIDE[size];
|
|
688
815
|
const ring = { borderWidth: 2, borderColor: theme.surface0, marginLeft: -side / 5 };
|
|
689
|
-
return /* @__PURE__ */
|
|
690
|
-
shown.map((child, i) => /* @__PURE__ */
|
|
691
|
-
rest > 0 ? /* @__PURE__ */
|
|
816
|
+
return /* @__PURE__ */ jsxs4(View4, { ...props, style: [styles4.group, { paddingLeft: side / 5 }, style], children: [
|
|
817
|
+
shown.map((child, i) => /* @__PURE__ */ jsx6(View4, { style: [ring, { borderRadius: side }], children: React4.isValidElement(child) ? React4.cloneElement(child, { size }) : child }, i)),
|
|
818
|
+
rest > 0 ? /* @__PURE__ */ jsx6(View4, { style: [ring, { borderRadius: side }], children: /* @__PURE__ */ jsx6(AvatarRoot, { size, fallback: `+${rest}` }) }) : null
|
|
692
819
|
] });
|
|
693
820
|
}
|
|
694
821
|
var Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });
|
|
@@ -701,7 +828,7 @@ var styles4 = StyleSheet4.create({
|
|
|
701
828
|
|
|
702
829
|
// src/native/badge.tsx
|
|
703
830
|
import * as React5 from "react";
|
|
704
|
-
import { Animated, StyleSheet as StyleSheet5, Text as Text3 } from "react-native";
|
|
831
|
+
import { Animated as Animated2, StyleSheet as StyleSheet5, Text as Text3 } from "react-native";
|
|
705
832
|
|
|
706
833
|
// src/recipes/define.ts
|
|
707
834
|
function defineRecipe(config) {
|
|
@@ -895,7 +1022,7 @@ function nativeRecipe(config) {
|
|
|
895
1022
|
}
|
|
896
1023
|
|
|
897
1024
|
// src/native/badge.tsx
|
|
898
|
-
import { jsx as
|
|
1025
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
899
1026
|
var RECIPE = nativeRecipe(badgeRecipe);
|
|
900
1027
|
function look(tone3, size, t) {
|
|
901
1028
|
const { frame, text, dot } = RECIPE.resolve({ tone: tone3, size }, t).base;
|
|
@@ -914,13 +1041,13 @@ function Badge({ tone: tone3 = "neutral", size = "sm", dot, pulse, style, childr
|
|
|
914
1041
|
const { theme } = useTheme();
|
|
915
1042
|
const colors = look(tone3, size, theme);
|
|
916
1043
|
const reduce = useReducedMotion();
|
|
917
|
-
const [opacity] = React5.useState(() => new
|
|
1044
|
+
const [opacity] = React5.useState(() => new Animated2.Value(1));
|
|
918
1045
|
React5.useEffect(() => {
|
|
919
1046
|
if (!dot || !pulse || reduce) return;
|
|
920
|
-
const loop =
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
1047
|
+
const loop = Animated2.loop(
|
|
1048
|
+
Animated2.sequence([
|
|
1049
|
+
Animated2.timing(opacity, { toValue: 0.35, duration: 800, useNativeDriver: true }),
|
|
1050
|
+
Animated2.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true })
|
|
924
1051
|
])
|
|
925
1052
|
);
|
|
926
1053
|
loop.start();
|
|
@@ -929,14 +1056,14 @@ function Badge({ tone: tone3 = "neutral", size = "sm", dot, pulse, style, childr
|
|
|
929
1056
|
opacity.setValue(1);
|
|
930
1057
|
};
|
|
931
1058
|
}, [dot, pulse, reduce, opacity]);
|
|
932
|
-
return /* @__PURE__ */
|
|
933
|
-
|
|
1059
|
+
return /* @__PURE__ */ jsxs5(
|
|
1060
|
+
Animated2.View,
|
|
934
1061
|
{
|
|
935
1062
|
...props,
|
|
936
1063
|
style: [styles5.root, { paddingHorizontal: colors.paddingHorizontal, paddingVertical: colors.paddingVertical, backgroundColor: colors.bg, borderColor: colors.border }, style],
|
|
937
1064
|
children: [
|
|
938
|
-
dot ? /* @__PURE__ */
|
|
939
|
-
typeof children === "string" || typeof children === "number" ? /* @__PURE__ */
|
|
1065
|
+
dot ? /* @__PURE__ */ jsx7(Animated2.View, { "aria-hidden": true, style: [styles5.dot, { backgroundColor: colors.dot, opacity }] }) : null,
|
|
1066
|
+
typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx7(Text3, { style: colors.text, children }) : children
|
|
940
1067
|
]
|
|
941
1068
|
}
|
|
942
1069
|
);
|
|
@@ -948,8 +1075,8 @@ var styles5 = StyleSheet5.create({
|
|
|
948
1075
|
|
|
949
1076
|
// src/native/button.tsx
|
|
950
1077
|
import * as React6 from "react";
|
|
951
|
-
import { ActivityIndicator, Pressable as Pressable2, StyleSheet as StyleSheet6, View as
|
|
952
|
-
import
|
|
1078
|
+
import { ActivityIndicator, Pressable as Pressable2, StyleSheet as StyleSheet6, View as View5 } from "react-native";
|
|
1079
|
+
import Svg3, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect2, Stop as Stop3 } from "react-native-svg";
|
|
953
1080
|
|
|
954
1081
|
// src/button/recipe.ts
|
|
955
1082
|
var buttonRecipe = defineRecipe({
|
|
@@ -975,7 +1102,7 @@ var buttonRecipe = defineRecipe({
|
|
|
975
1102
|
});
|
|
976
1103
|
|
|
977
1104
|
// src/native/button.tsx
|
|
978
|
-
import { jsx as
|
|
1105
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
979
1106
|
var RECIPE2 = nativeRecipe(buttonRecipe);
|
|
980
1107
|
function look2(variant, size, t) {
|
|
981
1108
|
const { frame, text, gradient } = RECIPE2.resolve({ variant, size }, t).base;
|
|
@@ -1007,18 +1134,18 @@ function useButton({ variant = "secondary", size = "md", shape = "rounded", load
|
|
|
1007
1134
|
}
|
|
1008
1135
|
function Fill({ colors, id }) {
|
|
1009
1136
|
if (!colors.gradient) return null;
|
|
1010
|
-
return /* @__PURE__ */
|
|
1011
|
-
/* @__PURE__ */
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1137
|
+
return /* @__PURE__ */ jsxs6(Svg3, { "aria-hidden": true, pointerEvents: "none", style: StyleSheet6.absoluteFill, width: "100%", height: "100%", children: [
|
|
1138
|
+
/* @__PURE__ */ jsx8(Defs3, { children: /* @__PURE__ */ jsxs6(LinearGradient3, { id, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
1139
|
+
/* @__PURE__ */ jsx8(Stop3, { offset: "0", stopColor: colors.gradient[0] }),
|
|
1140
|
+
/* @__PURE__ */ jsx8(Stop3, { offset: "1", stopColor: colors.gradient[1] })
|
|
1014
1141
|
] }) }),
|
|
1015
|
-
/* @__PURE__ */
|
|
1142
|
+
/* @__PURE__ */ jsx8(Rect2, { width: "100%", height: "100%", fill: `url(#${id})` })
|
|
1016
1143
|
] });
|
|
1017
1144
|
}
|
|
1018
1145
|
function Button({ label, icon, variant, size = "md", shape, loading = false, disabled, style, ...props }) {
|
|
1019
1146
|
const { colors, inactive, frame } = useButton({ variant, size, shape, loading, disabled });
|
|
1020
1147
|
const gradientId = `kz-button-${React6.useId().replace(/:/g, "")}`;
|
|
1021
|
-
return /* @__PURE__ */
|
|
1148
|
+
return /* @__PURE__ */ jsxs6(
|
|
1022
1149
|
Pressable2,
|
|
1023
1150
|
{
|
|
1024
1151
|
role: "button",
|
|
@@ -1029,10 +1156,10 @@ function Button({ label, icon, variant, size = "md", shape, loading = false, dis
|
|
|
1029
1156
|
disabled: inactive,
|
|
1030
1157
|
style: ({ pressed }) => [styles6.base, { paddingHorizontal: colors.paddingHorizontal }, frame(pressed), style],
|
|
1031
1158
|
children: [
|
|
1032
|
-
/* @__PURE__ */
|
|
1033
|
-
/* @__PURE__ */
|
|
1034
|
-
loading ? /* @__PURE__ */
|
|
1035
|
-
/* @__PURE__ */
|
|
1159
|
+
/* @__PURE__ */ jsx8(Fill, { colors, id: gradientId }),
|
|
1160
|
+
/* @__PURE__ */ jsxs6(View5, { style: styles6.row, children: [
|
|
1161
|
+
loading ? /* @__PURE__ */ jsx8(ActivityIndicator, { "aria-hidden": true, size: "small", color: colors.fg }) : icon,
|
|
1162
|
+
/* @__PURE__ */ jsx8(Txt, { variant: "label", numberOfLines: 1, style: { color: colors.fg, fontSize: colors.fontSize, fontWeight: colors.fontWeight }, children: label })
|
|
1036
1163
|
] })
|
|
1037
1164
|
]
|
|
1038
1165
|
}
|
|
@@ -1042,7 +1169,7 @@ function IconButton({ label, icon, variant, size = "md", shape, loading = false,
|
|
|
1042
1169
|
const { colors, inactive, frame } = useButton({ variant, size, shape, loading, disabled });
|
|
1043
1170
|
const gradientId = `kz-button-${React6.useId().replace(/:/g, "")}`;
|
|
1044
1171
|
const side = colors.height;
|
|
1045
|
-
return /* @__PURE__ */
|
|
1172
|
+
return /* @__PURE__ */ jsxs6(
|
|
1046
1173
|
Pressable2,
|
|
1047
1174
|
{
|
|
1048
1175
|
role: "button",
|
|
@@ -1054,8 +1181,8 @@ function IconButton({ label, icon, variant, size = "md", shape, loading = false,
|
|
|
1054
1181
|
disabled: inactive,
|
|
1055
1182
|
style: ({ pressed }) => [styles6.base, frame(pressed), { width: side }, style],
|
|
1056
1183
|
children: [
|
|
1057
|
-
/* @__PURE__ */
|
|
1058
|
-
loading ? /* @__PURE__ */
|
|
1184
|
+
/* @__PURE__ */ jsx8(Fill, { colors, id: gradientId }),
|
|
1185
|
+
loading ? /* @__PURE__ */ jsx8(ActivityIndicator, { "aria-hidden": true, size: "small", color: colors.fg }) : icon
|
|
1059
1186
|
]
|
|
1060
1187
|
}
|
|
1061
1188
|
);
|
|
@@ -1066,7 +1193,7 @@ var styles6 = StyleSheet6.create({
|
|
|
1066
1193
|
});
|
|
1067
1194
|
|
|
1068
1195
|
// src/native/card.tsx
|
|
1069
|
-
import { Image as Image2, Pressable as Pressable3, StyleSheet as StyleSheet7, View as
|
|
1196
|
+
import { Image as Image2, Pressable as Pressable3, StyleSheet as StyleSheet7, View as View6 } from "react-native";
|
|
1070
1197
|
|
|
1071
1198
|
// src/card/recipe.ts
|
|
1072
1199
|
var cardRecipe = defineRecipe({
|
|
@@ -1094,7 +1221,7 @@ var cardRecipe = defineRecipe({
|
|
|
1094
1221
|
});
|
|
1095
1222
|
|
|
1096
1223
|
// src/native/card.tsx
|
|
1097
|
-
import { jsx as
|
|
1224
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
1098
1225
|
var RECIPES = nativeRecipe(cardRecipe);
|
|
1099
1226
|
function CardRoot({ tone: tone3 = "default", radius: radius3 = "xl", onPress, style, ...props }) {
|
|
1100
1227
|
const { theme, radius: r } = useTheme();
|
|
@@ -1108,8 +1235,8 @@ function CardRoot({ tone: tone3 = "default", radius: radius3 = "xl", onPress, st
|
|
|
1108
1235
|
},
|
|
1109
1236
|
tone3 === "elevated" ? [styles7.shadow, { shadowColor: theme.scrimStrong }] : null
|
|
1110
1237
|
];
|
|
1111
|
-
if (!onPress) return /* @__PURE__ */
|
|
1112
|
-
return /* @__PURE__ */
|
|
1238
|
+
if (!onPress) return /* @__PURE__ */ jsx9(View6, { ...props, style: [frame, style] });
|
|
1239
|
+
return /* @__PURE__ */ jsx9(
|
|
1113
1240
|
Pressable3,
|
|
1114
1241
|
{
|
|
1115
1242
|
role: "button",
|
|
@@ -1122,14 +1249,14 @@ function CardRoot({ tone: tone3 = "default", radius: radius3 = "xl", onPress, st
|
|
|
1122
1249
|
var ASPECT = { video: 16 / 9, square: 1, portrait: 3 / 4 };
|
|
1123
1250
|
function CardMedia({ aspect = "video", style, ...props }) {
|
|
1124
1251
|
const { theme } = useTheme();
|
|
1125
|
-
return /* @__PURE__ */
|
|
1252
|
+
return /* @__PURE__ */ jsx9(View6, { ...props, style: [styles7.media, { backgroundColor: theme.media }, aspect === "auto" ? null : { aspectRatio: ASPECT[aspect] }, style] });
|
|
1126
1253
|
}
|
|
1127
1254
|
function CardImage({ src, fallback, alt, style, ...props }) {
|
|
1128
1255
|
const { theme } = useTheme();
|
|
1129
1256
|
if (!src) {
|
|
1130
|
-
return /* @__PURE__ */
|
|
1257
|
+
return /* @__PURE__ */ jsx9(View6, { "aria-hidden": true, style: [StyleSheet7.absoluteFill, styles7.center, { backgroundColor: theme.accentSoft }], children: fallback });
|
|
1131
1258
|
}
|
|
1132
|
-
return /* @__PURE__ */
|
|
1259
|
+
return /* @__PURE__ */ jsx9(Image2, { accessible: Boolean(alt), alt, "aria-label": alt, resizeMode: "cover", ...props, source: { uri: src }, style: [StyleSheet7.absoluteFill, style] });
|
|
1133
1260
|
}
|
|
1134
1261
|
var CORNER = {
|
|
1135
1262
|
"top-left": { top: 10, left: 10 },
|
|
@@ -1138,22 +1265,22 @@ var CORNER = {
|
|
|
1138
1265
|
"bottom-right": { bottom: 10, right: 10 }
|
|
1139
1266
|
};
|
|
1140
1267
|
function CardOverlay({ corner = "top-left", style, ...props }) {
|
|
1141
|
-
return /* @__PURE__ */
|
|
1268
|
+
return /* @__PURE__ */ jsx9(View6, { ...props, style: [styles7.overlay, CORNER[corner], style] });
|
|
1142
1269
|
}
|
|
1143
1270
|
function CardBody({ padding = "md", style, ...props }) {
|
|
1144
1271
|
const { theme } = useTheme();
|
|
1145
1272
|
const { frame } = RECIPES.resolve({ padding }, theme).body;
|
|
1146
|
-
return /* @__PURE__ */
|
|
1273
|
+
return /* @__PURE__ */ jsx9(View6, { ...props, style: [styles7.body, { padding: frame.padding }, style] });
|
|
1147
1274
|
}
|
|
1148
1275
|
function CardTitle({ numberOfLines = 1, ...props }) {
|
|
1149
|
-
return /* @__PURE__ */
|
|
1276
|
+
return /* @__PURE__ */ jsx9(Txt, { variant: "label", role: "heading", numberOfLines, ...props });
|
|
1150
1277
|
}
|
|
1151
1278
|
function CardDescription({ numberOfLines = 2, ...props }) {
|
|
1152
|
-
return /* @__PURE__ */
|
|
1279
|
+
return /* @__PURE__ */ jsx9(Txt, { variant: "caption", tone: "secondary", numberOfLines, ...props });
|
|
1153
1280
|
}
|
|
1154
1281
|
function CardFooter({ style, ...props }) {
|
|
1155
1282
|
const { theme } = useTheme();
|
|
1156
|
-
return /* @__PURE__ */
|
|
1283
|
+
return /* @__PURE__ */ jsx9(View6, { ...props, style: [styles7.footer, { borderTopColor: theme.borderSubtle }, style] });
|
|
1157
1284
|
}
|
|
1158
1285
|
var Card = {
|
|
1159
1286
|
Root: CardRoot,
|
|
@@ -1177,9 +1304,9 @@ var styles7 = StyleSheet7.create({
|
|
|
1177
1304
|
|
|
1178
1305
|
// src/native/chat.tsx
|
|
1179
1306
|
import * as React7 from "react";
|
|
1180
|
-
import { Animated as
|
|
1181
|
-
import
|
|
1182
|
-
import { Fragment as Fragment2, jsx as
|
|
1307
|
+
import { Animated as Animated3, Easing as Easing2, Pressable as Pressable4, StyleSheet as StyleSheet8, TextInput, View as View7 } from "react-native";
|
|
1308
|
+
import Svg4, { Path as Path2 } from "react-native-svg";
|
|
1309
|
+
import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1183
1310
|
var STATUS = { sending: "Sending", sent: "Sent", delivered: "Delivered", read: "Read", failed: "Not sent" };
|
|
1184
1311
|
function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = "single", labels, style }) {
|
|
1185
1312
|
const { theme, radius: radius3 } = useTheme();
|
|
@@ -1189,8 +1316,8 @@ function MessageBubble({ text, mine, time, status, showStatus, context, onRetry,
|
|
|
1189
1316
|
const tight = 6;
|
|
1190
1317
|
const corners = mine ? { borderTopRightRadius: grouped === "middle" || grouped === "last" ? tight : big, borderBottomRightRadius: grouped === "first" || grouped === "middle" ? tight : big } : { borderTopLeftRadius: grouped === "middle" || grouped === "last" ? tight : big, borderBottomLeftRadius: grouped === "first" || grouped === "middle" ? tight : big };
|
|
1191
1318
|
const tone3 = mine ? "onAccent" : "text";
|
|
1192
|
-
const bubble = /* @__PURE__ */
|
|
1193
|
-
|
|
1319
|
+
const bubble = /* @__PURE__ */ jsxs7(
|
|
1320
|
+
View7,
|
|
1194
1321
|
{
|
|
1195
1322
|
style: [
|
|
1196
1323
|
styles8.bubble,
|
|
@@ -1199,34 +1326,34 @@ function MessageBubble({ text, mine, time, status, showStatus, context, onRetry,
|
|
|
1199
1326
|
failed ? { borderWidth: 2, borderColor: theme.danger } : null
|
|
1200
1327
|
],
|
|
1201
1328
|
children: [
|
|
1202
|
-
context ? /* @__PURE__ */
|
|
1203
|
-
/* @__PURE__ */
|
|
1204
|
-
time ? /* @__PURE__ */
|
|
1329
|
+
context ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: mine ? "onAccent" : "secondary", style: styles8.context, children: context }) : null,
|
|
1330
|
+
/* @__PURE__ */ jsx10(Txt, { tone: tone3, children: text }),
|
|
1331
|
+
time ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: tone3, style: styles8.time, children: time }) : null
|
|
1205
1332
|
]
|
|
1206
1333
|
}
|
|
1207
1334
|
);
|
|
1208
1335
|
const name = [text, time, failed ? `${words2.failed}. ${labels?.retry ?? ""}` : null].filter(Boolean).join(", ");
|
|
1209
|
-
return /* @__PURE__ */
|
|
1210
|
-
failed && onRetry ? /* @__PURE__ */
|
|
1211
|
-
showStatus && status ? /* @__PURE__ */
|
|
1212
|
-
status === "delivered" || status === "read" || status === "sent" ? /* @__PURE__ */
|
|
1213
|
-
/* @__PURE__ */
|
|
1336
|
+
return /* @__PURE__ */ jsxs7(View7, { style: [styles8.row, mine ? styles8.mine : styles8.theirs, style], children: [
|
|
1337
|
+
failed && onRetry ? /* @__PURE__ */ jsx10(Pressable4, { role: "button", "aria-label": name, onPress: onRetry, style: styles8.max, children: bubble }) : /* @__PURE__ */ jsx10(View7, { accessible: true, "aria-label": name, style: styles8.max, children: bubble }),
|
|
1338
|
+
showStatus && status ? /* @__PURE__ */ jsxs7(View7, { style: styles8.status, children: [
|
|
1339
|
+
status === "delivered" || status === "read" || status === "sent" ? /* @__PURE__ */ jsx10(Svg4, { width: 14, height: 14, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: status === "sent" ? "M5 12.5l4.5 4.5L19 7.5" : "M2 12.5l4.5 4.5L16 7.5M9 15l2 2 9.5-9.5", fill: "none", stroke: status === "read" ? theme.accent : theme.textSecondary, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) }) : null,
|
|
1340
|
+
/* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: failed ? "danger" : "secondary", children: words2[status] })
|
|
1214
1341
|
] }) : null
|
|
1215
1342
|
] });
|
|
1216
1343
|
}
|
|
1217
1344
|
function TypingIndicator({ label, showLabel, style }) {
|
|
1218
1345
|
const { theme, radius: radius3 } = useTheme();
|
|
1219
1346
|
const reduce = useReducedMotion();
|
|
1220
|
-
const [t] = React7.useState(() => new
|
|
1347
|
+
const [t] = React7.useState(() => new Animated3.Value(0));
|
|
1221
1348
|
React7.useEffect(() => {
|
|
1222
1349
|
if (reduce) return;
|
|
1223
|
-
const loop =
|
|
1350
|
+
const loop = Animated3.loop(Animated3.timing(t, { toValue: 1, duration: 1200, easing: Easing2.linear, useNativeDriver: true }));
|
|
1224
1351
|
loop.start();
|
|
1225
1352
|
return () => loop.stop();
|
|
1226
1353
|
}, [reduce, t]);
|
|
1227
|
-
return /* @__PURE__ */
|
|
1228
|
-
/* @__PURE__ */
|
|
1229
|
-
|
|
1354
|
+
return /* @__PURE__ */ jsxs7(View7, { accessible: true, role: "progressbar", "aria-label": label, accessibilityLiveRegion: "polite", style: [styles8.typingRow, style], children: [
|
|
1355
|
+
/* @__PURE__ */ jsx10(View7, { style: [styles8.typing, { backgroundColor: theme.surface2, borderRadius: radius3.xl }], children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx10(
|
|
1356
|
+
Animated3.View,
|
|
1230
1357
|
{
|
|
1231
1358
|
style: [
|
|
1232
1359
|
styles8.dot,
|
|
@@ -1236,15 +1363,15 @@ function TypingIndicator({ label, showLabel, style }) {
|
|
|
1236
1363
|
},
|
|
1237
1364
|
i
|
|
1238
1365
|
)) }),
|
|
1239
|
-
showLabel ? /* @__PURE__ */
|
|
1366
|
+
showLabel ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "secondary", children: label }) : null
|
|
1240
1367
|
] });
|
|
1241
1368
|
}
|
|
1242
1369
|
function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength = 4e3, style }) {
|
|
1243
1370
|
const { theme, radius: radius3, insets, haptic } = useTheme();
|
|
1244
1371
|
const ready = value.trim().length > 0;
|
|
1245
|
-
return /* @__PURE__ */
|
|
1372
|
+
return /* @__PURE__ */ jsx10(View7, { style: [styles8.composer, { borderTopColor: theme.borderSubtle, backgroundColor: theme.surface0, paddingBottom: 8 + insets.bottom }, style], children: disabledReason ? /* @__PURE__ */ jsx10(Txt, { tone: "secondary", style: styles8.flex, children: disabledReason }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1246
1373
|
leading,
|
|
1247
|
-
/* @__PURE__ */
|
|
1374
|
+
/* @__PURE__ */ jsx10(
|
|
1248
1375
|
TextInput,
|
|
1249
1376
|
{
|
|
1250
1377
|
"aria-label": placeholder,
|
|
@@ -1257,7 +1384,7 @@ function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel,
|
|
|
1257
1384
|
style: [styles8.input, { borderRadius: radius3.xl, borderColor: theme.borderDefault, backgroundColor: theme.surface1, color: theme.textPrimary }]
|
|
1258
1385
|
}
|
|
1259
1386
|
),
|
|
1260
|
-
/* @__PURE__ */
|
|
1387
|
+
/* @__PURE__ */ jsx10(
|
|
1261
1388
|
Pressable4,
|
|
1262
1389
|
{
|
|
1263
1390
|
role: "button",
|
|
@@ -1269,7 +1396,7 @@ function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel,
|
|
|
1269
1396
|
onSend();
|
|
1270
1397
|
},
|
|
1271
1398
|
style: ({ pressed }) => [styles8.send, { backgroundColor: ready ? pressed ? theme.accentHover : theme.accent : theme.surface3 }],
|
|
1272
|
-
children: /* @__PURE__ */
|
|
1399
|
+
children: /* @__PURE__ */ jsx10(Svg4, { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M4 12l16-8-6 16-2.5-6.5L4 12z", fill: ready ? theme.onAccent : theme.textMuted }) })
|
|
1273
1400
|
}
|
|
1274
1401
|
)
|
|
1275
1402
|
] }) });
|
|
@@ -1277,25 +1404,25 @@ function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel,
|
|
|
1277
1404
|
function ConversationItem({ name, avatar, presence, presenceLabel, preview, typing, time, unread = 0, unreadLabel, onPress, style }) {
|
|
1278
1405
|
const { theme, radius: radius3 } = useTheme();
|
|
1279
1406
|
const said = [unread > 0 ? unreadLabel : null, presence ? presenceLabel : null].filter(Boolean).join(", ");
|
|
1280
|
-
return /* @__PURE__ */
|
|
1407
|
+
return /* @__PURE__ */ jsxs7(
|
|
1281
1408
|
Pressable4,
|
|
1282
1409
|
{
|
|
1283
1410
|
role: "button",
|
|
1284
1411
|
onPress,
|
|
1285
1412
|
style: ({ pressed }) => [styles8.item, { backgroundColor: pressed ? theme.surface2 : theme.surface0 }, style],
|
|
1286
1413
|
children: [
|
|
1287
|
-
/* @__PURE__ */
|
|
1288
|
-
/* @__PURE__ */
|
|
1289
|
-
/* @__PURE__ */
|
|
1290
|
-
/* @__PURE__ */
|
|
1291
|
-
time ? /* @__PURE__ */
|
|
1414
|
+
/* @__PURE__ */ jsx10(View7, { "aria-hidden": true, children: /* @__PURE__ */ jsx10(Avatar, { src: avatar, alt: name, size: "lg", presence, presenceLabel }) }),
|
|
1415
|
+
/* @__PURE__ */ jsxs7(View7, { style: styles8.flex, children: [
|
|
1416
|
+
/* @__PURE__ */ jsxs7(View7, { style: styles8.top, children: [
|
|
1417
|
+
/* @__PURE__ */ jsx10(Txt, { variant: "label", numberOfLines: 1, style: [styles8.flex, unread > 0 ? styles8.bold : null], children: name }),
|
|
1418
|
+
time ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: unread > 0 ? "accent" : "secondary", children: time }) : null
|
|
1292
1419
|
] }),
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__PURE__ */
|
|
1295
|
-
unread > 0 ? /* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ jsxs7(View7, { style: styles8.top, children: [
|
|
1421
|
+
/* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: typing ? "accent" : unread > 0 ? "text" : "secondary", numberOfLines: 1, style: styles8.flex, children: preview }),
|
|
1422
|
+
unread > 0 ? /* @__PURE__ */ jsx10(View7, { "aria-hidden": unreadLabel ? true : void 0, style: [styles8.count, { backgroundColor: theme.accent, borderRadius: radius3.full }], children: /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "onAccent", style: styles8.bold, children: unread > 99 ? "99+" : unread }) }) : null
|
|
1296
1423
|
] })
|
|
1297
1424
|
] }),
|
|
1298
|
-
said ? /* @__PURE__ */
|
|
1425
|
+
said ? /* @__PURE__ */ jsx10(Txt, { style: styles8.readOnly, children: said }) : null
|
|
1299
1426
|
]
|
|
1300
1427
|
}
|
|
1301
1428
|
);
|
|
@@ -1325,9 +1452,9 @@ var styles8 = StyleSheet8.create({
|
|
|
1325
1452
|
|
|
1326
1453
|
// src/native/checkbox.tsx
|
|
1327
1454
|
import * as React8 from "react";
|
|
1328
|
-
import { Pressable as Pressable5, StyleSheet as StyleSheet9, Text as Text4, View as
|
|
1329
|
-
import
|
|
1330
|
-
import { jsx as
|
|
1455
|
+
import { Pressable as Pressable5, StyleSheet as StyleSheet9, Text as Text4, View as View8 } from "react-native";
|
|
1456
|
+
import Svg5, { Path as Path3 } from "react-native-svg";
|
|
1457
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1331
1458
|
function Checkbox({ children, label, checked, defaultChecked = false, onCheckedChange, error, disabled, style }) {
|
|
1332
1459
|
const { theme, radius: radius3 } = useTheme();
|
|
1333
1460
|
const [own, setOwn] = React8.useState(defaultChecked);
|
|
@@ -1336,14 +1463,14 @@ function Checkbox({ children, label, checked, defaultChecked = false, onCheckedC
|
|
|
1336
1463
|
if (checked === void 0) setOwn(!on);
|
|
1337
1464
|
onCheckedChange?.(!on);
|
|
1338
1465
|
};
|
|
1339
|
-
const box = /* @__PURE__ */
|
|
1340
|
-
|
|
1466
|
+
const box = /* @__PURE__ */ jsx11(
|
|
1467
|
+
View8,
|
|
1341
1468
|
{
|
|
1342
1469
|
style: [
|
|
1343
1470
|
styles9.box,
|
|
1344
1471
|
{ borderRadius: radius3.xs + 2, borderColor: error ? theme.danger : on ? theme.accent : theme.borderStrong, backgroundColor: on ? theme.accent : theme.surface1 }
|
|
1345
1472
|
],
|
|
1346
|
-
children: on ? /* @__PURE__ */
|
|
1473
|
+
children: on ? /* @__PURE__ */ jsx11(Svg5, { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: theme.onAccent, strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx11(Path3, { d: "M20 6 9 17l-5-5" }) }) : null
|
|
1347
1474
|
}
|
|
1348
1475
|
);
|
|
1349
1476
|
const plain = children === void 0 || typeof children === "string";
|
|
@@ -1356,18 +1483,18 @@ function Checkbox({ children, label, checked, defaultChecked = false, onCheckedC
|
|
|
1356
1483
|
disabled,
|
|
1357
1484
|
onPress: toggle
|
|
1358
1485
|
};
|
|
1359
|
-
return /* @__PURE__ */
|
|
1360
|
-
plain ? /* @__PURE__ */
|
|
1486
|
+
return /* @__PURE__ */ jsxs8(View8, { style: [styles9.root, style], children: [
|
|
1487
|
+
plain ? /* @__PURE__ */ jsxs8(Pressable5, { ...a11y, hitSlop: 4, style: [styles9.row, disabled ? styles9.disabled : null], children: [
|
|
1361
1488
|
box,
|
|
1362
|
-
children !== void 0 ? /* @__PURE__ */
|
|
1489
|
+
children !== void 0 ? /* @__PURE__ */ jsx11(View8, { style: styles9.text, children: /* @__PURE__ */ jsx11(Text4, { style: [styles9.label, { color: theme.textPrimary }], children }) }) : null
|
|
1363
1490
|
] }) : (
|
|
1364
1491
|
// Words with links: the box alone is the control (a 44-pt target, named by `label`), the links stay links.
|
|
1365
|
-
/* @__PURE__ */
|
|
1366
|
-
/* @__PURE__ */
|
|
1367
|
-
/* @__PURE__ */
|
|
1492
|
+
/* @__PURE__ */ jsxs8(View8, { style: [styles9.row, disabled ? styles9.disabled : null], children: [
|
|
1493
|
+
/* @__PURE__ */ jsx11(Pressable5, { ...a11y, hitSlop: 11, style: styles9.target, children: box }),
|
|
1494
|
+
/* @__PURE__ */ jsx11(View8, { style: styles9.text, children })
|
|
1368
1495
|
] })
|
|
1369
1496
|
),
|
|
1370
|
-
error ? /* @__PURE__ */
|
|
1497
|
+
error ? /* @__PURE__ */ jsx11(Text4, { role: "alert", "aria-live": "polite", style: [styles9.error, { color: theme.dangerText }], children: error }) : null
|
|
1371
1498
|
] });
|
|
1372
1499
|
}
|
|
1373
1500
|
var styles9 = StyleSheet9.create({
|
|
@@ -1383,7 +1510,7 @@ var styles9 = StyleSheet9.create({
|
|
|
1383
1510
|
|
|
1384
1511
|
// src/native/chip.tsx
|
|
1385
1512
|
import * as React9 from "react";
|
|
1386
|
-
import { Pressable as Pressable6, ScrollView, StyleSheet as StyleSheet10, Text as Text5, View as
|
|
1513
|
+
import { Pressable as Pressable6, ScrollView, StyleSheet as StyleSheet10, Text as Text5, View as View9 } from "react-native";
|
|
1387
1514
|
|
|
1388
1515
|
// src/chip/recipe.ts
|
|
1389
1516
|
var chipRecipe = defineRecipe({
|
|
@@ -1399,12 +1526,12 @@ var chipRecipe = defineRecipe({
|
|
|
1399
1526
|
});
|
|
1400
1527
|
|
|
1401
1528
|
// src/native/chip.tsx
|
|
1402
|
-
import { Fragment as Fragment3, jsx as
|
|
1529
|
+
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1403
1530
|
var ChipGroupContext = React9.createContext(null);
|
|
1404
1531
|
var RECIPE3 = nativeRecipe(chipRecipe);
|
|
1405
1532
|
function Label({ children, color, fontSize }) {
|
|
1406
|
-
if (typeof children !== "string" && typeof children !== "number") return /* @__PURE__ */
|
|
1407
|
-
return /* @__PURE__ */
|
|
1533
|
+
if (typeof children !== "string" && typeof children !== "number") return /* @__PURE__ */ jsx12(Fragment3, { children });
|
|
1534
|
+
return /* @__PURE__ */ jsx12(Text5, { style: [styles10.label, { color, fontSize }], children });
|
|
1408
1535
|
}
|
|
1409
1536
|
function ChipBase(props) {
|
|
1410
1537
|
const group = React9.useContext(ChipGroupContext);
|
|
@@ -1424,9 +1551,9 @@ function ChipBase(props) {
|
|
|
1424
1551
|
const labelColor = (on2) => (on2 ? look3.on.text.color : look3.text.color) ?? theme.textPrimary;
|
|
1425
1552
|
if (props.removable) {
|
|
1426
1553
|
const { removable: _r2, removeLabel, onRemove, disabled: disabled2, size: _s2, style: style2, children: children2, ...rest2 } = props;
|
|
1427
|
-
return /* @__PURE__ */
|
|
1428
|
-
/* @__PURE__ */
|
|
1429
|
-
/* @__PURE__ */
|
|
1554
|
+
return /* @__PURE__ */ jsxs9(View9, { ...rest2, style: [styles10.base, frame(false, false), disabled2 ? styles10.disabled : null, style2], children: [
|
|
1555
|
+
/* @__PURE__ */ jsx12(Label, { color: labelColor(false), fontSize, children: children2 }),
|
|
1556
|
+
/* @__PURE__ */ jsx12(Pressable6, { role: "button", "aria-label": removeLabel, disabled: disabled2 ?? void 0, hitSlop: 10, onPress: onRemove, style: styles10.remove, children: /* @__PURE__ */ jsx12(Text5, { style: [styles10.cross, { color: theme.textSecondary }], children: "\xD7" }) })
|
|
1430
1557
|
] });
|
|
1431
1558
|
}
|
|
1432
1559
|
const { removable: _r, value, selected, defaultSelected: _d, onSelectedChange, disabled: ownDisabled, size: _s, style, children, ...rest } = props;
|
|
@@ -1439,7 +1566,7 @@ function ChipBase(props) {
|
|
|
1439
1566
|
onSelectedChange?.(!on);
|
|
1440
1567
|
};
|
|
1441
1568
|
const single = group?.type === "single";
|
|
1442
|
-
return /* @__PURE__ */
|
|
1569
|
+
return /* @__PURE__ */ jsx12(
|
|
1443
1570
|
Pressable6,
|
|
1444
1571
|
{
|
|
1445
1572
|
role: single ? "radio" : "checkbox",
|
|
@@ -1449,7 +1576,7 @@ function ChipBase(props) {
|
|
|
1449
1576
|
disabled,
|
|
1450
1577
|
onPress: press,
|
|
1451
1578
|
style: ({ pressed }) => [styles10.base, frame(on, pressed), disabled ? styles10.disabled : null, style],
|
|
1452
|
-
children: /* @__PURE__ */
|
|
1579
|
+
children: /* @__PURE__ */ jsx12(Label, { color: labelColor(on), fontSize, children })
|
|
1453
1580
|
}
|
|
1454
1581
|
);
|
|
1455
1582
|
}
|
|
@@ -1473,7 +1600,7 @@ function ChipGroup(props) {
|
|
|
1473
1600
|
};
|
|
1474
1601
|
}, [current, props.type, props.value, props.onValueChange, size, disabled]);
|
|
1475
1602
|
const a11y = { role: props.type === "single" ? "radiogroup" : "group", "aria-label": label };
|
|
1476
|
-
return /* @__PURE__ */
|
|
1603
|
+
return /* @__PURE__ */ jsx12(ChipGroupContext.Provider, { value: context, children: scrollable ? /* @__PURE__ */ jsx12(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, ...a11y, style, contentContainerStyle: styles10.row, children }) : /* @__PURE__ */ jsx12(View9, { ...a11y, style: [styles10.row, styles10.wrap, style], children }) });
|
|
1477
1604
|
}
|
|
1478
1605
|
var Chip = Object.assign(ChipBase, { Group: ChipGroup });
|
|
1479
1606
|
var styles10 = StyleSheet10.create({
|
|
@@ -1488,24 +1615,24 @@ var styles10 = StyleSheet10.create({
|
|
|
1488
1615
|
|
|
1489
1616
|
// src/native/combobox.tsx
|
|
1490
1617
|
import * as React11 from "react";
|
|
1491
|
-
import { Pressable as Pressable8, ScrollView as ScrollView2, StyleSheet as StyleSheet12, Text as Text7, TextInput as TextInput2, View as
|
|
1492
|
-
import
|
|
1618
|
+
import { Pressable as Pressable8, ScrollView as ScrollView2, StyleSheet as StyleSheet12, Text as Text7, TextInput as TextInput2, View as View11 } from "react-native";
|
|
1619
|
+
import Svg6, { Path as Path4 } from "react-native-svg";
|
|
1493
1620
|
|
|
1494
1621
|
// src/native/dialog.tsx
|
|
1495
1622
|
import * as React10 from "react";
|
|
1496
|
-
import { Animated as
|
|
1497
|
-
import { jsx as
|
|
1623
|
+
import { Animated as Animated4, Modal as Modal2, Pressable as Pressable7, StyleSheet as StyleSheet11, Text as Text6, View as View10 } from "react-native";
|
|
1624
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1498
1625
|
function Sheet({ open, onOpenChange, title, closeLabel = "Close", children, style }) {
|
|
1499
1626
|
const { theme, radius: radius3, motion: motion3 } = useTheme();
|
|
1500
|
-
const [rise] = React10.useState(() => new
|
|
1627
|
+
const [rise] = React10.useState(() => new Animated4.Value(0));
|
|
1501
1628
|
React10.useEffect(() => {
|
|
1502
|
-
if (open)
|
|
1629
|
+
if (open) Animated4.timing(rise, { toValue: 1, duration: motion3.duration.base * 1.6, useNativeDriver: true }).start();
|
|
1503
1630
|
else rise.setValue(0);
|
|
1504
1631
|
}, [open, rise, motion3.duration.base]);
|
|
1505
|
-
return /* @__PURE__ */
|
|
1506
|
-
/* @__PURE__ */
|
|
1507
|
-
/* @__PURE__ */
|
|
1508
|
-
|
|
1632
|
+
return /* @__PURE__ */ jsx13(Modal2, { transparent: true, visible: open, animationType: "none", onRequestClose: () => onOpenChange(false), statusBarTranslucent: true, children: /* @__PURE__ */ jsxs10(View10, { style: styles11.backdrop, children: [
|
|
1633
|
+
/* @__PURE__ */ jsx13(Animated4.View, { style: [StyleSheet11.absoluteFill, { opacity: rise }], children: /* @__PURE__ */ jsx13(Pressable7, { role: "button", "aria-label": closeLabel, onPress: () => onOpenChange(false), style: [StyleSheet11.absoluteFill, { backgroundColor: theme.scrim }] }) }),
|
|
1634
|
+
/* @__PURE__ */ jsxs10(
|
|
1635
|
+
Animated4.View,
|
|
1509
1636
|
{
|
|
1510
1637
|
role: "dialog",
|
|
1511
1638
|
"aria-label": title,
|
|
@@ -1523,8 +1650,8 @@ function Sheet({ open, onOpenChange, title, closeLabel = "Close", children, styl
|
|
|
1523
1650
|
style
|
|
1524
1651
|
],
|
|
1525
1652
|
children: [
|
|
1526
|
-
/* @__PURE__ */
|
|
1527
|
-
title ? /* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ jsx13(View10, { "aria-hidden": true, style: [styles11.grip, { backgroundColor: theme.borderStrong }] }),
|
|
1654
|
+
title ? /* @__PURE__ */ jsx13(Text6, { role: "heading", style: [styles11.title, { color: theme.textPrimary }], children: title }) : null,
|
|
1528
1655
|
children
|
|
1529
1656
|
]
|
|
1530
1657
|
}
|
|
@@ -1539,20 +1666,20 @@ var styles11 = StyleSheet11.create({
|
|
|
1539
1666
|
});
|
|
1540
1667
|
|
|
1541
1668
|
// src/native/combobox.tsx
|
|
1542
|
-
import { Fragment as Fragment4, jsx as
|
|
1669
|
+
import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1543
1670
|
function Chevron({ color }) {
|
|
1544
|
-
return /* @__PURE__ */
|
|
1671
|
+
return /* @__PURE__ */ jsx14(Svg6, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx14(Path4, { d: "m6 9 6 6 6-6" }) });
|
|
1545
1672
|
}
|
|
1546
1673
|
function Tick({ color }) {
|
|
1547
|
-
return /* @__PURE__ */
|
|
1674
|
+
return /* @__PURE__ */ jsx14(Svg6, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx14(Path4, { d: "M20 6 9 17l-5-5" }) });
|
|
1548
1675
|
}
|
|
1549
1676
|
function Trigger({ shared, text, onPress, open }) {
|
|
1550
1677
|
const { theme, radius: radius3 } = useTheme();
|
|
1551
1678
|
const { label, placeholder, hint, error, disabled } = shared;
|
|
1552
1679
|
const caption = error ?? hint;
|
|
1553
|
-
return /* @__PURE__ */
|
|
1554
|
-
/* @__PURE__ */
|
|
1555
|
-
/* @__PURE__ */
|
|
1680
|
+
return /* @__PURE__ */ jsxs11(View11, { style: [styles12.field, shared.style], children: [
|
|
1681
|
+
/* @__PURE__ */ jsx14(Text7, { style: [styles12.label, { color: theme.textSecondary }], children: label }),
|
|
1682
|
+
/* @__PURE__ */ jsxs11(
|
|
1556
1683
|
Pressable8,
|
|
1557
1684
|
{
|
|
1558
1685
|
role: "button",
|
|
@@ -1565,19 +1692,19 @@ function Trigger({ shared, text, onPress, open }) {
|
|
|
1565
1692
|
onPress,
|
|
1566
1693
|
style: [styles12.trigger, { borderRadius: radius3.md, backgroundColor: theme.surface2, borderColor: error ? theme.danger : open ? theme.accent : theme.borderDefault }, disabled ? styles12.disabled : null],
|
|
1567
1694
|
children: [
|
|
1568
|
-
/* @__PURE__ */
|
|
1569
|
-
/* @__PURE__ */
|
|
1695
|
+
/* @__PURE__ */ jsx14(Text7, { numberOfLines: 1, style: [styles12.triggerText, { color: text ? theme.textPrimary : theme.textSecondary }], children: text ?? placeholder ?? "" }),
|
|
1696
|
+
/* @__PURE__ */ jsx14(Chevron, { color: theme.textSecondary })
|
|
1570
1697
|
]
|
|
1571
1698
|
}
|
|
1572
1699
|
),
|
|
1573
|
-
caption ? /* @__PURE__ */
|
|
1700
|
+
caption ? /* @__PURE__ */ jsx14(Text7, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles12.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
|
|
1574
1701
|
] });
|
|
1575
1702
|
}
|
|
1576
1703
|
function Options({ options, isChosen, onPick, multiple }) {
|
|
1577
1704
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
1578
|
-
return /* @__PURE__ */
|
|
1705
|
+
return /* @__PURE__ */ jsx14(ScrollView2, { role: multiple ? "list" : "radiogroup", keyboardShouldPersistTaps: "handled", style: styles12.options, children: options.map((o) => {
|
|
1579
1706
|
const chosen = isChosen(o.value);
|
|
1580
|
-
return /* @__PURE__ */
|
|
1707
|
+
return /* @__PURE__ */ jsxs11(
|
|
1581
1708
|
Pressable8,
|
|
1582
1709
|
{
|
|
1583
1710
|
role: multiple ? "checkbox" : "radio",
|
|
@@ -1591,11 +1718,11 @@ function Options({ options, isChosen, onPick, multiple }) {
|
|
|
1591
1718
|
},
|
|
1592
1719
|
style: ({ pressed }) => [styles12.option, { borderRadius: radius3.md, backgroundColor: chosen ? theme.accentSoft : pressed ? theme.surface3 : "transparent" }, o.disabled ? styles12.disabled : null],
|
|
1593
1720
|
children: [
|
|
1594
|
-
/* @__PURE__ */
|
|
1595
|
-
/* @__PURE__ */
|
|
1596
|
-
o.description ? /* @__PURE__ */
|
|
1721
|
+
/* @__PURE__ */ jsxs11(View11, { style: styles12.optionText, children: [
|
|
1722
|
+
/* @__PURE__ */ jsx14(Text7, { style: [styles12.optionLabel, { color: theme.textPrimary, fontWeight: chosen ? "700" : "500" }], children: o.label }),
|
|
1723
|
+
o.description ? /* @__PURE__ */ jsx14(Text7, { style: [styles12.caption, { color: theme.textSecondary }], children: o.description }) : null
|
|
1597
1724
|
] }),
|
|
1598
|
-
chosen ? /* @__PURE__ */
|
|
1725
|
+
chosen ? /* @__PURE__ */ jsx14(Tick, { color: theme.accentText }) : null
|
|
1599
1726
|
]
|
|
1600
1727
|
},
|
|
1601
1728
|
o.value
|
|
@@ -1610,9 +1737,9 @@ function Select({ options, value: valueProp, defaultValue = null, onValueChange,
|
|
|
1610
1737
|
setOpen(false);
|
|
1611
1738
|
shared.onBlur?.();
|
|
1612
1739
|
};
|
|
1613
|
-
return /* @__PURE__ */
|
|
1614
|
-
/* @__PURE__ */
|
|
1615
|
-
/* @__PURE__ */
|
|
1740
|
+
return /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
1741
|
+
/* @__PURE__ */ jsx14(Trigger, { shared, text: options.find((o) => o.value === value)?.label ?? null, open, onPress: () => setOpen(true) }),
|
|
1742
|
+
/* @__PURE__ */ jsx14(Sheet, { open, onOpenChange: (o) => o ? setOpen(true) : close(), title: sheetTitle ?? shared.label, children: /* @__PURE__ */ jsx14(
|
|
1616
1743
|
Options,
|
|
1617
1744
|
{
|
|
1618
1745
|
options,
|
|
@@ -1660,10 +1787,10 @@ function Combobox({ options = [], onSearch, multiple, value, onValueChange, labe
|
|
|
1660
1787
|
setQuery("");
|
|
1661
1788
|
shared.onBlur?.();
|
|
1662
1789
|
};
|
|
1663
|
-
return /* @__PURE__ */
|
|
1664
|
-
/* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1790
|
+
return /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
1791
|
+
/* @__PURE__ */ jsx14(Trigger, { shared, text: chosen.length ? chosen.map(labelOf).join(", ") : null, open, onPress: () => setOpen(true) }),
|
|
1792
|
+
/* @__PURE__ */ jsxs11(Sheet, { open, onOpenChange: (o) => o ? setOpen(true) : close(), title: shared.label, children: [
|
|
1793
|
+
/* @__PURE__ */ jsx14(
|
|
1667
1794
|
TextInput2,
|
|
1668
1795
|
{
|
|
1669
1796
|
"aria-label": labels.search,
|
|
@@ -1677,9 +1804,9 @@ function Combobox({ options = [], onSearch, multiple, value, onValueChange, labe
|
|
|
1677
1804
|
style: [styles12.search, { borderRadius: radius3.md, backgroundColor: theme.surface2, borderColor: theme.borderDefault, color: theme.textPrimary }]
|
|
1678
1805
|
}
|
|
1679
1806
|
),
|
|
1680
|
-
loading ? /* @__PURE__ */
|
|
1681
|
-
!loading && list.length === 0 ? /* @__PURE__ */
|
|
1682
|
-
/* @__PURE__ */
|
|
1807
|
+
loading ? /* @__PURE__ */ jsx14(Text7, { style: [styles12.caption, { color: theme.textSecondary }], children: labels.loading }) : null,
|
|
1808
|
+
!loading && list.length === 0 ? /* @__PURE__ */ jsx14(Text7, { style: [styles12.caption, { color: theme.textSecondary }], children: labels.empty }) : null,
|
|
1809
|
+
/* @__PURE__ */ jsx14(
|
|
1683
1810
|
Options,
|
|
1684
1811
|
{
|
|
1685
1812
|
options: list,
|
|
@@ -1695,7 +1822,7 @@ function Combobox({ options = [], onSearch, multiple, value, onValueChange, labe
|
|
|
1695
1822
|
}
|
|
1696
1823
|
}
|
|
1697
1824
|
),
|
|
1698
|
-
multiple ? /* @__PURE__ */
|
|
1825
|
+
multiple ? /* @__PURE__ */ jsx14(Pressable8, { role: "button", onPress: close, style: [styles12.done, { borderRadius: radius3.md, backgroundColor: theme.accent }], children: /* @__PURE__ */ jsx14(Text7, { style: [styles12.doneText, { color: theme.onAccent }], children: labels.done }) }) : null
|
|
1699
1826
|
] })
|
|
1700
1827
|
] });
|
|
1701
1828
|
}
|
|
@@ -1717,8 +1844,8 @@ var styles12 = StyleSheet12.create({
|
|
|
1717
1844
|
|
|
1718
1845
|
// src/native/countdown.tsx
|
|
1719
1846
|
import * as React12 from "react";
|
|
1720
|
-
import { Animated as
|
|
1721
|
-
import { jsx as
|
|
1847
|
+
import { Animated as Animated5, StyleSheet as StyleSheet13, Text as Text8 } from "react-native";
|
|
1848
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1722
1849
|
var FONT = { sm: 14, md: 20, lg: 32 };
|
|
1723
1850
|
function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, showLabel = false, style }) {
|
|
1724
1851
|
const { theme, fonts } = useTheme();
|
|
@@ -1726,13 +1853,13 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
|
|
|
1726
1853
|
const ms = useCountdown(target, skewMs);
|
|
1727
1854
|
const urgent = ms > 0 && ms < urgentBelowMs;
|
|
1728
1855
|
const parts = countdownParts(ms, units);
|
|
1729
|
-
const [opacity] = React12.useState(() => new
|
|
1856
|
+
const [opacity] = React12.useState(() => new Animated5.Value(1));
|
|
1730
1857
|
React12.useEffect(() => {
|
|
1731
1858
|
if (!urgent || reduce) return;
|
|
1732
|
-
const loop =
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1859
|
+
const loop = Animated5.loop(
|
|
1860
|
+
Animated5.sequence([
|
|
1861
|
+
Animated5.timing(opacity, { toValue: 0.4, duration: 500, useNativeDriver: true }),
|
|
1862
|
+
Animated5.timing(opacity, { toValue: 1, duration: 500, useNativeDriver: true })
|
|
1736
1863
|
])
|
|
1737
1864
|
);
|
|
1738
1865
|
loop.start();
|
|
@@ -1743,18 +1870,18 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
|
|
|
1743
1870
|
}, [urgent, reduce, opacity]);
|
|
1744
1871
|
const color = urgent ? theme.dangerText : theme.textPrimary;
|
|
1745
1872
|
const text = parts.map(([value, unit2]) => `${String(value).padStart(2, "0")}${unit2}`).join(" ");
|
|
1746
|
-
return /* @__PURE__ */
|
|
1747
|
-
|
|
1873
|
+
return /* @__PURE__ */ jsxs12(
|
|
1874
|
+
Animated5.View,
|
|
1748
1875
|
{
|
|
1749
1876
|
accessible: true,
|
|
1750
1877
|
role: "timer",
|
|
1751
1878
|
"aria-label": `${label} ${text}`,
|
|
1752
1879
|
style: [styles13.root, style],
|
|
1753
1880
|
children: [
|
|
1754
|
-
showLabel ? /* @__PURE__ */
|
|
1755
|
-
parts.map(([value, unit2], i) => /* @__PURE__ */
|
|
1756
|
-
/* @__PURE__ */
|
|
1757
|
-
/* @__PURE__ */
|
|
1881
|
+
showLabel ? /* @__PURE__ */ jsx15(Text8, { style: [styles13.label, { color: theme.textSecondary, fontSize: Math.max(11, Math.round(FONT[size] * 0.6)) }], children: label }) : null,
|
|
1882
|
+
parts.map(([value, unit2], i) => /* @__PURE__ */ jsxs12(Animated5.View, { style: [styles13.segment, urgent && i === parts.length - 1 ? { opacity } : null], children: [
|
|
1883
|
+
/* @__PURE__ */ jsx15(Text8, { style: [styles13.value, { color, fontSize: FONT[size] }, fonts.display ? { fontFamily: fonts.display } : null], children: String(value).padStart(2, "0") }),
|
|
1884
|
+
/* @__PURE__ */ jsx15(Text8, { style: [styles13.unit, { color: theme.textSecondary, fontSize: Math.round(FONT[size] / 2) }], children: unit2 })
|
|
1758
1885
|
] }, unit2))
|
|
1759
1886
|
]
|
|
1760
1887
|
}
|
|
@@ -1770,8 +1897,8 @@ var styles13 = StyleSheet13.create({
|
|
|
1770
1897
|
|
|
1771
1898
|
// src/native/date-picker.tsx
|
|
1772
1899
|
import * as React13 from "react";
|
|
1773
|
-
import { Platform, StyleSheet as StyleSheet14, Text as Text9, TextInput as TextInput3, View as
|
|
1774
|
-
import { jsx as
|
|
1900
|
+
import { Platform, StyleSheet as StyleSheet14, Text as Text9, TextInput as TextInput3, View as View12 } from "react-native";
|
|
1901
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1775
1902
|
var LENGTH = DATE_PART_LENGTH;
|
|
1776
1903
|
var dateFieldLabels = { day: "Day", month: "Month", year: "Year" };
|
|
1777
1904
|
function DateField({ label, hint, error, value, defaultValue, onValueChange, onBlur, locale = "en-US", labels: given, autoComplete, disabled, inputRef, onSubmitEditing, returnKeyType = "done", style }) {
|
|
@@ -1791,11 +1918,11 @@ function DateField({ label, hint, error, value, defaultValue, onValueChange, onB
|
|
|
1791
1918
|
const following = order[order.indexOf(part) + 1];
|
|
1792
1919
|
if (digits.length === LENGTH[part] && following) refs[following].current?.focus();
|
|
1793
1920
|
};
|
|
1794
|
-
return /* @__PURE__ */
|
|
1795
|
-
/* @__PURE__ */
|
|
1796
|
-
/* @__PURE__ */
|
|
1797
|
-
/* @__PURE__ */
|
|
1798
|
-
/* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ jsxs13(View12, { role: "group", "aria-label": label, style: [styles14.root, disabled ? styles14.disabled : null, style], children: [
|
|
1922
|
+
/* @__PURE__ */ jsx16(Text9, { style: [styles14.label, { color: theme.textSecondary }], children: label }),
|
|
1923
|
+
/* @__PURE__ */ jsx16(View12, { style: styles14.row, children: order.map((part, i) => /* @__PURE__ */ jsxs13(View12, { style: part === "year" ? styles14.yearBox : styles14.box, children: [
|
|
1924
|
+
/* @__PURE__ */ jsx16(Text9, { style: [styles14.part, { color: theme.textSecondary }], children: labels[part] }),
|
|
1925
|
+
/* @__PURE__ */ jsx16(
|
|
1799
1926
|
TextInput3,
|
|
1800
1927
|
{
|
|
1801
1928
|
ref: (node) => {
|
|
@@ -1833,7 +1960,7 @@ function DateField({ label, hint, error, value, defaultValue, onValueChange, onB
|
|
|
1833
1960
|
}
|
|
1834
1961
|
)
|
|
1835
1962
|
] }, part)) }),
|
|
1836
|
-
caption ? /* @__PURE__ */
|
|
1963
|
+
caption ? /* @__PURE__ */ jsx16(Text9, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles14.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
|
|
1837
1964
|
] });
|
|
1838
1965
|
}
|
|
1839
1966
|
var styles14 = StyleSheet14.create({
|
|
@@ -1850,25 +1977,25 @@ var styles14 = StyleSheet14.create({
|
|
|
1850
1977
|
|
|
1851
1978
|
// src/native/date-time.tsx
|
|
1852
1979
|
import * as React15 from "react";
|
|
1853
|
-
import { Pressable as Pressable10, ScrollView as ScrollView4, StyleSheet as StyleSheet16, Text as Text11, View as
|
|
1854
|
-
import
|
|
1980
|
+
import { Pressable as Pressable10, ScrollView as ScrollView4, StyleSheet as StyleSheet16, Text as Text11, View as View14 } from "react-native";
|
|
1981
|
+
import Svg7, { Path as Path5 } from "react-native-svg";
|
|
1855
1982
|
|
|
1856
1983
|
// src/native/wheel.tsx
|
|
1857
1984
|
import * as React14 from "react";
|
|
1858
|
-
import { Pressable as Pressable9, ScrollView as ScrollView3, StyleSheet as StyleSheet15, Text as Text10, View as
|
|
1859
|
-
import { jsx as
|
|
1985
|
+
import { Pressable as Pressable9, ScrollView as ScrollView3, StyleSheet as StyleSheet15, Text as Text10, View as View13 } from "react-native";
|
|
1986
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1860
1987
|
var ITEM = 44;
|
|
1861
1988
|
var FrameContext = React14.createContext({ visible: 5, unset: false });
|
|
1862
1989
|
function WheelPicker({ label, children, visible = 5, invalid, unset = false, style }) {
|
|
1863
1990
|
const { theme, radius: radius3 } = useTheme();
|
|
1864
|
-
return /* @__PURE__ */
|
|
1865
|
-
|
|
1991
|
+
return /* @__PURE__ */ jsx17(FrameContext.Provider, { value: React14.useMemo(() => ({ visible, unset }), [visible, unset]), children: /* @__PURE__ */ jsxs14(
|
|
1992
|
+
View13,
|
|
1866
1993
|
{
|
|
1867
1994
|
role: "group",
|
|
1868
1995
|
"aria-label": label,
|
|
1869
1996
|
style: [styles15.root, { height: ITEM * visible, borderRadius: radius3.xl, backgroundColor: theme.surface1, borderColor: invalid ? theme.danger : theme.borderDefault }, style],
|
|
1870
1997
|
children: [
|
|
1871
|
-
/* @__PURE__ */
|
|
1998
|
+
/* @__PURE__ */ jsx17(View13, { pointerEvents: "none", style: [styles15.band, { top: ITEM * (visible - 1) / 2, height: ITEM, borderRadius: radius3.lg, backgroundColor: theme.surface3, borderColor: theme.borderSubtle }] }),
|
|
1872
1999
|
children
|
|
1873
2000
|
]
|
|
1874
2001
|
}
|
|
@@ -1876,7 +2003,7 @@ function WheelPicker({ label, children, visible = 5, invalid, unset = false, sty
|
|
|
1876
2003
|
}
|
|
1877
2004
|
function WheelDivider({ children }) {
|
|
1878
2005
|
const { theme } = useTheme();
|
|
1879
|
-
return /* @__PURE__ */
|
|
2006
|
+
return /* @__PURE__ */ jsx17(Text10, { "aria-hidden": true, style: [styles15.divider, { color: theme.textSecondary }], children });
|
|
1880
2007
|
}
|
|
1881
2008
|
var nearestEnabled = (options, index) => {
|
|
1882
2009
|
for (let d = 0; d < options.length; d++) {
|
|
@@ -1926,8 +2053,8 @@ function Wheel({ label, options, value: valueProp, defaultValue, onValueChange,
|
|
|
1926
2053
|
if (options[i]) commit(i);
|
|
1927
2054
|
};
|
|
1928
2055
|
const pad = (visible - 1) / 2 * ITEM;
|
|
1929
|
-
return /* @__PURE__ */
|
|
1930
|
-
|
|
2056
|
+
return /* @__PURE__ */ jsx17(
|
|
2057
|
+
View13,
|
|
1931
2058
|
{
|
|
1932
2059
|
accessible: true,
|
|
1933
2060
|
role: "spinbutton",
|
|
@@ -1940,7 +2067,7 @@ function Wheel({ label, options, value: valueProp, defaultValue, onValueChange,
|
|
|
1940
2067
|
accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
|
|
1941
2068
|
onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
|
|
1942
2069
|
style: [styles15.column, disabled ? styles15.disabled : null, style],
|
|
1943
|
-
children: /* @__PURE__ */
|
|
2070
|
+
children: /* @__PURE__ */ jsx17(
|
|
1944
2071
|
ScrollView3,
|
|
1945
2072
|
{
|
|
1946
2073
|
ref: scroller,
|
|
@@ -1960,7 +2087,7 @@ function Wheel({ label, options, value: valueProp, defaultValue, onValueChange,
|
|
|
1960
2087
|
},
|
|
1961
2088
|
children: options.map((o, i) => {
|
|
1962
2089
|
const distance = Math.abs(i - shown);
|
|
1963
|
-
return /* @__PURE__ */
|
|
2090
|
+
return /* @__PURE__ */ jsx17(Pressable9, { focusable: false, tabIndex: -1, disabled: disabled || o.disabled, onPress: () => commit(i), style: [styles15.item, { height: ITEM }], children: /* @__PURE__ */ jsx17(
|
|
1964
2091
|
Text10,
|
|
1965
2092
|
{
|
|
1966
2093
|
numberOfLines: 1,
|
|
@@ -1994,18 +2121,18 @@ var styles15 = StyleSheet15.create({
|
|
|
1994
2121
|
});
|
|
1995
2122
|
|
|
1996
2123
|
// src/native/date-time.tsx
|
|
1997
|
-
import { jsx as
|
|
2124
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1998
2125
|
var longDate = (locale, iso) => new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(toLocalDate(iso));
|
|
1999
2126
|
var useOwn = (value, initial) => {
|
|
2000
2127
|
const [own, setOwn] = React15.useState(initial);
|
|
2001
2128
|
return [value !== void 0 ? value : own, (next) => value === void 0 && setOwn(next)];
|
|
2002
2129
|
};
|
|
2003
2130
|
function Chevron2({ direction, color }) {
|
|
2004
|
-
return /* @__PURE__ */
|
|
2131
|
+
return /* @__PURE__ */ jsx18(Svg7, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx18(Path5, { d: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" }) });
|
|
2005
2132
|
}
|
|
2006
2133
|
function NavButton({ label, direction, disabled, onPress }) {
|
|
2007
2134
|
const { theme, radius: radius3 } = useTheme();
|
|
2008
|
-
return /* @__PURE__ */
|
|
2135
|
+
return /* @__PURE__ */ jsx18(
|
|
2009
2136
|
Pressable10,
|
|
2010
2137
|
{
|
|
2011
2138
|
role: "button",
|
|
@@ -2015,12 +2142,12 @@ function NavButton({ label, direction, disabled, onPress }) {
|
|
|
2015
2142
|
hitSlop: 6,
|
|
2016
2143
|
onPress,
|
|
2017
2144
|
style: ({ pressed }) => [styles16.nav, { borderRadius: radius3.md, backgroundColor: pressed ? theme.surface3 : theme.surface2, borderColor: theme.borderSubtle }, disabled ? styles16.disabled : null],
|
|
2018
|
-
children: /* @__PURE__ */
|
|
2145
|
+
children: /* @__PURE__ */ jsx18(Chevron2, { direction, color: theme.textSecondary })
|
|
2019
2146
|
}
|
|
2020
2147
|
);
|
|
2021
2148
|
}
|
|
2022
2149
|
function Node({ color, style }) {
|
|
2023
|
-
return /* @__PURE__ */
|
|
2150
|
+
return /* @__PURE__ */ jsx18(View14, { "aria-hidden": true, style: [styles16.node, { backgroundColor: color }, style] });
|
|
2024
2151
|
}
|
|
2025
2152
|
var calendarLabels = { previousMonth: "Previous month", nextMonth: "Next month" };
|
|
2026
2153
|
function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDateDisabled, weekStartsOn, today: todayProp, labels: given, style }) {
|
|
@@ -2034,20 +2161,20 @@ function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDa
|
|
|
2034
2161
|
const title = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(toLocalDate(month));
|
|
2035
2162
|
const [lo, hi] = range?.end ? range.start <= range.end ? [range.start, range.end] : [range.end, range.start] : [null, null];
|
|
2036
2163
|
const off = (iso) => Boolean(min && iso < min || max && iso > max || isDateDisabled?.(iso));
|
|
2037
|
-
return /* @__PURE__ */
|
|
2038
|
-
/* @__PURE__ */
|
|
2039
|
-
/* @__PURE__ */
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2164
|
+
return /* @__PURE__ */ jsxs15(View14, { style: [styles16.calendar, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius3.xl }, style], children: [
|
|
2165
|
+
/* @__PURE__ */ jsxs15(View14, { style: styles16.header, children: [
|
|
2166
|
+
/* @__PURE__ */ jsx18(NavButton, { label: labels.previousMonth, direction: "left", disabled: Boolean(min && addDays(month, -1) < min), onPress: () => setMonth(addMonths(month, -1)) }),
|
|
2167
|
+
/* @__PURE__ */ jsx18(Text11, { role: "heading", "aria-live": "polite", style: [styles16.title, { color: theme.textPrimary }], children: title }),
|
|
2168
|
+
/* @__PURE__ */ jsx18(NavButton, { label: labels.nextMonth, direction: "right", disabled: Boolean(max && addMonths(month, 1) > max), onPress: () => setMonth(addMonths(month, 1)) })
|
|
2042
2169
|
] }),
|
|
2043
|
-
/* @__PURE__ */
|
|
2044
|
-
/* @__PURE__ */
|
|
2170
|
+
/* @__PURE__ */ jsx18(View14, { style: styles16.week, "aria-hidden": true, children: weeks[0].map((iso) => /* @__PURE__ */ jsx18(Text11, { style: [styles16.weekday, { color: theme.textSecondary }], children: weekday.format(toLocalDate(iso)) }, iso)) }),
|
|
2171
|
+
/* @__PURE__ */ jsx18(View14, { role: "radiogroup", "aria-label": title, children: weeks.map((week) => /* @__PURE__ */ jsx18(View14, { style: styles16.week, children: week.map((iso) => {
|
|
2045
2172
|
const outside = iso.slice(0, 7) !== month.slice(0, 7);
|
|
2046
2173
|
const selected = iso === value || Boolean(range && (iso === range.start || iso === range.end));
|
|
2047
2174
|
const disabled = off(iso);
|
|
2048
2175
|
const band = lo && hi && lo !== hi && iso >= lo && iso <= hi;
|
|
2049
|
-
return /* @__PURE__ */
|
|
2050
|
-
|
|
2176
|
+
return /* @__PURE__ */ jsx18(
|
|
2177
|
+
View14,
|
|
2051
2178
|
{
|
|
2052
2179
|
style: [
|
|
2053
2180
|
styles16.cell,
|
|
@@ -2055,7 +2182,7 @@ function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDa
|
|
|
2055
2182
|
band && iso === lo ? { borderTopLeftRadius: radius3.lg, borderBottomLeftRadius: radius3.lg } : null,
|
|
2056
2183
|
band && iso === hi ? { borderTopRightRadius: radius3.lg, borderBottomRightRadius: radius3.lg } : null
|
|
2057
2184
|
],
|
|
2058
|
-
children: /* @__PURE__ */
|
|
2185
|
+
children: /* @__PURE__ */ jsxs15(
|
|
2059
2186
|
Pressable10,
|
|
2060
2187
|
{
|
|
2061
2188
|
role: "radio",
|
|
@@ -2074,7 +2201,7 @@ function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDa
|
|
|
2074
2201
|
selected ? { backgroundColor: theme.accent } : pressed ? { backgroundColor: theme.surface3 } : null
|
|
2075
2202
|
],
|
|
2076
2203
|
children: [
|
|
2077
|
-
/* @__PURE__ */
|
|
2204
|
+
/* @__PURE__ */ jsx18(
|
|
2078
2205
|
Text11,
|
|
2079
2206
|
{
|
|
2080
2207
|
style: [
|
|
@@ -2088,7 +2215,7 @@ function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDa
|
|
|
2088
2215
|
children: Number(iso.slice(8))
|
|
2089
2216
|
}
|
|
2090
2217
|
),
|
|
2091
|
-
iso === today ? /* @__PURE__ */
|
|
2218
|
+
iso === today ? /* @__PURE__ */ jsx18(Node, { color: selected ? theme.onAccent : theme.accent, style: styles16.todayNode }) : null
|
|
2092
2219
|
]
|
|
2093
2220
|
}
|
|
2094
2221
|
)
|
|
@@ -2103,17 +2230,17 @@ function MonthPicker({ locale, value, onValueChange, min, max, labels, style })
|
|
|
2103
2230
|
const [year, setYear] = React15.useState(Number((value ?? todayIso()).slice(0, 4)));
|
|
2104
2231
|
const names = monthNames(locale, "short").map((n) => n.replace(/\.$/, ""));
|
|
2105
2232
|
const long = monthNames(locale, "long");
|
|
2106
|
-
return /* @__PURE__ */
|
|
2107
|
-
/* @__PURE__ */
|
|
2108
|
-
/* @__PURE__ */
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
/* @__PURE__ */
|
|
2233
|
+
return /* @__PURE__ */ jsxs15(View14, { style: [styles16.calendar, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius3.xl }, style], children: [
|
|
2234
|
+
/* @__PURE__ */ jsxs15(View14, { style: styles16.header, children: [
|
|
2235
|
+
/* @__PURE__ */ jsx18(NavButton, { label: labels?.previousYear ?? "Previous year", direction: "left", disabled: Boolean(min && year - 1 < Number(min.slice(0, 4))), onPress: () => setYear(year - 1) }),
|
|
2236
|
+
/* @__PURE__ */ jsx18(Text11, { role: "heading", "aria-live": "polite", style: [styles16.title, { color: theme.textPrimary }], children: year }),
|
|
2237
|
+
/* @__PURE__ */ jsx18(NavButton, { label: labels?.nextYear ?? "Next year", direction: "right", disabled: Boolean(max && year + 1 > Number(max.slice(0, 4))), onPress: () => setYear(year + 1) })
|
|
2111
2238
|
] }),
|
|
2112
|
-
/* @__PURE__ */
|
|
2239
|
+
/* @__PURE__ */ jsx18(View14, { role: "radiogroup", "aria-label": String(year), style: styles16.months, children: names.map((name, i) => {
|
|
2113
2240
|
const id = `${year}-${String(i + 1).padStart(2, "0")}`;
|
|
2114
2241
|
const selected = id === value;
|
|
2115
2242
|
const disabled = Boolean(min && id < min || max && id > max);
|
|
2116
|
-
return /* @__PURE__ */
|
|
2243
|
+
return /* @__PURE__ */ jsx18(
|
|
2117
2244
|
Pressable10,
|
|
2118
2245
|
{
|
|
2119
2246
|
role: "radio",
|
|
@@ -2126,7 +2253,7 @@ function MonthPicker({ locale, value, onValueChange, min, max, labels, style })
|
|
|
2126
2253
|
onValueChange?.(id);
|
|
2127
2254
|
},
|
|
2128
2255
|
style: ({ pressed }) => [styles16.month, { borderRadius: radius3.lg, backgroundColor: selected ? theme.accent : pressed ? theme.surface3 : "transparent" }, disabled ? styles16.disabled : null],
|
|
2129
|
-
children: /* @__PURE__ */
|
|
2256
|
+
children: /* @__PURE__ */ jsx18(Text11, { style: [styles16.monthText, { color: selected ? theme.onAccent : theme.textPrimary, fontWeight: selected ? "700" : "500" }], children: name })
|
|
2130
2257
|
},
|
|
2131
2258
|
id
|
|
2132
2259
|
);
|
|
@@ -2140,12 +2267,12 @@ function DayStrip({ label, locale, value: valueProp, defaultValue = null, onValu
|
|
|
2140
2267
|
const [value, setValue] = useOwn(valueProp, defaultValue);
|
|
2141
2268
|
const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" });
|
|
2142
2269
|
const list = Array.from({ length: days }, (_, i) => addDays(first, i));
|
|
2143
|
-
return /* @__PURE__ */
|
|
2270
|
+
return /* @__PURE__ */ jsx18(ScrollView4, { horizontal: true, showsHorizontalScrollIndicator: false, role: "radiogroup", "aria-label": label, contentContainerStyle: styles16.strip, style, children: list.map((iso) => {
|
|
2144
2271
|
const selected = iso === value;
|
|
2145
2272
|
const disabled = Boolean(isDateDisabled?.(iso));
|
|
2146
2273
|
const marked = Boolean(isDateMarked?.(iso));
|
|
2147
2274
|
const name = longDate(locale, iso);
|
|
2148
|
-
return /* @__PURE__ */
|
|
2275
|
+
return /* @__PURE__ */ jsxs15(
|
|
2149
2276
|
Pressable10,
|
|
2150
2277
|
{
|
|
2151
2278
|
role: "radio",
|
|
@@ -2170,10 +2297,10 @@ function DayStrip({ label, locale, value: valueProp, defaultValue = null, onValu
|
|
|
2170
2297
|
}
|
|
2171
2298
|
],
|
|
2172
2299
|
children: [
|
|
2173
|
-
iso === today ? /* @__PURE__ */
|
|
2174
|
-
/* @__PURE__ */
|
|
2175
|
-
/* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2300
|
+
iso === today ? /* @__PURE__ */ jsx18(Node, { color: selected ? theme.onAccent : theme.accent, style: styles16.stripNode }) : null,
|
|
2301
|
+
/* @__PURE__ */ jsx18(Text11, { style: [styles16.stripWeekday, { color: selected ? theme.onAccent : disabled ? theme.textMuted : theme.textSecondary }], children: weekday.format(toLocalDate(iso)).replace(/\.$/, "").toUpperCase() }),
|
|
2302
|
+
/* @__PURE__ */ jsx18(Text11, { style: [styles16.stripNumber, { color: selected ? theme.onAccent : disabled ? theme.textMuted : theme.textPrimary }], children: Number(iso.slice(8)) }),
|
|
2303
|
+
/* @__PURE__ */ jsx18(View14, { style: [styles16.dot, marked ? { backgroundColor: selected ? theme.onAccent : theme.textSecondary } : null] })
|
|
2177
2304
|
]
|
|
2178
2305
|
},
|
|
2179
2306
|
iso
|
|
@@ -2188,10 +2315,10 @@ function TimePicker({ label, locale, value: valueProp, defaultValue = null, onVa
|
|
|
2188
2315
|
onValueChange?.(next);
|
|
2189
2316
|
};
|
|
2190
2317
|
if (variant === "slots")
|
|
2191
|
-
return /* @__PURE__ */
|
|
2318
|
+
return /* @__PURE__ */ jsx18(View14, { role: "radiogroup", "aria-label": label, style: [styles16.slots, style], children: slots.map((t) => {
|
|
2192
2319
|
const selected = t === value;
|
|
2193
2320
|
const off = disabled || Boolean(isTimeDisabled?.(t));
|
|
2194
|
-
return /* @__PURE__ */
|
|
2321
|
+
return /* @__PURE__ */ jsx18(
|
|
2195
2322
|
Pressable10,
|
|
2196
2323
|
{
|
|
2197
2324
|
role: "radio",
|
|
@@ -2213,7 +2340,7 @@ function TimePicker({ label, locale, value: valueProp, defaultValue = null, onVa
|
|
|
2213
2340
|
transform: [{ scale: pressed ? 0.97 : 1 }]
|
|
2214
2341
|
}
|
|
2215
2342
|
],
|
|
2216
|
-
children: /* @__PURE__ */
|
|
2343
|
+
children: /* @__PURE__ */ jsx18(Text11, { style: [styles16.slotText, { color: selected ? theme.onAccent : off ? theme.textMuted : theme.textPrimary, textDecorationLine: off ? "line-through" : "none" }], children: formatTime(locale, t) })
|
|
2217
2344
|
},
|
|
2218
2345
|
t
|
|
2219
2346
|
);
|
|
@@ -2229,11 +2356,11 @@ function TimePicker({ label, locale, value: valueProp, defaultValue = null, onVa
|
|
|
2229
2356
|
const hours = twelve ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((h) => ({ value: String(h), label: String(h) })) : Array.from({ length: 24 }, (_, h) => ({ value: String(h), label: two(h) }));
|
|
2230
2357
|
const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({ value: String(i * minuteStep), label: two(i * minuteStep) }));
|
|
2231
2358
|
const [am, pmLabel] = dayPeriods(locale);
|
|
2232
|
-
return /* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
/* @__PURE__ */
|
|
2235
|
-
/* @__PURE__ */
|
|
2236
|
-
twelve ? /* @__PURE__ */
|
|
2359
|
+
return /* @__PURE__ */ jsxs15(WheelPicker, { label: value ? `${label}, ${formatTime(locale, value)}` : label, style, children: [
|
|
2360
|
+
/* @__PURE__ */ jsx18(Wheel, { label: labels.hours, options: hours, disabled, value: twelve ? String(h24 % 12 === 0 ? 12 : h24 % 12) : String(h24), onValueChange: (v) => put(twelve ? Number(v) % 12 + (pm ? 12 : 0) : Number(v), minute) }),
|
|
2361
|
+
/* @__PURE__ */ jsx18(WheelDivider, { children: ":" }),
|
|
2362
|
+
/* @__PURE__ */ jsx18(Wheel, { label: labels.minutes, options: minutes, disabled, value: String(Math.min(60 - minuteStep, Math.round(minute / minuteStep) * minuteStep)), onValueChange: (v) => put(h24, Number(v)) }),
|
|
2363
|
+
twelve ? /* @__PURE__ */ jsx18(
|
|
2237
2364
|
Wheel,
|
|
2238
2365
|
{
|
|
2239
2366
|
label: labels.period,
|
|
@@ -2266,15 +2393,15 @@ function DateWheel({ label, locale, value: valueProp, defaultValue = null, onVal
|
|
|
2266
2393
|
};
|
|
2267
2394
|
const last = daysInMonth(year, month);
|
|
2268
2395
|
const columns = {
|
|
2269
|
-
day: /* @__PURE__ */
|
|
2270
|
-
month: /* @__PURE__ */
|
|
2271
|
-
year: /* @__PURE__ */
|
|
2396
|
+
day: /* @__PURE__ */ jsx18(Wheel, { label: names.day, disabled, options: Array.from({ length: last }, (_, i) => ({ value: String(i + 1), label: String(i + 1), disabled: isoOf(year, month, i + 1) > hi || isoOf(year, month, i + 1) < lo })), value: String(Math.min(day, last)), onValueChange: (v) => set(year, month, Number(v)), style: styles16.dayWheel }, "day"),
|
|
2397
|
+
month: /* @__PURE__ */ jsx18(Wheel, { label: names.month, disabled, options: months.map((n, i) => ({ value: String(i + 1), label: n, disabled: isoOf(year, i + 1, 1) > hi || isoOf(year, i + 1, daysInMonth(year, i + 1)) < lo })), value: String(month), onValueChange: (v) => set(year, Number(v), day), style: styles16.monthWheel }, "month"),
|
|
2398
|
+
year: /* @__PURE__ */ jsx18(Wheel, { label: names.year, disabled, options: yearRange(Number(hi.slice(0, 4)), Number(lo.slice(0, 4))).map((y) => ({ value: String(y), label: String(y) })), value: String(year), onValueChange: (v) => set(Number(v), month, day), style: styles16.yearWheel }, "year")
|
|
2272
2399
|
};
|
|
2273
2400
|
const caption = error ?? hint;
|
|
2274
|
-
return /* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2276
|
-
/* @__PURE__ */
|
|
2277
|
-
caption ? /* @__PURE__ */
|
|
2401
|
+
return /* @__PURE__ */ jsxs15(View14, { style: [styles16.field, style], children: [
|
|
2402
|
+
/* @__PURE__ */ jsx18(Text11, { "aria-hidden": true, style: [styles16.fieldLabel, { color: theme.textSecondary }], children: label }),
|
|
2403
|
+
/* @__PURE__ */ jsx18(WheelPicker, { label, invalid: Boolean(error), unset: !value, children: datePartsOrder(locale).map((part) => columns[part]) }),
|
|
2404
|
+
caption ? /* @__PURE__ */ jsx18(Text11, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles16.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
|
|
2278
2405
|
] });
|
|
2279
2406
|
}
|
|
2280
2407
|
var styles16 = StyleSheet16.create({
|
|
@@ -2311,14 +2438,14 @@ var styles16 = StyleSheet16.create({
|
|
|
2311
2438
|
});
|
|
2312
2439
|
|
|
2313
2440
|
// src/native/description-list.tsx
|
|
2314
|
-
import { StyleSheet as StyleSheet17, View as
|
|
2315
|
-
import { jsx as
|
|
2441
|
+
import { StyleSheet as StyleSheet17, View as View15 } from "react-native";
|
|
2442
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2316
2443
|
function DescriptionList({ items: items2, layout = "stacked", style }) {
|
|
2317
2444
|
const { theme, radius: radius3 } = useTheme();
|
|
2318
|
-
return /* @__PURE__ */
|
|
2319
|
-
const value = typeof item.details === "string" || typeof item.details === "number" ? /* @__PURE__ */
|
|
2320
|
-
return /* @__PURE__ */
|
|
2321
|
-
|
|
2445
|
+
return /* @__PURE__ */ jsx19(View15, { role: "list", style: [layout === "grid" ? styles17.grid : layout === "inline" ? null : styles17.stacked, style], children: items2.map((item, i) => {
|
|
2446
|
+
const value = typeof item.details === "string" || typeof item.details === "number" ? /* @__PURE__ */ jsx19(Txt, { variant: layout === "grid" ? "title" : "body", style: layout === "inline" ? styles17.right : null, children: item.details }) : item.details;
|
|
2447
|
+
return /* @__PURE__ */ jsxs16(
|
|
2448
|
+
View15,
|
|
2322
2449
|
{
|
|
2323
2450
|
role: "listitem",
|
|
2324
2451
|
accessible: true,
|
|
@@ -2327,10 +2454,10 @@ function DescriptionList({ items: items2, layout = "stacked", style }) {
|
|
|
2327
2454
|
layout === "grid" ? [styles17.card, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius3.lg }] : null
|
|
2328
2455
|
],
|
|
2329
2456
|
children: [
|
|
2330
|
-
/* @__PURE__ */
|
|
2331
|
-
/* @__PURE__ */
|
|
2457
|
+
/* @__PURE__ */ jsx19(Txt, { variant: "caption", tone: "secondary", style: layout === "grid" ? styles17.upper : null, children: item.term }),
|
|
2458
|
+
/* @__PURE__ */ jsxs16(View15, { style: layout === "inline" ? styles17.valueInline : styles17.value, children: [
|
|
2332
2459
|
value,
|
|
2333
|
-
item.hint ? /* @__PURE__ */
|
|
2460
|
+
item.hint ? /* @__PURE__ */ jsx19(Txt, { variant: "caption", tone: "secondary", style: layout === "inline" ? styles17.right : null, children: item.hint }) : null
|
|
2334
2461
|
] })
|
|
2335
2462
|
]
|
|
2336
2463
|
},
|
|
@@ -2350,15 +2477,15 @@ var styles17 = StyleSheet17.create({
|
|
|
2350
2477
|
});
|
|
2351
2478
|
|
|
2352
2479
|
// src/native/empty-state.tsx
|
|
2353
|
-
import { StyleSheet as StyleSheet18, View as
|
|
2354
|
-
import { jsx as
|
|
2480
|
+
import { StyleSheet as StyleSheet18, View as View16 } from "react-native";
|
|
2481
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2355
2482
|
function EmptyState({ icon, title, description, action, style, ...props }) {
|
|
2356
2483
|
const { theme } = useTheme();
|
|
2357
|
-
return /* @__PURE__ */
|
|
2358
|
-
icon ? /* @__PURE__ */
|
|
2359
|
-
/* @__PURE__ */
|
|
2360
|
-
description ? /* @__PURE__ */
|
|
2361
|
-
action ? /* @__PURE__ */
|
|
2484
|
+
return /* @__PURE__ */ jsxs17(View16, { ...props, style: [styles18.root, style], children: [
|
|
2485
|
+
icon ? /* @__PURE__ */ jsx20(View16, { "aria-hidden": true, style: [styles18.icon, { backgroundColor: theme.surface2 }], children: icon }) : null,
|
|
2486
|
+
/* @__PURE__ */ jsx20(Txt, { variant: "label", role: "heading", style: styles18.center, children: title }),
|
|
2487
|
+
description ? /* @__PURE__ */ jsx20(Txt, { tone: "secondary", style: styles18.center, children: description }) : null,
|
|
2488
|
+
action ? /* @__PURE__ */ jsx20(View16, { style: styles18.action, children: action }) : null
|
|
2362
2489
|
] });
|
|
2363
2490
|
}
|
|
2364
2491
|
var styles18 = StyleSheet18.create({
|
|
@@ -2369,12 +2496,12 @@ var styles18 = StyleSheet18.create({
|
|
|
2369
2496
|
});
|
|
2370
2497
|
|
|
2371
2498
|
// src/native/fab.tsx
|
|
2372
|
-
import { Pressable as Pressable11, StyleSheet as StyleSheet19, View as
|
|
2373
|
-
import { jsx as
|
|
2499
|
+
import { Pressable as Pressable11, StyleSheet as StyleSheet19, View as View17 } from "react-native";
|
|
2500
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2374
2501
|
function Fab({ label, icon, onPress, extended, placement = "end", offset = 0, style }) {
|
|
2375
2502
|
const { theme, insets, haptic } = useTheme();
|
|
2376
2503
|
const position = placement === "center" ? { alignSelf: "center" } : placement === "start" ? { left: 16 + insets.left } : { right: 16 + insets.right };
|
|
2377
|
-
return /* @__PURE__ */
|
|
2504
|
+
return /* @__PURE__ */ jsx21(View17, { pointerEvents: "box-none", style: [styles19.layer, placement === "center" ? styles19.centre : null], children: /* @__PURE__ */ jsxs18(
|
|
2378
2505
|
Pressable11,
|
|
2379
2506
|
{
|
|
2380
2507
|
role: "button",
|
|
@@ -2391,8 +2518,8 @@ function Fab({ label, icon, onPress, extended, placement = "end", offset = 0, st
|
|
|
2391
2518
|
style
|
|
2392
2519
|
],
|
|
2393
2520
|
children: [
|
|
2394
|
-
/* @__PURE__ */
|
|
2395
|
-
extended ? /* @__PURE__ */
|
|
2521
|
+
/* @__PURE__ */ jsx21(View17, { "aria-hidden": true, children: icon }),
|
|
2522
|
+
extended ? /* @__PURE__ */ jsx21(Txt, { variant: "label", tone: "onAccent", "aria-hidden": true, numberOfLines: 1, style: styles19.label, children: label }) : null
|
|
2396
2523
|
]
|
|
2397
2524
|
}
|
|
2398
2525
|
) });
|
|
@@ -2407,17 +2534,17 @@ var styles19 = StyleSheet19.create({
|
|
|
2407
2534
|
|
|
2408
2535
|
// src/native/field.tsx
|
|
2409
2536
|
import * as React16 from "react";
|
|
2410
|
-
import { StyleSheet as StyleSheet20, Text as Text12, TextInput as TextInput4, View as
|
|
2411
|
-
import { jsx as
|
|
2537
|
+
import { StyleSheet as StyleSheet20, Text as Text12, TextInput as TextInput4, View as View18 } from "react-native";
|
|
2538
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2412
2539
|
function TextField({ label, hint, error, value, defaultValue, onValueChange, disabled, end, inputRef, style, multiline, onFocus, onBlur, ...props }) {
|
|
2413
2540
|
const { theme, radius: radius3 } = useTheme();
|
|
2414
2541
|
const [focused, setFocused] = React16.useState(false);
|
|
2415
2542
|
const caption = error ?? hint;
|
|
2416
2543
|
const border = error ? theme.danger : focused ? theme.accent : theme.borderDefault;
|
|
2417
|
-
return /* @__PURE__ */
|
|
2418
|
-
/* @__PURE__ */
|
|
2419
|
-
/* @__PURE__ */
|
|
2420
|
-
/* @__PURE__ */
|
|
2544
|
+
return /* @__PURE__ */ jsxs19(View18, { style: [styles20.root, disabled ? styles20.disabled : null, style], children: [
|
|
2545
|
+
/* @__PURE__ */ jsx22(Text12, { style: [styles20.label, { color: theme.textSecondary }], children: label }),
|
|
2546
|
+
/* @__PURE__ */ jsxs19(View18, { style: [styles20.frame, multiline ? styles20.multiline : null, { borderRadius: radius3.md, borderColor: border, backgroundColor: theme.surface2 }], children: [
|
|
2547
|
+
/* @__PURE__ */ jsx22(
|
|
2421
2548
|
TextInput4,
|
|
2422
2549
|
{
|
|
2423
2550
|
ref: inputRef,
|
|
@@ -2443,9 +2570,9 @@ function TextField({ label, hint, error, value, defaultValue, onValueChange, dis
|
|
|
2443
2570
|
...props
|
|
2444
2571
|
}
|
|
2445
2572
|
),
|
|
2446
|
-
end ? /* @__PURE__ */
|
|
2573
|
+
end ? /* @__PURE__ */ jsx22(View18, { style: styles20.end, children: end }) : null
|
|
2447
2574
|
] }),
|
|
2448
|
-
caption ? /* @__PURE__ */
|
|
2575
|
+
caption ? /* @__PURE__ */ jsx22(Text12, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles20.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
|
|
2449
2576
|
] });
|
|
2450
2577
|
}
|
|
2451
2578
|
var styles20 = StyleSheet20.create({
|
|
@@ -2461,20 +2588,20 @@ var styles20 = StyleSheet20.create({
|
|
|
2461
2588
|
});
|
|
2462
2589
|
|
|
2463
2590
|
// src/native/goal-gauge.tsx
|
|
2464
|
-
import { Animated as
|
|
2591
|
+
import { Animated as Animated7, StyleSheet as StyleSheet21, View as View19 } from "react-native";
|
|
2465
2592
|
|
|
2466
2593
|
// src/native/story-motion.ts
|
|
2467
2594
|
import * as React17 from "react";
|
|
2468
|
-
import { AccessibilityInfo as
|
|
2595
|
+
import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated6, Easing as Easing3 } from "react-native";
|
|
2469
2596
|
function useEntrance(animated, delay = 0, duration = 700) {
|
|
2470
|
-
const [value] = React17.useState(() => new
|
|
2597
|
+
const [value] = React17.useState(() => new Animated6.Value(animated ? 0 : 1));
|
|
2471
2598
|
React17.useEffect(() => {
|
|
2472
2599
|
if (!animated) return;
|
|
2473
2600
|
let cancelled = false;
|
|
2474
|
-
void
|
|
2601
|
+
void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
|
|
2475
2602
|
if (cancelled) return;
|
|
2476
2603
|
if (reduce) value.setValue(1);
|
|
2477
|
-
else
|
|
2604
|
+
else Animated6.timing(value, { toValue: 1, duration, delay, easing: Easing3.out(Easing3.cubic), useNativeDriver: true }).start();
|
|
2478
2605
|
});
|
|
2479
2606
|
return () => {
|
|
2480
2607
|
cancelled = true;
|
|
@@ -2484,15 +2611,15 @@ function useEntrance(animated, delay = 0, duration = 700) {
|
|
|
2484
2611
|
}
|
|
2485
2612
|
|
|
2486
2613
|
// src/native/goal-gauge.tsx
|
|
2487
|
-
import { jsx as
|
|
2614
|
+
import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2488
2615
|
function Cell({ lit, animate, order, animated, arcade }) {
|
|
2489
2616
|
const { theme } = useTheme();
|
|
2490
2617
|
const t = useEntrance(animated && animate, 300 + order * 100, 350);
|
|
2491
2618
|
const spentOpacity = arcade ? 0.14 : 1;
|
|
2492
2619
|
const opacity = !animate ? 1 : lit ? t.interpolate({ inputRange: [0, 1], outputRange: [0.25, 1] }) : t.interpolate({ inputRange: [0, 1], outputRange: [1, arcade ? 0.14 : 1] });
|
|
2493
2620
|
const color = lit || arcade ? theme.accent : theme.surface3;
|
|
2494
|
-
return /* @__PURE__ */
|
|
2495
|
-
|
|
2621
|
+
return /* @__PURE__ */ jsx23(
|
|
2622
|
+
Animated7.View,
|
|
2496
2623
|
{
|
|
2497
2624
|
style: [styles21.cell, arcade ? styles21.cellArcade : null, { backgroundColor: color, opacity: lit || animate ? opacity : spentOpacity }]
|
|
2498
2625
|
}
|
|
@@ -2504,8 +2631,8 @@ function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel
|
|
|
2504
2631
|
const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));
|
|
2505
2632
|
const words2 = valueText ?? `${lit} / ${total}`;
|
|
2506
2633
|
const arcade = variant === "arcade";
|
|
2507
|
-
return /* @__PURE__ */
|
|
2508
|
-
|
|
2634
|
+
return /* @__PURE__ */ jsxs20(
|
|
2635
|
+
View19,
|
|
2509
2636
|
{
|
|
2510
2637
|
accessible: true,
|
|
2511
2638
|
role: "meter",
|
|
@@ -2517,14 +2644,14 @@ function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel
|
|
|
2517
2644
|
...props,
|
|
2518
2645
|
style: [styles21.root, style],
|
|
2519
2646
|
children: [
|
|
2520
|
-
showLabel ? /* @__PURE__ */
|
|
2521
|
-
/* @__PURE__ */
|
|
2522
|
-
arcade ? null : /* @__PURE__ */
|
|
2647
|
+
showLabel ? /* @__PURE__ */ jsxs20(View19, { "aria-hidden": true, style: [styles21.head, arcade ? styles21.headArcade : null], children: [
|
|
2648
|
+
/* @__PURE__ */ jsx23(Txt, { variant: arcade ? "mono" : "caption", tone: "secondary", children: arcade ? label.toUpperCase() : label }),
|
|
2649
|
+
arcade ? null : /* @__PURE__ */ jsx23(Txt, { variant: "caption", children: words2 })
|
|
2523
2650
|
] }) : null,
|
|
2524
|
-
/* @__PURE__ */
|
|
2651
|
+
/* @__PURE__ */ jsx23(View19, { "aria-hidden": true, style: [styles21.cells, arcade ? [styles21.cellsArcade, { borderColor: theme.borderSubtle, backgroundColor: theme.surface1 }] : null], children: Array.from({ length: total }, (_, i) => {
|
|
2525
2652
|
const on = i < lit;
|
|
2526
2653
|
const animate = mode === "fill" ? on : !on;
|
|
2527
|
-
return /* @__PURE__ */
|
|
2654
|
+
return /* @__PURE__ */ jsx23(Cell, { lit: on, animate, order: mode === "fill" ? i : i - lit, animated, arcade }, i);
|
|
2528
2655
|
}) })
|
|
2529
2656
|
]
|
|
2530
2657
|
}
|
|
@@ -2542,41 +2669,41 @@ var styles21 = StyleSheet21.create({
|
|
|
2542
2669
|
|
|
2543
2670
|
// src/native/header.tsx
|
|
2544
2671
|
import * as React18 from "react";
|
|
2545
|
-
import { Animated as
|
|
2546
|
-
import
|
|
2547
|
-
import { jsx as
|
|
2672
|
+
import { Animated as Animated8, Pressable as Pressable12, StyleSheet as StyleSheet22, View as View20 } from "react-native";
|
|
2673
|
+
import Svg8, { Path as Path6 } from "react-native-svg";
|
|
2674
|
+
import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2548
2675
|
var BAR = 44;
|
|
2549
2676
|
var LARGE = 52;
|
|
2550
2677
|
function Header({ title, subtitle, scrollY, size = "large", backLabel, onBack, actions, children, style }) {
|
|
2551
2678
|
const { theme, insets } = useTheme();
|
|
2552
2679
|
const reduce = useReducedMotion();
|
|
2553
2680
|
const large = size === "large";
|
|
2554
|
-
const fixed = React18.useMemo(() => new
|
|
2681
|
+
const fixed = React18.useMemo(() => new Animated8.Value(large ? 0 : 1), [large]);
|
|
2555
2682
|
const progress = scrollY && large ? scrollY.interpolate({ inputRange: [0, LARGE], outputRange: [0, 1], extrapolate: "clamp" }) : fixed;
|
|
2556
2683
|
const smallOpacity = progress.interpolate({ inputRange: [0.6, 1], outputRange: [0, 1], extrapolate: "clamp" });
|
|
2557
2684
|
const largeOpacity = progress.interpolate({ inputRange: [0, 0.7], outputRange: [1, 0], extrapolate: "clamp" });
|
|
2558
2685
|
const largeShift = reduce ? 0 : progress.interpolate({ inputRange: [0, 1], outputRange: [0, -10] });
|
|
2559
2686
|
const largeHeight = progress.interpolate({ inputRange: [0, 1], outputRange: [LARGE + (subtitle ? 18 : 0), 0] });
|
|
2560
|
-
return /* @__PURE__ */
|
|
2561
|
-
/* @__PURE__ */
|
|
2562
|
-
/* @__PURE__ */
|
|
2563
|
-
/* @__PURE__ */
|
|
2564
|
-
/* @__PURE__ */
|
|
2687
|
+
return /* @__PURE__ */ jsxs21(View20, { style: [{ paddingTop: insets.top, backgroundColor: theme.surface0 }, style], children: [
|
|
2688
|
+
/* @__PURE__ */ jsxs21(View20, { style: styles22.bar, children: [
|
|
2689
|
+
/* @__PURE__ */ jsx24(View20, { style: styles22.side, children: onBack && backLabel ? /* @__PURE__ */ jsxs21(Pressable12, { role: "button", "aria-label": backLabel, onPress: onBack, hitSlop: 8, style: styles22.back, children: [
|
|
2690
|
+
/* @__PURE__ */ jsx24(Svg8, { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx24(Path6, { d: "M15 5l-7 7 7 7", stroke: theme.accentText, strokeWidth: 2.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2691
|
+
/* @__PURE__ */ jsx24(Txt, { variant: "label", tone: "accent", numberOfLines: 1, children: backLabel })
|
|
2565
2692
|
] }) : null }),
|
|
2566
|
-
/* @__PURE__ */
|
|
2567
|
-
/* @__PURE__ */
|
|
2693
|
+
/* @__PURE__ */ jsx24(Animated8.View, { style: [styles22.middle, { opacity: smallOpacity }], "aria-hidden": large, children: /* @__PURE__ */ jsx24(Txt, { variant: "label", numberOfLines: 1, role: large ? void 0 : "heading", children: title }) }),
|
|
2694
|
+
/* @__PURE__ */ jsx24(View20, { style: [styles22.side, styles22.right], children: actions })
|
|
2568
2695
|
] }),
|
|
2569
|
-
large ? /* @__PURE__ */
|
|
2570
|
-
/* @__PURE__ */
|
|
2571
|
-
subtitle ? /* @__PURE__ */
|
|
2696
|
+
large ? /* @__PURE__ */ jsx24(Animated8.View, { style: { height: largeHeight, overflow: "hidden" }, children: /* @__PURE__ */ jsxs21(Animated8.View, { style: [styles22.large, { opacity: largeOpacity, transform: [{ translateY: largeShift }] }], children: [
|
|
2697
|
+
/* @__PURE__ */ jsx24(Txt, { variant: "display", numberOfLines: 1, role: "heading", style: styles22.largeTitle, children: title }),
|
|
2698
|
+
subtitle ? /* @__PURE__ */ jsx24(Txt, { variant: "caption", tone: "secondary", children: subtitle }) : null
|
|
2572
2699
|
] }) }) : null,
|
|
2573
|
-
children ? /* @__PURE__ */
|
|
2574
|
-
/* @__PURE__ */
|
|
2700
|
+
children ? /* @__PURE__ */ jsx24(View20, { style: styles22.children, children }) : null,
|
|
2701
|
+
/* @__PURE__ */ jsx24(Animated8.View, { "aria-hidden": true, style: [styles22.rule, { backgroundColor: theme.borderSubtle, opacity: smallOpacity }] })
|
|
2575
2702
|
] });
|
|
2576
2703
|
}
|
|
2577
2704
|
function useCollapsingHeader() {
|
|
2578
|
-
const [scrollY] = React18.useState(() => new
|
|
2579
|
-
const onScroll = React18.useMemo(() =>
|
|
2705
|
+
const [scrollY] = React18.useState(() => new Animated8.Value(0));
|
|
2706
|
+
const onScroll = React18.useMemo(() => Animated8.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: false }), [scrollY]);
|
|
2580
2707
|
return { scrollY, onScroll };
|
|
2581
2708
|
}
|
|
2582
2709
|
var styles22 = StyleSheet22.create({
|
|
@@ -2593,17 +2720,17 @@ var styles22 = StyleSheet22.create({
|
|
|
2593
2720
|
|
|
2594
2721
|
// src/native/image-viewer.tsx
|
|
2595
2722
|
import * as React19 from "react";
|
|
2596
|
-
import { AccessibilityInfo as
|
|
2597
|
-
import { jsx as
|
|
2723
|
+
import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated9, Image as Image3, Modal as Modal3, PanResponder, Pressable as Pressable13, StyleSheet as StyleSheet23, useWindowDimensions, View as View21 } from "react-native";
|
|
2724
|
+
import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2598
2725
|
var MAX_SCALE = 4;
|
|
2599
2726
|
function ImageViewer({ images, index, onIndexChange, closeLabel, positionLabel = (n, total) => `${n} / ${total}` }) {
|
|
2600
2727
|
const { theme, insets, haptic } = useTheme();
|
|
2601
2728
|
const reduce = useReducedMotion();
|
|
2602
2729
|
const { width, height } = useWindowDimensions();
|
|
2603
2730
|
const open = index !== null && images[index] !== void 0;
|
|
2604
|
-
const [scale] = React19.useState(() => new
|
|
2605
|
-
const [pan] = React19.useState(() => new
|
|
2606
|
-
const [dismiss2] = React19.useState(() => new
|
|
2731
|
+
const [scale] = React19.useState(() => new Animated9.Value(1));
|
|
2732
|
+
const [pan] = React19.useState(() => new Animated9.ValueXY({ x: 0, y: 0 }));
|
|
2733
|
+
const [dismiss2] = React19.useState(() => new Animated9.Value(0));
|
|
2607
2734
|
const state = React19.useRef({ scale: 1, x: 0, y: 0, pinch: 0, base: 1, lastTap: 0 });
|
|
2608
2735
|
const reset = React19.useCallback(() => {
|
|
2609
2736
|
state.current = { ...state.current, scale: 1, x: 0, y: 0 };
|
|
@@ -2613,14 +2740,14 @@ function ImageViewer({ images, index, onIndexChange, closeLabel, positionLabel =
|
|
|
2613
2740
|
}, [scale, pan, dismiss2]);
|
|
2614
2741
|
React19.useEffect(() => {
|
|
2615
2742
|
reset();
|
|
2616
|
-
if (open)
|
|
2743
|
+
if (open) AccessibilityInfo5.announceForAccessibility(`${images[index].alt}, ${positionLabel(index + 1, images.length)}`);
|
|
2617
2744
|
}, [index]);
|
|
2618
2745
|
const go = (to) => {
|
|
2619
2746
|
if (to < 0 || to >= images.length) return;
|
|
2620
2747
|
haptic("selection");
|
|
2621
2748
|
onIndexChange(to);
|
|
2622
2749
|
};
|
|
2623
|
-
const animateTo = (value, to) => reduce ? value.setValue(to) :
|
|
2750
|
+
const animateTo = (value, to) => reduce ? value.setValue(to) : Animated9.spring(value, { toValue: to, useNativeDriver: true, damping: 20 }).start();
|
|
2624
2751
|
const distance = (touches) => Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
|
|
2625
2752
|
const responder = React19.useMemo(
|
|
2626
2753
|
() => PanResponder.create({
|
|
@@ -2673,7 +2800,7 @@ function ImageViewer({ images, index, onIndexChange, closeLabel, positionLabel =
|
|
|
2673
2800
|
if (g.dx < -width / 4 || g.vx < -0.8) go((index ?? 0) + 1);
|
|
2674
2801
|
else if (g.dx > width / 4 || g.vx > 0.8) go((index ?? 0) - 1);
|
|
2675
2802
|
animateTo(dismiss2, 0);
|
|
2676
|
-
|
|
2803
|
+
Animated9.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: true }).start();
|
|
2677
2804
|
}
|
|
2678
2805
|
}),
|
|
2679
2806
|
[index, width, images.length]
|
|
@@ -2682,10 +2809,10 @@ function ImageViewer({ images, index, onIndexChange, closeLabel, positionLabel =
|
|
|
2682
2809
|
if (!open) return null;
|
|
2683
2810
|
const image = images[index];
|
|
2684
2811
|
const backdrop = dismiss2.interpolate({ inputRange: [0, height / 2], outputRange: [1, 0.3], extrapolate: "clamp" });
|
|
2685
|
-
return /* @__PURE__ */
|
|
2686
|
-
/* @__PURE__ */
|
|
2687
|
-
/* @__PURE__ */
|
|
2688
|
-
|
|
2812
|
+
return /* @__PURE__ */ jsxs22(Modal3, { ...modalName(image.alt), visible: true, transparent: true, animationType: reduce ? "none" : "fade", onRequestClose: () => onIndexChange(null), statusBarTranslucent: true, children: [
|
|
2813
|
+
/* @__PURE__ */ jsx25(Animated9.View, { style: [StyleSheet23.absoluteFill, { backgroundColor: theme.media, opacity: backdrop }] }),
|
|
2814
|
+
/* @__PURE__ */ jsx25(
|
|
2815
|
+
View21,
|
|
2689
2816
|
{
|
|
2690
2817
|
style: StyleSheet23.absoluteFill,
|
|
2691
2818
|
accessible: true,
|
|
@@ -2699,14 +2826,14 @@ function ImageViewer({ images, index, onIndexChange, closeLabel, positionLabel =
|
|
|
2699
2826
|
if (name === "escape") onIndexChange(null);
|
|
2700
2827
|
},
|
|
2701
2828
|
...responder.panHandlers,
|
|
2702
|
-
children: /* @__PURE__ */
|
|
2829
|
+
children: /* @__PURE__ */ jsx25(Animated9.View, { style: { width, height, transform: [{ translateX: pan.x }, { translateY: Animated9.add(pan.y, dismiss2) }, { scale }] }, children: /* @__PURE__ */ jsx25(Image3, { source: { uri: image.uri }, resizeMode: "contain", style: { width, height }, accessibilityIgnoresInvertColors: true }) })
|
|
2703
2830
|
}
|
|
2704
2831
|
),
|
|
2705
|
-
/* @__PURE__ */
|
|
2706
|
-
/* @__PURE__ */
|
|
2707
|
-
/* @__PURE__ */
|
|
2832
|
+
/* @__PURE__ */ jsxs22(View21, { pointerEvents: "box-none", style: [styles23.top, { paddingTop: insets.top + 8 }], children: [
|
|
2833
|
+
/* @__PURE__ */ jsx25(View21, { "aria-hidden": true, style: [styles23.counter, { backgroundColor: theme.scrimStrong }], children: /* @__PURE__ */ jsx25(Txt, { variant: "label", tone: "onMedia", children: positionLabel(index + 1, images.length) }) }),
|
|
2834
|
+
/* @__PURE__ */ jsx25(Pressable13, { role: "button", "aria-label": closeLabel, hitSlop: 12, onPress: () => onIndexChange(null), style: [styles23.close, { backgroundColor: theme.scrimStrong }], children: /* @__PURE__ */ jsx25(Txt, { tone: "onMedia", style: styles23.cross, "aria-hidden": true, children: "\xD7" }) })
|
|
2708
2835
|
] }),
|
|
2709
|
-
image.caption ? /* @__PURE__ */
|
|
2836
|
+
image.caption ? /* @__PURE__ */ jsx25(View21, { pointerEvents: "none", style: [styles23.caption, { paddingBottom: insets.bottom + 16, backgroundColor: theme.scrimStrong }], children: /* @__PURE__ */ jsx25(Txt, { tone: "onMedia", children: image.caption }) }) : null
|
|
2710
2837
|
] });
|
|
2711
2838
|
}
|
|
2712
2839
|
function prefetchNeighbours(images, index) {
|
|
@@ -2721,9 +2848,73 @@ var styles23 = StyleSheet23.create({
|
|
|
2721
2848
|
caption: { position: "absolute", left: 0, right: 0, bottom: 0, paddingTop: 12, paddingHorizontal: 16 }
|
|
2722
2849
|
});
|
|
2723
2850
|
|
|
2851
|
+
// src/native/KachizakaMark.tsx
|
|
2852
|
+
import { View as View22 } from "react-native";
|
|
2853
|
+
import Svg9, { Circle as Circle3, Defs as Defs4, LinearGradient as LinearGradient4, Path as Path7, RadialGradient as RadialGradient2, Stop as Stop4 } from "react-native-svg";
|
|
2854
|
+
|
|
2855
|
+
// src/marks/kachizaka-geometry.ts
|
|
2856
|
+
var gold = marks.kachizaka[marks.kachizaka.length - 1][1];
|
|
2857
|
+
var KACHIZAKA = {
|
|
2858
|
+
viewBox: "0 0 400 400",
|
|
2859
|
+
croppedViewBox: "80 80 240 240",
|
|
2860
|
+
center: 200,
|
|
2861
|
+
/** The bowl: a rim 136 → 264 at y 104, cut 32 at its upper-right corner (the Krizaka chamfer), rounding down to the stem. */
|
|
2862
|
+
cup: "M136 104 H232 L264 136 V164 C264 214 236 242 200 246 C164 242 136 214 136 164 Z",
|
|
2863
|
+
/** The stem and the base, one shape. */
|
|
2864
|
+
base: "M190 244 H210 V272 H240 C244 272 248 276 248 280 V300 H152 V280 C152 276 156 272 160 272 H190 Z",
|
|
2865
|
+
/** The two handles, stroked in the gradient. */
|
|
2866
|
+
handles: "M138 128 C100 124 100 196 150 202 M262 128 C300 124 300 196 250 202",
|
|
2867
|
+
handleWidth: 14,
|
|
2868
|
+
/** The seal: a five-pointed star in light on the bowl, centred (200, 172), radii 30 / 13. */
|
|
2869
|
+
star: "M200 142 L207.6 161.5 L228.5 162.7 L212.4 176 L217.6 196.3 L200 185 L182.4 196.3 L187.6 176 L171.5 162.7 L192.4 161.5 Z",
|
|
2870
|
+
starColor: "#fffbea",
|
|
2871
|
+
gradient: { x1: 136, y1: 300, x2: 264, y2: 104, stops: marks.kachizaka },
|
|
2872
|
+
/** The ball: one node on the orbit, that turns with it. */
|
|
2873
|
+
node: { r: 9, at: [200, 40] },
|
|
2874
|
+
glow: { color: gold, opacity: 0.18 },
|
|
2875
|
+
/** The seal's breathing shadow (web), in the gold. */
|
|
2876
|
+
pulse: { color: gold, low: 0.35, high: 0.75 },
|
|
2877
|
+
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
2878
|
+
ring: { r: 134, width: 1 }
|
|
2879
|
+
};
|
|
2880
|
+
|
|
2881
|
+
// src/native/KachizakaMark.tsx
|
|
2882
|
+
import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2883
|
+
function KachizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
2884
|
+
const { theme } = useTheme();
|
|
2885
|
+
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 28e3);
|
|
2886
|
+
const id = useSvgId("kzm");
|
|
2887
|
+
const viewBox = size < 48 ? KACHIZAKA.croppedViewBox : KACHIZAKA.viewBox;
|
|
2888
|
+
const stroke = neutral ?? theme.textMuted;
|
|
2889
|
+
const gradient = /* @__PURE__ */ jsx26(LinearGradient4, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: KACHIZAKA.gradient.x1, y1: KACHIZAKA.gradient.y1, x2: KACHIZAKA.gradient.x2, y2: KACHIZAKA.gradient.y2, children: KACHIZAKA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx26(Stop4, { offset, stopColor: color }, offset)) });
|
|
2890
|
+
const fill = `url(#${id}a)`;
|
|
2891
|
+
return /* @__PURE__ */ jsxs23(View22, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
2892
|
+
/* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
|
|
2893
|
+
/* @__PURE__ */ jsxs23(Defs4, { children: [
|
|
2894
|
+
/* @__PURE__ */ jsxs23(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
2895
|
+
/* @__PURE__ */ jsx26(Stop4, { offset: "0%", stopColor: KACHIZAKA.glow.color, stopOpacity: KACHIZAKA.glow.opacity }),
|
|
2896
|
+
/* @__PURE__ */ jsx26(Stop4, { offset: "100%", stopColor: KACHIZAKA.glow.color, stopOpacity: 0 })
|
|
2897
|
+
] }),
|
|
2898
|
+
gradient
|
|
2899
|
+
] }),
|
|
2900
|
+
size >= 48 ? /* @__PURE__ */ jsx26(Circle3, { cx: KACHIZAKA.center, cy: KACHIZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
2901
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: KACHIZAKA.center, cy: KACHIZAKA.center, r: KACHIZAKA.ring.r, stroke, strokeWidth: KACHIZAKA.ring.width, opacity: 0.35, fill: "none" }),
|
|
2902
|
+
/* @__PURE__ */ jsx26(Path7, { d: KACHIZAKA.handles, stroke: fill, strokeWidth: KACHIZAKA.handleWidth, strokeLinecap: "round", fill: "none" }),
|
|
2903
|
+
/* @__PURE__ */ jsx26(Path7, { d: KACHIZAKA.base, fill }),
|
|
2904
|
+
/* @__PURE__ */ jsx26(Path7, { d: KACHIZAKA.cup, fill })
|
|
2905
|
+
] }),
|
|
2906
|
+
/* @__PURE__ */ jsx26(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
|
|
2907
|
+
/* @__PURE__ */ jsx26(Defs4, { children: gradient }),
|
|
2908
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: KACHIZAKA.center, cy: KACHIZAKA.center, r: KACHIZAKA.orbit.r, stroke, strokeWidth: KACHIZAKA.orbit.width, strokeDasharray: KACHIZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
2909
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: KACHIZAKA.node.at[0], cy: KACHIZAKA.node.at[1], r: KACHIZAKA.node.r, fill })
|
|
2910
|
+
] }) }),
|
|
2911
|
+
/* @__PURE__ */ jsx26(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsx26(Svg9, { viewBox, style: layer, children: /* @__PURE__ */ jsx26(Path7, { d: KACHIZAKA.star, fill: KACHIZAKA.starColor }) }) })
|
|
2912
|
+
] });
|
|
2913
|
+
}
|
|
2914
|
+
|
|
2724
2915
|
// src/native/KrizakaMark.tsx
|
|
2725
|
-
import { View as
|
|
2726
|
-
import
|
|
2916
|
+
import { View as View23 } from "react-native";
|
|
2917
|
+
import Svg10, { Circle as Circle4, Defs as Defs5, G as Group, LinearGradient as LinearGradient5, Path as Path8, RadialGradient as RadialGradient3, Stop as Stop5 } from "react-native-svg";
|
|
2727
2918
|
|
|
2728
2919
|
// src/marks/krizaka-geometry.ts
|
|
2729
2920
|
var KRIZAKA = {
|
|
@@ -2744,77 +2935,40 @@ var KRIZAKA = {
|
|
|
2744
2935
|
ring: { r: 134, width: 1 }
|
|
2745
2936
|
};
|
|
2746
2937
|
|
|
2747
|
-
// src/native/mark-motion.ts
|
|
2748
|
-
import { useEffect as useEffect11, useState as useState19 } from "react";
|
|
2749
|
-
import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated9, Easing as Easing3 } from "react-native";
|
|
2750
|
-
var markA11y = (title) => title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
|
|
2751
|
-
function useMarkMotion(size, animated, spinMs = 3e4) {
|
|
2752
|
-
const [spin] = useState19(() => new Animated9.Value(0));
|
|
2753
|
-
const [pulse] = useState19(() => new Animated9.Value(0));
|
|
2754
|
-
useEffect11(() => {
|
|
2755
|
-
if (!animated) return;
|
|
2756
|
-
let loops = [];
|
|
2757
|
-
let cancelled = false;
|
|
2758
|
-
void AccessibilityInfo5.isReduceMotionEnabled().then((reduce) => {
|
|
2759
|
-
if (reduce || cancelled) return;
|
|
2760
|
-
loops = [
|
|
2761
|
-
Animated9.loop(Animated9.timing(spin, { toValue: 1, duration: spinMs, easing: Easing3.linear, useNativeDriver: true })),
|
|
2762
|
-
Animated9.loop(
|
|
2763
|
-
Animated9.sequence([
|
|
2764
|
-
Animated9.timing(pulse, { toValue: 1, duration: 1600, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true }),
|
|
2765
|
-
Animated9.timing(pulse, { toValue: 0, duration: 1600, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true })
|
|
2766
|
-
])
|
|
2767
|
-
)
|
|
2768
|
-
];
|
|
2769
|
-
loops.forEach((l) => l.start());
|
|
2770
|
-
});
|
|
2771
|
-
return () => {
|
|
2772
|
-
cancelled = true;
|
|
2773
|
-
loops.forEach((l) => l.stop());
|
|
2774
|
-
};
|
|
2775
|
-
}, [animated, spin, pulse, spinMs]);
|
|
2776
|
-
return {
|
|
2777
|
-
Animated: Animated9,
|
|
2778
|
-
layer: { position: "absolute", width: size, height: size },
|
|
2779
|
-
spinStyle: { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] },
|
|
2780
|
-
pulseStyle: { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }
|
|
2781
|
-
};
|
|
2782
|
-
}
|
|
2783
|
-
|
|
2784
2938
|
// src/native/KrizakaMark.tsx
|
|
2785
|
-
import { Fragment as Fragment5, jsx as
|
|
2939
|
+
import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2786
2940
|
function KrizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
2787
2941
|
const { theme } = useTheme();
|
|
2788
2942
|
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
2789
2943
|
const id = useSvgId("kzm");
|
|
2790
2944
|
const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
|
|
2791
2945
|
const stroke = neutral ?? theme.textMuted;
|
|
2792
|
-
const blue = /* @__PURE__ */
|
|
2793
|
-
const dot = (c) => /* @__PURE__ */
|
|
2794
|
-
/* @__PURE__ */
|
|
2795
|
-
/* @__PURE__ */
|
|
2946
|
+
const blue = /* @__PURE__ */ jsx27(LinearGradient5, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx27(Stop5, { offset, stopColor: color }, offset)) });
|
|
2947
|
+
const dot = (c) => /* @__PURE__ */ jsxs24(Fragment5, { children: [
|
|
2948
|
+
/* @__PURE__ */ jsx27(Circle4, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
|
|
2949
|
+
/* @__PURE__ */ jsx27(Circle4, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
|
|
2796
2950
|
] });
|
|
2797
|
-
return /* @__PURE__ */
|
|
2798
|
-
/* @__PURE__ */
|
|
2799
|
-
/* @__PURE__ */
|
|
2800
|
-
/* @__PURE__ */
|
|
2801
|
-
/* @__PURE__ */
|
|
2802
|
-
/* @__PURE__ */
|
|
2951
|
+
return /* @__PURE__ */ jsxs24(View23, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
2952
|
+
/* @__PURE__ */ jsxs24(Svg10, { viewBox, style: layer, children: [
|
|
2953
|
+
/* @__PURE__ */ jsxs24(Defs5, { children: [
|
|
2954
|
+
/* @__PURE__ */ jsxs24(RadialGradient3, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
2955
|
+
/* @__PURE__ */ jsx27(Stop5, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
|
|
2956
|
+
/* @__PURE__ */ jsx27(Stop5, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
|
|
2803
2957
|
] }),
|
|
2804
|
-
/* @__PURE__ */
|
|
2805
|
-
/* @__PURE__ */
|
|
2806
|
-
/* @__PURE__ */
|
|
2958
|
+
/* @__PURE__ */ jsxs24(LinearGradient5, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
|
|
2959
|
+
/* @__PURE__ */ jsx27(Stop5, { offset: "0%", stopColor: theme.textSecondary }),
|
|
2960
|
+
/* @__PURE__ */ jsx27(Stop5, { offset: "100%", stopColor: theme.textPrimary })
|
|
2807
2961
|
] }),
|
|
2808
2962
|
blue
|
|
2809
2963
|
] }),
|
|
2810
|
-
size >= 48 ? /* @__PURE__ */
|
|
2811
|
-
/* @__PURE__ */
|
|
2812
|
-
/* @__PURE__ */
|
|
2964
|
+
size >= 48 ? /* @__PURE__ */ jsx27(Circle4, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
|
|
2965
|
+
/* @__PURE__ */ jsx27(Circle4, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
|
|
2966
|
+
/* @__PURE__ */ jsx27(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx27(Path8, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
|
|
2813
2967
|
] }),
|
|
2814
|
-
/* @__PURE__ */
|
|
2815
|
-
/* @__PURE__ */
|
|
2816
|
-
/* @__PURE__ */
|
|
2817
|
-
/* @__PURE__ */
|
|
2968
|
+
/* @__PURE__ */ jsx27(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx27(Svg10, { viewBox, style: layer, children: /* @__PURE__ */ jsx27(Circle4, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
|
|
2969
|
+
/* @__PURE__ */ jsx27(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs24(Svg10, { viewBox, style: layer, children: [
|
|
2970
|
+
/* @__PURE__ */ jsx27(Defs5, { children: blue }),
|
|
2971
|
+
/* @__PURE__ */ jsxs24(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
|
|
2818
2972
|
dot(KRIZAKA.node),
|
|
2819
2973
|
dot(KRIZAKA.core)
|
|
2820
2974
|
] })
|
|
@@ -2824,12 +2978,12 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
|
2824
2978
|
|
|
2825
2979
|
// src/native/loader.tsx
|
|
2826
2980
|
import * as React22 from "react";
|
|
2827
|
-
import { AccessibilityInfo as AccessibilityInfo7, Animated as Animated11, Easing as Easing5, StyleSheet as StyleSheet24, View as
|
|
2828
|
-
import
|
|
2981
|
+
import { AccessibilityInfo as AccessibilityInfo7, Animated as Animated11, Easing as Easing5, StyleSheet as StyleSheet24, View as View29 } from "react-native";
|
|
2982
|
+
import Svg16, { Circle as Circle10, Path as Path14 } from "react-native-svg";
|
|
2829
2983
|
|
|
2830
2984
|
// src/native/OrazakaMark.tsx
|
|
2831
|
-
import { View as
|
|
2832
|
-
import
|
|
2985
|
+
import { View as View24 } from "react-native";
|
|
2986
|
+
import Svg11, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Path as Path9, RadialGradient as RadialGradient4, Stop as Stop6 } from "react-native-svg";
|
|
2833
2987
|
|
|
2834
2988
|
// src/marks/orazaka-geometry.ts
|
|
2835
2989
|
var orange = marks.orazaka[marks.orazaka.length - 1][1];
|
|
@@ -2858,41 +3012,41 @@ var ORAZAKA = {
|
|
|
2858
3012
|
};
|
|
2859
3013
|
|
|
2860
3014
|
// src/native/OrazakaMark.tsx
|
|
2861
|
-
import { jsx as
|
|
3015
|
+
import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2862
3016
|
function OrazakaMark({ size = 48, animated = true, title, neutral }) {
|
|
2863
3017
|
const { theme } = useTheme();
|
|
2864
3018
|
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
2865
3019
|
const id = useSvgId("ozm");
|
|
2866
3020
|
const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
|
|
2867
3021
|
const stroke = neutral ?? theme.textMuted;
|
|
2868
|
-
const gradient = /* @__PURE__ */
|
|
3022
|
+
const gradient = /* @__PURE__ */ jsx28(LinearGradient6, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.gradient.x1, y1: ORAZAKA.gradient.y1, x2: ORAZAKA.gradient.x2, y2: ORAZAKA.gradient.y2, children: ORAZAKA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx28(Stop6, { offset, stopColor: color }, offset)) });
|
|
2869
3023
|
const fill = `url(#${id}a)`;
|
|
2870
|
-
return /* @__PURE__ */
|
|
2871
|
-
/* @__PURE__ */
|
|
2872
|
-
/* @__PURE__ */
|
|
2873
|
-
/* @__PURE__ */
|
|
2874
|
-
/* @__PURE__ */
|
|
3024
|
+
return /* @__PURE__ */ jsxs25(View24, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3025
|
+
/* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
|
|
3026
|
+
/* @__PURE__ */ jsx28(Defs6, { children: /* @__PURE__ */ jsxs25(RadialGradient4, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3027
|
+
/* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
|
|
3028
|
+
/* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
|
|
2875
3029
|
] }) }),
|
|
2876
|
-
size >= 48 ? /* @__PURE__ */
|
|
2877
|
-
/* @__PURE__ */
|
|
2878
|
-
/* @__PURE__ */
|
|
3030
|
+
size >= 48 ? /* @__PURE__ */ jsx28(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3031
|
+
/* @__PURE__ */ jsx28(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3032
|
+
/* @__PURE__ */ jsx28(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
|
|
2879
3033
|
] }),
|
|
2880
|
-
/* @__PURE__ */
|
|
2881
|
-
/* @__PURE__ */
|
|
2882
|
-
ORAZAKA.shards.map((d) => /* @__PURE__ */
|
|
3034
|
+
/* @__PURE__ */ jsx28(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
|
|
3035
|
+
/* @__PURE__ */ jsx28(Defs6, { children: gradient }),
|
|
3036
|
+
ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx28(Path9, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
|
|
2883
3037
|
] }) }),
|
|
2884
|
-
/* @__PURE__ */
|
|
2885
|
-
/* @__PURE__ */
|
|
2886
|
-
/* @__PURE__ */
|
|
2887
|
-
/* @__PURE__ */
|
|
3038
|
+
/* @__PURE__ */ jsx28(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
|
|
3039
|
+
/* @__PURE__ */ jsx28(Defs6, { children: gradient }),
|
|
3040
|
+
/* @__PURE__ */ jsx28(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
|
|
3041
|
+
/* @__PURE__ */ jsx28(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
|
|
2888
3042
|
] }) })
|
|
2889
3043
|
] });
|
|
2890
3044
|
}
|
|
2891
3045
|
|
|
2892
3046
|
// src/native/OrochiaMark.tsx
|
|
2893
3047
|
import { useEffect as useEffect12, useState as useState20 } from "react";
|
|
2894
|
-
import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated10, Easing as Easing4, View as
|
|
2895
|
-
import
|
|
3048
|
+
import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated10, Easing as Easing4, View as View25 } from "react-native";
|
|
3049
|
+
import Svg12, { Circle as Circle6, Defs as Defs7, Ellipse, G as Group2, LinearGradient as LinearGradient7, Path as Path10, RadialGradient as RadialGradient5, Stop as Stop7 } from "react-native-svg";
|
|
2896
3050
|
|
|
2897
3051
|
// src/marks/orochia-geometry.ts
|
|
2898
3052
|
var OROCHIA = {
|
|
@@ -2919,7 +3073,7 @@ var OROCHIA = {
|
|
|
2919
3073
|
};
|
|
2920
3074
|
|
|
2921
3075
|
// src/native/OrochiaMark.tsx
|
|
2922
|
-
import { jsx as
|
|
3076
|
+
import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2923
3077
|
var CENTER = OROCHIA.offset + 180;
|
|
2924
3078
|
function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }) {
|
|
2925
3079
|
const { theme } = useTheme();
|
|
@@ -2951,33 +3105,33 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
|
|
|
2951
3105
|
const viewBox = size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox;
|
|
2952
3106
|
const layer = { position: "absolute", width: size, height: size };
|
|
2953
3107
|
const a11y = title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
|
|
2954
|
-
const bodyGradient = /* @__PURE__ */
|
|
2955
|
-
return /* @__PURE__ */
|
|
2956
|
-
/* @__PURE__ */
|
|
2957
|
-
/* @__PURE__ */
|
|
2958
|
-
/* @__PURE__ */
|
|
2959
|
-
/* @__PURE__ */
|
|
3108
|
+
const bodyGradient = /* @__PURE__ */ jsx29(LinearGradient7, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx29(Stop7, { offset, stopColor: color }, offset)) });
|
|
3109
|
+
return /* @__PURE__ */ jsxs26(View25, { style: { width: size, height: size }, ...a11y, children: [
|
|
3110
|
+
/* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
|
|
3111
|
+
/* @__PURE__ */ jsx29(Defs7, { children: /* @__PURE__ */ jsxs26(RadialGradient5, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
|
|
3112
|
+
/* @__PURE__ */ jsx29(Stop7, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
|
|
3113
|
+
/* @__PURE__ */ jsx29(Stop7, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
|
|
2960
3114
|
] }) }),
|
|
2961
|
-
/* @__PURE__ */
|
|
2962
|
-
/* @__PURE__ */
|
|
3115
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
|
|
3116
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
|
|
2963
3117
|
] }),
|
|
2964
|
-
/* @__PURE__ */
|
|
2965
|
-
/* @__PURE__ */
|
|
2966
|
-
/* @__PURE__ */
|
|
2967
|
-
/* @__PURE__ */
|
|
2968
|
-
/* @__PURE__ */
|
|
2969
|
-
/* @__PURE__ */
|
|
2970
|
-
/* @__PURE__ */
|
|
2971
|
-
/* @__PURE__ */
|
|
2972
|
-
/* @__PURE__ */
|
|
2973
|
-
/* @__PURE__ */
|
|
3118
|
+
/* @__PURE__ */ jsx29(Animated10.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx29(Svg12, { viewBox, style: layer, children: /* @__PURE__ */ jsx29(Circle6, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
|
|
3119
|
+
/* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
|
|
3120
|
+
/* @__PURE__ */ jsx29(Defs7, { children: bodyGradient }),
|
|
3121
|
+
/* @__PURE__ */ jsxs26(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
|
|
3122
|
+
/* @__PURE__ */ jsx29(Path10, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
|
|
3123
|
+
/* @__PURE__ */ jsx29(Path10, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
|
|
3124
|
+
/* @__PURE__ */ jsx29(Path10, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
|
|
3125
|
+
/* @__PURE__ */ jsx29(Path10, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
|
|
3126
|
+
/* @__PURE__ */ jsx29(Ellipse, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
|
|
3127
|
+
/* @__PURE__ */ jsx29(Path10, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
|
|
2974
3128
|
] })
|
|
2975
3129
|
] }),
|
|
2976
|
-
/* @__PURE__ */
|
|
2977
|
-
/* @__PURE__ */
|
|
2978
|
-
/* @__PURE__ */
|
|
2979
|
-
/* @__PURE__ */
|
|
2980
|
-
/* @__PURE__ */
|
|
3130
|
+
/* @__PURE__ */ jsx29(Animated10.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
|
|
3131
|
+
/* @__PURE__ */ jsx29(Defs7, { children: /* @__PURE__ */ jsx29(LinearGradient7, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx29(Stop7, { offset, stopColor: color }, offset)) }) }),
|
|
3132
|
+
/* @__PURE__ */ jsxs26(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
|
|
3133
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
|
|
3134
|
+
/* @__PURE__ */ jsx29(Path10, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
|
|
2981
3135
|
] })
|
|
2982
3136
|
] }) })
|
|
2983
3137
|
] });
|
|
@@ -2985,8 +3139,8 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
|
|
|
2985
3139
|
|
|
2986
3140
|
// src/native/YasakiaMark.tsx
|
|
2987
3141
|
import React21 from "react";
|
|
2988
|
-
import { View as
|
|
2989
|
-
import
|
|
3142
|
+
import { View as View26 } from "react-native";
|
|
3143
|
+
import Svg13, { Circle as Circle7, Defs as Defs8, LinearGradient as LinearGradient8, Path as Path11, RadialGradient as RadialGradient6, Stop as Stop8 } from "react-native-svg";
|
|
2990
3144
|
|
|
2991
3145
|
// src/marks/yasakia-geometry.ts
|
|
2992
3146
|
var turquoise = marks.yasakia[marks.yasakia.length - 1][1];
|
|
@@ -3016,55 +3170,55 @@ var YASAKIA = {
|
|
|
3016
3170
|
};
|
|
3017
3171
|
|
|
3018
3172
|
// src/native/YasakiaMark.tsx
|
|
3019
|
-
import { jsx as
|
|
3173
|
+
import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3020
3174
|
function YasakiaMark({ size = 48, animated = true, title, neutral }) {
|
|
3021
3175
|
const { theme } = useTheme();
|
|
3022
3176
|
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
3023
3177
|
const id = useSvgId("yzm");
|
|
3024
3178
|
const viewBox = size < 48 ? YASAKIA.croppedViewBox : YASAKIA.viewBox;
|
|
3025
3179
|
const stroke = neutral ?? theme.textMuted;
|
|
3026
|
-
const gradient = /* @__PURE__ */
|
|
3180
|
+
const gradient = /* @__PURE__ */ jsx30(LinearGradient8, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YASAKIA.gradient.x1, y1: YASAKIA.gradient.y1, x2: YASAKIA.gradient.x2, y2: YASAKIA.gradient.y2, children: YASAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx30(Stop8, { offset, stopColor: color }, offset)) });
|
|
3027
3181
|
const fill = `url(#${id}a)`;
|
|
3028
|
-
return /* @__PURE__ */
|
|
3029
|
-
/* @__PURE__ */
|
|
3030
|
-
/* @__PURE__ */
|
|
3031
|
-
/* @__PURE__ */
|
|
3032
|
-
/* @__PURE__ */
|
|
3033
|
-
/* @__PURE__ */
|
|
3182
|
+
return /* @__PURE__ */ jsxs27(View26, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3183
|
+
/* @__PURE__ */ jsxs27(Svg13, { viewBox, style: layer, children: [
|
|
3184
|
+
/* @__PURE__ */ jsxs27(Defs8, { children: [
|
|
3185
|
+
/* @__PURE__ */ jsxs27(RadialGradient6, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3186
|
+
/* @__PURE__ */ jsx30(Stop8, { offset: "0%", stopColor: YASAKIA.glow.color, stopOpacity: YASAKIA.glow.opacity }),
|
|
3187
|
+
/* @__PURE__ */ jsx30(Stop8, { offset: "100%", stopColor: YASAKIA.glow.color, stopOpacity: 0 })
|
|
3034
3188
|
] }),
|
|
3035
3189
|
gradient
|
|
3036
3190
|
] }),
|
|
3037
|
-
size >= 48 ? /* @__PURE__ */
|
|
3038
|
-
/* @__PURE__ */
|
|
3039
|
-
YASAKIA.voices.map((v, i) => /* @__PURE__ */
|
|
3040
|
-
/* @__PURE__ */
|
|
3041
|
-
/* @__PURE__ */
|
|
3042
|
-
i === 0 ? /* @__PURE__ */
|
|
3191
|
+
size >= 48 ? /* @__PURE__ */ jsx30(Circle7, { cx: YASAKIA.center, cy: YASAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3192
|
+
/* @__PURE__ */ jsx30(Circle7, { cx: YASAKIA.center, cy: YASAKIA.center, r: YASAKIA.ring.r, stroke, strokeWidth: YASAKIA.ring.width, opacity: 0.35, fill: "none" }),
|
|
3193
|
+
YASAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs27(React21.Fragment, { children: [
|
|
3194
|
+
/* @__PURE__ */ jsx30(Path11, { d: v.body, fill }),
|
|
3195
|
+
/* @__PURE__ */ jsx30(Path11, { d: v.tail, fill }),
|
|
3196
|
+
i === 0 ? /* @__PURE__ */ jsx30(Path11, { d: `${v.body} ${v.tail}`, fill: YASAKIA.shade.color, opacity: YASAKIA.shade.opacity }) : null
|
|
3043
3197
|
] }, v.body))
|
|
3044
3198
|
] }),
|
|
3045
|
-
/* @__PURE__ */
|
|
3046
|
-
/* @__PURE__ */
|
|
3047
|
-
/* @__PURE__ */
|
|
3048
|
-
YASAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */
|
|
3199
|
+
/* @__PURE__ */ jsx30(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs27(Svg13, { viewBox, style: layer, children: [
|
|
3200
|
+
/* @__PURE__ */ jsx30(Defs8, { children: gradient }),
|
|
3201
|
+
/* @__PURE__ */ jsx30(Circle7, { cx: YASAKIA.center, cy: YASAKIA.center, r: YASAKIA.orbit.r, stroke, strokeWidth: YASAKIA.orbit.width, strokeDasharray: YASAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3202
|
+
YASAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx30(Circle7, { cx, cy, r: YASAKIA.pair.r, fill }, cx))
|
|
3049
3203
|
] }) }),
|
|
3050
|
-
/* @__PURE__ */
|
|
3051
|
-
/* @__PURE__ */
|
|
3204
|
+
/* @__PURE__ */ jsx30(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs27(Svg13, { viewBox, style: layer, children: [
|
|
3205
|
+
/* @__PURE__ */ jsxs27(Defs8, { children: [
|
|
3052
3206
|
gradient,
|
|
3053
|
-
/* @__PURE__ */
|
|
3054
|
-
/* @__PURE__ */
|
|
3055
|
-
/* @__PURE__ */
|
|
3207
|
+
/* @__PURE__ */ jsxs27(LinearGradient8, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YASAKIA.lens.y1, x2: 0, y2: YASAKIA.lens.y2, children: [
|
|
3208
|
+
/* @__PURE__ */ jsx30(Stop8, { offset: "0%", stopColor: YASAKIA.highlight.color, stopOpacity: YASAKIA.highlight.from }),
|
|
3209
|
+
/* @__PURE__ */ jsx30(Stop8, { offset: "100%", stopColor: YASAKIA.highlight.color, stopOpacity: YASAKIA.highlight.to })
|
|
3056
3210
|
] })
|
|
3057
3211
|
] }),
|
|
3058
|
-
/* @__PURE__ */
|
|
3059
|
-
/* @__PURE__ */
|
|
3212
|
+
/* @__PURE__ */ jsx30(Path11, { d: YASAKIA.lens.d, fill }),
|
|
3213
|
+
/* @__PURE__ */ jsx30(Path11, { d: YASAKIA.lens.d, fill: `url(#${id}l)` })
|
|
3060
3214
|
] }) })
|
|
3061
3215
|
] });
|
|
3062
3216
|
}
|
|
3063
3217
|
var YazakiaMark = YasakiaMark;
|
|
3064
3218
|
|
|
3065
3219
|
// src/native/YomizakaMark.tsx
|
|
3066
|
-
import { View as
|
|
3067
|
-
import
|
|
3220
|
+
import { View as View27 } from "react-native";
|
|
3221
|
+
import Svg14, { Circle as Circle8, Defs as Defs9, LinearGradient as LinearGradient9, Path as Path12, RadialGradient as RadialGradient7, Stop as Stop9 } from "react-native-svg";
|
|
3068
3222
|
|
|
3069
3223
|
// src/marks/yomizaka-geometry.ts
|
|
3070
3224
|
var indigo = marks.yomizaka[marks.yomizaka.length - 1][1];
|
|
@@ -3097,49 +3251,49 @@ var YOMIZAKA = {
|
|
|
3097
3251
|
};
|
|
3098
3252
|
|
|
3099
3253
|
// src/native/YomizakaMark.tsx
|
|
3100
|
-
import { jsx as
|
|
3254
|
+
import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3101
3255
|
function YomizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
3102
3256
|
const { theme } = useTheme();
|
|
3103
3257
|
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 32e3);
|
|
3104
3258
|
const id = useSvgId("ymm");
|
|
3105
3259
|
const viewBox = size < 48 ? YOMIZAKA.croppedViewBox : YOMIZAKA.viewBox;
|
|
3106
3260
|
const stroke = neutral ?? theme.textMuted;
|
|
3107
|
-
const gradient = /* @__PURE__ */
|
|
3261
|
+
const gradient = /* @__PURE__ */ jsx31(LinearGradient9, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YOMIZAKA.gradient.x1, y1: YOMIZAKA.gradient.y1, x2: YOMIZAKA.gradient.x2, y2: YOMIZAKA.gradient.y2, children: YOMIZAKA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx31(Stop9, { offset, stopColor: color }, offset)) });
|
|
3108
3262
|
const fill = `url(#${id}a)`;
|
|
3109
|
-
return /* @__PURE__ */
|
|
3110
|
-
/* @__PURE__ */
|
|
3111
|
-
/* @__PURE__ */
|
|
3112
|
-
/* @__PURE__ */
|
|
3113
|
-
/* @__PURE__ */
|
|
3114
|
-
/* @__PURE__ */
|
|
3263
|
+
return /* @__PURE__ */ jsxs28(View27, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3264
|
+
/* @__PURE__ */ jsxs28(Svg14, { viewBox, style: layer, children: [
|
|
3265
|
+
/* @__PURE__ */ jsxs28(Defs9, { children: [
|
|
3266
|
+
/* @__PURE__ */ jsxs28(RadialGradient7, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3267
|
+
/* @__PURE__ */ jsx31(Stop9, { offset: "0%", stopColor: YOMIZAKA.glow.color, stopOpacity: YOMIZAKA.glow.opacity }),
|
|
3268
|
+
/* @__PURE__ */ jsx31(Stop9, { offset: "100%", stopColor: YOMIZAKA.glow.color, stopOpacity: 0 })
|
|
3115
3269
|
] }),
|
|
3116
3270
|
gradient
|
|
3117
3271
|
] }),
|
|
3118
|
-
size >= 48 ? /* @__PURE__ */
|
|
3119
|
-
/* @__PURE__ */
|
|
3120
|
-
/* @__PURE__ */
|
|
3121
|
-
/* @__PURE__ */
|
|
3122
|
-
/* @__PURE__ */
|
|
3272
|
+
size >= 48 ? /* @__PURE__ */ jsx31(Circle8, { cx: YOMIZAKA.center, cy: YOMIZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3273
|
+
/* @__PURE__ */ jsx31(Circle8, { cx: YOMIZAKA.center, cy: YOMIZAKA.center, r: YOMIZAKA.ring.r, stroke, strokeWidth: YOMIZAKA.ring.width, opacity: 0.35, fill: "none" }),
|
|
3274
|
+
/* @__PURE__ */ jsx31(Path12, { d: YOMIZAKA.page, fill }),
|
|
3275
|
+
/* @__PURE__ */ jsx31(Path12, { d: YOMIZAKA.lines, stroke: YOMIZAKA.line.color, strokeOpacity: YOMIZAKA.line.opacity, strokeWidth: YOMIZAKA.line.width, strokeLinecap: "round", fill: "none" }),
|
|
3276
|
+
/* @__PURE__ */ jsx31(Path12, { d: YOMIZAKA.handle, stroke: fill, strokeWidth: YOMIZAKA.handleWidth, strokeLinecap: "round", fill: "none" })
|
|
3123
3277
|
] }),
|
|
3124
|
-
/* @__PURE__ */
|
|
3125
|
-
/* @__PURE__ */
|
|
3126
|
-
/* @__PURE__ */
|
|
3127
|
-
/* @__PURE__ */
|
|
3278
|
+
/* @__PURE__ */ jsx31(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs28(Svg14, { viewBox, style: layer, children: [
|
|
3279
|
+
/* @__PURE__ */ jsx31(Defs9, { children: gradient }),
|
|
3280
|
+
/* @__PURE__ */ jsx31(Circle8, { cx: YOMIZAKA.center, cy: YOMIZAKA.center, r: YOMIZAKA.orbit.r, stroke, strokeWidth: YOMIZAKA.orbit.width, strokeDasharray: YOMIZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3281
|
+
/* @__PURE__ */ jsx31(Circle8, { cx: YOMIZAKA.node.at[0], cy: YOMIZAKA.node.at[1], r: YOMIZAKA.node.r, fill })
|
|
3128
3282
|
] }) }),
|
|
3129
|
-
/* @__PURE__ */
|
|
3130
|
-
/* @__PURE__ */
|
|
3283
|
+
/* @__PURE__ */ jsx31(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs28(Svg14, { viewBox, style: layer, children: [
|
|
3284
|
+
/* @__PURE__ */ jsxs28(Defs9, { children: [
|
|
3131
3285
|
gradient,
|
|
3132
|
-
/* @__PURE__ */
|
|
3286
|
+
/* @__PURE__ */ jsx31(LinearGradient9, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YOMIZAKA.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx31(Stop9, { offset, stopColor: color }, offset)) })
|
|
3133
3287
|
] }),
|
|
3134
|
-
/* @__PURE__ */
|
|
3135
|
-
/* @__PURE__ */
|
|
3288
|
+
/* @__PURE__ */ jsx31(Circle8, { cx: YOMIZAKA.lens.cx, cy: YOMIZAKA.lens.cy, r: YOMIZAKA.lens.r, stroke: fill, strokeWidth: YOMIZAKA.lens.width, fill: `url(#${id}c)` }),
|
|
3289
|
+
/* @__PURE__ */ jsx31(Circle8, { cx: YOMIZAKA.lens.glint.cx, cy: YOMIZAKA.lens.glint.cy, r: YOMIZAKA.lens.glint.r, fill: YOMIZAKA.highlight })
|
|
3136
3290
|
] }) })
|
|
3137
3291
|
] });
|
|
3138
3292
|
}
|
|
3139
3293
|
|
|
3140
3294
|
// src/native/YororisMark.tsx
|
|
3141
|
-
import { View as
|
|
3142
|
-
import
|
|
3295
|
+
import { View as View28 } from "react-native";
|
|
3296
|
+
import Svg15, { Circle as Circle9, Defs as Defs10, LinearGradient as LinearGradient10, Path as Path13, RadialGradient as RadialGradient8, Stop as Stop10 } from "react-native-svg";
|
|
3143
3297
|
|
|
3144
3298
|
// src/marks/yororis-geometry.ts
|
|
3145
3299
|
var sand = marks.yororis[0][1];
|
|
@@ -3175,56 +3329,58 @@ var YORORIS = {
|
|
|
3175
3329
|
};
|
|
3176
3330
|
|
|
3177
3331
|
// src/native/YororisMark.tsx
|
|
3178
|
-
import { jsx as
|
|
3332
|
+
import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3179
3333
|
function YororisMark({ size = 48, animated = true, title, neutral }) {
|
|
3180
3334
|
const { theme } = useTheme();
|
|
3181
3335
|
const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
|
|
3182
3336
|
const id = useSvgId("yrm");
|
|
3183
3337
|
const viewBox = size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox;
|
|
3184
3338
|
const stroke = neutral ?? theme.textMuted;
|
|
3185
|
-
const gradient = /* @__PURE__ */
|
|
3339
|
+
const gradient = /* @__PURE__ */ jsx32(LinearGradient10, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YORORIS.gradient.x1, y1: YORORIS.gradient.y1, x2: YORORIS.gradient.x2, y2: YORORIS.gradient.y2, children: YORORIS.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx32(Stop10, { offset, stopColor: color }, offset)) });
|
|
3186
3340
|
const fill = `url(#${id}a)`;
|
|
3187
|
-
return /* @__PURE__ */
|
|
3188
|
-
/* @__PURE__ */
|
|
3189
|
-
/* @__PURE__ */
|
|
3190
|
-
/* @__PURE__ */
|
|
3191
|
-
/* @__PURE__ */
|
|
3192
|
-
/* @__PURE__ */
|
|
3341
|
+
return /* @__PURE__ */ jsxs29(View28, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3342
|
+
/* @__PURE__ */ jsxs29(Svg15, { viewBox, style: layer, children: [
|
|
3343
|
+
/* @__PURE__ */ jsxs29(Defs10, { children: [
|
|
3344
|
+
/* @__PURE__ */ jsxs29(RadialGradient8, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3345
|
+
/* @__PURE__ */ jsx32(Stop10, { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
|
|
3346
|
+
/* @__PURE__ */ jsx32(Stop10, { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: 0 })
|
|
3193
3347
|
] }),
|
|
3194
3348
|
gradient
|
|
3195
3349
|
] }),
|
|
3196
|
-
size >= 48 ? /* @__PURE__ */
|
|
3197
|
-
/* @__PURE__ */
|
|
3198
|
-
/* @__PURE__ */
|
|
3199
|
-
YORORIS.leaves.map((d) => /* @__PURE__ */
|
|
3200
|
-
/* @__PURE__ */
|
|
3350
|
+
size >= 48 ? /* @__PURE__ */ jsx32(Circle9, { cx: YORORIS.center, cy: YORORIS.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3351
|
+
/* @__PURE__ */ jsx32(Circle9, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke, strokeWidth: YORORIS.ring.width, opacity: 0.35, fill: "none" }),
|
|
3352
|
+
/* @__PURE__ */ jsx32(Path13, { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round", fill: "none" }),
|
|
3353
|
+
YORORIS.leaves.map((d) => /* @__PURE__ */ jsx32(Path13, { d, fill }, d)),
|
|
3354
|
+
/* @__PURE__ */ jsx32(Path13, { d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash, fill: "none" })
|
|
3201
3355
|
] }),
|
|
3202
|
-
/* @__PURE__ */
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
/* @__PURE__ */
|
|
3205
|
-
/* @__PURE__ */
|
|
3356
|
+
/* @__PURE__ */ jsx32(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs29(Svg15, { viewBox, style: layer, children: [
|
|
3357
|
+
/* @__PURE__ */ jsx32(Defs10, { children: gradient }),
|
|
3358
|
+
/* @__PURE__ */ jsx32(Circle9, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke, strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3359
|
+
/* @__PURE__ */ jsx32(Circle9, { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
|
|
3206
3360
|
] }) }),
|
|
3207
|
-
/* @__PURE__ */
|
|
3208
|
-
/* @__PURE__ */
|
|
3209
|
-
/* @__PURE__ */
|
|
3210
|
-
/* @__PURE__ */
|
|
3361
|
+
/* @__PURE__ */ jsx32(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs29(Svg15, { viewBox, style: layer, children: [
|
|
3362
|
+
/* @__PURE__ */ jsx32(Defs10, { children: /* @__PURE__ */ jsx32(LinearGradient10, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx32(Stop10, { offset, stopColor: color }, offset)) }) }),
|
|
3363
|
+
/* @__PURE__ */ jsx32(Circle9, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id}c)` }),
|
|
3364
|
+
/* @__PURE__ */ jsx32(Circle9, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
|
|
3211
3365
|
] }) })
|
|
3212
3366
|
] });
|
|
3213
3367
|
}
|
|
3214
3368
|
|
|
3215
3369
|
// src/native/ProductMark.tsx
|
|
3216
|
-
import { jsx as
|
|
3370
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
3217
3371
|
function ProductMark({ id, ...props }) {
|
|
3218
|
-
if (id === "krizaka") return /* @__PURE__ */
|
|
3219
|
-
if (id === "orazaka") return /* @__PURE__ */
|
|
3220
|
-
if (id === "yasakia" || id === "yazakia") return /* @__PURE__ */
|
|
3221
|
-
if (id === "yororis") return /* @__PURE__ */
|
|
3222
|
-
if (id === "yomizaka") return /* @__PURE__ */
|
|
3223
|
-
return /* @__PURE__ */
|
|
3372
|
+
if (id === "krizaka") return /* @__PURE__ */ jsx33(KrizakaMark, { ...props });
|
|
3373
|
+
if (id === "orazaka") return /* @__PURE__ */ jsx33(OrazakaMark, { ...props });
|
|
3374
|
+
if (id === "yasakia" || id === "yazakia") return /* @__PURE__ */ jsx33(YasakiaMark, { ...props });
|
|
3375
|
+
if (id === "yororis") return /* @__PURE__ */ jsx33(YororisMark, { ...props });
|
|
3376
|
+
if (id === "yomizaka") return /* @__PURE__ */ jsx33(YomizakaMark, { ...props });
|
|
3377
|
+
if (id === "kachizaka") return /* @__PURE__ */ jsx33(KachizakaMark, { ...props });
|
|
3378
|
+
if (id === "akinaza") return /* @__PURE__ */ jsx33(AkinazaMark, { ...props });
|
|
3379
|
+
return /* @__PURE__ */ jsx33(OrochiaMark, { ...props });
|
|
3224
3380
|
}
|
|
3225
3381
|
|
|
3226
3382
|
// src/native/loader.tsx
|
|
3227
|
-
import { jsx as
|
|
3383
|
+
import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3228
3384
|
var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
|
|
3229
3385
|
var PERIMETER = 54;
|
|
3230
3386
|
function LoaderGlyph({ state = "loading", value, size = 20, color }) {
|
|
@@ -3241,12 +3397,12 @@ function LoaderGlyph({ state = "loading", value, size = 20, color }) {
|
|
|
3241
3397
|
const stroke = color ?? (state === "success" ? theme.success : state === "error" ? theme.danger : theme.accent);
|
|
3242
3398
|
const fill = state !== "loading" ? 1 : known ? Math.min(1, Math.max(0, value)) : 0.3;
|
|
3243
3399
|
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
|
|
3244
|
-
return /* @__PURE__ */
|
|
3245
|
-
/* @__PURE__ */
|
|
3246
|
-
/* @__PURE__ */
|
|
3247
|
-
state === "loading" ? /* @__PURE__ */
|
|
3248
|
-
state === "success" ? /* @__PURE__ */
|
|
3249
|
-
state === "error" ? /* @__PURE__ */
|
|
3400
|
+
return /* @__PURE__ */ jsx34(Animated11.View, { "aria-hidden": true, style: { width: size, height: size, transform: state === "loading" && !known ? [{ rotate }] : [] }, children: /* @__PURE__ */ jsxs30(Svg16, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
|
|
3401
|
+
/* @__PURE__ */ jsx34(Path14, { d: HEX, stroke, strokeOpacity: 0.22, strokeWidth: 2.2, strokeLinejoin: "round" }),
|
|
3402
|
+
/* @__PURE__ */ jsx34(Path14, { d: HEX, stroke, strokeWidth: 2.2, strokeLinejoin: "round", strokeLinecap: "round", strokeDasharray: `${fill * PERIMETER} ${PERIMETER}` }),
|
|
3403
|
+
state === "loading" ? /* @__PURE__ */ jsx34(Circle10, { cx: 12, cy: 12, r: 2.6, fill: stroke }) : null,
|
|
3404
|
+
state === "success" ? /* @__PURE__ */ jsx34(Path14, { d: "M8.3 12.3l2.6 2.6 4.9-5.3", stroke, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) : null,
|
|
3405
|
+
state === "error" ? /* @__PURE__ */ jsx34(Path14, { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", stroke, strokeWidth: 2.2, strokeLinecap: "round" }) : null
|
|
3250
3406
|
] }) });
|
|
3251
3407
|
}
|
|
3252
3408
|
function useDelayedWait(active, delay = 250, minDuration = 600) {
|
|
@@ -3298,17 +3454,17 @@ function Loader({ label, status = "loading", successLabel, errorLabel, value, et
|
|
|
3298
3454
|
const known = phase === "loading" && typeof value === "number" && Number.isFinite(value);
|
|
3299
3455
|
const detail = phase === "loading" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(" \xB7 ") : "";
|
|
3300
3456
|
const stacked = variant !== "inline";
|
|
3301
|
-
const box = /* @__PURE__ */
|
|
3302
|
-
product && phase === "loading" ? /* @__PURE__ */
|
|
3303
|
-
/* @__PURE__ */
|
|
3304
|
-
/* @__PURE__ */
|
|
3305
|
-
detail ? /* @__PURE__ */
|
|
3457
|
+
const box = /* @__PURE__ */ jsxs30(View29, { style: [stacked ? styles24.stacked : styles24.inline, variant === "overlay" ? { backgroundColor: alpha(theme.surface1, 0.92), borderColor: theme.borderDefault, borderRadius: radius3.lg, ...styles24.card } : null], children: [
|
|
3458
|
+
product && phase === "loading" ? /* @__PURE__ */ jsx34(ProductMark, { id: product, size: GLYPH[variant], animated: true }) : /* @__PURE__ */ jsx34(LoaderGlyph, { state: phase, value: known ? value : null, size: GLYPH[variant] }),
|
|
3459
|
+
/* @__PURE__ */ jsxs30(View29, { style: stacked ? styles24.center : styles24.text, children: [
|
|
3460
|
+
/* @__PURE__ */ jsx34(Txt, { variant: variant === "page" ? "title" : "label", style: stacked ? styles24.centered : null, children: words2 }),
|
|
3461
|
+
detail ? /* @__PURE__ */ jsx34(Txt, { variant: "caption", tone: "secondary", style: stacked ? styles24.centered : null, children: detail }) : null
|
|
3306
3462
|
] })
|
|
3307
3463
|
] });
|
|
3308
3464
|
const a11y = { accessible: true, role: "progressbar", "aria-label": words2, "aria-busy": phase === "loading", accessibilityLiveRegion: "polite" };
|
|
3309
3465
|
if (variant === "overlay" || variant === "page")
|
|
3310
|
-
return /* @__PURE__ */
|
|
3311
|
-
return /* @__PURE__ */
|
|
3466
|
+
return /* @__PURE__ */ jsx34(View29, { ...a11y, style: [StyleSheet24.absoluteFill, styles24.cover, variant === "page" ? { backgroundColor: alpha(theme.surface0, 0.86) } : null, style], children: box });
|
|
3467
|
+
return /* @__PURE__ */ jsx34(View29, { ...a11y, style: [variant === "block" ? styles24.block : null, style], children: box });
|
|
3312
3468
|
}
|
|
3313
3469
|
var styles24 = StyleSheet24.create({
|
|
3314
3470
|
inline: { flexDirection: "row", alignItems: "center", gap: 10 },
|
|
@@ -3323,12 +3479,12 @@ var styles24 = StyleSheet24.create({
|
|
|
3323
3479
|
|
|
3324
3480
|
// src/native/mascot-state.tsx
|
|
3325
3481
|
import * as React24 from "react";
|
|
3326
|
-
import { AccessibilityInfo as AccessibilityInfo9, Animated as Animated13, Easing as Easing7, StyleSheet as StyleSheet25, View as
|
|
3482
|
+
import { AccessibilityInfo as AccessibilityInfo9, Animated as Animated13, Easing as Easing7, StyleSheet as StyleSheet25, View as View31 } from "react-native";
|
|
3327
3483
|
|
|
3328
3484
|
// src/native/mascots.tsx
|
|
3329
3485
|
import { useEffect as useEffect14, useState as useState22 } from "react";
|
|
3330
|
-
import { AccessibilityInfo as AccessibilityInfo8, Animated as Animated12, Easing as Easing6, View as
|
|
3331
|
-
import
|
|
3486
|
+
import { AccessibilityInfo as AccessibilityInfo8, Animated as Animated12, Easing as Easing6, View as View30 } from "react-native";
|
|
3487
|
+
import Svg17, { Circle as Circle11, Defs as Defs11, Ellipse as Ellipse2, G, LinearGradient as LinearGradient11, Path as Path15, Rect as Rect3, Stop as Stop11 } from "react-native-svg";
|
|
3332
3488
|
|
|
3333
3489
|
// src/mascots/geometry.ts
|
|
3334
3490
|
var mirror = (d) => d.replace(/(-?\d+(?:\.\d+)?) (-?\d+(?:\.\d+)?)/g, (_, x, y) => `${120 - Number(x)} ${y}`);
|
|
@@ -3449,6 +3605,46 @@ var BIRDS = {
|
|
|
3449
3605
|
details: ["M41 16.5 C42 11 52 11 53 16.5 C50 14.6 44 14.6 41 16.5 Z"],
|
|
3450
3606
|
beak: "M40.5 18.5 L19 22.5 L40.5 25.5 Z",
|
|
3451
3607
|
eyes: { at: [[45.5, 19.5]], white: 2.8, pupil: 1.6 }
|
|
3608
|
+
},
|
|
3609
|
+
/**
|
|
3610
|
+
* The magpie — the one that keeps the score: it counts the points, remembers every trophy and chatters with the
|
|
3611
|
+
* league. A sleek pied bird: a dark cap (the detail colour) over a round head, a white belly, a long tail behind it
|
|
3612
|
+
* (the detail colour), a short straight beak. It watches no one (that is the falcon): it counts.
|
|
3613
|
+
*/
|
|
3614
|
+
magpie: {
|
|
3615
|
+
shadow: [58, 110, 24, 3.5],
|
|
3616
|
+
legs: ["M53 95 L51 107 M47 107 L55 107", "M65 95 L67 107 M63 107 L71 107"],
|
|
3617
|
+
back: ["M72 88 C84 94 96 102 106 108 C104 111 100 112 97 110 C88 104 78 98 68 94 Z"],
|
|
3618
|
+
body: "M34 64 C34 44 84 44 84 64 C84 88 72 98 58 98 C44 98 34 88 34 64 Z",
|
|
3619
|
+
belly: "M43 70 C43 60 73 60 73 70 C73 84 67 90 58 90 C49 90 43 84 43 70 Z",
|
|
3620
|
+
wings: [
|
|
3621
|
+
{ d: "M35 58 C22 64 22 84 40 88 C36 78 35 68 35 58 Z", pivot: [35, 58] },
|
|
3622
|
+
{ d: "M83 58 C96 64 96 84 78 88 C82 78 83 68 83 58 Z", pivot: [83, 58] }
|
|
3623
|
+
],
|
|
3624
|
+
head: { cx: 58, cy: 36, r: 19 },
|
|
3625
|
+
details: ["M40 34 C40 22 48 16 58 16 C68 16 76 22 76 34 C70 29 64 28 58 28 C52 28 46 29 40 34 Z"],
|
|
3626
|
+
beak: "M53 42 L63 42 L58 50 Z",
|
|
3627
|
+
eyes: { at: [[50, 35], [66, 35]], white: 4.4, pupil: 2.3 }
|
|
3628
|
+
},
|
|
3629
|
+
/**
|
|
3630
|
+
* The beaver — the artisan that builds the shop, Akinaza's figure (and Canada's). Round and sturdy, sitting up: two
|
|
3631
|
+
* round ears and a nose (the detail colour), the two front teeth (the beak colour), small paws drawn as its wings,
|
|
3632
|
+
* and its flat paddle tail lying behind it. No feathers, the same moods.
|
|
3633
|
+
*/
|
|
3634
|
+
beaver: {
|
|
3635
|
+
shadow: [62, 110, 30, 3.5],
|
|
3636
|
+
legs: ["M50 100 L48 106 M43 106 L53 106", "M70 100 L72 106 M67 106 L77 106"],
|
|
3637
|
+
back: ["M74 94 C86 92 104 96 108 103 C106 110 90 111 76 104 Z"],
|
|
3638
|
+
body: "M30 72 C30 48 90 48 90 72 C90 96 78 104 60 104 C42 104 30 96 30 72 Z",
|
|
3639
|
+
belly: "M42 76 C42 64 78 64 78 76 C78 92 70 98 60 98 C50 98 42 92 42 76 Z",
|
|
3640
|
+
wings: [
|
|
3641
|
+
{ d: "M38 66 C28 70 30 84 42 84 C44 78 42 72 38 66 Z", pivot: [38, 66] },
|
|
3642
|
+
{ d: "M82 66 C92 70 90 84 78 84 C76 78 78 72 82 66 Z", pivot: [82, 66] }
|
|
3643
|
+
],
|
|
3644
|
+
head: { cx: 60, cy: 40, r: 22 },
|
|
3645
|
+
details: ["M37 30 C33 23 39 16 46 20 C43 23 40 26 37 30 Z", "M83 30 C87 23 81 16 74 20 C77 23 80 26 83 30 Z", "M55 45 C55 42 65 42 65 45 C65 48 62 49 60 49 C58 49 55 48 55 45 Z"],
|
|
3646
|
+
beak: "M56 51 H64 V58 C64 59.5 63 60 62 60 H58 C57 60 56 59.5 56 58 Z",
|
|
3647
|
+
eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 }
|
|
3452
3648
|
}
|
|
3453
3649
|
};
|
|
3454
3650
|
var MOOD_PARTS = {
|
|
@@ -3479,14 +3675,18 @@ var OWN_PALETTES = {
|
|
|
3479
3675
|
pigeon: { from: "#22d3ee", to: "#6366f1", wing: "#a855f7", detail: "#4338ca", beak: "#f59e0b", eye: "#1f2937" },
|
|
3480
3676
|
lovebird: { from: "#6ee7b7", to: "#059669", wing: "#047857", detail: "#fb7185", beak: "#f97316", eye: "#1f2937" },
|
|
3481
3677
|
// The sandhill crane (grue du Canada): sand-grey plumage, its red crown, dark legs and beak.
|
|
3482
|
-
crane: { from: "#ebe3d6", to: "#9c8f80", wing: "#7d7266", detail: "#dc2626", beak: "#44403c", eye: "#1f2937" }
|
|
3678
|
+
crane: { from: "#ebe3d6", to: "#9c8f80", wing: "#7d7266", detail: "#dc2626", beak: "#44403c", eye: "#1f2937" },
|
|
3679
|
+
// The Eurasian magpie (pie bavarde): slate and ink, the cobalt sheen of its wings, a dark beak.
|
|
3680
|
+
magpie: { from: "#64748b", to: "#1e293b", wing: "#1d4ed8", detail: "#0f172a", beak: "#334155", eye: "#1f2937" },
|
|
3681
|
+
// The North American beaver (castor du Canada): warm brown fur, a dark nose and tail, its orange front teeth.
|
|
3682
|
+
beaver: { from: "#b07a4a", to: "#6b4226", wing: "#5c3a21", detail: "#3f2716", beak: "#f59e0b", eye: "#1f2937" }
|
|
3483
3683
|
};
|
|
3484
3684
|
var LIGHT = "#ffffff";
|
|
3485
3685
|
var SHADE = "#000000";
|
|
3486
3686
|
var PARCEL = ["#f59e0b", "#d97706", "#b45309"];
|
|
3487
3687
|
|
|
3488
3688
|
// src/native/mascots.tsx
|
|
3489
|
-
import { jsx as
|
|
3689
|
+
import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3490
3690
|
function useBob(animated) {
|
|
3491
3691
|
const [y] = useState22(() => new Animated12.Value(0));
|
|
3492
3692
|
useEffect14(() => {
|
|
@@ -3520,52 +3720,52 @@ function Mascot({ bird = "owl", mood = "welcome", tone: tone3 = "brand", size =
|
|
|
3520
3720
|
const look3 = mood === "thinking" ? 1.4 : 0;
|
|
3521
3721
|
const rot = (deg, [x, y]) => `rotate(${deg} ${x} ${y})`;
|
|
3522
3722
|
const [wl, wr] = g.wings;
|
|
3523
|
-
return /* @__PURE__ */
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
3526
|
-
/* @__PURE__ */
|
|
3723
|
+
return /* @__PURE__ */ jsx35(View30, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx35(Animated12.View, { style: { transform: [{ translateY: bob }] }, children: /* @__PURE__ */ jsxs31(Svg17, { width: size, height: size, viewBox: "0 0 120 120", children: [
|
|
3724
|
+
/* @__PURE__ */ jsx35(Defs11, { children: /* @__PURE__ */ jsxs31(LinearGradient11, { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
3725
|
+
/* @__PURE__ */ jsx35(Stop11, { offset: "0%", stopColor: p.from }),
|
|
3726
|
+
/* @__PURE__ */ jsx35(Stop11, { offset: "100%", stopColor: p.to })
|
|
3527
3727
|
] }) }),
|
|
3528
|
-
/* @__PURE__ */
|
|
3529
|
-
mood === "empty" && /* @__PURE__ */
|
|
3530
|
-
g.legs.map((d) => /* @__PURE__ */
|
|
3531
|
-
g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */
|
|
3532
|
-
g.parcel?.map((d, i) => /* @__PURE__ */
|
|
3533
|
-
/* @__PURE__ */
|
|
3534
|
-
/* @__PURE__ */
|
|
3728
|
+
/* @__PURE__ */ jsx35(Ellipse2, { cx: g.shadow[0], cy: g.shadow[1], rx: g.shadow[2], ry: g.shadow[3], fill: SHADE, opacity: 0.14 }),
|
|
3729
|
+
mood === "empty" && /* @__PURE__ */ jsx35(Path15, { d: MOOD_PARTS.tray, stroke: outline, strokeWidth: 1.6, strokeDasharray: "3 3", fill: "none" }),
|
|
3730
|
+
g.legs.map((d) => /* @__PURE__ */ jsx35(Path15, { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round", fill: "none" }, d)),
|
|
3731
|
+
g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx35(Path15, { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx35(Path15, { d, stroke: outline, strokeWidth: 1.4, fill: "none" }, d)),
|
|
3732
|
+
g.parcel?.map((d, i) => /* @__PURE__ */ jsx35(Path15, { d, fill: PARCEL[i], ...line }, d)),
|
|
3733
|
+
/* @__PURE__ */ jsx35(Path15, { d: g.body, fill: body, ...line }),
|
|
3734
|
+
/* @__PURE__ */ jsx35(Path15, { d: g.belly, fill: LIGHT, opacity: 0.28 }),
|
|
3535
3735
|
[wl, wr].map((w, i) => {
|
|
3536
3736
|
const turn = mood === "success" ? i === 0 ? 28 : -28 : mood === "welcome" && i === 1 ? -20 : 0;
|
|
3537
|
-
return /* @__PURE__ */
|
|
3538
|
-
/* @__PURE__ */
|
|
3539
|
-
/* @__PURE__ */
|
|
3737
|
+
return /* @__PURE__ */ jsxs31(G, { transform: turn ? rot(turn, w.pivot) : void 0, children: [
|
|
3738
|
+
/* @__PURE__ */ jsx35(Path15, { d: w.d, fill: p.wing, ...line }),
|
|
3739
|
+
/* @__PURE__ */ jsx35(Path15, { d: w.d, fill: SHADE, opacity: 0.16 })
|
|
3540
3740
|
] }, i);
|
|
3541
3741
|
}),
|
|
3542
|
-
g.neck && /* @__PURE__ */
|
|
3543
|
-
g.head.r > 0 && /* @__PURE__ */
|
|
3544
|
-
g.details.map((d) => /* @__PURE__ */
|
|
3545
|
-
g.visor && /* @__PURE__ */
|
|
3742
|
+
g.neck && /* @__PURE__ */ jsx35(Path15, { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round", fill: "none" }),
|
|
3743
|
+
g.head.r > 0 && /* @__PURE__ */ jsx35(Circle11, { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
|
|
3744
|
+
g.details.map((d) => /* @__PURE__ */ jsx35(Path15, { d, fill: p.detail, ...line }, d)),
|
|
3745
|
+
g.visor && /* @__PURE__ */ jsx35(Rect3, { x: g.visor.x, y: g.visor.y, width: g.visor.w, height: g.visor.h, rx: 4, fill: theme.surface0, ...line }),
|
|
3546
3746
|
g.eyes.at.map(
|
|
3547
|
-
(at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */
|
|
3548
|
-
/* @__PURE__ */
|
|
3549
|
-
/* @__PURE__ */
|
|
3550
|
-
/* @__PURE__ */
|
|
3551
|
-
] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */
|
|
3552
|
-
g.eyes.white > 0 && /* @__PURE__ */
|
|
3553
|
-
/* @__PURE__ */
|
|
3747
|
+
(at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */ jsxs31(G, { children: [
|
|
3748
|
+
/* @__PURE__ */ jsx35(Circle11, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
|
|
3749
|
+
/* @__PURE__ */ jsx35(Circle11, { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
|
|
3750
|
+
/* @__PURE__ */ jsx35(Path15, { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
|
|
3751
|
+
] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */ jsx35(Path15, { d: mood === "success" ? archEye(at, eyeR * 0.85) : lidEye(at, eyeR * 0.8), stroke: g.visor ? p.eye : outline, strokeWidth: 2.2, strokeLinecap: "round", fill: "none" }, i) : /* @__PURE__ */ jsxs31(G, { children: [
|
|
3752
|
+
g.eyes.white > 0 && /* @__PURE__ */ jsx35(Circle11, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
|
|
3753
|
+
/* @__PURE__ */ jsx35(Circle11, { cx: at[0] + look3, cy: at[1] - look3, r: g.eyes.pupil, fill: g.visor ? p.eye : SHADE })
|
|
3554
3754
|
] }, i)
|
|
3555
3755
|
),
|
|
3556
|
-
g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */
|
|
3557
|
-
mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */
|
|
3558
|
-
/* @__PURE__ */
|
|
3559
|
-
mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */
|
|
3560
|
-
(mood === "success" || mood === "error") && /* @__PURE__ */
|
|
3561
|
-
mood === "success" && /* @__PURE__ */
|
|
3562
|
-
mood === "error" && /* @__PURE__ */
|
|
3563
|
-
mood === "error" && /* @__PURE__ */
|
|
3756
|
+
g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */ jsx35(Circle11, { cx: x, cy: y, r: 6.5, fill: "none", stroke: outline, strokeWidth: 1.3 }, x)),
|
|
3757
|
+
mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */ jsx35(Path15, { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: outline, strokeWidth: 2, strokeLinecap: "round" }, i)),
|
|
3758
|
+
/* @__PURE__ */ jsx35(Path15, { d: g.beak, fill: p.beak, ...line }),
|
|
3759
|
+
mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */ jsx35(Circle11, { cx, cy, r, fill: theme.textSecondary, opacity: 0.5 + i * 0.25 }, cx)),
|
|
3760
|
+
(mood === "success" || mood === "error") && /* @__PURE__ */ jsx35(Circle11, { cx: MOOD_PARTS.badge.cx, cy: MOOD_PARTS.badge.cy, r: MOOD_PARTS.badge.r, fill: mood === "success" ? theme.success : theme.danger }),
|
|
3761
|
+
mood === "success" && /* @__PURE__ */ jsx35(Path15, { d: MOOD_PARTS.check, stroke: theme.surface0, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
|
|
3762
|
+
mood === "error" && /* @__PURE__ */ jsx35(Path15, { d: MOOD_PARTS.bang.line, stroke: theme.surface0, strokeWidth: 2.8, strokeLinecap: "round" }),
|
|
3763
|
+
mood === "error" && /* @__PURE__ */ jsx35(Circle11, { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: theme.surface0 })
|
|
3564
3764
|
] }) }) });
|
|
3565
3765
|
}
|
|
3566
3766
|
|
|
3567
3767
|
// src/native/mascot-state.tsx
|
|
3568
|
-
import { jsx as
|
|
3768
|
+
import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3569
3769
|
var SIZE = { sm: 64, md: 96, lg: 128 };
|
|
3570
3770
|
function useArrival(animated) {
|
|
3571
3771
|
const [value] = React24.useState(() => new Animated13.Value(animated ? 0 : 1));
|
|
@@ -3586,7 +3786,7 @@ function useArrival(animated) {
|
|
|
3586
3786
|
function MascotState({ bird = "owl", mood = "empty", title, description, action, size = "md", layout = "stacked", tone: tone3, animated = true, style, ...props }) {
|
|
3587
3787
|
const opacity = useArrival(animated);
|
|
3588
3788
|
const inline = layout === "inline";
|
|
3589
|
-
return /* @__PURE__ */
|
|
3789
|
+
return /* @__PURE__ */ jsxs32(
|
|
3590
3790
|
Animated13.View,
|
|
3591
3791
|
{
|
|
3592
3792
|
role: mood === "error" ? "alert" : "status",
|
|
@@ -3595,20 +3795,20 @@ function MascotState({ bird = "owl", mood = "empty", title, description, action,
|
|
|
3595
3795
|
...props,
|
|
3596
3796
|
style: [inline ? styles25.inline : styles25.stacked, { opacity, transform: [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }, style],
|
|
3597
3797
|
children: [
|
|
3598
|
-
/* @__PURE__ */
|
|
3599
|
-
/* @__PURE__ */
|
|
3600
|
-
/* @__PURE__ */
|
|
3601
|
-
description ? /* @__PURE__ */
|
|
3602
|
-
action ? /* @__PURE__ */
|
|
3798
|
+
/* @__PURE__ */ jsx36(Mascot, { bird, mood, tone: tone3, size: SIZE[size], animated }),
|
|
3799
|
+
/* @__PURE__ */ jsxs32(View31, { style: inline ? styles25.wordsInline : styles25.words, children: [
|
|
3800
|
+
/* @__PURE__ */ jsx36(Txt, { variant: "label", role: "heading", style: inline ? null : styles25.center, children: title }),
|
|
3801
|
+
description ? /* @__PURE__ */ jsx36(Txt, { tone: "secondary", style: inline ? null : styles25.center, children: description }) : null,
|
|
3802
|
+
action ? /* @__PURE__ */ jsx36(View31, { style: [styles25.action, inline ? null : styles25.actionCentred], children: action }) : null
|
|
3603
3803
|
] })
|
|
3604
3804
|
]
|
|
3605
3805
|
}
|
|
3606
3806
|
);
|
|
3607
3807
|
}
|
|
3608
|
-
var ErrorState = (props) => /* @__PURE__ */
|
|
3609
|
-
var SuccessState = (props) => /* @__PURE__ */
|
|
3610
|
-
var LoadingState = (props) => /* @__PURE__ */
|
|
3611
|
-
var WelcomeState = (props) => /* @__PURE__ */
|
|
3808
|
+
var ErrorState = (props) => /* @__PURE__ */ jsx36(MascotState, { mood: "error", ...props });
|
|
3809
|
+
var SuccessState = (props) => /* @__PURE__ */ jsx36(MascotState, { mood: "success", ...props });
|
|
3810
|
+
var LoadingState = (props) => /* @__PURE__ */ jsx36(MascotState, { mood: "thinking", ...props });
|
|
3811
|
+
var WelcomeState = (props) => /* @__PURE__ */ jsx36(MascotState, { mood: "welcome", ...props });
|
|
3612
3812
|
var styles25 = StyleSheet25.create({
|
|
3613
3813
|
stacked: { alignItems: "center", justifyContent: "center", gap: 12, paddingVertical: 40, paddingHorizontal: 24 },
|
|
3614
3814
|
inline: { flexDirection: "row", alignItems: "center", gap: 16 },
|
|
@@ -3621,9 +3821,9 @@ var styles25 = StyleSheet25.create({
|
|
|
3621
3821
|
|
|
3622
3822
|
// src/native/match-dialog.tsx
|
|
3623
3823
|
import * as React25 from "react";
|
|
3624
|
-
import { AccessibilityInfo as AccessibilityInfo10, Animated as Animated14, Easing as Easing8, Modal as Modal4, Pressable as Pressable14, StyleSheet as StyleSheet26, View as
|
|
3625
|
-
import
|
|
3626
|
-
import { jsx as
|
|
3824
|
+
import { AccessibilityInfo as AccessibilityInfo10, Animated as Animated14, Easing as Easing8, Modal as Modal4, Pressable as Pressable14, StyleSheet as StyleSheet26, View as View32 } from "react-native";
|
|
3825
|
+
import Svg18, { Path as Path16 } from "react-native-svg";
|
|
3826
|
+
import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3627
3827
|
function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel }) {
|
|
3628
3828
|
const { theme, haptic } = useTheme();
|
|
3629
3829
|
const reduce = useReducedMotion();
|
|
@@ -3643,17 +3843,17 @@ function MatchDialog({ open, onOpenChange, title, description, people, primaryLa
|
|
|
3643
3843
|
}
|
|
3644
3844
|
}, [open, reduce, t]);
|
|
3645
3845
|
const side = (dir) => ({ transform: [{ translateX: t.interpolate({ inputRange: [0, 1], outputRange: [dir * 110, dir * 50] }) }, { rotate: dir === -1 ? "-8deg" : "8deg" }] });
|
|
3646
|
-
return /* @__PURE__ */
|
|
3647
|
-
/* @__PURE__ */
|
|
3648
|
-
/* @__PURE__ */
|
|
3649
|
-
description ? /* @__PURE__ */
|
|
3650
|
-
/* @__PURE__ */
|
|
3651
|
-
/* @__PURE__ */
|
|
3652
|
-
/* @__PURE__ */
|
|
3653
|
-
/* @__PURE__ */
|
|
3846
|
+
return /* @__PURE__ */ jsx37(Modal4, { ...modalName(title), visible: open, transparent: true, animationType: reduce ? "none" : "fade", onRequestClose: () => onOpenChange(false), statusBarTranslucent: true, children: /* @__PURE__ */ jsxs33(View32, { accessibilityViewIsModal: true, style: [styles26.screen, { backgroundColor: theme.accent }], children: [
|
|
3847
|
+
/* @__PURE__ */ jsx37(View32, { style: [StyleSheet26.absoluteFill, { backgroundColor: theme.accent2, opacity: 0.55 }] }),
|
|
3848
|
+
/* @__PURE__ */ jsx37(Txt, { variant: "display", tone: "onAccent", style: styles26.title, children: title }),
|
|
3849
|
+
description ? /* @__PURE__ */ jsx37(Txt, { tone: "onAccent", style: styles26.center, children: description }) : null,
|
|
3850
|
+
/* @__PURE__ */ jsxs33(View32, { style: styles26.pair, "aria-hidden": true, children: [
|
|
3851
|
+
/* @__PURE__ */ jsx37(Animated14.View, { style: [styles26.photo, side(-1), { borderColor: theme.onAccent }], children: /* @__PURE__ */ jsx37(Avatar, { src: people[0].src, alt: "", fallback: people[0].name.charAt(0), size: 112 }) }),
|
|
3852
|
+
/* @__PURE__ */ jsx37(Animated14.View, { style: [styles26.photo, side(1), { borderColor: theme.onAccent }], children: /* @__PURE__ */ jsx37(Avatar, { src: people[1].src, alt: "", fallback: people[1].name.charAt(0), size: 112 }) }),
|
|
3853
|
+
/* @__PURE__ */ jsx37(Animated14.View, { style: [styles26.heart, { backgroundColor: theme.onAccent, transform: [{ scale: t }] }], children: /* @__PURE__ */ jsx37(Svg18, { width: 26, height: 26, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx37(Path16, { d: "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z", fill: theme.accent }) }) })
|
|
3654
3854
|
] }),
|
|
3655
|
-
/* @__PURE__ */
|
|
3656
|
-
/* @__PURE__ */
|
|
3855
|
+
/* @__PURE__ */ jsxs33(View32, { style: styles26.actions, children: [
|
|
3856
|
+
/* @__PURE__ */ jsx37(
|
|
3657
3857
|
Button,
|
|
3658
3858
|
{
|
|
3659
3859
|
label: primaryLabel,
|
|
@@ -3664,7 +3864,7 @@ function MatchDialog({ open, onOpenChange, title, description, people, primaryLa
|
|
|
3664
3864
|
}
|
|
3665
3865
|
}
|
|
3666
3866
|
),
|
|
3667
|
-
/* @__PURE__ */
|
|
3867
|
+
/* @__PURE__ */ jsx37(Pressable14, { role: "button", onPress: () => onOpenChange(false), style: ({ pressed }) => [styles26.secondary, { borderColor: theme.onAccent, opacity: pressed ? 0.8 : 1 }], children: /* @__PURE__ */ jsx37(Txt, { variant: "label", tone: "onAccent", children: secondaryLabel }) })
|
|
3668
3868
|
] })
|
|
3669
3869
|
] }) });
|
|
3670
3870
|
}
|
|
@@ -3680,9 +3880,9 @@ var styles26 = StyleSheet26.create({
|
|
|
3680
3880
|
});
|
|
3681
3881
|
|
|
3682
3882
|
// src/native/meter.tsx
|
|
3683
|
-
import { StyleSheet as StyleSheet27, View as
|
|
3684
|
-
import
|
|
3685
|
-
import { jsx as
|
|
3883
|
+
import { StyleSheet as StyleSheet27, View as View33 } from "react-native";
|
|
3884
|
+
import Svg19, { Circle as Circle12 } from "react-native-svg";
|
|
3885
|
+
import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3686
3886
|
var THICK = { sm: 6, md: 8, lg: 12 };
|
|
3687
3887
|
var RING = { sm: 56, md: 96, lg: 144 };
|
|
3688
3888
|
var partColor = (t, i) => [t.accent, t.warning, t.success, t.textSecondary, t.danger][i % 5];
|
|
@@ -3695,10 +3895,10 @@ function Meter({ label, value = 0, min = 0, max = 100, valueText, thresholds, op
|
|
|
3695
3895
|
const words2 = valueText ?? `${Math.round(ratio * 100)} %`;
|
|
3696
3896
|
const shares = (parts ?? []).map((p, i) => ({ ...p, color: partColor(theme, i), ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round(p.value / span * 100)} %` }));
|
|
3697
3897
|
const a11y = parts ? { role: "group", "aria-label": `${label}: ${shares.map((p) => `${p.label} ${p.words}`).join(", ")}` } : { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-valuetext": words2 };
|
|
3698
|
-
const legend = parts ? /* @__PURE__ */
|
|
3699
|
-
/* @__PURE__ */
|
|
3700
|
-
/* @__PURE__ */
|
|
3701
|
-
/* @__PURE__ */
|
|
3898
|
+
const legend = parts ? /* @__PURE__ */ jsx38(View33, { style: styles27.legend, "aria-hidden": true, children: shares.map((p, i) => /* @__PURE__ */ jsxs34(View33, { style: styles27.legendItem, children: [
|
|
3899
|
+
/* @__PURE__ */ jsx38(View33, { style: [styles27.swatch, { backgroundColor: p.color }] }),
|
|
3900
|
+
/* @__PURE__ */ jsx38(Txt, { variant: "caption", children: p.label }),
|
|
3901
|
+
/* @__PURE__ */ jsx38(Txt, { variant: "caption", tone: "secondary", children: p.words })
|
|
3702
3902
|
] }, i)) }) : null;
|
|
3703
3903
|
if (variant === "ring") {
|
|
3704
3904
|
const side = RING[size];
|
|
@@ -3710,23 +3910,23 @@ function Meter({ label, value = 0, min = 0, max = 100, valueText, thresholds, op
|
|
|
3710
3910
|
offset += p.ratio;
|
|
3711
3911
|
return arc;
|
|
3712
3912
|
}) : [{ color: tone3, len: ratio, start: 0 }];
|
|
3713
|
-
return /* @__PURE__ */
|
|
3714
|
-
/* @__PURE__ */
|
|
3715
|
-
/* @__PURE__ */
|
|
3716
|
-
/* @__PURE__ */
|
|
3717
|
-
arcs.map((a, i) => /* @__PURE__ */
|
|
3913
|
+
return /* @__PURE__ */ jsxs34(View33, { accessible: true, ...a11y, style: [styles27.ringRoot, style], children: [
|
|
3914
|
+
/* @__PURE__ */ jsxs34(View33, { style: { width: side, height: side }, children: [
|
|
3915
|
+
/* @__PURE__ */ jsxs34(Svg19, { width: side, height: side, viewBox: "0 0 100 100", style: { transform: [{ rotate: "-90deg" }] }, children: [
|
|
3916
|
+
/* @__PURE__ */ jsx38(Circle12, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: 9 }),
|
|
3917
|
+
arcs.map((a, i) => /* @__PURE__ */ jsx38(Circle12, { cx: 50, cy: 50, r, fill: "none", stroke: a.color, strokeWidth: 9, strokeDasharray: `${Math.max(0, a.len * c - (parts ? 2 : 0))} ${c}`, strokeDashoffset: -a.start * c, strokeLinecap: parts ? "butt" : "round" }, i))
|
|
3718
3918
|
] }),
|
|
3719
|
-
children !== void 0 ? /* @__PURE__ */
|
|
3919
|
+
children !== void 0 ? /* @__PURE__ */ jsx38(View33, { style: [StyleSheet27.absoluteFill, styles27.center], children }) : null
|
|
3720
3920
|
] }),
|
|
3721
3921
|
legend
|
|
3722
3922
|
] });
|
|
3723
3923
|
}
|
|
3724
|
-
return /* @__PURE__ */
|
|
3725
|
-
showLabel ? /* @__PURE__ */
|
|
3726
|
-
/* @__PURE__ */
|
|
3727
|
-
!parts ? /* @__PURE__ */
|
|
3924
|
+
return /* @__PURE__ */ jsxs34(View33, { accessible: true, ...a11y, style: [styles27.root, style], children: [
|
|
3925
|
+
showLabel ? /* @__PURE__ */ jsxs34(View33, { style: styles27.header, "aria-hidden": true, children: [
|
|
3926
|
+
/* @__PURE__ */ jsx38(Txt, { variant: "caption", numberOfLines: 1, style: styles27.caption, children: label }),
|
|
3927
|
+
!parts ? /* @__PURE__ */ jsx38(Txt, { variant: "caption", tone: "secondary", children: words2 }) : null
|
|
3728
3928
|
] }) : null,
|
|
3729
|
-
/* @__PURE__ */
|
|
3929
|
+
/* @__PURE__ */ jsx38(View33, { style: [styles27.track, { height: THICK[size], backgroundColor: theme.surface3 }], children: parts ? shares.map((p, i) => /* @__PURE__ */ jsx38(View33, { style: { width: `${p.ratio * 100}%`, backgroundColor: p.color } }, i)) : /* @__PURE__ */ jsx38(View33, { style: [styles27.fill, { width: `${ratio * 100}%`, backgroundColor: tone3 }] }) }),
|
|
3730
3930
|
legend
|
|
3731
3931
|
] });
|
|
3732
3932
|
}
|
|
@@ -3746,7 +3946,7 @@ var styles27 = StyleSheet27.create({
|
|
|
3746
3946
|
// src/native/number-ticker.tsx
|
|
3747
3947
|
import * as React26 from "react";
|
|
3748
3948
|
import { AccessibilityInfo as AccessibilityInfo11, Animated as Animated15, Easing as Easing9, Text as Text13 } from "react-native";
|
|
3749
|
-
import { jsx as
|
|
3949
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
3750
3950
|
function NumberTicker({ value, locale, format, trigger = "mount", duration = 1100, announce, variant = "display", tone: tone3 = "text", style }) {
|
|
3751
3951
|
const reduce = useReducedMotion();
|
|
3752
3952
|
const writer = React26.useMemo(() => new Intl.NumberFormat(locale, format), [locale, format]);
|
|
@@ -3774,13 +3974,13 @@ function NumberTicker({ value, locale, format, trigger = "mount", duration = 110
|
|
|
3774
3974
|
};
|
|
3775
3975
|
}, [value, reduce, trigger, duration, announce, anim, writer]);
|
|
3776
3976
|
const digits = Number.isInteger(value) ? Math.round(shown) : shown;
|
|
3777
|
-
return /* @__PURE__ */
|
|
3977
|
+
return /* @__PURE__ */ jsx39(Txt, { variant, tone: tone3, "aria-label": writer.format(value), style: [{ fontVariant: ["tabular-nums"] }, style], children: /* @__PURE__ */ jsx39(Text13, { "aria-hidden": true, children: writer.format(digits) }) });
|
|
3778
3978
|
}
|
|
3779
3979
|
|
|
3780
3980
|
// src/native/onboarding.tsx
|
|
3781
3981
|
import * as React27 from "react";
|
|
3782
|
-
import { ScrollView as ScrollView5, StyleSheet as StyleSheet28, View as
|
|
3783
|
-
import { jsx as
|
|
3982
|
+
import { ScrollView as ScrollView5, StyleSheet as StyleSheet28, View as View34 } from "react-native";
|
|
3983
|
+
import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3784
3984
|
function Onboarding({ slides, labels, onDone, style }) {
|
|
3785
3985
|
const { theme, insets, haptic } = useTheme();
|
|
3786
3986
|
const [width, setWidth] = React27.useState(0);
|
|
@@ -3795,15 +3995,15 @@ function Onboarding({ slides, labels, onDone, style }) {
|
|
|
3795
3995
|
const onScroll = (e) => {
|
|
3796
3996
|
if (width > 0) setPage(Math.round(e.nativeEvent.contentOffset.x / width));
|
|
3797
3997
|
};
|
|
3798
|
-
return /* @__PURE__ */
|
|
3799
|
-
/* @__PURE__ */
|
|
3800
|
-
/* @__PURE__ */
|
|
3801
|
-
slide.visual ? /* @__PURE__ */
|
|
3802
|
-
/* @__PURE__ */
|
|
3803
|
-
/* @__PURE__ */
|
|
3998
|
+
return /* @__PURE__ */ jsxs35(View34, { style: [styles28.root, { backgroundColor: theme.surface0, paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
|
|
3999
|
+
/* @__PURE__ */ jsx40(View34, { style: styles28.top, children: !last ? /* @__PURE__ */ jsx40(Button, { label: labels.skip, variant: "ghost", size: "sm", onPress: onDone }) : /* @__PURE__ */ jsx40(View34, { style: styles28.spacer }) }),
|
|
4000
|
+
/* @__PURE__ */ jsx40(ScrollView5, { ref: scroller, tabIndex: 0, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onMomentumScrollEnd: onScroll, style: styles28.flex, children: slides.map((slide, i) => /* @__PURE__ */ jsxs35(View34, { style: [styles28.slide, { width: width || void 0 }], accessible: true, "aria-label": `${labels.position(i + 1, slides.length)}. ${slide.title}. ${slide.description}`, "aria-hidden": i !== page, children: [
|
|
4001
|
+
slide.visual ? /* @__PURE__ */ jsx40(View34, { style: styles28.visual, children: slide.visual }) : null,
|
|
4002
|
+
/* @__PURE__ */ jsx40(Txt, { variant: "display", style: styles28.centred, children: slide.title }),
|
|
4003
|
+
/* @__PURE__ */ jsx40(Txt, { tone: "secondary", style: [styles28.centred, styles28.description], children: slide.description })
|
|
3804
4004
|
] }, i)) }),
|
|
3805
|
-
/* @__PURE__ */
|
|
3806
|
-
/* @__PURE__ */
|
|
4005
|
+
/* @__PURE__ */ jsx40(View34, { style: styles28.dots, "aria-hidden": true, children: slides.map((_, i) => /* @__PURE__ */ jsx40(View34, { style: [styles28.dot, { width: i === page ? 22 : 8, backgroundColor: i === page ? theme.accent : theme.borderStrong }] }, i)) }),
|
|
4006
|
+
/* @__PURE__ */ jsx40(View34, { style: styles28.bottom, children: /* @__PURE__ */ jsx40(Button, { label: last ? labels.done : labels.next, variant: last ? "gradient" : "primary", size: "lg", onPress: () => last ? onDone() : go(page + 1) }) })
|
|
3807
4007
|
] });
|
|
3808
4008
|
}
|
|
3809
4009
|
var styles28 = StyleSheet28.create({
|
|
@@ -3822,8 +4022,8 @@ var styles28 = StyleSheet28.create({
|
|
|
3822
4022
|
|
|
3823
4023
|
// src/native/otp-input.tsx
|
|
3824
4024
|
import * as React28 from "react";
|
|
3825
|
-
import { Platform as Platform2, Pressable as Pressable15, StyleSheet as StyleSheet29, TextInput as TextInput5, View as
|
|
3826
|
-
import { jsx as
|
|
4025
|
+
import { Platform as Platform2, Pressable as Pressable15, StyleSheet as StyleSheet29, TextInput as TextInput5, View as View35 } from "react-native";
|
|
4026
|
+
import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3827
4027
|
function OtpInput({ label, length = 6, value, onValueChange, onComplete, mode = "numeric", invalid, disabled, autoFocus, style }) {
|
|
3828
4028
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
3829
4029
|
const [own, setOwn] = React28.useState("");
|
|
@@ -3842,11 +4042,11 @@ function OtpInput({ label, length = 6, value, onValueChange, onComplete, mode =
|
|
|
3842
4042
|
onComplete?.(next);
|
|
3843
4043
|
}
|
|
3844
4044
|
};
|
|
3845
|
-
return /* @__PURE__ */
|
|
3846
|
-
/* @__PURE__ */
|
|
4045
|
+
return /* @__PURE__ */ jsxs36(Pressable15, { onPress: () => input.current?.focus(), disabled, accessible: false, style: [styles29.root, style], children: [
|
|
4046
|
+
/* @__PURE__ */ jsx41(View35, { style: styles29.boxes, "aria-hidden": true, children: Array.from({ length }, (_, i) => {
|
|
3847
4047
|
const active = focused && i === Math.min(code.length, length - 1);
|
|
3848
|
-
return /* @__PURE__ */
|
|
3849
|
-
|
|
4048
|
+
return /* @__PURE__ */ jsx41(
|
|
4049
|
+
View35,
|
|
3850
4050
|
{
|
|
3851
4051
|
style: [
|
|
3852
4052
|
styles29.box,
|
|
@@ -3857,12 +4057,12 @@ function OtpInput({ label, length = 6, value, onValueChange, onComplete, mode =
|
|
|
3857
4057
|
borderWidth: invalid || active ? 2 : 1
|
|
3858
4058
|
}
|
|
3859
4059
|
],
|
|
3860
|
-
children: /* @__PURE__ */
|
|
4060
|
+
children: /* @__PURE__ */ jsx41(Txt, { variant: "title", children: code[i] ?? "" })
|
|
3861
4061
|
},
|
|
3862
4062
|
i
|
|
3863
4063
|
);
|
|
3864
4064
|
}) }),
|
|
3865
|
-
/* @__PURE__ */
|
|
4065
|
+
/* @__PURE__ */ jsx41(
|
|
3866
4066
|
TextInput5,
|
|
3867
4067
|
{
|
|
3868
4068
|
ref: input,
|
|
@@ -3894,11 +4094,11 @@ var styles29 = StyleSheet29.create({
|
|
|
3894
4094
|
});
|
|
3895
4095
|
|
|
3896
4096
|
// src/native/pagination.tsx
|
|
3897
|
-
import { Pressable as Pressable16, StyleSheet as StyleSheet30, Text as Text14, View as
|
|
3898
|
-
import
|
|
3899
|
-
import { jsx as
|
|
4097
|
+
import { Pressable as Pressable16, StyleSheet as StyleSheet30, Text as Text14, View as View36 } from "react-native";
|
|
4098
|
+
import Svg20, { Path as Path17 } from "react-native-svg";
|
|
4099
|
+
import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3900
4100
|
function Chevron3({ direction, color }) {
|
|
3901
|
-
return /* @__PURE__ */
|
|
4101
|
+
return /* @__PURE__ */ jsx42(Svg20, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx42(Path17, { d: direction === "left" ? "m15 6-6 6 6 6" : "m9 6 6 6-6 6" }) });
|
|
3902
4102
|
}
|
|
3903
4103
|
function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, onPrevious, onNext, status, disabled, labels, style }) {
|
|
3904
4104
|
const { theme, radius: radius3 } = useTheme();
|
|
@@ -3907,7 +4107,7 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
|
|
|
3907
4107
|
const current = Math.min(Math.max(1, page), count);
|
|
3908
4108
|
const canPrevious = !disabled && (paged ? current > 1 : Boolean(hasPrevious));
|
|
3909
4109
|
const canNext = !disabled && (paged ? current < count : Boolean(hasNext));
|
|
3910
|
-
const button = (direction, enabled, onPress, label) => /* @__PURE__ */
|
|
4110
|
+
const button = (direction, enabled, onPress, label) => /* @__PURE__ */ jsx42(
|
|
3911
4111
|
Pressable16,
|
|
3912
4112
|
{
|
|
3913
4113
|
role: "button",
|
|
@@ -3920,13 +4120,13 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
|
|
|
3920
4120
|
styles30.button,
|
|
3921
4121
|
{ borderRadius: radius3.sm, borderColor: theme.borderDefault, backgroundColor: theme.surface1, opacity: enabled ? pressed ? 0.8 : 1 : 0.4 }
|
|
3922
4122
|
],
|
|
3923
|
-
children: /* @__PURE__ */
|
|
4123
|
+
children: /* @__PURE__ */ jsx42(Chevron3, { direction, color: theme.textPrimary })
|
|
3924
4124
|
}
|
|
3925
4125
|
);
|
|
3926
4126
|
const text = status ?? (paged ? labels.compact(current, count) : null);
|
|
3927
|
-
return /* @__PURE__ */
|
|
4127
|
+
return /* @__PURE__ */ jsxs37(View36, { role: "navigation", style: [styles30.row, style], children: [
|
|
3928
4128
|
button("left", canPrevious, paged ? () => onPageChange?.(current - 1) : onPrevious, labels.previous),
|
|
3929
|
-
text ? /* @__PURE__ */
|
|
4129
|
+
text ? /* @__PURE__ */ jsx42(Text14, { "aria-live": "polite", style: [styles30.status, { color: theme.textSecondary }], children: text }) : null,
|
|
3930
4130
|
button("right", canNext, paged ? () => onPageChange?.(current + 1) : onNext, labels.next)
|
|
3931
4131
|
] });
|
|
3932
4132
|
}
|
|
@@ -3937,8 +4137,8 @@ var styles30 = StyleSheet30.create({
|
|
|
3937
4137
|
});
|
|
3938
4138
|
|
|
3939
4139
|
// src/native/permission-prompt.tsx
|
|
3940
|
-
import { StyleSheet as StyleSheet31, View as
|
|
3941
|
-
import { Fragment as Fragment6, jsx as
|
|
4140
|
+
import { StyleSheet as StyleSheet31, View as View37 } from "react-native";
|
|
4141
|
+
import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
3942
4142
|
function PermissionPrompt({
|
|
3943
4143
|
status,
|
|
3944
4144
|
title,
|
|
@@ -3955,15 +4155,15 @@ function PermissionPrompt({
|
|
|
3955
4155
|
style
|
|
3956
4156
|
}) {
|
|
3957
4157
|
const { theme, radius: radius3 } = useTheme();
|
|
3958
|
-
if (status === "granted") return /* @__PURE__ */
|
|
4158
|
+
if (status === "granted") return /* @__PURE__ */ jsx43(Fragment6, { children: children ?? null });
|
|
3959
4159
|
const blocked = status === "blocked" || status === "denied" && Boolean(onOpenSettings);
|
|
3960
|
-
return /* @__PURE__ */
|
|
3961
|
-
/* @__PURE__ */
|
|
3962
|
-
/* @__PURE__ */
|
|
3963
|
-
/* @__PURE__ */
|
|
3964
|
-
/* @__PURE__ */
|
|
3965
|
-
blocked && settingsLabel && onOpenSettings ? /* @__PURE__ */
|
|
3966
|
-
dismissLabel && onDismiss ? /* @__PURE__ */
|
|
4160
|
+
return /* @__PURE__ */ jsxs38(View37, { style: [styles31.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style], children: [
|
|
4161
|
+
/* @__PURE__ */ jsx43(Mascot, { bird: mascot, mood: blocked ? "error" : "welcome", size: 104 }),
|
|
4162
|
+
/* @__PURE__ */ jsx43(Txt, { variant: "title", style: styles31.centred, children: title }),
|
|
4163
|
+
/* @__PURE__ */ jsx43(Txt, { tone: "secondary", style: styles31.centred, children: blocked && blockedDescription ? blockedDescription : description }),
|
|
4164
|
+
/* @__PURE__ */ jsxs38(View37, { style: styles31.actions, children: [
|
|
4165
|
+
blocked && settingsLabel && onOpenSettings ? /* @__PURE__ */ jsx43(Button, { label: settingsLabel, variant: "primary", onPress: onOpenSettings }) : /* @__PURE__ */ jsx43(Button, { label: allowLabel, variant: "primary", onPress: onAllow }),
|
|
4166
|
+
dismissLabel && onDismiss ? /* @__PURE__ */ jsx43(Button, { label: dismissLabel, variant: "ghost", onPress: onDismiss }) : null
|
|
3967
4167
|
] })
|
|
3968
4168
|
] });
|
|
3969
4169
|
}
|
|
@@ -3975,8 +4175,8 @@ var styles31 = StyleSheet31.create({
|
|
|
3975
4175
|
|
|
3976
4176
|
// src/native/phoenix.tsx
|
|
3977
4177
|
import { useEffect as useEffect19, useState as useState28 } from "react";
|
|
3978
|
-
import { AccessibilityInfo as AccessibilityInfo12, Animated as Animated16, Easing as Easing10, View as
|
|
3979
|
-
import
|
|
4178
|
+
import { AccessibilityInfo as AccessibilityInfo12, Animated as Animated16, Easing as Easing10, View as View38 } from "react-native";
|
|
4179
|
+
import Svg21, { Circle as Circle13, Defs as Defs12, LinearGradient as LinearGradient12, Path as Path18, RadialGradient as RadialGradient9, Stop as Stop12 } from "react-native-svg";
|
|
3980
4180
|
|
|
3981
4181
|
// src/mascots/phoenix-geometry.ts
|
|
3982
4182
|
var PHOENIX = {
|
|
@@ -3999,7 +4199,7 @@ var PHOENIX_PALETTES = {
|
|
|
3999
4199
|
};
|
|
4000
4200
|
|
|
4001
4201
|
// src/native/phoenix.tsx
|
|
4002
|
-
import { jsx as
|
|
4202
|
+
import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
4003
4203
|
function useFloat(animated) {
|
|
4004
4204
|
const [y] = useState28(() => new Animated16.Value(0));
|
|
4005
4205
|
useEffect19(() => {
|
|
@@ -4024,37 +4224,37 @@ function Phoenix({ tone: tone3 = "own", size = 120, animated = true, title, styl
|
|
|
4024
4224
|
const id = useSvgId("kzp");
|
|
4025
4225
|
const y = useFloat(animated);
|
|
4026
4226
|
const p = tone3 === "brand" ? { left: [theme.accent2, theme.accent], right: [theme.accent, theme.accent2], core: ["#ffffff", theme.accent], body: theme.surface3, edge: theme.borderStrong, crest: theme.accent } : PHOENIX_PALETTES.own;
|
|
4027
|
-
return /* @__PURE__ */
|
|
4028
|
-
/* @__PURE__ */
|
|
4029
|
-
/* @__PURE__ */
|
|
4030
|
-
/* @__PURE__ */
|
|
4031
|
-
/* @__PURE__ */
|
|
4227
|
+
return /* @__PURE__ */ jsx44(View38, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx44(Animated16.View, { style: { transform: [{ translateY: y }] }, children: /* @__PURE__ */ jsxs39(Svg21, { width: size, height: size, viewBox: "0 0 120 120", children: [
|
|
4228
|
+
/* @__PURE__ */ jsxs39(Defs12, { children: [
|
|
4229
|
+
/* @__PURE__ */ jsxs39(LinearGradient12, { id: `${id}l`, x1: "1", y1: "0", x2: "0", y2: "1", children: [
|
|
4230
|
+
/* @__PURE__ */ jsx44(Stop12, { offset: "0%", stopColor: p.left[0] }),
|
|
4231
|
+
/* @__PURE__ */ jsx44(Stop12, { offset: "100%", stopColor: p.left[1] })
|
|
4032
4232
|
] }),
|
|
4033
|
-
/* @__PURE__ */
|
|
4034
|
-
/* @__PURE__ */
|
|
4035
|
-
/* @__PURE__ */
|
|
4233
|
+
/* @__PURE__ */ jsxs39(LinearGradient12, { id: `${id}r`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
4234
|
+
/* @__PURE__ */ jsx44(Stop12, { offset: "0%", stopColor: p.right[0] }),
|
|
4235
|
+
/* @__PURE__ */ jsx44(Stop12, { offset: "100%", stopColor: p.right[1] })
|
|
4036
4236
|
] }),
|
|
4037
|
-
/* @__PURE__ */
|
|
4038
|
-
/* @__PURE__ */
|
|
4039
|
-
/* @__PURE__ */
|
|
4237
|
+
/* @__PURE__ */ jsxs39(RadialGradient9, { id: `${id}c`, children: [
|
|
4238
|
+
/* @__PURE__ */ jsx44(Stop12, { offset: "0%", stopColor: p.core[0] }),
|
|
4239
|
+
/* @__PURE__ */ jsx44(Stop12, { offset: "100%", stopColor: p.core[1], stopOpacity: 0 })
|
|
4040
4240
|
] })
|
|
4041
4241
|
] }),
|
|
4042
|
-
/* @__PURE__ */
|
|
4043
|
-
/* @__PURE__ */
|
|
4044
|
-
/* @__PURE__ */
|
|
4045
|
-
/* @__PURE__ */
|
|
4046
|
-
/* @__PURE__ */
|
|
4047
|
-
/* @__PURE__ */
|
|
4048
|
-
/* @__PURE__ */
|
|
4049
|
-
/* @__PURE__ */
|
|
4242
|
+
/* @__PURE__ */ jsx44(Path18, { d: PHOENIX.wingL, fill: `url(#${id}l)` }),
|
|
4243
|
+
/* @__PURE__ */ jsx44(Path18, { d: PHOENIX.wingR, fill: `url(#${id}r)` }),
|
|
4244
|
+
/* @__PURE__ */ jsx44(Path18, { d: PHOENIX.tailL, fill: `url(#${id}l)`, opacity: 0.7 }),
|
|
4245
|
+
/* @__PURE__ */ jsx44(Path18, { d: PHOENIX.tailR, fill: `url(#${id}r)`, opacity: 0.7 }),
|
|
4246
|
+
/* @__PURE__ */ jsx44(Path18, { d: PHOENIX.body, fill: p.body, stroke: p.edge, strokeOpacity: 0.5 }),
|
|
4247
|
+
/* @__PURE__ */ jsx44(Circle13, { cx: 60, cy: 58, r: 12, fill: `url(#${id}c)` }),
|
|
4248
|
+
/* @__PURE__ */ jsx44(Circle13, { cx: 60, cy: 58, r: 3.5, fill: "#ffffff" }),
|
|
4249
|
+
/* @__PURE__ */ jsx44(Path18, { d: PHOENIX.crest, stroke: p.crest, strokeWidth: 2, strokeLinecap: "round" })
|
|
4050
4250
|
] }) }) });
|
|
4051
4251
|
}
|
|
4052
4252
|
|
|
4053
4253
|
// src/native/photo-grid.tsx
|
|
4054
4254
|
import * as React30 from "react";
|
|
4055
|
-
import { Image as Image4, Pressable as Pressable17, StyleSheet as StyleSheet32, View as
|
|
4056
|
-
import
|
|
4057
|
-
import { jsx as
|
|
4255
|
+
import { Image as Image4, Pressable as Pressable17, StyleSheet as StyleSheet32, View as View39 } from "react-native";
|
|
4256
|
+
import Svg22, { Path as Path19 } from "react-native-svg";
|
|
4257
|
+
import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
4058
4258
|
function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, columns = 3, labels, style }) {
|
|
4059
4259
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
4060
4260
|
const [menu, setMenu] = React30.useState(null);
|
|
@@ -4071,11 +4271,11 @@ function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, colum
|
|
|
4071
4271
|
onValueChange(value.filter((_, j) => j !== i));
|
|
4072
4272
|
};
|
|
4073
4273
|
const width = `${100 / columns}%`;
|
|
4074
|
-
return /* @__PURE__ */
|
|
4274
|
+
return /* @__PURE__ */ jsxs40(View39, { style: [styles32.grid, style], children: [
|
|
4075
4275
|
Array.from({ length: slots }, (_, i) => {
|
|
4076
4276
|
const photo = value[i];
|
|
4077
4277
|
const cell = [styles32.slot, { borderRadius: radius3.lg, aspectRatio: 3 / 4 }];
|
|
4078
|
-
return /* @__PURE__ */
|
|
4278
|
+
return /* @__PURE__ */ jsx45(View39, { style: [styles32.cell, { width }], children: photo ? /* @__PURE__ */ jsxs40(
|
|
4079
4279
|
Pressable17,
|
|
4080
4280
|
{
|
|
4081
4281
|
role: "button",
|
|
@@ -4099,11 +4299,11 @@ function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, colum
|
|
|
4099
4299
|
},
|
|
4100
4300
|
style: [...cell, { backgroundColor: theme.surface3, overflow: "hidden" }],
|
|
4101
4301
|
children: [
|
|
4102
|
-
/* @__PURE__ */
|
|
4103
|
-
i === 0 ? /* @__PURE__ */
|
|
4302
|
+
/* @__PURE__ */ jsx45(Image4, { source: { uri: photo.uri }, style: StyleSheet32.absoluteFill, resizeMode: "cover" }),
|
|
4303
|
+
i === 0 ? /* @__PURE__ */ jsx45(View39, { style: [styles32.main, { backgroundColor: theme.accent, borderRadius: radius3.full }], children: /* @__PURE__ */ jsx45(Txt, { variant: "caption", tone: "onAccent", style: styles32.mainText, children: labels.main }) }) : null
|
|
4104
4304
|
]
|
|
4105
4305
|
}
|
|
4106
|
-
) : /* @__PURE__ */
|
|
4306
|
+
) : /* @__PURE__ */ jsx45(
|
|
4107
4307
|
Pressable17,
|
|
4108
4308
|
{
|
|
4109
4309
|
role: "button",
|
|
@@ -4115,11 +4315,11 @@ function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, colum
|
|
|
4115
4315
|
styles32.empty,
|
|
4116
4316
|
{ borderColor: i < required ? theme.accent : theme.borderStrong, backgroundColor: pressed ? theme.surface2 : theme.surface1, opacity: i > value.length ? 0.5 : 1 }
|
|
4117
4317
|
],
|
|
4118
|
-
children: /* @__PURE__ */
|
|
4318
|
+
children: /* @__PURE__ */ jsx45(View39, { style: [styles32.plus, { backgroundColor: i === value.length ? theme.accent : theme.surface3, borderRadius: radius3.full }], children: /* @__PURE__ */ jsx45(Svg22, { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx45(Path19, { d: "M12 5v14M5 12h14", stroke: i === value.length ? theme.onAccent : theme.textSecondary, strokeWidth: 2.6, strokeLinecap: "round" }) }) })
|
|
4119
4319
|
}
|
|
4120
4320
|
) }, photo?.id ?? `empty-${i}`);
|
|
4121
4321
|
}),
|
|
4122
|
-
/* @__PURE__ */
|
|
4322
|
+
/* @__PURE__ */ jsx45(
|
|
4123
4323
|
ActionSheet,
|
|
4124
4324
|
{
|
|
4125
4325
|
open: menu !== null,
|
|
@@ -4147,16 +4347,16 @@ var styles32 = StyleSheet32.create({
|
|
|
4147
4347
|
|
|
4148
4348
|
// src/native/profile-card.tsx
|
|
4149
4349
|
import * as React31 from "react";
|
|
4150
|
-
import { Animated as Animated17, StyleSheet as StyleSheet33, View as
|
|
4151
|
-
import { jsx as
|
|
4350
|
+
import { Animated as Animated17, StyleSheet as StyleSheet33, View as View40 } from "react-native";
|
|
4351
|
+
import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
4152
4352
|
var ratioOf = (value, max = 100) => Math.min(1, Math.max(0, value / (max || 1)));
|
|
4153
4353
|
function Bar({ label, ratio, words: words2, animated, delay }) {
|
|
4154
4354
|
const { theme } = useTheme();
|
|
4155
4355
|
const t = useEntrance(animated, delay, 900);
|
|
4156
4356
|
const [width, setWidth] = React31.useState(0);
|
|
4157
4357
|
const translateX = t.interpolate({ inputRange: [0, 1], outputRange: [-width * ratio, 0] });
|
|
4158
|
-
return /* @__PURE__ */
|
|
4159
|
-
|
|
4358
|
+
return /* @__PURE__ */ jsx46(
|
|
4359
|
+
View40,
|
|
4160
4360
|
{
|
|
4161
4361
|
accessible: true,
|
|
4162
4362
|
role: "meter",
|
|
@@ -4167,37 +4367,37 @@ function Bar({ label, ratio, words: words2, animated, delay }) {
|
|
|
4167
4367
|
"aria-valuetext": words2,
|
|
4168
4368
|
onLayout: (e) => setWidth(e.nativeEvent.layout.width),
|
|
4169
4369
|
style: [styles33.track, { backgroundColor: theme.surface3 }],
|
|
4170
|
-
children: /* @__PURE__ */
|
|
4370
|
+
children: /* @__PURE__ */ jsx46(Animated17.View, { style: [styles33.fill, { width: `${ratio * 100}%`, backgroundColor: theme.accent, transform: [{ translateX }] }] })
|
|
4171
4371
|
}
|
|
4172
4372
|
);
|
|
4173
4373
|
}
|
|
4174
4374
|
function ProfileCard({ visual, name, statLabel, value = 100, valueText, stats, caption, children, animated = true, style, ...props }) {
|
|
4175
4375
|
const { theme, radius: radius3 } = useTheme();
|
|
4176
4376
|
const ratio = ratioOf(value);
|
|
4177
|
-
return /* @__PURE__ */
|
|
4178
|
-
/* @__PURE__ */
|
|
4179
|
-
/* @__PURE__ */
|
|
4180
|
-
/* @__PURE__ */
|
|
4181
|
-
statLabel ? /* @__PURE__ */
|
|
4377
|
+
return /* @__PURE__ */ jsxs41(View40, { ...props, style: [styles33.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style], children: [
|
|
4378
|
+
/* @__PURE__ */ jsx46(View40, { "aria-hidden": true, style: [styles33.disc, { backgroundColor: theme.surface2, borderColor: theme.accentSoft }], children: visual }),
|
|
4379
|
+
/* @__PURE__ */ jsxs41(View40, { style: styles33.head, children: [
|
|
4380
|
+
/* @__PURE__ */ jsx46(Txt, { variant: "title", style: styles33.name, children: name }),
|
|
4381
|
+
statLabel ? /* @__PURE__ */ jsxs41(Txt, { variant: "caption", tone: "secondary", children: [
|
|
4182
4382
|
statLabel,
|
|
4183
4383
|
" ",
|
|
4184
|
-
/* @__PURE__ */
|
|
4384
|
+
/* @__PURE__ */ jsx46(Txt, { variant: "caption", children: valueText ?? `${Math.round(ratio * 100)} %` })
|
|
4185
4385
|
] }) : null
|
|
4186
4386
|
] }),
|
|
4187
|
-
statLabel ? /* @__PURE__ */
|
|
4387
|
+
statLabel ? /* @__PURE__ */ jsx46(Bar, { label: statLabel, ratio, words: valueText ?? `${Math.round(ratio * 100)} %`, animated, delay: 200 }) : null,
|
|
4188
4388
|
stats?.map((s, i) => {
|
|
4189
4389
|
const r = ratioOf(s.value, s.max);
|
|
4190
4390
|
const words2 = s.valueText ?? `${Math.round(r * 100)} %`;
|
|
4191
|
-
return /* @__PURE__ */
|
|
4192
|
-
/* @__PURE__ */
|
|
4193
|
-
/* @__PURE__ */
|
|
4194
|
-
/* @__PURE__ */
|
|
4391
|
+
return /* @__PURE__ */ jsxs41(View40, { style: styles33.stat, children: [
|
|
4392
|
+
/* @__PURE__ */ jsxs41(View40, { "aria-hidden": true, style: styles33.statHead, children: [
|
|
4393
|
+
/* @__PURE__ */ jsx46(Txt, { variant: "caption", tone: "secondary", children: s.label }),
|
|
4394
|
+
/* @__PURE__ */ jsx46(Txt, { variant: "caption", children: words2 })
|
|
4195
4395
|
] }),
|
|
4196
|
-
/* @__PURE__ */
|
|
4396
|
+
/* @__PURE__ */ jsx46(Bar, { label: s.label, ratio: r, words: words2, animated, delay: 320 + i * 120 })
|
|
4197
4397
|
] }, s.label);
|
|
4198
4398
|
}),
|
|
4199
|
-
caption ? /* @__PURE__ */
|
|
4200
|
-
children ? /* @__PURE__ */
|
|
4399
|
+
caption ? /* @__PURE__ */ jsx46(Txt, { variant: "caption", tone: "secondary", style: styles33.caption, children: caption }) : null,
|
|
4400
|
+
children ? /* @__PURE__ */ jsx46(View40, { style: styles33.extra, children }) : null
|
|
4201
4401
|
] });
|
|
4202
4402
|
}
|
|
4203
4403
|
var styles33 = StyleSheet33.create({
|
|
@@ -4215,10 +4415,10 @@ var styles33 = StyleSheet33.create({
|
|
|
4215
4415
|
|
|
4216
4416
|
// src/native/progress.tsx
|
|
4217
4417
|
import * as React32 from "react";
|
|
4218
|
-
import { Animated as Animated18, Easing as Easing11, StyleSheet as StyleSheet34, View as
|
|
4219
|
-
import
|
|
4220
|
-
import { jsx as
|
|
4221
|
-
var AnimatedCircle = Animated18.createAnimatedComponent(
|
|
4418
|
+
import { Animated as Animated18, Easing as Easing11, StyleSheet as StyleSheet34, View as View41 } from "react-native";
|
|
4419
|
+
import Svg23, { Circle as Circle14, Defs as Defs13, LinearGradient as LinearGradient13, Rect as Rect4, Stop as Stop13 } from "react-native-svg";
|
|
4420
|
+
import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
4421
|
+
var AnimatedCircle = Animated18.createAnimatedComponent(Circle14);
|
|
4222
4422
|
var BAR2 = { sm: 4, md: 8, lg: 12 };
|
|
4223
4423
|
var RING2 = { sm: 40, md: 80, lg: 144 };
|
|
4224
4424
|
var STROKE = { sm: 12, md: 9, lg: 7 };
|
|
@@ -4259,9 +4459,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
|
|
|
4259
4459
|
"aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
|
|
4260
4460
|
"aria-valuetext": known ? valueText ?? `${percent}%` : valueText
|
|
4261
4461
|
};
|
|
4262
|
-
const gradient = /* @__PURE__ */
|
|
4263
|
-
/* @__PURE__ */
|
|
4264
|
-
/* @__PURE__ */
|
|
4462
|
+
const gradient = /* @__PURE__ */ jsx47(Defs13, { children: /* @__PURE__ */ jsxs42(LinearGradient13, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
|
|
4463
|
+
/* @__PURE__ */ jsx47(Stop13, { offset: "0", stopColor: theme.accent }),
|
|
4464
|
+
/* @__PURE__ */ jsx47(Stop13, { offset: "1", stopColor: theme.accent2 })
|
|
4265
4465
|
] }) });
|
|
4266
4466
|
if (variant === "ring") {
|
|
4267
4467
|
const side = RING2[size];
|
|
@@ -4270,11 +4470,11 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
|
|
|
4270
4470
|
const circumference = 2 * Math.PI * r;
|
|
4271
4471
|
const offset = known ? progress.interpolate({ inputRange: [0, 1], outputRange: [circumference, 0] }) : circumference * 0.75;
|
|
4272
4472
|
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
|
|
4273
|
-
return /* @__PURE__ */
|
|
4274
|
-
/* @__PURE__ */
|
|
4473
|
+
return /* @__PURE__ */ jsxs42(View41, { ...a11y, style: [styles34.ring, { width: side, height: side }, style], children: [
|
|
4474
|
+
/* @__PURE__ */ jsx47(Animated18.View, { style: [StyleSheet34.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs42(Svg23, { width: side, height: side, viewBox: "0 0 100 100", children: [
|
|
4275
4475
|
gradient,
|
|
4276
|
-
/* @__PURE__ */
|
|
4277
|
-
/* @__PURE__ */
|
|
4476
|
+
/* @__PURE__ */ jsx47(Circle14, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
|
|
4477
|
+
/* @__PURE__ */ jsx47(
|
|
4278
4478
|
AnimatedCircle,
|
|
4279
4479
|
{
|
|
4280
4480
|
cx: 50,
|
|
@@ -4294,15 +4494,15 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
|
|
|
4294
4494
|
}
|
|
4295
4495
|
const width = known ? progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) : "40%";
|
|
4296
4496
|
const translate = spin.interpolate({ inputRange: [0, 1], outputRange: [-0.4 * track, track] });
|
|
4297
|
-
return /* @__PURE__ */
|
|
4298
|
-
|
|
4497
|
+
return /* @__PURE__ */ jsx47(
|
|
4498
|
+
View41,
|
|
4299
4499
|
{
|
|
4300
4500
|
...a11y,
|
|
4301
4501
|
onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
|
|
4302
4502
|
style: [styles34.bar, { height: BAR2[size], backgroundColor: theme.surface3 }, style],
|
|
4303
|
-
children: /* @__PURE__ */
|
|
4503
|
+
children: /* @__PURE__ */ jsx47(Animated18.View, { style: [styles34.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs42(Svg23, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
|
|
4304
4504
|
gradient,
|
|
4305
|
-
/* @__PURE__ */
|
|
4505
|
+
/* @__PURE__ */ jsx47(Rect4, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
|
|
4306
4506
|
] }) })
|
|
4307
4507
|
}
|
|
4308
4508
|
);
|
|
@@ -4315,11 +4515,11 @@ var styles34 = StyleSheet34.create({
|
|
|
4315
4515
|
|
|
4316
4516
|
// src/native/pull-to-refresh.tsx
|
|
4317
4517
|
import * as React33 from "react";
|
|
4318
|
-
import { AccessibilityInfo as AccessibilityInfo13, Animated as Animated19, RefreshControl, StyleSheet as StyleSheet35, View as
|
|
4319
|
-
import { jsx as
|
|
4518
|
+
import { AccessibilityInfo as AccessibilityInfo13, Animated as Animated19, RefreshControl, StyleSheet as StyleSheet35, View as View42 } from "react-native";
|
|
4519
|
+
import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
4320
4520
|
function PullToRefresh({ label, ...props }) {
|
|
4321
4521
|
const { theme } = useTheme();
|
|
4322
|
-
return /* @__PURE__ */
|
|
4522
|
+
return /* @__PURE__ */ jsx48(RefreshControl, { ...props, tintColor: theme.accent, colors: [theme.accent], progressBackgroundColor: theme.surface2, title: label, titleColor: theme.textSecondary });
|
|
4323
4523
|
}
|
|
4324
4524
|
var pullProgress = (offset, threshold) => Math.min(1, Math.max(0, -offset / threshold));
|
|
4325
4525
|
function BrandedRefresh({ product, refreshing, onRefresh, label, children, threshold = 72 }) {
|
|
@@ -4336,14 +4536,14 @@ function BrandedRefresh({ product, refreshing, onRefresh, label, children, thres
|
|
|
4336
4536
|
const shown = refreshing ? 1 : pull;
|
|
4337
4537
|
const scale = refreshing || reduce ? 1 : pull.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] });
|
|
4338
4538
|
const rotate = refreshing || reduce ? "0deg" : pull.interpolate({ inputRange: [0, 1], outputRange: ["-90deg", "0deg"] });
|
|
4339
|
-
return /* @__PURE__ */
|
|
4539
|
+
return /* @__PURE__ */ jsxs43(View42, { style: styles35.root, children: [
|
|
4340
4540
|
children({
|
|
4341
4541
|
// The platform's control does the gesture and the haptics, drawn transparent: the mark is ours.
|
|
4342
|
-
refreshControl: /* @__PURE__ */
|
|
4542
|
+
refreshControl: /* @__PURE__ */ jsx48(RefreshControl, { refreshing, onRefresh, tintColor: "transparent", colors: ["transparent"], progressBackgroundColor: "transparent" }),
|
|
4343
4543
|
onScroll,
|
|
4344
4544
|
scrollEventThrottle: 16
|
|
4345
4545
|
}),
|
|
4346
|
-
/* @__PURE__ */
|
|
4546
|
+
/* @__PURE__ */ jsx48(Animated19.View, { pointerEvents: "none", "aria-hidden": true, style: [styles35.mark, { opacity: shown, transform: [{ scale }, { rotate }] }], children: /* @__PURE__ */ jsx48(ProductMark, { id: product, size: 32, animated: refreshing, neutral: theme.textMuted }) })
|
|
4347
4547
|
] });
|
|
4348
4548
|
}
|
|
4349
4549
|
var styles35 = StyleSheet35.create({
|
|
@@ -4353,11 +4553,11 @@ var styles35 = StyleSheet35.create({
|
|
|
4353
4553
|
|
|
4354
4554
|
// src/native/radio-group.tsx
|
|
4355
4555
|
import * as React34 from "react";
|
|
4356
|
-
import { Animated as Animated20, Pressable as Pressable18, StyleSheet as StyleSheet36, Text as Text15, View as
|
|
4357
|
-
import
|
|
4358
|
-
import { jsx as
|
|
4556
|
+
import { Animated as Animated20, Pressable as Pressable18, StyleSheet as StyleSheet36, Text as Text15, View as View43 } from "react-native";
|
|
4557
|
+
import Svg24, { Path as Path20 } from "react-native-svg";
|
|
4558
|
+
import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
4359
4559
|
function Check({ color }) {
|
|
4360
|
-
return /* @__PURE__ */
|
|
4560
|
+
return /* @__PURE__ */ jsx49(Svg24, { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 3.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx49(Path20, { d: "M20 6 9 17l-5-5" }) });
|
|
4361
4561
|
}
|
|
4362
4562
|
function Key({ option, checked, disabled, onPress }) {
|
|
4363
4563
|
const { theme, radius: radius3, motion: motion3 } = useTheme();
|
|
@@ -4367,7 +4567,7 @@ function Key({ option, checked, disabled, onPress }) {
|
|
|
4367
4567
|
React34.useEffect(() => {
|
|
4368
4568
|
Animated20.timing(sink, { toValue: down ? 1 : 0, duration: motion3.duration.fast, useNativeDriver: true }).start();
|
|
4369
4569
|
}, [down, sink, motion3.duration.fast]);
|
|
4370
|
-
return /* @__PURE__ */
|
|
4570
|
+
return /* @__PURE__ */ jsxs44(
|
|
4371
4571
|
Pressable18,
|
|
4372
4572
|
{
|
|
4373
4573
|
role: "radio",
|
|
@@ -4380,8 +4580,8 @@ function Key({ option, checked, disabled, onPress }) {
|
|
|
4380
4580
|
onPressOut: () => setHeld(false),
|
|
4381
4581
|
style: [styles36.keySlot, disabled ? styles36.disabled : null],
|
|
4382
4582
|
children: [
|
|
4383
|
-
/* @__PURE__ */
|
|
4384
|
-
/* @__PURE__ */
|
|
4583
|
+
/* @__PURE__ */ jsx49(View43, { style: [styles36.ledge, { borderRadius: radius3.lg, backgroundColor: checked ? theme.accentHover : theme.borderStrong }] }),
|
|
4584
|
+
/* @__PURE__ */ jsxs44(
|
|
4385
4585
|
Animated20.View,
|
|
4386
4586
|
{
|
|
4387
4587
|
style: [
|
|
@@ -4394,8 +4594,8 @@ function Key({ option, checked, disabled, onPress }) {
|
|
|
4394
4594
|
}
|
|
4395
4595
|
],
|
|
4396
4596
|
children: [
|
|
4397
|
-
/* @__PURE__ */
|
|
4398
|
-
option.hint ? /* @__PURE__ */
|
|
4597
|
+
/* @__PURE__ */ jsx49(Text15, { style: [styles36.keyLabel, { color: checked ? theme.onAccent : theme.textPrimary }], children: option.label }),
|
|
4598
|
+
option.hint ? /* @__PURE__ */ jsx49(Text15, { style: [styles36.keyHint, { color: checked ? theme.onAccent : theme.textSecondary }], children: option.hint }) : null
|
|
4399
4599
|
]
|
|
4400
4600
|
}
|
|
4401
4601
|
)
|
|
@@ -4416,9 +4616,9 @@ function RadioGroup({ label, options, value: valueProp, defaultValue = null, onV
|
|
|
4416
4616
|
const checked = o.value === value;
|
|
4417
4617
|
const off = Boolean(disabled || o.disabled);
|
|
4418
4618
|
const name = o.description ? `${o.label}, ${o.description}` : o.label;
|
|
4419
|
-
if (variant === "buttons") return /* @__PURE__ */
|
|
4619
|
+
if (variant === "buttons") return /* @__PURE__ */ jsx49(Key, { option: o, checked, disabled: off, onPress: () => pick(o.value) }, o.value);
|
|
4420
4620
|
if (variant === "segmented")
|
|
4421
|
-
return /* @__PURE__ */
|
|
4621
|
+
return /* @__PURE__ */ jsx49(
|
|
4422
4622
|
Pressable18,
|
|
4423
4623
|
{
|
|
4424
4624
|
role: "radio",
|
|
@@ -4428,12 +4628,12 @@ function RadioGroup({ label, options, value: valueProp, defaultValue = null, onV
|
|
|
4428
4628
|
disabled: off,
|
|
4429
4629
|
onPress: () => pick(o.value),
|
|
4430
4630
|
style: [styles36.segment, { borderRadius: radius3.md }, checked ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null, off ? styles36.disabled : null],
|
|
4431
|
-
children: /* @__PURE__ */
|
|
4631
|
+
children: /* @__PURE__ */ jsx49(Text15, { numberOfLines: 1, style: [styles36.segmentLabel, { color: checked ? theme.textPrimary : theme.textSecondary }], children: o.label })
|
|
4432
4632
|
},
|
|
4433
4633
|
o.value
|
|
4434
4634
|
);
|
|
4435
4635
|
if (variant === "cards")
|
|
4436
|
-
return /* @__PURE__ */
|
|
4636
|
+
return /* @__PURE__ */ jsxs44(
|
|
4437
4637
|
Pressable18,
|
|
4438
4638
|
{
|
|
4439
4639
|
role: "radio",
|
|
@@ -4448,24 +4648,24 @@ function RadioGroup({ label, options, value: valueProp, defaultValue = null, onV
|
|
|
4448
4648
|
off ? styles36.disabled : null
|
|
4449
4649
|
],
|
|
4450
4650
|
children: [
|
|
4451
|
-
/* @__PURE__ */
|
|
4452
|
-
/* @__PURE__ */
|
|
4453
|
-
o.description ? /* @__PURE__ */
|
|
4651
|
+
/* @__PURE__ */ jsx49(View43, { style: [styles36.cardCheck, { borderColor: checked ? theme.accent : theme.borderStrong, backgroundColor: checked ? theme.accent : theme.surface1 }], children: checked ? /* @__PURE__ */ jsx49(Check, { color: theme.onAccent }) : null }),
|
|
4652
|
+
/* @__PURE__ */ jsx49(Text15, { style: [styles36.cardLabel, { color: theme.textPrimary }], children: o.label }),
|
|
4653
|
+
o.description ? /* @__PURE__ */ jsx49(Text15, { style: [styles36.cardDescription, { color: theme.textSecondary }], children: o.description }) : null
|
|
4454
4654
|
]
|
|
4455
4655
|
},
|
|
4456
4656
|
o.value
|
|
4457
4657
|
);
|
|
4458
|
-
return /* @__PURE__ */
|
|
4459
|
-
/* @__PURE__ */
|
|
4460
|
-
/* @__PURE__ */
|
|
4461
|
-
/* @__PURE__ */
|
|
4462
|
-
o.description ? /* @__PURE__ */
|
|
4658
|
+
return /* @__PURE__ */ jsxs44(Pressable18, { role: "radio", "aria-checked": checked, "aria-label": name, "aria-disabled": off || void 0, disabled: off, onPress: () => pick(o.value), style: [styles36.row, off ? styles36.disabled : null], children: [
|
|
4659
|
+
/* @__PURE__ */ jsx49(View43, { style: [styles36.dot, { borderColor: checked ? theme.accent : theme.borderStrong, backgroundColor: checked ? theme.accent : theme.surface1 }], children: checked ? /* @__PURE__ */ jsx49(View43, { style: [styles36.dotIn, { backgroundColor: theme.onAccent }] }) : null }),
|
|
4660
|
+
/* @__PURE__ */ jsxs44(View43, { style: styles36.rowText, children: [
|
|
4661
|
+
/* @__PURE__ */ jsx49(Text15, { style: [styles36.rowLabel, { color: theme.textPrimary }], children: o.label }),
|
|
4662
|
+
o.description ? /* @__PURE__ */ jsx49(Text15, { style: [styles36.cardDescription, { color: theme.textSecondary }], children: o.description }) : null
|
|
4463
4663
|
] })
|
|
4464
4664
|
] }, o.value);
|
|
4465
4665
|
});
|
|
4466
|
-
return /* @__PURE__ */
|
|
4467
|
-
/* @__PURE__ */
|
|
4468
|
-
|
|
4666
|
+
return /* @__PURE__ */ jsxs44(View43, { style: [styles36.root, style], children: [
|
|
4667
|
+
/* @__PURE__ */ jsx49(
|
|
4668
|
+
View43,
|
|
4469
4669
|
{
|
|
4470
4670
|
role: "radiogroup",
|
|
4471
4671
|
"aria-label": label,
|
|
@@ -4473,7 +4673,7 @@ function RadioGroup({ label, options, value: valueProp, defaultValue = null, onV
|
|
|
4473
4673
|
children: body
|
|
4474
4674
|
}
|
|
4475
4675
|
),
|
|
4476
|
-
error ? /* @__PURE__ */
|
|
4676
|
+
error ? /* @__PURE__ */ jsx49(Text15, { role: "alert", "aria-live": "polite", style: [styles36.error, { color: theme.dangerText }], children: error }) : null
|
|
4477
4677
|
] });
|
|
4478
4678
|
}
|
|
4479
4679
|
var styles36 = StyleSheet36.create({
|
|
@@ -4503,26 +4703,26 @@ var styles36 = StyleSheet36.create({
|
|
|
4503
4703
|
});
|
|
4504
4704
|
|
|
4505
4705
|
// src/native/screen.tsx
|
|
4506
|
-
import { KeyboardAvoidingView, Platform as Platform3, ScrollView as ScrollView6, StyleSheet as StyleSheet37, View as
|
|
4507
|
-
import { Fragment as Fragment7, jsx as
|
|
4706
|
+
import { KeyboardAvoidingView, Platform as Platform3, ScrollView as ScrollView6, StyleSheet as StyleSheet37, View as View44 } from "react-native";
|
|
4707
|
+
import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
4508
4708
|
function Screen({ header, footer, children, scroll = true, keyboard = true, padding = 16, surface = "surface0", contentStyle }) {
|
|
4509
4709
|
const { theme, insets } = useTheme();
|
|
4510
|
-
const body = scroll ? /* @__PURE__ */
|
|
4511
|
-
const inner = /* @__PURE__ */
|
|
4710
|
+
const body = scroll ? /* @__PURE__ */ jsx50(ScrollView6, { style: styles37.flex, contentContainerStyle: [{ padding, paddingTop: header ? padding : padding + insets.top, gap: 16 }, contentStyle], keyboardShouldPersistTaps: "handled", tabIndex: 0, children }) : /* @__PURE__ */ jsx50(View44, { style: [styles37.flex, { paddingTop: header ? 0 : insets.top }, contentStyle], children });
|
|
4711
|
+
const inner = /* @__PURE__ */ jsxs45(Fragment7, { children: [
|
|
4512
4712
|
header,
|
|
4513
4713
|
body,
|
|
4514
4714
|
footer
|
|
4515
4715
|
] });
|
|
4516
|
-
return /* @__PURE__ */
|
|
4716
|
+
return /* @__PURE__ */ jsx50(View44, { style: [styles37.flex, { backgroundColor: theme[surface] }], children: keyboard ? /* @__PURE__ */ jsx50(KeyboardAvoidingView, { style: styles37.flex, behavior: Platform3.OS === "ios" ? "padding" : void 0, children: inner }) : inner });
|
|
4517
4717
|
}
|
|
4518
4718
|
var styles37 = StyleSheet37.create({ flex: { flex: 1 } });
|
|
4519
4719
|
|
|
4520
4720
|
// src/native/search-field.tsx
|
|
4521
4721
|
import { useDebouncedCallback } from "@krizaka/pacer/react";
|
|
4522
4722
|
import * as React35 from "react";
|
|
4523
|
-
import { Pressable as Pressable19, StyleSheet as StyleSheet38, TextInput as TextInput6, View as
|
|
4524
|
-
import
|
|
4525
|
-
import { jsx as
|
|
4723
|
+
import { Pressable as Pressable19, StyleSheet as StyleSheet38, TextInput as TextInput6, View as View45 } from "react-native";
|
|
4724
|
+
import Svg25, { Circle as Circle15, Path as Path21 } from "react-native-svg";
|
|
4725
|
+
import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
4526
4726
|
function SearchField({ label, value, defaultValue = "", onValueChange, onSearch, debounce = 300, onSubmit, clearLabel, cancelLabel, onCancel, style, placeholder, onFocus, onBlur, ...props }) {
|
|
4527
4727
|
const [focused, setFocused] = React35.useState(false);
|
|
4528
4728
|
const input = React35.useRef(null);
|
|
@@ -4536,12 +4736,12 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
|
|
|
4536
4736
|
search.cancel();
|
|
4537
4737
|
if (onSearch) search(next);
|
|
4538
4738
|
};
|
|
4539
|
-
const field = /* @__PURE__ */
|
|
4540
|
-
/* @__PURE__ */
|
|
4541
|
-
/* @__PURE__ */
|
|
4542
|
-
/* @__PURE__ */
|
|
4739
|
+
const field = /* @__PURE__ */ jsxs46(View45, { style: [styles38.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
|
|
4740
|
+
/* @__PURE__ */ jsxs46(Svg25, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
|
|
4741
|
+
/* @__PURE__ */ jsx51(Circle15, { cx: 11, cy: 11, r: 7 }),
|
|
4742
|
+
/* @__PURE__ */ jsx51(Path21, { d: "m20 20-3.5-3.5" })
|
|
4543
4743
|
] }),
|
|
4544
|
-
/* @__PURE__ */
|
|
4744
|
+
/* @__PURE__ */ jsx51(
|
|
4545
4745
|
TextInput6,
|
|
4546
4746
|
{
|
|
4547
4747
|
ref: input,
|
|
@@ -4572,12 +4772,12 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
|
|
|
4572
4772
|
...props
|
|
4573
4773
|
}
|
|
4574
4774
|
),
|
|
4575
|
-
query ? /* @__PURE__ */
|
|
4775
|
+
query ? /* @__PURE__ */ jsx51(Pressable19, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles38.clear, children: /* @__PURE__ */ jsx51(Svg25, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx51(Path21, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
|
|
4576
4776
|
] });
|
|
4577
4777
|
if (!cancelLabel || !onCancel) return field;
|
|
4578
|
-
return /* @__PURE__ */
|
|
4579
|
-
/* @__PURE__ */
|
|
4580
|
-
focused || query ? /* @__PURE__ */
|
|
4778
|
+
return /* @__PURE__ */ jsxs46(View45, { style: styles38.bar, children: [
|
|
4779
|
+
/* @__PURE__ */ jsx51(View45, { style: styles38.grow, children: field }),
|
|
4780
|
+
focused || query ? /* @__PURE__ */ jsx51(
|
|
4581
4781
|
Pressable19,
|
|
4582
4782
|
{
|
|
4583
4783
|
role: "button",
|
|
@@ -4588,7 +4788,7 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
|
|
|
4588
4788
|
},
|
|
4589
4789
|
hitSlop: 8,
|
|
4590
4790
|
style: styles38.cancel,
|
|
4591
|
-
children: /* @__PURE__ */
|
|
4791
|
+
children: /* @__PURE__ */ jsx51(Txt, { variant: "label", tone: "accent", children: cancelLabel })
|
|
4592
4792
|
}
|
|
4593
4793
|
) : null
|
|
4594
4794
|
] });
|
|
@@ -4603,19 +4803,19 @@ var styles38 = StyleSheet38.create({
|
|
|
4603
4803
|
});
|
|
4604
4804
|
|
|
4605
4805
|
// src/native/segmented.tsx
|
|
4606
|
-
import { Pressable as Pressable20, StyleSheet as StyleSheet39, Text as Text16, View as
|
|
4607
|
-
import { jsx as
|
|
4806
|
+
import { Pressable as Pressable20, StyleSheet as StyleSheet39, Text as Text16, View as View46 } from "react-native";
|
|
4807
|
+
import { jsx as jsx52 } from "react/jsx-runtime";
|
|
4608
4808
|
function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
|
|
4609
4809
|
const { theme, radius: radius3 } = useTheme();
|
|
4610
|
-
return /* @__PURE__ */
|
|
4611
|
-
|
|
4810
|
+
return /* @__PURE__ */ jsx52(
|
|
4811
|
+
View46,
|
|
4612
4812
|
{
|
|
4613
4813
|
role: "tablist",
|
|
4614
4814
|
"aria-label": label,
|
|
4615
4815
|
style: [styles39.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
|
|
4616
4816
|
children: options.map((option) => {
|
|
4617
4817
|
const selected = option.value === value;
|
|
4618
|
-
return /* @__PURE__ */
|
|
4818
|
+
return /* @__PURE__ */ jsx52(
|
|
4619
4819
|
Pressable20,
|
|
4620
4820
|
{
|
|
4621
4821
|
role: "tab",
|
|
@@ -4631,7 +4831,7 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
|
|
|
4631
4831
|
selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
|
|
4632
4832
|
option.disabled ? styles39.disabled : null
|
|
4633
4833
|
],
|
|
4634
|
-
children: /* @__PURE__ */
|
|
4834
|
+
children: /* @__PURE__ */ jsx52(Text16, { numberOfLines: 1, style: [styles39.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
|
|
4635
4835
|
},
|
|
4636
4836
|
option.value
|
|
4637
4837
|
);
|
|
@@ -4648,9 +4848,9 @@ var styles39 = StyleSheet39.create({
|
|
|
4648
4848
|
|
|
4649
4849
|
// src/native/showcase.tsx
|
|
4650
4850
|
import * as React36 from "react";
|
|
4651
|
-
import { Animated as Animated21, AppState, Easing as Easing12, FlatList, Pressable as Pressable21, StyleSheet as StyleSheet40, View as
|
|
4652
|
-
import
|
|
4653
|
-
import { jsx as
|
|
4851
|
+
import { Animated as Animated21, AppState, Easing as Easing12, FlatList, Pressable as Pressable21, StyleSheet as StyleSheet40, View as View47 } from "react-native";
|
|
4852
|
+
import Svg26, { Path as Path22 } from "react-native-svg";
|
|
4853
|
+
import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
4654
4854
|
var showcaseLabels = {
|
|
4655
4855
|
previous: "Previous slide",
|
|
4656
4856
|
next: "Next slide",
|
|
@@ -4709,9 +4909,9 @@ function Showcase({ label, items: items2, getId, renderItem, getTitle, interval
|
|
|
4709
4909
|
const item = items2[current];
|
|
4710
4910
|
const title = item !== void 0 ? getTitle?.(item) : void 0;
|
|
4711
4911
|
const control = [styles40.control, { borderColor: theme.borderDefault, backgroundColor: theme.surface1 }];
|
|
4712
|
-
const icon = (d) => /* @__PURE__ */
|
|
4713
|
-
return /* @__PURE__ */
|
|
4714
|
-
/* @__PURE__ */
|
|
4912
|
+
const icon = (d) => /* @__PURE__ */ jsx53(Svg26, { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx53(Path22, { d, stroke: theme.textSecondary, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
4913
|
+
return /* @__PURE__ */ jsxs47(View47, { role: "group", "aria-label": label, style: [styles40.root, style], children: [
|
|
4914
|
+
/* @__PURE__ */ jsx53(View47, { "aria-live": announce ? "polite" : "off", onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: /* @__PURE__ */ jsx53(
|
|
4715
4915
|
FlatList,
|
|
4716
4916
|
{
|
|
4717
4917
|
ref: list,
|
|
@@ -4732,21 +4932,21 @@ function Showcase({ label, items: items2, getId, renderItem, getTitle, interval
|
|
|
4732
4932
|
onIndexChange?.(next, true);
|
|
4733
4933
|
}
|
|
4734
4934
|
},
|
|
4735
|
-
renderItem: ({ item: slide, index }) => /* @__PURE__ */
|
|
4935
|
+
renderItem: ({ item: slide, index }) => /* @__PURE__ */ jsx53(View47, { role: "group", "aria-label": labels.slide(index + 1, total), style: { width }, children: Math.abs(index - current) <= 1 ? renderItem(slide, { index, active: index === current }) : null })
|
|
4736
4936
|
}
|
|
4737
4937
|
) }),
|
|
4738
|
-
/* @__PURE__ */
|
|
4739
|
-
i < current || i === current && !playing ? /* @__PURE__ */
|
|
4740
|
-
i === current && playing ? /* @__PURE__ */
|
|
4938
|
+
/* @__PURE__ */ jsx53(View47, { style: styles40.segments, children: items2.map((slide, i) => /* @__PURE__ */ jsx53(Pressable21, { role: "button", "aria-label": labels.goTo(i + 1, total), "aria-current": i === current ? true : void 0, onPress: () => go(i, true), style: styles40.segment, children: /* @__PURE__ */ jsxs47(View47, { style: [styles40.track, { backgroundColor: theme.surface3 }], children: [
|
|
4939
|
+
i < current || i === current && !playing ? /* @__PURE__ */ jsx53(View47, { style: [StyleSheet40.absoluteFill, { backgroundColor: theme.accent }] }) : null,
|
|
4940
|
+
i === current && playing ? /* @__PURE__ */ jsx53(Animated21.View, { style: [styles40.fill, { backgroundColor: theme.accent, width: fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) }] }) : null
|
|
4741
4941
|
] }) }, getId(slide))) }),
|
|
4742
|
-
/* @__PURE__ */
|
|
4743
|
-
/* @__PURE__ */
|
|
4942
|
+
/* @__PURE__ */ jsxs47(View47, { style: styles40.bar, children: [
|
|
4943
|
+
/* @__PURE__ */ jsxs47(Txt, { variant: "caption", tone: "secondary", numberOfLines: 1, style: styles40.counter, children: [
|
|
4744
4944
|
title ? `${title} \xB7 ` : "",
|
|
4745
4945
|
labels.counter(current + 1, total)
|
|
4746
4946
|
] }),
|
|
4747
|
-
/* @__PURE__ */
|
|
4748
|
-
playing ? /* @__PURE__ */
|
|
4749
|
-
/* @__PURE__ */
|
|
4947
|
+
/* @__PURE__ */ jsx53(Pressable21, { role: "button", "aria-label": labels.previous, disabled: !loop && current === 0, hitSlop: 6, onPress: () => go(current - 1, true), style: control, children: icon("M15 5l-7 7 7 7") }),
|
|
4948
|
+
playing ? /* @__PURE__ */ jsx53(Pressable21, { role: "button", "aria-label": paused ? labels.play : labels.pause, hitSlop: 6, onPress: () => setPaused(!paused), style: control, children: icon(paused ? "M8 5.5v13l10-6.5Z" : "M8 5v14M16 5v14") }) : null,
|
|
4949
|
+
/* @__PURE__ */ jsx53(Pressable21, { role: "button", "aria-label": labels.next, disabled: !loop && current === total - 1, hitSlop: 6, onPress: () => go(current + 1, true), style: control, children: icon("M9 5l7 7-7 7") })
|
|
4750
4950
|
] })
|
|
4751
4951
|
] });
|
|
4752
4952
|
}
|
|
@@ -4764,7 +4964,7 @@ var styles40 = StyleSheet40.create({
|
|
|
4764
4964
|
// src/native/skeleton.tsx
|
|
4765
4965
|
import * as React37 from "react";
|
|
4766
4966
|
import { Animated as Animated22 } from "react-native";
|
|
4767
|
-
import { jsx as
|
|
4967
|
+
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
4768
4968
|
var SHAPE = {
|
|
4769
4969
|
text: { width: "100%", height: 12, radius: 4 },
|
|
4770
4970
|
circle: { width: 40, height: 40, radius: 9999 },
|
|
@@ -4790,7 +4990,7 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
|
4790
4990
|
}, [reduce, opacity]);
|
|
4791
4991
|
const s = SHAPE[shape];
|
|
4792
4992
|
const side = shape === "circle" ? width ?? height ?? s.width : void 0;
|
|
4793
|
-
return /* @__PURE__ */
|
|
4993
|
+
return /* @__PURE__ */ jsx54(
|
|
4794
4994
|
Animated22.View,
|
|
4795
4995
|
{
|
|
4796
4996
|
testID,
|
|
@@ -4805,9 +5005,9 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
|
4805
5005
|
|
|
4806
5006
|
// src/native/slider.tsx
|
|
4807
5007
|
import * as React38 from "react";
|
|
4808
|
-
import { PanResponder as PanResponder2, StyleSheet as StyleSheet41, Text as Text17, View as
|
|
4809
|
-
import
|
|
4810
|
-
import { jsx as
|
|
5008
|
+
import { PanResponder as PanResponder2, StyleSheet as StyleSheet41, Text as Text17, View as View48 } from "react-native";
|
|
5009
|
+
import Svg27, { Defs as Defs14, LinearGradient as LinearGradient14, Rect as Rect5, Stop as Stop14 } from "react-native-svg";
|
|
5010
|
+
import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
4811
5011
|
var THUMB = 26;
|
|
4812
5012
|
var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : [...v];
|
|
4813
5013
|
function Slider({
|
|
@@ -4899,24 +5099,24 @@ function Slider({
|
|
|
4899
5099
|
const along = (p) => vertical ? { bottom: p * length } : { left: p * length };
|
|
4900
5100
|
const onLayout = (e) => setLength(vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width);
|
|
4901
5101
|
const fill = vertical ? { bottom: pct(lo) * length, height: (pct(hi) - pct(lo)) * length, left: 0, right: 0 } : { left: pct(lo) * length, width: (pct(hi) - pct(lo)) * length, top: 0, bottom: 0 };
|
|
4902
|
-
return /* @__PURE__ */
|
|
4903
|
-
showLabel ? /* @__PURE__ */
|
|
4904
|
-
/* @__PURE__ */
|
|
4905
|
-
/* @__PURE__ */
|
|
5102
|
+
return /* @__PURE__ */ jsxs48(View48, { style: [styles41.root, vertical ? styles41.rootVertical : null, disabled ? styles41.disabled : null, style], children: [
|
|
5103
|
+
showLabel ? /* @__PURE__ */ jsxs48(View48, { style: styles41.header, children: [
|
|
5104
|
+
/* @__PURE__ */ jsx55(Text17, { style: [styles41.label, { color: theme.textSecondary }], children: label }),
|
|
5105
|
+
/* @__PURE__ */ jsx55(Text17, { "aria-hidden": true, style: [styles41.value, { color: theme.textSecondary }], children: current.map(formatValue).join(" \u2013 ") })
|
|
4906
5106
|
] }) : null,
|
|
4907
|
-
/* @__PURE__ */
|
|
4908
|
-
/* @__PURE__ */
|
|
4909
|
-
/* @__PURE__ */
|
|
4910
|
-
/* @__PURE__ */
|
|
4911
|
-
/* @__PURE__ */
|
|
4912
|
-
/* @__PURE__ */
|
|
5107
|
+
/* @__PURE__ */ jsxs48(View48, { ...responder.panHandlers, style: vertical ? styles41.controlVertical : styles41.control, children: [
|
|
5108
|
+
/* @__PURE__ */ jsxs48(View48, { onLayout, pointerEvents: "none", style: [vertical ? styles41.trackVertical : styles41.track, { borderRadius: radius3.full, backgroundColor: theme.surface3 }], children: [
|
|
5109
|
+
/* @__PURE__ */ jsx55(View48, { style: [styles41.fill, fill, { borderRadius: radius3.full, overflow: "hidden", backgroundColor: theme.accent }], children: tone3 === "gradient" ? /* @__PURE__ */ jsxs48(Svg27, { width: "100%", height: "100%", "aria-hidden": true, children: [
|
|
5110
|
+
/* @__PURE__ */ jsx55(Defs14, { children: /* @__PURE__ */ jsxs48(LinearGradient14, { id: gradientId, x1: "0", y1: vertical ? "1" : "0", x2: vertical ? "0" : "1", y2: "0", children: [
|
|
5111
|
+
/* @__PURE__ */ jsx55(Stop14, { offset: "0", stopColor: theme.accent }),
|
|
5112
|
+
/* @__PURE__ */ jsx55(Stop14, { offset: "1", stopColor: theme.accent2 })
|
|
4913
5113
|
] }) }),
|
|
4914
|
-
/* @__PURE__ */
|
|
5114
|
+
/* @__PURE__ */ jsx55(Rect5, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
|
|
4915
5115
|
] }) : null }),
|
|
4916
|
-
tickValues.map((t) => /* @__PURE__ */
|
|
5116
|
+
tickValues.map((t) => /* @__PURE__ */ jsx55(View48, { style: [vertical ? styles41.tickVertical : styles41.tick, along(pct(t)), { backgroundColor: t > lo && t < hi ? theme.onAccent : theme.borderStrong }] }, t))
|
|
4917
5117
|
] }),
|
|
4918
|
-
current.map((v, i) => /* @__PURE__ */
|
|
4919
|
-
|
|
5118
|
+
current.map((v, i) => /* @__PURE__ */ jsx55(
|
|
5119
|
+
View48,
|
|
4920
5120
|
{
|
|
4921
5121
|
accessible: true,
|
|
4922
5122
|
role: "slider",
|
|
@@ -4936,12 +5136,12 @@ function Slider({
|
|
|
4936
5136
|
},
|
|
4937
5137
|
pointerEvents: "none",
|
|
4938
5138
|
style: [styles41.thumb, vertical ? { bottom: pct(v) * length, left: (44 - THUMB) / 2, marginLeft: 0, marginTop: 0 } : { left: pct(v) * length - THUMB / 2, top: 0 }, { borderColor: theme.accent, backgroundColor: theme.textOnMedia, shadowColor: theme.scrimStrong }],
|
|
4939
|
-
children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */
|
|
5139
|
+
children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */ jsx55(View48, { "aria-hidden": true, style: [vertical ? styles41.bubbleVertical : styles41.bubble, { backgroundColor: theme.textPrimary, borderRadius: radius3.md }], children: /* @__PURE__ */ jsx55(Text17, { style: [styles41.bubbleText, { color: theme.surface0 }], children: formatValue(v) }) }) : null
|
|
4940
5140
|
},
|
|
4941
5141
|
i
|
|
4942
5142
|
))
|
|
4943
5143
|
] }),
|
|
4944
|
-
marks2?.length && !vertical ? /* @__PURE__ */
|
|
5144
|
+
marks2?.length && !vertical ? /* @__PURE__ */ jsx55(View48, { "aria-hidden": true, style: styles41.marks, children: marks2.map((m) => /* @__PURE__ */ jsx55(Text17, { style: [styles41.mark, { left: pct(m.value) * length, color: theme.textSecondary, transform: [{ translateX: m.value === min ? 0 : m.value === max ? -40 : -20 }], textAlign: m.value === min ? "left" : m.value === max ? "right" : "center" }], children: m.label }, m.value)) }) : null
|
|
4945
5145
|
] });
|
|
4946
5146
|
}
|
|
4947
5147
|
var styles41 = StyleSheet41.create({
|
|
@@ -4980,10 +5180,10 @@ var styles41 = StyleSheet41.create({
|
|
|
4980
5180
|
|
|
4981
5181
|
// src/native/spinner.tsx
|
|
4982
5182
|
import { ActivityIndicator as ActivityIndicator2 } from "react-native";
|
|
4983
|
-
import { jsx as
|
|
5183
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
4984
5184
|
function Spinner({ label, size = "md", ...props }) {
|
|
4985
5185
|
const { theme } = useTheme();
|
|
4986
|
-
return /* @__PURE__ */
|
|
5186
|
+
return /* @__PURE__ */ jsx56(
|
|
4987
5187
|
ActivityIndicator2,
|
|
4988
5188
|
{
|
|
4989
5189
|
accessible: true,
|
|
@@ -4999,8 +5199,8 @@ function Spinner({ label, size = "md", ...props }) {
|
|
|
4999
5199
|
|
|
5000
5200
|
// src/native/splash-handoff.tsx
|
|
5001
5201
|
import * as React39 from "react";
|
|
5002
|
-
import { Animated as Animated23, Easing as Easing13, StyleSheet as StyleSheet42, View as
|
|
5003
|
-
import { jsx as
|
|
5202
|
+
import { Animated as Animated23, Easing as Easing13, StyleSheet as StyleSheet42, View as View49 } from "react-native";
|
|
5203
|
+
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
5004
5204
|
function SplashHandoff({ product, ready, onShown, onDone, size = 96, background, label, duration = 320, style }) {
|
|
5005
5205
|
const { theme } = useTheme();
|
|
5006
5206
|
const reduce = useReducedMotion();
|
|
@@ -5018,7 +5218,7 @@ function SplashHandoff({ product, ready, onShown, onDone, size = 96, background,
|
|
|
5018
5218
|
return () => animation.stop();
|
|
5019
5219
|
}, [ready, reduce, duration, opacity, onDone]);
|
|
5020
5220
|
if (gone) return null;
|
|
5021
|
-
return /* @__PURE__ */
|
|
5221
|
+
return /* @__PURE__ */ jsx57(
|
|
5022
5222
|
Animated23.View,
|
|
5023
5223
|
{
|
|
5024
5224
|
accessible: true,
|
|
@@ -5028,26 +5228,26 @@ function SplashHandoff({ product, ready, onShown, onDone, size = 96, background,
|
|
|
5028
5228
|
pointerEvents: ready ? "none" : "auto",
|
|
5029
5229
|
onLayout: onShown,
|
|
5030
5230
|
style: [StyleSheet42.absoluteFill, styles42.root, { backgroundColor: background ?? theme.surface0, opacity }, style],
|
|
5031
|
-
children: /* @__PURE__ */
|
|
5231
|
+
children: /* @__PURE__ */ jsx57(View49, { children: /* @__PURE__ */ jsx57(ProductMark, { id: product, size, animated: true }) })
|
|
5032
5232
|
}
|
|
5033
5233
|
);
|
|
5034
5234
|
}
|
|
5035
5235
|
var styles42 = StyleSheet42.create({ root: { alignItems: "center", justifyContent: "center", zIndex: 100 } });
|
|
5036
5236
|
|
|
5037
5237
|
// src/native/step-progress.tsx
|
|
5038
|
-
import { Pressable as Pressable22, StyleSheet as StyleSheet43, View as
|
|
5039
|
-
import
|
|
5040
|
-
import { jsx as
|
|
5238
|
+
import { Pressable as Pressable22, StyleSheet as StyleSheet43, View as View50 } from "react-native";
|
|
5239
|
+
import Svg28, { Path as Path23 } from "react-native-svg";
|
|
5240
|
+
import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
5041
5241
|
function StepProgress({ step, total, label, backLabel, onBack, trailing, style }) {
|
|
5042
5242
|
const { theme, insets } = useTheme();
|
|
5043
5243
|
const words2 = label(step, total);
|
|
5044
|
-
return /* @__PURE__ */
|
|
5045
|
-
/* @__PURE__ */
|
|
5046
|
-
onBack && backLabel ? /* @__PURE__ */
|
|
5047
|
-
/* @__PURE__ */
|
|
5048
|
-
/* @__PURE__ */
|
|
5244
|
+
return /* @__PURE__ */ jsxs49(View50, { style: [styles43.root, { paddingTop: insets.top + 8 }, style], children: [
|
|
5245
|
+
/* @__PURE__ */ jsxs49(View50, { style: styles43.row, children: [
|
|
5246
|
+
onBack && backLabel ? /* @__PURE__ */ jsx58(Pressable22, { role: "button", "aria-label": backLabel, hitSlop: 10, onPress: onBack, style: styles43.back, children: /* @__PURE__ */ jsx58(Svg28, { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx58(Path23, { d: "M15 5l-7 7 7 7", stroke: theme.textPrimary, strokeWidth: 2.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : /* @__PURE__ */ jsx58(View50, { style: styles43.back }),
|
|
5247
|
+
/* @__PURE__ */ jsx58(View50, { accessible: true, role: "progressbar", "aria-label": words2, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words2, style: styles43.bars, children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx58(View50, { style: [styles43.bar, { backgroundColor: i < step ? theme.accent : theme.surface3 }] }, i)) }),
|
|
5248
|
+
/* @__PURE__ */ jsx58(View50, { style: styles43.trailing, children: trailing })
|
|
5049
5249
|
] }),
|
|
5050
|
-
/* @__PURE__ */
|
|
5250
|
+
/* @__PURE__ */ jsx58(Txt, { variant: "caption", tone: "secondary", style: styles43.words, "aria-hidden": true, children: words2 })
|
|
5051
5251
|
] });
|
|
5052
5252
|
}
|
|
5053
5253
|
var styles43 = StyleSheet43.create({
|
|
@@ -5061,31 +5261,31 @@ var styles43 = StyleSheet43.create({
|
|
|
5061
5261
|
});
|
|
5062
5262
|
|
|
5063
5263
|
// src/native/stepper.tsx
|
|
5064
|
-
import { StyleSheet as StyleSheet44, View as
|
|
5065
|
-
import
|
|
5066
|
-
import { jsx as
|
|
5264
|
+
import { StyleSheet as StyleSheet44, View as View51 } from "react-native";
|
|
5265
|
+
import Svg29, { Circle as Circle16, Path as Path24 } from "react-native-svg";
|
|
5266
|
+
import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
5067
5267
|
var WORDS = { done: "done", current: "in progress", upcoming: "to come", error: "failed" };
|
|
5068
5268
|
function Stepper({ steps, current = 0, orientation = "vertical", statusLabels, "aria-label": label, style }) {
|
|
5069
5269
|
const { theme } = useTheme();
|
|
5070
5270
|
const words2 = { ...WORDS, ...statusLabels };
|
|
5071
5271
|
const vertical = orientation === "vertical";
|
|
5072
|
-
return /* @__PURE__ */
|
|
5272
|
+
return /* @__PURE__ */ jsx59(View51, { role: "list", "aria-label": label, style: [vertical ? styles44.column : styles44.row, style], children: steps.map((step, i) => {
|
|
5073
5273
|
const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
|
|
5074
5274
|
const last = i === steps.length - 1;
|
|
5075
|
-
const node = status === "current" ? /* @__PURE__ */
|
|
5076
|
-
/* @__PURE__ */
|
|
5077
|
-
status === "done" ? /* @__PURE__ */
|
|
5275
|
+
const node = status === "current" ? /* @__PURE__ */ jsx59(LoaderGlyph, { value: step.value ?? null, size: 24 }) : status === "error" ? /* @__PURE__ */ jsx59(LoaderGlyph, { state: "error", size: 24 }) : /* @__PURE__ */ jsxs50(Svg29, { width: 24, height: 24, viewBox: "0 0 24 24", "aria-hidden": true, children: [
|
|
5276
|
+
/* @__PURE__ */ jsx59(Circle16, { cx: 12, cy: 12, r: 10, fill: status === "done" ? theme.accent : "none", stroke: status === "done" ? theme.accent : theme.borderStrong, strokeWidth: 2 }),
|
|
5277
|
+
status === "done" ? /* @__PURE__ */ jsx59(Path24, { d: "M7.5 12.3l3 3 6-6.3", stroke: theme.onAccent, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) : null
|
|
5078
5278
|
] });
|
|
5079
|
-
const connector = !last ? /* @__PURE__ */
|
|
5080
|
-
return /* @__PURE__ */
|
|
5081
|
-
/* @__PURE__ */
|
|
5279
|
+
const connector = !last ? /* @__PURE__ */ jsx59(View51, { "aria-hidden": true, style: [vertical ? styles44.vLine : styles44.hLine, { backgroundColor: status === "done" ? theme.accent : theme.borderDefault }] }) : null;
|
|
5280
|
+
return /* @__PURE__ */ jsxs50(View51, { role: "listitem", accessible: true, "aria-label": `${step.title}, ${words2[status]}`, style: vertical ? styles44.vStep : styles44.hStep, children: [
|
|
5281
|
+
/* @__PURE__ */ jsxs50(View51, { style: vertical ? styles44.vRail : styles44.hRail, children: [
|
|
5082
5282
|
node,
|
|
5083
5283
|
connector
|
|
5084
5284
|
] }),
|
|
5085
|
-
/* @__PURE__ */
|
|
5086
|
-
/* @__PURE__ */
|
|
5087
|
-
step.description ? /* @__PURE__ */
|
|
5088
|
-
step.content && (status === "current" || status === "error") ? /* @__PURE__ */
|
|
5285
|
+
/* @__PURE__ */ jsxs50(View51, { style: [styles44.body, vertical && !last ? { paddingBottom: 20 } : null], children: [
|
|
5286
|
+
/* @__PURE__ */ jsx59(Txt, { variant: "label", tone: status === "upcoming" ? "secondary" : "text", numberOfLines: vertical ? void 0 : 2, children: step.title }),
|
|
5287
|
+
step.description ? /* @__PURE__ */ jsx59(Txt, { variant: "caption", tone: "secondary", children: step.description }) : null,
|
|
5288
|
+
step.content && (status === "current" || status === "error") ? /* @__PURE__ */ jsx59(View51, { style: styles44.content, children: step.content }) : null
|
|
5089
5289
|
] })
|
|
5090
5290
|
] }, i);
|
|
5091
5291
|
}) });
|
|
@@ -5105,17 +5305,17 @@ var styles44 = StyleSheet44.create({
|
|
|
5105
5305
|
|
|
5106
5306
|
// src/native/swipe-deck.tsx
|
|
5107
5307
|
import * as React40 from "react";
|
|
5108
|
-
import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated24, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as Pressable23, StyleSheet as StyleSheet45, useWindowDimensions as useWindowDimensions2, View as
|
|
5109
|
-
import
|
|
5110
|
-
import { Fragment as Fragment8, jsx as
|
|
5308
|
+
import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated24, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as Pressable23, StyleSheet as StyleSheet45, useWindowDimensions as useWindowDimensions2, View as View52 } from "react-native";
|
|
5309
|
+
import Svg30, { Defs as Defs15, LinearGradient as LinearGradient15, Path as Path25, Rect as Rect6, Stop as Stop15 } from "react-native-svg";
|
|
5310
|
+
import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
5111
5311
|
function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabel = (n, t) => `Photo ${n} of ${t}`, style }) {
|
|
5112
5312
|
const { theme, radius: radius3 } = useTheme();
|
|
5113
5313
|
const [index, setIndex] = React40.useState(0);
|
|
5114
5314
|
const gradient = useSvgId("kz-profile-");
|
|
5115
5315
|
const [box, setBox] = React40.useState(null);
|
|
5116
5316
|
const photo = photos[index];
|
|
5117
|
-
return /* @__PURE__ */
|
|
5118
|
-
|
|
5317
|
+
return /* @__PURE__ */ jsxs51(
|
|
5318
|
+
View52,
|
|
5119
5319
|
{
|
|
5120
5320
|
accessible: Platform4.OS !== "web",
|
|
5121
5321
|
accessibilityActions: photos.length > 1 ? [{ name: "increment" }, { name: "decrement" }] : [],
|
|
@@ -5124,39 +5324,39 @@ function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabel =
|
|
|
5124
5324
|
"aria-label": [`${name}${age !== void 0 ? `, ${age}` : ""}`, bio, photos.length > 1 ? photoLabel(index + 1, photos.length) : null].filter(Boolean).join(". "),
|
|
5125
5325
|
style: [styles45.card, { borderRadius: radius3.xl, backgroundColor: theme.media }, style],
|
|
5126
5326
|
children: [
|
|
5127
|
-
photo ? /* @__PURE__ */
|
|
5128
|
-
photos.length > 1 ? /* @__PURE__ */
|
|
5129
|
-
/* @__PURE__ */
|
|
5130
|
-
/* @__PURE__ */
|
|
5131
|
-
/* @__PURE__ */
|
|
5327
|
+
photo ? /* @__PURE__ */ jsx60(Image5, { testID: "person-card-photo", source: { uri: photo.uri }, style: StyleSheet45.absoluteFill, resizeMode: "cover" }) : null,
|
|
5328
|
+
photos.length > 1 ? /* @__PURE__ */ jsxs51(Fragment8, { children: [
|
|
5329
|
+
/* @__PURE__ */ jsx60(View52, { style: styles45.bars, "aria-hidden": true, children: photos.map((_, i) => /* @__PURE__ */ jsx60(View52, { style: [styles45.bar, { backgroundColor: theme.textOnMedia, opacity: i === index ? 1 : 0.4 }] }, i)) }),
|
|
5330
|
+
/* @__PURE__ */ jsx60(Pressable23, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles45.half, { left: 0 }], onPress: () => setIndex((i) => Math.max(0, i - 1)) }),
|
|
5331
|
+
/* @__PURE__ */ jsx60(Pressable23, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles45.half, { right: 0 }], onPress: () => setIndex((i) => Math.min(photos.length - 1, i + 1)) })
|
|
5132
5332
|
] }) : null,
|
|
5133
|
-
/* @__PURE__ */
|
|
5134
|
-
|
|
5333
|
+
/* @__PURE__ */ jsxs51(
|
|
5334
|
+
View52,
|
|
5135
5335
|
{
|
|
5136
5336
|
testID: "person-card-overlay",
|
|
5137
5337
|
pointerEvents: "box-none",
|
|
5138
5338
|
style: styles45.bottom,
|
|
5139
5339
|
onLayout: (e) => setBox({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }),
|
|
5140
5340
|
children: [
|
|
5141
|
-
box ? /* @__PURE__ */
|
|
5142
|
-
/* @__PURE__ */
|
|
5143
|
-
/* @__PURE__ */
|
|
5144
|
-
/* @__PURE__ */
|
|
5145
|
-
/* @__PURE__ */
|
|
5341
|
+
box ? /* @__PURE__ */ jsxs51(Svg30, { testID: "person-card-scrim", style: styles45.scrim, width: box.width, height: box.height, "aria-hidden": true, children: [
|
|
5342
|
+
/* @__PURE__ */ jsx60(Defs15, { children: /* @__PURE__ */ jsxs51(LinearGradient15, { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
5343
|
+
/* @__PURE__ */ jsx60(Stop15, { offset: "0", stopColor: theme.scrimStrong, stopOpacity: 0 }),
|
|
5344
|
+
/* @__PURE__ */ jsx60(Stop15, { offset: "0.5", stopColor: theme.scrimStrong, stopOpacity: 0.8 }),
|
|
5345
|
+
/* @__PURE__ */ jsx60(Stop15, { offset: "1", stopColor: theme.scrimStrong, stopOpacity: 1 })
|
|
5146
5346
|
] }) }),
|
|
5147
|
-
/* @__PURE__ */
|
|
5347
|
+
/* @__PURE__ */ jsx60(Rect6, { x: 0, y: 0, width: box.width, height: box.height, fill: `url(#${gradient})` })
|
|
5148
5348
|
] }) : null,
|
|
5149
|
-
/* @__PURE__ */
|
|
5150
|
-
/* @__PURE__ */
|
|
5151
|
-
/* @__PURE__ */
|
|
5349
|
+
/* @__PURE__ */ jsxs51(View52, { style: styles45.text, children: [
|
|
5350
|
+
/* @__PURE__ */ jsxs51(View52, { style: styles45.nameRow, children: [
|
|
5351
|
+
/* @__PURE__ */ jsxs51(Txt, { variant: "display", tone: "onMedia", style: styles45.name, numberOfLines: 1, children: [
|
|
5152
5352
|
name,
|
|
5153
|
-
age !== void 0 ? /* @__PURE__ */
|
|
5353
|
+
age !== void 0 ? /* @__PURE__ */ jsx60(Txt, { variant: "display", tone: "onMedia", style: styles45.age, children: ` ${age}` }) : null
|
|
5154
5354
|
] }),
|
|
5155
5355
|
badge
|
|
5156
5356
|
] }),
|
|
5157
5357
|
meta,
|
|
5158
|
-
bio ? /* @__PURE__ */
|
|
5159
|
-
footer ? /* @__PURE__ */
|
|
5358
|
+
bio ? /* @__PURE__ */ jsx60(Txt, { tone: "onMedia", numberOfLines: 2, children: bio }) : null,
|
|
5359
|
+
footer ? /* @__PURE__ */ jsx60(View52, { style: styles45.footer, children: footer }) : null
|
|
5160
5360
|
] })
|
|
5161
5361
|
]
|
|
5162
5362
|
}
|
|
@@ -5200,7 +5400,7 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5200
5400
|
const rotate = x.interpolate({ inputRange: [-width, 0, width], outputRange: ["-14deg", "0deg", "14deg"] });
|
|
5201
5401
|
const likeOpacity = x.interpolate({ inputRange: [0, width / 4], outputRange: [0, 1], extrapolate: "clamp" });
|
|
5202
5402
|
const passOpacity = x.interpolate({ inputRange: [-width / 4, 0], outputRange: [1, 0], extrapolate: "clamp" });
|
|
5203
|
-
const button = (direction) => /* @__PURE__ */
|
|
5403
|
+
const button = (direction) => /* @__PURE__ */ jsx60(
|
|
5204
5404
|
Pressable23,
|
|
5205
5405
|
{
|
|
5206
5406
|
role: "button",
|
|
@@ -5211,15 +5411,15 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5211
5411
|
styles45.button,
|
|
5212
5412
|
{ borderColor: direction === "like" ? theme.success : theme.danger, backgroundColor: theme.surface1, transform: [{ scale: pressed ? 0.92 : 1 }], opacity: top ? 1 : 0.4 }
|
|
5213
5413
|
],
|
|
5214
|
-
children: /* @__PURE__ */
|
|
5414
|
+
children: /* @__PURE__ */ jsx60(Svg30, { width: 28, height: 28, viewBox: "0 0 24 24", "aria-hidden": true, children: direction === "like" ? /* @__PURE__ */ jsx60(Path25, { d: "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z", fill: theme.success }) : /* @__PURE__ */ jsx60(Path25, { d: "M6 6l12 12M18 6 6 18", stroke: theme.danger, strokeWidth: 3, strokeLinecap: "round" }) })
|
|
5215
5415
|
}
|
|
5216
5416
|
);
|
|
5217
|
-
return /* @__PURE__ */
|
|
5218
|
-
/* @__PURE__ */
|
|
5417
|
+
return /* @__PURE__ */ jsxs51(View52, { style: [styles45.deck, style], children: [
|
|
5418
|
+
/* @__PURE__ */ jsxs51(View52, { style: styles45.stack, children: [
|
|
5219
5419
|
!top ? empty2 ?? null : null,
|
|
5220
5420
|
items2.slice(0, 2).reverse().map((item) => {
|
|
5221
5421
|
const isTop = item === top;
|
|
5222
|
-
return /* @__PURE__ */
|
|
5422
|
+
return /* @__PURE__ */ jsxs51(
|
|
5223
5423
|
Animated24.View,
|
|
5224
5424
|
{
|
|
5225
5425
|
...isTop ? pan.panHandlers : {},
|
|
@@ -5231,9 +5431,9 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5231
5431
|
style: [StyleSheet45.absoluteFill, isTop ? { transform: [{ translateX: x }, { rotate }] } : { transform: [{ scale: 0.96 }], opacity: 0.9 }],
|
|
5232
5432
|
children: [
|
|
5233
5433
|
renderCard(item),
|
|
5234
|
-
isTop ? /* @__PURE__ */
|
|
5235
|
-
/* @__PURE__ */
|
|
5236
|
-
/* @__PURE__ */
|
|
5434
|
+
isTop ? /* @__PURE__ */ jsxs51(Fragment8, { children: [
|
|
5435
|
+
/* @__PURE__ */ jsx60(Animated24.View, { pointerEvents: "none", style: [styles45.stamp, styles45.stampLike, { borderColor: theme.success, opacity: likeOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx60(Txt, { variant: "title", style: { color: theme.success }, children: labels.likeStamp ?? labels.like.toUpperCase() }) }),
|
|
5436
|
+
/* @__PURE__ */ jsx60(Animated24.View, { pointerEvents: "none", style: [styles45.stamp, styles45.stampPass, { borderColor: theme.danger, opacity: passOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx60(Txt, { variant: "title", style: { color: theme.danger }, children: labels.passStamp ?? labels.pass.toUpperCase() }) })
|
|
5237
5437
|
] }) : null
|
|
5238
5438
|
]
|
|
5239
5439
|
},
|
|
@@ -5241,7 +5441,7 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5241
5441
|
);
|
|
5242
5442
|
})
|
|
5243
5443
|
] }),
|
|
5244
|
-
hideButtons ? null : /* @__PURE__ */
|
|
5444
|
+
hideButtons ? null : /* @__PURE__ */ jsxs51(View52, { style: styles45.buttons, children: [
|
|
5245
5445
|
button("pass"),
|
|
5246
5446
|
button("like")
|
|
5247
5447
|
] })
|
|
@@ -5270,8 +5470,8 @@ var styles45 = StyleSheet45.create({
|
|
|
5270
5470
|
|
|
5271
5471
|
// src/native/swipeable-row.tsx
|
|
5272
5472
|
import * as React41 from "react";
|
|
5273
|
-
import { Animated as Animated25, PanResponder as PanResponder4, Pressable as Pressable24, StyleSheet as StyleSheet46, View as
|
|
5274
|
-
import { jsx as
|
|
5473
|
+
import { Animated as Animated25, PanResponder as PanResponder4, Pressable as Pressable24, StyleSheet as StyleSheet46, View as View53 } from "react-native";
|
|
5474
|
+
import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
5275
5475
|
var toneColor = (t, tone3) => ({ neutral: t.surface3, accent: t.accent, success: t.success, warning: t.warning, danger: t.danger })[tone3 ?? "neutral"];
|
|
5276
5476
|
var toneText = (tone3) => tone3 === "neutral" || tone3 === void 0 ? "text" : "onAccent";
|
|
5277
5477
|
function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6, actionWidth = 80, onActivate, testID, style }) {
|
|
@@ -5319,18 +5519,18 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
|
|
|
5319
5519
|
[trailing, leading, fullSwipe, width, actionWidth]
|
|
5320
5520
|
// eslint-disable-line react-hooks/exhaustive-deps -- run/settle are stable in effect
|
|
5321
5521
|
);
|
|
5322
|
-
const side = (actions, edge) => /* @__PURE__ */
|
|
5522
|
+
const side = (actions, edge) => /* @__PURE__ */ jsx61(View53, { "aria-hidden": true, style: [styles46.side, edge === "left" ? { left: 0 } : { right: 0, flexDirection: "row-reverse" }], children: actions.map((action, i) => (
|
|
5323
5523
|
// eslint-disable-next-line react-hooks/refs -- runs on a press, never during render
|
|
5324
|
-
/* @__PURE__ */
|
|
5524
|
+
/* @__PURE__ */ jsxs52(Pressable24, { focusable: false, tabIndex: -1, onPress: () => run(action), style: [styles46.action, { width: actionWidth, backgroundColor: toneColor(theme, action.tone) }], children: [
|
|
5325
5525
|
action.icon,
|
|
5326
|
-
/* @__PURE__ */
|
|
5526
|
+
/* @__PURE__ */ jsx61(Txt, { variant: "caption", tone: toneText(action.tone), style: styles46.actionText, numberOfLines: 1, children: action.label })
|
|
5327
5527
|
] }, i)
|
|
5328
5528
|
)) });
|
|
5329
5529
|
const all = [...leading, ...trailing];
|
|
5330
|
-
return /* @__PURE__ */
|
|
5530
|
+
return /* @__PURE__ */ jsxs52(View53, { style: [styles46.root, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
|
|
5331
5531
|
leading.length > 0 ? side(leading, "left") : null,
|
|
5332
5532
|
trailing.length > 0 ? side(trailing, "right") : null,
|
|
5333
|
-
/* @__PURE__ */
|
|
5533
|
+
/* @__PURE__ */ jsx61(
|
|
5334
5534
|
Animated25.View,
|
|
5335
5535
|
{
|
|
5336
5536
|
...pan.panHandlers,
|
|
@@ -5358,8 +5558,8 @@ var styles46 = StyleSheet46.create({
|
|
|
5358
5558
|
|
|
5359
5559
|
// src/native/switch.tsx
|
|
5360
5560
|
import * as React42 from "react";
|
|
5361
|
-
import { Animated as Animated26, Pressable as Pressable25, StyleSheet as StyleSheet47, Text as Text18, View as
|
|
5362
|
-
import { jsx as
|
|
5561
|
+
import { Animated as Animated26, Pressable as Pressable25, StyleSheet as StyleSheet47, Text as Text18, View as View54 } from "react-native";
|
|
5562
|
+
import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
5363
5563
|
var SIZES = { sm: { w: 40, h: 24, knob: 18 }, md: { w: 52, h: 32, knob: 26 } };
|
|
5364
5564
|
function Switch({ label, checked, defaultChecked = false, onCheckedChange, description, showLabel, size = "md", error, disabled, style }) {
|
|
5365
5565
|
const { theme, motion: motion3, haptic } = useTheme();
|
|
@@ -5376,7 +5576,7 @@ function Switch({ label, checked, defaultChecked = false, onCheckedChange, descr
|
|
|
5376
5576
|
if (checked === void 0) setOwn(!on);
|
|
5377
5577
|
onCheckedChange?.(!on);
|
|
5378
5578
|
};
|
|
5379
|
-
const track = /* @__PURE__ */
|
|
5579
|
+
const track = /* @__PURE__ */ jsx62(View54, { style: [styles47.track, { width: d.w, height: d.h, borderRadius: d.h / 2, backgroundColor: on ? theme.accent : theme.surface3, borderColor: error ? theme.danger : on ? theme.accent : theme.borderDefault }], children: /* @__PURE__ */ jsx62(
|
|
5380
5580
|
Animated26.View,
|
|
5381
5581
|
{
|
|
5382
5582
|
style: [
|
|
@@ -5402,16 +5602,16 @@ function Switch({ label, checked, defaultChecked = false, onCheckedChange, descr
|
|
|
5402
5602
|
onPress: toggle
|
|
5403
5603
|
};
|
|
5404
5604
|
if (!showLabel)
|
|
5405
|
-
return /* @__PURE__ */
|
|
5406
|
-
return /* @__PURE__ */
|
|
5407
|
-
/* @__PURE__ */
|
|
5408
|
-
/* @__PURE__ */
|
|
5409
|
-
/* @__PURE__ */
|
|
5410
|
-
description ? /* @__PURE__ */
|
|
5605
|
+
return /* @__PURE__ */ jsx62(Pressable25, { ...a11y, hitSlop: { top: (44 - d.h) / 2, bottom: (44 - d.h) / 2, left: Math.max(0, (44 - d.w) / 2), right: Math.max(0, (44 - d.w) / 2) }, style: [disabled ? styles47.disabled : null, style], children: track });
|
|
5606
|
+
return /* @__PURE__ */ jsxs53(View54, { style: [styles47.root, style], children: [
|
|
5607
|
+
/* @__PURE__ */ jsxs53(Pressable25, { ...a11y, style: [styles47.row, disabled ? styles47.disabled : null], children: [
|
|
5608
|
+
/* @__PURE__ */ jsxs53(View54, { style: styles47.text, children: [
|
|
5609
|
+
/* @__PURE__ */ jsx62(Text18, { style: [styles47.label, { color: theme.textPrimary }], children: label }),
|
|
5610
|
+
description ? /* @__PURE__ */ jsx62(Text18, { style: [styles47.description, { color: theme.textSecondary }], children: description }) : null
|
|
5411
5611
|
] }),
|
|
5412
5612
|
track
|
|
5413
5613
|
] }),
|
|
5414
|
-
error ? /* @__PURE__ */
|
|
5614
|
+
error ? /* @__PURE__ */ jsx62(Text18, { role: "alert", "aria-live": "polite", style: [styles47.description, { color: theme.dangerText }], children: error }) : null
|
|
5415
5615
|
] });
|
|
5416
5616
|
}
|
|
5417
5617
|
var styles47 = StyleSheet47.create({
|
|
@@ -5426,15 +5626,15 @@ var styles47 = StyleSheet47.create({
|
|
|
5426
5626
|
});
|
|
5427
5627
|
|
|
5428
5628
|
// src/native/tab-bar.tsx
|
|
5429
|
-
import { Pressable as Pressable26, StyleSheet as StyleSheet48, Text as Text19, View as
|
|
5430
|
-
import { jsx as
|
|
5629
|
+
import { Pressable as Pressable26, StyleSheet as StyleSheet48, Text as Text19, View as View55 } from "react-native";
|
|
5630
|
+
import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
5431
5631
|
function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label": label, style }) {
|
|
5432
5632
|
const { theme, insets, haptic } = useTheme();
|
|
5433
|
-
return /* @__PURE__ */
|
|
5633
|
+
return /* @__PURE__ */ jsx63(View55, { role: "tablist", "aria-label": label, style: [styles48.bar, { backgroundColor: theme.glassBg, borderTopColor: theme.glassBorder, paddingBottom: Math.max(6, insets.bottom) }, style], children: items2.map((item) => {
|
|
5434
5634
|
const selected = item.value === value;
|
|
5435
5635
|
const color = selected ? theme.accentText : theme.textSecondary;
|
|
5436
5636
|
const badge = item.badge === true ? "" : typeof item.badge === "number" && item.badge > 0 ? item.badge > 99 ? "99+" : String(item.badge) : null;
|
|
5437
|
-
return /* @__PURE__ */
|
|
5637
|
+
return /* @__PURE__ */ jsxs54(
|
|
5438
5638
|
Pressable26,
|
|
5439
5639
|
{
|
|
5440
5640
|
role: "tab",
|
|
@@ -5446,12 +5646,12 @@ function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label":
|
|
|
5446
5646
|
},
|
|
5447
5647
|
style: ({ pressed }) => [styles48.item, { opacity: pressed ? 0.7 : 1 }],
|
|
5448
5648
|
children: [
|
|
5449
|
-
/* @__PURE__ */
|
|
5649
|
+
/* @__PURE__ */ jsxs54(View55, { "aria-hidden": true, style: styles48.icon, children: [
|
|
5450
5650
|
item.icon(selected, color),
|
|
5451
|
-
badge !== null ? /* @__PURE__ */
|
|
5651
|
+
badge !== null ? /* @__PURE__ */ jsx63(View55, { style: [badge ? styles48.count : styles48.dot, { backgroundColor: theme.danger, borderColor: theme.surface1 }], children: badge ? /* @__PURE__ */ jsx63(Text19, { style: [styles48.countText, { color: theme.onAccent }], children: badge }) : null }) : null
|
|
5452
5652
|
] }),
|
|
5453
|
-
/* @__PURE__ */
|
|
5454
|
-
badge !== null && item.badgeLabel ? /* @__PURE__ */
|
|
5653
|
+
/* @__PURE__ */ jsx63(Text19, { numberOfLines: 1, style: [styles48.label, { color, fontWeight: selected ? "700" : "500" }], children: item.label }),
|
|
5654
|
+
badge !== null && item.badgeLabel ? /* @__PURE__ */ jsx63(Text19, { style: styles48.unseen, children: `, ${item.badgeLabel}` }) : null
|
|
5455
5655
|
]
|
|
5456
5656
|
},
|
|
5457
5657
|
item.value
|
|
@@ -5471,8 +5671,8 @@ var styles48 = StyleSheet48.create({
|
|
|
5471
5671
|
|
|
5472
5672
|
// src/native/tabs.tsx
|
|
5473
5673
|
import * as React43 from "react";
|
|
5474
|
-
import { Pressable as Pressable27, ScrollView as ScrollView7, StyleSheet as StyleSheet49, View as
|
|
5475
|
-
import { jsx as
|
|
5674
|
+
import { Pressable as Pressable27, ScrollView as ScrollView7, StyleSheet as StyleSheet49, View as View56 } from "react-native";
|
|
5675
|
+
import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
5476
5676
|
function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label": label, variant = "underline", style }) {
|
|
5477
5677
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
5478
5678
|
const [own, setOwn] = React43.useState(defaultValue ?? items2[0]?.value);
|
|
@@ -5486,7 +5686,7 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
|
|
|
5486
5686
|
const segmented = variant === "segmented";
|
|
5487
5687
|
const tabs = items2.map((item) => {
|
|
5488
5688
|
const selected = item.value === current;
|
|
5489
|
-
return /* @__PURE__ */
|
|
5689
|
+
return /* @__PURE__ */ jsx64(
|
|
5490
5690
|
Pressable27,
|
|
5491
5691
|
{
|
|
5492
5692
|
role: "tab",
|
|
@@ -5500,18 +5700,18 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
|
|
|
5500
5700
|
!segmented ? { borderBottomColor: selected ? theme.accent : "transparent" } : null,
|
|
5501
5701
|
item.disabled ? styles49.disabled : null
|
|
5502
5702
|
],
|
|
5503
|
-
children: /* @__PURE__ */
|
|
5703
|
+
children: /* @__PURE__ */ jsxs55(Txt, { variant: "label", tone: selected ? "text" : "secondary", numberOfLines: 1, children: [
|
|
5504
5704
|
item.label,
|
|
5505
|
-
item.count !== void 0 ? /* @__PURE__ */
|
|
5705
|
+
item.count !== void 0 ? /* @__PURE__ */ jsx64(Txt, { variant: "caption", tone: "secondary", children: ` ${item.count}` }) : null
|
|
5506
5706
|
] })
|
|
5507
5707
|
},
|
|
5508
5708
|
item.value
|
|
5509
5709
|
);
|
|
5510
5710
|
});
|
|
5511
5711
|
const panel = items2.find((i) => i.value === current)?.content;
|
|
5512
|
-
return /* @__PURE__ */
|
|
5513
|
-
segmented ? /* @__PURE__ */
|
|
5514
|
-
panel !== void 0 ? /* @__PURE__ */
|
|
5712
|
+
return /* @__PURE__ */ jsxs55(View56, { style: [styles49.root, style], children: [
|
|
5713
|
+
segmented ? /* @__PURE__ */ jsx64(View56, { role: "tablist", "aria-label": label, style: [styles49.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md }], children: tabs }) : /* @__PURE__ */ jsx64(View56, { style: [styles49.underline, { borderBottomColor: theme.borderSubtle }], children: /* @__PURE__ */ jsx64(ScrollView7, { horizontal: true, showsHorizontalScrollIndicator: false, role: "tablist", "aria-label": label, contentContainerStyle: styles49.scroll, children: tabs }) }),
|
|
5714
|
+
panel !== void 0 ? /* @__PURE__ */ jsx64(View56, { role: "tabpanel", children: panel }) : null
|
|
5515
5715
|
] });
|
|
5516
5716
|
}
|
|
5517
5717
|
var styles49 = StyleSheet49.create({
|
|
@@ -5525,15 +5725,15 @@ var styles49 = StyleSheet49.create({
|
|
|
5525
5725
|
});
|
|
5526
5726
|
|
|
5527
5727
|
// src/native/tag-selector.tsx
|
|
5528
|
-
import { StyleSheet as StyleSheet50, View as
|
|
5529
|
-
import { jsx as
|
|
5728
|
+
import { StyleSheet as StyleSheet50, View as View57 } from "react-native";
|
|
5729
|
+
import { jsx as jsx65, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
5530
5730
|
function TagSelector({ label, options, value, onValueChange, max, countLabel, style }) {
|
|
5531
5731
|
const { haptic } = useTheme();
|
|
5532
5732
|
const full = max !== void 0 && value.length >= max;
|
|
5533
|
-
return /* @__PURE__ */
|
|
5534
|
-
/* @__PURE__ */
|
|
5733
|
+
return /* @__PURE__ */ jsxs56(View57, { style: [styles50.root, style], children: [
|
|
5734
|
+
/* @__PURE__ */ jsx65(View57, { role: "group", "aria-label": label, style: styles50.wrap, children: options.map((option) => {
|
|
5535
5735
|
const on = value.includes(option.value);
|
|
5536
|
-
return /* @__PURE__ */
|
|
5736
|
+
return /* @__PURE__ */ jsx65(
|
|
5537
5737
|
Chip,
|
|
5538
5738
|
{
|
|
5539
5739
|
selected: on,
|
|
@@ -5547,15 +5747,15 @@ function TagSelector({ label, options, value, onValueChange, max, countLabel, st
|
|
|
5547
5747
|
option.value
|
|
5548
5748
|
);
|
|
5549
5749
|
}) }),
|
|
5550
|
-
max !== void 0 && countLabel ? /* @__PURE__ */
|
|
5750
|
+
max !== void 0 && countLabel ? /* @__PURE__ */ jsx65(Txt, { variant: "caption", tone: full ? "accent" : "secondary", "aria-live": "polite", children: countLabel(value.length, max) }) : null
|
|
5551
5751
|
] });
|
|
5552
5752
|
}
|
|
5553
5753
|
var styles50 = StyleSheet50.create({ root: { gap: 8 }, wrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 } });
|
|
5554
5754
|
|
|
5555
5755
|
// src/native/toast.tsx
|
|
5556
5756
|
import * as React44 from "react";
|
|
5557
|
-
import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated27, PanResponder as PanResponder5, Pressable as Pressable28, StyleSheet as StyleSheet51, Text as Text20, View as
|
|
5558
|
-
import { Fragment as Fragment9, jsx as
|
|
5757
|
+
import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated27, PanResponder as PanResponder5, Pressable as Pressable28, StyleSheet as StyleSheet51, Text as Text20, View as View58 } from "react-native";
|
|
5758
|
+
import { Fragment as Fragment9, jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
5559
5759
|
var items = [];
|
|
5560
5760
|
var listeners2 = /* @__PURE__ */ new Set();
|
|
5561
5761
|
var counter = 0;
|
|
@@ -5622,15 +5822,15 @@ function ToastView({ item, closeLabel, duration }) {
|
|
|
5622
5822
|
return () => clearTimeout(timer2);
|
|
5623
5823
|
}, [item.id, ms]);
|
|
5624
5824
|
const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
|
|
5625
|
-
const text = /* @__PURE__ */
|
|
5626
|
-
item.icon ? /* @__PURE__ */
|
|
5627
|
-
/* @__PURE__ */
|
|
5628
|
-
/* @__PURE__ */
|
|
5629
|
-
item.description ? /* @__PURE__ */
|
|
5825
|
+
const text = /* @__PURE__ */ jsxs57(Fragment9, { children: [
|
|
5826
|
+
item.icon ? /* @__PURE__ */ jsx66(View58, { "aria-hidden": true, children: item.icon }) : null,
|
|
5827
|
+
/* @__PURE__ */ jsxs57(View58, { style: styles51.content, children: [
|
|
5828
|
+
/* @__PURE__ */ jsx66(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
|
|
5829
|
+
item.description ? /* @__PURE__ */ jsx66(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
|
|
5630
5830
|
] })
|
|
5631
5831
|
] });
|
|
5632
|
-
const body = /* @__PURE__ */
|
|
5633
|
-
item.onPress ? /* @__PURE__ */
|
|
5832
|
+
const body = /* @__PURE__ */ jsxs57(Fragment9, { children: [
|
|
5833
|
+
item.onPress ? /* @__PURE__ */ jsx66(
|
|
5634
5834
|
Pressable28,
|
|
5635
5835
|
{
|
|
5636
5836
|
role: "button",
|
|
@@ -5641,8 +5841,8 @@ function ToastView({ item, closeLabel, duration }) {
|
|
|
5641
5841
|
style: ({ pressed }) => [styles51.main, { opacity: pressed ? 0.8 : 1 }],
|
|
5642
5842
|
children: text
|
|
5643
5843
|
}
|
|
5644
|
-
) : /* @__PURE__ */
|
|
5645
|
-
item.action ? /* @__PURE__ */
|
|
5844
|
+
) : /* @__PURE__ */ jsx66(View58, { style: styles51.main, children: text }),
|
|
5845
|
+
item.action ? /* @__PURE__ */ jsx66(
|
|
5646
5846
|
Pressable28,
|
|
5647
5847
|
{
|
|
5648
5848
|
role: "button",
|
|
@@ -5651,23 +5851,23 @@ function ToastView({ item, closeLabel, duration }) {
|
|
|
5651
5851
|
dismiss(item.id);
|
|
5652
5852
|
},
|
|
5653
5853
|
style: [styles51.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
|
|
5654
|
-
children: /* @__PURE__ */
|
|
5854
|
+
children: /* @__PURE__ */ jsx66(Text20, { style: [styles51.actionLabel, { color: theme.onAccent }], children: item.action.label })
|
|
5655
5855
|
}
|
|
5656
5856
|
) : null,
|
|
5657
|
-
/* @__PURE__ */
|
|
5857
|
+
/* @__PURE__ */ jsx66(Pressable28, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles51.close, children: /* @__PURE__ */ jsx66(Text20, { style: [styles51.cross, { color: theme.textSecondary }], children: "\xD7" }) })
|
|
5658
5858
|
] });
|
|
5659
5859
|
const frame = [
|
|
5660
5860
|
styles51.toast,
|
|
5661
5861
|
{ backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
|
|
5662
5862
|
];
|
|
5663
5863
|
const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }, { translateX: swipe }] };
|
|
5664
|
-
return /* @__PURE__ */
|
|
5864
|
+
return /* @__PURE__ */ jsx66(Animated27.View, { "aria-live": "polite", style: motion3, ...drag.panHandlers, children: /* @__PURE__ */ jsx66(View58, { style: frame, children: body }) });
|
|
5665
5865
|
}
|
|
5666
5866
|
function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
|
|
5667
5867
|
const all = React44.useSyncExternalStore(subscribe2, snapshot, snapshot);
|
|
5668
5868
|
const shown = all.slice(-max);
|
|
5669
5869
|
if (shown.length === 0) return null;
|
|
5670
|
-
return /* @__PURE__ */
|
|
5870
|
+
return /* @__PURE__ */ jsx66(View58, { pointerEvents: "box-none", style: [styles51.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx66(ToastView, { item, closeLabel, duration }, item.id)) });
|
|
5671
5871
|
}
|
|
5672
5872
|
var styles51 = StyleSheet51.create({
|
|
5673
5873
|
stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
|
|
@@ -5692,15 +5892,15 @@ var styles51 = StyleSheet51.create({
|
|
|
5692
5892
|
});
|
|
5693
5893
|
|
|
5694
5894
|
// src/native/verified-badge.tsx
|
|
5695
|
-
import { StyleSheet as StyleSheet52, View as
|
|
5696
|
-
import
|
|
5697
|
-
import { jsx as
|
|
5895
|
+
import { StyleSheet as StyleSheet52, View as View59 } from "react-native";
|
|
5896
|
+
import Svg31, { Path as Path26 } from "react-native-svg";
|
|
5897
|
+
import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
5698
5898
|
function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
|
|
5699
5899
|
const { theme } = useTheme();
|
|
5700
|
-
return /* @__PURE__ */
|
|
5701
|
-
/* @__PURE__ */
|
|
5702
|
-
/* @__PURE__ */
|
|
5703
|
-
|
|
5900
|
+
return /* @__PURE__ */ jsxs58(View59, { accessible: true, role: "img", "aria-label": label, style: styles52.row, children: [
|
|
5901
|
+
/* @__PURE__ */ jsxs58(Svg31, { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true, children: [
|
|
5902
|
+
/* @__PURE__ */ jsx67(
|
|
5903
|
+
Path26,
|
|
5704
5904
|
{
|
|
5705
5905
|
d: "M12 2.5l2.4 1.7 2.9-.1.9 2.8 2.3 1.8-.9 2.8.9 2.8-2.3 1.8-.9 2.8-2.9-.1L12 21.5l-2.4-1.7-2.9.1-.9-2.8-2.3-1.8.9-2.8-.9-2.8 2.3-1.8.9-2.8 2.9.1z",
|
|
5706
5906
|
fill: theme.accent,
|
|
@@ -5708,15 +5908,16 @@ function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
|
|
|
5708
5908
|
strokeWidth: 1.2
|
|
5709
5909
|
}
|
|
5710
5910
|
),
|
|
5711
|
-
/* @__PURE__ */
|
|
5911
|
+
/* @__PURE__ */ jsx67(Path26, { d: "M8.3 12.3l2.5 2.5 4.9-5.2", fill: "none", stroke: theme.onAccent, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" })
|
|
5712
5912
|
] }),
|
|
5713
|
-
showLabel ? /* @__PURE__ */
|
|
5913
|
+
showLabel ? /* @__PURE__ */ jsx67(Txt, { variant: "caption", tone: on === "media" ? "onMedia" : "accent", style: styles52.text, children: label }) : null
|
|
5714
5914
|
] });
|
|
5715
5915
|
}
|
|
5716
5916
|
var styles52 = StyleSheet52.create({ row: { flexDirection: "row", alignItems: "center", gap: 4 }, text: { fontWeight: "700" } });
|
|
5717
5917
|
export {
|
|
5718
5918
|
ActionSheet,
|
|
5719
5919
|
ActivityFeed,
|
|
5920
|
+
AkinazaMark,
|
|
5720
5921
|
Avatar,
|
|
5721
5922
|
AvatarGroup,
|
|
5722
5923
|
AvatarRoot,
|
|
@@ -5749,6 +5950,7 @@ export {
|
|
|
5749
5950
|
Header,
|
|
5750
5951
|
IconButton,
|
|
5751
5952
|
ImageViewer,
|
|
5953
|
+
KachizakaMark,
|
|
5752
5954
|
KrizakaMark,
|
|
5753
5955
|
Loader,
|
|
5754
5956
|
LoaderGlyph,
|