@mapples/ui 1.1.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/form/SubmitButton/SubmitButton.d.ts +13 -26
- package/dist/components/form/SubmitButton/SubmitButton.d.ts.map +1 -1
- package/dist/components/form/SubmitButton/SubmitButton.js +12 -21
- package/dist/components/form/SubmitButton/SubmitButton.js.map +1 -1
- package/dist/components/inputs/Button/Button.d.ts +42 -5
- package/dist/components/inputs/Button/Button.d.ts.map +1 -1
- package/dist/components/inputs/Button/Button.js +151 -10
- package/dist/components/inputs/Button/Button.js.map +1 -1
- package/dist/components/inputs/IconButton/IconButton.d.ts +65 -23
- package/dist/components/inputs/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/inputs/IconButton/IconButton.js +185 -38
- package/dist/components/inputs/IconButton/IconButton.js.map +1 -1
- package/dist/components/inputs/TextInput/TextInput.d.ts +5 -0
- package/dist/components/inputs/TextInput/TextInput.d.ts.map +1 -1
- package/dist/components/inputs/TextInput/TextInput.js +15 -3
- package/dist/components/inputs/TextInput/TextInput.js.map +1 -1
- package/dist/components/media/BarCode/BarCode.d.ts.map +1 -1
- package/dist/components/media/BarCode/BarCode.js +32 -38
- package/dist/components/media/BarCode/BarCode.js.map +1 -1
- package/dist/components/media/BarCode/BarCodeEncoder.d.ts.map +1 -1
- package/dist/components/media/BarCode/BarCodeEncoder.js +22 -3
- package/dist/components/media/BarCode/BarCodeEncoder.js.map +1 -1
- package/dist/components/media/Icon/Icon.d.ts +43 -24
- package/dist/components/media/Icon/Icon.d.ts.map +1 -1
- package/dist/components/media/Icon/Icon.js +31 -33
- package/dist/components/media/Icon/Icon.js.map +1 -1
- package/dist/components/media/Icon/families.d.ts +66 -0
- package/dist/components/media/Icon/families.d.ts.map +1 -0
- package/dist/components/media/Icon/families.js +316 -0
- package/dist/components/media/Icon/families.js.map +1 -0
- package/dist/components/media/Icon/index.d.ts +2 -0
- package/dist/components/media/Icon/index.d.ts.map +1 -1
- package/dist/components/media/Icon/index.js +2 -0
- package/dist/components/media/Icon/index.js.map +1 -1
- package/dist/components/media/QRCode/QRCode.d.ts.map +1 -1
- package/dist/components/media/QRCode/QRCode.js +19 -2
- package/dist/components/media/QRCode/QRCode.js.map +1 -1
- package/dist/components/media/Vector/MockIcon.d.ts.map +1 -0
- package/dist/components/media/Vector/MockIcon.js.map +1 -0
- package/dist/components/media/Vector/Vector.d.ts +56 -0
- package/dist/components/media/Vector/Vector.d.ts.map +1 -0
- package/dist/components/media/Vector/Vector.js +59 -0
- package/dist/components/media/Vector/Vector.js.map +1 -0
- package/dist/components/media/Vector/index.d.ts +5 -0
- package/dist/components/media/Vector/index.d.ts.map +1 -0
- package/dist/components/media/Vector/index.js +5 -0
- package/dist/components/media/Vector/index.js.map +1 -0
- package/dist/components/media/Vector/schematics.d.ts +11 -0
- package/dist/components/media/Vector/schematics.d.ts.map +1 -0
- package/dist/components/media/Vector/schematics.js +14 -0
- package/dist/components/media/Vector/schematics.js.map +1 -0
- package/dist/components/media/Video/Video.d.ts +1 -1
- package/dist/components/media/Video/Video.d.ts.map +1 -1
- package/dist/components/media/Video/Video.js +26 -3
- package/dist/components/media/Video/Video.js.map +1 -1
- package/dist/components/media/index.d.ts +2 -0
- package/dist/components/media/index.d.ts.map +1 -1
- package/dist/components/media/index.js +2 -0
- package/dist/components/media/index.js.map +1 -1
- package/dist/components/media/schematics.d.ts +3 -3
- package/dist/components/media/schematics.d.ts.map +1 -1
- package/dist/components/media/schematics.js +5 -3
- package/dist/components/media/schematics.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +3 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/useTones.d.ts +54 -0
- package/dist/hooks/useTones.d.ts.map +1 -0
- package/dist/hooks/useTones.js +79 -0
- package/dist/hooks/useTones.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/tokens.d.ts +111 -0
- package/dist/tokens.d.ts.map +1 -0
- package/dist/tokens.js +133 -0
- package/dist/tokens.js.map +1 -0
- package/package.json +76 -1
- package/dist/components/media/Icon/MockIcon.d.ts.map +0 -1
- package/dist/components/media/Icon/MockIcon.js.map +0 -1
- /package/dist/components/media/{Icon → Vector}/MockIcon.d.ts +0 -0
- /package/dist/components/media/{Icon → Vector}/MockIcon.js +0 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { StyledProp, StyledProps, SvgStyle, WithStyledProps } from '@mapples/style';
|
|
3
|
+
import { SvgSource } from '@mapples/types';
|
|
4
|
+
import { View, ViewProps } from 'react-native';
|
|
5
|
+
/**
|
|
6
|
+
* Props for the Vector component.
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export type VectorProps = PropsWithChildren<Omit<WithStyledProps<ViewProps>, 'styled'> & {
|
|
11
|
+
/** Styling configuration for the icon container and SVG */
|
|
12
|
+
styled?: StyledProps<ViewProps> & {
|
|
13
|
+
/** SVG-specific styling (width, height, color) */
|
|
14
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
15
|
+
};
|
|
16
|
+
}> & {
|
|
17
|
+
/** URI of the SVG icon — either a remote URL string or a local `SvgSource` module reference */
|
|
18
|
+
uri?: string | SvgSource;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Renders an SVG icon from a URI or falls back to a placeholder `MockIcon`.
|
|
22
|
+
*
|
|
23
|
+
* Accepts either a remote URL string or a local `SvgSource` module reference
|
|
24
|
+
* via the `uri` prop. When no `uri` is provided the `MockIcon` placeholder is
|
|
25
|
+
* shown instead, which is useful during development or when the icon asset is
|
|
26
|
+
* optional.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* // Remote URL
|
|
31
|
+
* <Vector
|
|
32
|
+
* uri="https://example.com/icon.svg"
|
|
33
|
+
* styled={{ styleSvg: { width: 24, height: 24, color: '#333' } }}
|
|
34
|
+
* />
|
|
35
|
+
*
|
|
36
|
+
* // Local SVG module
|
|
37
|
+
* import MySvg from './my-icon.svg';
|
|
38
|
+
* <Vector uri={MySvg} styled={{ styleSvg: { width: 24, height: 24 } }} />
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @public
|
|
42
|
+
*/
|
|
43
|
+
declare const Vector: import("react").ForwardRefExoticComponent<Omit<WithStyledProps<ViewProps>, "styled"> & {
|
|
44
|
+
/** Styling configuration for the icon container and SVG */
|
|
45
|
+
styled?: StyledProps<ViewProps> & {
|
|
46
|
+
/** SVG-specific styling (width, height, color) */
|
|
47
|
+
styleSvg?: StyledProp<SvgStyle>;
|
|
48
|
+
};
|
|
49
|
+
} & {
|
|
50
|
+
children?: import("react").ReactNode | undefined;
|
|
51
|
+
} & {
|
|
52
|
+
/** URI of the SVG icon — either a remote URL string or a local `SvgSource` module reference */
|
|
53
|
+
uri?: string | SvgSource;
|
|
54
|
+
} & import("react").RefAttributes<View>>;
|
|
55
|
+
export default Vector;
|
|
56
|
+
//# sourceMappingURL=Vector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Vector.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Vector/Vector.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,WAAW,GAAG,iBAAiB,CACzC,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,MAAM;IApCR,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,MAAM,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { styled as makeStyled, StyledView, Styler, } from '@mapples/style';
|
|
3
|
+
import { SvgUri } from 'react-native-svg';
|
|
4
|
+
import MockIcon from './MockIcon';
|
|
5
|
+
const StyledSvgUri = makeStyled(SvgUri);
|
|
6
|
+
/**
|
|
7
|
+
* Renders an SVG icon from a URI or falls back to a placeholder `MockIcon`.
|
|
8
|
+
*
|
|
9
|
+
* Accepts either a remote URL string or a local `SvgSource` module reference
|
|
10
|
+
* via the `uri` prop. When no `uri` is provided the `MockIcon` placeholder is
|
|
11
|
+
* shown instead, which is useful during development or when the icon asset is
|
|
12
|
+
* optional.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* // Remote URL
|
|
17
|
+
* <Vector
|
|
18
|
+
* uri="https://example.com/icon.svg"
|
|
19
|
+
* styled={{ styleSvg: { width: 24, height: 24, color: '#333' } }}
|
|
20
|
+
* />
|
|
21
|
+
*
|
|
22
|
+
* // Local SVG module
|
|
23
|
+
* import MySvg from './my-icon.svg';
|
|
24
|
+
* <Vector uri={MySvg} styled={{ styleSvg: { width: 24, height: 24 } }} />
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* @public
|
|
28
|
+
*/
|
|
29
|
+
const Vector = forwardRef(({ styled, uri, ...props }, ref) => {
|
|
30
|
+
const { styleSvg, ...styledViewProps } = styled || {};
|
|
31
|
+
const ejectStyle = Styler.flatten(styleSvg);
|
|
32
|
+
const getUriComponent = (Uri) => {
|
|
33
|
+
const StyledSvg = makeStyled(Uri.default);
|
|
34
|
+
return (<StyledSvg styled={{
|
|
35
|
+
width: ejectStyle?.width,
|
|
36
|
+
height: ejectStyle?.height,
|
|
37
|
+
color: ejectStyle?.color,
|
|
38
|
+
style: styleSvg,
|
|
39
|
+
}}/>);
|
|
40
|
+
};
|
|
41
|
+
return (<StyledView ref={ref} styled={styledViewProps} {...props}>
|
|
42
|
+
{uri ? (<>
|
|
43
|
+
{typeof uri === 'string' ? (<StyledSvgUri uri={uri} styled={{
|
|
44
|
+
width: ejectStyle?.width,
|
|
45
|
+
height: ejectStyle?.height,
|
|
46
|
+
color: ejectStyle?.color,
|
|
47
|
+
style: styleSvg,
|
|
48
|
+
}}/>) : (getUriComponent(uri))}
|
|
49
|
+
</>) : (<MockIcon styled={{
|
|
50
|
+
width: ejectStyle?.width,
|
|
51
|
+
height: ejectStyle?.height,
|
|
52
|
+
color: ejectStyle?.color,
|
|
53
|
+
style: styleSvg,
|
|
54
|
+
}}/>)}
|
|
55
|
+
</StyledView>);
|
|
56
|
+
});
|
|
57
|
+
Vector.displayName = 'Vector';
|
|
58
|
+
export default Vector;
|
|
59
|
+
//# sourceMappingURL=Vector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Vector.js","sourceRoot":"","sources":["../../../../src/components/media/Vector/Vector.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,MAAM,GAAG,UAAU,CACvB,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,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Vector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/media/Vector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RegisteredComponent } from '@mapples/types';
|
|
2
|
+
/**
|
|
3
|
+
* Schematic registration entry for the `Vector` component.
|
|
4
|
+
*
|
|
5
|
+
* Used by the `@mapples/render` pipeline to resolve the `"Vector"` element
|
|
6
|
+
* type to the `Vector` React component at runtime.
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export declare const VectorSchematic: RegisteredComponent;
|
|
11
|
+
//# sourceMappingURL=schematics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Vector/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,mBAG7B,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import VectorComponent from './Vector';
|
|
2
|
+
/**
|
|
3
|
+
* Schematic registration entry for the `Vector` component.
|
|
4
|
+
*
|
|
5
|
+
* Used by the `@mapples/render` pipeline to resolve the `"Vector"` element
|
|
6
|
+
* type to the `Vector` React component at runtime.
|
|
7
|
+
*
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export const VectorSchematic = {
|
|
11
|
+
type: 'Vector',
|
|
12
|
+
Component: VectorComponent,
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=schematics.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/media/Vector/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,eAAe,MAAM,UAAU,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,eAAe;CAC3B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { StyledProps, StyledProp } from '@mapples/style';
|
|
3
|
-
import { VideoContentFit } from 'expo-video';
|
|
3
|
+
import type { VideoContentFit } from 'expo-video';
|
|
4
4
|
import { View, ViewProps, ViewStyle } from 'react-native';
|
|
5
5
|
/**
|
|
6
6
|
* Props for the Video component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Video/Video.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAU,WAAW,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,
|
|
1
|
+
{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Video/Video.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAU,WAAW,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAgB1D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC,GAAG;IACtD,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,kFAAkF;IAClF,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,0DAA0D;QAC1D,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAcF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,KAAK;;;IAtDT,+BAA+B;aACtB,MAAM;IACf,2EAA2E;eAChE,OAAO;IAClB,4DAA4D;WACrD,OAAO;IACd,wEAAwE;eAC7D,OAAO;IAClB,qFAAqF;iBACxE,eAAe;IAC5B,kFAAkF;aACzE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,0DAA0D;QAC1D,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACpC;wCA4EF,CAAC;AAGF,eAAe,KAAK,CAAC"}
|
|
@@ -1,7 +1,27 @@
|
|
|
1
1
|
import { forwardRef, useEffect } from 'react';
|
|
2
2
|
import { styled, StyledView } from '@mapples/style';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* `expo-video` is an **optional peer dependency** of `@mapples/ui` (Project
|
|
5
|
+
* settings → Packages → "Video"): it's a native module, so apps without a
|
|
6
|
+
* video element shouldn't have to install it. Resolved lazily; when absent,
|
|
7
|
+
* rendering a Video throws — nothing is drawn in its place.
|
|
8
|
+
*/
|
|
9
|
+
let ExpoVideo = null;
|
|
10
|
+
try {
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
12
|
+
ExpoVideo = require('expo-video');
|
|
13
|
+
}
|
|
14
|
+
catch {
|
|
15
|
+
ExpoVideo = null;
|
|
16
|
+
}
|
|
17
|
+
const StyledVideo = ExpoVideo ? styled(ExpoVideo.VideoView) : null;
|
|
18
|
+
const requireExpoVideo = () => {
|
|
19
|
+
if (!ExpoVideo) {
|
|
20
|
+
throw new Error('Video needs expo-video: enable the "Video" package in Project ' +
|
|
21
|
+
'settings → Packages.');
|
|
22
|
+
}
|
|
23
|
+
return ExpoVideo;
|
|
24
|
+
};
|
|
5
25
|
/**
|
|
6
26
|
* A customizable video player component with built-in styling support.
|
|
7
27
|
*
|
|
@@ -28,6 +48,9 @@ const StyledVideo = styled(VideoView);
|
|
|
28
48
|
* @public
|
|
29
49
|
*/
|
|
30
50
|
const Video = forwardRef(({ styled, source, autoPlay, loop, controls, contentFit, ...props }, ref) => {
|
|
51
|
+
// Resolved before the hook so a missing package throws a clear error
|
|
52
|
+
// instead of a hooks-order crash.
|
|
53
|
+
const { useVideoPlayer } = requireExpoVideo();
|
|
31
54
|
const player = useVideoPlayer(source || '');
|
|
32
55
|
const { styleVideo, ...styledProps } = styled || {};
|
|
33
56
|
useEffect(() => {
|
|
@@ -43,7 +66,7 @@ const Video = forwardRef(({ styled, source, autoPlay, loop, controls, contentFit
|
|
|
43
66
|
}
|
|
44
67
|
}, [autoPlay, player, source]);
|
|
45
68
|
return (<StyledView ref={ref} styled={styledProps} {...props}>
|
|
46
|
-
<StyledVideo player={player} styled={{ style: styleVideo }} nativeControls={controls} contentFit={contentFit}/>
|
|
69
|
+
{StyledVideo && (<StyledVideo player={player} styled={{ style: styleVideo }} nativeControls={controls} contentFit={contentFit}/>)}
|
|
47
70
|
</StyledView>);
|
|
48
71
|
});
|
|
49
72
|
Video.displayName = 'Video';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../src/components/media/Video/Video.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAe,UAAU,EAAc,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../src/components/media/Video/Video.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAe,UAAU,EAAc,MAAM,gBAAgB,CAAC;AAI7E;;;;;GAKG;AACH,IAAI,SAAS,GAAuC,IAAI,CAAC;AACzD,IAAI,CAAC;IACH,iEAAiE;IACjE,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AACpC,CAAC;AAAC,MAAM,CAAC;IACP,SAAS,GAAG,IAAI,CAAC;AACnB,CAAC;AAyBD,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAEnE,MAAM,gBAAgB,GAAG,GAAgC,EAAE;IACzD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CACb,gEAAgE;YAC9D,sBAAsB,CACzB,CAAC;IACJ,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1E,qEAAqE;IACrE,kCAAkC;IAClC,MAAM,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC9C,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC;IAE5C,MAAM,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,QAAQ,EAAE,CAAC;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,CACnD;QAAA,CAAC,WAAW,IAAI,CACd,CAAC,WAAW,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAC9B,cAAc,CAAC,CAAC,QAAQ,CAAC,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CACH;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,eAAe,KAAK,CAAC"}
|
|
@@ -4,6 +4,8 @@ export { default as Image } from './Image';
|
|
|
4
4
|
export * from './Image';
|
|
5
5
|
export { default as Icon } from './Icon';
|
|
6
6
|
export * from './Icon';
|
|
7
|
+
export { default as Vector } from './Vector';
|
|
8
|
+
export * from './Vector';
|
|
7
9
|
export { default as BarCode } from './BarCode';
|
|
8
10
|
export * from './BarCode';
|
|
9
11
|
export { default as QRCode } from './QRCode';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC"}
|
|
@@ -4,6 +4,8 @@ export { default as Image } from './Image';
|
|
|
4
4
|
export * from './Image';
|
|
5
5
|
export { default as Icon } from './Icon';
|
|
6
6
|
export * from './Icon';
|
|
7
|
+
export { default as Vector } from './Vector';
|
|
8
|
+
export * from './Vector';
|
|
7
9
|
export { default as BarCode } from './BarCode';
|
|
8
10
|
export * from './BarCode';
|
|
9
11
|
export { default as QRCode } from './QRCode';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/media/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/media/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAEtB,cAAc,cAAc,CAAC"}
|
|
@@ -2,9 +2,9 @@ import { RegisteredComponents } from '@mapples/types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Aggregated schematic map for all media components.
|
|
4
4
|
*
|
|
5
|
-
* Combines the registration entries for `Video`, `Image`, `Icon`, `
|
|
6
|
-
* `QRCode`, and `Svg` into a single `RegisteredComponents` map that
|
|
7
|
-
* passed to the `@mapples/render` pipeline.
|
|
5
|
+
* Combines the registration entries for `Video`, `Image`, `Icon`, `Vector`,
|
|
6
|
+
* `BarCode`, `QRCode`, and `Svg` into a single `RegisteredComponents` map that
|
|
7
|
+
* can be passed to the `@mapples/render` pipeline.
|
|
8
8
|
*
|
|
9
9
|
* @public
|
|
10
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../src/components/media/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../src/components/media/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAUtD;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,oBAQ7B,CAAC"}
|
|
@@ -3,13 +3,14 @@ import { IconSchematics } from './Icon';
|
|
|
3
3
|
import { ImageSchematic } from './Image';
|
|
4
4
|
import { QRCodeSchematic } from './QRCode';
|
|
5
5
|
import { SvgSchematic } from './Svg';
|
|
6
|
+
import { VectorSchematic } from './Vector';
|
|
6
7
|
import { VideoSchematic } from './Video';
|
|
7
8
|
/**
|
|
8
9
|
* Aggregated schematic map for all media components.
|
|
9
10
|
*
|
|
10
|
-
* Combines the registration entries for `Video`, `Image`, `Icon`, `
|
|
11
|
-
* `QRCode`, and `Svg` into a single `RegisteredComponents` map that
|
|
12
|
-
* passed to the `@mapples/render` pipeline.
|
|
11
|
+
* Combines the registration entries for `Video`, `Image`, `Icon`, `Vector`,
|
|
12
|
+
* `BarCode`, `QRCode`, and `Svg` into a single `RegisteredComponents` map that
|
|
13
|
+
* can be passed to the `@mapples/render` pipeline.
|
|
13
14
|
*
|
|
14
15
|
* @public
|
|
15
16
|
*/
|
|
@@ -17,6 +18,7 @@ export const MediaSchematics = {
|
|
|
17
18
|
[VideoSchematic.type]: VideoSchematic,
|
|
18
19
|
[ImageSchematic.type]: ImageSchematic,
|
|
19
20
|
[IconSchematics.type]: IconSchematics,
|
|
21
|
+
[VectorSchematic.type]: VectorSchematic,
|
|
20
22
|
[BarCodeSchematic.type]: BarCodeSchematic,
|
|
21
23
|
[QRCodeSchematic.type]: QRCodeSchematic,
|
|
22
24
|
[SvgSchematic.type]: SvgSchematic,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../src/components/media/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAyB;IACnD,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,gBAAgB;IACzC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,eAAe;IACvC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;CAClC,CAAC"}
|
|
1
|
+
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../src/components/media/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAyB;IACnD,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc;IACrC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,eAAe;IACvC,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,gBAAgB;IACzC,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,eAAe;IACvC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,YAAY;CAClC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { STATE_LAYER_OPACITY, Tone } from '../tokens';
|
|
2
|
+
/** The resolved colours of one tone (see {@link Tone}). */
|
|
3
|
+
export interface TonePalette {
|
|
4
|
+
/** The tone's main colour — fills and emphasised text. */
|
|
5
|
+
main: string;
|
|
6
|
+
/** Text/glyph colour on a `main` fill. */
|
|
7
|
+
contrast: string;
|
|
8
|
+
/** A soft tinted surface of the tone. */
|
|
9
|
+
container: string;
|
|
10
|
+
/** Text/glyph colour on `container`. */
|
|
11
|
+
onContainer: string;
|
|
12
|
+
}
|
|
13
|
+
/** Resolved colours every themed component shares. */
|
|
14
|
+
export interface Tones {
|
|
15
|
+
/** Whether the active palette is the dark one. */
|
|
16
|
+
isDark: boolean;
|
|
17
|
+
/** Hairline outline of controls and cards. */
|
|
18
|
+
outline: string;
|
|
19
|
+
/** Emphasised outline (outlined buttons, focused fields). */
|
|
20
|
+
outlineStrong: string;
|
|
21
|
+
/** Soft fill of tracks, skeletons and inactive segments. */
|
|
22
|
+
fill: string;
|
|
23
|
+
/** Stronger fill (hovered rows, chip surfaces). */
|
|
24
|
+
fillStrong: string;
|
|
25
|
+
/** Divider lines. */
|
|
26
|
+
divider: string;
|
|
27
|
+
/** Overlay scrim. */
|
|
28
|
+
backdrop: string;
|
|
29
|
+
/** Placeholder text. */
|
|
30
|
+
placeholder: string;
|
|
31
|
+
/** A state layer of `color` at the hover or pressed alpha. */
|
|
32
|
+
stateLayer: (color: string, level: keyof typeof STATE_LAYER_OPACITY) => string;
|
|
33
|
+
/** The palette of a tone. */
|
|
34
|
+
tone: (tone: Tone) => TonePalette;
|
|
35
|
+
/** Resolves a theme token (or passes a literal colour through). */
|
|
36
|
+
resolve: (token: string) => string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Resolves the neutral and tonal colours the themed components are built
|
|
40
|
+
* from. Neutrals derive from the text colour at an alpha, so they read
|
|
41
|
+
* correctly on light and dark surfaces alike — the palette's `neutral` scale
|
|
42
|
+
* is not inverted for dark themes and must not be used for them.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* const tones = useTones();
|
|
47
|
+
* <View style={{ borderColor: tones.outline }} />
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* @public
|
|
51
|
+
*/
|
|
52
|
+
declare const useTones: () => Tones;
|
|
53
|
+
export default useTones;
|
|
54
|
+
//# sourceMappingURL=useTones.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTones.d.ts","sourceRoot":"","sources":["../../src/hooks/useTones.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAU,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9D,2DAA2D;AAC3D,MAAM,WAAW,WAAW;IAC1B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,sDAAsD;AACtD,MAAM,WAAW,KAAK;IACpB,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,UAAU,EAAE,CACV,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,OAAO,mBAAmB,KACpC,MAAM,CAAC;IACZ,6BAA6B;IAC7B,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,WAAW,CAAC;IAClC,mEAAmE;IACnE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,QAAQ,QAAO,KAwEpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { useCallback, useMemo } from 'react';
|
|
2
|
+
import { useTheme, withAlpha } from '@mapples/style';
|
|
3
|
+
import { STATE_LAYER_OPACITY, Tokens } from '../tokens';
|
|
4
|
+
/**
|
|
5
|
+
* Resolves the neutral and tonal colours the themed components are built
|
|
6
|
+
* from. Neutrals derive from the text colour at an alpha, so they read
|
|
7
|
+
* correctly on light and dark surfaces alike — the palette's `neutral` scale
|
|
8
|
+
* is not inverted for dark themes and must not be used for them.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const tones = useTones();
|
|
13
|
+
* <View style={{ borderColor: tones.outline }} />
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
const useTones = () => {
|
|
19
|
+
const { getColor, themeConfig, colorScheme } = useTheme();
|
|
20
|
+
const isDark = themeConfig.variant === 'auto'
|
|
21
|
+
? colorScheme === 'dark'
|
|
22
|
+
: themeConfig.variant === 'dark';
|
|
23
|
+
const resolve = useCallback((token) => getColor(token), [getColor]);
|
|
24
|
+
const stateLayer = useCallback((color, level) => withAlpha(color, STATE_LAYER_OPACITY[level]), []);
|
|
25
|
+
const tone = useCallback((key) => {
|
|
26
|
+
const text = getColor(Tokens.color.text);
|
|
27
|
+
switch (key) {
|
|
28
|
+
case 'primary':
|
|
29
|
+
return {
|
|
30
|
+
main: getColor(Tokens.color.primary),
|
|
31
|
+
contrast: getColor(Tokens.color.onPrimary),
|
|
32
|
+
container: getColor(Tokens.color.primaryContainer),
|
|
33
|
+
onContainer: text,
|
|
34
|
+
};
|
|
35
|
+
case 'accent':
|
|
36
|
+
return {
|
|
37
|
+
main: getColor(Tokens.color.accent),
|
|
38
|
+
contrast: getColor(Tokens.color.onAccent),
|
|
39
|
+
container: getColor(Tokens.color.accentContainer),
|
|
40
|
+
onContainer: text,
|
|
41
|
+
};
|
|
42
|
+
case 'neutral':
|
|
43
|
+
return {
|
|
44
|
+
main: text,
|
|
45
|
+
contrast: getColor(Tokens.color.background),
|
|
46
|
+
container: withAlpha(text, 0.08),
|
|
47
|
+
onContainer: text,
|
|
48
|
+
};
|
|
49
|
+
default: {
|
|
50
|
+
const main = getColor(Tokens.color[key]);
|
|
51
|
+
return {
|
|
52
|
+
main,
|
|
53
|
+
contrast: getColor(Tokens.color.white),
|
|
54
|
+
container: withAlpha(main, 0.14),
|
|
55
|
+
onContainer: text,
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}, [getColor]);
|
|
60
|
+
return useMemo(() => {
|
|
61
|
+
const text = getColor(Tokens.color.text);
|
|
62
|
+
const inverse = getColor(Tokens.color.inverse);
|
|
63
|
+
return {
|
|
64
|
+
isDark,
|
|
65
|
+
outline: withAlpha(text, 0.14),
|
|
66
|
+
outlineStrong: withAlpha(text, 0.28),
|
|
67
|
+
fill: withAlpha(text, 0.06),
|
|
68
|
+
fillStrong: withAlpha(text, 0.1),
|
|
69
|
+
divider: withAlpha(text, 0.12),
|
|
70
|
+
backdrop: withAlpha(inverse, 0.4),
|
|
71
|
+
placeholder: getColor(Tokens.color.textTertiary),
|
|
72
|
+
stateLayer,
|
|
73
|
+
tone,
|
|
74
|
+
resolve,
|
|
75
|
+
};
|
|
76
|
+
}, [getColor, isDark, resolve, stateLayer, tone]);
|
|
77
|
+
};
|
|
78
|
+
export default useTones;
|
|
79
|
+
//# sourceMappingURL=useTones.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTones.js","sourceRoot":"","sources":["../../src/hooks/useTones.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}
|