@ankhorage/zora 2.9.2 → 2.10.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/CHANGELOG.md +12 -0
- package/README.md +1 -1
- package/dist/components/heading/meta.d.ts +42 -0
- package/dist/components/heading/meta.d.ts.map +1 -1
- package/dist/components/heading/meta.js +16 -0
- package/dist/components/heading/meta.js.map +1 -1
- package/dist/theme/ThemeModeToggle.d.ts +3 -0
- package/dist/theme/ThemeModeToggle.d.ts.map +1 -0
- package/dist/theme/ThemeModeToggle.js +9 -0
- package/dist/theme/ThemeModeToggle.js.map +1 -0
- package/dist/theme/ThemeModeToggleProps.d.ts +3 -0
- package/dist/theme/ThemeModeToggleProps.d.ts.map +1 -0
- package/dist/theme/ThemeModeToggleProps.js +2 -0
- package/dist/theme/ThemeModeToggleProps.js.map +1 -0
- package/dist/theme/index.d.ts +2 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +1 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/resolveThemeModeToggleState.d.ts +9 -0
- package/dist/theme/resolveThemeModeToggleState.d.ts.map +1 -0
- package/dist/theme/resolveThemeModeToggleState.js +14 -0
- package/dist/theme/resolveThemeModeToggleState.js.map +1 -0
- package/package.json +1 -1
- package/src/components/heading/meta.ts +16 -0
- package/src/metadata/authoringMeta.test.ts +13 -0
- package/src/theme/ThemeModeToggle.tsx +22 -0
- package/src/theme/ThemeModeToggleProps.ts +3 -0
- package/src/theme/index.ts +2 -0
- package/src/theme/resolveThemeModeToggleState.test.ts +21 -0
- package/src/theme/resolveThemeModeToggleState.ts +21 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 3c1f70f: Add a reusable `ThemeModeToggle` that switches the canonical ZORA light/dark runtime mode with accessible sun/moon affordances.
|
|
8
|
+
|
|
9
|
+
## 2.9.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 72f5814: Classify Heading content and semantics for instance authoring while keeping visual presentation under component theme authority.
|
|
14
|
+
|
|
3
15
|
## 2.9.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
# ZORA
|
|
5
5
|
|
|
6
|
-
         
