@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.
Files changed (84) hide show
  1. package/dist/components/form/SubmitButton/SubmitButton.d.ts +13 -26
  2. package/dist/components/form/SubmitButton/SubmitButton.d.ts.map +1 -1
  3. package/dist/components/form/SubmitButton/SubmitButton.js +12 -21
  4. package/dist/components/form/SubmitButton/SubmitButton.js.map +1 -1
  5. package/dist/components/inputs/Button/Button.d.ts +42 -5
  6. package/dist/components/inputs/Button/Button.d.ts.map +1 -1
  7. package/dist/components/inputs/Button/Button.js +151 -10
  8. package/dist/components/inputs/Button/Button.js.map +1 -1
  9. package/dist/components/inputs/IconButton/IconButton.d.ts +65 -23
  10. package/dist/components/inputs/IconButton/IconButton.d.ts.map +1 -1
  11. package/dist/components/inputs/IconButton/IconButton.js +185 -38
  12. package/dist/components/inputs/IconButton/IconButton.js.map +1 -1
  13. package/dist/components/inputs/TextInput/TextInput.d.ts +5 -0
  14. package/dist/components/inputs/TextInput/TextInput.d.ts.map +1 -1
  15. package/dist/components/inputs/TextInput/TextInput.js +15 -3
  16. package/dist/components/inputs/TextInput/TextInput.js.map +1 -1
  17. package/dist/components/media/BarCode/BarCode.d.ts.map +1 -1
  18. package/dist/components/media/BarCode/BarCode.js +32 -38
  19. package/dist/components/media/BarCode/BarCode.js.map +1 -1
  20. package/dist/components/media/BarCode/BarCodeEncoder.d.ts.map +1 -1
  21. package/dist/components/media/BarCode/BarCodeEncoder.js +22 -3
  22. package/dist/components/media/BarCode/BarCodeEncoder.js.map +1 -1
  23. package/dist/components/media/Icon/Icon.d.ts +43 -24
  24. package/dist/components/media/Icon/Icon.d.ts.map +1 -1
  25. package/dist/components/media/Icon/Icon.js +31 -33
  26. package/dist/components/media/Icon/Icon.js.map +1 -1
  27. package/dist/components/media/Icon/families.d.ts +66 -0
  28. package/dist/components/media/Icon/families.d.ts.map +1 -0
  29. package/dist/components/media/Icon/families.js +316 -0
  30. package/dist/components/media/Icon/families.js.map +1 -0
  31. package/dist/components/media/Icon/index.d.ts +2 -0
  32. package/dist/components/media/Icon/index.d.ts.map +1 -1
  33. package/dist/components/media/Icon/index.js +2 -0
  34. package/dist/components/media/Icon/index.js.map +1 -1
  35. package/dist/components/media/QRCode/QRCode.d.ts.map +1 -1
  36. package/dist/components/media/QRCode/QRCode.js +19 -2
  37. package/dist/components/media/QRCode/QRCode.js.map +1 -1
  38. package/dist/components/media/Vector/MockIcon.d.ts.map +1 -0
  39. package/dist/components/media/Vector/MockIcon.js.map +1 -0
  40. package/dist/components/media/Vector/Vector.d.ts +56 -0
  41. package/dist/components/media/Vector/Vector.d.ts.map +1 -0
  42. package/dist/components/media/Vector/Vector.js +59 -0
  43. package/dist/components/media/Vector/Vector.js.map +1 -0
  44. package/dist/components/media/Vector/index.d.ts +5 -0
  45. package/dist/components/media/Vector/index.d.ts.map +1 -0
  46. package/dist/components/media/Vector/index.js +5 -0
  47. package/dist/components/media/Vector/index.js.map +1 -0
  48. package/dist/components/media/Vector/schematics.d.ts +11 -0
  49. package/dist/components/media/Vector/schematics.d.ts.map +1 -0
  50. package/dist/components/media/Vector/schematics.js +14 -0
  51. package/dist/components/media/Vector/schematics.js.map +1 -0
  52. package/dist/components/media/Video/Video.d.ts +1 -1
  53. package/dist/components/media/Video/Video.d.ts.map +1 -1
  54. package/dist/components/media/Video/Video.js +26 -3
  55. package/dist/components/media/Video/Video.js.map +1 -1
  56. package/dist/components/media/index.d.ts +2 -0
  57. package/dist/components/media/index.d.ts.map +1 -1
  58. package/dist/components/media/index.js +2 -0
  59. package/dist/components/media/index.js.map +1 -1
  60. package/dist/components/media/schematics.d.ts +3 -3
  61. package/dist/components/media/schematics.d.ts.map +1 -1
  62. package/dist/components/media/schematics.js +5 -3
  63. package/dist/components/media/schematics.js.map +1 -1
  64. package/dist/hooks/index.d.ts +3 -0
  65. package/dist/hooks/index.d.ts.map +1 -0
  66. package/dist/hooks/index.js +3 -0
  67. package/dist/hooks/index.js.map +1 -0
  68. package/dist/hooks/useTones.d.ts +54 -0
  69. package/dist/hooks/useTones.d.ts.map +1 -0
  70. package/dist/hooks/useTones.js +79 -0
  71. package/dist/hooks/useTones.js.map +1 -0
  72. package/dist/index.d.ts +2 -0
  73. package/dist/index.d.ts.map +1 -1
  74. package/dist/index.js +2 -0
  75. package/dist/index.js.map +1 -1
  76. package/dist/tokens.d.ts +111 -0
  77. package/dist/tokens.d.ts.map +1 -0
  78. package/dist/tokens.js +133 -0
  79. package/dist/tokens.js.map +1 -0
  80. package/package.json +76 -1
  81. package/dist/components/media/Icon/MockIcon.d.ts.map +0 -1
  82. package/dist/components/media/Icon/MockIcon.js.map +0 -1
  83. /package/dist/components/media/{Icon → Vector}/MockIcon.d.ts +0 -0
  84. /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,5 @@
