@mapples/ui 1.1.1 → 1.1.3
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/components/inputs/IconButton/IconButton.d.ts +4 -4
- package/dist/components/inputs/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/inputs/IconButton/IconButton.js.map +1 -1
- package/dist/components/media/BarCode/BarCode.d.ts.map +1 -1
- package/dist/components/media/BarCode/BarCode.js +31 -45
- package/dist/components/media/BarCode/BarCode.js.map +1 -1
- package/dist/components/media/Icon/Icon.d.ts +4 -4
- package/dist/components/media/Icon/Icon.d.ts.map +1 -1
- package/dist/components/media/Icon/Icon.js.map +1 -1
- package/dist/components/typography/Text/Text.d.ts +16 -13
- package/dist/components/typography/Text/Text.d.ts.map +1 -1
- package/dist/components/typography/Text/Text.js +19 -14
- package/dist/components/typography/Text/Text.js.map +1 -1
- package/dist/components/views/GradientBackground/GradientBackground.d.ts +52 -0
- package/dist/components/views/GradientBackground/GradientBackground.d.ts.map +1 -0
- package/dist/components/views/GradientBackground/GradientBackground.js +41 -0
- package/dist/components/views/GradientBackground/GradientBackground.js.map +1 -0
- package/dist/components/views/GradientBackground/GradientLayer.d.ts +39 -0
- package/dist/components/views/GradientBackground/GradientLayer.d.ts.map +1 -0
- package/dist/components/views/GradientBackground/GradientLayer.js +51 -0
- package/dist/components/views/GradientBackground/GradientLayer.js.map +1 -0
- package/dist/components/views/GradientBackground/index.d.ts +7 -0
- package/dist/components/views/GradientBackground/index.d.ts.map +1 -0
- package/dist/components/views/GradientBackground/index.js +7 -0
- package/dist/components/views/GradientBackground/index.js.map +1 -0
- package/dist/components/views/GradientBackground/schematics.d.ts +13 -0
- package/dist/components/views/GradientBackground/schematics.d.ts.map +1 -0
- package/dist/components/views/GradientBackground/schematics.js +16 -0
- package/dist/components/views/GradientBackground/schematics.js.map +1 -0
- package/dist/components/views/View/View.d.ts +16 -1
- package/dist/components/views/View/View.d.ts.map +1 -1
- package/dist/components/views/View/View.js +5 -3
- package/dist/components/views/View/View.js.map +1 -1
- package/dist/components/views/index.d.ts +2 -0
- package/dist/components/views/index.d.ts.map +1 -1
- package/dist/components/views/index.js +2 -0
- package/dist/components/views/index.js.map +1 -1
- package/dist/components/views/schematics.d.ts +2 -0
- package/dist/components/views/schematics.d.ts.map +1 -1
- package/dist/components/views/schematics.js +2 -0
- package/dist/components/views/schematics.js.map +1 -1
- package/package.json +7 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
-
import { StyledProp, StyledProps, WithStyledProps } from '@mapples/style';
|
|
2
|
+
import { StyledProp, StyledProps, SvgStyle, WithStyledProps } from '@mapples/style';
|
|
3
3
|
import { SvgSource } from '@mapples/types';
|
|
4
|
-
import { PressableProps,
|
|
4
|
+
import { PressableProps, View, ViewProps } from 'react-native';
|
|
5
5
|
/**
|
|
6
6
|
* Props for the IconButton component.
|
|
7
7
|
*
|
|
@@ -11,7 +11,7 @@ export type IconProps = PropsWithChildren<Omit<WithStyledProps<PressableProps>,
|
|
|
11
11
|
/** Styling configuration for the button container and SVG icon */
|
|
12
12
|
styled?: StyledProps<ViewProps> & {
|
|
13
13
|
/** SVG-specific styling */
|
|
14
|
-
styleSvg?: StyledProp<
|
|
14
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
15
15
|
};
|
|
16
16
|
}> & {
|
|
17
17
|
/** URI for the SVG icon to display */
|
|
@@ -51,7 +51,7 @@ declare const IconButton: import("react").ForwardRefExoticComponent<Omit<WithSty
|
|
|
51
51
|
/** Styling configuration for the button container and SVG icon */
|
|
52
52
|
styled?: StyledProps<ViewProps> & {
|
|
53
53
|
/** SVG-specific styling */
|
|
54
|
-
styleSvg?: StyledProp<
|
|
54
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
55
55
|
};
|
|
56
56
|
} & {
|
|
57
57
|
children?: import("react").ReactNode | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAIL,UAAU,EACV,WAAW,
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAIL,UAAU,EACV,WAAW,EACX,QAAQ,EAER,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/D;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,GAAG;IAChD,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;CACH,CACF,GAAG;IACF,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,UAAU;IA3CZ,kEAAkE;aACzD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;;;;IAGH,sCAAsC;UAChC,MAAM,GAAG,SAAS;wCAuFzB,CAAC;AAGF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EACL,MAAM,IAAI,UAAU,EACpB,MAAM,EACN,eAAe,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EACL,MAAM,IAAI,UAAU,EACpB,MAAM,EACN,eAAe,EAIf,MAAM,GAEP,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAY,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAoBlC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,CAAC,GAAyC,EAAE,EAAE;QACpE,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAE1C,OAAO,CACL,CAAC,SAAS,CACR,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;gBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;gBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;gBACxB,KAAK,EAAE,QAAQ;aAChB,CAAC,EACF,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,IAAI,KAAK,CAAC,CAC5D;QAAA,CAAC,GAAG,CAAC,CAAC,CAAC,CACL,EACE;YAAA,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,MAAM,CAAC,CAAC;oBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;oBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;oBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;oBACxB,KAAK,EAAE,QAAQ;iBAChB,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAAC,GAAG,CAAC,CACrB,CACH;UAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,CAAC,QAAQ,CACP,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;gBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;gBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;gBACxB,KAAK,EAAE,QAAQ;aAChB,CAAC,EACF,CACH,CACH;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarCode.d.ts","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,UAAU,EACV,WAAW,EAGX,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC3C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;IACF,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CACF,CAAC;
|
|
1
|
+
{"version":3,"file":"BarCode.d.ts","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,UAAU,EACV,WAAW,EAGX,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAY,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC3C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;IACF,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CACF,CAAC;AAmFF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,OAAO;IA/HT,8DAA8D;aACrD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;IACD,uCAAuC;YAC/B,MAAM;IACd,iCAAiC;aACxB,MAAM;IACf,+BAA+B;YACvB,MAAM;IACd,sCAAsC;sBACpB,MAAM;IACxB,2CAA2C;sBACzB,MAAM;IACxB,wCAAwC;aAC/B,aAAa;;;wCAsKzB,CAAC;AAGF,eAAe,OAAO,CAAC"}
|
|
@@ -4,40 +4,27 @@ import Svg, { Rect } from 'react-native-svg';
|
|
|
4
4
|
import BarcodeEncoder from './BarCodeEncoder';
|
|
5
5
|
/**
|
|
6
6
|
* Generates barcode pattern using BarcodeEncoder
|
|
7
|
-
* Returns the encoded data and dimensions
|
|
7
|
+
* Returns the encoded data and dimensions, or `null` when there is no value to
|
|
8
|
+
* encode. An unencodable value is an authoring error: {@link BarcodeEncoder}
|
|
9
|
+
* throws a descriptive error and it is left to propagate, because a barcode
|
|
10
|
+
* that silently renders blank is a defect the author never gets to see.
|
|
8
11
|
*/
|
|
9
12
|
const generateBarcodeData = (value, format = 'CODE128', barWidth = 2) => {
|
|
10
13
|
if (!value)
|
|
11
14
|
return null;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (segment && segment.data) {
|
|
26
|
-
for (let i = 0; i < segment.data.length; i++) {
|
|
27
|
-
const digit = segment.data[i];
|
|
28
|
-
if (digit === '1') {
|
|
29
|
-
bars.push({ x, width: barWidth });
|
|
30
|
-
}
|
|
31
|
-
x += barWidth;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
// Handle single object response (CODE128, CODE39, etc.)
|
|
38
|
-
if (encoded.data) {
|
|
39
|
-
for (let i = 0; i < encoded.data.length; i++) {
|
|
40
|
-
const digit = encoded.data[i];
|
|
15
|
+
const encoded = BarcodeEncoder.encode(value, format, {});
|
|
16
|
+
if (!encoded) {
|
|
17
|
+
throw new Error(`Barcode encoder returned no data (format: ${format}, value: ${value})`);
|
|
18
|
+
}
|
|
19
|
+
const bars = [];
|
|
20
|
+
let x = 0;
|
|
21
|
+
// Handle array response (EAN13, EAN8, UPC)
|
|
22
|
+
if (Array.isArray(encoded)) {
|
|
23
|
+
// Concatenate all segment data strings
|
|
24
|
+
for (const segment of encoded) {
|
|
25
|
+
if (segment && segment.data) {
|
|
26
|
+
for (let i = 0; i < segment.data.length; i++) {
|
|
27
|
+
const digit = segment.data[i];
|
|
41
28
|
if (digit === '1') {
|
|
42
29
|
bars.push({ x, width: barWidth });
|
|
43
30
|
}
|
|
@@ -45,24 +32,23 @@ const generateBarcodeData = (value, format = 'CODE128', barWidth = 2) => {
|
|
|
45
32
|
}
|
|
46
33
|
}
|
|
47
34
|
}
|
|
48
|
-
return {
|
|
49
|
-
bars,
|
|
50
|
-
totalWidth: x,
|
|
51
|
-
};
|
|
52
35
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
36
|
+
else {
|
|
37
|
+
// Handle single object response (CODE128, CODE39, etc.)
|
|
38
|
+
if (encoded.data) {
|
|
39
|
+
for (let i = 0; i < encoded.data.length; i++) {
|
|
40
|
+
const digit = encoded.data[i];
|
|
41
|
+
if (digit === '1') {
|
|
42
|
+
bars.push({ x, width: barWidth });
|
|
43
|
+
}
|
|
44
|
+
x += barWidth;
|
|
45
|
+
}
|
|
63
46
|
}
|
|
64
|
-
return null;
|
|
65
47
|
}
|
|
48
|
+
return {
|
|
49
|
+
bars,
|
|
50
|
+
totalWidth: x,
|
|
51
|
+
};
|
|
66
52
|
};
|
|
67
53
|
/**
|
|
68
54
|
* Renders barcode bars from barcode data
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarCode.js","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmC,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAGL,UAAU,EACV,MAAM,GAEP,MAAM,gBAAgB,CAAC;AAExB,OAAO,GAAG,EAAE,EAAE,IAAI,EAAY,MAAM,kBAAkB,CAAC;AAEvD,OAAO,cAAsC,MAAM,kBAAkB,CAAC;AA6BtE
|
|
1
|
+
{"version":3,"file":"BarCode.js","sourceRoot":"","sources":["../../../../src/components/media/BarCode/BarCode.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
-
import { StyledProp, StyledProps, WithStyledProps } from '@mapples/style';
|
|
2
|
+
import { StyledProp, StyledProps, SvgStyle, WithStyledProps } from '@mapples/style';
|
|
3
3
|
import { SvgSource } from '@mapples/types';
|
|
4
|
-
import {
|
|
4
|
+
import { View, ViewProps } from 'react-native';
|
|
5
5
|
/**
|
|
6
6
|
* Props for the Icon component.
|
|
7
7
|
*
|
|
@@ -11,7 +11,7 @@ export type IconProps = PropsWithChildren<Omit<WithStyledProps<ViewProps>, 'styl
|
|
|
11
11
|
/** Styling configuration for the icon container and SVG */
|
|
12
12
|
styled?: StyledProps<ViewProps> & {
|
|
13
13
|
/** SVG-specific styling (width, height, color) */
|
|
14
|
-
styleSvg?: StyledProp<
|
|
14
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
15
15
|
};
|
|
16
16
|
}> & {
|
|
17
17
|
/** URI of the SVG icon — either a remote URL string or a local `SvgSource` module reference */
|
|
@@ -44,7 +44,7 @@ declare const Icon: import("react").ForwardRefExoticComponent<Omit<WithStyledPro
|
|
|
44
44
|
/** Styling configuration for the icon container and SVG */
|
|
45
45
|
styled?: StyledProps<ViewProps> & {
|
|
46
46
|
/** SVG-specific styling (width, height, color) */
|
|
47
|
-
styleSvg?: StyledProp<
|
|
47
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
48
48
|
};
|
|
49
49
|
} & {
|
|
50
50
|
children?: import("react").ReactNode | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAEL,UAAU,EACV,WAAW,
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAEL,UAAU,EACV,WAAW,EACX,QAAQ,EAGR,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/C;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC3C,2DAA2D;IAC3D,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,kDAAkD;QAClD,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;CACH,CACF,GAAG;IACF,+FAA+F;IAC/F,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI;IApCN,2DAA2D;aAClD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,kDAAkD;QAClD,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;;;;IAGH,+FAA+F;UACzF,MAAM,GAAG,SAAS;wCAgFzB,CAAC;AAGF,eAAe,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/media/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EACL,MAAM,IAAI,UAAU,
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/media/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EACL,MAAM,IAAI,UAAU,EAIpB,UAAU,EACV,MAAM,GAEP,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,MAAM,EAAY,MAAM,kBAAkB,CAAC;AAEpD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAoBlC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG,CAAC,GAAyC,EAAE,EAAE;QACpE,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAE1C,OAAO,CACL,CAAC,SAAS,CACR,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;gBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;gBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;gBACxB,KAAK,EAAE,QAAQ;aAChB,CAAC,EACF,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,IAAI,KAAK,CAAC,CACvD;QAAA,CAAC,GAAG,CAAC,CAAC,CAAC,CACL,EACE;YAAA,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,MAAM,CAAC,CAAC;oBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;oBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;oBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;oBACxB,KAAK,EAAE,QAAQ;iBAChB,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAAC,GAAG,CAAC,CACrB,CACH;UAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,CAAC,QAAQ,CACP,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;gBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;gBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;gBACxB,KAAK,EAAE,QAAQ;aAChB,CAAC,EACF,CACH,CACH;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,eAAe,IAAI,CAAC"}
|
|
@@ -14,22 +14,25 @@ export type TextProps = PropsWithChildren<WithStyledProps<RNTextProps> & {
|
|
|
14
14
|
* A customizable text component with built-in styling support.
|
|
15
15
|
*
|
|
16
16
|
* The Text component extends React Native's Text with additional styling
|
|
17
|
-
* capabilities through the @mapples/style system.
|
|
18
|
-
* via the `text` prop; string and number values are rendered
|
|
19
|
-
*
|
|
17
|
+
* capabilities through the @mapples/style system. Flat text content is supplied
|
|
18
|
+
* via the `text` prop; string and number values are rendered. Nested `Text`
|
|
19
|
+
* children (the React Native styled-span pattern) are rendered inline after the
|
|
20
|
+
* `text`, so a node mixing plain runs and styled runs — e.g. produced by a
|
|
21
|
+
* Figma import of mixed-style text — flows as a single inline run with native
|
|
22
|
+
* style inheritance (children inherit the parent typography, their own style
|
|
23
|
+
* applied on top).
|
|
20
24
|
*
|
|
21
25
|
* @example
|
|
22
26
|
* ```tsx
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* />
|
|
27
|
+
* // Flat text
|
|
28
|
+
* <Text text="Hello World" styled={{ style: { fontSize: 18 } }} />
|
|
29
|
+
*
|
|
30
|
+
* // Inline styled spans: renders "Hello bold world" as one run
|
|
31
|
+
* <Text styled={{ style: { fontSize: 14 } }}>
|
|
32
|
+
* <Text text="Hello " />
|
|
33
|
+
* <Text text="bold" styled={{ style: { fontWeight: '700' } }} />
|
|
34
|
+
* <Text text=" world" />
|
|
35
|
+
* </Text>
|
|
33
36
|
* ```
|
|
34
37
|
*
|
|
35
38
|
* @public
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CACF,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,IAAI;;;IAhCN,kCAAkC;WAC3B,MAAM;;;2CAyChB,CAAC;AAGF,eAAe,IAAI,CAAC"}
|
|
@@ -5,29 +5,34 @@ import { isNumber, isString } from 'lodash';
|
|
|
5
5
|
* A customizable text component with built-in styling support.
|
|
6
6
|
*
|
|
7
7
|
* The Text component extends React Native's Text with additional styling
|
|
8
|
-
* capabilities through the @mapples/style system.
|
|
9
|
-
* via the `text` prop; string and number values are rendered
|
|
10
|
-
*
|
|
8
|
+
* capabilities through the @mapples/style system. Flat text content is supplied
|
|
9
|
+
* via the `text` prop; string and number values are rendered. Nested `Text`
|
|
10
|
+
* children (the React Native styled-span pattern) are rendered inline after the
|
|
11
|
+
* `text`, so a node mixing plain runs and styled runs — e.g. produced by a
|
|
12
|
+
* Figma import of mixed-style text — flows as a single inline run with native
|
|
13
|
+
* style inheritance (children inherit the parent typography, their own style
|
|
14
|
+
* applied on top).
|
|
11
15
|
*
|
|
12
16
|
* @example
|
|
13
17
|
* ```tsx
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* />
|
|
18
|
+
* // Flat text
|
|
19
|
+
* <Text text="Hello World" styled={{ style: { fontSize: 18 } }} />
|
|
20
|
+
*
|
|
21
|
+
* // Inline styled spans: renders "Hello bold world" as one run
|
|
22
|
+
* <Text styled={{ style: { fontSize: 14 } }}>
|
|
23
|
+
* <Text text="Hello " />
|
|
24
|
+
* <Text text="bold" styled={{ style: { fontWeight: '700' } }} />
|
|
25
|
+
* <Text text=" world" />
|
|
26
|
+
* </Text>
|
|
24
27
|
* ```
|
|
25
28
|
*
|
|
26
29
|
* @public
|
|
27
30
|
*/
|
|
28
31
|
const Text = forwardRef(({ styled, children, text, ...props }, ref) => {
|
|
32
|
+
const hasText = isString(text) || isNumber(text);
|
|
29
33
|
return (<StyledText ref={ref} styled={{ ...styled }} {...props}>
|
|
30
|
-
{
|
|
34
|
+
{hasText ? text.toString() : null}
|
|
35
|
+
{children}
|
|
31
36
|
</StyledText>);
|
|
32
37
|
});
|
|
33
38
|
Text.displayName = 'Text';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAe5C
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAe5C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAa,EAAE,GAAG,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CACrD;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,IAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAClC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { WithStyledProps } from '@mapples/style';
|
|
3
|
+
import type { LinearGradient } from '@mapples/types';
|
|
4
|
+
import { ViewProps as RNViewProps } from 'react-native';
|
|
5
|
+
/**
|
|
6
|
+
* Props for the GradientBackground component.
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export type GradientBackgroundProps = PropsWithChildren<WithStyledProps<RNViewProps> & {
|
|
11
|
+
/** The linear gradient painted behind the container's children. */
|
|
12
|
+
gradient?: LinearGradient;
|
|
13
|
+
}>;
|
|
14
|
+
/**
|
|
15
|
+
* A container view with a linear-gradient background.
|
|
16
|
+
*
|
|
17
|
+
* Mirrors `ImageBackgroundView`: it `forwardRef`s to a native `View` (via
|
|
18
|
+
* `StyledView`) so the canvas can measure it (`measureInWindow`) and make it
|
|
19
|
+
* selectable, paints the gradient as a full-bleed layer beneath its children,
|
|
20
|
+
* and is sized by its own `styled.style`. Falls back to the solid
|
|
21
|
+
* `backgroundColor` when no gradient is present or unrenderable.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <GradientBackground
|
|
26
|
+
* gradient={{
|
|
27
|
+
* type: 'linear',
|
|
28
|
+
* stops: [
|
|
29
|
+
* { color: '#FF5C35', position: 0 },
|
|
30
|
+
* { color: '#FFC53D', position: 1 },
|
|
31
|
+
* ],
|
|
32
|
+
* start: { x: 0, y: 0 },
|
|
33
|
+
* end: { x: 1, y: 1 },
|
|
34
|
+
* }}
|
|
35
|
+
* styled={{ style: { width: 150, height: 150, overflow: 'hidden' } }}
|
|
36
|
+
* >
|
|
37
|
+
* <Text text="On gradient" />
|
|
38
|
+
* </GradientBackground>
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @public
|
|
42
|
+
*/
|
|
43
|
+
declare const GradientBackground: import("react").ForwardRefExoticComponent<{
|
|
44
|
+
styled?: import("@mapples/style").StyledProps<Partial<RNViewProps>> | undefined;
|
|
45
|
+
} & RNViewProps & {
|
|
46
|
+
/** The linear gradient painted behind the container's children. */
|
|
47
|
+
gradient?: LinearGradient;
|
|
48
|
+
} & {
|
|
49
|
+
children?: import("react").ReactNode | undefined;
|
|
50
|
+
} & import("react").RefAttributes<unknown>>;
|
|
51
|
+
export default GradientBackground;
|
|
52
|
+
//# sourceMappingURL=GradientBackground.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GradientBackground.d.ts","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/GradientBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CACrD,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,kBAAkB;;;IAlCpB,mEAAmE;eACxD,cAAc;;;2CA0C5B,CAAC;AAGF,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { StyledView } from '@mapples/style';
|
|
3
|
+
import GradientLayer from './GradientLayer';
|
|
4
|
+
/**
|
|
5
|
+
* A container view with a linear-gradient background.
|
|
6
|
+
*
|
|
7
|
+
* Mirrors `ImageBackgroundView`: it `forwardRef`s to a native `View` (via
|
|
8
|
+
* `StyledView`) so the canvas can measure it (`measureInWindow`) and make it
|
|
9
|
+
* selectable, paints the gradient as a full-bleed layer beneath its children,
|
|
10
|
+
* and is sized by its own `styled.style`. Falls back to the solid
|
|
11
|
+
* `backgroundColor` when no gradient is present or unrenderable.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <GradientBackground
|
|
16
|
+
* gradient={{
|
|
17
|
+
* type: 'linear',
|
|
18
|
+
* stops: [
|
|
19
|
+
* { color: '#FF5C35', position: 0 },
|
|
20
|
+
* { color: '#FFC53D', position: 1 },
|
|
21
|
+
* ],
|
|
22
|
+
* start: { x: 0, y: 0 },
|
|
23
|
+
* end: { x: 1, y: 1 },
|
|
24
|
+
* }}
|
|
25
|
+
* styled={{ style: { width: 150, height: 150, overflow: 'hidden' } }}
|
|
26
|
+
* >
|
|
27
|
+
* <Text text="On gradient" />
|
|
28
|
+
* </GradientBackground>
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* @public
|
|
32
|
+
*/
|
|
33
|
+
const GradientBackground = forwardRef(({ styled, children, gradient, ...props }, ref) => {
|
|
34
|
+
return (<StyledView ref={ref} styled={{ ...styled }} {...props}>
|
|
35
|
+
<GradientLayer gradient={gradient}/>
|
|
36
|
+
{children}
|
|
37
|
+
</StyledView>);
|
|
38
|
+
});
|
|
39
|
+
GradientBackground.displayName = 'GradientBackground';
|
|
40
|
+
export default GradientBackground;
|
|
41
|
+
//# sourceMappingURL=GradientBackground.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GradientBackground.js","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/GradientBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAI7D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAc5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,kBAAkB,GAAG,UAAU,CACnC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2B,EAAE,GAAG,EAAE,EAAE;IACzE,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CACrD;QAAA,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAClC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { LinearGradient as LinearGradientData } from '@mapples/types';
|
|
2
|
+
/**
|
|
3
|
+
* Props for {@link GradientLayer}.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export interface GradientLayerProps {
|
|
8
|
+
/** The gradient payload from a node's `props.gradient`. */
|
|
9
|
+
gradient?: LinearGradientData;
|
|
10
|
+
/**
|
|
11
|
+
* Corner radius to clip the gradient layer to, matching the host container's
|
|
12
|
+
* `borderRadius`. Optional — when omitted, the host must set
|
|
13
|
+
* `overflow: 'hidden'` for the gradient to respect rounded corners.
|
|
14
|
+
*/
|
|
15
|
+
borderRadius?: number;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Renders a linear gradient as an absolutely-positioned fill layer that a
|
|
19
|
+
* container paints behind its children. This is an **internal layer**, not a
|
|
20
|
+
* standalone canvas component — it has no ref and no intrinsic size. Containers
|
|
21
|
+
* (`View`, `GradientBackground`) mount it as their first child.
|
|
22
|
+
*
|
|
23
|
+
* React Native has no native gradient style, so a gradient travels as data on
|
|
24
|
+
* `props.gradient` (see `@mapples/types`' `LinearGradient`) and is painted here.
|
|
25
|
+
* The layer is `pointerEvents="none"` so it never intercepts touches.
|
|
26
|
+
*
|
|
27
|
+
* Degrades to `null` (the container keeps its solid `backgroundColor`) when:
|
|
28
|
+
* - no gradient is supplied,
|
|
29
|
+
* - `expo-linear-gradient` isn't installed,
|
|
30
|
+
* - the gradient has fewer than two stops (RN requires ≥2 colors).
|
|
31
|
+
*
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
declare const GradientLayer: {
|
|
35
|
+
({ gradient, borderRadius }: GradientLayerProps): import("react").JSX.Element | null;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
38
|
+
export default GradientLayer;
|
|
39
|
+
//# sourceMappingURL=GradientLayer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GradientLayer.d.ts","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/GradientLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAgC3E;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,aAAa;iCAAgC,kBAAkB;;CA0BpE,CAAC;AAGF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* `expo-linear-gradient` is an **optional peer dependency** of `@mapples/ui`:
|
|
4
|
+
* apps that never render a gradient shouldn't have to install a native module.
|
|
5
|
+
* It's resolved lazily so the package builds and runs without it — when it's
|
|
6
|
+
* absent (or a node carries no gradient) this component renders nothing and the
|
|
7
|
+
* container falls back to its solid `backgroundColor`.
|
|
8
|
+
*/
|
|
9
|
+
let LinearGradient = null;
|
|
10
|
+
try {
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
12
|
+
LinearGradient = require('expo-linear-gradient').LinearGradient;
|
|
13
|
+
}
|
|
14
|
+
catch {
|
|
15
|
+
LinearGradient = null;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Renders a linear gradient as an absolutely-positioned fill layer that a
|
|
19
|
+
* container paints behind its children. This is an **internal layer**, not a
|
|
20
|
+
* standalone canvas component — it has no ref and no intrinsic size. Containers
|
|
21
|
+
* (`View`, `GradientBackground`) mount it as their first child.
|
|
22
|
+
*
|
|
23
|
+
* React Native has no native gradient style, so a gradient travels as data on
|
|
24
|
+
* `props.gradient` (see `@mapples/types`' `LinearGradient`) and is painted here.
|
|
25
|
+
* The layer is `pointerEvents="none"` so it never intercepts touches.
|
|
26
|
+
*
|
|
27
|
+
* Degrades to `null` (the container keeps its solid `backgroundColor`) when:
|
|
28
|
+
* - no gradient is supplied,
|
|
29
|
+
* - `expo-linear-gradient` isn't installed,
|
|
30
|
+
* - the gradient has fewer than two stops (RN requires ≥2 colors).
|
|
31
|
+
*
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
const GradientLayer = ({ gradient, borderRadius }) => {
|
|
35
|
+
if (!gradient || !LinearGradient || gradient.type !== 'linear') {
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
const colors = gradient.stops.map((stop) => stop.color);
|
|
39
|
+
if (colors.length < 2) {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
const locations = gradient.stops.map((stop) => stop.position);
|
|
43
|
+
const style = [
|
|
44
|
+
StyleSheet.absoluteFill,
|
|
45
|
+
borderRadius ? { borderRadius } : null,
|
|
46
|
+
];
|
|
47
|
+
return (<LinearGradient colors={colors} locations={locations} start={gradient.start} end={gradient.end} pointerEvents="none" style={style}/>);
|
|
48
|
+
};
|
|
49
|
+
GradientLayer.displayName = 'GradientLayer';
|
|
50
|
+
export default GradientLayer;
|
|
51
|
+
//# sourceMappingURL=GradientLayer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GradientLayer.js","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/GradientLayer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,UAAU,EAAa,MAAM,cAAc,CAAC;AAgBhE;;;;;;GAMG;AACH,IAAI,cAAc,GAAuD,IAAI,CAAC;AAC9E,IAAI,CAAC;IACH,iEAAiE;IACjE,cAAc,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAC,cAAc,CAAC;AAClE,CAAC;AAAC,MAAM,CAAC;IACP,cAAc,GAAG,IAAI,CAAC;AACxB,CAAC;AAkBD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAsB,EAAE,EAAE;IACvE,IAAI,CAAC,QAAQ,IAAI,CAAC,cAAc,IAAI,QAAQ,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC/D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE9D,MAAM,KAAK,GAAyB;QAClC,UAAU,CAAC,YAAY;QACvB,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI;KACvC,CAAC;IAEF,OAAO,CACL,CAAC,cAAc,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACtB,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAClB,aAAa,CAAC,MAAM,CACpB,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import GradientBackground from './GradientBackground';
|
|
2
|
+
export * from './GradientBackground';
|
|
3
|
+
export { default as GradientLayer } from './GradientLayer';
|
|
4
|
+
export * from './GradientLayer';
|
|
5
|
+
export * from './schematics';
|
|
6
|
+
export default GradientBackground;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAE7B,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import GradientBackground from './GradientBackground';
|
|
2
|
+
export * from './GradientBackground';
|
|
3
|
+
export { default as GradientLayer } from './GradientLayer';
|
|
4
|
+
export * from './GradientLayer';
|
|
5
|
+
export * from './schematics';
|
|
6
|
+
export default GradientBackground;
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAE7B,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { RegisteredComponent } from '@mapples/types';
|
|
2
|
+
/**
|
|
3
|
+
* Schematic configuration for the GradientBackground component.
|
|
4
|
+
*
|
|
5
|
+
* A gradient-filled container that `forwardRef`s to a native `View`, so the
|
|
6
|
+
* canvas can measure it (`measureInWindow`) and make it selectable. It has
|
|
7
|
+
* children, sizing, and the normal view styling, plus a linear gradient painted
|
|
8
|
+
* behind its children.
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
11
|
+
*/
|
|
12
|
+
export declare const GradientBackgroundSchematic: RegisteredComponent;
|
|
13
|
+
//# sourceMappingURL=schematics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,EAAE,mBAGzC,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import GradientBackground from './GradientBackground';
|
|
2
|
+
/**
|
|
3
|
+
* Schematic configuration for the GradientBackground component.
|
|
4
|
+
*
|
|
5
|
+
* A gradient-filled container that `forwardRef`s to a native `View`, so the
|
|
6
|
+
* canvas can measure it (`measureInWindow`) and make it selectable. It has
|
|
7
|
+
* children, sizing, and the normal view styling, plus a linear gradient painted
|
|
8
|
+
* behind its children.
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
11
|
+
*/
|
|
12
|
+
export const GradientBackgroundSchematic = {
|
|
13
|
+
type: 'GradientBackground',
|
|
14
|
+
Component: GradientBackground,
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=schematics.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/views/GradientBackground/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAwB;IAC9D,IAAI,EAAE,oBAAoB;IAC1B,SAAS,EAAE,kBAAkB;CAC9B,CAAC"}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { WithStyledProps } from '@mapples/style';
|
|
3
|
+
import type { LinearGradient } from '@mapples/types';
|
|
3
4
|
import { ViewProps as RNViewProps } from 'react-native';
|
|
4
5
|
/**
|
|
5
6
|
* Props for the View component.
|
|
6
7
|
*
|
|
7
8
|
* @public
|
|
8
9
|
*/
|
|
9
|
-
export type ViewProps = PropsWithChildren<WithStyledProps<RNViewProps
|
|
10
|
+
export type ViewProps = PropsWithChildren<WithStyledProps<RNViewProps> & {
|
|
11
|
+
/**
|
|
12
|
+
* Optional linear-gradient background painted behind the view's children
|
|
13
|
+
* (e.g. emitted by a Figma import). Falls back to the solid
|
|
14
|
+
* `backgroundColor` when absent or unrenderable.
|
|
15
|
+
*/
|
|
16
|
+
gradient?: LinearGradient;
|
|
17
|
+
}>;
|
|
10
18
|
/**
|
|
11
19
|
* A customizable view component with built-in styling support.
|
|
12
20
|
*
|
|
@@ -34,6 +42,13 @@ export type ViewProps = PropsWithChildren<WithStyledProps<RNViewProps>>;
|
|
|
34
42
|
declare const View: import("react").ForwardRefExoticComponent<{
|
|
35
43
|
styled?: import("@mapples/style").StyledProps<Partial<RNViewProps>> | undefined;
|
|
36
44
|
} & RNViewProps & {
|
|
45
|
+
/**
|
|
46
|
+
* Optional linear-gradient background painted behind the view's children
|
|
47
|
+
* (e.g. emitted by a Figma import). Falls back to the solid
|
|
48
|
+
* `backgroundColor` when absent or unrenderable.
|
|
49
|
+
*/
|
|
50
|
+
gradient?: LinearGradient;
|
|
51
|
+
} & {
|
|
37
52
|
children?: import("react").ReactNode | undefined;
|
|
38
53
|
} & import("react").RefAttributes<unknown>>;
|
|
39
54
|
export default View;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../src/components/views/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../src/components/views/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,IAAI;;;IAjCN;;;;OAIG;eACQ,cAAc;;;2CAqC5B,CAAC;AAGF,eAAe,IAAI,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { forwardRef } from 'react';
|
|
2
2
|
import { StyledView } from '@mapples/style';
|
|
3
|
+
import { GradientLayer } from '../GradientBackground';
|
|
3
4
|
/**
|
|
4
5
|
* A customizable view component with built-in styling support.
|
|
5
6
|
*
|
|
@@ -24,10 +25,11 @@ import { StyledView } from '@mapples/style';
|
|
|
24
25
|
*
|
|
25
26
|
* @public
|
|
26
27
|
*/
|
|
27
|
-
const View = forwardRef(({ styled, children, ...props }, ref) => {
|
|
28
|
+
const View = forwardRef(({ styled, children, gradient, ...props }, ref) => {
|
|
28
29
|
return (<StyledView ref={ref} styled={{ ...styled }} {...props}>
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
<GradientLayer gradient={gradient}/>
|
|
31
|
+
{children}
|
|
32
|
+
</StyledView>);
|
|
31
33
|
});
|
|
32
34
|
View.displayName = 'View';
|
|
33
35
|
export default View;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../src/components/views/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../src/components/views/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAkBtD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,GAAG,EAAE,EAAE;IAC3D,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CACrD;QAAA,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAClC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,eAAe,IAAI,CAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export { default as View } from './View';
|
|
2
2
|
export * from './View';
|
|
3
|
+
export { default as GradientBackground } from './GradientBackground';
|
|
4
|
+
export * from './GradientBackground';
|
|
3
5
|
export { default as ScrollView } from './ScrollView';
|
|
4
6
|
export * from './ScrollView';
|
|
5
7
|
export { default as ImageBackgroundView } from './ImageBackgroundView';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/views/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/views/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export { default as View } from './View';
|
|
2
2
|
export * from './View';
|
|
3
|
+
export { default as GradientBackground } from './GradientBackground';
|
|
4
|
+
export * from './GradientBackground';
|
|
3
5
|
export { default as ScrollView } from './ScrollView';
|
|
4
6
|
export * from './ScrollView';
|
|
5
7
|
export { default as ImageBackgroundView } from './ImageBackgroundView';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/views/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/views/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FlatListSchematic, GridFourColumnsSchematic, GridThreeColumnsSchematic, GridTwoColumnsSchematic } from './FlatList';
|
|
2
|
+
import { GradientBackgroundSchematic } from './GradientBackground';
|
|
2
3
|
import { ImageBackgroundViewSchematics } from './ImageBackgroundView';
|
|
3
4
|
import { SafeAreaViewSchematic } from './SafeAreaView';
|
|
4
5
|
import { HorizontalScrollView, ScrollViewSchematic } from './ScrollView';
|
|
@@ -15,6 +16,7 @@ import { ContainerSchematic, ViewSchematic } from './View';
|
|
|
15
16
|
export declare const ViewsSchematics: {
|
|
16
17
|
readonly [ViewSchematic.type]: import("@mapples/types").RegisteredComponent<object>;
|
|
17
18
|
readonly [ContainerSchematic.type]: import("@mapples/types").RegisteredComponent<object>;
|
|
19
|
+
readonly [GradientBackgroundSchematic.type]: import("@mapples/types").RegisteredComponent<object>;
|
|
18
20
|
readonly [SafeAreaViewSchematic.type]: import("@mapples/types").RegisteredComponent<object>;
|
|
19
21
|
readonly [ScrollViewSchematic.type]: import("@mapples/types").RegisteredComponent<object>;
|
|
20
22
|
readonly [HorizontalScrollView.type]: import("@mapples/types").RegisteredComponent<object>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../src/components/views/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAC1B,SAAA,CAAC,aAAa,CAAC,IAAI,CAAC,uDAAe;IACnC,SAAA,CAAC,kBAAkB,CAAC,IAAI,CAAC,uDAAoB;IAC7C,SAAA,CAAC,qBAAqB,CAAC,IAAI,CAAC,uDAAuB;IACnD,SAAA,CAAC,mBAAmB,CAAC,IAAI,CAAC,uDAAqB;IAC/C,SAAA,CAAC,oBAAoB,CAAC,IAAI,CAAC,uDAAsB;IACjD,SAAA,CAAC,6BAA6B,CAAC,IAAI,CAAC,uDAA+B;IACnE,SAAA,CAAC,iBAAiB,CAAC,IAAI,CAAC,uDAAmB;IAC3C,SAAA,CAAC,uBAAuB,CAAC,IAAI,CAAC,uDAAyB;IACvD,SAAA,CAAC,yBAAyB,CAAC,IAAI,CAAC,uDAA2B;IAC3D,SAAA,CAAC,wBAAwB,CAAC,IAAI,CAAC,uDAA0B;CACjD,CAAC"}
|
|
1
|
+
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../src/components/views/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAC1B,SAAA,CAAC,aAAa,CAAC,IAAI,CAAC,uDAAe;IACnC,SAAA,CAAC,kBAAkB,CAAC,IAAI,CAAC,uDAAoB;IAC7C,SAAA,CAAC,2BAA2B,CAAC,IAAI,CAAC,uDAA6B;IAC/D,SAAA,CAAC,qBAAqB,CAAC,IAAI,CAAC,uDAAuB;IACnD,SAAA,CAAC,mBAAmB,CAAC,IAAI,CAAC,uDAAqB;IAC/C,SAAA,CAAC,oBAAoB,CAAC,IAAI,CAAC,uDAAsB;IACjD,SAAA,CAAC,6BAA6B,CAAC,IAAI,CAAC,uDAA+B;IACnE,SAAA,CAAC,iBAAiB,CAAC,IAAI,CAAC,uDAAmB;IAC3C,SAAA,CAAC,uBAAuB,CAAC,IAAI,CAAC,uDAAyB;IACvD,SAAA,CAAC,yBAAyB,CAAC,IAAI,CAAC,uDAA2B;IAC3D,SAAA,CAAC,wBAAwB,CAAC,IAAI,CAAC,uDAA0B;CACjD,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FlatListSchematic, GridFourColumnsSchematic, GridThreeColumnsSchematic, GridTwoColumnsSchematic, } from './FlatList';
|
|
2
|
+
import { GradientBackgroundSchematic } from './GradientBackground';
|
|
2
3
|
import { ImageBackgroundViewSchematics } from './ImageBackgroundView';
|
|
3
4
|
import { SafeAreaViewSchematic } from './SafeAreaView';
|
|
4
5
|
import { HorizontalScrollView, ScrollViewSchematic } from './ScrollView';
|
|
@@ -15,6 +16,7 @@ import { ContainerSchematic, ViewSchematic } from './View';
|
|
|
15
16
|
export const ViewsSchematics = {
|
|
16
17
|
[ViewSchematic.type]: ViewSchematic,
|
|
17
18
|
[ContainerSchematic.type]: ContainerSchematic,
|
|
19
|
+
[GradientBackgroundSchematic.type]: GradientBackgroundSchematic,
|
|
18
20
|
[SafeAreaViewSchematic.type]: SafeAreaViewSchematic,
|
|
19
21
|
[ScrollViewSchematic.type]: ScrollViewSchematic,
|
|
20
22
|
[HorizontalScrollView.type]: HorizontalScrollView,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../src/components/views/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa;IACnC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,kBAAkB;IAC7C,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,qBAAqB;IACnD,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,mBAAmB;IAC/C,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,oBAAoB;IACjD,CAAC,6BAA6B,CAAC,IAAI,CAAC,EAAE,6BAA6B;IACnE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB;IAC3C,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,uBAAuB;IACvD,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,yBAAyB;IAC3D,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,wBAAwB;CACjD,CAAC"}
|
|
1
|
+
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../src/components/views/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE3D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa;IACnC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,kBAAkB;IAC7C,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,2BAA2B;IAC/D,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,qBAAqB;IACnD,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,mBAAmB;IAC/C,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,oBAAoB;IACjD,CAAC,6BAA6B,CAAC,IAAI,CAAC,EAAE,6BAA6B;IACnE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,iBAAiB;IAC3C,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,uBAAuB;IACvD,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,yBAAyB;IAC3D,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,wBAAwB;CACjD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mapples/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -20,12 +20,18 @@
|
|
|
20
20
|
"directory": "packages/@mapples/ui"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
|
+
"expo-linear-gradient": ">=12.0.0",
|
|
23
24
|
"jsbarcode": "^3.11.5",
|
|
24
25
|
"react": ">=18.0.0 <20.0.0",
|
|
25
26
|
"react-native": ">=0.71.0",
|
|
26
27
|
"react-native-qrcode-svg": "^6.0.0",
|
|
27
28
|
"react-native-svg": ">=12.0.0"
|
|
28
29
|
},
|
|
30
|
+
"peerDependenciesMeta": {
|
|
31
|
+
"expo-linear-gradient": {
|
|
32
|
+
"optional": true
|
|
33
|
+
}
|
|
34
|
+
},
|
|
29
35
|
"devDependencies": {
|
|
30
36
|
"@types/react": ">=18.0.0 <20.0.0",
|
|
31
37
|
"typescript": "~6.0.3"
|