@krizaka/ui 3.5.0 → 3.7.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 +1 -0
- package/dist/app-shell.d.ts +24 -22
- package/dist/app-shell.js +9 -3
- package/dist/app-shell.js.map +1 -1
- package/dist/chat.js +2 -1
- package/dist/chat.js.map +1 -1
- package/dist/chunk-3GODX3D6.js +25 -0
- package/dist/chunk-3GODX3D6.js.map +1 -0
- package/dist/{chunk-F2GKFIYK.js → chunk-CURW36FI.js} +1 -1
- package/dist/chunk-JXLDUDTD.js +2 -0
- package/dist/chunk-JXLDUDTD.js.map +1 -0
- package/dist/{chunk-R6SDS7JM.js → chunk-ND3L5VHT.js} +25 -2
- package/dist/chunk-ND3L5VHT.js.map +1 -0
- package/dist/chunk-NPF3OHE2.js +2 -0
- package/dist/chunk-NPF3OHE2.js.map +1 -0
- package/dist/{chunk-ECSCA3CN.js → chunk-UOMP6VOZ.js} +1 -1
- package/dist/command.js +1 -1
- package/dist/data-table.js +2 -1
- package/dist/data-table.js.map +1 -1
- package/dist/dialog.js +7 -3
- package/dist/dialog.js.map +1 -1
- package/dist/loader.d.ts +21 -1
- package/dist/loader.js +7 -3
- package/dist/loader.js.map +1 -1
- package/dist/map.js +7 -1
- package/dist/map.js.map +1 -1
- package/dist/marketing-layout.d.ts +3 -9
- package/dist/marketing-layout.js +24 -7
- package/dist/marketing-layout.js.map +1 -1
- package/dist/match-dialog.d.ts +3 -1
- package/dist/match-dialog.js +29 -5
- package/dist/match-dialog.js.map +1 -1
- package/dist/native/vertical-video.d.ts +102 -0
- package/dist/native/vertical-video.js +163 -0
- package/dist/native/vertical-video.js.map +1 -0
- package/dist/native.d.ts +65 -2
- package/dist/native.js +960 -878
- package/dist/native.js.map +1 -1
- package/dist/skip-link.d.ts +15 -0
- package/dist/skip-link.js +10 -0
- package/dist/skip-link.js.map +1 -0
- package/dist/tree-view.d.ts +2 -0
- package/dist/tree-view.js.map +1 -1
- package/dist/vertical-video.d.ts +112 -0
- package/dist/vertical-video.js +307 -0
- package/dist/vertical-video.js.map +1 -0
- package/package.json +56 -8
- package/registry/achievement.json +2 -1
- package/registry/action-bar.json +2 -1
- package/registry/action-sheet.json +1 -0
- package/registry/activity-feed.json +2 -1
- package/registry/alert.json +2 -1
- package/registry/app-shell.json +27 -5
- package/registry/argument-card.json +2 -1
- package/registry/audio-player.json +2 -1
- package/registry/auth-layout.json +7 -2
- package/registry/avatar.json +7 -6
- package/registry/badge.json +2 -1
- package/registry/button.json +2 -1
- package/registry/card-grid.json +2 -1
- package/registry/card.json +2 -1
- package/registry/catalogue-page.json +5 -2
- package/registry/changelog-page.json +5 -2
- package/registry/chat.json +2 -1
- package/registry/checkbox.json +2 -1
- package/registry/chip-link.json +2 -1
- package/registry/chip.json +2 -1
- package/registry/choice-grid.json +2 -1
- package/registry/cn.json +1 -0
- package/registry/code-block.json +2 -1
- package/registry/combobox.json +2 -1
- package/registry/command.json +2 -1
- package/registry/component-page.json +5 -2
- package/registry/confirm-button.json +2 -1
- package/registry/contact-page.json +5 -2
- package/registry/continue-prompt.json +2 -1
- package/registry/countdown.json +2 -1
- package/registry/cta-panel.json +2 -1
- package/registry/dashboard-layout.json +5 -2
- package/registry/data-table.json +2 -1
- package/registry/date-picker.json +3 -2
- package/registry/decision-list.json +2 -1
- package/registry/description-list.json +2 -1
- package/registry/detail-layout.json +16 -2
- package/registry/dialog.json +10 -4
- package/registry/docs-article-page.json +16 -2
- package/registry/docs-hub-page.json +5 -2
- package/registry/docs-layout.json +2 -1
- package/registry/dropdown-menu.json +2 -1
- package/registry/empty-state.json +14 -2
- package/registry/error-page.json +5 -2
- package/registry/examples/avatar/group.js +4 -7
- package/registry/examples/avatar/group.tsx +4 -11
- package/registry/examples/avatar/native/group.dark.png +0 -0
- package/registry/examples/avatar/native/group.js +4 -4
- package/registry/examples/avatar/native/group.light.png +0 -0
- package/registry/examples/avatar/native/group.tsx +4 -4
- package/registry/examples/avatar/native/presence.dark.png +0 -0
- package/registry/examples/avatar/native/presence.js +8 -5
- package/registry/examples/avatar/native/presence.light.png +0 -0
- package/registry/examples/avatar/native/presence.tsx +9 -5
- package/registry/examples/avatar/with-image.js +1 -4
- package/registry/examples/avatar/with-image.tsx +2 -9
- package/registry/examples/detail-layout/checkout.d.ts +4 -0
- package/registry/examples/detail-layout/checkout.js +37 -0
- package/registry/examples/detail-layout/checkout.tsx +44 -0
- package/registry/examples/docs-article-page/faq.d.ts +4 -0
- package/registry/examples/docs-article-page/faq.js +31 -0
- package/registry/examples/docs-article-page/faq.tsx +40 -0
- package/registry/examples/empty-state/library.d.ts +4 -0
- package/registry/examples/empty-state/library.js +25 -0
- package/registry/examples/empty-state/library.tsx +20 -0
- package/registry/examples/loader/branded.d.ts +4 -0
- package/registry/examples/loader/branded.js +12 -0
- package/registry/examples/loader/branded.tsx +7 -0
- package/registry/examples/loader/native/branded.d.ts +4 -0
- package/registry/examples/loader/native/branded.dark.png +0 -0
- package/registry/examples/loader/native/branded.js +12 -0
- package/registry/examples/loader/native/branded.light.png +0 -0
- package/registry/examples/loader/native/branded.tsx +11 -0
- package/registry/examples/longform-page/case-study.d.ts +4 -0
- package/registry/examples/longform-page/case-study.js +41 -0
- package/registry/examples/longform-page/case-study.tsx +40 -0
- package/registry/examples/profile-card/creator.js +2 -2
- package/registry/examples/profile-card/creator.tsx +2 -2
- package/registry/examples/profile-card/match.js +2 -2
- package/registry/examples/profile-card/match.tsx +2 -2
- package/registry/examples/profile-card/native/default.dark.png +0 -0
- package/registry/examples/profile-card/native/default.js +2 -2
- package/registry/examples/profile-card/native/default.light.png +0 -0
- package/registry/examples/profile-card/native/default.tsx +2 -2
- package/registry/examples/pull-to-refresh/native/branded.d.ts +4 -0
- package/registry/examples/pull-to-refresh/native/branded.dark.png +0 -0
- package/registry/examples/pull-to-refresh/native/branded.js +14 -0
- package/registry/examples/pull-to-refresh/native/branded.light.png +0 -0
- package/registry/examples/pull-to-refresh/native/branded.tsx +23 -0
- package/registry/examples/screen/native/app-shell.dark.png +0 -0
- package/registry/examples/screen/native/app-shell.js +1 -1
- package/registry/examples/screen/native/app-shell.light.png +0 -0
- package/registry/examples/screen/native/app-shell.tsx +1 -1
- package/registry/examples/screen/native/feed.dark.png +0 -0
- package/registry/examples/screen/native/feed.js +31 -14
- package/registry/examples/screen/native/feed.light.png +0 -0
- package/registry/examples/screen/native/feed.tsx +28 -24
- package/registry/examples/screen/native/map.d.ts +4 -0
- package/registry/examples/screen/native/map.dark.png +0 -0
- package/registry/examples/screen/native/map.js +26 -0
- package/registry/examples/screen/native/map.light.png +0 -0
- package/registry/examples/screen/native/map.tsx +31 -0
- package/registry/examples/screen/native/notifications.d.ts +4 -0
- package/registry/examples/screen/native/notifications.dark.png +0 -0
- package/registry/examples/screen/native/notifications.js +21 -0
- package/registry/examples/screen/native/notifications.light.png +0 -0
- package/registry/examples/screen/native/notifications.tsx +21 -0
- package/registry/examples/screen/native/profile.dark.png +0 -0
- package/registry/examples/screen/native/profile.js +2 -2
- package/registry/examples/screen/native/profile.light.png +0 -0
- package/registry/examples/screen/native/profile.tsx +2 -2
- package/registry/examples/skip-link/default.d.ts +4 -0
- package/registry/examples/skip-link/default.js +19 -0
- package/registry/examples/skip-link/default.tsx +12 -0
- package/registry/examples/splash-handoff/native/default.d.ts +4 -0
- package/registry/examples/splash-handoff/native/default.dark.png +0 -0
- package/registry/examples/splash-handoff/native/default.js +12 -0
- package/registry/examples/splash-handoff/native/default.light.png +0 -0
- package/registry/examples/splash-handoff/native/default.tsx +11 -0
- package/registry/examples/split-view/nearby.d.ts +4 -0
- package/registry/examples/split-view/nearby.js +33 -0
- package/registry/examples/split-view/nearby.tsx +45 -0
- package/registry/examples/split-view/notifications.d.ts +4 -0
- package/registry/examples/split-view/notifications.js +33 -0
- package/registry/examples/split-view/notifications.tsx +31 -0
- package/registry/examples/status-page/maintenance.d.ts +4 -0
- package/registry/examples/status-page/maintenance.js +29 -0
- package/registry/examples/status-page/maintenance.tsx +24 -0
- package/registry/examples/swipe-deck/discover.js +2 -3
- package/registry/examples/swipe-deck/discover.tsx +2 -3
- package/registry/examples/swipe-deck/native/discover.dark.png +0 -0
- package/registry/examples/swipe-deck/native/discover.js +2 -3
- package/registry/examples/swipe-deck/native/discover.light.png +0 -0
- package/registry/examples/swipe-deck/native/discover.tsx +2 -3
- package/registry/examples/vertical-video/feed.d.ts +4 -0
- package/registry/examples/vertical-video/feed.js +40 -0
- package/registry/examples/vertical-video/feed.tsx +36 -0
- package/registry/examples/vertical-video/native/rail.d.ts +4 -0
- package/registry/examples/vertical-video/native/rail.dark.png +0 -0
- package/registry/examples/vertical-video/native/rail.js +39 -0
- package/registry/examples/vertical-video/native/rail.light.png +0 -0
- package/registry/examples/vertical-video/native/rail.tsx +37 -0
- package/registry/examples/vertical-video/rail.d.ts +4 -0
- package/registry/examples/vertical-video/rail.js +39 -0
- package/registry/examples/vertical-video/rail.tsx +39 -0
- package/registry/fab.json +1 -0
- package/registry/field.json +2 -1
- package/registry/file-upload.json +3 -2
- package/registry/filter-bar.json +2 -1
- package/registry/form.json +3 -2
- package/registry/gallery-page.json +5 -2
- package/registry/glow-card.json +2 -1
- package/registry/goal-gauge.json +2 -1
- package/registry/header.json +1 -0
- package/registry/how-it-works-page.json +5 -2
- package/registry/image-cropper.json +2 -1
- package/registry/image-viewer.json +1 -0
- package/registry/index.json +492 -22
- package/registry/iso.json +2 -1
- package/registry/kanban.json +2 -1
- package/registry/kbd.json +2 -1
- package/registry/landing-page.json +5 -2
- package/registry/landscape.json +2 -1
- package/registry/legal-page.json +5 -2
- package/registry/link-card.json +2 -1
- package/registry/list.json +2 -1
- package/registry/loader.json +47 -3
- package/registry/longform-page.json +16 -2
- package/registry/map.json +4 -3
- package/registry/marketing-layout.json +13 -4
- package/registry/marquee.json +2 -1
- package/registry/mascot-quote.json +2 -1
- package/registry/mascot-state.json +2 -1
- package/registry/mascots.json +2 -1
- package/registry/match-dialog.json +17 -2
- package/registry/media-capture.json +2 -1
- package/registry/media-picker.json +1 -0
- package/registry/meter.json +2 -1
- package/registry/nav-bar.json +2 -1
- package/registry/number-ticker.json +2 -1
- package/registry/onboarding.json +1 -0
- package/registry/otp-input.json +1 -0
- package/registry/page-header.json +2 -1
- package/registry/page-hero.json +2 -1
- package/registry/page.json +2 -1
- package/registry/pagination.json +2 -1
- package/registry/permission-prompt.json +1 -0
- package/registry/photo-grid.json +2 -1
- package/registry/pointer-light.json +2 -1
- package/registry/popover.json +2 -1
- package/registry/pricing-page.json +5 -2
- package/registry/product-page.json +5 -2
- package/registry/profile-card.json +6 -5
- package/registry/progress.json +2 -1
- package/registry/promise-card.json +2 -1
- package/registry/pull-to-refresh.json +68 -4
- package/registry/radio-group.json +2 -1
- package/registry/screen.json +55 -6
- package/registry/scroll-stage.json +2 -1
- package/registry/search-field.json +2 -1
- package/registry/section-backdrop.json +2 -1
- package/registry/segmented.json +1 -0
- package/registry/separator.json +2 -1
- package/registry/settings-layout.json +5 -2
- package/registry/skeleton.json +2 -1
- package/registry/skip-link.json +122 -0
- package/registry/slider.json +2 -1
- package/registry/slot.json +2 -1
- package/registry/spinner.json +2 -1
- package/registry/splash-handoff.json +138 -0
- package/registry/split-view.json +27 -2
- package/registry/stage-banner.json +2 -1
- package/registry/stat.json +2 -1
- package/registry/status-page.json +18 -2
- package/registry/step-progress.json +2 -1
- package/registry/stepper.json +2 -1
- package/registry/swipe-deck.json +5 -4
- package/registry/swipeable-row.json +1 -0
- package/registry/switch.json +2 -1
- package/registry/tab-bar.json +1 -0
- package/registry/tabs.json +2 -1
- package/registry/tag-input.json +2 -1
- package/registry/tag-selector.json +2 -1
- package/registry/terminal-replay.json +2 -1
- package/registry/theme.json +2 -1
- package/registry/toast.json +2 -1
- package/registry/toc.json +2 -1
- package/registry/tooltip.json +2 -1
- package/registry/tree-view.json +10 -4
- package/registry/txt.json +1 -0
- package/registry/verified-badge.json +2 -1
- package/registry/vertical-video.json +871 -0
- package/registry/video-player.json +2 -1
- package/registry/video-trimmer.json +2 -1
- package/registry/virtual.json +2 -1
- package/dist/chunk-R6SDS7JM.js.map +0 -1
- /package/dist/{chunk-F2GKFIYK.js.map → chunk-CURW36FI.js.map} +0 -0
- /package/dist/{chunk-ECSCA3CN.js.map → chunk-UOMP6VOZ.js.map} +0 -0
package/dist/native.js
CHANGED
|
@@ -2490,7 +2490,7 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
|
|
|
2490
2490
|
import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2491
2491
|
function KrizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
2492
2492
|
const { theme } = useTheme();
|
|
2493
|
-
const { Animated:
|
|
2493
|
+
const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
2494
2494
|
const id = useSvgId("kzm");
|
|
2495
2495
|
const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
|
|
2496
2496
|
const stroke = neutral ?? theme.textMuted;
|
|
@@ -2516,8 +2516,8 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
|
2516
2516
|
/* @__PURE__ */ jsx25(Circle2, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
|
|
2517
2517
|
/* @__PURE__ */ jsx25(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx25(Path6, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
|
|
2518
2518
|
] }),
|
|
2519
|
-
/* @__PURE__ */ jsx25(
|
|
2520
|
-
/* @__PURE__ */ jsx25(
|
|
2519
|
+
/* @__PURE__ */ jsx25(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx25(Svg8, { viewBox, style: layer, children: /* @__PURE__ */ jsx25(Circle2, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
|
|
2520
|
+
/* @__PURE__ */ jsx25(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs22(Svg8, { viewBox, style: layer, children: [
|
|
2521
2521
|
/* @__PURE__ */ jsx25(Defs3, { children: blue }),
|
|
2522
2522
|
/* @__PURE__ */ jsxs22(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
|
|
2523
2523
|
dot(KRIZAKA.node),
|
|
@@ -2528,38 +2528,359 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
|
|
|
2528
2528
|
}
|
|
2529
2529
|
|
|
2530
2530
|
// src/native/loader.tsx
|
|
2531
|
-
import * as
|
|
2532
|
-
import { AccessibilityInfo as
|
|
2533
|
-
import
|
|
2531
|
+
import * as React22 from "react";
|
|
2532
|
+
import { AccessibilityInfo as AccessibilityInfo7, Animated as Animated11, Easing as Easing5, StyleSheet as StyleSheet24, View as View26 } from "react-native";
|
|
2533
|
+
import Svg13, { Circle as Circle7, Path as Path11 } from "react-native-svg";
|
|
2534
|
+
|
|
2535
|
+
// src/native/OrazakaMark.tsx
|
|
2536
|
+
import { View as View22 } from "react-native";
|
|
2537
|
+
import Svg9, { Circle as Circle3, Defs as Defs4, LinearGradient as LinearGradient4, Path as Path7, RadialGradient as RadialGradient2, Stop as Stop4 } from "react-native-svg";
|
|
2538
|
+
|
|
2539
|
+
// src/marks/orazaka-geometry.ts
|
|
2540
|
+
var orange = marks.orazaka[marks.orazaka.length - 1][1];
|
|
2541
|
+
var ORAZAKA = {
|
|
2542
|
+
viewBox: "0 0 400 400",
|
|
2543
|
+
croppedViewBox: "76 76 248 248",
|
|
2544
|
+
center: 200,
|
|
2545
|
+
/**
|
|
2546
|
+
* The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned
|
|
2547
|
+
* 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.
|
|
2548
|
+
*/
|
|
2549
|
+
shards: [
|
|
2550
|
+
"M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z",
|
|
2551
|
+
"M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z",
|
|
2552
|
+
"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z"
|
|
2553
|
+
],
|
|
2554
|
+
shardStroke: 5.7,
|
|
2555
|
+
gradient: { x1: 90, y1: 310, x2: 310, y2: 90, stops: marks.orazaka },
|
|
2556
|
+
core: { r: 21, inner: 7.6 },
|
|
2557
|
+
highlight: "#fff7ed",
|
|
2558
|
+
glow: { color: orange, opacity: 0.16 },
|
|
2559
|
+
/** The core's breathing shadow (web), in the mark's orange. */
|
|
2560
|
+
pulse: { color: orange, low: 0.3, high: 0.6 },
|
|
2561
|
+
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
2562
|
+
ring: { r: 134, width: 1 }
|
|
2563
|
+
};
|
|
2564
|
+
|
|
2565
|
+
// src/native/OrazakaMark.tsx
|
|
2534
2566
|
import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2567
|
+
function OrazakaMark({ size = 48, animated = true, title, neutral }) {
|
|
2568
|
+
const { theme } = useTheme();
|
|
2569
|
+
const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
2570
|
+
const id = useSvgId("ozm");
|
|
2571
|
+
const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
|
|
2572
|
+
const stroke = neutral ?? theme.textMuted;
|
|
2573
|
+
const gradient = /* @__PURE__ */ jsx26(LinearGradient4, { 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__ */ jsx26(Stop4, { offset, stopColor: color }, offset)) });
|
|
2574
|
+
const fill = `url(#${id}a)`;
|
|
2575
|
+
return /* @__PURE__ */ jsxs23(View22, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
2576
|
+
/* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
|
|
2577
|
+
/* @__PURE__ */ jsx26(Defs4, { children: /* @__PURE__ */ jsxs23(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
2578
|
+
/* @__PURE__ */ jsx26(Stop4, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
|
|
2579
|
+
/* @__PURE__ */ jsx26(Stop4, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
|
|
2580
|
+
] }) }),
|
|
2581
|
+
size >= 48 ? /* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
2582
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
2583
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
|
|
2584
|
+
] }),
|
|
2585
|
+
/* @__PURE__ */ jsx26(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
|
|
2586
|
+
/* @__PURE__ */ jsx26(Defs4, { children: gradient }),
|
|
2587
|
+
ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx26(Path7, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
|
|
2588
|
+
] }) }),
|
|
2589
|
+
/* @__PURE__ */ jsx26(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
|
|
2590
|
+
/* @__PURE__ */ jsx26(Defs4, { children: gradient }),
|
|
2591
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
|
|
2592
|
+
/* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
|
|
2593
|
+
] }) })
|
|
2594
|
+
] });
|
|
2595
|
+
}
|
|
2596
|
+
|
|
2597
|
+
// src/native/OrochiaMark.tsx
|
|
2598
|
+
import { useEffect as useEffect12, useState as useState20 } from "react";
|
|
2599
|
+
import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated10, Easing as Easing4, View as View23 } from "react-native";
|
|
2600
|
+
import Svg10, { Circle as Circle4, Defs as Defs5, Ellipse, G as Group2, LinearGradient as LinearGradient5, Path as Path8, RadialGradient as RadialGradient3, Stop as Stop5 } from "react-native-svg";
|
|
2601
|
+
|
|
2602
|
+
// src/marks/orochia-geometry.ts
|
|
2603
|
+
var OROCHIA = {
|
|
2604
|
+
viewBox: "0 0 400 400",
|
|
2605
|
+
croppedViewBox: "86 82 228 228",
|
|
2606
|
+
offset: 20,
|
|
2607
|
+
body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: marks.orochia },
|
|
2608
|
+
flameGradient: { stops: [["0%", "#a855f7"], ["100%", "#f9a8d4"]] },
|
|
2609
|
+
glow: { color: "#d946ef", opacity: 0.18 },
|
|
2610
|
+
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
2611
|
+
ring: { r: 134, width: 1 },
|
|
2612
|
+
arc: "M259.8,142.8 A88,88 0 1 1 142.8,100.2",
|
|
2613
|
+
neck: "M142.8,100.2 A88,88 0 0 1 187.7,92.3",
|
|
2614
|
+
tail: "M187.7,92.3 A88,88 0 0 1 221.3,102.3",
|
|
2615
|
+
scales: { color: "#fdf4ff", opacity: 0.45, width: 3, dash: "2 14" },
|
|
2616
|
+
head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },
|
|
2617
|
+
tongue: { d: "M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3", color: "#f472b6" },
|
|
2618
|
+
eye: { cx: 256.3, cy: 123.5, r: 4.5, color: "#fdf4ff" },
|
|
2619
|
+
flame: {
|
|
2620
|
+
translate: [127, 120],
|
|
2621
|
+
scale: 4.4,
|
|
2622
|
+
d: "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"
|
|
2623
|
+
}
|
|
2624
|
+
};
|
|
2625
|
+
|
|
2626
|
+
// src/native/OrochiaMark.tsx
|
|
2627
|
+
import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2628
|
+
var CENTER = OROCHIA.offset + 180;
|
|
2629
|
+
function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }) {
|
|
2630
|
+
const { theme } = useTheme();
|
|
2631
|
+
const neutral = neutralProp ?? theme.textMuted;
|
|
2632
|
+
const [spin] = useState20(() => new Animated10.Value(0));
|
|
2633
|
+
const [pulse] = useState20(() => new Animated10.Value(0));
|
|
2634
|
+
useEffect12(() => {
|
|
2635
|
+
if (!animated) return;
|
|
2636
|
+
let loops = [];
|
|
2637
|
+
let cancelled = false;
|
|
2638
|
+
void AccessibilityInfo6.isReduceMotionEnabled().then((reduce) => {
|
|
2639
|
+
if (reduce || cancelled) return;
|
|
2640
|
+
loops = [
|
|
2641
|
+
Animated10.loop(Animated10.timing(spin, { toValue: 1, duration: 3e4, easing: Easing4.linear, useNativeDriver: true })),
|
|
2642
|
+
Animated10.loop(
|
|
2643
|
+
Animated10.sequence([
|
|
2644
|
+
Animated10.timing(pulse, { toValue: 1, duration: 1600, easing: Easing4.inOut(Easing4.ease), useNativeDriver: true }),
|
|
2645
|
+
Animated10.timing(pulse, { toValue: 0, duration: 1600, easing: Easing4.inOut(Easing4.ease), useNativeDriver: true })
|
|
2646
|
+
])
|
|
2647
|
+
)
|
|
2648
|
+
];
|
|
2649
|
+
loops.forEach((l) => l.start());
|
|
2650
|
+
});
|
|
2651
|
+
return () => {
|
|
2652
|
+
cancelled = true;
|
|
2653
|
+
loops.forEach((l) => l.stop());
|
|
2654
|
+
};
|
|
2655
|
+
}, [animated, spin, pulse]);
|
|
2656
|
+
const viewBox = size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox;
|
|
2657
|
+
const layer = { position: "absolute", width: size, height: size };
|
|
2658
|
+
const a11y = title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
|
|
2659
|
+
const bodyGradient = /* @__PURE__ */ jsx27(LinearGradient5, { 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__ */ jsx27(Stop5, { offset, stopColor: color }, offset)) });
|
|
2660
|
+
return /* @__PURE__ */ jsxs24(View23, { style: { width: size, height: size }, ...a11y, children: [
|
|
2661
|
+
/* @__PURE__ */ jsxs24(Svg10, { viewBox, style: layer, children: [
|
|
2662
|
+
/* @__PURE__ */ jsx27(Defs5, { children: /* @__PURE__ */ jsxs24(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
|
|
2663
|
+
/* @__PURE__ */ jsx27(Stop5, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
|
|
2664
|
+
/* @__PURE__ */ jsx27(Stop5, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
|
|
2665
|
+
] }) }),
|
|
2666
|
+
/* @__PURE__ */ jsx27(Circle4, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
|
|
2667
|
+
/* @__PURE__ */ jsx27(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
|
|
2668
|
+
] }),
|
|
2669
|
+
/* @__PURE__ */ jsx27(Animated10.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx27(Svg10, { viewBox, style: layer, children: /* @__PURE__ */ jsx27(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
|
|
2670
|
+
/* @__PURE__ */ jsxs24(Svg10, { viewBox, style: layer, children: [
|
|
2671
|
+
/* @__PURE__ */ jsx27(Defs5, { children: bodyGradient }),
|
|
2672
|
+
/* @__PURE__ */ jsxs24(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
|
|
2673
|
+
/* @__PURE__ */ jsx27(Path8, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
|
|
2674
|
+
/* @__PURE__ */ jsx27(Path8, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
|
|
2675
|
+
/* @__PURE__ */ jsx27(Path8, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
|
|
2676
|
+
/* @__PURE__ */ jsx27(Path8, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
|
|
2677
|
+
/* @__PURE__ */ jsx27(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)" }),
|
|
2678
|
+
/* @__PURE__ */ jsx27(Path8, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
|
|
2679
|
+
] })
|
|
2680
|
+
] }),
|
|
2681
|
+
/* @__PURE__ */ jsx27(Animated10.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs24(Svg10, { viewBox, style: layer, children: [
|
|
2682
|
+
/* @__PURE__ */ jsx27(Defs5, { children: /* @__PURE__ */ jsx27(LinearGradient5, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx27(Stop5, { offset, stopColor: color }, offset)) }) }),
|
|
2683
|
+
/* @__PURE__ */ jsxs24(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
|
|
2684
|
+
/* @__PURE__ */ jsx27(Circle4, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
|
|
2685
|
+
/* @__PURE__ */ jsx27(Path8, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
|
|
2686
|
+
] })
|
|
2687
|
+
] }) })
|
|
2688
|
+
] });
|
|
2689
|
+
}
|
|
2690
|
+
|
|
2691
|
+
// src/native/YazakiaMark.tsx
|
|
2692
|
+
import React21 from "react";
|
|
2693
|
+
import { View as View24 } from "react-native";
|
|
2694
|
+
import Svg11, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Path as Path9, RadialGradient as RadialGradient4, Stop as Stop6 } from "react-native-svg";
|
|
2695
|
+
|
|
2696
|
+
// src/marks/yazakia-geometry.ts
|
|
2697
|
+
var turquoise = marks.yazakia[marks.yazakia.length - 1][1];
|
|
2698
|
+
var YAZAKIA = {
|
|
2699
|
+
viewBox: "0 0 400 400",
|
|
2700
|
+
croppedViewBox: "80 80 240 240",
|
|
2701
|
+
center: 200,
|
|
2702
|
+
/** The two voices, left then right: each a bubble (cut around the lens) and its tail. */
|
|
2703
|
+
voices: [
|
|
2704
|
+
{ body: "M191.9 109 A80 80 0 1 0 191.9 259 A87 87 0 0 1 191.9 109 Z", tail: "M98 230 Q104 268 88 294 Q122 288 144 262 L130 200 Z" },
|
|
2705
|
+
{ body: "M208.1 109 A80 80 0 1 1 208.1 259 A87 87 0 0 0 208.1 109 Z", tail: "M302 230 Q296 268 312 294 Q278 288 256 262 L270 200 Z" }
|
|
2706
|
+
],
|
|
2707
|
+
/** The left voice, a shade deeper: the depth between the two. */
|
|
2708
|
+
shade: { color: "#000", opacity: 0.22 },
|
|
2709
|
+
/** Where the bubbles overlap: the core, lit from above. */
|
|
2710
|
+
lens: { d: "M200 112.6 A80 80 0 0 1 200 255.4 A80 80 0 0 1 200 112.6 Z", y1: 112.6, y2: 255.4 },
|
|
2711
|
+
gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
|
|
2712
|
+
/** The light on the lens: bright at the top, fading down. */
|
|
2713
|
+
highlight: { color: "#f0fdfa", from: 0.75, to: 0.2 },
|
|
2714
|
+
/** The pair: two nodes on the orbit, opposite each other, that turn with it. */
|
|
2715
|
+
pair: { r: 8, at: [[40, 200], [360, 200]] },
|
|
2716
|
+
glow: { color: turquoise, opacity: 0.16 },
|
|
2717
|
+
/** The core's breathing shadow (web), in the mark's turquoise. */
|
|
2718
|
+
pulse: { color: turquoise, low: 0.3, high: 0.6 },
|
|
2719
|
+
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
2720
|
+
ring: { r: 134, width: 1 }
|
|
2721
|
+
};
|
|
2722
|
+
|
|
2723
|
+
// src/native/YazakiaMark.tsx
|
|
2724
|
+
import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2725
|
+
function YazakiaMark({ size = 48, animated = true, title, neutral }) {
|
|
2726
|
+
const { theme } = useTheme();
|
|
2727
|
+
const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
2728
|
+
const id = useSvgId("yzm");
|
|
2729
|
+
const viewBox = size < 48 ? YAZAKIA.croppedViewBox : YAZAKIA.viewBox;
|
|
2730
|
+
const stroke = neutral ?? theme.textMuted;
|
|
2731
|
+
const gradient = /* @__PURE__ */ jsx28(LinearGradient6, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx28(Stop6, { offset, stopColor: color }, offset)) });
|
|
2732
|
+
const fill = `url(#${id}a)`;
|
|
2733
|
+
return /* @__PURE__ */ jsxs25(View24, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
2734
|
+
/* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
|
|
2735
|
+
/* @__PURE__ */ jsxs25(Defs6, { children: [
|
|
2736
|
+
/* @__PURE__ */ jsxs25(RadialGradient4, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
2737
|
+
/* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
|
|
2738
|
+
/* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
|
|
2739
|
+
] }),
|
|
2740
|
+
gradient
|
|
2741
|
+
] }),
|
|
2742
|
+
size >= 48 ? /* @__PURE__ */ jsx28(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
2743
|
+
/* @__PURE__ */ jsx28(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
|
|
2744
|
+
YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs25(React21.Fragment, { children: [
|
|
2745
|
+
/* @__PURE__ */ jsx28(Path9, { d: v.body, fill }),
|
|
2746
|
+
/* @__PURE__ */ jsx28(Path9, { d: v.tail, fill }),
|
|
2747
|
+
i === 0 ? /* @__PURE__ */ jsx28(Path9, { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
|
|
2748
|
+
] }, v.body))
|
|
2749
|
+
] }),
|
|
2750
|
+
/* @__PURE__ */ jsx28(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
|
|
2751
|
+
/* @__PURE__ */ jsx28(Defs6, { children: gradient }),
|
|
2752
|
+
/* @__PURE__ */ jsx28(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke, strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
2753
|
+
YAZAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx28(Circle5, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
|
|
2754
|
+
] }) }),
|
|
2755
|
+
/* @__PURE__ */ jsx28(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
|
|
2756
|
+
/* @__PURE__ */ jsxs25(Defs6, { children: [
|
|
2757
|
+
gradient,
|
|
2758
|
+
/* @__PURE__ */ jsxs25(LinearGradient6, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YAZAKIA.lens.y1, x2: 0, y2: YAZAKIA.lens.y2, children: [
|
|
2759
|
+
/* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
|
|
2760
|
+
/* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
|
|
2761
|
+
] })
|
|
2762
|
+
] }),
|
|
2763
|
+
/* @__PURE__ */ jsx28(Path9, { d: YAZAKIA.lens.d, fill }),
|
|
2764
|
+
/* @__PURE__ */ jsx28(Path9, { d: YAZAKIA.lens.d, fill: `url(#${id}l)` })
|
|
2765
|
+
] }) })
|
|
2766
|
+
] });
|
|
2767
|
+
}
|
|
2768
|
+
|
|
2769
|
+
// src/native/YororisMark.tsx
|
|
2770
|
+
import { View as View25 } from "react-native";
|
|
2771
|
+
import Svg12, { Circle as Circle6, Defs as Defs7, LinearGradient as LinearGradient7, Path as Path10, RadialGradient as RadialGradient5, Stop as Stop7 } from "react-native-svg";
|
|
2772
|
+
|
|
2773
|
+
// src/marks/yororis-geometry.ts
|
|
2774
|
+
var sand = marks.yororis[0][1];
|
|
2775
|
+
var sage = marks.yororis[marks.yororis.length - 1][1];
|
|
2776
|
+
var YORORIS = {
|
|
2777
|
+
viewBox: "0 0 400 400",
|
|
2778
|
+
croppedViewBox: "80 80 240 240",
|
|
2779
|
+
center: 200,
|
|
2780
|
+
/** The two leaves — open hands, mirrored around x = 200 — filled, rising from the stem. */
|
|
2781
|
+
leaves: [
|
|
2782
|
+
"M200 262 C142 256 104 206 110 122 C138 130 154 152 160 180 C168 218 182 238 204 246 Z",
|
|
2783
|
+
"M200 262 C258 256 296 206 290 122 C262 130 246 152 240 180 C232 218 218 238 196 246 Z"
|
|
2784
|
+
],
|
|
2785
|
+
/** A vein of light along each leaf (dashed, it drifts slowly when animated). */
|
|
2786
|
+
veins: "M122 142 C128 196 156 232 192 248 M278 142 C272 196 244 232 208 248",
|
|
2787
|
+
vein: { color: "#fbf6ea", opacity: 0.45, width: 3, dash: "2 14" },
|
|
2788
|
+
/** The stem, from the junction down. */
|
|
2789
|
+
stem: "M200 244 L200 312",
|
|
2790
|
+
stroke: 30,
|
|
2791
|
+
gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yororis },
|
|
2792
|
+
/** The core's warm light: from the mark's sand (below) to a light sand (above). */
|
|
2793
|
+
coreGradient: { stops: [["0%", sand], ["100%", "#e6c993"]] },
|
|
2794
|
+
/** The core, held in the hollow of the leaves (not on the junction): the one who is listened to. It breathes. */
|
|
2795
|
+
core: { cx: 200, cy: 184, r: 32, inner: 11 },
|
|
2796
|
+
highlight: "#fbf6ea",
|
|
2797
|
+
/** The moment: one node on the orbit, that turns with it. */
|
|
2798
|
+
moment: { r: 9, at: [200, 40] },
|
|
2799
|
+
glow: { color: sage, opacity: 0.18 },
|
|
2800
|
+
/** The core's breathing shadow (web), in the core's warm sand. */
|
|
2801
|
+
pulse: { color: sand, low: 0.3, high: 0.6 },
|
|
2802
|
+
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
2803
|
+
ring: { r: 134, width: 1 }
|
|
2804
|
+
};
|
|
2805
|
+
|
|
2806
|
+
// src/native/YororisMark.tsx
|
|
2807
|
+
import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2808
|
+
function YororisMark({ size = 48, animated = true, title, neutral }) {
|
|
2809
|
+
const { theme } = useTheme();
|
|
2810
|
+
const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
|
|
2811
|
+
const id = useSvgId("yrm");
|
|
2812
|
+
const viewBox = size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox;
|
|
2813
|
+
const stroke = neutral ?? theme.textMuted;
|
|
2814
|
+
const gradient = /* @__PURE__ */ jsx29(LinearGradient7, { 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__ */ jsx29(Stop7, { offset, stopColor: color }, offset)) });
|
|
2815
|
+
const fill = `url(#${id}a)`;
|
|
2816
|
+
return /* @__PURE__ */ jsxs26(View25, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
2817
|
+
/* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
|
|
2818
|
+
/* @__PURE__ */ jsxs26(Defs7, { children: [
|
|
2819
|
+
/* @__PURE__ */ jsxs26(RadialGradient5, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
2820
|
+
/* @__PURE__ */ jsx29(Stop7, { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
|
|
2821
|
+
/* @__PURE__ */ jsx29(Stop7, { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: 0 })
|
|
2822
|
+
] }),
|
|
2823
|
+
gradient
|
|
2824
|
+
] }),
|
|
2825
|
+
size >= 48 ? /* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.center, cy: YORORIS.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
2826
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke, strokeWidth: YORORIS.ring.width, opacity: 0.35, fill: "none" }),
|
|
2827
|
+
/* @__PURE__ */ jsx29(Path10, { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round", fill: "none" }),
|
|
2828
|
+
YORORIS.leaves.map((d) => /* @__PURE__ */ jsx29(Path10, { d, fill }, d)),
|
|
2829
|
+
/* @__PURE__ */ jsx29(Path10, { d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash, fill: "none" })
|
|
2830
|
+
] }),
|
|
2831
|
+
/* @__PURE__ */ jsx29(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
|
|
2832
|
+
/* @__PURE__ */ jsx29(Defs7, { children: gradient }),
|
|
2833
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke, strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
2834
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
|
|
2835
|
+
] }) }),
|
|
2836
|
+
/* @__PURE__ */ jsx29(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
|
|
2837
|
+
/* @__PURE__ */ jsx29(Defs7, { children: /* @__PURE__ */ jsx29(LinearGradient7, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx29(Stop7, { offset, stopColor: color }, offset)) }) }),
|
|
2838
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id}c)` }),
|
|
2839
|
+
/* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
|
|
2840
|
+
] }) })
|
|
2841
|
+
] });
|
|
2842
|
+
}
|
|
2843
|
+
|
|
2844
|
+
// src/native/ProductMark.tsx
|
|
2845
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2846
|
+
function ProductMark({ id, ...props }) {
|
|
2847
|
+
if (id === "krizaka") return /* @__PURE__ */ jsx30(KrizakaMark, { ...props });
|
|
2848
|
+
if (id === "orazaka") return /* @__PURE__ */ jsx30(OrazakaMark, { ...props });
|
|
2849
|
+
if (id === "yazakia") return /* @__PURE__ */ jsx30(YazakiaMark, { ...props });
|
|
2850
|
+
if (id === "yororis") return /* @__PURE__ */ jsx30(YororisMark, { ...props });
|
|
2851
|
+
return /* @__PURE__ */ jsx30(OrochiaMark, { ...props });
|
|
2852
|
+
}
|
|
2853
|
+
|
|
2854
|
+
// src/native/loader.tsx
|
|
2855
|
+
import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2535
2856
|
var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
|
|
2536
2857
|
var PERIMETER = 54;
|
|
2537
2858
|
function LoaderGlyph({ state = "loading", value, size = 20, color }) {
|
|
2538
2859
|
const { theme } = useTheme();
|
|
2539
2860
|
const reduce = useReducedMotion();
|
|
2540
|
-
const [spin] =
|
|
2861
|
+
const [spin] = React22.useState(() => new Animated11.Value(0));
|
|
2541
2862
|
const known = typeof value === "number" && Number.isFinite(value);
|
|
2542
|
-
|
|
2863
|
+
React22.useEffect(() => {
|
|
2543
2864
|
if (state !== "loading" || known || reduce) return;
|
|
2544
|
-
const loop =
|
|
2865
|
+
const loop = Animated11.loop(Animated11.timing(spin, { toValue: 1, duration: 1400, easing: Easing5.linear, useNativeDriver: true }));
|
|
2545
2866
|
loop.start();
|
|
2546
2867
|
return () => loop.stop();
|
|
2547
2868
|
}, [state, known, reduce, spin]);
|
|
2548
2869
|
const stroke = color ?? (state === "success" ? theme.success : state === "error" ? theme.danger : theme.accent);
|
|
2549
2870
|
const fill = state !== "loading" ? 1 : known ? Math.min(1, Math.max(0, value)) : 0.3;
|
|
2550
2871
|
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
|
|
2551
|
-
return /* @__PURE__ */
|
|
2552
|
-
/* @__PURE__ */
|
|
2553
|
-
/* @__PURE__ */
|
|
2554
|
-
state === "loading" ? /* @__PURE__ */
|
|
2555
|
-
state === "success" ? /* @__PURE__ */
|
|
2556
|
-
state === "error" ? /* @__PURE__ */
|
|
2872
|
+
return /* @__PURE__ */ jsx31(Animated11.View, { "aria-hidden": true, style: { width: size, height: size, transform: state === "loading" && !known ? [{ rotate }] : [] }, children: /* @__PURE__ */ jsxs27(Svg13, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
|
|
2873
|
+
/* @__PURE__ */ jsx31(Path11, { d: HEX, stroke, strokeOpacity: 0.22, strokeWidth: 2.2, strokeLinejoin: "round" }),
|
|
2874
|
+
/* @__PURE__ */ jsx31(Path11, { d: HEX, stroke, strokeWidth: 2.2, strokeLinejoin: "round", strokeLinecap: "round", strokeDasharray: `${fill * PERIMETER} ${PERIMETER}` }),
|
|
2875
|
+
state === "loading" ? /* @__PURE__ */ jsx31(Circle7, { cx: 12, cy: 12, r: 2.6, fill: stroke }) : null,
|
|
2876
|
+
state === "success" ? /* @__PURE__ */ jsx31(Path11, { d: "M8.3 12.3l2.6 2.6 4.9-5.3", stroke, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) : null,
|
|
2877
|
+
state === "error" ? /* @__PURE__ */ jsx31(Path11, { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", stroke, strokeWidth: 2.2, strokeLinecap: "round" }) : null
|
|
2557
2878
|
] }) });
|
|
2558
2879
|
}
|
|
2559
2880
|
function useDelayedWait(active, delay = 250, minDuration = 600) {
|
|
2560
|
-
const [shown, setShown] =
|
|
2561
|
-
const since =
|
|
2562
|
-
|
|
2881
|
+
const [shown, setShown] = React22.useState(false);
|
|
2882
|
+
const since = React22.useRef(0);
|
|
2883
|
+
React22.useEffect(() => {
|
|
2563
2884
|
if (active && !shown) {
|
|
2564
2885
|
const timer2 = setTimeout(() => {
|
|
2565
2886
|
since.current = Date.now();
|
|
@@ -2576,12 +2897,12 @@ function useDelayedWait(active, delay = 250, minDuration = 600) {
|
|
|
2576
2897
|
return shown;
|
|
2577
2898
|
}
|
|
2578
2899
|
var GLYPH = { inline: 20, block: 36, overlay: 36, page: 56 };
|
|
2579
|
-
function Loader({ label, status = "loading", successLabel, errorLabel, value, eta, delay = 250, minDuration = 600, endDuration = 1600, variant = "inline", style }) {
|
|
2900
|
+
function Loader({ label, status = "loading", successLabel, errorLabel, value, eta, delay = 250, minDuration = 600, endDuration = 1600, variant = "inline", product, style }) {
|
|
2580
2901
|
const { theme, radius: radius3 } = useTheme();
|
|
2581
2902
|
const waiting = useDelayedWait(status === "loading", delay, minDuration);
|
|
2582
|
-
const [ending, setEnding] =
|
|
2583
|
-
const seen =
|
|
2584
|
-
|
|
2903
|
+
const [ending, setEnding] = React22.useState(null);
|
|
2904
|
+
const seen = React22.useRef(false);
|
|
2905
|
+
React22.useEffect(() => {
|
|
2585
2906
|
if (waiting) {
|
|
2586
2907
|
seen.current = true;
|
|
2587
2908
|
return;
|
|
@@ -2598,24 +2919,24 @@ function Loader({ label, status = "loading", successLabel, errorLabel, value, et
|
|
|
2598
2919
|
}, [waiting, status, endDuration]);
|
|
2599
2920
|
const phase = waiting ? "loading" : ending;
|
|
2600
2921
|
const words = phase === "success" ? successLabel ?? label : phase === "error" ? errorLabel ?? label : label;
|
|
2601
|
-
|
|
2602
|
-
if (phase)
|
|
2922
|
+
React22.useEffect(() => {
|
|
2923
|
+
if (phase) AccessibilityInfo7.announceForAccessibility(words);
|
|
2603
2924
|
}, [phase, words]);
|
|
2604
2925
|
if (!phase) return null;
|
|
2605
2926
|
const known = phase === "loading" && typeof value === "number" && Number.isFinite(value);
|
|
2606
2927
|
const detail = phase === "loading" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(" \xB7 ") : "";
|
|
2607
2928
|
const stacked = variant !== "inline";
|
|
2608
|
-
const box = /* @__PURE__ */
|
|
2609
|
-
/* @__PURE__ */
|
|
2610
|
-
/* @__PURE__ */
|
|
2611
|
-
/* @__PURE__ */
|
|
2612
|
-
detail ? /* @__PURE__ */
|
|
2929
|
+
const box = /* @__PURE__ */ jsxs27(View26, { style: [stacked ? styles24.stacked : styles24.inline, variant === "overlay" ? { backgroundColor: alpha(theme.surface1, 0.92), borderColor: theme.borderDefault, borderRadius: radius3.lg, ...styles24.card } : null], children: [
|
|
2930
|
+
product && phase === "loading" ? /* @__PURE__ */ jsx31(ProductMark, { id: product, size: GLYPH[variant], animated: true }) : /* @__PURE__ */ jsx31(LoaderGlyph, { state: phase, value: known ? value : null, size: GLYPH[variant] }),
|
|
2931
|
+
/* @__PURE__ */ jsxs27(View26, { style: stacked ? styles24.center : styles24.text, children: [
|
|
2932
|
+
/* @__PURE__ */ jsx31(Txt, { variant: variant === "page" ? "title" : "label", style: stacked ? styles24.centered : null, children: words }),
|
|
2933
|
+
detail ? /* @__PURE__ */ jsx31(Txt, { variant: "caption", tone: "secondary", style: stacked ? styles24.centered : null, children: detail }) : null
|
|
2613
2934
|
] })
|
|
2614
2935
|
] });
|
|
2615
2936
|
const a11y = { accessible: true, role: "progressbar", "aria-label": words, "aria-busy": phase === "loading", accessibilityLiveRegion: "polite" };
|
|
2616
2937
|
if (variant === "overlay" || variant === "page")
|
|
2617
|
-
return /* @__PURE__ */
|
|
2618
|
-
return /* @__PURE__ */
|
|
2938
|
+
return /* @__PURE__ */ jsx31(View26, { ...a11y, style: [StyleSheet24.absoluteFill, styles24.cover, variant === "page" ? { backgroundColor: alpha(theme.surface0, 0.86) } : null, style], children: box });
|
|
2939
|
+
return /* @__PURE__ */ jsx31(View26, { ...a11y, style: [variant === "block" ? styles24.block : null, style], children: box });
|
|
2619
2940
|
}
|
|
2620
2941
|
var styles24 = StyleSheet24.create({
|
|
2621
2942
|
inline: { flexDirection: "row", alignItems: "center", gap: 10 },
|
|
@@ -2629,13 +2950,13 @@ var styles24 = StyleSheet24.create({
|
|
|
2629
2950
|
});
|
|
2630
2951
|
|
|
2631
2952
|
// src/native/mascot-state.tsx
|
|
2632
|
-
import * as
|
|
2633
|
-
import { AccessibilityInfo as
|
|
2953
|
+
import * as React24 from "react";
|
|
2954
|
+
import { AccessibilityInfo as AccessibilityInfo9, Animated as Animated13, Easing as Easing7, StyleSheet as StyleSheet25, View as View28 } from "react-native";
|
|
2634
2955
|
|
|
2635
2956
|
// src/native/mascots.tsx
|
|
2636
|
-
import { useEffect as
|
|
2637
|
-
import { AccessibilityInfo as
|
|
2638
|
-
import
|
|
2957
|
+
import { useEffect as useEffect14, useState as useState22 } from "react";
|
|
2958
|
+
import { AccessibilityInfo as AccessibilityInfo8, Animated as Animated12, Easing as Easing6, View as View27 } from "react-native";
|
|
2959
|
+
import Svg14, { Circle as Circle8, Defs as Defs8, Ellipse as Ellipse2, G, LinearGradient as LinearGradient8, Path as Path12, Rect as Rect2, Stop as Stop8 } from "react-native-svg";
|
|
2639
2960
|
|
|
2640
2961
|
// src/mascots/geometry.ts
|
|
2641
2962
|
var mirror = (d) => d.replace(/(-?\d+(?:\.\d+)?) (-?\d+(?:\.\d+)?)/g, (_, x, y) => `${120 - Number(x)} ${y}`);
|
|
@@ -2793,17 +3114,17 @@ var SHADE = "#000000";
|
|
|
2793
3114
|
var PARCEL = ["#f59e0b", "#d97706", "#b45309"];
|
|
2794
3115
|
|
|
2795
3116
|
// src/native/mascots.tsx
|
|
2796
|
-
import { jsx as
|
|
3117
|
+
import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2797
3118
|
function useBob(animated) {
|
|
2798
|
-
const [y] =
|
|
2799
|
-
|
|
3119
|
+
const [y] = useState22(() => new Animated12.Value(0));
|
|
3120
|
+
useEffect14(() => {
|
|
2800
3121
|
if (!animated) return;
|
|
2801
3122
|
let loop;
|
|
2802
3123
|
let cancelled = false;
|
|
2803
|
-
void
|
|
3124
|
+
void AccessibilityInfo8.isReduceMotionEnabled().then((reduce) => {
|
|
2804
3125
|
if (reduce || cancelled) return;
|
|
2805
|
-
const step = (toValue) =>
|
|
2806
|
-
loop =
|
|
3126
|
+
const step = (toValue) => Animated12.timing(y, { toValue, duration: 1800, easing: Easing6.inOut(Easing6.ease), useNativeDriver: true });
|
|
3127
|
+
loop = Animated12.loop(Animated12.sequence([step(-2.5), step(0)]));
|
|
2807
3128
|
loop.start();
|
|
2808
3129
|
});
|
|
2809
3130
|
return () => {
|
|
@@ -2827,62 +3148,62 @@ function Mascot({ bird = "owl", mood = "welcome", tone: tone3 = "brand", size =
|
|
|
2827
3148
|
const look3 = mood === "thinking" ? 1.4 : 0;
|
|
2828
3149
|
const rot = (deg, [x, y]) => `rotate(${deg} ${x} ${y})`;
|
|
2829
3150
|
const [wl, wr] = g.wings;
|
|
2830
|
-
return /* @__PURE__ */
|
|
2831
|
-
/* @__PURE__ */
|
|
2832
|
-
/* @__PURE__ */
|
|
2833
|
-
/* @__PURE__ */
|
|
3151
|
+
return /* @__PURE__ */ jsx32(View27, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx32(Animated12.View, { style: { transform: [{ translateY: bob }] }, children: /* @__PURE__ */ jsxs28(Svg14, { width: size, height: size, viewBox: "0 0 120 120", children: [
|
|
3152
|
+
/* @__PURE__ */ jsx32(Defs8, { children: /* @__PURE__ */ jsxs28(LinearGradient8, { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
3153
|
+
/* @__PURE__ */ jsx32(Stop8, { offset: "0%", stopColor: p.from }),
|
|
3154
|
+
/* @__PURE__ */ jsx32(Stop8, { offset: "100%", stopColor: p.to })
|
|
2834
3155
|
] }) }),
|
|
2835
|
-
/* @__PURE__ */
|
|
2836
|
-
mood === "empty" && /* @__PURE__ */
|
|
2837
|
-
g.legs.map((d) => /* @__PURE__ */
|
|
2838
|
-
g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */
|
|
2839
|
-
g.parcel?.map((d, i) => /* @__PURE__ */
|
|
2840
|
-
/* @__PURE__ */
|
|
2841
|
-
/* @__PURE__ */
|
|
3156
|
+
/* @__PURE__ */ jsx32(Ellipse2, { cx: g.shadow[0], cy: g.shadow[1], rx: g.shadow[2], ry: g.shadow[3], fill: SHADE, opacity: 0.14 }),
|
|
3157
|
+
mood === "empty" && /* @__PURE__ */ jsx32(Path12, { d: MOOD_PARTS.tray, stroke: outline, strokeWidth: 1.6, strokeDasharray: "3 3", fill: "none" }),
|
|
3158
|
+
g.legs.map((d) => /* @__PURE__ */ jsx32(Path12, { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round", fill: "none" }, d)),
|
|
3159
|
+
g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx32(Path12, { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx32(Path12, { d, stroke: outline, strokeWidth: 1.4, fill: "none" }, d)),
|
|
3160
|
+
g.parcel?.map((d, i) => /* @__PURE__ */ jsx32(Path12, { d, fill: PARCEL[i], ...line }, d)),
|
|
3161
|
+
/* @__PURE__ */ jsx32(Path12, { d: g.body, fill: body, ...line }),
|
|
3162
|
+
/* @__PURE__ */ jsx32(Path12, { d: g.belly, fill: LIGHT, opacity: 0.28 }),
|
|
2842
3163
|
[wl, wr].map((w, i) => {
|
|
2843
3164
|
const turn = mood === "success" ? i === 0 ? 28 : -28 : mood === "welcome" && i === 1 ? -20 : 0;
|
|
2844
|
-
return /* @__PURE__ */
|
|
2845
|
-
/* @__PURE__ */
|
|
2846
|
-
/* @__PURE__ */
|
|
3165
|
+
return /* @__PURE__ */ jsxs28(G, { transform: turn ? rot(turn, w.pivot) : void 0, children: [
|
|
3166
|
+
/* @__PURE__ */ jsx32(Path12, { d: w.d, fill: p.wing, ...line }),
|
|
3167
|
+
/* @__PURE__ */ jsx32(Path12, { d: w.d, fill: SHADE, opacity: 0.16 })
|
|
2847
3168
|
] }, i);
|
|
2848
3169
|
}),
|
|
2849
|
-
g.neck && /* @__PURE__ */
|
|
2850
|
-
g.head.r > 0 && /* @__PURE__ */
|
|
2851
|
-
g.details.map((d) => /* @__PURE__ */
|
|
2852
|
-
g.visor && /* @__PURE__ */
|
|
3170
|
+
g.neck && /* @__PURE__ */ jsx32(Path12, { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round", fill: "none" }),
|
|
3171
|
+
g.head.r > 0 && /* @__PURE__ */ jsx32(Circle8, { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
|
|
3172
|
+
g.details.map((d) => /* @__PURE__ */ jsx32(Path12, { d, fill: p.detail, ...line }, d)),
|
|
3173
|
+
g.visor && /* @__PURE__ */ jsx32(Rect2, { x: g.visor.x, y: g.visor.y, width: g.visor.w, height: g.visor.h, rx: 4, fill: theme.surface0, ...line }),
|
|
2853
3174
|
g.eyes.at.map(
|
|
2854
|
-
(at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */
|
|
2855
|
-
/* @__PURE__ */
|
|
2856
|
-
/* @__PURE__ */
|
|
2857
|
-
/* @__PURE__ */
|
|
2858
|
-
] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */
|
|
2859
|
-
g.eyes.white > 0 && /* @__PURE__ */
|
|
2860
|
-
/* @__PURE__ */
|
|
3175
|
+
(at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */ jsxs28(G, { children: [
|
|
3176
|
+
/* @__PURE__ */ jsx32(Circle8, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
|
|
3177
|
+
/* @__PURE__ */ jsx32(Circle8, { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
|
|
3178
|
+
/* @__PURE__ */ jsx32(Path12, { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
|
|
3179
|
+
] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */ jsx32(Path12, { 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__ */ jsxs28(G, { children: [
|
|
3180
|
+
g.eyes.white > 0 && /* @__PURE__ */ jsx32(Circle8, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
|
|
3181
|
+
/* @__PURE__ */ jsx32(Circle8, { cx: at[0] + look3, cy: at[1] - look3, r: g.eyes.pupil, fill: g.visor ? p.eye : SHADE })
|
|
2861
3182
|
] }, i)
|
|
2862
3183
|
),
|
|
2863
|
-
g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */
|
|
2864
|
-
mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */
|
|
2865
|
-
/* @__PURE__ */
|
|
2866
|
-
mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */
|
|
2867
|
-
(mood === "success" || mood === "error") && /* @__PURE__ */
|
|
2868
|
-
mood === "success" && /* @__PURE__ */
|
|
2869
|
-
mood === "error" && /* @__PURE__ */
|
|
2870
|
-
mood === "error" && /* @__PURE__ */
|
|
3184
|
+
g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */ jsx32(Circle8, { cx: x, cy: y, r: 6.5, fill: "none", stroke: outline, strokeWidth: 1.3 }, x)),
|
|
3185
|
+
mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */ jsx32(Path12, { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: outline, strokeWidth: 2, strokeLinecap: "round" }, i)),
|
|
3186
|
+
/* @__PURE__ */ jsx32(Path12, { d: g.beak, fill: p.beak, ...line }),
|
|
3187
|
+
mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */ jsx32(Circle8, { cx, cy, r, fill: theme.textSecondary, opacity: 0.5 + i * 0.25 }, cx)),
|
|
3188
|
+
(mood === "success" || mood === "error") && /* @__PURE__ */ jsx32(Circle8, { cx: MOOD_PARTS.badge.cx, cy: MOOD_PARTS.badge.cy, r: MOOD_PARTS.badge.r, fill: mood === "success" ? theme.success : theme.danger }),
|
|
3189
|
+
mood === "success" && /* @__PURE__ */ jsx32(Path12, { d: MOOD_PARTS.check, stroke: theme.surface0, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
|
|
3190
|
+
mood === "error" && /* @__PURE__ */ jsx32(Path12, { d: MOOD_PARTS.bang.line, stroke: theme.surface0, strokeWidth: 2.8, strokeLinecap: "round" }),
|
|
3191
|
+
mood === "error" && /* @__PURE__ */ jsx32(Circle8, { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: theme.surface0 })
|
|
2871
3192
|
] }) }) });
|
|
2872
3193
|
}
|
|
2873
3194
|
|
|
2874
3195
|
// src/native/mascot-state.tsx
|
|
2875
|
-
import { jsx as
|
|
3196
|
+
import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2876
3197
|
var SIZE = { sm: 64, md: 96, lg: 128 };
|
|
2877
3198
|
function useArrival(animated) {
|
|
2878
|
-
const [value] =
|
|
2879
|
-
|
|
3199
|
+
const [value] = React24.useState(() => new Animated13.Value(animated ? 0 : 1));
|
|
3200
|
+
React24.useEffect(() => {
|
|
2880
3201
|
if (!animated) return;
|
|
2881
3202
|
let cancelled = false;
|
|
2882
|
-
void
|
|
3203
|
+
void AccessibilityInfo9.isReduceMotionEnabled().then((reduce) => {
|
|
2883
3204
|
if (cancelled) return;
|
|
2884
3205
|
if (reduce) value.setValue(1);
|
|
2885
|
-
else
|
|
3206
|
+
else Animated13.timing(value, { toValue: 1, duration: 420, easing: Easing7.out(Easing7.cubic), useNativeDriver: true }).start();
|
|
2886
3207
|
});
|
|
2887
3208
|
return () => {
|
|
2888
3209
|
cancelled = true;
|
|
@@ -2893,8 +3214,8 @@ function useArrival(animated) {
|
|
|
2893
3214
|
function MascotState({ bird = "owl", mood = "empty", title, description, action, size = "md", layout = "stacked", tone: tone3, animated = true, style, ...props }) {
|
|
2894
3215
|
const opacity = useArrival(animated);
|
|
2895
3216
|
const inline = layout === "inline";
|
|
2896
|
-
return /* @__PURE__ */
|
|
2897
|
-
|
|
3217
|
+
return /* @__PURE__ */ jsxs29(
|
|
3218
|
+
Animated13.View,
|
|
2898
3219
|
{
|
|
2899
3220
|
role: mood === "error" ? "alert" : "status",
|
|
2900
3221
|
accessibilityLiveRegion: mood === "error" ? "assertive" : "polite",
|
|
@@ -2902,20 +3223,20 @@ function MascotState({ bird = "owl", mood = "empty", title, description, action,
|
|
|
2902
3223
|
...props,
|
|
2903
3224
|
style: [inline ? styles25.inline : styles25.stacked, { opacity, transform: [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }, style],
|
|
2904
3225
|
children: [
|
|
2905
|
-
/* @__PURE__ */
|
|
2906
|
-
/* @__PURE__ */
|
|
2907
|
-
/* @__PURE__ */
|
|
2908
|
-
description ? /* @__PURE__ */
|
|
2909
|
-
action ? /* @__PURE__ */
|
|
3226
|
+
/* @__PURE__ */ jsx33(Mascot, { bird, mood, tone: tone3, size: SIZE[size], animated }),
|
|
3227
|
+
/* @__PURE__ */ jsxs29(View28, { style: inline ? styles25.wordsInline : styles25.words, children: [
|
|
3228
|
+
/* @__PURE__ */ jsx33(Txt, { variant: "label", role: "heading", style: inline ? null : styles25.center, children: title }),
|
|
3229
|
+
description ? /* @__PURE__ */ jsx33(Txt, { tone: "secondary", style: inline ? null : styles25.center, children: description }) : null,
|
|
3230
|
+
action ? /* @__PURE__ */ jsx33(View28, { style: [styles25.action, inline ? null : styles25.actionCentred], children: action }) : null
|
|
2910
3231
|
] })
|
|
2911
3232
|
]
|
|
2912
3233
|
}
|
|
2913
3234
|
);
|
|
2914
3235
|
}
|
|
2915
|
-
var ErrorState = (props) => /* @__PURE__ */
|
|
2916
|
-
var SuccessState = (props) => /* @__PURE__ */
|
|
2917
|
-
var LoadingState = (props) => /* @__PURE__ */
|
|
2918
|
-
var WelcomeState = (props) => /* @__PURE__ */
|
|
3236
|
+
var ErrorState = (props) => /* @__PURE__ */ jsx33(MascotState, { mood: "error", ...props });
|
|
3237
|
+
var SuccessState = (props) => /* @__PURE__ */ jsx33(MascotState, { mood: "success", ...props });
|
|
3238
|
+
var LoadingState = (props) => /* @__PURE__ */ jsx33(MascotState, { mood: "thinking", ...props });
|
|
3239
|
+
var WelcomeState = (props) => /* @__PURE__ */ jsx33(MascotState, { mood: "welcome", ...props });
|
|
2919
3240
|
var styles25 = StyleSheet25.create({
|
|
2920
3241
|
stacked: { alignItems: "center", justifyContent: "center", gap: 12, paddingVertical: 40, paddingHorizontal: 24 },
|
|
2921
3242
|
inline: { flexDirection: "row", alignItems: "center", gap: 16 },
|
|
@@ -2927,40 +3248,40 @@ var styles25 = StyleSheet25.create({
|
|
|
2927
3248
|
});
|
|
2928
3249
|
|
|
2929
3250
|
// src/native/match-dialog.tsx
|
|
2930
|
-
import * as
|
|
2931
|
-
import { AccessibilityInfo as
|
|
2932
|
-
import
|
|
2933
|
-
import { jsx as
|
|
3251
|
+
import * as React25 from "react";
|
|
3252
|
+
import { AccessibilityInfo as AccessibilityInfo10, Animated as Animated14, Easing as Easing8, Modal as Modal4, Pressable as Pressable14, StyleSheet as StyleSheet26, View as View29 } from "react-native";
|
|
3253
|
+
import Svg15, { Path as Path13 } from "react-native-svg";
|
|
3254
|
+
import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2934
3255
|
function MatchDialog({ open, onOpenChange, title, description, people, primaryLabel, onPrimary, secondaryLabel }) {
|
|
2935
3256
|
const { theme, haptic } = useTheme();
|
|
2936
3257
|
const reduce = useReducedMotion();
|
|
2937
|
-
const [t] =
|
|
2938
|
-
|
|
3258
|
+
const [t] = React25.useState(() => new Animated14.Value(0));
|
|
3259
|
+
React25.useEffect(() => {
|
|
2939
3260
|
if (!open) return;
|
|
2940
3261
|
haptic("success");
|
|
2941
|
-
|
|
3262
|
+
AccessibilityInfo10.announceForAccessibility([title, description].filter(Boolean).join(". "));
|
|
2942
3263
|
if (reduce) return;
|
|
2943
3264
|
t.setValue(0);
|
|
2944
|
-
|
|
3265
|
+
Animated14.timing(t, { toValue: 1, duration: 520, easing: Easing8.out(Easing8.back(1.6)), useNativeDriver: true }).start();
|
|
2945
3266
|
}, [open]);
|
|
2946
|
-
|
|
3267
|
+
React25.useEffect(() => {
|
|
2947
3268
|
if (open && reduce) {
|
|
2948
3269
|
t.stopAnimation();
|
|
2949
3270
|
t.setValue(1);
|
|
2950
3271
|
}
|
|
2951
3272
|
}, [open, reduce, t]);
|
|
2952
3273
|
const side = (dir) => ({ transform: [{ translateX: t.interpolate({ inputRange: [0, 1], outputRange: [dir * 110, dir * 50] }) }, { rotate: dir === -1 ? "-8deg" : "8deg" }] });
|
|
2953
|
-
return /* @__PURE__ */
|
|
2954
|
-
/* @__PURE__ */
|
|
2955
|
-
/* @__PURE__ */
|
|
2956
|
-
description ? /* @__PURE__ */
|
|
2957
|
-
/* @__PURE__ */
|
|
2958
|
-
/* @__PURE__ */
|
|
2959
|
-
/* @__PURE__ */
|
|
2960
|
-
/* @__PURE__ */
|
|
3274
|
+
return /* @__PURE__ */ jsx34(Modal4, { ...modalName(title), visible: open, transparent: true, animationType: reduce ? "none" : "fade", onRequestClose: () => onOpenChange(false), statusBarTranslucent: true, children: /* @__PURE__ */ jsxs30(View29, { accessibilityViewIsModal: true, style: [styles26.screen, { backgroundColor: theme.accent }], children: [
|
|
3275
|
+
/* @__PURE__ */ jsx34(View29, { style: [StyleSheet26.absoluteFill, { backgroundColor: theme.accent2, opacity: 0.55 }] }),
|
|
3276
|
+
/* @__PURE__ */ jsx34(Txt, { variant: "display", tone: "onAccent", style: styles26.title, children: title }),
|
|
3277
|
+
description ? /* @__PURE__ */ jsx34(Txt, { tone: "onAccent", style: styles26.center, children: description }) : null,
|
|
3278
|
+
/* @__PURE__ */ jsxs30(View29, { style: styles26.pair, "aria-hidden": true, children: [
|
|
3279
|
+
/* @__PURE__ */ jsx34(Animated14.View, { style: [styles26.photo, side(-1), { borderColor: theme.onAccent }], children: /* @__PURE__ */ jsx34(Avatar, { src: people[0].src, alt: "", fallback: people[0].name.charAt(0), size: 112 }) }),
|
|
3280
|
+
/* @__PURE__ */ jsx34(Animated14.View, { style: [styles26.photo, side(1), { borderColor: theme.onAccent }], children: /* @__PURE__ */ jsx34(Avatar, { src: people[1].src, alt: "", fallback: people[1].name.charAt(0), size: 112 }) }),
|
|
3281
|
+
/* @__PURE__ */ jsx34(Animated14.View, { style: [styles26.heart, { backgroundColor: theme.onAccent, transform: [{ scale: t }] }], children: /* @__PURE__ */ jsx34(Svg15, { width: 26, height: 26, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx34(Path13, { 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 }) }) })
|
|
2961
3282
|
] }),
|
|
2962
|
-
/* @__PURE__ */
|
|
2963
|
-
/* @__PURE__ */
|
|
3283
|
+
/* @__PURE__ */ jsxs30(View29, { style: styles26.actions, children: [
|
|
3284
|
+
/* @__PURE__ */ jsx34(
|
|
2964
3285
|
Button,
|
|
2965
3286
|
{
|
|
2966
3287
|
label: primaryLabel,
|
|
@@ -2971,7 +3292,7 @@ function MatchDialog({ open, onOpenChange, title, description, people, primaryLa
|
|
|
2971
3292
|
}
|
|
2972
3293
|
}
|
|
2973
3294
|
),
|
|
2974
|
-
/* @__PURE__ */
|
|
3295
|
+
/* @__PURE__ */ jsx34(Pressable14, { role: "button", onPress: () => onOpenChange(false), style: ({ pressed }) => [styles26.secondary, { borderColor: theme.onAccent, opacity: pressed ? 0.8 : 1 }], children: /* @__PURE__ */ jsx34(Txt, { variant: "label", tone: "onAccent", children: secondaryLabel }) })
|
|
2975
3296
|
] })
|
|
2976
3297
|
] }) });
|
|
2977
3298
|
}
|
|
@@ -2987,9 +3308,9 @@ var styles26 = StyleSheet26.create({
|
|
|
2987
3308
|
});
|
|
2988
3309
|
|
|
2989
3310
|
// src/native/meter.tsx
|
|
2990
|
-
import { StyleSheet as StyleSheet27, View as
|
|
2991
|
-
import
|
|
2992
|
-
import { jsx as
|
|
3311
|
+
import { StyleSheet as StyleSheet27, View as View30 } from "react-native";
|
|
3312
|
+
import Svg16, { Circle as Circle9 } from "react-native-svg";
|
|
3313
|
+
import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2993
3314
|
var THICK = { sm: 6, md: 8, lg: 12 };
|
|
2994
3315
|
var RING = { sm: 56, md: 96, lg: 144 };
|
|
2995
3316
|
var partColor = (t, i) => [t.accent, t.warning, t.success, t.textSecondary, t.danger][i % 5];
|
|
@@ -3002,10 +3323,10 @@ function Meter({ label, value = 0, min = 0, max = 100, valueText, thresholds, op
|
|
|
3002
3323
|
const words = valueText ?? `${Math.round(ratio * 100)} %`;
|
|
3003
3324
|
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)} %` }));
|
|
3004
3325
|
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": words };
|
|
3005
|
-
const legend = parts ? /* @__PURE__ */
|
|
3006
|
-
/* @__PURE__ */
|
|
3007
|
-
/* @__PURE__ */
|
|
3008
|
-
/* @__PURE__ */
|
|
3326
|
+
const legend = parts ? /* @__PURE__ */ jsx35(View30, { style: styles27.legend, "aria-hidden": true, children: shares.map((p, i) => /* @__PURE__ */ jsxs31(View30, { style: styles27.legendItem, children: [
|
|
3327
|
+
/* @__PURE__ */ jsx35(View30, { style: [styles27.swatch, { backgroundColor: p.color }] }),
|
|
3328
|
+
/* @__PURE__ */ jsx35(Txt, { variant: "caption", children: p.label }),
|
|
3329
|
+
/* @__PURE__ */ jsx35(Txt, { variant: "caption", tone: "secondary", children: p.words })
|
|
3009
3330
|
] }, i)) }) : null;
|
|
3010
3331
|
if (variant === "ring") {
|
|
3011
3332
|
const side = RING[size];
|
|
@@ -3017,23 +3338,23 @@ function Meter({ label, value = 0, min = 0, max = 100, valueText, thresholds, op
|
|
|
3017
3338
|
offset += p.ratio;
|
|
3018
3339
|
return arc;
|
|
3019
3340
|
}) : [{ color: tone3, len: ratio, start: 0 }];
|
|
3020
|
-
return /* @__PURE__ */
|
|
3021
|
-
/* @__PURE__ */
|
|
3022
|
-
/* @__PURE__ */
|
|
3023
|
-
/* @__PURE__ */
|
|
3024
|
-
arcs.map((a, i) => /* @__PURE__ */
|
|
3341
|
+
return /* @__PURE__ */ jsxs31(View30, { accessible: true, ...a11y, style: [styles27.ringRoot, style], children: [
|
|
3342
|
+
/* @__PURE__ */ jsxs31(View30, { style: { width: side, height: side }, children: [
|
|
3343
|
+
/* @__PURE__ */ jsxs31(Svg16, { width: side, height: side, viewBox: "0 0 100 100", style: { transform: [{ rotate: "-90deg" }] }, children: [
|
|
3344
|
+
/* @__PURE__ */ jsx35(Circle9, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: 9 }),
|
|
3345
|
+
arcs.map((a, i) => /* @__PURE__ */ jsx35(Circle9, { 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))
|
|
3025
3346
|
] }),
|
|
3026
|
-
children !== void 0 ? /* @__PURE__ */
|
|
3347
|
+
children !== void 0 ? /* @__PURE__ */ jsx35(View30, { style: [StyleSheet27.absoluteFill, styles27.center], children }) : null
|
|
3027
3348
|
] }),
|
|
3028
3349
|
legend
|
|
3029
3350
|
] });
|
|
3030
3351
|
}
|
|
3031
|
-
return /* @__PURE__ */
|
|
3032
|
-
showLabel ? /* @__PURE__ */
|
|
3033
|
-
/* @__PURE__ */
|
|
3034
|
-
!parts ? /* @__PURE__ */
|
|
3352
|
+
return /* @__PURE__ */ jsxs31(View30, { accessible: true, ...a11y, style: [styles27.root, style], children: [
|
|
3353
|
+
showLabel ? /* @__PURE__ */ jsxs31(View30, { style: styles27.header, "aria-hidden": true, children: [
|
|
3354
|
+
/* @__PURE__ */ jsx35(Txt, { variant: "caption", numberOfLines: 1, style: styles27.caption, children: label }),
|
|
3355
|
+
!parts ? /* @__PURE__ */ jsx35(Txt, { variant: "caption", tone: "secondary", children: words }) : null
|
|
3035
3356
|
] }) : null,
|
|
3036
|
-
/* @__PURE__ */
|
|
3357
|
+
/* @__PURE__ */ jsx35(View30, { style: [styles27.track, { height: THICK[size], backgroundColor: theme.surface3 }], children: parts ? shares.map((p, i) => /* @__PURE__ */ jsx35(View30, { style: { width: `${p.ratio * 100}%`, backgroundColor: p.color } }, i)) : /* @__PURE__ */ jsx35(View30, { style: [styles27.fill, { width: `${ratio * 100}%`, backgroundColor: tone3 }] }) }),
|
|
3037
3358
|
legend
|
|
3038
3359
|
] });
|
|
3039
3360
|
}
|
|
@@ -3048,252 +3369,96 @@ var styles27 = StyleSheet27.create({
|
|
|
3048
3369
|
swatch: { width: 8, height: 8, borderRadius: 4 },
|
|
3049
3370
|
ringRoot: { alignItems: "center", gap: 8 },
|
|
3050
3371
|
center: { alignItems: "center", justifyContent: "center" }
|
|
3051
|
-
});
|
|
3052
|
-
|
|
3053
|
-
// src/native/number-ticker.tsx
|
|
3054
|
-
import * as
|
|
3055
|
-
import { AccessibilityInfo as
|
|
3056
|
-
import { jsx as
|
|
3057
|
-
function NumberTicker({ value, locale, format, trigger = "mount", duration = 1100, announce, variant = "display", tone: tone3 = "text", style }) {
|
|
3058
|
-
const reduce = useReducedMotion();
|
|
3059
|
-
const writer =
|
|
3060
|
-
const [shown, setShown] =
|
|
3061
|
-
const [anim] =
|
|
3062
|
-
const first =
|
|
3063
|
-
|
|
3064
|
-
const isFirst = first.current;
|
|
3065
|
-
first.current = false;
|
|
3066
|
-
if (reduce || !isFirst && trigger === "mount" || isFirst && trigger === "change") {
|
|
3067
|
-
anim.setValue(value);
|
|
3068
|
-
setShown(value);
|
|
3069
|
-
if (!isFirst && announce)
|
|
3070
|
-
return;
|
|
3071
|
-
}
|
|
3072
|
-
const id = anim.addListener(({ value: v }) => setShown(v));
|
|
3073
|
-
const run =
|
|
3074
|
-
run.start(({ finished }) => {
|
|
3075
|
-
if (finished) setShown(value);
|
|
3076
|
-
});
|
|
3077
|
-
if (!isFirst && announce) AccessibilityInfo10.announceForAccessibility(writer.format(value));
|
|
3078
|
-
return () => {
|
|
3079
|
-
run.stop();
|
|
3080
|
-
anim.removeListener(id);
|
|
3081
|
-
};
|
|
3082
|
-
}, [value, reduce, trigger, duration, announce, anim, writer]);
|
|
3083
|
-
const digits = Number.isInteger(value) ? Math.round(shown) : shown;
|
|
3084
|
-
return /* @__PURE__ */ jsx31(Txt, { variant, tone: tone3, "aria-label": writer.format(value), style: [{ fontVariant: ["tabular-nums"] }, style], children: /* @__PURE__ */ jsx31(Text13, { "aria-hidden": true, children: writer.format(digits) }) });
|
|
3085
|
-
}
|
|
3086
|
-
|
|
3087
|
-
// src/native/onboarding.tsx
|
|
3088
|
-
import * as React25 from "react";
|
|
3089
|
-
import { ScrollView as ScrollView5, StyleSheet as StyleSheet28, View as View27 } from "react-native";
|
|
3090
|
-
import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3091
|
-
function Onboarding({ slides, labels, onDone, style }) {
|
|
3092
|
-
const { theme, insets, haptic } = useTheme();
|
|
3093
|
-
const [width, setWidth] = React25.useState(0);
|
|
3094
|
-
const [page, setPage] = React25.useState(0);
|
|
3095
|
-
const scroller = React25.useRef(null);
|
|
3096
|
-
const last = page === slides.length - 1;
|
|
3097
|
-
const go = (to) => {
|
|
3098
|
-
scroller.current?.scrollTo({ x: to * width, animated: true });
|
|
3099
|
-
setPage(to);
|
|
3100
|
-
haptic("selection");
|
|
3101
|
-
};
|
|
3102
|
-
const onScroll = (e) => {
|
|
3103
|
-
if (width > 0) setPage(Math.round(e.nativeEvent.contentOffset.x / width));
|
|
3104
|
-
};
|
|
3105
|
-
return /* @__PURE__ */ jsxs28(View27, { style: [styles28.root, { backgroundColor: theme.surface0, paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
|
|
3106
|
-
/* @__PURE__ */ jsx32(View27, { style: styles28.top, children: !last ? /* @__PURE__ */ jsx32(Button, { label: labels.skip, variant: "ghost", size: "sm", onPress: onDone }) : /* @__PURE__ */ jsx32(View27, { style: styles28.spacer }) }),
|
|
3107
|
-
/* @__PURE__ */ jsx32(ScrollView5, { ref: scroller, tabIndex: 0, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onMomentumScrollEnd: onScroll, style: styles28.flex, children: slides.map((slide, i) => /* @__PURE__ */ jsxs28(View27, { 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: [
|
|
3108
|
-
slide.visual ? /* @__PURE__ */ jsx32(View27, { style: styles28.visual, children: slide.visual }) : null,
|
|
3109
|
-
/* @__PURE__ */ jsx32(Txt, { variant: "display", style: styles28.centred, children: slide.title }),
|
|
3110
|
-
/* @__PURE__ */ jsx32(Txt, { tone: "secondary", style: [styles28.centred, styles28.description], children: slide.description })
|
|
3111
|
-
] }, i)) }),
|
|
3112
|
-
/* @__PURE__ */ jsx32(View27, { style: styles28.dots, "aria-hidden": true, children: slides.map((_, i) => /* @__PURE__ */ jsx32(View27, { style: [styles28.dot, { width: i === page ? 22 : 8, backgroundColor: i === page ? theme.accent : theme.borderStrong }] }, i)) }),
|
|
3113
|
-
/* @__PURE__ */ jsx32(View27, { style: styles28.bottom, children: /* @__PURE__ */ jsx32(Button, { label: last ? labels.done : labels.next, variant: last ? "gradient" : "primary", size: "lg", onPress: () => last ? onDone() : go(page + 1) }) })
|
|
3114
|
-
] });
|
|
3115
|
-
}
|
|
3116
|
-
var styles28 = StyleSheet28.create({
|
|
3117
|
-
root: { flex: 1 },
|
|
3118
|
-
top: { flexDirection: "row", justifyContent: "flex-end", paddingHorizontal: 16, minHeight: 32 },
|
|
3119
|
-
spacer: { height: 32 },
|
|
3120
|
-
flex: { flex: 1 },
|
|
3121
|
-
slide: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 32, gap: 12 },
|
|
3122
|
-
visual: { marginBottom: 12 },
|
|
3123
|
-
centred: { textAlign: "center" },
|
|
3124
|
-
description: { maxWidth: 340 },
|
|
3125
|
-
dots: { flexDirection: "row", justifyContent: "center", gap: 6, marginVertical: 16 },
|
|
3126
|
-
dot: { height: 8, borderRadius: 4 },
|
|
3127
|
-
bottom: { paddingHorizontal: 24 }
|
|
3128
|
-
});
|
|
3129
|
-
|
|
3130
|
-
// src/native/OrazakaMark.tsx
|
|
3131
|
-
import { View as View28 } from "react-native";
|
|
3132
|
-
import Svg13, { Circle as Circle6, Defs as Defs5, LinearGradient as LinearGradient5, Path as Path10, RadialGradient as RadialGradient2, Stop as Stop5 } from "react-native-svg";
|
|
3133
|
-
|
|
3134
|
-
// src/marks/orazaka-geometry.ts
|
|
3135
|
-
var orange = marks.orazaka[marks.orazaka.length - 1][1];
|
|
3136
|
-
var ORAZAKA = {
|
|
3137
|
-
viewBox: "0 0 400 400",
|
|
3138
|
-
croppedViewBox: "76 76 248 248",
|
|
3139
|
-
center: 200,
|
|
3140
|
-
/**
|
|
3141
|
-
* The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned
|
|
3142
|
-
* 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.
|
|
3143
|
-
*/
|
|
3144
|
-
shards: [
|
|
3145
|
-
"M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z",
|
|
3146
|
-
"M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z",
|
|
3147
|
-
"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z"
|
|
3148
|
-
],
|
|
3149
|
-
shardStroke: 5.7,
|
|
3150
|
-
gradient: { x1: 90, y1: 310, x2: 310, y2: 90, stops: marks.orazaka },
|
|
3151
|
-
core: { r: 21, inner: 7.6 },
|
|
3152
|
-
highlight: "#fff7ed",
|
|
3153
|
-
glow: { color: orange, opacity: 0.16 },
|
|
3154
|
-
/** The core's breathing shadow (web), in the mark's orange. */
|
|
3155
|
-
pulse: { color: orange, low: 0.3, high: 0.6 },
|
|
3156
|
-
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
3157
|
-
ring: { r: 134, width: 1 }
|
|
3158
|
-
};
|
|
3159
|
-
|
|
3160
|
-
// src/native/OrazakaMark.tsx
|
|
3161
|
-
import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3162
|
-
function OrazakaMark({ size = 48, animated = true, title, neutral }) {
|
|
3163
|
-
const { theme } = useTheme();
|
|
3164
|
-
const { Animated: Animated25, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
3165
|
-
const id = useSvgId("ozm");
|
|
3166
|
-
const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
|
|
3167
|
-
const stroke = neutral ?? theme.textMuted;
|
|
3168
|
-
const gradient = /* @__PURE__ */ jsx33(LinearGradient5, { 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__ */ jsx33(Stop5, { offset, stopColor: color }, offset)) });
|
|
3169
|
-
const fill = `url(#${id}a)`;
|
|
3170
|
-
return /* @__PURE__ */ jsxs29(View28, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3171
|
-
/* @__PURE__ */ jsxs29(Svg13, { viewBox, style: layer, children: [
|
|
3172
|
-
/* @__PURE__ */ jsx33(Defs5, { children: /* @__PURE__ */ jsxs29(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3173
|
-
/* @__PURE__ */ jsx33(Stop5, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
|
|
3174
|
-
/* @__PURE__ */ jsx33(Stop5, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
|
|
3175
|
-
] }) }),
|
|
3176
|
-
size >= 48 ? /* @__PURE__ */ jsx33(Circle6, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3177
|
-
/* @__PURE__ */ jsx33(Circle6, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3178
|
-
/* @__PURE__ */ jsx33(Circle6, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
|
|
3179
|
-
] }),
|
|
3180
|
-
/* @__PURE__ */ jsx33(Animated25.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs29(Svg13, { viewBox, style: layer, children: [
|
|
3181
|
-
/* @__PURE__ */ jsx33(Defs5, { children: gradient }),
|
|
3182
|
-
ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx33(Path10, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
|
|
3183
|
-
] }) }),
|
|
3184
|
-
/* @__PURE__ */ jsx33(Animated25.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs29(Svg13, { viewBox, style: layer, children: [
|
|
3185
|
-
/* @__PURE__ */ jsx33(Defs5, { children: gradient }),
|
|
3186
|
-
/* @__PURE__ */ jsx33(Circle6, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
|
|
3187
|
-
/* @__PURE__ */ jsx33(Circle6, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
|
|
3188
|
-
] }) })
|
|
3189
|
-
] });
|
|
3190
|
-
}
|
|
3191
|
-
|
|
3192
|
-
// src/native/OrochiaMark.tsx
|
|
3193
|
-
import { useEffect as useEffect17, useState as useState26 } from "react";
|
|
3194
|
-
import { AccessibilityInfo as AccessibilityInfo11, Animated as Animated15, Easing as Easing9, View as View29 } from "react-native";
|
|
3195
|
-
import Svg14, { Circle as Circle7, Defs as Defs6, Ellipse as Ellipse2, G as Group2, LinearGradient as LinearGradient6, Path as Path11, RadialGradient as RadialGradient3, Stop as Stop6 } from "react-native-svg";
|
|
3196
|
-
|
|
3197
|
-
// src/marks/orochia-geometry.ts
|
|
3198
|
-
var OROCHIA = {
|
|
3199
|
-
viewBox: "0 0 400 400",
|
|
3200
|
-
croppedViewBox: "86 82 228 228",
|
|
3201
|
-
offset: 20,
|
|
3202
|
-
body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: marks.orochia },
|
|
3203
|
-
flameGradient: { stops: [["0%", "#a855f7"], ["100%", "#f9a8d4"]] },
|
|
3204
|
-
glow: { color: "#d946ef", opacity: 0.18 },
|
|
3205
|
-
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
3206
|
-
ring: { r: 134, width: 1 },
|
|
3207
|
-
arc: "M259.8,142.8 A88,88 0 1 1 142.8,100.2",
|
|
3208
|
-
neck: "M142.8,100.2 A88,88 0 0 1 187.7,92.3",
|
|
3209
|
-
tail: "M187.7,92.3 A88,88 0 0 1 221.3,102.3",
|
|
3210
|
-
scales: { color: "#fdf4ff", opacity: 0.45, width: 3, dash: "2 14" },
|
|
3211
|
-
head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },
|
|
3212
|
-
tongue: { d: "M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3", color: "#f472b6" },
|
|
3213
|
-
eye: { cx: 256.3, cy: 123.5, r: 4.5, color: "#fdf4ff" },
|
|
3214
|
-
flame: {
|
|
3215
|
-
translate: [127, 120],
|
|
3216
|
-
scale: 4.4,
|
|
3217
|
-
d: "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"
|
|
3218
|
-
}
|
|
3219
|
-
};
|
|
3220
|
-
|
|
3221
|
-
// src/native/OrochiaMark.tsx
|
|
3222
|
-
import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3223
|
-
var CENTER = OROCHIA.offset + 180;
|
|
3224
|
-
function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }) {
|
|
3225
|
-
const { theme } = useTheme();
|
|
3226
|
-
const neutral = neutralProp ?? theme.textMuted;
|
|
3227
|
-
const [spin] = useState26(() => new Animated15.Value(0));
|
|
3228
|
-
const [pulse] = useState26(() => new Animated15.Value(0));
|
|
3229
|
-
useEffect17(() => {
|
|
3230
|
-
if (!animated) return;
|
|
3231
|
-
let loops = [];
|
|
3232
|
-
let cancelled = false;
|
|
3233
|
-
void AccessibilityInfo11.isReduceMotionEnabled().then((reduce) => {
|
|
3234
|
-
if (reduce || cancelled) return;
|
|
3235
|
-
loops = [
|
|
3236
|
-
Animated15.loop(Animated15.timing(spin, { toValue: 1, duration: 3e4, easing: Easing9.linear, useNativeDriver: true })),
|
|
3237
|
-
Animated15.loop(
|
|
3238
|
-
Animated15.sequence([
|
|
3239
|
-
Animated15.timing(pulse, { toValue: 1, duration: 1600, easing: Easing9.inOut(Easing9.ease), useNativeDriver: true }),
|
|
3240
|
-
Animated15.timing(pulse, { toValue: 0, duration: 1600, easing: Easing9.inOut(Easing9.ease), useNativeDriver: true })
|
|
3241
|
-
])
|
|
3242
|
-
)
|
|
3243
|
-
];
|
|
3244
|
-
loops.forEach((l) => l.start());
|
|
3372
|
+
});
|
|
3373
|
+
|
|
3374
|
+
// src/native/number-ticker.tsx
|
|
3375
|
+
import * as React26 from "react";
|
|
3376
|
+
import { AccessibilityInfo as AccessibilityInfo11, Animated as Animated15, Easing as Easing9, Text as Text13 } from "react-native";
|
|
3377
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
3378
|
+
function NumberTicker({ value, locale, format, trigger = "mount", duration = 1100, announce, variant = "display", tone: tone3 = "text", style }) {
|
|
3379
|
+
const reduce = useReducedMotion();
|
|
3380
|
+
const writer = React26.useMemo(() => new Intl.NumberFormat(locale, format), [locale, format]);
|
|
3381
|
+
const [shown, setShown] = React26.useState(() => reduce ? value : trigger === "mount" ? 0 : value);
|
|
3382
|
+
const [anim] = React26.useState(() => new Animated15.Value(trigger === "mount" ? 0 : value));
|
|
3383
|
+
const first = React26.useRef(true);
|
|
3384
|
+
React26.useEffect(() => {
|
|
3385
|
+
const isFirst = first.current;
|
|
3386
|
+
first.current = false;
|
|
3387
|
+
if (reduce || !isFirst && trigger === "mount" || isFirst && trigger === "change") {
|
|
3388
|
+
anim.setValue(value);
|
|
3389
|
+
setShown(value);
|
|
3390
|
+
if (!isFirst && announce) AccessibilityInfo11.announceForAccessibility(writer.format(value));
|
|
3391
|
+
return;
|
|
3392
|
+
}
|
|
3393
|
+
const id = anim.addListener(({ value: v }) => setShown(v));
|
|
3394
|
+
const run = Animated15.timing(anim, { toValue: value, duration, easing: Easing9.out(Easing9.cubic), useNativeDriver: false });
|
|
3395
|
+
run.start(({ finished }) => {
|
|
3396
|
+
if (finished) setShown(value);
|
|
3245
3397
|
});
|
|
3398
|
+
if (!isFirst && announce) AccessibilityInfo11.announceForAccessibility(writer.format(value));
|
|
3246
3399
|
return () => {
|
|
3247
|
-
|
|
3248
|
-
|
|
3400
|
+
run.stop();
|
|
3401
|
+
anim.removeListener(id);
|
|
3249
3402
|
};
|
|
3250
|
-
}, [
|
|
3251
|
-
const
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
] }
|
|
3276
|
-
|
|
3277
|
-
/* @__PURE__ */
|
|
3278
|
-
/* @__PURE__ */
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
] }) })
|
|
3403
|
+
}, [value, reduce, trigger, duration, announce, anim, writer]);
|
|
3404
|
+
const digits = Number.isInteger(value) ? Math.round(shown) : shown;
|
|
3405
|
+
return /* @__PURE__ */ jsx36(Txt, { variant, tone: tone3, "aria-label": writer.format(value), style: [{ fontVariant: ["tabular-nums"] }, style], children: /* @__PURE__ */ jsx36(Text13, { "aria-hidden": true, children: writer.format(digits) }) });
|
|
3406
|
+
}
|
|
3407
|
+
|
|
3408
|
+
// src/native/onboarding.tsx
|
|
3409
|
+
import * as React27 from "react";
|
|
3410
|
+
import { ScrollView as ScrollView5, StyleSheet as StyleSheet28, View as View31 } from "react-native";
|
|
3411
|
+
import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3412
|
+
function Onboarding({ slides, labels, onDone, style }) {
|
|
3413
|
+
const { theme, insets, haptic } = useTheme();
|
|
3414
|
+
const [width, setWidth] = React27.useState(0);
|
|
3415
|
+
const [page, setPage] = React27.useState(0);
|
|
3416
|
+
const scroller = React27.useRef(null);
|
|
3417
|
+
const last = page === slides.length - 1;
|
|
3418
|
+
const go = (to) => {
|
|
3419
|
+
scroller.current?.scrollTo({ x: to * width, animated: true });
|
|
3420
|
+
setPage(to);
|
|
3421
|
+
haptic("selection");
|
|
3422
|
+
};
|
|
3423
|
+
const onScroll = (e) => {
|
|
3424
|
+
if (width > 0) setPage(Math.round(e.nativeEvent.contentOffset.x / width));
|
|
3425
|
+
};
|
|
3426
|
+
return /* @__PURE__ */ jsxs32(View31, { style: [styles28.root, { backgroundColor: theme.surface0, paddingTop: insets.top + 8, paddingBottom: insets.bottom + 16 }, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
|
|
3427
|
+
/* @__PURE__ */ jsx37(View31, { style: styles28.top, children: !last ? /* @__PURE__ */ jsx37(Button, { label: labels.skip, variant: "ghost", size: "sm", onPress: onDone }) : /* @__PURE__ */ jsx37(View31, { style: styles28.spacer }) }),
|
|
3428
|
+
/* @__PURE__ */ jsx37(ScrollView5, { ref: scroller, tabIndex: 0, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onMomentumScrollEnd: onScroll, style: styles28.flex, children: slides.map((slide, i) => /* @__PURE__ */ jsxs32(View31, { 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: [
|
|
3429
|
+
slide.visual ? /* @__PURE__ */ jsx37(View31, { style: styles28.visual, children: slide.visual }) : null,
|
|
3430
|
+
/* @__PURE__ */ jsx37(Txt, { variant: "display", style: styles28.centred, children: slide.title }),
|
|
3431
|
+
/* @__PURE__ */ jsx37(Txt, { tone: "secondary", style: [styles28.centred, styles28.description], children: slide.description })
|
|
3432
|
+
] }, i)) }),
|
|
3433
|
+
/* @__PURE__ */ jsx37(View31, { style: styles28.dots, "aria-hidden": true, children: slides.map((_, i) => /* @__PURE__ */ jsx37(View31, { style: [styles28.dot, { width: i === page ? 22 : 8, backgroundColor: i === page ? theme.accent : theme.borderStrong }] }, i)) }),
|
|
3434
|
+
/* @__PURE__ */ jsx37(View31, { style: styles28.bottom, children: /* @__PURE__ */ jsx37(Button, { label: last ? labels.done : labels.next, variant: last ? "gradient" : "primary", size: "lg", onPress: () => last ? onDone() : go(page + 1) }) })
|
|
3283
3435
|
] });
|
|
3284
3436
|
}
|
|
3437
|
+
var styles28 = StyleSheet28.create({
|
|
3438
|
+
root: { flex: 1 },
|
|
3439
|
+
top: { flexDirection: "row", justifyContent: "flex-end", paddingHorizontal: 16, minHeight: 32 },
|
|
3440
|
+
spacer: { height: 32 },
|
|
3441
|
+
flex: { flex: 1 },
|
|
3442
|
+
slide: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 32, gap: 12 },
|
|
3443
|
+
visual: { marginBottom: 12 },
|
|
3444
|
+
centred: { textAlign: "center" },
|
|
3445
|
+
description: { maxWidth: 340 },
|
|
3446
|
+
dots: { flexDirection: "row", justifyContent: "center", gap: 6, marginVertical: 16 },
|
|
3447
|
+
dot: { height: 8, borderRadius: 4 },
|
|
3448
|
+
bottom: { paddingHorizontal: 24 }
|
|
3449
|
+
});
|
|
3285
3450
|
|
|
3286
3451
|
// src/native/otp-input.tsx
|
|
3287
|
-
import * as
|
|
3288
|
-
import { Platform as Platform2, Pressable as Pressable15, StyleSheet as StyleSheet29, TextInput as TextInput5, View as
|
|
3289
|
-
import { jsx as
|
|
3452
|
+
import * as React28 from "react";
|
|
3453
|
+
import { Platform as Platform2, Pressable as Pressable15, StyleSheet as StyleSheet29, TextInput as TextInput5, View as View32 } from "react-native";
|
|
3454
|
+
import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3290
3455
|
function OtpInput({ label, length = 6, value, onValueChange, onComplete, mode = "numeric", invalid, disabled, autoFocus, style }) {
|
|
3291
3456
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
3292
|
-
const [own, setOwn] =
|
|
3457
|
+
const [own, setOwn] = React28.useState("");
|
|
3293
3458
|
const code = value ?? own;
|
|
3294
|
-
const [focused, setFocused] =
|
|
3295
|
-
const input =
|
|
3296
|
-
|
|
3459
|
+
const [focused, setFocused] = React28.useState(false);
|
|
3460
|
+
const input = React28.useRef(null);
|
|
3461
|
+
React28.useEffect(() => {
|
|
3297
3462
|
if (invalid) haptic("warning");
|
|
3298
3463
|
}, [invalid, haptic]);
|
|
3299
3464
|
const change = (raw) => {
|
|
@@ -3305,11 +3470,11 @@ function OtpInput({ label, length = 6, value, onValueChange, onComplete, mode =
|
|
|
3305
3470
|
onComplete?.(next);
|
|
3306
3471
|
}
|
|
3307
3472
|
};
|
|
3308
|
-
return /* @__PURE__ */
|
|
3309
|
-
/* @__PURE__ */
|
|
3473
|
+
return /* @__PURE__ */ jsxs33(Pressable15, { onPress: () => input.current?.focus(), disabled, accessible: false, style: [styles29.root, style], children: [
|
|
3474
|
+
/* @__PURE__ */ jsx38(View32, { style: styles29.boxes, "aria-hidden": true, children: Array.from({ length }, (_, i) => {
|
|
3310
3475
|
const active = focused && i === Math.min(code.length, length - 1);
|
|
3311
|
-
return /* @__PURE__ */
|
|
3312
|
-
|
|
3476
|
+
return /* @__PURE__ */ jsx38(
|
|
3477
|
+
View32,
|
|
3313
3478
|
{
|
|
3314
3479
|
style: [
|
|
3315
3480
|
styles29.box,
|
|
@@ -3320,12 +3485,12 @@ function OtpInput({ label, length = 6, value, onValueChange, onComplete, mode =
|
|
|
3320
3485
|
borderWidth: invalid || active ? 2 : 1
|
|
3321
3486
|
}
|
|
3322
3487
|
],
|
|
3323
|
-
children: /* @__PURE__ */
|
|
3488
|
+
children: /* @__PURE__ */ jsx38(Txt, { variant: "title", children: code[i] ?? "" })
|
|
3324
3489
|
},
|
|
3325
3490
|
i
|
|
3326
3491
|
);
|
|
3327
3492
|
}) }),
|
|
3328
|
-
/* @__PURE__ */
|
|
3493
|
+
/* @__PURE__ */ jsx38(
|
|
3329
3494
|
TextInput5,
|
|
3330
3495
|
{
|
|
3331
3496
|
ref: input,
|
|
@@ -3357,11 +3522,11 @@ var styles29 = StyleSheet29.create({
|
|
|
3357
3522
|
});
|
|
3358
3523
|
|
|
3359
3524
|
// src/native/pagination.tsx
|
|
3360
|
-
import { Pressable as Pressable16, StyleSheet as StyleSheet30, Text as Text14, View as
|
|
3361
|
-
import
|
|
3362
|
-
import { jsx as
|
|
3525
|
+
import { Pressable as Pressable16, StyleSheet as StyleSheet30, Text as Text14, View as View33 } from "react-native";
|
|
3526
|
+
import Svg17, { Path as Path14 } from "react-native-svg";
|
|
3527
|
+
import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3363
3528
|
function Chevron3({ direction, color }) {
|
|
3364
|
-
return /* @__PURE__ */
|
|
3529
|
+
return /* @__PURE__ */ jsx39(Svg17, { 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__ */ jsx39(Path14, { d: direction === "left" ? "m15 6-6 6 6 6" : "m9 6 6 6-6 6" }) });
|
|
3365
3530
|
}
|
|
3366
3531
|
function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, onPrevious, onNext, status, disabled, labels, style }) {
|
|
3367
3532
|
const { theme, radius: radius3 } = useTheme();
|
|
@@ -3370,7 +3535,7 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
|
|
|
3370
3535
|
const current = Math.min(Math.max(1, page), count);
|
|
3371
3536
|
const canPrevious = !disabled && (paged ? current > 1 : Boolean(hasPrevious));
|
|
3372
3537
|
const canNext = !disabled && (paged ? current < count : Boolean(hasNext));
|
|
3373
|
-
const button = (direction, enabled, onPress, label) => /* @__PURE__ */
|
|
3538
|
+
const button = (direction, enabled, onPress, label) => /* @__PURE__ */ jsx39(
|
|
3374
3539
|
Pressable16,
|
|
3375
3540
|
{
|
|
3376
3541
|
role: "button",
|
|
@@ -3383,13 +3548,13 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
|
|
|
3383
3548
|
styles30.button,
|
|
3384
3549
|
{ borderRadius: radius3.sm, borderColor: theme.borderDefault, backgroundColor: theme.surface1, opacity: enabled ? pressed ? 0.8 : 1 : 0.4 }
|
|
3385
3550
|
],
|
|
3386
|
-
children: /* @__PURE__ */
|
|
3551
|
+
children: /* @__PURE__ */ jsx39(Chevron3, { direction, color: theme.textPrimary })
|
|
3387
3552
|
}
|
|
3388
3553
|
);
|
|
3389
3554
|
const text = status ?? (paged ? labels.compact(current, count) : null);
|
|
3390
|
-
return /* @__PURE__ */
|
|
3555
|
+
return /* @__PURE__ */ jsxs34(View33, { role: "navigation", style: [styles30.row, style], children: [
|
|
3391
3556
|
button("left", canPrevious, paged ? () => onPageChange?.(current - 1) : onPrevious, labels.previous),
|
|
3392
|
-
text ? /* @__PURE__ */
|
|
3557
|
+
text ? /* @__PURE__ */ jsx39(Text14, { "aria-live": "polite", style: [styles30.status, { color: theme.textSecondary }], children: text }) : null,
|
|
3393
3558
|
button("right", canNext, paged ? () => onPageChange?.(current + 1) : onNext, labels.next)
|
|
3394
3559
|
] });
|
|
3395
3560
|
}
|
|
@@ -3400,8 +3565,8 @@ var styles30 = StyleSheet30.create({
|
|
|
3400
3565
|
});
|
|
3401
3566
|
|
|
3402
3567
|
// src/native/permission-prompt.tsx
|
|
3403
|
-
import { StyleSheet as StyleSheet31, View as
|
|
3404
|
-
import { Fragment as Fragment6, jsx as
|
|
3568
|
+
import { StyleSheet as StyleSheet31, View as View34 } from "react-native";
|
|
3569
|
+
import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3405
3570
|
function PermissionPrompt({
|
|
3406
3571
|
status,
|
|
3407
3572
|
title,
|
|
@@ -3418,15 +3583,15 @@ function PermissionPrompt({
|
|
|
3418
3583
|
style
|
|
3419
3584
|
}) {
|
|
3420
3585
|
const { theme, radius: radius3 } = useTheme();
|
|
3421
|
-
if (status === "granted") return /* @__PURE__ */
|
|
3586
|
+
if (status === "granted") return /* @__PURE__ */ jsx40(Fragment6, { children: children ?? null });
|
|
3422
3587
|
const blocked = status === "blocked" || status === "denied" && Boolean(onOpenSettings);
|
|
3423
|
-
return /* @__PURE__ */
|
|
3424
|
-
/* @__PURE__ */
|
|
3425
|
-
/* @__PURE__ */
|
|
3426
|
-
/* @__PURE__ */
|
|
3427
|
-
/* @__PURE__ */
|
|
3428
|
-
blocked && settingsLabel && onOpenSettings ? /* @__PURE__ */
|
|
3429
|
-
dismissLabel && onDismiss ? /* @__PURE__ */
|
|
3588
|
+
return /* @__PURE__ */ jsxs35(View34, { style: [styles31.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style], children: [
|
|
3589
|
+
/* @__PURE__ */ jsx40(Mascot, { bird: mascot, mood: blocked ? "error" : "welcome", size: 104 }),
|
|
3590
|
+
/* @__PURE__ */ jsx40(Txt, { variant: "title", style: styles31.centred, children: title }),
|
|
3591
|
+
/* @__PURE__ */ jsx40(Txt, { tone: "secondary", style: styles31.centred, children: blocked && blockedDescription ? blockedDescription : description }),
|
|
3592
|
+
/* @__PURE__ */ jsxs35(View34, { style: styles31.actions, children: [
|
|
3593
|
+
blocked && settingsLabel && onOpenSettings ? /* @__PURE__ */ jsx40(Button, { label: settingsLabel, variant: "primary", onPress: onOpenSettings }) : /* @__PURE__ */ jsx40(Button, { label: allowLabel, variant: "primary", onPress: onAllow }),
|
|
3594
|
+
dismissLabel && onDismiss ? /* @__PURE__ */ jsx40(Button, { label: dismissLabel, variant: "ghost", onPress: onDismiss }) : null
|
|
3430
3595
|
] })
|
|
3431
3596
|
] });
|
|
3432
3597
|
}
|
|
@@ -3438,8 +3603,8 @@ var styles31 = StyleSheet31.create({
|
|
|
3438
3603
|
|
|
3439
3604
|
// src/native/phoenix.tsx
|
|
3440
3605
|
import { useEffect as useEffect19, useState as useState28 } from "react";
|
|
3441
|
-
import { AccessibilityInfo as AccessibilityInfo12, Animated as Animated16, Easing as Easing10, View as
|
|
3442
|
-
import
|
|
3606
|
+
import { AccessibilityInfo as AccessibilityInfo12, Animated as Animated16, Easing as Easing10, View as View35 } from "react-native";
|
|
3607
|
+
import Svg18, { Circle as Circle10, Defs as Defs9, LinearGradient as LinearGradient9, Path as Path15, RadialGradient as RadialGradient6, Stop as Stop9 } from "react-native-svg";
|
|
3443
3608
|
|
|
3444
3609
|
// src/mascots/phoenix-geometry.ts
|
|
3445
3610
|
var PHOENIX = {
|
|
@@ -3462,7 +3627,7 @@ var PHOENIX_PALETTES = {
|
|
|
3462
3627
|
};
|
|
3463
3628
|
|
|
3464
3629
|
// src/native/phoenix.tsx
|
|
3465
|
-
import { jsx as
|
|
3630
|
+
import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3466
3631
|
function useFloat(animated) {
|
|
3467
3632
|
const [y] = useState28(() => new Animated16.Value(0));
|
|
3468
3633
|
useEffect19(() => {
|
|
@@ -3487,40 +3652,40 @@ function Phoenix({ tone: tone3 = "own", size = 120, animated = true, title, styl
|
|
|
3487
3652
|
const id = useSvgId("kzp");
|
|
3488
3653
|
const y = useFloat(animated);
|
|
3489
3654
|
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;
|
|
3490
|
-
return /* @__PURE__ */
|
|
3491
|
-
/* @__PURE__ */
|
|
3492
|
-
/* @__PURE__ */
|
|
3493
|
-
/* @__PURE__ */
|
|
3494
|
-
/* @__PURE__ */
|
|
3655
|
+
return /* @__PURE__ */ jsx41(View35, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx41(Animated16.View, { style: { transform: [{ translateY: y }] }, children: /* @__PURE__ */ jsxs36(Svg18, { width: size, height: size, viewBox: "0 0 120 120", children: [
|
|
3656
|
+
/* @__PURE__ */ jsxs36(Defs9, { children: [
|
|
3657
|
+
/* @__PURE__ */ jsxs36(LinearGradient9, { id: `${id}l`, x1: "1", y1: "0", x2: "0", y2: "1", children: [
|
|
3658
|
+
/* @__PURE__ */ jsx41(Stop9, { offset: "0%", stopColor: p.left[0] }),
|
|
3659
|
+
/* @__PURE__ */ jsx41(Stop9, { offset: "100%", stopColor: p.left[1] })
|
|
3495
3660
|
] }),
|
|
3496
|
-
/* @__PURE__ */
|
|
3497
|
-
/* @__PURE__ */
|
|
3498
|
-
/* @__PURE__ */
|
|
3661
|
+
/* @__PURE__ */ jsxs36(LinearGradient9, { id: `${id}r`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
3662
|
+
/* @__PURE__ */ jsx41(Stop9, { offset: "0%", stopColor: p.right[0] }),
|
|
3663
|
+
/* @__PURE__ */ jsx41(Stop9, { offset: "100%", stopColor: p.right[1] })
|
|
3499
3664
|
] }),
|
|
3500
|
-
/* @__PURE__ */
|
|
3501
|
-
/* @__PURE__ */
|
|
3502
|
-
/* @__PURE__ */
|
|
3665
|
+
/* @__PURE__ */ jsxs36(RadialGradient6, { id: `${id}c`, children: [
|
|
3666
|
+
/* @__PURE__ */ jsx41(Stop9, { offset: "0%", stopColor: p.core[0] }),
|
|
3667
|
+
/* @__PURE__ */ jsx41(Stop9, { offset: "100%", stopColor: p.core[1], stopOpacity: 0 })
|
|
3503
3668
|
] })
|
|
3504
3669
|
] }),
|
|
3505
|
-
/* @__PURE__ */
|
|
3506
|
-
/* @__PURE__ */
|
|
3507
|
-
/* @__PURE__ */
|
|
3508
|
-
/* @__PURE__ */
|
|
3509
|
-
/* @__PURE__ */
|
|
3510
|
-
/* @__PURE__ */
|
|
3511
|
-
/* @__PURE__ */
|
|
3512
|
-
/* @__PURE__ */
|
|
3670
|
+
/* @__PURE__ */ jsx41(Path15, { d: PHOENIX.wingL, fill: `url(#${id}l)` }),
|
|
3671
|
+
/* @__PURE__ */ jsx41(Path15, { d: PHOENIX.wingR, fill: `url(#${id}r)` }),
|
|
3672
|
+
/* @__PURE__ */ jsx41(Path15, { d: PHOENIX.tailL, fill: `url(#${id}l)`, opacity: 0.7 }),
|
|
3673
|
+
/* @__PURE__ */ jsx41(Path15, { d: PHOENIX.tailR, fill: `url(#${id}r)`, opacity: 0.7 }),
|
|
3674
|
+
/* @__PURE__ */ jsx41(Path15, { d: PHOENIX.body, fill: p.body, stroke: p.edge, strokeOpacity: 0.5 }),
|
|
3675
|
+
/* @__PURE__ */ jsx41(Circle10, { cx: 60, cy: 58, r: 12, fill: `url(#${id}c)` }),
|
|
3676
|
+
/* @__PURE__ */ jsx41(Circle10, { cx: 60, cy: 58, r: 3.5, fill: "#ffffff" }),
|
|
3677
|
+
/* @__PURE__ */ jsx41(Path15, { d: PHOENIX.crest, stroke: p.crest, strokeWidth: 2, strokeLinecap: "round" })
|
|
3513
3678
|
] }) }) });
|
|
3514
3679
|
}
|
|
3515
3680
|
|
|
3516
3681
|
// src/native/photo-grid.tsx
|
|
3517
|
-
import * as
|
|
3518
|
-
import { Image as Image4, Pressable as Pressable17, StyleSheet as StyleSheet32, View as
|
|
3519
|
-
import
|
|
3520
|
-
import { jsx as
|
|
3682
|
+
import * as React30 from "react";
|
|
3683
|
+
import { Image as Image4, Pressable as Pressable17, StyleSheet as StyleSheet32, View as View36 } from "react-native";
|
|
3684
|
+
import Svg19, { Path as Path16 } from "react-native-svg";
|
|
3685
|
+
import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3521
3686
|
function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, columns = 3, labels, style }) {
|
|
3522
3687
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
3523
|
-
const [menu, setMenu] =
|
|
3688
|
+
const [menu, setMenu] = React30.useState(null);
|
|
3524
3689
|
const move = (from, to) => {
|
|
3525
3690
|
if (to < 0 || to >= value.length || from === to) return;
|
|
3526
3691
|
const next = [...value];
|
|
@@ -3534,11 +3699,11 @@ function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, colum
|
|
|
3534
3699
|
onValueChange(value.filter((_, j) => j !== i));
|
|
3535
3700
|
};
|
|
3536
3701
|
const width = `${100 / columns}%`;
|
|
3537
|
-
return /* @__PURE__ */
|
|
3702
|
+
return /* @__PURE__ */ jsxs37(View36, { style: [styles32.grid, style], children: [
|
|
3538
3703
|
Array.from({ length: slots }, (_, i) => {
|
|
3539
3704
|
const photo = value[i];
|
|
3540
3705
|
const cell = [styles32.slot, { borderRadius: radius3.lg, aspectRatio: 3 / 4 }];
|
|
3541
|
-
return /* @__PURE__ */
|
|
3706
|
+
return /* @__PURE__ */ jsx42(View36, { style: [styles32.cell, { width }], children: photo ? /* @__PURE__ */ jsxs37(
|
|
3542
3707
|
Pressable17,
|
|
3543
3708
|
{
|
|
3544
3709
|
role: "button",
|
|
@@ -3562,11 +3727,11 @@ function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, colum
|
|
|
3562
3727
|
},
|
|
3563
3728
|
style: [...cell, { backgroundColor: theme.surface3, overflow: "hidden" }],
|
|
3564
3729
|
children: [
|
|
3565
|
-
/* @__PURE__ */
|
|
3566
|
-
i === 0 ? /* @__PURE__ */
|
|
3730
|
+
/* @__PURE__ */ jsx42(Image4, { source: { uri: photo.uri }, style: StyleSheet32.absoluteFill, resizeMode: "cover" }),
|
|
3731
|
+
i === 0 ? /* @__PURE__ */ jsx42(View36, { style: [styles32.main, { backgroundColor: theme.accent, borderRadius: radius3.full }], children: /* @__PURE__ */ jsx42(Txt, { variant: "caption", tone: "onAccent", style: styles32.mainText, children: labels.main }) }) : null
|
|
3567
3732
|
]
|
|
3568
3733
|
}
|
|
3569
|
-
) : /* @__PURE__ */
|
|
3734
|
+
) : /* @__PURE__ */ jsx42(
|
|
3570
3735
|
Pressable17,
|
|
3571
3736
|
{
|
|
3572
3737
|
role: "button",
|
|
@@ -3578,11 +3743,11 @@ function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, colum
|
|
|
3578
3743
|
styles32.empty,
|
|
3579
3744
|
{ borderColor: i < required ? theme.accent : theme.borderStrong, backgroundColor: pressed ? theme.surface2 : theme.surface1, opacity: i > value.length ? 0.5 : 1 }
|
|
3580
3745
|
],
|
|
3581
|
-
children: /* @__PURE__ */
|
|
3746
|
+
children: /* @__PURE__ */ jsx42(View36, { style: [styles32.plus, { backgroundColor: i === value.length ? theme.accent : theme.surface3, borderRadius: radius3.full }], children: /* @__PURE__ */ jsx42(Svg19, { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx42(Path16, { d: "M12 5v14M5 12h14", stroke: i === value.length ? theme.onAccent : theme.textSecondary, strokeWidth: 2.6, strokeLinecap: "round" }) }) })
|
|
3582
3747
|
}
|
|
3583
3748
|
) }, photo?.id ?? `empty-${i}`);
|
|
3584
3749
|
}),
|
|
3585
|
-
/* @__PURE__ */
|
|
3750
|
+
/* @__PURE__ */ jsx42(
|
|
3586
3751
|
ActionSheet,
|
|
3587
3752
|
{
|
|
3588
3753
|
open: menu !== null,
|
|
@@ -3608,169 +3773,6 @@ var styles32 = StyleSheet32.create({
|
|
|
3608
3773
|
mainText: { fontWeight: "800", textTransform: "uppercase", letterSpacing: 0.5 }
|
|
3609
3774
|
});
|
|
3610
3775
|
|
|
3611
|
-
// src/native/YazakiaMark.tsx
|
|
3612
|
-
import React30 from "react";
|
|
3613
|
-
import { View as View35 } from "react-native";
|
|
3614
|
-
import Svg18, { Circle as Circle9, Defs as Defs8, LinearGradient as LinearGradient8, Path as Path15, RadialGradient as RadialGradient5, Stop as Stop8 } from "react-native-svg";
|
|
3615
|
-
|
|
3616
|
-
// src/marks/yazakia-geometry.ts
|
|
3617
|
-
var turquoise = marks.yazakia[marks.yazakia.length - 1][1];
|
|
3618
|
-
var YAZAKIA = {
|
|
3619
|
-
viewBox: "0 0 400 400",
|
|
3620
|
-
croppedViewBox: "80 80 240 240",
|
|
3621
|
-
center: 200,
|
|
3622
|
-
/** The two voices, left then right: each a bubble (cut around the lens) and its tail. */
|
|
3623
|
-
voices: [
|
|
3624
|
-
{ body: "M191.9 109 A80 80 0 1 0 191.9 259 A87 87 0 0 1 191.9 109 Z", tail: "M98 230 Q104 268 88 294 Q122 288 144 262 L130 200 Z" },
|
|
3625
|
-
{ body: "M208.1 109 A80 80 0 1 1 208.1 259 A87 87 0 0 0 208.1 109 Z", tail: "M302 230 Q296 268 312 294 Q278 288 256 262 L270 200 Z" }
|
|
3626
|
-
],
|
|
3627
|
-
/** The left voice, a shade deeper: the depth between the two. */
|
|
3628
|
-
shade: { color: "#000", opacity: 0.22 },
|
|
3629
|
-
/** Where the bubbles overlap: the core, lit from above. */
|
|
3630
|
-
lens: { d: "M200 112.6 A80 80 0 0 1 200 255.4 A80 80 0 0 1 200 112.6 Z", y1: 112.6, y2: 255.4 },
|
|
3631
|
-
gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
|
|
3632
|
-
/** The light on the lens: bright at the top, fading down. */
|
|
3633
|
-
highlight: { color: "#f0fdfa", from: 0.75, to: 0.2 },
|
|
3634
|
-
/** The pair: two nodes on the orbit, opposite each other, that turn with it. */
|
|
3635
|
-
pair: { r: 8, at: [[40, 200], [360, 200]] },
|
|
3636
|
-
glow: { color: turquoise, opacity: 0.16 },
|
|
3637
|
-
/** The core's breathing shadow (web), in the mark's turquoise. */
|
|
3638
|
-
pulse: { color: turquoise, low: 0.3, high: 0.6 },
|
|
3639
|
-
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
3640
|
-
ring: { r: 134, width: 1 }
|
|
3641
|
-
};
|
|
3642
|
-
|
|
3643
|
-
// src/native/YazakiaMark.tsx
|
|
3644
|
-
import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3645
|
-
function YazakiaMark({ size = 48, animated = true, title, neutral }) {
|
|
3646
|
-
const { theme } = useTheme();
|
|
3647
|
-
const { Animated: Animated25, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
|
|
3648
|
-
const id = useSvgId("yzm");
|
|
3649
|
-
const viewBox = size < 48 ? YAZAKIA.croppedViewBox : YAZAKIA.viewBox;
|
|
3650
|
-
const stroke = neutral ?? theme.textMuted;
|
|
3651
|
-
const gradient = /* @__PURE__ */ jsx40(LinearGradient8, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx40(Stop8, { offset, stopColor: color }, offset)) });
|
|
3652
|
-
const fill = `url(#${id}a)`;
|
|
3653
|
-
return /* @__PURE__ */ jsxs36(View35, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3654
|
-
/* @__PURE__ */ jsxs36(Svg18, { viewBox, style: layer, children: [
|
|
3655
|
-
/* @__PURE__ */ jsxs36(Defs8, { children: [
|
|
3656
|
-
/* @__PURE__ */ jsxs36(RadialGradient5, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3657
|
-
/* @__PURE__ */ jsx40(Stop8, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
|
|
3658
|
-
/* @__PURE__ */ jsx40(Stop8, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
|
|
3659
|
-
] }),
|
|
3660
|
-
gradient
|
|
3661
|
-
] }),
|
|
3662
|
-
size >= 48 ? /* @__PURE__ */ jsx40(Circle9, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3663
|
-
/* @__PURE__ */ jsx40(Circle9, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
|
|
3664
|
-
YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs36(React30.Fragment, { children: [
|
|
3665
|
-
/* @__PURE__ */ jsx40(Path15, { d: v.body, fill }),
|
|
3666
|
-
/* @__PURE__ */ jsx40(Path15, { d: v.tail, fill }),
|
|
3667
|
-
i === 0 ? /* @__PURE__ */ jsx40(Path15, { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
|
|
3668
|
-
] }, v.body))
|
|
3669
|
-
] }),
|
|
3670
|
-
/* @__PURE__ */ jsx40(Animated25.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs36(Svg18, { viewBox, style: layer, children: [
|
|
3671
|
-
/* @__PURE__ */ jsx40(Defs8, { children: gradient }),
|
|
3672
|
-
/* @__PURE__ */ jsx40(Circle9, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke, strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3673
|
-
YAZAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx40(Circle9, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
|
|
3674
|
-
] }) }),
|
|
3675
|
-
/* @__PURE__ */ jsx40(Animated25.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs36(Svg18, { viewBox, style: layer, children: [
|
|
3676
|
-
/* @__PURE__ */ jsxs36(Defs8, { children: [
|
|
3677
|
-
gradient,
|
|
3678
|
-
/* @__PURE__ */ jsxs36(LinearGradient8, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YAZAKIA.lens.y1, x2: 0, y2: YAZAKIA.lens.y2, children: [
|
|
3679
|
-
/* @__PURE__ */ jsx40(Stop8, { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
|
|
3680
|
-
/* @__PURE__ */ jsx40(Stop8, { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
|
|
3681
|
-
] })
|
|
3682
|
-
] }),
|
|
3683
|
-
/* @__PURE__ */ jsx40(Path15, { d: YAZAKIA.lens.d, fill }),
|
|
3684
|
-
/* @__PURE__ */ jsx40(Path15, { d: YAZAKIA.lens.d, fill: `url(#${id}l)` })
|
|
3685
|
-
] }) })
|
|
3686
|
-
] });
|
|
3687
|
-
}
|
|
3688
|
-
|
|
3689
|
-
// src/native/YororisMark.tsx
|
|
3690
|
-
import { View as View36 } from "react-native";
|
|
3691
|
-
import Svg19, { Circle as Circle10, Defs as Defs9, LinearGradient as LinearGradient9, Path as Path16, RadialGradient as RadialGradient6, Stop as Stop9 } from "react-native-svg";
|
|
3692
|
-
|
|
3693
|
-
// src/marks/yororis-geometry.ts
|
|
3694
|
-
var sand = marks.yororis[0][1];
|
|
3695
|
-
var sage = marks.yororis[marks.yororis.length - 1][1];
|
|
3696
|
-
var YORORIS = {
|
|
3697
|
-
viewBox: "0 0 400 400",
|
|
3698
|
-
croppedViewBox: "80 80 240 240",
|
|
3699
|
-
center: 200,
|
|
3700
|
-
/** The two leaves — open hands, mirrored around x = 200 — filled, rising from the stem. */
|
|
3701
|
-
leaves: [
|
|
3702
|
-
"M200 262 C142 256 104 206 110 122 C138 130 154 152 160 180 C168 218 182 238 204 246 Z",
|
|
3703
|
-
"M200 262 C258 256 296 206 290 122 C262 130 246 152 240 180 C232 218 218 238 196 246 Z"
|
|
3704
|
-
],
|
|
3705
|
-
/** A vein of light along each leaf (dashed, it drifts slowly when animated). */
|
|
3706
|
-
veins: "M122 142 C128 196 156 232 192 248 M278 142 C272 196 244 232 208 248",
|
|
3707
|
-
vein: { color: "#fbf6ea", opacity: 0.45, width: 3, dash: "2 14" },
|
|
3708
|
-
/** The stem, from the junction down. */
|
|
3709
|
-
stem: "M200 244 L200 312",
|
|
3710
|
-
stroke: 30,
|
|
3711
|
-
gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yororis },
|
|
3712
|
-
/** The core's warm light: from the mark's sand (below) to a light sand (above). */
|
|
3713
|
-
coreGradient: { stops: [["0%", sand], ["100%", "#e6c993"]] },
|
|
3714
|
-
/** The core, held in the hollow of the leaves (not on the junction): the one who is listened to. It breathes. */
|
|
3715
|
-
core: { cx: 200, cy: 184, r: 32, inner: 11 },
|
|
3716
|
-
highlight: "#fbf6ea",
|
|
3717
|
-
/** The moment: one node on the orbit, that turns with it. */
|
|
3718
|
-
moment: { r: 9, at: [200, 40] },
|
|
3719
|
-
glow: { color: sage, opacity: 0.18 },
|
|
3720
|
-
/** The core's breathing shadow (web), in the core's warm sand. */
|
|
3721
|
-
pulse: { color: sand, low: 0.3, high: 0.6 },
|
|
3722
|
-
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
3723
|
-
ring: { r: 134, width: 1 }
|
|
3724
|
-
};
|
|
3725
|
-
|
|
3726
|
-
// src/native/YororisMark.tsx
|
|
3727
|
-
import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3728
|
-
function YororisMark({ size = 48, animated = true, title, neutral }) {
|
|
3729
|
-
const { theme } = useTheme();
|
|
3730
|
-
const { Animated: Animated25, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
|
|
3731
|
-
const id = useSvgId("yrm");
|
|
3732
|
-
const viewBox = size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox;
|
|
3733
|
-
const stroke = neutral ?? theme.textMuted;
|
|
3734
|
-
const gradient = /* @__PURE__ */ jsx41(LinearGradient9, { 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__ */ jsx41(Stop9, { offset, stopColor: color }, offset)) });
|
|
3735
|
-
const fill = `url(#${id}a)`;
|
|
3736
|
-
return /* @__PURE__ */ jsxs37(View36, { style: { width: size, height: size }, ...markA11y(title), children: [
|
|
3737
|
-
/* @__PURE__ */ jsxs37(Svg19, { viewBox, style: layer, children: [
|
|
3738
|
-
/* @__PURE__ */ jsxs37(Defs9, { children: [
|
|
3739
|
-
/* @__PURE__ */ jsxs37(RadialGradient6, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
|
|
3740
|
-
/* @__PURE__ */ jsx41(Stop9, { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
|
|
3741
|
-
/* @__PURE__ */ jsx41(Stop9, { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: 0 })
|
|
3742
|
-
] }),
|
|
3743
|
-
gradient
|
|
3744
|
-
] }),
|
|
3745
|
-
size >= 48 ? /* @__PURE__ */ jsx41(Circle10, { cx: YORORIS.center, cy: YORORIS.center, r: 190, fill: `url(#${id}g)` }) : null,
|
|
3746
|
-
/* @__PURE__ */ jsx41(Circle10, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke, strokeWidth: YORORIS.ring.width, opacity: 0.35, fill: "none" }),
|
|
3747
|
-
/* @__PURE__ */ jsx41(Path16, { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round", fill: "none" }),
|
|
3748
|
-
YORORIS.leaves.map((d) => /* @__PURE__ */ jsx41(Path16, { d, fill }, d)),
|
|
3749
|
-
/* @__PURE__ */ jsx41(Path16, { d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash, fill: "none" })
|
|
3750
|
-
] }),
|
|
3751
|
-
/* @__PURE__ */ jsx41(Animated25.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs37(Svg19, { viewBox, style: layer, children: [
|
|
3752
|
-
/* @__PURE__ */ jsx41(Defs9, { children: gradient }),
|
|
3753
|
-
/* @__PURE__ */ jsx41(Circle10, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke, strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: 0.6, fill: "none" }),
|
|
3754
|
-
/* @__PURE__ */ jsx41(Circle10, { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
|
|
3755
|
-
] }) }),
|
|
3756
|
-
/* @__PURE__ */ jsx41(Animated25.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs37(Svg19, { viewBox, style: layer, children: [
|
|
3757
|
-
/* @__PURE__ */ jsx41(Defs9, { children: /* @__PURE__ */ jsx41(LinearGradient9, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx41(Stop9, { offset, stopColor: color }, offset)) }) }),
|
|
3758
|
-
/* @__PURE__ */ jsx41(Circle10, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id}c)` }),
|
|
3759
|
-
/* @__PURE__ */ jsx41(Circle10, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
|
|
3760
|
-
] }) })
|
|
3761
|
-
] });
|
|
3762
|
-
}
|
|
3763
|
-
|
|
3764
|
-
// src/native/ProductMark.tsx
|
|
3765
|
-
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
3766
|
-
function ProductMark({ id, ...props }) {
|
|
3767
|
-
if (id === "krizaka") return /* @__PURE__ */ jsx42(KrizakaMark, { ...props });
|
|
3768
|
-
if (id === "orazaka") return /* @__PURE__ */ jsx42(OrazakaMark, { ...props });
|
|
3769
|
-
if (id === "yazakia") return /* @__PURE__ */ jsx42(YazakiaMark, { ...props });
|
|
3770
|
-
if (id === "yororis") return /* @__PURE__ */ jsx42(YororisMark, { ...props });
|
|
3771
|
-
return /* @__PURE__ */ jsx42(OrochiaMark, { ...props });
|
|
3772
|
-
}
|
|
3773
|
-
|
|
3774
3776
|
// src/native/profile-card.tsx
|
|
3775
3777
|
import * as React31 from "react";
|
|
3776
3778
|
import { Animated as Animated17, StyleSheet as StyleSheet33, View as View37 } from "react-native";
|
|
@@ -3940,30 +3942,60 @@ var styles34 = StyleSheet34.create({
|
|
|
3940
3942
|
});
|
|
3941
3943
|
|
|
3942
3944
|
// src/native/pull-to-refresh.tsx
|
|
3943
|
-
import
|
|
3944
|
-
import {
|
|
3945
|
+
import * as React33 from "react";
|
|
3946
|
+
import { AccessibilityInfo as AccessibilityInfo13, Animated as Animated19, RefreshControl, StyleSheet as StyleSheet35, View as View39 } from "react-native";
|
|
3947
|
+
import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
3945
3948
|
function PullToRefresh({ label, ...props }) {
|
|
3946
3949
|
const { theme } = useTheme();
|
|
3947
3950
|
return /* @__PURE__ */ jsx45(RefreshControl, { ...props, tintColor: theme.accent, colors: [theme.accent], progressBackgroundColor: theme.surface2, title: label, titleColor: theme.textSecondary });
|
|
3948
3951
|
}
|
|
3952
|
+
var pullProgress = (offset, threshold) => Math.min(1, Math.max(0, -offset / threshold));
|
|
3953
|
+
function BrandedRefresh({ product, refreshing, onRefresh, label, children, threshold = 72 }) {
|
|
3954
|
+
const { theme } = useTheme();
|
|
3955
|
+
const reduce = useReducedMotion();
|
|
3956
|
+
const [pull] = React33.useState(() => new Animated19.Value(0));
|
|
3957
|
+
React33.useEffect(() => {
|
|
3958
|
+
if (refreshing) AccessibilityInfo13.announceForAccessibility(label);
|
|
3959
|
+
}, [refreshing, label]);
|
|
3960
|
+
const onScroll = React33.useCallback(
|
|
3961
|
+
(event) => pull.setValue(pullProgress(event.nativeEvent.contentOffset.y, threshold)),
|
|
3962
|
+
[pull, threshold]
|
|
3963
|
+
);
|
|
3964
|
+
const shown = refreshing ? 1 : pull;
|
|
3965
|
+
const scale = refreshing || reduce ? 1 : pull.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] });
|
|
3966
|
+
const rotate = refreshing || reduce ? "0deg" : pull.interpolate({ inputRange: [0, 1], outputRange: ["-90deg", "0deg"] });
|
|
3967
|
+
return /* @__PURE__ */ jsxs40(View39, { style: styles35.root, children: [
|
|
3968
|
+
children({
|
|
3969
|
+
// The platform's control does the gesture and the haptics, drawn transparent: the mark is ours.
|
|
3970
|
+
refreshControl: /* @__PURE__ */ jsx45(RefreshControl, { refreshing, onRefresh, tintColor: "transparent", colors: ["transparent"], progressBackgroundColor: "transparent" }),
|
|
3971
|
+
onScroll,
|
|
3972
|
+
scrollEventThrottle: 16
|
|
3973
|
+
}),
|
|
3974
|
+
/* @__PURE__ */ jsx45(Animated19.View, { pointerEvents: "none", "aria-hidden": true, style: [styles35.mark, { opacity: shown, transform: [{ scale }, { rotate }] }], children: /* @__PURE__ */ jsx45(ProductMark, { id: product, size: 32, animated: refreshing, neutral: theme.textMuted }) })
|
|
3975
|
+
] });
|
|
3976
|
+
}
|
|
3977
|
+
var styles35 = StyleSheet35.create({
|
|
3978
|
+
root: { flex: 1 },
|
|
3979
|
+
mark: { position: "absolute", top: 12, left: 0, right: 0, alignItems: "center" }
|
|
3980
|
+
});
|
|
3949
3981
|
|
|
3950
3982
|
// src/native/radio-group.tsx
|
|
3951
|
-
import * as
|
|
3952
|
-
import { Animated as
|
|
3983
|
+
import * as React34 from "react";
|
|
3984
|
+
import { Animated as Animated20, Pressable as Pressable18, StyleSheet as StyleSheet36, Text as Text15, View as View40 } from "react-native";
|
|
3953
3985
|
import Svg21, { Path as Path17 } from "react-native-svg";
|
|
3954
|
-
import { jsx as jsx46, jsxs as
|
|
3986
|
+
import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
3955
3987
|
function Check({ color }) {
|
|
3956
3988
|
return /* @__PURE__ */ jsx46(Svg21, { 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__ */ jsx46(Path17, { d: "M20 6 9 17l-5-5" }) });
|
|
3957
3989
|
}
|
|
3958
3990
|
function Key({ option, checked, disabled, onPress }) {
|
|
3959
3991
|
const { theme, radius: radius3, motion: motion3 } = useTheme();
|
|
3960
|
-
const [held, setHeld] =
|
|
3961
|
-
const [sink] =
|
|
3992
|
+
const [held, setHeld] = React34.useState(false);
|
|
3993
|
+
const [sink] = React34.useState(() => new Animated20.Value(checked ? 1 : 0));
|
|
3962
3994
|
const down = checked || held;
|
|
3963
|
-
|
|
3964
|
-
|
|
3995
|
+
React34.useEffect(() => {
|
|
3996
|
+
Animated20.timing(sink, { toValue: down ? 1 : 0, duration: motion3.duration.fast, useNativeDriver: true }).start();
|
|
3965
3997
|
}, [down, sink, motion3.duration.fast]);
|
|
3966
|
-
return /* @__PURE__ */
|
|
3998
|
+
return /* @__PURE__ */ jsxs41(
|
|
3967
3999
|
Pressable18,
|
|
3968
4000
|
{
|
|
3969
4001
|
role: "radio",
|
|
@@ -3974,14 +4006,14 @@ function Key({ option, checked, disabled, onPress }) {
|
|
|
3974
4006
|
onPress,
|
|
3975
4007
|
onPressIn: () => setHeld(true),
|
|
3976
4008
|
onPressOut: () => setHeld(false),
|
|
3977
|
-
style: [
|
|
4009
|
+
style: [styles36.keySlot, disabled ? styles36.disabled : null],
|
|
3978
4010
|
children: [
|
|
3979
|
-
/* @__PURE__ */ jsx46(
|
|
3980
|
-
/* @__PURE__ */
|
|
3981
|
-
|
|
4011
|
+
/* @__PURE__ */ jsx46(View40, { style: [styles36.ledge, { borderRadius: radius3.lg, backgroundColor: checked ? theme.accentHover : theme.borderStrong }] }),
|
|
4012
|
+
/* @__PURE__ */ jsxs41(
|
|
4013
|
+
Animated20.View,
|
|
3982
4014
|
{
|
|
3983
4015
|
style: [
|
|
3984
|
-
|
|
4016
|
+
styles36.key,
|
|
3985
4017
|
{
|
|
3986
4018
|
borderRadius: radius3.lg,
|
|
3987
4019
|
backgroundColor: checked ? theme.accent : theme.surface2,
|
|
@@ -3990,8 +4022,8 @@ function Key({ option, checked, disabled, onPress }) {
|
|
|
3990
4022
|
}
|
|
3991
4023
|
],
|
|
3992
4024
|
children: [
|
|
3993
|
-
/* @__PURE__ */ jsx46(Text15, { style: [
|
|
3994
|
-
option.hint ? /* @__PURE__ */ jsx46(Text15, { style: [
|
|
4025
|
+
/* @__PURE__ */ jsx46(Text15, { style: [styles36.keyLabel, { color: checked ? theme.onAccent : theme.textPrimary }], children: option.label }),
|
|
4026
|
+
option.hint ? /* @__PURE__ */ jsx46(Text15, { style: [styles36.keyHint, { color: checked ? theme.onAccent : theme.textSecondary }], children: option.hint }) : null
|
|
3995
4027
|
]
|
|
3996
4028
|
}
|
|
3997
4029
|
)
|
|
@@ -4001,7 +4033,7 @@ function Key({ option, checked, disabled, onPress }) {
|
|
|
4001
4033
|
}
|
|
4002
4034
|
function RadioGroup({ label, options, value: valueProp, defaultValue = null, onValueChange, variant = "list", error, disabled, style }) {
|
|
4003
4035
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
4004
|
-
const [own, setOwn] =
|
|
4036
|
+
const [own, setOwn] = React34.useState(defaultValue);
|
|
4005
4037
|
const value = valueProp !== void 0 ? valueProp : own;
|
|
4006
4038
|
const pick = (v) => {
|
|
4007
4039
|
haptic(variant === "buttons" ? "impact" : "selection");
|
|
@@ -4023,13 +4055,13 @@ function RadioGroup({ label, options, value: valueProp, defaultValue = null, onV
|
|
|
4023
4055
|
"aria-disabled": off || void 0,
|
|
4024
4056
|
disabled: off,
|
|
4025
4057
|
onPress: () => pick(o.value),
|
|
4026
|
-
style: [
|
|
4027
|
-
children: /* @__PURE__ */ jsx46(Text15, { numberOfLines: 1, style: [
|
|
4058
|
+
style: [styles36.segment, { borderRadius: radius3.md }, checked ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null, off ? styles36.disabled : null],
|
|
4059
|
+
children: /* @__PURE__ */ jsx46(Text15, { numberOfLines: 1, style: [styles36.segmentLabel, { color: checked ? theme.textPrimary : theme.textSecondary }], children: o.label })
|
|
4028
4060
|
},
|
|
4029
4061
|
o.value
|
|
4030
4062
|
);
|
|
4031
4063
|
if (variant === "cards")
|
|
4032
|
-
return /* @__PURE__ */
|
|
4064
|
+
return /* @__PURE__ */ jsxs41(
|
|
4033
4065
|
Pressable18,
|
|
4034
4066
|
{
|
|
4035
4067
|
role: "radio",
|
|
@@ -4039,40 +4071,40 @@ function RadioGroup({ label, options, value: valueProp, defaultValue = null, onV
|
|
|
4039
4071
|
disabled: off,
|
|
4040
4072
|
onPress: () => pick(o.value),
|
|
4041
4073
|
style: ({ pressed }) => [
|
|
4042
|
-
|
|
4074
|
+
styles36.card,
|
|
4043
4075
|
{ borderRadius: radius3.xl, backgroundColor: checked ? theme.accentSoft : theme.surface1, borderColor: checked ? theme.accent : theme.borderDefault, transform: [{ scale: pressed ? 0.98 : 1 }] },
|
|
4044
|
-
off ?
|
|
4076
|
+
off ? styles36.disabled : null
|
|
4045
4077
|
],
|
|
4046
4078
|
children: [
|
|
4047
|
-
/* @__PURE__ */ jsx46(
|
|
4048
|
-
/* @__PURE__ */ jsx46(Text15, { style: [
|
|
4049
|
-
o.description ? /* @__PURE__ */ jsx46(Text15, { style: [
|
|
4079
|
+
/* @__PURE__ */ jsx46(View40, { style: [styles36.cardCheck, { borderColor: checked ? theme.accent : theme.borderStrong, backgroundColor: checked ? theme.accent : theme.surface1 }], children: checked ? /* @__PURE__ */ jsx46(Check, { color: theme.onAccent }) : null }),
|
|
4080
|
+
/* @__PURE__ */ jsx46(Text15, { style: [styles36.cardLabel, { color: theme.textPrimary }], children: o.label }),
|
|
4081
|
+
o.description ? /* @__PURE__ */ jsx46(Text15, { style: [styles36.cardDescription, { color: theme.textSecondary }], children: o.description }) : null
|
|
4050
4082
|
]
|
|
4051
4083
|
},
|
|
4052
4084
|
o.value
|
|
4053
4085
|
);
|
|
4054
|
-
return /* @__PURE__ */
|
|
4055
|
-
/* @__PURE__ */ jsx46(
|
|
4056
|
-
/* @__PURE__ */
|
|
4057
|
-
/* @__PURE__ */ jsx46(Text15, { style: [
|
|
4058
|
-
o.description ? /* @__PURE__ */ jsx46(Text15, { style: [
|
|
4086
|
+
return /* @__PURE__ */ jsxs41(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: [
|
|
4087
|
+
/* @__PURE__ */ jsx46(View40, { style: [styles36.dot, { borderColor: checked ? theme.accent : theme.borderStrong, backgroundColor: checked ? theme.accent : theme.surface1 }], children: checked ? /* @__PURE__ */ jsx46(View40, { style: [styles36.dotIn, { backgroundColor: theme.onAccent }] }) : null }),
|
|
4088
|
+
/* @__PURE__ */ jsxs41(View40, { style: styles36.rowText, children: [
|
|
4089
|
+
/* @__PURE__ */ jsx46(Text15, { style: [styles36.rowLabel, { color: theme.textPrimary }], children: o.label }),
|
|
4090
|
+
o.description ? /* @__PURE__ */ jsx46(Text15, { style: [styles36.cardDescription, { color: theme.textSecondary }], children: o.description }) : null
|
|
4059
4091
|
] })
|
|
4060
4092
|
] }, o.value);
|
|
4061
4093
|
});
|
|
4062
|
-
return /* @__PURE__ */
|
|
4094
|
+
return /* @__PURE__ */ jsxs41(View40, { style: [styles36.root, style], children: [
|
|
4063
4095
|
/* @__PURE__ */ jsx46(
|
|
4064
|
-
|
|
4096
|
+
View40,
|
|
4065
4097
|
{
|
|
4066
4098
|
role: "radiogroup",
|
|
4067
4099
|
"aria-label": label,
|
|
4068
|
-
style: variant === "segmented" ? [
|
|
4100
|
+
style: variant === "segmented" ? [styles36.track, { borderRadius: radius3.lg, backgroundColor: theme.surface2, borderColor: error ? theme.danger : theme.borderDefault }] : variant === "buttons" ? styles36.keys : variant === "cards" ? styles36.cards : styles36.list,
|
|
4069
4101
|
children: body
|
|
4070
4102
|
}
|
|
4071
4103
|
),
|
|
4072
|
-
error ? /* @__PURE__ */ jsx46(Text15, { role: "alert", "aria-live": "polite", style: [
|
|
4104
|
+
error ? /* @__PURE__ */ jsx46(Text15, { role: "alert", "aria-live": "polite", style: [styles36.error, { color: theme.dangerText }], children: error }) : null
|
|
4073
4105
|
] });
|
|
4074
4106
|
}
|
|
4075
|
-
var
|
|
4107
|
+
var styles36 = StyleSheet36.create({
|
|
4076
4108
|
root: { gap: 6, alignSelf: "stretch" },
|
|
4077
4109
|
list: { gap: 2 },
|
|
4078
4110
|
row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 44 },
|
|
@@ -4091,49 +4123,49 @@ var styles35 = StyleSheet35.create({
|
|
|
4091
4123
|
key: { minHeight: 48, paddingHorizontal: 16, paddingVertical: 8, alignItems: "center", justifyContent: "center", gap: 1, borderWidth: 1 },
|
|
4092
4124
|
keyLabel: { fontSize: 15, fontWeight: "700" },
|
|
4093
4125
|
keyHint: { fontSize: 11, fontWeight: "500" },
|
|
4094
|
-
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth:
|
|
4095
|
-
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth:
|
|
4126
|
+
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet36.hairlineWidth, height: 42 },
|
|
4127
|
+
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet36.hairlineWidth, borderColor: "transparent" },
|
|
4096
4128
|
segmentLabel: { fontSize: 13, fontWeight: "600" },
|
|
4097
4129
|
error: { fontSize: 12, lineHeight: 16 },
|
|
4098
4130
|
disabled: { opacity: 0.4 }
|
|
4099
4131
|
});
|
|
4100
4132
|
|
|
4101
4133
|
// src/native/screen.tsx
|
|
4102
|
-
import { KeyboardAvoidingView, Platform as Platform3, ScrollView as ScrollView6, StyleSheet as
|
|
4103
|
-
import { Fragment as Fragment7, jsx as jsx47, jsxs as
|
|
4134
|
+
import { KeyboardAvoidingView, Platform as Platform3, ScrollView as ScrollView6, StyleSheet as StyleSheet37, View as View41 } from "react-native";
|
|
4135
|
+
import { Fragment as Fragment7, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
4104
4136
|
function Screen({ header, footer, children, scroll = true, keyboard = true, padding = 16, surface = "surface0", contentStyle }) {
|
|
4105
4137
|
const { theme, insets } = useTheme();
|
|
4106
|
-
const body = scroll ? /* @__PURE__ */ jsx47(ScrollView6, { style:
|
|
4107
|
-
const inner = /* @__PURE__ */
|
|
4138
|
+
const body = scroll ? /* @__PURE__ */ jsx47(ScrollView6, { style: styles37.flex, contentContainerStyle: [{ padding, paddingTop: header ? padding : padding + insets.top, gap: 16 }, contentStyle], keyboardShouldPersistTaps: "handled", tabIndex: 0, children }) : /* @__PURE__ */ jsx47(View41, { style: [styles37.flex, { paddingTop: header ? 0 : insets.top }, contentStyle], children });
|
|
4139
|
+
const inner = /* @__PURE__ */ jsxs42(Fragment7, { children: [
|
|
4108
4140
|
header,
|
|
4109
4141
|
body,
|
|
4110
4142
|
footer
|
|
4111
4143
|
] });
|
|
4112
|
-
return /* @__PURE__ */ jsx47(
|
|
4144
|
+
return /* @__PURE__ */ jsx47(View41, { style: [styles37.flex, { backgroundColor: theme[surface] }], children: keyboard ? /* @__PURE__ */ jsx47(KeyboardAvoidingView, { style: styles37.flex, behavior: Platform3.OS === "ios" ? "padding" : void 0, children: inner }) : inner });
|
|
4113
4145
|
}
|
|
4114
|
-
var
|
|
4146
|
+
var styles37 = StyleSheet37.create({ flex: { flex: 1 } });
|
|
4115
4147
|
|
|
4116
4148
|
// src/native/search-field.tsx
|
|
4117
|
-
import * as
|
|
4118
|
-
import { Pressable as Pressable19, StyleSheet as
|
|
4149
|
+
import * as React35 from "react";
|
|
4150
|
+
import { Pressable as Pressable19, StyleSheet as StyleSheet38, TextInput as TextInput6, View as View42 } from "react-native";
|
|
4119
4151
|
import Svg22, { Circle as Circle12, Path as Path18 } from "react-native-svg";
|
|
4120
|
-
import { jsx as jsx48, jsxs as
|
|
4152
|
+
import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
4121
4153
|
function SearchField({ label, value, defaultValue = "", onValueChange, onSearch, debounce = 300, onSubmit, clearLabel, cancelLabel, onCancel, style, placeholder, onFocus, onBlur, ...props }) {
|
|
4122
|
-
const [focused, setFocused] =
|
|
4123
|
-
const input =
|
|
4154
|
+
const [focused, setFocused] = React35.useState(false);
|
|
4155
|
+
const input = React35.useRef(null);
|
|
4124
4156
|
const { theme, radius: radius3 } = useTheme();
|
|
4125
|
-
const [own, setOwn] =
|
|
4157
|
+
const [own, setOwn] = React35.useState(defaultValue);
|
|
4126
4158
|
const query = value ?? own;
|
|
4127
|
-
const timer2 =
|
|
4128
|
-
|
|
4159
|
+
const timer2 = React35.useRef(void 0);
|
|
4160
|
+
React35.useEffect(() => () => clearTimeout(timer2.current), []);
|
|
4129
4161
|
const change = (next) => {
|
|
4130
4162
|
if (value === void 0) setOwn(next);
|
|
4131
4163
|
onValueChange?.(next);
|
|
4132
4164
|
clearTimeout(timer2.current);
|
|
4133
4165
|
if (onSearch) timer2.current = setTimeout(() => onSearch(next), debounce);
|
|
4134
4166
|
};
|
|
4135
|
-
const field = /* @__PURE__ */
|
|
4136
|
-
/* @__PURE__ */
|
|
4167
|
+
const field = /* @__PURE__ */ jsxs43(View42, { style: [styles38.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
|
|
4168
|
+
/* @__PURE__ */ jsxs43(Svg22, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
|
|
4137
4169
|
/* @__PURE__ */ jsx48(Circle12, { cx: 11, cy: 11, r: 7 }),
|
|
4138
4170
|
/* @__PURE__ */ jsx48(Path18, { d: "m20 20-3.5-3.5" })
|
|
4139
4171
|
] }),
|
|
@@ -4156,7 +4188,7 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
|
|
|
4156
4188
|
onSearch?.(query);
|
|
4157
4189
|
onSubmit?.(query);
|
|
4158
4190
|
},
|
|
4159
|
-
style: [
|
|
4191
|
+
style: [styles38.input, { color: theme.textPrimary }],
|
|
4160
4192
|
onFocus: (e) => {
|
|
4161
4193
|
setFocused(true);
|
|
4162
4194
|
onFocus?.(e);
|
|
@@ -4168,11 +4200,11 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
|
|
|
4168
4200
|
...props
|
|
4169
4201
|
}
|
|
4170
4202
|
),
|
|
4171
|
-
query ? /* @__PURE__ */ jsx48(Pressable19, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style:
|
|
4203
|
+
query ? /* @__PURE__ */ jsx48(Pressable19, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles38.clear, children: /* @__PURE__ */ jsx48(Svg22, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx48(Path18, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
|
|
4172
4204
|
] });
|
|
4173
4205
|
if (!cancelLabel || !onCancel) return field;
|
|
4174
|
-
return /* @__PURE__ */
|
|
4175
|
-
/* @__PURE__ */ jsx48(
|
|
4206
|
+
return /* @__PURE__ */ jsxs43(View42, { style: styles38.bar, children: [
|
|
4207
|
+
/* @__PURE__ */ jsx48(View42, { style: styles38.grow, children: field }),
|
|
4176
4208
|
focused || query ? /* @__PURE__ */ jsx48(
|
|
4177
4209
|
Pressable19,
|
|
4178
4210
|
{
|
|
@@ -4183,14 +4215,14 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
|
|
|
4183
4215
|
onCancel();
|
|
4184
4216
|
},
|
|
4185
4217
|
hitSlop: 8,
|
|
4186
|
-
style:
|
|
4218
|
+
style: styles38.cancel,
|
|
4187
4219
|
children: /* @__PURE__ */ jsx48(Txt, { variant: "label", tone: "accent", children: cancelLabel })
|
|
4188
4220
|
}
|
|
4189
4221
|
) : null
|
|
4190
4222
|
] });
|
|
4191
4223
|
}
|
|
4192
|
-
var
|
|
4193
|
-
frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth:
|
|
4224
|
+
var styles38 = StyleSheet38.create({
|
|
4225
|
+
frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet38.hairlineWidth },
|
|
4194
4226
|
input: { flex: 1, height: "100%", fontSize: 15, paddingVertical: 0 },
|
|
4195
4227
|
bar: { flexDirection: "row", alignItems: "center", gap: 10 },
|
|
4196
4228
|
grow: { flex: 1 },
|
|
@@ -4199,16 +4231,16 @@ var styles37 = StyleSheet37.create({
|
|
|
4199
4231
|
});
|
|
4200
4232
|
|
|
4201
4233
|
// src/native/segmented.tsx
|
|
4202
|
-
import { Pressable as Pressable20, StyleSheet as
|
|
4234
|
+
import { Pressable as Pressable20, StyleSheet as StyleSheet39, Text as Text16, View as View43 } from "react-native";
|
|
4203
4235
|
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
4204
4236
|
function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
|
|
4205
4237
|
const { theme, radius: radius3 } = useTheme();
|
|
4206
4238
|
return /* @__PURE__ */ jsx49(
|
|
4207
|
-
|
|
4239
|
+
View43,
|
|
4208
4240
|
{
|
|
4209
4241
|
role: "tablist",
|
|
4210
4242
|
"aria-label": label,
|
|
4211
|
-
style: [
|
|
4243
|
+
style: [styles39.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
|
|
4212
4244
|
children: options.map((option) => {
|
|
4213
4245
|
const selected = option.value === value;
|
|
4214
4246
|
return /* @__PURE__ */ jsx49(
|
|
@@ -4222,12 +4254,12 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
|
|
|
4222
4254
|
if (!selected) onValueChange(option.value);
|
|
4223
4255
|
},
|
|
4224
4256
|
style: [
|
|
4225
|
-
|
|
4257
|
+
styles39.segment,
|
|
4226
4258
|
{ borderRadius: radius3.sm },
|
|
4227
4259
|
selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
|
|
4228
|
-
option.disabled ?
|
|
4260
|
+
option.disabled ? styles39.disabled : null
|
|
4229
4261
|
],
|
|
4230
|
-
children: /* @__PURE__ */ jsx49(Text16, { numberOfLines: 1, style: [
|
|
4262
|
+
children: /* @__PURE__ */ jsx49(Text16, { numberOfLines: 1, style: [styles39.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
|
|
4231
4263
|
},
|
|
4232
4264
|
option.value
|
|
4233
4265
|
);
|
|
@@ -4235,16 +4267,16 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
|
|
|
4235
4267
|
}
|
|
4236
4268
|
);
|
|
4237
4269
|
}
|
|
4238
|
-
var
|
|
4239
|
-
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth:
|
|
4240
|
-
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth:
|
|
4270
|
+
var styles39 = StyleSheet39.create({
|
|
4271
|
+
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet39.hairlineWidth },
|
|
4272
|
+
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet39.hairlineWidth, borderColor: "transparent" },
|
|
4241
4273
|
label: { fontWeight: "600" },
|
|
4242
4274
|
disabled: { opacity: 0.4 }
|
|
4243
4275
|
});
|
|
4244
4276
|
|
|
4245
4277
|
// src/native/skeleton.tsx
|
|
4246
|
-
import * as
|
|
4247
|
-
import { Animated as
|
|
4278
|
+
import * as React36 from "react";
|
|
4279
|
+
import { Animated as Animated21 } from "react-native";
|
|
4248
4280
|
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
4249
4281
|
var SHAPE = {
|
|
4250
4282
|
text: { width: "100%", height: 12, radius: 4 },
|
|
@@ -4254,13 +4286,13 @@ var SHAPE = {
|
|
|
4254
4286
|
function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
4255
4287
|
const { theme } = useTheme();
|
|
4256
4288
|
const reduce = useReducedMotion();
|
|
4257
|
-
const [opacity] =
|
|
4258
|
-
|
|
4289
|
+
const [opacity] = React36.useState(() => new Animated21.Value(1));
|
|
4290
|
+
React36.useEffect(() => {
|
|
4259
4291
|
if (reduce) return;
|
|
4260
|
-
const loop =
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4292
|
+
const loop = Animated21.loop(
|
|
4293
|
+
Animated21.sequence([
|
|
4294
|
+
Animated21.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
|
|
4295
|
+
Animated21.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
|
|
4264
4296
|
])
|
|
4265
4297
|
);
|
|
4266
4298
|
loop.start();
|
|
@@ -4272,7 +4304,7 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
|
4272
4304
|
const s = SHAPE[shape];
|
|
4273
4305
|
const side = shape === "circle" ? width ?? height ?? s.width : void 0;
|
|
4274
4306
|
return /* @__PURE__ */ jsx50(
|
|
4275
|
-
|
|
4307
|
+
Animated21.View,
|
|
4276
4308
|
{
|
|
4277
4309
|
testID,
|
|
4278
4310
|
"aria-hidden": true,
|
|
@@ -4285,10 +4317,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
|
4285
4317
|
}
|
|
4286
4318
|
|
|
4287
4319
|
// src/native/slider.tsx
|
|
4288
|
-
import * as
|
|
4289
|
-
import { PanResponder as PanResponder2, StyleSheet as
|
|
4320
|
+
import * as React37 from "react";
|
|
4321
|
+
import { PanResponder as PanResponder2, StyleSheet as StyleSheet40, Text as Text17, View as View44 } from "react-native";
|
|
4290
4322
|
import Svg23, { Defs as Defs11, LinearGradient as LinearGradient11, Rect as Rect4, Stop as Stop11 } from "react-native-svg";
|
|
4291
|
-
import { jsx as jsx51, jsxs as
|
|
4323
|
+
import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
4292
4324
|
var THUMB = 26;
|
|
4293
4325
|
var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : [...v];
|
|
4294
4326
|
function Slider({
|
|
@@ -4314,20 +4346,20 @@ function Slider({
|
|
|
4314
4346
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
4315
4347
|
const range = Array.isArray(value ?? defaultValue);
|
|
4316
4348
|
const vertical = orientation === "vertical";
|
|
4317
|
-
const [inner, setInner] =
|
|
4349
|
+
const [inner, setInner] = React37.useState(() => toArray(defaultValue) ?? [min]);
|
|
4318
4350
|
const current = toArray(value) ?? inner;
|
|
4319
|
-
const [length, setLength] =
|
|
4320
|
-
const [dragging, setDragging] =
|
|
4351
|
+
const [length, setLength] = React37.useState(0);
|
|
4352
|
+
const [dragging, setDragging] = React37.useState(null);
|
|
4321
4353
|
const gradientId = useSvgId("kzs");
|
|
4322
4354
|
const out = (next) => range ? [next[0], next[1]] : next[0];
|
|
4323
4355
|
const snap = (v) => Math.min(max, Math.max(min, Math.round((v - min) / step) * step + min));
|
|
4324
4356
|
const pct = (v) => (v - min) / (max - min || 1);
|
|
4325
|
-
const live =
|
|
4326
|
-
|
|
4357
|
+
const live = React37.useRef({ current, length, vertical, disabled });
|
|
4358
|
+
React37.useLayoutEffect(() => {
|
|
4327
4359
|
live.current = { current, length, vertical, disabled };
|
|
4328
4360
|
});
|
|
4329
|
-
const active =
|
|
4330
|
-
const start =
|
|
4361
|
+
const active = React37.useRef(0);
|
|
4362
|
+
const start = React37.useRef(0);
|
|
4331
4363
|
const set = (next) => {
|
|
4332
4364
|
if (value === void 0) setInner(next);
|
|
4333
4365
|
onValueChange?.(out(next));
|
|
@@ -4348,11 +4380,11 @@ function Slider({
|
|
|
4348
4380
|
return min + p * (max - min);
|
|
4349
4381
|
};
|
|
4350
4382
|
const commit = () => onValueCommit?.(out(live.current.current));
|
|
4351
|
-
const handlers =
|
|
4352
|
-
|
|
4383
|
+
const handlers = React37.useRef({ move, at, commit });
|
|
4384
|
+
React37.useLayoutEffect(() => {
|
|
4353
4385
|
handlers.current = { move, at, commit };
|
|
4354
4386
|
});
|
|
4355
|
-
const [responder] =
|
|
4387
|
+
const [responder] = React37.useState(
|
|
4356
4388
|
() => PanResponder2.create({
|
|
4357
4389
|
onStartShouldSetPanResponder: () => !live.current.disabled,
|
|
4358
4390
|
onMoveShouldSetPanResponder: () => !live.current.disabled,
|
|
@@ -4380,24 +4412,24 @@ function Slider({
|
|
|
4380
4412
|
const along = (p) => vertical ? { bottom: p * length } : { left: p * length };
|
|
4381
4413
|
const onLayout = (e) => setLength(vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width);
|
|
4382
4414
|
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 };
|
|
4383
|
-
return /* @__PURE__ */
|
|
4384
|
-
showLabel ? /* @__PURE__ */
|
|
4385
|
-
/* @__PURE__ */ jsx51(Text17, { style: [
|
|
4386
|
-
/* @__PURE__ */ jsx51(Text17, { "aria-hidden": true, style: [
|
|
4415
|
+
return /* @__PURE__ */ jsxs44(View44, { style: [styles40.root, vertical ? styles40.rootVertical : null, disabled ? styles40.disabled : null, style], children: [
|
|
4416
|
+
showLabel ? /* @__PURE__ */ jsxs44(View44, { style: styles40.header, children: [
|
|
4417
|
+
/* @__PURE__ */ jsx51(Text17, { style: [styles40.label, { color: theme.textSecondary }], children: label }),
|
|
4418
|
+
/* @__PURE__ */ jsx51(Text17, { "aria-hidden": true, style: [styles40.value, { color: theme.textSecondary }], children: current.map(formatValue).join(" \u2013 ") })
|
|
4387
4419
|
] }) : null,
|
|
4388
|
-
/* @__PURE__ */
|
|
4389
|
-
/* @__PURE__ */
|
|
4390
|
-
/* @__PURE__ */ jsx51(
|
|
4391
|
-
/* @__PURE__ */ jsx51(Defs11, { children: /* @__PURE__ */
|
|
4420
|
+
/* @__PURE__ */ jsxs44(View44, { ...responder.panHandlers, style: vertical ? styles40.controlVertical : styles40.control, children: [
|
|
4421
|
+
/* @__PURE__ */ jsxs44(View44, { onLayout, pointerEvents: "none", style: [vertical ? styles40.trackVertical : styles40.track, { borderRadius: radius3.full, backgroundColor: theme.surface3 }], children: [
|
|
4422
|
+
/* @__PURE__ */ jsx51(View44, { style: [styles40.fill, fill, { borderRadius: radius3.full, overflow: "hidden", backgroundColor: theme.accent }], children: tone3 === "gradient" ? /* @__PURE__ */ jsxs44(Svg23, { width: "100%", height: "100%", "aria-hidden": true, children: [
|
|
4423
|
+
/* @__PURE__ */ jsx51(Defs11, { children: /* @__PURE__ */ jsxs44(LinearGradient11, { id: gradientId, x1: "0", y1: vertical ? "1" : "0", x2: vertical ? "0" : "1", y2: "0", children: [
|
|
4392
4424
|
/* @__PURE__ */ jsx51(Stop11, { offset: "0", stopColor: theme.accent }),
|
|
4393
4425
|
/* @__PURE__ */ jsx51(Stop11, { offset: "1", stopColor: theme.accent2 })
|
|
4394
4426
|
] }) }),
|
|
4395
4427
|
/* @__PURE__ */ jsx51(Rect4, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
|
|
4396
4428
|
] }) : null }),
|
|
4397
|
-
tickValues.map((t) => /* @__PURE__ */ jsx51(
|
|
4429
|
+
tickValues.map((t) => /* @__PURE__ */ jsx51(View44, { style: [vertical ? styles40.tickVertical : styles40.tick, along(pct(t)), { backgroundColor: t > lo && t < hi ? theme.onAccent : theme.borderStrong }] }, t))
|
|
4398
4430
|
] }),
|
|
4399
4431
|
current.map((v, i) => /* @__PURE__ */ jsx51(
|
|
4400
|
-
|
|
4432
|
+
View44,
|
|
4401
4433
|
{
|
|
4402
4434
|
accessible: true,
|
|
4403
4435
|
role: "slider",
|
|
@@ -4416,16 +4448,16 @@ function Slider({
|
|
|
4416
4448
|
onValueCommit?.(out(values));
|
|
4417
4449
|
},
|
|
4418
4450
|
pointerEvents: "none",
|
|
4419
|
-
style: [
|
|
4420
|
-
children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */ jsx51(
|
|
4451
|
+
style: [styles40.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 }],
|
|
4452
|
+
children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */ jsx51(View44, { "aria-hidden": true, style: [vertical ? styles40.bubbleVertical : styles40.bubble, { backgroundColor: theme.textPrimary, borderRadius: radius3.md }], children: /* @__PURE__ */ jsx51(Text17, { style: [styles40.bubbleText, { color: theme.surface0 }], children: formatValue(v) }) }) : null
|
|
4421
4453
|
},
|
|
4422
4454
|
i
|
|
4423
4455
|
))
|
|
4424
4456
|
] }),
|
|
4425
|
-
marks2?.length && !vertical ? /* @__PURE__ */ jsx51(
|
|
4457
|
+
marks2?.length && !vertical ? /* @__PURE__ */ jsx51(View44, { "aria-hidden": true, style: styles40.marks, children: marks2.map((m) => /* @__PURE__ */ jsx51(Text17, { style: [styles40.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
|
|
4426
4458
|
] });
|
|
4427
4459
|
}
|
|
4428
|
-
var
|
|
4460
|
+
var styles40 = StyleSheet40.create({
|
|
4429
4461
|
root: { gap: 8, alignSelf: "stretch" },
|
|
4430
4462
|
rootVertical: { alignSelf: "flex-start", alignItems: "center" },
|
|
4431
4463
|
header: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
|
|
@@ -4478,23 +4510,60 @@ function Spinner({ label, size = "md", ...props }) {
|
|
|
4478
4510
|
);
|
|
4479
4511
|
}
|
|
4480
4512
|
|
|
4513
|
+
// src/native/splash-handoff.tsx
|
|
4514
|
+
import * as React38 from "react";
|
|
4515
|
+
import { Animated as Animated22, Easing as Easing12, StyleSheet as StyleSheet41, View as View45 } from "react-native";
|
|
4516
|
+
import { jsx as jsx53 } from "react/jsx-runtime";
|
|
4517
|
+
function SplashHandoff({ product, ready, onShown, onDone, size = 96, background, label, duration = 320, style }) {
|
|
4518
|
+
const { theme } = useTheme();
|
|
4519
|
+
const reduce = useReducedMotion();
|
|
4520
|
+
const [opacity] = React38.useState(() => new Animated22.Value(1));
|
|
4521
|
+
const [gone, setGone] = React38.useState(false);
|
|
4522
|
+
React38.useEffect(() => {
|
|
4523
|
+
if (!ready) return;
|
|
4524
|
+
const animation = Animated22.timing(opacity, { toValue: 0, duration: reduce ? 0 : duration, easing: Easing12.out(Easing12.ease), useNativeDriver: true });
|
|
4525
|
+
animation.start(({ finished }) => {
|
|
4526
|
+
if (finished) {
|
|
4527
|
+
setGone(true);
|
|
4528
|
+
onDone?.();
|
|
4529
|
+
}
|
|
4530
|
+
});
|
|
4531
|
+
return () => animation.stop();
|
|
4532
|
+
}, [ready, reduce, duration, opacity, onDone]);
|
|
4533
|
+
if (gone) return null;
|
|
4534
|
+
return /* @__PURE__ */ jsx53(
|
|
4535
|
+
Animated22.View,
|
|
4536
|
+
{
|
|
4537
|
+
accessible: true,
|
|
4538
|
+
role: "progressbar",
|
|
4539
|
+
"aria-label": label,
|
|
4540
|
+
"aria-busy": true,
|
|
4541
|
+
pointerEvents: ready ? "none" : "auto",
|
|
4542
|
+
onLayout: onShown,
|
|
4543
|
+
style: [StyleSheet41.absoluteFill, styles41.root, { backgroundColor: background ?? theme.surface0, opacity }, style],
|
|
4544
|
+
children: /* @__PURE__ */ jsx53(View45, { children: /* @__PURE__ */ jsx53(ProductMark, { id: product, size, animated: true }) })
|
|
4545
|
+
}
|
|
4546
|
+
);
|
|
4547
|
+
}
|
|
4548
|
+
var styles41 = StyleSheet41.create({ root: { alignItems: "center", justifyContent: "center", zIndex: 100 } });
|
|
4549
|
+
|
|
4481
4550
|
// src/native/step-progress.tsx
|
|
4482
|
-
import { Pressable as Pressable21, StyleSheet as
|
|
4551
|
+
import { Pressable as Pressable21, StyleSheet as StyleSheet42, View as View46 } from "react-native";
|
|
4483
4552
|
import Svg24, { Path as Path19 } from "react-native-svg";
|
|
4484
|
-
import { jsx as
|
|
4553
|
+
import { jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
4485
4554
|
function StepProgress({ step, total, label, backLabel, onBack, trailing, style }) {
|
|
4486
4555
|
const { theme, insets } = useTheme();
|
|
4487
4556
|
const words = label(step, total);
|
|
4488
|
-
return /* @__PURE__ */
|
|
4489
|
-
/* @__PURE__ */
|
|
4490
|
-
onBack && backLabel ? /* @__PURE__ */
|
|
4491
|
-
/* @__PURE__ */
|
|
4492
|
-
/* @__PURE__ */
|
|
4557
|
+
return /* @__PURE__ */ jsxs45(View46, { style: [styles42.root, { paddingTop: insets.top + 8 }, style], children: [
|
|
4558
|
+
/* @__PURE__ */ jsxs45(View46, { style: styles42.row, children: [
|
|
4559
|
+
onBack && backLabel ? /* @__PURE__ */ jsx54(Pressable21, { role: "button", "aria-label": backLabel, hitSlop: 10, onPress: onBack, style: styles42.back, children: /* @__PURE__ */ jsx54(Svg24, { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx54(Path19, { d: "M15 5l-7 7 7 7", stroke: theme.textPrimary, strokeWidth: 2.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : /* @__PURE__ */ jsx54(View46, { style: styles42.back }),
|
|
4560
|
+
/* @__PURE__ */ jsx54(View46, { accessible: true, role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, style: styles42.bars, children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx54(View46, { style: [styles42.bar, { backgroundColor: i < step ? theme.accent : theme.surface3 }] }, i)) }),
|
|
4561
|
+
/* @__PURE__ */ jsx54(View46, { style: styles42.trailing, children: trailing })
|
|
4493
4562
|
] }),
|
|
4494
|
-
/* @__PURE__ */
|
|
4563
|
+
/* @__PURE__ */ jsx54(Txt, { variant: "caption", tone: "secondary", style: styles42.words, "aria-hidden": true, children: words })
|
|
4495
4564
|
] });
|
|
4496
4565
|
}
|
|
4497
|
-
var
|
|
4566
|
+
var styles42 = StyleSheet42.create({
|
|
4498
4567
|
root: { paddingHorizontal: 12, gap: 6 },
|
|
4499
4568
|
row: { flexDirection: "row", alignItems: "center", gap: 8 },
|
|
4500
4569
|
back: { width: 40, height: 40, alignItems: "center", justifyContent: "center" },
|
|
@@ -4505,36 +4574,36 @@ var styles40 = StyleSheet40.create({
|
|
|
4505
4574
|
});
|
|
4506
4575
|
|
|
4507
4576
|
// src/native/stepper.tsx
|
|
4508
|
-
import { StyleSheet as
|
|
4577
|
+
import { StyleSheet as StyleSheet43, View as View47 } from "react-native";
|
|
4509
4578
|
import Svg25, { Circle as Circle13, Path as Path20 } from "react-native-svg";
|
|
4510
|
-
import { jsx as
|
|
4579
|
+
import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
4511
4580
|
var WORDS = { done: "done", current: "in progress", upcoming: "to come", error: "failed" };
|
|
4512
4581
|
function Stepper({ steps, current = 0, orientation = "vertical", statusLabels, "aria-label": label, style }) {
|
|
4513
4582
|
const { theme } = useTheme();
|
|
4514
4583
|
const words = { ...WORDS, ...statusLabels };
|
|
4515
4584
|
const vertical = orientation === "vertical";
|
|
4516
|
-
return /* @__PURE__ */
|
|
4585
|
+
return /* @__PURE__ */ jsx55(View47, { role: "list", "aria-label": label, style: [vertical ? styles43.column : styles43.row, style], children: steps.map((step, i) => {
|
|
4517
4586
|
const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
|
|
4518
4587
|
const last = i === steps.length - 1;
|
|
4519
|
-
const node = status === "current" ? /* @__PURE__ */
|
|
4520
|
-
/* @__PURE__ */
|
|
4521
|
-
status === "done" ? /* @__PURE__ */
|
|
4588
|
+
const node = status === "current" ? /* @__PURE__ */ jsx55(LoaderGlyph, { value: step.value ?? null, size: 24 }) : status === "error" ? /* @__PURE__ */ jsx55(LoaderGlyph, { state: "error", size: 24 }) : /* @__PURE__ */ jsxs46(Svg25, { width: 24, height: 24, viewBox: "0 0 24 24", "aria-hidden": true, children: [
|
|
4589
|
+
/* @__PURE__ */ jsx55(Circle13, { cx: 12, cy: 12, r: 10, fill: status === "done" ? theme.accent : "none", stroke: status === "done" ? theme.accent : theme.borderStrong, strokeWidth: 2 }),
|
|
4590
|
+
status === "done" ? /* @__PURE__ */ jsx55(Path20, { d: "M7.5 12.3l3 3 6-6.3", stroke: theme.onAccent, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) : null
|
|
4522
4591
|
] });
|
|
4523
|
-
const connector = !last ? /* @__PURE__ */
|
|
4524
|
-
return /* @__PURE__ */
|
|
4525
|
-
/* @__PURE__ */
|
|
4592
|
+
const connector = !last ? /* @__PURE__ */ jsx55(View47, { "aria-hidden": true, style: [vertical ? styles43.vLine : styles43.hLine, { backgroundColor: status === "done" ? theme.accent : theme.borderDefault }] }) : null;
|
|
4593
|
+
return /* @__PURE__ */ jsxs46(View47, { role: "listitem", accessible: true, "aria-label": `${step.title}, ${words[status]}`, style: vertical ? styles43.vStep : styles43.hStep, children: [
|
|
4594
|
+
/* @__PURE__ */ jsxs46(View47, { style: vertical ? styles43.vRail : styles43.hRail, children: [
|
|
4526
4595
|
node,
|
|
4527
4596
|
connector
|
|
4528
4597
|
] }),
|
|
4529
|
-
/* @__PURE__ */
|
|
4530
|
-
/* @__PURE__ */
|
|
4531
|
-
step.description ? /* @__PURE__ */
|
|
4532
|
-
step.content && (status === "current" || status === "error") ? /* @__PURE__ */
|
|
4598
|
+
/* @__PURE__ */ jsxs46(View47, { style: [styles43.body, vertical && !last ? { paddingBottom: 20 } : null], children: [
|
|
4599
|
+
/* @__PURE__ */ jsx55(Txt, { variant: "label", tone: status === "upcoming" ? "secondary" : "text", numberOfLines: vertical ? void 0 : 2, children: step.title }),
|
|
4600
|
+
step.description ? /* @__PURE__ */ jsx55(Txt, { variant: "caption", tone: "secondary", children: step.description }) : null,
|
|
4601
|
+
step.content && (status === "current" || status === "error") ? /* @__PURE__ */ jsx55(View47, { style: styles43.content, children: step.content }) : null
|
|
4533
4602
|
] })
|
|
4534
4603
|
] }, i);
|
|
4535
4604
|
}) });
|
|
4536
4605
|
}
|
|
4537
|
-
var
|
|
4606
|
+
var styles43 = StyleSheet43.create({
|
|
4538
4607
|
column: { gap: 0 },
|
|
4539
4608
|
row: { flexDirection: "row" },
|
|
4540
4609
|
vStep: { flexDirection: "row", gap: 12 },
|
|
@@ -4548,53 +4617,63 @@ var styles41 = StyleSheet41.create({
|
|
|
4548
4617
|
});
|
|
4549
4618
|
|
|
4550
4619
|
// src/native/swipe-deck.tsx
|
|
4551
|
-
import * as
|
|
4552
|
-
import { AccessibilityInfo as
|
|
4620
|
+
import * as React39 from "react";
|
|
4621
|
+
import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated23, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as Pressable22, StyleSheet as StyleSheet44, useWindowDimensions as useWindowDimensions2, View as View48 } from "react-native";
|
|
4553
4622
|
import Svg26, { Defs as Defs12, LinearGradient as LinearGradient12, Path as Path21, Rect as Rect5, Stop as Stop12 } from "react-native-svg";
|
|
4554
|
-
import { Fragment as Fragment8, jsx as
|
|
4623
|
+
import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
4555
4624
|
function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabel = (n, t) => `Photo ${n} of ${t}`, style }) {
|
|
4556
4625
|
const { theme, radius: radius3 } = useTheme();
|
|
4557
|
-
const [index, setIndex] =
|
|
4626
|
+
const [index, setIndex] = React39.useState(0);
|
|
4558
4627
|
const gradient = useSvgId("kz-profile-");
|
|
4628
|
+
const [box, setBox] = React39.useState(null);
|
|
4559
4629
|
const photo = photos[index];
|
|
4560
|
-
return /* @__PURE__ */
|
|
4561
|
-
|
|
4630
|
+
return /* @__PURE__ */ jsxs47(
|
|
4631
|
+
View48,
|
|
4562
4632
|
{
|
|
4563
4633
|
accessible: Platform4.OS !== "web",
|
|
4564
4634
|
accessibilityActions: photos.length > 1 ? [{ name: "increment" }, { name: "decrement" }] : [],
|
|
4565
4635
|
onAccessibilityAction: (e) => setIndex((i) => Math.max(0, Math.min(photos.length - 1, i + (e.nativeEvent.actionName === "increment" ? 1 : -1)))),
|
|
4566
4636
|
role: Platform4.OS === "web" ? "group" : "img",
|
|
4567
4637
|
"aria-label": [`${name}${age !== void 0 ? `, ${age}` : ""}`, bio, photos.length > 1 ? photoLabel(index + 1, photos.length) : null].filter(Boolean).join(". "),
|
|
4568
|
-
style: [
|
|
4638
|
+
style: [styles44.card, { borderRadius: radius3.xl, backgroundColor: theme.media }, style],
|
|
4569
4639
|
children: [
|
|
4570
|
-
photo ? /* @__PURE__ */
|
|
4571
|
-
photos.length > 1 ? /* @__PURE__ */
|
|
4572
|
-
/* @__PURE__ */
|
|
4573
|
-
/* @__PURE__ */
|
|
4574
|
-
/* @__PURE__ */
|
|
4640
|
+
photo ? /* @__PURE__ */ jsx56(Image5, { testID: "person-card-photo", source: { uri: photo.uri }, style: StyleSheet44.absoluteFill, resizeMode: "cover" }) : null,
|
|
4641
|
+
photos.length > 1 ? /* @__PURE__ */ jsxs47(Fragment8, { children: [
|
|
4642
|
+
/* @__PURE__ */ jsx56(View48, { style: styles44.bars, "aria-hidden": true, children: photos.map((_, i) => /* @__PURE__ */ jsx56(View48, { style: [styles44.bar, { backgroundColor: theme.textOnMedia, opacity: i === index ? 1 : 0.4 }] }, i)) }),
|
|
4643
|
+
/* @__PURE__ */ jsx56(Pressable22, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles44.half, { left: 0 }], onPress: () => setIndex((i) => Math.max(0, i - 1)) }),
|
|
4644
|
+
/* @__PURE__ */ jsx56(Pressable22, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles44.half, { right: 0 }], onPress: () => setIndex((i) => Math.min(photos.length - 1, i + 1)) })
|
|
4575
4645
|
] }) : null,
|
|
4576
|
-
/* @__PURE__ */
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4646
|
+
/* @__PURE__ */ jsxs47(
|
|
4647
|
+
View48,
|
|
4648
|
+
{
|
|
4649
|
+
testID: "person-card-overlay",
|
|
4650
|
+
pointerEvents: "box-none",
|
|
4651
|
+
style: styles44.bottom,
|
|
4652
|
+
onLayout: (e) => setBox({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }),
|
|
4653
|
+
children: [
|
|
4654
|
+
box ? /* @__PURE__ */ jsxs47(Svg26, { testID: "person-card-scrim", style: styles44.scrim, width: box.width, height: box.height, "aria-hidden": true, children: [
|
|
4655
|
+
/* @__PURE__ */ jsx56(Defs12, { children: /* @__PURE__ */ jsxs47(LinearGradient12, { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
4656
|
+
/* @__PURE__ */ jsx56(Stop12, { offset: "0", stopColor: theme.scrimStrong, stopOpacity: 0 }),
|
|
4657
|
+
/* @__PURE__ */ jsx56(Stop12, { offset: "0.5", stopColor: theme.scrimStrong, stopOpacity: 0.8 }),
|
|
4658
|
+
/* @__PURE__ */ jsx56(Stop12, { offset: "1", stopColor: theme.scrimStrong, stopOpacity: 1 })
|
|
4659
|
+
] }) }),
|
|
4660
|
+
/* @__PURE__ */ jsx56(Rect5, { x: 0, y: 0, width: box.width, height: box.height, fill: `url(#${gradient})` })
|
|
4661
|
+
] }) : null,
|
|
4662
|
+
/* @__PURE__ */ jsxs47(View48, { style: styles44.text, children: [
|
|
4663
|
+
/* @__PURE__ */ jsxs47(View48, { style: styles44.nameRow, children: [
|
|
4664
|
+
/* @__PURE__ */ jsxs47(Txt, { variant: "display", tone: "onMedia", style: styles44.name, numberOfLines: 1, children: [
|
|
4665
|
+
name,
|
|
4666
|
+
age !== void 0 ? /* @__PURE__ */ jsx56(Txt, { variant: "display", tone: "onMedia", style: styles44.age, children: ` ${age}` }) : null
|
|
4667
|
+
] }),
|
|
4668
|
+
badge
|
|
4669
|
+
] }),
|
|
4670
|
+
meta,
|
|
4671
|
+
bio ? /* @__PURE__ */ jsx56(Txt, { tone: "onMedia", numberOfLines: 2, children: bio }) : null,
|
|
4672
|
+
footer ? /* @__PURE__ */ jsx56(View48, { style: styles44.footer, children: footer }) : null
|
|
4673
|
+
] })
|
|
4674
|
+
]
|
|
4675
|
+
}
|
|
4676
|
+
)
|
|
4598
4677
|
]
|
|
4599
4678
|
}
|
|
4600
4679
|
);
|
|
@@ -4603,30 +4682,30 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
|
|
|
4603
4682
|
const { theme, haptic } = useTheme();
|
|
4604
4683
|
const reduce = useReducedMotion();
|
|
4605
4684
|
const { width } = useWindowDimensions2();
|
|
4606
|
-
const [x] =
|
|
4685
|
+
const [x] = React39.useState(() => new Animated23.Value(0));
|
|
4607
4686
|
const top = items2[0];
|
|
4608
|
-
const decide =
|
|
4687
|
+
const decide = React39.useCallback(
|
|
4609
4688
|
(direction) => {
|
|
4610
4689
|
if (!top) return;
|
|
4611
4690
|
haptic("impact");
|
|
4612
4691
|
const done = () => {
|
|
4613
4692
|
x.setValue(0);
|
|
4614
4693
|
onSwipe(top, direction);
|
|
4615
|
-
if (items2.length === 1 && labels.empty)
|
|
4694
|
+
if (items2.length === 1 && labels.empty) AccessibilityInfo14.announceForAccessibility(labels.empty);
|
|
4616
4695
|
};
|
|
4617
4696
|
if (reduce) return done();
|
|
4618
|
-
|
|
4697
|
+
Animated23.timing(x, { toValue: (direction === "like" ? 1.4 : -1.4) * width, duration: 220, useNativeDriver: true }).start(done);
|
|
4619
4698
|
},
|
|
4620
4699
|
[top, haptic, reduce, x, width, onSwipe, items2.length, labels.empty]
|
|
4621
4700
|
);
|
|
4622
|
-
const pan =
|
|
4701
|
+
const pan = React39.useMemo(
|
|
4623
4702
|
() => PanResponder3.create({
|
|
4624
4703
|
onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
|
|
4625
4704
|
onPanResponderMove: (_, g) => x.setValue(g.dx),
|
|
4626
4705
|
onPanResponderRelease: (_, g) => {
|
|
4627
4706
|
if (g.dx > width / 3 || g.vx > 1) decide("like");
|
|
4628
4707
|
else if (g.dx < -width / 3 || g.vx < -1) decide("pass");
|
|
4629
|
-
else
|
|
4708
|
+
else Animated23.spring(x, { toValue: 0, useNativeDriver: true, friction: 6 }).start();
|
|
4630
4709
|
}
|
|
4631
4710
|
}),
|
|
4632
4711
|
[x, width, decide]
|
|
@@ -4634,7 +4713,7 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
|
|
|
4634
4713
|
const rotate = x.interpolate({ inputRange: [-width, 0, width], outputRange: ["-14deg", "0deg", "14deg"] });
|
|
4635
4714
|
const likeOpacity = x.interpolate({ inputRange: [0, width / 4], outputRange: [0, 1], extrapolate: "clamp" });
|
|
4636
4715
|
const passOpacity = x.interpolate({ inputRange: [-width / 4, 0], outputRange: [1, 0], extrapolate: "clamp" });
|
|
4637
|
-
const button = (direction) => /* @__PURE__ */
|
|
4716
|
+
const button = (direction) => /* @__PURE__ */ jsx56(
|
|
4638
4717
|
Pressable22,
|
|
4639
4718
|
{
|
|
4640
4719
|
role: "button",
|
|
@@ -4642,19 +4721,19 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
|
|
|
4642
4721
|
disabled: !top,
|
|
4643
4722
|
onPress: () => decide(direction),
|
|
4644
4723
|
style: ({ pressed }) => [
|
|
4645
|
-
|
|
4724
|
+
styles44.button,
|
|
4646
4725
|
{ borderColor: direction === "like" ? theme.success : theme.danger, backgroundColor: theme.surface1, transform: [{ scale: pressed ? 0.92 : 1 }], opacity: top ? 1 : 0.4 }
|
|
4647
4726
|
],
|
|
4648
|
-
children: /* @__PURE__ */
|
|
4727
|
+
children: /* @__PURE__ */ jsx56(Svg26, { width: 28, height: 28, viewBox: "0 0 24 24", "aria-hidden": true, children: direction === "like" ? /* @__PURE__ */ jsx56(Path21, { 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__ */ jsx56(Path21, { d: "M6 6l12 12M18 6 6 18", stroke: theme.danger, strokeWidth: 3, strokeLinecap: "round" }) })
|
|
4649
4728
|
}
|
|
4650
4729
|
);
|
|
4651
|
-
return /* @__PURE__ */
|
|
4652
|
-
/* @__PURE__ */
|
|
4730
|
+
return /* @__PURE__ */ jsxs47(View48, { style: [styles44.deck, style], children: [
|
|
4731
|
+
/* @__PURE__ */ jsxs47(View48, { style: styles44.stack, children: [
|
|
4653
4732
|
!top ? empty ?? null : null,
|
|
4654
4733
|
items2.slice(0, 2).reverse().map((item) => {
|
|
4655
4734
|
const isTop = item === top;
|
|
4656
|
-
return /* @__PURE__ */
|
|
4657
|
-
|
|
4735
|
+
return /* @__PURE__ */ jsxs47(
|
|
4736
|
+
Animated23.View,
|
|
4658
4737
|
{
|
|
4659
4738
|
...isTop ? pan.panHandlers : {},
|
|
4660
4739
|
accessibilityActions: isTop ? [{ name: "like", label: labels.like }, { name: "pass", label: labels.pass }] : [],
|
|
@@ -4662,12 +4741,12 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
|
|
|
4662
4741
|
"aria-hidden": !isTop,
|
|
4663
4742
|
importantForAccessibility: isTop ? "auto" : "no-hide-descendants",
|
|
4664
4743
|
pointerEvents: isTop ? "auto" : "none",
|
|
4665
|
-
style: [
|
|
4744
|
+
style: [StyleSheet44.absoluteFill, isTop ? { transform: [{ translateX: x }, { rotate }] } : { transform: [{ scale: 0.96 }], opacity: 0.9 }],
|
|
4666
4745
|
children: [
|
|
4667
4746
|
renderCard(item),
|
|
4668
|
-
isTop ? /* @__PURE__ */
|
|
4669
|
-
/* @__PURE__ */
|
|
4670
|
-
/* @__PURE__ */
|
|
4747
|
+
isTop ? /* @__PURE__ */ jsxs47(Fragment8, { children: [
|
|
4748
|
+
/* @__PURE__ */ jsx56(Animated23.View, { pointerEvents: "none", style: [styles44.stamp, styles44.stampLike, { borderColor: theme.success, opacity: likeOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx56(Txt, { variant: "title", style: { color: theme.success }, children: labels.likeStamp ?? labels.like.toUpperCase() }) }),
|
|
4749
|
+
/* @__PURE__ */ jsx56(Animated23.View, { pointerEvents: "none", style: [styles44.stamp, styles44.stampPass, { borderColor: theme.danger, opacity: passOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx56(Txt, { variant: "title", style: { color: theme.danger }, children: labels.passStamp ?? labels.pass.toUpperCase() }) })
|
|
4671
4750
|
] }) : null
|
|
4672
4751
|
]
|
|
4673
4752
|
},
|
|
@@ -4675,18 +4754,19 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
|
|
|
4675
4754
|
);
|
|
4676
4755
|
})
|
|
4677
4756
|
] }),
|
|
4678
|
-
hideButtons ? null : /* @__PURE__ */
|
|
4757
|
+
hideButtons ? null : /* @__PURE__ */ jsxs47(View48, { style: styles44.buttons, children: [
|
|
4679
4758
|
button("pass"),
|
|
4680
4759
|
button("like")
|
|
4681
4760
|
] })
|
|
4682
4761
|
] });
|
|
4683
4762
|
}
|
|
4684
|
-
var
|
|
4763
|
+
var styles44 = StyleSheet44.create({
|
|
4685
4764
|
card: { flex: 1, overflow: "hidden" },
|
|
4686
4765
|
bars: { position: "absolute", top: 8, left: 8, right: 8, flexDirection: "row", gap: 4 },
|
|
4687
4766
|
bar: { flex: 1, height: 3, borderRadius: 2 },
|
|
4688
4767
|
half: { position: "absolute", top: 0, bottom: "40%", width: "40%" },
|
|
4689
4768
|
bottom: { position: "absolute", left: 0, right: 0, bottom: 0, paddingTop: 80 },
|
|
4769
|
+
scrim: { position: "absolute", top: 0, left: 0 },
|
|
4690
4770
|
text: { padding: 16, gap: 6 },
|
|
4691
4771
|
nameRow: { flexDirection: "row", alignItems: "center", gap: 8 },
|
|
4692
4772
|
name: { flexShrink: 1, fontSize: 28, lineHeight: 34 },
|
|
@@ -4702,28 +4782,28 @@ var styles42 = StyleSheet42.create({
|
|
|
4702
4782
|
});
|
|
4703
4783
|
|
|
4704
4784
|
// src/native/swipeable-row.tsx
|
|
4705
|
-
import * as
|
|
4706
|
-
import { Animated as
|
|
4707
|
-
import { jsx as
|
|
4785
|
+
import * as React40 from "react";
|
|
4786
|
+
import { Animated as Animated24, PanResponder as PanResponder4, Pressable as Pressable23, StyleSheet as StyleSheet45, View as View49 } from "react-native";
|
|
4787
|
+
import { jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
4708
4788
|
var toneColor = (t, tone3) => ({ neutral: t.surface3, accent: t.accent, success: t.success, warning: t.warning, danger: t.danger })[tone3 ?? "neutral"];
|
|
4709
4789
|
var toneText = (tone3) => tone3 === "neutral" || tone3 === void 0 ? "text" : "onAccent";
|
|
4710
4790
|
function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6, actionWidth = 80, onActivate, testID, style }) {
|
|
4711
4791
|
const { theme, haptic } = useTheme();
|
|
4712
4792
|
const reduce = useReducedMotion();
|
|
4713
|
-
const [x] =
|
|
4714
|
-
const [width, setWidth] =
|
|
4715
|
-
const rest =
|
|
4716
|
-
const armed =
|
|
4793
|
+
const [x] = React40.useState(() => new Animated24.Value(0));
|
|
4794
|
+
const [width, setWidth] = React40.useState(0);
|
|
4795
|
+
const rest = React40.useRef(0);
|
|
4796
|
+
const armed = React40.useRef(false);
|
|
4717
4797
|
const settle = (to) => {
|
|
4718
4798
|
rest.current = to;
|
|
4719
4799
|
if (reduce) x.setValue(to);
|
|
4720
|
-
else
|
|
4800
|
+
else Animated24.spring(x, { toValue: to, useNativeDriver: true, damping: 22, stiffness: 240 }).start();
|
|
4721
4801
|
};
|
|
4722
4802
|
const run = (action) => {
|
|
4723
4803
|
settle(0);
|
|
4724
4804
|
action.onPress();
|
|
4725
4805
|
};
|
|
4726
|
-
const pan =
|
|
4806
|
+
const pan = React40.useMemo(
|
|
4727
4807
|
() => PanResponder4.create({
|
|
4728
4808
|
onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
|
|
4729
4809
|
onPanResponderMove: (_, g) => {
|
|
@@ -4752,19 +4832,19 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
|
|
|
4752
4832
|
[trailing, leading, fullSwipe, width, actionWidth]
|
|
4753
4833
|
// eslint-disable-line react-hooks/exhaustive-deps -- run/settle are stable in effect
|
|
4754
4834
|
);
|
|
4755
|
-
const side = (actions, edge) => /* @__PURE__ */
|
|
4835
|
+
const side = (actions, edge) => /* @__PURE__ */ jsx57(View49, { "aria-hidden": true, style: [styles45.side, edge === "left" ? { left: 0 } : { right: 0, flexDirection: "row-reverse" }], children: actions.map((action, i) => (
|
|
4756
4836
|
// eslint-disable-next-line react-hooks/refs -- runs on a press, never during render
|
|
4757
|
-
/* @__PURE__ */
|
|
4837
|
+
/* @__PURE__ */ jsxs48(Pressable23, { focusable: false, tabIndex: -1, onPress: () => run(action), style: [styles45.action, { width: actionWidth, backgroundColor: toneColor(theme, action.tone) }], children: [
|
|
4758
4838
|
action.icon,
|
|
4759
|
-
/* @__PURE__ */
|
|
4839
|
+
/* @__PURE__ */ jsx57(Txt, { variant: "caption", tone: toneText(action.tone), style: styles45.actionText, numberOfLines: 1, children: action.label })
|
|
4760
4840
|
] }, i)
|
|
4761
4841
|
)) });
|
|
4762
4842
|
const all = [...leading, ...trailing];
|
|
4763
|
-
return /* @__PURE__ */
|
|
4843
|
+
return /* @__PURE__ */ jsxs48(View49, { style: [styles45.root, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
|
|
4764
4844
|
leading.length > 0 ? side(leading, "left") : null,
|
|
4765
4845
|
trailing.length > 0 ? side(trailing, "right") : null,
|
|
4766
|
-
/* @__PURE__ */
|
|
4767
|
-
|
|
4846
|
+
/* @__PURE__ */ jsx57(
|
|
4847
|
+
Animated24.View,
|
|
4768
4848
|
{
|
|
4769
4849
|
...pan.panHandlers,
|
|
4770
4850
|
accessible: true,
|
|
@@ -4775,13 +4855,13 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
|
|
|
4775
4855
|
const action = all.find((a) => a.label === e.nativeEvent.actionName);
|
|
4776
4856
|
if (action) action.onPress();
|
|
4777
4857
|
},
|
|
4778
|
-
style: [
|
|
4858
|
+
style: [styles45.front, { backgroundColor: theme.surface0, transform: [{ translateX: x }] }],
|
|
4779
4859
|
children
|
|
4780
4860
|
}
|
|
4781
4861
|
)
|
|
4782
4862
|
] });
|
|
4783
4863
|
}
|
|
4784
|
-
var
|
|
4864
|
+
var styles45 = StyleSheet45.create({
|
|
4785
4865
|
root: { overflow: "hidden" },
|
|
4786
4866
|
side: { position: "absolute", top: 0, bottom: 0, flexDirection: "row" },
|
|
4787
4867
|
action: { alignItems: "center", justifyContent: "center", gap: 4, paddingHorizontal: 6 },
|
|
@@ -4790,30 +4870,30 @@ var styles43 = StyleSheet43.create({
|
|
|
4790
4870
|
});
|
|
4791
4871
|
|
|
4792
4872
|
// src/native/switch.tsx
|
|
4793
|
-
import * as
|
|
4794
|
-
import { Animated as
|
|
4795
|
-
import { jsx as
|
|
4873
|
+
import * as React41 from "react";
|
|
4874
|
+
import { Animated as Animated25, Pressable as Pressable24, StyleSheet as StyleSheet46, Text as Text18, View as View50 } from "react-native";
|
|
4875
|
+
import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
4796
4876
|
var SIZES = { sm: { w: 40, h: 24, knob: 18 }, md: { w: 52, h: 32, knob: 26 } };
|
|
4797
4877
|
function Switch({ label, checked, defaultChecked = false, onCheckedChange, description, showLabel, size = "md", error, disabled, style }) {
|
|
4798
4878
|
const { theme, motion: motion3, haptic } = useTheme();
|
|
4799
|
-
const [own, setOwn] =
|
|
4879
|
+
const [own, setOwn] = React41.useState(defaultChecked);
|
|
4800
4880
|
const on = checked ?? own;
|
|
4801
4881
|
const d = SIZES[size];
|
|
4802
4882
|
const travel = d.w - d.knob - (d.h - d.knob);
|
|
4803
|
-
const [x] =
|
|
4804
|
-
|
|
4805
|
-
|
|
4883
|
+
const [x] = React41.useState(() => new Animated25.Value(on ? 1 : 0));
|
|
4884
|
+
React41.useEffect(() => {
|
|
4885
|
+
Animated25.timing(x, { toValue: on ? 1 : 0, duration: motion3.duration.base, useNativeDriver: true }).start();
|
|
4806
4886
|
}, [on, x, motion3.duration.base]);
|
|
4807
4887
|
const toggle = () => {
|
|
4808
4888
|
haptic("selection");
|
|
4809
4889
|
if (checked === void 0) setOwn(!on);
|
|
4810
4890
|
onCheckedChange?.(!on);
|
|
4811
4891
|
};
|
|
4812
|
-
const track = /* @__PURE__ */
|
|
4813
|
-
|
|
4892
|
+
const track = /* @__PURE__ */ jsx58(View50, { style: [styles46.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__ */ jsx58(
|
|
4893
|
+
Animated25.View,
|
|
4814
4894
|
{
|
|
4815
4895
|
style: [
|
|
4816
|
-
|
|
4896
|
+
styles46.knob,
|
|
4817
4897
|
{
|
|
4818
4898
|
width: d.knob,
|
|
4819
4899
|
height: d.knob,
|
|
@@ -4835,19 +4915,19 @@ function Switch({ label, checked, defaultChecked = false, onCheckedChange, descr
|
|
|
4835
4915
|
onPress: toggle
|
|
4836
4916
|
};
|
|
4837
4917
|
if (!showLabel)
|
|
4838
|
-
return /* @__PURE__ */
|
|
4839
|
-
return /* @__PURE__ */
|
|
4840
|
-
/* @__PURE__ */
|
|
4841
|
-
/* @__PURE__ */
|
|
4842
|
-
/* @__PURE__ */
|
|
4843
|
-
description ? /* @__PURE__ */
|
|
4918
|
+
return /* @__PURE__ */ jsx58(Pressable24, { ...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 ? styles46.disabled : null, style], children: track });
|
|
4919
|
+
return /* @__PURE__ */ jsxs49(View50, { style: [styles46.root, style], children: [
|
|
4920
|
+
/* @__PURE__ */ jsxs49(Pressable24, { ...a11y, style: [styles46.row, disabled ? styles46.disabled : null], children: [
|
|
4921
|
+
/* @__PURE__ */ jsxs49(View50, { style: styles46.text, children: [
|
|
4922
|
+
/* @__PURE__ */ jsx58(Text18, { style: [styles46.label, { color: theme.textPrimary }], children: label }),
|
|
4923
|
+
description ? /* @__PURE__ */ jsx58(Text18, { style: [styles46.description, { color: theme.textSecondary }], children: description }) : null
|
|
4844
4924
|
] }),
|
|
4845
4925
|
track
|
|
4846
4926
|
] }),
|
|
4847
|
-
error ? /* @__PURE__ */
|
|
4927
|
+
error ? /* @__PURE__ */ jsx58(Text18, { role: "alert", "aria-live": "polite", style: [styles46.description, { color: theme.dangerText }], children: error }) : null
|
|
4848
4928
|
] });
|
|
4849
4929
|
}
|
|
4850
|
-
var
|
|
4930
|
+
var styles46 = StyleSheet46.create({
|
|
4851
4931
|
root: { gap: 2, alignSelf: "stretch" },
|
|
4852
4932
|
row: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 48 },
|
|
4853
4933
|
text: { flex: 1, gap: 2 },
|
|
@@ -4859,15 +4939,15 @@ var styles44 = StyleSheet44.create({
|
|
|
4859
4939
|
});
|
|
4860
4940
|
|
|
4861
4941
|
// src/native/tab-bar.tsx
|
|
4862
|
-
import { Pressable as Pressable25, StyleSheet as
|
|
4863
|
-
import { jsx as
|
|
4942
|
+
import { Pressable as Pressable25, StyleSheet as StyleSheet47, Text as Text19, View as View51 } from "react-native";
|
|
4943
|
+
import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
4864
4944
|
function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label": label, style }) {
|
|
4865
4945
|
const { theme, insets, haptic } = useTheme();
|
|
4866
|
-
return /* @__PURE__ */
|
|
4946
|
+
return /* @__PURE__ */ jsx59(View51, { role: "tablist", "aria-label": label, style: [styles47.bar, { backgroundColor: theme.glassBg, borderTopColor: theme.glassBorder, paddingBottom: Math.max(6, insets.bottom) }, style], children: items2.map((item) => {
|
|
4867
4947
|
const selected = item.value === value;
|
|
4868
4948
|
const color = selected ? theme.accentText : theme.textSecondary;
|
|
4869
4949
|
const badge = item.badge === true ? "" : typeof item.badge === "number" && item.badge > 0 ? item.badge > 99 ? "99+" : String(item.badge) : null;
|
|
4870
|
-
return /* @__PURE__ */
|
|
4950
|
+
return /* @__PURE__ */ jsxs50(
|
|
4871
4951
|
Pressable25,
|
|
4872
4952
|
{
|
|
4873
4953
|
role: "tab",
|
|
@@ -4877,22 +4957,22 @@ function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label":
|
|
|
4877
4957
|
if (selected) onReselect?.(item.value);
|
|
4878
4958
|
else onValueChange(item.value);
|
|
4879
4959
|
},
|
|
4880
|
-
style: ({ pressed }) => [
|
|
4960
|
+
style: ({ pressed }) => [styles47.item, { opacity: pressed ? 0.7 : 1 }],
|
|
4881
4961
|
children: [
|
|
4882
|
-
/* @__PURE__ */
|
|
4962
|
+
/* @__PURE__ */ jsxs50(View51, { "aria-hidden": true, style: styles47.icon, children: [
|
|
4883
4963
|
item.icon(selected, color),
|
|
4884
|
-
badge !== null ? /* @__PURE__ */
|
|
4964
|
+
badge !== null ? /* @__PURE__ */ jsx59(View51, { style: [badge ? styles47.count : styles47.dot, { backgroundColor: theme.danger, borderColor: theme.surface1 }], children: badge ? /* @__PURE__ */ jsx59(Text19, { style: [styles47.countText, { color: theme.onAccent }], children: badge }) : null }) : null
|
|
4885
4965
|
] }),
|
|
4886
|
-
/* @__PURE__ */
|
|
4887
|
-
badge !== null && item.badgeLabel ? /* @__PURE__ */
|
|
4966
|
+
/* @__PURE__ */ jsx59(Text19, { numberOfLines: 1, style: [styles47.label, { color, fontWeight: selected ? "700" : "500" }], children: item.label }),
|
|
4967
|
+
badge !== null && item.badgeLabel ? /* @__PURE__ */ jsx59(Text19, { style: styles47.unseen, children: `, ${item.badgeLabel}` }) : null
|
|
4888
4968
|
]
|
|
4889
4969
|
},
|
|
4890
4970
|
item.value
|
|
4891
4971
|
);
|
|
4892
4972
|
}) });
|
|
4893
4973
|
}
|
|
4894
|
-
var
|
|
4895
|
-
bar: { flexDirection: "row", borderTopWidth:
|
|
4974
|
+
var styles47 = StyleSheet47.create({
|
|
4975
|
+
bar: { flexDirection: "row", borderTopWidth: StyleSheet47.hairlineWidth, paddingTop: 6 },
|
|
4896
4976
|
item: { flex: 1, alignItems: "center", gap: 2, minHeight: 48, justifyContent: "center" },
|
|
4897
4977
|
icon: { width: 28, height: 26, alignItems: "center", justifyContent: "center" },
|
|
4898
4978
|
label: { fontSize: 11, lineHeight: 14 },
|
|
@@ -4903,12 +4983,12 @@ var styles45 = StyleSheet45.create({
|
|
|
4903
4983
|
});
|
|
4904
4984
|
|
|
4905
4985
|
// src/native/tabs.tsx
|
|
4906
|
-
import * as
|
|
4907
|
-
import { Pressable as Pressable26, ScrollView as ScrollView7, StyleSheet as
|
|
4908
|
-
import { jsx as
|
|
4986
|
+
import * as React42 from "react";
|
|
4987
|
+
import { Pressable as Pressable26, ScrollView as ScrollView7, StyleSheet as StyleSheet48, View as View52 } from "react-native";
|
|
4988
|
+
import { jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
4909
4989
|
function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label": label, variant = "underline", style }) {
|
|
4910
4990
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
4911
|
-
const [own, setOwn] =
|
|
4991
|
+
const [own, setOwn] = React42.useState(defaultValue ?? items2[0]?.value);
|
|
4912
4992
|
const current = value ?? own;
|
|
4913
4993
|
const select = (next) => {
|
|
4914
4994
|
if (next === current) return;
|
|
@@ -4919,7 +4999,7 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
|
|
|
4919
4999
|
const segmented = variant === "segmented";
|
|
4920
5000
|
const tabs = items2.map((item) => {
|
|
4921
5001
|
const selected = item.value === current;
|
|
4922
|
-
return /* @__PURE__ */
|
|
5002
|
+
return /* @__PURE__ */ jsx60(
|
|
4923
5003
|
Pressable26,
|
|
4924
5004
|
{
|
|
4925
5005
|
role: "tab",
|
|
@@ -4928,45 +5008,45 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
|
|
|
4928
5008
|
disabled: item.disabled,
|
|
4929
5009
|
onPress: () => select(item.value),
|
|
4930
5010
|
style: [
|
|
4931
|
-
segmented ?
|
|
5011
|
+
segmented ? styles48.segment : styles48.tab,
|
|
4932
5012
|
segmented && selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault, borderRadius: radius3.sm } : null,
|
|
4933
5013
|
!segmented ? { borderBottomColor: selected ? theme.accent : "transparent" } : null,
|
|
4934
|
-
item.disabled ?
|
|
5014
|
+
item.disabled ? styles48.disabled : null
|
|
4935
5015
|
],
|
|
4936
|
-
children: /* @__PURE__ */
|
|
5016
|
+
children: /* @__PURE__ */ jsxs51(Txt, { variant: "label", tone: selected ? "text" : "secondary", numberOfLines: 1, children: [
|
|
4937
5017
|
item.label,
|
|
4938
|
-
item.count !== void 0 ? /* @__PURE__ */
|
|
5018
|
+
item.count !== void 0 ? /* @__PURE__ */ jsx60(Txt, { variant: "caption", tone: "secondary", children: ` ${item.count}` }) : null
|
|
4939
5019
|
] })
|
|
4940
5020
|
},
|
|
4941
5021
|
item.value
|
|
4942
5022
|
);
|
|
4943
5023
|
});
|
|
4944
5024
|
const panel = items2.find((i) => i.value === current)?.content;
|
|
4945
|
-
return /* @__PURE__ */
|
|
4946
|
-
segmented ? /* @__PURE__ */
|
|
4947
|
-
panel !== void 0 ? /* @__PURE__ */
|
|
5025
|
+
return /* @__PURE__ */ jsxs51(View52, { style: [styles48.root, style], children: [
|
|
5026
|
+
segmented ? /* @__PURE__ */ jsx60(View52, { role: "tablist", "aria-label": label, style: [styles48.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md }], children: tabs }) : /* @__PURE__ */ jsx60(View52, { style: [styles48.underline, { borderBottomColor: theme.borderSubtle }], children: /* @__PURE__ */ jsx60(ScrollView7, { horizontal: true, showsHorizontalScrollIndicator: false, role: "tablist", "aria-label": label, contentContainerStyle: styles48.scroll, children: tabs }) }),
|
|
5027
|
+
panel !== void 0 ? /* @__PURE__ */ jsx60(View52, { role: "tabpanel", children: panel }) : null
|
|
4948
5028
|
] });
|
|
4949
5029
|
}
|
|
4950
|
-
var
|
|
5030
|
+
var styles48 = StyleSheet48.create({
|
|
4951
5031
|
root: { gap: 12 },
|
|
4952
|
-
underline: { borderBottomWidth:
|
|
5032
|
+
underline: { borderBottomWidth: StyleSheet48.hairlineWidth },
|
|
4953
5033
|
scroll: { gap: 4, paddingHorizontal: 4 },
|
|
4954
5034
|
tab: { minHeight: 44, justifyContent: "center", paddingHorizontal: 12, borderBottomWidth: 2 },
|
|
4955
|
-
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth:
|
|
4956
|
-
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth:
|
|
5035
|
+
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet48.hairlineWidth, height: 40 },
|
|
5036
|
+
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet48.hairlineWidth, borderColor: "transparent" },
|
|
4957
5037
|
disabled: { opacity: 0.4 }
|
|
4958
5038
|
});
|
|
4959
5039
|
|
|
4960
5040
|
// src/native/tag-selector.tsx
|
|
4961
|
-
import { StyleSheet as
|
|
4962
|
-
import { jsx as
|
|
5041
|
+
import { StyleSheet as StyleSheet49, View as View53 } from "react-native";
|
|
5042
|
+
import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
4963
5043
|
function TagSelector({ label, options, value, onValueChange, max, countLabel, style }) {
|
|
4964
5044
|
const { haptic } = useTheme();
|
|
4965
5045
|
const full = max !== void 0 && value.length >= max;
|
|
4966
|
-
return /* @__PURE__ */
|
|
4967
|
-
/* @__PURE__ */
|
|
5046
|
+
return /* @__PURE__ */ jsxs52(View53, { style: [styles49.root, style], children: [
|
|
5047
|
+
/* @__PURE__ */ jsx61(View53, { role: "group", "aria-label": label, style: styles49.wrap, children: options.map((option) => {
|
|
4968
5048
|
const on = value.includes(option.value);
|
|
4969
|
-
return /* @__PURE__ */
|
|
5049
|
+
return /* @__PURE__ */ jsx61(
|
|
4970
5050
|
Chip,
|
|
4971
5051
|
{
|
|
4972
5052
|
selected: on,
|
|
@@ -4980,15 +5060,15 @@ function TagSelector({ label, options, value, onValueChange, max, countLabel, st
|
|
|
4980
5060
|
option.value
|
|
4981
5061
|
);
|
|
4982
5062
|
}) }),
|
|
4983
|
-
max !== void 0 && countLabel ? /* @__PURE__ */
|
|
5063
|
+
max !== void 0 && countLabel ? /* @__PURE__ */ jsx61(Txt, { variant: "caption", tone: full ? "accent" : "secondary", "aria-live": "polite", children: countLabel(value.length, max) }) : null
|
|
4984
5064
|
] });
|
|
4985
5065
|
}
|
|
4986
|
-
var
|
|
5066
|
+
var styles49 = StyleSheet49.create({ root: { gap: 8 }, wrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 } });
|
|
4987
5067
|
|
|
4988
5068
|
// src/native/toast.tsx
|
|
4989
|
-
import * as
|
|
4990
|
-
import { AccessibilityInfo as
|
|
4991
|
-
import { Fragment as Fragment9, jsx as
|
|
5069
|
+
import * as React43 from "react";
|
|
5070
|
+
import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated26, PanResponder as PanResponder5, Pressable as Pressable27, StyleSheet as StyleSheet50, Text as Text20, View as View54 } from "react-native";
|
|
5071
|
+
import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
4992
5072
|
var items = [];
|
|
4993
5073
|
var listeners2 = /* @__PURE__ */ new Set();
|
|
4994
5074
|
var counter = 0;
|
|
@@ -5023,47 +5103,47 @@ var toast = Object.assign(show, {
|
|
|
5023
5103
|
function ToastView({ item, closeLabel, duration }) {
|
|
5024
5104
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
5025
5105
|
const reduce = useReducedMotion();
|
|
5026
|
-
const [swipe] =
|
|
5027
|
-
const drag =
|
|
5106
|
+
const [swipe] = React43.useState(() => new Animated26.Value(0));
|
|
5107
|
+
const drag = React43.useMemo(
|
|
5028
5108
|
() => PanResponder5.create({
|
|
5029
5109
|
onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
|
|
5030
5110
|
onPanResponderMove: (_, g) => swipe.setValue(g.dx),
|
|
5031
5111
|
onPanResponderRelease: (_, g) => {
|
|
5032
5112
|
if (Math.abs(g.dx) > 96 || Math.abs(g.vx) > 0.9) {
|
|
5033
|
-
|
|
5034
|
-
} else
|
|
5113
|
+
Animated26.timing(swipe, { toValue: Math.sign(g.dx) * 480, duration: 160, useNativeDriver: true }).start(() => dismiss(item.id));
|
|
5114
|
+
} else Animated26.spring(swipe, { toValue: 0, useNativeDriver: true }).start();
|
|
5035
5115
|
}
|
|
5036
5116
|
}),
|
|
5037
5117
|
[swipe, item.id]
|
|
5038
5118
|
);
|
|
5039
|
-
|
|
5119
|
+
React43.useEffect(() => {
|
|
5040
5120
|
if (item.tone === "success" || item.tone === "warning") haptic(item.tone);
|
|
5041
5121
|
if (item.tone === "error") haptic("warning");
|
|
5042
5122
|
}, [item.id]);
|
|
5043
|
-
const [enter] =
|
|
5044
|
-
|
|
5123
|
+
const [enter] = React43.useState(() => new Animated26.Value(reduce ? 1 : 0));
|
|
5124
|
+
React43.useEffect(() => {
|
|
5045
5125
|
if (reduce) enter.setValue(1);
|
|
5046
|
-
else
|
|
5126
|
+
else Animated26.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
|
|
5047
5127
|
}, [enter, reduce]);
|
|
5048
|
-
|
|
5049
|
-
|
|
5128
|
+
React43.useEffect(() => {
|
|
5129
|
+
AccessibilityInfo15.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
|
|
5050
5130
|
}, [item.title, item.description]);
|
|
5051
5131
|
const ms = item.duration ?? duration;
|
|
5052
|
-
|
|
5132
|
+
React43.useEffect(() => {
|
|
5053
5133
|
if (!Number.isFinite(ms)) return;
|
|
5054
5134
|
const timer2 = setTimeout(() => dismiss(item.id), ms);
|
|
5055
5135
|
return () => clearTimeout(timer2);
|
|
5056
5136
|
}, [item.id, ms]);
|
|
5057
5137
|
const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
|
|
5058
|
-
const text = /* @__PURE__ */
|
|
5059
|
-
item.icon ? /* @__PURE__ */
|
|
5060
|
-
/* @__PURE__ */
|
|
5061
|
-
/* @__PURE__ */
|
|
5062
|
-
item.description ? /* @__PURE__ */
|
|
5138
|
+
const text = /* @__PURE__ */ jsxs53(Fragment9, { children: [
|
|
5139
|
+
item.icon ? /* @__PURE__ */ jsx62(View54, { "aria-hidden": true, children: item.icon }) : null,
|
|
5140
|
+
/* @__PURE__ */ jsxs53(View54, { style: styles50.content, children: [
|
|
5141
|
+
/* @__PURE__ */ jsx62(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
|
|
5142
|
+
item.description ? /* @__PURE__ */ jsx62(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
|
|
5063
5143
|
] })
|
|
5064
5144
|
] });
|
|
5065
|
-
const body = /* @__PURE__ */
|
|
5066
|
-
item.onPress ? /* @__PURE__ */
|
|
5145
|
+
const body = /* @__PURE__ */ jsxs53(Fragment9, { children: [
|
|
5146
|
+
item.onPress ? /* @__PURE__ */ jsx62(
|
|
5067
5147
|
Pressable27,
|
|
5068
5148
|
{
|
|
5069
5149
|
role: "button",
|
|
@@ -5071,11 +5151,11 @@ function ToastView({ item, closeLabel, duration }) {
|
|
|
5071
5151
|
item.onPress?.();
|
|
5072
5152
|
dismiss(item.id);
|
|
5073
5153
|
},
|
|
5074
|
-
style: ({ pressed }) => [
|
|
5154
|
+
style: ({ pressed }) => [styles50.main, { opacity: pressed ? 0.8 : 1 }],
|
|
5075
5155
|
children: text
|
|
5076
5156
|
}
|
|
5077
|
-
) : /* @__PURE__ */
|
|
5078
|
-
item.action ? /* @__PURE__ */
|
|
5157
|
+
) : /* @__PURE__ */ jsx62(View54, { style: styles50.main, children: text }),
|
|
5158
|
+
item.action ? /* @__PURE__ */ jsx62(
|
|
5079
5159
|
Pressable27,
|
|
5080
5160
|
{
|
|
5081
5161
|
role: "button",
|
|
@@ -5083,33 +5163,33 @@ function ToastView({ item, closeLabel, duration }) {
|
|
|
5083
5163
|
item.action?.onPress();
|
|
5084
5164
|
dismiss(item.id);
|
|
5085
5165
|
},
|
|
5086
|
-
style: [
|
|
5087
|
-
children: /* @__PURE__ */
|
|
5166
|
+
style: [styles50.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
|
|
5167
|
+
children: /* @__PURE__ */ jsx62(Text20, { style: [styles50.actionLabel, { color: theme.onAccent }], children: item.action.label })
|
|
5088
5168
|
}
|
|
5089
5169
|
) : null,
|
|
5090
|
-
/* @__PURE__ */
|
|
5170
|
+
/* @__PURE__ */ jsx62(Pressable27, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles50.close, children: /* @__PURE__ */ jsx62(Text20, { style: [styles50.cross, { color: theme.textSecondary }], children: "\xD7" }) })
|
|
5091
5171
|
] });
|
|
5092
5172
|
const frame = [
|
|
5093
|
-
|
|
5173
|
+
styles50.toast,
|
|
5094
5174
|
{ backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
|
|
5095
5175
|
];
|
|
5096
5176
|
const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }, { translateX: swipe }] };
|
|
5097
|
-
return /* @__PURE__ */
|
|
5177
|
+
return /* @__PURE__ */ jsx62(Animated26.View, { "aria-live": "polite", style: motion3, ...drag.panHandlers, children: /* @__PURE__ */ jsx62(View54, { style: frame, children: body }) });
|
|
5098
5178
|
}
|
|
5099
5179
|
function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
|
|
5100
|
-
const all =
|
|
5180
|
+
const all = React43.useSyncExternalStore(subscribe2, snapshot, snapshot);
|
|
5101
5181
|
const shown = all.slice(-max);
|
|
5102
5182
|
if (shown.length === 0) return null;
|
|
5103
|
-
return /* @__PURE__ */
|
|
5183
|
+
return /* @__PURE__ */ jsx62(View54, { pointerEvents: "box-none", style: [styles50.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx62(ToastView, { item, closeLabel, duration }, item.id)) });
|
|
5104
5184
|
}
|
|
5105
|
-
var
|
|
5185
|
+
var styles50 = StyleSheet50.create({
|
|
5106
5186
|
stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
|
|
5107
5187
|
toast: {
|
|
5108
5188
|
flexDirection: "row",
|
|
5109
5189
|
alignItems: "center",
|
|
5110
5190
|
gap: 10,
|
|
5111
5191
|
padding: 12,
|
|
5112
|
-
borderWidth:
|
|
5192
|
+
borderWidth: StyleSheet50.hairlineWidth,
|
|
5113
5193
|
borderLeftWidth: 4,
|
|
5114
5194
|
shadowOpacity: 0.3,
|
|
5115
5195
|
shadowRadius: 16,
|
|
@@ -5125,14 +5205,14 @@ var styles48 = StyleSheet48.create({
|
|
|
5125
5205
|
});
|
|
5126
5206
|
|
|
5127
5207
|
// src/native/verified-badge.tsx
|
|
5128
|
-
import { StyleSheet as
|
|
5208
|
+
import { StyleSheet as StyleSheet51, View as View55 } from "react-native";
|
|
5129
5209
|
import Svg27, { Path as Path22 } from "react-native-svg";
|
|
5130
|
-
import { jsx as
|
|
5210
|
+
import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
5131
5211
|
function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
|
|
5132
5212
|
const { theme } = useTheme();
|
|
5133
|
-
return /* @__PURE__ */
|
|
5134
|
-
/* @__PURE__ */
|
|
5135
|
-
/* @__PURE__ */
|
|
5213
|
+
return /* @__PURE__ */ jsxs54(View55, { accessible: true, role: "img", "aria-label": label, style: styles51.row, children: [
|
|
5214
|
+
/* @__PURE__ */ jsxs54(Svg27, { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true, children: [
|
|
5215
|
+
/* @__PURE__ */ jsx63(
|
|
5136
5216
|
Path22,
|
|
5137
5217
|
{
|
|
5138
5218
|
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",
|
|
@@ -5141,12 +5221,12 @@ function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
|
|
|
5141
5221
|
strokeWidth: 1.2
|
|
5142
5222
|
}
|
|
5143
5223
|
),
|
|
5144
|
-
/* @__PURE__ */
|
|
5224
|
+
/* @__PURE__ */ jsx63(Path22, { d: "M8.3 12.3l2.5 2.5 4.9-5.2", fill: "none", stroke: theme.onAccent, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" })
|
|
5145
5225
|
] }),
|
|
5146
|
-
showLabel ? /* @__PURE__ */
|
|
5226
|
+
showLabel ? /* @__PURE__ */ jsx63(Txt, { variant: "caption", tone: on === "media" ? "onMedia" : "accent", style: styles51.text, children: label }) : null
|
|
5147
5227
|
] });
|
|
5148
5228
|
}
|
|
5149
|
-
var
|
|
5229
|
+
var styles51 = StyleSheet51.create({ row: { flexDirection: "row", alignItems: "center", gap: 4 }, text: { fontWeight: "700" } });
|
|
5150
5230
|
export {
|
|
5151
5231
|
ActionSheet,
|
|
5152
5232
|
ActivityFeed,
|
|
@@ -5154,6 +5234,7 @@ export {
|
|
|
5154
5234
|
AvatarGroup,
|
|
5155
5235
|
AvatarRoot,
|
|
5156
5236
|
Badge,
|
|
5237
|
+
BrandedRefresh,
|
|
5157
5238
|
Button,
|
|
5158
5239
|
Calendar,
|
|
5159
5240
|
Card,
|
|
@@ -5215,6 +5296,7 @@ export {
|
|
|
5215
5296
|
Skeleton,
|
|
5216
5297
|
Slider,
|
|
5217
5298
|
Spinner,
|
|
5299
|
+
SplashHandoff,
|
|
5218
5300
|
StepProgress,
|
|
5219
5301
|
Stepper,
|
|
5220
5302
|
SuccessState,
|