@ankhorage/zora 1.0.5 → 1.0.7

package/dist/patterns/list/ListSection.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { SectionHeader } from '../section-header';
+import { List } from './List';
+function ListSectionInner({ themeId: _themeId, mode: _mode, testID, title, description, eyebrow, actions, ...props }) {
+    const hasHeader = title !== undefined;
+    return (<Stack gap="s" testID={testID}>
+      {hasHeader ? (<SectionHeader actions={actions} description={description} eyebrow={eyebrow} title={title}/>) : null}
+      <List {...props}/>
+    </Stack>);
+}
+export const ListSection = withZoraThemeScope(ListSectionInner);
+//# sourceMappingURL=ListSection.js.map

package/dist/patterns/list/ListSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSection.js","sourceRoot":"","sources":["../../../src/patterns/list/ListSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACS;IACjB,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;IAEtC,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC5B;MAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,aAAa,CACZ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAClB;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { SectionHeader } from '../section-header';\nimport { List } from './List';\nimport type { ListSectionProps } from './types';\n\nfunction ListSectionInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  title,\n  description,\n  eyebrow,\n  actions,\n  ...props\n}: ListSectionProps) {\n  const hasHeader = title !== undefined;\n\n  return (\n    <Stack gap=\"s\" testID={testID}>\n      {hasHeader ? (\n        <SectionHeader\n          actions={actions}\n          description={description}\n          eyebrow={eyebrow}\n          title={title}\n        />\n      ) : null}\n      <List {...props} />\n    </Stack>\n  );\n}\n\nexport const ListSection = withZoraThemeScope(ListSectionInner);\n"]}

package/dist/patterns/list/index.d.ts

@@ -0,0 +1,5 @@
+export { List } from './List';
+export { ListRow } from './ListRow';
+export { ListSection } from './ListSection';
+export type { ListChildrenProps, ListItemsProps, ListProps, ListRowProps, ListRowVariant, ListSectionProps, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC"}

package/dist/patterns/list/index.js

@@ -0,0 +1,4 @@
+export { List } from './List';
+export { ListRow } from './ListRow';
+export { ListSection } from './ListSection';
+//# sourceMappingURL=index.js.map

package/dist/patterns/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { List } from './List';\nexport { ListRow } from './ListRow';\nexport { ListSection } from './ListSection';\nexport type {\n  ListChildrenProps,\n  ListItemsProps,\n  ListProps,\n  ListRowProps,\n  ListRowVariant,\n  ListSectionProps,\n} from './types';\n"]}

package/dist/patterns/list/resolveListSeparator.d.ts

@@ -0,0 +1,5 @@
+import type { ListRowVariant } from './types';
+type ListSeparatorKind = 'none' | 'divider' | 'spacer';
+export declare function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind;
+export {};
+//# sourceMappingURL=resolveListSeparator.d.ts.map

package/dist/patterns/list/resolveListSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveListSeparator.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/resolveListSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAG9F"}

package/dist/patterns/list/resolveListSeparator.js

@@ -0,0 +1,6 @@
+export function resolveListSeparator(variant, index) {
+    if (index === 0)
+        return 'none';
+    return variant === 'divider' ? 'divider' : 'spacer';
+}
+//# sourceMappingURL=resolveListSeparator.js.map

package/dist/patterns/list/resolveListSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveListSeparator.js","sourceRoot":"","sources":["../../../src/patterns/list/resolveListSeparator.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,oBAAoB,CAAC,OAAuB,EAAE,KAAa;IACzE,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,MAAM,CAAC;IAC/B,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AACtD,CAAC","sourcesContent":["import type { ListRowVariant } from './types';\n\ntype ListSeparatorKind = 'none' | 'divider' | 'spacer';\n\nexport function resolveListSeparator(variant: ListRowVariant, index: number): ListSeparatorKind {\n  if (index === 0) return 'none';\n  return variant === 'divider' ? 'divider' : 'spacer';\n}\n"]}

package/dist/patterns/list/types.d.ts

@@ -0,0 +1,55 @@
+import type React from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export type ListRowVariant = 'divider' | 'card';
+interface ListRowBaseProps extends ZoraBaseProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+    variant?: ListRowVariant;
+}
+interface ListRowPressableProps {
+    onPress: () => void;
+    action?: never;
+}
+interface ListRowActionProps {
+    action: React.ReactNode;
+    onPress?: never;
+}
+interface ListRowStaticProps {
+    action?: never;
+    onPress?: never;
+}
+export type ListRowProps = ListRowBaseProps & (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);
+export interface ListItemsProps extends ZoraBaseProps {
+    items: readonly ListRowProps[];
+    rowVariant?: ListRowVariant;
+    compact?: boolean;
+}
+export interface ListChildrenProps extends ZoraBaseProps {
+    children: React.ReactNode;
+}
+export type ListProps = ListItemsProps | ListChildrenProps;
+export interface ListSectionItemsProps extends ZoraBaseProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    actions?: React.ReactNode;
+    items: readonly ListRowProps[];
+    rowVariant?: ListRowVariant;
+    compact?: boolean;
+}
+export interface ListSectionChildrenProps extends ZoraBaseProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+}
+export type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/list/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,UAAU,gBAAiB,SAAQ,aAAa;IAC9C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC1B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,qBAAqB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE3D,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,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,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,aAAa;IAC7D,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,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,wBAAwB,CAAC"}

