@mapples/ui 1.1.3 → 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 +61 -19
- 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/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 +40 -21
- 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 @@
|
|
|
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"}
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview The shared design vocabulary of the themed components —
|
|
3
|
+
* the `@mapples/ui` `Button`/`IconButton` variants and every
|
|
4
|
+
* `@mapples/components` widget draw their colours, sizes and radii from
|
|
5
|
+
* here, so one source of truth feeds the runtime, the editor schematics (the
|
|
6
|
+
* inspector `Select` options) and the AI digest.
|
|
7
|
+
*
|
|
8
|
+
* Colours are theme-token strings resolved by `@mapples/style`. The key
|
|
9
|
+
* structure is the Mapples palette contract every project theme satisfies
|
|
10
|
+
* (the default palette and the AI design schema enforce it): `background`,
|
|
11
|
+
* `primary`, `accent`, `text`, `neutral`, `system`.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
/** Control sizes shared by buttons, fields and selection controls. */
|
|
16
|
+
export declare const CONTROL_SIZE_KEYS: readonly ["sm", "md", "lg"];
|
|
17
|
+
export type ControlSize = (typeof CONTROL_SIZE_KEYS)[number];
|
|
18
|
+
export interface ControlSizeSpec {
|
|
19
|
+
/** Control height in points — `md` satisfies the 44 pt touch target. */
|
|
20
|
+
height: number;
|
|
21
|
+
/** Glyph size for leading/trailing icons. */
|
|
22
|
+
iconSize: number;
|
|
23
|
+
/** Horizontal padding of a control with a label. */
|
|
24
|
+
paddingX: number;
|
|
25
|
+
/** Typography variant of the control label. */
|
|
26
|
+
labelVariant: string;
|
|
27
|
+
/** Corner radius of the control. */
|
|
28
|
+
radius: number;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Geometry per control size. Points, not sizing tokens, so a control keeps
|
|
32
|
+
* its proportions whatever base a project's sizing scale uses.
|
|
33
|
+
*/
|
|
34
|
+
export declare const CONTROL_SIZES: Record<ControlSize, ControlSizeSpec>;
|
|
35
|
+
/** Corner radius scale. */
|
|
36
|
+
export declare const RADII: {
|
|
37
|
+
readonly xs: 4;
|
|
38
|
+
readonly sm: 8;
|
|
39
|
+
readonly md: 12;
|
|
40
|
+
readonly lg: 16;
|
|
41
|
+
readonly xl: 24;
|
|
42
|
+
readonly pill: 999;
|
|
43
|
+
};
|
|
44
|
+
/** Opacity of a disabled control. */
|
|
45
|
+
export declare const DISABLED_OPACITY = 0.38;
|
|
46
|
+
/** Alpha of the state layer painted over a control in the label colour. */
|
|
47
|
+
export declare const STATE_LAYER_OPACITY: {
|
|
48
|
+
readonly hover: 0.08;
|
|
49
|
+
readonly pressed: 0.12;
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* The one elevation level, as the CSS `boxShadow` string React Native and
|
|
53
|
+
* the web accept; on dark themes surfaces add a 1 px outline as well because
|
|
54
|
+
* shadows vanish. The object form (`ELEVATION_SHADOW`) is what schematics and
|
|
55
|
+
* the AI write into style slots — the styled pipeline converts it.
|
|
56
|
+
*/
|
|
57
|
+
export declare const ELEVATION = "0px 2px 8px rgba(0, 0, 0, 0.12)";
|
|
58
|
+
export declare const ELEVATION_SHADOW: {
|
|
59
|
+
readonly x: 0;
|
|
60
|
+
readonly y: 2;
|
|
61
|
+
readonly radius: 8;
|
|
62
|
+
readonly color: "rgba(0, 0, 0, 0.12)";
|
|
63
|
+
};
|
|
64
|
+
/** Typography variants by the part of a component they set. */
|
|
65
|
+
export declare const TYPOGRAPHY_PARTS: {
|
|
66
|
+
readonly label: "Label";
|
|
67
|
+
readonly button: "Button";
|
|
68
|
+
readonly body: "Body";
|
|
69
|
+
readonly title: "Subtitle";
|
|
70
|
+
readonly headline: "Headline";
|
|
71
|
+
readonly helper: "Caption";
|
|
72
|
+
readonly overline: "Overline";
|
|
73
|
+
readonly link: "Link";
|
|
74
|
+
};
|
|
75
|
+
/** Theme-token strings for the palette contract. */
|
|
76
|
+
export declare const Tokens: {
|
|
77
|
+
readonly color: {
|
|
78
|
+
readonly primary: "theme.primary.main";
|
|
79
|
+
readonly primaryLight: "theme.primary.light";
|
|
80
|
+
readonly primaryDark: "theme.primary.dark";
|
|
81
|
+
readonly onPrimary: "theme.primary.contrast";
|
|
82
|
+
readonly primaryContainer: "theme.primary.background";
|
|
83
|
+
readonly accent: "theme.accent.main";
|
|
84
|
+
readonly accentLight: "theme.accent.light";
|
|
85
|
+
readonly accentDark: "theme.accent.dark";
|
|
86
|
+
readonly onAccent: "theme.accent.contrast";
|
|
87
|
+
readonly accentContainer: "theme.accent.background";
|
|
88
|
+
readonly surface: "theme.background.card";
|
|
89
|
+
readonly background: "theme.background.primary";
|
|
90
|
+
readonly inverse: "theme.background.contrast";
|
|
91
|
+
readonly text: "theme.text.primary";
|
|
92
|
+
readonly textSecondary: "theme.text.secondary";
|
|
93
|
+
readonly textTertiary: "theme.text.tertiary";
|
|
94
|
+
readonly white: "theme.neutral.white";
|
|
95
|
+
readonly black: "theme.neutral.black";
|
|
96
|
+
readonly error: "theme.system.error";
|
|
97
|
+
readonly success: "theme.system.success";
|
|
98
|
+
readonly warning: "theme.system.warning";
|
|
99
|
+
readonly info: "theme.system.info";
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
/** Visual variants of `Button`. */
|
|
103
|
+
export declare const BUTTON_VARIANTS: readonly ["filled", "tonal", "outlined", "text", "elevated"];
|
|
104
|
+
export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
|
|
105
|
+
/** Visual variants of `IconButton` when it renders a glyph by name. */
|
|
106
|
+
export declare const ICON_BUTTON_VARIANTS: readonly ["standard", "filled", "tonal", "outlined"];
|
|
107
|
+
export type IconButtonVariant = (typeof ICON_BUTTON_VARIANTS)[number];
|
|
108
|
+
/** Colour roles a control can take. */
|
|
109
|
+
export declare const TONES: readonly ["primary", "accent", "neutral", "error", "success", "warning", "info"];
|
|
110
|
+
export type Tone = (typeof TONES)[number];
|
|
111
|
+
//# sourceMappingURL=tokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,6BAA8B,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAsB9D,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,qCAAqC;AACrC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB;;;CAA0C,CAAC;AAE3E;;;;;GAKG;AACH,eAAO,MAAM,SAAS,oCAAoC,CAAC;AAC3D,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB;;;;;;;;;CASnB,CAAC;AAEX,oDAAoD;AACpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAyBT,CAAC;AAEX,mCAAmC;AACnC,eAAO,MAAM,eAAe,8DAMlB,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,uEAAuE;AACvE,eAAO,MAAM,oBAAoB,sDAKvB,CAAC;AACX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,uCAAuC;AACvC,eAAO,MAAM,KAAK,kFAQR,CAAC;AACX,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC"}
|
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview The shared design vocabulary of the themed components —
|
|
3
|
+
* the `@mapples/ui` `Button`/`IconButton` variants and every
|
|
4
|
+
* `@mapples/components` widget draw their colours, sizes and radii from
|
|
5
|
+
* here, so one source of truth feeds the runtime, the editor schematics (the
|
|
6
|
+
* inspector `Select` options) and the AI digest.
|
|
7
|
+
*
|
|
8
|
+
* Colours are theme-token strings resolved by `@mapples/style`. The key
|
|
9
|
+
* structure is the Mapples palette contract every project theme satisfies
|
|
10
|
+
* (the default palette and the AI design schema enforce it): `background`,
|
|
11
|
+
* `primary`, `accent`, `text`, `neutral`, `system`.
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
/** Control sizes shared by buttons, fields and selection controls. */
|
|
16
|
+
export const CONTROL_SIZE_KEYS = ['sm', 'md', 'lg'];
|
|
17
|
+
/**
|
|
18
|
+
* Geometry per control size. Points, not sizing tokens, so a control keeps
|
|
19
|
+
* its proportions whatever base a project's sizing scale uses.
|
|
20
|
+
*/
|
|
21
|
+
export const CONTROL_SIZES = {
|
|
22
|
+
sm: {
|
|
23
|
+
height: 36,
|
|
24
|
+
iconSize: 16,
|
|
25
|
+
paddingX: 12,
|
|
26
|
+
labelVariant: 'Label',
|
|
27
|
+
radius: 10,
|
|
28
|
+
},
|
|
29
|
+
md: {
|
|
30
|
+
height: 44,
|
|
31
|
+
iconSize: 20,
|
|
32
|
+
paddingX: 16,
|
|
33
|
+
labelVariant: 'Button',
|
|
34
|
+
radius: 12,
|
|
35
|
+
},
|
|
36
|
+
lg: {
|
|
37
|
+
height: 52,
|
|
38
|
+
iconSize: 24,
|
|
39
|
+
paddingX: 20,
|
|
40
|
+
labelVariant: 'Button',
|
|
41
|
+
radius: 14,
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
/** Corner radius scale. */
|
|
45
|
+
export const RADII = {
|
|
46
|
+
xs: 4,
|
|
47
|
+
sm: 8,
|
|
48
|
+
md: 12,
|
|
49
|
+
lg: 16,
|
|
50
|
+
xl: 24,
|
|
51
|
+
pill: 999,
|
|
52
|
+
};
|
|
53
|
+
/** Opacity of a disabled control. */
|
|
54
|
+
export const DISABLED_OPACITY = 0.38;
|
|
55
|
+
/** Alpha of the state layer painted over a control in the label colour. */
|
|
56
|
+
export const STATE_LAYER_OPACITY = { hover: 0.08, pressed: 0.12 };
|
|
57
|
+
/**
|
|
58
|
+
* The one elevation level, as the CSS `boxShadow` string React Native and
|
|
59
|
+
* the web accept; on dark themes surfaces add a 1 px outline as well because
|
|
60
|
+
* shadows vanish. The object form (`ELEVATION_SHADOW`) is what schematics and
|
|
61
|
+
* the AI write into style slots — the styled pipeline converts it.
|
|
62
|
+
*/
|
|
63
|
+
export const ELEVATION = '0px 2px 8px rgba(0, 0, 0, 0.12)';
|
|
64
|
+
export const ELEVATION_SHADOW = {
|
|
65
|
+
x: 0,
|
|
66
|
+
y: 2,
|
|
67
|
+
radius: 8,
|
|
68
|
+
color: 'rgba(0, 0, 0, 0.12)',
|
|
69
|
+
};
|
|
70
|
+
/** Typography variants by the part of a component they set. */
|
|
71
|
+
export const TYPOGRAPHY_PARTS = {
|
|
72
|
+
label: 'Label',
|
|
73
|
+
button: 'Button',
|
|
74
|
+
body: 'Body',
|
|
75
|
+
title: 'Subtitle',
|
|
76
|
+
headline: 'Headline',
|
|
77
|
+
helper: 'Caption',
|
|
78
|
+
overline: 'Overline',
|
|
79
|
+
link: 'Link',
|
|
80
|
+
};
|
|
81
|
+
/** Theme-token strings for the palette contract. */
|
|
82
|
+
export const Tokens = {
|
|
83
|
+
color: {
|
|
84
|
+
primary: 'theme.primary.main',
|
|
85
|
+
primaryLight: 'theme.primary.light',
|
|
86
|
+
primaryDark: 'theme.primary.dark',
|
|
87
|
+
onPrimary: 'theme.primary.contrast',
|
|
88
|
+
primaryContainer: 'theme.primary.background',
|
|
89
|
+
accent: 'theme.accent.main',
|
|
90
|
+
accentLight: 'theme.accent.light',
|
|
91
|
+
accentDark: 'theme.accent.dark',
|
|
92
|
+
onAccent: 'theme.accent.contrast',
|
|
93
|
+
accentContainer: 'theme.accent.background',
|
|
94
|
+
surface: 'theme.background.card',
|
|
95
|
+
background: 'theme.background.primary',
|
|
96
|
+
inverse: 'theme.background.contrast',
|
|
97
|
+
text: 'theme.text.primary',
|
|
98
|
+
textSecondary: 'theme.text.secondary',
|
|
99
|
+
textTertiary: 'theme.text.tertiary',
|
|
100
|
+
white: 'theme.neutral.white',
|
|
101
|
+
black: 'theme.neutral.black',
|
|
102
|
+
error: 'theme.system.error',
|
|
103
|
+
success: 'theme.system.success',
|
|
104
|
+
warning: 'theme.system.warning',
|
|
105
|
+
info: 'theme.system.info',
|
|
106
|
+
},
|
|
107
|
+
};
|
|
108
|
+
/** Visual variants of `Button`. */
|
|
109
|
+
export const BUTTON_VARIANTS = [
|
|
110
|
+
'filled',
|
|
111
|
+
'tonal',
|
|
112
|
+
'outlined',
|
|
113
|
+
'text',
|
|
114
|
+
'elevated',
|
|
115
|
+
];
|
|
116
|
+
/** Visual variants of `IconButton` when it renders a glyph by name. */
|
|
117
|
+
export const ICON_BUTTON_VARIANTS = [
|
|
118
|
+
'standard',
|
|
119
|
+
'filled',
|
|
120
|
+
'tonal',
|
|
121
|
+
'outlined',
|
|
122
|
+
];
|
|
123
|
+
/** Colour roles a control can take. */
|
|
124
|
+
export const TONES = [
|
|
125
|
+
'primary',
|
|
126
|
+
'accent',
|
|
127
|
+
'neutral',
|
|
128
|
+
'error',
|
|
129
|
+
'success',
|
|
130
|
+
'warning',
|
|
131
|
+
'info',
|
|
132
|
+
];
|
|
133
|
+
//# sourceMappingURL=tokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
|