@ankhorage/zora 1.5.1 → 2.0.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 +23 -0
- package/README.md +125 -123
- package/dist/components/app-bar/AppBar.js +4 -4
- package/dist/components/app-bar/AppBar.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +19 -9
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/types.d.ts +2 -2
- package/dist/components/avatar/types.d.ts.map +1 -1
- package/dist/components/avatar/types.js.map +1 -1
- package/dist/components/avatar-group/AvatarGroup.js +2 -2
- package/dist/components/avatar-group/AvatarGroup.js.map +1 -1
- package/dist/components/avatar-group/types.d.ts +2 -2
- package/dist/components/avatar-group/types.d.ts.map +1 -1
- package/dist/components/avatar-group/types.js.map +1 -1
- package/dist/components/badge/Badge.js +3 -3
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/types.d.ts +4 -4
- package/dist/components/badge/types.d.ts.map +1 -1
- package/dist/components/badge/types.js.map +1 -1
- package/dist/components/button/Button.js +3 -3
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/meta.d.ts +7 -7
- package/dist/components/button/meta.d.ts.map +1 -1
- package/dist/components/button/meta.js +8 -7
- package/dist/components/button/meta.js.map +1 -1
- package/dist/components/button/types.d.ts +4 -4
- package/dist/components/button/types.d.ts.map +1 -1
- package/dist/components/button/types.js.map +1 -1
- package/dist/components/card/Card.js +2 -2
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/checkbox/CheckboxGroup.js +5 -5
- package/dist/components/checkbox/CheckboxGroup.js.map +1 -1
- package/dist/components/checkbox/types.d.ts +1 -1
- package/dist/components/checkbox/types.d.ts.map +1 -1
- package/dist/components/checkbox/types.js.map +1 -1
- package/dist/components/chip/Chip.d.ts.map +1 -1
- package/dist/components/chip/Chip.js +9 -10
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip/resolveChipColors.d.ts +3 -3
- package/dist/components/chip/resolveChipColors.d.ts.map +1 -1
- package/dist/components/chip/resolveChipColors.js +14 -4
- package/dist/components/chip/resolveChipColors.js.map +1 -1
- package/dist/components/chip/types.d.ts +2 -2
- package/dist/components/chip/types.d.ts.map +1 -1
- package/dist/components/chip/types.js.map +1 -1
- package/dist/components/chip-group/ChipGroup.js +2 -2
- package/dist/components/chip-group/ChipGroup.js.map +1 -1
- package/dist/components/chip-group/types.d.ts +2 -2
- package/dist/components/chip-group/types.d.ts.map +1 -1
- package/dist/components/chip-group/types.js.map +1 -1
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/form/FormError.js +1 -1
- package/dist/components/form/FormError.js.map +1 -1
- package/dist/components/form/FormField.js +1 -1
- package/dist/components/form/FormField.js.map +1 -1
- package/dist/components/heading/Heading.d.ts.map +1 -1
- package/dist/components/heading/Heading.js +5 -3
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/heading/index.d.ts +1 -1
- package/dist/components/heading/index.d.ts.map +1 -1
- package/dist/components/heading/index.js.map +1 -1
- package/dist/components/heading/meta.d.ts +9 -3
- package/dist/components/heading/meta.d.ts.map +1 -1
- package/dist/components/heading/meta.js +10 -3
- package/dist/components/heading/meta.js.map +1 -1
- package/dist/components/heading/resolveHeadingRecipe.d.ts +4 -3
- package/dist/components/heading/resolveHeadingRecipe.d.ts.map +1 -1
- package/dist/components/heading/resolveHeadingRecipe.js +33 -12
- package/dist/components/heading/resolveHeadingRecipe.js.map +1 -1
- package/dist/components/heading/types.d.ts +5 -2
- package/dist/components/heading/types.d.ts.map +1 -1
- package/dist/components/heading/types.js.map +1 -1
- package/dist/components/icon-button/IconButton.js +3 -3
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/icon-button/types.d.ts +3 -3
- package/dist/components/icon-button/types.d.ts.map +1 -1
- package/dist/components/icon-button/types.js.map +1 -1
- package/dist/components/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/media-card/MediaCard.js +2 -2
- package/dist/components/media-card/MediaCard.js.map +1 -1
- package/dist/components/metric-card/MetricCard.js +5 -5
- package/dist/components/metric-card/MetricCard.js.map +1 -1
- package/dist/components/metric-card/types.d.ts +2 -2
- package/dist/components/metric-card/types.d.ts.map +1 -1
- package/dist/components/metric-card/types.js.map +1 -1
- package/dist/components/modal/Modal.js +1 -1
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/progress/Progress.js +2 -2
- package/dist/components/progress/Progress.js.map +1 -1
- package/dist/components/progress/types.d.ts +3 -3
- package/dist/components/progress/types.d.ts.map +1 -1
- package/dist/components/progress/types.js +12 -2
- package/dist/components/progress/types.js.map +1 -1
- package/dist/components/radio/RadioGroup.js +5 -5
- package/dist/components/radio/RadioGroup.js.map +1 -1
- package/dist/components/radio/types.d.ts +1 -1
- package/dist/components/radio/types.d.ts.map +1 -1
- package/dist/components/radio/types.js.map +1 -1
- package/dist/components/rating/Rating.js +2 -2
- package/dist/components/rating/Rating.js.map +1 -1
- package/dist/components/rating/types.d.ts +3 -3
- package/dist/components/rating/types.d.ts.map +1 -1
- package/dist/components/rating/types.js +12 -2
- package/dist/components/rating/types.js.map +1 -1
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +4 -4
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +3 -2
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/text/index.d.ts +1 -1
- package/dist/components/text/index.d.ts.map +1 -1
- package/dist/components/text/index.js.map +1 -1
- package/dist/components/text/meta.d.ts +10 -4
- package/dist/components/text/meta.d.ts.map +1 -1
- package/dist/components/text/meta.js +11 -4
- package/dist/components/text/meta.js.map +1 -1
- package/dist/components/text/resolveTextRecipe.d.ts +4 -3
- package/dist/components/text/resolveTextRecipe.d.ts.map +1 -1
- package/dist/components/text/resolveTextRecipe.js +35 -13
- package/dist/components/text/resolveTextRecipe.js.map +1 -1
- package/dist/components/text/types.d.ts +5 -2
- package/dist/components/text/types.d.ts.map +1 -1
- package/dist/components/text/types.js.map +1 -1
- package/dist/components/toolbar/ToolbarAction.js +1 -1
- package/dist/components/toolbar/ToolbarAction.js.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/internal/colorModel.d.ts +10 -0
- package/dist/internal/colorModel.d.ts.map +1 -0
- package/dist/internal/colorModel.js +25 -0
- package/dist/internal/colorModel.js.map +1 -0
- package/dist/internal/recipes.d.ts +12 -11
- package/dist/internal/recipes.d.ts.map +1 -1
- package/dist/internal/recipes.js +6 -6
- package/dist/internal/recipes.js.map +1 -1
- package/dist/patterns/auth/ForgotPasswordForm.js +2 -2
- package/dist/patterns/auth/ForgotPasswordForm.js.map +1 -1
- package/dist/patterns/auth/OtpForm.js +2 -2
- package/dist/patterns/auth/OtpForm.js.map +1 -1
- package/dist/patterns/auth/SignInForm.js +4 -4
- package/dist/patterns/auth/SignInForm.js.map +1 -1
- package/dist/patterns/auth/SignUpForm.js +2 -2
- package/dist/patterns/auth/SignUpForm.js.map +1 -1
- package/dist/patterns/chat-list-item/ChatListItem.d.ts.map +1 -1
- package/dist/patterns/chat-list-item/ChatListItem.js +6 -6
- package/dist/patterns/chat-list-item/ChatListItem.js.map +1 -1
- package/dist/patterns/chat-list-item/types.d.ts +2 -2
- package/dist/patterns/chat-list-item/types.d.ts.map +1 -1
- package/dist/patterns/chat-list-item/types.js.map +1 -1
- package/dist/patterns/collection-editor/CollectionEditor.js +5 -5
- package/dist/patterns/collection-editor/CollectionEditor.js.map +1 -1
- package/dist/patterns/confirm-dialog/ConfirmDialog.js +3 -3
- package/dist/patterns/confirm-dialog/ConfirmDialog.js.map +1 -1
- package/dist/patterns/confirm-dialog/types.d.ts +3 -3
- package/dist/patterns/confirm-dialog/types.d.ts.map +1 -1
- package/dist/patterns/confirm-dialog/types.js.map +1 -1
- package/dist/patterns/disclosure-section/DisclosureSection.js +1 -1
- package/dist/patterns/disclosure-section/DisclosureSection.js.map +1 -1
- package/dist/patterns/empty-state/EmptyState.js +2 -2
- package/dist/patterns/empty-state/EmptyState.js.map +1 -1
- package/dist/patterns/empty-state/types.d.ts +3 -3
- package/dist/patterns/empty-state/types.d.ts.map +1 -1
- package/dist/patterns/empty-state/types.js.map +1 -1
- package/dist/patterns/form-field/FormField.js +1 -1
- package/dist/patterns/form-field/FormField.js.map +1 -1
- package/dist/patterns/hero/Hero.js +3 -3
- package/dist/patterns/hero/Hero.js.map +1 -1
- package/dist/patterns/hero/types.d.ts +3 -3
- package/dist/patterns/hero/types.d.ts.map +1 -1
- package/dist/patterns/hero/types.js.map +1 -1
- package/dist/patterns/image-preview/ImagePreview.js +1 -1
- package/dist/patterns/image-preview/ImagePreview.js.map +1 -1
- package/dist/patterns/image-upload-field/ImageUploadField.js +7 -7
- package/dist/patterns/image-upload-field/ImageUploadField.js.map +1 -1
- package/dist/patterns/list/ListRow.js +2 -2
- package/dist/patterns/list/ListRow.js.map +1 -1
- package/dist/patterns/message-bubble/MessageBubble.d.ts.map +1 -1
- package/dist/patterns/message-bubble/MessageBubble.js +6 -6
- package/dist/patterns/message-bubble/MessageBubble.js.map +1 -1
- package/dist/patterns/message-bubble/types.d.ts +2 -2
- package/dist/patterns/message-bubble/types.d.ts.map +1 -1
- package/dist/patterns/message-bubble/types.js.map +1 -1
- package/dist/patterns/notice/Notice.js +2 -2
- package/dist/patterns/notice/Notice.js.map +1 -1
- package/dist/patterns/notice/types.d.ts +2 -2
- package/dist/patterns/notice/types.d.ts.map +1 -1
- package/dist/patterns/notice/types.js.map +1 -1
- package/dist/patterns/post-card/PostCard.js +4 -4
- package/dist/patterns/post-card/PostCard.js.map +1 -1
- package/dist/patterns/post-card/types.d.ts +2 -2
- package/dist/patterns/post-card/types.d.ts.map +1 -1
- package/dist/patterns/post-card/types.js.map +1 -1
- package/dist/patterns/section-header/SectionHeader.js +2 -2
- package/dist/patterns/section-header/SectionHeader.js.map +1 -1
- package/dist/patterns/settings-row/SettingsRow.js +1 -1
- package/dist/patterns/settings-row/SettingsRow.js.map +1 -1
- package/dist/patterns/theme-composer/ThemeComposer.js +14 -14
- package/dist/patterns/theme-composer/ThemeComposer.js.map +1 -1
- package/dist/patterns/tile-grid/PaletteItem.js +1 -1
- package/dist/patterns/tile-grid/PaletteItem.js.map +1 -1
- package/dist/patterns/timeline/Timeline.d.ts.map +1 -1
- package/dist/patterns/timeline/Timeline.js +14 -4
- package/dist/patterns/timeline/Timeline.js.map +1 -1
- package/dist/patterns/timeline/types.d.ts +2 -2
- package/dist/patterns/timeline/types.d.ts.map +1 -1
- package/dist/patterns/timeline/types.js.map +1 -1
- package/dist/patterns/tree-view/TreeItem.js +1 -1
- package/dist/patterns/tree-view/TreeItem.js.map +1 -1
- package/package.json +2 -2
- package/src/components/app-bar/AppBar.tsx +6 -6
- package/src/components/avatar/Avatar.tsx +21 -11
- package/src/components/avatar/types.ts +2 -2
- package/src/components/avatar-group/AvatarGroup.tsx +2 -2
- package/src/components/avatar-group/types.ts +2 -2
- package/src/components/badge/Badge.tsx +4 -4
- package/src/components/badge/types.ts +4 -4
- package/src/components/button/Button.tsx +4 -4
- package/src/components/button/meta.ts +8 -7
- package/src/components/button/types.ts +4 -4
- package/src/components/card/Card.tsx +2 -2
- package/src/components/checkbox/CheckboxGroup.tsx +6 -6
- package/src/components/checkbox/types.ts +1 -1
- package/src/components/chip/Chip.tsx +9 -10
- package/src/components/chip/resolveChipColors.ts +16 -6
- package/src/components/chip/types.ts +2 -2
- package/src/components/chip-group/ChipGroup.tsx +2 -2
- package/src/components/chip-group/types.ts +2 -2
- package/src/components/drawer/Drawer.tsx +1 -1
- package/src/components/form/FormError.tsx +1 -1
- package/src/components/form/FormField.tsx +1 -1
- package/src/components/heading/Heading.tsx +6 -3
- package/src/components/heading/index.ts +2 -1
- package/src/components/heading/meta.ts +10 -3
- package/src/components/heading/resolveHeadingRecipe.test.ts +13 -10
- package/src/components/heading/resolveHeadingRecipe.ts +58 -15
- package/src/components/heading/types.ts +5 -10
- package/src/components/icon-button/IconButton.tsx +4 -4
- package/src/components/icon-button/types.ts +3 -3
- package/src/components/input/Input.tsx +2 -2
- package/src/components/media-card/MediaCard.tsx +2 -2
- package/src/components/metric-card/MetricCard.tsx +6 -6
- package/src/components/metric-card/types.ts +2 -2
- package/src/components/modal/Modal.tsx +1 -1
- package/src/components/progress/Progress.tsx +2 -2
- package/src/components/progress/types.ts +14 -4
- package/src/components/radio/RadioGroup.tsx +6 -6
- package/src/components/radio/types.ts +1 -1
- package/src/components/rating/Rating.tsx +2 -2
- package/src/components/rating/types.ts +14 -4
- package/src/components/tabs/Tabs.tsx +11 -7
- package/src/components/text/Text.tsx +4 -2
- package/src/components/text/index.ts +8 -1
- package/src/components/text/meta.ts +11 -4
- package/src/components/text/resolveTextRecipe.test.ts +18 -14
- package/src/components/text/resolveTextRecipe.ts +42 -15
- package/src/components/text/types.ts +5 -10
- package/src/components/toolbar/ToolbarAction.tsx +2 -2
- package/src/index.ts +22 -2
- package/src/internal/colorModel.ts +39 -0
- package/src/internal/recipes.test.ts +2 -2
- package/src/internal/recipes.ts +18 -18
- package/src/patterns/auth/ForgotPasswordForm.tsx +2 -2
- package/src/patterns/auth/OtpForm.tsx +2 -2
- package/src/patterns/auth/SignInForm.tsx +4 -4
- package/src/patterns/auth/SignUpForm.tsx +2 -2
- package/src/patterns/chat-list-item/ChatListItem.tsx +7 -6
- package/src/patterns/chat-list-item/types.ts +2 -2
- package/src/patterns/collection-editor/CollectionEditor.tsx +6 -6
- package/src/patterns/confirm-dialog/ConfirmDialog.tsx +4 -4
- package/src/patterns/confirm-dialog/types.ts +3 -3
- package/src/patterns/disclosure-section/DisclosureSection.tsx +2 -2
- package/src/patterns/empty-state/EmptyState.tsx +4 -4
- package/src/patterns/empty-state/types.ts +3 -3
- package/src/patterns/form-field/FormField.tsx +1 -1
- package/src/patterns/hero/Hero.tsx +4 -4
- package/src/patterns/hero/types.ts +3 -3
- package/src/patterns/image-preview/ImagePreview.tsx +1 -1
- package/src/patterns/image-upload-field/ImageUploadField.tsx +8 -8
- package/src/patterns/list/ListRow.tsx +2 -2
- package/src/patterns/message-bubble/MessageBubble.tsx +10 -6
- package/src/patterns/message-bubble/types.ts +2 -2
- package/src/patterns/notice/Notice.tsx +2 -2
- package/src/patterns/notice/types.ts +2 -2
- package/src/patterns/post-card/PostCard.tsx +5 -5
- package/src/patterns/post-card/types.ts +2 -2
- package/src/patterns/section-header/SectionHeader.tsx +2 -2
- package/src/patterns/settings-row/SettingsRow.tsx +1 -1
- package/src/patterns/theme-composer/ThemeComposer.tsx +15 -15
- package/src/patterns/tile-grid/PaletteItem.tsx +1 -1
- package/src/patterns/timeline/Timeline.tsx +15 -5
- package/src/patterns/timeline/types.ts +2 -2
- package/src/patterns/tree-view/TreeItem.tsx +1 -1
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import type { SurfaceTheme } from '@ankhorage/surface';
|
|
2
2
|
import type { TextStyle } from 'react-native';
|
|
3
|
-
import type { HeadingAlign, HeadingLevel, HeadingSize,
|
|
3
|
+
import type { HeadingAlign, HeadingColor, HeadingEmphasis, HeadingLevel, HeadingSize, HeadingWeight } from './types';
|
|
4
4
|
interface ResolveHeadingRecipeOptions {
|
|
5
5
|
level: HeadingLevel;
|
|
6
6
|
size?: HeadingSize;
|
|
7
|
-
|
|
7
|
+
color?: HeadingColor;
|
|
8
|
+
emphasis?: HeadingEmphasis;
|
|
8
9
|
align?: HeadingAlign;
|
|
9
10
|
weight?: HeadingWeight;
|
|
10
11
|
italic?: boolean;
|
|
11
12
|
}
|
|
12
13
|
export declare function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize;
|
|
13
|
-
export declare function resolveHeadingRecipe(theme: SurfaceTheme, { align, italic, level, size,
|
|
14
|
+
export declare function resolveHeadingRecipe(theme: SurfaceTheme, { align, color, emphasis, italic, level, size, weight, }: ResolveHeadingRecipeOptions): TextStyle;
|
|
14
15
|
export {};
|
|
15
16
|
//# sourceMappingURL=resolveHeadingRecipe.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveHeadingRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"resolveHeadingRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,YAAY,GAAG,WAAW,CAe5E;AAwGD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,YAAY,EACnB,EACE,KAAK,EACL,KAAK,EACL,QAAoB,EACpB,MAAc,EACd,KAAK,EACL,IAAI,EACJ,MAAM,GACP,EAAE,2BAA2B,GAC7B,SAAS,CAcX"}
|
|
@@ -46,22 +46,43 @@ function resolveSizeRecipe(theme, size) {
|
|
|
46
46
|
weight: heading.weight,
|
|
47
47
|
};
|
|
48
48
|
}
|
|
49
|
-
function
|
|
50
|
-
switch (
|
|
49
|
+
function resolveRoleSemantics(theme, color) {
|
|
50
|
+
switch (color) {
|
|
51
|
+
case 'secondary':
|
|
52
|
+
return theme.semantics.secondary;
|
|
53
|
+
case 'tertiary':
|
|
54
|
+
return theme.semantics.accent;
|
|
55
|
+
case 'quaternary':
|
|
56
|
+
return theme.semantics.highlight;
|
|
57
|
+
case 'neutral':
|
|
58
|
+
return theme.semantics.action.neutral;
|
|
59
|
+
case 'error':
|
|
60
|
+
return theme.semantics.error;
|
|
61
|
+
case 'info':
|
|
62
|
+
return theme.semantics.info;
|
|
63
|
+
case 'danger':
|
|
64
|
+
return theme.semantics.action.danger;
|
|
65
|
+
case 'success':
|
|
66
|
+
return theme.semantics.success;
|
|
67
|
+
case 'warning':
|
|
68
|
+
return theme.semantics.warning;
|
|
69
|
+
case 'primary':
|
|
70
|
+
default:
|
|
71
|
+
return theme.semantics.action.primary;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function resolveHeadingColor(theme, emphasis, color) {
|
|
75
|
+
if (color) {
|
|
76
|
+
const role = resolveRoleSemantics(theme, color);
|
|
77
|
+
return emphasis === 'inverse' ? role.onSolidText : role.base;
|
|
78
|
+
}
|
|
79
|
+
switch (emphasis) {
|
|
51
80
|
case 'muted':
|
|
52
81
|
return theme.semantics.content.muted;
|
|
53
82
|
case 'subtle':
|
|
54
83
|
return theme.semantics.content.subtle;
|
|
55
84
|
case 'inverse':
|
|
56
85
|
return theme.semantics.content.inverse;
|
|
57
|
-
case 'primary':
|
|
58
|
-
return theme.semantics.brand.base;
|
|
59
|
-
case 'danger':
|
|
60
|
-
return theme.semantics.danger.base;
|
|
61
|
-
case 'success':
|
|
62
|
-
return theme.semantics.success.base;
|
|
63
|
-
case 'warning':
|
|
64
|
-
return theme.semantics.warning.base;
|
|
65
86
|
case 'default':
|
|
66
87
|
default:
|
|
67
88
|
return theme.semantics.content.default;
|
|
@@ -73,11 +94,11 @@ function resolveWeight(theme, weight) {
|
|
|
73
94
|
function resolveFontFamily({ theme, weight, italic, }) {
|
|
74
95
|
return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];
|
|
75
96
|
}
|
|
76
|
-
export function resolveHeadingRecipe(theme, { align, italic = false, level, size,
|
|
97
|
+
export function resolveHeadingRecipe(theme, { align, color, emphasis = 'default', italic = false, level, size, weight, }) {
|
|
77
98
|
const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));
|
|
78
99
|
const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);
|
|
79
100
|
return {
|
|
80
|
-
color:
|
|
101
|
+
color: resolveHeadingColor(theme, emphasis, color),
|
|
81
102
|
elevation: 0,
|
|
82
103
|
fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),
|
|
83
104
|
fontSize: recipe.fontSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolveHeadingRecipe.js","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"resolveHeadingRecipe.js","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FontWeight, RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type {\n HeadingAlign,\n HeadingColor,\n HeadingEmphasis,\n HeadingLevel,\n HeadingSize,\n HeadingWeight,\n} from './types';\n\ninterface ResolveHeadingRecipeOptions {\n level: HeadingLevel;\n size?: HeadingSize;\n color?: HeadingColor;\n emphasis?: HeadingEmphasis;\n align?: HeadingAlign;\n weight?: HeadingWeight;\n italic?: boolean;\n}\n\ninterface HeadingRecipe {\n fontSize: number;\n lineHeight: number;\n weight: HeadingWeight;\n}\n\nexport function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize {\n switch (level) {\n case 1:\n return 'h1';\n case 2:\n return 'h2';\n case 3:\n return 'h3';\n case 4:\n return 'h4';\n case 5:\n return 'h5';\n case 6:\n return 'h6';\n }\n}\n\nfunction resolveHeadingLevelFromSize(size: Exclude<HeadingSize, 'display'>): HeadingLevel {\n switch (size) {\n case 'h1':\n return 1;\n case 'h2':\n return 2;\n case 'h3':\n return 3;\n case 'h4':\n return 4;\n case 'h5':\n return 5;\n case 'h6':\n return 6;\n }\n}\n\nfunction resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecipe {\n if (size === 'display') {\n const fontSize = theme.typography.sizes['3xl'];\n\n return {\n fontSize,\n lineHeight: fontSize + 8,\n weight: 'bold',\n };\n }\n\n const heading = theme.typography.headings[resolveHeadingLevelFromSize(size)];\n\n return {\n fontSize: heading.size,\n lineHeight: heading.lineHeight,\n weight: heading.weight,\n };\n}\n\nfunction resolveRoleSemantics(theme: SurfaceTheme, color: HeadingColor): RoleSemantics {\n switch (color) {\n case 'secondary':\n return theme.semantics.secondary;\n case 'tertiary':\n return theme.semantics.accent;\n case 'quaternary':\n return theme.semantics.highlight;\n case 'neutral':\n return theme.semantics.action.neutral;\n case 'error':\n return theme.semantics.error;\n case 'info':\n return theme.semantics.info;\n case 'danger':\n return theme.semantics.action.danger;\n case 'success':\n return theme.semantics.success;\n case 'warning':\n return theme.semantics.warning;\n case 'primary':\n default:\n return theme.semantics.action.primary;\n }\n}\n\nfunction resolveHeadingColor(\n theme: SurfaceTheme,\n emphasis: HeadingEmphasis,\n color?: HeadingColor,\n): string {\n if (color) {\n const role = resolveRoleSemantics(theme, color);\n return emphasis === 'inverse' ? role.onSolidText : role.base;\n }\n\n switch (emphasis) {\n case 'muted':\n return theme.semantics.content.muted;\n case 'subtle':\n return theme.semantics.content.subtle;\n case 'inverse':\n return theme.semantics.content.inverse;\n case 'default':\n default:\n return theme.semantics.content.default;\n }\n}\n\nfunction resolveWeight(theme: SurfaceTheme, weight: HeadingWeight): FontWeight {\n return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n theme,\n weight,\n italic,\n}: {\n theme: SurfaceTheme;\n weight: FontWeight;\n italic: boolean;\n}): string | undefined {\n return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nexport function resolveHeadingRecipe(\n theme: SurfaceTheme,\n {\n align,\n color,\n emphasis = 'default',\n italic = false,\n level,\n size,\n weight,\n }: ResolveHeadingRecipeOptions,\n): TextStyle {\n const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));\n const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);\n\n return {\n color: resolveHeadingColor(theme, emphasis, color),\n elevation: 0,\n fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),\n fontSize: recipe.fontSize,\n fontStyle: italic ? 'italic' : 'normal',\n fontWeight: resolvedWeight,\n lineHeight: recipe.lineHeight,\n textAlign: align,\n };\n}\n"]}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import type { Responsive } from '@ankhorage/surface';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { AccessibilityRole, TextStyle } from 'react-native';
|
|
4
|
+
import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
|
|
4
5
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
6
|
export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
6
7
|
export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
7
|
-
export type
|
|
8
|
+
export type HeadingColor = ZoraColor;
|
|
9
|
+
export type HeadingEmphasis = ZoraEmphasis;
|
|
8
10
|
export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
|
|
9
11
|
export type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
|
|
10
12
|
export interface HeadingProps extends ZoraBaseProps {
|
|
@@ -13,7 +15,8 @@ export interface HeadingProps extends ZoraBaseProps {
|
|
|
13
15
|
i18nKey?: string;
|
|
14
16
|
level?: HeadingLevel;
|
|
15
17
|
size?: Responsive<HeadingSize>;
|
|
16
|
-
|
|
18
|
+
color?: Responsive<HeadingColor>;
|
|
19
|
+
emphasis?: Responsive<HeadingEmphasis>;
|
|
17
20
|
align?: Responsive<HeadingAlign>;
|
|
18
21
|
weight?: Responsive<HeadingWeight>;
|
|
19
22
|
italic?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9E,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9E,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC;AACrC,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Responsive } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { AccessibilityRole, TextStyle } from 'react-native';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/heading/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Responsive } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { AccessibilityRole, TextStyle } from 'react-native';\n\nimport type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type HeadingColor = ZoraColor;\nexport type HeadingEmphasis = ZoraEmphasis;\n\nexport type HeadingAlign = NonNullable<TextStyle['textAlign']>;\n\nexport type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';\n\nexport interface HeadingProps extends ZoraBaseProps {\n children?: React.ReactNode;\n text?: string;\n i18nKey?: string;\n level?: HeadingLevel;\n size?: Responsive<HeadingSize>;\n color?: Responsive<HeadingColor>;\n emphasis?: Responsive<HeadingEmphasis>;\n align?: Responsive<HeadingAlign>;\n weight?: Responsive<HeadingWeight>;\n italic?: boolean;\n numberOfLines?: number;\n ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n selectable?: boolean;\n accessibilityLabel?: string;\n accessibilityHint?: string;\n accessibilityRole?: AccessibilityRole;\n nativeID?: string;\n}\n"]}
|
|
@@ -2,9 +2,9 @@ import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { resolveButtonRecipe } from '../../internal/recipes';
|
|
4
4
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
5
|
-
function IconButtonInner({ themeId: _themeId, mode: _mode, icon, label,
|
|
6
|
-
const recipe = resolveButtonRecipe({
|
|
7
|
-
return (<SurfaceIconButton {...props} icon={icon} accessibilityLabel={label}
|
|
5
|
+
function IconButtonInner({ themeId: _themeId, mode: _mode, icon, label, variant = 'ghost', color = 'neutral', size = 'm', ...props }) {
|
|
6
|
+
const recipe = resolveButtonRecipe({ color, variant, size });
|
|
7
|
+
return (<SurfaceIconButton {...props} icon={icon} accessibilityLabel={label} color={recipe.color} size={recipe.size} variant={recipe.variant}/>);
|
|
8
8
|
}
|
|
9
9
|
export const IconButton = withZoraThemeScope(IconButtonInner);
|
|
10
10
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,EACV,GAAG,KAAK,EACQ;IAChB,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,iBAAiB,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { IconButton as SurfaceIconButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { IconButtonProps } from './types';\n\nfunction IconButtonInner({\n themeId: _themeId,\n mode: _mode,\n icon,\n label,\n variant = 'ghost',\n color = 'neutral',\n size = 'm',\n ...props\n}: IconButtonProps) {\n const recipe = resolveButtonRecipe({ color, variant, size });\n\n return (\n <SurfaceIconButton\n {...props}\n icon={icon}\n accessibilityLabel={label}\n color={recipe.color}\n size={recipe.size}\n variant={recipe.variant}\n />\n );\n}\n\nexport const IconButton = withZoraThemeScope(IconButtonInner);\n"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { ButtonIconSpec } from '@ankhorage/surface';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
|
|
3
3
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
4
|
export interface IconButtonProps extends ZoraBaseProps {
|
|
5
5
|
icon: ButtonIconSpec;
|
|
6
6
|
label: string;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
variant?: ZoraButtonVariant;
|
|
8
|
+
color?: ZoraColor;
|
|
9
9
|
size?: ZoraControlSize;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
loading?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\n\nimport type {
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\n\nimport type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface IconButtonProps extends ZoraBaseProps {\n icon: ButtonIconSpec;\n label: string;\n variant?: ZoraButtonVariant;\n color?: ZoraColor;\n size?: ZoraControlSize;\n disabled?: boolean;\n loading?: boolean;\n onPress?: () => void;\n testID?: string;\n}\n"]}
|
|
@@ -8,7 +8,7 @@ function InputInner({ themeId: _themeId, mode: _mode, size = 'l', leadingIcon, t
|
|
|
8
8
|
const { theme } = useZoraTheme();
|
|
9
9
|
const iconSize = resolveIconSize(size);
|
|
10
10
|
const iconColor = theme.semantics.content.muted;
|
|
11
|
-
return (<Surface.TextInput {...props} disabled={disabled} leadingAccessory={leadingIcon ? (<Surface.Icon color={iconColor} name={leadingIcon.name} provider={leadingIcon.provider} size={iconSize}/>) : undefined} readOnly={readOnly} size={size} trailingAccessory={trailingAction ? (<IconButton icon={trailingAction.icon} label={trailingAction.label} disabled={disabled ?? readOnly}
|
|
11
|
+
return (<Surface.TextInput {...props} disabled={disabled} leadingAccessory={leadingIcon ? (<Surface.Icon color={iconColor} name={leadingIcon.name} provider={leadingIcon.provider} size={iconSize}/>) : undefined} readOnly={readOnly} size={size} trailingAccessory={trailingAction ? (<IconButton icon={trailingAction.icon} label={trailingAction.label} disabled={disabled ?? readOnly} variant="ghost" size={size === 'l' ? 'm' : size} color="neutral" onPress={trailingAction.onPress}/>) : trailingIcon ? (<Surface.Icon color={iconColor} name={trailingIcon.name} provider={trailingIcon.provider} size={iconSize}/>) : undefined}/>);
|
|
12
12
|
}
|
|
13
13
|
export const Input = withZoraThemeScope(InputInner);
|
|
14
14
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,GAAG,GAAG,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IAEhD,OAAO,CACL,CAAC,OAAO,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,gBAAgB,CAAC,CACf,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACvB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,iBAAiB,CAAC,CAChB,cAAc,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,KAAK,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAC5B,QAAQ,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC/B,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,GAAG,GAAG,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IAEhD,OAAO,CACL,CAAC,OAAO,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,gBAAgB,CAAC,CACf,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACvB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,iBAAiB,CAAC,CAChB,cAAc,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,KAAK,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAC5B,QAAQ,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC/B,OAAO,CAAC,OAAO,CACf,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAChC,KAAK,CAAC,SAAS,CACf,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,EAChC,CACH,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CACjB,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CACxB,QAAQ,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAChC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,EACD,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import * as Surface from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { IconButton } from '../icon-button';\nimport type { InputProps } from './types';\n\nfunction InputInner({\n themeId: _themeId,\n mode: _mode,\n size = 'l',\n leadingIcon,\n trailingIcon,\n trailingAction,\n disabled,\n readOnly,\n ...props\n}: InputProps) {\n const { theme } = useZoraTheme();\n const iconSize = resolveIconSize(size);\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Surface.TextInput\n {...props}\n disabled={disabled}\n leadingAccessory={\n leadingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={leadingIcon.name}\n provider={leadingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n readOnly={readOnly}\n size={size}\n trailingAccessory={\n trailingAction ? (\n <IconButton\n icon={trailingAction.icon}\n label={trailingAction.label}\n disabled={disabled ?? readOnly}\n variant=\"ghost\"\n size={size === 'l' ? 'm' : size}\n color=\"neutral\"\n onPress={trailingAction.onPress}\n />\n ) : trailingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={trailingIcon.name}\n provider={trailingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n />\n );\n}\n\nexport const Input = withZoraThemeScope(InputInner);\n"]}
|
|
@@ -40,14 +40,14 @@ function MediaCardInner({ themeId: _themeId, mode: _mode, testID, imageSource, i
|
|
|
40
40
|
{hasHeader ? (<Stack align={{ base: 'flex-start', md: 'center' }} direction={{ base: 'column', md: 'row' }} gap="m" justify="space-between">
|
|
41
41
|
<Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
|
|
42
42
|
<Stack gap="xs">
|
|
43
|
-
{eyebrow ? (<Text
|
|
43
|
+
{eyebrow ? (<Text emphasis="muted" variant="caption" weight="semiBold">
|
|
44
44
|
{eyebrow}
|
|
45
45
|
</Text>) : null}
|
|
46
46
|
<Stack gap="xs">
|
|
47
47
|
<Heading level={compact ? 4 : 3}>{title}</Heading>
|
|
48
48
|
{badges ? <Box>{badges}</Box> : null}
|
|
49
49
|
</Stack>
|
|
50
|
-
{description ? (<Text
|
|
50
|
+
{description ? (<Text emphasis="muted" variant="bodySmall">
|
|
51
51
|
{description}
|
|
52
52
|
</Text>) : null}
|
|
53
53
|
</Stack>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaCard.js","sourceRoot":"","sources":["../../../src/components/media-card/MediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,uBAAuB,CAC9B,gBAAiE;IAEjE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;QAChE,OAAO,EAAE,GAAG,CAAC,CAAC;IAChB,CAAC;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,WAAW,EACX,UAAU,EACV,KAAK,EACL,gBAAgB,GAAG,EAAE,GAAG,CAAC,EACzB,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GACQ;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAChC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IACnD,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;IAEtE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CACL,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAC5C;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,GAAG,CAAC,CACP,CAAC;QACJ,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CACjF;QAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAC9D;UAAA,CAAC,KAAK,CACJ,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAC/B,MAAM,CAAC,CAAC,WAAW,CAAC,CACpB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAE7C;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;IAE9F,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,CAEX;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CACd;QAAA,CAAC,WAAW,EAAE,CAEd;;QAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAC5C,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CACzC,GAAG,CAAC,GAAG,CACP,OAAO,CAAC,eAAe,CAEvB;YAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CACxD;cAAA,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;gBAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"MediaCard.js","sourceRoot":"","sources":["../../../src/components/media-card/MediaCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image } from 'react-native';\n\nimport { Box, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { MediaCardProps } from './types';\n\nfunction resolveImageAspectRatio(\n imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,\n) {\n if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {\n return 16 / 9;\n }\n\n return imageAspectRatio;\n}\n\nfunction MediaCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n imageSource,\n imageLabel,\n image,\n imageAspectRatio = 16 / 9,\n title,\n description,\n eyebrow,\n badges,\n actions,\n footer,\n children,\n tone = 'default',\n compact = false,\n onPress,\n}: MediaCardProps) {\n const { theme } = useZoraTheme();\n const gap = compact ? 's' : 'm';\n const isInteractive = Boolean(onPress) && !actions;\n const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);\n\n const renderImage = () => {\n if (image) {\n return (\n <Box radius=\"m\" style={{ overflow: 'hidden' }}>\n {image}\n </Box>\n );\n }\n\n if (!imageSource) {\n return null;\n }\n\n return (\n <Box bg={theme.semantics.neutral.surface} radius=\"m\" style={{ overflow: 'hidden' }}>\n <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>\n <Image\n accessibilityLabel={imageLabel}\n source={imageSource}\n style={{ height: '100%', width: '100%' }}\n />\n </Box>\n </Box>\n );\n };\n\n const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);\n\n return (\n <Card\n compact={compact}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n tone={tone}\n >\n <Stack gap={gap}>\n {renderImage()}\n\n {hasHeader ? (\n <Stack\n align={{ base: 'flex-start', md: 'center' }}\n direction={{ base: 'column', md: 'row' }}\n gap=\"m\"\n justify=\"space-between\"\n >\n <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n <Stack gap=\"xs\">\n {eyebrow ? (\n <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {eyebrow}\n </Text>\n ) : null}\n <Stack gap=\"xs\">\n <Heading level={compact ? 4 : 3}>{title}</Heading>\n {badges ? <Box>{badges}</Box> : null}\n </Stack>\n {description ? (\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n </Box>\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n ) : null}\n\n {children ? <Box>{children}</Box> : null}\n {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </Card>\n );\n}\n\nexport const MediaCard = withZoraThemeScope(MediaCardInner);\n"]}
|
|
@@ -8,10 +8,10 @@ import { Card } from '../card';
|
|
|
8
8
|
import { Heading } from '../heading';
|
|
9
9
|
import { Icon } from '../icon';
|
|
10
10
|
import { Text } from '../text';
|
|
11
|
-
function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value, description, icon, delta,
|
|
11
|
+
function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value, description, icon, delta, deltaColor = 'neutral', actions, tone = 'default', compact = false, onPress, }) {
|
|
12
12
|
const { theme } = useZoraTheme();
|
|
13
13
|
const isInteractive = Boolean(onPress) && !actions;
|
|
14
|
-
const badgeRecipe = resolveBadgeRecipe({
|
|
14
|
+
const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });
|
|
15
15
|
const iconColor = theme.semantics.content.muted;
|
|
16
16
|
return (<Card compact={compact} onPress={isInteractive ? onPress : undefined} testID={testID} tone={tone}>
|
|
17
17
|
<Stack gap={compact ? 's' : 'm'}>
|
|
@@ -19,17 +19,17 @@ function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value,
|
|
|
19
19
|
<Stack flex={1} gap="xs">
|
|
20
20
|
<Inline align="center" gap="xs" wrap="wrap">
|
|
21
21
|
{icon ? (<Icon color={iconColor} name={icon.name} provider={icon.provider} size={resolveIconSize('s')}/>) : null}
|
|
22
|
-
<Text
|
|
22
|
+
<Text emphasis="muted" variant="caption" weight="semiBold">
|
|
23
23
|
{label}
|
|
24
24
|
</Text>
|
|
25
|
-
{delta != null ? (<Badge
|
|
25
|
+
{delta != null ? (<Badge variant={badgeRecipe.variant} size={badgeRecipe.size} color={badgeRecipe.color}>
|
|
26
26
|
{delta}
|
|
27
27
|
</Badge>) : null}
|
|
28
28
|
</Inline>
|
|
29
29
|
|
|
30
30
|
<Heading level={compact ? 3 : 2}>{value}</Heading>
|
|
31
31
|
|
|
32
|
-
{description ? (<Text
|
|
32
|
+
{description ? (<Text emphasis="muted" variant="bodySmall">
|
|
33
33
|
{description}
|
|
34
34
|
</Text>) : null}
|
|
35
35
|
</Stack>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetricCard.js","sourceRoot":"","sources":["../../../src/components/metric-card/MetricCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"MetricCard.js","sourceRoot":"","sources":["../../../src/components/metric-card/MetricCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Box, Inline, Stack } from '../../foundation';\nimport { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Badge } from '../badge';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport type { MetricCardProps } from './types';\n\nfunction MetricCardInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n label,\n value,\n description,\n icon,\n delta,\n deltaColor = 'neutral',\n actions,\n tone = 'default',\n compact = false,\n onPress,\n}: MetricCardProps) {\n const { theme } = useZoraTheme();\n const isInteractive = Boolean(onPress) && !actions;\n\n const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Card\n compact={compact}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n tone={tone}\n >\n <Stack gap={compact ? 's' : 'm'}>\n <Inline align=\"flex-start\" gap=\"m\" justify=\"space-between\">\n <Stack flex={1} gap=\"xs\">\n <Inline align=\"center\" gap=\"xs\" wrap=\"wrap\">\n {icon ? (\n <Icon\n color={iconColor}\n name={icon.name}\n provider={icon.provider}\n size={resolveIconSize('s')}\n />\n ) : null}\n <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {label}\n </Text>\n {delta != null ? (\n <Badge\n variant={badgeRecipe.variant}\n size={badgeRecipe.size}\n color={badgeRecipe.color}\n >\n {delta}\n </Badge>\n ) : null}\n </Inline>\n\n <Heading level={compact ? 3 : 2}>{value}</Heading>\n\n {description ? (\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {actions ? <Box>{actions}</Box> : null}\n </Inline>\n </Stack>\n </Card>\n );\n}\n\nexport const MetricCard = withZoraThemeScope(MetricCardInner);\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ButtonIconSpec } from '@ankhorage/surface';
|
|
2
2
|
import type React from 'react';
|
|
3
|
-
import type { ZoraCardTone,
|
|
3
|
+
import type { ZoraCardTone, ZoraColor } from '../../internal/recipes';
|
|
4
4
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
5
|
export interface MetricCardProps extends ZoraBaseProps {
|
|
6
6
|
label: React.ReactNode;
|
|
@@ -8,7 +8,7 @@ export interface MetricCardProps extends ZoraBaseProps {
|
|
|
8
8
|
description?: React.ReactNode;
|
|
9
9
|
icon?: ButtonIconSpec;
|
|
10
10
|
delta?: React.ReactNode;
|
|
11
|
-
|
|
11
|
+
deltaColor?: ZoraColor;
|
|
12
12
|
actions?: React.ReactNode;
|
|
13
13
|
tone?: ZoraCardTone;
|
|
14
14
|
compact?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone,
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone, ZoraColor } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface MetricCardProps extends ZoraBaseProps {\n label: React.ReactNode;\n value: React.ReactNode;\n description?: React.ReactNode;\n icon?: ButtonIconSpec;\n delta?: React.ReactNode;\n deltaColor?: ZoraColor;\n actions?: React.ReactNode;\n tone?: ZoraCardTone;\n compact?: boolean;\n onPress?: () => void;\n}\n"]}
|
|
@@ -22,7 +22,7 @@ function ModalInner({ themeId: _themeId, mode: _mode, children, title, descripti
|
|
|
22
22
|
<Stack gap="m">
|
|
23
23
|
{hasHeader ? (<Stack gap="xs">
|
|
24
24
|
{title ? <Heading level={3}>{title}</Heading> : null}
|
|
25
|
-
{description ? (<Text
|
|
25
|
+
{description ? (<Text emphasis="muted" variant="bodySmall">
|
|
26
26
|
{description}
|
|
27
27
|
</Text>) : null}
|
|
28
28
|
</Stack>) : null}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,iBAAiB,CAAC,QAAkC;IAC3D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,WAAW,CAAC,GAAG,EAAE;QACtB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,GAAG,KAAK,EACG;IACX,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC;IACvD,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAClD;MAAA,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CACtF;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;cAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;cAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,iBAAiB,CAAC,QAAkC;IAC3D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,WAAW,CAAC,GAAG,EAAE;QACtB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,GAAG,KAAK,EACG;IACX,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC;IACvD,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAClD;MAAA,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CACtF;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;cAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;cAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACxC;kBAAA,CAAC,WAAW,CACd;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;YAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;UAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { Modal as SurfaceModal } from '@ankhorage/surface';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { resolveDialogWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { ModalProps } from './types';\n\nfunction useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {\n const callbackRef = useRef(callback);\n\n useEffect(() => {\n callbackRef.current = callback;\n }, [callback]);\n\n return useCallback(() => {\n callbackRef.current?.();\n }, []);\n}\n\nfunction ModalInner({\n themeId: _themeId,\n mode: _mode,\n children,\n title,\n description,\n footer,\n width = 'default',\n onDismiss,\n ...props\n}: ModalProps) {\n const hasHeader = title != null || description != null;\n const stableOnDismiss = useStableCallback(onDismiss);\n\n return (\n <SurfaceModal {...props} onDismiss={stableOnDismiss}>\n <Box maxWidth={resolveDialogWidth(width)} style={{ alignSelf: 'center', width: '100%' }}>\n <Stack gap=\"m\">\n {hasHeader ? (\n <Stack gap=\"xs\">\n {title ? <Heading level={3}>{title}</Heading> : null}\n {description ? (\n <Text emphasis=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n ) : null}\n {children ? <Box>{children}</Box> : null}\n {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n </Stack>\n </Box>\n </SurfaceModal>\n );\n}\n\nexport const Modal = withZoraThemeScope(ModalInner);\n"]}
|
|
@@ -15,11 +15,11 @@ function resolveProgressHeight(size) {
|
|
|
15
15
|
return 8;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
function ProgressInner({ themeId: _themeId, mode: _mode, testID, value, max = 100,
|
|
18
|
+
function ProgressInner({ themeId: _themeId, mode: _mode, testID, value, max = 100, color = 'primary', size = 'm', }) {
|
|
19
19
|
const { theme } = useZoraTheme();
|
|
20
20
|
const fraction = resolveProgressFraction({ value, max });
|
|
21
21
|
const height = resolveProgressHeight(size);
|
|
22
|
-
const role = resolveProgressRole(theme,
|
|
22
|
+
const role = resolveProgressRole(theme, color);
|
|
23
23
|
return (<Box accessibilityRole="progressbar" bg={theme.semantics.neutral.surface} borderColor={theme.semantics.neutral.divider} borderWidth={1} radius="full" testID={testID} style={{ height, overflow: 'hidden' }}>
|
|
24
24
|
<Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }}/>
|
|
25
25
|
</Box>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAsB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE,SAAS,qBAAqB,CAAC,IAAwC;IACrE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG,CAAC;QACT;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,GAAG,GAAG,GAAG,EACT,
|
|
1
|
+
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAsB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE,SAAS,qBAAqB,CAAC,IAAwC;IACrE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG,CAAC;QACT;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,GAAG,GACI;IACd,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE/C,OAAO,CACL,CAAC,GAAG,CACF,iBAAiB,CAAC,aAAa,CAC/B,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CACpC,WAAW,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,MAAM,CAAC,MAAM,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAEtC;MAAA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG,EAAE,CAAC,EAC7E;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveProgressFraction } from './resolveProgressFraction';\nimport { type ProgressProps, resolveProgressRole } from './types';\n\nfunction resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {\n switch (size) {\n case 's':\n return 4;\n case 'm':\n return 6;\n case 'l':\n default:\n return 8;\n }\n}\n\nfunction ProgressInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n max = 100,\n color = 'primary',\n size = 'm',\n}: ProgressProps) {\n const { theme } = useZoraTheme();\n const fraction = resolveProgressFraction({ value, max });\n const height = resolveProgressHeight(size);\n const role = resolveProgressRole(theme, color);\n\n return (\n <Box\n accessibilityRole=\"progressbar\"\n bg={theme.semantics.neutral.surface}\n borderColor={theme.semantics.neutral.divider}\n borderWidth={1}\n radius=\"full\"\n testID={testID}\n style={{ height, overflow: 'hidden' }}\n >\n <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />\n </Box>\n );\n}\n\nexport const Progress = withZoraThemeScope(ProgressInner);\n"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
|
|
3
3
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
4
|
export interface ProgressProps extends ZoraBaseProps {
|
|
5
5
|
value: number;
|
|
6
6
|
max?: number;
|
|
7
|
-
|
|
7
|
+
color?: ZoraColor;
|
|
8
8
|
size?: ZoraControlSize;
|
|
9
9
|
}
|
|
10
|
-
export declare function resolveProgressRole(theme: SurfaceTheme,
|
|
10
|
+
export declare function resolveProgressRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics;
|
|
11
11
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,aAAa,CAwBxF"}
|
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
export function resolveProgressRole(theme,
|
|
2
|
-
switch (
|
|
1
|
+
export function resolveProgressRole(theme, color) {
|
|
2
|
+
switch (color) {
|
|
3
|
+
case 'secondary':
|
|
4
|
+
return theme.semantics.secondary;
|
|
5
|
+
case 'tertiary':
|
|
6
|
+
return theme.semantics.accent;
|
|
7
|
+
case 'quaternary':
|
|
8
|
+
return theme.semantics.highlight;
|
|
9
|
+
case 'error':
|
|
10
|
+
return theme.semantics.error;
|
|
11
|
+
case 'info':
|
|
12
|
+
return theme.semantics.info;
|
|
3
13
|
case 'primary':
|
|
4
14
|
return theme.semantics.action.primary;
|
|
5
15
|
case 'danger':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,mBAAmB,CAAC,KAAmB,EAAE,
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/progress/types.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,mBAAmB,CAAC,KAAmB,EAAE,KAAgB;IACvE,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,WAAW;YACd,OAAO,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QACnC,KAAK,UAAU;YACb,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;QAChC,KAAK,YAAY;YACf,OAAO,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;QACnC,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QAC/B,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9B,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QACxC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAC1C,CAAC;AACH,CAAC","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\n\nimport type { ZoraColor, ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ProgressProps extends ZoraBaseProps {\n value: number;\n max?: number;\n color?: ZoraColor;\n size?: ZoraControlSize;\n}\n\nexport function resolveProgressRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {\n switch (color) {\n case 'secondary':\n return theme.semantics.secondary;\n case 'tertiary':\n return theme.semantics.accent;\n case 'quaternary':\n return theme.semantics.highlight;\n case 'error':\n return theme.semantics.error;\n case 'info':\n return theme.semantics.info;\n case 'primary':\n return theme.semantics.action.primary;\n case 'danger':\n return theme.semantics.action.danger;\n case 'success':\n return theme.semantics.success;\n case 'warning':\n return theme.semantics.warning;\n case 'neutral':\n default:\n return theme.semantics.action.neutral;\n }\n}\n"]}
|
|
@@ -4,26 +4,26 @@ import { View } from 'react-native';
|
|
|
4
4
|
import { Stack } from '../../foundation';
|
|
5
5
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
6
6
|
import { Text } from '../text';
|
|
7
|
-
function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap = 's',
|
|
7
|
+
function RadioGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap = 's', color = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
|
|
8
8
|
const isHorizontal = orientation === 'horizontal';
|
|
9
9
|
return (<View testID={testID} accessibilityRole="radiogroup" style={{
|
|
10
10
|
flexDirection: isHorizontal ? 'row' : 'column',
|
|
11
11
|
flexWrap: isHorizontal ? 'wrap' : 'nowrap',
|
|
12
12
|
}}>
|
|
13
13
|
<Stack direction={isHorizontal ? 'row' : 'column'} gap={gap} wrap={isHorizontal ? 'wrap' : 'nowrap'}>
|
|
14
|
-
{options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size}
|
|
14
|
+
{options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size} color={color} onSelect={onValueChange}/>))}
|
|
15
15
|
</Stack>
|
|
16
16
|
</View>);
|
|
17
17
|
}
|
|
18
18
|
export const RadioGroup = withZoraThemeScope(RadioGroupInner);
|
|
19
|
-
function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size,
|
|
20
|
-
return (<Radio checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size}
|
|
19
|
+
function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size, color, onSelect, }) {
|
|
20
|
+
return (<Radio checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} color={color} testID={option.testID} onCheckedChange={(nextChecked) => {
|
|
21
21
|
if (nextChecked)
|
|
22
22
|
onSelect(option.value);
|
|
23
23
|
}}>
|
|
24
24
|
<Stack gap="xs">
|
|
25
25
|
<Text>{option.label}</Text>
|
|
26
|
-
{option.description ? (<Text
|
|
26
|
+
{option.description ? (<Text emphasis="muted" variant="caption">
|
|
27
27
|
{option.description}
|
|
28
28
|
</Text>) : null}
|
|
29
29
|
</Stack>
|