package/dist/patterns/list/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/patterns/list/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/list/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ListRowVariant = 'divider' | 'card';\n\ninterface ListRowBaseProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n  variant?: ListRowVariant;\n}\n\ninterface ListRowPressableProps {\n  onPress: () => void;\n  action?: never;\n}\n\ninterface ListRowActionProps {\n  action: React.ReactNode;\n  onPress?: never;\n}\n\ninterface ListRowStaticProps {\n  action?: never;\n  onPress?: never;\n}\n\nexport type ListRowProps = ListRowBaseProps &\n  (ListRowPressableProps | ListRowActionProps | ListRowStaticProps);\n\nexport interface ListItemsProps extends ZoraBaseProps {\n  items: readonly ListRowProps[];\n  rowVariant?: ListRowVariant;\n  compact?: boolean;\n}\n\nexport interface ListChildrenProps extends ZoraBaseProps {\n  children: React.ReactNode;\n}\n\nexport type ListProps = ListItemsProps | ListChildrenProps;\n\nexport interface ListSectionItemsProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  items: readonly ListRowProps[];\n  rowVariant?: ListRowVariant;\n  compact?: boolean;\n}\n\nexport interface ListSectionChildrenProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport type ListSectionProps = ListSectionItemsProps | ListSectionChildrenProps;\n"]}

package/dist/patterns/timeline/Timeline.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TimelineProps } from './types';
+export declare const Timeline: (props: TimelineProps) => React.ReactElement | null;
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/patterns/timeline/Timeline.d.ts.map

@@ -0,0 +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"}

