@ankhorage/zora 1.4.4 → 1.4.6

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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.4.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Fix mobile layout
8
+
9
+ ## 1.4.5
10
+
11
+ ### Patch Changes
12
+
13
+ - 76dd6d1: Fix mobile layout
14
+
3
15
  ## 1.4.4
4
16
 
5
17
  ### Patch Changes
@@ -1 +1 @@
1
- {"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAqC,SAAS,EAAE,MAAM,SAAS,CAAC;AAuG5E,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
1
+ {"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAqC,SAAS,EAAE,MAAM,SAAS,CAAC;AA2G5E,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
@@ -34,7 +34,9 @@ function HeroInner({ themeId: _themeId, mode: _mode, title, description, eyebrow
34
34
  {footer}
35
35
  </Stack>
36
36
  </Box>);
37
- const mediaSlot = hasMedia ? <Box flex={1}>{media}</Box> : null;
37
+ const mediaSlot = hasMedia ? (<Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
38
+ {media}
39
+ </Box>) : null;
38
40
  return (<Card compact={compact} testID={testID} tone={tone}>
39
41
  <Stack align="center" direction={direction} gap={compact ? 'm' : 'l'}>
40
42
  {mediaFirst ? mediaSlot : content}
@@ -1 +1 @@
1
- {"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { HeroAction, HeroAlign, HeroLayout, HeroProps } from './types';\n\nfunction HeroInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n primaryAction,\n secondaryAction,\n media,\n footer,\n align = 'start',\n layout = 'split',\n tone = 'subtle',\n compact = false,\n testID,\n}: HeroProps) {\n const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n const hasMedia = media !== undefined;\n const direction = resolveDirection(layout, hasMedia);\n const contentAlign = resolveContentAlign(align);\n const textAlign = align === 'center' ? 'center' : undefined;\n const mediaFirst = layout === 'mediaFirst';\n\n const content = (\n <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n <Stack align={contentAlign} gap={compact ? 's' : 'm'}>\n <Stack align={contentAlign} gap=\"xs\">\n {eyebrow !== undefined ? (\n <Text align={textAlign} tone=\"primary\" variant=\"eyebrow\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading\n align={textAlign}\n level={1}\n size={{ base: 'h2', md: compact ? 'h2' : 'display' }}\n >\n {title}\n </Heading>\n {description !== undefined ? (\n <Text\n tone=\"muted\"\n align={textAlign}\n variant={{ base: 'body', md: compact ? 'body' : 'lead' }}\n >\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {hasActions ? (\n <Stack\n align={contentAlign}\n direction={{ base: 'column', md: 'row' }}\n gap=\"s\"\n justify={align === 'center' ? 'center' : 'flex-start'}\n >\n {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}\n {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}\n </Stack>\n ) : null}\n\n {footer}\n </Stack>\n </Box>\n );\n\n const mediaSlot = hasMedia ? <Box flex={1}>{media}</Box> : null;\n\n return (\n <Card compact={compact} testID={testID} tone={tone}>\n <Stack align=\"center\" direction={direction} gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Stack>\n </Card>\n );\n}\n\nfunction renderAction(action: HeroAction, role: 'primary' | 'secondary') {\n return (\n <Button\n disabled={action.disabled}\n emphasis={action.emphasis ?? (role === 'primary' ? 'solid' : 'soft')}\n onPress={action.onPress}\n tone={action.tone ?? (role === 'primary' ? 'primary' : 'neutral')}\n >\n {action.label}\n </Button>\n );\n}\n\nfunction resolveContentAlign(align: HeroAlign) {\n return align === 'center' ? 'center' : 'flex-start';\n}\n\nfunction resolveDirection(layout: HeroLayout, hasMedia: boolean) {\n if (!hasMedia || layout === 'stack') return 'column' as const;\n return { base: 'column', md: 'row' } as const;\n}\n\nexport const Hero = withZoraThemeScope(HeroInner);\n"]}
1
+ {"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/patterns/hero/Hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { HeroAction, HeroAlign, HeroLayout, HeroProps } from './types';\n\nfunction HeroInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n primaryAction,\n secondaryAction,\n media,\n footer,\n align = 'start',\n layout = 'split',\n tone = 'subtle',\n compact = false,\n testID,\n}: HeroProps) {\n const hasActions = primaryAction !== undefined || secondaryAction !== undefined;\n const hasMedia = media !== undefined;\n const direction = resolveDirection(layout, hasMedia);\n const contentAlign = resolveContentAlign(align);\n const textAlign = align === 'center' ? 'center' : undefined;\n const mediaFirst = layout === 'mediaFirst';\n\n const content = (\n <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n <Stack align={contentAlign} gap={compact ? 's' : 'm'}>\n <Stack align={contentAlign} gap=\"xs\">\n {eyebrow !== undefined ? (\n <Text align={textAlign} tone=\"primary\" variant=\"eyebrow\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading\n align={textAlign}\n level={1}\n size={{ base: 'h2', md: compact ? 'h2' : 'display' }}\n >\n {title}\n </Heading>\n {description !== undefined ? (\n <Text\n tone=\"muted\"\n align={textAlign}\n variant={{ base: 'body', md: compact ? 'body' : 'lead' }}\n >\n {description}\n </Text>\n ) : null}\n </Stack>\n\n {hasActions ? (\n <Stack\n align={contentAlign}\n direction={{ base: 'column', md: 'row' }}\n gap=\"s\"\n justify={align === 'center' ? 'center' : 'flex-start'}\n >\n {primaryAction !== undefined ? renderAction(primaryAction, 'primary') : null}\n {secondaryAction !== undefined ? renderAction(secondaryAction, 'secondary') : null}\n </Stack>\n ) : null}\n\n {footer}\n </Stack>\n </Box>\n );\n\n const mediaSlot = hasMedia ? (\n <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n {media}\n </Box>\n ) : null;\n\n return (\n <Card compact={compact} testID={testID} tone={tone}>\n <Stack align=\"center\" direction={direction} gap={compact ? 'm' : 'l'}>\n {mediaFirst ? mediaSlot : content}\n {mediaFirst ? content : mediaSlot}\n </Stack>\n </Card>\n );\n}\n\nfunction renderAction(action: HeroAction, role: 'primary' | 'secondary') {\n return (\n <Button\n disabled={action.disabled}\n emphasis={action.emphasis ?? (role === 'primary' ? 'solid' : 'soft')}\n onPress={action.onPress}\n tone={action.tone ?? (role === 'primary' ? 'primary' : 'neutral')}\n >\n {action.label}\n </Button>\n );\n}\n\nfunction resolveContentAlign(align: HeroAlign) {\n return align === 'center' ? 'center' : 'flex-start';\n}\n\nfunction resolveDirection(layout: HeroLayout, hasMedia: boolean) {\n if (!hasMedia || layout === 'stack') return 'column' as const;\n return { base: 'column', md: 'row' } as const;\n}\n\nexport const Hero = withZoraThemeScope(HeroInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,SAAS,CAAC;AA4F3D,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
1
+ {"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,SAAS,CAAC;AA6F3D,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
@@ -24,6 +24,7 @@ function resolveRoleSemantics(theme, tone) {
24
24
  function TimelineInner({ themeId: _themeId, mode: _mode, testID, items, compact = false, }) {
25
25
  const { theme } = useZoraTheme();
26
26
  const gap = compact ? 'm' : 'l';
27
+ const connectorHeight = compact ? 20 : 36;
27
28
  const renderItem = (item, index) => {
28
29
  const status = item.status ?? 'neutral';
29
30
  const role = resolveRoleSemantics(theme, status);
@@ -35,7 +36,7 @@ function TimelineInner({ themeId: _themeId, mode: _mode, testID, items, compact
35
36
  {item.icon ? (<Icon color={status === 'neutral' ? theme.semantics.content.muted : role.base} name={item.icon.name} provider={item.icon.provider} size={iconSize}/>) : null}
36
37
  </Box>
37
38
 
38
- {showConnector ? (<Box bg={theme.semantics.neutral.divider} flex={1} radius="full" style={{ minHeight: 16, width: 2 }}/>) : null}
39
+ {showConnector ? (<Box bg={theme.semantics.neutral.divider} height={connectorHeight} radius="full" style={{ width: 2 }}/>) : null}
39
40
  </Stack>
40
41
 
41
42
  <Stack flex={1} gap="xs" testID={testID}>
@@ -1 +1 @@
1
- {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Icon } from '../../components/icon';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport type { ZoraTone } from '../../internal/recipes';\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { TimelineItem, TimelineProps } from './types';\n\nfunction resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {\n switch (tone) {\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\nfunction TimelineInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n items,\n compact = false,\n}: TimelineProps) {\n const { theme } = useZoraTheme();\n const gap = compact ? 'm' : 'l';\n\n const renderItem = (item: TimelineItem, index: number) => {\n const status = item.status ?? 'neutral';\n const role = resolveRoleSemantics(theme, status);\n const showConnector = index < items.length - 1;\n const iconSize = Math.max(12, resolveIconSize('s'));\n\n return (\n <Inline key={item.id} align=\"flex-start\" gap=\"m\" testID={item.testID} wrap=\"nowrap\">\n <Stack align=\"center\" flexShrink={0} gap=\"xs\" style={{ width: 24 }}>\n <Box\n bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}\n borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}\n borderWidth={1}\n height={20}\n radius=\"full\"\n width={20}\n style={{ alignItems: 'center', justifyContent: 'center' }}\n >\n {item.icon ? (\n <Icon\n color={status === 'neutral' ? theme.semantics.content.muted : role.base}\n name={item.icon.name}\n provider={item.icon.provider}\n size={iconSize}\n />\n ) : null}\n </Box>\n\n {showConnector ? (\n <Box\n bg={theme.semantics.neutral.divider}\n flex={1}\n radius=\"full\"\n style={{ minHeight: 16, width: 2 }}\n />\n ) : null}\n </Stack>\n\n <Stack flex={1} gap=\"xs\" testID={testID}>\n <Inline align=\"flex-start\" gap=\"s\" justify=\"space-between\" wrap=\"wrap\">\n <Heading level={compact ? 4 : 3}>{item.title}</Heading>\n {item.meta ? (\n <Text tone=\"muted\" variant=\"caption\">\n {item.meta}\n </Text>\n ) : null}\n </Inline>\n {item.description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {item.description}\n </Text>\n ) : null}\n </Stack>\n </Inline>\n );\n };\n\n return (\n <Stack gap={gap} testID={testID}>\n {items.map(renderItem)}\n </Stack>\n );\n}\n\nexport const Timeline = withZoraThemeScope(TimelineInner);\n"]}
1
+ {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Icon } from '../../components/icon';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport type { ZoraTone } from '../../internal/recipes';\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { TimelineItem, TimelineProps } from './types';\n\nfunction resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {\n switch (tone) {\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\nfunction TimelineInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n items,\n compact = false,\n}: TimelineProps) {\n const { theme } = useZoraTheme();\n const gap = compact ? 'm' : 'l';\n const connectorHeight = compact ? 20 : 36;\n\n const renderItem = (item: TimelineItem, index: number) => {\n const status = item.status ?? 'neutral';\n const role = resolveRoleSemantics(theme, status);\n const showConnector = index < items.length - 1;\n const iconSize = Math.max(12, resolveIconSize('s'));\n\n return (\n <Inline key={item.id} align=\"flex-start\" gap=\"m\" testID={item.testID} wrap=\"nowrap\">\n <Stack align=\"center\" flexShrink={0} gap=\"xs\" style={{ width: 24 }}>\n <Box\n bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}\n borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}\n borderWidth={1}\n height={20}\n radius=\"full\"\n width={20}\n style={{ alignItems: 'center', justifyContent: 'center' }}\n >\n {item.icon ? (\n <Icon\n color={status === 'neutral' ? theme.semantics.content.muted : role.base}\n name={item.icon.name}\n provider={item.icon.provider}\n size={iconSize}\n />\n ) : null}\n </Box>\n\n {showConnector ? (\n <Box\n bg={theme.semantics.neutral.divider}\n height={connectorHeight}\n radius=\"full\"\n style={{ width: 2 }}\n />\n ) : null}\n </Stack>\n\n <Stack flex={1} gap=\"xs\" testID={testID}>\n <Inline align=\"flex-start\" gap=\"s\" justify=\"space-between\" wrap=\"wrap\">\n <Heading level={compact ? 4 : 3}>{item.title}</Heading>\n {item.meta ? (\n <Text tone=\"muted\" variant=\"caption\">\n {item.meta}\n </Text>\n ) : null}\n </Inline>\n {item.description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {item.description}\n </Text>\n ) : null}\n </Stack>\n </Inline>\n );\n };\n\n return (\n <Stack gap={gap} testID={testID}>\n {items.map(renderItem)}\n </Stack>\n );\n}\n\nexport const Timeline = withZoraThemeScope(TimelineInner);\n"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ankhorage/zora",
3
3
  "type": "module",
4
- "version": "1.4.4",
4
+ "version": "1.4.6",
5
5
  "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
6
6
  "homepage": "https://github.com/ankhorage/zora#readme",
7
7
  "bugs": {
@@ -75,7 +75,11 @@ function HeroInner({
75
75
  </Box>
76
76
  );
77
77
 
78
- const mediaSlot = hasMedia ? <Box flex={1}>{media}</Box> : null;
78
+ const mediaSlot = hasMedia ? (
79
+ <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
80
+ {media}
81
+ </Box>
82
+ ) : null;
79
83
 
80
84
  return (
81
85
  <Card compact={compact} testID={testID} tone={tone}>
@@ -36,6 +36,7 @@ function TimelineInner({
36
36
  }: TimelineProps) {
37
37
  const { theme } = useZoraTheme();
38
38
  const gap = compact ? 'm' : 'l';
39
+ const connectorHeight = compact ? 20 : 36;
39
40
 
40
41
  const renderItem = (item: TimelineItem, index: number) => {
41
42
  const status = item.status ?? 'neutral';
@@ -68,9 +69,9 @@ function TimelineInner({
68
69
  {showConnector ? (
69
70
  <Box
70
71
  bg={theme.semantics.neutral.divider}
71
- flex={1}
72
+ height={connectorHeight}
72
73
  radius="full"
73
- style={{ minHeight: 16, width: 2 }}
74
+ style={{ width: 2 }}
74
75
  />
75
76
  ) : null}
76
77
  </Stack>