@xenition/ui 0.1.0 → 0.1.2
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/dist/native/commerce/GenerativeCover.d.ts +14 -9
- package/dist/native/commerce/GenerativeCover.d.ts.map +1 -1
- package/dist/native/commerce/GenerativeCover.js +31 -7
- package/dist/native/commerce/GenerativeCover.js.map +1 -1
- package/dist/native/marketing/AnnouncementBar.d.ts +33 -0
- package/dist/native/marketing/AnnouncementBar.d.ts.map +1 -0
- package/dist/native/marketing/AnnouncementBar.js +101 -0
- package/dist/native/marketing/AnnouncementBar.js.map +1 -0
- package/dist/native/marketing/AuroraBackground.d.ts +35 -0
- package/dist/native/marketing/AuroraBackground.d.ts.map +1 -0
- package/dist/native/marketing/AuroraBackground.js +56 -0
- package/dist/native/marketing/AuroraBackground.js.map +1 -0
- package/dist/native/marketing/Bento.d.ts +54 -0
- package/dist/native/marketing/Bento.d.ts.map +1 -0
- package/dist/native/marketing/Bento.js +139 -0
- package/dist/native/marketing/Bento.js.map +1 -0
- package/dist/native/marketing/Carousel.d.ts +26 -0
- package/dist/native/marketing/Carousel.d.ts.map +1 -0
- package/dist/native/marketing/Carousel.js +95 -0
- package/dist/native/marketing/Carousel.js.map +1 -0
- package/dist/native/marketing/ComparisonTable.d.ts +38 -0
- package/dist/native/marketing/ComparisonTable.d.ts.map +1 -0
- package/dist/native/marketing/ComparisonTable.js +84 -0
- package/dist/native/marketing/ComparisonTable.js.map +1 -0
- package/dist/native/marketing/Countdown.d.ts +25 -0
- package/dist/native/marketing/Countdown.d.ts.map +1 -0
- package/dist/native/marketing/Countdown.js +107 -0
- package/dist/native/marketing/Countdown.js.map +1 -0
- package/dist/native/marketing/CoverGallery.d.ts +38 -0
- package/dist/native/marketing/CoverGallery.d.ts.map +1 -0
- package/dist/native/marketing/CoverGallery.js +41 -0
- package/dist/native/marketing/CoverGallery.js.map +1 -0
- package/dist/native/marketing/EditorialGrid.d.ts +73 -0
- package/dist/native/marketing/EditorialGrid.d.ts.map +1 -0
- package/dist/native/marketing/EditorialGrid.js +34 -0
- package/dist/native/marketing/EditorialGrid.js.map +1 -0
- package/dist/native/marketing/FeatureSplit.d.ts +29 -0
- package/dist/native/marketing/FeatureSplit.d.ts.map +1 -0
- package/dist/native/marketing/FeatureSplit.js +37 -0
- package/dist/native/marketing/FeatureSplit.js.map +1 -0
- package/dist/native/marketing/LocationBlock.d.ts +37 -0
- package/dist/native/marketing/LocationBlock.d.ts.map +1 -0
- package/dist/native/marketing/LocationBlock.js +49 -0
- package/dist/native/marketing/LocationBlock.js.map +1 -0
- package/dist/native/marketing/Navbar.d.ts +34 -0
- package/dist/native/marketing/Navbar.d.ts.map +1 -0
- package/dist/native/marketing/Navbar.js +100 -0
- package/dist/native/marketing/Navbar.js.map +1 -0
- package/dist/native/marketing/NewsletterSignup.d.ts +33 -0
- package/dist/native/marketing/NewsletterSignup.d.ts.map +1 -0
- package/dist/native/marketing/NewsletterSignup.js +97 -0
- package/dist/native/marketing/NewsletterSignup.js.map +1 -0
- package/dist/native/marketing/OrnamentRule.d.ts +23 -0
- package/dist/native/marketing/OrnamentRule.d.ts.map +1 -0
- package/dist/native/marketing/OrnamentRule.js +43 -0
- package/dist/native/marketing/OrnamentRule.js.map +1 -0
- package/dist/native/marketing/ParticleField.d.ts +25 -0
- package/dist/native/marketing/ParticleField.d.ts.map +1 -0
- package/dist/native/marketing/ParticleField.js +92 -0
- package/dist/native/marketing/ParticleField.js.map +1 -0
- package/dist/native/marketing/PointerHalo.d.ts +22 -0
- package/dist/native/marketing/PointerHalo.d.ts.map +1 -0
- package/dist/native/marketing/PointerHalo.js +15 -0
- package/dist/native/marketing/PointerHalo.js.map +1 -0
- package/dist/native/marketing/PriceList.d.ts +30 -0
- package/dist/native/marketing/PriceList.d.ts.map +1 -0
- package/dist/native/marketing/PriceList.js +42 -0
- package/dist/native/marketing/PriceList.js.map +1 -0
- package/dist/native/marketing/PricingToggle.d.ts +30 -0
- package/dist/native/marketing/PricingToggle.d.ts.map +1 -0
- package/dist/native/marketing/PricingToggle.js +55 -0
- package/dist/native/marketing/PricingToggle.js.map +1 -0
- package/dist/native/marketing/ProcessSteps.d.ts +24 -0
- package/dist/native/marketing/ProcessSteps.d.ts.map +1 -0
- package/dist/native/marketing/ProcessSteps.js +52 -0
- package/dist/native/marketing/ProcessSteps.js.map +1 -0
- package/dist/native/marketing/ProductMock.d.ts +47 -0
- package/dist/native/marketing/ProductMock.d.ts.map +1 -0
- package/dist/native/marketing/ProductMock.js +270 -0
- package/dist/native/marketing/ProductMock.js.map +1 -0
- package/dist/native/marketing/RichText.d.ts +40 -0
- package/dist/native/marketing/RichText.d.ts.map +1 -0
- package/dist/native/marketing/RichText.js +134 -0
- package/dist/native/marketing/RichText.js.map +1 -0
- package/dist/native/marketing/SectionDivider.d.ts +34 -0
- package/dist/native/marketing/SectionDivider.d.ts.map +1 -0
- package/dist/native/marketing/SectionDivider.js +41 -0
- package/dist/native/marketing/SectionDivider.js.map +1 -0
- package/dist/native/marketing/TeamGrid.d.ts +27 -0
- package/dist/native/marketing/TeamGrid.d.ts.map +1 -0
- package/dist/native/marketing/TeamGrid.js +37 -0
- package/dist/native/marketing/TeamGrid.js.map +1 -0
- package/dist/native/marketing/VideoEmbed.d.ts +23 -0
- package/dist/native/marketing/VideoEmbed.d.ts.map +1 -0
- package/dist/native/marketing/VideoEmbed.js +38 -0
- package/dist/native/marketing/VideoEmbed.js.map +1 -0
- package/dist/native/marketing/index.d.ts +48 -0
- package/dist/native/marketing/index.d.ts.map +1 -1
- package/dist/native/marketing/index.js +55 -1
- package/dist/native/marketing/index.js.map +1 -1
- package/dist/native/motion/AnimatedCounter.d.ts +24 -0
- package/dist/native/motion/AnimatedCounter.d.ts.map +1 -0
- package/dist/native/motion/AnimatedCounter.js +76 -0
- package/dist/native/motion/AnimatedCounter.js.map +1 -0
- package/dist/native/motion/Marquee.d.ts +23 -0
- package/dist/native/motion/Marquee.d.ts.map +1 -0
- package/dist/native/motion/Marquee.js +79 -0
- package/dist/native/motion/Marquee.js.map +1 -0
- package/dist/native/motion/index.d.ts +10 -5
- package/dist/native/motion/index.d.ts.map +1 -1
- package/dist/native/motion/index.js +11 -6
- package/dist/native/motion/index.js.map +1 -1
- package/dist/native/primitives/Wordmark.d.ts +27 -0
- package/dist/native/primitives/Wordmark.d.ts.map +1 -0
- package/dist/native/primitives/Wordmark.js +41 -0
- package/dist/native/primitives/Wordmark.js.map +1 -0
- package/dist/native/primitives/index.d.ts +2 -0
- package/dist/native/primitives/index.d.ts.map +1 -1
- package/dist/native/primitives/index.js +4 -2
- package/dist/native/primitives/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
/** Composition variants — accepted for parity with the web `GenerativeCover`. */
|
|
4
|
+
export type CoverForm = 'arc' | 'bands' | 'orbit' | 'grid' | 'wave' | 'stack';
|
|
3
5
|
export interface GenerativeCoverProps {
|
|
4
6
|
/** Stable seed — same seed yields the same cover (product slug/title). */
|
|
5
|
-
seed: string;
|
|
7
|
+
seed: string | number;
|
|
6
8
|
/** Optional label rendered over the art (product initials fallback). */
|
|
7
9
|
label?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Composition — accepted for parity with the web cover. Native renders a
|
|
12
|
+
* seeded gradient (no SVG), so `form` only varies the gradient direction
|
|
13
|
+
* rather than the full geometric composition.
|
|
14
|
+
*/
|
|
15
|
+
form?: CoverForm;
|
|
16
|
+
/** Foreground color role (e.g. `primary-700`, `accent`) → the gradient's far stop. */
|
|
17
|
+
ink?: string;
|
|
18
|
+
/** Background color role (e.g. `neutral-100`, `surface`) → the gradient's near stop. */
|
|
19
|
+
paper?: string;
|
|
8
20
|
style?: StyleProp<ViewStyle>;
|
|
9
21
|
}
|
|
10
|
-
|
|
11
|
-
* Native cover-art placeholder drawn when a product has no image — the native
|
|
12
|
-
* counterpart of the web `GenerativeCover`. A deterministic two-token gradient
|
|
13
|
-
* (seeded from the product slug) via `expo-linear-gradient`, with the product
|
|
14
|
-
* initials overlaid. Token-only: both gradient stops are compiled ramp steps,
|
|
15
|
-
* so it restyles from the seed and works in light + dark.
|
|
16
|
-
*/
|
|
17
|
-
export declare function GenerativeCover({ seed, label, style, }: GenerativeCoverProps): React.ReactElement;
|
|
22
|
+
export declare function GenerativeCover({ seed, label, form, ink, paper, style, }: GenerativeCoverProps): React.ReactElement;
|
|
18
23
|
//# sourceMappingURL=GenerativeCover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenerativeCover.d.ts","sourceRoot":"","sources":["../../../src/native/commerce/GenerativeCover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,MAAM,WAAW,oBAAoB;IACnC,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"GenerativeCover.d.ts","sourceRoot":"","sources":["../../../src/native/commerce/GenerativeCover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,iFAAiF;AACjF,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,0EAA0E;IAC1E,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAqDD,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,GAAG,EACH,KAAK,EACL,KAAK,GACN,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CA2C3C"}
|
|
@@ -7,13 +7,22 @@ const theme_1 = require("../theme");
|
|
|
7
7
|
const Gradient_1 = require("./internal/Gradient");
|
|
8
8
|
/** Deterministic FNV-1a hash → stable per-seed geometry. */
|
|
9
9
|
function hashSeed(seed) {
|
|
10
|
+
const s = String(seed);
|
|
10
11
|
let h = 2166136261;
|
|
11
|
-
for (let i = 0; i <
|
|
12
|
-
h ^=
|
|
12
|
+
for (let i = 0; i < s.length; i += 1) {
|
|
13
|
+
h ^= s.charCodeAt(i);
|
|
13
14
|
h = Math.imul(h, 16777619);
|
|
14
15
|
}
|
|
15
16
|
return h >>> 0;
|
|
16
17
|
}
|
|
18
|
+
const FORM_DIRS = {
|
|
19
|
+
arc: { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } },
|
|
20
|
+
bands: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } },
|
|
21
|
+
orbit: { start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 } },
|
|
22
|
+
grid: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
|
|
23
|
+
wave: { start: { x: 0, y: 1 }, end: { x: 1, y: 0 } },
|
|
24
|
+
stack: { start: { x: 1, y: 0 }, end: { x: 0, y: 1 } },
|
|
25
|
+
};
|
|
17
26
|
function initials(label) {
|
|
18
27
|
return label
|
|
19
28
|
.split(/\s+/)
|
|
@@ -29,15 +38,30 @@ function initials(label) {
|
|
|
29
38
|
* initials overlaid. Token-only: both gradient stops are compiled ramp steps,
|
|
30
39
|
* so it restyles from the seed and works in light + dark.
|
|
31
40
|
*/
|
|
32
|
-
|
|
41
|
+
/** Resolve a color role (`primary-700`, `accent`, `surface`, …) to a token color. */
|
|
42
|
+
function resolveRole(role, tokens, colors) {
|
|
43
|
+
if (!role)
|
|
44
|
+
return undefined;
|
|
45
|
+
const ramp = /^(primary|accent|neutral)-(\d+)$/.exec(role);
|
|
46
|
+
if (ramp) {
|
|
47
|
+
const steps = tokens.ramps[ramp[1]];
|
|
48
|
+
return steps[Number(ramp[2])];
|
|
49
|
+
}
|
|
50
|
+
return colors[role];
|
|
51
|
+
}
|
|
52
|
+
function GenerativeCover({ seed, label, form, ink, paper, style, }) {
|
|
33
53
|
const { tokens, colors } = (0, theme_1.useXenitionTheme)();
|
|
34
54
|
const h = hashSeed(seed);
|
|
35
|
-
//
|
|
55
|
+
// Explicit ink/paper roles override the seeded gradient (brand-themed plate,
|
|
56
|
+
// matching the web cover); otherwise pick two ramp steps deterministically.
|
|
36
57
|
const primarySteps = [300, 400, 500, 600];
|
|
37
58
|
const accentSteps = [400, 500, 600, 700];
|
|
38
|
-
const from = tokens
|
|
39
|
-
|
|
40
|
-
|
|
59
|
+
const from = resolveRole(paper, tokens, colors)
|
|
60
|
+
?? tokens.ramps.primary[primarySteps[h % primarySteps.length]];
|
|
61
|
+
const to = resolveRole(ink, tokens, colors)
|
|
62
|
+
?? tokens.ramps.accent[accentSteps[(h >> 3) % accentSteps.length]];
|
|
63
|
+
const dir = FORM_DIRS[form ?? ['arc', 'bands', 'orbit', 'grid', 'wave', 'stack'][h % 6]];
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(Gradient_1.Gradient, { colors: [from, to], start: dir.start, end: dir.end, style: [{ flex: 1, alignItems: 'center', justifyContent: 'center' }, style], children: label ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
41
65
|
alignItems: 'center',
|
|
42
66
|
justifyContent: 'center',
|
|
43
67
|
paddingHorizontal: tokens.spacing.sm,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenerativeCover.js","sourceRoot":"","sources":["../../../src/native/commerce/GenerativeCover.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"GenerativeCover.js","sourceRoot":"","sources":["../../../src/native/commerce/GenerativeCover.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
export type AnnouncementTone = 'primary' | 'accent' | 'neutral';
|
|
4
|
+
export interface AnnouncementBarProps {
|
|
5
|
+
/** Banner message. */
|
|
6
|
+
message: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Optional trailing call-to-action. On web this is a link/button node; the
|
|
9
|
+
* native mirror renders `actionLabel` + `onPress` as a pressable link, and
|
|
10
|
+
* also accepts an arbitrary `action` node for parity.
|
|
11
|
+
*/
|
|
12
|
+
action?: React.ReactNode;
|
|
13
|
+
/** Label for the built-in trailing link (paired with `onPress`). */
|
|
14
|
+
actionLabel?: string;
|
|
15
|
+
/** Called when the trailing link is pressed (web `href` → native `onPress`). */
|
|
16
|
+
onPress?: () => void;
|
|
17
|
+
/** Color treatment. */
|
|
18
|
+
tone?: AnnouncementTone;
|
|
19
|
+
/** Hide the dismiss control. */
|
|
20
|
+
dismissible?: boolean;
|
|
21
|
+
/** Accessible label for the close button. */
|
|
22
|
+
closeLabel?: string;
|
|
23
|
+
/** Called after the bar is dismissed. */
|
|
24
|
+
onDismiss?: () => void;
|
|
25
|
+
style?: StyleProp<ViewStyle>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Compact dismissible top banner — the native mirror of the web
|
|
29
|
+
* `AnnouncementBar`. A message with an optional trailing link (`href` →
|
|
30
|
+
* `onPress`) and a dismiss control; dismissal is session state only. Token-only.
|
|
31
|
+
*/
|
|
32
|
+
export declare function AnnouncementBar({ message, action, actionLabel, onPress, tone, dismissible, closeLabel, onDismiss, style, }: AnnouncementBarProps): React.ReactElement | null;
|
|
33
|
+
//# sourceMappingURL=AnnouncementBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnnouncementBar.d.ts","sourceRoot":"","sources":["../../../src/native/marketing/AnnouncementBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAgB,EAChB,WAAkB,EAClB,UAAmC,EACnC,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2GlD"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.AnnouncementBar = AnnouncementBar;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
const React = __importStar(require("react"));
|
|
39
|
+
const react_native_1 = require("react-native");
|
|
40
|
+
const theme_1 = require("../theme");
|
|
41
|
+
/**
|
|
42
|
+
* Compact dismissible top banner — the native mirror of the web
|
|
43
|
+
* `AnnouncementBar`. A message with an optional trailing link (`href` →
|
|
44
|
+
* `onPress`) and a dismiss control; dismissal is session state only. Token-only.
|
|
45
|
+
*/
|
|
46
|
+
function AnnouncementBar({ message, action, actionLabel, onPress, tone = 'primary', dismissible = true, closeLabel = 'Dismiss announcement', onDismiss, style, }) {
|
|
47
|
+
const { colors, tokens } = (0, theme_1.useXenitionTheme)();
|
|
48
|
+
const [dismissed, setDismissed] = React.useState(false);
|
|
49
|
+
if (dismissed)
|
|
50
|
+
return null;
|
|
51
|
+
// `neutral` is a bordered light band; `primary`/`accent` are filled bands.
|
|
52
|
+
const bg = tone === 'accent'
|
|
53
|
+
? colors.accent
|
|
54
|
+
: tone === 'neutral'
|
|
55
|
+
? tokens.ramps.neutral[100]
|
|
56
|
+
: colors.primary;
|
|
57
|
+
const fg = tone === 'neutral' ? colors.onSurface : colors.onPrimary;
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "xen-announcement-bar", accessibilityRole: "summary", accessibilityLabel: "Announcement", style: [
|
|
59
|
+
{
|
|
60
|
+
width: '100%',
|
|
61
|
+
flexDirection: 'row',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
justifyContent: 'center',
|
|
64
|
+
gap: tokens.spacing.md,
|
|
65
|
+
paddingHorizontal: tokens.spacing.lg,
|
|
66
|
+
paddingVertical: tokens.spacing.sm,
|
|
67
|
+
backgroundColor: bg,
|
|
68
|
+
...(tone === 'neutral'
|
|
69
|
+
? { borderBottomWidth: 1, borderBottomColor: colors.border }
|
|
70
|
+
: null),
|
|
71
|
+
},
|
|
72
|
+
style,
|
|
73
|
+
], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
|
|
74
|
+
flexShrink: 1,
|
|
75
|
+
flexDirection: 'row',
|
|
76
|
+
flexWrap: 'wrap',
|
|
77
|
+
alignItems: 'center',
|
|
78
|
+
justifyContent: 'center',
|
|
79
|
+
gap: tokens.spacing.sm,
|
|
80
|
+
}, children: [typeof message === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
81
|
+
color: fg,
|
|
82
|
+
fontSize: tokens.typography.scale.sm,
|
|
83
|
+
textAlign: 'center',
|
|
84
|
+
}, children: message })) : (message), actionLabel !== undefined ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "link", onPress: onPress, hitSlop: 8, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
85
|
+
color: fg,
|
|
86
|
+
fontSize: tokens.typography.scale.sm,
|
|
87
|
+
fontWeight: '600',
|
|
88
|
+
textDecorationLine: 'underline',
|
|
89
|
+
}, children: actionLabel }) })) : action !== undefined ? (action) : null] }), dismissible ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: closeLabel, hitSlop: 8, onPress: () => {
|
|
90
|
+
setDismissed(true);
|
|
91
|
+
onDismiss?.();
|
|
92
|
+
}, style: {
|
|
93
|
+
marginLeft: 'auto',
|
|
94
|
+
height: 24,
|
|
95
|
+
width: 24,
|
|
96
|
+
alignItems: 'center',
|
|
97
|
+
justifyContent: 'center',
|
|
98
|
+
borderRadius: tokens.radius.lg,
|
|
99
|
+
}, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: fg, fontSize: tokens.typography.scale.sm }, children: "\u2715" }) })) : null] }));
|
|
100
|
+
}
|
|
101
|
+
//# sourceMappingURL=AnnouncementBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnnouncementBar.js","sourceRoot":"","sources":["../../../src/native/marketing/AnnouncementBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,0CAqHC;;AA9JD,6CAA+B;AAC/B,+CAMsB;AACtB,oCAA4C;AA4B5C;;;;GAIG;AACH,SAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,sBAAsB,EACnC,SAAS,EACT,KAAK,GACgB;IACrB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,SAAS;QAAE,OAAO,IAAI,CAAC;IAE3B,2EAA2E;IAC3E,MAAM,EAAE,GACN,IAAI,KAAK,QAAQ;QACf,CAAC,CAAC,MAAM,CAAC,MAAM;QACf,CAAC,CAAC,IAAI,KAAK,SAAS;YAClB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;YAC3B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,wBAAC,mBAAI,IACH,MAAM,EAAC,sBAAsB,EAC7B,iBAAiB,EAAC,SAAS,EAC3B,kBAAkB,EAAC,cAAc,EACjC,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,MAAM;gBACb,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;gBACtB,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;gBACpC,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;gBAClC,eAAe,EAAE,EAAE;gBACnB,GAAG,CAAC,IAAI,KAAK,SAAS;oBACpB,CAAC,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE;oBAC5D,CAAC,CAAC,IAAI,CAAC;aACV;YACD,KAAK;SACN,aAED,wBAAC,mBAAI,IACH,KAAK,EAAE;oBACL,UAAU,EAAE,CAAC;oBACb,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,MAAM;oBAChB,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;iBACvB,aAEA,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,uBAAC,mBAAI,IACH,KAAK,EAAE;4BACL,KAAK,EAAE,EAAE;4BACT,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;4BACpC,SAAS,EAAE,QAAQ;yBACpB,YAEA,OAAO,GACH,CACR,CAAC,CAAC,CAAC,CACF,OAAO,CACR,EAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,uBAAC,wBAAS,IACR,iBAAiB,EAAC,MAAM,EACxB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,YAEV,uBAAC,mBAAI,IACH,KAAK,EAAE;gCACL,KAAK,EAAE,EAAE;gCACT,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;gCACpC,UAAU,EAAE,KAAK;gCACjB,kBAAkB,EAAE,WAAW;6BAChC,YAEA,WAAW,GACP,GACG,CACb,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CACzB,MAAM,CACP,CAAC,CAAC,CAAC,IAAI,IACH,EAEN,WAAW,CAAC,CAAC,CAAC,CACb,uBAAC,wBAAS,IACR,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,UAAU,EAC9B,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC,IAAI,CAAC,CAAC;oBACnB,SAAS,EAAE,EAAE,CAAC;gBAChB,CAAC,EACD,KAAK,EAAE;oBACL,UAAU,EAAE,MAAM;oBAClB,MAAM,EAAE,EAAE;oBACV,KAAK,EAAE,EAAE;oBACT,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE;iBAC/B,YAED,uBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,uBAEzD,GACG,CACb,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
export type AuroraVariant = 'aurora' | 'mesh' | 'radial';
|
|
4
|
+
export type AuroraPattern = 'none' | 'dots' | 'grid';
|
|
5
|
+
export interface AuroraBackgroundProps {
|
|
6
|
+
/** Blob composition: layered aurora, corner mesh, or a single radial glow. */
|
|
7
|
+
variant?: AuroraVariant;
|
|
8
|
+
/**
|
|
9
|
+
* Web overlays an SVG feTurbulence grain texture. React Native has no
|
|
10
|
+
* `mix-blend-mode`/SVG-filter equivalent, so this prop is **inert** on native.
|
|
11
|
+
*/
|
|
12
|
+
grain?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Web overlays a dot/grid pattern. Native has no CSS background-image tiling,
|
|
15
|
+
* so this prop is **inert** on native.
|
|
16
|
+
*/
|
|
17
|
+
pattern?: AuroraPattern;
|
|
18
|
+
/** Decorative content layered above the blobs (rendered absolute-fill). */
|
|
19
|
+
children?: React.ReactNode;
|
|
20
|
+
style?: StyleProp<ViewStyle>;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Native mirror of the web `AuroraBackground`. The web version paints blurred,
|
|
24
|
+
* slowly drifting radial-gradient blobs (plus grain/pattern overlays) using CSS
|
|
25
|
+
* `filter: blur()`, keyframes, and `mix-blend-mode` — none of which exist in
|
|
26
|
+
* React Native. Native therefore renders a **static, token-styled** layered
|
|
27
|
+
* background: a few absolutely-positioned, low-opacity, fully-rounded ramp-color
|
|
28
|
+
* Views (primary/accent steps 400–700), softened with a translucent alpha
|
|
29
|
+
* derived from the token so they read as glows rather than hard discs. No
|
|
30
|
+
* continuous animation — nothing to honor for reduced motion. `children` render
|
|
31
|
+
* in an absolute-fill layer above the blobs. `grain` and `pattern` are accepted
|
|
32
|
+
* for API parity but are **inert** on native (see prop docs). Token-only.
|
|
33
|
+
*/
|
|
34
|
+
export declare function AuroraBackground({ variant, grain: _grain, pattern: _pattern, children, style, }: AuroraBackgroundProps): React.ReactElement;
|
|
35
|
+
//# sourceMappingURL=AuroraBackground.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AuroraBackground.d.ts","sourceRoot":"","sources":["../../../src/native/marketing/AuroraBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAwCD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAkB,EAClB,KAAK,EAAE,MAAc,EACrB,OAAO,EAAE,QAAiB,EAC1B,QAAQ,EACR,KAAK,GACN,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CA+B5C"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AuroraBackground = AuroraBackground;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_native_1 = require("react-native");
|
|
6
|
+
const theme_1 = require("../theme");
|
|
7
|
+
const color_1 = require("../primitives/internal/color");
|
|
8
|
+
const AURORA_BLOBS = [
|
|
9
|
+
{ role: 'primary', step: 500, top: '-20%', left: '-10%', size: '55%', opacity: 0.4 },
|
|
10
|
+
{ role: 'accent', step: 400, top: '-10%', left: '55%', size: '50%', opacity: 0.32 },
|
|
11
|
+
{ role: 'primary', step: 700, top: '45%', left: '20%', size: '60%', opacity: 0.28 },
|
|
12
|
+
{ role: 'accent', step: 600, top: '55%', left: '65%', size: '45%', opacity: 0.28 },
|
|
13
|
+
];
|
|
14
|
+
const MESH_BLOBS = [
|
|
15
|
+
{ role: 'primary', step: 400, top: '-25%', left: '-15%', size: '70%', opacity: 0.36 },
|
|
16
|
+
{ role: 'accent', step: 500, top: '-20%', left: '60%', size: '65%', opacity: 0.32 },
|
|
17
|
+
{ role: 'primary', step: 600, top: '55%', left: '55%', size: '70%', opacity: 0.32 },
|
|
18
|
+
{ role: 'accent', step: 400, top: '60%', left: '-20%', size: '60%', opacity: 0.28 },
|
|
19
|
+
];
|
|
20
|
+
const RADIAL_BLOBS = [
|
|
21
|
+
{ role: 'primary', step: 600, top: '10%', left: '15%', size: '70%', opacity: 0.36 },
|
|
22
|
+
{ role: 'accent', step: 500, top: '25%', left: '30%', size: '40%', opacity: 0.28 },
|
|
23
|
+
];
|
|
24
|
+
const BLOBS = {
|
|
25
|
+
aurora: AURORA_BLOBS,
|
|
26
|
+
mesh: MESH_BLOBS,
|
|
27
|
+
radial: RADIAL_BLOBS,
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Native mirror of the web `AuroraBackground`. The web version paints blurred,
|
|
31
|
+
* slowly drifting radial-gradient blobs (plus grain/pattern overlays) using CSS
|
|
32
|
+
* `filter: blur()`, keyframes, and `mix-blend-mode` — none of which exist in
|
|
33
|
+
* React Native. Native therefore renders a **static, token-styled** layered
|
|
34
|
+
* background: a few absolutely-positioned, low-opacity, fully-rounded ramp-color
|
|
35
|
+
* Views (primary/accent steps 400–700), softened with a translucent alpha
|
|
36
|
+
* derived from the token so they read as glows rather than hard discs. No
|
|
37
|
+
* continuous animation — nothing to honor for reduced motion. `children` render
|
|
38
|
+
* in an absolute-fill layer above the blobs. `grain` and `pattern` are accepted
|
|
39
|
+
* for API parity but are **inert** on native (see prop docs). Token-only.
|
|
40
|
+
*/
|
|
41
|
+
function AuroraBackground({ variant = 'aurora', grain: _grain = false, pattern: _pattern = 'none', children, style, }) {
|
|
42
|
+
const { tokens } = (0, theme_1.useXenitionTheme)();
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "xen-aurora-background", pointerEvents: "none", style: [react_native_1.StyleSheet.absoluteFill, { overflow: 'hidden' }, style], children: [BLOBS[variant].map((blob, index) => {
|
|
44
|
+
const base = tokens.ramps[blob.role][blob.step];
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
top: blob.top,
|
|
48
|
+
left: blob.left,
|
|
49
|
+
width: blob.size,
|
|
50
|
+
aspectRatio: 1,
|
|
51
|
+
borderRadius: 9999,
|
|
52
|
+
backgroundColor: (0, color_1.withAlpha)(base, blob.opacity),
|
|
53
|
+
} }, index));
|
|
54
|
+
}), children !== undefined && children !== null ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, children: children })) : null] }));
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=AuroraBackground.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AuroraBackground.js","sourceRoot":"","sources":["../../../src/native/marketing/AuroraBackground.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
export interface BentoCardData {
|
|
4
|
+
/** Icon slot rendered in a ramp-gradient-ish tinted tile (string is auto-colored). */
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
/** Small stat chip in the top-right corner (e.g. "38ms p99"). */
|
|
7
|
+
metric?: React.ReactNode;
|
|
8
|
+
/** Card title. */
|
|
9
|
+
title?: React.ReactNode;
|
|
10
|
+
/** Body copy under the title. */
|
|
11
|
+
body?: React.ReactNode;
|
|
12
|
+
/** Micro-visual slot below the body (a mini chart, an image, …). */
|
|
13
|
+
visual?: React.ReactNode;
|
|
14
|
+
/** Small emphasized footer line pinned to the bottom. */
|
|
15
|
+
detail?: React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
export interface BentoCardProps extends BentoCardData {
|
|
18
|
+
style?: StyleProp<ViewStyle>;
|
|
19
|
+
}
|
|
20
|
+
export interface BentoGridProps {
|
|
21
|
+
/**
|
|
22
|
+
* The bento cells to render (mirrors the web `BentoCard` children). Provide
|
|
23
|
+
* either this data array or `BentoCard` children — the array wins if both are
|
|
24
|
+
* given.
|
|
25
|
+
*/
|
|
26
|
+
cards?: BentoCardData[];
|
|
27
|
+
/**
|
|
28
|
+
* `BentoCard` children, for callers that prefer composition over the `cards`
|
|
29
|
+
* array. Ignored when `cards` is provided.
|
|
30
|
+
*/
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
style?: StyleProp<ViewStyle>;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* One bento cell — the native mirror of the web `BentoCard`: an icon tile +
|
|
36
|
+
* metric chip header, a title, body copy, an optional micro-visual slot, and a
|
|
37
|
+
* pinned detail line. The web hover glow + radial "energy wash" are hover-only
|
|
38
|
+
* effects with no touch analogue and are dropped; the ramp-gradient icon tile
|
|
39
|
+
* degrades to a flat token-tinted square. All slots optional. Token-only.
|
|
40
|
+
*/
|
|
41
|
+
export declare function BentoCard({ icon, metric, title, body, visual, detail, style, }: BentoCardProps): React.ReactElement;
|
|
42
|
+
/**
|
|
43
|
+
* Bento feature grid — the native mirror of the web `BentoGrid` + `BentoCard`.
|
|
44
|
+
*
|
|
45
|
+
* The web version is an asymmetric 6-column CSS grid where cards declare their
|
|
46
|
+
* own column/row spans and overlap into the classic bento rhythm. React Native
|
|
47
|
+
* has no CSS grid and phones are single-column, so native **drops the spans and
|
|
48
|
+
* overlap entirely** and renders the cards as a simple stacked (wrapping) list
|
|
49
|
+
* — the same simplification `FeatureGrid` makes. The web hover glow/energy wash
|
|
50
|
+
* are hover-only and are dropped. Cards fade + rise once on mount (skipped when
|
|
51
|
+
* the OS "Reduce Motion" toggle is on). Token-only.
|
|
52
|
+
*/
|
|
53
|
+
export declare function BentoGrid({ cards, children, style }: BentoGridProps): React.ReactElement;
|
|
54
|
+
//# sourceMappingURL=Bento.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Bento.d.ts","sourceRoot":"","sources":["../../../src/native/marketing/Bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,MAAM,WAAW,aAAa;IAC5B,sFAAsF;IACtF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iCAAiC;IACjC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,yDAAyD;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,GACN,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA2HrC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CAyCxF"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.BentoCard = BentoCard;
|
|
37
|
+
exports.BentoGrid = BentoGrid;
|
|
38
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
|
+
const React = __importStar(require("react"));
|
|
40
|
+
const react_native_1 = require("react-native");
|
|
41
|
+
const theme_1 = require("../theme");
|
|
42
|
+
const useReducedMotion_1 = require("../primitives/internal/useReducedMotion");
|
|
43
|
+
/**
|
|
44
|
+
* One bento cell — the native mirror of the web `BentoCard`: an icon tile +
|
|
45
|
+
* metric chip header, a title, body copy, an optional micro-visual slot, and a
|
|
46
|
+
* pinned detail line. The web hover glow + radial "energy wash" are hover-only
|
|
47
|
+
* effects with no touch analogue and are dropped; the ramp-gradient icon tile
|
|
48
|
+
* degrades to a flat token-tinted square. All slots optional. Token-only.
|
|
49
|
+
*/
|
|
50
|
+
function BentoCard({ icon, metric, title, body, visual, detail, style, }) {
|
|
51
|
+
const { colors, tokens } = (0, theme_1.useXenitionTheme)();
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "xen-bento-card", style: [
|
|
53
|
+
{
|
|
54
|
+
flex: 1,
|
|
55
|
+
overflow: 'hidden',
|
|
56
|
+
gap: tokens.spacing.sm,
|
|
57
|
+
padding: tokens.spacing.lg,
|
|
58
|
+
borderRadius: tokens.radius.lg,
|
|
59
|
+
backgroundColor: colors.surface,
|
|
60
|
+
borderWidth: 1,
|
|
61
|
+
borderColor: colors.border,
|
|
62
|
+
},
|
|
63
|
+
style,
|
|
64
|
+
], children: [icon !== undefined || metric !== undefined ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
|
|
65
|
+
flexDirection: 'row',
|
|
66
|
+
alignItems: 'center',
|
|
67
|
+
justifyContent: 'space-between',
|
|
68
|
+
}, children: [icon !== undefined ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
69
|
+
height: 44,
|
|
70
|
+
width: 44,
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
justifyContent: 'center',
|
|
73
|
+
borderRadius: tokens.radius.md,
|
|
74
|
+
backgroundColor: tokens.ramps.primary[600],
|
|
75
|
+
}, children: typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: colors.onPrimary, fontWeight: '700' }, children: icon })) : (icon) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, {})), metric !== undefined ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
76
|
+
paddingHorizontal: tokens.spacing.sm,
|
|
77
|
+
paddingVertical: tokens.spacing.xs,
|
|
78
|
+
borderRadius: 9999,
|
|
79
|
+
borderWidth: 1,
|
|
80
|
+
borderColor: tokens.ramps.accent[300],
|
|
81
|
+
backgroundColor: tokens.ramps.accent[50],
|
|
82
|
+
}, children: typeof metric === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
83
|
+
color: colors.accent,
|
|
84
|
+
fontSize: tokens.typography.scale.xs,
|
|
85
|
+
fontWeight: '700',
|
|
86
|
+
}, children: metric })) : (metric) })) : null] })) : null, title !== undefined ? (typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
87
|
+
color: colors.onSurface,
|
|
88
|
+
fontSize: tokens.typography.scale.xl,
|
|
89
|
+
fontWeight: '700',
|
|
90
|
+
}, children: title })) : (title)) : null, body !== undefined ? (typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: colors.muted, fontSize: tokens.typography.scale.sm }, children: body })) : (body)) : null, visual !== undefined ? (0, jsx_runtime_1.jsx)(react_native_1.View, { children: visual }) : null, detail !== undefined ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { marginTop: 'auto' }, children: typeof detail === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
91
|
+
color: colors.primary,
|
|
92
|
+
fontSize: tokens.typography.scale.xs,
|
|
93
|
+
fontWeight: '500',
|
|
94
|
+
}, children: detail })) : (detail) })) : null] }));
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Bento feature grid — the native mirror of the web `BentoGrid` + `BentoCard`.
|
|
98
|
+
*
|
|
99
|
+
* The web version is an asymmetric 6-column CSS grid where cards declare their
|
|
100
|
+
* own column/row spans and overlap into the classic bento rhythm. React Native
|
|
101
|
+
* has no CSS grid and phones are single-column, so native **drops the spans and
|
|
102
|
+
* overlap entirely** and renders the cards as a simple stacked (wrapping) list
|
|
103
|
+
* — the same simplification `FeatureGrid` makes. The web hover glow/energy wash
|
|
104
|
+
* are hover-only and are dropped. Cards fade + rise once on mount (skipped when
|
|
105
|
+
* the OS "Reduce Motion" toggle is on). Token-only.
|
|
106
|
+
*/
|
|
107
|
+
function BentoGrid({ cards, children, style }) {
|
|
108
|
+
const { tokens } = (0, theme_1.useXenitionTheme)();
|
|
109
|
+
const reduced = (0, useReducedMotion_1.useReducedMotion)();
|
|
110
|
+
const anim = React.useRef(new react_native_1.Animated.Value(0)).current;
|
|
111
|
+
React.useEffect(() => {
|
|
112
|
+
if (reduced) {
|
|
113
|
+
anim.setValue(1);
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
const animation = react_native_1.Animated.timing(anim, {
|
|
117
|
+
toValue: 1,
|
|
118
|
+
duration: 400,
|
|
119
|
+
useNativeDriver: true,
|
|
120
|
+
});
|
|
121
|
+
animation.start();
|
|
122
|
+
return () => animation.stop();
|
|
123
|
+
}, [anim, reduced]);
|
|
124
|
+
const translateY = anim.interpolate({
|
|
125
|
+
inputRange: [0, 1],
|
|
126
|
+
outputRange: [12, 0],
|
|
127
|
+
});
|
|
128
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { testID: "xen-bento-grid", style: [
|
|
129
|
+
{
|
|
130
|
+
gap: tokens.spacing.md,
|
|
131
|
+
opacity: anim,
|
|
132
|
+
transform: [{ translateY }],
|
|
133
|
+
},
|
|
134
|
+
style,
|
|
135
|
+
], children: cards !== undefined
|
|
136
|
+
? cards.map((c, i) => (0, jsx_runtime_1.jsx)(BentoCard, { ...c }, i))
|
|
137
|
+
: children }));
|
|
138
|
+
}
|
|
139
|
+
//# sourceMappingURL=Bento.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Bento.js","sourceRoot":"","sources":["../../../src/native/marketing/Bento.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
export interface CarouselProps {
|
|
4
|
+
/** Slides to render, one per page (mirrors the web `items`/children). */
|
|
5
|
+
items: React.ReactNode[];
|
|
6
|
+
/** Show the dot pager. */
|
|
7
|
+
dots?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Auto-advance interval in ms (0 disables). Honors reduced motion (paused)
|
|
10
|
+
* and a single-slide carousel (no-op).
|
|
11
|
+
*/
|
|
12
|
+
autoplay?: number;
|
|
13
|
+
/** Accessible label for the carousel region. */
|
|
14
|
+
label?: string;
|
|
15
|
+
style?: StyleProp<ViewStyle>;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Horizontal, page-snapping slider — the native mirror of the web `Carousel`.
|
|
19
|
+
* The web version scroll-snaps a flex row; native uses a `pagingEnabled`
|
|
20
|
+
* horizontal `ScrollView` where each slide is one page wide. Swiping drives the
|
|
21
|
+
* active dot, and tapping a dot pages to that slide. The web prev/next arrows
|
|
22
|
+
* and hover/focus pause are dropped (touch has no hover); autoplay still honors
|
|
23
|
+
* reduced motion. Token-only.
|
|
24
|
+
*/
|
|
25
|
+
export declare function Carousel({ items, dots, autoplay, label, style, }: CarouselProps): React.ReactElement;
|
|
26
|
+
//# sourceMappingURL=Carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/native/marketing/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,MAAM,WAAW,aAAa;IAC5B,yEAAyE;IACzE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAW,EACX,QAAY,EACZ,KAAkB,EAClB,KAAK,GACN,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAqFpC"}
|