|
|
7
7
|
|
|
8
8
|
Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
|
|
9
9
|
|
|
@@ -22,11 +22,17 @@ export declare const headingMeta: {
|
|
|
22
22
|
readonly category: "Content";
|
|
23
23
|
readonly label: "Text";
|
|
24
24
|
readonly default: "Heading";
|
|
25
|
+
readonly authoring: {
|
|
26
|
+
readonly authority: "instance";
|
|
27
|
+
};
|
|
25
28
|
};
|
|
26
29
|
readonly i18nKey: {
|
|
27
30
|
readonly type: "string";
|
|
28
31
|
readonly category: "Content";
|
|
29
32
|
readonly label: "i18n key";
|
|
33
|
+
readonly authoring: {
|
|
34
|
+
readonly authority: "instance";
|
|
35
|
+
};
|
|
30
36
|
};
|
|
31
37
|
readonly level: {
|
|
32
38
|
readonly type: "enum";
|
|
@@ -34,41 +40,77 @@ export declare const headingMeta: {
|
|
|
34
40
|
readonly label: "Level";
|
|
35
41
|
readonly enum: readonly [1, 2, 3, 4, 5, 6];
|
|
36
42
|
readonly default: 2;
|
|
43
|
+
readonly authoring: {
|
|
44
|
+
readonly authority: "instance";
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
readonly size: {
|
|
48
|
+
readonly type: "enum";
|
|
49
|
+
readonly category: "Typography";
|
|
50
|
+
readonly label: "Size";
|
|
51
|
+
readonly enum: readonly ["display", "h1", "h2", "h3", "h4", "h5", "h6"];
|
|
52
|
+
readonly authoring: {
|
|
53
|
+
readonly authority: "theme";
|
|
54
|
+
readonly scope: "component";
|
|
55
|
+
};
|
|
37
56
|
};
|
|
38
57
|
readonly color: {
|
|
39
58
|
readonly type: "enum";
|
|
40
59
|
readonly category: "Style";
|
|
41
60
|
readonly label: "Color";
|
|
42
61
|
readonly enum: readonly ["primary", "secondary", "tertiary", "quaternary", "neutral", "success", "warning", "error", "info", "danger"];
|
|
62
|
+
readonly authoring: {
|
|
63
|
+
readonly authority: "theme";
|
|
64
|
+
readonly scope: "component";
|
|
65
|
+
};
|
|
43
66
|
};
|
|
44
67
|
readonly emphasis: {
|
|
45
68
|
readonly type: "enum";
|
|
46
69
|
readonly category: "Style";
|
|
47
70
|
readonly label: "Emphasis";
|
|
48
71
|
readonly enum: readonly ["default", "muted", "subtle", "inverse"];
|
|
72
|
+
readonly authoring: {
|
|
73
|
+
readonly authority: "theme";
|
|
74
|
+
readonly scope: "component";
|
|
75
|
+
};
|
|
49
76
|
};
|
|
50
77
|
readonly align: {
|
|
51
78
|
readonly type: "enum";
|
|
52
79
|
readonly category: "Layout";
|
|
53
80
|
readonly label: "Align";
|
|
54
81
|
readonly enum: readonly ["auto", "left", "right", "center", "justify"];
|
|
82
|
+
readonly authoring: {
|
|
83
|
+
readonly authority: "theme";
|
|
84
|
+
readonly scope: "component";
|
|
85
|
+
};
|
|
55
86
|
};
|
|
56
87
|
readonly weight: {
|
|
57
88
|
readonly type: "enum";
|
|
58
89
|
readonly category: "Typography";
|
|
59
90
|
readonly label: "Weight";
|
|
60
91
|
readonly enum: readonly ["regular", "medium", "semiBold", "bold"];
|
|
92
|
+
readonly authoring: {
|
|
93
|
+
readonly authority: "theme";
|
|
94
|
+
readonly scope: "component";
|
|
95
|
+
};
|
|
61
96
|
};
|
|
62
97
|
readonly italic: {
|
|
63
98
|
readonly type: "boolean";
|
|
64
99
|
readonly category: "Typography";
|
|
65
100
|
readonly label: "Italic";
|
|
66
101
|
readonly default: false;
|
|
102
|
+
readonly authoring: {
|
|
103
|
+
readonly authority: "theme";
|
|
104
|
+
readonly scope: "component";
|
|
105
|
+
};
|
|
67
106
|
};
|
|
68
107
|
readonly numberOfLines: {
|
|
69
108
|
readonly type: "number";
|
|
70
109
|
readonly category: "Layout";
|
|
71
110
|
readonly label: "Line clamp";
|
|
111
|
+
readonly authoring: {
|
|
112
|
+
readonly authority: "instance";
|
|
113
|
+
};
|
|
72
114
|
};
|
|
73
115
|
};
|
|
74
116
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/heading/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW
|
|
1
|
+
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/heading/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFc,CAAC"}
|
|
@@ -20,11 +20,13 @@ export const headingMeta = {
|
|
|
20
20
|
category: 'Content',
|
|
21
21
|
label: 'Text',
|
|
22
22
|
default: 'Heading',
|
|
23
|
+
authoring: { authority: 'instance' },
|
|
23
24
|
},
|
|
24
25
|
i18nKey: {
|
|
25
26
|
type: 'string',
|
|
26
27
|
category: 'Content',
|
|
27
28
|
label: 'i18n key',
|
|
29
|
+
authoring: { authority: 'instance' },
|
|
28
30
|
},
|
|
29
31
|
level: {
|
|
30
32
|
type: 'enum',
|
|
@@ -32,41 +34,55 @@ export const headingMeta = {
|
|
|
32
34
|
label: 'Level',
|
|
33
35
|
enum: [1, 2, 3, 4, 5, 6],
|
|
34
36
|
default: 2,
|
|
37
|
+
authoring: { authority: 'instance' },
|
|
38
|
+
},
|
|
39
|
+
size: {
|
|
40
|
+
type: 'enum',
|
|
41
|
+
category: 'Typography',
|
|
42
|
+
label: 'Size',
|
|
43
|
+
enum: ['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
|
|
44
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
35
45
|
},
|
|
36
46
|
color: {
|
|
37
47
|
type: 'enum',
|
|
38
48
|
category: 'Style',
|
|
39
49
|
label: 'Color',
|
|
40
50
|
enum: ZORA_COLORS,
|
|
51
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
41
52
|
},
|
|
42
53
|
emphasis: {
|
|
43
54
|
type: 'enum',
|
|
44
55
|
category: 'Style',
|
|
45
56
|
label: 'Emphasis',
|
|
46
57
|
enum: ZORA_EMPHASES,
|
|
58
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
47
59
|
},
|
|
48
60
|
align: {
|
|
49
61
|
type: 'enum',
|
|
50
62
|
category: 'Layout',
|
|
51
63
|
label: 'Align',
|
|
52
64
|
enum: ['auto', 'left', 'right', 'center', 'justify'],
|
|
65
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
53
66
|
},
|
|
54
67
|
weight: {
|
|
55
68
|
type: 'enum',
|
|
56
69
|
category: 'Typography',
|
|
57
70
|
label: 'Weight',
|
|
58
71
|
enum: ['regular', 'medium', 'semiBold', 'bold'],
|
|
72
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
59
73
|
},
|
|
60
74
|
italic: {
|
|
61
75
|
type: 'boolean',
|
|
62
76
|
category: 'Typography',
|
|
63
77
|
label: 'Italic',
|
|
64
78
|
default: false,
|
|
79
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
65
80
|
},
|
|
66
81
|
numberOfLines: {
|
|
67
82
|
type: 'number',
|
|
68
83
|
category: 'Layout',
|
|
69
84
|
label: 'Line clamp',
|
|
85
|
+
authoring: { authority: 'instance' },
|
|
70
86
|
},
|
|
71
87
|
},
|
|
72
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/heading/meta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAGvE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,EAAE;IACnB,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE;YACZ,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,CAAC;SACT;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,SAAS;
|
|
1
|
+
{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/heading/meta.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';\nimport type { ZoraComponentMeta } from '../../metadata';\n\nexport const headingMeta = {\n name: 'Heading',\n category: 'component',\n directManifestNode: true,\n allowedChildren: [],\n blueprint: {\n label: 'Heading',\n defaultProps: {\n text: 'Heading',\n level: 2,\n },\n },\n i18n: {\n fields: [{ keyProp: 'i18nKey', defaultTextProp: 'text' }],\n },\n props: {\n text: {\n type: 'string',\n category: 'Content',\n label: 'Text',\n default: 'Heading',\n authoring: { authority: 'instance' },\n },\n i18nKey: {\n type: 'string',\n category: 'Content',\n label: 'i18n key',\n authoring: { authority: 'instance' },\n },\n level: {\n type: 'enum',\n category: 'Semantics',\n label: 'Level',\n enum: [1, 2, 3, 4, 5, 6],\n default: 2,\n authoring: { authority: 'instance' },\n },\n size: {\n type: 'enum',\n category: 'Typography',\n label: 'Size',\n enum: ['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n authoring: { authority: 'theme', scope: 'component' },\n },\n color: {\n type: 'enum',\n category: 'Style',\n label: 'Color',\n enum: ZORA_COLORS,\n authoring: { authority: 'theme', scope: 'component' },\n },\n emphasis: {\n type: 'enum',\n category: 'Style',\n label: 'Emphasis',\n enum: ZORA_EMPHASES,\n authoring: { authority: 'theme', scope: 'component' },\n },\n align: {\n type: 'enum',\n category: 'Layout',\n label: 'Align',\n enum: ['auto', 'left', 'right', 'center', 'justify'],\n authoring: { authority: 'theme', scope: 'component' },\n },\n weight: {\n type: 'enum',\n category: 'Typography',\n label: 'Weight',\n enum: ['regular', 'medium', 'semiBold', 'bold'],\n authoring: { authority: 'theme', scope: 'component' },\n },\n italic: {\n type: 'boolean',\n category: 'Typography',\n label: 'Italic',\n default: false,\n authoring: { authority: 'theme', scope: 'component' },\n },\n numberOfLines: {\n type: 'number',\n category: 'Layout',\n label: 'Line clamp',\n authoring: { authority: 'instance' },\n },\n },\n} as const satisfies ZoraComponentMeta;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeModeToggle.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAU,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BAgBrF"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconButton } from '../components/icon-button';
|
|
2
|
+
import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
|
|
3
|
+
import { useZoraTheme } from './useZoraTheme';
|
|
4
|
+
export function ThemeModeToggle({ disabled, size = 'm', testID }) {
|
|
5
|
+
const { mode, setMode } = useZoraTheme();
|
|
6
|
+
const state = resolveThemeModeToggleState(mode);
|
|
7
|
+
return (<IconButton color="neutral" disabled={disabled} icon={{ name: state.iconName }} label={state.label} onPress={() => setMode(state.nextMode)} size={size} testID={testID} variant="ghost"/>);
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=ThemeModeToggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeModeToggle.js","sourceRoot":"","sources":["../../src/theme/ThemeModeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,GAAG,EAAE,MAAM,EAAwB;IACpF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC;IACzC,MAAM,KAAK,GAAG,2BAA2B,CAAC,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,CAAC,UAAU,CACT,KAAK,CAAC,SAAS,CACf,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CACvC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,OAAO,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { IconButton } from '../components/icon-button';\nimport { resolveThemeModeToggleState } from './resolveThemeModeToggleState';\nimport type { ThemeModeToggleProps } from './ThemeModeToggleProps';\nimport { useZoraTheme } from './useZoraTheme';\n\nexport function ThemeModeToggle({ disabled, size = 'm', testID }: ThemeModeToggleProps) {\n const { mode, setMode } = useZoraTheme();\n const state = resolveThemeModeToggleState(mode);\n\n return (\n <IconButton\n color=\"neutral\"\n disabled={disabled}\n icon={{ name: state.iconName }}\n label={state.label}\n onPress={() => setMode(state.nextMode)}\n size={size}\n testID={testID}\n variant=\"ghost\"\n />\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeModeToggleProps.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModeToggleProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeModeToggleProps.js","sourceRoot":"","sources":["../../src/theme/ThemeModeToggleProps.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconButtonProps } from '../components/icon-button';\n\nexport type ThemeModeToggleProps = Pick<IconButtonProps, 'disabled' | 'size' | 'testID'>;\n"]}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { createZoraThemeConfig } from './createZoraThemeConfig';
|
|
2
|
+
export { ThemeModeToggle } from './ThemeModeToggle';
|
|
3
|
+
export type { ThemeModeToggleProps } from './ThemeModeToggleProps';
|
|
2
4
|
export type { ZoraComputedTheme, ZoraComputedThemeMode, ZoraTheme, ZoraThemeId, ZoraThemeMode, } from './types';
|
|
3
5
|
export { useZoraTheme } from './useZoraTheme';
|
|
4
6
|
export { withZoraThemeScope } from './withZoraThemeScope';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/theme/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { createZoraThemeConfig } from './createZoraThemeConfig';
|
|
2
|
+
export { ThemeModeToggle } from './ThemeModeToggle';
|
|
2
3
|
export { useZoraTheme } from './useZoraTheme';
|
|
3
4
|
export { withZoraThemeScope } from './withZoraThemeScope';
|
|
4
5
|
export { zoraDefaultTheme } from './zoraDefaultTheme';
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { createZoraThemeConfig } from './createZoraThemeConfig';\nexport { ThemeModeToggle } from './ThemeModeToggle';\nexport type { ThemeModeToggleProps } from './ThemeModeToggleProps';\nexport type {\n ZoraComputedTheme,\n ZoraComputedThemeMode,\n ZoraTheme,\n ZoraThemeId,\n ZoraThemeMode,\n} from './types';\nexport { useZoraTheme } from './useZoraTheme';\nexport { withZoraThemeScope } from './withZoraThemeScope';\nexport type { ZoraBaseProps } from './ZoraBaseProps';\nexport { zoraDefaultTheme } from './zoraDefaultTheme';\nexport type { ZoraProviderProps } from './ZoraProvider';\nexport { ZoraProvider } from './ZoraProvider';\nexport type { ZoraThemeScopeProps } from './ZoraThemeScope';\nexport { ZoraThemeScope } from './ZoraThemeScope';\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ZoraThemeMode } from './types';
|
|
2
|
+
interface ThemeModeToggleState {
|
|
3
|
+
readonly iconName: 'moon-outline' | 'sunny-outline';
|
|
4
|
+
readonly label: 'Use dark mode' | 'Use light mode';
|
|
5
|
+
readonly nextMode: ZoraThemeMode;
|
|
6
|
+
}
|
|
7
|
+
export declare function resolveThemeModeToggleState(mode: ZoraThemeMode): ThemeModeToggleState;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=resolveThemeModeToggleState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveThemeModeToggleState.d.ts","sourceRoot":"","sources":["../../src/theme/resolveThemeModeToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,eAAe,CAAC;IACpD,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,gBAAgB,CAAC;IACnD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;CAClC;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,aAAa,GAAG,oBAAoB,CAYrF"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export function resolveThemeModeToggleState(mode) {
|
|
2
|
+
return mode === 'dark'
|
|
3
|
+
? {
|
|
4
|
+
iconName: 'sunny-outline',
|
|
5
|
+
label: 'Use light mode',
|
|
6
|
+
nextMode: 'light',
|
|
7
|
+
}
|
|
8
|
+
: {
|
|
9
|
+
iconName: 'moon-outline',
|
|
10
|
+
label: 'Use dark mode',
|
|
11
|
+
nextMode: 'dark',
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=resolveThemeModeToggleState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveThemeModeToggleState.js","sourceRoot":"","sources":["../../src/theme/resolveThemeModeToggleState.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,2BAA2B,CAAC,IAAmB;IAC7D,OAAO,IAAI,KAAK,MAAM;QACpB,CAAC,CAAC;YACE,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE,OAAO;SAClB;QACH,CAAC,CAAC;YACE,QAAQ,EAAE,cAAc;YACxB,KAAK,EAAE,eAAe;YACtB,QAAQ,EAAE,MAAM;SACjB,CAAC;AACR,CAAC","sourcesContent":["import type { ZoraThemeMode } from './types';\n\ninterface ThemeModeToggleState {\n readonly iconName: 'moon-outline' | 'sunny-outline';\n readonly label: 'Use dark mode' | 'Use light mode';\n readonly nextMode: ZoraThemeMode;\n}\n\nexport function resolveThemeModeToggleState(mode: ZoraThemeMode): ThemeModeToggleState {\n return mode === 'dark'\n ? {\n iconName: 'sunny-outline',\n label: 'Use light mode',\n nextMode: 'light',\n }\n : {\n iconName: 'moon-outline',\n label: 'Use dark mode',\n nextMode: 'dark',\n };\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.10.0",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -22,11 +22,13 @@ export const headingMeta = {
|
|
|
22
22
|
category: 'Content',
|
|
23
23
|
label: 'Text',
|
|
24
24
|
default: 'Heading',
|
|
25
|
+
authoring: { authority: 'instance' },
|
|
25
26
|
},
|
|
26
27
|
i18nKey: {
|
|
27
28
|
type: 'string',
|
|
28
29
|
category: 'Content',
|
|
29
30
|
label: 'i18n key',
|
|
31
|
+
authoring: { authority: 'instance' },
|
|
30
32
|
},
|
|
31
33
|
level: {
|
|
32
34
|
type: 'enum',
|
|
@@ -34,41 +36,55 @@ export const headingMeta = {
|
|
|
34
36
|
label: 'Level',
|
|
35
37
|
enum: [1, 2, 3, 4, 5, 6],
|
|
36
38
|
default: 2,
|
|
39
|
+
authoring: { authority: 'instance' },
|
|
40
|
+
},
|
|
41
|
+
size: {
|
|
42
|
+
type: 'enum',
|
|
43
|
+
category: 'Typography',
|
|
44
|
+
label: 'Size',
|
|
45
|
+
enum: ['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
|
|
46
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
37
47
|
},
|
|
38
48
|
color: {
|
|
39
49
|
type: 'enum',
|
|
40
50
|
category: 'Style',
|
|
41
51
|
label: 'Color',
|
|
42
52
|
enum: ZORA_COLORS,
|
|
53
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
43
54
|
},
|
|
44
55
|
emphasis: {
|
|
45
56
|
type: 'enum',
|
|
46
57
|
category: 'Style',
|
|
47
58
|
label: 'Emphasis',
|
|
48
59
|
enum: ZORA_EMPHASES,
|
|
60
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
49
61
|
},
|
|
50
62
|
align: {
|
|
51
63
|
type: 'enum',
|
|
52
64
|
category: 'Layout',
|
|
53
65
|
label: 'Align',
|
|
54
66
|
enum: ['auto', 'left', 'right', 'center', 'justify'],
|
|
67
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
55
68
|
},
|
|
56
69
|
weight: {
|
|
57
70
|
type: 'enum',
|
|
58
71
|
category: 'Typography',
|
|
59
72
|
label: 'Weight',
|
|
60
73
|
enum: ['regular', 'medium', 'semiBold', 'bold'],
|
|
74
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
61
75
|
},
|
|
62
76
|
italic: {
|
|
63
77
|
type: 'boolean',
|
|
64
78
|
category: 'Typography',
|
|
65
79
|
label: 'Italic',
|
|
66
80
|
default: false,
|
|
81
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
67
82
|
},
|
|
68
83
|
numberOfLines: {
|
|
69
84
|
type: 'number',
|
|
70
85
|
category: 'Layout',
|
|
71
86
|
label: 'Line clamp',
|
|
87
|
+
authoring: { authority: 'instance' },
|
|
72
88
|
},
|
|
73
89
|
},
|
|
74
90
|
} as const satisfies ZoraComponentMeta;
|
|
@@ -24,6 +24,8 @@ describe('ZORA component prop authoring authority', () => {
|
|
|
24
24
|
authority: 'instance',
|
|
25
25
|
});
|
|
26
26
|
expect(ZORA_COMPONENT_META.Card.props.title?.authoring).toEqual({ authority: 'instance' });
|
|
27
|
+
expect(ZORA_COMPONENT_META.Heading.props.text?.authoring).toEqual({ authority: 'instance' });
|
|
28
|
+
expect(ZORA_COMPONENT_META.Heading.props.level?.authoring).toEqual({ authority: 'instance' });
|
|
27
29
|
expect(ZORA_COMPONENT_META.Text.props.text?.authoring).toEqual({ authority: 'instance' });
|
|
28
30
|
expect(ZORA_COMPONENT_META.Panel.props.description?.authoring).toEqual({
|
|
29
31
|
authority: 'instance',
|
|
@@ -39,6 +41,10 @@ describe('ZORA component prop authoring authority', () => {
|
|
|
39
41
|
authority: 'theme',
|
|
40
42
|
scope: 'component',
|
|
41
43
|
});
|
|
44
|
+
expect(ZORA_COMPONENT_META.Heading.props.size?.authoring).toEqual({
|
|
45
|
+
authority: 'theme',
|
|
46
|
+
scope: 'component',
|
|
47
|
+
});
|
|
42
48
|
expect(ZORA_COMPONENT_META.Text.props.variant?.authoring).toEqual({
|
|
43
49
|
authority: 'theme',
|
|
44
50
|
scope: 'component',
|
|
@@ -49,6 +55,13 @@ describe('ZORA component prop authoring authority', () => {
|
|
|
49
55
|
});
|
|
50
56
|
});
|
|
51
57
|
|
|
58
|
+
test('keeps Heading blueprint content useful before instance editing', () => {
|
|
59
|
+
expect(ZORA_COMPONENT_META.Heading.blueprint?.defaultProps).toEqual({
|
|
60
|
+
text: 'Heading',
|
|
61
|
+
level: 2,
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
|
|
52
65
|
test('treats absent authoring metadata as not authorable', () => {
|
|
53
66
|
expect(ZORA_COMPONENT_META.Progress.props.value?.authoring).toBeUndefined();
|
|
54
67
|
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { IconButton } from '../components/icon-button';
|
|
2
|
+
import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
|
|
3
|
+
import type { ThemeModeToggleProps } from './ThemeModeToggleProps';
|
|
4
|
+
import { useZoraTheme } from './useZoraTheme';
|
|
5
|
+
|
|
6
|
+
export function ThemeModeToggle({ disabled, size = 'm', testID }: ThemeModeToggleProps) {
|
|
7
|
+
const { mode, setMode } = useZoraTheme();
|
|
8
|
+
const state = resolveThemeModeToggleState(mode);
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<IconButton
|
|
12
|
+
color="neutral"
|
|
13
|
+
disabled={disabled}
|
|
14
|
+
icon={{ name: state.iconName }}
|
|
15
|
+
label={state.label}
|
|
16
|
+
onPress={() => setMode(state.nextMode)}
|
|
17
|
+
size={size}
|
|
18
|
+
testID={testID}
|
|
19
|
+
variant="ghost"
|
|
20
|
+
/>
|
|
21
|
+
);
|
|
22
|
+
}
|
package/src/theme/index.ts
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { describe, expect, test } from 'bun:test';
|
|
2
|
+
|
|
3
|
+
import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
|
|
4
|
+
|
|
5
|
+
describe('resolveThemeModeToggleState', () => {
|
|
6
|
+
test('offers dark mode while light mode is active', () => {
|
|
7
|
+
expect(resolveThemeModeToggleState('light')).toEqual({
|
|
8
|
+
iconName: 'moon-outline',
|
|
9
|
+
label: 'Use dark mode',
|
|
10
|
+
nextMode: 'dark',
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
test('offers light mode while dark mode is active', () => {
|
|
15
|
+
expect(resolveThemeModeToggleState('dark')).toEqual({
|
|
16
|
+
iconName: 'sunny-outline',
|
|
17
|
+
label: 'Use light mode',
|
|
18
|
+
nextMode: 'light',
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ZoraThemeMode } from './types';
|
|
2
|
+
|
|
3
|
+
interface ThemeModeToggleState {
|
|
4
|
+
readonly iconName: 'moon-outline' | 'sunny-outline';
|
|
5
|
+
readonly label: 'Use dark mode' | 'Use light mode';
|
|
6
|
+
readonly nextMode: ZoraThemeMode;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export function resolveThemeModeToggleState(mode: ZoraThemeMode): ThemeModeToggleState {
|
|
10
|
+
return mode === 'dark'
|
|
11
|
+
? {
|
|
12
|
+
iconName: 'sunny-outline',
|
|
13
|
+
label: 'Use light mode',
|
|
14
|
+
nextMode: 'light',
|
|
15
|
+
}
|
|
16
|
+
: {
|
|
17
|
+
iconName: 'moon-outline',
|
|
18
|
+
label: 'Use dark mode',
|
|
19
|
+
nextMode: 'dark',
|
|
20
|
+
};
|
|
21
|
+
}
|