@ankhorage/zora 2.9.1 → 2.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +1 -1
- package/dist/components/button/meta.d.ts +15 -0
- package/dist/components/button/meta.d.ts.map +1 -1
- package/dist/components/button/meta.js +4 -0
- package/dist/components/button/meta.js.map +1 -1
- package/dist/components/button/themeRecipeMeta.d.ts +33 -0
- package/dist/components/button/themeRecipeMeta.d.ts.map +1 -0
- package/dist/components/button/themeRecipeMeta.js +33 -0
- package/dist/components/button/themeRecipeMeta.js.map +1 -0
- package/dist/components/card/meta.d.ts +17 -0
- package/dist/components/card/meta.d.ts.map +1 -1
- package/dist/components/card/meta.js +5 -0
- package/dist/components/card/meta.js.map +1 -1
- package/dist/components/card/themeRecipeMeta.d.ts +31 -0
- package/dist/components/card/themeRecipeMeta.d.ts.map +1 -0
- package/dist/components/card/themeRecipeMeta.js +31 -0
- package/dist/components/card/themeRecipeMeta.js.map +1 -0
- 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/components/text/meta.d.ts +33 -0
- package/dist/components/text/meta.d.ts.map +1 -1
- package/dist/components/text/meta.js +9 -0
- package/dist/components/text/meta.js.map +1 -1
- package/dist/components/text/themeRecipeMeta.d.ts +32 -0
- package/dist/components/text/themeRecipeMeta.d.ts.map +1 -0
- package/dist/components/text/themeRecipeMeta.js +32 -0
- package/dist/components/text/themeRecipeMeta.js.map +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/metadata/index.d.ts +4 -1
- package/dist/metadata/index.d.ts.map +1 -1
- package/dist/metadata/index.js +2 -0
- package/dist/metadata/index.js.map +1 -1
- package/dist/metadata/themeRecipeMeta.d.ts +3 -0
- package/dist/metadata/themeRecipeMeta.d.ts.map +1 -0
- package/dist/metadata/themeRecipeMeta.js +11 -0
- package/dist/metadata/themeRecipeMeta.js.map +1 -0
- package/dist/metadata/themeRecipeTypes.d.ts +31 -0
- package/dist/metadata/themeRecipeTypes.d.ts.map +1 -0
- package/dist/metadata/themeRecipeTypes.js +8 -0
- package/dist/metadata/themeRecipeTypes.js.map +1 -0
- package/dist/metadata/types.d.ts +7 -0
- package/dist/metadata/types.d.ts.map +1 -1
- package/dist/metadata/types.js.map +1 -1
- package/dist/patterns/panel/meta.d.ts +17 -0
- package/dist/patterns/panel/meta.d.ts.map +1 -1
- package/dist/patterns/panel/meta.js +5 -0
- package/dist/patterns/panel/meta.js.map +1 -1
- package/dist/patterns/panel/themeRecipeMeta.d.ts +31 -0
- package/dist/patterns/panel/themeRecipeMeta.d.ts.map +1 -0
- package/dist/patterns/panel/themeRecipeMeta.js +31 -0
- package/dist/patterns/panel/themeRecipeMeta.js.map +1 -0
- package/package.json +1 -1
- package/src/components/button/meta.ts +4 -0
- package/src/components/button/themeRecipeMeta.ts +34 -0
- package/src/components/card/meta.ts +5 -0
- package/src/components/card/themeRecipeMeta.ts +32 -0
- package/src/components/heading/meta.ts +16 -0
- package/src/components/text/meta.ts +9 -0
- package/src/components/text/themeRecipeMeta.ts +33 -0
- package/src/index.ts +15 -1
- package/src/metadata/authoringMeta.test.ts +72 -0
- package/src/metadata/index.ts +13 -0
- package/src/metadata/themeRecipeMeta.test.ts +70 -0
- package/src/metadata/themeRecipeMeta.ts +12 -0
- package/src/metadata/themeRecipeTypes.ts +47 -0
- package/src/metadata/types.ts +8 -0
- package/src/patterns/panel/meta.ts +5 -0
- package/src/patterns/panel/themeRecipeMeta.ts +32 -0
|
@@ -15,16 +15,25 @@ export declare const panelMeta: {
|
|
|
15
15
|
readonly type: "string";
|
|
16
16
|
readonly category: "Content";
|
|
17
17
|
readonly label: "Title";
|
|
18
|
+
readonly authoring: {
|
|
19
|
+
readonly authority: "instance";
|
|
20
|
+
};
|
|
18
21
|
};
|
|
19
22
|
readonly description: {
|
|
20
23
|
readonly type: "string";
|
|
21
24
|
readonly category: "Content";
|
|
22
25
|
readonly label: "Description";
|
|
26
|
+
readonly authoring: {
|
|
27
|
+
readonly authority: "instance";
|
|
28
|
+
};
|
|
23
29
|
};
|
|
24
30
|
readonly eyebrow: {
|
|
25
31
|
readonly type: "string";
|
|
26
32
|
readonly category: "Content";
|
|
27
33
|
readonly label: "Eyebrow";
|
|
34
|
+
readonly authoring: {
|
|
35
|
+
readonly authority: "instance";
|
|
36
|
+
};
|
|
28
37
|
};
|
|
29
38
|
readonly tone: {
|
|
30
39
|
readonly type: "enum";
|
|
@@ -32,12 +41,20 @@ export declare const panelMeta: {
|
|
|
32
41
|
readonly label: "Tone";
|
|
33
42
|
readonly enum: readonly ["default", "subtle", "outline"];
|
|
34
43
|
readonly default: "default";
|
|
44
|
+
readonly authoring: {
|
|
45
|
+
readonly authority: "theme";
|
|
46
|
+
readonly scope: "pattern";
|
|
47
|
+
};
|
|
35
48
|
};
|
|
36
49
|
readonly compact: {
|
|
37
50
|
readonly type: "boolean";
|
|
38
51
|
readonly category: "Layout";
|
|
39
52
|
readonly label: "Compact";
|
|
40
53
|
readonly default: false;
|
|
54
|
+
readonly authoring: {
|
|
55
|
+
readonly authority: "theme";
|
|
56
|
+
readonly scope: "pattern";
|
|
57
|
+
};
|
|
41
58
|
};
|
|
42
59
|
};
|
|
43
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CgB,CAAC"}
|
|
@@ -16,16 +16,19 @@ export const panelMeta = {
|
|
|
16
16
|
type: 'string',
|
|
17
17
|
category: 'Content',
|
|
18
18
|
label: 'Title',
|
|
19
|
+
authoring: { authority: 'instance' },
|
|
19
20
|
},
|
|
20
21
|
description: {
|
|
21
22
|
type: 'string',
|
|
22
23
|
category: 'Content',
|
|
23
24
|
label: 'Description',
|
|
25
|
+
authoring: { authority: 'instance' },
|
|
24
26
|
},
|
|
25
27
|
eyebrow: {
|
|
26
28
|
type: 'string',
|
|
27
29
|
category: 'Content',
|
|
28
30
|
label: 'Eyebrow',
|
|
31
|
+
authoring: { authority: 'instance' },
|
|
29
32
|
},
|
|
30
33
|
tone: {
|
|
31
34
|
type: 'enum',
|
|
@@ -33,12 +36,14 @@ export const panelMeta = {
|
|
|
33
36
|
label: 'Tone',
|
|
34
37
|
enum: ['default', 'subtle', 'outline'],
|
|
35
38
|
default: 'default',
|
|
39
|
+
authoring: { authority: 'theme', scope: 'pattern' },
|
|
36
40
|
},
|
|
37
41
|
compact: {
|
|
38
42
|
type: 'boolean',
|
|
39
43
|
category: 'Layout',
|
|
40
44
|
label: 'Compact',
|
|
41
45
|
default: false,
|
|
46
|
+
authoring: { authority: 'theme', scope: 'pattern' },
|
|
42
47
|
},
|
|
43
48
|
},
|
|
44
49
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/panel/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,SAAS;IACnB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;QACd,YAAY,EAAE;YACZ,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,SAAS;SAChB;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/panel/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,SAAS;IACnB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;QACd,YAAY,EAAE;YACZ,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,SAAS;SAChB;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;SACrC;QACD,WAAW,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;SACrC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;SACrC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACtC,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE;SACpD;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE;SACpD;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nexport const panelMeta = {\n name: 'Panel',\n category: 'pattern',\n directManifestNode: true,\n allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n blueprint: {\n label: 'Panel',\n defaultProps: {\n title: 'Panel',\n tone: 'default',\n },\n },\n props: {\n title: {\n type: 'string',\n category: 'Content',\n label: 'Title',\n authoring: { authority: 'instance' },\n },\n description: {\n type: 'string',\n category: 'Content',\n label: 'Description',\n authoring: { authority: 'instance' },\n },\n eyebrow: {\n type: 'string',\n category: 'Content',\n label: 'Eyebrow',\n authoring: { authority: 'instance' },\n },\n tone: {\n type: 'enum',\n category: 'Style',\n label: 'Tone',\n enum: ['default', 'subtle', 'outline'],\n default: 'default',\n authoring: { authority: 'theme', scope: 'pattern' },\n },\n compact: {\n type: 'boolean',\n category: 'Layout',\n label: 'Compact',\n default: false,\n authoring: { authority: 'theme', scope: 'pattern' },\n },\n },\n} as const satisfies ZoraComponentMeta;\n"]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare const panelThemeRecipeMeta: {
|
|
2
|
+
readonly name: "Panel";
|
|
3
|
+
readonly kind: "pattern";
|
|
4
|
+
readonly description: "Maps global rhythm and surface tokens into Panel presentation.";
|
|
5
|
+
readonly fields: {
|
|
6
|
+
readonly tone: {
|
|
7
|
+
readonly type: "choice";
|
|
8
|
+
readonly label: "Tone";
|
|
9
|
+
readonly options: readonly ["default", "subtle", "outline"];
|
|
10
|
+
readonly default: "default";
|
|
11
|
+
};
|
|
12
|
+
readonly padding: {
|
|
13
|
+
readonly type: "token";
|
|
14
|
+
readonly tokenFamily: "spacing";
|
|
15
|
+
readonly label: "Padding";
|
|
16
|
+
readonly default: "l";
|
|
17
|
+
};
|
|
18
|
+
readonly radius: {
|
|
19
|
+
readonly type: "token";
|
|
20
|
+
readonly tokenFamily: "radii";
|
|
21
|
+
readonly label: "Corner radius";
|
|
22
|
+
readonly default: "l";
|
|
23
|
+
};
|
|
24
|
+
readonly compact: {
|
|
25
|
+
readonly type: "boolean";
|
|
26
|
+
readonly label: "Compact";
|
|
27
|
+
readonly default: false;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=themeRecipeMeta.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themeRecipeMeta.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/themeRecipeMeta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BO,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export const panelThemeRecipeMeta = {
|
|
2
|
+
name: 'Panel',
|
|
3
|
+
kind: 'pattern',
|
|
4
|
+
description: 'Maps global rhythm and surface tokens into Panel presentation.',
|
|
5
|
+
fields: {
|
|
6
|
+
tone: {
|
|
7
|
+
type: 'choice',
|
|
8
|
+
label: 'Tone',
|
|
9
|
+
options: ['default', 'subtle', 'outline'],
|
|
10
|
+
default: 'default',
|
|
11
|
+
},
|
|
12
|
+
padding: {
|
|
13
|
+
type: 'token',
|
|
14
|
+
tokenFamily: 'spacing',
|
|
15
|
+
label: 'Padding',
|
|
16
|
+
default: 'l',
|
|
17
|
+
},
|
|
18
|
+
radius: {
|
|
19
|
+
type: 'token',
|
|
20
|
+
tokenFamily: 'radii',
|
|
21
|
+
label: 'Corner radius',
|
|
22
|
+
default: 'l',
|
|
23
|
+
},
|
|
24
|
+
compact: {
|
|
25
|
+
type: 'boolean',
|
|
26
|
+
label: 'Compact',
|
|
27
|
+
default: false,
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=themeRecipeMeta.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themeRecipeMeta.js","sourceRoot":"","sources":["../../../src/patterns/panel/themeRecipeMeta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,SAAS;IACf,WAAW,EAAE,gEAAgE;IAC7E,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACzC,OAAO,EAAE,SAAS;SACnB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,SAAS;YACtB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,GAAG;SACb;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,OAAO;YACpB,KAAK,EAAE,eAAe;YACtB,OAAO,EAAE,GAAG;SACb;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,KAAK;SACf;KACF;CACqC,CAAC","sourcesContent":["import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';\n\nexport const panelThemeRecipeMeta = {\n name: 'Panel',\n kind: 'pattern',\n description: 'Maps global rhythm and surface tokens into Panel presentation.',\n fields: {\n tone: {\n type: 'choice',\n label: 'Tone',\n options: ['default', 'subtle', 'outline'],\n default: 'default',\n },\n padding: {\n type: 'token',\n tokenFamily: 'spacing',\n label: 'Padding',\n default: 'l',\n },\n radius: {\n type: 'token',\n tokenFamily: 'radii',\n label: 'Corner radius',\n default: 'l',\n },\n compact: {\n type: 'boolean',\n label: 'Compact',\n default: false,\n },\n },\n} as const satisfies ZoraThemeRecipeMeta;\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.9.
|
|
4
|
+
"version": "2.9.3",
|
|
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": {
|
|
@@ -29,6 +29,7 @@ export const buttonMeta = {
|
|
|
29
29
|
category: 'Content',
|
|
30
30
|
label: 'Label',
|
|
31
31
|
default: 'Continue',
|
|
32
|
+
authoring: { authority: 'instance' },
|
|
32
33
|
},
|
|
33
34
|
color: {
|
|
34
35
|
type: 'enum',
|
|
@@ -36,6 +37,7 @@ export const buttonMeta = {
|
|
|
36
37
|
label: 'Color',
|
|
37
38
|
enum: [...ZORA_COLORS],
|
|
38
39
|
default: 'primary',
|
|
40
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
39
41
|
},
|
|
40
42
|
variant: {
|
|
41
43
|
type: 'enum',
|
|
@@ -43,6 +45,7 @@ export const buttonMeta = {
|
|
|
43
45
|
label: 'Variant',
|
|
44
46
|
enum: ['solid', 'outline', 'ghost', 'soft'],
|
|
45
47
|
default: 'solid',
|
|
48
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
46
49
|
},
|
|
47
50
|
size: {
|
|
48
51
|
type: 'enum',
|
|
@@ -50,6 +53,7 @@ export const buttonMeta = {
|
|
|
50
53
|
label: 'Size',
|
|
51
54
|
enum: ['s', 'm', 'l'],
|
|
52
55
|
default: 'm',
|
|
56
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
53
57
|
},
|
|
54
58
|
},
|
|
55
59
|
} as const satisfies ZoraComponentMeta;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
|
|
2
|
+
|
|
3
|
+
export const buttonThemeRecipeMeta = {
|
|
4
|
+
name: 'Button',
|
|
5
|
+
kind: 'component',
|
|
6
|
+
description: 'Maps shared theme tokens and semantic choices into Button presentation.',
|
|
7
|
+
fields: {
|
|
8
|
+
color: {
|
|
9
|
+
type: 'token',
|
|
10
|
+
tokenFamily: 'colors',
|
|
11
|
+
label: 'Color',
|
|
12
|
+
default: 'primary',
|
|
13
|
+
},
|
|
14
|
+
variant: {
|
|
15
|
+
type: 'choice',
|
|
16
|
+
label: 'Variant',
|
|
17
|
+
options: ['solid', 'outline', 'ghost', 'soft'],
|
|
18
|
+
default: 'solid',
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
type: 'choice',
|
|
22
|
+
label: 'Size',
|
|
23
|
+
description: 'A Button-specific semantic scale, not a universal pixel size.',
|
|
24
|
+
options: ['s', 'm', 'l'],
|
|
25
|
+
default: 'm',
|
|
26
|
+
},
|
|
27
|
+
radius: {
|
|
28
|
+
type: 'token',
|
|
29
|
+
tokenFamily: 'radii',
|
|
30
|
+
label: 'Corner radius',
|
|
31
|
+
default: 'm',
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
} as const satisfies ZoraThemeRecipeMeta;
|
|
@@ -18,16 +18,19 @@ export const cardMeta = {
|
|
|
18
18
|
type: 'string',
|
|
19
19
|
category: 'Content',
|
|
20
20
|
label: 'Title',
|
|
21
|
+
authoring: { authority: 'instance' },
|
|
21
22
|
},
|
|
22
23
|
description: {
|
|
23
24
|
type: 'string',
|
|
24
25
|
category: 'Content',
|
|
25
26
|
label: 'Description',
|
|
27
|
+
authoring: { authority: 'instance' },
|
|
26
28
|
},
|
|
27
29
|
eyebrow: {
|
|
28
30
|
type: 'string',
|
|
29
31
|
category: 'Content',
|
|
30
32
|
label: 'Eyebrow',
|
|
33
|
+
authoring: { authority: 'instance' },
|
|
31
34
|
},
|
|
32
35
|
tone: {
|
|
33
36
|
type: 'enum',
|
|
@@ -35,12 +38,14 @@ export const cardMeta = {
|
|
|
35
38
|
label: 'Tone',
|
|
36
39
|
enum: ['default', 'subtle', 'outline'],
|
|
37
40
|
default: 'default',
|
|
41
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
38
42
|
},
|
|
39
43
|
compact: {
|
|
40
44
|
type: 'boolean',
|
|
41
45
|
category: 'Layout',
|
|
42
46
|
label: 'Compact',
|
|
43
47
|
default: false,
|
|
48
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
44
49
|
},
|
|
45
50
|
},
|
|
46
51
|
} as const satisfies ZoraComponentMeta;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
|
|
2
|
+
|
|
3
|
+
export const cardThemeRecipeMeta = {
|
|
4
|
+
name: 'Card',
|
|
5
|
+
kind: 'component',
|
|
6
|
+
description: 'Maps global rhythm and surface tokens into Card presentation.',
|
|
7
|
+
fields: {
|
|
8
|
+
tone: {
|
|
9
|
+
type: 'choice',
|
|
10
|
+
label: 'Tone',
|
|
11
|
+
options: ['default', 'subtle', 'outline'],
|
|
12
|
+
default: 'default',
|
|
13
|
+
},
|
|
14
|
+
padding: {
|
|
15
|
+
type: 'token',
|
|
16
|
+
tokenFamily: 'spacing',
|
|
17
|
+
label: 'Padding',
|
|
18
|
+
default: 'l',
|
|
19
|
+
},
|
|
20
|
+
radius: {
|
|
21
|
+
type: 'token',
|
|
22
|
+
tokenFamily: 'radii',
|
|
23
|
+
label: 'Corner radius',
|
|
24
|
+
default: 'l',
|
|
25
|
+
},
|
|
26
|
+
compact: {
|
|
27
|
+
type: 'boolean',
|
|
28
|
+
label: 'Compact',
|
|
29
|
+
default: false,
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
} as const satisfies ZoraThemeRecipeMeta;
|
|
@@ -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;
|
|
@@ -23,11 +23,13 @@ export const textMeta = {
|
|
|
23
23
|
category: 'Content',
|
|
24
24
|
label: 'Text',
|
|
25
25
|
default: 'Text',
|
|
26
|
+
authoring: { authority: 'instance' },
|
|
26
27
|
},
|
|
27
28
|
i18nKey: {
|
|
28
29
|
type: 'string',
|
|
29
30
|
category: 'Content',
|
|
30
31
|
label: 'i18n key',
|
|
32
|
+
authoring: { authority: 'instance' },
|
|
31
33
|
},
|
|
32
34
|
variant: {
|
|
33
35
|
type: 'enum',
|
|
@@ -35,12 +37,14 @@ export const textMeta = {
|
|
|
35
37
|
label: 'Variant',
|
|
36
38
|
enum: ['body', 'lead', 'bodySmall', 'caption', 'label', 'eyebrow', 'code'],
|
|
37
39
|
default: 'body',
|
|
40
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
38
41
|
},
|
|
39
42
|
color: {
|
|
40
43
|
type: 'enum',
|
|
41
44
|
category: 'Style',
|
|
42
45
|
label: 'Color',
|
|
43
46
|
enum: ZORA_COLORS,
|
|
47
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
44
48
|
},
|
|
45
49
|
emphasis: {
|
|
46
50
|
type: 'enum',
|
|
@@ -48,29 +52,34 @@ export const textMeta = {
|
|
|
48
52
|
label: 'Emphasis',
|
|
49
53
|
enum: ZORA_EMPHASES,
|
|
50
54
|
default: 'default',
|
|
55
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
51
56
|
},
|
|
52
57
|
align: {
|
|
53
58
|
type: 'enum',
|
|
54
59
|
category: 'Layout',
|
|
55
60
|
label: 'Align',
|
|
56
61
|
enum: ['auto', 'left', 'right', 'center', 'justify'],
|
|
62
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
57
63
|
},
|
|
58
64
|
weight: {
|
|
59
65
|
type: 'enum',
|
|
60
66
|
category: 'Typography',
|
|
61
67
|
label: 'Weight',
|
|
62
68
|
enum: ['regular', 'medium', 'semiBold', 'bold'],
|
|
69
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
63
70
|
},
|
|
64
71
|
italic: {
|
|
65
72
|
type: 'boolean',
|
|
66
73
|
category: 'Typography',
|
|
67
74
|
label: 'Italic',
|
|
68
75
|
default: false,
|
|
76
|
+
authoring: { authority: 'theme', scope: 'component' },
|
|
69
77
|
},
|
|
70
78
|
numberOfLines: {
|
|
71
79
|
type: 'number',
|
|
72
80
|
category: 'Layout',
|
|
73
81
|
label: 'Line clamp',
|
|
82
|
+
authoring: { authority: 'instance' },
|
|
74
83
|
},
|
|
75
84
|
},
|
|
76
85
|
} as const satisfies ZoraComponentMeta;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ZoraThemeRecipeMeta } from '../../metadata/themeRecipeTypes';
|
|
2
|
+
|
|
3
|
+
export const textThemeRecipeMeta = {
|
|
4
|
+
name: 'Text',
|
|
5
|
+
kind: 'component',
|
|
6
|
+
description: 'Maps shared typography and color tokens into Text presentation.',
|
|
7
|
+
fields: {
|
|
8
|
+
variant: {
|
|
9
|
+
type: 'token',
|
|
10
|
+
tokenFamily: 'typography',
|
|
11
|
+
label: 'Typography variant',
|
|
12
|
+
default: 'body',
|
|
13
|
+
},
|
|
14
|
+
color: {
|
|
15
|
+
type: 'token',
|
|
16
|
+
tokenFamily: 'colors',
|
|
17
|
+
label: 'Color',
|
|
18
|
+
default: 'text',
|
|
19
|
+
},
|
|
20
|
+
emphasis: {
|
|
21
|
+
type: 'choice',
|
|
22
|
+
label: 'Emphasis',
|
|
23
|
+
options: ['default', 'muted', 'subtle', 'inverse'],
|
|
24
|
+
default: 'default',
|
|
25
|
+
},
|
|
26
|
+
weight: {
|
|
27
|
+
type: 'choice',
|
|
28
|
+
label: 'Weight',
|
|
29
|
+
options: ['regular', 'medium', 'semiBold', 'bold'],
|
|
30
|
+
default: 'regular',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
} as const satisfies ZoraThemeRecipeMeta;
|
package/src/index.ts
CHANGED
|
@@ -214,12 +214,26 @@ export type {
|
|
|
214
214
|
ZoraComponentMeta,
|
|
215
215
|
ZoraComponentMetaRegistry,
|
|
216
216
|
ZoraComponentPropArrayItemSchema,
|
|
217
|
+
ZoraComponentPropAuthoring,
|
|
217
218
|
ZoraComponentPropSchema,
|
|
218
219
|
ZoraComponentPropType,
|
|
219
220
|
ZoraComponentPropValue,
|
|
220
221
|
ZoraComponentSlotMeta,
|
|
222
|
+
ZoraThemeRecipeBooleanFieldMeta,
|
|
223
|
+
ZoraThemeRecipeChoiceFieldMeta,
|
|
224
|
+
ZoraThemeRecipeFieldMeta,
|
|
225
|
+
ZoraThemeRecipeKind,
|
|
226
|
+
ZoraThemeRecipeMeta,
|
|
227
|
+
ZoraThemeRecipeMetaRegistry,
|
|
228
|
+
ZoraThemeRecipeTokenFieldMeta,
|
|
229
|
+
ZoraThemeTokenFamily,
|
|
230
|
+
} from './metadata';
|
|
231
|
+
export {
|
|
232
|
+
ZORA_BINDABLE_COMPONENT_META,
|
|
233
|
+
ZORA_COMPONENT_META,
|
|
234
|
+
ZORA_THEME_RECIPE_META,
|
|
235
|
+
ZORA_THEME_TOKEN_FAMILIES,
|
|
221
236
|
} from './metadata';
|
|
222
|
-
export { ZORA_BINDABLE_COMPONENT_META, ZORA_COMPONENT_META } from './metadata';
|
|
223
237
|
export type {
|
|
224
238
|
AuthFormBaseProps,
|
|
225
239
|
AuthIdentifierKind,
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { describe, expect, test } from 'bun:test';
|
|
2
|
+
|
|
3
|
+
import { ZORA_COMPONENT_META, type ZoraComponentPropAuthoring } from './index';
|
|
4
|
+
|
|
5
|
+
describe('ZORA component prop authoring authority', () => {
|
|
6
|
+
test('supports the canonical instance and theme scope combinations', () => {
|
|
7
|
+
const values: readonly ZoraComponentPropAuthoring[] = [
|
|
8
|
+
{ authority: 'instance' },
|
|
9
|
+
{ authority: 'theme', scope: 'global' },
|
|
10
|
+
{ authority: 'theme', scope: 'component' },
|
|
11
|
+
{ authority: 'theme', scope: 'pattern' },
|
|
12
|
+
];
|
|
13
|
+
|
|
14
|
+
expect(values).toEqual([
|
|
15
|
+
{ authority: 'instance' },
|
|
16
|
+
{ authority: 'theme', scope: 'global' },
|
|
17
|
+
{ authority: 'theme', scope: 'component' },
|
|
18
|
+
{ authority: 'theme', scope: 'pattern' },
|
|
19
|
+
]);
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
test('classifies representative instance content without exposing arbitrary styling', () => {
|
|
23
|
+
expect(ZORA_COMPONENT_META.Button.props.children?.authoring).toEqual({
|
|
24
|
+
authority: 'instance',
|
|
25
|
+
});
|
|
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' });
|
|
29
|
+
expect(ZORA_COMPONENT_META.Text.props.text?.authoring).toEqual({ authority: 'instance' });
|
|
30
|
+
expect(ZORA_COMPONENT_META.Panel.props.description?.authoring).toEqual({
|
|
31
|
+
authority: 'instance',
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
test('classifies component and pattern styling as theme authority', () => {
|
|
36
|
+
expect(ZORA_COMPONENT_META.Button.props.size?.authoring).toEqual({
|
|
37
|
+
authority: 'theme',
|
|
38
|
+
scope: 'component',
|
|
39
|
+
});
|
|
40
|
+
expect(ZORA_COMPONENT_META.Card.props.tone?.authoring).toEqual({
|
|
41
|
+
authority: 'theme',
|
|
42
|
+
scope: 'component',
|
|
43
|
+
});
|
|
44
|
+
expect(ZORA_COMPONENT_META.Heading.props.size?.authoring).toEqual({
|
|
45
|
+
authority: 'theme',
|
|
46
|
+
scope: 'component',
|
|
47
|
+
});
|
|
48
|
+
expect(ZORA_COMPONENT_META.Text.props.variant?.authoring).toEqual({
|
|
49
|
+
authority: 'theme',
|
|
50
|
+
scope: 'component',
|
|
51
|
+
});
|
|
52
|
+
expect(ZORA_COMPONENT_META.Panel.props.compact?.authoring).toEqual({
|
|
53
|
+
authority: 'theme',
|
|
54
|
+
scope: 'pattern',
|
|
55
|
+
});
|
|
56
|
+
});
|
|
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
|
+
|
|
65
|
+
test('treats absent authoring metadata as not authorable', () => {
|
|
66
|
+
expect(ZORA_COMPONENT_META.Progress.props.value?.authoring).toBeUndefined();
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
test('does not introduce a system authority', () => {
|
|
70
|
+
expect(JSON.stringify(ZORA_COMPONENT_META)).not.toContain('"authority":"system"');
|
|
71
|
+
});
|
|
72
|
+
});
|
package/src/metadata/index.ts
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
export type { ZoraBindableComponentType } from './bindableComponentMeta';
|
|
2
2
|
export { ZORA_BINDABLE_COMPONENT_META } from './bindableComponentMeta';
|
|
3
3
|
export { ZORA_COMPONENT_META } from './componentMeta';
|
|
4
|
+
export { ZORA_THEME_RECIPE_META } from './themeRecipeMeta';
|
|
5
|
+
export type {
|
|
6
|
+
ZoraThemeRecipeBooleanFieldMeta,
|
|
7
|
+
ZoraThemeRecipeChoiceFieldMeta,
|
|
8
|
+
ZoraThemeRecipeFieldMeta,
|
|
9
|
+
ZoraThemeRecipeKind,
|
|
10
|
+
ZoraThemeRecipeMeta,
|
|
11
|
+
ZoraThemeRecipeMetaRegistry,
|
|
12
|
+
ZoraThemeRecipeTokenFieldMeta,
|
|
13
|
+
ZoraThemeTokenFamily,
|
|
14
|
+
} from './themeRecipeTypes';
|
|
15
|
+
export { ZORA_THEME_TOKEN_FAMILIES } from './themeRecipeTypes';
|
|
4
16
|
export type {
|
|
5
17
|
ZoraComponentBlueprint,
|
|
6
18
|
ZoraComponentCategory,
|
|
@@ -12,6 +24,7 @@ export type {
|
|
|
12
24
|
ZoraComponentMeta,
|
|
13
25
|
ZoraComponentMetaRegistry,
|
|
14
26
|
ZoraComponentPropArrayItemSchema,
|
|
27
|
+
ZoraComponentPropAuthoring,
|
|
15
28
|
ZoraComponentPropSchema,
|
|
16
29
|
ZoraComponentPropType,
|
|
17
30
|
ZoraComponentPropValue,
|