package/dist/patterns/timeline/Timeline.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Heading } from '../../components/heading';
+import { Icon } from '../../components/icon';
+import { Text } from '../../components/text';
+import { Box, Inline, Stack } from '../../foundation';
+import { resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function resolveRoleSemantics(theme, tone) {
+    switch (tone) {
+        case 'primary':
+            return theme.semantics.action.primary;
+        case 'danger':
+            return theme.semantics.action.danger;
+        case 'success':
+            return theme.semantics.success;
+        case 'warning':
+            return theme.semantics.warning;
+        case 'neutral':
+        default:
+            return theme.semantics.action.neutral;
+    }
+}
+function TimelineInner({ themeId: _themeId, mode: _mode, testID, items, compact = false, }) {
+    const { theme } = useZoraTheme();
+    const gap = compact ? 'm' : 'l';
+    const renderItem = (item, index) => {
+        const status = item.status ?? 'neutral';
+        const role = resolveRoleSemantics(theme, status);
+        const showConnector = index < items.length - 1;
+        const iconSize = Math.max(12, resolveIconSize('s'));
+        return (<Inline key={item.id} align="flex-start" gap="m" testID={item.testID} wrap="nowrap">
+        <Stack align="center" flexShrink={0} gap="xs" style={{ width: 24 }}>
+          <Box bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg} borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base} borderWidth={1} height={20} radius="full" width={20} style={{ alignItems: 'center', justifyContent: 'center' }}>
+            {item.icon ? (<Icon color={status === 'neutral' ? theme.semantics.content.muted : role.base} name={item.icon.name} provider={item.icon.provider} size={iconSize}/>) : null}
+          </Box>
+
+          {showConnector ? (<Box bg={theme.semantics.neutral.divider} flex={1} radius="full" style={{ minHeight: 16, width: 2 }}/>) : null}
+        </Stack>
+
+        <Stack flex={1} gap="xs" testID={testID}>
+          <Inline align="flex-start" gap="s" justify="space-between" wrap="wrap">
+            <Heading level={compact ? 4 : 3}>{item.title}</Heading>
+            {item.meta ? (<Text tone="muted" variant="caption">
+                {item.meta}
+              </Text>) : null}
+          </Inline>
+          {item.description ? (<Text tone="muted" variant="bodySmall">
+              {item.description}
+            </Text>) : null}
+        </Stack>
+      </Inline>);
+    };
+    return (<Stack gap={gap} testID={testID}>
+      {items.map(renderItem)}
+    </Stack>);
+}
+export const Timeline = withZoraThemeScope(TimelineInner);
+//# sourceMappingURL=Timeline.js.map

package/dist/patterns/timeline/Timeline.js.map

@@ -0,0 +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"]}

package/dist/patterns/timeline/index.d.ts

