@ankhorage/zora 2.11.0 → 2.13.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 +2 -2
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +4 -2
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/meta.d.ts +3 -6
- package/dist/components/button/meta.d.ts.map +1 -1
- package/dist/components/button/meta.js +9 -15
- package/dist/components/button/meta.js.map +1 -1
- package/dist/components/button/resolveButtonThemeRecipe.d.ts +9 -0
- package/dist/components/button/resolveButtonThemeRecipe.d.ts.map +1 -0
- package/dist/components/button/resolveButtonThemeRecipe.js +30 -0
- package/dist/components/button/resolveButtonThemeRecipe.js.map +1 -0
- package/dist/components/button/themeRecipeMeta.d.ts +4 -10
- package/dist/components/button/themeRecipeMeta.d.ts.map +1 -1
- package/dist/components/button/themeRecipeMeta.js +5 -10
- package/dist/components/button/themeRecipeMeta.js.map +1 -1
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +8 -4
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/meta.d.ts +22 -3
- package/dist/components/card/meta.d.ts.map +1 -1
- package/dist/components/card/meta.js +14 -15
- package/dist/components/card/meta.js.map +1 -1
- package/dist/components/card/resolveCardThemeRecipe.d.ts +15 -0
- package/dist/components/card/resolveCardThemeRecipe.d.ts.map +1 -0
- package/dist/components/card/resolveCardThemeRecipe.js +22 -0
- package/dist/components/card/resolveCardThemeRecipe.js.map +1 -0
- package/dist/components/card/themeRecipeMeta.d.ts +1 -1
- package/dist/components/card/themeRecipeMeta.js +1 -1
- package/dist/components/card/themeRecipeMeta.js.map +1 -1
- package/dist/components/card/types.d.ts +2 -0
- package/dist/components/card/types.d.ts.map +1 -1
- package/dist/components/card/types.js.map +1 -1
- package/dist/components/heading/Heading.d.ts.map +1 -1
- package/dist/components/heading/Heading.js +14 -15
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/heading/meta.d.ts +6 -1
- package/dist/components/heading/meta.d.ts.map +1 -1
- package/dist/components/heading/meta.js +13 -22
- package/dist/components/heading/meta.js.map +1 -1
- package/dist/components/heading/resolveHeadingThemeRecipe.d.ts +11 -0
- package/dist/components/heading/resolveHeadingThemeRecipe.d.ts.map +1 -0
- package/dist/components/heading/resolveHeadingThemeRecipe.js +46 -0
- package/dist/components/heading/resolveHeadingThemeRecipe.js.map +1 -0
- package/dist/components/heading/themeRecipeMeta.d.ts +39 -0
- package/dist/components/heading/themeRecipeMeta.d.ts.map +1 -0
- package/dist/components/heading/themeRecipeMeta.js +32 -0
- package/dist/components/heading/themeRecipeMeta.js.map +1 -0
- package/dist/components/image/meta.d.ts +24 -3
- package/dist/components/image/meta.d.ts.map +1 -1
- package/dist/components/image/meta.js +18 -3
- package/dist/components/image/meta.js.map +1 -1
- package/dist/components/text/Text.d.ts +0 -1
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +14 -16
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/text/meta.d.ts +6 -5
- package/dist/components/text/meta.d.ts.map +1 -1
- package/dist/components/text/meta.js +13 -25
- package/dist/components/text/meta.js.map +1 -1
- package/dist/components/text/resolveTextThemeRecipe.d.ts +11 -0
- package/dist/components/text/resolveTextThemeRecipe.d.ts.map +1 -0
- package/dist/components/text/resolveTextThemeRecipe.js +46 -0
- package/dist/components/text/resolveTextThemeRecipe.js.map +1 -0
- package/dist/components/text/themeRecipeMeta.d.ts +15 -7
- package/dist/components/text/themeRecipeMeta.d.ts.map +1 -1
- package/dist/components/text/themeRecipeMeta.js +12 -11
- package/dist/components/text/themeRecipeMeta.js.map +1 -1
- package/dist/metadata/bindableComponentMeta.d.ts +22 -7
- package/dist/metadata/bindableComponentMeta.d.ts.map +1 -1
- package/dist/metadata/bindableComponentMeta.js +3 -13
- package/dist/metadata/bindableComponentMeta.js.map +1 -1
- package/dist/metadata/themeRecipeMeta.d.ts.map +1 -1
- package/dist/metadata/themeRecipeMeta.js +2 -0
- package/dist/metadata/themeRecipeMeta.js.map +1 -1
- package/dist/metadata/themeRecipeTypes.d.ts +3 -3
- package/dist/metadata/themeRecipeTypes.d.ts.map +1 -1
- package/dist/metadata/themeRecipeTypes.js.map +1 -1
- package/dist/metadata/types.d.ts +4 -2
- package/dist/metadata/types.d.ts.map +1 -1
- package/dist/metadata/types.js.map +1 -1
- package/dist/patterns/panel/Panel.d.ts +0 -2
- package/dist/patterns/panel/Panel.d.ts.map +1 -1
- package/dist/patterns/panel/Panel.js +6 -4
- package/dist/patterns/panel/Panel.js.map +1 -1
- package/dist/patterns/panel/meta.d.ts +22 -3
- package/dist/patterns/panel/meta.d.ts.map +1 -1
- package/dist/patterns/panel/meta.js +14 -15
- package/dist/patterns/panel/meta.js.map +1 -1
- package/dist/patterns/panel/themeRecipeMeta.d.ts +1 -1
- package/dist/patterns/panel/themeRecipeMeta.js +1 -1
- package/dist/patterns/panel/themeRecipeMeta.js.map +1 -1
- package/dist/patterns/panel/types.d.ts +2 -0
- package/dist/patterns/panel/types.d.ts.map +1 -1
- package/dist/patterns/panel/types.js.map +1 -1
- package/dist/theme/ZoraProvider.d.ts +4 -12
- package/dist/theme/ZoraProvider.d.ts.map +1 -1
- package/dist/theme/ZoraProvider.js +5 -14
- package/dist/theme/ZoraProvider.js.map +1 -1
- package/dist/theme/ZoraThemeRuntimeContext.d.ts +1 -2
- package/dist/theme/ZoraThemeRuntimeContext.d.ts.map +1 -1
- package/dist/theme/ZoraThemeRuntimeContext.js +0 -1
- package/dist/theme/ZoraThemeRuntimeContext.js.map +1 -1
- package/dist/theme/ZoraThemeScope.d.ts.map +1 -1
- package/dist/theme/ZoraThemeScope.js +4 -10
- package/dist/theme/ZoraThemeScope.js.map +1 -1
- package/dist/theme/resolveZoraThemeRecipe.d.ts +16 -0
- package/dist/theme/resolveZoraThemeRecipe.d.ts.map +1 -0
- package/dist/theme/resolveZoraThemeRecipe.js +56 -0
- package/dist/theme/resolveZoraThemeRecipe.js.map +1 -0
- package/dist/theme/useZoraTheme.d.ts +1 -1
- package/dist/theme/useZoraThemeRecipe.d.ts +2 -0
- package/dist/theme/useZoraThemeRecipe.d.ts.map +1 -0
- package/dist/theme/useZoraThemeRecipe.js +7 -0
- package/dist/theme/useZoraThemeRecipe.js.map +1 -0
- package/package.json +4 -4
- package/src/components/button/Button.tsx +4 -2
- package/src/components/button/meta.ts +10 -15
- package/src/components/button/resolveButtonThemeRecipe.test.ts +25 -0
- package/src/components/button/resolveButtonThemeRecipe.ts +41 -0
- package/src/components/button/themeRecipeMeta.ts +5 -10
- package/src/components/card/Card.tsx +13 -7
- package/src/components/card/meta.ts +15 -15
- package/src/components/card/resolveCardThemeRecipe.test.ts +28 -0
- package/src/components/card/resolveCardThemeRecipe.ts +33 -0
- package/src/components/card/themeRecipeMeta.ts +1 -1
- package/src/components/card/types.ts +2 -0
- package/src/components/contentFallback.test.ts +4 -4
- package/src/components/heading/Heading.tsx +18 -28
- package/src/components/heading/meta.ts +14 -22
- package/src/components/heading/resolveHeadingThemeRecipe.ts +55 -0
- package/src/components/heading/themeRecipeMeta.ts +33 -0
- package/src/components/image/meta.ts +18 -3
- package/src/components/text/Text.tsx +16 -25
- package/src/components/text/meta.ts +14 -25
- package/src/components/text/resolveTextThemeRecipe.ts +48 -0
- package/src/components/text/themeRecipeMeta.ts +12 -11
- package/src/metadata/authoringMeta.test.ts +18 -44
- package/src/metadata/bindableComponentMeta.test.ts +13 -0
- package/src/metadata/bindableComponentMeta.ts +4 -13
- package/src/metadata/componentMeta.test.ts +14 -0
- package/src/metadata/themeRecipeMeta.test.ts +41 -39
- package/src/metadata/themeRecipeMeta.ts +2 -0
- package/src/metadata/themeRecipeTypes.ts +3 -3
- package/src/metadata/types.ts +11 -24
- package/src/patterns/panel/Panel.tsx +14 -4
- package/src/patterns/panel/meta.ts +15 -15
- package/src/patterns/panel/themeRecipeMeta.ts +1 -1
- package/src/patterns/panel/types.ts +2 -0
- package/src/theme/ZoraProvider.tsx +10 -13
- package/src/theme/ZoraThemeRuntimeContext.tsx +1 -3
- package/src/theme/ZoraThemeScope.tsx +5 -25
- package/src/theme/resolveZoraThemeRecipe.test.ts +72 -0
- package/src/theme/resolveZoraThemeRecipe.ts +91 -0
- package/src/theme/themeConfigScope.test.ts +25 -0
- package/src/theme/useZoraThemeRecipe.ts +7 -0
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';
|
|
2
2
|
import { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';
|
|
3
|
+
import { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';
|
|
3
4
|
import { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';
|
|
4
5
|
import { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';
|
|
5
6
|
export const ZORA_THEME_RECIPE_META = {
|
|
6
7
|
Button: buttonThemeRecipeMeta,
|
|
7
8
|
Card: cardThemeRecipeMeta,
|
|
9
|
+
Heading: headingThemeRecipeMeta,
|
|
8
10
|
Text: textThemeRecipeMeta,
|
|
9
11
|
Panel: panelThemeRecipeMeta,
|
|
10
12
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeRecipeMeta.js","sourceRoot":"","sources":["../../src/metadata/themeRecipeMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGzE,MAAM,CAAC,MAAM,sBAAsB,GAAgC;IACjE,MAAM,EAAE,qBAAqB;IAC7B,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';\nimport { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';\nimport { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';\nimport { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';\nimport type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';\n\nexport const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {\n Button: buttonThemeRecipeMeta,\n Card: cardThemeRecipeMeta,\n Text: textThemeRecipeMeta,\n Panel: panelThemeRecipeMeta,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"themeRecipeMeta.js","sourceRoot":"","sources":["../../src/metadata/themeRecipeMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGzE,MAAM,CAAC,MAAM,sBAAsB,GAAgC;IACjE,MAAM,EAAE,qBAAqB;IAC7B,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,sBAAsB;IAC/B,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,oBAAoB;CAC5B,CAAC","sourcesContent":["import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';\nimport { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';\nimport { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';\nimport { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';\nimport { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';\nimport type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';\n\nexport const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {\n Button: buttonThemeRecipeMeta,\n Card: cardThemeRecipeMeta,\n Heading: headingThemeRecipeMeta,\n Text: textThemeRecipeMeta,\n Panel: panelThemeRecipeMeta,\n};\n"]}
|
|
@@ -8,16 +8,16 @@ interface ZoraThemeRecipeFieldBase {
|
|
|
8
8
|
export interface ZoraThemeRecipeTokenFieldMeta extends ZoraThemeRecipeFieldBase {
|
|
9
9
|
readonly type: 'token';
|
|
10
10
|
readonly tokenFamily: ZoraThemeTokenFamily;
|
|
11
|
-
readonly default
|
|
11
|
+
readonly default?: string;
|
|
12
12
|
}
|
|
13
13
|
export interface ZoraThemeRecipeChoiceFieldMeta extends ZoraThemeRecipeFieldBase {
|
|
14
14
|
readonly type: 'choice';
|
|
15
15
|
readonly options: readonly string[];
|
|
16
|
-
readonly default
|
|
16
|
+
readonly default?: string;
|
|
17
17
|
}
|
|
18
18
|
export interface ZoraThemeRecipeBooleanFieldMeta extends ZoraThemeRecipeFieldBase {
|
|
19
19
|
readonly type: 'boolean';
|
|
20
|
-
readonly default
|
|
20
|
+
readonly default?: boolean;
|
|
21
21
|
}
|
|
22
22
|
export type ZoraThemeRecipeFieldMeta = ZoraThemeRecipeTokenFieldMeta | ZoraThemeRecipeChoiceFieldMeta | ZoraThemeRecipeBooleanFieldMeta;
|
|
23
23
|
export interface ZoraThemeRecipeMeta {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeRecipeTypes.d.ts","sourceRoot":"","sources":["../../src/metadata/themeRecipeTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,kEAM5B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,SAAS,CAAC;AAE1D,UAAU,wBAAwB;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,6BAA8B,SAAQ,wBAAwB;IAC7E,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"themeRecipeTypes.d.ts","sourceRoot":"","sources":["../../src/metadata/themeRecipeTypes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,kEAM5B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,SAAS,CAAC;AAE1D,UAAU,wBAAwB;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,6BAA8B,SAAQ,wBAAwB;IAC7E,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,+BAAgC,SAAQ,wBAAwB;IAC/E,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,MAAM,wBAAwB,GAChC,6BAA6B,GAC7B,8BAA8B,GAC9B,+BAA+B,CAAC;AAEpC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC,CAAC;CACrE;AAED,MAAM,MAAM,2BAA2B,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeRecipeTypes.js","sourceRoot":"","sources":["../../src/metadata/themeRecipeTypes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,QAAQ;IACR,SAAS;IACT,OAAO;IACP,YAAY;IACZ,SAAS;CACD,CAAC","sourcesContent":["export const ZORA_THEME_TOKEN_FAMILIES = [\n 'colors',\n 'spacing',\n 'radii',\n 'typography',\n 'shadows',\n] as const;\n\nexport type ZoraThemeTokenFamily = (typeof ZORA_THEME_TOKEN_FAMILIES)[number];\n\nexport type ZoraThemeRecipeKind = 'component' | 'pattern';\n\ninterface ZoraThemeRecipeFieldBase {\n readonly label: string;\n readonly description?: string;\n}\n\nexport interface ZoraThemeRecipeTokenFieldMeta extends ZoraThemeRecipeFieldBase {\n readonly type: 'token';\n readonly tokenFamily: ZoraThemeTokenFamily;\n readonly default
|
|
1
|
+
{"version":3,"file":"themeRecipeTypes.js","sourceRoot":"","sources":["../../src/metadata/themeRecipeTypes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,QAAQ;IACR,SAAS;IACT,OAAO;IACP,YAAY;IACZ,SAAS;CACD,CAAC","sourcesContent":["export const ZORA_THEME_TOKEN_FAMILIES = [\n 'colors',\n 'spacing',\n 'radii',\n 'typography',\n 'shadows',\n] as const;\n\nexport type ZoraThemeTokenFamily = (typeof ZORA_THEME_TOKEN_FAMILIES)[number];\n\nexport type ZoraThemeRecipeKind = 'component' | 'pattern';\n\ninterface ZoraThemeRecipeFieldBase {\n readonly label: string;\n readonly description?: string;\n}\n\nexport interface ZoraThemeRecipeTokenFieldMeta extends ZoraThemeRecipeFieldBase {\n readonly type: 'token';\n readonly tokenFamily: ZoraThemeTokenFamily;\n readonly default?: string;\n}\n\nexport interface ZoraThemeRecipeChoiceFieldMeta extends ZoraThemeRecipeFieldBase {\n readonly type: 'choice';\n readonly options: readonly string[];\n readonly default?: string;\n}\n\nexport interface ZoraThemeRecipeBooleanFieldMeta extends ZoraThemeRecipeFieldBase {\n readonly type: 'boolean';\n readonly default?: boolean;\n}\n\nexport type ZoraThemeRecipeFieldMeta =\n | ZoraThemeRecipeTokenFieldMeta\n | ZoraThemeRecipeChoiceFieldMeta\n | ZoraThemeRecipeBooleanFieldMeta;\n\nexport interface ZoraThemeRecipeMeta {\n readonly name: string;\n readonly kind: ZoraThemeRecipeKind;\n readonly description?: string;\n readonly fields: Readonly<Record<string, ZoraThemeRecipeFieldMeta>>;\n}\n\nexport type ZoraThemeRecipeMetaRegistry = Readonly<Record<string, ZoraThemeRecipeMeta>>;\n"]}
|
package/dist/metadata/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ComponentEventDtoKind, ComponentRequirements } from '@ankhorage/contracts';
|
|
1
|
+
import type { ComponentEventDtoKind, ComponentRequirements, MediaAssetKind, UiComponentPropType } from '@ankhorage/contracts';
|
|
2
2
|
export type ZoraComponentCategory = 'foundation' | 'component' | 'pattern' | 'layout';
|
|
3
|
-
export type ZoraComponentPropType =
|
|
3
|
+
export type ZoraComponentPropType = UiComponentPropType;
|
|
4
4
|
export type ZoraComponentPropValue = string | number | boolean | null | readonly ZoraComponentPropValue[] | {
|
|
5
5
|
readonly [key: string]: ZoraComponentPropValue;
|
|
6
6
|
};
|
|
@@ -9,6 +9,7 @@ export type ZoraComponentPropAuthoring = {
|
|
|
9
9
|
} | {
|
|
10
10
|
readonly authority: 'theme';
|
|
11
11
|
readonly scope: 'global' | 'component' | 'pattern';
|
|
12
|
+
readonly allowInstanceOverride?: boolean;
|
|
12
13
|
};
|
|
13
14
|
export interface ZoraComponentPropArrayItemSchema {
|
|
14
15
|
key: string;
|
|
@@ -21,6 +22,7 @@ export interface ZoraComponentPropSchema {
|
|
|
21
22
|
enum?: readonly (string | number)[];
|
|
22
23
|
default?: ZoraComponentPropValue;
|
|
23
24
|
itemSchema?: readonly ZoraComponentPropArrayItemSchema[];
|
|
25
|
+
mediaKinds?: readonly MediaAssetKind[];
|
|
24
26
|
authoring?: ZoraComponentPropAuthoring;
|
|
25
27
|
}
|
|
26
28
|
export interface ZoraComponentBlueprint {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/metadata/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/metadata/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/metadata/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/metadata/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ComponentEventDtoKind,\n ComponentRequirements,\n MediaAssetKind,\n UiComponentPropType,\n} from '@ankhorage/contracts';\n\nexport type ZoraComponentCategory = 'foundation' | 'component' | 'pattern' | 'layout';\n\nexport type ZoraComponentPropType = UiComponentPropType;\n\nexport type ZoraComponentPropValue =\n | string\n | number\n | boolean\n | null\n | readonly ZoraComponentPropValue[]\n | { readonly [key: string]: ZoraComponentPropValue };\n\nexport type ZoraComponentPropAuthoring =\n | { readonly authority: 'instance' }\n | {\n readonly authority: 'theme';\n readonly scope: 'global' | 'component' | 'pattern';\n readonly allowInstanceOverride?: boolean;\n };\n\nexport interface ZoraComponentPropArrayItemSchema {\n key: string;\n schema: ZoraComponentPropSchema;\n}\n\nexport interface ZoraComponentPropSchema {\n type: ZoraComponentPropType;\n category: string;\n label?: string;\n enum?: readonly (string | number)[];\n default?: ZoraComponentPropValue;\n itemSchema?: readonly ZoraComponentPropArrayItemSchema[];\n mediaKinds?: readonly MediaAssetKind[];\n authoring?: ZoraComponentPropAuthoring;\n}\n\nexport interface ZoraComponentBlueprint {\n label: string;\n icon?: { name: string; provider?: string };\n defaultProps?: Readonly<Record<string, ZoraComponentPropValue>>;\n}\n\nexport interface ZoraComponentI18nMeta {\n fields: readonly { keyProp: string; defaultTextProp: string }[];\n}\n\nexport type ZoraComponentEventPayloadKind = ComponentEventDtoKind | (string & {});\nexport type ZoraComponentEventPayloadFieldType =\n | 'boolean'\n | 'number'\n | 'object'\n | 'record'\n | 'string'\n | 'unknown';\n\nexport interface ZoraComponentEventPayloadFieldMeta {\n readonly path: string;\n readonly type: ZoraComponentEventPayloadFieldType;\n readonly label?: string;\n readonly description?: string;\n}\n\nexport interface ZoraComponentEventMeta {\n readonly label: string;\n readonly eventType: ZoraComponentEventPayloadKind;\n readonly description?: string;\n readonly payloadFields?: readonly ZoraComponentEventPayloadFieldMeta[];\n}\n\nexport interface ZoraComponentSlotMeta {\n label?: string;\n allowedChildren?: readonly string[];\n}\n\nexport interface ZoraComponentMeta {\n name: string;\n category: ZoraComponentCategory;\n description?: string;\n directManifestNode: boolean;\n allowedChildren: readonly string[];\n requirements?: ComponentRequirements;\n blueprint?: ZoraComponentBlueprint;\n events?: Readonly<Record<string, ZoraComponentEventMeta>>;\n i18n?: ZoraComponentI18nMeta;\n slots?: Readonly<Record<string, ZoraComponentSlotMeta>>;\n note?: string;\n props: Readonly<Record<string, ZoraComponentPropSchema>>;\n}\n\nexport type ZoraComponentMetaRegistry = Readonly<Record<string, ZoraComponentMeta>>;\n"]}
|
|
@@ -2,8 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import type { PanelProps } from './types';
|
|
3
3
|
/***
|
|
4
4
|
* Semantic wrapper around `Card` for panel-style page sections.
|
|
5
|
-
*
|
|
6
|
-
|
|
7
5
|
*/
|
|
8
6
|
export declare const Panel: (props: PanelProps) => React.ReactElement | null;
|
|
9
7
|
//# sourceMappingURL=Panel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAgB1C;;GAEG;AACH,eAAO,MAAM,KAAK,kDAAiC,CAAC"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Card } from '../../components/card';
|
|
3
|
+
import { resolveCardThemeRecipe } from '../../components/card/resolveCardThemeRecipe';
|
|
4
|
+
import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
|
|
3
5
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
4
|
-
function PanelInner({ themeId: _themeId, mode: _mode, ...props }) {
|
|
5
|
-
|
|
6
|
+
function PanelInner({ themeId: _themeId, mode: _mode, tone, compact, padding, radius, ...props }) {
|
|
7
|
+
const themeFields = useZoraThemeRecipe('Panel');
|
|
8
|
+
const recipe = resolveCardThemeRecipe({ tone, compact, padding, radius, themeFields });
|
|
9
|
+
return <Card {...props} {...recipe}/>;
|
|
6
10
|
}
|
|
7
11
|
/***
|
|
8
12
|
* Semantic wrapper around `Card` for panel-style page sections.
|
|
9
|
-
*
|
|
10
|
-
|
|
11
13
|
*/
|
|
12
14
|
export const Panel = withZoraThemeScope(PanelInner);
|
|
13
15
|
//# sourceMappingURL=Panel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/patterns/panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/patterns/panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACG;IACX,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,sBAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IACvF,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,MAAM,CAAC,EAAG,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Card } from '../../components/card';\nimport { resolveCardThemeRecipe } from '../../components/card/resolveCardThemeRecipe';\nimport { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PanelProps } from './types';\n\nfunction PanelInner({\n themeId: _themeId,\n mode: _mode,\n tone,\n compact,\n padding,\n radius,\n ...props\n}: PanelProps) {\n const themeFields = useZoraThemeRecipe('Panel');\n const recipe = resolveCardThemeRecipe({ tone, compact, padding, radius, themeFields });\n return <Card {...props} {...recipe} />;\n}\n\n/***\n * Semantic wrapper around `Card` for panel-style page sections.\n */\nexport const Panel = withZoraThemeScope(PanelInner);\n"]}
|
|
@@ -7,7 +7,6 @@ export declare const panelMeta: {
|
|
|
7
7
|
readonly label: "Panel";
|
|
8
8
|
readonly defaultProps: {
|
|
9
9
|
readonly title: "Panel";
|
|
10
|
-
readonly tone: "default";
|
|
11
10
|
};
|
|
12
11
|
};
|
|
13
12
|
readonly props: {
|
|
@@ -40,20 +39,40 @@ export declare const panelMeta: {
|
|
|
40
39
|
readonly category: "Style";
|
|
41
40
|
readonly label: "Tone";
|
|
42
41
|
readonly enum: readonly ["default", "subtle", "outline"];
|
|
43
|
-
readonly default: "default";
|
|
44
42
|
readonly authoring: {
|
|
45
43
|
readonly authority: "theme";
|
|
46
44
|
readonly scope: "pattern";
|
|
45
|
+
readonly allowInstanceOverride: true;
|
|
47
46
|
};
|
|
48
47
|
};
|
|
49
48
|
readonly compact: {
|
|
50
49
|
readonly type: "boolean";
|
|
51
50
|
readonly category: "Layout";
|
|
52
51
|
readonly label: "Compact";
|
|
53
|
-
readonly default: false;
|
|
54
52
|
readonly authoring: {
|
|
55
53
|
readonly authority: "theme";
|
|
56
54
|
readonly scope: "pattern";
|
|
55
|
+
readonly allowInstanceOverride: true;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
readonly padding: {
|
|
59
|
+
readonly type: "spacing";
|
|
60
|
+
readonly category: "Layout";
|
|
61
|
+
readonly label: "Padding";
|
|
62
|
+
readonly authoring: {
|
|
63
|
+
readonly authority: "theme";
|
|
64
|
+
readonly scope: "pattern";
|
|
65
|
+
readonly allowInstanceOverride: true;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
readonly radius: {
|
|
69
|
+
readonly type: "radius";
|
|
70
|
+
readonly category: "Style";
|
|
71
|
+
readonly label: "Corner radius";
|
|
72
|
+
readonly authoring: {
|
|
73
|
+
readonly authority: "theme";
|
|
74
|
+
readonly scope: "pattern";
|
|
75
|
+
readonly allowInstanceOverride: true;
|
|
57
76
|
};
|
|
58
77
|
};
|
|
59
78
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/meta.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/meta.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCgB,CAAC"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
|
|
2
|
+
const themeAuthoring = {
|
|
3
|
+
authority: 'theme',
|
|
4
|
+
scope: 'pattern',
|
|
5
|
+
allowInstanceOverride: true,
|
|
6
|
+
};
|
|
2
7
|
export const panelMeta = {
|
|
3
8
|
name: 'Panel',
|
|
4
9
|
category: 'pattern',
|
|
5
10
|
directManifestNode: true,
|
|
6
11
|
allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
|
|
7
|
-
blueprint: {
|
|
8
|
-
label: 'Panel',
|
|
9
|
-
defaultProps: {
|
|
10
|
-
title: 'Panel',
|
|
11
|
-
tone: 'default',
|
|
12
|
-
},
|
|
13
|
-
},
|
|
12
|
+
blueprint: { label: 'Panel', defaultProps: { title: 'Panel' } },
|
|
14
13
|
props: {
|
|
15
14
|
title: {
|
|
16
15
|
type: 'string',
|
|
@@ -35,15 +34,15 @@ export const panelMeta = {
|
|
|
35
34
|
category: 'Style',
|
|
36
35
|
label: 'Tone',
|
|
37
36
|
enum: ['default', 'subtle', 'outline'],
|
|
38
|
-
|
|
39
|
-
authoring: { authority: 'theme', scope: 'pattern' },
|
|
37
|
+
authoring: themeAuthoring,
|
|
40
38
|
},
|
|
41
|
-
compact: {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
compact: { type: 'boolean', category: 'Layout', label: 'Compact', authoring: themeAuthoring },
|
|
40
|
+
padding: { type: 'spacing', category: 'Layout', label: 'Padding', authoring: themeAuthoring },
|
|
41
|
+
radius: {
|
|
42
|
+
type: 'radius',
|
|
43
|
+
category: 'Style',
|
|
44
|
+
label: 'Corner radius',
|
|
45
|
+
authoring: themeAuthoring,
|
|
47
46
|
},
|
|
48
47
|
},
|
|
49
48
|
};
|
|
@@ -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
|
|
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,GAAG;IACrB,SAAS,EAAE,OAAO;IAClB,KAAK,EAAE,SAAS;IAChB,qBAAqB,EAAE,IAAI;CACnB,CAAC;AAEX,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,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAC/D,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,SAAS,EAAE,cAAc;SAC1B;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE;QAC7F,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE;QAC7F,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE,cAAc;SAC1B;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nconst themeAuthoring = {\n authority: 'theme',\n scope: 'pattern',\n allowInstanceOverride: true,\n} as const;\n\nexport const panelMeta = {\n name: 'Panel',\n category: 'pattern',\n directManifestNode: true,\n allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n blueprint: { label: 'Panel', defaultProps: { title: 'Panel' } },\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 authoring: themeAuthoring,\n },\n compact: { type: 'boolean', category: 'Layout', label: 'Compact', authoring: themeAuthoring },\n padding: { type: 'spacing', category: 'Layout', label: 'Padding', authoring: themeAuthoring },\n radius: {\n type: 'radius',\n category: 'Style',\n label: 'Corner radius',\n authoring: themeAuthoring,\n },\n },\n} as const satisfies ZoraComponentMeta;\n"]}
|
|
@@ -13,7 +13,7 @@ export declare const panelThemeRecipeMeta: {
|
|
|
13
13
|
readonly type: "token";
|
|
14
14
|
readonly tokenFamily: "spacing";
|
|
15
15
|
readonly label: "Padding";
|
|
16
|
-
readonly
|
|
16
|
+
readonly description: "When unset, Panel keeps Card compact-aware spacing.";
|
|
17
17
|
};
|
|
18
18
|
readonly radius: {
|
|
19
19
|
readonly type: "token";
|
|
@@ -1 +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,
|
|
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,WAAW,EAAE,qDAAqD;SACnE;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 description: 'When unset, Panel keeps Card compact-aware spacing.',\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,aAAa;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/panel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,aAAa;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/panel/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface PanelProps extends ZoraBaseProps {\n title?: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: React.ReactNode;\n actions?: React.ReactNode;\n footer?: React.ReactNode;\n children?: React.ReactNode;\n tone?: ZoraCardTone;\n compact?: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/panel/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface PanelProps extends ZoraBaseProps {\n title?: React.ReactNode;\n description?: React.ReactNode;\n eyebrow?: React.ReactNode;\n actions?: React.ReactNode;\n footer?: React.ReactNode;\n children?: React.ReactNode;\n tone?: ZoraCardTone;\n compact?: boolean;\n padding?: string;\n radius?: string;\n}\n"]}
|
|
@@ -1,20 +1,12 @@
|
|
|
1
|
+
import type { ThemeConfig } from '@ankhorage/contracts';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import type { ZoraTheme, ZoraThemeMode } from './types';
|
|
3
4
|
export interface ZoraProviderProps {
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
theme?: ZoraTheme;
|
|
7
|
+
themeConfig?: ThemeConfig;
|
|
6
8
|
initialMode?: ZoraThemeMode;
|
|
7
9
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
*
|
|
11
|
-
* Wrap an app with `ZoraProvider` once near the root so components, patterns,
|
|
12
|
-
* layouts, and theme hooks resolve the same design tokens and color mode.
|
|
13
|
-
*
|
|
14
|
-
* @example App provider
|
|
15
|
-
* ```tsx
|
|
16
|
-
* <ZoraProvider initialMode="light"><App /></ZoraProvider>
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
export declare function ZoraProvider({ children, theme, initialMode, }: ZoraProviderProps): React.JSX.Element;
|
|
10
|
+
/** Installs the ZORA theme runtime and underlying Surface theme provider. */
|
|
11
|
+
export declare function ZoraProvider({ children, theme, themeConfig, initialMode, }: ZoraProviderProps): React.JSX.Element;
|
|
20
12
|
//# sourceMappingURL=ZoraProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAW,EACX,WAAqB,GACtB,EAAE,iBAAiB,qBAcnB"}
|
|
@@ -3,21 +3,12 @@ import React from 'react';
|
|
|
3
3
|
import { createZoraThemeConfig } from './createZoraThemeConfig';
|
|
4
4
|
import { zoraDefaultTheme } from './zoraDefaultTheme';
|
|
5
5
|
import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* layouts, and theme hooks resolve the same design tokens and color mode.
|
|
11
|
-
*
|
|
12
|
-
* @example App provider
|
|
13
|
-
* ```tsx
|
|
14
|
-
* <ZoraProvider initialMode="light"><App /></ZoraProvider>
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
export function ZoraProvider({ children, theme = zoraDefaultTheme, initialMode = 'light', }) {
|
|
18
|
-
const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);
|
|
6
|
+
/** Installs the ZORA theme runtime and underlying Surface theme provider. */
|
|
7
|
+
export function ZoraProvider({ children, theme = zoraDefaultTheme, themeConfig, initialMode = 'light', }) {
|
|
8
|
+
const resolvedConfig = React.useMemo(() => themeConfig ?? createZoraThemeConfig(theme), [theme, themeConfig]);
|
|
9
|
+
const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);
|
|
19
10
|
return (<ZoraThemeRuntimeContext.Provider value={runtimeValue}>
|
|
20
|
-
<ThemeProvider initialConfig={
|
|
11
|
+
<ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>
|
|
21
12
|
{children}
|
|
22
13
|
</ThemeProvider>
|
|
23
14
|
</ZoraThemeRuntimeContext.Provider>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AASpE,6EAA6E;AAC7E,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,EACX,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,WAAW,IAAI,qBAAqB,CAAC,KAAK,CAAC,EACjD,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACrE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import type { ThemeConfig } from '@ankhorage/contracts';\nimport { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n children: React.ReactNode;\n theme?: ZoraTheme;\n themeConfig?: ThemeConfig;\n initialMode?: ZoraThemeMode;\n}\n\n/** Installs the ZORA theme runtime and underlying Surface theme provider. */\nexport function ZoraProvider({\n children,\n theme = zoraDefaultTheme,\n themeConfig,\n initialMode = 'light',\n}: ZoraProviderProps) {\n const resolvedConfig = React.useMemo(\n () => themeConfig ?? createZoraThemeConfig(theme),\n [theme, themeConfig],\n );\n const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);\n\n return (\n <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>\n {children}\n </ThemeProvider>\n </ZoraThemeRuntimeContext.Provider>\n );\n}\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ZoraThemeId } from './types';
|
|
2
2
|
interface ZoraThemeRuntime {
|
|
3
|
-
sourceTheme: ZoraTheme;
|
|
4
3
|
themeId: ZoraThemeId;
|
|
5
4
|
}
|
|
6
5
|
export declare const ZoraThemeRuntimeContext: import("react").Context<ZoraThemeRuntime>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZoraThemeRuntimeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ZoraThemeRuntimeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,2CAElC,CAAC;AAEH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAEtD"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
2
|
import { zoraDefaultTheme } from './zoraDefaultTheme';
|
|
3
3
|
export const ZoraThemeRuntimeContext = createContext({
|
|
4
|
-
sourceTheme: zoraDefaultTheme,
|
|
5
4
|
themeId: zoraDefaultTheme.id,
|
|
6
5
|
});
|
|
7
6
|
export function useZoraThemeRuntime() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZoraThemeRuntimeContext.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ZoraThemeRuntimeContext.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeRuntimeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAmB;IACrE,OAAO,EAAE,gBAAgB,CAAC,EAAE;CAC7B,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,uBAAuB,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ZoraThemeId } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\n\ninterface ZoraThemeRuntime {\n themeId: ZoraThemeId;\n}\n\nexport const ZoraThemeRuntimeContext = createContext<ZoraThemeRuntime>({\n themeId: zoraDefaultTheme.id,\n});\n\nexport function useZoraThemeRuntime(): ZoraThemeRuntime {\n return useContext(ZoraThemeRuntimeContext);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAmCD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,mBAAmB,mSAO9E"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
|
-
import { createZoraThemeConfig } from './createZoraThemeConfig';
|
|
4
3
|
import { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';
|
|
5
4
|
import { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
|
|
6
5
|
function ZoraThemeScopeInner({ children, themeId, mode }) {
|
|
@@ -12,9 +11,8 @@ function ZoraThemeScopeInner({ children, themeId, mode }) {
|
|
|
12
11
|
inheritedThemeId: parentRuntime.themeId,
|
|
13
12
|
});
|
|
14
13
|
const scopedMode = mode ?? parentSurface.mode;
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
const scopedTheme = useMemo(() => createTheme(surfaceConfig, scopedMode, activeFontId), [surfaceConfig, scopedMode, activeFontId]);
|
|
14
|
+
const sourceConfig = parentSurface.theme.config;
|
|
15
|
+
const scopedTheme = useMemo(() => createTheme(sourceConfig, scopedMode, activeFontId), [sourceConfig, scopedMode, activeFontId]);
|
|
18
16
|
const scopedSurfaceValue = useMemo(() => ({
|
|
19
17
|
theme: scopedTheme,
|
|
20
18
|
mode: scopedMode,
|
|
@@ -22,18 +20,14 @@ function ZoraThemeScopeInner({ children, themeId, mode }) {
|
|
|
22
20
|
setThemeConfig: parentSurface.setThemeConfig,
|
|
23
21
|
_hasProvider: true,
|
|
24
22
|
}), [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme]);
|
|
25
|
-
const scopedRuntimeValue = useMemo(() => ({
|
|
26
|
-
sourceTheme: parentRuntime.sourceTheme,
|
|
27
|
-
themeId: scopedThemeId,
|
|
28
|
-
}), [parentRuntime.sourceTheme, scopedThemeId]);
|
|
23
|
+
const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);
|
|
29
24
|
return (<ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>
|
|
30
25
|
<ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>
|
|
31
26
|
</ZoraThemeRuntimeContext.Provider>);
|
|
32
27
|
}
|
|
33
28
|
export function ZoraThemeScope({ children, themeId, mode }) {
|
|
34
|
-
if (mode === undefined && themeId === undefined)
|
|
29
|
+
if (mode === undefined && themeId === undefined)
|
|
35
30
|
return children;
|
|
36
|
-
}
|
|
37
31
|
return (<ZoraThemeScopeInner mode={mode} themeId={themeId}>
|
|
38
32
|
{children}
|
|
39
33
|
</ZoraThemeScopeInner>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/ZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQzF,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC3E,MAAM,aAAa,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,mBAAmB,EAAE,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,aAAa,GAAG,wBAAwB,CAAC;QAC7C,cAAc,EAAE,OAAO;QACvB,gBAAgB,EAAE,aAAa,CAAC,OAAO;KACxC,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC;IAC9C,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;IAChD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,EACzD,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,CACzC,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,cAAc,EAAE,aAAa,CAAC,cAAc;QAC5C,YAAY,EAAE,IAAI;KACnB,CAAC,EACF,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE,UAAU,EAAE,WAAW,CAAC,CAC/E,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAExF,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC1D;MAAA,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,QAAQ,CACrF;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAuB;IAC7E,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IACjE,OAAO,CACL,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAChD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAC;AACJ,CAAC","sourcesContent":["import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';\nimport React, { useMemo } from 'react';\n\nimport { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';\nimport type { ZoraThemeId, ZoraThemeMode } from './types';\nimport { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraThemeScopeProps {\n children: React.ReactNode;\n themeId?: ZoraThemeId;\n mode?: ZoraThemeMode;\n}\n\nfunction ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {\n const parentSurface = useTheme();\n const parentRuntime = useZoraThemeRuntime();\n const { activeFontId } = useFontContext();\n const scopedThemeId = resolveZoraScopedThemeId({\n desiredThemeId: themeId,\n inheritedThemeId: parentRuntime.themeId,\n });\n const scopedMode = mode ?? parentSurface.mode;\n const sourceConfig = parentSurface.theme.config;\n const scopedTheme = useMemo(\n () => createTheme(sourceConfig, scopedMode, activeFontId),\n [sourceConfig, scopedMode, activeFontId],\n );\n const scopedSurfaceValue = useMemo(\n () => ({\n theme: scopedTheme,\n mode: scopedMode,\n setMode: parentSurface.setMode,\n setThemeConfig: parentSurface.setThemeConfig,\n _hasProvider: true,\n }),\n [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],\n );\n const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);\n\n return (\n <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>\n <ThemeContext.Provider value={scopedSurfaceValue}>{children}</ThemeContext.Provider>\n </ZoraThemeRuntimeContext.Provider>\n );\n}\n\nexport function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {\n if (mode === undefined && themeId === undefined) return children;\n return (\n <ZoraThemeScopeInner mode={mode} themeId={themeId}>\n {children}\n </ZoraThemeScopeInner>\n );\n}\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ThemeConfig, ThemeRecipeOverrideValue } from '@ankhorage/contracts';
|
|
2
|
+
interface ZoraThemeRecipeRuntimeTheme {
|
|
3
|
+
readonly config: ThemeConfig;
|
|
4
|
+
readonly colors: object;
|
|
5
|
+
readonly spacing: object;
|
|
6
|
+
readonly radii: object;
|
|
7
|
+
readonly shadows: object;
|
|
8
|
+
readonly typography: {
|
|
9
|
+
readonly sizes: object;
|
|
10
|
+
readonly weights: object;
|
|
11
|
+
readonly headings: object;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export declare function resolveZoraThemeRecipe(theme: ZoraThemeRecipeRuntimeTheme, recipeName: string): Readonly<Record<string, ThemeRecipeOverrideValue>>;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=resolveZoraThemeRecipe.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveZoraThemeRecipe.d.ts","sourceRoot":"","sources":["../../src/theme/resolveZoraThemeRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAKlF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,EAAE;QACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;KAC3B,CAAC;CACH;AAID,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,EAClC,UAAU,EAAE,MAAM,GACjB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC,CAqBpD"}
|