@krizaka/ui 3.27.0 → 3.29.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 +3 -0
- package/dist/blocks.css +2 -0
- package/dist/chip-link.js +4 -27
- package/dist/chip-link.js.map +1 -1
- package/dist/chip-row.d.ts +78 -0
- package/dist/chip-row.js +61 -0
- package/dist/chip-row.js.map +1 -0
- package/dist/chunk-BTTDIVVJ.js +33 -0
- package/dist/chunk-BTTDIVVJ.js.map +1 -0
- package/dist/docs-hub-page.d.ts +7 -1
- package/dist/docs-hub-page.js +2 -2
- package/dist/docs-hub-page.js.map +1 -1
- package/dist/engine-flow.d.ts +97 -0
- package/dist/engine-flow.js +214 -0
- package/dist/engine-flow.js.map +1 -0
- package/dist/motion.css +121 -1
- package/dist/native.d.ts +52 -5
- package/dist/native.js +409 -318
- package/dist/native.js.map +1 -1
- package/package.json +34 -6
- package/registry/account-menu.json +1 -1
- package/registry/achievement.json +1 -1
- package/registry/action-bar.json +1 -1
- package/registry/activity-feed.json +1 -1
- package/registry/alert.json +1 -1
- package/registry/app-header.json +1 -1
- package/registry/app-shell.json +1 -1
- package/registry/argument-card.json +1 -1
- package/registry/audio-player.json +1 -1
- package/registry/auth-layout.json +1 -1
- package/registry/avatar.json +1 -1
- package/registry/badge.json +1 -1
- package/registry/button.json +1 -1
- package/registry/captcha.json +1 -1
- package/registry/card-grid.json +1 -1
- package/registry/card.json +1 -1
- package/registry/catalogue-page.json +1 -1
- package/registry/changelog-page.json +1 -1
- package/registry/chat.json +55 -8
- package/registry/checkbox.json +1 -1
- package/registry/chip-link.json +1 -1
- package/registry/chip-row.json +173 -0
- package/registry/chip.json +1 -1
- package/registry/choice-grid.json +1 -1
- package/registry/code-block.json +1 -1
- package/registry/combobox.json +1 -1
- package/registry/command.json +1 -1
- package/registry/comparison-table.json +1 -1
- package/registry/component-page.json +1 -1
- package/registry/confirm-button.json +1 -1
- package/registry/contact-page.json +1 -1
- package/registry/continue-prompt.json +1 -1
- package/registry/countdown.json +1 -1
- package/registry/cover-hero.json +1 -1
- package/registry/cta-panel.json +1 -1
- package/registry/dashboard-layout.json +1 -1
- package/registry/data-table.json +1 -1
- package/registry/date-picker.json +1 -1
- package/registry/decision-list.json +1 -1
- package/registry/description-list.json +1 -1
- package/registry/detail-layout.json +1 -1
- package/registry/dialog.json +1 -1
- package/registry/docs-article-page.json +1 -1
- package/registry/docs-hub-page.json +16 -2
- package/registry/docs-layout.json +1 -1
- package/registry/docs-nav.json +1 -1
- package/registry/document-viewer.json +1 -1
- package/registry/dropdown-menu.json +1 -1
- package/registry/empty-state.json +1 -1
- package/registry/engine-flow.json +280 -0
- package/registry/error-page.json +1 -1
- package/registry/examples/chat/native/assistant.d.ts +4 -0
- package/registry/examples/chat/native/assistant.dark.png +0 -0
- package/registry/examples/chat/native/assistant.js +32 -0
- package/registry/examples/chat/native/assistant.light.png +0 -0
- package/registry/examples/chat/native/assistant.tsx +28 -0
- package/registry/examples/chip-row/audience.d.ts +4 -0
- package/registry/examples/chip-row/audience.js +15 -0
- package/registry/examples/chip-row/audience.tsx +16 -0
- package/registry/examples/chip-row/many.d.ts +4 -0
- package/registry/examples/chip-row/many.js +12 -0
- package/registry/examples/chip-row/many.tsx +16 -0
- package/registry/examples/engine-flow/compact.d.ts +4 -0
- package/registry/examples/engine-flow/compact.js +33 -0
- package/registry/examples/engine-flow/compact.tsx +30 -0
- package/registry/examples/engine-flow/radial.d.ts +4 -0
- package/registry/examples/engine-flow/radial.js +37 -0
- package/registry/examples/engine-flow/radial.tsx +32 -0
- package/registry/examples/settings-layout/native/account.d.ts +4 -0
- package/registry/examples/settings-layout/native/account.dark.png +0 -0
- package/registry/examples/settings-layout/native/account.js +22 -0
- package/registry/examples/settings-layout/native/account.light.png +0 -0
- package/registry/examples/settings-layout/native/account.tsx +18 -0
- package/registry/field.json +1 -1
- package/registry/file-upload.json +1 -1
- package/registry/filter-bar.json +1 -1
- package/registry/force-update-screen.json +1 -1
- package/registry/form.json +1 -1
- package/registry/gallery-page.json +1 -1
- package/registry/genui.json +1 -1
- package/registry/glow-card.json +1 -1
- package/registry/goal-gauge.json +1 -1
- package/registry/how-it-works-page.json +1 -1
- package/registry/image-cropper.json +1 -1
- package/registry/index.json +74 -11
- package/registry/iso.json +3 -3
- package/registry/kanban.json +1 -1
- package/registry/kbd.json +1 -1
- package/registry/landing-page.json +1 -1
- package/registry/landscape.json +1 -1
- package/registry/language-switch.json +1 -1
- package/registry/legal-page.json +1 -1
- package/registry/link-card.json +1 -1
- package/registry/list.json +1 -1
- package/registry/loader.json +1 -1
- package/registry/longform-page.json +1 -1
- package/registry/maintenance-screen.json +1 -1
- package/registry/map.json +2 -2
- package/registry/markdown.json +1 -1
- package/registry/marketing-layout.json +1 -1
- package/registry/marquee.json +1 -1
- package/registry/mascot-quote.json +1 -1
- package/registry/mascot-state.json +1 -1
- package/registry/mascots.json +1 -1
- package/registry/match-dialog.json +1 -1
- package/registry/media-capture.json +1 -1
- package/registry/media-gallery.json +1 -1
- package/registry/media-grid.json +1 -1
- package/registry/meta-row.json +1 -1
- package/registry/meter.json +1 -1
- package/registry/nav-bar.json +2 -2
- package/registry/number-ticker.json +1 -1
- package/registry/opening-hours.json +1 -1
- package/registry/page-header.json +1 -1
- package/registry/page-hero.json +1 -1
- package/registry/page.json +1 -1
- package/registry/pagination.json +1 -1
- package/registry/photo-grid.json +1 -1
- package/registry/pointer-light.json +1 -1
- package/registry/popover.json +1 -1
- package/registry/pricing-page.json +1 -1
- package/registry/product-page.json +1 -1
- package/registry/profile-card.json +1 -1
- package/registry/progress.json +1 -1
- package/registry/promise-card.json +1 -1
- package/registry/radio-group.json +1 -1
- package/registry/rail-nav.json +2 -2
- package/registry/recipes.json +1 -1
- package/registry/scroll-stage.json +1 -1
- package/registry/search-field.json +1 -1
- package/registry/section-backdrop.json +1 -1
- package/registry/separator.json +1 -1
- package/registry/service-card.json +1 -1
- package/registry/settings-layout.json +110 -7
- package/registry/showcase.json +1 -1
- package/registry/site-footer.json +2 -2
- package/registry/sites.json +1 -1
- package/registry/skeleton.json +1 -1
- package/registry/skip-link.json +1 -1
- package/registry/slider.json +1 -1
- package/registry/slot-picker.json +1 -1
- package/registry/slot.json +1 -1
- package/registry/spinner.json +1 -1
- package/registry/split-view.json +1 -1
- package/registry/stage-banner.json +1 -1
- package/registry/stat.json +1 -1
- package/registry/status-page.json +1 -1
- package/registry/step-progress.json +1 -1
- package/registry/step-showcase.json +1 -1
- package/registry/stepper.json +1 -1
- package/registry/sticky-action.json +1 -1
- package/registry/swipe-deck.json +1 -1
- package/registry/switch.json +1 -1
- package/registry/tabs.json +1 -1
- package/registry/tag-input.json +1 -1
- package/registry/tag-selector.json +1 -1
- package/registry/terminal-replay.json +1 -1
- package/registry/theme.json +1 -1
- package/registry/toast.json +1 -1
- package/registry/toc.json +1 -1
- package/registry/tooltip.json +1 -1
- package/registry/tree-view.json +1 -1
- package/registry/update-prompt.json +1 -1
- package/registry/verified-badge.json +1 -1
- package/registry/vertical-video.json +1 -1
- package/registry/video-player.json +1 -1
- package/registry/video-trimmer.json +1 -1
- package/registry/virtual.json +1 -1
- package/registry/waveform.json +1 -1
package/dist/native.js
CHANGED
|
@@ -1304,7 +1304,7 @@ import { Animated as Animated3, Easing as Easing2, Pressable as Pressable4, Styl
|
|
|
1304
1304
|
import Svg4, { Path as Path2 } from "react-native-svg";
|
|
1305
1305
|
import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1306
1306
|
var STATUS = { sending: "Sending", sent: "Sent", delivered: "Delivered", read: "Read", failed: "Not sent" };
|
|
1307
|
-
function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = "single", labels, style }) {
|
|
1307
|
+
function MessageBubble({ text, children, mine, time, status, showStatus, context, onRetry, grouped = "single", labels, style }) {
|
|
1308
1308
|
const { theme, radius: radius3 } = useTheme();
|
|
1309
1309
|
const words2 = { ...STATUS, ...labels?.status };
|
|
1310
1310
|
const failed = status === "failed";
|
|
@@ -1323,12 +1323,13 @@ function MessageBubble({ text, mine, time, status, showStatus, context, onRetry,
|
|
|
1323
1323
|
],
|
|
1324
1324
|
children: [
|
|
1325
1325
|
context ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: mine ? "onAccent" : "secondary", style: styles8.context, children: context }) : null,
|
|
1326
|
-
/* @__PURE__ */ jsx10(Txt, { tone: tone3, children: text }),
|
|
1326
|
+
children ?? /* @__PURE__ */ jsx10(Txt, { tone: tone3, children: text }),
|
|
1327
1327
|
time ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: tone3, style: styles8.time, children: time }) : null
|
|
1328
1328
|
]
|
|
1329
1329
|
}
|
|
1330
1330
|
);
|
|
1331
|
-
const
|
|
1331
|
+
const rich = children !== void 0 && !text;
|
|
1332
|
+
const name = rich && !failed ? void 0 : [text, time, failed ? `${words2.failed}. ${labels?.retry ?? ""}` : null].filter(Boolean).join(", ");
|
|
1332
1333
|
return /* @__PURE__ */ jsxs7(View7, { style: [styles8.row, mine ? styles8.mine : styles8.theirs, style], children: [
|
|
1333
1334
|
failed && onRetry ? /* @__PURE__ */ jsx10(Pressable4, { role: "button", "aria-label": name, onPress: onRetry, style: styles8.max, children: bubble }) : /* @__PURE__ */ jsx10(View7, { accessible: true, "aria-label": name, style: styles8.max, children: bubble }),
|
|
1334
1335
|
showStatus && status ? /* @__PURE__ */ jsxs7(View7, { style: styles8.status, children: [
|
|
@@ -1362,40 +1363,66 @@ function TypingIndicator({ label, showLabel, style }) {
|
|
|
1362
1363
|
showLabel ? /* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "secondary", children: label }) : null
|
|
1363
1364
|
] });
|
|
1364
1365
|
}
|
|
1365
|
-
function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength = 4e3, style }) {
|
|
1366
|
+
function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, meta, maxLength = 4e3, style }) {
|
|
1366
1367
|
const { theme, radius: radius3, insets, haptic } = useTheme();
|
|
1367
1368
|
const ready = value.trim().length > 0;
|
|
1368
|
-
return /* @__PURE__ */
|
|
1369
|
-
|
|
1370
|
-
/* @__PURE__ */ jsx10(
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1369
|
+
return /* @__PURE__ */ jsxs7(View7, { style: [styles8.composerBox, { borderTopColor: theme.borderSubtle, backgroundColor: theme.surface0, paddingBottom: 8 + insets.bottom }, style], children: [
|
|
1370
|
+
meta && !disabledReason ? /* @__PURE__ */ jsx10(View7, { style: styles8.meta, children: meta }) : null,
|
|
1371
|
+
/* @__PURE__ */ jsx10(View7, { style: styles8.composer, children: disabledReason ? /* @__PURE__ */ jsx10(Txt, { tone: "secondary", style: styles8.flex, children: disabledReason }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1372
|
+
leading,
|
|
1373
|
+
/* @__PURE__ */ jsx10(
|
|
1374
|
+
TextInput,
|
|
1375
|
+
{
|
|
1376
|
+
"aria-label": placeholder,
|
|
1377
|
+
value,
|
|
1378
|
+
onChangeText: onValueChange,
|
|
1379
|
+
placeholder,
|
|
1380
|
+
placeholderTextColor: theme.textMuted,
|
|
1381
|
+
multiline: true,
|
|
1382
|
+
maxLength,
|
|
1383
|
+
style: [styles8.input, { borderRadius: radius3.xl, borderColor: theme.borderDefault, backgroundColor: theme.surface1, color: theme.textPrimary }]
|
|
1384
|
+
}
|
|
1385
|
+
),
|
|
1386
|
+
/* @__PURE__ */ jsx10(
|
|
1387
|
+
Pressable4,
|
|
1388
|
+
{
|
|
1389
|
+
role: "button",
|
|
1390
|
+
"aria-label": sendLabel,
|
|
1391
|
+
"aria-disabled": !ready,
|
|
1392
|
+
disabled: !ready,
|
|
1393
|
+
onPress: () => {
|
|
1394
|
+
haptic("impact");
|
|
1395
|
+
onSend();
|
|
1396
|
+
},
|
|
1397
|
+
style: ({ pressed }) => [styles8.send, { backgroundColor: ready ? pressed ? theme.accentHover : theme.accent : theme.surface3 }],
|
|
1398
|
+
children: /* @__PURE__ */ jsx10(Svg4, { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M4 12l16-8-6 16-2.5-6.5L4 12z", fill: ready ? theme.onAccent : theme.textMuted }) })
|
|
1399
|
+
}
|
|
1400
|
+
)
|
|
1401
|
+
] }) })
|
|
1402
|
+
] });
|
|
1403
|
+
}
|
|
1404
|
+
function ComposerMeta({ model, status }) {
|
|
1405
|
+
const { theme } = useTheme();
|
|
1406
|
+
if (!model && !status) return null;
|
|
1407
|
+
return /* @__PURE__ */ jsxs7(View7, { style: styles8.metaRow, children: [
|
|
1408
|
+
model ? /* @__PURE__ */ jsxs7(
|
|
1384
1409
|
Pressable4,
|
|
1385
1410
|
{
|
|
1386
1411
|
role: "button",
|
|
1387
|
-
"aria-label":
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
style: ({ pressed }) => [styles8.send, { backgroundColor: ready ? pressed ? theme.accentHover : theme.accent : theme.surface3 }],
|
|
1395
|
-
children: /* @__PURE__ */ jsx10(Svg4, { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M4 12l16-8-6 16-2.5-6.5L4 12z", fill: ready ? theme.onAccent : theme.textMuted }) })
|
|
1412
|
+
"aria-label": model.accessibilityLabel ?? model.label,
|
|
1413
|
+
onPress: model.onPress,
|
|
1414
|
+
style: ({ pressed }) => [styles8.modelChip, { borderColor: theme.borderDefault, backgroundColor: pressed ? theme.surface3 : theme.surface1 }],
|
|
1415
|
+
children: [
|
|
1416
|
+
/* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "secondary", style: styles8.bold, children: model.label }),
|
|
1417
|
+
/* @__PURE__ */ jsx10(Svg4, { width: 12, height: 12, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "m6 9 6 6 6-6", fill: "none", stroke: theme.textMuted, strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
1418
|
+
]
|
|
1396
1419
|
}
|
|
1397
|
-
)
|
|
1398
|
-
|
|
1420
|
+
) : null,
|
|
1421
|
+
status ? /* @__PURE__ */ jsxs7(View7, { style: styles8.statusLine, children: [
|
|
1422
|
+
/* @__PURE__ */ jsx10(Svg4, { width: 14, height: 14, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z", fill: "none", stroke: theme.successText, strokeWidth: 2, strokeLinejoin: "round" }) }),
|
|
1423
|
+
/* @__PURE__ */ jsx10(Txt, { variant: "caption", tone: "success", children: status })
|
|
1424
|
+
] }) : null
|
|
1425
|
+
] });
|
|
1399
1426
|
}
|
|
1400
1427
|
function ConversationItem({ name, avatar, presence, presenceLabel, preview, typing, time, unread = 0, unreadLabel, onPress, style }) {
|
|
1401
1428
|
const { theme, radius: radius3 } = useTheme();
|
|
@@ -1436,7 +1463,12 @@ var styles8 = StyleSheet8.create({
|
|
|
1436
1463
|
typingRow: { flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start" },
|
|
1437
1464
|
typing: { flexDirection: "row", gap: 4, paddingHorizontal: 14, paddingVertical: 12 },
|
|
1438
1465
|
dot: { width: 7, height: 7, borderRadius: 4 },
|
|
1439
|
-
|
|
1466
|
+
composerBox: { paddingTop: 8, borderTopWidth: StyleSheet8.hairlineWidth },
|
|
1467
|
+
composer: { flexDirection: "row", alignItems: "flex-end", gap: 8, paddingHorizontal: 12 },
|
|
1468
|
+
meta: { paddingHorizontal: 12, paddingBottom: 6 },
|
|
1469
|
+
metaRow: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 },
|
|
1470
|
+
modelChip: { flexDirection: "row", alignItems: "center", gap: 4, minHeight: 32, paddingHorizontal: 10, borderRadius: 16, borderWidth: StyleSheet8.hairlineWidth },
|
|
1471
|
+
statusLine: { flexDirection: "row", alignItems: "center", gap: 4 },
|
|
1440
1472
|
input: { flex: 1, maxHeight: 120, minHeight: 40, borderWidth: 1, paddingHorizontal: 14, paddingTop: 10, paddingBottom: 10, fontSize: 16 },
|
|
1441
1473
|
send: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center" },
|
|
1442
1474
|
flex: { flex: 1 },
|
|
@@ -4870,11 +4902,67 @@ var styles41 = StyleSheet41.create({
|
|
|
4870
4902
|
disabled: { opacity: 0.4 }
|
|
4871
4903
|
});
|
|
4872
4904
|
|
|
4873
|
-
// src/native/
|
|
4905
|
+
// src/native/settings-layout.tsx
|
|
4874
4906
|
import * as React36 from "react";
|
|
4875
|
-
import {
|
|
4907
|
+
import { Pressable as Pressable21, StyleSheet as StyleSheet42, View as View50 } from "react-native";
|
|
4876
4908
|
import Svg26, { Path as Path22 } from "react-native-svg";
|
|
4877
|
-
import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
4909
|
+
import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
4910
|
+
function SettingsRow({ label, description, icon, value, trailing, onPress, destructive, accessibilityLabel, disabled }) {
|
|
4911
|
+
const { theme } = useTheme();
|
|
4912
|
+
const body = /* @__PURE__ */ jsxs50(Fragment9, { children: [
|
|
4913
|
+
icon ? /* @__PURE__ */ jsx56(View50, { style: [styles42.tile, { backgroundColor: theme.surface3 }], children: icon }) : null,
|
|
4914
|
+
/* @__PURE__ */ jsxs50(View50, { style: styles42.text, children: [
|
|
4915
|
+
/* @__PURE__ */ jsx56(Txt, { variant: "body", tone: destructive ? "danger" : "text", children: label }),
|
|
4916
|
+
description ? /* @__PURE__ */ jsx56(Txt, { variant: "caption", tone: "secondary", children: description }) : null
|
|
4917
|
+
] }),
|
|
4918
|
+
value ? /* @__PURE__ */ jsx56(Txt, { variant: "caption", tone: "secondary", numberOfLines: 1, style: styles42.value, children: value }) : null,
|
|
4919
|
+
trailing,
|
|
4920
|
+
onPress && !trailing ? /* @__PURE__ */ jsx56(Svg26, { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx56(Path22, { d: "m9 6 6 6-6 6", fill: "none", stroke: theme.textMuted, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) }) : null
|
|
4921
|
+
] });
|
|
4922
|
+
if (onPress && !trailing) {
|
|
4923
|
+
return /* @__PURE__ */ jsx56(
|
|
4924
|
+
Pressable21,
|
|
4925
|
+
{
|
|
4926
|
+
role: "button",
|
|
4927
|
+
accessibilityLabel,
|
|
4928
|
+
accessibilityState: { disabled: !!disabled },
|
|
4929
|
+
disabled,
|
|
4930
|
+
onPress,
|
|
4931
|
+
style: ({ pressed }) => [styles42.row, pressed ? { backgroundColor: theme.surface2 } : null, disabled ? styles42.disabled : null],
|
|
4932
|
+
children: body
|
|
4933
|
+
}
|
|
4934
|
+
);
|
|
4935
|
+
}
|
|
4936
|
+
return /* @__PURE__ */ jsx56(View50, { accessible: !trailing, accessibilityLabel: trailing ? void 0 : accessibilityLabel, style: [styles42.row, disabled ? styles42.disabled : null], children: body });
|
|
4937
|
+
}
|
|
4938
|
+
function SettingsGroup({ title, children, style, ...props }) {
|
|
4939
|
+
const { theme } = useTheme();
|
|
4940
|
+
const rows = React36.Children.toArray(children).filter(Boolean);
|
|
4941
|
+
return /* @__PURE__ */ jsxs50(View50, { ...props, style: [styles42.group, style], children: [
|
|
4942
|
+
title ? /* @__PURE__ */ jsx56(Txt, { variant: "caption", tone: "muted", role: "heading", style: styles42.title, children: title }) : null,
|
|
4943
|
+
/* @__PURE__ */ jsx56(View50, { style: [styles42.card, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle }], children: rows.map((row, i) => /* @__PURE__ */ jsxs50(React36.Fragment, { children: [
|
|
4944
|
+
i > 0 ? /* @__PURE__ */ jsx56(View50, { style: [styles42.hairline, { backgroundColor: theme.borderSubtle }] }) : null,
|
|
4945
|
+
row
|
|
4946
|
+
] }, i)) })
|
|
4947
|
+
] });
|
|
4948
|
+
}
|
|
4949
|
+
var styles42 = StyleSheet42.create({
|
|
4950
|
+
group: { rowGap: 8 },
|
|
4951
|
+
title: { textTransform: "uppercase", letterSpacing: 0.6, fontWeight: "700", paddingHorizontal: 4 },
|
|
4952
|
+
card: { borderWidth: StyleSheet42.hairlineWidth, borderRadius: 16, overflow: "hidden" },
|
|
4953
|
+
hairline: { height: StyleSheet42.hairlineWidth, marginLeft: 16 },
|
|
4954
|
+
row: { minHeight: 52, flexDirection: "row", alignItems: "center", columnGap: 12, paddingHorizontal: 16, paddingVertical: 10 },
|
|
4955
|
+
tile: { width: 32, height: 32, borderRadius: 8, alignItems: "center", justifyContent: "center" },
|
|
4956
|
+
text: { flex: 1, rowGap: 2 },
|
|
4957
|
+
value: { maxWidth: "45%" },
|
|
4958
|
+
disabled: { opacity: 0.5 }
|
|
4959
|
+
});
|
|
4960
|
+
|
|
4961
|
+
// src/native/showcase.tsx
|
|
4962
|
+
import * as React37 from "react";
|
|
4963
|
+
import { Animated as Animated21, AppState, Easing as Easing12, FlatList, Pressable as Pressable22, StyleSheet as StyleSheet43, View as View51 } from "react-native";
|
|
4964
|
+
import Svg27, { Path as Path23 } from "react-native-svg";
|
|
4965
|
+
import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
4878
4966
|
var showcaseLabels = {
|
|
4879
4967
|
previous: "Previous slide",
|
|
4880
4968
|
next: "Next slide",
|
|
@@ -4888,16 +4976,16 @@ function Showcase({ label, items: items2, getId, renderItem, getTitle, interval
|
|
|
4888
4976
|
const { theme } = useTheme();
|
|
4889
4977
|
const reduced = useReducedMotion();
|
|
4890
4978
|
const total = items2.length;
|
|
4891
|
-
const [current, setCurrent] =
|
|
4892
|
-
const [width, setWidth] =
|
|
4893
|
-
const [paused, setPaused] =
|
|
4894
|
-
const [dragging, setDragging] =
|
|
4895
|
-
const [background, setBackground] =
|
|
4896
|
-
const [announce, setAnnounce] =
|
|
4897
|
-
const list =
|
|
4898
|
-
const [fill] =
|
|
4899
|
-
const progress =
|
|
4900
|
-
|
|
4979
|
+
const [current, setCurrent] = React37.useState(0);
|
|
4980
|
+
const [width, setWidth] = React37.useState(0);
|
|
4981
|
+
const [paused, setPaused] = React37.useState(false);
|
|
4982
|
+
const [dragging, setDragging] = React37.useState(false);
|
|
4983
|
+
const [background, setBackground] = React37.useState(false);
|
|
4984
|
+
const [announce, setAnnounce] = React37.useState(false);
|
|
4985
|
+
const list = React37.useRef(null);
|
|
4986
|
+
const [fill] = React37.useState(() => new Animated21.Value(0));
|
|
4987
|
+
const progress = React37.useRef(0);
|
|
4988
|
+
React37.useEffect(() => {
|
|
4901
4989
|
const id = fill.addListener(({ value }) => {
|
|
4902
4990
|
progress.current = value;
|
|
4903
4991
|
});
|
|
@@ -4918,11 +5006,11 @@ function Showcase({ label, items: items2, getId, renderItem, getTitle, interval
|
|
|
4918
5006
|
};
|
|
4919
5007
|
const playing = autoplay && !reduced && total > 1;
|
|
4920
5008
|
const running = playing && !paused && !dragging && !background && !(!loop && current === total - 1);
|
|
4921
|
-
|
|
5009
|
+
React37.useEffect(() => {
|
|
4922
5010
|
fill.setValue(0);
|
|
4923
5011
|
progress.current = 0;
|
|
4924
5012
|
}, [current, fill]);
|
|
4925
|
-
|
|
5013
|
+
React37.useEffect(() => {
|
|
4926
5014
|
if (!running) return;
|
|
4927
5015
|
const animation = Animated21.timing(fill, { toValue: 1, duration: Math.max(1, interval * (1 - progress.current)), easing: Easing12.linear, useNativeDriver: false });
|
|
4928
5016
|
animation.start(({ finished }) => {
|
|
@@ -4932,10 +5020,10 @@ function Showcase({ label, items: items2, getId, renderItem, getTitle, interval
|
|
|
4932
5020
|
}, [running, current, interval]);
|
|
4933
5021
|
const item = items2[current];
|
|
4934
5022
|
const title = item !== void 0 ? getTitle?.(item) : void 0;
|
|
4935
|
-
const control = [
|
|
4936
|
-
const icon = (d) => /* @__PURE__ */
|
|
4937
|
-
return /* @__PURE__ */
|
|
4938
|
-
/* @__PURE__ */
|
|
5023
|
+
const control = [styles43.control, { borderColor: theme.borderDefault, backgroundColor: theme.surface1 }];
|
|
5024
|
+
const icon = (d) => /* @__PURE__ */ jsx57(Svg27, { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx57(Path23, { d, stroke: theme.textSecondary, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
5025
|
+
return /* @__PURE__ */ jsxs51(View51, { role: "group", "aria-label": label, style: [styles43.root, style], children: [
|
|
5026
|
+
/* @__PURE__ */ jsx57(View51, { "aria-live": announce ? "polite" : "off", onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: /* @__PURE__ */ jsx57(
|
|
4939
5027
|
FlatList,
|
|
4940
5028
|
{
|
|
4941
5029
|
ref: list,
|
|
@@ -4956,25 +5044,25 @@ function Showcase({ label, items: items2, getId, renderItem, getTitle, interval
|
|
|
4956
5044
|
onIndexChange?.(next, true);
|
|
4957
5045
|
}
|
|
4958
5046
|
},
|
|
4959
|
-
renderItem: ({ item: slide, index }) => /* @__PURE__ */
|
|
5047
|
+
renderItem: ({ item: slide, index }) => /* @__PURE__ */ jsx57(View51, { role: "group", "aria-label": labels.slide(index + 1, total), style: { width }, children: Math.abs(index - current) <= 1 ? renderItem(slide, { index, active: index === current }) : null })
|
|
4960
5048
|
}
|
|
4961
5049
|
) }),
|
|
4962
|
-
/* @__PURE__ */
|
|
4963
|
-
i < current || i === current && !playing ? /* @__PURE__ */
|
|
4964
|
-
i === current && playing ? /* @__PURE__ */
|
|
5050
|
+
/* @__PURE__ */ jsx57(View51, { style: styles43.segments, children: items2.map((slide, i) => /* @__PURE__ */ jsx57(Pressable22, { role: "button", "aria-label": labels.goTo(i + 1, total), "aria-current": i === current ? true : void 0, onPress: () => go(i, true), style: styles43.segment, children: /* @__PURE__ */ jsxs51(View51, { style: [styles43.track, { backgroundColor: theme.surface3 }], children: [
|
|
5051
|
+
i < current || i === current && !playing ? /* @__PURE__ */ jsx57(View51, { style: [StyleSheet43.absoluteFill, { backgroundColor: theme.accent }] }) : null,
|
|
5052
|
+
i === current && playing ? /* @__PURE__ */ jsx57(Animated21.View, { style: [styles43.fill, { backgroundColor: theme.accent, width: fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) }] }) : null
|
|
4965
5053
|
] }) }, getId(slide))) }),
|
|
4966
|
-
/* @__PURE__ */
|
|
4967
|
-
/* @__PURE__ */
|
|
5054
|
+
/* @__PURE__ */ jsxs51(View51, { style: styles43.bar, children: [
|
|
5055
|
+
/* @__PURE__ */ jsxs51(Txt, { variant: "caption", tone: "secondary", numberOfLines: 1, style: styles43.counter, children: [
|
|
4968
5056
|
title ? `${title} \xB7 ` : "",
|
|
4969
5057
|
labels.counter(current + 1, total)
|
|
4970
5058
|
] }),
|
|
4971
|
-
/* @__PURE__ */
|
|
4972
|
-
playing ? /* @__PURE__ */
|
|
4973
|
-
/* @__PURE__ */
|
|
5059
|
+
/* @__PURE__ */ jsx57(Pressable22, { role: "button", "aria-label": labels.previous, disabled: !loop && current === 0, hitSlop: 6, onPress: () => go(current - 1, true), style: control, children: icon("M15 5l-7 7 7 7") }),
|
|
5060
|
+
playing ? /* @__PURE__ */ jsx57(Pressable22, { role: "button", "aria-label": paused ? labels.play : labels.pause, hitSlop: 6, onPress: () => setPaused(!paused), style: control, children: icon(paused ? "M8 5.5v13l10-6.5Z" : "M8 5v14M16 5v14") }) : null,
|
|
5061
|
+
/* @__PURE__ */ jsx57(Pressable22, { role: "button", "aria-label": labels.next, disabled: !loop && current === total - 1, hitSlop: 6, onPress: () => go(current + 1, true), style: control, children: icon("M9 5l7 7-7 7") })
|
|
4974
5062
|
] })
|
|
4975
5063
|
] });
|
|
4976
5064
|
}
|
|
4977
|
-
var
|
|
5065
|
+
var styles43 = StyleSheet43.create({
|
|
4978
5066
|
root: { gap: 8 },
|
|
4979
5067
|
segments: { flexDirection: "row", gap: 4 },
|
|
4980
5068
|
segment: { flex: 1, height: 24, justifyContent: "center" },
|
|
@@ -4986,9 +5074,9 @@ var styles42 = StyleSheet42.create({
|
|
|
4986
5074
|
});
|
|
4987
5075
|
|
|
4988
5076
|
// src/native/skeleton.tsx
|
|
4989
|
-
import * as
|
|
5077
|
+
import * as React38 from "react";
|
|
4990
5078
|
import { Animated as Animated22 } from "react-native";
|
|
4991
|
-
import { jsx as
|
|
5079
|
+
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
4992
5080
|
var SHAPE = {
|
|
4993
5081
|
text: { width: "100%", height: 12, radius: 4 },
|
|
4994
5082
|
circle: { width: 40, height: 40, radius: 9999 },
|
|
@@ -4997,8 +5085,8 @@ var SHAPE = {
|
|
|
4997
5085
|
function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
4998
5086
|
const { theme } = useTheme();
|
|
4999
5087
|
const reduce = useReducedMotion();
|
|
5000
|
-
const [opacity] =
|
|
5001
|
-
|
|
5088
|
+
const [opacity] = React38.useState(() => new Animated22.Value(1));
|
|
5089
|
+
React38.useEffect(() => {
|
|
5002
5090
|
if (reduce) return;
|
|
5003
5091
|
const loop = Animated22.loop(
|
|
5004
5092
|
Animated22.sequence([
|
|
@@ -5014,7 +5102,7 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
|
5014
5102
|
}, [reduce, opacity]);
|
|
5015
5103
|
const s = SHAPE[shape];
|
|
5016
5104
|
const side = shape === "circle" ? width ?? height ?? s.width : void 0;
|
|
5017
|
-
return /* @__PURE__ */
|
|
5105
|
+
return /* @__PURE__ */ jsx58(
|
|
5018
5106
|
Animated22.View,
|
|
5019
5107
|
{
|
|
5020
5108
|
testID,
|
|
@@ -5028,10 +5116,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
|
|
|
5028
5116
|
}
|
|
5029
5117
|
|
|
5030
5118
|
// src/native/slider.tsx
|
|
5031
|
-
import * as
|
|
5032
|
-
import { PanResponder as PanResponder2, StyleSheet as
|
|
5033
|
-
import
|
|
5034
|
-
import { jsx as
|
|
5119
|
+
import * as React39 from "react";
|
|
5120
|
+
import { PanResponder as PanResponder2, StyleSheet as StyleSheet44, Text as Text17, View as View52 } from "react-native";
|
|
5121
|
+
import Svg28, { Defs as Defs14, LinearGradient as LinearGradient11, Rect as Rect4, Stop as Stop14 } from "react-native-svg";
|
|
5122
|
+
import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
5035
5123
|
var THUMB = 26;
|
|
5036
5124
|
var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : [...v];
|
|
5037
5125
|
function Slider({
|
|
@@ -5057,20 +5145,20 @@ function Slider({
|
|
|
5057
5145
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
5058
5146
|
const range = Array.isArray(value ?? defaultValue);
|
|
5059
5147
|
const vertical = orientation === "vertical";
|
|
5060
|
-
const [inner, setInner] =
|
|
5148
|
+
const [inner, setInner] = React39.useState(() => toArray(defaultValue) ?? [min]);
|
|
5061
5149
|
const current = toArray(value) ?? inner;
|
|
5062
|
-
const [length, setLength] =
|
|
5063
|
-
const [dragging, setDragging] =
|
|
5150
|
+
const [length, setLength] = React39.useState(0);
|
|
5151
|
+
const [dragging, setDragging] = React39.useState(null);
|
|
5064
5152
|
const gradientId = useSvgId("kzs");
|
|
5065
5153
|
const out = (next) => range ? [next[0], next[1]] : next[0];
|
|
5066
5154
|
const snap = (v) => Math.min(max, Math.max(min, Math.round((v - min) / step) * step + min));
|
|
5067
5155
|
const pct = (v) => (v - min) / (max - min || 1);
|
|
5068
|
-
const live =
|
|
5069
|
-
|
|
5156
|
+
const live = React39.useRef({ current, length, vertical, disabled });
|
|
5157
|
+
React39.useLayoutEffect(() => {
|
|
5070
5158
|
live.current = { current, length, vertical, disabled };
|
|
5071
5159
|
});
|
|
5072
|
-
const active =
|
|
5073
|
-
const start =
|
|
5160
|
+
const active = React39.useRef(0);
|
|
5161
|
+
const start = React39.useRef(0);
|
|
5074
5162
|
const set = (next) => {
|
|
5075
5163
|
if (value === void 0) setInner(next);
|
|
5076
5164
|
onValueChange?.(out(next));
|
|
@@ -5091,11 +5179,11 @@ function Slider({
|
|
|
5091
5179
|
return min + p * (max - min);
|
|
5092
5180
|
};
|
|
5093
5181
|
const commit = () => onValueCommit?.(out(live.current.current));
|
|
5094
|
-
const handlers =
|
|
5095
|
-
|
|
5182
|
+
const handlers = React39.useRef({ move, at, commit });
|
|
5183
|
+
React39.useLayoutEffect(() => {
|
|
5096
5184
|
handlers.current = { move, at, commit };
|
|
5097
5185
|
});
|
|
5098
|
-
const [responder] =
|
|
5186
|
+
const [responder] = React39.useState(
|
|
5099
5187
|
() => PanResponder2.create({
|
|
5100
5188
|
onStartShouldSetPanResponder: () => !live.current.disabled,
|
|
5101
5189
|
onMoveShouldSetPanResponder: () => !live.current.disabled,
|
|
@@ -5123,24 +5211,24 @@ function Slider({
|
|
|
5123
5211
|
const along = (p) => vertical ? { bottom: p * length } : { left: p * length };
|
|
5124
5212
|
const onLayout = (e) => setLength(vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width);
|
|
5125
5213
|
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 };
|
|
5126
|
-
return /* @__PURE__ */
|
|
5127
|
-
showLabel ? /* @__PURE__ */
|
|
5128
|
-
/* @__PURE__ */
|
|
5129
|
-
/* @__PURE__ */
|
|
5214
|
+
return /* @__PURE__ */ jsxs52(View52, { style: [styles44.root, vertical ? styles44.rootVertical : null, disabled ? styles44.disabled : null, style], children: [
|
|
5215
|
+
showLabel ? /* @__PURE__ */ jsxs52(View52, { style: styles44.header, children: [
|
|
5216
|
+
/* @__PURE__ */ jsx59(Text17, { style: [styles44.label, { color: theme.textSecondary }], children: label }),
|
|
5217
|
+
/* @__PURE__ */ jsx59(Text17, { "aria-hidden": true, style: [styles44.value, { color: theme.textSecondary }], children: current.map(formatValue).join(" \u2013 ") })
|
|
5130
5218
|
] }) : null,
|
|
5131
|
-
/* @__PURE__ */
|
|
5132
|
-
/* @__PURE__ */
|
|
5133
|
-
/* @__PURE__ */
|
|
5134
|
-
/* @__PURE__ */
|
|
5135
|
-
/* @__PURE__ */
|
|
5136
|
-
/* @__PURE__ */
|
|
5219
|
+
/* @__PURE__ */ jsxs52(View52, { ...responder.panHandlers, style: vertical ? styles44.controlVertical : styles44.control, children: [
|
|
5220
|
+
/* @__PURE__ */ jsxs52(View52, { onLayout, pointerEvents: "none", style: [vertical ? styles44.trackVertical : styles44.track, { borderRadius: radius3.full, backgroundColor: theme.surface3 }], children: [
|
|
5221
|
+
/* @__PURE__ */ jsx59(View52, { style: [styles44.fill, fill, { borderRadius: radius3.full, overflow: "hidden", backgroundColor: theme.accent }], children: tone3 === "gradient" ? /* @__PURE__ */ jsxs52(Svg28, { width: "100%", height: "100%", "aria-hidden": true, children: [
|
|
5222
|
+
/* @__PURE__ */ jsx59(Defs14, { children: /* @__PURE__ */ jsxs52(LinearGradient11, { id: gradientId, x1: "0", y1: vertical ? "1" : "0", x2: vertical ? "0" : "1", y2: "0", children: [
|
|
5223
|
+
/* @__PURE__ */ jsx59(Stop14, { offset: "0", stopColor: theme.accent }),
|
|
5224
|
+
/* @__PURE__ */ jsx59(Stop14, { offset: "1", stopColor: theme.accent2 })
|
|
5137
5225
|
] }) }),
|
|
5138
|
-
/* @__PURE__ */
|
|
5226
|
+
/* @__PURE__ */ jsx59(Rect4, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
|
|
5139
5227
|
] }) : null }),
|
|
5140
|
-
tickValues.map((t) => /* @__PURE__ */
|
|
5228
|
+
tickValues.map((t) => /* @__PURE__ */ jsx59(View52, { style: [vertical ? styles44.tickVertical : styles44.tick, along(pct(t)), { backgroundColor: t > lo && t < hi ? theme.onAccent : theme.borderStrong }] }, t))
|
|
5141
5229
|
] }),
|
|
5142
|
-
current.map((v, i) => /* @__PURE__ */
|
|
5143
|
-
|
|
5230
|
+
current.map((v, i) => /* @__PURE__ */ jsx59(
|
|
5231
|
+
View52,
|
|
5144
5232
|
{
|
|
5145
5233
|
accessible: true,
|
|
5146
5234
|
role: "slider",
|
|
@@ -5159,16 +5247,16 @@ function Slider({
|
|
|
5159
5247
|
onValueCommit?.(out(values));
|
|
5160
5248
|
},
|
|
5161
5249
|
pointerEvents: "none",
|
|
5162
|
-
style: [
|
|
5163
|
-
children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */
|
|
5250
|
+
style: [styles44.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 }],
|
|
5251
|
+
children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */ jsx59(View52, { "aria-hidden": true, style: [vertical ? styles44.bubbleVertical : styles44.bubble, { backgroundColor: theme.textPrimary, borderRadius: radius3.md }], children: /* @__PURE__ */ jsx59(Text17, { style: [styles44.bubbleText, { color: theme.surface0 }], children: formatValue(v) }) }) : null
|
|
5164
5252
|
},
|
|
5165
5253
|
i
|
|
5166
5254
|
))
|
|
5167
5255
|
] }),
|
|
5168
|
-
marks2?.length && !vertical ? /* @__PURE__ */
|
|
5256
|
+
marks2?.length && !vertical ? /* @__PURE__ */ jsx59(View52, { "aria-hidden": true, style: styles44.marks, children: marks2.map((m) => /* @__PURE__ */ jsx59(Text17, { style: [styles44.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
|
|
5169
5257
|
] });
|
|
5170
5258
|
}
|
|
5171
|
-
var
|
|
5259
|
+
var styles44 = StyleSheet44.create({
|
|
5172
5260
|
root: { gap: 8, alignSelf: "stretch" },
|
|
5173
5261
|
rootVertical: { alignSelf: "flex-start", alignItems: "center" },
|
|
5174
5262
|
header: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
|
|
@@ -5204,10 +5292,10 @@ var styles43 = StyleSheet43.create({
|
|
|
5204
5292
|
|
|
5205
5293
|
// src/native/spinner.tsx
|
|
5206
5294
|
import { ActivityIndicator as ActivityIndicator2 } from "react-native";
|
|
5207
|
-
import { jsx as
|
|
5295
|
+
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
5208
5296
|
function Spinner({ label, size = "md", ...props }) {
|
|
5209
5297
|
const { theme } = useTheme();
|
|
5210
|
-
return /* @__PURE__ */
|
|
5298
|
+
return /* @__PURE__ */ jsx60(
|
|
5211
5299
|
ActivityIndicator2,
|
|
5212
5300
|
{
|
|
5213
5301
|
accessible: true,
|
|
@@ -5222,15 +5310,15 @@ function Spinner({ label, size = "md", ...props }) {
|
|
|
5222
5310
|
}
|
|
5223
5311
|
|
|
5224
5312
|
// src/native/splash-handoff.tsx
|
|
5225
|
-
import * as
|
|
5226
|
-
import { Animated as Animated23, Easing as Easing13, StyleSheet as
|
|
5227
|
-
import { jsx as
|
|
5313
|
+
import * as React40 from "react";
|
|
5314
|
+
import { Animated as Animated23, Easing as Easing13, StyleSheet as StyleSheet45, View as View53 } from "react-native";
|
|
5315
|
+
import { jsx as jsx61 } from "react/jsx-runtime";
|
|
5228
5316
|
function SplashHandoff({ product, ready, onShown, onDone, size = 96, background, label, duration = 320, style }) {
|
|
5229
5317
|
const { theme } = useTheme();
|
|
5230
5318
|
const reduce = useReducedMotion();
|
|
5231
|
-
const [opacity] =
|
|
5232
|
-
const [gone, setGone] =
|
|
5233
|
-
|
|
5319
|
+
const [opacity] = React40.useState(() => new Animated23.Value(1));
|
|
5320
|
+
const [gone, setGone] = React40.useState(false);
|
|
5321
|
+
React40.useEffect(() => {
|
|
5234
5322
|
if (!ready) return;
|
|
5235
5323
|
const animation = Animated23.timing(opacity, { toValue: 0, duration: reduce ? 0 : duration, easing: Easing13.out(Easing13.ease), useNativeDriver: true });
|
|
5236
5324
|
animation.start(({ finished }) => {
|
|
@@ -5242,7 +5330,7 @@ function SplashHandoff({ product, ready, onShown, onDone, size = 96, background,
|
|
|
5242
5330
|
return () => animation.stop();
|
|
5243
5331
|
}, [ready, reduce, duration, opacity, onDone]);
|
|
5244
5332
|
if (gone) return null;
|
|
5245
|
-
return /* @__PURE__ */
|
|
5333
|
+
return /* @__PURE__ */ jsx61(
|
|
5246
5334
|
Animated23.View,
|
|
5247
5335
|
{
|
|
5248
5336
|
accessible: true,
|
|
@@ -5251,30 +5339,30 @@ function SplashHandoff({ product, ready, onShown, onDone, size = 96, background,
|
|
|
5251
5339
|
"aria-busy": true,
|
|
5252
5340
|
pointerEvents: ready ? "none" : "auto",
|
|
5253
5341
|
onLayout: onShown,
|
|
5254
|
-
style: [
|
|
5255
|
-
children: /* @__PURE__ */
|
|
5342
|
+
style: [StyleSheet45.absoluteFill, styles45.root, { backgroundColor: background ?? theme.surface0, opacity }, style],
|
|
5343
|
+
children: /* @__PURE__ */ jsx61(View53, { children: /* @__PURE__ */ jsx61(ProductMark, { id: product, size, animated: true }) })
|
|
5256
5344
|
}
|
|
5257
5345
|
);
|
|
5258
5346
|
}
|
|
5259
|
-
var
|
|
5347
|
+
var styles45 = StyleSheet45.create({ root: { alignItems: "center", justifyContent: "center", zIndex: 100 } });
|
|
5260
5348
|
|
|
5261
5349
|
// src/native/step-progress.tsx
|
|
5262
|
-
import { Pressable as
|
|
5263
|
-
import
|
|
5264
|
-
import { jsx as
|
|
5350
|
+
import { Pressable as Pressable23, StyleSheet as StyleSheet46, View as View54 } from "react-native";
|
|
5351
|
+
import Svg29, { Path as Path24 } from "react-native-svg";
|
|
5352
|
+
import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
5265
5353
|
function StepProgress({ step, total, label, backLabel, onBack, trailing, style }) {
|
|
5266
5354
|
const { theme, insets } = useTheme();
|
|
5267
5355
|
const words2 = label(step, total);
|
|
5268
|
-
return /* @__PURE__ */
|
|
5269
|
-
/* @__PURE__ */
|
|
5270
|
-
onBack && backLabel ? /* @__PURE__ */
|
|
5271
|
-
/* @__PURE__ */
|
|
5272
|
-
/* @__PURE__ */
|
|
5356
|
+
return /* @__PURE__ */ jsxs53(View54, { style: [styles46.root, { paddingTop: insets.top + 8 }, style], children: [
|
|
5357
|
+
/* @__PURE__ */ jsxs53(View54, { style: styles46.row, children: [
|
|
5358
|
+
onBack && backLabel ? /* @__PURE__ */ jsx62(Pressable23, { role: "button", "aria-label": backLabel, hitSlop: 10, onPress: onBack, style: styles46.back, children: /* @__PURE__ */ jsx62(Svg29, { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx62(Path24, { d: "M15 5l-7 7 7 7", stroke: theme.textPrimary, strokeWidth: 2.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : /* @__PURE__ */ jsx62(View54, { style: styles46.back }),
|
|
5359
|
+
/* @__PURE__ */ jsx62(View54, { accessible: true, role: "progressbar", "aria-label": words2, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words2, style: styles46.bars, children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx62(View54, { style: [styles46.bar, { backgroundColor: i < step ? theme.accent : theme.surface3 }] }, i)) }),
|
|
5360
|
+
/* @__PURE__ */ jsx62(View54, { style: styles46.trailing, children: trailing })
|
|
5273
5361
|
] }),
|
|
5274
|
-
/* @__PURE__ */
|
|
5362
|
+
/* @__PURE__ */ jsx62(Txt, { variant: "caption", tone: "secondary", style: styles46.words, "aria-hidden": true, children: words2 })
|
|
5275
5363
|
] });
|
|
5276
5364
|
}
|
|
5277
|
-
var
|
|
5365
|
+
var styles46 = StyleSheet46.create({
|
|
5278
5366
|
root: { paddingHorizontal: 12, gap: 6 },
|
|
5279
5367
|
row: { flexDirection: "row", alignItems: "center", gap: 8 },
|
|
5280
5368
|
back: { width: 40, height: 40, alignItems: "center", justifyContent: "center" },
|
|
@@ -5285,36 +5373,36 @@ var styles45 = StyleSheet45.create({
|
|
|
5285
5373
|
});
|
|
5286
5374
|
|
|
5287
5375
|
// src/native/stepper.tsx
|
|
5288
|
-
import { StyleSheet as
|
|
5289
|
-
import
|
|
5290
|
-
import { jsx as
|
|
5376
|
+
import { StyleSheet as StyleSheet47, View as View55 } from "react-native";
|
|
5377
|
+
import Svg30, { Circle as Circle16, Path as Path25 } from "react-native-svg";
|
|
5378
|
+
import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
5291
5379
|
var WORDS = { done: "done", current: "in progress", upcoming: "to come", error: "failed" };
|
|
5292
5380
|
function Stepper({ steps, current = 0, orientation = "vertical", statusLabels, "aria-label": label, style }) {
|
|
5293
5381
|
const { theme } = useTheme();
|
|
5294
5382
|
const words2 = { ...WORDS, ...statusLabels };
|
|
5295
5383
|
const vertical = orientation === "vertical";
|
|
5296
|
-
return /* @__PURE__ */
|
|
5384
|
+
return /* @__PURE__ */ jsx63(View55, { role: "list", "aria-label": label, style: [vertical ? styles47.column : styles47.row, style], children: steps.map((step, i) => {
|
|
5297
5385
|
const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
|
|
5298
5386
|
const last = i === steps.length - 1;
|
|
5299
|
-
const node = status === "current" ? /* @__PURE__ */
|
|
5300
|
-
/* @__PURE__ */
|
|
5301
|
-
status === "done" ? /* @__PURE__ */
|
|
5387
|
+
const node = status === "current" ? /* @__PURE__ */ jsx63(LoaderGlyph, { value: step.value ?? null, size: 24 }) : status === "error" ? /* @__PURE__ */ jsx63(LoaderGlyph, { state: "error", size: 24 }) : /* @__PURE__ */ jsxs54(Svg30, { width: 24, height: 24, viewBox: "0 0 24 24", "aria-hidden": true, children: [
|
|
5388
|
+
/* @__PURE__ */ jsx63(Circle16, { cx: 12, cy: 12, r: 10, fill: status === "done" ? theme.accent : "none", stroke: status === "done" ? theme.accent : theme.borderStrong, strokeWidth: 2 }),
|
|
5389
|
+
status === "done" ? /* @__PURE__ */ jsx63(Path25, { d: "M7.5 12.3l3 3 6-6.3", stroke: theme.onAccent, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) : null
|
|
5302
5390
|
] });
|
|
5303
|
-
const connector = !last ? /* @__PURE__ */
|
|
5304
|
-
return /* @__PURE__ */
|
|
5305
|
-
/* @__PURE__ */
|
|
5391
|
+
const connector = !last ? /* @__PURE__ */ jsx63(View55, { "aria-hidden": true, style: [vertical ? styles47.vLine : styles47.hLine, { backgroundColor: status === "done" ? theme.accent : theme.borderDefault }] }) : null;
|
|
5392
|
+
return /* @__PURE__ */ jsxs54(View55, { role: "listitem", accessible: true, "aria-label": `${step.title}, ${words2[status]}`, style: vertical ? styles47.vStep : styles47.hStep, children: [
|
|
5393
|
+
/* @__PURE__ */ jsxs54(View55, { style: vertical ? styles47.vRail : styles47.hRail, children: [
|
|
5306
5394
|
node,
|
|
5307
5395
|
connector
|
|
5308
5396
|
] }),
|
|
5309
|
-
/* @__PURE__ */
|
|
5310
|
-
/* @__PURE__ */
|
|
5311
|
-
step.description ? /* @__PURE__ */
|
|
5312
|
-
step.content && (status === "current" || status === "error") ? /* @__PURE__ */
|
|
5397
|
+
/* @__PURE__ */ jsxs54(View55, { style: [styles47.body, vertical && !last ? { paddingBottom: 20 } : null], children: [
|
|
5398
|
+
/* @__PURE__ */ jsx63(Txt, { variant: "label", tone: status === "upcoming" ? "secondary" : "text", numberOfLines: vertical ? void 0 : 2, children: step.title }),
|
|
5399
|
+
step.description ? /* @__PURE__ */ jsx63(Txt, { variant: "caption", tone: "secondary", children: step.description }) : null,
|
|
5400
|
+
step.content && (status === "current" || status === "error") ? /* @__PURE__ */ jsx63(View55, { style: styles47.content, children: step.content }) : null
|
|
5313
5401
|
] })
|
|
5314
5402
|
] }, i);
|
|
5315
5403
|
}) });
|
|
5316
5404
|
}
|
|
5317
|
-
var
|
|
5405
|
+
var styles47 = StyleSheet47.create({
|
|
5318
5406
|
column: { gap: 0 },
|
|
5319
5407
|
row: { flexDirection: "row" },
|
|
5320
5408
|
vStep: { flexDirection: "row", gap: 12 },
|
|
@@ -5328,59 +5416,59 @@ var styles46 = StyleSheet46.create({
|
|
|
5328
5416
|
});
|
|
5329
5417
|
|
|
5330
5418
|
// src/native/swipe-deck.tsx
|
|
5331
|
-
import * as
|
|
5332
|
-
import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated24, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as
|
|
5333
|
-
import
|
|
5334
|
-
import { Fragment as
|
|
5419
|
+
import * as React41 from "react";
|
|
5420
|
+
import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated24, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as Pressable24, StyleSheet as StyleSheet48, useWindowDimensions as useWindowDimensions2, View as View56 } from "react-native";
|
|
5421
|
+
import Svg31, { Defs as Defs15, LinearGradient as LinearGradient12, Path as Path26, Rect as Rect5, Stop as Stop15 } from "react-native-svg";
|
|
5422
|
+
import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
5335
5423
|
function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabel = (n, t) => `Photo ${n} of ${t}`, style }) {
|
|
5336
5424
|
const { theme, radius: radius3 } = useTheme();
|
|
5337
|
-
const [index, setIndex] =
|
|
5425
|
+
const [index, setIndex] = React41.useState(0);
|
|
5338
5426
|
const gradient = useSvgId("kz-profile-");
|
|
5339
|
-
const [box, setBox] =
|
|
5427
|
+
const [box, setBox] = React41.useState(null);
|
|
5340
5428
|
const photo = photos[index];
|
|
5341
|
-
return /* @__PURE__ */
|
|
5342
|
-
|
|
5429
|
+
return /* @__PURE__ */ jsxs55(
|
|
5430
|
+
View56,
|
|
5343
5431
|
{
|
|
5344
5432
|
accessible: Platform4.OS !== "web",
|
|
5345
5433
|
accessibilityActions: photos.length > 1 ? [{ name: "increment" }, { name: "decrement" }] : [],
|
|
5346
5434
|
onAccessibilityAction: (e) => setIndex((i) => Math.max(0, Math.min(photos.length - 1, i + (e.nativeEvent.actionName === "increment" ? 1 : -1)))),
|
|
5347
5435
|
role: Platform4.OS === "web" ? "group" : "img",
|
|
5348
5436
|
"aria-label": [`${name}${age !== void 0 ? `, ${age}` : ""}`, bio, photos.length > 1 ? photoLabel(index + 1, photos.length) : null].filter(Boolean).join(". "),
|
|
5349
|
-
style: [
|
|
5437
|
+
style: [styles48.card, { borderRadius: radius3.xl, backgroundColor: theme.media }, style],
|
|
5350
5438
|
children: [
|
|
5351
|
-
photo ? /* @__PURE__ */
|
|
5352
|
-
photos.length > 1 ? /* @__PURE__ */
|
|
5353
|
-
/* @__PURE__ */
|
|
5354
|
-
/* @__PURE__ */
|
|
5355
|
-
/* @__PURE__ */
|
|
5439
|
+
photo ? /* @__PURE__ */ jsx64(Image5, { testID: "person-card-photo", source: { uri: photo.uri }, style: StyleSheet48.absoluteFill, resizeMode: "cover" }) : null,
|
|
5440
|
+
photos.length > 1 ? /* @__PURE__ */ jsxs55(Fragment10, { children: [
|
|
5441
|
+
/* @__PURE__ */ jsx64(View56, { style: styles48.bars, "aria-hidden": true, children: photos.map((_, i) => /* @__PURE__ */ jsx64(View56, { style: [styles48.bar, { backgroundColor: theme.textOnMedia, opacity: i === index ? 1 : 0.4 }] }, i)) }),
|
|
5442
|
+
/* @__PURE__ */ jsx64(Pressable24, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles48.half, { left: 0 }], onPress: () => setIndex((i) => Math.max(0, i - 1)) }),
|
|
5443
|
+
/* @__PURE__ */ jsx64(Pressable24, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles48.half, { right: 0 }], onPress: () => setIndex((i) => Math.min(photos.length - 1, i + 1)) })
|
|
5356
5444
|
] }) : null,
|
|
5357
|
-
/* @__PURE__ */
|
|
5358
|
-
|
|
5445
|
+
/* @__PURE__ */ jsxs55(
|
|
5446
|
+
View56,
|
|
5359
5447
|
{
|
|
5360
5448
|
testID: "person-card-overlay",
|
|
5361
5449
|
pointerEvents: "box-none",
|
|
5362
|
-
style:
|
|
5450
|
+
style: styles48.bottom,
|
|
5363
5451
|
onLayout: (e) => setBox({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }),
|
|
5364
5452
|
children: [
|
|
5365
|
-
box ? /* @__PURE__ */
|
|
5366
|
-
/* @__PURE__ */
|
|
5367
|
-
/* @__PURE__ */
|
|
5368
|
-
/* @__PURE__ */
|
|
5369
|
-
/* @__PURE__ */
|
|
5453
|
+
box ? /* @__PURE__ */ jsxs55(Svg31, { testID: "person-card-scrim", style: styles48.scrim, width: box.width, height: box.height, "aria-hidden": true, children: [
|
|
5454
|
+
/* @__PURE__ */ jsx64(Defs15, { children: /* @__PURE__ */ jsxs55(LinearGradient12, { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
5455
|
+
/* @__PURE__ */ jsx64(Stop15, { offset: "0", stopColor: theme.scrimStrong, stopOpacity: 0 }),
|
|
5456
|
+
/* @__PURE__ */ jsx64(Stop15, { offset: "0.5", stopColor: theme.scrimStrong, stopOpacity: 0.8 }),
|
|
5457
|
+
/* @__PURE__ */ jsx64(Stop15, { offset: "1", stopColor: theme.scrimStrong, stopOpacity: 1 })
|
|
5370
5458
|
] }) }),
|
|
5371
|
-
/* @__PURE__ */
|
|
5459
|
+
/* @__PURE__ */ jsx64(Rect5, { x: 0, y: 0, width: box.width, height: box.height, fill: `url(#${gradient})` })
|
|
5372
5460
|
] }) : null,
|
|
5373
|
-
/* @__PURE__ */
|
|
5374
|
-
/* @__PURE__ */
|
|
5375
|
-
/* @__PURE__ */
|
|
5461
|
+
/* @__PURE__ */ jsxs55(View56, { style: styles48.text, children: [
|
|
5462
|
+
/* @__PURE__ */ jsxs55(View56, { style: styles48.nameRow, children: [
|
|
5463
|
+
/* @__PURE__ */ jsxs55(Txt, { variant: "display", tone: "onMedia", style: styles48.name, numberOfLines: 1, children: [
|
|
5376
5464
|
name,
|
|
5377
|
-
age !== void 0 ? /* @__PURE__ */
|
|
5465
|
+
age !== void 0 ? /* @__PURE__ */ jsx64(Txt, { variant: "display", tone: "onMedia", style: styles48.age, children: ` ${age}` }) : null
|
|
5378
5466
|
] }),
|
|
5379
5467
|
badge
|
|
5380
5468
|
] }),
|
|
5381
5469
|
meta,
|
|
5382
|
-
bio ? /* @__PURE__ */
|
|
5383
|
-
footer ? /* @__PURE__ */
|
|
5470
|
+
bio ? /* @__PURE__ */ jsx64(Txt, { tone: "onMedia", numberOfLines: 2, children: bio }) : null,
|
|
5471
|
+
footer ? /* @__PURE__ */ jsx64(View56, { style: styles48.footer, children: footer }) : null
|
|
5384
5472
|
] })
|
|
5385
5473
|
]
|
|
5386
5474
|
}
|
|
@@ -5393,9 +5481,9 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5393
5481
|
const { theme, haptic } = useTheme();
|
|
5394
5482
|
const reduce = useReducedMotion();
|
|
5395
5483
|
const { width } = useWindowDimensions2();
|
|
5396
|
-
const [x] =
|
|
5484
|
+
const [x] = React41.useState(() => new Animated24.Value(0));
|
|
5397
5485
|
const top = items2[0];
|
|
5398
|
-
const decide =
|
|
5486
|
+
const decide = React41.useCallback(
|
|
5399
5487
|
(direction) => {
|
|
5400
5488
|
if (!top) return;
|
|
5401
5489
|
haptic("impact");
|
|
@@ -5409,7 +5497,7 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5409
5497
|
},
|
|
5410
5498
|
[top, haptic, reduce, x, width, onSwipe, items2.length, labels.empty]
|
|
5411
5499
|
);
|
|
5412
|
-
const pan =
|
|
5500
|
+
const pan = React41.useMemo(
|
|
5413
5501
|
() => PanResponder3.create({
|
|
5414
5502
|
onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
|
|
5415
5503
|
onPanResponderMove: (_, g) => x.setValue(g.dx),
|
|
@@ -5424,26 +5512,26 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5424
5512
|
const rotate = x.interpolate({ inputRange: [-width, 0, width], outputRange: ["-14deg", "0deg", "14deg"] });
|
|
5425
5513
|
const likeOpacity = x.interpolate({ inputRange: [0, width / 4], outputRange: [0, 1], extrapolate: "clamp" });
|
|
5426
5514
|
const passOpacity = x.interpolate({ inputRange: [-width / 4, 0], outputRange: [1, 0], extrapolate: "clamp" });
|
|
5427
|
-
const button = (direction) => /* @__PURE__ */
|
|
5428
|
-
|
|
5515
|
+
const button = (direction) => /* @__PURE__ */ jsx64(
|
|
5516
|
+
Pressable24,
|
|
5429
5517
|
{
|
|
5430
5518
|
role: "button",
|
|
5431
5519
|
"aria-label": direction === "like" ? labels.like : labels.pass,
|
|
5432
5520
|
disabled: !top,
|
|
5433
5521
|
onPress: () => decide(direction),
|
|
5434
5522
|
style: ({ pressed }) => [
|
|
5435
|
-
|
|
5523
|
+
styles48.button,
|
|
5436
5524
|
{ borderColor: direction === "like" ? theme.success : theme.danger, backgroundColor: theme.surface1, transform: [{ scale: pressed ? 0.92 : 1 }], opacity: top ? 1 : 0.4 }
|
|
5437
5525
|
],
|
|
5438
|
-
children: /* @__PURE__ */
|
|
5526
|
+
children: /* @__PURE__ */ jsx64(Svg31, { width: 28, height: 28, viewBox: "0 0 24 24", "aria-hidden": true, children: direction === "like" ? /* @__PURE__ */ jsx64(Path26, { 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__ */ jsx64(Path26, { d: "M6 6l12 12M18 6 6 18", stroke: theme.danger, strokeWidth: 3, strokeLinecap: "round" }) })
|
|
5439
5527
|
}
|
|
5440
5528
|
);
|
|
5441
|
-
return /* @__PURE__ */
|
|
5442
|
-
/* @__PURE__ */
|
|
5529
|
+
return /* @__PURE__ */ jsxs55(View56, { style: [styles48.deck, style], children: [
|
|
5530
|
+
/* @__PURE__ */ jsxs55(View56, { style: styles48.stack, children: [
|
|
5443
5531
|
!top ? empty2 ?? null : null,
|
|
5444
5532
|
items2.slice(0, 2).reverse().map((item) => {
|
|
5445
5533
|
const isTop = item === top;
|
|
5446
|
-
return /* @__PURE__ */
|
|
5534
|
+
return /* @__PURE__ */ jsxs55(
|
|
5447
5535
|
Animated24.View,
|
|
5448
5536
|
{
|
|
5449
5537
|
...isTop ? pan.panHandlers : {},
|
|
@@ -5452,12 +5540,12 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5452
5540
|
"aria-hidden": !isTop,
|
|
5453
5541
|
importantForAccessibility: isTop ? "auto" : "no-hide-descendants",
|
|
5454
5542
|
pointerEvents: isTop ? "auto" : "none",
|
|
5455
|
-
style: [
|
|
5543
|
+
style: [StyleSheet48.absoluteFill, isTop ? { transform: [{ translateX: x }, { rotate }] } : { transform: [{ scale: 0.96 }], opacity: 0.9 }],
|
|
5456
5544
|
children: [
|
|
5457
5545
|
renderCard(item),
|
|
5458
|
-
isTop ? /* @__PURE__ */
|
|
5459
|
-
/* @__PURE__ */
|
|
5460
|
-
/* @__PURE__ */
|
|
5546
|
+
isTop ? /* @__PURE__ */ jsxs55(Fragment10, { children: [
|
|
5547
|
+
/* @__PURE__ */ jsx64(Animated24.View, { pointerEvents: "none", style: [styles48.stamp, styles48.stampLike, { borderColor: theme.success, opacity: likeOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx64(Txt, { variant: "title", style: { color: theme.success }, children: labels.likeStamp ?? labels.like.toUpperCase() }) }),
|
|
5548
|
+
/* @__PURE__ */ jsx64(Animated24.View, { pointerEvents: "none", style: [styles48.stamp, styles48.stampPass, { borderColor: theme.danger, opacity: passOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx64(Txt, { variant: "title", style: { color: theme.danger }, children: labels.passStamp ?? labels.pass.toUpperCase() }) })
|
|
5461
5549
|
] }) : null
|
|
5462
5550
|
]
|
|
5463
5551
|
},
|
|
@@ -5465,13 +5553,13 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, l
|
|
|
5465
5553
|
);
|
|
5466
5554
|
})
|
|
5467
5555
|
] }),
|
|
5468
|
-
hideButtons ? null : /* @__PURE__ */
|
|
5556
|
+
hideButtons ? null : /* @__PURE__ */ jsxs55(View56, { style: styles48.buttons, children: [
|
|
5469
5557
|
button("pass"),
|
|
5470
5558
|
button("like")
|
|
5471
5559
|
] })
|
|
5472
5560
|
] });
|
|
5473
5561
|
}
|
|
5474
|
-
var
|
|
5562
|
+
var styles48 = StyleSheet48.create({
|
|
5475
5563
|
card: { flex: 1, overflow: "hidden" },
|
|
5476
5564
|
bars: { position: "absolute", top: 8, left: 8, right: 8, flexDirection: "row", gap: 4 },
|
|
5477
5565
|
bar: { flex: 1, height: 3, borderRadius: 2 },
|
|
@@ -5493,18 +5581,18 @@ var styles47 = StyleSheet47.create({
|
|
|
5493
5581
|
});
|
|
5494
5582
|
|
|
5495
5583
|
// src/native/swipeable-row.tsx
|
|
5496
|
-
import * as
|
|
5497
|
-
import { Animated as Animated25, PanResponder as PanResponder4, Pressable as
|
|
5498
|
-
import { jsx as
|
|
5584
|
+
import * as React42 from "react";
|
|
5585
|
+
import { Animated as Animated25, PanResponder as PanResponder4, Pressable as Pressable25, StyleSheet as StyleSheet49, View as View57 } from "react-native";
|
|
5586
|
+
import { jsx as jsx65, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
5499
5587
|
var toneColor = (t, tone3) => ({ neutral: t.surface3, accent: t.accent, success: t.success, warning: t.warning, danger: t.danger })[tone3 ?? "neutral"];
|
|
5500
5588
|
var toneText = (tone3) => tone3 === "neutral" || tone3 === void 0 ? "text" : "onAccent";
|
|
5501
5589
|
function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6, actionWidth = 80, onActivate, testID, style }) {
|
|
5502
5590
|
const { theme, haptic } = useTheme();
|
|
5503
5591
|
const reduce = useReducedMotion();
|
|
5504
|
-
const [x] =
|
|
5505
|
-
const [width, setWidth] =
|
|
5506
|
-
const rest =
|
|
5507
|
-
const armed =
|
|
5592
|
+
const [x] = React42.useState(() => new Animated25.Value(0));
|
|
5593
|
+
const [width, setWidth] = React42.useState(0);
|
|
5594
|
+
const rest = React42.useRef(0);
|
|
5595
|
+
const armed = React42.useRef(false);
|
|
5508
5596
|
const settle = (to) => {
|
|
5509
5597
|
rest.current = to;
|
|
5510
5598
|
if (reduce) x.setValue(to);
|
|
@@ -5514,7 +5602,7 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
|
|
|
5514
5602
|
settle(0);
|
|
5515
5603
|
action.onPress();
|
|
5516
5604
|
};
|
|
5517
|
-
const pan =
|
|
5605
|
+
const pan = React42.useMemo(
|
|
5518
5606
|
() => PanResponder4.create({
|
|
5519
5607
|
onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
|
|
5520
5608
|
onPanResponderMove: (_, g) => {
|
|
@@ -5543,18 +5631,18 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
|
|
|
5543
5631
|
[trailing, leading, fullSwipe, width, actionWidth]
|
|
5544
5632
|
// eslint-disable-line react-hooks/exhaustive-deps -- run/settle are stable in effect
|
|
5545
5633
|
);
|
|
5546
|
-
const side = (actions, edge) => /* @__PURE__ */
|
|
5634
|
+
const side = (actions, edge) => /* @__PURE__ */ jsx65(View57, { "aria-hidden": true, style: [styles49.side, edge === "left" ? { left: 0 } : { right: 0, flexDirection: "row-reverse" }], children: actions.map((action, i) => (
|
|
5547
5635
|
// eslint-disable-next-line react-hooks/refs -- runs on a press, never during render
|
|
5548
|
-
/* @__PURE__ */
|
|
5636
|
+
/* @__PURE__ */ jsxs56(Pressable25, { focusable: false, tabIndex: -1, onPress: () => run(action), style: [styles49.action, { width: actionWidth, backgroundColor: toneColor(theme, action.tone) }], children: [
|
|
5549
5637
|
action.icon,
|
|
5550
|
-
/* @__PURE__ */
|
|
5638
|
+
/* @__PURE__ */ jsx65(Txt, { variant: "caption", tone: toneText(action.tone), style: styles49.actionText, numberOfLines: 1, children: action.label })
|
|
5551
5639
|
] }, i)
|
|
5552
5640
|
)) });
|
|
5553
5641
|
const all = [...leading, ...trailing];
|
|
5554
|
-
return /* @__PURE__ */
|
|
5642
|
+
return /* @__PURE__ */ jsxs56(View57, { style: [styles49.root, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
|
|
5555
5643
|
leading.length > 0 ? side(leading, "left") : null,
|
|
5556
5644
|
trailing.length > 0 ? side(trailing, "right") : null,
|
|
5557
|
-
/* @__PURE__ */
|
|
5645
|
+
/* @__PURE__ */ jsx65(
|
|
5558
5646
|
Animated25.View,
|
|
5559
5647
|
{
|
|
5560
5648
|
...pan.panHandlers,
|
|
@@ -5566,13 +5654,13 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
|
|
|
5566
5654
|
const action = all.find((a) => a.label === e.nativeEvent.actionName);
|
|
5567
5655
|
if (action) action.onPress();
|
|
5568
5656
|
},
|
|
5569
|
-
style: [
|
|
5657
|
+
style: [styles49.front, { backgroundColor: theme.surface0, transform: [{ translateX: x }] }],
|
|
5570
5658
|
children
|
|
5571
5659
|
}
|
|
5572
5660
|
)
|
|
5573
5661
|
] });
|
|
5574
5662
|
}
|
|
5575
|
-
var
|
|
5663
|
+
var styles49 = StyleSheet49.create({
|
|
5576
5664
|
root: { overflow: "hidden" },
|
|
5577
5665
|
side: { position: "absolute", top: 0, bottom: 0, flexDirection: "row" },
|
|
5578
5666
|
action: { alignItems: "center", justifyContent: "center", gap: 4, paddingHorizontal: 6 },
|
|
@@ -5581,18 +5669,18 @@ var styles48 = StyleSheet48.create({
|
|
|
5581
5669
|
});
|
|
5582
5670
|
|
|
5583
5671
|
// src/native/switch.tsx
|
|
5584
|
-
import * as
|
|
5585
|
-
import { Animated as Animated26, Pressable as
|
|
5586
|
-
import { jsx as
|
|
5672
|
+
import * as React43 from "react";
|
|
5673
|
+
import { Animated as Animated26, Pressable as Pressable26, StyleSheet as StyleSheet50, Text as Text18, View as View58 } from "react-native";
|
|
5674
|
+
import { jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
5587
5675
|
var SIZES = { sm: { w: 40, h: 24, knob: 18 }, md: { w: 52, h: 32, knob: 26 } };
|
|
5588
5676
|
function Switch({ label, checked, defaultChecked = false, onCheckedChange, description, showLabel, size = "md", error, disabled, style }) {
|
|
5589
5677
|
const { theme, motion: motion3, haptic } = useTheme();
|
|
5590
|
-
const [own, setOwn] =
|
|
5678
|
+
const [own, setOwn] = React43.useState(defaultChecked);
|
|
5591
5679
|
const on = checked ?? own;
|
|
5592
5680
|
const d = SIZES[size];
|
|
5593
5681
|
const travel = d.w - d.knob - (d.h - d.knob);
|
|
5594
|
-
const [x] =
|
|
5595
|
-
|
|
5682
|
+
const [x] = React43.useState(() => new Animated26.Value(on ? 1 : 0));
|
|
5683
|
+
React43.useEffect(() => {
|
|
5596
5684
|
Animated26.timing(x, { toValue: on ? 1 : 0, duration: motion3.duration.base, useNativeDriver: true }).start();
|
|
5597
5685
|
}, [on, x, motion3.duration.base]);
|
|
5598
5686
|
const toggle = () => {
|
|
@@ -5600,11 +5688,11 @@ function Switch({ label, checked, defaultChecked = false, onCheckedChange, descr
|
|
|
5600
5688
|
if (checked === void 0) setOwn(!on);
|
|
5601
5689
|
onCheckedChange?.(!on);
|
|
5602
5690
|
};
|
|
5603
|
-
const track = /* @__PURE__ */
|
|
5691
|
+
const track = /* @__PURE__ */ jsx66(View58, { style: [styles50.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__ */ jsx66(
|
|
5604
5692
|
Animated26.View,
|
|
5605
5693
|
{
|
|
5606
5694
|
style: [
|
|
5607
|
-
|
|
5695
|
+
styles50.knob,
|
|
5608
5696
|
{
|
|
5609
5697
|
width: d.knob,
|
|
5610
5698
|
height: d.knob,
|
|
@@ -5626,19 +5714,19 @@ function Switch({ label, checked, defaultChecked = false, onCheckedChange, descr
|
|
|
5626
5714
|
onPress: toggle
|
|
5627
5715
|
};
|
|
5628
5716
|
if (!showLabel)
|
|
5629
|
-
return /* @__PURE__ */
|
|
5630
|
-
return /* @__PURE__ */
|
|
5631
|
-
/* @__PURE__ */
|
|
5632
|
-
/* @__PURE__ */
|
|
5633
|
-
/* @__PURE__ */
|
|
5634
|
-
description ? /* @__PURE__ */
|
|
5717
|
+
return /* @__PURE__ */ jsx66(Pressable26, { ...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 ? styles50.disabled : null, style], children: track });
|
|
5718
|
+
return /* @__PURE__ */ jsxs57(View58, { style: [styles50.root, style], children: [
|
|
5719
|
+
/* @__PURE__ */ jsxs57(Pressable26, { ...a11y, style: [styles50.row, disabled ? styles50.disabled : null], children: [
|
|
5720
|
+
/* @__PURE__ */ jsxs57(View58, { style: styles50.text, children: [
|
|
5721
|
+
/* @__PURE__ */ jsx66(Text18, { style: [styles50.label, { color: theme.textPrimary }], children: label }),
|
|
5722
|
+
description ? /* @__PURE__ */ jsx66(Text18, { style: [styles50.description, { color: theme.textSecondary }], children: description }) : null
|
|
5635
5723
|
] }),
|
|
5636
5724
|
track
|
|
5637
5725
|
] }),
|
|
5638
|
-
error ? /* @__PURE__ */
|
|
5726
|
+
error ? /* @__PURE__ */ jsx66(Text18, { role: "alert", "aria-live": "polite", style: [styles50.description, { color: theme.dangerText }], children: error }) : null
|
|
5639
5727
|
] });
|
|
5640
5728
|
}
|
|
5641
|
-
var
|
|
5729
|
+
var styles50 = StyleSheet50.create({
|
|
5642
5730
|
root: { gap: 2, alignSelf: "stretch" },
|
|
5643
5731
|
row: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 48 },
|
|
5644
5732
|
text: { flex: 1, gap: 2 },
|
|
@@ -5650,16 +5738,16 @@ var styles49 = StyleSheet49.create({
|
|
|
5650
5738
|
});
|
|
5651
5739
|
|
|
5652
5740
|
// src/native/tab-bar.tsx
|
|
5653
|
-
import { Pressable as
|
|
5654
|
-
import { jsx as
|
|
5741
|
+
import { Pressable as Pressable27, StyleSheet as StyleSheet51, Text as Text19, View as View59 } from "react-native";
|
|
5742
|
+
import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
5655
5743
|
function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label": label, style }) {
|
|
5656
5744
|
const { theme, insets, haptic } = useTheme();
|
|
5657
|
-
return /* @__PURE__ */
|
|
5745
|
+
return /* @__PURE__ */ jsx67(View59, { role: "tablist", "aria-label": label, style: [styles51.bar, { backgroundColor: theme.glassBg, borderTopColor: theme.glassBorder, paddingBottom: Math.max(6, insets.bottom) }, style], children: items2.map((item) => {
|
|
5658
5746
|
const selected = item.value === value;
|
|
5659
5747
|
const color = selected ? theme.accentText : theme.textSecondary;
|
|
5660
5748
|
const badge = item.badge === true ? "" : typeof item.badge === "number" && item.badge > 0 ? item.badge > 99 ? "99+" : String(item.badge) : null;
|
|
5661
|
-
return /* @__PURE__ */
|
|
5662
|
-
|
|
5749
|
+
return /* @__PURE__ */ jsxs58(
|
|
5750
|
+
Pressable27,
|
|
5663
5751
|
{
|
|
5664
5752
|
role: "tab",
|
|
5665
5753
|
"aria-selected": selected,
|
|
@@ -5668,22 +5756,22 @@ function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label":
|
|
|
5668
5756
|
if (selected) onReselect?.(item.value);
|
|
5669
5757
|
else onValueChange(item.value);
|
|
5670
5758
|
},
|
|
5671
|
-
style: ({ pressed }) => [
|
|
5759
|
+
style: ({ pressed }) => [styles51.item, { opacity: pressed ? 0.7 : 1 }],
|
|
5672
5760
|
children: [
|
|
5673
|
-
/* @__PURE__ */
|
|
5761
|
+
/* @__PURE__ */ jsxs58(View59, { "aria-hidden": true, style: styles51.icon, children: [
|
|
5674
5762
|
item.icon(selected, color),
|
|
5675
|
-
badge !== null ? /* @__PURE__ */
|
|
5763
|
+
badge !== null ? /* @__PURE__ */ jsx67(View59, { style: [badge ? styles51.count : styles51.dot, { backgroundColor: theme.danger, borderColor: theme.surface1 }], children: badge ? /* @__PURE__ */ jsx67(Text19, { style: [styles51.countText, { color: theme.onAccent }], children: badge }) : null }) : null
|
|
5676
5764
|
] }),
|
|
5677
|
-
/* @__PURE__ */
|
|
5678
|
-
badge !== null && item.badgeLabel ? /* @__PURE__ */
|
|
5765
|
+
/* @__PURE__ */ jsx67(Text19, { numberOfLines: 1, style: [styles51.label, { color, fontWeight: selected ? "700" : "500" }], children: item.label }),
|
|
5766
|
+
badge !== null && item.badgeLabel ? /* @__PURE__ */ jsx67(Text19, { style: styles51.unseen, children: `, ${item.badgeLabel}` }) : null
|
|
5679
5767
|
]
|
|
5680
5768
|
},
|
|
5681
5769
|
item.value
|
|
5682
5770
|
);
|
|
5683
5771
|
}) });
|
|
5684
5772
|
}
|
|
5685
|
-
var
|
|
5686
|
-
bar: { flexDirection: "row", borderTopWidth:
|
|
5773
|
+
var styles51 = StyleSheet51.create({
|
|
5774
|
+
bar: { flexDirection: "row", borderTopWidth: StyleSheet51.hairlineWidth, paddingTop: 6 },
|
|
5687
5775
|
item: { flex: 1, alignItems: "center", gap: 2, minHeight: 48, justifyContent: "center" },
|
|
5688
5776
|
icon: { width: 28, height: 26, alignItems: "center", justifyContent: "center" },
|
|
5689
5777
|
label: { fontSize: 11, lineHeight: 14 },
|
|
@@ -5694,12 +5782,12 @@ var styles50 = StyleSheet50.create({
|
|
|
5694
5782
|
});
|
|
5695
5783
|
|
|
5696
5784
|
// src/native/tabs.tsx
|
|
5697
|
-
import * as
|
|
5698
|
-
import { Pressable as
|
|
5699
|
-
import { jsx as
|
|
5785
|
+
import * as React44 from "react";
|
|
5786
|
+
import { Pressable as Pressable28, ScrollView as ScrollView7, StyleSheet as StyleSheet52, View as View60 } from "react-native";
|
|
5787
|
+
import { jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
5700
5788
|
function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label": label, variant = "underline", style }) {
|
|
5701
5789
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
5702
|
-
const [own, setOwn] =
|
|
5790
|
+
const [own, setOwn] = React44.useState(defaultValue ?? items2[0]?.value);
|
|
5703
5791
|
const current = value ?? own;
|
|
5704
5792
|
const select = (next) => {
|
|
5705
5793
|
if (next === current) return;
|
|
@@ -5710,8 +5798,8 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
|
|
|
5710
5798
|
const segmented = variant === "segmented";
|
|
5711
5799
|
const tabs = items2.map((item) => {
|
|
5712
5800
|
const selected = item.value === current;
|
|
5713
|
-
return /* @__PURE__ */
|
|
5714
|
-
|
|
5801
|
+
return /* @__PURE__ */ jsx68(
|
|
5802
|
+
Pressable28,
|
|
5715
5803
|
{
|
|
5716
5804
|
role: "tab",
|
|
5717
5805
|
"aria-selected": selected,
|
|
@@ -5719,45 +5807,45 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
|
|
|
5719
5807
|
disabled: item.disabled,
|
|
5720
5808
|
onPress: () => select(item.value),
|
|
5721
5809
|
style: [
|
|
5722
|
-
segmented ?
|
|
5810
|
+
segmented ? styles52.segment : styles52.tab,
|
|
5723
5811
|
segmented && selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault, borderRadius: radius3.sm } : null,
|
|
5724
5812
|
!segmented ? { borderBottomColor: selected ? theme.accent : "transparent" } : null,
|
|
5725
|
-
item.disabled ?
|
|
5813
|
+
item.disabled ? styles52.disabled : null
|
|
5726
5814
|
],
|
|
5727
|
-
children: /* @__PURE__ */
|
|
5815
|
+
children: /* @__PURE__ */ jsxs59(Txt, { variant: "label", tone: selected ? "text" : "secondary", numberOfLines: 1, children: [
|
|
5728
5816
|
item.label,
|
|
5729
|
-
item.count !== void 0 ? /* @__PURE__ */
|
|
5817
|
+
item.count !== void 0 ? /* @__PURE__ */ jsx68(Txt, { variant: "caption", tone: "secondary", children: ` ${item.count}` }) : null
|
|
5730
5818
|
] })
|
|
5731
5819
|
},
|
|
5732
5820
|
item.value
|
|
5733
5821
|
);
|
|
5734
5822
|
});
|
|
5735
5823
|
const panel = items2.find((i) => i.value === current)?.content;
|
|
5736
|
-
return /* @__PURE__ */
|
|
5737
|
-
segmented ? /* @__PURE__ */
|
|
5738
|
-
panel !== void 0 ? /* @__PURE__ */
|
|
5824
|
+
return /* @__PURE__ */ jsxs59(View60, { style: [styles52.root, style], children: [
|
|
5825
|
+
segmented ? /* @__PURE__ */ jsx68(View60, { role: "tablist", "aria-label": label, style: [styles52.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md }], children: tabs }) : /* @__PURE__ */ jsx68(View60, { style: [styles52.underline, { borderBottomColor: theme.borderSubtle }], children: /* @__PURE__ */ jsx68(ScrollView7, { horizontal: true, showsHorizontalScrollIndicator: false, role: "tablist", "aria-label": label, contentContainerStyle: styles52.scroll, children: tabs }) }),
|
|
5826
|
+
panel !== void 0 ? /* @__PURE__ */ jsx68(View60, { role: "tabpanel", children: panel }) : null
|
|
5739
5827
|
] });
|
|
5740
5828
|
}
|
|
5741
|
-
var
|
|
5829
|
+
var styles52 = StyleSheet52.create({
|
|
5742
5830
|
root: { gap: 12 },
|
|
5743
|
-
underline: { borderBottomWidth:
|
|
5831
|
+
underline: { borderBottomWidth: StyleSheet52.hairlineWidth },
|
|
5744
5832
|
scroll: { gap: 4, paddingHorizontal: 4 },
|
|
5745
5833
|
tab: { minHeight: 44, justifyContent: "center", paddingHorizontal: 12, borderBottomWidth: 2 },
|
|
5746
|
-
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth:
|
|
5747
|
-
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth:
|
|
5834
|
+
track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet52.hairlineWidth, height: 40 },
|
|
5835
|
+
segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet52.hairlineWidth, borderColor: "transparent" },
|
|
5748
5836
|
disabled: { opacity: 0.4 }
|
|
5749
5837
|
});
|
|
5750
5838
|
|
|
5751
5839
|
// src/native/tag-selector.tsx
|
|
5752
|
-
import { StyleSheet as
|
|
5753
|
-
import { jsx as
|
|
5840
|
+
import { StyleSheet as StyleSheet53, View as View61 } from "react-native";
|
|
5841
|
+
import { jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
5754
5842
|
function TagSelector({ label, options, value, onValueChange, max, countLabel, style }) {
|
|
5755
5843
|
const { haptic } = useTheme();
|
|
5756
5844
|
const full = max !== void 0 && value.length >= max;
|
|
5757
|
-
return /* @__PURE__ */
|
|
5758
|
-
/* @__PURE__ */
|
|
5845
|
+
return /* @__PURE__ */ jsxs60(View61, { style: [styles53.root, style], children: [
|
|
5846
|
+
/* @__PURE__ */ jsx69(View61, { role: "group", "aria-label": label, style: styles53.wrap, children: options.map((option) => {
|
|
5759
5847
|
const on = value.includes(option.value);
|
|
5760
|
-
return /* @__PURE__ */
|
|
5848
|
+
return /* @__PURE__ */ jsx69(
|
|
5761
5849
|
Chip,
|
|
5762
5850
|
{
|
|
5763
5851
|
selected: on,
|
|
@@ -5771,15 +5859,15 @@ function TagSelector({ label, options, value, onValueChange, max, countLabel, st
|
|
|
5771
5859
|
option.value
|
|
5772
5860
|
);
|
|
5773
5861
|
}) }),
|
|
5774
|
-
max !== void 0 && countLabel ? /* @__PURE__ */
|
|
5862
|
+
max !== void 0 && countLabel ? /* @__PURE__ */ jsx69(Txt, { variant: "caption", tone: full ? "accent" : "secondary", "aria-live": "polite", children: countLabel(value.length, max) }) : null
|
|
5775
5863
|
] });
|
|
5776
5864
|
}
|
|
5777
|
-
var
|
|
5865
|
+
var styles53 = StyleSheet53.create({ root: { gap: 8 }, wrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 } });
|
|
5778
5866
|
|
|
5779
5867
|
// src/native/toast.tsx
|
|
5780
|
-
import * as
|
|
5781
|
-
import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated27, PanResponder as PanResponder5, Pressable as
|
|
5782
|
-
import { Fragment as
|
|
5868
|
+
import * as React45 from "react";
|
|
5869
|
+
import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated27, PanResponder as PanResponder5, Pressable as Pressable29, StyleSheet as StyleSheet54, Text as Text20, View as View62 } from "react-native";
|
|
5870
|
+
import { Fragment as Fragment11, jsx as jsx70, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
5783
5871
|
var items = [];
|
|
5784
5872
|
var listeners2 = /* @__PURE__ */ new Set();
|
|
5785
5873
|
var counter = 0;
|
|
@@ -5814,8 +5902,8 @@ var toast = Object.assign(show, {
|
|
|
5814
5902
|
function ToastView({ item, closeLabel, duration }) {
|
|
5815
5903
|
const { theme, radius: radius3, haptic } = useTheme();
|
|
5816
5904
|
const reduce = useReducedMotion();
|
|
5817
|
-
const [swipe] =
|
|
5818
|
-
const drag =
|
|
5905
|
+
const [swipe] = React45.useState(() => new Animated27.Value(0));
|
|
5906
|
+
const drag = React45.useMemo(
|
|
5819
5907
|
() => PanResponder5.create({
|
|
5820
5908
|
onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
|
|
5821
5909
|
onPanResponderMove: (_, g) => swipe.setValue(g.dx),
|
|
@@ -5827,80 +5915,80 @@ function ToastView({ item, closeLabel, duration }) {
|
|
|
5827
5915
|
}),
|
|
5828
5916
|
[swipe, item.id]
|
|
5829
5917
|
);
|
|
5830
|
-
|
|
5918
|
+
React45.useEffect(() => {
|
|
5831
5919
|
if (item.tone === "success" || item.tone === "warning") haptic(item.tone);
|
|
5832
5920
|
if (item.tone === "error") haptic("warning");
|
|
5833
5921
|
}, [item.id]);
|
|
5834
|
-
const [enter] =
|
|
5835
|
-
|
|
5922
|
+
const [enter] = React45.useState(() => new Animated27.Value(reduce ? 1 : 0));
|
|
5923
|
+
React45.useEffect(() => {
|
|
5836
5924
|
if (reduce) enter.setValue(1);
|
|
5837
5925
|
else Animated27.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
|
|
5838
5926
|
}, [enter, reduce]);
|
|
5839
|
-
|
|
5927
|
+
React45.useEffect(() => {
|
|
5840
5928
|
AccessibilityInfo15.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
|
|
5841
5929
|
}, [item.title, item.description]);
|
|
5842
5930
|
const ms = item.duration ?? duration;
|
|
5843
|
-
|
|
5931
|
+
React45.useEffect(() => {
|
|
5844
5932
|
if (!Number.isFinite(ms)) return;
|
|
5845
5933
|
const timer2 = setTimeout(() => dismiss(item.id), ms);
|
|
5846
5934
|
return () => clearTimeout(timer2);
|
|
5847
5935
|
}, [item.id, ms]);
|
|
5848
5936
|
const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
|
|
5849
|
-
const text = /* @__PURE__ */
|
|
5850
|
-
item.icon ? /* @__PURE__ */
|
|
5851
|
-
/* @__PURE__ */
|
|
5852
|
-
/* @__PURE__ */
|
|
5853
|
-
item.description ? /* @__PURE__ */
|
|
5937
|
+
const text = /* @__PURE__ */ jsxs61(Fragment11, { children: [
|
|
5938
|
+
item.icon ? /* @__PURE__ */ jsx70(View62, { "aria-hidden": true, children: item.icon }) : null,
|
|
5939
|
+
/* @__PURE__ */ jsxs61(View62, { style: styles54.content, children: [
|
|
5940
|
+
/* @__PURE__ */ jsx70(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
|
|
5941
|
+
item.description ? /* @__PURE__ */ jsx70(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
|
|
5854
5942
|
] })
|
|
5855
5943
|
] });
|
|
5856
|
-
const body = /* @__PURE__ */
|
|
5857
|
-
item.onPress ? /* @__PURE__ */
|
|
5858
|
-
|
|
5944
|
+
const body = /* @__PURE__ */ jsxs61(Fragment11, { children: [
|
|
5945
|
+
item.onPress ? /* @__PURE__ */ jsx70(
|
|
5946
|
+
Pressable29,
|
|
5859
5947
|
{
|
|
5860
5948
|
role: "button",
|
|
5861
5949
|
onPress: () => {
|
|
5862
5950
|
item.onPress?.();
|
|
5863
5951
|
dismiss(item.id);
|
|
5864
5952
|
},
|
|
5865
|
-
style: ({ pressed }) => [
|
|
5953
|
+
style: ({ pressed }) => [styles54.main, { opacity: pressed ? 0.8 : 1 }],
|
|
5866
5954
|
children: text
|
|
5867
5955
|
}
|
|
5868
|
-
) : /* @__PURE__ */
|
|
5869
|
-
item.action ? /* @__PURE__ */
|
|
5870
|
-
|
|
5956
|
+
) : /* @__PURE__ */ jsx70(View62, { style: styles54.main, children: text }),
|
|
5957
|
+
item.action ? /* @__PURE__ */ jsx70(
|
|
5958
|
+
Pressable29,
|
|
5871
5959
|
{
|
|
5872
5960
|
role: "button",
|
|
5873
5961
|
onPress: () => {
|
|
5874
5962
|
item.action?.onPress();
|
|
5875
5963
|
dismiss(item.id);
|
|
5876
5964
|
},
|
|
5877
|
-
style: [
|
|
5878
|
-
children: /* @__PURE__ */
|
|
5965
|
+
style: [styles54.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
|
|
5966
|
+
children: /* @__PURE__ */ jsx70(Text20, { style: [styles54.actionLabel, { color: theme.onAccent }], children: item.action.label })
|
|
5879
5967
|
}
|
|
5880
5968
|
) : null,
|
|
5881
|
-
/* @__PURE__ */
|
|
5969
|
+
/* @__PURE__ */ jsx70(Pressable29, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles54.close, children: /* @__PURE__ */ jsx70(Text20, { style: [styles54.cross, { color: theme.textSecondary }], children: "\xD7" }) })
|
|
5882
5970
|
] });
|
|
5883
5971
|
const frame = [
|
|
5884
|
-
|
|
5972
|
+
styles54.toast,
|
|
5885
5973
|
{ backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
|
|
5886
5974
|
];
|
|
5887
5975
|
const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }, { translateX: swipe }] };
|
|
5888
|
-
return /* @__PURE__ */
|
|
5976
|
+
return /* @__PURE__ */ jsx70(Animated27.View, { "aria-live": "polite", style: motion3, ...drag.panHandlers, children: /* @__PURE__ */ jsx70(View62, { style: frame, children: body }) });
|
|
5889
5977
|
}
|
|
5890
5978
|
function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
|
|
5891
|
-
const all =
|
|
5979
|
+
const all = React45.useSyncExternalStore(subscribe2, snapshot, snapshot);
|
|
5892
5980
|
const shown = all.slice(-max);
|
|
5893
5981
|
if (shown.length === 0) return null;
|
|
5894
|
-
return /* @__PURE__ */
|
|
5982
|
+
return /* @__PURE__ */ jsx70(View62, { pointerEvents: "box-none", style: [styles54.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx70(ToastView, { item, closeLabel, duration }, item.id)) });
|
|
5895
5983
|
}
|
|
5896
|
-
var
|
|
5984
|
+
var styles54 = StyleSheet54.create({
|
|
5897
5985
|
stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
|
|
5898
5986
|
toast: {
|
|
5899
5987
|
flexDirection: "row",
|
|
5900
5988
|
alignItems: "center",
|
|
5901
5989
|
gap: 10,
|
|
5902
5990
|
padding: 12,
|
|
5903
|
-
borderWidth:
|
|
5991
|
+
borderWidth: StyleSheet54.hairlineWidth,
|
|
5904
5992
|
borderLeftWidth: 4,
|
|
5905
5993
|
shadowOpacity: 0.3,
|
|
5906
5994
|
shadowRadius: 16,
|
|
@@ -5916,35 +6004,35 @@ var styles53 = StyleSheet53.create({
|
|
|
5916
6004
|
});
|
|
5917
6005
|
|
|
5918
6006
|
// src/native/update-prompt.tsx
|
|
5919
|
-
import { StyleSheet as
|
|
5920
|
-
import { jsx as
|
|
6007
|
+
import { StyleSheet as StyleSheet55, View as View63 } from "react-native";
|
|
6008
|
+
import { jsx as jsx71, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
5921
6009
|
function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, style }) {
|
|
5922
6010
|
const { theme, radius: radius3 } = useTheme();
|
|
5923
|
-
return /* @__PURE__ */
|
|
5924
|
-
|
|
6011
|
+
return /* @__PURE__ */ jsxs62(
|
|
6012
|
+
View63,
|
|
5925
6013
|
{
|
|
5926
6014
|
role: "region",
|
|
5927
6015
|
"aria-label": title,
|
|
5928
|
-
style: [
|
|
6016
|
+
style: [styles55.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style],
|
|
5929
6017
|
children: [
|
|
5930
|
-
/* @__PURE__ */
|
|
5931
|
-
mark ? /* @__PURE__ */
|
|
5932
|
-
/* @__PURE__ */
|
|
5933
|
-
/* @__PURE__ */
|
|
5934
|
-
message ? /* @__PURE__ */
|
|
5935
|
-
versionLabel ? /* @__PURE__ */
|
|
6018
|
+
/* @__PURE__ */ jsxs62(View63, { style: styles55.head, children: [
|
|
6019
|
+
mark ? /* @__PURE__ */ jsx71(View63, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: styles55.mark, children: mark }) : null,
|
|
6020
|
+
/* @__PURE__ */ jsxs62(View63, { style: styles55.text, children: [
|
|
6021
|
+
/* @__PURE__ */ jsx71(Txt, { variant: "label", children: title }),
|
|
6022
|
+
message ? /* @__PURE__ */ jsx71(Txt, { tone: "secondary", children: message }) : null,
|
|
6023
|
+
versionLabel ? /* @__PURE__ */ jsx71(Txt, { variant: "mono", tone: "secondary", children: versionLabel }) : null
|
|
5936
6024
|
] })
|
|
5937
6025
|
] }),
|
|
5938
|
-
/* @__PURE__ */
|
|
5939
|
-
/* @__PURE__ */
|
|
5940
|
-
/* @__PURE__ */
|
|
6026
|
+
/* @__PURE__ */ jsxs62(View63, { style: styles55.actions, children: [
|
|
6027
|
+
/* @__PURE__ */ jsx71(Button, { label: laterLabel, variant: "ghost", size: "sm", onPress: onLater }),
|
|
6028
|
+
/* @__PURE__ */ jsx71(Button, { label: updateLabel, variant: "primary", size: "sm", onPress: onUpdate })
|
|
5941
6029
|
] })
|
|
5942
6030
|
]
|
|
5943
6031
|
}
|
|
5944
6032
|
);
|
|
5945
6033
|
}
|
|
5946
|
-
var
|
|
5947
|
-
root: { gap: 12, padding: 16, borderWidth:
|
|
6034
|
+
var styles55 = StyleSheet55.create({
|
|
6035
|
+
root: { gap: 12, padding: 16, borderWidth: StyleSheet55.hairlineWidth },
|
|
5948
6036
|
head: { flexDirection: "row", gap: 12, alignItems: "center" },
|
|
5949
6037
|
mark: { width: 40, height: 40, alignItems: "center", justifyContent: "center" },
|
|
5950
6038
|
text: { flex: 1, gap: 2 },
|
|
@@ -5952,15 +6040,15 @@ var styles54 = StyleSheet54.create({
|
|
|
5952
6040
|
});
|
|
5953
6041
|
|
|
5954
6042
|
// src/native/verified-badge.tsx
|
|
5955
|
-
import { StyleSheet as
|
|
5956
|
-
import
|
|
5957
|
-
import { jsx as
|
|
6043
|
+
import { StyleSheet as StyleSheet56, View as View64 } from "react-native";
|
|
6044
|
+
import Svg32, { Path as Path27 } from "react-native-svg";
|
|
6045
|
+
import { jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
5958
6046
|
function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
|
|
5959
6047
|
const { theme } = useTheme();
|
|
5960
|
-
return /* @__PURE__ */
|
|
5961
|
-
/* @__PURE__ */
|
|
5962
|
-
/* @__PURE__ */
|
|
5963
|
-
|
|
6048
|
+
return /* @__PURE__ */ jsxs63(View64, { accessible: true, role: "img", "aria-label": label, style: styles56.row, children: [
|
|
6049
|
+
/* @__PURE__ */ jsxs63(Svg32, { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true, children: [
|
|
6050
|
+
/* @__PURE__ */ jsx72(
|
|
6051
|
+
Path27,
|
|
5964
6052
|
{
|
|
5965
6053
|
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",
|
|
5966
6054
|
fill: theme.accent,
|
|
@@ -5968,16 +6056,16 @@ function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
|
|
|
5968
6056
|
strokeWidth: 1.2
|
|
5969
6057
|
}
|
|
5970
6058
|
),
|
|
5971
|
-
/* @__PURE__ */
|
|
6059
|
+
/* @__PURE__ */ jsx72(Path27, { d: "M8.3 12.3l2.5 2.5 4.9-5.2", fill: "none", stroke: theme.onAccent, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" })
|
|
5972
6060
|
] }),
|
|
5973
|
-
showLabel ? /* @__PURE__ */
|
|
6061
|
+
showLabel ? /* @__PURE__ */ jsx72(Txt, { variant: "caption", tone: on === "media" ? "onMedia" : "accent", style: styles56.text, children: label }) : null
|
|
5974
6062
|
] });
|
|
5975
6063
|
}
|
|
5976
|
-
var
|
|
6064
|
+
var styles56 = StyleSheet56.create({ row: { flexDirection: "row", alignItems: "center", gap: 4 }, text: { fontWeight: "700" } });
|
|
5977
6065
|
|
|
5978
6066
|
// src/native/waveform.tsx
|
|
5979
|
-
import * as
|
|
5980
|
-
import { Animated as Animated28, AppState as AppState2, Easing as Easing14, StyleSheet as
|
|
6067
|
+
import * as React46 from "react";
|
|
6068
|
+
import { Animated as Animated28, AppState as AppState2, Easing as Easing14, StyleSheet as StyleSheet57, View as View65 } from "react-native";
|
|
5981
6069
|
|
|
5982
6070
|
// src/waveform/bars.ts
|
|
5983
6071
|
function resamplePeaks(peaks, count) {
|
|
@@ -5992,20 +6080,20 @@ function resamplePeaks(peaks, count) {
|
|
|
5992
6080
|
}
|
|
5993
6081
|
|
|
5994
6082
|
// src/native/waveform.tsx
|
|
5995
|
-
import { jsx as
|
|
6083
|
+
import { jsx as jsx73 } from "react/jsx-runtime";
|
|
5996
6084
|
var HEIGHT = { sm: 24, md: 40, lg: 64 };
|
|
5997
6085
|
function Waveform({ peaks, bars = 32, size = "md", tone: tone3 = "accent", playing = false, label, style, ...props }) {
|
|
5998
6086
|
const { theme } = useTheme();
|
|
5999
6087
|
const reduce = useReducedMotion();
|
|
6000
|
-
const [active, setActive] =
|
|
6001
|
-
|
|
6088
|
+
const [active, setActive] = React46.useState(() => AppState2.currentState === "active");
|
|
6089
|
+
React46.useEffect(() => {
|
|
6002
6090
|
const subscription = AppState2.addEventListener("change", (state) => setActive(state === "active"));
|
|
6003
6091
|
return () => subscription.remove();
|
|
6004
6092
|
}, []);
|
|
6005
|
-
const shape =
|
|
6006
|
-
const values =
|
|
6093
|
+
const shape = React46.useMemo(() => resamplePeaks(peaks ?? [], bars), [peaks, bars]);
|
|
6094
|
+
const values = React46.useMemo(() => shape.map(() => new Animated28.Value(1)), [shape]);
|
|
6007
6095
|
const moving = playing && !reduce && active;
|
|
6008
|
-
|
|
6096
|
+
React46.useEffect(() => {
|
|
6009
6097
|
if (!moving) {
|
|
6010
6098
|
values.forEach((value) => value.setValue(1));
|
|
6011
6099
|
return;
|
|
@@ -6025,8 +6113,8 @@ function Waveform({ peaks, bars = 32, size = "md", tone: tone3 = "accent", playi
|
|
|
6025
6113
|
}, [moving, values]);
|
|
6026
6114
|
const named = label !== void 0;
|
|
6027
6115
|
const barColour = tone3 === "neutral" ? theme.borderStrong : theme.accent;
|
|
6028
|
-
return /* @__PURE__ */
|
|
6029
|
-
|
|
6116
|
+
return /* @__PURE__ */ jsx73(
|
|
6117
|
+
View65,
|
|
6030
6118
|
{
|
|
6031
6119
|
...props,
|
|
6032
6120
|
accessible: named,
|
|
@@ -6034,13 +6122,13 @@ function Waveform({ peaks, bars = 32, size = "md", tone: tone3 = "accent", playi
|
|
|
6034
6122
|
accessibilityLabel: label,
|
|
6035
6123
|
"aria-hidden": named ? void 0 : true,
|
|
6036
6124
|
importantForAccessibility: named ? "yes" : "no-hide-descendants",
|
|
6037
|
-
style: [
|
|
6038
|
-
children: shape.map((peak, i) => /* @__PURE__ */
|
|
6125
|
+
style: [styles57.root, { height: HEIGHT[size] }, style],
|
|
6126
|
+
children: shape.map((peak, i) => /* @__PURE__ */ jsx73(
|
|
6039
6127
|
Animated28.View,
|
|
6040
6128
|
{
|
|
6041
6129
|
testID: "waveform-bar",
|
|
6042
6130
|
style: [
|
|
6043
|
-
|
|
6131
|
+
styles57.bar,
|
|
6044
6132
|
{ height: `${Math.round(peak * 100)}%`, backgroundColor: barColour },
|
|
6045
6133
|
{ transform: [{ scaleY: values[i].interpolate({ inputRange: [0, 1], outputRange: [0.45, 1] }) }] }
|
|
6046
6134
|
]
|
|
@@ -6050,7 +6138,7 @@ function Waveform({ peaks, bars = 32, size = "md", tone: tone3 = "accent", playi
|
|
|
6050
6138
|
}
|
|
6051
6139
|
);
|
|
6052
6140
|
}
|
|
6053
|
-
var
|
|
6141
|
+
var styles57 = StyleSheet57.create({
|
|
6054
6142
|
root: { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", columnGap: 2 },
|
|
6055
6143
|
bar: { flex: 1, minWidth: 2, borderRadius: 9999 }
|
|
6056
6144
|
});
|
|
@@ -6077,6 +6165,7 @@ export {
|
|
|
6077
6165
|
Checkbox,
|
|
6078
6166
|
Chip,
|
|
6079
6167
|
Combobox,
|
|
6168
|
+
ComposerMeta,
|
|
6080
6169
|
ConversationItem,
|
|
6081
6170
|
Countdown,
|
|
6082
6171
|
DateField,
|
|
@@ -6124,6 +6213,8 @@ export {
|
|
|
6124
6213
|
SearchField,
|
|
6125
6214
|
Segmented,
|
|
6126
6215
|
Select,
|
|
6216
|
+
SettingsGroup,
|
|
6217
|
+
SettingsRow,
|
|
6127
6218
|
Sheet,
|
|
6128
6219
|
Showcase,
|
|
6129
6220
|
Skeleton,
|