@@ -0,0 +1,3 @@
+export { Timeline } from './Timeline';
+export type { TimelineItem, TimelineProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/patterns/timeline/index.js

@@ -0,0 +1,2 @@
+export { Timeline } from './Timeline';
+//# sourceMappingURL=index.js.map

package/dist/patterns/timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { Timeline } from './Timeline';\nexport type { TimelineItem, TimelineProps } from './types';\n"]}

package/dist/patterns/timeline/types.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface TimelineItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    status?: ZoraTone;
+    icon?: ButtonIconSpec;
+    testID?: string;
+}
+export interface TimelineProps extends ZoraBaseProps {
+    items: readonly TimelineItem[];
+    compact?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/timeline/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/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,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/patterns/timeline/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/patterns/timeline/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/timeline/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface TimelineItem {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: ZoraTone;\n  icon?: ButtonIconSpec;\n  testID?: string;\n}\n\nexport interface TimelineProps extends ZoraBaseProps {\n  items: readonly TimelineItem[];\n  compact?: boolean;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/components/media-card/MediaCard.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import { Box, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Card } from '../card';
+import { Heading } from '../heading';
+import { Text } from '../text';
+import type { MediaCardProps } from './types';
+
+function resolveImageAspectRatio(
+  imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,
+) {
+  if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {
+    return 16 / 9;
+  }
+
+  return imageAspectRatio;
+}
+
+function MediaCardInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  imageSource,
+  imageLabel,
+  image,
+  imageAspectRatio = 16 / 9,
+  title,
+  description,
+  eyebrow,
+  badges,
+  actions,
+  footer,
+  children,
+  tone = 'default',
+  compact = false,
+  onPress,
+}: MediaCardProps) {
+  const { theme } = useZoraTheme();
+  const gap = compact ? 's' : 'm';
+  const isInteractive = Boolean(onPress) && !actions;
+  const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);
+
+  const renderImage = () => {
+    if (image) {
+      return (
+        <Box radius="m" style={{ overflow: 'hidden' }}>
+          {image}
+        </Box>
+      );
+    }
+
+    if (!imageSource) {
+      return null;
+    }
+
+    return (
+      <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
+          <Image
+            accessibilityLabel={imageLabel}
+            source={imageSource}
+            style={{ height: '100%', width: '100%' }}
+          />
+        </Box>
+      </Box>
+    );
+  };
+
+  const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);
+
+  return (
+    <Card
+      compact={compact}
+      onPress={isInteractive ? onPress : undefined}
+      testID={testID}
+      tone={tone}
+    >
+      <Stack gap={gap}>
+        {renderImage()}
+
+        {hasHeader ? (
+          <Stack
+            align={{ base: 'flex-start', md: 'center' }}
+            direction={{ base: 'column', md: 'row' }}
+            gap="m"
+            justify="space-between"
+          >
+            <Box flex={1}>
+              <Stack gap="xs">
+                {eyebrow ? (
+                  <Text tone="muted" variant="caption" weight="semiBold">
+                    {eyebrow}
+                  </Text>
+                ) : null}
+                <Stack gap="xs">
+                  <Heading level={compact ? 4 : 3}>{title}</Heading>
+                  {badges ? <Box>{badges}</Box> : null}
+                </Stack>
+                {description ? (
+                  <Text tone="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {actions ? <Box>{actions}</Box> : null}
+          </Stack>
+        ) : null}
+
+        {children ? <Box>{children}</Box> : null}
+        {footer ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </Card>
+  );
+}
+
+export const MediaCard = withZoraThemeScope(MediaCardInner);

package/src/components/media-card/index.ts

@@ -0,0 +1,2 @@
+export { MediaCard } from './MediaCard';
+export type { MediaCardImageProps, MediaCardProps } from './types';

package/src/components/media-card/types.ts

@@ -0,0 +1,44 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { ZoraCardTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+interface MediaCardWithImageSource {
+  imageSource: ImageSourcePropType;
+  imageLabel?: string;
+  image?: never;
+}
+
+interface MediaCardWithImageSlot {
+  image: React.ReactNode;
+  imageSource?: never;
+  imageLabel?: never;
+}
+
+interface MediaCardWithoutImage {
+  image?: never;
+  imageSource?: never;
+  imageLabel?: never;
+}
+
+export type MediaCardImageProps =
+  | MediaCardWithImageSource
+  | MediaCardWithImageSlot
+  | MediaCardWithoutImage;
+
+interface MediaCardBaseProps extends ZoraBaseProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  badges?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  onPress?: () => void;
+  imageAspectRatio?: number;
+}
+
+export type MediaCardProps = MediaCardBaseProps & MediaCardImageProps;

package/src/components/metric-card/MetricCard.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Box, Inline, Stack } from '../../foundation';
+import { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Badge } from '../badge';
+import { Card } from '../card';
+import { Heading } from '../heading';
+import { Icon } from '../icon';
+import { Text } from '../text';
+import type { MetricCardProps } from './types';
+
+function MetricCardInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  label,
+  value,
+  description,
+  icon,
+  delta,
+  deltaTone = 'neutral',
+  actions,
+  tone = 'default',
+  compact = false,
+  onPress,
+}: MetricCardProps) {
+  const { theme } = useZoraTheme();
+  const isInteractive = Boolean(onPress) && !actions;
+
+  const badgeRecipe = resolveBadgeRecipe({ tone: deltaTone, emphasis: 'soft', size: 's' });
+  const iconColor = theme.semantics.content.muted;
+
+  return (
+    <Card
+      compact={compact}
+      onPress={isInteractive ? onPress : undefined}
+      testID={testID}
+      tone={tone}
+    >
+      <Stack gap={compact ? 's' : 'm'}>
+        <Inline align="flex-start" gap="m" justify="space-between">
+          <Stack flex={1} gap="xs">
+            <Inline align="center" gap="xs" wrap="wrap">
+              {icon ? (
+                <Icon
+                  color={iconColor}
+                  name={icon.name}
+                  provider={icon.provider}
+                  size={resolveIconSize('s')}
+                />
+              ) : null}
+              <Text tone="muted" variant="caption" weight="semiBold">
+                {label}
+              </Text>
+              {delta != null ? (
+                <Badge
+                  emphasis={badgeRecipe.variant}
+                  size={badgeRecipe.size}
+                  tone={badgeRecipe.tone}
+                >
+                  {delta}
+                </Badge>
+              ) : null}
+            </Inline>
+
+            <Heading level={compact ? 3 : 2}>{value}</Heading>
+
+            {description ? (
+              <Text tone="muted" variant="bodySmall">
+                {description}
+              </Text>
+            ) : null}
+          </Stack>
+
+          {actions ? <Box>{actions}</Box> : null}
+        </Inline>
+      </Stack>
+    </Card>
+  );
+}
+
+export const MetricCard = withZoraThemeScope(MetricCardInner);