1
+ import Vector from './Vector';
2
+ export * from './schematics';
3
+ export * from './Vector';
4
+ export default Vector;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -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,5 @@
1
+ import Vector from './Vector';
2
+ export * from './schematics';
3
+ export * from './Vector';
4
+ export default Vector;
5
+ //# sourceMappingURL=index.js.map
@@ -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,EAA6B,eAAe,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D;;;;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;AAIF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,KAAK;;;IA5CT,+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;wCA6DF,CAAC;AAGF,eAAe,KAAK,CAAC"}
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
- import { useVideoPlayer, VideoView } from 'expo-video';
4
- const StyledVideo = styled(VideoView);
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;AAC7E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAmB,MAAM,YAAY,CAAC;AA0BxE,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;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,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,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,EAE3B;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,eAAe,KAAK,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`, `BarCode`,
6
- * `QRCode`, and `Svg` into a single `RegisteredComponents` map that can be
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;AAStD;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,oBAO7B,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`, `BarCode`,
11
- * `QRCode`, and `Svg` into a single `RegisteredComponents` map that can be
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,3 @@
1
+ export { default as useTones } from './useTones';
2
+ export * from './useTones';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -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,3 @@
1
+ export { default as useTones } from './useTones';
2
+ export * from './useTones';
3
+ //# sourceMappingURL=index.js.map
@@ -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
@@ -8,6 +8,8 @@
8
8
  * @public
9
9
  */
10
10
  export * from './schematics';
11
+ export * from './tokens';
12
+ export * from './hooks';
11
13
  export * from './components/inputs';
12
14
  export * from './components/media';
13
15
  export * from './components/typography';
@@ -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
@@ -8,6 +8,8 @@
8
8
  * @public
9
9
  */
10
10
  export * from './schematics';
11
+ export * from './tokens';
12
+ export * from './hooks';
11
13
  export * from './components/inputs';
12
14
  export * from './components/media';
13
15
  export * from './components/typography';
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"}