package/src/components/metric-card/index.ts

@@ -0,0 +1,2 @@
+export { MetricCard } from './MetricCard';
+export type { MetricCardProps } from './types';

package/src/components/metric-card/types.ts

@@ -0,0 +1,18 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface MetricCardProps extends ZoraBaseProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: ButtonIconSpec;
+  delta?: React.ReactNode;
+  deltaTone?: ZoraTone;
+  actions?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  onPress?: () => void;
+}

package/src/components/progress/Progress.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Box } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveProgressFraction } from './resolveProgressFraction';
+import { type ProgressProps, resolveProgressRole } from './types';
+
+function resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {
+  switch (size) {
+    case 's':
+      return 4;
+    case 'm':
+      return 6;
+    case 'l':
+    default:
+      return 8;
+  }
+}
+
+function ProgressInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  value,
+  max = 100,
+  tone = 'primary',
+  size = 'm',
+}: ProgressProps) {
+  const { theme } = useZoraTheme();
+  const fraction = resolveProgressFraction({ value, max });
+  const height = resolveProgressHeight(size);
+  const role = resolveProgressRole(theme, tone);
+
+  return (
+    <Box
+      accessibilityRole="progressbar"
+      bg={theme.semantics.neutral.surface}
+      borderColor={theme.semantics.neutral.divider}
+      borderWidth={1}
+      radius="full"
+      testID={testID}
+      style={{ height, overflow: 'hidden' }}
+    >
+      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
+    </Box>
+  );
+}
+
+export const Progress = withZoraThemeScope(ProgressInner);

package/src/components/progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress } from './Progress';
+export type { ProgressProps } from './types';

package/src/components/progress/resolveProgressFraction.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveProgressFraction } from './resolveProgressFraction';
+
+describe('resolveProgressFraction', () => {
+  test('clamps values to [0, 1]', () => {
+    expect(resolveProgressFraction({ value: -5, max: 10 })).toBe(0);
+    expect(resolveProgressFraction({ value: 0, max: 10 })).toBe(0);
+    expect(resolveProgressFraction({ value: 5, max: 10 })).toBe(0.5);
+    expect(resolveProgressFraction({ value: 10, max: 10 })).toBe(1);
+    expect(resolveProgressFraction({ value: 15, max: 10 })).toBe(1);
+  });
+
+  test('returns 0 for invalid max', () => {
+    expect(resolveProgressFraction({ value: 5, max: 0 })).toBe(0);
+    expect(resolveProgressFraction({ value: 5, max: -3 })).toBe(0);
+    expect(resolveProgressFraction({ value: 5, max: Number.NaN })).toBe(0);
+  });
+
+  test('returns 0 for invalid value', () => {
+    expect(resolveProgressFraction({ value: Number.NaN, max: 10 })).toBe(0);
+  });
+});